Dreamweaver4神童教程之六

2008-02-23 06:17:42来源：互联网阅读 ()

Dreamweaver4神童教程——图片和超链接
摘自赛迪网（小雷）

　　图片在网页中的作用是无可替代的，一幅好的合适的图片，赛过十篇洋洋洒洒的介绍！超链接是网站中各个元素的联系方式，正是他完成了各个页面的跳转，使整个网站作为一个有机的整体出现在访问者面前。

一．图片：

Insert/Image 命令能够完成图片的插入。假如该图片不在网站目录中，将弹出对话框询问是否把该图片复制到网站目录下，这时请回答 Yes ，否则上传到网上后会因文档地址不正确显示不出图片。

　　在网页制作中，图片常常和文字互相配合，图文并茂的网页，给访问者带来的感觉是素面朝天的网页所不具备的。图片和文字的互相配合，能够通过 Align 属性来进行配置。如图一：

图一

图一中提供了多种和文字的对应关系：

Baseline：文本和图片底线对齐。
Top：第一行文本和图片顶部对齐。
Middle:文本和图片中部对齐。
Left：图片处于文本左边。
Right：图片处于文本右边。
其中，Left 和 Right 就是我们常常谈到的文绕图方式。

提示：图片的 Align 和区域位置属性

有什么区别？区别在于，前者处理的是图片和文本的位置对应关系，后者处理整个区域，包括图片，文本连同区域中任何元素相对于整个网页的位置关系。

示例：

采用默认的图片和文本位置属性的网页，如图二：

图二

图片居左时的网页，如图三：

图三

图片除了作为文本的阐述和说明功能外，还具备链接和热区映射等作用，这就得讲一下超链接的原理和应用了。

二．超链接：

在网页上，点击一些文字，图片，或其他元素就能够打开相应的页面，而这些元素就是超链接。

1.超链接的建立：

　　建立超链接很简单，只需选中欲做链接的元素（任何对象，文本和图片都包含其内），然后在属性面板的 Link 中输入要跳转到的目标页面就行了。输入框旁边有个文档夹图标，也能够通过点击他找到目标页面。如图四：

图四

提示：链接文档假如是网页文档，浏览器就会打开该网页并进行显示；假如是浏览器本身不能显示的文档，则会弹出提示框让您决定是否进行下载。现在知道如何制作下载文档了吧？只需把提供下载的文档压缩成文档包（如 zip 压缩包），然后放到网上就行了。访问者如需下载，只需点击该压缩包的网址就能够下载了。
更有一点大家得注意，那就是打开方式的配置，如图五：

图五

_blank：表示另外打开一个窗口，用新窗口显示该链接网页。
_self：在本窗口中打开链接页面。
_parent：在父窗口中打开链接页面，主要用于框架结构的页面。
_top：整个浏览器窗口，主要用于框架结构的页面。

2.图片的热区映射图：
图片链接中，更有这样一种情况：图片比较大，分为几个区，点击不同的区能够打开不同的网页。如图六：

图六

图六中的图像共有四个版块构成，点击不同的版块，能够打开不同的页面。周详情况请见 Resource.zip 文档包中的 9.htm 文档。

图片的热区映射制作也很简单，先点选图片，然后如图七中勾出的图标就是用来创建热区映射的，他们分别是规则四边形，圆形，不规则多边形。

图七

　　根据图像轮廓的不同，用不同的形状制作热区映射。规则四边形主要针对图像轮廓较规则，且呈方形的对象；圆形针对圆形规则轮廓；不规则多边形则针对复杂的轮廓外形。

　　制作方法：点选一种形状制作工具，然后沿着对象边缘画出一条轮廓线，然后再在属性面板的 Link 中输入映射的地址就行了。记着，勾画出的轮廓线要闭合，也就是说起点和终点要在同一个点上。

另外，属性面板上更有一个 Alt 输入框，他是用来为图像进行说明的，当鼠标移动到图片上时，Alt 中的文字内容就会显示在图片上面。他更有一个用途，当一些用户屏蔽了图片功能，以纯文本形式进行网页浏览时，有 Alt 标记的图片虽然不能显示，但会在该图片区域显示出图片的介绍信息。

提示：图像的属性面板上有一个 Edit 标志，点击他后能够打开 Fireworks 这个图像处理软件对图像进行编辑，包括热区映射图的制作。

3.网页文档的内部链接：

　　想在文档内随心所欲地跳跃吗？想让访问者只需点按一行文字或一张图片就能连接到另一部分或是另外一个文档的某一特定部分吗？网页内部链接将帮您解决任何这些问题。其例子请看 Resource.zip 压缩包中的 10.htm 文档。

这里是个简单示例，如图八：

图八