第1篇 网页设计与制作基础篇第1章 解读网页设计 3
1.1 网页设计概述 3
1.1.1 网页与网站 3
1.1.2 网页基本元素 4
1.1.3 网页的类型 5
1.2 网页设计的构成要素 6
1.2.1 文字的编排与设计 6
1.2.2 图形图像设计 7
1.2.3 版式设计与编排 8
1.2.4 色彩的搭配 8
1.2.5 多媒体元素的选择 9
1.3 网站建设的一般流程 10
1.3.1 网站策划 10
1.3.2 网页设计 13
1.3.3 网页制作 14
1.3.4 网站测试与发布 14
1.3.5 网站宣传与维护 14
1.4 网页常用专业术语 14
第2章 网页色彩搭配 19
2.1 网页设计与色彩 19
2.2 色彩理论 19
2.2.1 色彩与视觉原理 19
2.2.2 色彩三要素 20
2.2.3 色相环 21
2.2.4 三原色 22
2.3 网页色彩技术 23
2.3.1 216网页安全色 23
2.3.2 HTML语言中的颜色值表示 24
2.4 色彩的冷暖 25
2.5 色彩对比 25
2.5.1 色相对比 26
2.5.2 明度对比 27
2.5.3 纯度对比 28
2.5.4 冷暖对比 28
2.5.5 面积对比 29
2.6 色彩调和 29
2.6.1 同种色的调和 30
2.6.2 类似色的调和 30
2.6.3 对比色的调和 30
2.6.4 渐变色的调和 31
2.7 网页色彩搭配 32
2.7.1 色彩的功能角色 2
2.7.2 基于色相的配色 32
2.7.3 基于色调的配色 38
2.7.4 标准色配色 41
2.7.5 渐变配色 41
第3章 Dreamweaver网页制作快速入门 43
3.1 初识Dreamweaver CS5 43
3.2 熟悉中文版Dreamweaver CS5的操作界面 43
3.2.1 开始页 43
3.2.2 Dreamweaver CS5的操作界面 44
3.2.3 主菜单、快捷菜单与面板菜单 46
3.2.4 文档工具栏 48
3.2.5 中文版Dreamweaver CS5面板 52
3.3 网页文档的基本操作 54
3.3.1 新建网页 54
3.3.2 保存网页 56
3.3.3 设置页面属性 56
3.3.4 打开网页 61
3.3.5 预览网页 61
3.4 关于站点 62
3.4.1 本地站点和远程站点 62
3.4.2 站点规划原则 62
3.5 创建站点 63
3.5.1 创建本地站点 63
3.5.2 创建远程站点 66
3.6 管理本地与远程站点 68
3.6.1 管理本地站点中的文件 68
3.6.2 管理本地站点 71
3.6.3 管理远程站点 71
第4章 XHTML和CSS基础 73
4.1 XHTML语言基础 73
4.1.1 什么是XHTML 73
4.1.2 XHTML文档的基本结构 73
4.1.3 标签的书写格式 76
4.1.4 标签的属性 77
4.1.5 XHTML语法规范 77
4.2 XHTML语言的核心标签 79
4.2.1 文本与段落 79
4.2.2 图像 81
4.2.3 超链接 81
4.2.4 列表元素 82
4.2.5 Div标签 82
4.3 CSS概述 84
4.3.1 CSS的概念 84
4.3.2 CSS的基本语法 84
4.3.3 认识【CSS样式】面板 85
4.4 使用CSS控制页面元素 86
4.4.1 行内样式表 86
4.4.2 内部样式表 86
4.4.3 外部样式表 87
4.4.4 导入样式表 88
4.5 选择器类型 88
4.5.1 标签选择器 88
4.5.2 类选择器 91
4.5.3 ID选择器 92
4.6 设置CSS属性 96
4.6.1 设置CSS样式类型 96
4.6.2 设置CSS样式背景 97
4.6.3 设置CSS样式区块 98
4.6.4 设置CSS样式的方框 99
4.6.5 设置CSS样式的边框 100
4.6.6 设置CSS样式列表 101
4.6.7 设置CSS样式的定位 102
4.6.8 设置CSS样式扩展 104
4.7 管理CSS样式表 104
4.7.1 查看CSS样式 104
4.7.2 编辑CSS样式 106
4.7.3 禁用或启用CSS属性 106
4.7.4 删除与复制CSS样式 107
第2篇 网页元素设计篇 111
第5章 网页中文字的编排与设计 111
5.1 关于文字编排与设计 111
5.2 文字在网页中的表现形式 112
5.2.1 特效文字 112
5.2.2 内容文字 113
5.3 用CSS设计文字样式 113
5.3.1 字体 113
5.3.2 字号 116
5.3.3 颜色 117
5.3.4 字体粗细 118
5.3.5 斜体 120
5.3.6 下划线、上划线和删除线 121
5.3.7 英文字母大小写 122
5.4 用CSS设计文本的段落样式 123
5.4.1 行高 124
5.4.2 水平对齐方式 125
5.4.3 首行缩进 126
5.4.4 字间距 127
5.4.5 首字下沉 128
5.5 使用CSS滤镜设计特效文字 129
5.5.1 滤镜概述 129
5.5.2 阴影 130
5.5.3 模糊 132
5.5.4 光晕 133
5.5.5 遮罩 134
5.5.6 波浪 135
5.5.7 射线 135
5.6 实例应用——网页文字的排版 136
第6章 网页中图形图像的设计 139
6.1 网页图形图像概述 139
6.1.1 图形图像在网页中的应用 139
6.1.2 网页中图形图像的使用原则 141
6.1.3 网页中常用图像格式 142
6.2 在网页中添加图像 143
6.3 用CSS设置网页图像样式 145
6.3.1 设置图像的边框 145
6.3.2 图片缩放 146
6.3.3 图文混排 148
6.4 用CSS设置网页的背景 150
6.4.1 背景颜色 150
6.4.2 背景图像 151
6.4.3 设置背景图像的属性 151
6.5 实例应用 155
6.5.1 图文混排效果 155
6.5.2 设计网页背景图像 162
第7章 网页导航设计 165
7.1 网页导航概述 165
7.1.1 网页导航分类 165
7.1.2 导航位置 168
7.1.3 导航方向 169
7.2 关于超链接 171
7.2.1 什么是超链接 171
7.2.2 链接路径 172
7.3 创建超链接 173
7.3.1 创建文本链接 173
7.3.2 创建图像地图链接 177
7.3.3 创建锚记链接 179
7.3.4 创建电子邮件链接 182
7.3.5 创建空链接和脚本链接 183
7.4 用CSS设计网站导航 184
7.4.1 链接样式的控制 184
7.4.2 设计横向导航 185
7.4.3 设计竖排导航 188
7.5 实例应用——宝庆动漫网导航设计 189
第8章 网页多媒体与特效设计 195
8.1 插入多媒体对象 195
8.1.1 插入SWF动画 195
8.1.2 插入FLV视频 197
8.1.3 添加声音 199
8.2 使用行为创建网页特效 201
8.2.1 【行为】面板 202
8.2.2 动作和事件 203
8.2.3 添加行为 204
8.3 Dreamweaver中的常用行为介绍 206
8.3.1 交换图像 206
8.3.2 弹出信息 207
8.3.3 打开浏览器窗口 207
8.3.4 Spry效果 208
8.3.5 显示-隐藏元素 209
8.3.6 检查插件 210
8.3.7 设置状态栏文本 210
8.3.8 调用JavaScript 211
8.3.9 转到URL 211
8.3.10 预先载入图像 212
8.4 行为实例应用 212
8.4.1 制作闪烁图像特效 212
8.4.2 制作有弹出窗口的网页 214
8.5 关于JavaScript 217
8.5.1 什么是JavaScript语言 218
8.5.2 JavaScript语言的写入方式 218
8.6 实例应用 219
8.6.1 广告图片切换效果 219
8.6.2 跟随滚动条滚动的对联广告 225
第3篇 网页版式设计与布局篇第9章 网页版式设计 231
9.1 版式设计概述 231
9.1.1 网页版面大小 231
9.1.2 第一屏 233
9.2 版式设计的形式原理 233
9.2.1 比例 234
9.2.2 重复与渐变 234
9.2.3 对称与均衡 236
9.2.4 节奏与旋律 236
9.2.5 对比与统一 237
9.2.6 虚实与留白 238
9.3 版式设计的视觉因素 239
9.3.1 符合人的视觉习惯 239
9.3.2 避免视觉疲劳 240
9.3.3 注重主从关系 241
9.4 网页版式构成的基础结构 243
9.4.1 栏式结构 243
9.4.2 区域结构 245
9.4.3 非规律框架 246
第10章 表格布局网页 249
10.1 使用表格 249
10.1.1 创建表格 249
10.1.2 选择表格 250
10.2 设置表格与单元格的属性 251
10.2.1 设置表格属性 252
10.2.2 设置单元格属性 252
10.3 编辑表格 253
10.3.1 调整表格和单元格的大小 253
10.3.2 设置表格对齐方式 255
10.3.3 插入行或列 256
10.3.4 删除行或列 257
10.3.5 拆分和合并单元格 257
10.3.6 表格的嵌套 258
10.4 实例应用——制作Models俱乐部网站 258
10.4.1 使用表格布局页面 259
10.4.2 使用CSS美化页面 263
第11章 深入理解CSS+DIV布局 269
11.1 CSS+DIV布局概述 269
11.1.1 什么是CSS+DIV布局 269
11.1.2 CSS的优势 269
11.1.3 传统的table布局与CSS布局的区别 270
11.2 关于div和span 272
11.2.1 认识div 272
11.2.2 div的并列与嵌套结构 274
11.2.3 div与span的区别 275
11.3 盒子模型 276
11.3.1 盒子模型的概念 276
11.3.2 border 277
11.3.3 padding 279
11.3.4 margin 280
11.4 元素的定位方式 283
11.4.1 float定位 283
11.4.2 position定位 285
11.4.3 z-index空间位置 287
第12章 CSS+DIV布局网页 289
12.1 CSS布局技法 289
12.1.1 将页面用div分块 289
12.1.2 设计各个块的位置 290
12.1.3 用CSS定位 290
12.2 常用布局类型 292
12.2.1 一列固定宽度 292
12.2.2 一列自适应 294
12.2.3 一列固定宽度居中 295
12.2.4 两列固定宽度 296
12.2.5 两列宽度自适应 298
12.2.6 两列右列宽度自适应 299
12.2.7 两列固定宽度居中 300
12.2.8 三列浮动中间列宽度自适应 302
12.2.9 高度自适应 304
12.3 使用CSS预设布局创建页面 305
12.4 实例应用——制作蝴蝶摄影工作室网站 307
12.4.1 搭建HTML框架 308
12.4.2 制作网页头部 310
12.4.3 制作网页的主要内容和页尾 315
12.4.4 制作“蝴蝶作品”页面 317
第4篇 经典案例篇 323
第13章 艺萃商业网站的设计与制作 323
13.1 商业网站的策划 323
13.1.1 明确创建网站的目的和用户需求 323
13.1.2 分析材料 324
13.1.3 出具网站策划书 324
13.2 艺萃商业网站的设计 326
13.2.1 设计定位 327
13.2.2 确定网站结构布局 329
13.3 艺萃商业网站的制作 329
13.3.1 创建本地站点与远程站点 329
13.3.2 定义页面通用样式 332
13.4 制作首页 334
13.4.1 新建文档并链接样式表文件 334
13.4.2 使用div搭建页面框架 335
13.4.3 用CSS定位并添加内容 336
13.4.4 插入关键字和网页说明 338
13.5 栏目页面的制作 339
13.5.1 新建文档并链接样式表文件 339
13.5.2 使用div搭建页面框架 340
13.5.3 制作头部内容 341
13.5.4 制作主体内容 342
13.5.5 制作页脚 346
13.6 测试与发布网站 347
13.6.1 网站的测试 347
13.6.2 网站的发布 349
第14章 省客网的设计与制作 351
14.1 省客网的设计 351
14.2 省客网的制作 353
14.2.1 创建本地站点与远程站点 353
14.2.2 新建样式表并设置通用样式 354
14.3 制作首页 358
14.3.1 新建网页并调用Style.css样式表 358
14.3.2 使用div搭建页面框架 359
14.3.3 制作网站头部 360
14.3.4 制作网站导航 361
14.3.5 制作网页主体 364
14.3.6 制作网页脚注 376
第15章 希艺欧家居网的设计与制作 377
15.1 案例预览 377
15.2 创建与编辑模板 378
15.2.1 认识【模板】面板和【模板】菜单 378
15.2.2 创建模板 380
15.2.3 编辑模板 383
15.2.4 管理模板 386
15.3 应用模板制作网页 386
15.3.1 从模板新建网页文件 387
15.3.2 使用【模板】面板创建网页文档 388
15.3.3 页面与模板脱离 389
15.3.4 更新页面 389
15.4 使用库 390
15.4.1 库的概念 390
15.4.2 创建和应用库项目 391
15.4.3 修改库 392
15.5 制作希艺欧家居网站 392
15.5.1 创建站点并定义页面通用样式 393
15.5.2 创建模板并链接样式表文件 395
15.5.3 使用div搭建页面框架 396
15.5.4 定位块并添加内容 397
15.5.5 应用模板制作“公司简介”页面 406
15.5.6 应用模板制作“人才中心”页面 408