本书系统地讲解了网页版式设计的各种技术和方法，通过大量实例对表格版式、流体版式、
浮动版式、定位版式、互动版式进行详细讲解，同时详细介绍了 HTML5+CSS3 新技术配合设计
版式的基本方法。本书针对每一种技巧都配以实战案例，通过详细操作步骤进行讲解，方便读者
直观、快速上机练习，指导读者制作出符合 Web 标准的网页，帮助读者进一步 巩固所学到的知识，
提高综合应用的能力。本书内容翔实、结构清晰，并注意各个章节与实例之间的呼应和对照。
本书适合 Web 开发人员阅读和参考，同时也适合广大网页制作和设计的学生阅读和学习。既
可作为网页设计初学者的入门参考书，也适合作为中高级用户进一步学习的实用教材。

Dreamweaver 是一款功能强大的网页编辑软件，它能够帮助用户快速编辑网页，提
供各种常用而方便的工具。用户可以不必编写任何代码，只要使用 Dreamweaver 中的菜
单或是工具栏按钮，就可以完成大部分网页所需的功能。对建立商业网站、Web 应用、复
杂交互式网页等，Dreamweaver 都能够轻松地完成。
编写本书的目的是希望通过本书内容的讲解给学习网页设计的读者提供一条快速而完
整的学习捷径。读者不仅可以了解网页制作的基本方法及如何使用 Dreamweaver 来设计
网页，最重要的是设计各种复杂的网页版式，让读者几乎可以不必编写任何的代码，就可
以创建自己所需要的网页。
关于本书
本书从初学者的角度进行选材和编写，在编写过程中考虑到读者的实际技术水平和战
术能力，注重基础知识和实战应用的结合，主要讲解网页布局和版式设计的一般用法、扩
展应用及其实战演练。全书共分为 7 章，简单介绍如下。
第 1 章 Dreamweaver 中的 CSS 和 HTML 设定。本章重点介绍 Dreamweaver 基本操
作方法，以及如何在 Dreamweaver 中设置 HTML 和 CSS。
第 2 章 表格与页框版面编排技法。本章重点介绍在 Photoshop 中设计效果图，如何
将不同的效果图转换为网页。
第 3 章 流式版面编排与版式整合技法。本章重点介绍流式版面设计技巧及一列、两
列和三列版式页面的设计方法。
第 4 章 浮动版面编排与页面整合技法。本章重点介绍多栏浮动页面的设计技巧，以
及控制浮动错位、浮动包含、浮动顺序的一般方法。
第 5 章 版式定位与精确控制整合技法。本章重点介绍定位版式的设计技巧，以及定
位坐标、定位偏移、层叠顺序、定位干扰等设计要素的灵活应用。
第 6 章 HTML5+CSS3 版 式 布 局 与 效 果 整 合 技 法。 本 章 重 点 介 绍 如 何 使 用
HTML5+CSS3 新技术设计版式效果的方法。
第 7 章 交互式版面整合技法。本章重点介绍如何借助 Dreamweaver 为页面添加互
动效果，为版式设计交互情景。

读者对象
本书适合网页制作的初学者、广大网页设计师和前端技术人员阅读参考。在阅读本书
之前，最好能初步了解 HTML、CSS 基础知识。
正确使用
本书内容操作性比较强，适合读者边阅读边上机实践。在学习之前，建议访问本社官
方网站下载本书示例源码文件压缩包。然后根据章节索引找到每个操作案例的练习模板和
效果文件，最后根据书中操作步骤耐心操作练习。
如果实例文件中的网页无法预览，请直接使用记事本打开学习和研究其中的代码。
本书示例可运行于 Windows 98/2000/XP/Server 2003 /Vista/Server 2008 及 Windows 7
的操作系统下，支持在各主流浏览器中进行测试和预览。
本书主要根据 Dreamweaver 为操作对象进行介绍。 建议读者学习之前应访问 http://
www.adobe.com/ 官网下载 Dreamweaver 软件，并正确安装到本地系统中。
本书主要以 Dreamweaver CS6 及以上版本为基础进行界面操作演示和介绍，其中第 1、
2、3、4、5、7 章主要以 Dreamweaver CS6+ 版本为基础， 第 6 章主要以 Dreamweaver
CC 版本为基础。
注意：本书配套案例源代码文件仅供个人学习和练习时使用，未经许可不得用于任何
商业行为。
关于作者
本书由王佳佳编写，参与资料整理及编写的还有常才英、袁祚寿、袁衍明、张敏、袁
江、田明学、唐荣华、毛荣辉、卢敬孝、刘玉凤、李坤伟、旷晓军、陈万林、陈锐、钱佩
林、苏敬波、冉东林、杨龙贵、张炜、王慧明、涂怀清、卢国才、苏恢定、司成向、胡体
清、陈宗亮、徐清银、周秀成、颜昌学、王幼平、冉原洲、李经键、胡厚成等，在此对大
家的辛勤工作表示衷心的感谢。
由于知识有限，书中难免会有疏漏之处，恳请广大读者提出宝贵意见，并将个人的意
见、建议或问题发送到 wwb_beijing@163.com，以便我们与您进行交流。
编者
2016 年 7 月

Chapter01 ┃ Dreamweaver 中的
1.1
1.1.1
1.1.2
1.1.3
1.2
CSS 和 HTML 设定
Dreamweaver 操作第一步 ............................................................... 2
构建基本网页 .....................................................................................2
搭建网页结构 .....................................................................................5
熟悉 Dreamweaver 操作环境 .............................................................9
HTML 快速设定 .............................................................................. 12
定制编码环境 ...................................................................................12
设置智能提示 ...................................................................................14
代码格式化与排版 ...........................................................................16
代码分色显示 ...................................................................................20
代码选择 ...........................................................................................21
快速编辑代码 ...................................................................................22
代码检查和修改 ...............................................................................23
代码验证 ...........................................................................................24
1.2.1
1.2.2
1.2.3
1.2.4
1.2.5
1.2.6
1.2.7
1.2.8
1.3
CSS 操作环境 ................................................................................ 25
1.3.1 支持可视化渲染 ...............................................................................25
1.3.2 可视化编辑 .......................................................................................26
1.3.3 CSS 辅助支持 ...................................................................................29
1.4
CSS 快速设定 ................................................................................ 32
1.4.1 熟悉 CSS 样式面板 ..........................................................................32
1.4.2 建立 CSS 样式 ..................................................................................34
1.4.3 应用 CSS 样式 ..................................................................................37

Chapter02 ┃表格与页框版面编排技法
2.1
使用 Photoshop 设计和切割版面 ................................................... 40
2.1.1　页面切割技法 ...................................................................................40
2.1.2 设置切片选项 ...................................................................................45
2.1.3 把效果图输出为网页格式 ...............................................................45

2.2 表格版面编排 ................................................................................. 48
2.2.1
2.2.2
2.2.3
2.2.4
2.3
把效果图切割出编排版面 ...............................................................49
自适应版面的表格切分技法 ...........................................................55
首页版面编排 ...................................................................................62
分栏式内页版面编排 .......................................................................66
CSS 背景图版面应用 ..................................................................... 72
设定 CSS 背景图 ..............................................................................72
渐变背景版面应用 ...........................................................................74
CSS 圆角版面应用 ...........................................................................77
单栏式版面背景应用 .......................................................................82
双栏式版面背景应用 .......................................................................89
2.3.1
2.3.2
2.3.3
2.3.4
2.3.5

Chapter03 ┃流式版面编排与版式
整合技法
3.1 流体边距控制 ................................................................................. 98
3.1.1 行内边距 ...........................................................................................99
3.1.2 块边距 .............................................................................................100
3.1.3 浮动边距 .........................................................................................102
3.1.4 内边距 ............................................................................................. 103
3.1.5 边框、宽和高 .................................................................................108
3.2 网页结构化设计技巧 .................................................................... 110
3.2.1
3.2.2
3.2.3
3.3
必须熟知的语义化标签 ................................................................. 110
必须熟知的标签显示特性 ............................................................. 111
搭建合理的版式结构 ..................................................................... 113
单列版式 ...................................................................................... 115
单列版式结构设计 ......................................................................... 116
单列固定宽度版面 ......................................................................... 117
单列固定版式居中 .........................................................................123
单列液态版面 .................................................................................126
3.3.1
3.3.2
3.3.3
3.3.4

目录
CONTENTS
3.4 两列版式 ...................................................................................... 133
3.4.1
3.4.2
3.4.3
3.4.4
两列版式结构设计 .........................................................................134
两列混合版式技巧 .........................................................................135
纯液态组合版式技巧 .....................................................................140
并列换位版式技巧 .........................................................................143
3.5 三列版式 ...................................................................................... 146
3.5.1
3.5.2
3.5.3
3.5.4
3.5.5
三列版式结构设计 .........................................................................147
三列纯版版式技巧 .........................................................................148
三列混版版式技巧 .........................................................................154
高度自适应版式技巧 .....................................................................160
三列等高版式技巧 .........................................................................165

Chapter04 ┃浮动版面编排与
页面整合技法
4.1 浮动页布局初步实践 .................................................................... 172
4.1.1
4.1.2
4.1.3
4.1.4
配置浮动栏目空间大小 .................................................................172
控制好浮动页偏移位置 .................................................................176
处理好浮动版面间环绕 .................................................................181
清除任意显示的浮动对象 .............................................................187
4.2 解决复杂结构中浮动问题 ............................................................. 190
4.2.1
4.2.2
4.2.3
4.2.4
4.3
浮动包含 .........................................................................................191
包含浮动 .........................................................................................193
相邻浮动 .........................................................................................197
并列错位 .........................................................................................202
整页浮动版式设计与整合 ............................................................. 209
顺序版式 .........................................................................................209
倒序版式 .........................................................................................215
错位版式 .........................................................................................216
上下偏移版式 .................................................................................219
综合版式 .........................................................................................230
4.3.1
4.3.2
4.3.3
4.3.4
4.3.5


Chapter05 ┃版式定位与精确
控制整合技法
5.1
版式定位初步实践 ........................................................................ 240
5.1.1 绝对定位 .........................................................................................240
5.1.2 相对定位 .........................................................................................244
5.1.3 固定定位 .........................................................................................245
5.2
定位偏移控制 ............................................................................... 250
页框偏移 .........................................................................................250
包含框偏移 .....................................................................................253
群组偏移 .........................................................................................257
自身偏移 .........................................................................................263
5.2.1
5.2.2
5.2.3
5.2.4
5.3 覆盖与效果整合............................................................................ 266
5.3.1 层叠顺序 .........................................................................................267
5.3.2 文档流式层叠 .................................................................................270
5.3.3 嵌套结构中的层叠顺序 .................................................................275

Chapter06 ┃ HTML5+CSS3 版式布局
与效果整合技法
6.1
构建富语义的页框结构 ................................................................. 280
设置标题块 .....................................................................................280
设置文章块 .....................................................................................285
设置内容块 .....................................................................................293
设置导航块 .....................................................................................299
设置侧边块 .....................................................................................304
设置页脚块 .....................................................................................309
设置语义要素 .................................................................................313
6.1.1
6.1.2
6.1.3
6.1.4
6.1.5
6.1.6
6.1.7
6.2
整合多栏版式 ............................................................................... 314
设置多栏显示 .................................................................................314
设置多栏的列数、列宽样式 .........................................................318
设置多栏列间距、边框样式 .........................................................325
6.2.1
6.2.2
6.2.3

目录
CONTENTS
6.2.4
6.3
设置跨列显示 .................................................................................329
设计弹性版式 ............................................................................... 330
定义弹性盒布局版式 .....................................................................331
设置宽度自适应 .............................................................................337
设置版式顺序 .................................................................................339
设置布局方向 .................................................................................341
完全自适应 .....................................................................................343
设置对齐方式 .................................................................................345
6.3.1
6.3.2
6.3.3
6.3.4
6.3.5
6.3.6

Chapter07 ┃交互式版面整合技法
7.1 Spry 菜单栏 .................................................................................. 350
7.1.1
7.1.2
7.1.3
7.2
设计水平导航菜单 .........................................................................350
版面深度整合 .................................................................................355
设计垂直导航菜单 .........................................................................358
Spry 选项卡式面板 ....................................................................... 364
7.2.1 功能整合 .........................................................................................364
7.2.2 版面整合 .........................................................................................367
7.3
Spry 折叠式 .................................................................................. 372
创建折叠式面板 .............................................................................372
版式设计 .........................................................................................374
7.3.1
7.3.2
7.4
Spry 工具提示 .............................................................................. 377
7.4.1 插入 Spry 工具提示 ........................................................................377
7.4.2 编辑 Spry 工具提示 ........................................................................379
7.5 Spry 可折叠面板 .......................................................................... 381


Appendix01 ┃ HTML 常用标签和属性
Appendix02 ┃ CSS 基本用法

刘玉凤曾就职于世纪佳缘、赶集网、易车网，现专职于APP自由创业，资深Web开发工程师，从事Web开发多年，对各种Web开发技术都有非常深入的研究，经验极其丰富。HTML 5和CSS 3等新技术的先驱者和布道者，不仅对HTML 5与CSS 3有非常深入的研究，而且在C#、VB.NET、ASP.NET、SQL Server、Oracle、Java、Struts、Spring等方面也积累大量的实战经验。

Dreamweaver 是一款功能强大的网页编辑软件，它能够帮助用户快速编辑网页，提
供各种常用而方便的工具。用户可以不必编写任何代码，只要使用 Dreamweaver 中的菜
单或是工具栏按钮，就可以完成大部分网页所需的功能。对建立商业网站、Web 应用、复
杂交互式网页等，Dreamweaver 都能够轻松地完成。
编写本书的目的是希望通过本书内容的讲解给学习网页设计的读者提供一条快速而完
整的学习捷径。读者不仅可以了解网页制作的基本方法及如何使用 Dreamweaver 来设计
网页，最重要的是设计各种复杂的网页版式，让读者几乎可以不必编写任何的代码，就可
以创建自己所需要的网页。