本书是“新起点电脑教程”系列丛书的一个分册，以通俗易懂的语言、翔实生动的操作案例、精挑细选的使用技巧，指导初学者快速掌握DreamweaverCC中文版的基础知识与使用方法。 
　　本书共14章，主要内容包括网页设计与制作基础、创建与管理站点、在网页中编排文本和多媒体对象、设计网页超级链接、使用表格和CSS布局页面、使用模板和库创建网页、在网页中应用表单和行为、制作jQueryMobile页面以及站点的发布与推广等方面的知识。 
　　本书配套一张多媒体全景教学光盘，收录了本书全部知识点的视频教学课程，同时还赠送了4套相关视频教学课程。超低的学习门槛和超大光盘内容含量，可以帮助读者循序渐进的学习、掌握和提高。 
　　本书面向学习该软件的初中级用户，适合无基础知识又想快速掌握DreamweaverCC入门操作经验的读者，同时对有经验的DreamweaverCC使用者也有很高的参考价值，还可以作为高等院校专业课教材和社会培训机构平面设计培训教材。 

　本书是学习电脑知识的新起点，是您迈向成功的开始！本书免费赠送多媒体全景立体视频教学光盘，倾囊相赠4套图书视频教程，可享受在线实时技术支持与全程学习指导，更可加盟实战技术群与作者和网友面对面交流。教师购书免费提供PPT课件资源。

　Dreamweaver CC是由Adobe公司开发的网页设计与制作软件，主要用于Web站点、Web页面和Web应用程序的设计、编码和开发，利用它可以轻松制作出跨越平台限制、充满动感的网页。它功能强大、易学易用，深受网页制作爱好者和网页设计师的喜爱，已经成为这一领域最流行的软件之一。为帮助读者快速掌握与应用Dreamweaver CC软件，以便在工作中学以致用，我们编写了本书。
　　本书为读者快速入门Dreamweaver CC提供了一个崭新的学习和实践平台，无论从基础知识安排还是应用能力的训练，都充分考虑了用户的需求，可以快速达到理论知识与应用能力的同步提高。
　　本书根据电脑初学者的学习习惯，采用由浅入深、由易到难的方式讲解。读者还可以通过随书赠送的多媒体视频光盘学习。全书结构清晰、内容丰富，主要内容包括以下4个方面。
　　1. 基础入门
　　第1～2章，介绍Dreamweaver CC的基础知识，包括网页的基本要素、网页中的色彩特性以及Dreamweaver CC的工作环境等内容。
　　2. 网页设计与制作
　　第3～7章，介绍网页设计与制作的内容，包括创建与管理站点、在网页中编排文本、使用图像与多媒体丰富网页内容、网页超级链接的应用和使用表格布局页面的方法与技巧。
　　3. CSS样式布局页面
　　第8～9章，主要讲解利用样式布局页面，包括CSS样式表、创建CSS样式、将CSS应用到网页、CSS布局方式和使用AP Div元素布局页面等方面的方法与技巧。
　　4. 动态网页设计
　　第10～14章，全面讲解动态网页设计方面的知识，包括利用模板和库创建网页、使用表单、使用行为创建动态效果、制作jQuery Mobile页面以及站点的发布和推广方面的知识。
　　本书由文杰书院组织编写，参与本书编写工作的有李军、袁帅、文雪、肖微微、李强、高桂华、蔺丹、张艳玲、李统财、安国英、贾亚军、蔺影、李伟、冯臣、宋艳辉等。
　　我们真切希望读者在阅读本书之后，可以开阔视野，增长实践操作技能，并从中学习和总结操作的经验和规律，达到灵活运用的水平。鉴于编者水平有限，书中纰漏和考虑不周之处在所难免，热忱欢迎读者予以批评、指正，以便我们日后能为您编写更好的图书。
　　编 者

　　文杰书院，是一支专职并专业化的图书撰稿团队，拥有一支高水平的作者队伍，自成立以来，力争成为图书出版领域的一个知名工作室，先后成功与清华大学出版社等多家出版媒体合作编著出版图书200多个品种。

第1章 网页设计与制作基础 1 
1.1 网页概述 2 
1.1.1 网页基本要素 2 
1.1.2 网页基本术语 4 
1.1.3 静态网页和动态网页 6 
1.2 网页编辑器和屏幕分辨率 7 
1.2.1 网页编辑器 7 
1.2.2 屏幕分辨率 7 
1.3 网站制作的基本流程 8 
1.3.1 前期策划 8 
1.3.2 收集素材 8 
1.3.3 规划网站 8 
1.3.4 制作HTML页面 9 
1.3.5 测试并上传网站 9 
1.3.6 网站的更新与维护 9 
1.4 网页设计中的色彩应用 9 
1.4.1 网页色彩的特性 9 
1.4.2 网页安全色 10 
1.4.3 色彩模式 11 
1.4.4 网页配色的基本原则 12 
1.4.5 网页配色中的文本颜色 14 
1.5 网页制作常用软件 16 
1.5.1 网页编辑排版软件 
Dreamweaver CC 16 
1.5.2 图像制作软件Photoshop CC 
和Fireworks CC 16 
1.5.3 网页动画制作软件Flash CC 16 
1.5.4 网页标记语言HTML 17 
1.5.5 网页脚本语言JavaScript 17 
1.5.6 动态网页编程语言ASP 17 
1.6 思考与练习 17 
第2章 Dreamweaver CC轻松入门 19 
2.1 Dreamweaver CC工作界面 20 
2.1.1 界面布局 20 
2.1.2 工具栏、窗口和面板 20 
2.1.3 【插入】面板 22 
2.1.4　属性检查器 23 
2.1.5 管理面板和面板组 24 
2.2　Dreamweaver 工作流程 24 
2.3　使用可视化助理布局 24 
2.3.1 使用标尺 25 
2.3.2 设置网格 26 
2.4 实践案例与上机指导 28 
2.4.1 使用辅助线 28 
2.4.2 使用跟踪图像功能 30 
2.4.3 设置缩放比率 30 
2.4.4 设置窗口大小 31 
2.5 思考与练习 32 
第3章 创建与管理站点 33 
3.1 站点及站点结构 34 
3.1.1 站点 34 
3.1.2 站点结构 35 
3.2 创建本地站点 35 
3.2.1 使用向导搭建站点 35 
3.2.2 使用【高级设置】选项 
面板创建站点 37 
3.3　管理站点 40 
3.3.1 打开站点 40 
3.3.2 切换站点 41 
3.3.3 【管理站点】对话框 41 
3.4　管理站点中的文件 42 
3.4.1　在站点中新建文件夹 42 
3.4.2　在站点中新建页面 43 
3.4.3　移动和复制文件或文件夹 43 
3.4.4　删除文件或文件夹 44 
3.5 实践案例与上机指导 44 
3.5.1 使用【新建文档】对话框 
创建新文件 45 
3.5.2 Business Catalyst站点 46 
3.5.3 Edge Animate资源 47 
3.6 思考与练习 47 
第4章 在网页中编排文本 49 
4.1 文本的基本操作 50 
4.1.1 输入文本 50 
4.1.2 设置字体 51 
4.1.3 设置字号 52 
4.1.4 设置字体颜色 52 
4.1.5 设置字体样式 53 
4.1.6 设置段落对齐方式 53 
4.1.7 设置是否显示不可见元素 54 
4.2 插入特殊文本对象 55 
4.2.1 插入特殊字符 55 
4.2.2 插入水平线 56 
4.2.3 插入日期 57 
4.3 设置项目列表 57 
4.3.1 创建项目列表与编号列表 58 
4.3.2 设置列表属性 59 
4.4 设置页面的头信息 59 
4.4.1 设置网页标题 60 
4.4.2 添加关键字 60 
4.4.3 添加说明 61 
4.4.4 插入视口 61 
4.4.5 设置链接 62 
4.4.6 设置页面的Meta信息 63 
4.5 实践案例与上机指导 63 
4.5.1 查找与替换功能 63 
4.5.2 设置页边距 64 
4.5.3 设置网页的默认格式 64 
4.5.4 设置文本缩进格式 65 
4.6 思考与练习 65 
第5章 使用图像与多媒体丰富 
网页内容 67 
5.1 网页中的常用图像格式 68 
5.1.1 JPEG格式图像 68 
5.1.2 GIF格式图像 68 
5.1.3 PNG格式图像 68 
5.2 插入与设置图像 69 
5.2.1 在网页中插入图像文件 69 
5.2.2 设置网页背景图 70 
5.2.3 设置图像对齐方式 71 
5.2.4 更改图像基本属性 72 
5.2.5 使用图像编辑器 72 
5.3 插入其他图像元素 74 
5.3.1 插入鼠标经过图像 74 
5.3.2 插入Fireworks HTML 75 
5.4 多媒体在网页中的应用 75 
5.4.1 插入并设置Flash动画 76 
5.4.2 插入FLV视频 77 
5.4.3 插入音乐 79 
5.5 实践案例与上机指导 80 
5.5.1 插入HTML5 Video 80 
5.5.2 插入HTML5 Audio 82 
5.6 思考与练习 83 
第6章 网页超级链接 85 
6.1 超级链接 86 
6.1.1 超链接的定义 86 
6.1.2 内部、外部与脚本链接 86 
6.2 链接路径 87 
6.2.1 绝对路径 87 
6.2.2 相对路径 88 
6.2.3 站点根目录相对路径 88 
6.3 创建超级链接 88 
6.3.1 使用【指向文件】按钮 
创建链接 89 
6.3.2 使用【属性】面板创建 
链接 89 
6.4 创建不同种类的超链接 89 
6.4.1 文本超链接 90 
6.4.2 图像热点链接 90 
6.4.3 空链接 91 
6.4.4 电子邮件链接 92 
6.4.5 脚本链接 93 
6.5 管理与设置超级链接 93 
6.5.1 自动更新链接 93 
6.5.2 在站点范围内更改链接 94 
6.5.3 检查站点中的链接错误 95 
6.6 实践案例与上机指导 96 
6.6.1 创建锚记链接 96 
6.6.2 制作文件下载链接 98 
6.7 思考与练习 99 
第7章 使用表格布局页面 101 
7.1 表格的创建与应用 102 
7.1.1 表格的定义与用途 102 
7.1.2 创建基本表格 103 
7.1.3 向表格中输入文本 104 
7.1.4 在单元格中插入图像 104 
7.2 设置表格和单元格属性 105 
7.2.1 设置表格属性 105 
7.2.2 设置单元格属性 106 
7.3 调整表格结构 107 
7.3.1 选择表格和单元格 107 
7.3.2 调整单元格和表格的大小 109 
7.3.3 插入与删除表格的行和列 110 
7.3.4 拆分单元格 112 
7.3.5 合并单元格 113 
7.3.6 复制、剪切和粘贴表格 114 
7.4 处理表格数据 116 
7.4.1 导入Excel表格数据 116 
7.4.2 排序表格 117 
7.5 应用数据表格样式控制 118 
7.5.1 表格模型 118 
7.5.2 表格标题 119 
7.5.3 表格样式控制 120 
7.6 实践案例与上机指导 121 
7.6.1 在表格中插入图像 121 
7.6.2 在表格中插入表格 122 
7.6.3 制作网页细线表格 122 
7.7 思考与练习 123 
第8章 应用CSS样式美化网页 125 
8.1 什么是CSS样式表 126 
8.1.1 认识CSS 126 
8.1.2 CSS样式的类型 126 
8.1.3 CSS基本语法 127 
8.2 创建CSS样式 128 
8.2.1 建立标签样式 128 
8.2.2 建立类样式 129 
8.2.3 建立复合内容样式 131 
8.2.4 链接外部样式表 132 
8.2.5 建立ID样式 133 
8.3 将CSS应用到网页 135 
8.3.1 内联样式表 135 
8.3.2 数据透视表的排序 135 
8.3.3 外部样式表 136 
8.4 设置CSS样式 136 
8.4.1 设置背景类型 136 
8.4.2 设置方框样式 137 
8.4.3 设置区块样式 138 
8.4.4 设置边框样式 139 
8.4.5 设置定位样式 140 
8.4.6 设置扩展样式 140 
8.4.7 设置过渡样式 141 
8.5 实践案例与上机指导 142 
8.5.1 CSS静态过滤器 142 
8.5.2 样式冲突 143 
8.5.3 CSS动态过滤器 143 
8.6 思考与练习 143 
第9章 应用Div+CSS灵活布局 
网页 145 
9.1 Div概述 146 
9.1.1 初识Div 146 
9.1.2 Div CSS布局的优势 146 
9.1.3 盒模型 146 
9.2 常见的布局方式 148 
9.2.1 居中版式布局 148 
9.2.2 浮动版式布局 149 
9.2.3 高度自适应布局 151 
9.3 应用Div布局网页 152 
9.3.1　页面布局分析 152 
9.3.2　插入和编辑Div标签 153 
9.3.3　使用CSS定位 155 
9.4 实践案例与上机指导 155 
9.4.1 一列自适应宽度 156 
9.4.2 两列自适应宽度 156 
9.4.3 两列右列宽度自适应 157 
9.4.4 三列浮动中间宽度自适应 157 
9.5 思考与练习 158 
第10章 使用模板和库创建网页 159 
10.1 使用模板 160 
10.1.1 模板的特点 160 
10.1.2 创建模板 160 
10.1.3 嵌套模板 161 
10.2 设置模板 162 
10.2.1 定义可编辑区域 162 
10.2.2 定义可选区域 163 
10.2.3 定义重复区域 163 
10.2.4 设置可编辑标签属性 164 
10.3 管理模板 165 
10.3.1 创建基于模板的网页 165 
10.3.2 更新模板和基于模板的 
网页 166 
10.3.3 删除页面中使用的模板 167 
10.4 创建与应用库项目 168 
10.4.1 认识库项目 168 
10.4.2 创建库项目 169 
10.4.3 插入库项目 170 
10.4.4 修改库项目 171 
10.4.5 更新库项目 171 
10.5 实践案例与上机指导 172 
10.5.1 重命名库项目 172 
10.5.2 删除库项目 173 
10.5.3 恢复删除的库项目 173 
10.6 思考与练习 174 
第11章 在网页中插入表单 177 
11.1 表单概述 178 
11.1.1 关于表单 178 
11.1.2 常用表单元素 178 
11.1.3 HTML5表单元素 180 
11.2 添加表单 181 
11.2.1 插入表单域 182 
11.2.2 插入文本域 183 
11.3 网页元素 185 
11.3.1 表单密码 185 
11.3.2 Url对象 186 
11.3.3 Tel对象 186 
11.3.4 搜索对象 187 
11.3.5 数字对象 187 
11.3.6 范围对象 188 
11.3.7 颜色对象 189 
11.3.8 电子邮件对象 189 
11.4 日期与时间元素 190 
11.4.1 月对象 190 
11.4.2 周对象 191 
11.4.3 日期对象 192 
11.4.4 时间对象 192 
11.4.5 日期时间对象 193 
11.4.6 本地日期时间对象 194 
11.5 选择元素 195 
11.5.1 选择对象 195 
11.5.2 单选按钮对象 196 
11.5.3 单选按钮组对象 196 
11.5.4 复选框对象 197 
11.5.5 复选框组对象 198 
11.6 按钮元素 199 
11.6.1 普通按钮 199 
11.6.2 "提交"按钮对象 200 
11.6.3 "重置"按钮对象 201 
11.6.4 图像按钮对象 201 
11.7 实践案例与上机指导 202 
11.7.1 文件对象 202 
11.7.2 隐藏对象 203 
11.7.3 文本区域对象 204 
11.8 思考与练习 205 
第12章 使用行为创建动态效果 207 
12.1 认识网页行为 208 
12.1.1 事件与动作 208 
12.1.2　使用【行为】面板 208 
12.1.3 常见动作类型 209 
12.1.4　编辑网页行为 210 
12.2 使用行为调节浏览器 210 
12.2.1 打开浏览器窗口 210 
12.2.2 调用JavaScript 212 
12.2.3 转到URL 212 
12.3 使用行为控制图像 213 
12.3.1 交换图像 213 
12.3.2 预先载入图像 214 
12.4 使用行为显示文本 215 
12.4.1 设置弹出信息 215 
12.4.2 设置状态栏文本 216 
12.4.3 设置容器的文本 217 
12.4.4 设置文本域文字 218 
12.5 使用行为加载多媒体 219 
12.5.1 检查插件 219 
12.5.2 改变属性 220 
12.5.3 显示和隐藏元素 221 

第2章 Dreamweaver CC轻松入门


* Dreamweaver CC工作界面
* Dreamweaver CC工作流程
* 使用可视化助理布局


　　本章主要介绍Dreamweaver CC工作界面、Dreamweaver CC工作流程、使用可视化助理布局方面的知识与技巧，在本章的最后还针对实际工作需求，讲解了使用辅助线、使用跟踪图像功能、设置缩放比率、设置窗口大小的方法。通过本章的学习，读者可以掌握Dreamweaver CC入门方面的知识，为深入学习Dreamweaver CC奠定基础。
　　


2.1 Dreamweaver CC工作界面
　　Dreamweaver CC包含了一个崭新、高效的页面，性能也得到了改进。此外，还包含了众多新增功能，改善了软件的操作性，用户无论使用【设计】视图还是【代码】视图，都可以方便地创建网页。本节主要讲述Dreamweaver CC的工作环境。
2.1.1 界面布局
　　启动Dreamweaver CC，进入Dreamweaver CC工作界面，其中包括菜单栏、工具栏、【插入】面板、编辑窗口、【属性】面板和浮动面板组6个部分，如图2-1所示。


图2-1
2.1.2 工具栏、窗口和面板
　　Dreamweaver CC工作界面中的工具栏、窗口和面板分别有着各自的功能和作用，本节将详细介绍。
1. 工具栏
　　工具栏中包含了各种工具按钮，单击工作界面左侧的【代码】、【拆分】、【设计】按钮，可以在文档的不同视图间快速切换，包括【代码】视图、【设计】视图，以及同时显示【代码】视图和【设计】视图的【拆分】视图。工具栏还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项，如图2-2所示。


图2-2
> 【代码】按钮：单击此按钮，可以在窗口中显示【代码】视图。
> 【拆分】按钮：在窗口的一部分显示【代码】视图，而在另一部分显示【设计】视图。
> 【设计】按钮：单击此按钮，可以在窗口中显示【设计】视图。
> 【实时视图】按钮：显示不可编辑的、交互式的、基于浏览器的文档视图。
> 【在浏览器中预览/调试】按钮：单击此按钮，可以在浏览器中预览或调试文档。从下拉菜单中可以选择一个浏览器。
> 【标题】文本框：可以为文档输入一个标题，将显示在浏览器的标题栏中。如果文档已经有了一个标题，则该标题将显示在该文本框中。
> 【文件管理】按钮：当有多人对一个页面进行操作时，可以分别进行获取、取出、打开文件、导出和设计附注等操作。
2. 窗口
　　在编辑窗口中，网页制作者可以实时查看网页制作的效果，从而进一步地完善修改工作，如图2-3所示。


图2-3
3. 面板
　　Dreamweaver CC有很多面板，选择【窗口】菜单，在弹出的子菜单中可以根据需要将各个面板调出，如图2-4所示。




图2-4
　　Dreamweaver CC界面默认打开的面板有【插入】面板、【文件】面板以及【属性】面板(也称属性检查器)。
2.1.3 【插入】面板
　　在【插入】面板中包括【常用】、【结构】、【媒体】、【表单】、jQuery Mobile、jQuery UI、【模板】、【收藏夹】8个选项，每个选项又包含多个子选项，用户可以根据需要在网页中插入适合网页的内容，如图2-5所示。


图2-5
　　下面以【常用】选项为例，介绍如何创建和插入最常用的对象，如图2-6和图2-7所示。
> Div：单击该按钮，可以使用Div标签创建CSS布局块，并进行相应的定位。
> 【图像】：单击该按钮，可以在文档中插入图像。
> 【表格】：单击该按钮，可以在网页中插入表格。
> 【脚本】：包含几个与脚本有关联的按钮。
> 【电子邮件链接】：在【文本】文本框中输入E-mail地址或其他文字信息，然后在E-mail文本框中输入准确的邮件地址，就可以自动插入邮件地址发送链接。
> 【水平线】：单击该按钮，可以在网页中插入水平线。
> 【日期】：单击该按钮，可以插入当前的时间和日期。
　　　　　　　　　　　　图2-6 图2-7
2.1.4　属性检查器
　　Dreamweaver CC的属性检查器，主要用于查看和更改所选择对象的各种属性。其中包含两个选项，即HTML选项和CSS选项，HTML选项为默认格式；单击不同的选项可以设置不同的属性，如图2-8所示。


图2-8
　　使用属性检查器，可以检查和编辑当前页面选定元素的最常用属性，如文本和插入的对象。属性检查器的内容根据选定元素的不同会有所不同。例如，如果选择了页面上的图像，则属性检查器就会显示该图像的属性，如图像的文件路径、图像的宽度和高度、图像周围的边框等。
　　默认情况下，属性检查器位于工作区的底部边缘，但是可以将其取消停靠并使其成为工作区中的浮动面板。单击属性检查器右上角的下拉按钮，在弹出的下拉菜单中选择【关闭】菜单项，即可关闭属性检查器，如图2-9所示。




图2-9