《HTML+CSS+JavaScript网页制作案例教程》课程教学
传智播客《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答案解析：咖啡前面是无序列表的项目符号，拿铁和摩卡前面的项目符号按照一定的顺序排列是有序列表。
因此为无序列表嵌套有序列表。
说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
《网页设计课件：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