1、2018/12/21,网页中的图片,第三章,网页设计与制作,2018/12/21,2,本章要求,主要内容： 了解网页中图片的主要格式 掌握与图片相关的HTML标签 掌握用Dreamweaver插入图片，并能调整图片的相关参数 主要目的： 学会使用HTML语言插入图片 掌握在Dreamweaver中修改图片尺寸的方法。 能够创建网站相册,2018/12/21,3,本章内容,2018/12/21,4,第3章 网页中的图片,图片是网页中不可缺少的元素，巧妙地在网页中使用图片可以为网页增色不少。本章先介绍在网页中常用的两种图片格式，再介绍如何在网页中插入图片，以及图片的样式和插入的位置。,2018/1
2、2/21,5,3.1 网页中的图片格式,Web页中通常使用的图像文件有JPEG、GIF、PNG3种格式，但最常用的网页图片为JPEG、GIF两种图像格式。为了保证浏览者下载网页的速度，常使用JPEG和GIF这两种压缩格式的图像。 GIF文件 JPEG文件 PNG文件,2018/12/21,6,3.1 网页中的图片格式,目前在网页上使用的图片格式主要是GIF和JPG两种。 GIF格式即为图像交换格式。 GIF格式只支持256色以内的图像，且采用无损压缩存储，在不影响图像质量的情况下，可以生成很小的文件； 同时它支持透明色，可以使图像浮现在背景之上； 其为交换格式，在浏览器下载整张图片之前，用户就
3、可以看到该图像，所以在网页制作中首选的图片格式为GIF。 JPG格式为静态图像压缩标准格式。 它为摄影图片提供了一种标准的有损耗压缩方案。 在保存时能够将人眼无法分辨的资料删除,以节省存储空间,但这些被删除的资料无法在解压时还原。,2018/12/21,7,3.1 网页中的图片格式,在网页中使用图像时应该注意的几个问题 1网页的图像文件要小 2控制网页中图像的数量和质量 3在网页中恰到好处地添加动画,2018/12/21,8,3.2 与图片相关的HTML标签,1、 插入图片标签的作用就是插入图片，其中属性“src”是该标签的必要属性，该属性指定导入图片的导入位置和名称。 注意：导入的图片与HT
4、ML文件是出于同一目录下的，如果不处于同一目录下，可以采用设置路径的方式来导入。关于路径的概念在下一章中进行介绍。,2018/12/21,9,3.2 与图片相关的HTML标签,【例】 在网页中插入图片示例图片的插入,2018/12/21,10,3.2 与图片相关的HTML标签,图片的插入,2018/12/21,11,3.2 与图片相关的HTML标签,2、图片标签属性的应用 “width” “height” “border” “alt”,2018/12/21,12,3.2 与图片相关的HTML标签,“width”和“height”属性 控制图片大小依靠“width”和“height”属性： “w
5、idth”属性控制图片的宽度， “height”属性控制图片的高度。 当图片只设置了其中一个属性的时候，另一个属性就自动依照原始图片的两个属性值的比例变化。 如图片原始大小为80*60，当只设置了该图片的显示宽度为160，高度将自动以？来显示。,2018/12/21,13,3.2 与图片相关的HTML标签,“width”和“height”属性 宽度和高度的语法结构：或或 其中，n代表一个数值，单位为像素，m代表0100的数，即m%的取值范围为0%m%，图片将以相对于当前窗口大小的百分比来表示。,2018/12/21,14,3.2 与图片相关的HTML标签,【例】 图片大小控制示例图片的大小控制
6、,2018/12/21,15,3.2 与图片相关的HTML标签,2018/12/21,16,Border属性 主要是用来给图片的周围加上指定粗细的边框。 语法结构：其中，n为一个数值，单位为像素。,3.2 与图片相关的HTML标签,2018/12/21,17,【例】 图片边框设置示例图片的边框,3.2 与图片相关的HTML标签,2018/12/21,18,3.2 与图片相关的HTML标签,图片的边框,2018/12/21,19,alt属性 “alt”属性用来设置代替图片的文字，其属性值设置的是在图片不能显示时转而显示的文字。,3.2 与图片相关的HTML标签,2018/12/21,20,【例】
7、图片替代文字设置示例文字代替图片文字代替图片,3.2 与图片相关的HTML标签,2018/12/21,21,3.2 与图片相关的HTML标签,正常显示,图片无法显示，文字代替图片,2018/12/21,22,3.2 与图片相关的HTML标签,测试时可能会发现浏览器不会不显示图片，那是因为图片就在本地计算机中，可以先关闭浏览器中显示图片的功能。,2018/12/21,23,取消显示图片,3.2 与图片相关的HTML标签,2018/12/21,24,3.2 与图片相关的HTML标签,2018/12/21,25,3.2 与图片相关的HTML标签,2018/12/21,26,3.3 使用Dreamwe
8、aver 8插入图片,将文本光标移到要插入图片的地方,选择“插入”菜单中的“图像”命令，在出现的文件选择对话框中选择要插入的图片文件。在目录窗口下方有一行“相对于”下拉框，选择“文档”为与文档的相对路径，另一个选项是与根目录的相对路径，通常选择“文档”。,2018/12/21,27,设置图片属性,3.3 使用Dreamweaver 8插入图片,插入图像后，在“属性”面板中显示该图像的属性。,2018/12/21,28,给图片添加文字说明,当图片不能在浏览器中正常显示时，网页中图片的位置就变成空白区域。为了让浏览者在不能正常图片显示时也能了解图片的信息，常为网页的图像设置“替换”属性。“替换文本
9、”的作用是当发布站点之后，因为网速或者其他因素造成图片不能很快显示时，替换的文本内容就可以优先显示出来，以减少浏览者因长时间等待图片而产生的疲倦感。,2018/12/21,29,插入图像占位符,在网页布局时，网站设计者需要先设计图像在网页中的位置，等设计方案通过后，再将这个位置变成具体图像。Dreamweaver提供的“图像占位符”功能，可满足上述需求。在网页中插入图像占位符的具体操作步骤如下。（1）在文档窗口中，将插入点放置在要插入占位符图形的位置。（2）通过以下几种方法启用“图像占位符”命令，弹出“图像占位符”对话框。选择“插入”面板“常用”选项卡，单击“图像”展开式工具按钮，选择“图像占
10、位符”选项。选择“插入记录 图像对象 图像占位符”命令。,2018/12/21,30,插入鼠标经过图像,鼠标经过图像是指在浏览器中查看网页时，当鼠标指针经过该图像时显示另外一幅图像的动态图像效果。 插入鼠标经过图像需要准备两幅图像。,2018/12/21,31,插入导航条,选择【插入】|【图像对象】|【导航条】命令，或者单击【插入】工具栏【常规】类别中的【图像】按钮，从弹出的下拉菜单中选择【导航条】命令，弹出【插入导航条】命令，根据需要设置其中的选项，即可创建导航条。,2018/12/21,32,【插入导航条】对话框,2018/12/21,33,插入FLASH,选择【插入】|【媒体对象】|【F
11、LASH】命令。,2018/12/21,34,3.4 实践与练习：修改图片大小,本练习的目的是掌握在Dreamweaver 8中修改图片尺寸的方法和“重新取样”按钮的功能。,2018/12/21,35,预览效果,2018/12/21,36,输入文字,2018/12/21,37,提示框,2018/12/21,38,将图片放置到站点目录下,2018/12/21,39,设置替换文本,2018/12/21,40,插入图片,2018/12/21,41,当前图片的尺寸,2018/12/21,42,在属性面板中修改图片的尺寸,2018/12/21,43,恢复原始尺寸,2018/12/21,44,缩小后的图片
12、效果,2018/12/21,45,直接修改图片的尺寸,2018/12/21,46,启用“重新取样”功能,2018/12/21,47,有关提示信息的对话框,2018/12/21,48,“重新取样”后的图片,2018/12/21,49,居中对齐图片,2018/12/21,50,预览效果,2018/12/21,51,创建网站相册,在开始创建网站相册之前，将相册的所有图像放置在一个文件夹中，并确保图像文件名的扩展名为：“.Gif”、“.Jpg”、“.Jpeg”、“.Png”、“.Psd”、“.Tif” 或“.Tiff”。首先，使用Fireworks来为该文件夹中的每个图像创建一个缩略图和一个较大尺寸的图像。然后，应用Dreamweaver 创建一个Web页，它包含所有缩略图以及指向大图像所在网页的链接。,2018/12/21,52,小 结,本章首先介绍了在HTML中插入图片的方法，这样就可以使网页图文并茂，更加生动。然后介绍了使用Dreamweaver 8在网页中插入图片文件的方法，并且利用Dreamweaver 8的辅助功能对图像文件作一些非常方便的设置和修改，这些都是制作网页中非常基础的操作。,
