第1章 网页设计基础知识 1
1.1网页相关知识简介 1
1.1.1互联网、因特网、万维网 1
1.1.2网站、网页和主页 2
1.1.3浏览器 4
1.1.4统一资源定位器 4
1.2网页的基本元素 4
1.2.1网页的组成元素 5
1.2.2网页的构成要素 7
1.3网站建设流程 10
1.3.1网站需求分析 10
1.3.2网站规划 10
1.3.3创建本地站点 12
1.3.4组织站点结构 12
1.3.5设计和制作各级页面 13
1.3.6申请空间和域名 13
1.3.7测试和发布网站 14
1.3.8网站的推广与维护 14
1.4网页的版式布局 14
1.4.1网页布局原则 15
1.4.2常见的版式布局形式 15
1.5网页色彩搭配 19
1.6网页设计的原则和成功要素 20
1.7认识HTML和CSS 20
习题 21
第2章 HTML基础 22
2.1认识HTML 22
2.2 HTML文档的基本结构 23
2.3 HTML文件的编写和查看 23
2.3.1 HTML文件的编写和查看 23
2.3.2 HTML文件的命名 25
2.4 HTML基本语法 25
2.4.1 HTML标记 25
2.4.2 HTML属性 25
2.4.3全局属性 26
2.5 HTML文件头部内容〈head〉 28
2.5.1设置页面标题〈title〉 28
2.5.2定义元数据〈meta〉 28
2.5.3常用元数据 29
2.6 HTML文件主体内容〈body〉 30
2.7综合案例——最基本的HTML5网页 30
习题 31
第3章 文字与段落 32
3.1编辑内容 32
3.1.1添加普通文字 32
3.1.2添加特殊符号 33
3.1.3添加注释 33
3.2文字排版 33
3.2.1控制换行〈br〉 33
3.2.2预先格式化〈pre〉 34
3.2.3段落〈p〉 34
3.2.4加入水平线〈hr〉 35
3.2.5标题文字〈hl〉-〈h6〉 36
3.3强调文本 37
3.3.1设置粗体和斜体〈b〉/〈i〉 37
3.3.2标记文本改变〈ins〉/〈del〉 37
3.3.3小型文本〈small〉 38
3.4语义化、结构化的文本 38
3.4.1文字上下标〈sup〉/〈sub〉 38
3.4.2注音显示〈ruby〉/〈rt〉/〈rp〉 39
3.4.3标注〈cite〉 40
3.4.4定义日期时间〈time〉 40
3.4.5其他语义化、结构化文本 41
3.5列表 41
3.5.1无序列表〈ul〉 41
3.5.2有序列表〈ol〉 42
3.5.3定义列表〈dl〉/〈dt〉/〈dd〉 42
3.5.4嵌套列表 43
3.6综合实例——简单文字网页 45
习题 46
第4章 网页图像和多媒体元素 48
4.1图像、视频和音频的格式 48
4.1.1网页图像的格式 48
4.1.2视频格式 49
4.1.3音频格式 49
4.2在网页中加入图像〈img〉 49
4.2.1图像资源属性——src属性 49
4.2.2图像替代文本——alt属性 50
4.2.3图像的宽高——width和height属性 50
4.3在网页中加入视频〈video〉 51
4.3.1视频资源属性——src属性 51
4.3.2视频播放控件属性——controls属性 52
4.3.3视频准备播放控件——preload 52
4.3.4 〈video〉的其他属性 52
4.3.5 〈video〉与〈source〉的配合使用 53
4.4在网页中加入音频〈audio〉 53
4.5插入多媒体文件〈embed〉 55
4.5.1插入Flash动画 55
4.5.2插入视频 56
4.5.3插入音频 56
4.6链入对象〈object〉 57
4.7定义媒介分组和标题〈figure〉/〈figcaption〉 57
4.8综合实例——多媒体页面的设计 58
习题 60
第5章 超链接 63
5.1超链接概述 63
5.2超链接的路径 63
5.2.1绝对路径 63
5.2.2相对路径 64
5.2.3根路径 64
5.3超链接的建立〈a〉 64
5.3.1插入外部链接 65
5.3.2插入内部链接 65
5.3.3以图像为源点的链接 66
5.3.4链接打开目标target属性 66
5.3.5链接的其他属性 66
5.3.6链接的目标类型 67
5.3.7 Email链接 68
5.4锚记（书签）链接 68
5.5设置图像映射 70
5.5.1了解热区和图像映射 70
5.5.2创建图像映射〈map〉/〈area〉 70
5.6浮动窗口及其链接〈iframe〉 71
5.6.1浮动窗口 71
5.6.2链接浮动窗口 71
5.7定义基准网址〈base〉 72
5.8综合实例——设置超链接 73
习题 75
第6章 表格的应用 78
6.1表格概述 78
6.2创建表格 79
6.2.1表格基本结构〈table〉/〈tr〉/〈th〉/〈td〉 79
6.2.2表格边框显示——border属性 80
6.2.3 〈th〉标记的使用 81
6.2.4表格标题〈caption〉 82
6.3合并单元格 83
6.3.1设置跨列——colspan 83
6.3.2设置跨行——rowspan 84
6.4表格嵌套 85
6.5表格的按行分组显示〈thead〉/〈tbody〉/〈tfoot〉 86
6.6综合实例——表格应用 87
6.6.1表格显示数据 87
6.6.2使用表格布局 88
习题 90
第7章 表单 91
7.1表单概述 91
7.2建立表单〈form〉 92
7.3表单控件 93
7.3.1文本框和密码框 94
7.3.2提交按钮、重置按钮和普通按钮 95
7.3.3单选按钮 95
7.3.4复选框 96
7.3.5文件域 96
7.3.6图像域 97
7.3.7多行文字框 98
7.3.8列表 98
7.4表单高级元素使用 100
7.4.1 url属性 100
7.4.2 email属性 100
7.4.3 date和Times 101
7.4.4 number属性 102
7.4.5 range属性 102
7.4.6 color属性 103
7.4.7 fieldset控件组 104
7.4.8其他类型的输入表单控件 105
7.5通用的表单属性 105
7.5.1表单重写属性 105
7.5.2 form属性 106
7.5.3 autofocus属性 107
7.5.4 multiple属性 107
7.5.5 placeholder属性 108
7.5.6 required属性 109
7.5.7 pattern属性 109
7.6综合实例——表单设计 110
习题 111
第8章 CSS语法基础 113
8.1 CSS介绍 113
8.1.1 CSS概述 113
8.1.2 CSS3 114
8.2 CSS的基本语法 114
8.3在HTML文档中使用CSS的方法 115
8.3.1行内样式 115
8.3.2内嵌样式 116
8.3.3链接外部样式 117
8.3.4导入外部样式 118
8.4 CSS元素选择符 119
8.4.1标记选择符 119
8.4.2通用选择符 119
8.4.3类选择符 120
8.4.4 id选择符 121
8.5其他CSS选择符 122
8.5.1伪类选择符 122
8.5.2伪对象选择符 122
8.5.3组合选择符 123
8.5.4关系选择符 123
8.5.5属性选择符 127
8.6综合案例——CSS的简单应用 128
习题 130
第9章 CSS字体与段落 132
9.1颜色color 132
9.2字体属性 133
9.2.1设置字体font-family 133
9.2.2设置字号font-size 134
9.2.3设置字体风格font-style 135
9.2.4设置字体加粗font-weight 136
9.2.5设置小型大写字母font-variant 137
9.2.6字体复合属性font 138
9.3文本高级样式 139
9.3.1行高line-height 139
9.3.2文本缩进text-indent 140
9.3.3水平对齐方式text-align 142
9.3.4垂直对齐方式vertical-align 143
9.3.5大小写text-transfor 144
9.3.6单词间距word-spacing 145
9.3.7字符间隔letter-spacing 146
9.3.8文本修饰text-decoration 147
9.3.9文本阴影text-shadow 148
9.4综合实例——简单图文混排网页 149
习题 152
第10章 CSS盒子 154
10.1基本的盒子BOX概念 154
10.1.1盒子的基本形式 154
10.1.2盒子大小的计算width/height 155
10.1.3改变盒子大小的计算方式box-sizing 156
10.2基本边框属性 157
10.2.1边框样式 157
10.2.2边框线宽 159
10.2.3边框颜色 161
10.2.4边框复合属性 162
10.3补白 164
10.3.1内补白 164
10.3.2外补白 165
10.4其他边框属性 167
10.4.1圆角边框 167
10.4.2图像边框 169
10.4.3盒子阴影box-shadow 172
10.4.4 BOX线条外廓 174
10.5综合案例——简单地产网页 175
习题 180
第11章 CSS颜色和背景 182
11.1背景颜色 182
11.1.1网页背景颜色background-color 182
11.1.2用背景色给页面分块 183
11.2背景图像 185
11.2.1页面背景图像background-image 185
11.2.2背景图像重复background-repeat 186
11.2.3背景图像滚动background-attachment 187
11.2.4背景图像位置background-position 189
11.2.5背景显示区域background-origin 190
11.2.6背景图像大小background-size 191
11.2.7背景图像裁剪区域background-clip 192
11.2.8背景复合属性background 194
11.3定义透明度 194
11.4综合实例——设置背景 195
习题 198
第12章 CSS美化其他页面元素 201
12.1超链接特效 201
12.1.1超链接样式变换 201
12.1.2按钮式超链接 202
12.2鼠标特效 203
12.2.1鼠标指针形状 204
12.2.2鼠标变换的超链接 204
12.3项目列表 205
12.3.1列表符号list-style-type 206
12.3.2图片符号list-stule-image 208
12.3.3列表位置list-style-position 209
12.3.4列表综合设置list-style 210
12.3.5使用列表制作菜单 211
12.3.6下拉菜单 214
12.4综合实例——Tab菜单 217
习题 222
第13章 用CSS美化表格与表单 224
13.1表格的基本样式 224
13.1.1表格边框样式 224
13.1.2表格颜色 225
13.1.3盒子阴影 226
13.2 〈col〉和〈colgroup〉 228
13.2.1 〈col〉标记 228
13.2.2 〈colgroup〉标记 229
13.2.3 〈colgroup〉分组 230
13.2.4 〈col〉和〈colgroup〉组合应用 231
13.3表格综合实例 232
13.4 CSS美化表单 234
13.4.1美化表单元素边框 234
13.4.2美化表单元素颜色 235
13.4.3美化表单元素背景图像 235
13.4.4按钮样式 236
13.5表格表单综合实例——调查问卷 237
13.5.1页面布局设计 238
13.5.2标题栏的设计 242
13.5.3题目区的设计 243
第14章 CSS定位、布局与分栏 246
14.1理解CSS定位与div布局 246
14.1.1 〈div〉 246
14.1.2 〈span〉 247
14.2 CSS元素的定位 248
14.2.1定位方式————position 248
14.2.2设置位置——top、 bottom、right、 left 249
14.2.3堆叠次序——z-index 251
14.3 CSS布局属性 253
14.3.1可见性—— visibility 253
14.3.2剪裁——clip 254
14.3.3溢出——overflow 255
14.3.4浮动——float 256
14.3.5清除——clear 257
14.4 CSS分栏 259
14.4.1列—— columns 259
14.4.2平衡列——column-fill 261
14.4.3列间距column-gap 261
14.4.4 列边框样式column-rule 263
14.4.5跨列样式——column-span 265
14.5综合案例——页面分块布局 265
习题 269
第15章 DIV+CSS布局 271
15.1 CSS排版概念 271
15.1.1将页面用div分块 271
15.1.2设计各分块位置 271
15.1.3设计各分块细节 273
15.2页面布局方式 274
15.2.1上中下结构布局 274
15.2.2左右结构布局 276
15.2.3“国”字形结构 277
15.2.4隐藏布局 279
15.3各种布局版式 281
15.3.1骨骼型版式 281
15.3.2对称型版式 284
15.3.3满版型版式 287
15.3.4其他版式 289
15.4综合案例——DIV+CSS布局综合应用 290
15.4.1首页设计 290
15.4.2详细页面设计 293
习题 295
第16章 网页编辑工具Dreamweaver 297
16.1 Dreamweaver工具介绍 297
16.1.1 Dreamweaver软件概述 297
16.1.2 DreamweaverCS5.5软件介绍 298
16.1.3 Dreamweaver的工作流程 303
16.2使用Dreamweaver设计网页 304
16.2.1创建站点和组织站点结构 304
16.2.2设计并创建网页 305
16.3使用Dreamweaver设定CSS样式 307
16.3.1 CSS样式在Dreamweaver中设定的基础知识 307
16.3.2 CSS样式的创建和应用案例 312
16.4使用Dreamweaver编码 313
16.4.1使用Dreamweaver对网页编码的常识 313
16.4.2使用Dreamweaver编码的编辑思路 315
16.4.3使用Dreamweaver编码的案例 316
16.5综合实例——使用Dreamweaver制作网页 321
16.5.1规划和设置站点 321
16.5.2设计网页布局 322
16.5.3添加页面内容 322
16.5.4通过手动编码创建页面 322
16.5.5测试和发布 324
习题 324
第17章 综合案例——宝贝花园 326
17.1网页布局概述 326
17.2首页的设计 327
17.3主标题区 335
17.3.1网页首部 336
17.3.2标题新闻区 337
17.4主内容区 338
17.4.1滚动字幕区 338
17.4.2主内容区 339
17.5页尾区 342
17.6内容页的设计 343
17.7联系页面的设计 344
17.7.1页面布局 344
17.7.2左侧栏 345
17.7.3右侧栏 347
第18章 综合案例——购物网站 348
18.1首页设计 348
18.1.1首页页面布局 348
18.1.2首页头部设计 353
18.1.3主体部分设计 354
18.1.4脚注部分设计 356
18.2内容页设计 356
18.2.1商品分类信息页 356
18.2.2单类商品信息页 358
第19章 综合案例——中秋节网站 360
19.1节日类网站设计分析 360
19.2实例制作——中秋节网站设计 360
19.2.1中秋节网站策划 360
19.2.2主页和内页效果 361
19.2.3网站主页的设计 363
19.2.4网站内页的设计 368