《HTML+CSS+JavaScript网页制作案例教程》课程教学
《网页设计课件：HTML+CSS+JavaScript入门教程》
盒模型
理解盒模型的概念，熟悉内边距、边框和外边 距属性的使用。
布局和浮动
掌握如何使用浮动、定位和弹性布局来实现响 应式网页设计。
响应式布局设计原理
1
弹性布局
2
通过弹性盒子和网格布局实现自适应和
流动性的页面排版。
3
媒体查询
使用媒体查询和CSS媒体类型为不同设备 和屏幕尺寸创建响应式样式。
图像优化
了解如何使用不同的图像格式和断点优 化网页加载速度和性能。
使用标签插入图像到网页，探索 不同的属性和选项。
链接
创建链接以便于导航和资源共享， 了解锚点、外部链接和文件路径 的使用。
表格
使用表格标签创建结构化数据的 表达，掌握表格的基本属性和格 式。
CSS的基本语法和样式属性
选择器
了解不同的选择器类型，掌握如何选择和样式 化特定的HTML元素。
背景和颜色
使用背景属性为元素添加颜色、图像或渐变， 创建各式各样的视觉效果。
动画效果
使用JavaScript和CSS过渡、变换 和关键帧动画创建生动的页面效 果。
HTML5中常见的语义化标签
头部和导航
使用 和等标签来定义页面的头部 和导航栏。
主体内容
使用 标签包含网页的主要内容， 提供更清晰的结构和语义。
CSS3中常见的渐变、阴影、边框效果
渐变效果
利用CSS渐变属性为元素背景、 边框或文本创建各种渐变效果。
HTML表单与表格的设计
表单元素
学习如何使用、和<select>等表单元素创建用户交互界面。</p></div> <div><h4>表单验证</h4><p>使用 HTML表单验证属性和JavaScript验证函数确保用户输入的准确性和有效性。</p></div> <div><h4>表格设计 </h4><p>了解如何使用<table>、<th>和<td>等标签创建结构化数据的表格。</p></div> </boxes> </section>
《HTMLCSSJavaScript网页制作三合一案例教程》教学课件13第十三章
《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网页制作三合一案例教程》教学课件 01第一章
14
文档标签栏位于应用程序栏下方，左侧显示当前翻开的所有网页文档的 名称及其关闭按钮；右侧显示当前文档在本地磁盘中的保存路径以及复 原按钮；下方显示当前文档中的包含文档〔如CSS文档〕以及链接文档。 当用户翻开多个网页时，通过单击文档标签可在各网页之间切换。另外， 单击下方的包含文档或链接文档，可翻开相应文档，如图1-12所示。
<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
27
HTML标签是由尖括号括起来的关键词，绝大多数HTML标签都是成对出 现的，包含标记头< >和标记尾< / >。标记头是开始标签，标记尾是结束 标签，中间是元素内容，如段落标签<p></p>。除双标签外也存在少量 的单标签，如换行标签<br/>。 HTML文档源码中一行可以写多个不同的标签，也可将一对标签写在不 同的行中，但每对标签必须嵌套使用，不能交叉使用。下面的列表中列 出了标签的正确用法和错误用法。
4
案例一 了解网站开发流程
案例步骤
网站开发流程从整体上来说可以分成3大局部，分别是网站 设计、网站制作和后期维护，如图1-1所示。在这3局部中， 本书着重介绍的是网站制作局部，强调3个要点的讲解：设 置站点、搭建网页主体结构层、搭建网页样式层。
5
6 支撑知识点
一、网页、网站和主页
简单来说，网页就是我们上网时在浏览器中翻开的一个个画 面。网页中可以包含文字、图像、表格、超链接、声音、影 像等，其中文字、图像、超链接是组成网页最根本的3个元 素。网站就是一组相关网页的集合，是通过Internet向全世 界发布信息的载体。 主页就是翻开某个网站时显示的第一个网页，又叫首页。每 个网站都有一个主页，通过它可以翻开网站的其他页面。主 页文件根本名一般为index或default，如、、和等。
教学课件 HTML+CSS+JavaScript网页设计
本章概述 本章的学习目标 主要内容
Hale Waihona Puke 第1页本章概述• 随着互联网的发展，越来越多的人学会了上网，通过网络，可以 聊天、购物、看新闻、查天气等等。这些功能都是通过访问不同 的网页来完成的，那么网页是怎么制作出来的，我们通过手机、 电脑上网时又如何访问不同的网页呢？本章将从最基本的概念讲 起，告诉读者网页与网站的基本原理，如何设计和开发网页。
第4页
1.1 网页的基本概念
• 随着Internet的不断发展，网页已经被越来越多的人所熟悉。那么 什么是网页，网页有是如何搭建并呈现在用户面前的呢？
• Internet，中文正式译名为因特网，又叫做国际互联网。Internet 采用超文本和超媒体的信息组织方式，将信息的链接扩展到整个 Internet上。
• HTML是最早的超文本标记语言，它的发展经历了HTML 1.0、2.0、3.2、4.0、 4.01和5几个版本，在发展过程这，尤其是从HTML4.0开始淘汰了很多标记和 属性，本书对这些淘汰的标记和属性不再赘述。
第12页
CSS层叠样式表
• 层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅 可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格 式化。
第11页
HTML概述
• HTML的全称是超文本标记语言(Hyper Text Markup Language)，是Internet上用 于编写网页的主要语言，它提供了精简而有力的文件定义，可以设计出多姿 多彩的超媒体文件。
• HTML文件是纯文本的文件格式，所谓的超文本，主要是指它的超链接功能， 通过超链接将图片、声音和影视及其他网页或其他网站链接起来，构成内容 丰富的Web页面。
《HTML CSS JavaScript网页制作三合一案例教程》教学课件 08第八章
HTML+CSS+JavaScript网页制作 三合一案例教程
HTML+CSS+JavaScriptents Page
无序列表的 兼容性
浮动在IE下产 生的双倍距
离
在IE 6中图片 下方有空隙产
生
3像素问题
浏览器不能 自适应高度
margin值加倍 问题
案例一 无序列表的兼容性
无序列表的特点是，每一个列表项的前面不是以数字或者字母作为顺序 标示，而是以黑色圆点〔默认设置〕作为标示。默认状态下，IE和火狐 浏览器对于列表的显示也稍有区别，如图8-1所示。 从图上可以看出，火狐浏览器中的列表默认的小圆点要稍微大一些〔左 边为IE，右边为火狐，后面的例如也是同样的排列方式〕。
<div id="box"> <div id="left">左侧栏目</div> <div id="right">右侧栏目</div>
<div class="clear"></div> </div>
21
22
CSS代码如下：
#box{
} #left {
} #right{
} .clear{ }
width:400px; border:1px #000000 solid; height:auto; font-size:12px; color:#FFFFFF;
9
我们看到在IE 6浏览器下，最左边产生了双倍的距离，这是IE 6的一个BUG，在 IE 8中已经解决。大家也许会说，有BUG简单嘛，直接用IE 8、IE 9就好了。但 是我们在制作网页时，必须考虑到有些用户的浏览器还是用的IE 6甚至是。 在IE 6中，这个双倍距离的BUG会在页面布局中产生很多问题，因为在我们的设 计器〔Dreamweaver〕中，显示效果是没有双倍距离的。图8-5显示了上述页面 在Dreamweaver设计界面中的效果。
《HTML CSS JavaScript网页制作三合一案例教程》教学课件 14第十四章
公司地址：海南省海口市*********</p>
</div>
27
三、编写CSS代码
#foot p{ margin:15px auto; font-size:12px; line-height:24px; color:#2c2c2c;
}
/*设置上下间距为15px，左右居中*/ /*设置文字大小*/ /*设置行高*/ /*设置文字颜色*/
22
三、制作酒店推荐栏目
这里重点讲解图14-12所示局部的布局方式。在虚线上面局部采用图片环绕在文字左边， 只需对图片设置align="left"属性即可；右边酒店名字局部用<h3>标签显示。<h3>和<p>标 签都是块状元素，所以在<h3>标签内再插入段落标签<p>，用来放置 内容。 虚线下面的列表局部，价格局部要纵向对齐，所以我们采用定义列表即<dl>标签来显示， 前面局部用<dt>标签，后面的价格用<dd>标签，只要为<dt>定义了宽度，然后定义为左浮 动，就可以实现我们需要的效果了。
5
案例一 搭建页面整体框架
一、整体布局分析
由图14-2分析，本例页面的结构 略 显 复 杂 ， 不 是 简 单 的 1-2-1 结 构 或 者 1-3-1 结 构 ， 其 中 包 含 了 标准流，1-2-1和1-3-1结构，是 一个综合的布局案例。对于这种 布局，我们这里仍以浮动布局为 主要方法进行讲解，整体框架效 果如图14-2所示。
9
10
二、编写HTML代码
该局部内容位于all>head层中，需要在id为head的<div>中插入图片标 签<img>〔logo局部〕，以及<ul>标签、<li>标签和超链接标签<a>等 〔导航局部〕。这里分别将图片和<ul>标签放在不同的<div>中，并为 <ul>所在的标签设置class名nav。此外，在这里每一个img标签结束后 不要有间隔，这是防止兼容性的一个方式。
HTML+CSS+JavaScript网页制作(Web前端开发)(第3版)授课计划
2
掌握JavaScript函数
讲练结合
132号楼机房
3-2电子时钟
7.JavaScript对象（8学时）
7.1JavaScript对象的基本概念
10
2
了解掌握对象和类、对象的使用、对象废除、对象类型
讲练结合
132号楼机房
3-4构造函数
7.2JavaScript对象类型
11
2
掌握对象的类型和部分核心对象
132号楼机房
无
1.2HTML语言概述及语法
1
2
熟悉基本块级标签、列表标签
讲练结合
132号楼机房
2-1、2
2．利用html编写页面
（4学时）
2.1HTML的常用标记
2
2
熟悉表格、分区标记
讲练结合
132号楼机房
2-3、5，3-1
2.2HTML的交互标记
2
2
熟悉链接、图像标记
讲练结合
132号楼机房
3-1/欢迎页面
5.2JavaScript语法基础
9
2
了解掌握数据类型、常量、变量以及数据类型的转换、掌握表达式和运算符
讲练结合
132号楼机房
例2-7简易计算器
6.Javascript程序逻辑
（4学时）
6.1JavaScript程序流程控制
9
2
掌握JavaScript程序流程控制
讲练结合
132号楼机房
四则运算
6.2JavaScript函数
总成绩=项目考评成绩×50%+期中考试×20%+期末考试×30%
教学组织要求：
理论授课:实践教学=1：3
子任务学习的时候以个人为单位，总项目的学习学生以项目小组的形式组织教学，每个小组4-5人，每个老师辅导3-4组为宜。
HTML+CSS+JavaScript网页制作(Web前端开发)(第3版)课时授课计划
教学组织形式
讲解、示范、边讲边练
作业
备注
第7章使用CSS布局页面
7.1 Div+CSS布局技术概述144
7.1.1认识Div+CSS布局144
7.1.2正确理解Web标准145
7.2 Div的嵌套布局145
7.2.1将页面用Div分块145
7.2.2案例——制作爱心包装活动发布页面146
7.3常见的CSS布局样式149
1.掌握Div嵌套布局的方法；
2.掌握常见的CSS布局样式；
3.掌握使用CSS布局制作综合案例页面的技术。
培养学生对网页、网站概念的认识，培养学生的相互沟通能力和团队协作精神。
能力训练任务
教材案例与习题
教学重点
教学难点
1.使用Div嵌套布局制作基本的页面。
2.使用CSS布局制作综合案例页面。
教学方法、手段
3.2.1 details元素和summary元素46
3.2.2 progress元素47
3.3表格48
3.3.1表格的结构48
3.3.2表格的基本语法48
3.3.3表格的属性49
3.3.4不规范表格51
3.3.5表格数据的分组52
3.3.6案例——使用表格布局爱心包装产品展示页面54
3.4表单55
7.3.1两列布局样式149
7.3.2三列布局样式149
7.4综合案例——制作爱心社区页面150
课时教学计划
教师姓名
时数
8
日期
班级
上课地点
课程（学习领域）名称
章节
第8章JavaScript语言基础
单元主要教学内容
数据类型、表达式、程序结构、函数、对象
05第五章HTML CSS JavaScript网页制作三合一案例教程
在没有特殊要求的前提下，均可使用display:block属性将元素转变为块元素。
7
在制作纵向导航栏或者列表一类的纵向HTML结构时，如果设计要求导航 栏的每一项之间有一定间隔，可以使用margin-bottom属性来实现这个 效果。 对于单个的元素来讲，margin-bottom属性是设置此元素和它下面的元 素的间隔，当此属性被设置在纵向菜单或者列表结构里面时，就可以产 生均匀的间隔效果。
13
案例四 制作带下拉菜单的横向导航栏
案例步骤
下面将要制作的导航栏会涉及一些略为复杂的 HTML结构，包括<ul>无序 列表标签的嵌套，以及由此产生的多层<HTML>结构对应的CSS代码的编写。
构建HTML1 结构 设置CSS样式 2
14
15
支撑知识点
——使用CSS的一些小技巧
对网页进行样式设置时，有时会遇到需要设置全局样式的情况，也就 是设置页面上所有标签、类、id都使用的共有样式。CSS为我们提供了 一种解决方法，就是使用*{}选择器。由该选择器定义的样式，浏览器 会视作页面上所有的内容都采用这个样式。
4
案例一 制作简单纵向导航栏
案例步骤
下面，我们就来学习如何制作纵向导航栏。导航栏的结构层通常由列表 构成，关于列表的相关知识我们在第二章和第三章中已经学习过。本案 例中，我们主要针对列表的创建、列表文字、背景样式的设置，以及鼠 标移动时变化的效果等进行介绍。其中，超链接的伪类效果是制作超链 接动态变化的重要方法。另外，导航栏一般分为纵向和横向，针对使用 列表制作的导航栏，纵向菜单无须改变列表结构，只需设置样式的变化 即可。
父标签 子标签 孙标签 曾孙标签 …{}
其中，父标签、子标签等既可以是标签名称，也可以是class名或id名。 例如，看下面的一段HTML代码：
《HTML CSS JavaScript网页制作三合一案例教程》教学课件 13第十三章
案例五 制作主体内容的中间局部
主体页面中间局部分为左右2局部，左侧是婚礼资讯区〔位于hlzx层〕， 右侧是视频显示区〔位于show层〕。在案例一中已设置好了这两局部 的样式，分别向左右浮动，并设置了宽度、高度、背景和外边距等属 性。下面具体制作这两局部的内容，效果如图13-11所示。
17
18
一、制作左侧婚礼资讯局部
<li><a href="#">作品欣赏</a></li> <li><a href="#">套系报价</a></li> <li><a href="#">优惠活动</a></li> <li><a href="#">联系我们</a></li> </ul> </div>
案例四 制作主体内容的上面局部
在案例一中已创立并设置好了主体 页面的main大层和其下的m1层〔主 体页面上面局部〕、m2层〔主体页 面中间局部〕、m3层〔主题页面下 面局部〕，以及这3个层的各子层， 完成了相关布局〔采用的是浮动式 布局〕，如图13-5所示。 在本案例中，我们将具体设置主体 页面m1层〔主体页面上面局部〕的 内容。此局部内容分为左右2局部， 分别是登录局部和图片显示区，下 面分别讲解。
主编：徐照兴、谭鸿健、郑宁健
HTML+CSS+JavaScript网页制作 三合一案例教程
HTML+CSS+JavaScript网页制作三合一案例教程
目录页 Contents Page
《HTML+CSS+JavaScript网页制作案例教程(第2版)》教学教案—01网页那点事
《HTML+CSS+JavaScript网页制作案例教程》（第2版）教学教案课题名称第1章 HTML5+CSS3网页设计概述计划课时2课时内容分析在学习网页制作之前，首先需要了解一些与网页相关的知识，为初学者学习后面章节的内容打下坚实的基础。
本章将从网页概述、网页制作技术入门以及Dreamweaver工具的使用等几个方面详细讲解网页的基础知识。
教学目标●了解Web标准，明确HTML、CSS及JavaScript的作用。
●熟悉Dreamweaver工具的基本操作，能够使用Dreamweaver创建简单的网页。
重点及措施教学重点：Dreamweaver初始化设置、Dreamweaver基本操作、创建第一个网页。
措施：通过网页代码练习加强学习，并通过动手实践进行巩固。
难点及措施教学难点：无。
措施：无。
教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。
教学过程第一课时（讲解网页的组成、网页名词解释、HTML、CSS、JavaScript等知识点）本课时内容学习✧分组讨论对新课进行讲解前，先让学生分组讨论以下问题：什么是网页？你真的认识网页吗？请小组代表对以上问题发表见解。
教师对上述问题进行解释：答案：说到网页，其实大家并不陌生，我们上网时浏览新闻、查询信息、看视频等都是在浏览网页。
网页可以看做承载各种网站应用和信息的容器，所有可视化的内容都会通过网页展示给用户。
为了使初学者更好地认识网页，我们首先来看一下淘宝网站。
打开谷歌浏览器，在地址栏中输入淘宝网址“https:///”，单击“Enter”键，此时浏览器中显示的页面即为淘宝网的首页单击“F12”键，浏览器中弹出的窗口便会显示当前网页的源代码✧知识点讲解➢讲解“网页的组成”（1）教师列举生活中浏览网页的实例，并展示网页的结构。
（2）教师展示PPT，对网页的结构进行具体讲解。
（3）学生自主提问，教师对疑难问题进行解答。
➢讲解“网页名词解释”（1）教师展示PPT，讲解网页中的常见名词，并通过示例加以说明。
《HTML CSS JavaScript网页制作三合一案例教程》教学课件 06第六章
案例二 制作月历——使用CSS控制表格进阶
案例步骤
为便于理解，我们将本案例分为两局部进行制作，第1局部使用<table> 和其他表格组成标签，构建2021年9月份的月历内容及其结构；第2局部 使用CSS来美化这个表格，并做到当将鼠标指针移到单元格上时有颜色变 化的效果。
构建HTML1结构 构建CSS样2式
3px;
左边距为3像素（顺时针方向）
21 支撑知识点
二、使用CSS合并表格边框
使用CSS设置单元格边框时，假设为每个单元格都设置边框宽度为1px， 那么当两个单元格相邻的时候，相邻边的边框宽度实际上是 1px+1px=2px。为防止此情况发生，或为了防止单元格之间出现空隙， 可使用border-collapse属性将表格相邻的边框合并。
案例说明
在网页设计中，表格占有很重要的地位。在Div+CSS布局方式出现之前， 大局部网页都是用表格进行布局和分类显示数据的。现在，表格在网页 制作中主要用来显示后台数据。将后台数据显示在一个表格中，不但可 以使数据看起来更容易阅读，也可以让整个页面美观合理〔本书不涉及 后台操作，所以本章中所有的数据均直接书写在页面的HTML代码中〕。 本案例中，我们通过制作图6-1所示的2021年世界杯分组表，来学习与 表格相关的HTML标签，掌握构建表格结构，以及使用CSS美化表格的操 作〔如设置单元格高度、宽度、颜色和边框等〕。
13
合并单元格后，在Dreamweaver的代码界面中可看到系统自动为相应单 元格添加了colspan或rowspan属性。因此，我们也可直接在代码视图中 通过为单元格标签添加这两个属性来合并单元格。
➢ colspan属性：用来合并行，语法：colspan=“数字〞。例如：<td colspan=“3〞></td>，表示将1行中的3个单元格合并为一个。 ➢ rowspan属性：用来合并列，语法：rowspan="数字"。例如：<td rowspan="3"></td>，表示将一列中的3个单元格合并为一个。
《HTML CSS JavaScript网页制作三合一案例教程》教学课件 12第十二章
<input type=〞submit〞 onClick=〞area()〞/> JavaScript对大小写敏感。关键词function必须是小写的，并且必须以与函数 名称相同的大小写来调用函数。
21
返回结果的函数必须使用return语句。这条语句指定某个值将返回给调 用函数的位置。例如，area()函数返回矩形的面积：
〔5〕节省CGI的交互时间 随着WWW的迅速开展，有许多WWW效劳器提供的效劳要与浏览者进行交互， 以确定浏览者的身份和所需效劳的内容等，这项工作通常由CGI/PERL编 写相应的接口程序与用户进行交互来完成。这种交互增加了网络通信量， 另一方面影响了效劳器的性能。
9 支撑知识点
三、在页面中添加脚本的方式
12
13 支撑知识点
一、数据类型和变量
JavaScript提供了6种数据类型，其中4种根本数据类型用于处理数字和文 字。 ➢ string字符串类型：字符串是用单引号或双引号来说明的〔可以使用 单引号来输入包含双引号的字符串，反之亦然〕，如：“The cow jumped over the moon.〞 ➢ 数值数据类型：JavaScript支持整数和浮点数。整数可以为正数、0或 者负数；浮点数可以包含小数点，也可以包含一个“e〞〔大小写均可， 在科学记数法中表示“10的幂〞〕，或者同时包含这两项。
HTMLCSSJavaScript教学教案讲解3
《HTML CSS JavaScript网页制作》教学教案第1讲在当今社会中，网络已成为人们生活的一部分，网页设计技术已成为学习计算机的重要内容之一。
目前大部分网页都采用可视化网页编辑软件来制作的，但是无论采用哪一种网页编辑软件，最后都是将所设计的网页转化为HTML。
HTML是搭建网页的基础语言，如果不了解HTML，就不能灵活地实现想要的网页效果。
本章就来介绍HTML的基本概念和编写方法以与浏览HTML文件的方法，使读者对HTML有个初步的了解，从而为后面的学习打下基础。
第2讲一个完整的HTML文档必须包含3个部分：一个由<html>元素定义的文档版本信息，一个由<head>定义各项声明的文档头部和一个由<body>定义的文档主体部分。
<head>作为各种声明信息的包含元素出现在文档的顶端，并且要先于<body>出现。
而<body>用来显示文档主体内容。
文字是网页中最基本的信息载体，文字通过不同的排版方式、不同的设计风格排列在网页上，提供了丰富的信息。
文字的控制与布局在网页设计中占了很大比例，因此掌握好文字的使用，对于网页制作来说是最基本的。
本章就来讲解这些基本标记的使用，这些都是一个完整的网页必不可少的。
第3讲超级链接是HTML文档的最基本特征之一。
超级链接的英文名是hyperlink，它能够让浏览者在各个独立的页面之间方便地跳转。
每个网站都是由众多的网页组成，网页之间通常都是通过链接方式相互关联的。
超链接的范围很广，可以将文档中的任何文字与任意位置的图片设置为超级链接。
超链接有外部链接、电子邮件链接、锚点链接、空链接、脚本链接。
第4讲第7讲第8讲第9讲第10讲第11讲第12讲第13讲第14讲第15讲第16讲第17讲41 / 41。
《HTMLCSSJavaScript网页制作案例教程》教学大纲
《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网页。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
传智播客《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；说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
本课时内容学习✧分组讨论对新课进行讲解前，先让学生分组讨论以下问题：为了使网页更易读，经常将网页信息以列表的形式呈现，例如，淘宝商城首页的商品服务分类、排列有序，呈现为列表的形式。
其实，在HTML中，提供了3种常用的列表，分别为无序列表、有序列表和定义列表。
那么，请举例说明什么是“无序列表”和“有序列表”？它们之间有什么区别？请小组代表对以上问题发表见解。
教师对上述问题进行解释：●无序列表是网页中最常用的列表，之所以称为“无序列表”，是因为其各个列表项之间为并列关系，没有顺序级别之分。
例如传智播客官网的导航栏结构清晰，各列表项之间（如“网页平面”与“java培训”）排序不分先后，这个导航栏就可以看做一个无序列表。
●有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列，例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。
●无序列表使用<ul></ul>标记定义，<li></li>为具体的列表项。
有序列表使用<ol></ol>标记定义，<li></li>为具体的列表项。
✧案例描述在制作电商网站时，通常需要使用一些精美的悬浮框对商品信息进行简单的分类，这样即可以方便消费者搜索商品，也可以使网页结构变得清晰美观。
本节将运用无序列表制作一款精美的电商“悬浮框”。
✧知识点讲解➢总结知识点教师和学生一起总结在案例中涉及到的知识点，主要包括“无序列表、有序列表”等。
➢讲解“无序列表”（1）、教师展示PPT对“无序列表”的概念进行讲解，并列举网页中常见的例子进行说明。
（2）、教师展示PPT，对“无序列表的基本语法格式”及常用属性值进行讲解，并进行代码演示。
（3）、教师指出定义“无序列表”时需要注意的问题，并给与解答。
（4）、学生练习，教师巡视，对疑难问题进行解答。
➢讲解“有序列表”（1）、教师展示PPT对“有序列表”的概念进行讲解，并列举网页中常见的例子进行说明。
（2）、教师展示PPT，对“有序列表的基本语法格式”及常用属性值进行讲解，并进行代码演示。
（3）、教师对比“无序列表”与“有序列表”的显示效果，分析其区别与联系。
（4）、教师指出定义“有序列表”时需要注意的问题，并给与解答。
（5）、学生练习，教师巡视，对疑难问题进行解答。
✧案例讲解➢案例分析分析“精美电商悬浮框”构成元素，将其拆解为几个部分，分析各部分使用了哪些HTML标记及应用了哪些CSS样式。
➢案例实现教师带领学生分步骤地进行网页制作，通过结构分析、样式分析、制作页面结构、定义CSS样式等步骤完成页面的制作，并指出其中需要注意的事项。
说明：在网页制作时可适时停下来，让学生自行尝试。
小组之间可以协作讨论，教师巡视，对疑难问题进行解答。
✧阶段小结➢小结重点：无序列表、有序列表。
易错点：注意区分无序列表和有序列表的不同。
➢答疑教师询问学生对于知识点还有什么不理解的地方。
针对学生不理解的知识点给与解释。
✧巩固练习➢巩固“精美电商悬浮框”的制作学完知识点后，让学生再制作一次“精美电商悬浮框”案例。
以此使学生更熟练地掌握如何定义无序列表、有序列表等知识点。
➢通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。
第二课时（制作“二维码名片”，讲解定义列表、定义列表实现图文混排、列表嵌套）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。
1、下列选项中，属于定义有序列表相关属性的是（）A、backgroundB、typeC、startD、value答案：BCD答案解析：在有序列表中，除了type属性之外，还可以为<ol>定义start属性、为<li>定义value属性，它们决定有序列表的项目符号。
说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
本课时内容学习✧分组讨论对新课进行讲解前，先让学生分组讨论以下问题：在上节课中，我们已经学习了如何定义无序列表和有序列表。
本节课将学习另一种列表——定义列表。
那么，请大家讨论下什么是“定义列表”？以及如何使用“定义列表”？答案：请小组代表对以上问题发表见解。
教师对上述问题进行解释：●定义列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。
●定义列表使用<dl></dl>、<dt></dt>和<dd></dd>进行定义，其中，<dt></dt>标记用于指定术语名词，<dd></dd>标记用于对名词进行解释和描述。
一对<dt></dt>可以对应多对<dd></dd>，即可以对一个名词进行多项解释。
✧案例描述传统的名片，往往需要手动把上面的信息存进手机，这样的录入方式繁琐且容易出错。
二维码名片的出现，简化了繁琐的信息录入方式，轻轻一扫，就可读取内部包涵的文字和图片信息，极大地提高了信息的存取速度。
本节将运用定义列表制作一款时尚潮流的“二维码名片”。
✧知识点讲解➢总结知识点教师和学生一起总结在案例中涉及到的知识点，主要包括“定义列表、定义列表实现图文混排、列表嵌套”等。
➢讲解“定义列表”（1）、教师展示PPT对“定义列表”的概念进行讲解，并列举网页中常见的例子进行说明。
（2）、教师展示PPT，对“定义列表的基本语法格式”及常用属性值进行讲解，并进行代码演示。
（3）、教师对比“定义列表”与“无序列表和有序列表”的显示效果，分析其区别与联系。
（4）、教师指出定义“定义列表”时需要注意的问题，并给与解答。
（5）、学生练习，教师巡视，对疑难问题进行解答。
➢讲解“定义列表实现图文混排”（1）、教师访问“传智播客”官方网址，展示常见的“图文混排”效果。
（2）、教师对“定义列表实现图文混排”进行讲解并通过代码进行演示。
（3）教师分析“定义列表实现图文混排”时需要注意的问题，并给与解答。
（4）、学生练习，教师巡视，对疑难问题进行解答。
➢讲解“列表嵌套”（1）、教师和学生互动：在网上购物商城中浏览商品时，经常会看到某一类商品被分为若干小类，这些小类通常还包含若干的子类，同样，在使用列表时，列表项中也有可能包含若干子列表项，例如“淘宝网”中的导航栏效果。
要想在列表项中定义子列表项就需要将列表进行嵌套，下面，将对列表的嵌套进行讲解。
（2）、教师通过PPT对“列表嵌套”在网页中的常见效果进行展示。
（3）、教师对“列表嵌套”进行讲解并通过代码进行演示。
（4）、教师指出“列表嵌套”时需要注意的问题，并给予解答。
（5）、学生练习，教师巡视，对疑难问题进行解答。
✧案例讲解➢案例分析分析“二维码名片”的构成元素，将其拆解为几个部分，分析各部分使用了哪些HTML标记及应用了哪些CSS样式。
➢案例实现教师带领学生分步骤地进行网页制作，通过结构分析、样式分析、制作页面结构、定义CSS样式等步骤完成页面的制作，并指出其中需要注意的事项。
说明：在网页制作时可适时停下来，让学生自行尝试。
小组之间可以协作讨论，教师巡视，对疑难问题进行解答。
✧阶段小结➢小结重点：定义列表、定义列表实现图文混排、列表嵌套。
易错点：定义列表背景时，需要清除列表项的默认项目符号。
➢答疑教师询问学生对于知识点还有什么不理解的地方。
针对学生不理解的知识点给与解释。
✧巩固练习➢巩固“二维码名片”的制作学完知识点后，让学生再制作一次“二维码名片”案例。
以此使学生更熟练地掌握如何使用定义列表及列表的嵌套，并能灵活应用定义列表实现图文混排的效果。
➢通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。
✧布置作业➢完成“补充案例”，通过平台提交给教师，教师下节课进行点评。
➢预习5.3节【案例13】电商团购悬浮框。
➢预习5.4节【案例14】唱吧导航栏。
第三课时（制作“电商团购悬浮框”，讲解list-style复合属性、背景图像定义列表项目符号）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。
如左上图所示效果，下列嵌套列表可以实现的是（）A、有序列表嵌套有序列表B、有序列表嵌套无序列表C、无序列表嵌套有序列表D、无序列表嵌套无序列表答案：C答案解析：咖啡前面是无序列表的项目符号，拿铁和摩卡前面的项目符号按照一定的顺序排列是有序列表。
因此为无序列表嵌套有序列表。
说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。