网页制作第5单元图像

第 5 单元 图像 课程目标：  掌握在网页中插入图像  掌握影像地图的使用  掌握轮换图像的使用  掌握导航条的制作  掌握图片相册的制作 建议学时：理论4学时，实践4学时。 5.1 插入图像及设置图像属性 5 .1 .1 插入图像 在网页中插入图像的操作十分简单，既可以使用工具栏的【图像】按钮，然后找到要插入的图片文件，再也可以使用菜单【插入】|【图像】，还可以直接从文件面板中拖动图像文件到正在编辑的页面上。 虽然图像文件的格式有很多，但在网页上通常只使用三种格式：jpg、gif、png等。将图像插入到网页时，Dreamweaver8会自动在HTML源代码中生成对该文件的引用，打开代码视窗可看到类似如下的代码： 即为引用images文件夹中的img001.jpg文件。 在网页制作中，为了确保文件引用的正确性，图像文件必须位于当前站点文件夹中，如果图像文件不在当前站点文件夹，系统会提问是否要将此文件复制到当前站点文件夹，此时应回答“是”，否则当站点上传后会找不到该图像文件。 5 .1 .2 设置图像属性 选中插入的图像，属性面板为图像的属性面板，如图5-1所示，使用该面板可对插入的图像进行设置。 图5-1 图像属性面板 宽、高：选定图像的当前尺寸，如果插入后更改过图像的大小，则宽、高旁边的“重设大小”按钮变成可选。 提示：建议不要更改插入后图像的尺寸，这样一是容易产生图像变形，二是即使插入后尺寸改小，也不可能改变网页文件实际的大小。因此，图像在插入前应使用专门的图像编辑软件（如Photoshop、Firew ork等）修改好。 垂直边距、水平边距，是指图像与其它对象（如文字等）之间的距离。 源文件，即插入到网页中的文件全名，包含了图像文件的相对路径和文件名。 替换：在该文本框中可以输入图像的替换文字。这样，当图像没有被显示时，相应区域会显示替换文字以提示浏览者这里将显示的内容。在IE浏览器中，当鼠标移到图像上方时，该文本也会显示出来。 低解析度源：可使用分辨率较低的图片，在浏览时先出现低解析度的图像，然后再显示源文件图像。 地图：是一个文本框，当图像作为影像地图时可给该图像命名一个唯一的名称。 类：应用所定义的类属性（见CSS章节） 边框：在图像周围显示边框 对齐：设置图像的对齐方式（居中、左对齐、右对齐）。 提示：只有当对齐方式设为左对齐或右对齐时，文字才可以绕在图片周围。 5 .1 .3 本节小结 在...