网页设计与制作案例教程第4章.ppt

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 使图像与页面其他元素对齐 利用“属性面板”可以使图像与页面其他元素对齐。选择待操作的图像，使用“属性面板”中将“对齐”调整为“右对齐”方式，如图所示。