发布时间 : 星期日 文章第三讲 制作图文混排网页- 更新完毕开始阅读3fce52fad4bbfd0a79563c1ec5da50e2524dd113
高为100，替换文本为“庐山的三叠泉瀑布”，垂直边距为15，水平边距为10，对齐方式为“左对齐”。 【任务实施】
（1）插入第1幅图像 （2）设置第1幅图像的属性 （3）插入第2幅图像 （4）设置第2幅图像的属性 （5）插入第3幅图像 （6）设置第3幅图像的属性
（7）保存网页中插入的图像和设置的图像属性 讲解：
插入图像（快捷键Ctrl+Alt+I） 插入图像
在Dreamweaver中插入图像的基本方法是：
1．将光标置于要插入图像的位置，在插入工具栏的“常用”类中单击“图像”按钮或选择“插入”菜单中的“图像”命令，打开“选择图像源文件”对话框。
2．在对话框中显示有图像文件名、文件类型和图像源的路径URL(每个网页都有一个唯一的地址，称作统一资源定位器即URL)。我们选取存放在站点中的图像文件，然后单击【确定】按钮将显示“图像标签辅助功能属性”对话框，在“替代文本”和“详细描述”文本框中输入内容，单击“确定”按钮，即可将图片插入到指定区域。
3．如果所选择的图像文件不在用户设定的当前站点，则将打开“Macromedia Dreamweaver”对话框。提示是否将图像文件复制到根文件夹，单击【是】按钮，然后打开“复制文件为”对话框，定位到站点中用于存放图像文件的文件夹images，最后单击【保存】按钮即可。 设置图像属性
在网页中插入图像后可以对图像的各种相关属性进行设置，若要设置图像属性，请执行以下操作：
1.图像名称及大小：使用缩略图下面的文本框设置名称，以便在使用 Dreamweaver 行为(如“交换图像”)或脚本语言(如 JavaScript 或 VBScript)时可以引用该图像。而缩略图右侧标明了所插入图像的大小。
2.宽和高:以像素为单位指定图像的宽度和高度。当您在页中插入图像时，Dreamweaver 自
动用图像的原始尺寸更新这些文本框。在“宽”和“高”文本框中输入新值，实现图像大小改变，但却与图像的实际宽度和高度不相符，若要恢复图像原始值，可单击“宽”和“高”文本框右侧的“恢复图像到原始大小”按钮重设大小。
3.源文件：指定图像的源文件。单击文件夹图标以浏览到源文件，或者直接键入路径。 4.链接：指定图像的超级链接。将“指向文件”图标拖到“站点”面板中的某个文件，或单击文件夹图标浏览到站点上的某个文档，或手动键入URL。
5.对齐:可以将图像与同一行中的文本、另一个图像、插件或其它元素对齐。当图像与图像在网页中对齐时，可由属性面板中的按钮、、来确定，当图像与文本、插件或其它元素对齐时，可将图像视为一般字符，运用属性面板中的列表来确定。
6.替代：指定只显示文本的浏览器或已设置为手动下载图像的浏览器中代替图像显示的替代文本。在某些浏览器中，当鼠标指针滑过图像时也会显示该文本。 7.地图名称和热点工具：允许您标注和创建图像映射。
8.垂直边距和水平边距：沿图像的边缘添加边距(以像素为单位)。“垂直边距”沿图像的顶部和底部添加边距。“水平边距”沿图像左侧和右侧添加边距。若图像和文字贴得太近，容易使人产生压迫感。因此，适当调整图像间边距可以使浏览者在浏览网页时更加舒适。 9.目标：指定链接的页应当在其中载入的框架或窗口。(当图像没有链接到其它文件时，此选项不可用。)当前框架集中所有框架的名称都显示在“目标”列表中。 也可选用下列保留目标名：
_blank:将链接的文件载入一个未命名的新浏览器窗口中。
_parent:将链接的文件载入含有该链接的框架的父框架集或父窗口中。如果包含链接的框架不是嵌套的，则链接文件加载到整个浏览器窗口中。
_self:将链接的文件载入该链接所在的同一框架或窗口中。此为默认值。 _top:将链接的文件载入整个浏览器窗口中，因而会删除所有框架。 10.低解析度源：指定在载入主图像之前应该载入的图像。 11.边框:以像素为单位的图像边框的宽度。默认无边框。
12.编辑：启动在“外部编辑器”首选参数中指定的图像编辑器并打开选定的图像。 13.优化：打开“优化”对话框,使用 Fireworks优化图像。 14.裁剪：修剪图像大小，删除不需要的区域。
15.重新取样：对已调整大小的图像重新取样，提高图片在新的大小和形状下的品质。 16.亮度和对比度：调整图像的亮度和对比度设置。 17.锐化：调整图像的清晰度。
【任务3-1-6】插入鼠标经过图像及设置其属性 【任务描述】
（1）在网页“0301.html”中插入鼠标经过图像，原始图像为“c01.jpg”，鼠标经过图像为“c02.jpg”，替换文本为“瀑布之美”。
（2）设置鼠标经过图像的属性：宽为200，高为120，垂直边距为10，边框为2，对齐方式为“底部”。 【任务实施】
（1）插入鼠标经过图像 （2）设置鼠标经过图像的属性
（3）保存网页中插入的鼠标经过图像及其属性设置
（4）按F12浏览图文混排网页的效果。 相关知识：
图片格式
（1）JPG：图片质量较高，一般用于较大的图片。如：人物、风景。（不支持透明） （2）gif：用于制用按钮、动画、导航条等，图片较小，只有256种颜色。（支持透明） （3）png：兼有两种格式的特点。（支持透明） 注：图片的大小一般尽量控制在200K以下。 2、链接
（1）_blank：在新的网页打工。 （2）_self：在自身网页打开。 图片热点 1、热点 （1）矩形热点 （2）圆形热点 （3）多边形热点
注：编辑——首选参数——辅助功能——图像 2、替换
（1）用于图片的注释。
（2）当图片无法显示的时候用此内容代替。 3、宽度和高度的设置 4、相关html代码 （1）Img：图片。 （2）Src：位置。
（3）热点： 图片的编辑
一、裁剪、亮度对比度、锐化
注：使用Dreamweaver编辑图像是个不好的习惯，如果要编辑图像，最好使用专门的图像编辑软件（如：Fireworks、photoshop），编辑好了以后，再重新插入进来。 二、插入——图像对象——鼠标经过图像 三、水平线的插入 插入——html——水平线 四、背景颜色的代码：bgcolor 讲解：
图像占位符的简介 插入图像占位符的方法
替换图像占位符的方法 插入图像占位符
在Dreamweaver中插入图像占位符的基本操作：
1.将光标置于要插入图像占位符的位置，在插入工具栏的“常用”分类中选择“图像占位符”按钮或选择“插入”菜单中的“图像对象”中的“图像占位符”命令，打开“图像占位符”对话框。 2.在对话框中进行设置：
(1)在“名称”文本框中，输入要作为图像占位符的标签文字显示的文本。名称可有可无，必须以字母开头，且只能包含字母和数字；不允许使用空格和高位 ASCII 字符。 (2)在“宽度”和“高度”文本框中，以像素为单位键入数字以设置图像大小。
(3)为图像占位符选择一种颜色，可以使用颜色选择器或直接输入颜色的十六进制值(如 #FF0000)或输入网页安全色名称(如 red)。
(4)在“替代文本”中，为使用只显示文本的浏览器的访问者输入描述该图像的文本。 3．单击“确定”。网页文档中即会出现图像占位符。 插入“鼠标经过图像”
鼠标经过图像就是指当访问者移动鼠标使鼠标指针经过图像时，图像变为另一幅图像；而鼠标指针离开时，图像又恢复为原始图像。这种效果通常用于导航条、图像互动等。它由两幅图像组成，一是首次载入时显示的图像即原始图像，二是鼠标经过后翻转的图像即鼠标经过图像。在创建鼠标经过图像时应使用相同大小的两幅图像；如果这两个图像大小不同，Dreamweaver 将自动调整第二个图像的大小以匹配第一个图像的属性。 插入背景音乐 讲解：
常用音频格式介绍
MP3、MIDI、WMA、WAV、RM 插入背景音乐
< bgsound src=“文件名称” loop=“1”> 插入Flash文件（快捷键Ctrl+Alt+F） 编辑Flash文件
【任务3-2】制作介绍中国名泉的图文混排网页 【任务描述】
本单元“同步训练”的任务卡如表3-4所示。
表3-4 单元3“同步训练”任务卡
任务编号 网页主题 同步训练 任务描述 3-2 任务名称 制作介绍中国名泉的图文混排网页 60min 中国名泉 计划工时 （1）创建1个命名为“中国名泉”的站点，该站点存储在本地计算机的文件夹“task03-2”中。