Div+CSS网站布局应用教程

DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中的通过表格布局定位的方式不同，它可以实现网页内容与表现相分离，这种布局方法越来越普遍、也越来越受设计师的喜爱。
本书是一本介绍DIV+CSS网站建设的经典制作，系统地介绍了CSS样式的基础理论和实际应用技术，配合大量精美的网页制作案例，讲解了有关使用DIV+CSS布局制作网页的相关知识和技巧。让读者能够清晰明了地理解DIV+CSS布局制作网页的相关技术内容，从而达到学以致用的目的。
本书共分为11章，从初学者的角度出发，全面讲解DIV+CSS布局制作网页的相关知识，靠前章  网页和网站的基础知识，第2章  HTML和HTML5基础，第3章  CSS样式基础，第4章  DIV+CSS网页布局，第5章  使用CSS样式设置网页文本，第6章  设置页面背景图像，第7章  使用CSS样式设置图片效果，第8章  使用CSS样式设置列表效果，第9章  使用CSS样式设置超链接效果，靠前0章  使用CSS样式设置表单和表格效果，靠前1章  商业网站实战。
本书适合网页制作初学者和爱好者自学，并可帮助从业人员提高技术水平，同时也是计算机培训班和各院校相关专业理想的教辅用书。
本书配套光盘中提供了所有实例的源文件和素材，以及相关的视频教程。

张晓景，Adobe专家组成员，设计师，畅销书作者，编写出版过不少计算辅助设计方面的教材，的到广大院校和读者的一致好评。

第1章网页和网站的基础知识
1.1认识网页
1.1.1网页和网站
1.1.2网页的基本构成元素
1.2如何设计网页
1.2.1什么是网页设计
1.2.2网页设计的特点
1.2.3网页设计的相关术语
1.3表格布局与Div+CSS布局
1.3.1表格布局的特点
1.3.2冗余的嵌套表格和混乱的结构
1.3.3Div+CSS布局的特点
1.3.4Div+CSS布局的优势
1.4了解Web标准
1.4.1Web标准是什么
1.4.2什么是W3C
1.4.3结构、表现、行为和内容
1.4.4遵循Web标准的好处
1.5本章小结
1.6课后测试题
第2章HTML和HTML5基础
2.1HTML基础
2.1.1HTML概述
2.1.2HTML的主要功能
2.1.3HTML的基本语法
2.1.4HTML中的3种标签形式
2.2HTML标签
2.2.1基本标签
2.2.2文本标签
2.2.3格式标签
2.2.4超链接标签
2.2.5图像标签
2.2.6表格标签
2.2.7区块标签
2.3HTML5基础
2.3.1了解HTML5
2.3.2HTML5的简化操作
2.3.3HTML5中的新增标签
2.3.4HTML5中废弃的标签
2.3.5HTML5的优势
2.4HTML5的应用
2.4.1canvas标签
自测1：在网页中实现圆形图像效果
2.4.2audio标签
自测2：在网页中嵌入音频播放
2.4.3video标签
自测3：在网页中嵌入视频播放
2.5本章小结
2.6课后测试题
第3章CSS样式基础
3.1CSS概述
3.1.1CSS的特点
3.1.2CSS的类型
3.1.3CSS的基本语法
3.1.4CSS样式的构成
3.24种使用CSS样式的方法
3.2.1内联样式
自测1：使用style属性添加内联样式
3.2.2内部样式
自测2：使用内部CSS样式
3.2.3外部样式表文件
自测3：链接外部CSS样式表文件
3.2.4导入样式表文件
自测4：导入外部CSS样式表文件
3.3CSS选择器
3.3.1通配选择器
自测5：控制页面边距
3.3.2标签选择器
自测6：控制网页整体效果
3.3.3ID选择器
自测7：控制网页中的元素
3.3.4类选择器
自测8：创建并应用类CSS样式
3.3.5伪类和伪对象选择器
自测9：控制网页中超链接文字效果
3.3.6群选择器
自测10：制作产品列表页面
3.3.7派生选择器
自测11：控制所包含元素的效果
3.4CSS样式中的颜色设置和单位
3.4.1CSS样式中的多种颜色设置方式
3.4.2CSS样式中的绝对单位
3.4.3CSS样式中的相对单位
3.5本章小结
3.6课后测试题
第4章Div+CSS网页布局
4.1定义Div
4.1.1什么是Div
4.1.2插入Div
4.2id与class
4.2.1什么是id
4.2.2什么时候使用id
4.2.3什么是class
4.2.4什么时候使用class
4.3CSS盒模型
4.3.1认识CSS盒模型
4.3.2CSS盒模型的要点
4.3.3margin（边距）属性
自测1：控制网页元素外边距
4.3.4border（边框）属性
自测2：为网页元素设置边框效果
4.3.5padding（填充）属性
自测3：设置网页元素的填充
4.3.6content（内容）部分
4.3.7理解空白边叠加
自测4：控制网页元素之间的间距
4.4网页元素定位
4.4.1理解position属性
4.4.2relative（相对）定位方式
自测5：实现网页元素的相对定位
4.4.3absolute（绝对）定位方式
自测6：实现网页元素的绝对定位
4.4.4fixed（固定）定位方式
自测7：设置网页中固定的定位方式
4.4.5float（浮动）定位方式
自测8：制作图像列表
4.5常用Div+CSS布局方式
4.5.1居中的布局
4.5.2浮动的布局
4.5.3高度自适应的方法
4.6本章小结
4.7课后测试题
第5章使用CSS样式设置网页文本
5.1使用CSS样式控制文本
5.1.1font-family属性
自测1：设置网页中的字体
5.1.2font-size属性
自测2：设置网页中的字体大小
5.1.3color属性
自测3：设置网页中的字体颜色
5.1.4font-weight属性
自测4：设置网页中的字体加粗
5.1.5font-style属性
自测5：设置网页中的字体倾斜
5.1.6text-transform属性
自测6：设置网页中英文大小写
5.1.7text-decoration属性
自测7：为网页中的文字添加修饰
5.2使用CSS样式控制段落
5.2.1letter-spacing属性
自测8：设置文本字符间距
5.2.2line-height属性
自测9：设置文本行间距
5.2.3text-indent属性
自测10：设置段落文本首行缩进
5.2.4text-align属性
自测11：设置文本水平对齐
5.2.5vertical-align属性
自测12：设置文本垂直对齐
5.2.6段落首字下沉
自测13：实现段落文本首字下沉效果
5.3实现特殊的文本效果
5.3.1Web字体
自测14：在网页中实现特殊字体效果
5.3.2CSS类选区
自测15：为文字同时运用多个类CSS样式
5.4CSS3.0新增文本控制属性
5.4.1控制文本换行word-wrap属性
5.4.2文本溢出处理text-overflow属性
5.4.3文字阴影text-shadow属性
自测16：实现网页文本的阴影效果
5.5本章小结
5.6课后测试题
第6章设置页面背景效果
6.1使用CSS样式设置背景颜色
6.1.1background-color属性
自测1：设置网页背景颜色
6.1.2为网页元素设置不同的背景颜色
自测2：为网页元素设置不同的背景颜色
6.2CSS3.0新增颜色设置方式
6.2.1HSL颜色方式
6.2.2HSLA颜色方式
6.2.3RGBA颜色方式
自测3：使用RGBA颜色方式设置半透明背景色
6.3使用CSS样式设置背景图像
6.3.1background-image属性
自测4：为网页设置背景图像
6.3.2background-repeat属性
自测5：设置背景图像的重复方式
6.3.3background-attachment属性
自测6：实现固定不动的背景图像
6.3.4background-position属性
自测7：控制背景图像的位置
6.4CSS3.0新增背景控制属性
6.4.1背景图像显示区域background-origin属性
6.4.2背景图像裁剪区域background-clip属性
6.4.3背景图像大小background-size属性
自测8：设置网页中背景图像的大小
6.5本章小结
6.6课后测试题
第7章使用CSS样式设置图片效果
7.1使用CSS样式设置图片
7.1.1控制图片缩放
自测1：实现自适应浏览器窗口宽度的图片
7.1.2图片水平对齐
自测2：设置网页中图片水平对齐效果
7.1.3图片垂直对齐
自测3：设置网页中图片垂直对齐效果
7.1.4图片边框效果
自测4：设置网页中图片的边框效果
7.2实现图文混排效果
7.2.1使用CSS样式实现图文混排效果
自测5：制作网页中的图文混排效果
7.2.2控制文本绕图间距
自测6：控制图文混排图片与文字间距
7.3CSS3.0新增边框控制属性
7.3.1多重边框颜色border-colors属性
7.3.2图像边框border-image属性
7.3.3圆角边框border-radius属性
自测7：在网页中实现圆角边框效果
7.4本章小结
7.5课后测试题
第8章使用CSS样式设置列表效果
8.1认识网页中的列表
8.2使用CSS样式控制列表
8.2.1ul无序列表
自测1：制作新闻列表
8.2.2list-style-type属性
自测2：设置列表符号
8.2.3list-style-image属性
自测3：自定义列表项符号
8.2.4ol有序列表
自测4：制作有序排行列表
8.2.5dl定义列表
自测5：制作复杂新闻列表
8.3使用列表制作网页导航
8.3.1横向网页导航
自测6：使用CSS样式制作横向网页导航
8.3.2垂直网页导航
自测7：使用CSS样式制作垂直网页导航
8.4CSS3.0新增内容和透明度属性
8.4.1内容content属性
自测8：为网页元素赋予内容
8.4.2透明度opacity属性
自测9：设置网页元素的半透明效果
8.5本章小结
8.6课后测试题
第9章使用CSS样式设置超链接效果
9.1了解网页超链接
9.1.1什么是超链接
9.1.2关于链接路径
9.1.3超链接对象
9.2CSS样式伪类
9.2.1:link伪类
9.2.2:hover伪类
9.2.3:active伪类
9.2.4:visited伪类
9.3使用CSS样式实现网页中超链接效果
9.3.1设置网页中链接文字效果
自测1：美化网页超链接文字
9.3.2按钮式超链接
自测2：制作网页导航菜单
9.3.3为超链接添加背景
自测3：制作背景翻转导航菜单
9.4设置网页中的光标效果
自测4：自定义网页中的光标效果
9.5CSS3.0新增的多列布局属性
9.5.1列宽度column-width属性
9.5.2列数column-count属性
9.5.3列间距column-gap属性
9.5.4列边框column-rule属性
自测5：在网页中实现文本分栏效果
9.6本章小结
9.7课后测试题
第10章使用CSS样式设置表单和表格效果
10.1认识表单标签
10.1.1表单标签form
10.1.2输入标签input
10.1.3文本区域标签textarea
10.1.4选择域标签select和option
10.1.5其他表单元素
10.1.6label、legend和fieldset标签
10.2使用CSS样式设置表单元素
10.2.1设置表单元素的背景颜色和边框
自测1：美化登录表单效果
10.2.2圆角文本域
自测2：使用CSS样式实现圆角登录框效果
10.2.3美化下拉列表
自测3：使用CSS样式实现多彩下拉列表
10.3认识表格
10.3.1认识表格标签和结构
10.3.2表格标题caption标签
10.3.3表格列colgroup和col标签
10.3.4水平对齐和垂直对齐
10.4使用CSS样式设置表格效果
10.4.1设置表格边框
自测4：使用CSS样式设置表格边框效果
10.4.2设置表格背景颜色
自测5：使用CSS样式设置表格背景颜色
10.4.3设置表格背景图像
自测6：使用背景图像美化表格
10.5使用CSS样式实现常见表格效果
10.5.1设置单元行背景颜色
自测7：实现隔行变色表格
10.5.2使用:hover伪类实现表格特效
自测8：实现交互变色的表格
10.6CSS3.0新增其他属性
10.6.1内容溢出处理overflow属性
10.6.2轮廓外边框outline属性
10.6.3区域缩放调节resize属性
10.6.4元素阴影box-shadow属性
自测9：为网页元素添加阴影效果
10.7本章小结
10.8课后测试题
第11章商业网站实战
11.1制作设计工作室网站页面
11.1.1设计分析
11.1.2布局分析
11.1.3制作步骤
11.1.4案例小结
11.2制作餐饮网站页面
11.2.1设计分析
11.2.2布局分析
11.2.3制作步骤
11.2.4案例小结
11.3制作游戏网站页面
11.3.1设计分析
11.3.2布局分析
11.3.3制作步骤
11.3.4案例小结
11.4本章小结
11.5课后测试题