如何 创建链接

来源:百度文库 编辑:神马文学网 时间:2024/04/20 00:16:50
                                                                       
                                                                                 
如何创建 链接
       链接,对用户来说就是Web,因为用户在Web上是通过点击网页上的链接,才访问到自己喜好的相关资料、电影、游戏、新闻、等等。这网上的一切元素和内容都是通过链接来访问的。所以我们有必要全面的认识链接方面的知识。
      1 创建链接
链接(或称超链接)是WWW的魅力所在。为了把Internet上众多的网站和网页联系起来,构成一个有机的整体,就要在网页上加入链接。通过点击网页上的链接,才能在信息海洋中尽情遨游,甚至找到自己的知己。
       要正确创建连接,必须了解链接与被链接文档之间的路径。每个网页都有一个唯一的地址,称为统一资源定位符(URL)。然而,当创建内部链接(同一站点内一个文档向另一个文档之间的链接)时,一般不会指定被链接文档的完整URL,而是指定一个相对于当前文档或站点根文件夹的相对路径。
下面是Dreamweaver允许使用的三种文档路径类型:
   (1)绝对路径
绝对路径就是被链接文档的完整URL,包括所使用的传输协议(对于网页通常是http://)。
例如,http://www.macromedia.com/support/dreamweaver/main.html 就是一个绝对路径。在创建外部链接(从一个网站的网页链接到另一个网站的网页)时,必须使用绝对路径。
   (2)文档相对路径
      以当前文档所在位置为起点到被链接文档经由的路径。这是用于本地链接的最适宜的路径。例如,dreamweaver/main.html就是一个文档相对路径。当要把当前文档与处在相同文件夹中的另一文档链接,或把同一网站下不同文件夹中的文档相互链接时,就可使用相对路径。
       指定文档相对路径时,省去了当前文档和被链接文档的绝对URL中相同的部分,只留下不同的部分。例如,要把当前文档与处在相同文件夹中的另一文档链接,只要提供被链接文档的文件名即可;要把当前文档与一个位于当前文档所在文件夹中的子文件夹里的文件,要提供子文件夹名、前斜杠和文件名。要把当前文档与一个位于当前文档所在文件夹的父文件夹里的文件,在文件名前加上 ../( ..表示上一级文件夹)。
     (3)根相对路径
       根相对路径是指从站点根文件夹到被链接文档经由的路径。一个根相对路径以前斜杠开头,他代表站点根文件夹。例如, /support/tips.html就是站点根文件夹下的support子文件夹中的一个文件(tips.html)的根相对路径。根相对路径是指定网站内文档链接的最好方法,因为在移动一个包含根相对链接的文档时,无需对原有的链接进行修改。
        ① 单击Link域右边的文件夹图标,浏览并选择一个文件。URL域中显示被链接文档的路径。使用Select File(选择文件)对话框中的Relative To(相对于)弹出菜单,选择Document(文档相对路径)或Site Root(根相对路径),然后单击Select(选择)。如图6-2所示。

图6-2 选择文件链接
          注意:当修改Relative To域中的路径时,Dreamweaver把该项选择设置为以后创建的链接的默认路径类型,直至改变该项选择为止。
            ② 在属性检查器的Link域,输入要链接文档的路径和文件名。如图6-3所示。
要链接到当前站点中的另一个文档(内部链接),输入文档相对路径或根相对路径;要链接到当前站点以外的文档(外部链接),输入包含协议类型(如 http://)的绝对路径。

图6-3 链接文档
           (3) 选择被链接文档的载入位置。如图6-4所示。
在默认情况下,被链接文档打开在当前窗口或框架中。要使被连接的文档显示在其他窗口或框架,需要从属性检查器的Target(目标)弹出菜单上选择一个选项:
  在属性检查器的Link域右边,有一个指向文件(Point to File)图标。这是Dreamweaver用于创建链接的特有“武器”。使用指向文件图标,可以方便快捷地创建指向站点窗口中一个文档或图像文件,或指向另一个打开文档中命名锚点的链接。
        1.使用属性检查器中的指向文件图标
       使用属性检查器中的指向文件图标创建链接如图6-5所示,操作步骤如下: 
         (1) 在文档窗口选择文档或图像。
        (2) 在属性检查器中,拖动Link域右边的指向文件图标,指向一个打开文档中的可见锚点。

图6-5 使用属性检查器中的指向文件图标创建链接


或者指向站点窗口中的一个文档,如图6-6所示。




图6-7 给选定文本创建链接
          3. 给站点地图上的文件创建链接
        给站点地图上的文件创建链接如图6-8所示,操作步骤如下。
        (1) 在站点地图上选择HTML文件。此时,指向文件图标出现在选定文件旁边。

图6-8 给站点地图上的文件创建链接
      ( 2)拖动指向文件图标,指向站点窗口中的一个文档(或打开文档中的可见锚点)。
       (3)释放鼠标按钮。
  在上面,我们以创建内部和外部链接为例,介绍了创建链接的一般方法和Dreamweaver提供的独特方法。
   2 创建邮件链接和锚点链接
2.1 创建电子邮件链接
  在网页上创建电子邮件链接,方便用户意见反馈。当浏览者单击电子邮件链接时,可即时打开浏览器默认的电子邮件程序处理程序,收件人邮件地址被电子邮件链接中指定的地址自动更新,无需浏览者手工输入。
1.使用插入邮件链接命令创建电子邮件链接
使用插入邮件链接命令创建电子邮件链接的操作步骤如下:
(1) 把光标置于文档窗口希望显示电子邮件链接的地方,或选定希望显示为电子邮件链接的文本,然后选择Insert>E-Mail Link(插入>电子邮件链接)。
或者在对象面板的Common(常用)嵌板上,单击Insert E-Mail Link(插入电子邮件链接)按钮,如图6-9所示。




图6-11 用属性面板创建电子邮件链接
2.2 设置锚点和创建锚点链接
  创建命名锚点(简称锚点)就是在文档中设置位置标记,并给该位置一个名称,以便引用。通过创建锚点,可以使链接指向当前文档或不同文档中的指定位置。锚点常常被用来跳转到特定的主题或文档的顶部,使访问者能够快速浏览到选定的位置,加快信息检索速度。
  创建锚点链接,首先要设置一个命名锚点,然后建立到命名锚点的链接。
1.设置锚点
设置锚点的操作步骤:
(1) 把光标置于文档窗口想要设置锚点的地方。
(2)选择Insert>Invisible Tags>Named Anchor(插入>不可见元素>命名锚点)。
或者按Ctrl+Alt+A键。
或者单击对象面板右上角的下箭头,弹出对象选择菜单。从菜单上选择Invisibles(不可见元素),显示Invisibles嵌板。单击Invisibles嵌板上的锚点按钮。如图6-12所示。



例如:要链接到当前文档中称为“top”的锚点,输入:#top。或者要链向同一文件夹不同文档中称为“top”的锚点,输入:Filename.html#top。如图6-14所示。

图6-14 同一文件夹不同文档的链接
在Dreamweaver中,也可以使用指向文件图标创建锚点链接,操作方法类同。
     3 快速图片链接批处理
对于网页制作者来说,最烦琐的事情可能就是给写真集页面中的图片或文字加链接了。假如页面图片很多的话,那么所做的工作只能用单调、麻烦来形容。曾给朋友的生活照片作网页,好在Dreamweaver4.0和Fireworks4.0联合帮忙,在不到5分钟的时间就完成了45张照片和相应的链接。
下面是自动制作许多链接并处理图片的方法,是Dreamweaver和Fireworks结合的一个很好的实例典范。具体步骤如下:
① 启动Dreamweaver4.0,建立好站点后,选择Command(命令)>Create Web Photo Album(制作Web影集),打开Create Web Photo Album,如图6-15所示。

图6-15 打开Create Web Photo Album(制作Web影集)菜单
② 在Photo Album Title后的文本输入框中输入影集的名称。在这里输入的文字在Dreamweaver3.0中能正确显示中文,Dreamweaver4.0虽然不能很好的显示你输入的中文,但在浏览器中显示正常。在本例中填写的是林青霞写真,如图6-16所示。
③在Photo Album Title后输入“林青霞写真”,在Subheading Info和Other Info后输入副标题或其他标题。

图6-16 设置Create Web Photo Album(制作Web影集)
④ 接下来就在Source Images Folder后的“Browse”按钮中选择目标图片所在的目录,然后单击“保存”按钮,这里选择phto目录。
⑤ 点击Destination Folder后的“Browser”按钮,选择好处理后的文件所在的目录,一般要选择自己站点所在的目录,(在本例中站点目录就是目标图片目录phto),然后单击“打开”按钮。
⑥ 在Thumbnail Size后的下拉列表中选择好Fireworks处理后的图片大小。
⑦ 在Columns后选择每行图片排列的个数,在Thumbnail Format后的下拉列表中选择索引图片的压缩格式,在Photo Format后的下拉列表中可以选择原图片的压缩格式。
⑧ 对于Create Navigation Page for Each Photo的单选框中的对号选项。他的作用是是否给所有的图片创建一个索引页。如果勾选了该项,则在浏览该图片的时候,每个图片的页面都会有向前、向后、或回到主页面的链接;如果不勾选该项,则没有这些链接,这在选择的时候可以根据自己的需要来确定。
⑨ 作好上面的工作之后,单击“OK”按钮,接下来Fireworks就启动起来了(机器里要装有FireWorks),在Fireworks的窗口里将出现窗口,这是Fireworks中处理图片的进度。
⑩ 处理完后,返回Dreamweaver的工作区,按F12按键,测试一下页面,看看效果,如图6-17所示,这么多链接仅仅一分钟就做好了,是不是很容易。

图6-17 浏览制作好的影集页面
  然后点击图片,会自动跳转到原图片或放大后的图片的页面,如图6-18所示。

图6-18 单独显示影集中的个体照片
用完Dreamweaver4.0的Create Web Photo Album功能后,感觉他效率真高,虽然在处理过程中有时候结果并不十分让人满意,如图片没能按图片名如01s.jpg,02s.jpg,03s.jpg的顺序排列,但还是感觉他实在是减轻我们劳动量的好帮手。
连好链接,是我们对浏览的网民负责,对工作负责;那快速正确的链接,就是工作效率的提高,就是对工作的肯定。