动态网页设计案例教程

第1章 HTML 4. 0简介

1. 1 初识HTML

1. 1. 1 HTML是什么

1. 1. 2　初步尝试

1. 1. 3　HTML文档的注释

1. 2　文档头

1. 2. 1　可在文档头部分使用的标识符

1. 2. 2 meta标识符

1. 3　网页的页面属性

1. 3. 1　定义背景色. 背景图片和文字色彩

1. 3. 2　设置网页空白

1. 4　链接

1. 4. 1　基本语法

1. 4. 2　在新窗口中打开链接

1. 4. 3　用链接实现发信

1. 5　字体样式

1. 5. 1　标题字体

1. 5. 2　设置字号

1. 5. 3　设置物理字体和逻辑字体

1. 5. 4　设置字模

1. 5. 5　设置文字颜色

1. 5. 6　字体设置标识符的组合使用

1. 6　网页布局

1. 6. 1　设置标尺线

1. 6. 2　行的控制

1. 6. 3　文字的对齐方式

1. 6. 4　列表

1. 6. 5　预排格式化文本

1. 6. 6　标识符＜address＞和＜／address＞

1. 6. 7 标识符＜blockquote＞和＜／blockquote＞

1. 6. 8 空白区域

1. 7　图像

1. 7. 1　基本语法

1. 7. 2　图像在网页中的布局

1. 7. 3　设置图像的大小和边框宽度

1. 8　表格

1. 8. 1　定义表格的基本语法

1. 8. 2　设置表格外观

1. 8. 3　跨多行多列的表元

1. 8. 4 控制表格内文字的布局

1. 8. 5 控制表格在网页中的布局

1. 9　多窗口结构

1. 9. 1　基本语法

1. 9. 2　设置各窗口的尺寸

1. 9. 3　框架的嵌套

1. 9. 4　框架各窗口之间的关系

1. 9. 5　设置框架的外观

1. 9. 6　浮动窗口

1. 10　表单

1. 10. 1　表单的基本结构

1. 10. 2 普通按钮和图像按钮

1. 10. 3　下拉菜单

1. 10. 4　复选框

1. 10. 5　单选按钮

1. 10. 6　提交和重置按钮

1. 10. 7　文字和密码输入

1. 10. 8　文本区域

1. 11　＜Script＞. ＜Applet＞和＜Style＞标识符

1. 12　本章知识点回顾

第2章 CSS基础

2. 1　范例1：设置链接效果

2. 1. 1　效果说明

2. 1. 2　样式表的基本结构

2. 1. 3　设置链接效果的样式规则

2. 1. 4　把样式表嵌入到HTML文档头

2. 1. 5　样式表和HTML的关系

2. 2　范例2：设置鼠标光标的形状

2. 2. 1　效果说明

2. 2. 2　用于设置鼠标光标形状的样式规则

2. 2. 3　在代码行中加入样式

2. 2. 4　指定鼠标光标的形状

2. 3　范例3：首字下沉与首行大写

2. 3. 1　效果说明

2. 3. 2　分类

2. 3. 3　使用分类实现首字下沉和首行大写

2. 3. 4　情景选择

2. 3. 5　使用情景选择实现首字下沉和首行大写

2. 4　范例4：为不同文本定义不同样式

2. 4. 1　效果说明

2. 4. 2 class属性

2. 4. 3　id属性

2. 4. 4 span元素

2. 4. 5 div元素

2. 4. 6　使用多个样式规则时的优先级

2. 5　范例5：外部CSS文件

2. 5. 1　将样式表嵌入HTML文档的方法

2. 5. 2　链接到外部CSS文件

2. 5. 3　输入外部样式表

2. 6　本章知识点回顾

第3章　设置字体样式

3. 1　范例6：字体风格

3. 1. 1　效果说明

3. 1. 2　设置字体风格的样式规则

3. 1. 3　创建步骤

3. 2　范例7：按照字模系列名称调用字体

3. 2. 1　效果说明

3. 2. 2　设置字模系列的样式规则

3. 2. 3　创建步骤

3. 3　范例8：自由控制字号

3. 3. 1　控制字号的样式规则

3. 3. 2　以point为单位控制字号

3. 3. 3 以em为单位控制字号

3. 3. 4　以pixel为单位控制字号

3. 3. 5　以其他单位控制字号

3. 3. 6　使用关键字控制字号

3. 3. 7　使用比例尺寸控制字号

3. 4　范例9：控制字重

3. 4. 1 效果说明

3. 4. 2　设置字重的样式规则

3. 5　范例10：文字变形

3. 5. 1　效果说明

3. 5. 2　设置文字变形的样式规则

3. 6　范例11：文字修饰

3. 6. 1　效果说明

3. 6. 2　设置文字修饰的样式规则

3. 7 范例12：设置文字的颜色

3. 7. 1　使用英文名称来设置颜色

3. 7. 2　使用16进制数来设置颜色

3. 7. 3　使用rgb模式来设置颜色

3. 8　范例13：设置文字的背景颜色

3. 8. 1　设置黑底白字效果

3. 8. 2　为多种网页元素设置背景颜色

3. 9　范例14：设置文字的背景图像

3. 9. 1　设置背景图像的样式规则

3. 9. 2　设置背景图像的范例

3. 10　范例15：控制文字是否显示

3. 10. 1　display属性

3. 10. 2　范例

3. 11　范例16：设置列表项的标记

3. 11. 1　list－style－type属性

3. 11. 2　使用list－style－type属性设置UL标记

3. 11. 3　使用list－style－type属性设置OL标记

3. 11. 4 list－style－image属性

3. 11. 5 list－style属性

3. 12　范例17：笔记本网页效果

3. 12. 1　效果说明

3. 12. 2　代码

3. 12. 3　font属性

3. 13　本章知识点回顾

第4章　控制页面布局

4. 1　范例18：设置字母间距和单词间距

4. 1. 1　设置字母间距

4. 1. 2　设置单词间距

4. 2　范例19：控制行距

4. 2. 1　控制行距的方法

4. 2. 2　用数字设置行高

4. 2. 3　使用长度单位设置行高

4. 2. 4　使用比例设置行高

4. 3　范例20：让文字互相重叠

4. 4　范例21：文字对齐

4. 4. 1　样式规则

4. 4. 2　水平对齐的一个范例

4. 4. 3　对表格的各表元内容进行对齐的范例

4. 5　范例22：文字缩行

4. 5. 1　样式规则

4. 5. 2　缩行的范例

4. 6　范例23：设置空白区域

4. 6. 1　box与间隙. 边框. 空白区域

4. 6. 2　设置空白区域的样式规则

4. 6. 3　设置空白区域的范例

4. 7　范例24：设置间隙和边框

4. 7. 1　设置间隙的样式规则

4. 7. 2　边框的4个属性

4. 7. 3　设置边框的宽度

4. 7. 4　设置边框的颜色

4. 7. 5 设置边框的风格

4. 7. 6 设置边框的范例

4. 7. 7　设置间隙和边框的范例

4. 8　范例25：设置环绕效果

4. 8. 1　设置环绕的样式规则

4. 8. 2　设置环绕的范例

4. 9　范例26：设置背景

4. 9. 1　添加背景颜色和背景图像

4. 9. 2　控制背景图像是否平铺

4. 9. 3　控制背景图像是否固定

4. 9. 4　控制背景图像的显示位置

4. 9. 5　使用background属性设置背景

4. 10　范例27：错乱的网页效果

4. 10. 1　效果说明

4. 10. 2　代码

4. 11　范例28：报纸网页效果

4. 11. 1　效果说明

4. 11. 2　代码

4. 12　本章知识点回顾

第5章　定位与叠放

5. 1　范例29：绝对定位与相对定位

5. 1. 1　绝对定位

5. 1. 2　相对定位

5. 2　范例30：设置网页元素的宽度和高度

5. 2. 1　设置宽度

5. 2. 2　同一图像以不同宽度显示

5. 2. 3　阶梯状显示的文本

5. 2. 4　设置高度

5. 3　范例31：设置网页元素的可视性

5. 3. 1　visibility属性

5. 3. 2　范例：突然消失的按钮

5. 4　范例32：叠放文字和图像

5. 4. 1　z－index属性

5. 4. 2　范例：将两张图片组合为一

5. 5　范例33：定位方法的综合应用

5. 5. 1　效果说明

5. 5. 2　创建步骤

5. 6　范例34：图片文字效果

5. 6. 1　效果说明

5. 6. 2　创建步骤

5. 7　范例35：光标瞄准器特效

5. 7. 1　效果说明

5. 7. 2　创建步骤

5. 8　本章知识点回顾

第6章　CSS滤镜（Filter）

6. 1　范例36：认识滤镜

6. 1. 1　什么是滤镜

6. 1. 2　滤镜效果示例

6. 2　范例37：定义一个或多个滤镜效果

6. 2. 1　定义一个滤镜效果

6. 2. 2　定义多个滤镜效果

6. 2. 3　多个滤镜效果的应用顺序

6. 2. 4　应用滤镜效果时的注意事项

6. 3 范例38：Alpha通道滤镜效果

6. 3. 1 Alpha通道效果的效果及定义

6. 3. 2　一个范例

6. 3. 3　代码的解释：使用脚本动态设置滤镜的属性

6. 3. 4　滤镜数组

6. 4　范例39：移动模糊（Motion Blur）

6. 4. 1　效果和定义

6. 4. 2　范例

6. 5　范例40：色度（Chroma）

6. 5. 1　效果及定义

6. 5. 2　范例

6. 6　范例41：下落阴影（Drop Shadow）

6. 6. 1　效果及定义

6. 6. 2　范例

6. 7　范例42：翻转（Flip）

6. 7. 1　效果及定义

6. 7. 2　范例

6. 8　范例43：光晕（Glow）

6. 8. 1　效果及定义

6. 8. 2　范例

6. 9　范例44：灰度（Grayscale）

6. 9. 1　效果及定义

6. 9. 2　范例

6. 10　范例45：反相（Invert）

6. 10. 1　效果及定义

6. 10. 2　范例

6. 11　范例46：遮蔽（Mask）

6. 11. 1　效果及定义

6. 11. 2　范例

6. 12　范例47：阴影（Shadow）

6. 12. 1　效果及定义

6. 12. 2　范例

6. 13　范例48：波形（Wave）

6. 13. 1　效果及定义

6. 13. 2　范例

6. 14　范例49：X光效果（X－ray）

6. 14. 1 效果及定义

6. 14. 2　范例

6. 15　本章知识点回顾

第7章　JavaScript与CSS的结合应用

7. 1　范例50：图片播放效果

7. 1. 1　效果说明

7. 1. 2　客户端映射图

7. 1. 3　使用"层"使图文重叠

7. 1. 4　完整代码

7. 2　范例51：光晕文字特效

7. 2. 1　效果说明

7. 2. 2　实现方法

7. 3　范例52：固定于网页某一位置的菜单

7. 3. 1　效果说明

7. 3. 2　实现方法

7. 4　范例53：可拖动的图文

7. 4. 1　效果说明

7. 4. 2　实现方法

7. 4. 3　进一步实践：和拖动的DIV

7. 4. 4　同时兼容Netscape和IE

7. 5　范例54：神奇的导航图

7. 5. 1　效果说明

7. 5. 2　客户端映射图

7. 5. 3　定位和叠放

7. 5. 4　设置和导航菜单各项相对应的显示层（DIV）

7. 5. 5　实现图像变形的动画效果

7. 6　范例55：飞行的图片

7. 6. 1　效果说明

7. 6. 2　实现方法

7. 7　本章知识点回顾

附录1　CSS与浏览器的兼容性

f1. 1　样式表基础

f1. 2　字体样式

f1. 3　文字

f1. 4　颜色与背景

f1. 5　页面布局

f1. 6　层和定位（CSS2）

附录2 CSS2新增选择符

f2. 1　＊（通配符选择符）

f2. 2　＞（子选择符）

f2. 3　＋（近亲选择符）

f2. 4 ［ ］（属性搭配选择符）

附录3　样式表度量单位值

f3. 1％

f3. 2 cm

f3. 3 em

f3. 4 ex（x-height）

f3. 5 in

f3. 6 mm

f3. 7 pc

f3. 8 pt

f3. 9 px

附录4　样式表颜色值

f4. 1　英文名称表示的颜色值

f4. 2　6个数字的16进制颜色值

f4. 3　3个数字的16进制颜色值

f4. 4　RGB颜色值

f4. 5　使用百分比值的RGB颜色值