XHTML+CSS网页布局与美化案例教程PDF电子书下载

单元1 体验网页的布局与美化 1

教学要点 1

1.1 前导训练 1

【任务1-1-1】创建本地站点 1

【任务1-1-2】建立网页0101.html 5

【任务1-1-3】准备网页0102.html且浏览其效果 10

【任务1-1-4】准备网页0103.html且浏览其效果 11

【任务1-1-5】准备网页0104.html且浏览其效果 11

1.2 操作实战 12

【任务1-2-1】体验网页中结构与表现的分离 12

【任务1-2-2】体验符合web标准的网页设计规则 17

【任务1-2-3】体验Dreamweaver CS3对CSS的支持 18

【任务1-2-4】体验CSS的盒模型 22

【任务1-2-5】体验CSS的选择符及属性设置 33

【任务1-2-6】体验CSS属性值的缩写 42

【任务1-2-7】体验Dreamweaver CS3中CSS的属性设置 49

【任务1-2-8】体验使用XHTML+CSS布局网页 53

1.3 拓展实践 58

【任务1-3】分析网页index0102.html 58

1.4 技术点睛 58

1.4.1 盒模型尺寸的计算实例分析 58

1.4.2 盒模型的兼容性问题 60

1.5 知识拓展 63

单元2 文本与列表的美化 71

教学要点 71

2.1 前导训练 71

准备工作 71

【任务2-1-1】创建网页0201.html 72

【任务2-1-2】创建网页0202.html 85

【任务2-1-3】创建网页0203.html 93

【任务2-1-4】创建网页0204.html 96

2.2 操作实战 98

【任务2-2】创建网页index0201.html 98

2.3 拓展实践 106

【任务2-3】创建网页index0202.html 106

2.4 技术点睛 112

2.4.1 设置段落首字下沉效果 112

2.4.2 控制列表项行内显示 112

2.4.3 控制列表符号的个性化显示 113

2.4.4 应用CSS样式实现列表的截字效果 115

2.4.5 利用定义列表实现图像切换和选项卡切换 115

2.5 知识拓展 118

单元3 图像与背景的应用与美化 129

教学要点 129

3.1 前导训练 129

准备工作 129

【任务3-1-1】创建网页0301.html 130

【任务3-1-2】创建网页0302.html 136

【任务3-1-3】创建网页0303.html 140

【任务3-1-4】创建网页0304.html 144

3.2 操作实战 创建网页index0301.html 148

3.3 拓展实践 创建网页index0302.html 153

3.4 技术点睛 160

3.4.1 图文混排布局 160

3.4.2 制作全图排版网页 162

3.4.3 实现“图片替代文本”效果 163

3.4.4 利用CSS Sprites原理合成图片 165

3.4.5 利用背景图像实现圆角布局 166

3.4.6 利用CSS样式控制圆角布局 170

3.4.7 利用CSS样式设置图像的阴影效果 173

3.5 知识拓展 174

单元4 超级链接与导航栏的美化 180

教学要点 180

4.1 前导训练 181

准备工作 181

【任务4-1-1】创建网页0401.html 181

【任务4-1-2】创建网页0402.html 188

【任务4-1-3】创建网页0403.html 193

【任务4-1-4】创建网页0404.html 196

4.2 操作实战 创建网页index0401.html 200

4.3 拓展实践 创建网页index0402.html 206

4.4 技术点睛 214

4.4.1 利用CSS样式定义各种不同形式的超级链接 214

4.4.2 利用定义列表制作垂直导航栏 215

4.4.3 利用CSS样式实现水平导航栏及分隔小竖条 216

4.4.4 利用背景图像制作立体导航菜单 218

4.4.5 实现导航栏菜单自动伸缩和超级链接的悬停交换效果 219

4.5 知识拓展 220

单元5 表格的应用与美化 222

教学要点 222

5.1 前导训练 222

准备工作 222

【任务5-1-1】创建网页0501.html 223

【任务5-1-2】创建网页0502.html 226

【任务5-1-3】创建网页0503.html 229

5.2 操作实战 创建网页index0501.html 233

5.3 拓展实践 创建网页index0502.html 236

5.4 技术点睛 应用JavaScript代码在网页中插入Flash动画 242

5.5 知识拓展 243

单元6 表单的应用与美化 248

教学要点 248

6.1 前导训练 248

准备工作 248

【任务6-1-1】创建网页0601.html 249

【任务6-1-2】创建网页0602.html 256

【任务6-1-3】创建网页0603.html 261

【任务6-1-4】创建网页0604.html 264

6.2 操作实战 创建网页index0601.html 268

6.3 拓展实践 272

【任务6-3-1】创建网页index0602.html 272

【任务6-3-2】创建网页index0603.html 274

6.4 技术点睛 表单按钮与单行文本域的美化 276

6.5 知识拓展 277

单元7 两列式网页的布局与美化 281

教学要点 281

7.1 前导训练 281

准备工作 281

【任务7-1-1】创建网页0701.html 282

【任务7-1-2】创建网页0702.html 285

【任务7-1-3】创建网页0703.html 289

7.2 操作实战 创建网页index0701.html 293

7.3 拓展实践 创建网页index0702.html 297

7.4 技术点睛 302

7.4.1 网页的单列式布局与元素的自适应 302

7.4.2 网页元素的嵌套布局 305

7.4.3 网页的两列式布局 309

7.5 知识拓展 315

7.5.1 如何使用CSS的定位属性控制元素的位置 315

7.5.2 CSS布局网页的基本布局模型及各自的特点 319

7.5.3 浮动清除属性clear的取值及其含义 320

单元8 三列式网页的布局与美化 326

教学要点 326

8.1 前导训练 326

准备工作 326

【任务8-1-1】创建网页0801.html 327

【任务8-1-2】创建网页0802.html 333

【任务8-1-3】创建网页0803.html 336

8.2 操作实战 创建网页index0801.html 342

8.3 拓展实践 创建网页index0802.html 346

8.4 技术点睛 三列式网页布局 352

8.5 知识拓展 355

单元9 多列式网页的布局与美化 358

教学要点 358

9.1 前导训练 358

准备工作 358

【任务9-1-1】创建网页0901.html 359

【任务9-1-2】创建网页0902.html 365

【任务9-1-3】创建网页0903.html 370

9.2 操作实战 创建网页index0901.html 373

9.3 拓展实践 创建网页index0902.html 378

9.4 技术点睛 多行多列式网页布局 386

9.5 知识拓展 390

参考文献 394