使用DW在网页中建立各种超级链接.ppt

使用Dreamweaver在网页中建立各种超级链接,使用文本、图像等最基本的网页元素制作了一个较简单的“个人主页”。超级链接,知识回顾,什么是URL？什么是超级链接？什么是绝对路径？什么是相对路径？,为“个人主页”网站创建各种超级链接,将网页左侧导航栏中的“动画”，“图片”，“梦想”分别链接到本网站中的animation.html，picture.html，dream.html等页面。为网页中的“下载”链接到下载文件“pictrue.rar”。为网页左侧导航栏中的“关于”添加超级链接“”。为网页中的tom369建立一个E-mail链接。为picture.html中页首的小图片添加链接，当单击页面中的某个小图片时便会跳转到该页面的相应网页。,2.1内部链接,操作步骤：第一步，在网页中选中要作为超级链接的文本。第二步，为指定的文本创建超级链接。选中“动画”，单击属性面板中的“链接”文本框后面的按钮，打开“选择文件”对话框。选中“animation.html”即可动画第三步：保存网页，按F12键预览网页。,超级链接下载文件说明:将下载文件music.rar设置为站点根目录目录下的文件。选中页面中的“下载”文本。代码中插入下载,2.2外部链接,实现步骤：选中“新闻”文本，在属性面板上的“链接”文本框中输入完整的网址关于注意：输入的网址必须是绝对路径。,如何在新的浏览窗口中打开链接文件？使用target属性友情链接在DW中只需要在属性面板中的“目标”下拉列表中选择“_blank”。target属性可以定义被链接的文档在何处显示。_blank：表示单击该链接会重新启动一个浏览器窗口载入被链接的网页。“_parent”、“_self”、“_top”的具体含义和框架有关。,2.3创建E-mail链接,单击E-mail链接时，将立即打开浏览器默认的E-mail处理软件，且收件人的邮件地址由E-mail链接中指定的地址自动设置。,实现步骤：选中tom369文本。添加E-mail链接的方法单击“插入面板”中的电子邮件链接按钮，或者选择菜单“插入”“电子邮件链接”。在出现的对话框中输入相应的电子邮件即可。代码如下：tom369在属性面板上的“链接”文本框中直接输入“mailto:tom369”。,2.5创建空链接,要想对文本或图像等对象设置行为，首先必须为文本建立空超级链接（空超级链接是一个未指派目标的超级链接），这样行为才会有效。为文本建立空超级链接时，只要先在文档窗口中选中需要建立空超级链接的文本，然后在属性面板的“链接”文本框中输入一个“#”符号即可。建立空超级链接的目的只是为了应用行为，其他情况下不必建立。,2.6设置链接颜色,为文本添加了超级链接之后，文本具有几种颜色状态：未访问过链接的文本颜色、已访问链接的文本颜色已经当前正在访问的链接的文本颜色。可以通过设置“页面属性”来改变各种链接状态下的文本颜色。,鼠标放上去时文字的颜色,2.7制作图像映射,图像映射就是指在一幅图像中定义若干个区域(这些区域称为热区)，每个区域中指定一个不同的超链接，当单击不同区域时可以跳转到相应的目标页面。实现步骤：制作热区为热区添加超级链接编辑热区,实现图像映射的HTML代码,2.8其他链接形式,1制作鼠标经过图像鼠标经过图像就是指当访问者移动鼠标使鼠标指针经过图像时，图像变为另一幅图像；而鼠标指针离开时，图像又恢复为原始图像。这种效果通常用于导航条、图像互动等。它由两幅图像组成，一是首次载入时显示的图像即原始图像，二是鼠标经过后翻转的图像即鼠标经过图像。在创建鼠标经过图像时应使用相同大小的两幅图像；如果这两个图像大小不同，Dreamweaver将自动调整第二个图像