HTML+CSS网页设计与布局课堂实录

第1篇 HTML篇

第1课 HTML入门

1.1 什么是HTML 2

1.2 HTML文件的基本结构 2

1.2.1 HTML文件结构 2

1.2.2 编写HTML文件注意事项 3

1.3 HTML文件编写方法 4

1.3.1 课堂小实例——使用记事本编写HTML页面 4

1.3.2 课堂小实例——使用Dreamweaver编写HTML页面 5

1.4 HTML页面主体常用设置 5

1.4.1 课堂小实例——定义网页背景色（bgcolor） 5

1.4.2 课堂小实例——设置背景图片（background） 6

1.4.3 课堂小实例——设置文字颜色（text） 7

1.4.4 课堂小实例——设置链接文字属性 8

1.4.5 课堂小实例——设置页面边距 10

1.5 页面头部元素和 10

1.6 页面标题元素

1.7 元信息元素 11

1.7.1 课堂小实例——设置页面描述 12

1.7.2 课堂小实例——定义页面的搜索方式 12

1.7.3 课堂小实例——定义页面的跳转 13

1.7.4 课堂小实例——设置页面关键字 14

1.8 综合实战——创建基本的HTML文件 14

1.9 课后练习 15

1.10 本课小结 16

第2课 用HTML设置文字与段落格式

2.1 插入其他标记 18

2.2 设置文字的格式 19

2.3 设置段落的排版与换行 24

2.4 水平线标记 28

2.5 设置滚动文字 32

2.6 综合实例——设置页面文本及段落 40

2.7 课后练习 42

2.8 本课小结 42

第3课 用HTML创建精彩的图像和多媒体页面

3.1 网页中常见的图像格式 44

3.2 插入图像并设置图像属性 44

3.3 添加多媒体文件 51

3.4 添加背景音乐 53

3.5 综合实例 55

3.6 课后练习 57

3.7 本课小结 58

第4课 用HTML创建超链接

4.1 链接和路径 60

4.2 链接元素 63

4.3 创建图像的超链接 67

4.4 下载文件 71

4.5 实战应用——给网页添加链接 72

4.6 课后练习 74

4.7 本课小结 75

第5课 使用HTML创建强大的表格

5.1 创建并设置表格属性 77

5.2 表格的结构标记 87

5.3 综合实例——使用表格排版网页 90

5.4 课后练习 94

5.5 本课小结 94

第6课 创建交换式表单

6.1 表单元素

96

6.2 表单的控件 97

6.3 综合实战——用户注册表单页面实例 105

6.4 课后练习 109

6.5 本课小结 110

第7课 HTML 5的新特性

7.1 认识HTM 5 112

7.2 HTML 5的新特性 114

7.3 HTML 5与HTML 4的区别 115

7.4 HTML 5新增的元素和废除的元素 117

7.5 新增的属性和废除的属性 126

7.5.1 新增的属性 126

7.5.2 废除的属性 127

7.6 课后练习 129

7.7 本课小结 129

第8课 HTML 5的结构

8.1 新增的主体结构元素 131

8.2 新增的非主体结构元素 136

8.3 课后练习 140

8.4 本课小结 141

第2篇 CSS篇

第9课 CSS基础知识

9.1 CSS 3介绍 143

9.2 在HTML 5中使用CSS的方法 145

9.3 选择器类型 148

9.4 编辑和浏览CSS 151

9.5 使用Dreamweaver设置CSS样式 152

9.6 实战应用——对网页添加CSS样式 161

9.7 课后练习 164

9.8 本课小结 164

第10课 CSS控制网页文本和段落样式

10.1　通过CSS控制文本样式 166

10.2　通过CSS控制段落格式 171

10.3 滤镜 177

10.4 实战应用——CSS字体样式综合演练 185

10.5 课后练习 187

10.6 本课小结 188

第11课 用CSS设计图片和背景

11.1　设置网页的背景 190

11.2　设置背景图片的样式 191

11.3　设置网页图片的样式 195

11.4 实战应用 198

11.5 课后练习 201

11.6 本课小结 202

第12课 用CSS制作实用的菜单和网站导航

12.1 列表的使用 204

12.2 列表样式控制 204

12.3　横排导航 209

12.4　课堂小实例——竖排导航 213

12.5 实战应用 214

12.6 课后练习 220

12.7 本课小结 220

第13课 CSS盒子模型与定位

13.1　“盒子”与“模型”的概念 222

13.2　border 222

13.4　课堂小实例——设置外边距（margin） 227

13.5　盒子的定位 228

13.6　盒子的浮动 233

13.7　课后练习 236

13.8　本课小结 236

第14课 CSS+DIV布局方法

14.1　CSS布局模型 238

14.2 CSS布局理念 245

14.3　常见的布局类 247

14.4 课后练习 255

14.5 本课小结 255

第3篇 综合案例篇

第15课 设计制作企业网站

15.1 企业网站设计概述 257

15.2 各部分设计 261

附录A CSS属性一览表

附录B HTML常用标签

本书紧密围绕网页设计师在网页制作过程中的实际需要和应该掌握的技术，全面地介绍了使用HTML、CSS进行网页设计和制作的各方面内容和技巧。本书不只注重语法讲解，还通过一个个鲜活、典型的实战案例来帮助读者达到学以致用的目的。每个语法都有相应的实例，每章后面又配有综合小实例，各章均配有习题，力求达到理论知识与实践操作完美结合的效果。本书可作为普通高校、高职高专计算机及相关专业教材，并可供从事网页设计与制作、网站开发、网页编程等行业人员参考。

适读人群 ：HTML、 CSS、网页设计、网站建设初中级读者
85个视频教学文件，HTML5，CSS，DIV，Dreamweaver全面覆盖。案例全部来源于工作一线与教学实践。
知识系统全面本书内容完全从网页创建的实际角度出发，将所有HTML、CSS元素进行归类，每个标记的语法、属性和参数都有完整详细的说明，信息量大，知识结构完善。
典型实例讲解本书的每课都配有大量实用案例，将本课的基础知识综合贯穿起来，力求达到理论知识与实际操作完美结合的效果。
配合Dreamweaver进行讲解本书以浅显的语言和详细的步骤介绍了在可视化网页软件Dreamweaver中，如何运用HTML、CSS代码来创建网页，使网页制作更加得心应手。在最后一课向读者展示了完全不用编写代码，在Dreamweaver中创建完整网页的过程。
代码支持本书提供实例和综合案例的源代码，可让读者在实战应用中掌握网页设计与制作的每一项技能。
配图丰富，效果直观 对于每一个实例代码，本书都配有相应的效果图，读者无须自己进行编码，也可以看到相应的运行结果或者显示效果。在不便上机操作的情况下，读者也可以根据书中的实例和效果图进行分析和比较。
习题强化 每课后都附有针对性的练习题，通过实训巩固每章所学的知识。