DW_04在网页中插入图像汇总
DW文字、图像和多媒体插入
– 上述设置也可通过菜单实现：修改---图像 – 用fireworks优化图像： 要方便地完成相关的处理工作，则需要图形图像处理软件的 协助。 具体操作：修改—图像---在fireworks优化图像。 在页面中合理地使用图形图像已经成为网页制作的一个 基本要求。但是并非所有图形图像都可以直接用在网页中， 大多数情况下，需要对原始图像素材进行一些处理，例如 图像优化、添加特效等，然后再在网页中使用。
６.设置图文混排和图像边距 的效果。 图像和文字的对齐有： 对齐时要先选择图像， 再选对齐方式。 设置图像边距， 可以使图像和相邻的 文字或其他图片之间 有站相册
本节习题和作业 1填空题 （1）在计算机领域中，图像分为________和________2大 类。 （2）GIF图像采用的是________压缩格式。 2 选择题 （2）网页通常可以支持的图像格式有___________。 A．GIF B．BMP C．AVI D．PSD E．PNG F．JPEG。
图1 JPEG
图2 GIF
图3 PNG
1．GIF（Graphics Interchange Format）格式 (图形交换 格式)：使用最早、应用最广泛。 a.无损压缩、跨平台兼容； b .占用磁盘空间小、支持动画，交织下载、支持透明背景 图像。 c.支持8位(256色）图像，能够很好地表现不连续色调和大 面积色彩统一的图像，如：导航条、按钮、图标、广告 条（banner）、徽标等对色彩要求不高的图像格式。
３.２.２在网页中使用图像 1．插入图像：为了保证参数的正确，图象文件必须保存 在当前站点的images文件夹中，否则dw提示将其复制 到当前站点目录下。插入后产生img标签。 具体操作步骤：单击插入---图像命令/常用插栏的插入图 像按钮 。 2.插入图像占位符：暂时为图片占个位置，在浏览器中不 显示，在发布网站之前需用具体图象替换它，在属性检 查器中（源文件）完成替换更新。一旦插入在html代码 中自动产生一个包含属性的图象标签src和替换文本标 签（alt）。
Dreamweaver网页设计之：网页中的图片
14
3.2 与图片相关的HTML标签
2013-7-1
15
3.2 与图片相关的HTML标签
②Border属性
主要是用来给图片的周围加上指定粗细的 边框。 语法结构： <img border=n> 其中，n为一个数值，单位为像素。
2013-7-1
16
3.2 与图片相关的HTML标签
2013-7-1
26
3.3 使用Dreamweaver 8插入图片
插入图像后，在“属性”面板中显示该图像的属性。
设置图片属性
2013-7-1
27
给图片添加文字说明
当图片不能在浏览器中正常显示时，网页中 图片的位置就变成空白区域。为了让浏览者在不 能正常图片显示时也能了解图片的信息，常为网 页的图像设置“替换”属性。 “替换文本”的作用是当发布站点之后，因 为网速或者其他因素造成图片不能很快显示时， 替换的文本内容就可以优先显示出来，以减少浏 览者因长时间等待图片而产生的疲倦感。
2013-7-1
10
3.2 与图片相关的HTML标签
2、图片标签属性的应用
“width” “height” “border” “alt”
2013-7-1
11
3.2 与图片相关的HTML标签
①“width”和“height”属性 控制图片大小依靠“width”和“height”属性：
2013-7-1
17
3.2 与图片相关的HTML标签
图片的边框
2013-7-1
18
3.2 与图片相关的HTML标签
③alt属性
“alt”属性用来设置代替图片的文字，其属 性值设置的是在图片不能显示时转而显示 的文字。
DW4 图像
本章内容
图像热区链接
语法 src=“图像地址 图像地址” usemap=“#映射图像名称” <img src= 图像地址” usemap= #映射图像名称”> name=“映射图像名称 映射图像名称” <map name= 映射图像名称” > shape=“热区形状 热区形状” coords=“热区坐标 热区坐标” href=“链接地址 链接地址” <area shape= 热区形状” coords= 热区坐标” href= 链接地址”> </map> 映射图像名称为字母和数字， 映射图像名称为字母和数字，不能以数字开头 Shape属性有三个值 circle（圆形） rect（矩形） 属性有三个值： Shape属性有三个值：circle（圆形） rect（矩形） 例子：异性导航 例子：
src=“images/01.gif width=“150 height=“100 images/01.gif” 150” 100”> <img src= images/01.gif width= 150 height= 100 >
• 宽高的单位都是像素 • 在html中指定宽高，会使网页的显示速度更快 html中指定宽高 中指定宽高，
本章内容
设置图像的对齐 align
语法
src=“图像地址 align=“对齐方式 图像地址” 对齐方式” <img src= 图像地址” align= 对齐方式” >
属性值 绝对对齐： 绝对对齐：left middle right 相对对齐： 相对对齐：与一行文字的相对位置 texttop等 bottom top texttop等
本章内容 图像标记img 图像标记img
DW课程第04讲添加超链接和多媒体元素
典型案例——制作“江南旅游” 网首页
第四行按钮参数 输入版权，调整 文本样式
DW课程第04讲添加超链接和多媒体 元素
插入Shockwave影片
Shockwave影片具有文件小、下载速度快，被目前主 流的浏览器所支持等优点，是使用Director制作的多 媒体影片文件。 插入记录->媒体->Shockwave
在第二行插入插件（影片），宽800，高500
设置第三行高50，水平垂直方向都为居中对齐输入 “申明：本网站所有资源均来自互联网，资源所有权 归原发行商所有，供广大爱好者学习交流之用，不做 任何商业用途， 请用户下载后于24小时内自觉删除， 谢谢！”，文本颜色为“#999999”
DW课程第04讲添加超链接和多媒体 元素
超链接的种类
锚链接语法
<HTML>
<HEAD>
<TITLE>链接到其他2页、面链<接/T到ITL锚E标> 记所在位置
</HEAD>
<BODY>
<A href="#helpme">[新人上路]</A>
……
<A name="helpme">新人上路指南</A>
……
</BODY> </HTML>
1、定义锚标记
插入插件
插件包括的范围很广，如：视频文件、音乐文件、动 画文件等。 插入记录->媒体->插件 如果计算机中安装了文件格式的插件，就可以在网页 中播放该视频文件
DW课程第04讲添加超链接和多媒体 元素
第4讲 Dreamweaver中网页元素的插入与运用
本节重点
在网页中插入和编辑文本 在网页中插入和编辑图像 在网页中插入和编辑各种Flash 元素（难点） 在网页中插入音频和视频 在网页中插入和编辑各种超链接（难点） 相对路径和绝对路径（难点） 图像热点链接（ 难点）
1 文本
1.1 认识【文本】工具栏
文本是网页中最常见、运用最广泛的元素之一,是网 页内容的 核心部分。在网页中添加文本与在Word等文字处 理软件中添加文本一样方便 ， 可以直接输入文本,也可从 其他文档中复制文本，还可以插入水平线和特殊字符等。 使用【文本】工具栏、可以快速插入各种类型的文本 。 单击插入栏上的【文本】选项卡，打开【文本】插入栏。
3.5 插入Flash视频
3 多媒体
3.6 插入Flash视频
dw网页设计练习题答案
dw网页设计练习题答案一、填空题1、在Dreamweaver 编辑区中共有三种视图模式分别指的是代码视图、代码和设计视图和设计视图。
P92、deamweaver8默认的首页文件名是。
P163、搭建站点可以有两种方式，一是完成，二是P114、有两种设置deamweaver8站点的方法：一是使用向导完成，二是利用高级设定完成。
5、deamweaver的标题栏会显示、 P9.26、对多个网站进行管理是通过文件面板进行。
P18.47、初次启动Dreamweaver时，会弹出“工作区设置”对话框，供用户选择的有设计器和编码器工作区布局。
在这里选择默认的“设计器”就可以了。
P38、导航条可以存在4种状态，它们是状态图像、鼠标经过图像、按下时鼠标经过图像。
P52.59、META标记记录当前网页的相关信息，如P2710、头内容在浏览器中是不可见的，但却携带网页的重要信息，如关键字、描述文字等。
P2111、预览网页效果的快捷键是P2212、规划网站，一般要从三个方面去思考，即网站的主题、网站的内容和网站的对象。
13、页面的标题“音乐欣赏”是由HTML标签中的定义的。
14、网页中常用的图像格式有 GIF JPG PNG ，其中 GIF 格式支持动画格式。
二、单项选择题1、创建完全空白的静态页面应选择A. 基本页类别中的“HTML模板”选项B. 基本页类别中的“HTML”选项C. 动态页类别中的选项D. 入门页面中的选项2、下列不能在网页的“页面属性”中进行设置。
A.文档编码B.背景颜色、文本颜色、链接颜色C.网页背景图及其透明度D.跟踪图像及其透明度3、关于在Dreamweaver中插入Flash文本，说法错误的是A.可以设置Flash文本的动态效果，如淡入淡出等B.通过插入Flash文本，用户可以直接创建一个Flash 文本对象的动画C.可以设置Flash文本的字体、字号、文本颜色、鼠标转滚颜色等属性D.可以为Flash文本设置链接4、使用Dreamweaver创建网站的叙述，不正确的是A.站点的命名最好用英文或英文和数字组合B.网页文件应按照分类分别存入不同文件夹C.必须首先创建站点，网页文件才能够创建D.静态文件的默认扩展名为.htm或.html5、在IE浏览器中预览网页的快捷键是A.F9B.F10C.F11D.F126、对插入文件中的Flash动画，不能在属性面板中设置动画的属性。
dw表格无缝插入图片
竭诚为您提供优质文档/双击可除dw表格无缝插入图片篇一：用dw给一张图片加多个链接大家在做海报时，一张图片只能加一个链接，用photoshop切片的方法又太麻烦。
在这里我教大家另外一个方法。
1、首先，在百度上下载dreamweaver软件(我给大家示范的是dreamweaver8版本)，并安装。
安装完成后，就可以打开dreamweaver软件。
2、打开之后会出现这个界面，之后按html就可以了。
3、接着是代码这个界面，可以看到标题处有“无标题文档”这几个字，把这几个字删除即可。
4、按“设计”按钮，接下来就可以给图片加多个链接了。
5、在给图片加超链接之前，要先把图片先上传到我们的图片空间里，并复制链接(这里说的链接也就是图片的地址uRl，右键-属性里也看以看到)。
6、我们再按dreamweaver的菜单栏的“插入”-“图像”。
7、将uRl处的文字删掉，并粘贴我们之前那张图片的链接(也就是图片的地址/uRl)，按确定，之后有弹出图像标签辅助功能属性的框，继续按右侧的确定即可。
这样子我们要处理的这张图片就出现了。
8、按菜单栏下方的按钮(有小倒三角形的地方)，会出现“绘制矩形热点”、“绘制椭圆热点”、“绘制多边形热点”。
在这里我给大家只示范“绘制矩形热点”，其他热点也是同样的方法，只是形状不一样而已。
9、按绘制矩形热点，拖动鼠标，选出图片中要加宝贝链接的一个区域。
做完这个步骤后，图片上就出现了这样一块区域。
此时可以在下方属性栏将宝贝链接加在链接处，将目标处改为“_blank”。
10、第二、第三个区域方法也是一样的，大家可以先把去去画好，再点各个区域，分别加链接，把属性栏“目标”处都改为“_blank”。
篇二：dreamweaver基础教程——插入并编辑表格dreamweaver基础教程:插入并编辑表格表格是网页设计制作不可缺少的元素，它以简洁明了和高效快捷的方式将图片、文本、数据和表单的元素有序的显示在页面上，让我们可以设计出漂亮的页面，使用表格排版的页面在不同平台、不同分辨率的浏览器里都能保持其原有的布局，而在不同的浏览器平台有较好的兼容性，所以表格是网页中最常用的排版方式之一。
用DW在淘宝店铺装修中添加图片和链接
DW店铺装修之添加图片和链接最近看了很多关于店铺装修的视频，现在我将自己总结的店铺装修时候用代码添加链接的方法分享给大家，与亲们探讨探讨，有不对的地方希望亲们指出，有错误的思路希望各位大神勿喷，2015祝大家淘宝大卖，生意红火，家庭幸福，心想事成。
最开始装修店铺的时候最困扰我的便是链接的设置，进了很多同类的网店，发现他们都做得好好哦，一点击就进入了宝贝界面，很想也自己做出这样的效果，所以我在网上使劲找相关的视频，其中谈论得最多的便是微软的Macromedia Dreamweaver 8软件的应用，首先呢下载地址我就不多说了，在百度上粘贴上MacromediaDreamweaver 8会出来很多的哟亲们。
好了，我就不多说了，直接上菜。
1、我们安装好了软件然后就打开DW了，如果你打开的是这个样子那么恭喜亲，你下载的软件是正确的，在这里我给大家提供三个可以用的序列号：WPD800-59139-91432-25145WPD800-57931-76932-54523、WPD800-59931-32632-81939（如果经济比较富足，请支持购买正版软件）在Macromedia Dreamweaver 8或淘宝店铺装修时，时常需要用在放一张图片后，在这个图片上再放一张小图片或一些文字加链接，怎么实现呢，先看看效果吧： / .下面再把代码复制上，放到代码编辑图里就行了<table width="932" height="284" border="0"background="/imgextra/i4/750287797/T2g DlUXghbXXXXXXXX_!!750287797.gif"><tr><td><p> </p><p> </p><p><br /><ahref="/popup/add_collection.htm?id=685456 83&itemid=68545683&itemtype=0&ownerid=5a55339a 04473981dca16c5c70bf599f&scjjc=2&_tb_token_=9bCoD9 NIQ3/ImMoD9NcQ3/FdNoD9NdQ3/zepoD9NnQ3/ErroD9NpQ3/H6w pD9NfR3/Dv2qD9NuR3/I6tsD9N6U3" target="_blank"><img src="htt p:///imgextra/i4/750287797/T2nDXUXX4cXXX XXXXX_!!750287797.gif" width="137" height="116" border="0" /></ a></p></td></tr></table>说明：上面第一个红色部分为底图，了最后一个红色部分为加上去的小图，中间a href后面的红色部分是小图的链接，把这些都改成你要的就行。
网页设计与制作(Dreamweaver)《插入网页基本要素之图像与超链接》
超链接
超级链接是网页中的精华部分，当光标移至浏览器中的超级链接时，光
标会变成一只手的形状，此时单击链接便可以打开链接所指向的目标网
页。
没有它每个网页都要输入很长的URL地址。没有超链接，就无法通过单击的方式 遨游Web世界，而如果没有了单击的功能，Web就会是死水一潭。
在左边选择文件类型，右边单击左上方的加号图像编辑器
设置及启用外部图像编辑器：
设置不同类型图像文件编辑器：选择“编辑／ 首选参数／文件类型/编辑器”…… 通过外部图像编辑器对图像文件进行修改:
启用图像编辑器：选取图像→单击属性面板中 的“编辑”按钮即可启动相应编辑器，并打开 图像文件，进行修改。
插入网页基本要素之图像与超链接
插入网页基本要素之图像与超链接
图像的编辑与属性设置
单击选中图像，在属性面板中，设置图像的属性： 给图片增加提示：选中图像→在属性面板的“替代”中输入提示文字，在浏览器中，鼠标指向这个图片时，就会出现文字提示。 另外，有时，不显示图片后，可以显示该说明文字。
插入网页基本要素之图像与超链接
图像的编辑与属性设置
插入网页基本要素之图像与超链接
超链接的类型
1 页间链接：利用该链接可 以跳转到其他文档或文件，如图 形、电影、PDF或声音文件。
2 页内链接：也被称为锚记链接，利用它 可以跳转到本站点指定文档的位置。
4 空链接及脚本链接
它允许用户附加行为至对象或创 建 一 个 执 行 JavaScript 代 码 的 链 接。
插入网页基本要素之图像与超链接
图像的编辑与属性设置
单击选中图像，在属性面板中，设置图像的属性： 放大、缩小图像大小：拖动控制点或直接在属性面板中输入宽度与高度的像素值； 等比例放大、缩小图像大小：按住Shift同时拖动右下角控制点； 恢复图像大小：删除其属性面板中的宽度、高度值，即可恢复到原来的大小。 “边框”是以像素为单位的图像边框的宽度。默认为无边框，相当于加一个相框。 “编辑”启动在“外部编辑器”参数选择中指定的图像编辑器并打开选定的图像。
行为-实验要求
Dreamweaver实验一、实验目的：1. 掌握DW中行为的概念、添加方式；2. 掌握DW中常用行为的应用，给网页添加动态效果；二、实验环境：Windows XP；EditPlus；Dreamweaver；Flash；Photoshop/Fireworks；三、实验内容及要求：在DW中创建站点，将其根目录设置为给定的“XW-XueHao-XingMing”，然后操作如下；1.行为：交换图像!（1）.在网页XingWei-01.html中，进行如下操作：如下图所示，选中相册左边白色相框图片，将其命名为“Photo”；添加行为：1.给右侧图标“照片01”，添加行为，令鼠标经过它时，在左侧相框中显示照片“photo-1”；2.同样的，给右侧其它图标，添加行为，令鼠标经过它们时，左侧分别显示相应的照片；3.下面左图，为原始的网页效果；4.下面右图，为添加了行为后，鼠标经过第1个小图标时的网页效果；注意：若想让鼠标经过右侧图标时，显示出“小手”状态，可以给右侧每个图标添加一个空链接；注：添加上行为后，如下图所示，在HTML源文件中，自动添加了几行代码，不要对代码进行修改，否则效果会不起作用；2.行为：弹出信息!（1）.在网页XingWei-02.html中，进行如下操作：给网页添加行为，使网页打开时，能弹出对话框，显示信息“欢迎光临国际在线！”，如下图所示；3.行为：拖动AP元素!（1）.在网页XingWei-03.html中，进行如下操作：超链接的设置：1.给“显示原图”，添加超链接，令其打开网页“XingWei-03-LongMaoYuanTu.html”；2.令超链接，在新窗口中打开网页；第1个AP元素的设置：1.在网页中，绘制第1个AP元素，并将其命名为“T1”；注意：不要让AP元素嵌套在表格内部，要在网页中直接绘制，否则该行为有可能添加不上；2.在此AP元素中，插入拼图的第1个图片“LM-1.gif”；3.将AP元素“T1”的大小，设置成跟图片“LM-1.gif”的大小，一致；4.设置AP元素“T1”的位置为：左242像素，上112像素；其它4个AP元素的设置：1.同样的，再分别绘制其它4个AP元素；在其中插入相应的图片，设置大小，命名；2.设置AP元素“T2”的位置为：左408像素，上112像素；3.设置AP元素“T3”的位置为：左549像素，上112像素；4.设置AP元素“T4”的位置为：左242像素，上308像素；5.设置AP元素“T5”的位置为：左461像素，上308像素；添加行为，实现拖动图片的效果：1.首先，在DW工作区域左下角，选中<body>标签；（否则该行为，有可能添加不上）2.添加行为“拖动AP元素”，将AP元素设置为“T1”，具体参数的设置，如下图所示：3.同样的，再给其它4个AP元素，也添加行为“拖动AP元素”；行为添加完成后，在网页中，使用鼠标拖拽各个AP元素，将其摆放位置打乱；预览网页，原始效果如下左图所示，拼图完成后，效果如下右图所示；4.行为：改变属性！（1）.在网页XingWei-04-A.html中，进行如下操作：如下图，在网页左上方，分别个以下3个不同颜色的图片，为其添加空链接；为每个图片添加行为，使得单击该图片时，令网页背景色，改变为相应的颜色；注：网页最外层的DIV标签的名称为：box；修改网页背景色、修改网页中文字的字体，都是修改DIV标签box中的相应属性；相关颜色值的名称，为：“# 图片名称”；在网页右上方，分别选中文字“黑体”、“宋体”，为其添加空链接；给文字“黑体”，添加行为，使得单击文字时，网页中的字体都变成黑体；给文字“宋体”，添加行为，使得单击文字时，网页中的字体都变成宋体；（2）.在网页XingWei-04-B.html中，进行如下操作：选中网页右侧的大图片“photo1”，为其添加空链接；选中网页右侧的大图片“photo1”，为其添加行为，令鼠标经过该图片时，图片边框颜色变为墨绿色（#006600），如下图所示；再次选中右侧这个大图片“photo1”，为其添加行为，令鼠标离开该图片时，图片边框颜色变回白色（#FFFFFF），如下图所示；5.行为：效果！（1）.图片增大/收缩效果：在网页XingWei-05-A.html中，进行如下操作：如下图所示，在网页左侧的单元格中，插入图片“index_03.jpg”；将图片命名为：“SS”，并为其添加空链接；添加行为，使得鼠标经过时，图片“SS”的大小，由40%变为100%；可以勾选“切换效果”，查看其显示效果有何不同；注：添加上“效果”行为后，首先，如下图所示，在站点根目录中，自动生成了一个文件夹SpryAssets，其中存放着JavaScript代码文件SpryEffects.js，不要移动或修改它们，否则效果会不起作用；其次，如下图所示，在HTML源文件中，也自动添加了几行代码，不要对代码进行修改，否则效果也会不起作用；（2）.图片渐隐效果：在网页XingWei-05-B.html中，进行如下操作：如下图所示，在网页中选中人物图片，并将其命名为“Ren”，并为其添加空链接；添加行为，使得鼠标经过时，图片“Ren”出现渐隐效果，渐隐自40%到100%；可以勾选“切换效果”，查看其显示效果有何不同；（3）.网页晃动效果：在网页XingWei-05-C.html中，进行如下操作：在该网页中，选中整个表格，并将其命名为“TT”；添加行为，使得鼠标经过时，页面出现晃动效果；6.行为：显示/隐藏AP元素!（1）.在网页XingWei-06.html中，进行如下操作：（2）.在网页中，插入两个AP元素，并令其位置对其，大小重合，具体如下；在网页中，绘制第1个AP元素，属性设置如下：1.AP元素的名称为：P01；2.插入图片01.jpg；3.设置AP元素大小,与图片大小一致；4.设置AP元素的位置为：左350像素，上170像素；5.完成后，如下左图所示：在网页中，绘制第2个AP元素，属性设置如下：1.AP元素的名称为：P02；2.插入图片02.jpg；3.设置AP元素大小，与图片大小一致；4.设置AP元素的位置为：左350像素，上170像素；5.完成后，如上右图所示：（3）.行为的添加，具体要求如下：1.网页打开时，右侧的两个AP元素P01、P02均不可见，如下图所示；2.给左侧的两个小图片，分别添加空链接，令鼠标经过时，能够显示“小手”状态；3.给左侧第1个小图片，添加行为，令鼠标单击该小图片时，右侧显示P01，如下左图；4.给左侧第2个小图片，添加行为，令鼠标单击该小图片时，右侧显示P02，如下右图；注：若左侧是文字，而不是小图片，也可以实现类似的功能；7.行为：设置状态栏文本!（1）.在网页XingWei-07.html中，进行如下操作；添加行为，使网页打开时，在底部状态栏中，显示文字“欢迎光临东方花苑！”；8.完成后，将文件夹XW-XueHao-XingMing，压缩，上传至教师机。
Dreamweaver为页面添加图片教程
Dreamweaver为页面添加图片教程一、 Dreamweaver为页面添加图片1、在本地文件夹E:MyWeb下面的空白处，按右键选“新建文件夹”，这样建立了一个文件夹，用它来放图片，可以改名为tu或pic 或images都可以。
2、用菜单“窗口/对象”打开对象面板，点击“插入图像”，在对话框里选要插入的图片。
如果会出现对话框：“你愿意将该文件复制到根文件夹中吗？”，必须选“是”，然后将它保存到刚建好的文件夹里。
3、选中该图片，打开属性面板，可以在上面为图片取名，重新设置图片的高、宽，拖住图片角上的点可以变大小。
按住shift键，再拖动角上的点，可以使图片保持宽高比例拉伸。
如要恢复这原始大小，则单击右下角的“重设大小”按钮。
4、“链接”可以直接在这里输入地址。
“替代”是图片的说明，即鼠标指向图片所显示的文字；“边框”是图片边框宽度，“对齐”是对齐方式。
二、 Dreamweaver在页面中播放声音1、在完成全页面以后，如果要为该页添加背景音乐，注意背景音乐一般是*.midi文件，这样的声音文件十分小，易于快速下载，其他格式不适合作为背景音乐。
2、在页面中所有表格之外，（注意此时编辑窗口左下方的标签选择栏中仅显示这一项，或是在左下角点一下，这样才能保证这个行为是添加在整个页面上的）。
点击行为窗口上的“+”按钮，（或用菜单窗口/行为，打开行为窗口。
）3、从弹出菜单中选择“播放声音”。
打开一个对话框。
4、在这个对话框里用“浏览”选择要播放的声音，并确定。
5、这时行为面板上自动显示了事件为onload，动作为播放声音。
点击这一行，中间出现一个按钮。
点击按钮，可以设置这个声音在什么事件下播放。
可以选择“显示事件”/“IE5.0。
6、我们常用的如Onload（当页面载入时）、OnClick（单击鼠标）、OnMouseOver（鼠标移到对象上）、OnUnload(当关闭页面时)等。
7、该行为也可以设置在图片上、文字链接上。
Dreamweaver中使用图像和多媒体
3
4.1使用图像
3. 设置图像属性
◆图像属性窗口
2020/10/12
第1篇 网页设计与制作基础 4
第1篇 网页设计与制作基础
图像属性设置：
●设置图像大小 设置图像大小可以直接在“宽”和“高”两个文本框内输入新的数值即可。
还可以直接用鼠标拖动来改变图像的大小。具体操作为： （1）选中要改变的图像，图像四周出现控制点。 （2）拖动任一个控制点则可改变图像大小，如图：
2020/10/12
16
4.2 多媒体的使用
第1篇 网页设计与制作基础
3.插入FLV视频
◆FLV：Flash视频文件，在文档中插入的FLV文件是以SWF组件显示的，当 在浏览器中查看时，该组件显示所选的FLV文件以及一组播放控件。
◆FLV视频分类： 累进式视频
流视频
2020/10/12
17
◆插入累进式视频方法：参考教材P64 ◆插入流视频方法：参考教材P65
2020/10/12
10
4.2 多媒体的使用
1.在网页中插入Flash动画
◆Flash动画的类型：
● Flash源文件(.fla) ● Flash电影文件(.swf) ● Flash库文件(.swt) ● Flash元素(.swc)
2020/10/12
第1篇 网页设计与制作基础 11
第1篇 网页设计与制作基础
◆插入Flash动画：
操作过程：要在网页文档中插入Flash动画，首先 将光标移至所需插入Flash动画的位置，通过选择 “插入” →“媒体” →“ SWF”命令，打开“选 择文件”对话框，选择所需插入的Flash动画，单 击【确定】按钮，即可插入到网页文档中。
2020/10/12
DW_04在网页中插入图像
2016年7月4日星期一
5
教育学院
网站建设
第4章在网页中插入图像
2016年7月4日星期一
6
教育学院
网站建设
第4章在网页中插入图像
插入一幅图像后显示下列对话框：
关于图像说明文件的链接，目 前浏览器都还不支持该属性。
替换文本：用于指定图像显示之前或图像无法显示
时显示的文本。当浏览网页时，鼠标指向图片上时将 作为图片提示信息显示文本框中的文本。
四、插入FireworksHTML
Fireworks是网页三剑客（Dreamweaver 、Flash 、 Fireworks）之一，用于设计制作图像，也可以生成 HTML文档。 本操作用于在网页中插入一个由Fireworks制作的 HTML文档。 方法：将插入点置于要插入图像占位符的位置，
单击“插入”面板“常规”的“图像”中的
距离。
特别注意“对齐”，左右可使图片与文本的位置相对协调。
“边框”是以像素为单位的图像边框的宽度。默认为无边框，
相当于加一个相框。
“编辑”启动在首选参数的“文件类型/编辑器”参数选择中指 定的图像编辑器并打开选定的图像。
“替代”中用于输入图像的提示文字。
2016年7月4日星期一
17
教育学院
网站建设
第4章在网页中插入图像
单击“插入”面板“常规”的“图像”中的“图像占
位符”按钮。或者“插入—图像对象—鼠标经过图 像”。
2016年7月4日星期一 12 教育学院
网站建设
第4章在网页中插入图像
用指定的 颜色显示 占位符
图像占位符的属性面板：
SRC属性是空的
2016年7月4日星期一
13
教育学院
DW中的图片和超链接
各类超链接
• 按照链接路径的不同,网页中超链接一般分为以下3 种类型: 内部链接,锚点链接和外部链接。 • 如果按照使用对象的不同，网页中的链接又可以分 为：文本超链接，图像超链接，E-mail链接，锚点 链接，多媒体文件链接，空链接等。
创建文本超级链接
• 文本超级链接是最常见的超级链接，通过使用鼠标 点击文本即可从一个网页跳转到另一个网页。
锚记链接
• 锚点即为一个文档中的某一个特定的位置的标记， 通过创建锚点，可以某个超级链接链接到文档的某 个锚点，方便文档之间的跳转。 • 创建到锚点的链接的过程分为两步：创建锚点、创 建到该锚点的链接。
创建命名锚记
• 在制作网页时，为了达到跳转到网页固定位置的目 的，可以使用锚链接。通过对网页中指定位置的命 名，利用超级链接打开目标网页时可直接跳转到相 应的命名位置上。
JPEG格式
• JPEG全称为“Joint Photographic Experts Group”，意为联合图像专家组，它可以高效地压 缩图片，丢失人眼不易察觉的部分图像，使文件容 量在变小的同时基本不失真，通常用来显示颜色丰 富的精美图像。
常用的GIF与JPEG文件格式的区别
文件格式
说明 真彩色图片（多于256色），对于高 颜色数的照片最好使用JPEG文件格 式 256色或者更少的图像，低颜色数下 GIF比JPEG装载的更快
网页图像的格式及来源
• • • • GIF格式 JPEG格式 PNG格式 网页图像来源
GIF格式
• GIF全称为“Graphics Interchange Format”，意 为可交换图像格式，它是第一个支持网页的图像格 式，在PC机和苹果机上都能被正确识别。它最多支 持256种颜色，可以使图像变得容量相当小。GIF图 像可以在网页中以透明方式显示，还可以包含动态 信息，即GIF动画。
网页设计如何插入图片
网页设计如何插入图片网页〔制定〕如何插入图片网页制定如何插入图片?以下就是网页制定如何插入图片等等的介绍，希望为您带来帮助。
第一步，先打开我们的网页制作如见，目前比较常用的是Dreamweaver。
选择HTML。
第二步，打开这个软件之后，我们可以看到左上角有三个选项，我们选择其中的"制定'。
第三步，来到制定界面之后，把光标定位在自己要插入图片的位置。
这个操作是不用写代码的，所以可以选择工具栏上的"插入'命令。
接下来，我们在弹出的下拉菜单中选择插入图像命令。
选择完插入图像命令之后，会弹出这样一个小窗口，我们把要插入的图片的文件名输入进去之后再点击确定就可以了。
做完上面这一切步骤之后，图片就可以插入到网页中了，大家可以预览网页哦!如何使用Dreamweaver在网页中添加图片1、网页中使用图片的原则是：在确保画质的状况下，尽可能的使用数据量小的图片，这样有利于用户快速浏览网页。
2、网页中使用的图片格式有一下几种，如图：3、GIF：数据量小，并且带有动画信息，可以透明背景显示，如图：4、JPG：可以高效的压缩图片，又不影响图片的效果，图片不失真，如图：如何使用Dreamweaver在网页中添加图片?5、PNG：融合了JPG和GIF的优点。
注意事项：图片的选择依据自己的网页必须求进行相关选择。
怎样制作网页首先，可以告诉想学网页制作的朋友。
学习制作网页和学习其它知识一样，是要有基础的。
在基础之上学习起来会比较轻松和快捷的。
其次，要清楚学习它是用来做什么。
建议你要具备的条件：对〔电脑〕熟练操作，使用电脑最好在一年以上，对网页制定感兴趣，有较充足的学习时间，熟悉office 办公软件。
当然，这些不是一定必须的。
第一阶段：开始时最好是学些网页编辑软件，如：FrontPage、Dreamweaver.这样可以使您更了解网页制作与运营的原理。
最好使拿本教程来学学，结合教程边学习边制作。
第6章_DW中的超链接与图片
图3.5 图像映射效果
4 动态图像效果 通常网页中的动态图像效果需要编写 JavaScript 脚本程序才能获得，不过 Dreamweaver 能够使用户不用编写一行代码，就能生成某些很好的图像效果， 例如鼠标经过图像、网站相册等。 1．制作鼠标经过图像 鼠标经过图像就是指当访问者的鼠标经过图像时，图像变为另一幅图像； 而鼠标离开时，图像又恢复为原始图像。它由两幅图像组成，即首次载入时显 示的图像即原始图像和鼠标经过后翻转的图像即鼠标经过图像。在创建鼠标经 过图像时应使用相同大小的两幅图像，可以使用 Fireworks 或 Photoshop 等 图像处理软件制作出要用的图像。一般鼠标经过图像通常用于按钮导航，图 3.6 所示就是一个鼠标经过图像在按钮导航中的应用效果。
Web 图像的处理流程
1．创建图形图像 2．创建 Web 对象 3．优化图像 4．导出图形
Web 图像使用要点 1．确保文件较小 2．Biblioteka 制图像的数量和质量 3．合理使用动画
在网页中使用图像
1 插入图像 在 Dreamweaver中插入图像的步骤如下。 （1）将光标置于要插入图像的位置，在“插入”栏的“常用”选项卡中 单击“图像”按钮 或选择“插入”菜单中的“图像”命令。 （2）此时将打开“选择图像源”对话框，选取存放在站点中的图像文件 ，最后单击“确认”按钮即可将图片插入到指定区域。 （3）如果所选择的图像文件不是站点中的文件，则将打开 “Macromedia Dreamweaver MX”对话框，如图所示。提示是否将图像 文件保存到根目录下，单击“是”按钮，然后打开“拷贝文件为”对话 框，定位到站点中用于存放图像文件的文件夹，最后单击“保存”按钮 即可。
锚点链接 插入的锚点
输入锚点名
DW教程--四、插入媒体和制作链接
第四节制作多媒体页面通过前面三课的学习，相信你已经能制作出一个简单的网页了，很有成就感吧^_^ 不过，一个优秀的网站应该不仅仅是由文字和图片组成的，而是动态的、多媒体。
为了增强网页的表现力，丰富文档的显示效果，我们可以向其Flash 动画、Java小程序、音频播放插件等多媒体内容。
一、插入Flash动画1、插入Flash为了合理的安排这一课的页面元素，在插入Flash动画之前，让我们先来复习一下表格布局吧^_^打开03.html，设置页面属性，在弹出的“页面属性”对话框中，“外观”项设置字体为“宋体”，字号为16px，文本颜色为#F282A8，背景图像为img/008.JPG，上边距为50px、下、左、右的边距都为0。
“链接”项选择始终无下划线，链接颜色为#F282A8，已访问链接为#F5E458。
现在我们开始布局～^_^～（1）插入一个1行1列的表格（表格1），表格的宽度为726px，边框粗细为0，单元格边距为0、单元格间距为1，背景颜色为#892321，将表格居中对齐。
（2）插入一个3行2列的表格（表格2），表格的宽度为100％，边框粗细为0，单元格边距和单元格间距都为0，背景颜色#6DCFF6。
设置第一行左边单元格的宽为173px，高为137px，设置第二行的高为238px，将第三行的两个单元格合并，高度为50px。
在第一行左侧单元格插入图片img/102.gif,在右侧单元格插入图片img/101.jpg。
在第三行将光标水平居中，输入文字“版权所有©闪客启航”（3）在表格2第二行左侧单元格插入一个6行一列的表格（表格3），表格宽度为95％，边框和单元格边距为0，单元格间距为5，将表格居中对齐。
第一行高度为15，其余各行高度都为40。
(4) 在表格2右侧单元格插入一个1行2列的表格（表格4），表格宽度为550px。
边框、单元格边距和间距都为0。
好啦～我们完成了页面的布局，开始插入页面元素。
网页设计Dreamweaver插入图片详细步骤解析
Dreamweaver网页设计插入图片步骤详细步骤打开Dreamweaver MX 2004 软件新建页面，再打开标签面板，在【行为】中选择【预先载入图像】选项，加快图片下载速度。
操作步骤（ 1 ）新建文件，操作如图1 所示。
（ 2 ）保存页面并插入图片。
为了在插入图片时不提示相对路径，先保存页面为“ test1.htm ”。
然后插入要预载的图片，如图2 所示。
（ 3 ）添加“预先载入图像”功能。
使用Dreamweaver 的行为面板添加“预先载入图像”功能，如图3 所示。
（ 4 ）选择要预载的图片，操作如图4 所示。
提示：如果站点上有几张大图片，可以单击【预先载入图像】上方的【+ 】图标，添加多张预载图像，具体操作与图4 所示相同。
（ 5 ）保存文件完成操作。
这样就可以加快图片的下载速度，让用户在浏览网页时不会等太久，这对于提高网站的效能具有非常重要的意义。
随机广告图片浏览者浏览网页时可以发现，网页中动态更新的广告图片比静态固定的图像更具有活力和吸引力。
如何制作网页中的随机广告图片是本实例所要研究的问题。
效果说明：在浏览网页时，网页的banner 区域将出现一张广告图片，随后每两秒更新一次广告图片，而且广告图片是以随机的方式出现的。
通过使用Macromedia 的扩展插件Adv_Random_Images ，可以轻松地完成网页中随机广告图片的制作。
操作步骤：（ 1 ）安装插件。
使用菜单栏中的【命令】｜【扩展管理】命令调出【Macromedia 扩展管理器】对话框，安装Adv_Random_Images 扩展，如图 1、2 所示。
（ 2 ）调用命令。
新建立一个HTML文件起名为banner.htm 文件，将光标置于要插入广告的位置上，并调出【Random Images 】命令，如图 3 所示。
（ 3 ）设置图像。
在弹出的【Random Images 】对话框中对图片变换属性进行设定，如图 4 所示。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
10
教育学院
网站建设
第4章在网页中插入图像
例：用下列素材图片制作导航栏
2019年4月21日星期日
11
教育学院
网站建设
第4章在网页中插入图像
三、插入图像占位符
图像占位符：顾名思义，仅表示显示指定大小图 像的位置，并没有指向一个具体的图像。在代码中， 是没有指定SRC源文件的图像标签，显示为灰色空白。 实际作用在于先确定图像的显示位置大小，以后 再插入具体图像。 方法：将插入点置于要插入图像占位符的位置，
教育学院
网站建设
第4章在网页中插入图像
第二节 在网页中插入图像和图像对象
一、插入图像
方法：单击欲插入图像处，在“插入”栏的“常 用”类别中，单击“图像”图标或选择“插入／图
像”→选择一个图形文件。或者从站点文件夹中拖动
一个图像文件到网页中欲插入处。 特别说明：与添加文本不同，插入的图像不能从 别的文档中复制；必须特别说明的是，插入到网页中 的图像只能以文件的形式独立存在于站点文件夹中。
距离。
特别注意“对齐”，左右可使图片与文本的位置相对协调。
“边框”是以像素为单位的图像边框的宽度。默认为无边框，
相当于加一个相框。
“编辑”启动在首选参数的“文件类型/编辑器”参数选择中指 定的图像编辑器并打开选定的图像。
“替代”中用于输入图像的提示文字。
2019年4月21日星期日
17
教育学院
网站建设
击“插入”面板“常规”的“图像”中的“鼠标经过图
像”按钮。或者“插入—图像对象—鼠标经过图像”。 实际上用于制作网页中的超级链接。
2019年4月21日星期日 9 教育学院
网站建设
第4章在网页中插入图像
鼠标经过时的提示文本
实践操作：用素材中的图片在教师法的网页中制 作导航链接。
2019年4月21日星期日
览到源文件，或者键入路径。
“垂直边距”和“水平边距”沿图像的边缘添加边距（以像 素为单位），实为与其它内容的间距，即其它内容靠近图像的 程度。
图像的内部标识 替换文本
2019年4月21日星期日
16
教育学院
网站建设
第4章在网页中插入图像
“垂直边距”沿图像的顶部和底部添加边距。 “水平边距”沿图像左侧和右侧添加边距，如文字与图片的
单击“插入”面板“常规”的“图像”中的“图像占
位符”按钮。或者“插入—图像对象—鼠标经过图 像”。
2019年4月21日星期日 12 教育学院
网站建设
第4章在网页中插入图像
用指定的 颜色显示 占位符
图像占位符的属性面板：
SRC属性是空的
2019年4月21日星期日
13
教育学院
网站建设
第4章在网页中插入图像
主讲：韩维良
2019年4月
第4章在网页中插入图像
第一节 认识网页图像
图像在网页中具有提供信息、展示作品、装饰网页、 表达个人情调和风格的作用。 用户可以在网页中使用 GIF 、 JPEG(JPG ）、 PNG 三种
图象格式，其中使用最广泛的是GIF和JPEG两种格式。
Gif 文件：无损压缩，可以使用透明背景 , 可以叠加 多张 Gif 图使用 Gif 动画，但色彩数少，可用于 Logo 等
2019年4月21日星期日
5
教育学院
网站建设
第4章在网页中插入图像
2019年4月21日星期日
6
教育学院
网站建设
第4章在网页中插入图像
插入一幅图像后显示下列对话框：
关于图像说明文件的链接，目 前浏览器都还不支持该属性。
替换文本：用于指定图像显示之前或图像无法显示
时显示的文本。当浏览网页时，鼠标指向图片上时将 作为图片提示信息显示文本框中的文本。
于色彩不太丰富的图片。
JPEG(JPG ）：有损压缩，压缩时忽略某些细节，色 彩丰富，照片级的格式。
2019年4月21日星期日 3 教育学院
网站建设
第4章在网页中插入图像
PNG：网络专用图像格式，兼有Gif、JPEG(JPG） 格式的双重优点，属于无损压缩，但色彩丰富。
2019年4月21日星期日
4
第4章在网页中插入图像
“宽”、“高”显示图像的大小尺寸。 如果改变了图像的原始大小尺寸，则在宽、高文本
框右侧会显示出“重高图像大小”按钮，单击则恢复
到原始的大小。
“原始”：指定载入正式图像前显示的低分辨率图 像。
2019年4月21日星期日
18
教育学院
网站建设
第4章在网页中插入图像
第四节 编辑网页图像
四、插入FireworksHTML
Fireworks是网页三剑客（Dreamweaver 、Flash 、 Fireworks）之一，用于设计制作图像，也可以生成 HTML文档。 本操作用于在网页中插入一个由Fireworks制作的 HTML文档。 方法：将插入点置于要插入图像占位符的位置，
单击“插入”面板“常规”的“图像”中的
2019年4月21日星期日
7
教育学院
网站建设
第4章在网页中插入图像
尽量将网站中的所有图像文件统一复制到站点的 images文件夹中，如果图像文件不在站点目录中，DW
会提示保存到站点目录中。
注意图像一般较大，不可过多地插入，一般情况 下，将网页文件控制在40K左右，通过状态栏知道。 通常做法：先在图像处理软件中降低分辨率，改 变文件大小，尤其是对数码相机拍摄的照片。
2019年4月21日星期日
8
教育学院
网站建设
第4章在网页中插入图像
二、插入鼠标经过图像（翻转图像）
鼠标经过图像是一种在浏览器中查看并使用鼠标指针 移过它时发生变化的图像，单击则转向指定的超级链接。 用Java语言控制。 需要两张图片：一张是一般状态下的图片，另一张 是鼠标经过时显示的图片。 方法：将插入点置于要建立鼠标经过图像的位置，单
“FireworksHTML”按钮。或者“插入—图像对象— FireworksHTML”。
2019年4月21日星期日 14 教育学院
网站建设
第4章在网页中插入图像
2019年4月21日星期日
15
教育学院
网站建设
第4章在网页中插入图像
第三节 设置图像属性
方法：单击选中图像，在属性面板中，设置图像的属性。 “源文件”指定图像文件的存放路径。单控点或直接在属性面板中输入 宽度与高度的像素值； 等比例放大、缩小图像大小：按住 Shift 同时拖动右下角控制 点； 一般不提倡修改图片的大小，应提前用图像处理软件修改到合 适的大小。 恢复图像大小：删除其属性面板中的宽度、高度值，或者单击 “重高图像大小”按钮，即可恢复到原来的大小。