Dreamweaver CS6实例教程(第3版) (7)

3.1.2 设置图像属性
插入图像后，在“属性”面板中显示该图像的属性。
属性面板
3.1.3 图像占位符
在网页中插入图像占位符的具体操作步骤如下。
（1）在文档窗口中，将插入点放置在要插入占位符图形的位置。
（2）通过以下几种方法启用“图像占位符”命令，弹出“图像 占位符”对话框。
选择“插入”面板中的“常用”选项卡，单击“图像”展开式
3.2.2
课堂案例—现代木工网页
使用“媒体：SWF”按钮，为网页文档插入Flash动画效果；使
用“播放”按钮，在文档窗口中预览效果。
效果图
课堂练习—儿童零食网页
使用“图像”按钮，插入图像；使用“代码”视图， 手动输入代码设置图像的水平间距。
效果图
课后习题—准妈妈课堂网页
使用“Flash SWE”按钮，为网页文档插入 Flash动画效果；使用“播放”按钮，在文档窗口中 预览效果。
效果图
第3章 在网页中插入图像
本章简介：
图像和多媒体是网页中的重要元素， 在网页中的应用越来越广泛。本章主要 讲解图像和多媒体在网页中的应用方法
和技巧，通过这些内容的学习，可以使
设计制作的网页更加美观形象、生动丰 富，更可以增加网页的动感，使网页更
具有吸引力。
课堂学习目标
掌握在网页中插入和编辑图像的方法
掌握多媒体在网页中的应用方法和技巧
3.1 图像属性
图像占位符
课堂案例—宠物之家网页
3.1.1 在网页中插入图像
要在Dreamweaver CS6文档中插入的图像必须位于当前站点文
件夹内或远程站点文件夹内，否则图像不能正确显示，所以在建
立站点时，网站设计者常先创建一个名叫“images”的文件夹， 并将需要的图像复制到其中。

时代码”视图显示浏览器用于执行该页面的实际代码，当
在“实时”视图中与该页面进行交互时，它可以动态变化。 第 3
“实时代码”视图不可编辑。
页
1 DREAMWEAVER的工作界面
精
多屏幕：借助“多屏幕预览”面板，为智能手机、平板电脑和 台式机进行设计。使用媒体查询支持,为各种不同设备设计样式 并将呈现内容可视化。（查看页面，就如同页面在不同尺寸的 屏幕中显示。）
“文件”等面板独立显示，适合对网页的调试和修改。
第 10
页
精
2 站点的搭建与管理
Dreamweaver的站点是一种管理网站中所有相关联 文件的工具。通过站点可以对网站的相关页面及各 类素材进行统一管理，还可以以使用站点管理实现 将文件上传到网页服务器，测试网站。
站点简单的说就是一个文件夹。在这个文件夹里包 含了网站中所有用到的文件。我们通过这个文件夹 （站点），对我们的网站进行管理，有次序，一目 了然。
这些面板集中了网页编辑和站点管理中常用的工具 按钮。这些面板被集中到面板组中，每个面板都可 以展开或折叠，并且可以和其他面板一起或取消停 靠。
第6 页
精
1 DREAMWEAVER的工作界面
第7 页
1 DREAMWEAVER的工作界面
文件面板：
精
没有创建站点的状态
创建站点哟后的状态
第8 页
第 11 页
2.1 创建本地站点
精
在制作页面之前，首先要在Dreamweaver中创建站点。 一开始只需制作本地站点，这个位于本地硬盘中的文件夹 被当成一个远程站点的镜像，完成本地站点的制作后，即 可将本地站点上传至远端服务器，作为远程站点。
的不同视图之间快速切换。工具栏中还包含一些与 查看文档、在本地和远程站点间传输文档有关的常 用命令和选项。

【关键字】设计第1章Dreamweaver CS6简介Dreamweaver CS6是一款功能强大的可视化的网页编辑与管理软件。

利用它，不仅可以轻松地创建跨平台和跨浏览器的页面，也可以直接创建具有动态效果的网页而不用自己编写源代码。

Dreamweaver CS6 最主要的优势在于能够进行多任务工作，并且在操作方法、界面风格方面更加人性化。

用户可以根据自己的喜好和工作方式，重新排列面板和面板组，自定义工作区。

本章主要内容●Dreamweaver CS6的新增功能。

●Dreamweaver CS6的安装、删除和启动。

●Dreamweaver CS6的工作界面。

●Dreamweaver CS6的一般操作。

本章重点●Dreamweaver CS6常用面板的使用方法。

●Dreamweaver CS6的文件操作。

1.1 Dreamweaver CS6概述Dreamweaver CS6 是世界顶级厂商Adobe推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动的软件。

在业界通常将Dreamweaver、Flash、Fireworks称为“网页三剑客”。

由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，因此对于初级人员，无须编写任何代码就能快速创建Web页面。

其成熟的代码编辑工具更适用于Web开发高级人员的创作。

CS6新版本使用了版面创建页面，在发布前可使用多预览审阅设计,大大提高了用户的工作效率，而改善的FTP性能可更高效地传输大型文件。

“实时视图”和“多屏幕预览”面板可呈现HTML5 代码，用户能更方便地检查自己的工作。

1.2 Dreamweaver CS6的新增功能相对于以前的版本，Dreamweaver CS6的功能主要在以下方面进行了增强。

1. 可响应的自适应网格版面使用响应迅速的CSS 版面，可以创建跨平台和跨的兼容。

利用简洁、业界标准的代码可为各种不同设备和计算机开发项目，提高工作效率。

插入图像占位符的效果
创建图像的效果
注意：与在“设计”视图中看到的图像占位符不同，在浏览器中查看图像占位 符时，不会显示占位符的名称和大小，而只显示占位符的替换文本。
4.2.5 设置图像属性
将图像插入文档之后，Dreamweaver会自动按照图像的大小显示，但在实际设 计中，往往需要对图像的一些属性进行调整，如大小、边框、位置、对齐等等。这 些操作可以通过如图所示的图像属性控制面板得以实现。
提示：“插入日期”对话框中显示的日期和时间不是当前日期，也不反映访问者 在查看站点时所看到的日期/时间。它们只是说明此信息的显示方式的示例。
4.1.5 插入特殊字符
在HTML中，一个特殊字符有两种表达方式，一种称作数字参考，另一种称作实 体参考。
所谓数字参考，就是用数字来表示文档中的特殊字符，通常由前缀“&#”加上数 值，再加上后缀“;”组成，其表达方式为：&#D;，其中D是一个十进制数值。
设置外部编辑器
4.2.7 插入鼠标经过图像
一个鼠标经过图像其实是由两张图片组成的：页面显示的图像和鼠标经过时 的图像。这两张图片应具有相同的尺寸，如果两张图片的尺寸不同， Dreamweaver CS6会自动将第二张图片的尺寸调整成第一张图片的尺寸。
鼠标经过前后的图像效果
4.2.8 导入Fireworks HTML
Fireworks中设计的切片图像
导入的Fireworks HTML文件
4.3 实例制作之插入日期时间
制作步骤如下： （1）新建一个HTML文档。 （2)单击“插入”栏上的表格图标按钮 ，打开“表格”对话框。在页面中插入
一个两行一列、宽度为200像素、边框为0的表格。 其中，第一行用于放置导航栏的图标和日期时间，第二行用于放置具体的导航项 目。在接下来的步骤中，为单元格设置背景图像。自Dreamweaver CS4开始，在 单元格的属性面板中已找不到“背景图像”选项了。如果要设置表格或单元格的 背景图像，需要使用CSS样式进行定义。