动态网页设计案例教程PDF电子书下载

第1章 HTML 4.0简介 1

1.1 初识HTML 1

1.1.1 HTML是什么 1

1.1.2 初步尝试 1

1.1.3 HTML文档的注释 4

1.2 文档头 4

1.2.1 可在文档头部分使用的标识符 5

1.2.2 meta标识符 5

1.3 网页的页面属性 5

1.3.1 定义背景色、背景图片和文字色彩 6

1.3.2 设置网页空白 6

1.4 链接 7

1.4.1 基本语法 7

1.4.2 在新窗口中打开链接 8

1.4.3 用链接实现发信 9

1.5 字体样式 9

1.5.1 标题字体 9

1.5.2 设置字号 10

1.5.3 设置物理字体和逻辑字体 11

1.5.4 设置字模 12

1.5.5 设置文字颜色 13

1.5.6 字体设置标识符的组合使用 13

1.6 网页布局 13

1.6.1 设置标尺线 13

1.6.2 行的控制 14

1.6.3 文字的对齐方式 15

1.6.4 列表 16

1.6.5 预排格式化文本 19

1.6.6 标识符<address>和</address> 20

1.6.7 标识符<blockquote>和</blockquote> 20

1.6.8 空白区域 20

1.7 图像 21

1.7.1 基本语法 21

1.7.2 图像在网页中的布局 22

1.7.3 设置图像的大小和边框宽度 24

1.8 表格 25

1.8.1 定义表格的基本语法 25

1.8.2 设置表格外观 26

1.8.3 跨多行多列的表元 28

1.8.4 控制表格内文字的布局 29

1.8.5 控制表格在网页中的布局 30

1.9 多窗口结构 30

1.9.1 基本语法 30

1.9.2 设置各窗口的尺寸 31

1.9.3 框架的嵌套 33

1.9.4 框架各窗口之间的关系 33

1.9.5 设置框架的外观 33

1.9.6 浮动窗口 34

1.10 表单 35

1.10.1 表单的基本结构 35

1.10.2 普通按钮和图像按钮 35

1.10.3 下拉菜单 36

1.10.4 复选框 37

1.10.5 单选按钮 38

1.10.6 提交和重置按钮 39

1.10.7 文字和密码输入 39

1.10.8 文本区域 40

1.11 <Script>、<Applet>和<Style>标识符 40

1.12 本章知识点回顾 41

第2章 CSS基础 50

2.1 范例1：设置链接效果 50

2.1.1 效果说明 50

2.1.2 样式表的基本结构 50

2.1.3 设置链接效果的样式规则 52

2.1.4 把样式表嵌入到HTWIL文档头 52

2.1.5 样式表和HTWL的关系 53

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

2.2.1 效果说明 54

2.2.2 用于设置鼠标光标形状的样式规则 54

2.2.3 在代码行中加入样式 55

2.2.4 指定鼠标光标的形状 57

2.3 范例3：首字下沉与首行大写 59

2.3.1 效果说明 59

2.3.2 分类 60

2.3.3 使用分类实现首字下沉和首行大写 62

2.3.4 情景选择 64

2.3.5 使用情景选择实现首字下沉和首行大写 65

2.4 范例4:为不同文本定义不同样式 68

2.4.1 效果说明 68

2.4.2 class属性 68

2.4.3 id属性 71

2.4.4 span元素 72

2.4.5 div元素 76

2.4.6 使用多个样式规则时的优先级 77

2.5 范例5：外部CSS文件 77

2.5.1 将样式表嵌入HTML文档的方法 77

2.5.2 链接到外部CSS文件 78

2.5.3 输入外部样式表 80

2.6 本章知识点回顾 82

第3章 设置字体样式 88

3.1 范例6：字体风格 88

3.1.1 效果说明 88

3.1.2 设置字体风格的样式规则 88

3.1.3 创建步骤 88

3.2 范例7：按照字模系列名称调用字体 89

3.2.1 效果说明 89

3.2.2 设置字模系列的样式规则 90

3.2.3 创建步骤 90

3.3 范例8：自由控制字号 91

3.3.1 控制字号的样式规则 91

3.3.2 以point为单位控制字号 92

3.3.3 以em为单位控制字号 92

3.3.4 以pixel为单位控制字号 93

3.3.5 以其他单位控制字号 93

3.3.6 使用关键字控制字号 94

3.3.7 使用比例尺寸控制字号 95

3.4 范例9：控制字重 96

3.4.1 效果说明 96

3.4.2 设置字重的样式规则 96

3.5 范例10：文字变形 97

3.5.1 效果说明 97

3.5.2 设置文字变形的样式规则 97

3.6 范例11：文字修饰 98

3.6.1 效果说明 98

3.6.2 设置文字修饰的样式规则 98

3.7 范例12：设置文字的颜色 99

3.7.1 使用英文名称来设置颜色 99

3.7.2 使用16进制数来设置颜色 100

3.7.3 使用rgb模式来设置颜色 102

3.8 范例13：设置文字的背景颜色 104

3.8.1 设置黑底白字效果 104

3.8.2 为多种网页元素设置背景颜色 105

3.9 范例14：设置文字的背景图像 107

3.9.1 设置背景图像的样式规则 107

3.9.2 设置背景图像的范例 107

3.10 范例15：控制文字是否显示 108

3.10.1 display属性 108

3.10.2 范例 108

3.11 范例16：设置列表项的标记 109

3.11.1 list-style-type属性 109

3.11.2 使用list-style-type属性设置UL标记 110

3.11.3 使用list-style-type属性设置OL标记 111

3.11.4 list-style-image属性 112

3.11.5 list-style属性 113

3.12 范例17：笔记本网页效果 113

3.12.1 效果说明 113

3.12.2 代码 114

3.12.3 font属性 116

3.13 本章知识点回顾 117

第4章 控制页面布局 121

4.1 范例18：设置字母间距和单词间距 121

4.1.1 设置字母间距 121

4.1.2 设置单词间距 123

4.2 范例19：控制行距 124

4.2.1 控制行距的方法 124

4.2.2 用数字设置行高 124

4.2.3 使用长度单位设置行高 126

4.2.4 使用比例设置行高 126

4.3 范例20：让文字互相重叠 127

4.4 范例21：文字对齐 128

4.4.1 样式规则 128

4.4.2 水平对齐的一个范例 129

4.4.3 对表格的各表元内容进行对齐的范例 129

4.5 范例22：文字缩行 133

4.5.1 样式规则 133

4.5.2 缩行的范例 133

4.6 范例23：设置空白区域 135

4.6.1 box与间隙、边框、空白区域 135

4.6.2 设置空白区域的样式规则 135

4.6.3 设置空白区域的范例 136

4.7 范例24：设置间隙和边框 139

4.7.1 设置间隙的样式规则 139

4.7.2 边框的4个属性 140

4.7.3 设置边框的宽度 140

4.7.4 设置边框的颜色 141

4.7.5 设置边框的风格 142

4.7.6 设置边框的范例 142

4.7.7 设置间隙和边框的范例 147

4.8 范例25：设置环绕效果 149

4.8.1 设置环绕的样式规则 150

4.8.2 设置环绕的范例 150

4.9 范例26：设置背景 151

4.9.1 添加背景颜色和背景图像 151

4.9.2 控制背景图像是否平铺 151

4.9.3 控制背景图像是否固定 154

4.9.4 控制背景图像的显示位置 155

4.9.5 使用background属性设置背景 157

4.10 范例27：错乱的网页效果 158

4.10.1 效果说明 158

4.10.2 代码 158

4.11 范例28：报纸网页效果 162

4.11.1 效果说明 162

4.11.2 代码 162

4.12 本章知识点回顾 167

第5章 定位与叠放 172

5.1 范例29：绝对定位与相对定位 172

5.1.1 绝对定位 172

5.1.2 相对定位 175

5.2 范例30:设置网页元素的宽度和高度 178

5.2.1 设置宽度 178

5.2.2 同一图像以不同宽度显示 178

5.2.3 阶梯状显示的文本 179

5.2.4 设置高度 180

5.3 范例31：设置网页元素的可视性 181

5.3.1 visibility属性 181

5.3.2 范例：突然消失的按钮 182

5.4 范例32:叠放文字和图像 183

5.4.1 z-index属性 183

5.4.2 范例：将两张图片组合为一 184

5.5 范例33：定位方法的综合应用 185

5.5.1 效果说明 185

5.5.2 创建步骤 186

5.6 范例34：图片文字效果 188

5.6.1 效果说明 188

5.6.2 创建步骤 189

5.7 范例35：光标瞄准器特效 194

5.7.1 效果说明 194

5.7.2 创建步骤 194

5.8 本章知识点回顾 196

第6章 CSS滤镜(Filter) 199

6.1 范例36：认识滤镜 199

6.1.1 什么是滤镜 199

6.1.2 滤镜效果示例 199

6.2 范例37：定义一个或多个滤镜效果 201

6.2.1 定义一个滤镜效果 201

6.2.2 定义多个滤镜效果 202

6.2.3 多个滤镜效果的应用顺序 203

6.2.4 应用滤镜效果时的注意事项 204

6.3 范例38：Alpha通道滤镜效果 206

6.3.1 Alpha通道效果的效果及定义 206

6.3.2 一个范例 207

6.3.3 代码的解释：使用脚本动态设置滤镜的属性 208

6.3.4 滤镜数组 210

6.4 范例39：移动模糊(Motion Blur) 213

6.4.1 效果和定义 213

6.4.2 范例 213

6.5 范例40：色度(Chroma) 216

6.5.1 效果及定义 216

6.5.2 范例 216

6.6 范例41：下落阴影(Drop Shadow) 217

6.6.1 效果及定义 217

6.6.2 范例 217

6.7 范例42：翻转(Flip) 218

6.7.1 效果及定义 218

6.7.2 范例 218

6.8 范例43：光晕(Glow) 218

6.8.1 效果及定义 218

6.8.2 范例 219

6.9 范例44：灰度(Grayscale) 219

6.9.1 效果及定义 219

6.9.2 范例 220

6.10 范例45：反相(Invert) 220

6.10.1 效果及定义 220

6.10.2 范例 220

6.11 范例46：遮蔽(Mask) 221

6.11.1 效果及定义 221

6.11.2 范例 221

6.12 范例47：阴影(Shadow) 222

6.12.1 效果及定义 222

6.12.2 范例 222

6.13 范例48：波形(Wave) 223

6.13.1 效果及定义 223

6.13.2 范例 223

6.14 范例49：X光效果(X-ray) 224

6.14.1 效果及定义 224

6.14.2 范例 224

6.15 本章知识点回顾 225

第7章 JavaScript与CSS的结合应用 230

7.1 范例50：图片播放效果 230

7.1.1 效果说明 230

7.1.2 客户端映射图 232

7.1.3 使用“层”使图文重叠 234

7.1.4 完整代码 234

7.2 范例51：光晕文字特效 236

7.2.1 效果说明 236

7.2.2 实现方法 237

7.3 范例52：固定于网页某一位置的菜单 239

7.3.1 效果说明 239

7.3.2 实现方法 240

7.4 范例53：可拖动的图文 243

7.4.1 效果说明 243

7.4.2 实现方法 244

7.4.3 进一步实践：可拖动的DIV 247

7.4.4 同时兼容Netscape和IE 248

7.5 范例54：神奇的导航图 252

7.5.1 效果说明 252

7.5.2 客户端映射图 254

7.5.3 定位和叠放 255

7.5.4 设置和导航菜单各项相对应的显示层(DIV) 256

7.5.5 实现图像变形的动画效果 257

7.6 范例55：飞行的图片 264

7.6.1 效果说明 264

7.6.2 实现方法 266

7.7 本章知识点回顾 268

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

f1.1 样式表基础 271

f1.2 字体样式 272

f1.3 文字 274

f1.4 颜色与背景 275

f1.5 页面布局 276

f1.6 层和定位(CSS2) 279

附录2 CSS2新增选择符 280

f2.1 ？(通配符选择符) 280

f2.2 >(子选择符) 280

f2.3 +(近亲选择符) 280

f2.4 ［］(属性搭配选择符) 281

附录3 样式表度量单位值 282

f3.1 % 282

f3.2 cm 282

f3.3 em 282

f3.4 ex(x-height) 283

f3.5 in 283

f3.6 mm 283

f3.7 pc 284

f3.8 pt 284

f3.9 px 284

附录4 样式表颜色值 285

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

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

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

f4.4 RGB颜色值 286

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