本书基于以计算思维的培养为导向的教学改革，按照由浅入深的过程，逐步讲解网页设计与制作相关的基础知识，包括HTML基础，CSS基础，颜色、图像和多媒体的使用，表格的使用，超链接，Div+CSS布局，模板和库，表单，行为，JavaScript，jQuery框架，网站的发布与维护，并通过综合实例完整地讲述了一个实际网站的制作过程，最后介绍了用于快速建立网站的CMS内容管理系统。附录中提供了HTML常用标签和CSS常用属性，并介绍Dreamweaver CS6等工具软件的基本使用方法。本书提供案例相关文件、部分习题答案及电子课件，可登录华信教育资源网（www.hxedu.com.cn）注册后下载。
本书适合作为高等院校网页设计与制作课程的教学用书，也可以作为网页设计工作人员的参考用书。

第1章 网页设计与制作基础001
1.1 网站与网页001
1.1.1 网站001
1.1.2 网页003
1.1.3 网页的基本构成元素004
1.2 网页相关的概念005
1.2.1 Internet、IP和域名005
1.2.2 WWW和FTP006
1.2.3 HTTP和HTML006
1.2.4 浏览器和Web服务器006
1.2.5 静态网页和动态网页009
1.3 网站制作基本流程012
1.4 网页设计制作工具017
1.4.1 原型设计工具017
1.4.2 图形图像制作工具018 第1章 网页设计与制作基础001
1.1 网站与网页001
1.1.1 网站001
1.1.2 网页003
1.1.3 网页的基本构成元素004
1.2 网页相关的概念005
1.2.1 Internet、IP和域名005
1.2.2 WWW和FTP006
1.2.3 HTTP和HTML006
1.2.4 浏览器和Web服务器006
1.2.5 静态网页和动态网页009
1.3 网站制作基本流程012
1.4 网页设计制作工具017
1.4.1 原型设计工具017
1.4.2 图形图像制作工具018
1.4.3 网页编辑工具020
本章小结021
课后习题021
第2章 HTML基础023
2.1 标记语言的作用023
2.2 HTML基础024
2.2.1 HTML和XHTML024
2.2.2 HTML5025
2.2.3 HTML的基本语法025
2.2.4 XHTML的语法026
2.3 HTML的结构027
2.3.1 基本结构027
2.3.2 文档类型定义028
2.3.3 头部内容029
2.3.4 主体内容029
2.4 标题与段落030
2.4.1 标题030
2.4.2 段落030
2.5 文字格式031
2.6 建立和使用列表032
2.6.1 无序列表032
2.6.2 有序列表033
2.6.3 定义列表033
2.7 特殊字符和注释034
2.8 HTML5中的新增结构元素034
2.9 使用Dreamweaver编写网页035
2.9.1 新建网页036
2.9.2 设置网页标题037
2.9.3 设置文章中的标题038
2.9.4 设置无序列表和有序列表039
2.9.5 设置文字格式040
2.9.6 特殊字符的输入040
本章小结041
课后习题041
第3章 CSS基础043
3.1 CSS基本概念043
3.1.1 CSS的概述043
3.1.2 CSS的基本语法043
3.2 CSS选择器045
3.2.1 基本选择器045
3.2.2 其他选择器048
3.3 在HTML中应用CSS052
3.3.1 行内样式052
3.3.2 内部样式052
3.3.3 外部样式052
3.4 使用CSS控制文字样式053
3.4.1 文字字体054
3.4.2 Web字体055
3.4.3 文字大小056
3.4.4 文字粗细056
3.4.5 斜体056
3.4.6 文字修饰057
3.4.7 字间距057
3.4.8 英文字母的大小写058
3.4.9 阴影效果058
3.5 使用CSS控制段落样式059
3.5.1 首行缩进059
3.5.2 段落水平对齐059
3.5.3 行高059
3.5.4 分栏060
3.6 继承性和层叠性061
3.6.1 CSS的继承性061
3.6.2 CSS的层叠性062
3.7 使用Dreamweaver编辑CSS063
3.7.1 CSS样式面板063
3.7.2 创建与应用CSS规则064
3.7.3 编辑和移动CSS规则069
3.7.4 附加样式表071
本章小结072
课后习题072
第4章 网页中的颜色、图像和多媒体074
4.1 颜色的基础知识074
4.1.1 三原色074
4.1.2 色相、明度、饱和度075
4.1.3 冷暖色076
4.2 网页中的颜色076
4.2.1 网页中颜色的表示077
4.2.2 网页安全色078
4.2.3 网页配色基础079
4.2.4 Dreamweaver中颜色的操作081
4.3 网页中的图像082
4.3.1 图像在网页中的应用082
4.3.2 网页中的图像类型083
4.3.3 网页中的图像标签085
4.4 使用Dreamweaver操作图像086
4.4.1 网页图像的添加086
4.4.2 网页图像属性的设置087
4.4.3 网页图像占位符090
4.4.4 网页中的背景图像设置090
4.5 在网页中添加多媒体对象095
4.5.1 在网页中插入声音对象095
4.5.2 在网页中插入视频对象098
4.5.3 在网页中插入Flash对象100
4.5.4 在网页中插入其他媒体对象101
本章小结102
课后习题102
第5章 网页中表格的使用104
5.1 表格概述104
5.1.1 表格的基本功能104
5.1.2 表格的基本标签104
5.1.3 表格的基本属性105
5.2 Dreamweaver中有关表格的操作111
5.2.1 表格的创建111
5.2.2 在表格中添加内容113
5.2.3　选择表格元素114
5.2.4 复制、粘贴表格116
5.2.5 调整表格117
5.2.6 插入和删除表格行或列117
5.2.7 删除表格和清除表格内容118
5.2.8 合并和拆分单元格119
5.2.9 表格属性的设置119
5.2.10 导入和导出表格的数据121
5.2.11 排序表格123
5.3 使用表格布局网页124
5.3.1 表格布局技术的产生124
5.3.2 用表格布局网页的基本原理126
5.3.3 表格布局的优缺点127
5.3.4 使用表格布局网页的基本步骤127
5.3.5 表格布局应用实例129
本章小结134
课后习题134
第6章 超链接136
6.1 超链接概述136
6.1.1 超链接的概念136
6.1.2 超链接的种类136
6.1.3 链接路径138
6.2 超链接的标签及常用属性139
6.3 超链接的CSS样式140
6.3.1 超链接属性控制140
6.3.2 超链接特效143
6.4 Dreamweaver中有关超链接的操作146
6.4.1 创建文本超链接146
6.4.2 创建图像超链接149
6.4.3 创建热点超链接149
6.4.4 鼠标经过图像超链接150
6.4.5 电子邮件超链接151
6.4.6 创建锚点超链接152
6.4.7 创建下载文件超链接153
6.4.8 创建空链接153
6.4.9 创建脚本超链接154
6.4.10 超链接的编辑和更新154
本章小结156
课后习题156
第7章 CSS布局基础157
7.1 基础知识157
7.1.1 网页中的块级元素和行内元素157
7.1.2 盒模型158
7.1.3 外边距的叠加162
7.1.4 元素的内容溢出163
7.2 浮动定位164
7.2.1 设置浮动164
7.2.2 浮动的清除165
7.3 位置定位168
7.3.1 静态定位168
7.3.2 相对定位168
7.3.3 绝对定位169
7.3.4 固定定位171
7.3.5 z-index172
本章小结173
课后习题173
第8章 CSS布局及应用174
8.1 网页整体布局174
8.1.1 固定宽度布局174
8.1.2 流动布局177
8.2 网站中的导航178
8.2.1 垂直导航179
8.2.2 水平导航180
8.2.3 下拉菜单181
8.3 首字下沉效果183
8.4 自定义符号列表184
8.5 图文混排185
8.6 全图排版186
8.7 Dreamweaver中的页面组件188
8.7.1 Spry菜单栏189
8.7.2 Spry选项卡式面板190
8.7.3 Spry折叠式面板191
本章小结193
课后习题193
第9章 模板和库项目194
9.1 模板的概念194
9.2 模板的创建和使用194
9.2.1 创建模板194
9.2.2 创建模板的区域196
9.2.3 应用模板200
9.2.4 管理模板204
9.2.5 创建嵌套模板206
9.3 库项目的创建和使用206
9.3.1 关于库项目206
9.3.2 创建库项目206
9.3.3 应用库项目207
9.3.4 管理库项目207
本章小结208
课后习题208
第10章 表单211
10.1 表单211
10.1.1 表单基本概念211
10.1.2 创建表单211
10.2 表单元素212
10.3 使用Dreamweaver编辑表单网页216
10.3.1 在Dreamweaver中创建表单216
10.3.2 在Dreamweaver中插入表单元素216
10.4 表单网页的页面布局221
10.4.1 案例1：利用Div+CSS布局实现论坛登录页面221
10.4.2 案例2：用表格布局实现论坛注册页面225
10.5 Spry表单元素229
10.5.1 Spry验证文本域230
10.5.2 Spry验证文本区域231
10.5.3 Spry验证复选框231
10.5.4 Spry验证选择232
10.5.5 Spry验证密码232
10.5.6 Spry验证确认233
10.5.7 Spry验证单选按钮组233
本章小

前 言
随着信息技术的不断发展，互联网已经成为当前传播信息的重要途径。越来越多的网站出现在互联网上，网站开发及网页设计与制作技术受到人们越来越多的关注。随着万维网联盟W3C的建立以及Web标准的制定，HTML、CSS以及JavaScript成为网页设计中最重要的三个组成部分，这就需要网页设计人员更加全面地了解相关的知识。网页设计与制作是一门综合性的学科，它涉及心理学、美学、工程科学、程序设计等诸多方面，计算思维成为这一过程中人们必须具备的基础性思维方式，用来指导相关知识的学习。
本书主要内容
本书主要围绕HTML、CSS和JavaScript来介绍网页设计过程中的相关知识和应用，并结合网页设计软件Dreamweaver的使用来讲解网页设计过程的具体操作。在每个知识环节，都穿插了大量的实例来对知识点进行剖析和讲解，使得读者能够在学习这一部分内容后，对其本质有更深入的了解，从而能够在实际的网页设计过程中加以运用。
第1章介绍网页制作的基础知识，包括网站的分类、网页的基本构成元素、与网页相关的基本概念，并介绍网站制作的基本流程以及与网页设计相关工具。
第2章介绍HTML语言的基本语法和基本结构，包括标题、段落、文字格式、列表等元素的学习。
第3章介绍CSS的基本概念、CSS选择器、在网页中应用CSS等相关知识，并详细介绍通过CSS对文字和段落进行样式的控制。
第4章介绍有关网页颜色、图像和多媒体的基础知识，包括网页中颜色的表示、网页安全色、网页配色，网页中的图像类型、图像在网页中的应用等知识，以及在网页中使用声音、视频等多媒体对象。
第5章介绍表格在网页中的使用，包括表格的基本操作及使用表格进行网页布局的方法。
第6章介绍超链接的基本概念及网页中不同类型的超链接，并介绍通过CSS对超链接的样式进行设置的基本方法。
第7章介绍CSS布局的基本模型——盒模型，对盒模型的组成进行深入讲解，并介绍浮动定位、位置定位等CSS布局的主要定位方式。
第8章介绍CSS布局在网页布局中的实际应用，包括网页的整体布局、网页中的组件布局等，如导航菜单、图文混排、全图排版等，并介绍Dreamweaver软件中Spry页面组件的使用。
第9章介绍Dreamweaver中模板和库项目的概念和作用，并通过实例展示模板和库项目在网页设计过程中如何提高网页制作效率。
第 10 章介绍网页中表单的基本概念及组成表单的不同元素，并通过实例讲解网站访问者与网站之间进行信息交互的方法，还介绍Dreamweaver中可以自动完成验证功能的Spry表单对象。
第11章介绍Dreamweaver中行为的基本概念和一些基本的内置行为，并介绍通过行为给网页中的元素添加动态效果的方法。
第12章介绍JavaScript的基本概念和在网页中的使用，包括JavaScript的基本语法、内置对象等概念，并通过实例讲解通过JavaScript对用户的输入数据进行验证、联动菜单的建立等方法。
第13章介绍JavaScript框架的作用及jQuery框架的基本功能，包括使用jQuery操作网页元素以及基本的网页动画效果的实现，并介绍一些常用的jQuery插件的使用，如图像幻灯片插件、内容切换插件等。
第14章介绍网站的测试、发布和维护的基本概念和方法，包括通过Dreamweaver测试网页在不同浏览器下的兼容性、是否有无效的超链接、对网页文件进行清理操作等。
第15章通过一个综合案例，介绍网页从原型设计到页面效果图设计，再到网页设计的一系列过程，完整体现网页编写的真实过程。
第16章介绍内容管理系统CMS的基本概念，并结合Joomla这一CMS系统，介绍通过CMS建立网站的基本过程，包括站点的搭建、分类管理、菜单管理、文章管理等基本操作。
在本书的附录中，介绍HTML的常用标签、CSS的常用属性，以及与网页设计相关的Dreamweaver、Firebug插件等软件的基本使用方法。
本书提供案例相关文件、部分习题答案及电子课件，可登录华信教育资源网（www.hxedu.com.cn）注册后下载。
本书主要特色
1．基于计算思维的原理和概念的讲解
在基本概念的讲解上，通过计算思维方法的引入和图示化的讲解，以简单明了的方式讲述基本概念的原理，使读者可以快速地了解并掌握。
2．CSS布局原理的深入讲解
CSS布局是一种不同于传统表格布局的基于Web标准的网页布局方式。本书通过对CSS布局的基本原理和不同布局方式的深入讲解，展示CSS布局的基本方法和不同布局方式之间的区别。
3．网页组件的模块式讲解
本书详细讲解网页整体及各组成部分的实现过程，如水平导航和垂直导航、列表、图文混排、Spry菜单栏、Spry选项卡式面板等。读者可以通过掌握基本的网页组件，快速地设计出不同类型的网页。
4．大量的实用案例
本书提供大量的实用案例，除各章中讲解原理的基础案例和具有逼真效果的真实案例外，还包括一个从设计阶段开始到全部完成的网站综合案例，使读者可以通过案例了解网页设计的基本原理，并掌握在实际工作中网页设计的流程。
本书使用对象
本书适合作为高等院校网页设计与制作课程的教学用书，也可以作为网页设计工作人员的参考用书。
本书由王海波、张伟娜、王兆华编著。第1、2、3、7、8、13、15、16章由王海波编写，第4、5、6章由王兆华编写，第9、10、11、12、14章由张伟娜编写，刘立新主审。
由于编者水平有限，书中难免有不妥之处，敬请读者批评指正。
作 者