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

《《网页设计（HTML5+CSS3+JavaScript）》教学指南.docx》由会员分享，可在线阅读，更多相关《《网页设计（HTML5+CSS3+JavaScript）》教学指南.docx（4页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页设计(HTML5+CSS3+JavaScript)教学指南一、课程的性质与任务“网页设计”是职业院校计算机相关专业的一门主干专业课，其主要任务是使学生掌握 网页设计的基础知识和基本技能，培养学生利用HTML5、CSS3和JavaScript设计和制作网 页的能力，提高学生的职业技能和素质，为适应职业岗位和继续学习打下一定的基础。本课 程的教学目标是使学生能运用所学的网页设计知识，根据实际问题进行网页的设计与制作、 网站的创立与维护，使学生具有网站开发的初步能力。二、教学重点与难点（-）教学重点本课程的重点内容是第2章“HTML文档编辑”。通过这一章的教学，应使学生掌握使 用超文本标记语言H

2、TML5标记文本、组织内容、对文档分节、制作表格、在网页中嵌入内 容的方法，能够对HTML文档进行基本的编辑操作。（二）教学难点本课程的难点内容是第6章“设置CSS样式，在这一章中介绍了使用CSS3设置文本 样式、设置边框和背景、设置盒模型样式、设置定位属性以及设置列表和表格样式的方法。 由于涉及到的CSS属性比拟多，在学习时学生可能会感到难以理解。在教学中，应结合案例 讲解常用CSS属性的使用方法，以便为使用CSS创立页面布局打下基础。三、课程内今与教学要求（一）HTML5使用基础1 .理解HTML5基本概念，了解什么是HTML以及HTML5具有哪些新功能。2 .理解HTML语法结构和HTM

3、L语法规那么。3 .掌握设置元素属性的方法，能够对元素应用多个属性，能够使用布尔属性和自定义属 性，了解常用的全局属性。4 .掌握创立HTML文档的方法，理解HTML文档结构、元素之间的关系和HTML元素 分类。5 .掌握使用元数据元素的方法，能够设置文档标题、用元数据说明文档、定义内嵌CSS 样式表和链接外部CSS样式表。6 .掌握使用脚本兀素的方法，能够在文档中添加脚本以及定义脚本未执行时的内容。（二）HTML文档编辑1 .掌握使用HTML标签标记文本的方法，能够使用基本文本元素和HTML实体，能够 对文本进行换行、表示上标和下标、设置小号字体、突出显示文本、使用缩写、术语和引用、 对行内

4、文本分组、表示输入输出、日期时间以及表示注音符号、创立超链接。2 .掌握使用HTML标签组织内容的方法，能够创立段落、使用div元素、显示预格式化 内容、定义引用块、添加主题分隔、创立列表以及添加插图。3 .掌握使用HTML标签对文档分节的方法，能够添加基本标题和标题组合、定义独立 成篇内容、定义文档中的节、添加页眉和页脚、定义导航区域、添加附注栏和联系信息以及 定义详情区域。4 .掌握使用HTML标签制作表格的方法，能够创立基本表格、添加表头单元格、对表 格行分组、对表格列分组以及制作不规那么表格。5 .掌握在HTML文档中嵌入各种内容的方法，能够嵌入图像、创立客户端图像映射、 嵌入其他HT

5、ML文档、通过插件嵌入内容、嵌入数字表现形式、音频、视频和图形。（三）创立HTML表单1 .掌握创立和配置表单的方法，能够制作基本表单、在表单中添加说明性标签以及使用 表单外部的控件。2 .掌握使用button元素的方法，能够制作提交按钮、重置按钮以及普通按钮。3 .掌握使用input元素的方法，能够使用input元素输入文字和密码、生成按钮、生成单 选按钮和复选框、输入数值和规定格式的字符串、获取日期时间、颜色值和搜索用词、生成 隐藏数据项和图像按钮以及选取上传文件。4 .掌握使用其他表单控件的方法，能够通过表单控件输入多行文字、定义选项列表、生 成输出字段和公开/私有密钥对以及对表单控件分

6、组。5 .掌握表单输入验证的方法，能够通过验证确保用户输入内容、输入值在某个范围内或 符合指定格式。（四）CSS3使用基础1 .掌握定义和应用css样式的方法，能够使用元素内嵌样式、文档内嵌样式以及外部 样式表。2 .理解并能调整CSS样式的层叠次序，理解CSS样式的继承。3 .掌握CSS属性单位的使用方法，能够使用长度单位、CSS颜色以及其他单位。（五）使用CSS选择器1 .掌握基本选择器的用法，能够选择所有元素，能够根据类型（即标签名）、类属性（即 class）、ID或其他属性选择元素。2 .掌握复合选择器的用法，能够用并集选择器，能够使用复合选择器后代元素、子代元 素以及兄弟元素。3 .

7、掌握伪元素选择器的用法，能够选择首行文本和首字母，能够使用选择器在元素中插 入内容，并能够通过计数器插入工程编号。4 .掌握结构性伪类选择器的用法，能够使用根元素选择器、子元素选择器以及位置选择 子元素。5 .掌握UI伪类选择器的用法，能够使用选择器选择启用或禁用元素、已勾选元素、默 认元素、有效和无效元素、限定范围的元素以及必填和可选字段。6 .掌握动态伪类选择器的用法，能够使用选择器选择各种状态的超链接、获得焦点的元 素以及被用户选取的内容。7 .掌握其他伪类选择器的用法，能够:not、：empty、：target以及:lang选择器。（六）设置CSS样式.掌握设置文本样式的方法，能够设置

8、字体、文本样式、装饰文本与大小写转换以及文 本阴影。1 .掌握设置边框和背景的方法，能够设置元素的边框、创立圆角边框和图像边框、设置 元素的背景、边框阴影和元素轮廓。2 .掌握设置盒模型样式的方法，理解理解盒模型概念，能够设置元素的内边距和外边距、 控制元素的尺寸、溢出和可见性、设置元素的盒类型以及创立浮动盒。3 .掌握设置定位属性的方法，能够设置元素的位置和层叠顺序。4 .掌握设置列表和表格样式的方法。（七）创立页面布局.掌握创立浮动盒布局的方法，能够创立单列布局、两列布局以及三列布局。1 .理解弹性盒布局模型，掌握创立弹性盒布局的方法，能够创立基本弹性盒布局，能够 设置工程的出现顺序、工程

9、尺寸的弹性以及工程的对齐方式，并能够处理交叉轴空白。2 .掌握创立多列布局的方法，能够设置列数和列宽、列高、列间距、列边框样式以及跨 列显示。（八）JavaScript 编程.掌握JavaScript语言基础知识，理解基本语法规那么、数据类型、变量以及运算符。1 .掌握流程控制语句的用法，能够使用条件语句、循环语句、异常捕获语句，能够创立 并使用函数和对象。2 .理解文档对象模型，能够使用HTMLElement对象、document对象和window对象。3 .掌握事件处理的方法，能够设置事件属性，理解DOM事件模型和常用HTML事件。（九）网页绘图.掌握绘制矩形的方法，能够创立画布元素、获取

10、画布上下文以及在画布上绘制矩形。1 .掌握设置绘图样式的方法，能够设置基本绘图样式，并能够使用渐变和图案。2 .掌握使用路径绘图的方法，能够在画布上绘制直线、矩形、圆弧以及贝塞尔曲线。3 .掌握绘制图像的方法，能够在画布中定位图像、调整图像大小以及创立图像切片。4 .掌握绘制文本的方法，能够绘制填充文本并设置文本属性，能够绘制轮廓文本并测量 文本宽度。5 .掌握使用特效与变换的方法，能够使用阴影效果、透明效果以及变换。习题9（十）Web存储1 .掌握本地存储的使用方法，理解本地存储机制并用于创立Web留言板。2 .掌握会话存储的使用方法，理解会话存储机制并用于实现网站登录。3 .掌握本地数据库的使用方法，掌握本地数据库的核心方法，并能够用本地数据库实现 Web留言板。四、教学建议.教学时间分配总学时100理论课50上机实验40机 动10.课程设计教师在组织课程设计时可以选择Web留言本作为设计工程，建议在工程中添加登录功能, 并选择本地数据库来存储用户和留言信息。