网页设计与制作案例教程

第1章 网页设计概述 1

1.1 网页与网站 1

1.1.1 网页 1

1.1.2 网站 2

1.1.3 网站的工作原理 2

1.1.4 网页基本构成元素 3

1.2 网页制作基础知识 4

1.2.1 网页的基础知识 4

1.2.2 网页制作工具 5

1.2.3 网页设计与制作的分类 6

1.3 网页设计的基本流程 6

1.4 创建本地站点 7

1.4.1 Dreamweaver CS6简介 7

1.4.2 建立本地站点 9

1.4.3 管理本地站点 12

1.4.4 网页文件的基本操作 13

1.4.5 设置首选参数 15

1.4.6 使用辅助工具 18

1.5 超文本标记语言HTML 20

1.5.1 HTML概述 20

1.5.2 常用HTML标记 21

1.6 实例演示 22

1.6.1 实例情景--创建本地教学

站点 22

1.6.2 实例效果 22

1.6.3 实现方案 22

1.7 任务训练 23

1.7.1 训练目的 23

1.7.2 训练内容 23

1.8 知识拓展 24

单元测试 24

第2章 认识网页基本元素 26

2.1 文本 26

2.1.1 添加文本 26

2.1.2 设置文本属性 28

2.1.3 插入特殊文本 32

2.1.4 文本超链接 34

2.2 图像 37

2.2.1 图像格式 38

2.2.2 插入图像 39

2.2.3 设置图像属性 39

2.2.4 其他图像元素 40

2.2.5 图文混排 42

2.2.6 图像超链接 43

2.3 多媒体 45

2.3.1 网页中的动画 45

2.3.2 音乐播放功能 47

2.3.3 视频播放功能 49

2.4 实例演示 50

2.4.1 实例情景--制作风景区

网页 50

2.4.2 实例效果 50

2.4.3 实现方案 51

2.5 任务训练 52

2.5.1 训练目的 52

2.5.2 训练内容 52

2.6 知识拓展 53

单元测试 53

第3章 认识常用网页布局 55

3.1 表格 55

3.1.1 插入表格及嵌套表格 56

3.1.2 设置表格和单元格属性 59

3.1.3 选择单元格、行或列及表格 60

3.1.4 表格的基本操作 61

3.1.5 表格布局实例 62

3.2 层AP Div 64

3.2.1 创建AP Div 64

3.2.2 AP Div的属性 66

3.2.3 "AP元素"面板 67

3.2.4 AP Div的重叠与嵌套 68

3.2.5 AP Div的基本操作 70

3.2.6 AP Div布局实例 71

3.3 实例演示 73

3.3.1 实例情景--制作在线作业

系统主页 73

3.3.2 实例效果 73

3.3.3 实现方案 74

3.4 任务训练 76

3.4.1 训练目的 76

3.4.2 训练内容 76

3.5 知识拓展 78

单元测试 78

第4章 认识Div+CSS布局 79

4.1 Div概述 79

4.1.1 什么是Div 79

4.1.2 网页中插入Div 81

4.1.3 Div的嵌套 83

4.2 CSS概述 84

4.2.1 什么是CSS 85

4.2.2 创建CSS样式 85

4.2.3 CSS样式在网页中的应用 94

4.3 盒子模型 97

4.3.1 盒子模型概述 97

4.3.2 margin、padding与border 98

4.3.3 块级元素与内联元素 103

4.3.4 Div的浮动与定位 105

4.4 常用布局方式 111

4.4.1 居中布局 111

4.4.2 固定宽度布局 113

4.4.3 可变宽度布局 114

4.5 实例演示 116

4.5.1 实例情景--制作在线作业

系统首页 116

4.5.2 实例效果 116

4.5.3 实现方案 117

4.6 任务训练 124

4.6.1 训练目的 124

4.6.2 训练内容 124

4.7 知识拓展 125

单元测试 126

第5章 认识表单 127

5.1 创建表单 127

5.1.1 表单概述 127

5.1.2 插入表单 128

5.1.3 表单属性 128

5.2 创建表单对象 129

5.2.1 文本字段 129

5.2.2 隐藏域 131

5.2.3 复选框和复选框组 132

5.2.4 单选按钮和单选按钮组 134

5.2.5 列表/菜单 135

5.2.6 跳转菜单 136

5.2.7 图像域 137

5.2.8 文件域 137

5.2.9 按钮 138

5.2.10 标签 138

5.2.11 字段集 138

5.3 Spry表单验证 139

5.3.1 Spry验证文本域 139

5.3.2 Spry验证文本区域 140

5.3.3 Spry验证复选框 141

5.3.4 Spry验证选择 141

5.3.5 Spry验证密码 142

5.3.6 Spry验证确认 142

5.3.7 Spry验证单选按钮组 143

5.4 使用行为验证表单 144

5.5 实例演示 147

5.5.1 实例情景--制作邮箱注册

单网页 147

5.5.2 实例效果 147

5.5.3 实现方案 147

5.6 任务训练 149

5.6.1 训练目的 149

5.6.2 训练内容 150

5.7 知识拓展 151

单元测试 151

第6章 认识行为特效 152

6.1 认识行为 152

6.1.1 行为基本概念 152

6.1.2 "行为"面板 153

6.1.3 添加行为步骤 154

6.1.4 修改行为 155

6.2 使用内置行为 156

6.2.1 交换图像 156

6.2.2 弹出消息 157

6.2.3 打开浏览器窗口 157

6.2.4 转到URL 159

6.2.5 拖动AP元素 159

6.2.6 设置状态栏文本 160

6.2.7 改变属性 161

6.2.8 显示/渐隐 162

6.2.9 调用JavaScript 163

6.3 实例演示 165

6.3.1 实例情景--用JavaScript

完成行为特效 165

6.3.2 实例效果 165

6.3.3 实现方案 166

6.4 任务训练 168

6.4.1 训练目的 168

6.4.2 训练内容 168

6.5 知识拓展 169

单元测试 169

第7章 认识模板和库 170

7.1 模板 170

7.1.1 创建模板 170

7.1.2 创建可编辑区域 171

7.1.3 管理模板 172

7.2 库 176

7.2.1 创建库文件 177

7.2.2 编辑库项目 178

7.2.3 为页面添加库项目 179

7.3 实例演示 179

7.3.1 实例情景--制作风花雪月

网站 179

7.3.2 实例效果 180

7.3.3 实现方案 180

7.4 任务训练--模板应用 184

7.4.1 训练目的 184

7.4.2 训练内容 184

7.5 知识拓展 185

单元测试 185

第8章 初识HTML5 186

8.1 HTML5概述 186

8.1.1 HTML5简介 186

8.1.2 HTML5的新特性 186

8.1.3 HTML5的优点 187

8.2 HTML5视频 187

8.2.1 HTML5视频简介 187

8.2.2 HTML5视频实例 188

8.2.3 使用 DOM控制 190

8.3 HTML5音频 192

8.3.1 HTML5音频简介 192

8.3.2 HTML5音频实例 193

8.4 初识Canvas 194

8.4.1 Canvas简介 194

8.4.2 绘制图形 195

8.4.3 使用图像 199

8.5 实例演示 201

8.5.1 实例情景--制作七巧板 201

8.5.2 实例效果 201

8.5.3 实现方案 202

8.6 任务训练 204

8.6.1 训练目的 204

8.6.2 训练内容 204

8.7 知识拓展 206

单元测试 206

参考文献 207

本书以实用为原则，每章围绕知识点储备、实例演示、任务训练、知识拓展、单元测试五部分展开，本书内容涵盖网页设计概述、网页基本元素、常用网页布局、Div+CSS、表单、行为特效、模板和库、HTML 5等。 本书可作为计算机相关专业网页设计与制作的教材，也可供网页设计爱好者学习参考，尤其适合网页设计初学者使用。

本书以实用为原则，融"教、学、做"于一体。实例以Dreamweaver CS6为载体，使读者循序渐进地充分理解并掌握HTML、CSS、JavaScript等的功能与HTML5的前景，为后续课程奠定良好的基础，并激发学生学习的积极性和主动性。

全书结构新颖，每章围绕知识点储备、实例演示、任务训练、知识拓展、单元测试五部分展开。在教学内容的组织、知识点的由简单到复杂、由易到难、"设计"视图与"代码"视图相结合，使学生循序渐进地、合理地组织学习知识、训练技能、拓展知识，有兴趣、由表及里地学习。