当前位置: 首页 > 图文教程 > 网页制作 > Dreamweaver > 用Dreamweaver MX建设神奇网页图片超链接

Dreamweaver
Dreamweaver MX进阶教程(十八)使用css样式制作细线表格
Dreamweaver MX进阶教程(二十二)制作反馈表单(email发送)
Dreamweaver MX进阶教程(二十)使用一象素透明图像固定单元格宽度
Dreamweaver MX进阶教程(十一)使用“层”布局网页
Dreamweaver MX进阶教程(十四)使用server-side include(服务器端包括)
Dreamweaver MX进阶教程(十五)插入具有辅助功能的表格
Dreamweaver MX进阶教程(十九)防止英文字符撑破表格
Dreamweaver MX进阶教程(十七)设置表格的属性
Dreamweaver MX进阶教程(十二)在居中页面使用层
DW MX 设计留言本实战(1)
DW MX 设计留言本实战(4)
DreamWeaver,经典50问(9)
DreamWeaver,经典50问(8)
DreamWeaver,经典50问(7)
DreamWeaver,经典50问(3)
DreamWeaver,经典50问(10)
DreamWeaver,经典50问(4)
DreamWeaver,经典50问(6)
巧用背景颜色和间距快速制作出细边线表格
DW MX 2004代码编辑新功能

用Dreamweaver MX建设神奇网页图片超链接


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-23   浏览: 35 ::
收藏到网摘: n/a

 

  文/陈秀峰

  大家在打开带有图片的网页时,有时会看到这样的情况:当鼠标指向图片的不同部位时,可以打开不同的超链接,这种技术我们称之为—网页图片热区。

  下面我们以Dreamweaver MX和FrontPage 2003为例,来看看网页图片热区的具体建立过程。

  一、在Dreamweaver MX中为图片建立热区

  1、启动Dreamweaver MX(其他版本请仿照操作),打开需要建立图片热区的网页文件,选中相应的图片,此时“属性”面板自动切换到“图片属性”状态(如图1)。

  2、选中一种热区类型(如“椭圆”),然后在图片上拖来出一个热区来(参见图1)


图1

  注意:热区相当于是在图片上增加了一个图形层,象调整图片一样,可以通过鼠标调整热区的大小和位置。

  3、在“链接”右边的方框中输入要链接的网址(如“http://www.yesky.com”);在“替代”后面的方框中输入一些说明字符(如“天极网”);按“目标”右边的下拉按钮,在随后出现的下拉列表中选择一种链接页面的打开方式(如需要让链接的页面在新窗口中打开,就选择“_blank”选项)。

  注意:“替代”方框中输入的字符,在以后浏览网页时,当鼠标指向该热区时,在页面上会显示出该字符(如图2)。


图2

 4、重复上述2、3步的操作,在图片的不同部位建立多个热区。

  二、在FrontPage2003中为图片建立热区

  1、启动FrontPage2003,打开需要建立图片热区的网页文件。

  2、执行“视图→工具栏→图片”命令,展开“图片”工具栏(如图3)


图3

  3、选中一种热区类型(如“长方形”),然后在图片上拖来出一个热区,此时系统自动弹出“插入超链接”对话框(如图4)。


图4

  4、在“地址”栏上输入要链接的网址(如“www.yesky.com”);点击“屏幕提示”按钮打开“设置屏幕超链接提示”对话框(如图5),输入一些说明字符(如“天极网”)。


图5

  注意:此处的“屏幕提示”同Dreamweaver MX“替代”功能一样。

  4、同理,重复上述3、4步的操作,可以在图片的不同部位建立多个热区。