别具光芒：CSS网页布局案例剖析

第1章　从基础开始　1
1.1　(X)HTML与CSS　2
1.1.1　DOCTYPE(文档类型)的含义与选择　2
1.1.2　XHTML与HTML的重要区别　3
1.1.3　CSS的基本思想　3
1.1.4　CSS的引入　5
1.1.5　浏览器与CSS　5
1.2　基本CSS选择器　6
1.2.1　理解CSS选择器的思想　6
1.2.2　标记选择器　7
1.2.3　类别选择器　8
1.2.4　ID选择器　9
1.3　在HTML中引入CSS的方法　10
1.3.1　行内样式　10
1.3.2　内嵌式　11
1.3.3　外部样式表　11
1.3.4　链接式　12
1.3.5　各种方式的优先级问题　12
1.4　动手体验CSS　14
1.4.1　从零开始　15
1.4.2　使用CSS设置标题　15
1.4.3　控制图片　16
1.4.4　设置正文　16
1.4.5　设置整体页面　17
1.4.6　对段落分别进行设置　17
1.4.7　兼容性检查　18
1.4.8　CSS的注释　19
1.5　网页使用的编辑软件　20
1.5.1　可视化网页制作软件的优点　20
1.5.2　可视化软件的局限性　21
1.5.3　善于使用代码视图的功能　22
1.6　CSS的复合选择器　24
1.6.1　“交集”选择器　24
1.6.2　“并集”选择器　25
1.6.3　“后代”选择器　27
1.7　CSS的继承特性　29
1.7.1　继承关系　29
1.7.2　CSS继承的运用　31
1.8　CSS的层叠特性　33
1.9　本章小结　35
第2章　摄影师个人网站布局　36
2.1　案例描述　37
2.2　内容分析　38
2.3　HTML结构设计　40
2.4　原型设计　41
2.5　页面方案设计　43
2.6　布局设计　43
2.7　CSS技术准备——盒子模型　44
2.8　设置页面的整体背景　46
2.9　制作照片展示区域　48
2.10　设置网页标题的图像替换　50
2.11　CSS技术准备——定位　52
2.11.1　理解标准文档流　52
2.11.2　认识定位属性　53
2.11.3　绝对定位　54
2.12　设置网页标题的位置　55
2.13　设置网页文本内容　56
2.14　本章小结　58
第3章　生物研究中心网站布局　59
3.1　案例描述　60
3.2　内容分析　61
3.3　原型设计　62
3.4　页面方案设计　63
3.5　CSS技术准备——盒子的浮动　63
3.5.1　设置浮动　64
3.5.2　浮动的方向　66
3.5.3　使用clear属性清除浮动的影响　67
3.5.4　扩展盒子的高度　69
3.6　布局设计　70
3.7　CSS技术准备——在CSS中设置边框　70
3.7.1　对不同的边框设置不同的属性值　71
3.7.2　在一行中同时设置边框的宽度、颜色和样式　71
3.7.3　对一条边框设置与其他边框不同的属性　72
3.7.4　同时指定一条边框的一种属性　72
3.8　制作页头部分　72
3.9　制作主体部分　75
3.9.1　主体的左侧部分　76
3.9.2　主要内容区　79
3.10　CSS技术扩展——扩充布局　82
3.11　本章小结　85
第4章　教育公司网站布局　 86
4.1　两列布局　87
4.2　案例描述　89
4.3　内容分析　90
4.4　原型设计　91
4.5　CSS技术准备——在CSS中使用背景图像　92
4.5.1　设置平铺方式　92
4.5.2　设置背景图像的位置　94
4.5.3　背景的简写　96
4.5.4　图片的固定设置　97
4.6　制作标题图像　97
4.7　CS3技术准备——实现圆角设计　99
4.8　制作页头部分　100
4.8.1　搭建页头部分的HTML结构　100
4.8.2　页面标题的图像替换　102
4.8.3　顶部菜单　102
4.8.4　主菜单　103
4.8.5　搜索框　104
4.8.6　页头部分的圆角框　105
4.9　制作主体部分　107
4.9.1　结构分析　107
4.9.2　“面包屑”导航　109
4.9.3　设置正文标题　109
4.9.4　设置页脚　110
4.9.5　添加页面内容　110
4.10　本章小结　112
第5章　网上书店布局　 113
5.1　案例描述　114
5.2　内容分析　116
5.3　HTML结构设计　118
5.4　原型设计　121
5.5　页面方案设计　122
5.5.1　配色的技巧　123
5.5.2　切片的技巧　125
5.6　使用滑动门技术制作导航菜单　128
5.7　制作主体部分　131
5.7.1　整体样式设计　131
5.7.2　内容部分的结构分析　131
5.7.3　设置右侧的主要内容列　133
5.7.4　制作左边栏　136
5.8　总结CSS布局的优点　139
5.9　制作可以适应变化宽度的圆角框　140
5.10　CSS技术扩展——从“网页”到“网站”　143
5.10.1　历史回顾　143
5.10.2　不完善的办法　144
5.10.3　服务器出场　144
5.10.4　CMS出现　144
5.10.5　具体操作　144
5.10.6　CMS的弊端　145
5.11　本章小结　145
第6章　汽车服务公司网站布局　146
6.1　案例描述　147
6.2　内容分析　148
6.3　HTML结构设计　151
6.4　原型设计　153
6.5　页面方案设计与切图　154
6.6　页面布局　155
6.6.1　切片　156
6.6.2　CSS技术准备——行内元素与块级元素　157
6.6.3　布局　160
6.6.4　制作顶部菜单　160
6.6.5　制作标题图像　162
6.6.6　制作主体部分　162
6.7　实现超链接特效　164
6.7.1　技术准备——设置超链接的CSS样式　165
6.7.2　超链接效果　168
6.8　兼容性检查　169
6.9　本章小结　170
第7章　橘汁仙剑游戏网站(静态)布局　 171
7.1　构思设计　172
7.1.1　站点分析定位　172
7.1.2　学习考察同类站点　173
7.1.3　构思规划站点　176
7.2　切片制作和生成　178
7.2.1　切片的制作　178
7.2.2　切片的生成　180
7.3　页面制作　180
7.3.1　整体框架的构建　181
7.3.2　头部的制作　182
7.3.3　首页左侧信息栏的制作　185
7.3.4　首页中部内容栏的制作　187
7.3.5　在页面右侧添加百度搜索　188
7.3.6　在页面右侧添加广告位　192
7.3.7　分类目录中导航的制作　192
7.3.8　文章浏览区域的制作　194
7.3.9　页脚的制作　197
7.3.10　用户面板的制作　199
7.4　本章小结　202
第8章　橘汁仙剑游戏网站(动态)布局　 203
8.1　SupeSite和Discuz!系统简介　204
8.2　系统安装　205
8.3　使用SupeSite系统　206
8.3.1　登录SupeSite后台设置　206
8.3.2　基本设置　208
8.3.3　资讯的发布和管理　210
8.3.4　资讯等级审核　212
8.3.5　资讯自定义字段　213
8.3.6　其他设置　215
8.4　制作SupeSite模板　215
8.4.1　SupeSite模板系统　215
8.4.2　选择需要制作的模板　216
8.4.3　制作前的准备　218
8.4.4　首页头部信息的制作　220
8.4.5　首页头部导航的制作　221
8.4.6　体验SupeSite模块设置　223
8.4.7　在头部导航中加入资讯分类　226
8.4.8　首页主体内容的制作　228
8.4.9　深入探究SupeSite模块系统　230
8.4.10　首页页脚的制作　232
8.4.11　站点头部及页脚文件的制作　234
8.4.12　分类目录页的制作　236
8.4.13　文章浏览页面的制作　237
8.4.14　用户面板的制作　239
8.4.15　SupeSite模板制作小结　241
8.5　模块系统的高级应用　242
8.5.1　SupeSite模块系统的语法格式　242
8.5.2　条件判断语句　244
8.5.3　自定义广告显示函数　246
8.6　完成测试　247
8.7　Discuz!模板系统简介　247
8.8　本章小结　250