《DIV+CSS网页样式与布局完全学习手册》是2014年清华大学出版社出版的图书。
基本介绍
- 书名：DIV+CSS网页样式与布局完全学习手册
- ISBN：9787302333630
- 定价：59元
- 出版时间：2014-6-17
- 装帧：平装
图书简介
本书系统地讲解了DIV + CSS 样式表的基础理论和实际运用技巧，并通过大量实例对CSS 进行深入浅出的分析，主要包括CSS 的基本语法和概念，设定文字、图片、背景、表格、表单和选单等网页元素的方法以及CSS 滤镜的使用，并着重讲解了如何用CSS+DIV 进行网页布局。本书注重实际操作，使读者在学习CSS 套用技术的同时，掌握CSS+DIV 的精髓。
目录
第1篇网页製作基础........................1
第1章网页基础和网站开发流程.................1
1.1 认识网页与网站.............................................2
1.1.1 什幺是网站.........................................2
1.1.2 静态网页和动态网页..........................2
1.1.3 网页基本构成元素..............................3
1.2 网站类型........................................................5
1.2.1 个人网站............................................6
1.2.2 电子商务网站.....................................6
1.2.3 娱乐游戏类网站..................................6
1.2.4 时尚类网站.........................................7
1.2.5 新闻资讯类网站..................................7
1.2.6 门户类网站.........................................8
1.3 开发网站需要的技术......................................8
1.3.1 需要HTML档案...................................8
1.3.2 需要DIV来布局...................................9
1.3.3 需要CSS来定义样式.........................10
1.3.4 需要JavaScript.................................11
1.3.5 需要动态网页开发语言.....................11
1.4 网站开发流程...............................................12
1.4.1 确定网站目标...................................12
1.4.2 规划站点结构...................................12
1.4.3 收集素材..........................................13
1.4.4 美工设计出页面整体效果.................13
1.4.5 切割和最佳化页面................................13
1.4.6 添加网页后台程式............................14
1.4.7 申请域名..........................................15
1.4.8 申请伺服器空间................................16
1.4.9 测试并上传网站................................17
1.4.10 网站最佳化........................................17
1.4.11 网站维护........................................18
1.4.12 网站的推广.....................................18
第2章Web标準........................................19
2.1 表格布局与CSS布局....................................20
2.1.1 表格布局的优点................................20
2.1.2 表格布局的缺点................................20
2.1.3 表格布局与CSS布局实例.................20
2.2 了解Web标準...............................................22
2.2.1 什幺是Web标準...............................22
2.2.2 为什幺要建立Web标準.....................22
2.2.3 W3C发布的标準...............................23
2.2.4 Web标準的优势...............................24
2.3 Web标準三剑客...........................................25
2.3.1 内容、结构、表现和行为.................25
2.3.2 如何改善现有网站............................25
第3章HTML和XHTML基础......................27
3.1 HTML文档的基本结构..................................28
3.1.1 HTML档案结构.................................28
3.1.2 编写HTML档案注意事项..................29
3.1.3 HTML文档中的注释..........................29
3.2 编辑HTML网页正文.....................................29
3.2.1 输入网页标题...................................30
3.2.2 划分正文段落...................................30
3.2.3 设定文本格式...................................31
3.3 在HTML网页中插入图片..............................32
3.3.1 插入网页图片...................................33
3.3.2 在网页中加入水平线........................34
3.4 在HTML网页中使用列表..............................35
3.4.1 使用编号列表...................................35
3.4.2 使用无序列表...................................36
3.5 在HTML网页中使用表格..............................37
3.5.1 认识表格标记...................................37
3.5.2 设定表格的整体属性........................38
3.6 建立超连结...................................................39
3.6.1 连结标籤..........................................39
3.6.2 创建邮件连结...................................40
3.6.3 锚点连结..........................................40
3.7 XHTML简介.................................................41
3.7.1 什幺是XHTML..................................41
3.7.2 为什幺要升级到XHTML....................41
3.8 XHTML页面结构..........................................42
3.9 XHTML与HTML的区别................................43
第2篇CSS控制样式基础...............46
第4章CSS基础........................................46
4.1 CSS介绍......................................................47
4.1.1 CSS基本概念...................................47
4.1.2 CSS的优点.......................................47
4.1.3 CSS功能...........................................48
4.1.4 浏览器与CSS...................................49
4.1.5 CSS发展历史...................................49
4.2 在HTML5中使用CSS的方法.......................50
4.2.1 内嵌样式..........................................50
4.2.2 行内样式..........................................50
4.2.3 连结外部样式表................................51
4.2.4 导入样式..........................................52
4.2.5 优先权问题.......................................52
Ⅳ2
DIV+CSS网页样式与布局完全学习手册
4.3 使用Dreamweaver设定CSS样式.................52
4.3.1 设定文本样式...................................53
4.3.2 设定背景样式...................................54
4.3.3 设定区块样式...................................55
4.3.4 设定方框样式...................................56
4.3.5 设定框线样式...................................57
4.3.6 设定列表样式...................................59
4.3.7 设定定位样式...................................60
4.3.8 设定扩展样式...................................61
4.3.9 过渡样式的定义................................61
4.4 选择器类型...................................................62
4.4.1 标籤选择器.......................................62
4.4.2 类选择器..........................................62
4.4.3 ID选择器..........................................63
4.5 编辑和浏览CSS...........................................64
4.5.1 手工编写CSS...................................64
4.5.2 Dreamweaver编写CSS....................65
4.6 综合实战——对网页添加CSS样式..............65
第5章使用CSS设计网页文本和段落
样式................................................68
5.1 通过CSS控制文本样式................................69
5.1.1 字型font-family................................69
5.1.2 字号font-size...................................70
5.1.3 加粗字型font-weight.......................71
5.1.4 字型风格font-style...........................72
5.1.5 小写字母转为大写字母font-variant...72
5.2 通过CSS控制段落格式................................74
5.2.1 单词间隔word-spacing...................74
5.2.2 字元间隔letter-spacing...................74
5.2.3 文字修饰text-decoration.................75
5.2.4 垂直对齐方式vertial-align...............76
5.2.5 文本转换text-transform...................77
5.2.6 水平对齐方式text-align...................77
5.2.7 文本缩进text-indent........................78
5.2.8 文本行高line-height........................79
5.2.9 处理空白white-space......................80
5.3 综合实战——CSS字型样式综合演练...........81
第6章通过CSS定义具有特色的
超连结效果.....................................83
6.1 超连结基础...................................................84
6.1.1 超连结的基本概念............................84
6.1.2 使用页面属性设定超连结.................84
6.2 连结标记......................................................85
6.2.1 a:link................................................85
6.2.2 a:visited...........................................86
6.2.3 a:active............................................87
6.2.4 a:hover.............................................88
6.3 定义丰富的超连结特效.................................89
6.3.1 背景色变换连结................................89
6.3.2 多姿多彩的下划线连结.....................90
6.3.3 图像翻转连结...................................91
6.3.4 框线变换连结...................................93
6.4 综合实战......................................................95
6.4.1 实战——使用CSS实现滑鼠
指针形状改变...................................95
6.4.2 实战——为超连结文字加上
质感框线...........................................96
6.4.3 实战——滑鼠指针移到连结文字上时
改变文字大小或颜色........................99
6.4.4 实战——给超连结添加提示文字....101
第7章用CSS设计图像和背景.................106
7.1 设定网页的背景.........................................107
7.1.1 背景颜色........................................107
7.1.2 背景图片........................................108
7.2 设定背景图片的样式..................................109
7.2.1 背景图片重複.................................109
7.2.2 背景图片附属档案.................................110
7.2.3 背景定位........................................110
7.3 设定网页图片的样式..................................112
7.3.1 设定图片框线.................................113
7.3.2 图文混合排版.................................115
7.4 套用CSS过滤器设计图像特效....................116
7.4.1 控制图像和背景的透明度(Alpha).....116
7.4.2 灰度(Gray).....................................117
7.4.3 反色(Invert)....................................118
7.5 综合实战....................................................118
7.5.1 实战——给图片添加框线...............118
7.5.2 实战——图文绕排效果...................120
7.5.3 实战——文字与图片上下垂直居中....121
7.5.4 实战——CSS实现背景半透明效果....122
7.5.5 实战——可控的左右滚动图片........123
第3篇CSS控制样式进阶.............127
第8章设计更富灵活性的表格.................127
8.1 表格基础....................................................128
Ⅴ3
目录
8.2 用CSS设定表格的样式..............................129
8.2.1 设定表格的颜色..............................129
8.2.2 设定表格的框线样式......................130
8.2.3 设定表格的阴影..............................131
8.2.4 设定表格的渐变背景......................132
8.2.5 製作条纹数据表格样式...................133
8.3 综合实战....................................................137
8.3.1 实战——製作变换背景色的表格....137
8.3.2 实战——用CSS製作漂亮的彩色背景
表格...............................................138
8.3.3 实战——製作阴影表格...................140
8.3.4 实战——製作圆角表格...................140
第9章设计更酷更炫的表单.....................143
9.1 网页中的表单.............................................144
9.1.1 表单对象........................................144
9.1.2 输入域标籤<input>........................144
9.1.3 文本域标籤<textarea>...................145
9.1.4 选择域标籤<select>和<option>....146
9.1.5 设定框线样式.................................147
9.2 通过CSS设定各元素的外观.......................149
9.2.1 设定背景样式.................................149
9.2.2 设定输入文本的样式......................151
9.2.3 设计文本框的样式..........................152
9.3 综合实战....................................................154
9.3.1 实战——改变按钮的背景颜色
和文字颜色.....................................154
9.3.2 实战——设计文本框中的
文字样式........................................157
9.3.3 实战——製作透明的表单背景........157
9.3.4 实战——为下拉列表变换颜色........159
9.3.5 实战——CSS3製作的3D效果登录
表单...............................................160
第10章用CSS製作实用的选单和
网站导航....................................163
10.1 列表概述..................................................164
10.2 列表样式控制...........................................164
10.2.1 ul无序列表..................................164
10.2.2 ol有序列表..................................165
10.2.3 dl定义列表..................................166
10.2.4 更改列表项目样式......................167
10.3 横排导航..................................................168
10.3.1 文本导航.....................................168
10.3.2 标籤式导航.................................170
10.4 竖排导航..................................................171
10.5 综合实战..................................................173
10.5.1 实战——实现背景变换的
导航选单......................................173
10.5.2 实战——利用CSS製作横嚮导航....174
10.5.3 实战——製作网页下拉列表........175
10.5.4 实战——用背景图片实现CSS柱状
图表...........................................177
第11章CSS中的滤镜.............................179
11.1 滤镜概述..................................................180
11.2 动感模糊blur............................................180
11.3 对颜色进行透明处理chroma....................181
11.4 设定阴影DropShadow.............................182
11.5 对象的翻转flipH、flipV.............................183
11.6 发光效果glow...........................................183
11.7 X光片效果xray.........................................184
11.8 波形滤镜wave..........................................185
11.9 遮罩效果mask..........................................186
第4篇CSS布局...........................187
第12章CSS盒子模型与定位..................187
12.1 “盒子”与“模型”的概念探究..............188
12.2 border......................................................188
12.2.1 框线样式：border-style............189
12.2.2 框线颜色：border-color............192
12.2.3 框线宽度：border-width...........193
12.2.4 透明框线.....................................194
12.3 padding....................................................195
12.4 margin......................................................197
12.5 盒子的浮动float........................................199
12.6 盒子的定位...............................................201
12.6.1 绝对定位：Absolute...................201
12.6.2 固定定位：fixed.........................203
12.6.3 相对定位：relative.....................204
12.6.4 z-index空间位置........................206
第13章CSS+DIV布局方式.....................207
13.1 CSS布局模型...........................................208
13.1.1 流动布局模型.............................208
4
DIV+CSS网页样式与布局完全学习手册
Ⅵ
13.1.2 浮动布局模型.............................209
13.1.3 层布局模型.................................212
13.1.4 高度自适应.................................214
13.2 CSS布局理念...........................................215
13.2.1 将页面用div分块.........................215
13.2.2 设计各块的位置..........................216
13.2.3 用CSS定位.................................216
13.3 固定宽度布局...........................................217
13.3.1 一列固定宽度.............................217
13.3.2 两列固定宽度.............................218
13.3.3 圆角框........................................220
13.4 可变宽度布局...........................................221
13.4.1 一列自适应.................................221
13.4.2 两列宽度自适应..........................222
13.4.3 两列右列宽度自适应...................223
13.4.4 三列浮动中间宽度自适应...........224
13.4.5 三行二列居中高度自适应布局....225
第14章解决CSS布局中的常见问题........227
14.1 关于水平和垂直居中对齐的问题..............228
14.1.1 让Div中的内容垂直居中.............228
14.1.2 让Div中的内容水平居中.............231
14.2 解决浏览器不兼容的问题.........................234
14.2.1 margin加倍的问题......................234
14.2.2 浮动IE产生的双倍距离...............234
14.2.3 DIV浮动IE文本出现3px间距的问题
（bug）......................................235
14.2.4 高度不能自适应的问题...............236
14.2.5 垂直居中对齐文本与文本输入框
的问题........................................237
14.2.6 firefox下如何使连续长栏位自动
换行............................................238
第15章HTML5高级程式设计.................239
15.1 HTML5简介.............................................240
15.1.1 认识HTML5...............................240
15.1.2 HTML5的特点............................241
15.1.3 HTML5中的标记方法.................242
15.1.4 HTML5基本布局........................242
15.2 HTML5结构元素.....................................245
15.2.1header........................................245
15.2.2 nav.............................................246
15.2.3 footer..........................................247
15.2.4 article.........................................248
15.2.5 section.......................................249
15.2.6 aside..........................................250
15.2.7 address......................................250
15.3 新增的嵌入多媒体元素与互动性元素.......251
15.3.1 video元素...................................251
15.3.2 audio元素...................................251
15.3.3 embed元素................................252
15.4 新增的input元素的类型............................252
15.4.1 url类型........................................252
15.4.2 email类型...................................252
15.4.3 date类型.....................................253
15.4.4 time类型.....................................253
15.4.5 datetime类型..............................253
15.5 创建简单的HTML5页面...........................254
15.5.1 HTML5文档类型........................254
15.5.2 字元编码.....................................254
15.5.3 页面语言.....................................254
15.5.4 添加样式表.................................254
15.5.5 添加JavaScript...........................255
15.5.6 测试结果.....................................255
第16章CSS3指南.................................256
16.1 预览激动人心的CSS3.............................257
16.1.1 CSS3的发展历史.......................257
16.1.2 CSS3新增特性...........................257
16.1.3 主流浏览器对CSS3的支持.........261
16.2 使用CSS3实现圆角表格.........................261
16.3 使用CSS3製作图片滚动选单..................263
16.4 使用CSS3製作文字立体效果..................266
16.5 使用CSS3製作多彩的网页图片库...........267
16.6 使用CSS3实现的幻灯图片效果...............269
第17章CSS与JavaScript的综合套用.....275
17.1 JavaScript简介.........................................276
17.1.1 什幺是JavaScript.......................276
17.1.2 JavaScript特点...........................276
17.2 JavaScript的基本语法..............................277
17.2.1 常量和变数.................................277
17.2.2 表达式和运算符..........................278
17.2.3 基本语句.....................................279
17.2.4 函式............................................283
17.3 JavaScript事件.........................................284
17.4 JavaScript内部对象.................................293
17.4.1 navigator对象.............................293
17.4.2 document对象............................294
5
目录
Ⅶ
17.4.3 window对象................................295
17.4.4 location对象...............................297
17.4.5 history对象.................................297
17.5 综合实战..................................................298
17.5.1 实战——随滑鼠移动的图像........298
17.5.2 实战——製作图片循环隐现效果....300
17.5.3 实战——製作幻灯片效果...........302
17.5.4 实战——製作灯光效果..............304
17.5.5 实战——可以任意选择网页中的
文字颜色、背景颜色、字号.......305
第5篇CSS布局综合实例.............310
第18章设计富有个性的个人网站...........310
18.1 个人网站设计概述....................................311
18.2 个人网站色彩搭配和结构设计..................312
18.3 网站前期策划...........................................312
18.3.1 确定网站主题.............................312
18.3.2 确定目录结构.............................312
18.3.3 网站蓝图的规划..........................313
18.4 製作网站主页...........................................314
18.4.1 导入外部CSS..............................314
18.4.2 製作顶部档案.............................316
18.4.3 製作个人简介.............................318
18.4.4 製作个人相册.............................319
18.4.5 製作最新动态.............................321
18.4.6 製作底部档案.............................323
第19章公司宣传网站的布局...................325
19.1 企业网站设计概述....................................326
19.2 分析架构..................................................327
19.2.1 设计分析.....................................327
19.2.2 排版构架.....................................327
19.3 各模组设计...............................................328
19.3.1 布局设计.....................................328
19.3.2 页面的通用规则..........................329
19.3.3 製作#header对象部分................332
19.3.4 製作导航#nav对象部分..............334
19.3.5 製作公司介绍和图片展示部分....335
19.3.6 製作“我们的服务”部分...........338
19.3.7 製作#aside对象部分...................341
19.3.8 製作底部版权资讯部分...............344
第20章旅游网站的设计..........................346
20.1 旅游网站设计概述....................................347
20.1.1 旅游网站分类.............................347
20.1.2 页面配色分析.............................348
20.1.3 排版构架.....................................349
20.2 各部分设计...............................................350
20.2.1 页面的通用规则..........................350
20.2.2 製作网站导航部分......................351
20.2.3 製作header右侧部分..................354
20.2.4 製作欢迎部分.............................363
20.2.5 製作景点新闻部分......................368
20.2.6 製作景点介绍部分......................373
20.2.7 製作景点展示部分......................377
20.2.8 製作底部着作权部分......................385
第21章购物网站布局.............................388
21.1 购物网站设计概述....................................389
21.1.1 购物网站概念.............................389
21.1.2 购物网站的功能要点...................390
21.2 购物网站设计分析....................................391
21.2.1 大信息量的页面..........................391
21.2.2 页面结构设计合理......................391
21.2.3 完善的分类体系..........................392
21.2.4 商品图片的使用..........................392
21.3 购物网站配色与架构................................393
21.3.1 购物网站配色.............................393
21.3.2 排版构架.....................................393
21.4 各部分设计...............................................394
21.4.1 定义页面通用规则......................394
21.4.2 製作网站header部分..................395
21.4.3 製作网站通栏广告部分...............403
21.4.4 製作网站左侧分类部分...............404
21.4.5 製作轮换显示的横幅广告图片....406
21.4.6 製作最新上架部分......................407
第6篇附录...................................414
附录1 CSS属性一览表.....................................414
附录2 HTML常用标籤......................................418
