下载文档原格式
传智播客《HTML+CSS+JavaScript网页制作案例教程》教学设计课程名称：HTML+CSS+JavaScript网页制作案例教程授课年级：2015年级授课学期：2015学年第二学期教师姓名：某某老师201 年月日课题名称第5章列表与超链接计划课时6课时内容分析通过第4章盒子模型的学习，已经很容易对网页做一个简单的结构划分。
但是一个网站由多个网页构成，每个网页上都有大量的信息，要想使网页中的信息排列有序，条理清晰，并且网页与网页之间有一定的联系，就需要使用列表和超链接。
本章将对列表标记、超链接标记以及CSS控制列表和超链接的样式进行详细讲解。
教学目标●掌握无序、有序及定义列表的使用，可以制作常见的网页列表模块；●掌握超链接标记的使用，能够使用超链接定义网页元素；●掌握CSS伪类，会使用CSS伪类实现超链接特效；重点及措施教学重点：无序列表、有序列表、定义列表、超链接、链接伪类、锚点链接。
措施：通过上机操作加强学习和补充案例进行巩固。
难点及措施教学难点：有序列表、定义列表、链接伪类。
措施：通过上机操作加强学习和补充案例进行巩固。
教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。
教学过程第一课时（制作“精美电商悬浮框”，讲解无序列表、有序列表）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习第四章“CSS盒子模型”的相关知识。
1、一个盒子的宽（width）和高（height）均为300px，左内边距为30px，同时盒子有3px的边框，请问这个盒子的总宽度是多少？（）A、333pxB、366pxC、336pxD、363px答案：C●盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和；●所以，盒子的总宽度= width（300px）+左内边距（30px）+左右边框宽度之和（3px*2） =336px；说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
《HTMLCSSJavaScript网页制作三合一案例教程》教学课件13第十三章以下是根据题目《HTMLCSSJavaScript网页制作三合一案例教程》教学课件13第十三章所编写的文章：HTMLCSSJavaScript网页制作三合一案例教程在本章中，我们将介绍一个HTMLCSSJavaScript的网页制作三合一案例教程。
通过学习这个案例，您将掌握使用HTML、CSS和JavaScript来创建一个完整的网页。
一、案例介绍本案例是一个简单的个人博客网页制作案例。
我们将使用HTML来构建网页的骨架结构，使用CSS来美化网页的样式，使用JavaScript来添加交互功能。
二、网页结构1. HTML结构我们首先使用HTML来创建网页的骨架结构。
在HTML文件中，我们可以使用不同的标签来定义网页的各个部分，如头部、导航栏、内容和页脚等。
通过合理的使用这些标签，我们可以建立一个清晰的网页结构。
2. CSS样式接下来，我们使用CSS来美化网页的样式。
通过为各个HTML元素添加样式规则，我们可以改变它们的颜色、大小、字体等外观特性。
同时，我们也可以使用CSS来创建布局，通过控制元素的位置和大小来实现网页的整体排版。
3. JavaScript交互最后，我们使用JavaScript来添加网页的交互功能。
通过JavaScript编写的代码，我们可以实现一些动态效果，比如点击按钮弹出提示框，显示隐藏的内容等。
这些交互功能可以增强用户对网页的体验，并且使网页更加生动有趣。
三、案例实现步骤下面是案例实现的主要步骤：1. 创建HTML文件，并编写网页的结构。
2. 使用CSS为网页添加样式，并进行美化。
3. 使用JavaScript来实现网页的交互功能。
4. 调试和测试网页，确保功能正常。
5. 优化网页的性能和用户体验。
四、案例效果展示在完成案例的实现后，我们可以通过本地或远程服务器来查看最终的效果。
你将会看到一个美观、交互且功能完备的个人博客网页。
传智播客《HTML+CSS+JavaScript网页制作案例教程》教学设计课程名称：HTML+CSS+JavaScript网页制作案例教程授课年级：2015年级授课学期：2015学年第二学期教师姓名：某某老师1201 年月日课题名称第5章列表与超链接计划课时6课时内容分析通过第4章盒子模型的学习，已经很容易对网页做一个简单的结构划分。
但是一个网站由多个网页构成，每个网页上都有大量的信息，要想使网页中的信息排列有序，条理清晰，并且网页与网页之间有一定的联系，就需要使用列表和超链接。
本章将对列表标记、超链接标记以及CSS控制列表和超链接的样式进行详细讲解。
教学目标●掌握无序、有序及定义列表的使用，可以制作常见的网页列表模块；●掌握超链接标记的使用，能够使用超链接定义网页元素；●掌握CSS伪类，会使用CSS伪类实现超链接特效；重点及措施教学重点：无序列表、有序列表、定义列表、超链接、链接伪类、锚点链接。
措施：通过上机操作加强学习和补充案例进行巩固。
难点及措施教学难点：有序列表、定义列表、链接伪类。
措施：通过上机操作加强学习和补充案例进行巩固。
教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。
教学过程第一课时（制作“精美电商悬浮框”，讲解无序列表、有序列表）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习第四章“CSS盒子模型”的相关知识。
1、一个盒子的宽（width）和高（height）均为300px，左内边距为30px，同时盒子有3px的边框，请问这个盒子的总宽度是多少？（）A、333pxB、366pxC、336pxD、363px答案：C●盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和；●所以，盒子的总宽度= width（300px）+左内边距（30px）+左右边框宽度之和（3px*2） =336px；说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
《网页设计与制作(HTML+CSS)》课程教学大纲（课程英文名称）课程编号：2学分：5学分学时：64学时（其中：讲课学时：45 上机学时：19 ）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI设计javascript网页特效适用专业：信息及其计算机相关专业开课部门：计算机系一、课程的性质与目标《网页设计与制作(HTML+CSS)》是面向计算机相关专业的一门专业基础课，涉及计算机基础、互联网等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果、学会制作各种企业，门户，电商类网站。
二、课程的主要内容及基本要求第一章HTML与CSS网页设计概述（4学时）[知识点]➢Web的基础知识➢HTMLl简介➢CSS简介➢常用浏览器介绍➢Dreamweaver 工具使用➢利用Dreamweaver创建第一个页面[重点]➢HTML简介➢Dreamweaver工具使用[难点]➢Dreamweaver工具创建第一个页面[基本要求]➢了解HTML版本的发展历程➢掌握Dreamweaver工具的使用，能够使用Dreamweaver创建一个包含html结构和CSS样式的简单网页。
第二章 HTML入门（6学时）[知识点]➢HTML基本语法结构➢HTML 标记属性➢HTML 常用文本控制标记➢HTML 文本格式化标记➢HTML 图像标记➢HTML 相对路径和绝对路径➢HTML 图文混排技巧[重点]➢HTML基本语法结构➢HTML 常用文本控制标记➢HTML 图像标记➢HTML 相对路径和绝对路径[难点]➢HTML 标记属性的使用➢HTML 相对路径和绝对路径[基本要求]➢掌握HTML基本语法结构➢掌握HTML中常用的文本标记➢区分什么是相对路径和绝对路径➢掌握HTML图像标记的使用➢掌握图片混排常用技巧[阶段案例]使用HTML文本控制标记、HTML图像标记及相关标记的属性实现网页中常见的图文混排效果，如下图所示。
《HTML、CSS、DIV网页设计》课程教学大纲课程代码：21134030课程名称：HTML、CSS、DIV网页设计课程性质：专业必修课学分：3 学时：72讲课学时：36 实践/实验学时：36适用专业：软件工程先修课程：大学计算机基础一、课程目标本课程主要介绍Internet互联网基本知识，掌握网页设计基本方法。
掌握HTML和CSS的基本规范和应用。
掌握HTML语言基础及最新标准，网页基本的文字和段落的格式化，列表、图表、超链接、图像等HTML元素的使用，CSS的设计理念和高级应用，CSS常用概念如盒模型、选择器、常见属性及最新标准，表格、框架和表单。
使学生能够正确而熟练地使用HTML进行网页的设计，能够结合开发案例进行实际网页开发的设计和实现。
培养学生认识网页设计在Web应用开发中的地位及作用，加深学生对用户体验的重要性的理解，为学生今后从事Web 应用软件开发工作打下坚实的基础。
二、教学内容1.Web开发技术综述教学要求：了解Web的起源；Web前端开发的由来；Web前端开发所涉及的内容；Web 前端开发工具介绍；常见浏览器及Web前端开发涉及的标准。
教学内容：Z1. Web的起源Z2.网页设计的相关国际标准ZN3.网页设计开发环境的配置Z4.网页浏览器的兼容性问题实验内容：实验一网页设计开发环境和运行环境的配置方法，插件的下载和安装。
（1）开发工具安装：下载和安装开源代码编辑器Notepad++，标准浏览器（2）使用Notepad++编写个人简历网页2. HTML入门教学要求：掌握HTML文档的结构及其各个组成部分，熟悉和掌握头部、主体、常用标记、常见属性、语法及规范；HTML的兼容性及其测试方法。
教学内容：HTML文档的结构及其各个组成部分；常用标记、常见属性、语法及规范；Chrome程序员开发工具的使用；Z1. HTML文档的结构Z2. 常用标记、常见属性、语法及规范实验内容：实验二 HTML文档的结构的练习（1）创建一个包含html结构的简单网页（2）Chrome程序员开发工具3.CSS入门教学要求：掌握CSS的特点及3种设置方法；CSS属性中的单位；CSS文字样式； CSS 背景与颜色；CSS的继承和重叠；教学内容：CSS的特点及3种设置方法；CSS属性中的单位；文字样式；背景与颜色；Z1. CSS样式规则Z2. CSS基础选择器N3. 复合选择器Z4. 字体样式属性Z5. 样式外观属性实验内容：实验三使用CSS文本样式属性控制网页中的文本，制作网页中常见的新闻页面，效果。
《网页设计基础》课程编号：...课程名称：网页设计基础学分：3 学时48 （其中实验学时：16）先修课程：计算机基础B一、目的与任务本课程是本科文科各专业的一门必修的计算机基础课，是计算机基础教学中的重要环节。
本课程的主要任务是使学生掌握在信息社会中必要的计算机应用技能——网页设计与制作，培养学生的计算机文化意识。
课程将讲授HTML、CSS、JavaScript等基本技术，并通过大量实验使学生掌握网页设计与制作技能，为培养理论与实践相结合的、全面发展的计算机应用高级人才打下基础。
二、教学内容与学时分配理论教学部分（32学时）第1章HTML5基础（2学时）浏览器、服务器和URL创建网站的基本步骤HTML的概念和原理使用基本HTML标记符（<html> <head> <title> <body> <p>）创建简单网页第2章文本格式与超链接（4学时）段落格式字体格式列表格式创建超链接第3章CSS入门（4学时）CSS样式定义CSS的属性单位3种CSS样式表5种CSS选择器3种常见CSS属性第4章图像与多媒体（2学时）网页图像基础图像处理基本操作图像标记符img使用多媒体对象第5章表格与表单（2学时）创建表格表格的属性设置创建表单创建表单控件第6章CSS3进阶（6学时）CSS3高级选择器CSS3布局CSS3高级属性CSS3样式的优先级第7章JavaScript与前端开发（3学时）使用客户端脚本JavaScript编程*前端开发技术第8章网页设计基础（3学时）设计与认知网站设计的原则设计适于导航的网页设计网站导航设计版式第9章使用Dreamweaver（3学时）使用本地站点编辑网页使用CSS样式高级功能第10章综合项目实践（3学时）网站开发项目管理综合实例实验教学部分（16学时）实验0：确定网站主题（搜集资料）实验1：制作纯文本网站（2学时）实验2：添加CSS（2学时）实验3：加入图片与多媒体（2学时）实验4：表格与表单（2学时）实验5：CSS布局（2学时）实验6：综合项目实践（6学时）三、考核与成绩评定采用日常性考核（大作业）和期末终结性考核相结合的方式。
网页制作教学大纲网页制作教学大纲一、引言在当今数字化时代，网页设计与制作已经成为一项重要的技能。
无论是个人网站、企业宣传页面还是电子商务平台，都需要精心设计的网页来吸引用户，并提供良好的用户体验。
本文将探讨网页制作的教学大纲，以帮助学习者系统学习和掌握网页制作的技能。
二、基础知识1. 网页制作的概念和发展历程- 介绍网页制作的定义和背景- 回顾网页制作的发展历程，从简单的HTML页面到现代的响应式设计2. HTML与CSS基础- 介绍HTML和CSS的作用和基本语法- 学习如何使用HTML标签创建网页结构- 学习如何使用CSS样式表美化网页3. 响应式设计与移动优先- 解释响应式设计的概念和重要性- 学习如何使用媒体查询和流式布局创建适应不同设备的网页- 强调移动优先设计的原则和实践三、进阶技巧1. 图像和多媒体的应用- 学习如何插入图像和视频到网页中- 探讨图像和多媒体的优化和压缩方法，以提高网页加载速度2. 交互式元素与动画效果- 学习如何使用JavaScript和CSS动画创建交互式元素和动画效果 - 强调用户体验的重要性，提供用户友好的交互功能3. 网页导航与布局设计- 探讨网页导航的设计原则和最佳实践- 学习如何创建吸引人的网页布局，包括网格系统和平衡布局四、实践项目1. 个人网站设计与制作- 学习如何规划和设计个人网站的结构和内容- 实践使用HTML、CSS和JavaScript创建个人网站2. 企业宣传页面设计与制作- 学习如何根据企业品牌和目标受众设计企业宣传页面- 实践使用响应式设计和交互式元素创建企业宣传页面3. 电子商务平台设计与制作- 学习如何设计和制作电子商务平台的网页- 探讨电子商务平台的用户体验和安全性要求五、实践与评估1. 实践项目的完成与展示- 学习如何将网页上传到服务器并进行测试- 学习如何使用浏览器开发者工具进行调试和优化2. 项目评估与反馈- 学习如何评估网页设计的质量和用户体验- 探讨如何接受反馈并进行改进六、总结通过本教学大纲的学习，学生将掌握网页制作的基础知识和技能，并能够设计和制作个人网站、企业宣传页面和电子商务平台。
《HTML+CSS+JavaScript网页制作案例教程》课程教学大纲（课程英文名称）课程编号：201509210011学分：5学分学时：64学时（其中：讲课学时：45 上机学时：19 ）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI设计、JavaScript网页特效适用专业：信息及其计算机相关专业开课部门：计算机系一、课程的性质与目标《HTML+CSS+JavaScript网页制作案例教程)》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、JavaScript 编程基础与事件处理等内容。
通过本课程的学习，学生能够了解HTML、CSS 及JavaScript语言的发展历史及未来方向，熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。
二、课程的主要内容及基本要求第一章网页那点事（2学时）[知识点]认识网页常见的互联网专业术语Web标准HTML简介CSS简介JavaScript简介常用浏览器介绍Dreamweaver 工具的使用使用Dreamweaver创建第一个页面[重点]Web标准Dreamweaver工具的使用[难点]Web标准Dreamweaver工具创建第一个页面[基本要求]了解Web标准，明确HTML、CSS及JavaScript在其中的作用。
熟悉Dreamweaver工具的基本操作，能使用Dreamweaver创建简单的网页。
第二章从零开始构建HTML页面（4学时）[相关案例]【案例1】简单的网页：【案例2】新闻页面：【案例3】图文混排：[知识点]HTML文档基本格式单标记与双标记标题与段落标记HTML文档头部相关标记font标记标记的属性文本格式化标记图像标记相对路径与绝对路径常用图像格式特殊字符标记[重点]HTML文档基本格式标记的属性图像标记相对路径与绝对路径[难点]相对路径与绝对路径[学习目标]掌握HTML文档基本格式，能够书写规范的HTML网页。
《HTML+CSS+JavaScript网页制作案例教程》课程教学大纲（课程英文名称）课程编号：201509210011学分：5学分学时：64学时（其中：讲课学时：45上机学时：19）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI设计、JavaScript网页特效适用专业：信息及其计算机相关专业开课部门：计算机系一、课程的性质与目标《HTML+CSS+JavaScript网页制作案例教程)》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、JavaScript 编程基础与事件处理等内容。
通过本课程的学习，学生能够了解HTML、CSS及JavaScript语言的发展历史及未来方向，熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。
二、课程的主要内容及基本要求第一章网页那点事（2学时）[知识点]认识网页常见的互联网专业术语Web标准HTML简介CSS简介JavaScript简介常用浏览器介绍Dreamweaver工具的使用使用Dreamweaver创建第一个页面[重点]Web标准Dreamweaver工具的使用[难点]Web标准Dreamweaver工具创建第一个页面[基本要求]了解Web标准，明确HTML、CSS及JavaScript在其中的作用。
熟悉Dreamweaver工具的基本操作，能使用Dreamweaver创建简单的网页。
第二章从零开始构建HTML页面（4学时）[相关案例]【案例1】简单的网页：【案例2】新闻页面：【案例3】图文混排：[知识点]HTML文档基本格式单标记与双标记标题与段落标记HTML文档头部相关标记font标记标记的属性文本格式化标记图像标记相对路径与绝对路径常用图像格式特殊字符标记[重点]HTML文档基本格式标记的属性图像标记相对路径与绝对路径[难点]相对路径与绝对路径[学习目标]掌握HTML文档基本格式，能够书写规范的HTML网页。
掌握标题、段落及文字标记，可以合理地使用它们定义网页元素。
掌握图像标记，学会制作图文混排页面。
第三章使用CSS技术美化网页（8学时）[相关案例]【案例4】文字Logo：【案例5】专题栏目：【案例6】搜索页面：[知识点]CSS样式规则引入CSS样式表CSS基础选择器CSS字体样式属性CSS文本外观属性CSS复合选择器CSS层叠性与继承性CSS优先级[重点]CSS样式规则引入CSS样式表CSS复合选择器CSS层叠性与继承性CSS优先级[难点]CSS复合选择器CSS优先级[基本要求]掌握CSS样式规则，能够书写规范的CSS样式代码。
掌握CSS字体样式及文本外观属性，能够控制页面中的文本样式。
掌握CSS复合选择器，可以快捷选择页面中的元素。
理解CSS层叠性、继承性与优先级，学会高效控制网页元素。
第四章CSS盒子模型（8学时）[相关案例]【案例7】音乐盒：【案例8】用户中心：【案例9】咖啡店banner：【案例10】图标导航栏：[知识点]认识盒子模型div标记边框属性内边距属性外边距属性背景属性元素的类型span标记元素的转换[重点]div标记边框属性内边距属性外边距属性背景属性元素的转换[难点]背景属性元素的类型元素的转换[基本要求]掌握盒子模型相关属性，能够使用它们熟练地控制网页元素。
理解块元素与行内元素的区别，能够对它们进行转换。
第五章列表与超链接（6学时）[相关案例]【案例11】精美电商悬浮框：【案例12】二维码名片：【案例13】电商团购悬浮框：【案例14】唱吧导航栏：唱吧导航栏默认效果鼠标移上歌曲分类时[知识点]无序列表有序列表定义列表定义列表实现图文混排列表嵌套list-style复合属性背景图像定义列表项目符号超链接标记<a>清除超链接图像的边框链接伪类锚点链接[重点]无序列表定义列表背景图像定义列表项目符号超链接标记<a>链接伪类[难点]背景图像定义列表项目符号链接伪类[基本要求]掌握无序、有序及定义列表的使用，可以制作常见的网页列表模块。
掌握超链接标记的使用，能够使用超链接定义网页元素。
掌握CSS伪类，会使用CSS伪类实现超链接特效。
第六章HTML表单（6学时）[相关案例]【案例15】用户登录界面：【案例16】趣味选择题：【案例17】空间日志：【案例18】学员档案：[知识点]认识表单创建表单input控件textarea控件select控件CSS控制表单样式[重点]input控件textarea控件select控件CSS控制表单样式[难点]input控件CSS控制表单样式[基本要求]理解表单的构成，可以快速创建表单。
掌握表单相关标记，能够创建具有相应功能的表单控件。
掌握表单样式的控制，能够美化表单界面。
第七章浮动与定位（6学时）[相关案例]【案例19】世界杯梦幻阵容：【案例20】商品专栏：【案例21】移动端电商界面：【案例22】违停查询：“违停查询界面”默认效果鼠标经过第一个“违停坐标”效果[知识点]元素的浮动属性floatclear属性清除浮动overflow属性清除浮动after伪对象清除浮动overflow属性元素的定位属性静态定位相对定位绝对定位固定定位z-index层叠等级属性[重点]元素的浮动属性floatclear属性清除浮动overflow属性清除浮动相对定位绝对定位[难点]overflow属性清除浮动相对定位绝对定位[基本要求]理解元素的浮动，能够使用浮动对网页进行布局。
熟悉清除浮动的方法，能够清除浮动的影响。
掌握常见的几种定位模式，能够对元素进行精确定位。
第八章JavaScript编程基础（8学时）[相关案例]【案例23】动态获取用户密码：【案例24】传智商城下拉菜单：“传智商城”效果展示“下拉菜单”效果展示【案例25】计算器：[知识点]JavaScript的引入关键字变量prompt()函数alert()函数console.log()函数函数Array数组对象DOM节点树节点的访问元素对象常用操作元素属性与内容操作元素样式操作数据类型运算符运算符优先级表达式条件语句eval()函数[重点]变量函数Array数组对象DOM节点树节点的访问元素对象常用操作元素属性与内容操作元素样式操作条件语句[难点]DOM节点树节点的访问元素对象常用操作元素属性与内容操作元素样式操作[基本要求]掌握JavaScript语法规则，能够书写规范的JavaScript代码。
掌握数组的概念，能够熟练使用数组的常用属性和方法。
掌握节点的访问，能够准确访问指定元素和相关元素。
掌握if语句及switch语句，能够灵活运用条件控制语句。
第九章JavaScript事件处理（10学时）[相关案例]【案例26】电商网站限时秒杀：限时秒杀秒杀结束【案例27】Tab栏切换效果：Tab栏切换前Tab栏鼠标悬浮状态【案例28】台球移动游戏：台球初始位置台球移动后的位置【案例29】用户登陆验证：用户登陆验证未输入密码提示密码输入不一致提示[知识点]JavaScript事件事件处理程序的调用BOM操作Date对象数据类型转换循环控制语句跳转语句鼠标事件键盘事件页面事件事件对象表单事件String对象[重点]BOM操作Date对象循环控制语句跳转语句鼠标事件键盘事件页面事件事件对象表单事件[难点]鼠标事件键盘事件页面事件事件对象表单事件[基本要求]了解什么是JavaScript事件，能够对事件处理程序进行调用。
掌握JavaScript常用事件，如鼠标事件、表单事件、键盘事件以及页面事件等。
掌握BOM操作，能够使用BOM与浏览器窗口进行交互。
掌握Data对象的常用方法，能够应用Data对象获取当前区域的日期时间字符串。
第十章实战开发—传智播客设计学院首页面（6学时）[案例展示][知识点]建立站点站点初始化设置切片效果图分析页面布局定义公共样式制作头部和导航制作banner和通告制作主体内容区域制作底部版权区域[重点]建立站点切片效果图分析定义公共样式制作头部和导航制作banner和通告制作主体内容区域制作底部版权区域[难点]切片制作头部和导航制作banner和通告制作主体内容区域[基本要求]掌握站点的建立，能够建立规范的站点。
了解切图工具，能够运用切片裁切效果图。
完成首页面的制作，并能够实现简单的JavaScript特效。
三、学时分配章目讲课实验上机合计第一章网页那点事2学时0学时2学时第二章从零开始构建HTML页面3学时1学时4学时第三章使用CSS技术美化网页6学时2学时8学时第四章CSS盒子模型6学时2学时8学时第五章列表与超链接4学时2学时6学时第六章HTML表单4学时2学时6学时第七章浮动与定位4学时2学时6学时第八章JavaScript编程基础6学时2学时8学时第九章JavaScript事件处理6学时4学时10学时4学时2学时6学时第十章实战开发—传智播客设计学院首页面合计45学时19学时64学时四、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。
学生的考试成绩由平时成绩（30%）和期末考试（70%）组成，其中，平时成绩包括出勤（5%）、作业（5%）、实验和上机成绩（20%）。
五、选用教材和主要参考书本大纲是根据教材《HTML+CSS+JavaScript网页制作案例教程》所设计的。
六、大纲说明本课程的授课模式为：课堂授课+上机，其中，课堂主要采用多媒体的方式进行授课，并且会通过测试题阶段测试学生的掌握程度；上机主要是制作网页模块，要求学生根据效果图编写网页前台代码。
撰写人：审定人：批准人：执行时间：。
