网页设计与制作案例教程 教学配套课件 池同柱 第4章 利用图像美化网页.pdfVIP

第4章 利用图像美化网页 一、案例实现 1. 创建一个新网页，将其保存为twhp.htm。 2. 在网页中，输入标题，设置文本的大小及字体。为了美 观，可以将文字设置为彩色，改变字形。 3. 单击插入栏的“常用” 单击“图像”按钮旁的黑色三角 图标，在下拉菜单中单击“图像”，在网页中插入图 片。 4. 在页面中插入已选好的图片，将右面的文字排列整齐， 设置相应的属性。 5. 在对应位置插入相应的文本或图片，为文本做出项目列 表，给图片添加上边框，美化图片。 6. 为插入的图片设置图像属性，加上边框，使图片效果更 加醒目。 7. 将电影剧情介绍中的文字输入并且设置属性，制作完 毕，保存网页文件。最后设计界面如教材图4-7所示。 二、 相关知识 1、网页中常用的图像格式 图像在网页中通常起到画龙点睛的作用，它能够装饰网页，使 页面美观生动。在计算机图形中通常用于网页中的只有3种格式， 即GIF格式、JPEG格式、PNG格式。 （1）GIF格式：即“图形交换格式”，是最受欢迎、使用最普遍的一 种图形格式。GIF格式受欢迎的主要原因是：第一，信息压缩效率 高；第二，与具体软件和硬件无关；第三，能有效处理256色图 象；第四，已有相当多的用户，世界上有无数漂亮的图象以GIF格 式存贮。 （2）JPEG格式：JPEG文件的扩展名为.jpg或.jpeg，其压缩技术十分 先进。它具有调节图像质量的功能，因为JPEG格式的文件尺寸较 小，下载速度快，使得Web页有可能以较短的下载时间提供大量美 观的图像也是网络上最受欢迎的图像格式。 （3）PNG格式：可移植网络图像格式。PNG是目前保证最不失真的格 式，它汲取了GIF和JPG二者的优点，显示速度很快；PNG同样支持 透明图像的制作，透明图像在制作网页图像的时候很有用，我们可 以把图象背景设为透明，用网页本身的颜色信息来代替设为透明的 色彩，这样可让图像和网页背景很和谐地融合在一起。 2、在网页中插入图像 （1）插入普通图像 在Dreamweaver文档中插入普通图像时，为了确保图像引用 的正确性，该图像文件必须位于当前站点中。 1）在文档中插入图像，将光标置于要插入图像的位置后。 2）单击【插入】工具栏中【常用】类别中的【图像】按钮右侧的 向下的箭头，从弹出的下拉菜单中选择【图像】命令。 3）在弹出【选择图像源文件】对话框中，选择一个将要插入的图 像文件，然后单击【确定】。 （2）插入背景图像 使用背景图像，可以丰富页面效果改变单调的网页背景。定义 页面背景的图像时要使用【页面属性】对话框。步骤如下： 1）在文档窗口中，选择【修改】│【页面属性】命令，或在属性 面板中单击【页面属性】按钮，这时将弹出【页面属性】对话 框。 2）在【背景图像】文本框中单击【浏览】按钮，从弹出的【选择 图像源文件】对话框中选择背景图像文件。 3）单击【确定】按钮，文档中就添加上了背景图像。 3、设置图像属性 在图像的属性面板中设置图像的属性，点击文档中插入的 图像时，在属性面板上将反映该图像的属性。  “图像”下面的文本框用于设置所选图像的名称，在使用行 为或者脚本撰写语言时可以引用该图像。  “地图”文本框用来标注客户端图像地图名称。  “矩形热点工具、椭圆形特点工具和多边形热点工具”用来 创建不同形状的客户端图像映射图。  “宽”和“高”这两个文本框用于指定图像的宽度和高度。  “重设图像大小”用于清除已设置的图像大小，恢复原始 值。  “垂直边距”文本框用于沿图像的顶部和底部添加边距。边 距值以像素为单位。  “水平边距”文本框用于沿图像左侧和右侧添加边距。  “源文件”用于指定图像的源文件，可以在文本框中直接 输入路径，也可以单击文件夹图标浏览源文件。  “链接”用于设置选定图像所链接的文件路径或网址。  “目标”用于指定链接的页面应当在其中载入的框架或窗 口，是以下拉列表的形式出现的，当图像未添加链接时， 此选项不可用。  “低解析度源”用于指定链接的页面应当在其中载入的框 架或窗口，是以下拉列表的形式出现的，当图像未添加链