Web前端开发-教学大纲-课程标准-64课时

PAGE1PAGE7《Web前端开发》课程标准学分：4参考学时：64一、课程概述1．课程性质《Web前端开发》（以前称《网页设计与制作》）课程是计算机科学与技术、软件工程、计算机信息管理、电子商务专业、物联网工程专业的一门专业基础课程。本课程的先修课程是《网络与Web技术导论》、《Java编程基础》等，后续课程有《响应式Web设计》以及前端设计与开发方向的生产性实训，在以核心职业能力为培养目标的课程体系中，起到承前启后的作用。本课程旨在培养学生设计和制作网页的能力，本课程以Web基本概念和Web标准为基准点、通过对Web前端主流开发技术的学习和研究，让学生理解和掌握HTML5、CSS3和JavaScript脚本语言的相关知识，通过这门课程的教学，不仅使学生通过项目实践培养学生开发和设计Web站点的基本技能，更要使学生充分了解Web思想，为进一步学习后续课程打下良好的基础。2．课程教学目标与基本要求本课程的教学目标是让学生理解HTML5、CSS3和JavaScript脚本语言的基本语法，掌握常用的Web页面布局技术，理解并熟练应用Java常用对象的属性方法，使用DOM技术编写页面的客户端程序，通过项目实训，培养学生具备设计实现Web客户端页面的初步能力。课程设计应充分体现“教师指导下的以学生为中心”的教学模式，以学生为认知主体，充分调动学生的积极性和能动性，重视学生自学能力的培养。由教师提出任务，学生独立设计并完成。本课程教学的知识目标见下表。序号内容1理解Web设计的基本原则，栏目、网站目录结构的定义，标准页面布局方法、导航菜单制作、图文排版、页面交互等方面的基础知识；2熟练掌握运用HTML5中的文字、链接、列表、表格、表单、图像、多媒体等标记语言设计制作网页；3掌握CSS3对网页进行布局和修饰的基本方法；4掌握JavaScript脚本语言的基本语法，理解对象的概念及使用JavaScript来编写客户端脚本程序。5掌握基本新闻类网站的设计与制作，包括主页、栏目页和内容页。本课程能力目标见下表。序号内容1具备编写和调试HTML5语言的能力；2具备编写和调试CSS3语言的能力；3具备编写和调试JavaScript语言的能力；4具备设计新闻类网页的主页、栏目页和内容页以及相关菜单的能力；5具备文档的阅读能力，文档的编写和排版能力。本课程的素质目标见下表。序号内容1具有质量意识、安全意识、工匠精神和创新思维；2具有集体意识和团队合作精神；3熟悉网页开发流程和规范，具有良好的编程习惯；4具有界面设计的审美和人文素养；5培养文档的阅读、编写素质。3.教学内容课程内容大体分为4部分：第一部分为HTML5的基本结构和语法规则，包括HTML标签的块级元素、行级元素，HTML5的拖放和画布等内容；第二部分重点介绍CSS3的基本语法和选择器，包括CSS3的属性、CSS的盒模型、CSS3变形、过渡和动画属性等内容；第三部分介绍JavaScript程序设计基础、对象模型和事件处理；第四部分为综合案例。章项目第1章HTML5基础制作社区网版权信息第2章HTML5的块级元素制作精选信息板块第3章HTML5的行级元素制作广告板块第4章CSS3基础制作内容详情页第5章CSS3的属性制作通知公告目录页面、导航栏第6章CSS3的盒模型制作新闻图片页面、热点关注页面第7章JavaScript语法基础使用开发者工具调试JavaScript程序第8章JavaScript对象基础使用对象编程第9章JavaScript对象模型使用对象模型编程第10章JavaScript事件处理制作事件页面第11章综合案例——社区新闻网的设计与实现制作新闻网的首页、列表页和内容页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.HTML5的块级元素教学要点：基本块级元素，列表元素，表格元素，表单，分区元素缩排元素。教学时数：6学时。教学内容：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.HTML5的行级元素教学要点：行级元素的格式化元素，图像元素，超链接元素，图像热区链接，范围元素，多媒体元素。教学时数：4学时。教学内容：3.1格式化元素介绍字体样式元素，短语元素。3.2图像元素img介绍图像元素img。3.3超链接元素a介绍超链接元素a。3.4图像热区链接map、area介绍图像热区链接map、area。3.5范围元素span3.6多媒体元素介绍音频元素audio，视频元素video。4.CSS3基础教学要点：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的属性教学要点：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布局属性，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程序设计基础。JavaScript概述，在HTML文档中使用JavaScript，数据类型，标识符、变量、运算符和表达式，流程控制语句，函数，对象，内置对象，正则表达式。教学时数：8学时。教学内容：7.1JavaScript概述介绍ECMAScript的版本，JavaScript的特点。7.2在HTML文档中使用JavaScript介绍在HTML文档中嵌入脚本程序，链接脚本文件，在HTML标签内添加脚本。7.3数据类型介绍数据类型的分类，基本数据类型，数据类型的判断，数据类型的转换。7.4标识符、变量和常量介绍标识符，字面常量，定义变量，定义常量。7.5运算符和表达式介绍运算符和表达式，语句的书写规则7.6流程控制介绍顺序结构，条件选择结构，循环结构。7.7函数介绍函数的声明，函数的调用，变量的作用域和生命周期，内嵌函数，闭包函数，箭头函数，常用系统函数。7.8正则表达式介绍创建正则表达式，正则表达式的组成，正则表达式使用的方法。8.JavaScript对象基础8.1JavaScript对象概述介绍本地对象、内置对象和宿主对象。8.2对象介绍对象的概念，类，创建对象，对象的属性，对象的方法，对象的遍历，对象的事件。8.3内置对象介绍数学对象，字符串对象，日期对象，数组对象，扩展运算符。9.JavaScript对象模型教学要点：JavaScript对象模型。BOM的对象和DOM的对象。教学时数：4学时。教学内容：9.1BOM的对象介绍window对象，document对象，location对象，navigator对象，screen对象，history对象。9.2DOM的对象介绍节点和节点树，DOM的操作，node对象，HTMLDOM对象，HTMLdocument对象，HTMLelement对象，node操作实例。9.3DOM与CSS介绍style对象，currentStyle对象，CSSStyleSheet对象。10.JavaScript事件处理教学要点：JavaScript事件处理。事件概述，window事件，mouse事件，keyboard事件，form事件，事件捕捉与事件冒泡。教学时数：4学时。教学内容：10.1事件概述介绍事件的概念，事件的类型，事件处理程序的绑定方式。10.2window事件介绍load事件，resize事件，scroll事件，focus和blur事件。10.3mouse事件介绍click事件，dblclick事件，mouseover和mouseout事件，mousedown、mousemove和mouseup事件。10.4keyboard事件介绍keydown事件，keypress事件，keyup事件。10.5form事件介绍onsubmit、onreset事件，子元素事件事件。10.6事件捕捉与事件冒泡介绍事件捕捉与事件冒泡的执行顺序，阻止事件冒泡和捕捉，取消默认事件。11.综合案例教学要点：综合案例。网站的开发流程和组织结构，制作新闻网的首页，制作新闻网的列表页，