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

网页设计(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 .掌握设置列表和表格样式的方法。（七）创立页面布局.掌握创立浮动盒布局的方法，能够创立单列布局、两列布局以及三列布局。1 .理解弹性盒布局模型，掌握创立弹性盒布局的方法，能够创立基本弹性盒布局，能够 设置工程的出现顺序、工程尺寸的弹性以及工程的对齐方式，并能够处理交叉轴空白。2 .掌握创立多列布局的方法，能够设置列数和列宽、列高、列间距、列边框样式以及跨 列显示。（八）JavaScript 编程.掌握JavaScript语言基础知识，理解基本语法规那么、数据类型、变量以及运算符。1 .掌握流程控制语句的用法，能够使用条件语句、循环语句、异常捕获语句，能够创立 并使用函数和对象。2 .理解文档对象模型，能够使用HTMLElement对象、document对象和window对象。3 .掌握事件处理的方法，能够设置事件属性，理解DOM事件模型和常用HTML事件。（九）网页绘图.掌握绘制矩形的方法，能够创立画布元素、获取画布上下文以及在画布上绘制矩形。1 .掌握设置绘图样式的方法，能够设置基本绘图样式，并能够使用渐变和图案。2 .掌握使用路径绘图的方法，能够在画布上绘制直线、矩形、圆弧以及贝塞尔曲线。3 .掌握绘制图像的方法，能够在画布中定位图像、调整图像大小以及创立图像切片。4 .掌握绘制文本的方法，能够绘制填充文本并设置文本属性，能够绘制轮廓文本并测量 文本宽度。5 .掌握使用特效与变换的方法，能够使用阴影效果、透明效果以及变换。习题9（十）Web存储1 .掌握本地存储的使用方法，理解本地存储机制并用于创立Web留言板。2 .掌握会话存储的使用方法，理解会话存储机制并用于实现网站登录。3 .掌握本地数据库的使用方法，掌握本地数据库的核心方法，并能够用本地数据库实现 Web留言板。四、教学建议.教学时间分配总学时100理论课50上机实验40机 动10.课程设计教师在组织课程设计时可以选择Web留言本作为设计工程，建议在工程中添加登录功能, 并选择本地数据库来存储用户和留言信息。