第1章网页和网站的制作流程 1
1.1认识网页 2
1.1.1网页和网站 2
1.1.2网页的基本构成元素 2
1.2什么是网页设计 3
1.2.1网页设计概述 4
1.2.2网页设计与网页制作 4
1.2.3网页设计的特点 5
1.2.4网页设计的相关术语 7
1.3网页设计涵盖的内容 11
1.3.1视听元素 11
1.3.2版式设计 11
1.4如何设计网页 12
1.4.1网页设计的基本原则 12
1.4.2网站设计成功的要素 13
1.4.3网页的设计风格及色彩搭配 14
1.5网页设计的原则 14
1.5.1为用户考虑的原则 15
1.5.2主题突出的原则 15
1.5.3整体原则 16
1.5.4内容与形式相统一的原则 17
1.5.5更新和维护的原则 18
1.6网页设计师应具备的素质 18
1.6.1艺术素质 18
1.6.2技能素质 19
1.6.3综合素质 19
1.7网站的制作流程 20
1.7.1前期策划 20
1.7.2页面细化及实施 21
1.7.3后期维护 22
1.8静态页面的制作流程 22
1.8.1观察设计稿 22
1.8.2拆分设计稿 23
1.8.3网页设计的实现 23
第2章CSS样式入门 25
2.1 CSS的基本概念 26
2.1.1 CSS的特点 26
2.1.2 CSS的类型 27
2.1.3 CSS的基本语法 28
2.1.4 CSS的冲突 29
2.2网页设计中的CSS 30
2.2.1怎样使用CSS 30
2.2.2 CSS能做什么 32
2.2.3 CSS不能做什么 32
2.3 CSS样式表的基本用法 33
2.3.1怎样在HTML中插入样式表 33
2.3.2 CSS样式表规则 33
2.4应用CSS到网页中 34
2.4.1内联样式 34
2.4.2嵌入样式表 34
2.4.3外部样式表 35
2.5单位和值 35
2.5.1定义颜色值 36
2.5.2定义字体 37
2.5.3群选择符 38
2.5.4派生选择符 38
2.5.5 id选择符 39
2.5.6类别选择符 39
2.6应用实例——为页面添加CSS样式 41
2.6.1设计分析 41
2.6.2制作步骤 41
2.6.3案例总结 47
2.7举一反三——制作产品介绍网站 48
2.7.1案例分析 48
2.7.2视频操作 49
第3章使用Div+CSS布局页面 51
3.1定义Div 52
3.1.1什么是Div 52
3.1.2插入Div 52
3.1.3 Div的嵌套和固定格式 54
3.2 CSS布局定位 54
3.2.1浮动定位 55
3.2.2 position定位 58
3.3可视化盒模型 60
3.3.1盒子模型 60
3.3.2视觉可视化模型 62
3.3.3空白边叠加 62
3.4常用的布局方式 63
3.4.1居中布局设计 63
3.4.2浮动布局设计 65
3.4.3高度自适应设计 68
3.5 CSS 3.0中盒模型的新增属性 69
3.5.1 overflow 69
3.5.2 overflow-x 70
3.5.3 overflow-y 71
3.6应用实例——使用Div+CSS布局页面 72
3.6.1设计分析 73
3.6.2制作步骤 73
3.6.3案例总结 78
3.7举一反三——制作健康网站 78
3.7.1案例分析 78
3.7.2视频操作 79
第4章使用CSS控制网页背景 81
4.1背景颜色 82
4.1.1设置页面背景颜色 82
4.1.2设置块背景颜色 83
4.2背景图片 84
4.2.1为页面设置背景图片 84
4.2.2背景图片的重复 85
4.2.3设置背景图片的位置 86
4.2.4设置背景滚动 87
4.2.5背景样式的缩写方式 88
4.3 CSS 3.0中背景的新增属性 89
4.3.1 background-origin 89
4.3.2 background-clip 90
4.3.3 background-size 92
4.3.4 multiple backgrounds 93
4.4应用实例——制作金融类网站页面 94
4.4.1设计分析 94
4.4.2制作步骤 95
4.4.3案例总结 101
4.5举一反三——制作保健商品网站 102
4.5.1案例分析 102
4.5.2视频操作 103
第5章使用CSS控制文字样式 105
5.1控制文字样式 106
5.1.1字体和大小 106
5.1.2文字颜色和粗细 110
5.1.3斜体 111
5.1.4下画线、顶画线和删除线 112
5.1.5英文字母大小写 113
5.2控制段落样式 113
5.2.1段落水平对齐 113
5.2.2段落垂直对齐 114
5.2.3行间距和字间距 115
5.2.4首字下沉 116
5.3使用CSS对Flash中的文字进行控制 116
5.4 CSS 3.0中文字的新增属性 118
5.4.1 text-shadow 118
5.4.2 text-overflow 119
5.4.3 word-wrap 121
5.5应用实例——制作设计类网站 122
5.5.1设计分析 122
5.5.2制作步骤 122
5.5.3案例总结 129
5.6举一反三——制作社区类网站 129
5.6.1案例分析 129
5.6.2视频操作 130
第6章使用CSS控制图片样式 131
6.1图片样式 132
6.1.1图片边框设置 132
6.1.2图片缩放设置 135
6.2图片对齐 136
6.2.1水平对齐设置 136
6.2.2垂直对齐设置 137
6.3图文混排 138
6.3.1文本混排 138
6.3.2设置混排间距 139
6.4 CSS 3.0中边框的新增属性 139
6.4.1 border-image 140
6.4.2 border-radius 141
6.4.3 box-shadow 142
6.4.4 border-color 143
6.5应用实例——制作婚庆网站 145
6.5.1设计分析 145
6.5.2制作步骤 146
6.5.3案例总结 150
6.6举一反三——制作产品介绍网站 150
6.6.1案例分析 151
6.6.2视频操作 152
第7章使用CSS控制列表样式 153
7.1列表控制概述 154
7.1.1列表控制原则 154
7.1.2列表的类型及使用 154
7.1.3改变项目样式 157
7.1.4图片符号 158
7.2使用列表制作实用菜单 159
7.2.1无须表格的菜单 159
7.2.2菜单的横竖转换 161
7.3 CSS 3.0中颜色的新增属性 162
7.3.1 HSL colors 162
7.3.2 HSLA colors 163
7.3.3 opacity 164
7.3.4 RGBA colors 166
7.4应用实例——制作音乐网站 167
7.4.1设计分析 168
7.4.2制作步骤 168
7.4.3案例总结 172
7.5举一反三——制作设计工作室网站 172
7.5.1案例分析 173
7.5.2视频操作 173
第8章使用CSS控制表单样式 175
8.1表单设计概述 176
8.1.1表单的设计原则 176
8.1.2表单应用分类 177
8.2表单的设计 179
8.2.1表单和表单元素 179
8.2.2标签、字段集和图例 183
8.2.3使用CSS控制文本字段 185
8.2.4使用CSS控制复选框与单选框 185
8.2.5使用CSS控制列表与跳转菜单 186
8.3 CSS 3.0中控制内容的新增属性 187
8.4应用实例——制作用户注册页面 188
8.4.1设计分析 189
8.4.2制作步骤 189
8.4.3案例总结 196
8.5举一反三——制作用户登录页面 196
8.5.1案例分析 197
8.5.2视频操作 197
第9章使用CSS美化浏览器效果 199
9.1使用CSS控制超链接 200
9.1.1认识超链接 200
9.1.2关于链接路径 202
9.1.3超链接属性控制 204
9.1.4图像映射 206
9.1.5链接的打开方式 208
9.2超链接特效 208
9.2.1按钮式超链接 208
9.2.2浮雕式超链接 210
9.3鼠标特效 210
9.3.1 CSS控制鼠标箭头 211
9.3.2鼠标变化的超链接 211
9.4 CSS 3.0中用户界面的新增属性 212
9.4.1 box-sizing 212
9.4.2 resize 214
9.4.3 outline 215
9.4.4 nav-index 216
9.5应用实例——制作产品宣传网站 218
9.5.1设计分析 218
9.5.2制作步骤 219
9.5.3案例总结 225
9.6举一反三——制作运输公司网站 225
9.6.1案例分析 225
9.6.2视频操作 226
第10章应用CSS中的滤镜 227
10.1了解CSS滤镜 228
10.1.1 Alpha滤镜 228
10.1.2 Blur滤镜 231
10.1.3 MotionBlur滤镜 232
10.1.4 Dropshadow滤镜 233
10.1.5 Shadow滤镜 234
10.1.6 Flip滤镜 234
10.1.7 Glow滤镜 235
10.1.8 Gray滤镜 236
10.1.9 Invert滤镜 236
10.1.10 Xray滤镜 237
10.1.11 Mask滤镜 237
10.1.12 Wave滤镜 238
10.2 CSS 3.0中其他模块的新增属性 239
10.2.1﹫media 239
10.2.2 columns 240
10.2.3﹫font-face 242
10.2.4 speech 243
10.3应用实例——制作产品类网站 245
10.3.1设计分析 245
10.3.2制作步骤 245
10.3.3案例总结 254
10.4举一反三——制作网络游戏网站 254
10.4.1案例分析 254
10.4.2视频操作 255
第11章CSS与JavaScript的综合应用 257
11.1什么是JavaScript 258
11.1.1了解JavaScript 258
11.1.2 JavaScript的特点 260
11.1.3 JavaScript的应用范围 261
11.1.4 CSS样式与JavaScript 263
11.2 JavaScript的语法基础 263
11.2.1 JavaScript的基本架构 263
11.2.2 JavaScript的基本语法 264
11.2.3数据类型和变量 267
11.2.4表达式和运算符 268
11.2.5基本语句 268
11.3使用Spry构件 270
11.3.1关于Spry构件 271
11.3.2插入Spry菜单 271
11.3.3插入Spry选项卡式面板 273
11.3.4插入Spry折叠式构件 275
11.3.5插入Spry可折叠面板 276
11.4应用实例——在网页中应用Spryy构件 278
11.4.1设计分析 279
11.4.2制作步骤 279
11.4.3案例总结 287
11.5举一反三——制作婚纱摄影网站 287
11.5.1案例分析 288
11.5.2视频操作 288
第12章CSS与XML的综合应用 289
12.1 XML基础 290
12.1.1 XML的特点 290
12.1.2 XML与HTML 291
12.1.3 XML基本语法 293
12.1.4格式正确的XML文档 296
12.2 XML与CSS的链接 297
12.2.1使用xml: stylesheet指令 297
12.2.2使用＠import指令 299
12.3 XML与CSS的应用 299
12.3.1显示学生信息 299
12.3.2实现隔行变色的表格 302
12.4应用实例——在HTML页面中调用XML数据 305
12.4.1设计分析 306
12.4.2制作步骤 306
12.4.3案例总结 311
12.5举一反三——制作企业网站 311
12.5.1案例分析 312
12.5.2视频操作 313
第13章CSS与Ajax的综合应用 315
13.1了解Ajax 316
13.1.1Ajax简介 316
13.1.2Ajax的关键元素 317
13.1.3 Ajax的优势 318
13.1.4实现Ajax的步骤 318
13.1.5使用CSS的必要性 319
13.2 Ajax基础 320
13.2.1创建XMLHttpRequest对象 320
13.2.2发出Ajax请求 321
13.2.3处理服务器响应 322
13.2.4使用CSS样式 322
13.3 HTML 5.0简介 323
13.3.1 HTML 5.0标签 323
13.3.2 HTML 5.0事件属性 327
13.3.3 HTML 5.0标准属性 329
13.4应用实例——使用Ajax实现页面特效 330
13.4.1设计分析 330
13.4.2制作步骤 330
13.4.3案例总结 338
13.5举一反三——通过Ajax实现可拖动Div块 339
13.5.1案例分析 339
13.5.2视频操作 340
第14章儿童教育类网站 341
14.1综合实例——制作儿童教育类网站 342
14.1.1设计分析 342
14.1.2制作步骤 342
14.1.3案例总结 353
第15章医疗保健类网站设计 355
15.1综合实例——制作医疗保健类网站 356
15.1.1设计分析 356
15.1.2制作步骤 356
15.1.3案例总结 366
第16章游戏类网站设计 367
16.1综合实例——制作游戏类网站 368
16.1.1设计分析 368
16.1.2制作步骤 368
16.1.3案例总结 378