随着Web 2.0大潮的席卷而来，传统的表格布局模式逐渐被DIV+CSS的设计模式所取代，使用DIV搭建框架，

使用CSS定制、改善网页的显示效果已经成为一个网页设计的标准化模式，对于网页设计人员来说，DIV+CSS已

经成为他们必须掌握的技术。

全书一共18个章节，其中，通过了前面的14个章节，由浅入深，全面介绍了DIV+CSS基本语法和概念，内容包

括开发网站的基础知识，HTML和XHTML的相关技术，CSS的基本语法，CSS定义字体、链接、图片、表格、表单

等样式，CSS滤镜的使用，CSS定位与DIV布局，JavaScript、XML、Ajax与CSS的结合使用，以及CSS开发中常见问

题的解决方法，书中还穿插介绍了CSS 3和HTML 5的相关知识，力求使读者了解最新的网页设计制作技术。在最后

的4个章节里，给出了“娱乐门户网”、“设计公司网站”、“旅游酒店网站”和“新闻网站”这4个案例。

本书采用了“语法讲述+案例分析+实训案例+上机题”的讲述方式，读者通过学习，不仅能掌握一些实用的

CSS+DIV的知识，还能学到JavaScript和Ajax等的扩展知识。

本书适合从事网页开发设计（尤其是美工）的人员阅读，此外，从事Web开发的程序员也能从本书里得到启

示。本书也能够作为高等院校相关专业的参考用书，特别地，本书的诸多案例更能帮助阅读者轻易地完成课程设

计等工作。

前??言

对于想要从事美工的朋友来说，只要有创意，那么就可以很快通过DIV+CSS技术实现自己的创意，从而创建出漂亮的网站。

如果你不懂CSS的话，或许在你的想象过程中，很多创意（或者是你想象中的效果）实现起来是比较麻烦的，可能会涉及到Photoshop等专业软件，不过一旦你熟悉了CSS，那么这些效果就能通过一些简单的语法来实现。

如果你通过本书熟悉了DIV的知识点，那么你就能以此设计出轻便灵活的网站框架。

DIV和CSS的知识不是一天可以学会的，在本书里，合理排布了18个章节，其中在前14个章节里，将循序渐进地讲述HTML标签、DIV、CSS、JavaScript和Ajax等知识点，而在最后4个章节里，将通过4个综合的案例，讲述DIV和CSS综合开发网站的知识点。

本书的知识点是循序渐进的，在第1章里，讲述了开发网站的一些基础知识，比如HTML框架和开发网站所用到的Dreamweaver工具；在第2章里，讲述了HTML和XHTML的基础知识，其中重点是HTML的各种标签；在第3章里，讲述了CSS 3.0的基础知识，比如CSS的基本语法和CSS的选择器等；在第4章里，讲述了通过CSS控制字体样式的方法；在第5章里，讲述了通过CSS定义导航栏样式的方法；在第6章里，讲述了通过CSS定义图片边框尺寸等样式的方法；在第7章里，讲述了通过CSS定义表格（table）的方法；在第8章里，讲述了通过CSS定义表单（form）的方法；在第9章里，讲述了通过CSS定义滤镜效果的诸多方法；在第10章里，讲述了“通过DIV定位通过CSS修饰块”的知识点；在第11章里，讲述综合CSS和JavaScript技术开发动态网页效果的方法；在第12章里，讲述了通过DIV和CSS综合布局的一些方法；在第13章里，讲述了CSS和Ajax一起整合开发具有局部刷新效果页面的方法；在第14章里，讲述了CSS里的一些常见问题（比如浏览器不兼容和中文编码等问题），并针对这些常见问题给出了一些解决方案。在本书的最后4个章节里，通过了“娱乐门户网”、“设计公司网站”、“旅游酒店网站”和“新闻网站”这4个案例，讲述了通过DIV和CSS两大技术，综合开发网站的方法。

从应用的角度来看，DIV和CSS的语法是非常多种多样的，但在实际应用的过程中，常用的语法并不多，所以在本书里，不仅给出了语法，而且通过各种案例，综合演示了“语法应用”的效果。

概括起来，这本书可以给你带来如下的收获：

●  可以通过修改案例中部分或整体，开发一个类似的网站或页面。

●  可以采用案例里的框架，把整体网站通过修改内容，改编成风格相似但主题不同的网站。

●  可以把案例中的一些动态效果（比如JavaScript等）通过改编，放置到你的页面里，从而让你的页面更吸引访问者的眼球。

●  可以更深刻地了解DIV和CSS。

本书和当前市面上的DIV+CSS图书相比，有如下的特点：

●  采用“语法+案例+实训+上机练习题”的讲述方法，通过设置合理的难度梯度，让大家在轻松的环境下能学到DIV和CSS的知识。

●  采用“案例轰炸”的方式，针对同一类知识点，给出多种案例，让大家在实际的环境中学好DIV和CSS的知识。

●  不再强调理论，而是强调实战，通过众多案例的引导，哪怕是刚入门的新手级美工朋友，通过学习，也能很轻松地上手。

●  只给出并分析最实用的知识，过滤掉一些边边角角的不大实用的知识点，让你在最短的时间内掌握最实用的知识体系。

●  整套书集用全程视频讲解方法，本书的全部知识点、案例、实训和上机题，都有视频讲解，这样能很大程度上方便大家的学习。

编写这套素材库的美工和程序员均有5年以上工作经验，很了解各位美工朋友需要什么，可以说是量身定做了这14个知识章节和4个综合案例。

为了更有效地从这本书里得到最大的收获，建议你采用如下的阅读方式：

●  运行代码，了解一下这个案例的功能，知道这个案例中包含哪些亮点。

●  查看视频，深入了解这个案例的页面构成和代码结构。

●  阅读代码，知道代码的整体布局，并了解感兴趣代码（比如动态效果代码）的位置。

●  学习整体网站的构架，或者直接从中取得感兴趣的代码，改编到自己的网站。

本书由何丽编写，在编写的过程中，上海润飞网络信息科技有限公司的袁润非、李世峰、李菱杰、吕俊斐、薛世海、罗政夫等同行对这本书的编写和出版提供了很大的支持。参与本书编写的还有陈小亮、张国栋、张国华、李华、王林、李志国、陈晨、冯慧、徐红、吴文林、周建国、张建、刘海涛、张琴、高梅、吴晓、朱维、陈浩、汪梅、姚琳、何武和许小荣等，对他们一并表示感谢。

由于作者水平有限，书中错误、纰漏之处难免，欢迎广大读者、同仁批评斧正。

                                                                   编  者

2013.06

目  录

第1章 开发网站，我们需要做些什么 1

1.1 网站需要什么 1

1.1.1  需要HTML文件 1

1.1.2  需要DIV来“圈地” 2

1.1.3  需要CSS来定义样式 2

1.1.4  需要JavaScript 3

1.1.5  需要空间和域名 3

1.2 通过Dreamweaver开发DIV+CSS程序 4

1.2.1  安装Dreamweaver 5

1.2.2  使用Dreamweaver 5

1.2.3  Dreamweaver的三种工作方式 6

1.2.4  通过Dreamweaver在HTML页面里开发DIV 7

1.2.5  通过Dreamweaver开发CSS程序 8

1.2.6    在DIV里引入CSS效果 9

1.3 一个简单的网页需要包含什么 11

1.3.1  head部分 11

1.3.2  body部分 11

1.3.3  编写注释 12

1.4 开发一个网站的总体流程 13

1.4.1  美工先用Photoshop给出效果 13

1.4.2  通过切图，得到素材 14

1.4.3  搭建DIV 14

1.4.4  搭建CSS和JS效果 15

1.4.5  测试网页 15

1.5 网站的建设标准和布局方式 15

1.5.1  网站的建设标准 16

1.5.2  页面布局 16

1.6 上机题 20

第2章 HTML和XHTML 21

2.1 HTML基础 21

2.1.1  HTML概述 21

2.1.2  HTML基础结构 22

2.2 HTML标签 23

2.2.1  基本标签 23

2.2.2  格式标签 25

2.2.3  文本标签 27

2.2.4  超链标签 28

2.2.5  图像标签 29

2.2.6  表格标签 30

2.2.7  分区标签 32

2.3 HTML 5简介 34

2.3.1     HTML 5的出现 34

2.3.2     使用HTML 5的必要性 35

2.3.3      HTML 5的新特性 36

2.4 XHTML介绍 40

2.4.1  什么是XHTML 40

2.4.2  HTML转换成XHTML的方法 41

2.5 实训——综合各种标签的网页 44

2.6 上机题 47

第3章 CSS基础知识介绍 49

3.1 CSS入门 49

3.1.1     CSS的历史 50

3.1.2     CCS3简介 50

3.1.3     CCS3新增的功能 51

3.2 CSS的基本语法 53

3.2.1     CSS选择器 53

3.2.2     选择器声明 56

3.2.3     CSS 3新增的选择器 58

3.2.4     CSS的继承 62

3.3 CSS的4种引入方式 63

3.4 CSS里的单位和值 64

3.4.1     颜色 64

3.4.2     CSS 3中新增的颜色 66

3.4.3     长度单位 69

3.4.4     通过URL引入外部资源 71

3.5 实训   CSS基本语法的演练 73

3.6 上机题 75

第4章 通过CSS控制字体样式 79

4.1 通过CSS控制文本样式 79

4.1.1  定义文字颜色 79

4.1.2  通过CSS设置字体 80

4.1.3  字体粗细与斜体 82

4.1.4  定义字体大小和行高 84

4.1.5  下划线、顶划线、删除线 85

4.2 用CSS控制字间距和对齐方式 86

4.2.1  设置字间距 87

4.2.2  控制对齐方式 87

4.3 通过CSS定义样式表 89

4.3.1  通过CSS定义无序列表的效果 89

4.3.2  通过CSS定义排序列表的样式 90

4.4 CSS 3新增的文本属性 91

4.5 实训——CSS字体样式综合演练 96

4.6 上机题 99

第5章 通过CSS定义链接样式 103

5.1 针对链接的CSS基本概念 103

5.1.1  CSS伪类别 103

5.1.2  用伪类定义动态超链接 104

5.2 定义丰富的超链特效 106

5.2.1  给链接添加提示文字 106

5.2.2  按钮式超链接 107

5.2.3  为超链添加背景图效果 108

5.3 用CSS定义针对超链的鼠标特效 110

5.3.1  用CSS设计鼠标的箭头 110

5.3.2  定义鼠标的变幻效果 112

5.4 实训——用CSS美化超链接 113

5.5 上机题 118

第6章 通过CSS定义图片样式 121

6.1 CSS定义图片样式 121

6.1.1  定义图片边框 121

6.1.2  定义图片大小 123

6.1.3  通过CSS保证图片不变形 124

6.1.4  定义图片的对齐方式 126

6.2 通过CSS设置文字和图片交互的效果 129

6.2.1  设置文字环绕的效果 129

6.2.2  浮动广告 131

6.3 CSS 3新增的边框属性 132

6.4 实训——用CSS设计图文并茂的效果 136

6.5 通过CSS设置背景颜色 138

6.5.1  设置页面背景色 139

6.5.2  通过背景色给页面分块 140

6.6 通过CSS处理背景图像样式 141

6.6.1  设置页面背景图样式 141

6.6.2  设置背景图重复的效果 141

6.6.3  定义背景图片的位置 142

6.6.4  固定背景图片 143

6.7 CSS 3新增的背景属性 144

6.8 实训——实现美食资讯网的菜单部分 148

6.9 上机题 150

第7章 通过CSS设置表格的样式 153

7.1 表格基础 153

7.2 用CSS设置表格的样式 154

7.2.1  设置表格的颜色 154

7.2.2  设置表格的边框样式 155

7.2.3  设置隔行变色的单元格样式 157

7.2.4  设置大小和对齐方式 158

7.3 实训——用CSS搭建一个综合效果的表格 160

7.4 上机题 163

第8章 通过CSS定义表单样式 167

8.1 认识表单元素 167

8.1.1  输入域标签<input> 167

8.1.2  文本域标签<textarea> 168

8.1.3  选择域标签<select>和<option> 169

8.1.4  表单各元素在网页中的用法 169

8.2 通过CSS设置各元素的外观 170

8.2.1  用CSS修饰表单元素的背景色 170

8.2.2  用CSS改变表单元素的边框样式 173

8.2.3  用CSS修改表单文字的样式 174

8.3 实训——CSS定义表单样式练习 177

8.4 上机题 181

第9章 CSS滤镜的应用 184

9.1 滤镜概述 184

9.2 通道（Alpha） 185

9.3 模糊（Blur） 186

9.4 运动模糊（MotionBlur） 187

9.5 透明色（Chroma） 189

9.6 翻转变换（Flip） 189

9.7 光晕（Glow） 190

9.8 灰度（Gray） 192

9.9 反色（Invert） 193

9.10 遮罩（Mask） 193

9.11 阴影（Shadow） 195

9.12 X射线（X-ray） 196

9.13 浮雕纹理（Emboss和Engrave） 197

9.14 波浪（Wave） 198

9.15 上机题 200

第10章 CSS定位与DIV布局 203

10.1 盒子模型 203

10.1.1  盒子模型的概念 203

10.1.2  CONTENT 204

10.1.3  BORDER 204

10.1.4  PADDING 207

10.1.5  MARGIN 208

10.2 元素的定位 212

10.2.1  定位方式 212

10.2.2  CSS的定位原理 212

10.2.3  利用float定位 218

10.2.4  利用CSS堆元素定位 220

10.3 块元素和行内元素 221

10.3.1  块元素 222

10.3.2  行内元素 223

10.4 CSS 3新增的弹性盒模型 224

10.5 CSS 3新增的多列布局 234

10.6 实训——用CSS定位页面的布局 239

10.7 上机题 243

第11章 用JavaScript搭建动态效果 247

11.1 JavaScript概述 247

11.1.1  JavaScript的基本语法 247

11.1.2  JavaScript嵌入HTML文档 248

11.2 用JavaScript设置图片的效果 249

11.2.1  实现相册效果 249

11.2.2  实现图片滑动切换效果 253

11.3 针对菜单的效果 256

11.3.1  用JavaScript实现页签效果 256

11.3.2  用JavaScript实现下拉式菜单 258

11.3.3  用JavaScript实现滑轮式菜单效果 260

11.4 针对文字的效果 262

11.4.1  文字的打字效果 262

11.4.2  带提示文字的JavaScript特效 264

11.5 上机题 266

第12章 DIV+CSS布局综述 269

12.1 布局方式 269

12.1.1  用DIV将页面分块 269

12.1.2  设计各块的位置 270

12.1.3  用CSS将分布的DIV定位 270

12.2 CSS排版样式 272

12.2.1  设计上中下版式的样式 272

12.2.2  设计固定宽度且居中的样式 274

12.2.3  设计左中右版式的样式 277

12.2.4  设计块的背景色及背景图片 280

12.2.5  内容分类显示版式 281

12.3 实训——构建一个上下结构的页面 284

12.4 实训——构建一个左中右结构的页面 288

12.5 上机题 291

第13章 CSS、XML和Ajax综合使用方式 297

13.1 XML基础 297

13.1.1  XML的特点 297

13.1.2  XML的结构和基本语法 298

13.2 XML与CSS的综合应用 300

13.2.1  在XML里链接CSS文件 301

13.2.2  通过XML和CSS，搭建具有图文并茂效果的案例 302

13.3 Ajax与CSS的综合应用 304

13.3.1  Ajax概述 304

13.3.2  Ajax与CSS的综合应用 304

13.4 实训——XML与CSS结合的练习 309

13.5 实训——Ajax与CSS结合的练习 313

13.6 上机题 316

第14章 解决CSS开发中的常见问题 319

14.1 解决浏览器不兼容的问题 319

14.1.1  解决字体大小不兼容的问题 319

14.1.2  解决DIV里的float悬浮问题 321

14.1.3  容器高度的限定问题 323

14.2 解决HTML和CSS的中文编码问题 325

14.2.1  CSS与HTML页面的默认编码问题 325

14.2.2  CSS中文注释“标”的问题 327

第15章 娱乐门户网站 330

15.1 网站页面效果分析  330

15.1.1  首页效果分析 330

15.1.2  “店铺”页面的效果分析 332

15.1.3  网站文件综述 333

15.2 规划首页的布局 333

15.2.1  搭建首页页头部分的DIV 333

15.2.2  搭建“第一列”部分的DIV 335

15.2.3  搭建“标签导航”部分的DIV   336

15.2.4  搭建“新进店铺”部分的DIV 337

15.2.5  搭建“最新资讯”部分的DIV 338

15.2.6  搭建“第三列”部分的DIV 339

15.2.7  搭建页脚部分的DIV 339

15.2.8  首页CSS效果分析 340

15.3 店铺页面 341

15.3.1  商铺资料部分的DIV 341

15.3.2  商铺推荐部分的DIV 342

第16章 旅游酒店网站 345

16.1 网站页面效果分析  345

16.1.1  首页效果分析 345

16.1.2  “酒店推荐”页面的效果分析 346

16.1.3  网站文件综述 347

16.2 规划首页的布局 347

16.2.1  搭建首页页头部分的DIV 348

16.2.2  搭建“推荐景点”部分的DIV 348

16.2.3  搭建“最新新闻”部分的DIV 349

16.2.4  搭建“游玩指南”部分的DIV 350

16.2.5  搭建“在线订票”部分的DIV 351

16.2.6  搭建“热门旅游专题”部分的DIV 352

16.2.7  搭建页脚部分的DIV 352

16.2.8  首页CSS效果分析 354

16.3 酒店推荐页面 354

16.3.1  酒店推荐列表部分的DIV 354

16.3.2  推荐酒店列表部分的DIV 356

第17章 设计公司网站 359

17.1 网站页面效果分析  359

17.1.1  首页效果分析 359

17.1.2  “设计理念”页面的效果分析 361

17.1.3  网站文件综述 361

17.2 规划首页的布局 362

17.2.1  搭建首页页头部分的DIV 362

17.2.2  搭建“网站广告”部分的DIV 363

17.2.3  搭建“公司介绍”部分的DIV   364

17.2.4  搭建“设计服务”部分的DIV 364

17.2.5  搭建“预约登记”部分的DIV 366

17.2.6  搭建“页脚部分”的DIV 368

17.2.7  首页CSS效果分析 368

17.3 设计理念页面 369

17.3.1  设计理念介绍的DIV 369

17.3.2  业务分类部分的DIV 371

第18章 新闻网站 373

18.1 网站页面效果分析  373

18.1.1  首页效果分析 373

18.1.2  “新闻内容”页面的效果分析 374

18.1.3  网站文件综述 375

18.2 规划首页的布局 376

18.2.1  搭建首页页头部分的DIV 376

18.2.2  搭建“深度新闻”部分的DIV 377

18.2.3  搭建“会议活动”部分的DIV   378

18.2.4  搭建“大图新闻”部分的DIV 378

18.2.5  搭建“新闻报道”部分的DIV 379

18.2.6  搭建“名人博客”部分的DIV 380

18.2.7  搭建页脚部分的DIV 380

18.2.8  首页CSS效果分析 381

18.3 新闻内容页面 382

18.3.1  分类列表部分的DIV 382

18.3.2  新闻文章部分的DIV 384

附录  网站模板 387