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

《网页设计与制作案例教程 教学课件 作者 池同柱第4章 利用图像美化网页.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第4章利用图像美化网页一、案例实现创建一个新网页，将其保存为twhp.htm。在网页中，输入标题，设置文本的大小及字体。为了美观，可以将文字设置为彩色，改变字形。单击插入栏的“常用”单击“图像”按钮旁的黑色三角图标，在下拉菜单中单击“图像”，在网页中插入图片。在页面中插入已选好的图片，将右面的文字排列整齐，设置相应的属性。在对应位置插入相应的文本或图片，为文本做出项目列表，给图片添加上边框，美化图片。为插入的图片设置图像属性，加上边框，使图片效果更加醒目。将电影剧情介绍中的文字输入并且设置属性，制作完毕，保

2、存网页文件。最后设计界面如教材图4-7所示。二、相关知识1、网页中常用的图像格式图像在网页中通常起到画龙点睛的作用，它能够装饰网页，使页面美观生动。在计算机图形中通常用于网页中的只有3种格式，即GIF格式、JPEG格式、PNG格式。（1）GIF格式：即“图形交换格式”，是最受欢迎、使用最普遍的一种图形格式。GIF格式受欢迎的主要原因是：第一，信息压缩效率高；第二，与具体软件和硬件无关；第三，能有效处理256色图象；第四，已有相当多的用户，世界上有无数漂亮的图象以GIF格式存贮。（2）JPEG格式：JPEG文

3、件的扩展名为.jpg或.jpeg，其压缩技术十分先进。它具有调节图像质量的功能，因为JPEG格式的文件尺寸较小，下载速度快，使得Web页有可能以较短的下载时间提供大量美观的图像也是网络上最受欢迎的图像格式。（3）PNG格式：可移植网络图像格式。PNG是目前保证最不失真的格式，它汲取了GIF和JPG二者的优点，显示速度很快；PNG同样支持透明图像的制作，透明图像在制作网页图像的时候很有用，我们可以把图象背景设为透明，用网页本身的颜色信息来代替设为透明的色彩，这样可让图像和网页背景很和谐地融合在一起。2、在网页

4、中插入图像（1）插入普通图像在Dreamweaver文档中插入普通图像时，为了确保图像引用的正确性，该图像文件必须位于当前站点中。1）在文档中插入图像，将光标置于要插入图像的位置后。2）单击【插入】工具栏中【常用】类别中的【图像】按钮右侧的向下的箭头，从弹出的下拉菜单中选择【图像】命令。3）在弹出【选择图像源文件】对话框中，选择一个将要插入的图像文件，然后单击【确定】。（2）插入背景图像使用背景图像，可以丰富页面效果改变单调的网页背景。定义页面背景的图像时要使用【页面属性】对话框。步骤如下：1）在文档窗口中

5、，选择【修改】│【页面属性】命令，或在属性面板中单击【页面属性】按钮，这时将弹出【页面属性】对话框。2）在【背景图像】文本框中单击【浏览】按钮，从弹出的【选择图像源文件】对话框中选择背景图像文件。3）单击【确定】按钮，文档中就添加上了背景图像。3、设置图像属性在图像的属性面板中设置图像的属性，点击文档中插入的图像时，在属性面板上将反映该图像的属性。“图像”下面的文本框用于设置所选图像的名称，在使用行为或者脚本撰写语言时可以引用该图像。“地图”文本框用来标注客户端图像地图名称。“矩形热点工具、椭圆形特点工具和

6、多边形热点工具”用来创建不同形状的客户端图像映射图。“宽”和“高”这两个文本框用于指定图像的宽度和高度。“重设图像大小”用于清除已设置的图像大小，恢复原始值。“垂直边距”文本框用于沿图像的顶部和底部添加边距。边距值以像素为单位。“水平边距”文本框用于沿图像左侧和右侧添加边距。“源文件”用于指定图像的源文件，可以在文本框中直接输入路径，也可以单击文件夹图标浏览源文件。“链接”用于设置选定图像所链接的文件路径或网址。“目标”用于指定链接的页面应当在其中载入的框架或窗口，是以下拉列表的形式出现的，当图像未添加链接

7、时，此选项不可用。“低解析度源”用于指定链接的页面应当在其中载入的框架或窗口，是以下拉列表的形式出现的，当图像未添加链接时，此选项不可用。“替换”用于指定只显示文本的浏览器或已设置为手动下载图像的浏览器中替代图像所显示的文本。在某些浏览器中，当鼠标指针滑过图像时也会显示该文本。“编辑”此按钮用于启动图像编辑程序，编辑选中的图像。“使用Fireworks最优化”此按钮用于更改选中图像的优化设置。“裁剪”此按钮用于修剪图像的大小，删除图像中不需要的区域。“重新取样”此按钮用于调整重新取样的图像的大小，提高图片的

8、品质。“亮度和对比度”此按钮用于调整图像的亮度和对比度设置。“锐化”此按钮用于调整图像的清晰度。“边框”用于指定以像素为单位的图像边框的宽度。默认情况下为无边框。“左对齐、居中对齐、右对齐”用于设置段落的对齐方式。“对齐”此下拉列表框中的选项用于对齐同一行上的图像和文本。图像的对齐方式多达9种。图像对齐选项“默认值”基线对齐方式。“基线”将文本或同一段落中的其他元素的基线与选定对象的底部对齐。“顶端”将图像的顶端