《网页设计（HTML5+CSS3+JavaScript）》教学指南

《网页设计（HTML5+CSS3+JavaScript）》教学指南《网页设计（HTML5+CSS3+JavaScript）》教学指南《网页设计（HTML5+CSS3+JavaScript）》教学指南网页设计（HTML5+CSS3+JavaScript）教学指南

一、课程的性质与任务“网页设计”是职业院校计算机相关专业的一门主干专业课，其主要任务是使学生掌握网页设计的基础知识和基本技能，培养学生利用HTML5、CSS3和JavaScript设计和制作网页的能力，提高学生的职业技能和素质，为适应职业岗位和继续学习打下一定的基础。本课程的教学目标是使学生能运用所学的网页设计知识，根据实际问题进行网页的设计与制作、网站的创建与维护，使学生具有网站开发的初步能力。二、教学重点与难点（一）教学重点本课程的重点内容是第2章“HTML文档编辑”。通过这一章的教学，应使学生掌握使用超文本标记语言HTML5标记文本、组织内容、对文档分节、制作表格、在网页中嵌入内容的方法，能够对HTML文档进行基本的编辑操作。（二）教学难点本课程的难点内容是第6章“设置CSS样式”，在这一章中介绍了使用CSS3设置文本样式、设置边框和背景、设置盒模型样式、设置定位属性以及设置列表和表格样式的方法。由于涉及到的CSS属性比较多，在学习时学生可能会感到难以理解。在教学中，应结合案例讲解常用CSS属性的使用方法，以便为使用CSS创建页面布局打下基础。三、课程内容与教学要求（一）HTML5使用基础1.理解HTML5基本概念，了解什么是HTML以及HTML5具有哪些新功能。2.理解HTML语法结构和HTML语法规则。3.掌握设置元素属性的方法，能够对元素应用多个属性，能够使用布尔属性和自定义属性，了解常用的全局属性。4.掌握创建HTML文档的方法，理解HTML文档结构、元素之间的关系和HTML元素分类 。5.掌握使用元数据元素的方法，能够设置文档标题、用元数据说明文档、定义内嵌CSS样式表和链接外部CSS样式表。6.掌握使用脚本元素的方法，能够在文档中添加脚本以及定义脚本未执行时的内容。（二）HTML文档编辑1.掌握使用HTML标签标记文本的方法，能够使用基本文本元素和HTML实体，能够对文本进行换行、表示上标和下标、设置小号字体、突出显示文本、使用缩写、术语和引用、对行内文本分组、表示输入输出、日期时间以及表示注音符号、创建超链接。2.掌握使用HTML标签组织内容的方法，能够创建段落、使用div元素、显示预格式化内容、定义引用块、添加主题分隔、创建列表以及添加插图。3.掌握使用HTML标签对文档分节的方法，能够添加基本标题和标题组合、定义独立成篇内容、定义文档中的节、添加页眉和页脚、定义导航区域、添加附注栏和联系信息以及定义详情区域。4.掌握使用HTML标签制作表格的方法，能够创建基本表格、添加表头单元格、对表格行分组、对表格列分组以及制作不规则表格。5.掌握在HTML文档中嵌入各种内容的方法，能够嵌入图像、创建客户端图像映射、嵌入其他HTML文档、通过插件嵌入内容、嵌入数字表现形式、音频、视频和图形。（三）创建HTML表单1.掌握创建和配置表单的方法，能够制作基本表单、在表单中添加说明性标签以及使用表单外部的控件。2.掌握使用button元素的方法，能够制作提交按钮、重置按钮以及普通按钮。3.掌握使用input元素的方法，能够使用input元素输入文字和密码、生成按钮、生成单选按钮和复选框、输入数值和规定格式的字符串、获取日期时间、颜色值和搜索用词、生成隐藏数据项和图像按钮以及选取上传文件。4.掌握使用其他表单控件的方法，能够通过表单控件输入多行文字、定义选项列表、生成输出字段和公开/私有密钥对以及对表单控件分组。5.掌握表单输入验证的方法，能够通过验证确保用户输入内容、输入值在某个范围内或符合指定格式。（四）CSS3使用基础1.掌握定义和应用CSS样式的方法，能够使用元素内嵌样式、文档内嵌样式以及外部样式表。2.理解并能调整CSS样式的层叠次序，理解CSS样式的继承。3.掌握CSS属性单位的使用方法，能够使用长度单位、CSS颜色以及其他单位。（五）使用CSS选择器1.掌握基本选择器的用法，能够选择所有元素，能够根据类型（即标签名）、类属性（即class）、ID或其他属性选择元素。2.掌握复合选择器的用法，能够用并集选择器，能够使用复合选择器后代元素、子代元素以及兄弟元素。3.掌握伪元素选择器的用法，能够选择首行文本和首字母，能够使用选择器在元素中插入内容，并能够通过计数器插入项目编号。4.掌握结构性伪类选择器的用法，能够使用根元素选择器、子元素选择器以及位置选择子元素。5.掌握UI伪类选择器的用法，能够使用选择器选择启用或禁用元素、已勾选元素、默认元素、有效和无效元素、限定范围的元素以及必填和可选字段。6.掌握动态伪类选择器的用法，能够使用选择器选择各种状态的超链接、获得焦点的元素以及被用户选取的内容。7.掌握其他伪类选择器的用法，能够:not、:empty、:target以及:lang选择器。（六）设置CSS样式1.掌握设置文本样式的方法，能够设置字体、文本样式、装饰文本与大小写转换以及文本阴影。2.掌握设置边框和背景的方法，能够设置元素的边框、创建圆角边框和图像边框、设置元素的背景、边框阴影和元素轮廓。3.掌握设置盒模型样式的方法，理解理解盒模型概念，能够设置元素的内边距和外边距、控制元素的尺寸、溢出和可见性、设置元素的盒类型以及创建浮动盒。4.掌握设置定位属性的方法，能够设置元素的位置和层叠顺序。5.掌握设置列表和表格样式的方法。（七）创建页面布局1.掌握创建浮动盒布局的方法，能够创建单列布局、两列布局以及三列布局。2.理解弹性盒布局模型，掌握创建弹性盒布局的方法，能够创建基本弹性盒布局，能够设置项目的出现顺序、项目尺寸的弹性以及项目的对齐方式，并能够处理交叉轴空白。3.掌握创建多列布局的方法，能够设置列数和列宽、列高、列间距、列边框样式以及跨列显示。（八）JavaScript编程1.掌握JavaScript语言基础知识，理解基本语法规则、数据类型、变量以及运算符。2.掌握流程控制语句的用法，能够使用条件语句、循环语句、异常捕获语句，能够创建并使用函数和对象。3.理解文档对象模型，能够使用HTMLElement对象、document对象和window对象。4.掌握事件处理的方法，能够设置事件属性，理解DOM事件模型和常用HTML事件。（九）网页绘图1.掌握绘制矩形的方法，能够创建画布元素、获取画布上下文以及在画布上绘制矩形。2.掌握设置绘图样式的方法，能够设置基本绘图样式，并能够使用渐变和图案。3.掌握使用路径绘图的方法，能够在画布上绘制直线、矩形、圆弧以及贝塞尔曲线。4.掌握绘制图像的方法，能够在画布中定位图像、调整图像大小以及创建图像切片。5.掌握绘制文本的方法，能够绘制填充文本并设置文本属性，能够绘制轮廓文本并测量文本宽度。6.掌握使用特效与变换的方法，能够使用阴影效果、透明效果以及变换。习题9（十）Web存储1.掌握本地存储的使用方法，理解本地存储机制并用于创建Web留言板。2.掌握会话存储的使用方法，理解会话存储机制并用于实现网站