第1篇 HTML篇 2
第1章 HTML与CSS网页设计概述 2
1.1 HTML的基本概念 3
1.1.1 什么是HTML 3
1.1.2 HTML的发展 5
1.1.3 HTML与XHTML 6
1.2 CSS的基本概念 7
1.2.1 什么是CSS 7
1.2.2 CSS在网页设计中的作用 7
1.3 网页与网站 8
1.3.1 网页与网站的关系 8
1.3.2 建立网站 10
1.3.3 URL 10
1.3.4 HTML与CSS的常用编辑工具 11
高手私房菜 13
技巧1:如何查看网页的HTML代码 13
技巧2:查看其他网站的CSS样式表文件 14
第2章 HTML文档的基本结构 15
2.1 基本的HTML文档 16
2.2 HTML文档的基本结构 16
2.2.1 文档类型的声明 16
2.2.2 <html>标签对和属性 18
2.2.3 <head>标签对和属性 19
2.2.4 <body>标签对和属性 20
2.3 HTML标签、元素及属性 20
2.3.1 什么是标签 20
2.3.2 元素 21
2.3.3 属性的定义 22
2.3.4 属性值的定义 22
2.3.5 元素和属性的大小写规范 23
2.4 标准属性 23
2.5 HTML字符实体 24
2.6 为文档添加注释 25
2.7 空白和空白字符 25
2.7.1 断行符 26
2.7.2 空白字符 26
高手私房菜 26
技巧:属性值与引号的正确使用 26
第3章 辅助性元素 27
3.1 用<title>标签为文档添加标题 28
3.2 用<base>标签为文档设置基础URL 28
3.3 用<link>标签定义文档关系链接 30
3.3.1 定义关系链接地址 30
3.3.2 向前链接或者反转链接 31
3.3.3 链接到外部样式表 32
3.4 用<style>标签为文档创建内部样式表 33
3.4.1 定义样式类型 33
3.4.2 针对不同的媒体设备设置样式 35
3.5 用<script>标签添加脚本程序 36
3.5.1 设置脚本的类型 36
3.5.2 包含外部的脚本 37
3.6 用<meta>标签为文档定义元数据 38
3.6.1 定义元数据 38
3.6.2 定义元数据的各种情况 38
高手私房菜 41
技巧1:使用<link>标签定义浏览器标题栏小图标 41
技巧2:使用CSS hack技术使IE浏览器访问网页时应用特定的样式表文件 42
第4章 网页文本设计 43
4.1 文本的排版 44
4.1.1 标题<h1>、<h2>、<h3>、<h4>、<h5>和<h6> 45
4.1.2 字体标记 47
4.1.3 基本文字格式 49
4.1.4 特殊符号 50
4.2 段落的排版 50
4.2.1 段落标记及其对齐方式 51
4.2.2 换行<br>标记 52
4.2.3 居中标记 52
4.2.4 加入水平分割线 53
4.2.5 预编排标记 54
高手私房菜 55
技巧1:一级标题h1的使用 55
技巧2:在网页中插入版权符号?、注册商标符号?、未注册商品符号TM 55
技巧3:元素属性的默认值 56
第5章 网页列表设计 57
5.1 建立无序的列表 58
5.2 建立有序的列表 61
5.2.1 使用type属性定制有序列表项目符号 62
5.2.2 使用start属性定制有序列表中列表项的起始数 63
5.2.3 使用value属性定制有序列表中列表项序号的数值 64
5.3 建立定义列表 65
5.4 列表的嵌套 65
5.4.1 嵌套一层列表 66
5.4.2 嵌套多层列表 66
5.4.3 混合嵌套的列表 69
高手私房菜 70
技巧1:使用CSS样式表代替列表的type属性 70
技巧2:用ul列表模仿table表格 71
第6章 网页超链接设计 73
6.1 链接和路径 74
6.1.1 超链接的概念 74
6.1.2 链接路径URL 75
6.1.3 绝对URL和相对URL 76
6.2 使用a元素定义链接 76
6.2.1 设置链接的目标地址 76
6.2.2 设置链接的目标窗口 77
6.2.3 设置链接的提示信息 77
6.3 定义链接的不同情况 78
6.3.1 链接到同一个网站的另一个网页 78
6.3.2 使用锚链接到同一个网页的不同部分 80
6.3.3 使用锚链接到另一个网页的特定部分 82
6.3.4 链接到其他网站 83
6.3.5 设置链接发送E-mail 84
6.3.6 使用链接提供下载 84
高手私房菜 85
技巧1:锚点的定义 85
技巧2:区分URI、URL和URN 85
技巧3:禁用链接 86
第7章 网页色彩和图片设计 87
7.1 必备的图像基础知识 88
7.1.1 图像的分辨率 88
7.1.2 网页中的图片格式 88
7.1.3 创建图片 89
7.2 在网页中使用图像 91
7.2.1 在网页中插入图像标记 91
7.2.2 设置图像源文件 91
7.2.3 设置图像在网页中显示的宽度和高度 92
7.2.4 设置图像的替换文字 93
7.2.5 设置图像的提示文字 94
7.2.6 设置图像的边框 94
7.3 用图像代替文本作为超链接 95
7.4 图像映射 96
7.4.1 创建图像映射 96
7.4.2 利用Dreamweaver创建图像映射 98
高手私房菜 100
技巧1:浏览器的安全色 100
技巧2:图像映射 100
第8章 网页表格设计 101
8.1 表格的基本结构 102
8.2 控制表格的大小和边框的宽度 103
8.2.1 设置表格的宽度和高度 103
8.2.2 设置表格边框的宽度 104
8.3 设置表格及表格单元格的对齐方式 105
8.3.1 控制表格在网页中的对齐方式 106
8.3.2 控制表格单元格的水平对齐 107
8.3.3 控制表格单元格的上下对齐 109
8.4 合并单元格 111
8.4.1 用colspan属性左右合并单元格 111
8.4.2 用rowspan属性上下合并单元格 112
8.5 用cellpadding属性和cellspacing属性设定距离 113
8.6 为表格添加视觉效果 115
8.6.1 设置表格和单元格的背景颜色 116
8.6.2 设置表格和单元格的背景图像 117
8.7 表格的按行分组显示 118
高手私房菜 121
技巧1:禁止单元格内的文本自动换行 121
技巧2:colspan和rowspan属性的配合使用 122
第9章 网页表单设计 123
9.1 HTML表单 124
9.1.1 HTML表单的工作原理 124
9.1.2 创建表单 124
9.1.3 控件的概念 127
9.2 使用<input>标签创建表单控件 127
9.2.1 文本框和密码文本框 128
9.2.2 单选按钮 130
9.2.3 复选按钮 131
9.2.4 隐藏控件 132
9.2.5 文件选择框 132
9.2.6 重置按钮 133
9.2.7 提交按钮 134
9.2.8 图形提交按钮 135
9.3 使用<textarea>标签创建多行文本框 135
9.4 使用<select>和<option>标签创建选择列表 137
9.5 表单的提交方法 138
高手私房菜 139
技巧1:禁用表单控件 139
技巧2:设置表单控件为只读 140
第10章 网页框架设计 141
10.1 什么是框架 142
10.2 使用<frameset>和<frame>标签创建框架 142
10.2.1 框架的文档声明 144
10.2.2 用cols属性将窗口分为左、右两部分 144
10.2.3 用rows属性将窗口分为上、中、下三部分 145
10.2.4 框架的嵌套 146
10.2.5 不显示框架时 147
10.3 设置窗口框架的内容和外观 148
10.3.1 用src属性设置框架的初始内容 148
10.3.2 框架窗口边框的设置 149
10.3.3 控制框架的边距 150
10.3.4 框架的滚动条设置 151
10.3.5 改变框架窗口大小 152
10.4 设置框架之间的链接 153
10.4.1 用<base>标签设置链接默认目标 154
10.4.2 名称和框架标识 155
10.5 使用<iframe></iframe>标签对创建嵌入式框架 157
高手私房菜 158
技巧1:框架长度或者宽度的设置 158
技巧2:设置框架边框的注意事项 158
第11章 网页多媒体设计 159
11.1 在网页中加入视频 160
11.1.1 添加链接视频 160
11.1.2 使用Windows Media.Player嵌入视频 161
11.2 在网页中加入声音 163
11.2.1 添加背景声音 163
11.2.2 添加链接声音 164
11.2.3 使用RealPlayer嵌入声音 164
11.3 在网页中添加Flash动画 166
11.4 在网页中添加滚动文字 167
高手私房菜 168
技巧1:流式视频与音频 168
技巧2:选择合适的音频或者视频格式 168
第2篇 CSS篇 170
第12章 CSS 3样式基础 170
12.1 简单的CSS示例 171
12.2 CSS样式表的规则 172
12.3 使用CSS选择器 173
12.3.1 标签选择器 173
12.3.2 类选择器 174
12.3.3 id选择器 177
12.4 在HTML中调用CSS的方法 178
12.4.1 内联式CSS样式 179
12.4.2 内嵌式CSS样式 180
12.4.3 链接式CSS样式 181
12.4.4 导入外部CSS样式 182
12.4.5 CSS样式生效的优先级问题 183
高手私房菜 184
技巧:使用全局选择器 184
第13章 网页样式代码的生成方法 185
13.1 从零开始手工编写 186
13.1.1 编写标题样式代码 187
13.1.2 编写图片控制代码 188
13.1.3 设置网页正文 188
13.1.4 设置整体页面样式 189
13.1.5 定义段落样式 190
13.1.6 完整的代码 192
13.2 使用Dreamweaver辅助工具创建页面 193
13.3 在Dreamweaver中新建CSS样式 195
13.4 在Dreamweaver中编辑CSS样式 198
13.5 为图像创建CSS样式 199
高手私房菜 200
技巧1:在Dreamweaver中使用不同的复制和粘贴方式 200
技巧2:使用Dreamweaver生成CSS 3样式表并链接到当前文档 201
第14章 用CSS 3设置文本样式 203
14.1 样式的参数单位 204
14.1.1 长度单位 204
14.1.2 颜色单位 204
14.2 设置网页文本的基本样式 207
14.2.1 网页文本颜色的定义 207
14.2.2 设置具体文字的字体 208
14.2.3 设置文字的倾斜效果 209
14.2.4 设置文字的粗细效果 210
14.3 设置网页文本的行高与间距 211
14.3.1 设置网页文字间间距 212
14.3.2 设置网页文字行间高 212
14.3.3 设置网页文字段落间距 214
14.4 设置网页文本的对齐方式 215
14.4.1 控制文本的水平对齐方式 215
14.4.2 设置文本的垂直对齐方式 217
14.5 设置文字与背景的颜色 218
14.6 其他网页文本样式设置 219
14.6.1 英文字母大小写自动转换的实现 219
14.6.2 控制文字的大小 220
14.6.3 网页文字的装饰效果 222
14.6.4 设置段落首行缩进效果 223
高手私房菜 224
技巧1:通过滤镜属性设置文字效果 224
技巧2:为网页中字体大小设置合适的样式 224
第15章 用CSS 3设置网页图像特效 225
15.1 设置图片边框 226
15.1.1 图像边框基本属性 226
15.1.2 为不同的边框分别设置样式 228
15.2 图片缩放功能的实现 229
15.3 设置图片与文字的对齐方式 233
15.3.1 横向对齐方式 233
15.3.2 纵向对齐方式 234
15.4 图文混排 235
15.4.1 文字环绕 236
15.4.2 设置图片与文字的间距 237
15.5 CSS 3中边框的新增属性 238
15.5.1 border-image 238
15.5.2 border-radius 239
15.5.3 border-color 241
15.5.4 box-shadow 243
高手私房菜 244
技巧:图片超出撑破DIV 244
第16章 用CSS 3设置网页背景颜色与背景图像 245
16.1 设置背景颜色 246
16.2 设置背景图像 247
16.3 设置背景图像平铺 248
16.4 设置背景图像的位置 250
16.5 设置背景图片位置固定 252
16.6 设置标题的图像替换 254
16.7 使用滑动门技术的标题 255
高手私房菜 257
技巧1:为网页内容添加水印 257
技巧2:使用background-position属性设置背景图片居中显示 258
第17章 CSS 3的高级特性 259
17.1 复合选择器 260
17.1.1 交集选择器 260
17.1.2 并集选择器 261
17.1.3 后代选择器 262
17.2 CSS的继承特性 263
17.2.1 继承关系 264
17.2.2 CSS继承的运用 264
17.3 CSS的层叠特性 265
高手私房菜 268
技巧:CSS选择器的特殊性 268
第18章 DIV+CSS 3网页标准化布局 269
18.1 定义DIV 270
18.1.1 什么是DIV 270
18.1.2 在HTML文档中应用DIV 270
18.1.3 DIV的嵌套和固定格式 272
18.2 CSS布局定位 273
18.2.1 浮动定位 273
18.2.2 position定位 279
18.3 可视化模型 282
18.3.1 盒模型 282
18.3.2 视觉可视化模型 284
18.3.3 空白边叠加 284
18.4 CSS布局方式 285
18.4.1 居中的布局设计 285
18.4.2 浮动的布局设计 288
18.4.3 高度自适应设计 295
18.5 CSS 3中盒模型的新增属性 296
18.5.1 overflow 296
18.5.2 overflow-x 298
18.5.3 overflow-y 299
高手私房菜 300
技巧:将多个DIV紧靠页面的左侧或者右侧 300
第3篇 综合应用篇 302
第19章 用HTML+CSS 3设计制作企业网站页面 302
19.1 设计分析 303
19.2 布局分析 303
19.3 制作步骤 304
19.4 实例总结 316
第20章 用HTML+CSS 3设计制作休闲游戏网站页面 317
20.1 设计分析 318
20.2 布局分析 318
20.3 制作步骤 319
20.4 实例总结 338
第21章 用HTML+CSS 3设计制作电子商务网站页面 339
21.1 设计分析 340
21.2 布局分析 340
21.3 制作步骤 341
21.4 实例总结 360
第4篇 实战篇 362
第22章 企业门户类网站布局分析 362
22.1 中粮网整体布局分析 363
22.1.1 整体设计分析 363
22.1.2 版面架构分析 364
22.1.3 网站模块组成 364
22.2 制作自己的企业网站——龙马蜂业产品网 365
22.2.1 整体分析 365
22.2.2 结构与布局 365
22.2.3 网站制作步骤 365
22.2.4 实例总结 374
第23章 休闲旅游类网站布局分析 375
23.1 去哪儿网整体布局分析 376
23.1.1 整体设计分析 376
23.1.2 版面架构分析 377
23.1.3 网站模块组成 377
23.2 制作自己的休闲旅游网站——龙马休闲旅游网 379
23.2.1 整体分析 379
23.2.2 结构与布局 379
23.2.3 网站制作步骤 380
23.2.4 实例总结 396