网页设计与制作

本书是按照教育部高等学校计算机基础课程教学指导委员会提出的《关于进一步加强高校计算机基础教学的意见》中有关“网页设计基础”课程的教学要求及人才培养的要求，针对高等学校文科（艺术类）学生特点组织编写的。

本书从头到尾讲解了如何规划、设计和制作一个简单的个人网站，这是一个从概念到代码的过程。通过讲述构建这个网站的策略性步骤，提供了适合于大多数项目的工作流程实例。读者可以观察网站是怎样从无到有创建起来的。

本书从头到尾地讲解了如何规划、设计和制作一个简单的个人网站，这是一个从概念到代码的过程。通过讲述构建这个网站的策略性步骤，提供了适合于大多数项目的工作流程实例。读者可以观察网站是怎样从无到有创建起来的。

其中涉及到网页的基本原理、网页设计的基本要素、网页制作的工具、HTML语言（HTML5）、CSS等，还包括如何使用JavaScript实现网页的一些特效。需要特别指出的是，由于HTML5不推荐使用Flash动画，本书并没有安排专门的章节讲解Adobe Flash软件的应用和动画的制作。

按照以上思路，全书内容共分为7章。

第1章“网页设计概述”介绍了网页及网站设计的基础知识——Internet与网页的关系、网络协议与网页关系、网站与网页的关系、网页的基本元素、网页设计工具等，还介绍了不同浏览器对网页的兼容性导致网页显示效果的区别。

第2章“网站规划与页面布局”介绍了网页设计的目标，网页设计的流程，如何设定网页风格，如何为网页设计合适的色彩等内容，并且以一个个人网站为例，详细描述了网页设计的过程。

第3章“网页设计工具——Photoshop”介绍了如何应用Photoshop进行网页的设计。其中包括Photoshop的基础知识，以及Photoshop在网页设计时的常见应用，通过大量的实例使读者掌握Photoshop在网页设计中的实际使用。以第2章中的网站规划为基础展开设计，详细描述了在Photoshop中设计网页效果图的步骤。

第4章“超文本标记语言HTML与HTML5”包括HTML概述以及HTML5的介绍， HTML文档的基本组成，如何在网页中添加文字、图像、音频、视频、表格、表单等内容，如何使用HTML5的canvas元素在网页中画图，在最后一节详细展示了一个使用HTML5编写网页的例子。

第5章“可视化网页制作工具——Dreamweaver”包括Dreamweaver概述，Dreamweaver的工作界面介绍以及Dreamweaver CC 2014的新功能，如何在Dreamweaver中新建和管理站点，如何在网页中添加文字、图像、音频、视频、超链接、表格、表单等内容，并展示了如何不手写代码而尽量使用Dreamweaver提供的功能完成第4章中的例子。

第6章“CSS应用基础”介绍了CSS的概念、CSS的使用方法、CSS的基本语法，以及如何使用CSS样式进行美化，使第4章中只具备基础结构性元素的网页变得和Photoshop设计图的效果类似。

第7章“JavaScript应用基础”介绍了JavaScript的基本概念、JavaScript基本语法以及目前应用最广泛的JavaScript库——jQuery的基本用法，还详细讲解了一个图片轮播的综合应用实例。

本书的一部分参考资料来源于网络，无法一一查明原作者，有些无法准确列明出处，敬请谅解。感谢每一位具有共享精神的互联网信息提供者。

由于作者水平有限，书中难免有疏漏和不妥之处，敬请读者批评指正。如对本书有任何意见和建议，可通过电子邮件sunna_07@163.com与作者联系。

本书是网站前端开发的入门书籍，适合刚接触前端开发的设计人员和高等院校的本科生。

编 者

2015年10月

前言
第1章 网页设计概述 1
1.1 计算机网络基础 1
1.1.1 因特网和万维网 2
1.1.2 超文本标记语言HTML 2
1.1.3 统一资源定位符URL 3
1.1.4 超文本传输协议（HTTP） 5
1.1.5 浏览器 5
1.2 网站与网页 6
1.2.1 网页的概念 6
1.2.2 网站的结构 7
1.3 网页的基本元素 8
1.3.1 文本 9
1.3.2 图像 9
1.3.3 音频 10
1.3.4 视频 11
1.3.5 动画 12
1.3.6 超链接 12
1.4 网页设计与制作方法 13
1.4.1 网页制作的基本方法 13
1.4.2 网页设计与制作工具 13
1.5 浏览器的兼容性 14
1.6 本章小结 14
第2章 网站规划与页面布局 15
2.1 网页设计概述 15
2.1.1 网页设计的目标 15
2.1.2 网站分类 15
2.1.3 网页设计流程 16
2.2 网站风格 18
2.2.1 保持页面风格的一致性 18
2.2.2 协调运用颜色 19
2.2.3 均衡分割版式 19
2.2.4 适当选择线条和形状 19
2.2.5 选择合适的字体 20
2.2.6 适当美化和去除冗余 21
2.3 网页布局 21
2.4 网页色彩运用 22
2.4.1 色彩基本理论 22
2.4.2 色彩的情感 24
2.4.3 色彩选择技巧 24
2.5 综合应用 25
2.6 本章小结 27
第3章 网页设计工具——Photoshop 28
3.1 Photoshop简介 28
3.1.1 Photoshop CC 2014工作界面 28
3.1.2 Photoshop CC 2014新特性 31
3.2 Photoshop文件操作 31
3.2.1 新建图像 31
3.2.2 打开图像 32
3.2.3 保存图像 32
3.3 Photoshop工具面板 32
3.3.1 工具面板的基本用法 32
3.3.2 工具面板的使用实例 34
3.4 控制面板 39
3.5 图层 39
3.5.1 图层的基本概念 39
3.5.2 图层种类 40
3.5.3 “图层”面板 41
3.5.4 常用的图层操作 42
3.5.5 图层操作实例 43
3.6 其他常用操作 43
3.6.1 旋转和变换 43
3.6.2 标尺和参考线 45
3.6.3 图像调整 47
3.6.4 滤镜 50
3.7 综合应用 51
3.7.1 使用栅格做布局规划 51
3.7.2 设计Header部分 52
3.7.3 设计主体区域 55
3.7.4 设计Footer部分 60
3.8 本章小结 61
第4章 超文本标记语言HTML与HTML5 62
4.1 HTML概述 62
4.1.1 HTML的由来 63
4.1.2 HTML的定义 63
4.1.3 HTML的特点 63
4.1.4 HTML的发展史 63
4.1.5 HTML5 64
4.2 HTML文档的基本组成 64
4.2.1 声明 65
4.2.2 标签 65
4.2.3 标签 65
4.2.4 主体内容 67
4.2.5 HTML的书写格式 67
4.2.6 HTML块级元素与内联元素 68
4.3 文本内容 68
4.3.1 段落：＜p＞ 68
4.3.2 标题：＜h1＞、＜h2＞、＜h3＞、＜h4＞、＜h5＞、＜h6＞ 69
4.3.3 ＜pre＞标签 69
4.3.4 列表 70
4.3.5 换行：＜br＞ 72
4.3.6 水平线 73
4.3.7 层标签：＜div＞ 73
4.3.8 ＜span＞标签 73
4.3.9 转义字符 74
4.3.10 其他 75
4.4 多媒体内容 75
4.4.1 图像 75
4.4.2 音频 76
4.4.3 ＜audio＞标签的属性 77
4.4.4 视频 77
4.4.5 ＜video＞标签的属性 78
4.5 超链接 79
4.5.1 文字添加链接 79
4.5.2 修改链接的窗口打开方式 79
4.5.3 给链接添加提示文字 80
4.5.4 锚 80
4.5.5 电子邮件链接 81
4.6 表格 81
4.6.1 定义和用法 81
4.6.2 表格标题 82
4.6.3 表头和表尾 82
4.6.4 ＜tr＞、＜th＞和＜td＞ 82
4.6.5 合并单元格 83
4.7 表单 83
4.7.1 表单的定义 83
4.7.2 文本框 84
4.7.3 文本域（多行文本） 85
4.7.4 标签 85
4.7.5 密码框 85
4.7.6 单选按钮 86
4.7.7 复选框 86
4.7.8 下拉框 86
4.7.9 按钮 87
4.7.10 文件上传 87
4.7.11 隐藏字段 87
4.8 HTML5表单新特性 87
4.8.1 input类型——email 88
4.8.2 input类型——url 88
4.8.3 input类型——number 88
4.8.4 input类型——range 89
4.8.5 input类型——datepickers（日期选择器） 89
4.8.6 input类型——search 90
4.9 HTML5表单新属性 90
4.9.1 autocomplete属性 90
4.9.2 autofocus属性 90
4.9.3 min、max和step属性 90
4.9.4 placeholder属性 91
4.9.5 required属性 91
4.10 其他HTML5元素 92
4.10.1 布局元素 92
4.10.2 画布 93
4.10.3 数据列表 94
4.10.4 拖放 95
4.11 HTML综合应用 95
4.11.1 页面代码 96
4.11.2 声明文档类型 98
4.11.3 文件头部分 98
4.11.4 页面的主体部分 98
4.12 本章小结 100
第5章 可视化网页制作工具——Dreamweaver 102
5.1 Dreamweaver基础 102
5.1.1 Dreamweaver简介 102
5.1.2 Dreamweaver的工作区 103
5.1.3 Dreamweaver CC 2014新增功能 107
5.2 站点管理 108
5.2.1 创建站点 108
5.2.2 管理站点 110
5.2.3 管理站点中的文件 110
5.3 新建HTML文档 111
5.3.1 创建新的空白文档 111
5.3.2 以其他方式创建文档 113
5.4 设置页面属性 113
5.5 文件头内容 115
5.6 文本 116
5.6.1 文本 116
5.6.2 字符 117
5.6.3 段落 117
5.6.4 标题 118
5.6.5 列表 118
5.7 图像 119
5.7.1 插入图像 119
5.7.2 图像设置 119
5.8 超链接 120
5.8.1 文字超链接 120
5.8.2 电子邮件链接 121
5.9 表格 121
5.9.1 插入表格 121
5.9.2 表格属性 122
5.9.3 表格的其他操作 123
5.10 多媒体应用 124
5.10.1 HTML5音频 124
5.10.2 HTML5视频 125
5.10.3 Flash SWF（视频） 125
5.11 表单 126
5.11.1 表单 126
5.11.2 标签 127
5.11.3 文本域 127
5.11.4 电子邮件 129
5.11.5 密码 129
5.11.6 单选按钮 129
5.11.7 复选框 130
5.11.8 下拉列表 131
5.11.9 Url 131
5.11.10 Tel 131
5.11.11 搜索 131
5.11.12 数字 132
5.11.13 范围 132
5.11.14 颜色 132
5.11.15 日期和时间 133
5.11.16 按钮 134
5.11.17 文件 134
5.11.18 图像按钮 134
5.11.19 隐藏 134
5.12 结构 134
5.13 在Dreamweaver中插入jQuery UI 134
5.14 在Dreamweaver中使用CSS 135
5.15 网页制作综合应用 136
5.15.1 新建站点和文档 136
5.15.2 设置body的样式 136
5.15.3 header区域 137
5.15.4 主体区域 141
5.15.5 footer区域 144
5.16 本章小结 145
第6章 CSS应用基础 146
6.1 CSS概述 146
6.1.1 CSS简介 146
6.1.2 CSS的优点 146
6.1.3 CSS3 147
6.2 引入CSS 148
6.2.1 在页面中引入CSS 148
6.2.2 CSS的优先级 150
6.3 CSS语法 151
6.3.1 CSS基本语法 151
6.3.2 选择器 151
6.3.3 值的不同写法 153
6.3.4 CSS高级语法 153
6.4 CSS样式 154
6.4.1 背景 154
6.4.2 文本 156
6.4.3 字体 156
6.4.4 链接 158
6.4.5 列表 158
6.4.6 表格 159
6.4.7 CSS尺寸 161
6.5 CSS盒模型 162
6.5.1 内边距 163
6.5.2 外边距 164
6.5.3 边框 165
6.6 CSS定位 166
6.6.1 CSS定位概述 166
6.6.2 相对定位 167
6.6.3 绝对定位 167
6.6.4 浮动 168
6.7 CSS3新特性 169
6.7.1 边框 169
6.7.2 背景 170
6.7.3 文本效果 172
6.7.4 字体 172
6.7.5 过渡 172
6.7.6 多列 173
6.8 CSS综合应用 174
6.8.1 引用外部样式表 174
6.8.2 设置全局样式 175
6.8.3 header样式 176
6.8.4 主体区域 179
6.8.5 aside区域 179
6.8.6 section区域 180
6.8.7 footer区域 182
6.9 本章小结 183
第7章 JavaScript应用基础 184
7.1 JavaScript概述 184
7.1.1 JavaScript的优点 184
7.1.2 常用的JavaScript库 185
7.2 JavaScript基本语法 185
7.2.1 引入JavaScript 185
7.2.2 JavaScript变量和数据类型 186
7.2.3 JavaScript注释 187
7.2.4 JavaScript语句 187
7.2.5 JavaScript函数和作用域 188
7.2.6 JavaScript对象 190
7.2.7 DOM 190
7.3 jQuery 194
7.3.1 jQuery简介 194
7.3.2 引入jQuery 194
7.3.3 jQuery语法和选择器 194
7.3.4 jQuery事件 196
7.3.5 jQuery DOM 196
7.4 JavaScript综合应用 199
7.4.1 HTML代码 200
7.4.2 CSS样式 201
7.4.3 JavaScript代码 201
7.4.4 使用jQuery插件 204
7.4.5 图片轮播在页面中的应用 205
7.5 本章小结 205
参考资料 206

1. 人工智能算法与实践 [主编　梁琨　张翼英]
2. 数据清洗 [黄源　刘智杨　孙大松]
3. 电路设计与PCB制作实操教程 [主编 周永宏]
4. 电路与电子技术Ⅰ—数字电子技术 [主编 郑玉珍 王淑琴]
5. Java编程基础案例式教程 [主编 陈艳华 唐春兰]
6. Python语言同步案例习题精解 [主编 肖朝晖]
7. Web用户界面设计与制作 [主编 赵娟]
8. Unity应用开发与实战（微课版） [主 编 程永恒]
9. 文学基础与影视欣赏 [杨华轲 朱伟利 毕雪燕 罗玲谊]
10. 大学计算机基础与计算思维 [主编 闵笛 汪莹]
11. 大学计算机信息素养（第二版） [主编 卢山]
12. 大学计算机基础实验指导及习题解析 [主编 闵笛 李明]
13. 大学计算机信息素养实验指导（第二版） [主编 卢山]
14. 计算机应用基础教程（Windows 10+Office 2019） [主编 聂长浪 贺秋芳 李久仲]
15. 计算机应用基础（Windows 7+Office 2016） [主编 王洪平 杨华]
16. 计算机信息素养基础 [主编 陈艳 秦凯 黄海玉]
17. 计算机基础与应用 [主编 秦凯 梁宁玉 王毅]
18. 大学计算机基础上机实践教程（第六版） [主编 何振林 罗奕]
19. C语言程序设计（微课版） [主编　夏启寿]
20. 大学计算机基础教程实验指导与测试题集 [主编 饶拱维 吴华光 巫满秀]
21. 计算机组成原理 [主编 史士英 唐为方]
22. 大学计算机基础教程（Windows 10+Office 2016） [主编 饶拱维 郭其标 房宜汕]
23. 新编高等学校英语应用能力考试（A级）教程（第二版） [主编 洪金梅 邵毅 向双丰]
24. 模拟电子技术（第二版） [主编 罗桂娥]
25. 大学计算机基础教程（第二版） [主编 安志远 崔岩]
26. 画法几何及工程制图习题集（第二版） [主 编 乌 云 苏日娜]
27. 大学生就业指导 [主编　于斌　唐敬仙　岳习新]
28. 数据通信与计算机网络（第三版） [主 编 季福坤 钱文光]
29. Excel高级应用实验指导 [主编 卢山]
30. 管理信息系统（第三版） [王欣 编著]