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

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