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

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