本书是根据作者多年的教学经验和精品课建设经验编写而成的。教材突破了过多讲解某个网页设计工具的传统思路，而把重点放在网页设计技能的提高上。通过本书的学习，读者能够真正掌握实际工作中最需要、最实用的技能。



         本书包括“基础知识、基本技能、综合应用”3部分，共11个模块。基础知识部分主要讲解网页设计相关的基础理论知识和网页设计工具的使用；基本技能部分通过大量实例帮助读者掌握内容编辑、超链接、布局设计、样式应用、脚本特效、交互应用、网站模板和网站发布等技能；综合应用部分则通过典型的综合性实例，让读者了解图层、表格和框架在网页内容和布局控制中的应用，以及网页设计中的模板、样式表和脚本特效的应用等。



         本书适合作为高等职业院校网页设计课程的教材，也可作为培训机构的短期培训教材，或网页设计爱好者的参考书。
 

无

第1 部分 基 础 知 识

模块1 网站设计的基础知识............... 2

1.1 网络基础知识.............................. 2

1.1.1 因特网............................... 2

1.1.2 TCP/IP ............................... 3

1.1.3 IP 地址............................... 3

1.1.4 浏览器基本操作................ 5

1.2 网站基础知识.............................. 9

1.2.1 网页和网站的概念............. 9

1.2.2 超链接的概念.................. 10

1.2.3 网页中的常见元素........... 10

1.2.4 网站的基本工作原理....... 11

1.3 网站设计工作流程..................... 12

1.3.1 需求分析.......................... 12

1.3.2 设计规划.......................... 13

1.3.3 实现网站.......................... 18

1.3.4 发布测试.......................... 20

1.4 网站设计相关规范..................... 20

1.4.1 网站布局规范.................. 20

1.4.2 网站文件规范.................. 22

1.4.3 网站链接规范.................. 22

1.5 色彩基础知识............................ 22

1.5.1 色彩基础知识概述........... 22

1.5.2 网页色彩搭配技巧........... 25

模块总结............................................. 33

任务实训 制作一个简单的页面....... 34

知识测评............................................. 37

模块2 网页设计工具的使用............. 38

2.1 网页设计的工具和语言............. 38

2.1.1 网站设计的常见工具....... 38

2.1.2 网站设计的常见语言....... 39

2.2 Dreamweaver 中设计网站的

基本操作.................................... 41

2.2.1 创建和打开站点...............41

2.2.2 创建和打开网页...............44

2.2.3 简单网页设计实践...........46

2.3 HTML 的基础知识.....................47

2.3.1 基本结构..........................47

2.3.2 手写网页代码...................48

模块总结.............................................49

任务实训 在Dreamweaver 中

管理站点.....................................49

知识测评.............................................52

第2 部分 基 本 技 能

模块3 向网页中添加各种内容..........56

3.1 添加文本内容.............................56

3.1.1 插入文本..........................56

3.1.2 文本的设置......................57

3.2 插入图像内容.............................58

3.2.1 网页中可用的图像格式......58

3.2.2 插入图像..........................59

3.2.3 图像的设置......................62

3.2.4 图文混排..........................65

3.3 插入项目列表.............................66

3.3.1 有序列表的插入与设计....66

3.3.2 无序列表的插入与设计....67

3.4 播放各种动画.............................68

3.4.1 网页中的动画格式...........68

3.4.2 插入Flash 动画................68

3.4.3 插入GIF 动画..................70

3.4.4 插入滚动动画...................70

3.5 添加音乐播放功能.....................71

3.5.1 网页中常用的音频格式....71

3.5.2 插入声音..........................71

3.5.3 实现背景音乐效果...........72

3.6 添加视频播放功能.....................72

目 录 CONTENTS

2

网页设计与制作（第

3

版）

3.6.1 网页中常用的视频格式... 72

3.6.2 插入视频......................... 73

3.6.3 播放控制......................... 73

3.7 HTML 标记................................ 74

3.7.1 文本标记......................... 74

3.7.2 图像标记......................... 75

3.7.3 媒体标记......................... 75

3.7.4 动画标记......................... 76

3.7.5 列表标记......................... 77

模块总结............................................. 78

任务实训 制作导航条...................... 78

知识测评............................................. 80

模块4 链接网站内容....................... 82

4.1 什么是超链接............................ 82

4.2 在不同元素上创建超链接......... 82

4.2.1 在文字上添加超链接....... 82

4.2.2 在图像上添加超链接....... 84

4.2.3 创建地图式链接.............. 85

4.3 链接到不同对象......................... 85

4.3.1 链接到其他网页.............. 85

4.3.2 链接到其他网站.............. 87

4.3.3 链接到其他元素.............. 88

4.4 链接的不同打开效果................. 89

4.5 HTML 中的链接标记................. 89

模块总结............................................. 90

任务实训 超链接制作汇总.............. 90

知识测评............................................. 94

模块5 控制网页的整体布局............. 95

5.1 网页布局控制的一般方法......... 95

5.2 用表格显示数据......................... 96

5.2.1 插入表格......................... 96

5.2.2 表格设置......................... 98

5.3 使用Div 控制页面布局............. 99

5.3.1 规划Div 布局.................. 99

5.3.2 设计样式表.................... 100

5.3.3 测试并完善Div 布局..... 101

5.3.4 Div 元素的定位技巧...... 103

5.4 用框架实现后台管理布局....... 103

5.4.1 插入和修改框架网页..... 103

5.4.2 嵌入式框架.................... 104

5.5 HTML 中的布局标记............... 106

5.5.1 表格标记........................ 106

5.5.2 Div 标记......................... 108

5.5.3 框架标记........................ 110

模块总结........................................... 111

任务实训 用表格控制页面布局..... 111

知识测评........................................... 115

模块6 用样式表美化网页.................116

6.1 什么是样式表........................... 117

6.2 如何使用样式........................... 117

6.2.1 通过内联样式表

设计样式........................ 117

6.2.2 通过外联样式表

设计样式........................ 118

6.2.3 直接给标记嵌入样式..... 118

6.3 各种样式的具体操作实践........ 118

6.3.1 新建样式........................ 118

6.3.2 文本样式........................ 120

6.3.3 背景样式........................ 122

6.3.4 段落样式........................ 122

6.3.5 定位样式........................ 124

6.3.6 边框样式........................ 124

6.3.7 方框样式........................ 125

6.3.8 列表样式........................ 126

6.3.9 光标样式........................ 127

6.3.10 滤镜样式...................... 128

6.4 关于HTML5 和CSS3 .............. 129

6.4.1 HTML5 的新功能........... 129

6.4.2 CSS3 的新功能............... 130

模块总结........................................... 138

任务实训 页面美化........................ 138

知识测评........................................... 143

模块7 使用JavaScript添加特效......144

7.1 什么是网页特效....................... 144

7.2 JavaScript 语言基础.................. 144

7.2.1 基本语法入门................. 145

7.2.2 简单特效实现................. 149

7.3 给网页添加常见特效................ 150

3

目录

7.3.1 浮动广告特效................. 150

7.3.2 导航类特效.................... 151

7.3.3 滚动内容特效................. 161

7.3.4 其他特效........................ 161

7.4 HTML 中的JavaScript 标记..... 164

7.4.1 <script>标记................... 164

7.4.2 javascript:语句................ 165

模块总结........................................... 165

任务实训 使用ul 列表制作

纵向弹出式菜单........................ 165

知识测评........................................... 173

模块8 使用表单实现网页的交互....... 175

8.1 表单与动态网页基础知识........ 175

8.2 在网页中插入表单元素............ 176

8.2.1 插入表单元素................. 176

8.2.2 使用JavaScript

访问表单元素................. 181

8.3 表单交互应用实践................... 181

8.3.1 表单验证的基本思路..... 181

8.3.2 表单验证的常用

项目举例........................ 182

8.4 HTML 中的表单标记............... 184

8.4.1 表单标记........................ 185

8.4.2 表单元素标记................. 185

模块总结........................................... 187

任务实训 制作和验证客户表单..... 187

知识测评........................................... 194

模块9 使用模板构建风格一致的网站

页面.................................... 195

9.1 使用Dreamweaver CS5 提供的

模板技术................................... 195

9.1.1 创建模板页面................. 195

9.1.2 应用模板页面................. 197

9.2 比较常用的模板创建方式........ 198

9.2.1 创建自定义模板页面..... 198

9.2.2 使用模板页面................. 203

模块总结........................................... 206

任务实训 模板应用........................ 206

知识测评........................................... 212

模块10 发布与测试网站.................. 213

10.1 本地发布网站......................... 213

10.1.1 直接在浏览器中

测试网站...................... 213

10.1.2 在IIS 或Apache 上

发布网站...................... 216

10.2 利用免费空间发布网站.......... 222

10.2.1 注册免费空间.............. 222

10.2.2 上传与测试网站........... 223

10.3 网站的兼容性测试................. 224

10.3.1 在不同的浏览器中

测试............................. 224

10.3.2 兼容性问题的

解决办法...................... 229

模块总结........................................... 230

任务实训 IIS 中站点的发布........... 230

知识测评........................................... 235

第3 部分 综 合 应 用

模块11 综合实战——博客网站设计... 238

11.1 网站定位................................ 238

11.2 网站规划................................ 238

11.2.1 确定网站内容主题....... 238

11.2.2 设计网站整体布局....... 239

11.2.3 确定网站主色调........... 239

11.2.4 确定网站栏目结构....... 240

11.2.5 制订网站建设计划....... 240

11.3 网站实现................................ 240

11.3.1 制作PSD 模板............. 240

11.3.2 将PSD 模板转换为

静态网页模板.............. 250

11.3.3 网站首页实现.............. 264

11.3.4 网站子页实现.............. 280

11.4 发布测试................................ 280

参考文献.......................................... 283

孙永道 邢台职业技术学院

内容丰富，图文并茂