Dreamweaver课件：第3章-插入图像

复习一下:•新建网站站点并进行目录规划;•Firewoks布局网页,切片生成网站站点;•导入/导出站点;将一文件夹指定为一站点;•文本的操作(文本图文环绕;移动文字（marqueebehavior=scrolldirection=upwidth=120height=40scrollamount=1scrolldelay=40onmouseover=this.stop()onmouseout=this.start()/marquee;移动图片)•插入图片,背景图片,背景音乐,插入图象占位符,图象链接,热区;创建网站相册;鼠标经过图像第4章插入图像课前导读课堂讲解上机实战课后练习课前导读•基础知识•重点知识•提高知识基础知识网页支持的图像格式及图像的来源。重点知识插入图像的方法、图像属性设置的方法、网站相册的制作。应结合上机实战认真练习。提高知识图像链接的设置。课堂讲解•图像的格式及来源•插入图像•设置图像的一般属性•给图像加入链接•图像热点链接•图像高级设置图像的格式及来源由于受网络速度等方面的影响，因此在网页的制作中图像的格式有一定的要求，一般用于网页的图像要求是GIF、JPEG或PNG3种格式中的一种。目前大部分的浏览器都支持GIF和JPEG文件格式，只有MicrosoftInternetExplorer（4.0及更高版本）和NetScapeNavigator（4.0及更高版本）部分支持PNG格式。GIF（GraphicsInterchangeFormat）意为图像交换格式。GIF是第一个支持网页的图像文件，它最多支持256种颜色，可以使图像变得相当小。GIF图像可以在网页中以透明方式显示，还包含动态信息，也就是网页上大量使用的GIF动画。GIF在网页中大量用于站点图标LOGO、广告条BANNER及网页背景图像，但由于GIF受颜色数目的限制，GIF不适合用作照片级的网页图像。JPEG（JoinPhotographGraphics）意为联合照片专家组，通常称为JPG。JPEG图像格式可以高效地压缩，丢失人眼不易察觉的部分图像，使得图像文件在变小的同时基本不丢失颜色，通常用来显示照片等颜色丰富的图像。PNG（PortableNetworkGraphics）意为便携网络图像，是逐渐流行的网络图像格式。PNG格式可以说是GIF格式和JPEG格式的综合应用，既融合了GIF格式透明显示的特点，又具有JPEG处理精美图像的优势，因此PNG图像很可能取代GIF图像和JPE图像格式。图像的来源有多种方式，可以自己利用图像处理软件（如Photoshop、CorelDRAW、Fireworks等软件）制作，也可以到网上下载或购买一些网页素材光盘，进行加工后用到自己的网页中，下面给出网上提供网页素材的一些网站。•网页制作大宝库：一个专业的网页制作网站，提供各种网页制作技术、素材等，网址为。•主页素材随便找：网页素材提供网站，含网页制作工具、网页动画、网页背景、网页图片、网页边框、网页音乐。网址为cxzhp.51.net。•素材：网页素材提供网站，提供背景图片、按钮、文本框、水平线、人物头像等。网址为。•梦幻作坊：网页素材提供网站，网址为。•素材精品屋：网页素材提供网站，含壁纸、图库、设计素材、动画宝库、矢量图、特色图标等。网址为sucai.silversand.net。插入图像•直接插入图像•用占位符插入图像图像既可插入到网页内容中也可作为网页背景，这里介绍将图像插入到网页中作为网页内容的方法。网页中一般是图文混排结构，除了添加文本内容、设置文本格式外，还需要插入有说服力的资料图片。下面介绍图片的插入与属性设置的方法。在DreamweaverMX2004中插入图像的方法主要有直接插入和占位符插入两种。直接插入图像直接插入图像的具体操作如下。（1）将光标定位到要插入图像的位置（文本、层或表格中）。（2）执行如下方法之一：•选择[插入][图像]菜单命令，打开“选择图像源”文件对话框，如图4-1所示；•单击“插入栏”的“常用”选项卡中的按钮，打开“选择图像源文件”对话框；•按【Ctrl+Alt+I】键打开“选择图像源文件”对话框。（3）在“选择文件名自”栏中选中单选项，在“查找范围”下拉列表框中指定要插入图像的路径并在文件列表中选择需要的文件名称，如图4-1所示。（4）在“相对于”下拉列表框中选择“站点根目录”选项，如图4-2所示。（5）单击按钮，若所选择的图像文件不在定义的本地站点中，系统会打开如图4-3所示的询问对话框，询问是否保存到本地站点目录下。（6）在提示对话框中单击按钮，打开“复制文件为”对话框，在该对话框中选择保存路径，并在“文件名”文本框中更改图像的名称，如图4-4所示。（7）单击按钮即可将所选的图像插入到网页中指定的位置，如图4-5所示。图4-1图4-2图4-3图4-4图4-5用占位符插入图像如果目前还不确定该插入哪幅图像，但可以确定图像的大小，则可以使用占位符的方式插入图像，当确定好要插入的图像时再进行插入即可。用占位符插入图像的具体操作如下。（1）将光标定位到要插入图像的位置（文本、层或表格中）。（2）执行如下方法之一：•选择[插入][图像对象][图像占位符]菜单命令，打开“图像占位符”对话框，如图4-6所示；•单击“插入栏”的“常用”选项中按钮后的下拉按钮，在打开的列表中选择“图像占位符”选项，打开“图像占位符”对话框。（3）在“图像占位符”对话框中进行具体设置。•在“名称”文本框中输入要作为图像占位符标签显示的文本。这是可选步骤，如果不想显示标签文字，可将此文本框留空。输入的名称必须以字母开头，并且只能包含字母和数字，不允许使用空格和高位ASCII字符。•在“宽度”和“高度”数值框中，以像素为单位输入数值设置图像大小。这是必需的。•对于“颜色”（可选），可以在颜色选择器中选择一种颜色（如图4-7所示），也可以在“颜色”文本框中输入颜色的十六进制值（如#FF0000）或输入网页安全色名称（如red）。•在“替换文本”（可选）文本框中输入描述该图像的文本。在浏览器中预览图片效果时，当鼠标移到用占位符添加的图像上时替代文本就会出现。图4-7图4-6（4）参数设置完成后的“图像占位符”对话框如图4-8所示。单击按钮，文档中即会出现图像占位符，如图4-9所示。（5）双击占位符打开“图像占位符”对话框，再按照图片的插入方法插入创建好的图像即可。插好图像后用属性面板重新对该图像进行设置。图4-9图4-8设置图像的一般属性插入图像后可根据网页页面的需要在“属性”面板中编辑图像的属性，具体操作如下。（1）选取要编辑的图像，展开“图像”属性面板，如图4-10所示。其左上角显示了选取图像的缩略图，“源文件”文本框中显示了插入图像的源位置。图4-10（2）在“图像”文本框中可设置图像的标签名称，以便在使用Dreamweaver行为（例如“交换图像”）或脚本撰写语言（例如JavaScript或VBScript）时可以引用该图像，如图4-11所示。（3）在“宽”和“高”数值框中输入数值可以修改图像的大小。单击“宽”和“高”文本框后的按钮可以将图像恢复到原始大小。图4-11可以拖动图像四周的控制点来调整图像的大小，拖动图像4个角上的控制点可以成比例调整图像大小。（4）在“源文件”文本框中可修改图像的路径，也可单击其右侧的“浏览文件”按钮，在打开的“选择图像源文件”对话框中选择新的图像文件。（5）在“垂直边距”数值框中设置图像距顶部和底部的边距。在“水平边距”数值框中设置图像距左侧和右侧的边距。（6）单击“编辑”栏中的“裁剪”按钮可以修剪图像的大小，从所选图像中删除不需要的区域。单击按钮后，打开一个警告窗口（如图4-12所示），提示该操作不能撤消，单击按钮后图片上出现裁剪选取框，其中中间亮的部分为需要的图片内容，四周较暗的为要裁剪的部分，如图4-13所示。图4-13图4-12（7）用鼠标指针拖动裁剪选取框四周的控制点调整裁剪范围，如图4-14所示。（8）调整好裁剪范围后，在图片上双击即完成裁剪，裁剪后的效果如图4-15所示。（9）单击“编辑”栏中的按钮可调整图片的明暗度，单击按钮后打开如图4-12所示的询问对话框，再单击按钮，打开如图4-16所示的“明暗/对比度”对话框。（10）在“亮度”项中拖动滑块可调整图像的明暗度，滑块越向右图片越亮，在“对比度”项中拖动滑块可调整图像的对比度，滑块越向右对比度越强。若在对话框中选中复选框，则在调节明暗度和对比度时，可看到页面中图片的变化。完成后单击按钮即可完成设置。（11）单击“编辑”栏中的“锐化”按钮可对图片进行锐化处理。单击该按钮打开如图4-17所示的“锐化”对话框。图4-15图4-14图4-17图4-16（12）拖动“锐化”项中的滑块，可调整图片的轮廓，滑块越向右图片的轮廓越明显。（13）在“图像”属性面板的“边框”文本框中设置图像的边框粗细，值越大边框越粗，如图4-18所示是边框为“5”的图片。（14）在“图像”属性面板的“对齐”下拉列表中设置图像与周围文字的对齐方式，其选项如图4-19所示（15）在“低解析度源”文本框中指定在载入主图像之前应该载入的图像。低解析度源中使用的是主图像的2位（黑和白）图，这样可以迅速载入并使访问者对其等待看到的内容有所了解。图4-19图4-18给图像加入链接除了对文本进行链接设置外，也可以为图像加入链接，具体操作如下。（1）选中要建立链接的图像。（2）单击“图像”属性面板“链接”项后的按钮，在打开的“选择文件”对话框中选择要链接的文件，这里选择“index.html”（即首页），如图4-20所示。（3）单击按钮返回到Dreamweaver编辑窗口，新建链接地址将出现在“链接”文本框中，如图4-21所示。（4）在“替代”下拉列表中输入注释文本。在浏览器中浏览时，当鼠标移到图像上面停留一会后会显示该文本。（5）按【F12】键在IE浏览器中浏览，当鼠标移动到该链接上面时，会变成手形（如图4-22所示），单击它则可以在当前窗口中打开该文本所链接的页面，如图4-23所示。图4-20图4-21图4-22图4-23图像热点链接在前面所讲的链接中，一个对象只能创建一个链接，但在网页设计时有可能要在一个图像上添加多个链接，若使用前面所讲的链接方法则只能链接到一个目标。为了解决这一矛盾，在Dreamweaver中巧妙地使用了热点进行链接。利用热点工具可以将一个图像划分为多个热区作为链接点，再单独对每个热区添加相应的链接图像热点链接。具体操作如下。（1）选取要添加热区的图片，此时属性面板中出现4个热点工具，如图4-24所示。4个热点工具的作用如下。•：指针热点工具，用于移动、放大或缩小热区。•：矩形热点工具，用于绘制矩形热区。•：椭圆形热点工具，用于绘制圆形热区。•：多边形热点工具，用于绘制多边形热区。（2）选择一个热点绘制工具，在图像上绘制热区后，自动打开“热区”属性面板，如图4-25所示。（3）在属性面板中进行具体的设置。•在“链接”文本框中输入要链接的文件名称或相应的锚点名称，如图4-24所示。•在“目标”下拉列表框中选择打开链接页的方式，如图4-26所示。•在“替代”文本框中输入鼠标移动到链接热点上时显示的别名，如图4-26所示。图4-24图4-25图4-26图4-27（4）用同样的方法绘制其他热点，并设置相应的链接。（5）在图片中绘制完成所有的热点后在文档的空白区域单击，以便应用属性的设置。（4）热点链接完成后按【F12】键预览页面，当鼠标移至热区上时即可看到手形图标下面有一个提示文本，如图4-27所示。单击该链接就会打开对应的页面。图像高级设置•鼠标经过图像设置•导航条的创建鼠标经过图像设置鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像。鼠标经过图像由两个图像组成，主图像（首次载入页时显示的图像）和次图像（当鼠标指针移过主图像时显示的图像）。鼠标经过