动态网页设计案例教程

内容简介

　　本书介绍动态网页技术的核心内容CSS（全称为CascadingStyleSheets，层叠样式表）。掌握CSS，已成为网页制作人员的必备技能。通过CSS可以实现页面视觉效果的一切变化，如字体、对齐方式、颜色、位置、大小、定位、分层与重叠、滤镜效果等，几乎可以达到用户网络带宽和处理器运行速度允许范围内的一切动态交互、神奇变幻的网页效果。本书精选出55个案例进行教学，将CSS的知识点有机地分散在这55个案例中。通过案例，使得CSS众多的对象、属性以及各种设置和操作都变得具体形象、通俗易懂，让读者从实际的操作、具体的设计中体会、领悟、积累CSS和动态网页制作的经验技巧，循序渐进，深入浅出，可操作性极强。同时，这些案例非常实用，读者可以直接“拿来”或者简单修改后再加入自己的网页中，轻轻松松使自己的网页多姿多彩、变幻莫测，达到令人惊叹的美观布局和令人震憾的动态效果。本书及其配套光盘（含各案例的动态网页特效及源代码）适合于各个层次的网页制作爱好者使用。

作者简介

暂缺《动态网页设计案例教程》作者简介

图书目录

第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颜色值