网页设计与制作教程-Web前端开发 第7版 -教学大纲-课程标准-64课时

PAGEPAGE6《Web前端开发》课程标准学分：4参考学时：64一、课程概述1．课程性质《Web前端开发》（以前称《网页设计与制作》）课程是计算机科学与技术、软件工程、计算机信息管理、电子商务专业、物联网工程专业的一门专业基础课程。本课程的先修课程是《网络与Web技术导论》、《Java编程基础》等，后续课程有《响应式Web设计》以及前端设计与开发方向的生产性实训，在以核心职业能力为培养目标的课程体系中，起到承前启后的作用。本课程以Web基本概念和Web标准为基准点、通过对Web前端主流开发技术的学习和研究，让学生理解和掌握HTML5、CSS3和JavaScript脚本语言的相关知识，通过这门课程的教学，不仅使学生通过项目实践培养学生开发和设计Web站点的基本技能，更要使学生充分了解Web思想，为进一步学习后续课程打下良好的基础。2．课程教学目标与基本要求本课程的教学目标是让学生理解HTML5、CSS3和JavaScript脚本语言的基本语法，掌握常用的Web页面布局技术，理解并熟练应用Java常用对象的属性方法，使用DOM技术编写页面的客户端程序，通过项目实训，培养学生具备设计实现Web客户端页面的初步能力。本课程教学基本要求是让学生理解Web设计的基本原则、栏目和网站目录结构定义、标准页面布局方法、导航菜单制作、图文排版、页面交互等方面的基础知识；能够熟练运用HTML5中的文字、链接、列表、表格、表单、图像、多媒体等标记语言设计制作网页；熟练掌握CSS3对网页进行布局和修饰的基本方法；掌握JavaScript脚本语言的基本语法，理解对象的概念及使用JavaScript来编写客户端脚本程序。3.教学内容课程内容大体分为4部分：第一部分为HTML5的基本结构和语法规则，包括HTML标签的块级元素、行级元素，HTML5的拖放和画布等内容；第二部分重点介绍CSS3的基本语法和选择器，包括CSS3的属性、CSS的盒模型、CSS3变形、过渡和动画属性等内容；第三部分介绍JavaScript程序设计基础、对象模型和事件处理；第四部分为综合案例。4.教学时数教学总时数为64学时，其中理论32学时，实验32学时。5.教学方式采用课堂讲授和上机实践相结合的教学方式。二、课程内容（一）理论部分1.HTML5概述教学要点：Web的基本概念，HTML5的基本结构和语法规则，编辑HTML文件。教学时数：2学时。教学内容：1.1Web的基本概念介绍WWW、Web服务器、网页浏览器、网站、网页、URL、标记语言、网页标准等概念。1.2HTML5的基本结构和语法规则介绍HTML5文档的基本结构，HTML5的基本语法，HTML的全局属性，元素的分类，HTML的字符实体和颜色表示，HTML5开发人员编码规范等内容。1.3编辑HTML文件介绍常用HTML编辑软件，网页文件的创建。2.块级元素教学要点：基本块级元素，列表元素，表格元素table，表单，分区元素div，缩排元素blockquote。教学时数：4学时。教学内容：2.1基本块级元素介绍标题元素hl～h6，段落元素p和换行元素br，水平线元素hr，注释元素。2.2列表元素介绍无序列表元素ul，有序列表元素ol，定义列表元素dl，嵌套列表。2.3表格元素table介绍基本表格，跨行跨列的表格，表格数据的分组，调整列的格式。2.4表单介绍表单元素form，输入元素input ，标签元素label，选择栏元素select ，按钮元素button，多行文本元素textarea。2.5分区元素div和缩排元素blockquote介绍分区元素div，缩排元素blockquote。3.行级元素教学要点：介绍行级元素的格式化元素，图像元素img，超链接元素a，图像热区链接map、area，范围元素span，多媒体元素。教学时数：4学时。教学内容：3.1格式化元素介绍字体样式元素，短语元素。3.2图像元素img介绍图像元素img。3.3超链接元素a介绍超链接元素a。3.4图像热区链接map、area介绍图像热区链接map、area。3.5范围元素span 523.6多媒体元素介绍音频元素audio，视频元素video。4.CSS3基础教学要点：介绍CSS简介，在HTML中使用CSS的方法，CSS的两个主要特性，CSS的基本语法，CSS的选择器，属性值的写法和单位，HTML文档结构与元素类型等内容。教学时数：8学时。教学内容：4.1CSS简介介绍CSS的发展历史，CSS设计与编写原则。4.2在HTML中使用CSS的方法介绍内联样式，内部样式，链入外部样式文件，导入外部样式文件。4.3CSS的两个主要特性介绍CSS的层叠特性和继承特性。4.4CSS的基本语法介绍CSS的基本语法和编写样式时的注意事项。4.5CSS的选择器介绍元素选择器，通配符选择器，属性选择器，派生选择器，兄弟选择器，id选择器，类选择器，伪类选择器，UI元素状态伪类选择器，结构伪类选择器，其他伪类选择器，伪元素选择器。4.6属性值的写法和单位介绍长度、百分比单位，色彩单位。4.7HTML文档结构与元素类型介绍文档结构的基本概念，元素类型。5.CSS3的属性教学要点：介绍CSS背景属性，CSS字体属性，CSS文本属性，CSS尺寸属性，CSS列表属性，CSS表格属性，CSS内容属性，CSS属性的应用。教学时数：8学时。教学内容：5.1CSS背景属性介绍背景颜色属性background-color，背景图像属性background-image，重复背景图像属性background-repeat，固定背景图像属性background-attachment，背景图像位置属性background-position，背景图像大小属性background-size，背景属性backgroud，背景覆盖区域属性backgroud-clip，背景图像起点属性backgroup-origin，背景渐变属性background-image。5.2CSS字体属性介绍字体类型属性font-family，字体尺寸属性font-size，字体倾斜属性font-style，小写字体属性font-variant，字体粗细font-weight，字体简写属性font，CSS3新增使用服务器字体。5.3CSS文本属性介绍文本颜色属性color，文本方向属性direction，字符间隔属性letter-spacing，行高属性line-height，文本水平对齐方式属性text-align，为文本添加装饰属性text-decoration，段落首行缩进属性text-indent，文本的阴影属性text-shadow，文本的大小写属性text-transform，元素内部的空白属性white-space，单词之间的间隔属性word-spacing，文本的截断效果属性text-overflow，文本的换行方式属性word-break，单词断字属性word-wrap。5.4CSS尺寸属性介绍宽度属性width，高度属性height，最小宽度属性min-width，最大宽度属性max-width，最小高度属性min-height，最大高度属性max-height。5.5CSS列表属性介绍图像作为列表项的标记属性list-style-image，列表项标记的位置属性list-style-position，标记的类型属性list-style-type，列表简写属性list-style。5.6CSS表格属性介绍合并边框属性border-collapse，边框间隔属性border-spacing，单元格无内容显示方式属性empty-cells，表格设置方式属性table-layout 。5.7CSS内容属性介绍content属性。5.8CSS属性的应用介绍设置图像样式，设置链接，创建导航菜单。6.CSS的盒模型教学要点：介绍CSS盒模型的组成和大小，CSS盒模型的属性，CSS布局属性，CSS盒子定位属性，CSS3多列属性，CSS基本布局样式。教学时数：6学时。教学内容：6.1CSS盒模型的组成和大小介绍盒子的组成，盒子的大小，块级元素与行级元素的宽度和高度。6.2CSS盒模型的属性介绍CSS内边距属性padding，CSS外边距属性margin，CSS边框属性border，圆角边框属性border-radius，盒模型的阴影属性box-shadow，图片边框属性border-image，CSS轮廓属性outline，调整大小属性resize。6.3CSS布局属性介绍元素的布局方式，CSS浮动属性float，清除浮动属性clear，裁剪属性clip，内容溢出时显示方式属性overflow，元素显示方式属性display，元素可见性属性visibility。6.4CSS盒子定位属性介绍定位位置属性top、right、bottom、left，定位方式属性position，层叠顺序属性z-index。6.5CSS3多列属性介绍列数属性column-count，列宽属性column-width，列宽属性column，列之间的间隔属性olumn-gap，是否横跨所有列属性column-span，列间隔样式属性column-rule-style，列之间间隔颜色属性column-rule-color，列之间宽度属性column-rule-width，列之间间隔所有属性column-rule。6.6CSS基本布局样式介绍CSS布局类型，CSS布局样式。7.JavaScript程序设计基础教学要点：介绍JavaScript概述，在HTML文档中使用JavaScript，数据类型，标识符、变量、运算符和表达式，流程控制语句，函数，对象，内置对象，正则表达式。教学时数：12学时。教学内容：7.1JavaScript概述介绍ECMAScript的版本，JavaScript的特点。7.2在HTML文档中使用JavaScript介绍在HTML文档中嵌入脚本程序，链接脚本文件，在HTML标签内添加脚本。7.3数据类型介绍数据类型的分类，基本数据类型，数据类型的判断，数据类型的转换。7.4标识符、变量、运算符和表达式介绍标识符，常量，变量，运算符和表达式，语句的书写规则。7.5流程控制语句介绍顺序结构语句，条件选择结构语句，循环结构语句。7.6函数介绍函数的声明，函数的调用，变量的作用域，内嵌函数，闭包函数，系统函数。7.7对象介绍对象的概念，创建类，对象的实例化，对象的属性，对象的方法，对象的遍历，对象的事件。7.8内置对象介绍数学对象，字符串对象，日期对象，数组对象。7.9正则表达式介绍创建正则表达式，正则表达式的组成，正则表达式使用的方法。8.JavaScript对象模型教学要点：介绍BOM的对象和DOM的对象。教学时数：4学时。教学内容：8.1BOM的对象介绍window对象，document对象，location对象，navigator对象，screen对象，history对象。8.2DOM的对象介绍节点和节点树，DOM的操作，node对象，HTMLDOM对象，HTMLdocument对象，HTMLelement对象，node操作实例。9.JavaScript事件处理教学要点：介绍事件概述，window事件，mouse事件，keyboard事件，form事件，事件捕捉与事件冒泡。教学时数：4学时。教学内容：9.1事件概述介绍事件的概念，事件的类型，事件处理程序的绑定方式。9.2window事件介绍load事件，resize事件，scroll事件，focus和blur事件。9.3mouse事件介绍click事件，dblclick事件，mouseover和mouseout事件，mousedown、mousemove和mouseup事件。9.4keyboard事件介绍keydown事件，keypress事件，keyup事件。9.5form事件介绍onsubmit、onreset事件，子元素事件事件。9.6事件捕捉与事件冒泡介绍事件捕捉与事件冒泡的执行顺序，阻止事件冒泡和捕捉，取消默认事件。10.CSS3变形、过渡和动画属性教学要点：介绍变形，过渡，动画。教学时数：4学时。教学内容：10.1变形介绍CSS的坐标系统，transform属性，transform-origin属性，transform-style属性，perspective和perspective-origin属性，backface-visibility属性。10.2过渡介绍过渡属性，过渡事件。10.3动画介绍动画属性，动画事件。11.HTML5的拖放和画布教学要点：介绍拖放，画布。教学时数：2学时。教学内容：11.1拖放介绍draggable属性，拖放事件，数据传递对象dataTransfer。11.2画布介