《DW课件上第六章超链接下》由会员分享，可在线阅读，更多相关《DW课件上第六章超链接下（26页珍藏版）》请在金锄头文库上搜索。
1、第六章 超链接,网络中的每个网页都是通过超链接的形式关联在一起的，超链接是网页中最重要、最根本的元素之一。浏览者可以通过鼠标单击网页中的某个元素，轻松地实现网页之间的转换或下载文件、收发邮件等。,一、超链接的概念与路径知识,超链接的概念 超链接的主要作用是将物理上无序的内容组成一个有机的统一体。 超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。,路径的基本知识 链接的路径有3种表达方式 绝对路径：如果在链接中使用完整的URL（统一资源定位符）地址，这种链接路径就称作绝对路径。
2、一般用于链接外部网站或外部文件资源时，例如：http:/ 相对于文档路径：表述源端点与链接目标端点之间的相互位置。一般我们默认使用这种方式链接同站点的不同文件。用“. . / ”上一层的文件夹 相对于站点根目录路径: 所有链接的路径都是从站点的根目录开始的。“ / ”表示根目录。,二、文本超链接,文本链接是以文本为链接对象的一种常用的链接方式。作为链接对象的文本带有标志性，它标志链接网页的主要内容或主题。,创建文本链接的方法 直接输入要链接文件的路径和文件名 使用“浏览文件”按钮 使用指向文件图标,目标下拉菜单选项，设置打开网页的位置 _blank :每个链接会创建一下新的窗口。 _new：会
3、在同一个刚创建的窗口中打开。 _parent：如果是嵌套的框架，则在父框架中打开。 _self：会在当前网页所在的窗口或框架中打开（默认方式）。 _top：会在完整的浏览器窗口中打开。,文本链接的状态（在页面属性中设置） 链接颜色：应用于链接文字的颜色 已访问链接：链接被访问过的颜色 变换图像链接：当鼠标位于链接上时的颜色。 活动链接：当鼠标在链接上点击时的颜色。,下载文件链接 浏览网站的目的往往是查找并下载资料，下载文件可利用下载文件链接来实现。建立下载文件链接的步骤如同创建 文字链接，区别在于所链接的文件不是网页文件而是其他文件，如：.exe、.zip等文件。,电子邮件链接 网页只能作为单
4、向传播的工具，将网站的信息传给浏览者，但网站建立者需要接收使用者的反馈信息，一种有效的方式是让浏览者给网站发送E-mail。在网页制作中使用电子邮件超链接就可以实现。 每当浏览者单击包含电子邮件超链接的网页对象时（如文本或图像），就会打开邮件处理程序（如outlook），并且自动将收信人地址设为网站建设者的邮箱地址，方便浏览者给网站发送反馈信息。,建立电子邮件链接的方法 利用“属性”面板建立电子邮件超链接 在链接栏中直接输入 “mailto:邮件地址”，如：mailto: 利用“电子邮件链接”按钮打开对话框建立电子邮件超链接。,创建空链接 空链接用来激活页面中的对象或文本。当文本或对象被激活后
5、，可以为之添加行为。 方法：选中要制作空链接的对象，在链接文本框中直接输入。 在一般站点首页的导航栏中的首页链接，就可以是一个空链接。,案例练习 车行天下网 设置“图片欣赏”为下载链接； 设置“联系我们”为邮件链接； 在页面属性中，设置链接状态。,制作海天的小站点 要求：里面包含新闻页（在news文件夹下），包含学生活动页（在huodong文件夹下），站点根目录包含首页。页面要求页面属性要设置，首页至少有二个链接，链接到二级页面中（新闻和学生活动等）。二级页面之间要有链接（如新闻页上要找到学生活动的链接，能够链接过去），也要链接回首页。,三、图像超链接,图像超链接就是以图像作为链接对象。当用户
6、单击该图像时打开链接网页或文档。 建立方法 选中图像 在“属性”面板中，在“链接”处链接到相对应的文档路径。 “替代”文字，当图片不能下载时，会在图片位置上显示替代文字。,案例练习恋之语素材模板网 主要使用“鼠标经过图像”制作导航条。,四、命名锚记超链接,锚点也叫书签，顾名思义，就是在网页中作标记。每当要在网页中查找特定主题的内容时，只需快速定位到相应的标记（锚点）处即可，这就是锚点链接。,命名锚记链接 若网页的内容很长，为了寻找一个主题，浏览者往往需要拖拉滚动条进行查看，非常不方便，Dreamweaver cs5提供了锚点链接功能可快速定位到网页的不同位置。 创建锚点 将光标移到某一个要插入
7、锚记的主题处。 点击“插入”面板，“常规”中，“命名锚记”按钮，进行命名。 建立锚点链接 本页面锚记位置：#+锚记名 跨页面跳转：文件名.html#+锚记名,案例制作小说站点 将一篇比较长的小说，在每一篇章上设置上锚记，最上方做目录，点击目录中某一篇链接到某一篇中。另做一个首页，点击某一题目，会链接到小说页面的某一个主题上。,五、脚本链接,通过连接触发脚本命令（将以下代码添加到链接处即可） 添加到收藏夹：javascript:window.external.addFavorite(http:/,山东海天软件工程学院) 表示关闭窗口：javascript:window.close() 表示弹出一个提示对话框：javascript:alert(你中毒了！),设置为默认主页：（需通过空链接#触发onClick事件）onClick=“this.style.behavior=url(#default#homepage);this.setHomePage(http:/ 二、文本超链接 三、图像超链接 四、命名锚记超链接 五、脚本链接,七、作业,绿色食品网页 用矩形热点和多边形热点完成网页与网页之间的链接。,茶文化 绝对地址链接、下载链接、邮件链接。,制作一个壁纸网站,
