《网站开发案例课堂：CSS3+DIV网页样式与布局案例课堂》作者根据自己在长期教学中积累的丰富的网页设计教学经验，完整、详尽地介绍了CSS 3 + DIV网页样式与布局的技术。
《网站开发案例课堂：CSS3+DIV网页样式与布局案例课堂》共分为24章，前19章分别介绍了开发网站的准备工作、HTML 5技术、CSS样式入门、CSS样式基本语法、CSS 3的高级特性、控制网页字体和段落样式、控制网页图片样式、控制网页背景和边框样式、美化网页浏览效果、控制表格与表单样式、控制列表样式、使用CSS 3滤镜美化网页元素、CSS定位与DIV布局核心技术、CSS + DIV盒子的浮动与定位、固定宽度网页布局剖析与制作、自动缩放网页布局剖析与制作、CSS 3与JavaScript的搭配应用、CSS与XML的综合应用、CSS与Ajax的综合应用。最后5章介绍了5个综合性网站的例子。通过学习案例，使读者进一步巩固所学的知识，提高实战能力。
《网站开发案例课堂：CSS3+DIV网页样式与布局案例课堂》内容丰富、全面，图文并茂，步骤清晰，通俗易懂，专业性强，使读者能理解CSS 3 + DIV网页样式与布局的技术，并能解决实际生活或工作中的问题，真正做到知其然更知其所以然。通过重点章节，条理清晰、系统地介绍了读者希望了解的网页设计技巧。
《网站开发案例课堂：CSS3+DIV网页样式与布局案例课堂》涉及面广泛，几乎囊括了CSS 3 + DIV网页样式与布局的所有重要知识，适合所有的网页设计初学者快速入门，同时也适合想全面了解CSS 3 + DIV网页样式与布局的设计人员阅读。
伴随着Web 2.0潮流的盛行，传统的表格布局模式正逐渐被网页标准化CSS + DIV的设计方式取代，对最新CSS 3的学习也成为网页设计师的必修功课。本书专门针对网页样式与布局的初学者，帮助他们快速提高实战水平。
1. 本书特色
(1)知识全面：由浅入深，涵盖了所有的CSS 3 + DIV知识点，帮助读者快速掌握网页设计方面的技能。
(2)图文并茂：在介绍案例的过程中，每一个操作均有对应的插图。图文结合的方式使读者在学习过程中能够直观、清晰地看到操作的过程及效果，便于更快地理解和掌握。
(3)易学易用：颠覆传统“看”书的观念，变成一本能“操作”的图书。
(4)案例丰富：把知识点融会于系统的案例实训中，并且结合经典案例进行讲解和拓展，进而实现“知其然，并知其所以然”的效果。
(5)贴心提示：本书对读者在学习过程中可能会遇到的疑难问题以“提示”和“注意”等形式进行说明，以免读者在学习的过程中走弯路。
(6)超值赠送：除了本书的素材和结果外，还附赠封面所述的大量的资源，读者可以全面掌握网页设计方方面面的知识。
2. 读者对象
本书不仅适合网页设计初级读者入门学习，也可作为中、高级用户的参考手册。书中大量的实例模拟真实的网页设计案例，对读者的工作有现实的借鉴作用。
3. 作者团队
本书作者刘玉红长期从事网站设计与开发工作。胡同夫、梁云亮、王攀登、王婷婷、陈伟光、包慧利、孙若淞、肖品、王维维和刘海松等人参与了本书的编写工作。
本书虽然倾注了编者的努力，但由于水平有限，书中难免存在疏漏之处，恳请读者批评指正。读者如果遇到问题或有意见和建议，敬请与我们联系，我们将全力提供帮助。
编 者
第1章 制作网页的准备工作1
1.1 认识网页和网站2
1.1.1 什么是网页2
1.1.2 什么是网站3
1.2 网页中需要包含的要素3
1.2.1 需要HTML文件3
1.2.2 需要DIV层4
1.2.3 需要CSS定义的网页样式4
1.2.4 需要JavaScript设置网页动画5
1.2.5 需要域名与服务器空间5
1.3 一个简单网页的基本构成6
1.3.1 head部分6
1.3.2 body部分6
1.3.3 注释部分7
1.4 制作网页的总体流程8
1.4.1 网页规划8
1.4.2 搜集资料8
1.4.3 使用Photoshop设计网页的总体效果9
1.4.4 通过切图，得到网页素材文件9
1.4.5 搭建网页DIV层10
1.4.6 定义CSS和JavaScript效果11
1.4.7 测试网页11
1.5 网站种类与网页布局方式12
1.5.1 网站的种类12
1.5.2 网页布局方式13
1.6 综合示例——在Photoshop CS6中构建网页结构15
1.7 上机练习——使用Photoshop制作纵向导航条16
1.8 专家答疑18
第2章 网页实现技术——HTML 521
2.1 HTML 5的基本概念22
2.1.1 HTML 5简介22
2.1.2 HTML 5文件的基本结构22
2.1.3 认识HTML 5标记23
2.2 HTML 5文件的编写方法23
2.2.1 使用记事本手工编写HTML文件24
2.2.2 使用Dreamweaver CS6编写HTML文件24
2.3 HTML 5的基本标记27
2.3.1 字符标记27
2.3.2 超级链接标记28
2.3.3 列表标记30
2.3.4 制作纯文本网页31
2.4 HTML 5的段落和图片标记32
2.4.1 常用段落和图片标记32
2.4.2 文字和图片混合排版33
2.5 HTML 5的表单标记34
2.5.1 常用的表单控件34
2.5.2 多行文本标记和下拉列表36
2.5.3 用户注册页面37
2.6 HTML 5的表格标记38
2.6.1 表格标记38
2.6.2 制作季度报表40
2.7 综合示例——制作网站首页41
2.8 上机练习——简单的HTML 5网页45
2.9 专家答疑45
第3章 CSS 3样式入门47
3.1 CSS概述48
3.1.1 CSS的功能48
3.1.2 浏览器与CSS48
3.1.3 CSS的发展历史49
3.2 CSS 3的常用单位49
3.2.1 颜色单位49
3.2.2 长度单位53
3.3 编辑和浏览CSS54
3.3.1 手工编写CSS54
3.3.2 用Dreamweaver编写CSS55
3.4 在HTML 5中调用CSS的方法56
3.4.1 行内样式56
3.4.2 内嵌样式57
3.4.3 链接样式59
3.4.4 导入样式60
3.5 调用方法的优先级问题61
3.5.1 行内样式和内嵌样式比较61
3.5.2 内嵌样式和链接样式比较62
3.5.3 链接样式和导入样式62
3.6 综合示例——制作学生信息统计表63
3.7 专家答疑65
第4章 CSS样式的基本语法67
4.1 CSS基础语法68
4.1.1 CSS构造规则68
4.1.2 CSS的注释68
4.2 CSS的常用选择器69
4.2.1 标签选择器69
4.2.2 类选择器70
4.2.3 ID选择器71
4.2.4 选择器的声明71
4.3 综合示例——制作炫彩网站Logo72
4.4 专家答疑75
第5章 CSS 3的高级特性77
5.1 复合选择器78
5.1.1 全局选择器78
5.1.2 “交集”选择器79
5.1.3 “并集”选择器79
5.1.4 继承(后代)选择器80
5.2 CSS 3新增的选择器81
5.2.1 属性选择器81
5.2.2 结构伪类选择器83
5.2.3 UI元素状态伪类选择器84
5.2.4 伪类选择器86
5.3 CSS的继承特性87
5.3.1 继承关系87
5.3.2 CSS继承的运用88
5.4 CSS的层叠特性89
5.4.1 同一选择器被多次定义的处理89
5.4.2 同一标签运用不同类型选择器的处理90
5.5 综合示例——制作新闻菜单91
5.6 专家答疑94
第6章 使用CSS 3控制网页字体与段落的样式95
6.1 通过CSS控制字体样式96
6.1.1 控制字体类型96
6.1.2 定义字体大小97
6.1.3 定义字体风格98
6.1.4 控制文字的粗细99
6.1.5 将小写字母转为大写字母100
6.1.6 设置字体的复合属性101
6.1.7 定义文字的颜色102
6.2 CSS 3中新增的文本高级样式103
6.2.1 添加文本的阴影效果103
6.2.2 设置文本的溢出效果104
6.2.3 控制文本的换行105
6.2.4 设置字体尺寸106
6.3 通过CSS控制文本间距与对齐方式107
6.3.1 设置单词之间的间隔108
6.3.2 设置字符之间的间隔108
6.3.3 为文本添加下划线、上划线、删除线109
6.3.4 设置垂直对齐方式110
6.3.5 转换文本的大小写112
6.3.6 设置文本的水平对齐方式113
6.3.7 设置文本的缩进效果115
6.3.8 设置文本的行高116
6.3.9 文本的空白处理116
6.3.10 文本的反排118
6.4 综合示例——设置网页标题119
6.5 上机练习——制作新闻页面121
6.6 专家答疑122
第7章 使用CSS控制网页图片的样式123
7.1 图片缩放124
7.1.1 通过描述标记width和height来缩放图片124
7.1.2 使用CSS 3中的max-width和max-height缩放图片124
7.1.3 使用CSS 3中的width和height缩放图片125
7.2 设置图片的对齐方式126
7.2.1 设置图片横向对齐126
7.2.2 设置图片纵向对齐127
7.3 图文混排129
7.3.1 设置文字的环绕效果129
7.3.2 设置图片与文字的间距130
7.4 综合示例——制作学校宣传单132
7.5 上机练习——制作简单的图文混排网页134
7.6 专家答疑135
第8章 使用CSS控制网页背景与边框样式137
8.1 使用CSS控制网页背景138
8.1.1 设置背景颜色138
8.1.2 设置背景图片139
8.1.3 背景图片的重复140
8.1.4 背景图片的显示142
8.1.5 背景图片的位置143
8.2 CSS 3中新增的控制网页背景的属性145
8.2.1 背景图片大小145
8.2.2 背景显示区域146
8.2.3 背景图像的裁剪区域148
8.2.4 背景复合属性149
8.3 使用CSS控制边框样式150
8.3.1 设置边框的样式150
8.3.2 设置边框的颜色152
8.3.3 设置边框的线宽153
8.3.4 设置边框的复合属性155
8.4 CSS 3中新增的边框圆角效果155
8.4.1 设置圆角边框156
8.4.2 指定两个圆角半径156
8.4.3 绘制四个角的圆角边框157
8.4.4 绘制不同种类的边框159
8.5 综合示例——制作简单的公司主页161
8.6 上机练习——制作简单的生活资讯主页164
8.7 专家答疑165
第9章 使用CSS 3美化网页浏览效果167
9.1 使用CSS 3美化超链接168
9.1.1 改变超级链接的基本样式168
9.1.2 设置带有提示信息的超级链接169
9.1.3 设置超级链接的背景图170
9.1.4 设置超级链接的按钮效果171
9.2 使用CSS 3美化鼠标特效172
9.2.1 使用CSS 3控制鼠标箭头172
9.2.2 设置鼠标变换式超链接174
9.2.3 设置网页页面滚动条175
9.3 综合示例1——图片版本的
超级链接177
9.4 综合示例2——关于鼠标特效178
9.5 上机练习——制作一个简单的导航栏181
9.6 专家答疑182
第10章 使用CSS控制表格和表单的样式185
10.1 美化表格样式186
10.1.1 设置表格边框的样式186
10.1.2 设置表格边框的宽度188
10.1.3 设置表格边框的颜色189
10.2 美化表单样式190
10.2.1 美化表单中的元素190
10.2.2 美化提交按钮192
10.2.3 美化下拉菜单193
10.3 综合示例——制作用户登录页面195
10.4 上机练习——制作用户注册页面197
10.5 专家答疑199
第11章 使用CSS控制列表样式201
11.1 使用CSS控制项目列表202
11.1.1 美化无序列表202
11.1.2 美化有序列表203
11.1.3 美化自定义列表205
11.1.4 制作图片列表206
11.1.5 缩进图片列表207
11.1.6 列表复合属性209
11.2 使用CSS制作网页菜单210
11.2.1 制作无需表格的菜单210
11.2.2 制作水平和垂直菜单212
11.3 综合示例——模拟soso导航栏214
11.4 上机练习——将段落转变成列表217
11.5 专家答疑219
第12章 使用CSS 3滤镜美化网页元素221
12.1 滤镜概述222
12.2 基本滤镜222
12.2.1 通道(Alpha)滤镜223
12.2.2 模糊(Blur)滤镜225
12.2.3 色彩(Chroma)滤镜226
12.2.4 投影(DropShadow)滤镜227
12.2.5 水平翻转(FlipH)滤镜229
12.2.6 垂直翻转(FlipV)滤镜229
12.2.7 光晕(Glow)滤镜230
12.2.8 灰度(Gray)滤镜231
12.2.9 反相(Invert)滤镜232
12.2.10 遮罩(Mask)滤镜233
12.2.11 波浪(Wave)滤镜233
12.2.12 阴影(Shadow)滤镜235
12.2.13 X-ray滤镜236
12.3 高级滤镜236
12.3.1 光照(Light)滤镜237
12.3.2 渐隐(BlendTrans)滤镜238
12.3.3 切换(RevealTrans)滤镜240
12.4 专家答疑241
第13章 CSS定位与DIV布局核心技术243
13.1 了解块级元素和行内级元素244
13.1.1 块级元素和行内级元素的应用244
13.1.2 div元素和span元素的区别246
13.2 盒子模型247
13.2.1 盒子模型的概念247
13.2.2 定义网页的border区域247
13.2.3 定义网页的padding区域249
13.2.4 定义网页的margin区域250
13.3 CSS 3新增的弹性盒模型253
13.3.1 定义盒子的布局取向(box-orient)254
13.3.2 定义盒子布局的顺序(box-direction)255
13.3.3 定义盒子布局的位置(box-ordinal-group)257
13.3.4 定义盒子的弹性空间(box-flex)258
13.3.5 管理盒子的空间(box-pack和box-align)260
13.3.6 盒子空间的溢出管理(box-lines)262
13.4 综合示例——图文排版效果263
13.5 上机练习——淘宝导购菜单265
13.6 专家解惑268
第14章 CSS + DIV盒子的浮动与定位269
14.1 定义DIV270
14.1.1 什么是DIV270
14.1.2 创建DIV270
14.2 盒子的定位271
14.2.1 静态定位271
14.2.2 相对定位272
14.2.3 绝对定位273
14.2.4 固定定位274
14.2.5 盒子的浮动275
14.3 其他CSS布局定位方式277
14.3.1 溢出(overflow)定位277
14.3.2 隐藏(visibility)定位279
14.3.3 z-index空间定位280
14.4 新增的CSS 3多列布局282
14.4.1 设置列宽度282
14.4.2 设置列数283
14.4.3 设置列间距285
14.4.4 设置列边框样式286
14.5 综合示例——定位网页的布局样式288
14.6 上机练习——制作阴影文字效果291
14.7 专家答疑292
第15章 固定宽度网页布局的剖析与制作293
15.1 CSS的排版观念294
15.1.1 将页面用DIV分块294
15.1.2 设置各块的位置294
15.1.3 用CSS定位295
15.2 固定宽度网页剖析与布局299
15.2.1 网页单列布局模式299
15.2.2 网页1-2-1型布局模式303
15.2.3 网页1-3-1型布局模式305
15.3 专家答疑309
第16章 自动缩放网页布局的剖析与制作311
16.1 自动缩放网页1-2-1型布局模式312
16.1.1 网页1-2-1等比例变宽布局312
16.1.2 网页1-2-1单列变宽布局313
16.2 自动缩放网页1-3-1型布局模式314
16.2.1 网页1-3-1三列宽度等比例布局314
16.2.2 网页1-3-1单侧列宽度固定的变宽布局314
16.2.3 网页1-3-1中间列宽度固定的变宽布局317
16.2.4 网页1-3-1双侧列宽度固定的变宽布局320
16.2.5 网页1-3-1中列和左侧列宽度固定的变宽布局324
16.3 分列布局背景色的使用327
16.3.1 设置固定宽度布局的列背景色327
16.3.2 设置特殊宽度变化布局的列背景色329
16.4 综合案例——单列宽度变化布局330
16.5 上机练习——多列等比例宽度变化布局332
16.6 专家答疑334
第17章 CSS 3和JavaScript的搭配应用335
17.1 JavaScript的语法基础336
17.1.1 什么是JavaScript336
17.1.2 数据类型336
17.1.3 变量338
17.1.4 运算符的简单应用338
17.1.5 流程控制语句的简单应用341
17.1.6 函数的简单应用344
17.2 常见的JavaScript编写工具347
17.2.1 记事本工具347
17.2.2 Dreamweaver348
17.3 JavaScript在HTML中的使用349
17.3.1 在HTML网页头中嵌入JavaScript代码349
17.3.2 在HTML网页中嵌入JavaScript代码350
17.3.3 在HTML网页元素的事件中嵌入JavaScript代码351
17.3.4 在HTML中调用已经存在的JavaScript文件352
17.3.5 通过JavaScript伪URL引入JavaScript脚本代码353
17.4 JavaScript与CSS 3的结合使用354
17.4.1 设置动态内容354
17.4.2 改变动态样式355
17.4.3 动态定位网页元素357
17.4.4 设置网页元素的显示与隐藏359
17.5 HTML 5、CSS 3和JavaScript的 搭配应用360
17.5.1 设定左右移动的图片360
17.5.2 制作颜色选择器363
17.5.3 制作跑马灯效果365
17.6 综合示例——制作树形导航菜单366
17.7 上机练习——制作滚动的菜单371
17.8 专家答疑373
第18章 CSS与XML的综合运用375
18.1 XML语法基础376
18.1.1 XML的基本应用376
18.1.2 XML文档的组成和声明377
18.1.3 XML元素介绍379
18.2 用CSS修饰XML文件381
18.2.1 XML使用CSS381
18.2.2 设置字型属性382
18.2.3 设置色彩属性383
18.2.4 设置边框属性384
18.2.5 设置文本属性385
18.3 综合示例1——招聘广告387
18.4 综合示例2——图文混排页面389
18.5 上机练习——古诗欣赏391
18.6 专家答疑394
第19章 CSS与Ajax的综合应用395
19.1 Ajax概述396
19.1.1 什么是Ajax396
19.1.2 Ajax的关键元素398
19.1.3 CSS在Ajax应用中的
地位399
19.2 Ajax快速入门400
19.2.1 全面剖析XMLHttpRequest对象400
19.2.2 发出Ajax请求402
19.2.3 处理服务器响应403
19.3 综合示例——制作自由拖动的网页405
19.4 上机练习——制作加载条410
19.5 专家答疑411
第20章 商业门户类网站赏析413
20.1 整体设计414
20.1.1 颜色应用分析414
20.1.2 架构布局分析415
20.2 主要模块设计416
20.2.1 网页整体样式插入416
20.2.2 网页局部的样式417
20.2.3 顶部模块样式代码分析427
20.2.4 中间主体代码分析428
20.2.5 底部模块分析432
20.3 网站调整432
20.3.1 部分内容调整432
20.3.2 模块调整433
20.3.3 调整后预览测试435
第21章 制作娱乐休闲类网页437
21.1 整体设计438
21.1.1 应用设计分析438
21.1.2 架构布局分析439
21.2 主要模块设计440
21.2.1 网页整体样式插入440
21.2.2 顶部模块代码分析441
21.2.3 视频模块代码分析442
21.2.4 评论模块代码分析444
21.2.5 热门推荐模块代码分析445
21.2.6 底部模块分析447
21.3 网页调整448
21.3.1 部分内容调整448
21.3.2 调整后预览测试449
第22章 制作图像影音类网页451
22.1 整体设计452
22.1.1 颜色应用分析452
22.1.2 架构布局分析452
22.2 主要模块设计454
22.2.1 样式代码分析454
22.2.2 顶部模块样式代码分析462
22.2.3 网站主体模块代码分析464
22.2.4 底部模块分析468
22.3 网站调整469
22.3.1 部分内容调整469
22.3.2 模块调整470
22.3.3 调整后预览测试476
第23章 制作企业门户类网页477
23.1 构思布局478
23.1.1 设计分析478
23.1.2 排版架构478
23.2 主要模块设计479
23.2.1 Logo与导航菜单479
23.2.2 Banner区481
23.2.3 资讯区481
23.2.4 版权信息484
第24章 制作在线购物类网页487
24.1 整体布局488
24.1.1 设计分析488
24.1.2 排版架构488
24.2 主要模块设计489
24.2.1 Logo与导航区489
24.2.2 Banner与资讯区491
24.2.3 产品类别区域492
24.2.4 页脚区域494
第1章
制作网页的
准备工作
随着Internet的发展与普及，越来越多的人开始在网上通信、工作、购物、娱乐，甚至在网络上建立自己的网站。网站代表了企业和个人的形象，正确的布局可以让网站的结构更加合理，使网站变得更加美观。
1.1 认识网页和网站
现在，网站已经成为越来越重要的信息发布途径。拥有自己的网站，可以说是每个网页创作者的梦想。要学习网站建设，首先应当认识一下网页和网站，了解它们的相关概念。
1.1.1 什么是网页
网页是Internet中最基本的信息单位，是把文字、图形、声音及动画等各种多媒体信息相互链接起来而构成的一种信息表达方式。
通常情况下，网页中有文字和图像等基本信息，有些网页中还有声音、动画和视频等多媒体内容。
网页一般由站标、导航栏、广告栏、信息区和版权区等部分组成，如图1-1所示。
在访问一个网站时，首先看到的网页一般称为该网站的首页。有些网站的首页具有欢迎访问者的作用。首页只是网站的开场页，单击页面上的文字或图片，即可打开网站主页，而首页也随之关闭，如图1-2所示。
图1-1 网页的外观
图1-2 网站的首页
网站主页与首页的区别在于：主页设有网站的导航栏，是所有网页的链接中心。但多数网站的首页与主页通常合为一个页面，即省略了首页而直接显示主页，在这种情况下，它们指的是同一个页面，如图1-3所示。
图1-3 网站主页与首页合二为一
1.1.2 什么是网站
网站就是在Internet上通过超级链接的形式构成的相关网页的集合。简单地说，网站是一种通信工具，人们可以通过网页浏览器来访问网站，获取自己需要的资源或享受网络提供的服务。例如，人们可以通过淘宝网站查找自己需要的信息，如图1-4所示。
图1-4 淘宝网站
1.2 网页中需要包含的要素
在互联网中，网页是一个文件，存储在某一台与互联网相连的计算机或服务器中，使用统一资源定位符（URL）来识别和访问，本节就来介绍网页中需要包含的要素。
1.2.1 需要HTML文件
HTML（Hypertext Marked Language），即超文本标记语言，是一种用来制作超文本文档的简单标记语言，是应用非常广泛的网页格式，也是用来显示Web页面的语言之一。
网页中所有定义的色彩、文字、表格，甚至是视频等元素的网页相关代码，都是编写在HTML文件中的，可以说HTML就是网站展示声音、图片、文字等元素的平台。图1-5展示了淘宝网首页的HTML相关代码。
图1-5 淘宝网首页的HTML相关代码
1.2.2 需要DIV层
标记是一个区块容器标记，在
标记中，可以放置其他的一些HTML元素，例如段落
、标题
、表格、图片和表单等。然后使用CSS 3相关的属性把div容器标记中的元素作为一个独立的对象进行修饰，这样就不会影响到其他HTML元素了。
形象地讲，在HTML网页文件中，DIV就相当于一个“圈地者”，它将网页分成若干个小区域，每一个DIV在网页上占据了一定的位置，在这个位置上，用户可以放置特定的内容。图1-6中的“手机数码”区域，就是先用DIV圈出一块地方，然后在上面放置“手机数码”的分类信息，其他区域也是这样来放置网页元素的，最后合在一起，就整合出了一个完美的网页了。
图1-6 网页上的“手机数码”区域及其他区域
1.2.3 需要CSS定义的网页样式
在网页中，设计者将DIV元素都放置好了，要想给浏览者呈现出一个丰富多彩的网页效果，还需要利用CSS来定义网页样式。
在设计网页的过程中，CSS扮演了一个“美术家”的角色，利用CSS，可以定义网页文字、图片以及视频等元素的显示方式，使其能够更贴切地接近我们的要求。如图1-7所示的网页中就使用了CSS来定义网页样式。
图1-7 使用了CSS来定义网页样式
CSS样式一般是作用在DIV上的，它需要与DIV一起构成网页上的一个模块，而网页又是由多个DIV构成的，因此，从狭义上讲，HTML + DIV + CSS组合起来，就能构成一个网站。
1.2.4 需要JavaScript设置网页动画
JavaScript是一种为了使网页能够具有交互性，能够包含更多活跃的元素，而嵌入在网页中的技术，它使我们的网页能够表现得内容更加生动，使网页的效果更加醒目。
JavaScript作为一种可以给网页增加交互性的脚本语言，拥有近20年的发展历史。它的简单、易学易用特性，使其立于不败之地。使用JavaScript可以很容易地制作出很多网页动画效果，如漂亮的时钟、广告效果的跑马灯等。
图1-8中，网页里的广告图片会自动地切换，而且单击图片左右两侧的箭头时，广告也会切换。这种效果就是用JavaScript脚本控制的。
图1-8 网页里的广告图片效果
1.2.5 需要域名与服务器空间
一个网站开发完成后，要想运营，需要给网站申请一个域名。申请域名的方法很多，用户可以登录域名服务商的网站，根据提示申请域名。域名有免费域名和收费域名两种，用户可以根据实际的需要进行选择。
域名注册成功之后，还需要申请网站空间，应根据不同的网站类型选择不同的空间。网站空间有免费空间和收费空间两种。对于个人网站的用户来说，可以先申请免费空间使用。免费空间只需向空间的服务提供商提出申请，在得到答复后，按照说明上传主页即可，主页的域名和空间都不用操心。对于商业网站而言，用户需要考虑空间和安全性等因素，为此可以选择收费网站。
使用免费空间美中不足的是：网站的空间有限，提供的服务一般，空间不是非常稳定，域名不能随心所欲地选择。
域名与网站是一一对应的关系，用户只需要在浏览器里输入某个域名，就能进入到对应的站点中。例如，在浏览器的地址栏中输入“www.baidu.com”这个域名，就能进入百度网站，如图1-9所示。
图1-9 进入百度网站
1.3 一个简单网页的基本构成
任何一个网页的内容都包含在和这对标签之内，在这对标签中，通常包含三个要素，分别是head部分、body部分以及注释部分。
1.3.1 head部分
头标记head用于说明文档头部的相关信息，一般包括标题信息、元信息、定义CSS样式和脚本代码等。HTML的头部信息以结束，语法格式如下：
...
元素的作用范围是整篇文档，定义在HTML语言头部的内容往往不会在网页上直接显示。在head标记中，一般可以设置title和meta等标记的内容。
1.3.2 body部分
网页所要显示的内容都放在网页的主体标记内，主体标记以开始，以标记结束，语法格式如下。
...
主体标记是HTML文件的重点所在，HTML的所有标记都将放在这个标记内。然而它并不仅仅是一个形式上的标记，它本身也可以控制网页的背景颜色或背景图像。
注意，在构建HTML结构时，标记不允许交错出现，否则会造成错误。例如，下列代码中出现了交错：
注释语句元素由前后两半部分组成，前半部分由一个左尖括号、一个半角感叹号和两个连字符头组成，后半部分由两个连字符和一个右尖括号组成。例如：
网页
页面注释不但可以对HTML中一行或多行代码进行解释说明，而且能够注释掉某些代码。如果希望某些HTML代码在浏览器中不显示，可以将这部分内容放在之间。例如，修改上述代码，如下所示：
……
修改后的代码，将
标记作为注释内容处理，在浏览器中将不会显示这部分内容。
?
1.4 ?制作网页的总体流程
对于一个网站来说，除了网页内容外，还要对网站进行整体规划设计。格局凌乱的网站的内容再精彩，也不能说是一个好网站。
要设计出一个精美的网站，前期的规划是必不可少的。
1.4.1 ?网页规划
规划站点就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。规划站点就是对站点中所使用的素材和资料进行管理和规划，对网站中栏目的设置、颜色的搭配、版面的设计、文字图片的运用等进行规划。
一般情况下，将站点中所用的图片和按钮等图形元素放在images文件夹中，HTML文件放在根目录下，而动画和视频等放在flash文件夹中。对站点中的素材进行详细的规划，便于日后管理。
1.4.2 ?搜集资料
确定了网站风格和布局后，就要开始搜集素材了。常言道：“巧妇难为无米之炊”，要让自己的网站有声有色、能吸引人，就要尽量搜集素材，包括文字、图片、音频、动画及视频等，搜集到的素材越充分，制作网站就越容易。素材既可以从图书、报刊、光盘及多媒体上得来，也可以从网上搜集，还可以自己制作，然后把搜集到的素材去粗取精，选出制作网页所需的素材。如图1-10所示就是百度图库里面的精彩图片。
?
图1-10 ?搜索素材图片
不过，在搜集图片素材时，一定要注意图片的大小，因为在网络中传输时，图片的容量越小，传输的速度就越快，所以应尽量搜集容量小、画面精美的图片。
?
1.4.3 ?使用Photoshop设计网页的总体效果
制作网页是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂的顺序来制作。所谓先大后小，就是在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题能及时修改。使用Photoshop可以设计网页的总体效果。如图1-11所示，就是使用Photoshop制作出的网页效果。
?
图1-11 ?使用Photoshop制作出的网页总体效果
1.4.4 ?通过切图，得到网页素材文件
在得到网页的总体效果后，还需要通过切图，得到网页素材文件，最常用的切图工具仍然是Photoshop。切图并保存素材文件的操作步骤如下。
?打开Photoshop软件，在工作界面中选择“文件”→“打开”菜单命令，在打开的对话框中选择制作好的网页总体效果图，如图1-12所示。
?在工具箱中单击“切片工具”按钮 ，根据需要，在网页中选择需要切割的图片，如图1-13所示。
?
图1-12 ?打开网页效果图 ?
图1-13 ?选择切片
?选择“文件”→“存储为Web所用格式”菜单命令，弹出“存储为Web和设备所用格式”对话框，在其中选中所有切片图像，如图1-14所示。
?单击“存储”按钮，即可打开“将优化结果存储为”对话框，单击“切片”后面的下三角按钮，从弹出的下拉列表中选择“所有切片”选项，如图1-15所示。
?
图1-14 ?“存储为Web和设备所用格式”对话框 ?
图1-15 ? “将优化结果存储为”对话框
?单击“保存”按钮，即可将所有切片中的图像保存起来，如图1-16所示。
?
图1-16 ?开始进行切片并保存
? 在切图过程中，如果有格式一致的重复项，我们只需切一次，其他重复项我们通过调整table表格，使它正常，这样做的好处有两点，一是避免重复劳动，二是保证每个重复项表格图片大小统一或一致。
1.4.5 ?搭建网页DIV层
开发网站的首要任务就是搭建网页DIV层，搭建DIV的方法是在HTML里的body部分，先用一些空白的DIV层说明某个位置应该放某个特定的模块。
如图1-17所示，我们通过Photoshop得到了网页的整体效果后，下面就可以在HTML页面中用DIV搭建起其中的“产品分类”、“联系我们”、“友情链接”等模块，最后再向DIV层添加相应的内容，来实现效果了。
?
图1-17 ?DIV效果演示
1.4.6 ?定义CSS和JavaScript效果
搭建好网页的DIV层后，就能在网页中通过HTML标签来定义页面的效果了。在搭建的过程中，需要使用CSS来定义样式，用JavaScript来定义动态的效果。
CSS的作用主要是定义网页中的各个部分以及元素的样式，比如图片的大小、文字的显示方式、边框的样式等。
JavaScript的作用主要是定义网页动态效果，通过JavaScript的设置，可以使网页变得更加灵活、亲切，能够吸引更多的眼球。如图1-18所示，这是在某页面中添加了JavaScript脚本，实现的效果就是图片自动循环切换。
?
图1-18 ?某页面添加JavaScript脚本实现的效果
1.4.7 ?测试网页
网页制作完毕，上传到网站之后，要在浏览器中打开网站，逐一对站点中的网页进行测试，发现问题要及时修改，然后重新上传。
1. 文字、图片的测试
网页的主要元素就是文字与图片，在网页中，适当的图片和动画既能起到广告宣传的作用，又能起到美化页面的作用。一个网页的元素可以包括图片、动画、边框、颜色、字体、背景、按钮等。测试的内容主要包括以下几个部分：
? 要确保图形有明确的用途，图片或动画不要胡乱地堆在一起，以免浪费传输时间。
? 验证所有页面字体的风格是否一致，以及文字表述信息是否有误。
? 背景颜色应该与字体颜色和前景颜色相搭配。
? 图片的大小和质量也是一个很重要的因素，一般采用JPG或GIF压缩。
2. 测试链接
一个网页中，一般存在有多个超级链接，测试链接的主要内容可分为三个方面：
? 测试所有链接是否按指示的那样确实链接到了该链接的页面。
? 测试所链接的页面是否存在。
? 保证Web应用系统上没有孤立的页面。所谓孤立页面，是指没有链接指向该页面，只有知道正确的URL地址才能访问。
3. 浏览器兼容性测试
浏览器是Web客户端最核心的构件，来自不同厂商的浏览器对Java、JavaScript、 ActiveX、plug-ins或不同的HTML规格有不同的支持。例如，ActiveX是Microsoft的产品，是为Internet Explorer而设计的，JavaScript是Netscape的产品，Java是Sun的产品等。另外，框架和层次结构风格在不同的浏览器中也有不同的显示，甚至根本不显示。不同的浏览器对安全性和Java的设置也不一样。
测试浏览器兼容性的一个方法是创建一个兼容性矩阵。在这个矩阵中，测试不同厂商、不同版本的浏览器对某些构件和设置的适应性。
1.5 ?网站种类与网页布局方式
当用户在网络中遨游时，一个个精彩的网页会呈现在我们面前。网页的精彩因素有哪些呢？色彩的搭配、文字的变化、图片的处理等，这些当然是不可忽略的因素，除了这些，还有一个重要的因素，那就是网页的布局设计。
1.5.1 ?网站的种类
按照内容形式的不同，网站可以分为门户网站、职能网站、专业网站和个人网站。
1．门户网站
门户网站是指涉及领域非常广泛的综合性网站，如国内著名的三大门户网站：网易、搜狐和新浪。如图1-19所示为网易网站的首页。
2．职能网站
职能网站是指一些公司为展示其产品或对其所提供的售后服务进行说明而建立的网站。如图1-20所示为联想集团的中文官方网站。
?
?
-->
新书资讯