Web前端开发应用课程教学大纲

《Web前端基础应用》课程教学大纲（一）课程性质与任务Web前端基础应用是高等专科院校学生必修的一门专业课。本课程的任务是：本书将从HTML文件的基本结构是什么，到使用HTML标签制作简单的网页，一直到最后使用DIV+CSS制作精美的商业网站，以这样一个循序渐进的讲解过程，帮助大家完成不会→会→熟练→精通网页制作的蜕变。学习完本门课程后，大家都能够掌握网页制作的精髓，快速而熟练地制作网页。（二）课程教学目标本课程是Web前端基础应用，其最主要的目标是激发学生的学习兴趣，培养学生自我约束、自我学习的能力，最终使学生养成良好的学习习惯，为其今后的职业生活、继续学习和终生发展奠定坚实的基础。本课程介绍了HTML和W3C标准以及HTML文件基本结构，主要讲述了网页制作的基础知识，重点学习了制作网页的基本标签，如链接、表格、表单、列表，框架等。通过这3章基础知识的学习，读者对网页可以有一定的了解，知道如何在网页中添加基本的元素，结合教学案例，让读者学以致用，最后使读者制作出简单的网页。本书深入浅出地讲解了网页的概念和制作网页的方法以及目前流行的各种制作网页的技术和常用的网页制作工具。每章针对技能点都设计了相应的案例，而且每个案例都考虑了这项技术的实用性、趣味性，并将这种特色融于例子中，这些例子都具备关键代码，以方便读者边学边练。（三）教学内容与要求1．HTML基础在网络如此发达的今天，大家的生活、学习和工作基本上都离不开网络。大家经常浏览的新闻页面、微博和微信等各种从网上获得信息的途径，不论是PC终端，还是移动客户端，基本上都是以Web为基础来呈现的，因此Web页面呈现信息已成为各种信息共享和发布的主要形式。而HTML（HyperTextMarkupLanguage，超文本标记语言，在有些书籍中也翻译为超文本标签语言）则是创建Web页面的基础。本书将从HTML文件的基本结构是什么，到使用HTML标签制作简单的网页，一直到最后使用DIV+CSS制作精美的商业网站，以这样一个循序渐进的讲解过程，帮助大家完成不会→会→熟练→精通网页制作的蜕变。学习完本门课程后，大家都能够掌握网页制作的精髓，快速而熟练地制作网页。本章将讲解网页制作中的基础内容，给大家打下一个牢固的基础，即本章的重点内容是HTML文件的基本结构和W3C标准，以及制作网页常用的基本标签。2．列表、表格与框架列表在网页制作中占据着重要的位置，许多精美、漂亮的网页中都使用了列表。本章将向大家介绍列表的概念及相关的使用方法，通过练习掌握列表应用的技巧，从而可以制作出精美的网页。同时，在制作网页时，表格是一种不可或缺的数据展示工具，使用表格可以灵活地实现数据展示，表格在很多页面中还发挥着页面排版的作用。对于页面的排版和设计，框架也是网页制作过程中一种普遍采用的方式，使用框架可以极大地提高页面的复用程度，减少重复开发，因此掌握框架技术也是网页制作人员应该具备的基本技能。3．表单表单是实现用户与网页之间信息交互的基础，通过在网页中添加表单可以实现诸如会员注册、用户登录、提交资料等交互功能。本章将主要讲解如何在网页中制作表单，并使用表单元素创建表单。为了能够提供对当前互联网搜索引擎的支持，还讲解如何制作符合语义化规范要求的表单。4．初识CSS本章将介绍为什么使用CSS、CSS基本语法、CSS的选择器，以及如何在网页中应用CSS样式，最后讲解CSS复合选择器和CSS的继承特性。重点是掌握CSS基本语法、它的3种基本选择器，以及在HTML页面添加CSS的方式。5．CSS美化网页元素本章从基础的文字样式设置开始，详细讲解使用CSS设置文字的各种效果，文字与图片的混排效果，试用CSS设置超链接各种方式，最后讲解网页中背景颜色、背景图片的各种设置方法和列表样式的设置方法。通过本章的学习，可以对网页的文本、图片、列表、超链接设置各种各样的效果，使网页看起来美观大方、赏心悦目。6．盒子模式会用到盒子模型的知识。所以掌握了盒子模型的属性及用法，才能真正地控制好页面中的各个元素。本章主要介绍盒子模型的基本概念，盒子模型的边框、内边距和外边距，以及它们在网页中的实际应用，最后介绍标准文档流和display属性在网页中的用法。相信学完本章以后，大家在网页制作的水平上会有一个很大的提升。7．浮动使用DIV+CSS进行网页布局实际上是使用CSS定位、排版网页元素，这是一种很新的排版理念，完全有别于传统的排版习惯，它首先对div标签进行分类，然后使用CSS对各个div进行CSS定位，最后在各个div中编辑页面内容，这样就实现了表现与内容分离，在后期维护CSS十分容易，那么如何使用CSS定位网页元素呢？这就是本章重点要讲解的内容——浮动，使用浮动定位网页元素，并且根据网页布局需要对浮动进行清除或处理溢出内容，因此本章主要学习的内容有3点。(1)使用float属性定位网页元素。(2)使用clear属性清除浮动。(3)使用overflow属性进行溢出处理。8．定位网页元素在前面的章节中讲解了浮动的概念，以及使用浮动布局网页、定位网页元素，本章将要讲解网页制作中另一个重要属性position，介绍使用position定位网页元素，以及设置元素堆叠顺序的z-index属性。通过本章的学习，将能够完成网页中更为复杂的布局和元素定位。本章主要学习的内容有以下两点。(1)使用position属性定位网页元素。(2)使用z-index属性设置元素的堆叠顺序。9．指导学习：课程总复习本章将进行复习总结，把前面章节中学习过的知识进行综合运用，通过制作开心网游戏页面，使大家在巩固HTML标签、CSS知识的同时，对CSS综合运用的能力也有一个大幅度的提高。10．项目案例：制作V+网站到本章为止，这门课程已接近尾声。通过前面章节的学习和上机训练，相信大家已经可以游刃有余地使用DIV+CSS布局并制作较为复杂的网页了。为了使大家能够更好地练习使用CSS布局、美化网页，熟练、快速地制作网页，本次课让大家制作凡客诚品旗下“V+”网站，综合运用学习过的知识，巩固使用HTML编辑网页，使用CSS布局并美化网页，牢固掌握学习过的知识和技能点。（四）教学实施1.教学时数安排建议60学时。其中：序号内容学时数1HTML基础42列表、表格与框架43表单44初识CSS45CSS美化网页元素46盒子模式47浮动48定位网页元素49指导学习：课程总复习410指导学习：课程总复习411项目案例：制作V+网站412项目案例：制作V+网站413项目案例：制作V+网站414项目答辩415项目答辩42.教学建议（1）在教学方法上，应发挥教师在教学设计、教学组织中的主导作用，结合现有的教学条件，灵活运用各种教学方法开展教学，注重学生实际动手能力的培养，发挥学生在教学中的主体地位。（2）在本课程中建议广泛采用现代教育技术的成果丰富课堂内容，激发学生学习兴趣。（3）在本课程教学中，注重以学生为主，强调学做结合，可采用项目、案例等形式组织教学内容。3.教材选用建议(可多个教材)序号名称、版本号主编出版社ISBN单价出版时间01自主编制教材（五）考核与评价1．建立过程评价与目标评价并重的评价体系，引导学生具有严谨的学风和认真负责的态度。2．改变传统的评价方式，根据任务引领型课程的教学要求，将过程评价与目标评价相结合、定性评价与定量评价相结合，充分关注学生的个性差异，发挥评价的激励作用，保护学生的自尊心，激发学生的自信心和学习兴趣。3．充分肯定学生的多元思维和创造性的实践活动，并进行正确评价和引导。