本书介绍了初学者学习Dreamweaver CC必须掌握的基础知识和操作技巧, 具体内容包括网页制作基础知识、创建与管理站点、使用图像与多媒体丰富网页内容、超级链接的应用、使用表格布局页面、应用CSS样式美化网页、使用AP Div元素布局页面、使用框架布局网页、利用模板和库创建网页、使用JavaScript行为创建动态效果和站点的发布与推广等具体操作。
文杰书院,是一支专职并专业化的图书撰稿团队,拥有一支高水平的作者队伍,自成立以来,力争成为图书出版领域的一个知名工作室,先后成功与清华大学出版社等多家出版媒体合作编著出版图书200多个品种。
目录
第1章 网页制作基础入门 1
1.1 认识网页 2
1.2 网站制作的基本流程 7
1.3 网页制作常用软件 9
1.4 专题课堂——网页色彩 11
1.5 实践经验与技巧 15
1.6 有问必答 16
第2章 Dreamweaver CC基础知识 17
2.1 认识工作界面 18
2.2 Dreamweaver的工作流程 23
2.3 专题课堂——可视化助理 24
2.4 实践经验与技巧 26
2.5 有问必答 30
第3章 创建与管理站点 31
3.1 站点及站点结构 32
3.2 创建本地站点 34
3.3 管理站点 36
3.4 专题课堂——管理站点文件 37
3.5 实践经验与技巧 39
3.6 有问必答 42
第4章 编辑网页文本 43
4.1 文本的基本操作 44
4.2 插入特殊文本对象 48
4.3 设置项目列表 51
4.4 专题课堂——页面的头信息 53
4.5 实践经验与技巧 57
4.6 有问必答 61
第5章 在网页中应用图像与多媒体 63
5.1 常用的图像格式 64
5.2 插入与设置图像 65
5.3 多媒体在网页中的应用 69
5.4 专题课堂——插入其他图像 74
5.5 实践经验与技巧 76
5.6 有问必答 81
第6章 超链接 83
6.1 超链接概述 84
6.2 链接路径 86
6.3 创建超链接 87
6.4 创建不同种类的超链接 89
6.5 专题课堂——管理与设置超链接 93
6.6 实践经验与技巧 96
6.7 有问必答 98
第7章 使用表格布局页面 99
7.1 表格的创建与应用 100
7.2 设置表格和单元格属性 103
7.3 调整表格结构 105
7.4 处理表格数据 113
7.5 专题课堂——数据表格样式 115
7.6 实践经验与技巧 117
7.7 有问必答 120
第8章 应用CSS样式美化网页 123
8.1 什么是CSS样式表 124
8.2 使用【CSS设计器】面板 126
8.3 CSS选择器的类型 130
8.4 专题课堂——设置CSS样式 132
8.5 实践经验与技巧 138
8.6 有问必答 140
第9章 应用Div+CSS布局网页 141
9.1 Div概述 142
9.2 常见的布局方式 144
9.3 应用Div布局网页 148
9.4 专题课堂——宽度自适应 151
9.5 实践经验与技巧 154
9.6 有问必答 155
第10章 使用模板和库创建网页 157
10.1 使用模板 158
10.2 设置模板 160
10.3 管理模板 163
10.4 专题课堂——创建与应用库项目 165
10.5 实践经验与技巧 169
10.6 有问必答 171
第11章 使用表单 173
11.1 表单概述 174
11.2 添加表单 178
11.3 网页元素 181
11.4 日期与时间元素 185
11.5 选择元素 189
11.6 专题课堂——按钮元素 193
11.7 实践经验与技巧 197
11.8 有问必答 200
第12章 使用行为创建动态效果 201
12.1 认识网页行为 202
12.2 使用行为调节浏览器 205
12.3 使用行为控制图像 208
12.4 使用行为显示文本 210
12.5 使用行为加载多媒体 214
12.6 专题课堂——控制表单 219
12.7 实践经验与技巧 223
12.8 有问必答 225
第13章 制作jQuery Mobile页面 227
13.1 jQuery与jQuery Mobile概述 228
13.2 创建jQuery Mobile页面 229
13.3 使用jQuery Mobile组件 232
13.4 专题课堂——列表 238
13.5 实践经验与技巧 239
13.6 有问必答 242
第14章 站点的发布与推广 243
14.1 测试与维护站点 244
14.2 上传与发布网站 247
14.3 网站运营与维护 249
14.4 专题课堂——网站推广 252
14.5 实践经验与技巧 256
14.6 有问必答 258
第5章 在网页中应用图像与多媒体
本章要点
常用的图像格式
插入与设置图像
多媒体在网页中的应用
专题课堂——插入其他图像
本章主要内容
本章主要介绍常用的图像格式、插入与设置图像、多媒体在网页中的应用等方面的知识与技巧,在本章的最后还针对实际的工作需求,讲解了插入HTML5 Video、插入HTML5 Audio、插入Edge Animate作品和插入Flash Video的方法。通过本章的学习,读者可以掌握在网页中应用图像与多媒体方面的知识,为深入学习Dreamweaver CC知识奠定基础。
5.1 常用的图像格式
导读
网页中的图像常用格式通常有3种,即JPGE格式、GIF格式和PNG格式,其中使用最广泛的是GIF格式和JPEG格式。本节将详细介绍网页中常见的图像格式方面的知识。
5.1.1 JPEG格式图像
JPG/JPEG(Joint Photographic Experts Group)可译为“联合图像专家组” ,是一种压缩格式的图像。JPEG文件通过压缩,使其在图像品质和文件大小之间达到较好的平衡,损失了原图像中不易为人眼察觉的内容,获得较小文件尺寸,使图像下载快捷。
JPG/JPEG支持24位真彩色,普遍用于显示摄影图片和其他连续色调图像的高级格式。若对图像颜色要求较高,应采用这种类型的图像。目前各类浏览器均支持JPEG图像格式。
5.1.2 GIF格式图像
GIF(Graphics Interchange Format)可译为“图像交换格式”,是一种无损压缩格式的图像。它可以使文件大小最小化,支持动画格式,能在一个图像文件中包含多帧图像页,在浏览器中浏览时可看到动感图像效果。网络上小一点的动画一般都是GIF格式的图像。
GIF只支持8位颜色(256种色),不能用于存储真彩色的图像文件,适合大面积单一颜色的图像,如导航条、按钮、图标等。其压缩率一般在50%左右,它不属于任何应用程序。在通常情况下,GIF图像的压缩算法是有版权的。
5.1.3 PNG格式图像
PNG(Portable Network Graphic)可译为“便携网络图像”,是一种格式非常灵活的图像,用于在因特网上无损压缩和显示图像,Fireworks制作的图像默认为PNG格式。PNG文件可以保留所有的原始图层、矢量、颜色和效果信息,并且在任何时候都可以完全编辑所有元素(文件必须具有.png扩展名才能被Dreamweaver CC识别为PNG文件)。
PNG图像支持多种颜色数目,从8位、16位、24位到32位都有。PNG格式图像可替代GIF格式,支持索引色、灰度、真彩色图像及透明背景。商业网站使用PNG格式的图像比较安全,因为没有版权问题。
5.2 插入与设置图像
导读
图像是网页中不可缺少的元素之一,为了使网页内容更加丰富,方便浏览者的浏览,可以将图像插入到网页中,并进行相应的设置。本节将介绍插入与设置图像方面的知识。
5.2.1 在网页中插入图像文件
要在Dreamweaver CC文档中插入图像,必须位于当前站点文件夹内或远程站点文件夹内,否则图像不能正确显示。所以在建立站点时,设计者常先创建一个名叫image的文件夹,并将需要的文件复制到其中,然后再从这个文件夹中选择图片,向网页插入图像。下面将详细介绍在网页中插入图像的操作方法。
操作步骤
第1步 将鼠标指针置于准备插入图像的位置,1. 单击【插入】主菜单,2. 在弹出的菜单中选择【图像】菜单项,3. 在弹出的子菜单中选择【图像】菜单项,如图5-1所示。
图5-1
通过以上步骤即可完成插入图像的操作,如图5-3所示。
图5-3
第2步 弹出【选择图像源文件】对话框,1.选择准备插入的图像,2. 单击【确定】按钮即可,如图5-2所示。
图5-2
5.2.2 设置网页背景图
背景图像是网页中的另外一种图像方式,该方式的图像既不影响文件输入,也不影响插入式图像的显示。下面详细介绍设置网页背景图的操作方法。
操作步骤
第1步 将鼠标指针定位在网页中,单击【属性】面板中的【页面属性】按钮,如图5-4所示。
图5-4
第2步 打开【页面属性】对话框,1. 在【分类】列表框中选择【外观(CSS)】选项,2. 单击右侧【背景图像】后面的【浏览】按钮,如图5-5所示。
图5-5
第3步 弹出【选择图像源文件】对话框,1. 选中准备设置为背景的图片,2. 单击【确定】按钮,如图5-6所示。
图5-6
第4步 返回到【页面属性】对话框中,单击【确定】按钮,如图5-7所示。
图5-7
第5步 通过以上步骤即可完成设置网页背景图的操作,如图5-8所示。
图5-8
指点迷津
在【页面属性】对话框中,除了可以设置背景图像外,还可以设置背景颜色、文本颜色、页面字体等属性。