1、第4 4章 网页的图像学习要点学习要点n 网页中常用的图像格式n 网页中图像与文字的搭配n 插入图像n 交互式图像n 网页背景n 图像映射图片带给我们丰富的色彩与强烈的冲击力，正是图片给了网页修饰与点缀。合理的利用图片，会给人们带来美的享受。如果网页中没有了图片，光是纯文字页面该是多么的单调。图片有多种格式，如：JPG、BMP、TIF、GIF、PNG等。互联网上大部分使用JPG和GIF两种格式，因为它们具有压缩比例高的优点，而且各个操作系统都可使用。下面简单介绍一下常用的图像文件存储格式。1GIF2JPG3PNG4.1 4.1 网页中常用的图像格式 网页主要由文字和图像构成，并且因为文字与图像
2、在版面中所处的地位和主次不同，而有大小之分。作为标题的文字相对较大，正文文字则较小；作为宣传的图像较大小，作为栏目的图像较小，作为项目的图像则更小，同时图像因受空间和位置限制而有横竖之分。图像和文字体现出网页的内容，因此图像的有序编排和布局就显示得尤为重要，否则就会产生混乱界面。要使图像与文字成为一个有机整体，需遵照以下几条规则。1主次分明，中心突出2大小搭配，相互呼应3图文并茂，相得益彰4.2 网页中图像与文字的搭配4.3 4.3 插入图像一个好的网页除了文本之外，还应该有绚丽的图片来进行渲染，在页面中恰到好处的使用图像能使网页更加生动、形象和美观。图像是网页中不可缺少的元素。1在网页中插入
3、图像2设置图像属性 在Dreamweaver CC中，可以插入交互式导航图像。所谓交互式导航是指当鼠标经过一幅图像时，它会变成另外一幅图像，并且带有链接功能。因此导航条图像需要由两幅图组成：一幅初始图像，一幅替换图像。在网页中使用交互式图像，可使网页具有动态性与交互性。4.4 交互式导航图像即学即用：创建变换导航条学习使用插入鼠标经过图像功能制作变换导航条的方法。在Dreamweaver中，设置网页背景有两种方法：一种是设置背景颜色，另一种是设置背景图像。4.5 4.5 设置网页背景4.5.1 设置网页背景颜色通过设置网页背景颜色，可以使网页看起来色彩感更强，页面更加漂亮。设置网页背景颜色的操
4、作步骤如下。如果觉得网页中的背景颜色太过单一，可以为网页文档设置背景图像，设置网页背景图像的操作步骤如下。4.5.2 设置网页背景图像当把选择好的外部图片插入到Dreamweaver CC中时，可能这些图片与网页中其他元素不能很好地协调搭配。换句话说，就是不能美化网页的整体效果，页面看起来不是那么美观。而Dreamweaver CC虽然在图像属性设置功能上有所加强，但它毕竟不是专门的图像编辑软件，这时就需要应用到外部图像编辑器来对图像的源文件进行处理。设置外部图像编辑器的操作步骤如下。4.6 4.6 设置外部图像编辑器4.7 4.7 图像映射 图像映射是将图像划分为若干个区域，每个区域被称为一
5、个热区，每个热区分别设置不同的超级链接。在Dreamweaver CC中，热区可以是不同的形状，比如圆形、矩形、不规则多边形等。设置图像映射的具体操作如下。即学即用：将图像链接到不同网站学习使用图像映射将图像链接到不同网站的方法。4.8 4.8 章节小结 本章主要介绍了在网页中插入图像的知识，对交互式图像和网页的背景设置进行了详细的讲解。需要注意的是，在同一个网页中不能同时设置网页背景与网页背景图像。熟练掌握网页图像和图像的设置，在以后的实际网页制作中会有很大的帮助。4 4.9 .9 课后习题4.9.1 课后练习：制作娱乐网站导航课后练习：制作娱乐网站导航制作一个娱乐网站导航，效果如图所示。4.9.2 课后练习：将网页图像不同部分链接到网易与新浪课后练习：将网页图像不同部分链接到网易与新浪本例使用图像映射功能给网页图像添加超级链接，完成后的效果如图所示。
