Dreamweaver CS3网页设计与制作教程 第2版 申莉莉教案 第4章新.pptVIP

第4章 　图像 4.1 案例1：插入图像并设置其属性 【案例目的】插入图像并设置图像属性，效果如图所示。 【核心知识】掌握插入图片、图像占位符的方法，设置图像属性。 4.1.1??插入普通图像 在Dreamweaver CS3插入图像时，Dreamweaver CS3在HTML中自动产生对该图像文件的引用。如果图像不在当前站点之内，Dreamweaver CS3会要求把该文件拷贝到当前站点内的文件夹中，如图所示。 4.1.1??插入普通图像 1．可以用下面的几种方法插入图像： （1）把插入点置于文档窗口中要插入的位置，然后在主菜单中选择“插入记录”中的“图像”菜单命令。 （2）从“插入面板”中选择“图像”按钮按住不放直接拖入文档窗口要插入的位置。 （3）从桌面上把图像选中，将其拖到文档窗口要插入的位置，然后直接到步骤3。 2. 在出现的“选择图像源”的对话框中选择要插入的图像。 3. 图像被插入文档中后，选择插入的图像可以在属性检查器中设置图像属性。 4.1.2 插入图像占位符 当用户在制作网页时由于需要必须在网页中为将来要插入的图像预留出一定的空间，Dreamweaver CS3为用户提供了插入图像占位符。 1. 从主菜单的“插入”选项插入：在主菜单的“插入记录”中选择“图像对象”的“图像占位符”，在弹出的“图像占位符”对话框中填写响应的内容，设置完后单击“确定”按钮即在文档中插入图像占位符。 2. 使用“插入面板”中的按钮：在“插入面板”中选择“图像占位符”按钮，在文档中会出现“图像占位符”对话框。 4.1.3 修改图像的属性 在“属性面板”中设置选中图像的属性，可以设置图片的名称、宽度、高度、链接的地址和替代的文字等，如图所示。 4.1.4 调整图像和其他元素的大小 用户可以通过拖动鼠标的方法调整图像和其他元素的大小。 （1） 在文档窗口中选定元素，如图所示选定图像。 4.1.4 调整图像和其他元素的大小 （2） 拖动右边的手柄，来调整元素的大小，拖动右下角的手柄，可同时调整元素的宽度和高度。如果此时按住Shift键拖动右下角的手柄，可保持元素的宽高比不变。 提示：使用上述可视化重调元素大小方法，调节的图像最小可达6×6像素。要将对象的高和宽调节到更小（如1×1像素），用户在“属性检查器”中输入数值。如果在调整大小后不满意可删除“属性检查器”中的W和H的值，即可恢复原始大小。 4.1.5 使图像与页面其他元素对齐 利用“属性面板”可以使图像与页面其他元素对齐。选择待操作的图像，使用“属性面板”中将“对齐”调整为“右对齐”方式，如图所示。 案例2：插入轮换图像 【案例目的】插入轮换图像。 【核心知识】掌握轮换图像的制作方法。 轮换图像是指：当鼠标指针掠过一幅图像时，它的显示会变为另一幅图像。轮换图像实际是由两幅图像组成分别是初始图像和替换像。用于创建轮换图像的两幅图像的大小必须相同，若不相同时则系统会自动使第二幅图像与第一幅相匹配。 （1）将光标置于文档窗口要插入的位置。 （2）选择“插入面板”中“图像”按钮下的“鼠标经过的图像”按钮。 （3）单击“鼠标经过的图像”按钮后弹出“插入鼠标经过的图像”的对话框。 （4）在“插入鼠标经过的图像”对话框中在“初始图像”中直接输入或单击“浏览”按钮选择初始的图像的路径和文件名。 （5）在“鼠标经过的图像”同样加入第二幅图像。 （6）同时还可以在“替换文本”键入当鼠标经过的显示的字。 （7）要建立一个链接则在“按下时，前往的URL”加入要链接的站点。 * * *