
本书以一个完整的网站作为范例架构,带领读者从无到有打造出专业又实用的网站。全书从认识网页设计观念,到网站开发流程及规划和软件的使用与全新功能,引导用户应用高级程序完成更多的网页特效。
本书共14章,主要内容包括Dreamweaver的软件介绍与配置、规划网站的步骤,网页文字与图像的编辑和使用、超链接的设置,表格表单的加入和使用,CSS的设计方法,多媒体插入、模板的应用、网站文件的发布与维护,使用CSS + DIV进行网页排版,jQuery UI工具集的介绍和移动设备网页的设计方法等;每章最后还提供相关内容的课后练习;使读者可以全面掌握使用Dreamweaver软件进行网页开发的方法,并呈现出丰富多元的效果。
本书可以作为网页设计人员、网站建设与开发人员、大中专院校相关专业师生的参考用书,也可以作为Dreamweaver的培训教材,同时也适合网站推广人员作为参考。
Dreamweaver 是网页设计人员、网页开发人员与视觉设计人员的理想工具,它能高效率地设计、开发和维护以 HTML5 标准为基础的网站和应用程序。 Dreamweaver CC 除了保持一直以来在网页制作、程序编写上杀手级的利索工具外,也为网页开发者在全面投入跨平台、多屏幕、不同设备的网页制作方面提供了更完整的开发平台。
本书以一个完整的网站作为范例架构,带领读者从无到有打造出专业又实用的网站,从认识网页设计观念,到网站开发流程及规划和软件的使用与全新功能,引导用户应用高级程序完成更多的网页特效。
全书整合网页制作最新技术,开启移动网站全新应用;让创意跨越桌面与移动设备;让丰富的云端资源成为网站开发的无穷助力,提升网站实用度,让网站呈现与众不同的气势。
本书共14章,主要内容包括Dreamweaver的软件介绍与配置、规划网站的步骤,网页文字与图像的编辑和使用,超链接的设置,表格表单的加入和使用,CSS的设计方法,多媒体插入、模板的应用,网站文件的发布与维护,使用CSS DIV进行网页排版,jQuery UI工具集的介绍和移动设备网页的设计方法等;书中还包括相关的课后练习,使读者可以全面地掌握使用Dreamweaver软件进行网页开发的方法,并呈现出丰富多元的效果。
本书可以作为网页设计人员、网站建设与开发人员、大中专院校相关专业师生的参考用书,也可以作为Dreamweaver的培训教材,同时也适合网站推广人员作为参考。
如果您在阅读本书时有任何的问题或是各种心得,希望与所有人一起讨论和共享,请欢迎光临作者的文渊阁工作室的网站,或者用电子邮件与我们联系。
文渊阁工作室网站 http://www.e-happy.com.tw
服务电子信箱 e-happy@e-happy.com.tw
文渊阁工作室
邓文渊
改编者的话
“工欲善其事,必先利其器”,对于优秀的网页设计人员、网页开发人员,网页视觉设计人员以及网站网页维护人员来说,Dreamweaver 系列是不可或缺的利器。继 Dreamweaver CS6 大获成功之后,Adobe 公司推出了最新版的 Dreamweaver CC,它是设计和开发人员构建新颖、时尚且尽善尽美网站的坚实基础。
市面上有关 Dreamweaver CC 的介绍类的书也不少了,但是多数是介绍 Dreamweaver CC 软件如何使用、从入门到精通等书籍,内容的重点都放在 Dreamweaver CC 软件的各项功能的使用上了。就像有一种好的武器,介绍这种武器的各种性能以及如何使用它的各项功能的书不少,但是就缺少一本关键的、以战役为背景详解如何运用这种武器实战的《兵法书》。本书就是这样一本介绍如何运用 Dreamweaver CC 这种“利器”进行网页设计实战的《兵法书》。
全书始终以设计一个“潮玩香港”范例网站/网页为主线,从缜密规划网站开始,紧接着合理构建网站的结构,再详细设计和开发网页的内容,最后到网站上线运营以及日常的维护等等,把 Dreamweaver CC 各种功能生动具体地运用到整个范例网站/网页的设计和开发中,让读者在构造这个范例网站的过程中就潜移默化地掌握了 Dreamweaver CC 的各项核心功能,之后便能学以致用,迅速应用于各自网站设计的实际工作中。
本书提供了详细的范例,而且每章后面也提供了课后练习,因此,本书既可适合于读者自学,也适合于大学、专科和职业培训学校作为学习 Dreamweaver CC 的教学用书。
本书没有刻意将各章分为几大部分,但是读者依然可以按照下面的自然逻辑阅读本书。
第一部分(第 1 章):总体介绍 Dreamweaver CC 这个跨平台的网页设计软件。
第二部分(第 2 章~第 11 章):贯穿“潮玩香港”范例网站/网页设计的始终,逐一介绍Dreamweaver CC 的各项功能的具体运用:文字与图像,超链接,表格,CSS 的设计,图层,多媒体,模板应用,网站文件发布与维护。
第三部分(第 11 章~第 14 章):Dreamweaver CC 支持的高级功能:使用 CSS DIV网页排版,iQuery UI 工具集的使用,最后是扩展到移动设备网页的设计——让网站具有跨平台的实用性。
关于“本书范例”和“本书习题”的说明:
1. 本书提供了两大类的范例——“本书范例”和“本书习题”,范例所涉及的程序代码文件,文字和图像文件,多媒体音频和视频文件等都一并提供给读者。目录中的内容细节在后面一页有专门的说明,这里就不再赘述。
2. 在改编过程中采用了简体中文的 Dreamweaver CC 设计和开发环境,故所有范例程序和所需各个文件中的中文都改为简体中文了,并且逐一调试和测试过了,大家可以直接引用,实践测试和运行。
本书中各章的范例以及各章习题的范例文件下载地址为:
http://pan.baidu.com/s/1jG8hzuQ。
本书包含相关章节操作的教学影片,其下载地址为:
http://pan.baidu.com/s/1ntNAuCT。
如果有下载问题,请发邮件给booksaga@126.com,邮件主题为“Dreamweaver CC网页制作”。
赵军
2015年7月
第1章 跨越不同平台的网页设计软件 1
1.1 迎接网页制作新纪元 2
1.2 网页革命新浪潮 6
1.2.1 HTML5 的出现 7
1.2.2 HTML5 的新增功能 7
1.3 介绍 Dreamweaver的操作环境 8
1.3.1 启动 Dreamweaver 8
1.3.2 Dreamweaver 的环境介绍 8
1.4 Dreamweaver 的帮助资料 10
1.4.1 Dreamweaver 的帮助资料 10
1.4.2 Dreamweaver 官方网站资源 11
1.5 建议的环境配置 12
1.5.1 改变工作区的配置方式 12
1.5.2 设置默认的扩展名及编码方式 13
1.6 课后练习 13
第2章 开始规划网站 15
2.1 网站的开发流程 16
2.1.1 规划期 16
2.1.2 施工期 17
2.1.3 维护期 20
2.2 网站开发首部曲 20
2.2.1 范例网站的分析 20
2.2.2 建立本地文件夹与网站定义 22
2.2.3 网站文件的管理 24
2.2.4 网页文件窗口 28
2.2.5 管理定义好的网站项目 30
2.3 课后练习 33
第3章 记录旅行的起点——文字与图像 35
3.1 网页文字的编辑 36
3.1.1 在网站中新建网页文件 36
3.1.2 认识文字格式属性面板 38
3.1.3 文字输入的方式 40
3.1.4 格式化文本 42
3.2 水平线的设计 50
3.2.1 插入水平线 51
3.2.2 修改水平线属性 52
3.3 网页图像的使用 52
3.3.1 插入图像 53
3.3.2 插入日期符号 54
3.3.3 设置网页背景 55
3.4 操作秘技与重点提示 56
3.4.1 插入特殊符号 56
3.4.2 样式的修改 56
3.4.3 选择网页中可使用的图像类型 57
3.4.4 PSD 文件转换成网页图像格式 58
3.4.5 编辑图像相关设置 60
3.4.6 删除 Word 产生的无关 HTML 程序代码 63
3.5 课后练习 64
第4章 热门景点的介绍——超链接的设置 66
4.1 关于超链接 67
4.2 超链接的设置 67
4.2.1 相关网站的链接设置 68
4.2.2 建立邮件超链接 70
4.2.3 配置文件下载的超链接 72
4.2.4 点缩略图开大图 73
4.2.5 命名锚记的使用 74
4.2.6 设置文字链接 75
4.2.7 设置文字链接的颜色 77
4.2.8 设置回到页首的图像链接 78
4.2.9 删除与更改链接 79
4.3 课后练习 81
第5章 旅游信息的分享——表格的使用 84
5.1 关于表格 85
5.1.1 认识表格组成元素与插入表格 85
5.1.2 表格的两种查看模式 86
5.1.3 表格的可视化助理工具 88
5.1.4 选择行、列、单元格与表格的方法 88
5.1.5 认识表格属性面板 90
5.1.6 认识单元格属性面板 91
5.2 制作基础表格 92
5.2.1 插入表格 92
5.2.2 调整表格的宽度 93
5.2.3 调整列宽、行高 94
5.2.4 插入、删除行和列 95
5.2.5 填入文字内容 97
5.3 表格与表格文字的美化 98
5.3.1 设置单元格的背景 98
5.3.2 设置单元格边框样式 99
5.3.3 设置表格正文字的格式 102
5.3.4 表格 / 单元格内容的对齐 102
5.3.5 对表格内的数据进行排序 104
5.3.6 合并单元格 105
5.4 制作嵌套表 106
5.4.1 制作第一层与第二层表格 107
5.4.2 将图像与文字填入表格并调整样式 109
5.5 导入 Word、Excel做好的表格 112
5.6 课后练习 116
第6章 旅行点滴的杂记——CSS的设计 119
6.1 什么是 CSS 120
6.1.1 CSS 样式的特色 120
6.1.2 CSS 样式与网页结合的方式 120
6.2 创建新的 CSS 样式 122
6.2.1 定义内定标签样式 123
6.2.2 自定义类样式Ⅰ 130
6.2.3 自定义样式Ⅱ 133
6.2.4 设置超链接的样式 135
6.2.5 设置 ID 类型的标签样式 139
6.3 应用及管理 CSS 样式 144
6.3.1 应用 CSS 样式的方法 144
6.3.2 编辑 CSS 样式 145
6.3.3 禁用 / 启用 / 删除 CSS 属性 147
6.4 应用已设置的CSS样式文件 148
6.4.1 链接外部 CSS 样式文件 149
6.4.2 手动指定应用的样式 150
6.5 使用 CSS3 加强网页视觉效果 151
6.5.1 关于 CSS3 151
6.5.2 CSS3 特效——圆形、圆角及阴影 152
6.5.3 CSS3 特效——文字阴影 154
6.5.4 CSS3 特效——使用 @font-face 155
6.5.5 CSS3 特效——图像转变效果 158
6.6 制作秘技与重点提示 160
6.6.1 在页面属性快速设置 CSS 样式 161
6.6.2 使用 CSS 样式设计不会跟着滚动的背景图 161
6.6.3 使用 CSS 样式设计水平线 162
6.4 使用 CSS 样式设计元素列表与编号列表 163
6.7 课后练习 164
第7章 地图展示——绝对寻址图层与行为 168
7.1 关于绝对寻址图层 169
7.1.1 什么是绝对寻址图层 169
7.1.2 新建绝对寻址图层 169
7.1.3 手动调整绝对寻址图层的大小及位置 170
7.1.4 绝对寻址图层的属性设置 171
7.2 热点区与绝对寻址图层的建立 172
7.2.1 建立地图的热点区 172
7.2.2 绘制绝对寻址图层 174
7.2.3 设置绝对寻址图层的 CSS 属性 175
7.2.4 在绝对寻址图层中加入图像与文字 177
7.3 行为的使用 179
7.3.1 行为的特性 180
7.3.2 关于行为面板 180
7.3.3 行为修改与删除的方式 181
7.3.4 事件的分类 181
7.3.5 加入行为指令 181
7.3.6 为行为套用效果 186
7.3.7 设置地图水平居中 188
7.4 课后练习 190
第8章 重现感动的片刻——多媒体的呈现 194
8.1 Flash 动画效果 195
8.1.1 插入 Flash 动画 195
8.1.2 设置自动转页 197
8.2 音频与视频文件的播放 199
8.2.1 在网页中加入音频 199
8.2.2 在网页中加入 FLV 格式的视频 201
8.3 利用 HTML5 加入音频与视频 201
8.3.1 使用 video 标签加入视频 201
8.3.2 使用 audio 标签加入音频 203
8.4 课后练习 205
第9章 与我联络的界面——表单的加入 207
9.1 表单对象的介绍 208
9.1.1 表单加入的标准流程 208
9.1.2 表单对象的说明与使用 208
9.2 表单的加入与设置 210
9.2.1 规划表单属性 210
9.2.2 加入表单对象 211
9.2.3 表单传送的设置 216
9.3 设置检查表单行为 218
9.3.1 加入检查表单行为 218
9.3.2 测试检查表单行为 220
9.4 操作秘技与重点提示 220
9.4.1 跳转菜单的制作 220
9.4.2 在按钮上设置超链接 222
9.5 课后练习 223
第10章 模板应用 225
10.1 模板的建立 226
10.1.1 创建模板 227
10.1.2 设置可编辑区域 229
10.2 模板的应用 231
10.2.1 整理网站中要应用模板的文件 231
10.2.2 应用模板和指定可编辑区对应的区域 232
10.3 模板的高级使用与管理 236
10.3.1 由模板新建网页 236
10.3.2 模板的管理 237
10.3.3 让文件从模板中分离 239
10.4 课后练习 240
第11章 网站文件发布与维护 242
11.1 申请一个免费空间 243
11.1.1 申请前的注意事项 243
11.1.2 开始申请 243
11.2 从 Dreamweaver 上传网站 245
11.2.1 定义远程信息 245
11.2.2 连接、上传 247
11.2.3 上网瞧瞧网站 249
11.3 推广网站 250
11.3.1 利用电子信箱通知亲朋好友 250
11.3.2 各大搜索引擎网站登录 251
11.3.3 网络资源大公开 252
11.4 网站的管理与维护——同步文件 252
11.4.1 与远程服务器同步 252
11.4.2 同步其他设置 253
11.5 操作秘技与重点提示 253
11.5.1 上传、下载与删除远程文件 253
11.5.2 检查整个网站的链接情况 254
11.5.3 文件的取出与存回 256
11.6 课后练习 258
第12章 使用CSS DIV网页排版 259
12.1 认识 DIV 标签 260
12.2 插入 DIV 构建网页结构 261
12.2.1 整理范例元素 262
12.2.2 结构分析 262
12.2.3 插入 DIV 标签 262
12.3 以 CSS 设置 DIV 与页面的属性 266
12.3.1 外层框的设置 267
12.3.2 表头的设置 269
12.3.3 页尾的设置 269
12.3.4 内容区块的设置 271
12.3.5 侧边栏的设置 272
12.3.6 按浏览器窗口缩放的网页背景图 273
12.4 DIV 标签中加入网页内容 274
第13章 jQuery UI工具集 276
13.1 关于 jQuery UI 工具集 277
13.1.1 认识 jQuery 与 jQuery UI 277
13.1.2 关于 jQuery UI 面板 277
13.2 Accordion 可折叠菜单 278
13.2.1 加入 Accordion 可折叠菜单 279
13.2.2 修改 Accordion 可折叠菜单样式 281
13.3 Tabs 标签面板 282
13.4 Datepicker 日期选择器 285
13.4.1 加入基本 Datepicker 日期选择器 286
13.4.2 限制 Datepicker 日期选择器的选择范围 287
13.4.3 Datepicker 日期选择器显示多个月的日历 288
13.4.4 以 Datepicker 日期选择器下拉式列表切换年月 289
13.4.5 显示中文的 Datepicker 日期选择器 290
13.4.6 直接显示展开的 Datepicker 日期选择器 291
13.5 Progressbar 进度条 291
13.6 Button 按钮与Dialog对话框 293
13.6.1 加入 Button 按钮 293
13.6.2 加入 Dialog 对话框 294
13.6.3 设置 Dialog 对话框显示及关闭的动画 295
13.6.4 设置 Button 按钮开启Dialog对话框 296
13.7 Buttonset 按钮组 296
13.8 Checkbox 与 Radio Buttons 297
13.8.1 加入 Radio Button 按钮 298
13.8.2 加入 Checkbox Button 按钮 299
13.9 Slider 滑杆 301
13.10 Autocomplete 自动完成输入 302
第14章 移动设备网页的设计 304
14.1 移动设备网页的需求 305
14.1.1 移动设备网页制作的困难 305
14.1.2 Dreamweaver 移动设备网页的解决方案 305
14.1.3 在不同的屏幕预览网页 305
14.2 媒体查询 306
14.2.1 什么是“媒体查询” 306
14.2.2 加入“媒体查询” 307
14.3 流体网格版面 309
14.3.1 什么是流体网格版面 309
14.3.2 流体网格版面的使用 309
14.4 jQuery Mobile 319
14.4.1 什么是 jQuery Mobile 319
14.4.2 jQuery Mobile 的使用 319