第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.3　Div+CSS布局的特点

　　1.3.4　Div+CSS布局的优势

　1.4　了解Web标准

　　1.4.1　Web标准是什么

　　1.4.2　什么是W3C

　　1.4.3　结构、表现、行为和内容

　　1.4.4　遵循Web标准的好处

　1.5　本章小结

　1.6　课后测试题

第2章　HTML和HTML5基础

　2.1　HTML基础

　　2.1.1　HTML概述

　　2.1.2　HTML的主要功能

　　2.1.3　HTML的基本语法

　　2.1.4　HTML中的3种标签形式

　2.2　HTML标签

　　2.2.1　基本标签

　　2.2.2　文本标签

　　2.2.3　格式标签

　　2.2.4　超链接标签

　　2.2.5　图像标签

　　2.2.6　表格标签

　　2.2.7　区块标签

　2.3　HTML5基础

　　2.3.1　了解HTML5

　　2.3.2　HTML5的简化操作

　　2.3.3　HTML5中的新增标签

　　2.3.4　HTML5中废弃的标签

　　2.3.5　HTML5的优势

　2.4　HTML5的应用

　　2.4.1　canvas标签

　自测1：在网页中实现圆形图像效果

　　2.4.2　audio标签

　自测2：在网页中嵌入音频播放

　　2.4.3　video标签

　自测3：在网页中嵌入视频播放

　2.5　本章小结

　2.6　课后测试题

第3章　CSS样式基础

　3.1　CSS概述

　　3.1.1　CSS的特点

　　3.1.2　CSS的类型

　　3.1.3　CSS的基本语法

　　3.1.4　CSS样式的构成

　3.2　4种使用CSS样式的方法

　　3.2.1　内联样式

　自测1：使用style属性添加内联样式

　　3.2.2　内部样式

　自测2：使用内部CSS样式

　　3.2.3　外部样式表文件

　自测3：链接外部CSS样式表文件

　　3.2.4　导入样式表文件

　自测4：导入外部CSS样式表文件

　3.3　CSS选择器

　　3.3.1　通配选择器

　自测5：控制页面边距

　　3.3.2　标签选择器

　自测6：控制网页整体效果

　　3.3.3　ID选择器

　自测7：控制网页中的元素

　　3.3.4　类选择器

　自测8：创建并应用类CSS样式

　　3.3.5　伪类和伪对象选择器

　自测9：控制网页中超链接文字效果

　　3.3.6　群选择器

　自测10：制作产品列表页面

　　3.3.7　派生选择器

　自测11：控制所包含元素的效果

　3.4　CSS样式中的颜色设置和单位

　　3.4.1　CSS样式中的多种颜色设置方式

　　3.4.2　CSS样式中的绝对单位

　　3.4.3　CSS样式中的相对单位

　3.5　本章小结

　3.6　课后测试题

第4章　Div+CSS网页布局

　4.1　定义Div

　　4.1.1　什么是Div

　　4.1.2　插入Div

　4.2　id与class

　　4.2.1　什么是id

　　4.2.2　什么时候使用id

　　4.2.3　什么是class

　　4.2.4　什么时候使用class

　4.3　CSS盒模型

　　4.3.1　认识CSS盒模型

　　4.3.2　CSS盒模型的要点

　　4.3.3　margin（边距）属性

　自测1：控制网页元素外边距

　　4.3.4　border（边框）属性

　自测2：为网页元素设置边框效果

　　4.3.5　padding（填充）属性

　自测3：设置网页元素的填充

　　4.3.6　content（内容）部分

　　4.3.7　理解空白边叠加

　自测4：控制网页元素之间的间距

　4.4　网页元素定位

　　4.4.1　理解position属性

　　4.4.2　relative（相对）定位方式

　自测5：实现网页元素的相对定位

　　4.4.3　absolute（绝对）定位方式

　自测6：实现网页元素的绝对定位

　　4.4.4　fixed（固定）定位方式

　自测7：设置网页中固定的定位方式

　　4.4.5　float（浮动）定位方式

　自测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.1　font-family属性

　自测1：设置网页中的字体

　　5.1.2　font-size属性

　自测2：设置网页中的字体大小

　　5.1.3　color属性

　自测3：设置网页中的字体颜色

　　5.1.4　font-weight属性

　自测4：设置网页中的字体加粗

　　5.1.5　font-style属性

　自测5：设置网页中的字体倾斜

　　5.1.6　text-transform属性

　自测6：设置网页中英文大小写

　　5.1.7　text-decoration属性

　自测7：为网页中的文字添加修饰

　5.2　使用CSS样式控制段落

　　5.2.1　letter-spacing属性

　自测8：设置文本字符间距

　　5.2.2　line-height属性

　自测9：设置文本行间距

　　5.2.3　text-indent属性

　自测10：设置段落文本首行缩进

　　5.2.4　text-align属性

　自测11：设置文本水平对齐

　　5.2.5　vertical-align属性

　自测12：设置文本垂直对齐

　　5.2.6　段落首字下沉

　自测13：实现段落文本首字下沉效果

　5.3　实现特殊的文本效果

　　5.3.1　Web字体

　自测14：在网页中实现特殊字体效果

　　5.3.2　CSS类选区

　自测15：为文字同时运用多个类CSS样式

　5.4　CSS 3.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.1　background-color属性

　自测1：设置网页背景颜色

　　6.1.2　为网页元素设置不同的背景颜色

　自测2：为网页元素设置不同的背景颜色

　6.2　CSS 3.0新增颜色设置方式

　　6.2.1　HSL颜色方式

　　6.2.2　HSLA颜色方式

　　6.2.3　RGBA颜色方式

　自测3：使用RGBA颜色方式设置半透明背景色

　6.3　使用CSS样式设置背景图像

　　6.3.1　background-image属性

　自测4：为网页设置背景图像

　　6.3.2　background-repeat属性

　自测5：设置背景图像的重复方式

　　6.3.3　background-attachment属性

　自测6：实现固定不动的背景图像

　　6.3.4　background-position属性

　自测7：控制背景图像的位置

　6.4　CSS3.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.3　CSS3.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.1　ul无序列表

　自测1：制作新闻列表

　　8.2.2　list-style-type属性

　自测2：设置列表符号

　　8.2.3　list-style-image属性

　自测3：自定义列表项符号

　　8.2.4　ol有序列表

　自测4：制作有序排行列表

　　8.2.5　dl定义列表

　自测5：制作复杂新闻列表

　8.3　使用列表制作网页导航

　　8.3.1　横向网页导航

　自测6：使用CSS样式制作横向网页导航

　　8.3.2　垂直网页导航

　自测7：使用CSS样式制作垂直网页导航

　8.4　CSS3.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.2　CSS样式伪类

　　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.5　CSS 3.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.6　label、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.6　CSS 3.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　课后测试题