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

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