05-建立网页超链接.ppt

实训内容 Sichuan College of Chemical Technology 主讲人：四川化工职业技术学院　姜波 第4单元 建立网页超链接 （一）课程引导 超链接是WWW（万维网）技术的精华，是网页中最重要、最根本的元素之一。超链接能够使多个孤立的网页之间产生一定的相互联系，从而使单独的网页形成一个有机的整体。超链接作为网页间的桥梁，起着相当重要的作用。 （二）明确知识技能目标 （1）了解超链接的概念、分类，以及绝对链接路径和文档相对链接路径的差异。 （2）掌握外部链接和内部链接的创建方法。 （3）掌握创建E-mail链接的方法。 （4）掌握锚点链接的方法。 （三）展示网页浏览效果 页面链接 下载链接 电子邮件 链接 锚点链接 锚点链接 电子邮件 链接 （四）知识讲解与操作示范 1. 超链接是什么 所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个压缩文件，设置是一个应用程序。而在一个网页中用来超链接的对象,可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。 （四）知识讲解与操作示范 内部链接：链接到本网站中的网页（文档），利用内部链接在同一站点内的不同网页间实现超链接。 外部链接：链接到本网站以外的网页（文档），利用外部链接可以跳转到本站点外的其他网站的页面上。 注意：外部链接需使用完整的URL地址，如： http是浏览网页使用的网络协议，是访问网站的域名 2.创建超级链接 （四）知识讲解与操作示范 设置链接样式： 链接颜色 已访问后链接颜色 鼠标指向时链接颜色 鼠标点击变化时链接颜色 锚点链接：链接到网页中的命名锚记，利用锚点链接可以跳转到文档中的某个指定位置。 2.创建超级链接 （四）知识讲解与操作示范 电子邮件链接：创建这种链接，可以启动系统的电子邮件程序书写邮件，并发送到指定的邮件地址。 下载链接：被链接的是exe、或者rar、zip类型的文件，浏览器无法直接打开，便会提示文件会被下载，这就是网上下载的方法。 2.创建超级链接 空链接：选择链接内容，然后在链接文本框中直接输入 #。 （五）知识讲解与操作示范 链接路径 在因特网中，每个文件都有自己的存放位置和路径，描述这一位置的就是统一资源定位器（URL），它用于指定欲取得Internet 上资源的位置与方式。例如： 网址/index.asp 在创建超链接时，应根据实际需要灵活地设置准确的链接路径。链接路径可以三种类型：绝对链接路径、文档相对路径和站点根目录相对路径。下面简介路径的三种表示方法。 （五）知识讲解与操作示范 链接路径 (1)绝对路径：为文件提供完全的路径，包括通用的协议，如http,ftp,rtsp等。当创建外部链接只能采用绝对路径。例如： http://www. 31 （五）知识讲解与操作示范 链接路径 (2)文档相对路径：文档相对路径是指链接目标文件相对于当前网页的地址。文档相对路径是最适合网站的内部链接的。只要是属于同一网站之下的，即使不在同一个文件夹（目录）下，文档相对路径也非常的适合 。 当使用文档相对路径后，如果在Dreamweaver中改变了某个文件的位置或者名称，不需要手工修改链接路径， Dreamweaver会自动更改链接路径。 （五）知识讲解与操作示范 链接路径 （3）站点根目录相对路径 站点根目录相对路径是指从站点根文件夹到被链接档经由的路径。例如：/jianjie/bangui.htm 根目录相对路径也适用于创建内部链接，但大多数情况下，一般不使用这种路径形式。如果站点规模很大，需要放置在几个服务器上时，或者一个服务器上放置几个站点时，就可以创建超链接使用站点根目录相对路径。 （五）归纳总结 在本部分的学习中，重点讲述了如何创建外部链接，网站内网页间链接、锚点链接、空链接、E-mail链接的方法。 链接是一个网站的灵魂，不但要知道如何创建超链接，更要知道不同链接路径描述地址的准确意义。除了链接到其他网站的文件必须使用绝对链接路径外，在网站内都应该使用相对路径，特别是文档相对路径，这不仅是缩短了链接路径的长度，更重要的是当设计的网站在互联网上的位置更改时不需要更改设计的链接。 （六）布置习题 选择题 （1）下列路径中属于绝对路径的是______。 A./index.html B./student/webpage/10.html C.10.html D.webpage/10.html