内容简介

本书的作者为一线开发工程师、资深编程专家、专业培训师，在网站开发方面有着丰富的经验，并已出版过多本相关畅销书，颇受广大读者认可。本书内容不局限于语法讲解上，还通过一个个鲜活、典型的实例来达到学以致用的目的。每个语法都有相应的实例，每章后面又配有综合小实例。

本书共21章，主要内容包括HTML入门，HTML基本标签，用HTML设置文字、段落与列表，列表的建立和使用，用HTML创建精彩的图像和多媒体页面，用HTML创建超链接，用HTML创建表格，用表单创建交互式网页，HTML 5的结构，CSS基础知识，用CSS设计丰富的文字效果，用CSS设计图像和背景，用CSS设计表格和表单样式，用CSS制作链接与网站导航，CSS+DIV布局定位基础，CSS盒子模型，盒子的浮动与定位，CSS+DIV布局方法，CSS 3入门基础，设计和制作适合手机浏览的网页，公司宣传网站的布局。

 

本书内容翔实、结构清晰，既适合HTML和CSS的初学者自学使用，也可以作为各类院校相关专业的学生和电脑培训班的教材或辅导用书。

前    言

　　近年来，随着网络信息技术的广泛应用，越来越多的个人、企业纷纷建立自己的网站，利用网站来宣传和推广自己。网页技术已经成为当代青年学生必备的知识技能。目前大部分制作网页的方式都是运用可视化的网页编辑软件，这些软件的功能相当强大，使用也非常方便。但是对于高级的网页制作人员来讲，仍需了解HTML、CSS+DIV等网页设计语言和技术的使用，这样才能充分发挥丰富的想象力，更加随心所欲地设计出符合标准的网页，以实现网页设计软件不能完成的许多重要功能。

本书主要内容

　　随着Web 2.0的盛行，一切都开始基于Web标准，许多网站设计师开始学习并应用Web标准，CSS的应用也越来越广泛。本书正是在这种流行趋势下应运而生的介绍使用HTML和CSS进行网页标准化布局的书。本书不仅仅将笔墨局限于语法讲解上，并通过一个个鲜活、典型的实战来达到学以致用的目的。每个语法都有相应的实例，每章后面又配有综合小实例。

　　本书共21章，主要内容包括HTML入门，HTML基本标签，用HTML设置文字，段落与列表，列表的建立和使用，用HTML创建精彩的图像和多媒体页面，用HTML创建超链接，用HTML创建表格，用表单创建交互式网页，HTML 5的结构，CSS基础知识，用CSS设计丰富的文字效果，用CSS设计图像和背景，用CSS设计表格和表单样式、用CSS制作链接与网站导航，CSS+DIV布局定位基础，CSS盒子模型，盒子的浮动与定位，CSS+DIV布局方法，CSS 3入门基础，设计和制作适合手机浏览的网页，公司宣传网站的布局。

本书主要特色

　　(1) 知识全面系统。

　　本书内容完全从网页创建的实际角度出发，将所有HTML、CSS+DIV元素进行归类，每个标签的语法、属性和参数都有完整、详细的说明，信息量大，知识结构完善。

　　(2) 典型实例讲解。

　　本书的每章都配有大量实用案例，将本章的基础知识综合贯穿起来，力求达到理论知识与实际操作完美结合的效果。

　　(3) 配合Dreamweaver进行讲解。

　　本书以浅显的语言和详细的步骤介绍了在可视化网页设计软件Dreamweaver中如何运用HTML、CSS来创建网页，使网页制作更加得心应手。在最后一章向读者展示了完全不用编写代码，在Dreamweaver中创建完整网页的过程。

　　

    (4)配图丰富，效果直观。

　　对于每一段实例代码，本书都配有相应的效果图，读者无须自己进行编码，也可以看到相应的运行结果或者显示效果。在不便上机操作的情况下，读者也可以根据书中的实例和效果图进行分析和比较。

　　(5) 习题强化。

　　每章后都附有针对性的练习题，通过实训巩固每章所学的知识。

　　(6) 配套光盘。

　　需要从清华大学出版社官网上下载使用。

本书读者对象

 网页设计与制作人员；

 网站建设与开发人员；

 大中专院校相关专业师生；

 网页制作培训班学员；

 个人网站爱好者与自学读者。

　　本书是集体智慧的结晶，参加本书编写的人员均为从事网页教学工作的资深教师和具备大型商业网站建设经验的资深网页设计师，他们有着丰富的教学经验和网页设计经验。参加本书编写的人员包括徐洪峰、何琛、邓静静、李银修、孙鲁杰、何海霞、何秀明、孙素华、吕志彬等。由于时间所限，书中疏漏之处在所难免，恳请广大读者朋友批评指正。

　　

　　

                                                                                编  者  

 

目    录

 

第1章  HTML入门 1

1.1  什么是HTML 1

1.1.1  HTML的特点 1

1.1.2  HTML的历史 2

1.2  HTML文件的基本结构 2

1.2.1  HTML文件结构 2

1.2.2  编写HTML文件的注意事项 4

1.3  HTML文件的编写方法 4

1.3.1  使用记事本编写HTML页面 4

1.3.2  使用Dreamweaver CC

编写HTML页面 6

1.4　网页设计与开发的过程 7

1.4.1　明确网站定位 7

1.4.2　收集信息和素材 7

1.4.3　规划栏目结构 8

1.4.4　设计网页图像 9

1.4.5　制作页面 9

1.4.6　实现后台功能 10

1.4.7　网站的测试与发布 12

本章小结 12

练习题 13

第2章  HTML基本标签 14

2.1  HTML页面主体标签 14

2.1.1  定义网页背景色：bgcolor 14

2.1.2  设置背景图片：background 15

2.1.3  设置文字颜色：text 16

2.1.4  设置链接文字属性 17

2.1.5  设置页面边距 20

2.2  head部分标签 21

2.2.1  标题标签：<title> 21

2.2.2  定义页面关键字 22

2.2.3  定义页面描述 23

2.2.4  定义网页编辑工具 24

2.2.5  定义作者信息 24

2.2.6  定义网页文字及语言 25

2.2.7  定义网页的定时跳转 25

2.3  综合实例——创建基本的HTML

文件 26

本章小结 29

练习题 29

第3章　用HTML设置文字、段落

与列表 31

3.1　标题字 31

3.1.1　标题字标签：<h> 31

3.1.2　标题字对齐属性：align 32

3.2  插入其他标记 33

3.2.1  输入空格符号 33

3.2.2  输入特殊符号 34

3.3  设置段落的格式 35

3.3.1  段落标签：<p> 35

3.3.2  段落的对齐属性：align 36

3.3.3  不换行标签：<nobr> 37

3.3.4  换行标签：<br> 38

3.4  水平线标签 39

3.4.1  插入水平线标签：<hr> 39

3.4.2  设置水平线宽度与高度的

属性：width、size 40

3.4.3  设置水平线的颜色：color 41

3.4.4  设置水平线的对齐方式：

align 42

3.4.5  水平线去掉阴影：noshade 43

3.5  使用<marquee>设置滚动效果 44

3.5.1  <marquee>标签及其属性 44

3.5.2  使用<marquee>标签插入滚动

公告 45

3.6  综合实例——设置页面文本及段落 49

本章小结 51

练习题 52

第4章　列表的建立和使用 53

4.1　使用无序列表 53

4.1.1　无序列表标签：<ul> 53

4.1.2　设置无序列表类型的

属性type 54

4.1.3　菜单列表标签：<menu> 55

4.1.4　目录列表：<dir> 56

4.2　使用有序列表 58

4.2.1　有序列表标签：<ol> 58

4.2.2　有序列表类型的属性：type 59

4.2.3　有序列表的起始数值：start 60

4.3  列表条目元素<li> 61

4.3.1  项目符号的类型：type 61

4.3.2  条目编号：value 62

4.4  定义列表标签<dl> 63

本章小结 65

练习题 65

第5章　用HTML创建精彩的图像和

多媒体页面 67

5.1  网页中常见的图像格式 67

5.2  插入图像并设置图像属性 68

5.2.1  图像标签：<img> 68

5.2.2　图像的源文件：src 69

5.2.3　图像的提示文字：alt 70

5.2.4　图像的宽度和高度：width、

height 71

5.3  添加多媒体文件 72

5.3.1  添加多媒体文件标签：

<embed> 72

5.3.2  设置自动运行：autostart 73

5.4  添加背景音乐 74

5.4.1  设置背景音乐：<bgsound> 74

5.4.2  设置循环播放次数：loop 75

5.5  插入Flash动画 76

5.6  综合实例 77

综合实例1——创建多媒体网页 78

综合实例2——创建图文混合排版

网页 79

本章小结 82

练习题 82

第6章　用HTML创建超链接 84

6.1  超链接的基本概念 84

6.2  创建基本超链接 84

6.2.1  超链接标签 85

6.2.2  设置目标窗口 86

6.3  创建图像超链接 87

6.3.1  设置图像超链接 87

6.3.2  设置图像热区链接 88

6.4  创建锚点链接 90

6.4.1  创建锚点 90

6.4.2  锚点链接 92

6.5　外部链接 95

6.5.1　链接到外部网站 96

6.5.2　链接到E-Mail 96

6.5.3　链接到FTP 97

6.5.4　链接到Telnet 98

6.5.5　下载文件 99

6.6  综合实例——给网页添加链接 100

本章小结 102

练习题 102

第7章　用HTML创建表格 103

7.1  创建并设置表格属性 103

7.1.1  表格的基本标签：

<table><tr><td> 103

7.1.2  表格宽度和高度：width、

height 104

7.1.3  表格的标题：<caption> 105

7.1.4  表格的表头：<th> 107

7.1.5  表格对齐方式：align 109

7.1.6  表格的边框宽度：border 110

7.1.7  表格边框颜色：bordercolor 111

7.1.8  单元格间距：cellspacing 112

7.1.9  单元格边距：cellpadding 113

7.1.10  表格的背景色：bgcolor 114

7.1.11  表格的背景图像：

 background 115

7.2  表格的结构标签 117

7.2.1  设计表头样式：<thead> 117

7.2.2  设计表主体样式：<tbody> 118

7.2.3  设计表尾样式：<tfoot> 120

7.3  综合实例——使用表格排版网页 121

本章小结 126

练习题 126

第8章  用表单创建交互式网页 128

8.1  插入表单：<form> 128

8.1.1　处理动作：action 128

8.1.2　表单名称：name 129

8.1.3　传送方法：method 129

8.1.4　编码方式：enctype 130

8.1.5　目标显示方式：target 131

8.2　表单控件：<input> 132

8.2.1　文本字段：text 132

8.2.2　密码域：password 134

8.2.3　单选按钮：radio 135

8.2.4　复选框：checkbox 136

8.2.5　普通按钮：button 138

8.2.6　提交按钮：submit 139

8.2.7　重置按钮：reset 140

8.2.8　图像域：image 142

8.2.9　隐藏域：hidden 143

8.2.10　文件域：file 144

8.3  选择列表条目标签：<option> 145

8.4  选择列表标签：<select> 147

8.4.1  高度属性：size 147

8.4.2  多项选择属性：multiple 148

8.5  文本区域标签：<textarea> 150

本章小结 151

练习题 151

第9章  HTML 5的结构 153

9.1  认识HTML 5 153

9.2  HTML 5的新特性 154

9.3  HTML 5与HTML 4的区别 155

9.3.1  HTML 5的语法变化 155

9.3.2  HTML 5中的标记方法 155

9.3.3  HTML 5语法中的3个

要点 156

9.4  新增的主体结构标签 157

9.4.1  <article>标签 157

9.4.2  <section>标签 158

9.4.3  <nav>标签 159

9.4.4  <aside>标签 160

9.4.5  <time>标签 161

9.4.6  pubdate属性 162

9.5  新增的非主体结构标签 163

9.5.1  <header>标签 163

9.5.2  <hgroup>标签 164

9.5.3  <footer>标签 165

9.5.4  <address>标签 166

本章小结 167

练习题 167

第10章  CSS基础知识 169

10.1　为什么要在网页中加入CSS 169

10.1.1　什么是CSS 169

10.1.2　使用CSS的好处 170

10.1.3　如何编写CSS 171

10.1.4　CSS的基本语法 171

10.1.5　浏览器与CSS 172

10.2  基本CSS选择器 172

10.2.1　标签选择器 173

10.2.2　class选择器 173

10.2.3　ID选择器 174

10.3  在HTML中使用CSS 176

10.3.1  链接外部样式表 176

10.3.2  行内方式 177

10.3.3  嵌入外部样式表 177

10.3.4  定义内部样式表 177

本章小结 178

练习题 178

第11章　用CSS设计丰富的文字

 效果 180

11.1　设计网页中的文字样式 180

11.1.1　字体 181

11.1.2　字号 182

11.1.3　加粗 183

11.1.4　样式 184

11.1.5　变体属性 185

11.1.6　文字修饰 186

11.2　设计文本的段落样式 187

11.2.1　行高 187

11.2.2  对齐 188

11.2.3　缩进 190

11.2.4　单词间距 191

11.2.5　首字下沉 192

11.2.6　大小写转换 192

11.3  综合实例——用CSS排版网页

 文字 193

本章小结 197

练习题 197

第12章  用CSS设计图像和背景 199

12.1　设置网页的背景 199

12.1.1　背景颜色：background-

 color 199

12.1.2　背景图像：background-

 image 200

12.2　设置背景图像的属性 202

12.2.1　设置背景重复：

 background-repeat 202

12.2.2　设置固定背景：

 background-attachment 203

12.2.3　设置背景定位：

 background-position 204

12.3　设置网页图像的样式 206

12.3.1　设置图像边框 206

12.3.2　图文混合排版 208

12.4  综合实例——给图片添加边框 209

本章小结 212

练习题 212

第13章　用CSS设计表格和表单

 样式 214

13.1　网页中的表格 214

13.1.1　表格对象标签 214

13.1.2　在Dreamweaver中插入

 表格 215

13.1.3　设置表格的颜色 216

13.1.4　设置表格的边框样式 217

13.1.5　设置表格的阴影 219

13.2　网页中的表单 219

13.2.1　表单对象 219

13.2.2　表单标签 220

13.2.3　表单的布局设计 220

13.2.4　设置边框样式 224

13.2.5　设置背景样式 224

13.2.6　设置输入文本的样式 225

13.3  综合实例 225

综合实例1——制作变换背景色的

表格 225

综合实例2——设计表单的样式 227

本章小结 229

练习题 230

第14章  用CSS制作链接与网站

 导航 231

14.1　链接标签 231

14.1.1　a:link 231

14.1.2　a:visited 232

14.1.3　a:active 233

14.1.4　a:hover 234

14.2　创建按钮式超链接 235

14.3　控制鼠标指针 237

14.4　设置项目列表样式 238

14.4.1  列表符号类型：list-style-

 type 238

14.4.2  列表符号的混用 241

14.4.3  列表图像属性：list-style-

 image 242

14.4.4  列表综合属性：list-style 243

14.5　创建简单的导航菜单 244

14.5.1　简单的竖直排列菜单 244

14.5.2　横竖自由转换导航菜单 246

本章小结 247

练习题 247

第15章　CSS+DIV布局定位基础 248

15.1  网站与Web标准 248

15.1.1　什么是Web标准 248

15.1.2　为什么要建立Web标准 249

15.1.3　怎样改善现有网站 250

15.2　<div>标签与<span>标签 251

15.2.1　<div>概述 251

15.2.2　<div>与<span>的区别 252

本章小结 254

练习题 254

第16章　CSS盒子模型 255

16.1  “盒子”与“模型”的概念 255

16.2　边框：border 257

16.2.1  边框宽度：border-width 257

16.2.2  边框颜色：border-color 258

16.2.3  边框样式：border-style 259

16.3　设置内边距：padding 261

16.3.1  顶部属性：padding-top 261

16.3.2  右侧属性：padding-right 262

16.3.3  底部属性：padding-

 bottom 263

16.3.4  左侧属性：padding-left 264

16.4　设置外边距：margin 265

16.4.1  顶部边界属性：margin-

 top 266

16.4.2  右侧边界属性：margin-

 right 267

16.4.3  底部边界属性：margin-

 bottom 268

16.4.4  左侧边界属性：margin-

 left 268

本章小结 269

练习题 270

第17章  盒子的浮动与定位 271

17.1　盒子的浮动 271

17.1.1　元素的浮动属性：float 271

17.1.2　清除浮动属性：clear 275

17.2  元素的定位 277

17.2.1  元素的定位属性：

 position 277

17.2.2  上边偏移属性top、下边偏移

 属性bottom 279

17.2.3  左边偏移属性left、右边偏移

 属性right 280

17.3　盒子的定位 281

17.3.1　绝对定位：absolute 282

17.3.2　固定定位：fixed 284

17.3.3　相对定位：relative 286

17.3.4  静态定位：static 288

17.4　z-index空间位置 289

本章小结 291

练习题 291

第18章  CSS+DIV布局方法 292

18.1　CSS布局理念 292

18.2  固定宽度布局 293

18.2.1  1列固定宽度 294

18.2.2  两列固定宽度 295

18.2.3  圆角框 297

18.3  可变宽度布局 299

18.3.1  1列自适应 299

18.3.2  两列宽度自适应 300

18.3.3  两列右列宽度自适应 302

18.3.4  3列浮动中间宽度自适应 302

18.3.5  3行2列居中高度自适应 304

18.4  CSS布局与传统的表格方式布局

 分析 306

本章小结 309

练习题 309

第19章  CSS 3入门基础 310

19.1  预览激动人心的CSS 3 310

19.1.1　CSS 3的发展历史 310