DIV+CSS 3网页样式与布局全程揭秘

第1章网页和网站开发知识

1.1了解网页

1.1.1网页与网站的关系

1.1.2网页的基本构成元素

1.2如何设计网页

1.2.1什么是网页设计

1.2.2网页设计的特点

1.2.3网页设计相关术语

1.2.4常见网站类型

1.3关于表格布局

1.3.1表格布局的特点

1.3.2冗余的嵌套表格和混乱的结构

1.4关于DIV+CSS布局

1.4.1DIV+CSS布局的特点

1.4.2DIV+CSS布局的优势

1.5Web标准

1.5.1什么是Web标准

1.5.2Web标准的内容

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

1.5.4遵循Web标准的好处

1.6网站开发流程

1.6.1网站策划

1.6.2规划网站结构

1.6.3素材收集整理

1.6.4网页版式与布局分析

1.6.5确定网站主色调

1.6.6设计网站页面

1.6.7切割和优化网页

1.6.8制作HTML页面

1.6.9使用CSS样式控制网页外观

1.6.10为网页应用JavaScript特效

1.6.11网站后台程序开发

1.6.12申请域名和服务器空间

1.6.13测试并上传网站

1.7本章小结

第2章HTML、XHTML和

HTML

2.1HTML与XHTML

2.1.1HTML与XHTML的区别

2.1.2使用XHTML的优点

2.2HTML基础

2.2.1了解HTML

2.2.2HTML的作用

2.2.3HTML的基础结构

2.2.4HTML的基本语法

2.3HTML常用标签

2.3.1区块标签

2.3.2文本标签

2.3.3格式标签

2.3.4图像标签

2.3.5表格标签

2.3.6超链接标签

2.4XHTML基础

2.4.1了解XHTML

2.4.2XHTML文档的基本结构

2.4.33种不同的XHTML文档类型

2.4.4严谨的代码

2.4.5制作HTML页面

实例01+视频：制作简单的HTML页面

2.5HTML5基础

2.5.1了解HTML

2.5.2HTML5的简化操作

2.5.3HTML5新增标签

2.5.4HTML5废弃标签

2.5.5HTML5新增选择器

2.5.6HTML5的优势

2.6HTML5的应用

2.6.1＜canvas＞标签

实例02+视频：在网页中实现绘图效果

2.6.2＜audio＞标签

实例03+视频：在网页中嵌入音频

2.6.3＜video＞标签

实例04+视频：在网页中嵌入视频

2.7本章小结

第3章CSS样式入门

3.1初识CSS样式

3.1.1为什么要使用CSS样式

3.1.2在网页中使用CSS样式的优势

3.1.3CSS样式的作用

3.1.4CSS样式的局限性

3.1.5CSS样式基础语法

3.1.6认识CSS规则的构成

3.2CSS选择符

3.2.1通配选择符

实例05+视频：航天科技网页

3.2.2标签选择符

实例06+视频：酒店网站页面

3.2.3ID选择符

实例07+视频：制作科技网站页面

3.2.4类选择符

实例08+视频：设置活动网站页面文字

3.2.5伪类和伪对象选择符

实例09+视频：设置酒店网站文字链接

效果

3.2.6群选择符

实例10+视频：设置女装网站图片效果

3.2.7派生选择符

实例11+视频：运动鞋网站页面

3.3CSS3中新增的选择符

3.3.1属性选择符

3.3.2结构伪类选择符

3.3.3UI元素状态伪类选择符

3.4在网页中应用CSS样式的4种方法

3.4.1内联CSS样式

实例12+视频：使用style属性添加

内联CSS样式

3.4.2内部CSS样式

实例13+视频：使用＜style＞标签添加

内部CSS样式

3.4.3链接外部CSS样式文件

实例14+视频：使用＜link＞标签链接

外部CSS样式文件

3.4.4导入外部CSS样式文件

实例15+视频：使用@import命令导入

外部CSS样式文件

3.5CSS样式的特性

3.5.1继承性

3.5.2特殊性

3.5.3层叠性

3.5.4重要性

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

3.6.1CSS中的多种颜色设置方法

3.6.2CSS中的绝对单位

3.6.3CSS中的相对单位

3.7本章小结

第4章使用CSS设置文本和

段落样式

4.1设置文本CSS样式

4.1.1设置字体font-family

实例16+视频：设置欢迎页面中的字体

4.1.2设置字体大小font-size

实例17+视频：设置网站欢迎页面中的

字体大小

4.1.3设置字体颜色color

实例18+视频：设置网站欢迎页面中的

文字颜色

4.1.4设置字体粗细font-weight

实例19+视频：设置网页中的重要

文字加粗

4.1.5设置字体样式font-style

实例20+视频：设置网页中文字倾斜

4.1.6设置英文字体大小写

text-transform

实例21+视频：设置网页中的英文大小写

4.1.7设置文字修饰text-decoration

实例22+视频：为网页中文字添加下划线、

顶划线和删除线

4.2设置段落样式

4.2.1字间距letter-spacing

实例23+视频：控制网页中文字间距

4.2.2行间距line-height

实例24+视频：控制网页中文本行间距

4.2.3段落首字下沉

实例25+视频：实现网页中段落文字

下沉效果

4.2.4段落首行缩进text-indent

实例26+视频：实现网页中段落文字的

首行缩进

4.2.5段落水平对齐text-align

实例27+视频：实现网页中文字水平居中

对齐

4.2.6文本垂直对齐vertical-align

实例28+视频：实现网页中文本垂直居中

对齐

4.3CSS类选区

实例29+视频：个人卡通网站欢迎页

4.4在网页中应用特殊字体

实例30+视频：在卡通网页中使用特殊

字体

4.5本章小结

第5章使用CSS设置背景和

图片样式

5.1设置背景颜色CSS样式

5.1.1背景颜色background-color

实例31+视频：为网页设置整体背景

颜色

5.1.2为页面元素设置不同的背景颜色

实例32+视频：设置不同背景颜色区分

网页元素

5.2设置背景图像CSS样式

5.2.1背景图像background-image

实例33+视频：设置图片网站背景图像

5.2.2背景图像重复方式

background-repeat

实例34+视频：实现重复显示的背景

图像

5.2.3背景图像固定

background-attachment

实例35+视频：文本介绍网页固定的

背景

5.2.4背景图像位置

background-position

实例36+视频：通过背景定位实现图文

混排效果

5.3设置图片CSS样式

5.3.1图片边框border

实例37+视频：设置卡通网站中的图片

边框

5.3.2图片缩放

实例38+视频：实现跟随浏览器窗口

缩放的图片

5.3.3图片水平对齐

实例39+视频：设置网页中图像的水平

对齐效果

5.3.4图片的垂直对齐

实例40+视频：设置网页中图像的垂直

对齐效果

5.4在网页中实现图文混排

5.4.1使用CSS样式实现文本绕图效果

实例41+视频：实现图文介绍页面文本

绕图

5.4.2设置文本绕图间距

实例42+视频：美化图文介绍页面

5.5网页中特殊的图像效果应用

5.5.1全屏大图切换

实例43+视频：设计作品展示页面

5.5.2鼠标经过图像动态效果

实例44+视频：制作图片展示网页

5.6本章小结

第6章使用CSS设置

列表样式

6.1了解网页中的列表

6.2设置列表的CSS样式

6.2.1ul无序项目列表

实例45+视频：制作网站新闻列表

6.2.2有序编号列表

实例46+视频：制作音乐排行榜

6.2.3定义列表

实例47+视频：制作游戏新闻栏目

6.2.4更改列表项目样式

实例48+视频：更改某一个项目列表

符号

6.2.5自定义列表符号

实例49+视频：图像列表符号的应用

6.3使用列表制作导航菜单

6.3.1使用CSS样式创建横向导航菜单

实例50+视频：制作游戏网站导航

6.3.2使用CSS样式创建竖向导航菜单

实例51+视频：制作汽车网站竖向导航

6.4列表在网页中的特殊应用

6.4.1滚动图像

实例52+视频：在网页中实现四图横向

滚动效果

6.4.2动态堆叠卡

实例53+视频：制作个性网站欢迎页面

6.5本章小结

第7章使用CSS设置超

链接样式

7.1了解网页超链接

7.1.1什么是超链接

7.1.2关于链接路径

7.1.3超链接对象

7.1.4创建超链接原则

7.2CSS样式伪类

7.2.1:link伪类

7.2.2:hover伪类

7.2.3:active伪类

7.2.4:visited伪类

7.3超链接CSS样式应用

7.3.1超链接文字样式

实例54+视频：设置游戏网站文字

超链接效果

7.3.2按钮式超链接

实例55+视频：制作设计网站导航菜单

7.3.3为超链接添加背景

实例56+视频：背景翻转导航菜单

7.4设置网页中的光标效果

实例57+视频：自定义网页中的光标

效果

7.5超链接在网页中的特殊应用

7.5.1倾斜导航菜单

实例58+视频：玩具网站倾斜导航

7.5.2动感超链接

实例59+视频：卡通网站动感导航菜单

7.6本章小结

第8章使用CSS设置表格

样式

8.1了解表格

8.1.1认识表格标签与结构

8.1.2表格标题＜caption＞标签

8.1.3表格列＜colgroup＞和＜col＞标签

8.1.4水平对齐和垂直对齐

8.2使用CSS样式控制表格外观

8.2.1设置表格边框

实例60+视频：制作网站新闻栏目

8.2.2设置表格背景颜色

实例61+视频：使用背景颜色美化表格

8.2.3设置表格背景图像

实例62+视频：使用背景图像美化表格

8.3使用CSS样式实现表格特效

8.3.1设置单元行背景颜色

实例63+视频：实现隔行变色的表格

8.3.2:hover伪类在表格中的应用

实例64+视频：使用CSS实现表格的

交互效果

8.4本章小结

第9章使用CSS设置

表单元素样式

9.1关于表单

9.1.1表单标签＜form＞

9.1.2输入标签＜input＞

9.1.3文本域标签＜textarea＞

9.1.4选择域标签＜select＞和＜option＞

9.1.5其他表单元素

9.1.6关于＜label＞、＜legend＞和＜fieldset＞标签

实例65+视频：创建简单的网页表单

9.2使用CSS样式控制表单元素

9.2.1使用CSS样式设置表单元素的背景色和边框

实例66+视频：制作网站登录页面

9.2.2使用CSS样式实现圆角文本字段

实例67+视频：制作圆角登录框

9.2.3使用CSS样式设置下拉列表效果

实例68+视频：制作网站搜索栏

9.3表单在网页中的特殊应用

9.3.1聚焦型提示语消失

实例69+视频：文本字段提示语效果

9.3.2输入型提示语消失

实例70+视频：文本字段提示语效果

9.4本章小结

第10章CSS滤镜的应用

10.1关于CSS滤镜

10.1.1什么是CSS滤镜

10.1.2CSS滤镜语法

10.2在网页中应用CSS滤镜

10.2.1Alpha滤镜

实例71+视频：实现网页中图像的半透明效果

10.2.2BlendTrans滤镜

实例72+视频：实现网页中图像的渐隐渐现效果

10.2.3Blur滤镜

实例73+视频：实现网页中图像的模糊效果

10.2.4Chroma滤镜

实例74+视频：将网页中指定颜色设置为透明

10.2.5DropShadow与Shadow滤镜

实例75+视频：为网页中的元素添加阴影效果

10.2.6FlipH与FlipV滤镜

实例76+视频：实现网页中元素的水平和垂直翻转

10.2.7Glow滤镜

实例77+视频：为网页中的文字添加光晕效果

10.2.8Gray滤镜与Invert滤镜

实例78+视频：实现黑白网页效果

10.2.9Light滤镜

实例79+视频：在网页中实现聚光灯效果

10.2.10Mask滤镜

实例80+视频：实现文字遮罩效果

10.2.11RevealTrans滤镜

实例81+视频：实现图像的动态转换

10.2.12Wave滤镜

实例82+视频：实现网页中图像的波纹效果

10.2.13Xray滤镜

实例83+视频：将网页中的图像处理为X光片效果

10.3本章小结

……

第11章CSS高级应用与CSS3属性

第12章使用DIV+CSS布局网页

第13章CSS与JavaScript实现网页特效

第14章商业案例实战

本书是一本介绍DIV+CSS网站建设的经典之作，系统地介绍了CSS样式的基础理论和实际应用技术，并结合实例来讲解使用DIV+CSS布局制作网页的方法和技巧。在介绍使用CSS样式进行设计的同时，还结合实际网页制作中可能遇到的问题，提供了解决问题的思路、方法和技巧，使初学者能够全面、快速地掌握DIV+CSS布局制作网页的方法。本书通过知识点与实例相结合的方式，让读者能够清晰明了地理解DIV+CSS布局制作网页的相关技术内容，从而达到学以致用的目的。全书共分14章，从初学者的角度出发，全面讲解了DIV+CSS布局制作网页的相关知识，其中包括网页和网站的相关开发知识、CSS样式入门、使用CSS设置文本和段落样式、使用CSS设置背景和图片样式、使用CSS设置列表样式、使用CSS设置超链接样式、使用CSS设置表单元素样式、使用DIV+CSS布局网页和商业案例实战等内容。本书附赠1张DVD光盘，其中包含书中所有实例的源文件和最终文件，以及所有实例的教学视频，以方便读者学习和参考。本书结构清晰、实例经典、技术实用，适合初中级网页设计爱好者，以及希望学习Web标准和对原有网站进行重构的网页设计者，同时也可作为高等院校相关专业的参考用书。

《网页设计殿堂之路》丛书是由来自一线的专业网页设计人员集多年的技术与经验倾力打造的一套体系最完整、技术最前沿、设计最精美的网页设计系列丛书。
·最完整的体系：针对网页设计师的职业需求量身定做，市面上知识体系最完整的一套网页设计丛书。
·最前沿的技术：紧跟网页技术发展的新潮流，市面上技术新的一套网页设计丛书。
·最精美的设计：来自实践的精美案例和专业的装帧设计，市面上最精美的一套网页设计丛书。
作为励志成为网页设计精英的你，需要掌握哪些知识呢？下表给出了你明确的答案。
针对这样的知识架构，我们精心创作了该系列丛书，共十个品种。
该套丛书具有以下独一的特点：
·内容全面，紧贴实际：帮助你解决网页设计中遇到的所有问题，帮助你搞定每一个网页设计项目。
·关注细节，量身打造：技术细节、设计细节，这些在工作中看似细微，但是往往决定成败的关键点，全部为你一一道来。
·海量资源，现场教学：提供了大量的来自于一线项目的案例资源，并通过视频讲解为你一一呈现。