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

null使用Dreamweaver 在网页中建立各种超级链接使用Dreamweaver 在网页中建立各种超级链接null使用文本、图像等最基本的网页元素制作了一个较简单的“个人主页”。 超级链接 知识回顾知识回顾什么是URL？ 什么是超级链接？ 什么是绝对路径？ 什么是相对路径？ 为“个人主页”网站创建各种超级链接为“个人主页”网站创建各种超级链接 将网页中的“收藏”，“”，“朋友”，“理想”分别链接到本网站中的collection.html，story.html，friend.html，ideal.html页面。 为网页中的“下载”链接到下载文件“pingpang.rar”。 为网页中的“友情链接”添加超级链接“http://www.cqeec.com”。 为网页中的tom369@hotmail.com建立一个E-mail链接。 为story.html中页首的小标添加链接，当单击页首中的某个小标题时便会跳转到该页面的相应文章处。2.1 内部链接2.1 内部链接操作步骤 ： 第一步，在网页中选中要作为超级链接的文本。 第二步，为指定的文本创建超级链接。 方法一，选中“收藏”，单击属性面板中的“链接”文本框后面的 按钮，打开“选择文件”对话框。 选中“collection.html”即可 收藏 方法二，选中“故事”，单击属性面板中的 按钮，并直接拖曳鼠标，移动鼠标到文件面板中所要链接的目标文件“story.html”。 null方法三，选中“朋友”，在属性面板上的链接文本框中直接输入被链接文件的相对路径“friend.html”即可。 方法四，选中“理想”，点击右键，从快捷菜单中选择“创建链接” 第三步：保存网页，按F12键预览网页。null超级链接——下载文件 :将下载文件pingpang.rar设置为下载目录download下的pingpang.rar文件. 下载 2.2 外部链接2.2 外部链接实现步骤： 选中“友情链接”文本，在属性面板上的“链接”文本框中输入完整的网址http://www.cqeec.com。 友情链接 注意：输入的网址必须是绝对路径。 null如何在新的浏览窗口中打开链接文件？ 使用target属性 友情链接 在DW中只需要在属性面板中的“目标”下拉列表中选择“_blank”。 target属性可以定义被链接的文档在何处显示。 _ blank：表示单击该链接会重新启动一个浏览器窗口载入被链接的网页。 “_parent”、“_self”、“_top”的具体含义和框架有关。2.3 创建E-mail链接2.3 创建E-mail链接单击E-mail链接时，将立即打开浏览器默认的E-mail处理软件，且收件人的邮件地址由E-mail链接中指定的地址自动设置。null实现步骤： 选中tom369@hotmail.com文本。 添加E-mail链接的方法 单击“插入面板”中的 电子邮件链接按钮，或者选择菜单“插入” “电子邮件链接”。在出现的对话框中输入相应的电子邮件即可。 tom369@hotmail.com 在属性面板上的“链接”文本框中直接输入 “mailto: tom369@hotmail.com”。 2.4 创建锚点链接2.4 创建锚点链接锚点常用于包含大量文本信息的网页。通过锚点链接，可以使链接指向当前网页或不同网页中的指定位置。 实现步骤： 插入命名锚点。（命名锚点用于在网页中标记和命名链接的跳转位置，以便引用）。 定义一个名称为“1”的命名锚点：使用name属性： 将光标定位在链接需要跳转的位置。 在“插入面板”中选择 按钮，或者选择菜单中的“插入” “命名锚记”，或者按Ctrl+Alt+A，或者直接将 拖到页面上想要插入命名锚点的位置。 在弹出的对话框中输入相应的锚点名称。null链接锚点 选择需要建立锚点链接的文本。 在属性面板中的“链接”文本框中，输入“#”和锚点名称。或者在属性面板中拖拽“指向文件” ，移动鼠标到相应的锚点位置上。 一、谁的网 返回顶端 指向页面story.html的锚点1的超级链接2.5 创建空链接和Javascript链接 2.5 创建空链接和Javascript链接 要想对文本或图像等对象设置行为，首先必须为文本建立空超级链接（空超级链接是一个未指派目标的超级链接），这样行为才会有效。 为文本建立空超级链接时，只要先在文档窗口中选中需要建立空超级链接的文本，然后在属性面板的“链接”文本框中输入一个“#”符号即可。 建立空超级链接的目的只是为了应用行为，其他情况下不必建立。 null创建Javascript链接可以让来访者不用离开当前页面就可以获得一个额外的信息。 步骤：选择需要建立Javascript链接的文本或图像等对象，在“属性面板”的链接文本框中输入相应的Javascript代码。 例如： javascript:alert(‘上网时间不易过长，请注意休息！’)。可以弹出一个警示窗口 javascript:self.close()或javascript:window.close()。可关闭当前窗口2.6 设置链接颜色2.6 设置链接颜色为文本添加了超级链接之后，文本具有几种颜色状态：未访问过链接的文本颜色、已访问链接的文本颜色已经当前正在访问的链接的文本颜色。 可以通过设置“页面属性”来改变各种链接状态下的文本颜色。2.7 制作图像映射2.7 制作图像映射图像映射就是指在一幅图像中定义若干个区域(这些区域称为热区)，每个区域中指定一个不同的超链接，当单击不同区域时可以跳转到相应的目标页面。 实现步骤： 制作热区 为热区添加超级链接 编辑热区 null实现图像映射的HTML代码 2.8 其他链接形式2.8 其他链接形式1 制作鼠标经过图像 鼠标经过图像就是指当访问者移动鼠标使鼠标指针经过图像时，图像变为另一幅图像；而鼠标指针离开时，图像又恢复为原始图像。这种效果通常用于导航条、图像互动等。 它由两幅图像组成，一是首次载入时显示的图像即原始图像，二是鼠标经过后翻转的图像即鼠标经过图像。在创建鼠标经过图像时应使用相同大小的两幅图像；如果这两个图像大小不同，Dreamweaver 将自动调整第二个图像的大小以匹配第一个图像的属性。 null制作步骤： 在插入面板或插入菜单中打开 “鼠标经过图像”对话框 选取原始图像和鼠标经过图像 保存网页 null2 制作导航条 导航条由图像或图像组组成，这些图像的显示内容随用户操作而变化。导航条项目最多呈现四种图像状态： (1)初始状态：用户尚未单击或尚未与此项目交互时所显示的图像。 (2)滑过状态：指鼠标指针滑过初始图像时所显示的图像。 (3)按下状态：指项目被单击后所显示的图像。 (4)按下时鼠标经过状态：指在项目被单击后，鼠标指针滑过“按下”图像时，所显示的图像。 null创建网站相册 实例演示