2023年6月20日发(作者：)

《HTML网页设计》课程教学大纲

课程名称：HTML网页设计课程编号：xxxxxx课程学分：x学分课程学时：60学时课程安排：一年级下学期课程性质：专业必修课

一、教学目的和任务《HTML静态网页设计》是我院软件开发专业的专业基础课，选用我院自行开发的教材的《基于JavaScript的互动网页设计》，全书共分为15章，其中HTML内容占11章，包括HTML基本语法，常用标签的使用，表格的使用，层和框架的使用，在HTML中多媒体的应用，表单的使用，网页的图像及多媒体，以及站点的创建和管理。其中重点包括常用标签的使用，表格的使用，框架和表单的使用，以及CSS应用。一方面本课程通过对网页用户界面设计中的信息传达、视觉符号的应用等专业知识的讲授，让学生能掌握网页设计中相关的设计思维与视觉表现方面的知识，让学生把网站中要传达的信息通过数码交互媒体的手段展现出来。另一方面通过对相关设计软件的使用进行课堂讲解与练习，使学生能够掌握相关软件操作的基本知识，并能够通过灵活应用课堂知识处理一些在实际项目中遇到的技术困难。

二、教学方法与教学要求1课前认真备课，选好实例　　网页制作技术不断地发展变化，新的技术、新的方法也在不断涌现，所以我们也需要将网页设计的最新、最实用的技术引用到课堂上去。课堂教学是传授知识的主要方式和场所，目的在于将书本知识转化为学生的知识和技能。为实现这一目的，我深入钻研教材，理清教材内容特点、编排次序和知识点之间的衔接关系，整理出一条条线索。如在上第一节课时，我会从网上下载一些经典的并具有代表性的网页给同学欣赏，在看的过程中一一的介绍并分解到书本的各个章节的知识点,提高学生们的兴趣与积极性。　　2 课堂的教学方法　　教学过程是教师与学生之间信息传递及反馈的过程。“我认为教学的艺术不在于传授本领，而在于激励、唤醒、鼓舞。”因此，在学习过程中，给学生明确的思路，激励学生积极主动参与思考，运用任务驱动法、模块教学法，案例教学法和项目教学法等教学手段，引导他们在解决问题的过程中体验到学习带来的成功感和愉悦感，使学习兴趣长久地保持下去。　　2.1 任务驱动法。“任务驱动”教学法是一种以学生自主学习，教师加以引导的一种教学方法。它打破了传统教学方法中注重学习的循序渐进和积累的老套路，不再按照教学内容的从易到难的顺序，而是以完成一个“任务”作为驱动来进行教学，完成教学任务。在教学过程中，以若干个具体任务为中心,通过完成任务的过程，介绍和学习基本知识和技能，培养学生的自学能力、创新精神和合作意识。学生在上机实践时，我会布置与课程相关联的小任务，那么这些任务都是学生感兴趣的，要有浓烈的生活气息，让学生在密切联系学习、生活经验和社会实际的情境中去完成。　　2.2 模块教学法。模块式教学（简称MES）是国际劳工组织在20世纪70年代开发出来的一种较为先进的培训模式。它是在深入分析每个职业（工种）和技能的基础上，严格按照工作标准（岗位规范），将教学大纲和教材开发成不同的教学模块，形成类似积木组合式的教学方式。　　2.3 案例教学法。案例教学法，即在教师指导下，根据教学目标的内容的需要，采用案例组织学生进行学习、研究、锻炼能力的方法。案例教学法可分为案例导入、案例例证、案例讨论、案例结尾和案例练习等多种方法。　　在课堂上我采用是案例例证法，通过精心挑选案例，明确提出需要掌握的知识点及操作技能，以案例带动知识点，贯穿整个教学过程。具体做法是通过具体案例提出任务，将任务分解到每次的课堂教学中实现，教学过程中为了调动学生的学习积极性，教学过程中常常采用互动方式，即老师提出一种解决问题的思路，然后让学生采用其他方式来解决同一个问题。　　　　　2.4 项目教学法。项目教学法是指通过实施一个完整的项目工作而进行的教学活动,采取小组讨论、协作学习的方式。　　将课程中的各个知识点或技术点采用教师给出项目要求或参考项目需求的方式，让学生分组选择项目或者自己调研确定项目，小组合作进行项目规划和页面设计。通过“小组合作规划设计”，以“项目小组”为基本形式、小组成员之间的合作性活动为主体、完成小组项目为主要目标、小组整体水平为主要依据来评定成绩的考核形式，为学生创造一个良好的合作氛围。小组的每一个成员在这一过程中都有发挥自己优势和表现自己的机会，通过小组成员之间相互讨论、评价、反馈、倾听、激励以及互为师生、优势互补等合作形式，激发学生的学习兴趣，改进学生的学习方法与态度，增强学生的集体荣誉感和团队协作精神。 三、教学内容与教学安排1、课堂讲授 32学时第1章 HTML入门简介【上】主要掌握文档标记的使用，头部标记title，主体标签body，标题标记等， 了解和掌握HTML文档的结构。第1章 HTML入门简介【下】通过学习注释标签，达到注释代码的目的，使代码可读性增强，通过署名标签、段落标记、居中对齐标签、原样显示文字的标签、缩排标签、水平分割线的学习，掌握文字段落的排版控制。第2章 HTML常用标签【上】通过学习斜体字标签、下标标签、上标标签、插入字标签、删除字标签、计算机代码标签、键盘输入文字标签、计算机代码样式标签等，用于控制文字样式。第3章 HTML常用标签【下】通过学习打字机标签、变量标签、缩写标签、文字方向标签、短标签、引用标签、定义项目标签、HTML字符实体标签等用于控制文字样式。第三章 超链接超链接章节主要掌握锚点、外部链接、邮件链接、脚本链接、空链接的相关基本知识，用于链接跳转功能的实现第四章 框架通过框架页示例，学习网页框架的基础知识，掌握框架边框的设置、框架边距的设置、设置框架缩放、设置框架滚动条、设置框架边框的颜色，对框架进行上下分割窗口、左右分割窗口来设计框架页面，设置浮动框架的高度和宽度，设置浮动框架的对齐方式等。第五章 表格【上】表格章节主要学习设置表格的边框、表格的背景颜色、表格边框颜色、设置表格高度和宽度以及设置表格背景图像等。第五章 表格【下】本章主要掌握表格间距设置，表格水平对齐设置，表格标题的设置，行标签和单元格背景颜色的设置，掌握表格跨行跨列的设置以及表格的嵌套，用于今后利用表格进行网页布局。第六章 列表本章节主要学习各种列表：有序列表、无序列表、目录列表、菜单列表、自定义列表以及嵌套列表等。用于网页的排版设计第七章 表单表单章节是HTML的重点章节，将学习表单的各种控件知识：如单行文本域、密码域、单选按钮、复选框、普通按钮、文本域、图像域、多行文本域、选择列表等。第八章 网页图像本章节主要学习网页图像设置的相关知识，主要有如何加载图像、如何设置图像大小、如何设置图像边框、如何设置图像对齐方式、如何设置图像与文本的距离、如何设置图像的提示文字、如何设置图像超链接、如何图像影像地图等。第九章 网页多媒体网页的多媒体运用知识必不可少，本章节将学习如何设置文字及图像的滚动效果、如何加入背景音乐、如何嵌入flash动画、如何嵌入mp3、如何嵌入mpg视频等。第十章 站点管理及维护本章节将学习使用Dreamweaver创建、管理维护站点、使用Dreamweaver实现一些具体的网页应用，使学生掌握建站的相关基本知识，为今后创办网站打下坚实的基础。第十一章 CSS基础本章节将学习使用CSS进行网页样式风格的设计。要使学生掌握使用CSS的基本语法，以及在HTML中使用CSS的几种方法。达到网页美化的目的。 2、上机实践 28学时第一章 HTML入门简介【上】任务一【文档标记的使用】任务二【头部标记】任务三【主体标签BODY】任务四【标题标记】任务五【控制文字的格式】任务六【特定文字标记的应用】任务七【换行符标记的应用】第一章 HTML入门简介【下】任务一【注释标签的应用】任务二【署名标签的应用】任务三【段落标记的应用】任务四【居中对齐标签】任务五【原样显示文字的标签】任务六【缩排标签的引用】任务七【水平分割线的使用】第二章 HTML常用标签【上】任务一【文字样式示例】任务二【斜体字】任务三【设置文字样式】任务四【下标】任务五【上标】任务六【插入字标签】任务七【删除字标签】任务八【计算机代码标签】任务九【键盘输入文字标签】任务十【计算机代码样式标签】第二章 HTML常用标签【下】任务一【打字机标签】任务二【变量标签】任务三【缩写标签】任务四【首字母缩写】任务五【文字方向标签】任务六【短标签】任务七【引用标签】任务八【定义项目标签】任务九【HTML字符实体】第三章 超链接任务一【HTML链接】任务二【锚点】任务三【外部链接】任务四【邮件链接】任务五【脚本链接】任务六【空链接】第四章 框架任务一【框架页示例】任务二【设置框架边框】任务三【设置框架边距】任务四【设置框架缩放】任务五【设置框架滚动条】任务六【设置框架边框的颜色】任务七【上下分割窗口】任务八【左右分割窗口】任务九【浮动框架的高度和宽度】任务十【浮动框架的对齐方式】第五章 表格【上】任务一【表格边框】任务二【表格高度】任务三【表格背景颜色】任务四【表格边框颜色】任务五【表格高度和宽度】任务六【表格背景】第五章 表格【下】任务七【表格间距】任务八【表格水平对齐】任务九【表格标题】任务十【行标签】任务十一【单元格背景颜色】任务十二【跨行跨列】任务十三【表格嵌套】第六章 列表任务一【有序列表1】任务二【有序列表2】任务三【有序列表3】任务四【无序列表】任务五【目录列表】任务六【菜单列表】任务七【定义列表】任务八【嵌套列表】第七章 表单任务一【表单method属性测试】任务二【单行文本域】任务三【密码域】任务四【单选按钮】任务五【复选框】任务六【普通按钮】任务七【文本域】任务八【图像域】任务九【多行文本域】任务十【选择列表】第八章 网页图像任务一【加载图像】任务二【设置图像大小】任务三【设置图像边框】任务四【设置图像对齐方式】任务五【设置图像与文本的距离】任务六【设置图像的提示文字】任务七【设置图像超链接】任务八【图像影像地图】第九章 网页多媒体任务一【滚动效果1】任务二【滚动效果2】任务三【背景音乐】任务四【嵌入flash动画】任务五【嵌入mp3】任务六【嵌入mpg视频】第十章 站点管理及维护任务一【使用Dreamweaver创建、管理维护站点】任务二【使用Dreamweaver实现网页应用】第十一章 CSS基础任务一【使用CSS美化网页字体】任务二【使用CSS美化网页背景】任务三【使用CSS让用户自由定制个性化的页面】综合练习【房地产交易网站】【宠物交易网站】3、课程作业（按知识点划分，共计十个部分）第一部分、制作第一个网页第二部分、新闻信息浏览页面的制作（一）第三部分、新闻信息浏览页面的制作（二）第四部分、网站结构的实现（一）第五部分、网站结构的实现（二）第六部分、用户信息录入页面的实现（二）第七部分、网页文本的样式设置第八部分、CSS结构、规则及属性第九部分、CSS滤镜及高级应用（一）第十部分、CSS滤镜及高级应用（二） 四、课程考核 本课程理论考试采用闭卷形式，上机实践与其他课程进行组合考试，同时结合平时作业进行课程考核与成绩评定。考核评分以百分制计，原则上理论、实践考试成绩占80%，平时作业成绩占20%。

五、教材及参考书 教材： 《基于JavaScript的互动网页设计》 重庆广播电视大学软件工程学院自编教材参考书：《HTML 标准教程》 贾素玲 王强 著 清华大学出版社 《HTML标准教程》 胡艳洁 著 中国青年出版社 《网页制作语言-HTML》 伊格 著 上海交通大学出版社

六、教学设备及教具要求 由学院统一安排多媒体教室及机房，任课教师准备多媒体课件等教学相关资料。

2023年6月20日发(作者：)

《HTML网页设计》课程教学大纲

课程名称：HTML网页设计课程编号：xxxxxx课程学分：x学分课程学时：60学时课程安排：一年级下学期课程性质：专业必修课

一、教学目的和任务《HTML静态网页设计》是我院软件开发专业的专业基础课，选用我院自行开发的教材的《基于JavaScript的互动网页设计》，全书共分为15章，其中HTML内容占11章，包括HTML基本语法，常用标签的使用，表格的使用，层和框架的使用，在HTML中多媒体的应用，表单的使用，网页的图像及多媒体，以及站点的创建和管理。其中重点包括常用标签的使用，表格的使用，框架和表单的使用，以及CSS应用。一方面本课程通过对网页用户界面设计中的信息传达、视觉符号的应用等专业知识的讲授，让学生能掌握网页设计中相关的设计思维与视觉表现方面的知识，让学生把网站中要传达的信息通过数码交互媒体的手段展现出来。另一方面通过对相关设计软件的使用进行课堂讲解与练习，使学生能够掌握相关软件操作的基本知识，并能够通过灵活应用课堂知识处理一些在实际项目中遇到的技术困难。

二、教学方法与教学要求1课前认真备课，选好实例　　网页制作技术不断地发展变化，新的技术、新的方法也在不断涌现，所以我们也需要将网页设计的最新、最实用的技术引用到课堂上去。课堂教学是传授知识的主要方式和场所，目的在于将书本知识转化为学生的知识和技能。为实现这一目的，我深入钻研教材，理清教材内容特点、编排次序和知识点之间的衔接关系，整理出一条条线索。如在上第一节课时，我会从网上下载一些经典的并具有代表性的网页给同学欣赏，在看的过程中一一的介绍并分解到书本的各个章节的知识点,提高学生们的兴趣与积极性。　　2 课堂的教学方法　　教学过程是教师与学生之间信息传递及反馈的过程。“我认为教学的艺术不在于传授本领，而在于激励、唤醒、鼓舞。”因此，在学习过程中，给学生明确的思路，激励学生积极主动参与思考，运用任务驱动法、模块教学法，案例教学法和项目教学法等教学手段，引导他们在解决问题的过程中体验到学习带来的成功感和愉悦感，使学习兴趣长久地保持下去。　　2.1 任务驱动法。“任务驱动”教学法是一种以学生自主学习，教师加以引导的一种教学方法。它打破了传统教学方法中注重学习的循序渐进和积累的老套路，不再按照教学内容的从易到难的顺序，而是以完成一个“任务”作为驱动来进行教学，完成教学任务。在教学过程中，以若干个具体任务为中心,通过完成任务的过程，介绍和学习基本知识和技能，培养学生的自学能力、创新精神和合作意识。学生在上机实践时，我会布置与课程相关联的小任务，那么这些任务都是学生感兴趣的，要有浓烈的生活气息，让学生在密切联系学习、生活经验和社会实际的情境中去完成。　　2.2 模块教学法。模块式教学（简称MES）是国际劳工组织在20世纪70年代开发出来的一种较为先进的培训模式。它是在深入分析每个职业（工种）和技能的基础上，严格按照工作标准（岗位规范），将教学大纲和教材开发成不同的教学模块，形成类似积木组合式的教学方式。　　2.3 案例教学法。案例教学法，即在教师指导下，根据教学目标的内容的需要，采用案例组织学生进行学习、研究、锻炼能力的方法。案例教学法可分为案例导入、案例例证、案例讨论、案例结尾和案例练习等多种方法。　　在课堂上我采用是案例例证法，通过精心挑选案例，明确提出需要掌握的知识点及操作技能，以案例带动知识点，贯穿整个教学过程。具体做法是通过具体案例提出任务，将任务分解到每次的课堂教学中实现，教学过程中为了调动学生的学习积极性，教学过程中常常采用互动方式，即老师提出一种解决问题的思路，然后让学生采用其他方式来解决同一个问题。　　　　　2.4 项目教学法。项目教学法是指通过实施一个完整的项目工作而进行的教学活动,采取小组讨论、协作学习的方式。　　将课程中的各个知识点或技术点采用教师给出项目要求或参考项目需求的方式，让学生分组选择项目或者自己调研确定项目，小组合作进行项目规划和页面设计。通过“小组合作规划设计”，以“项目小组”为基本形式、小组成员之间的合作性活动为主体、完成小组项目为主要目标、小组整体水平为主要依据来评定成绩的考核形式，为学生创造一个良好的合作氛围。小组的每一个成员在这一过程中都有发挥自己优势和表现自己的机会，通过小组成员之间相互讨论、评价、反馈、倾听、激励以及互为师生、优势互补等合作形式，激发学生的学习兴趣，改进学生的学习方法与态度，增强学生的集体荣誉感和团队协作精神。 三、教学内容与教学安排1、课堂讲授 32学时第1章 HTML入门简介【上】主要掌握文档标记的使用，头部标记title，主体标签body，标题标记等， 了解和掌握HTML文档的结构。第1章 HTML入门简介【下】通过学习注释标签，达到注释代码的目的，使代码可读性增强，通过署名标签、段落标记、居中对齐标签、原样显示文字的标签、缩排标签、水平分割线的学习，掌握文字段落的排版控制。第2章 HTML常用标签【上】通过学习斜体字标签、下标标签、上标标签、插入字标签、删除字标签、计算机代码标签、键盘输入文字标签、计算机代码样式标签等，用于控制文字样式。第3章 HTML常用标签【下】通过学习打字机标签、变量标签、缩写标签、文字方向标签、短标签、引用标签、定义项目标签、HTML字符实体标签等用于控制文字样式。第三章 超链接超链接章节主要掌握锚点、外部链接、邮件链接、脚本链接、空链接的相关基本知识，用于链接跳转功能的实现第四章 框架通过框架页示例，学习网页框架的基础知识，掌握框架边框的设置、框架边距的设置、设置框架缩放、设置框架滚动条、设置框架边框的颜色，对框架进行上下分割窗口、左右分割窗口来设计框架页面，设置浮动框架的高度和宽度，设置浮动框架的对齐方式等。第五章 表格【上】表格章节主要学习设置表格的边框、表格的背景颜色、表格边框颜色、设置表格高度和宽度以及设置表格背景图像等。第五章 表格【下】本章主要掌握表格间距设置，表格水平对齐设置，表格标题的设置，行标签和单元格背景颜色的设置，掌握表格跨行跨列的设置以及表格的嵌套，用于今后利用表格进行网页布局。第六章 列表本章节主要学习各种列表：有序列表、无序列表、目录列表、菜单列表、自定义列表以及嵌套列表等。用于网页的排版设计第七章 表单表单章节是HTML的重点章节，将学习表单的各种控件知识：如单行文本域、密码域、单选按钮、复选框、普通按钮、文本域、图像域、多行文本域、选择列表等。第八章 网页图像本章节主要学习网页图像设置的相关知识，主要有如何加载图像、如何设置图像大小、如何设置图像边框、如何设置图像对齐方式、如何设置图像与文本的距离、如何设置图像的提示文字、如何设置图像超链接、如何图像影像地图等。第九章 网页多媒体网页的多媒体运用知识必不可少，本章节将学习如何设置文字及图像的滚动效果、如何加入背景音乐、如何嵌入flash动画、如何嵌入mp3、如何嵌入mpg视频等。第十章 站点管理及维护本章节将学习使用Dreamweaver创建、管理维护站点、使用Dreamweaver实现一些具体的网页应用，使学生掌握建站的相关基本知识，为今后创办网站打下坚实的基础。第十一章 CSS基础本章节将学习使用CSS进行网页样式风格的设计。要使学生掌握使用CSS的基本语法，以及在HTML中使用CSS的几种方法。达到网页美化的目的。 2、上机实践 28学时第一章 HTML入门简介【上】任务一【文档标记的使用】任务二【头部标记】任务三【主体标签BODY】任务四【标题标记】任务五【控制文字的格式】任务六【特定文字标记的应用】任务七【换行符标记的应用】第一章 HTML入门简介【下】任务一【注释标签的应用】任务二【署名标签的应用】任务三【段落标记的应用】任务四【居中对齐标签】任务五【原样显示文字的标签】任务六【缩排标签的引用】任务七【水平分割线的使用】第二章 HTML常用标签【上】任务一【文字样式示例】任务二【斜体字】任务三【设置文字样式】任务四【下标】任务五【上标】任务六【插入字标签】任务七【删除字标签】任务八【计算机代码标签】任务九【键盘输入文字标签】任务十【计算机代码样式标签】第二章 HTML常用标签【下】任务一【打字机标签】任务二【变量标签】任务三【缩写标签】任务四【首字母缩写】任务五【文字方向标签】任务六【短标签】任务七【引用标签】任务八【定义项目标签】任务九【HTML字符实体】第三章 超链接任务一【HTML链接】任务二【锚点】任务三【外部链接】任务四【邮件链接】任务五【脚本链接】任务六【空链接】第四章 框架任务一【框架页示例】任务二【设置框架边框】任务三【设置框架边距】任务四【设置框架缩放】任务五【设置框架滚动条】任务六【设置框架边框的颜色】任务七【上下分割窗口】任务八【左右分割窗口】任务九【浮动框架的高度和宽度】任务十【浮动框架的对齐方式】第五章 表格【上】任务一【表格边框】任务二【表格高度】任务三【表格背景颜色】任务四【表格边框颜色】任务五【表格高度和宽度】任务六【表格背景】第五章 表格【下】任务七【表格间距】任务八【表格水平对齐】任务九【表格标题】任务十【行标签】任务十一【单元格背景颜色】任务十二【跨行跨列】任务十三【表格嵌套】第六章 列表任务一【有序列表1】任务二【有序列表2】任务三【有序列表3】任务四【无序列表】任务五【目录列表】任务六【菜单列表】任务七【定义列表】任务八【嵌套列表】第七章 表单任务一【表单method属性测试】任务二【单行文本域】任务三【密码域】任务四【单选按钮】任务五【复选框】任务六【普通按钮】任务七【文本域】任务八【图像域】任务九【多行文本域】任务十【选择列表】第八章 网页图像任务一【加载图像】任务二【设置图像大小】任务三【设置图像边框】任务四【设置图像对齐方式】任务五【设置图像与文本的距离】任务六【设置图像的提示文字】任务七【设置图像超链接】任务八【图像影像地图】第九章 网页多媒体任务一【滚动效果1】任务二【滚动效果2】任务三【背景音乐】任务四【嵌入flash动画】任务五【嵌入mp3】任务六【嵌入mpg视频】第十章 站点管理及维护任务一【使用Dreamweaver创建、管理维护站点】任务二【使用Dreamweaver实现网页应用】第十一章 CSS基础任务一【使用CSS美化网页字体】任务二【使用CSS美化网页背景】任务三【使用CSS让用户自由定制个性化的页面】综合练习【房地产交易网站】【宠物交易网站】3、课程作业（按知识点划分，共计十个部分）第一部分、制作第一个网页第二部分、新闻信息浏览页面的制作（一）第三部分、新闻信息浏览页面的制作（二）第四部分、网站结构的实现（一）第五部分、网站结构的实现（二）第六部分、用户信息录入页面的实现（二）第七部分、网页文本的样式设置第八部分、CSS结构、规则及属性第九部分、CSS滤镜及高级应用（一）第十部分、CSS滤镜及高级应用（二） 四、课程考核 本课程理论考试采用闭卷形式，上机实践与其他课程进行组合考试，同时结合平时作业进行课程考核与成绩评定。考核评分以百分制计，原则上理论、实践考试成绩占80%，平时作业成绩占20%。

五、教材及参考书 教材： 《基于JavaScript的互动网页设计》 重庆广播电视大学软件工程学院自编教材参考书：《HTML 标准教程》 贾素玲 王强 著 清华大学出版社 《HTML标准教程》 胡艳洁 著 中国青年出版社 《网页制作语言-HTML》 伊格 著 上海交通大学出版社

六、教学设备及教具要求 由学院统一安排多媒体教室及机房，任课教师准备多媒体课件等教学相关资料。