《CSS3+DIV网页样式与布局案例课堂》是2014年清华大学出版社出版的图书。
基本介绍
- 书名：CSS3+DIV网页样式与布局案例课堂
- ISBN：9787302386155
- 定价：65元
- 出版社：清华大学出版社
- 装帧：平装
- 印次：1-1
- 印刷日期：2014-12-18
内容简介
本书作者根据自己在长期教学中积累的丰富的网页设计教学经验，完整、详尽地介绍了CSS 3 + DIV网页样式与布局的技术。
目录
第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.1head部分 6
1.3.2body部分 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综合示例——在PhotoshopCS6中构建网页结构 15
1.7上机练习——使用Photoshop製作纵嚮导航条 16
1.8专家答疑 18
第2章网页实现技术——HTML5 21
2.1HTML5的基本概念 22
2.1.1HTML5简介 22
2.1.2HTML5档案的基本结构 22
2.1.3认识HTML5标记 23
2.2HTML5档案的编写方法 23
2.2.1使用记事本手工编写HTML档案 24
2.2.2使用DreamweaverCS6编写HTML档案 24
2.3HTML5的基本标记 27
2.3.1字元标记 27
2.3.2超级连结标记 28
2.3.3列表标记 30
2.3.4製作纯文本网页 31
2.4HTML5的段落和图片标记 32
2.4.1常用段落和图片标记 32
2.4.2文字和图片混合排版 33
2.5HTML5的表单标记 34
2.5.1常用的表单控制项 34
2.5.2多行文本标记和下拉列表 36
2.5.3用户注册页面 37
2.6HTML5的表格标记 38
2.6.1表格标记 38
2.6.2製作季度报表 40
2.7综合示例——製作网站首页 41
2.8上机练习——简单的HTML5网页 45
2.9专家答疑 45
第3章CSS3样式入门 47
3.1CSS概述 48
3.1.1CSS的功能 48
3.1.2浏览器与CSS 48
3.1.3CSS的发展历史 49
3.2CSS3的常用单位 49
3.2.1颜色单位 49
3.2.2长度单位 53
3.3编辑和浏览CSS 54
3.3.1手工编写CSS 54
3.3.2用Dreamweaver编写CSS 55
3.4在HTML5中调用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.1CSS基础语法 68
4.1.1CSS构造规则 68
4.1.2CSS的注释 68
4.2CSS的常用选择器 69
4.2.1标籤选择器 69
4.2.2类选择器 70
4.2.3ID选择器 71
4.2.4选择器的声明 71
4.3综合示例——製作炫彩网站Logo 72
4.4专家答疑 75
第5章CSS3的高级特性 77
5.1複合选择器 78
5.1.1全局选择器 78
5.1.2“交集”选择器 79
5.1.3“并集”选择器 79
5.1.4继承(后代)选择器 80
5.2CSS3新增的选择器 81
5.2.1属性选择器 81
5.2.2结构伪类选择器 83
5.2.3UI元素状态伪类选择器 84
5.2.4伪类选择器 86
5.3CSS的继承特性 87
5.3.1继承关係 87
5.3.2CSS继承的运用 88
5.4CSS的层叠特性 89
5.4.1同一选择器被多次定义的处理 89
5.4.2同一标籤运用不同类型选择器的处理 90
5.5综合示例——製作新闻选单 91
5.6专家答疑 94
第6章使用CSS3控制网页字型与段落的样式 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.2CSS3中新增的文本高级样式 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使用CSS3中的max-width和max-height缩放图片 124
7.1.3使用CSS3中的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.2CSS3中新增的控制网页背景的属性 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.4CSS3中新增的框线圆角效果 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章使用CSS3美化网页浏览效果 167
9.1使用CSS3美化超连结 168
9.1.1改变超级连结的基本样式 168
9.1.2设定带有提示信息的超级连结 169
9.1.3设定超级连结的背景图 170
9.1.4设定超级连结的按钮效果 171
9.2使用CSS3美化滑鼠特效 172
9.2.1使用CSS3控制滑鼠箭头 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章使用CSS3滤镜美化网页元素 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.13X-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.2div元素和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.3CSS3新增的弹性盒模型 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定义DIV 270
14.1.1什幺是DIV 270
14.1.2创建DIV 270
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.3z-index空间定位 280
14.4新增的CSS3多列布局 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.1CSS的排版观念 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章CSS3和JavaScript的搭配套用 335
17.1JavaScript的语法基础 336
17.1.1什幺是JavaScript 336
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.2Dreamweaver 348
17.3JavaScript在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.4JavaScript与CSS3的结合使用 354
17.4.1设定动态内容 354
17.4.2改变动态样式 355
17.4.3动态定位网页元素 357
17.4.4设定网页元素的显示与隐藏 359
17.5HTML5、CSS3和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.1XML语法基础 376
18.1.1XML的基本套用 376
18.1.2XML文档的组成和声明 377
18.1.3XML元素介绍 379
18.2用CSS修饰XML档案 381
18.2.1XML使用CSS 381
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.1Ajax概述 396
19.1.1什幺是Ajax 396
19.1.2Ajax的关键元素 398
19.1.3CSS在Ajax套用中的
地位 399
19.2Ajax快速入门 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.1Logo与导航选单 479
23.2.2Banner区 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.1Logo与导航区 489
24.2.2Banner与资讯区 491
24.2.3产品类别区域 492
24.2.4页脚区域 494