第5章创建超级链接

单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,初识,CorelDRAW 11,课堂讲解,上机实战,第,5,课 创建超级链接,课堂讲解,超级链接概念,超级链接分类,创建文本超级链接,创建锚链接,创建空链接,创建电子邮件超级链接,创建图像超级链接,创建下载超链接,创建导航条,超级链接概念,超级链接是指页面对象之间的链接关系，它网页的灵魂，能合理、协调地把网站中的各个元素、页面通过超级链接构成了一个有机整体，使浏览者能快速地访问到想要访问的页面。,超级链接分类,绝对超级链接,文档相对路径,站点根目录相对路径,绝对超级链接,绝对超级链接就是形如“,http:/,www.china/zh_cn,”,的超级链接地址，它给出了超级链接目标端点完整的,URL,地址，包括使用的协议“,http:/”,。,一般用于创建站外具有固定地址的超级链接。,文档相对路径,使用文档相对路径不需要给出完整的,URL,地址，可省去,URL,地址的协议，只需保留不同的部分。如,pic/logo.gif,，,这是本地站点超级链接中最常用的链接形式。由于相对超级链接的文件之间相互关系并没有发生变化，因此使用文档相对路径创建的超级链接在上传时可以不用更新各个超级链接。,站点根目录相对路径,站点根目录相对路径是形如“,/help/help.html”,的超级链接地址，它基于站点根目录，在同一个站点中网页的超级链接也可采用这种方法。,创建文本超级链接,文本超级链接是最常见的超级链接，通过使用鼠标点击文本即可从一个网页跳转到另一个网页。,2,、创建文字链接,（,1,）选中文本,（,2,）打开属性面板，在,【,链接,】,文本框里输入链接地址，或指向文件。,（,3,）保存后按,F12,预览，,当鼠标点击文本时会直接链接到刚才输入的网站。,创建锚链接,创建命名锚记,链接命名锚记,创建命名锚记,在制作网页时，为了达到跳转到网页固定位置的目的，可以使用锚链接。通过对网页中指定位置的命名，利用超级链接打开目标网页时可直接跳转到相应的命名位置上。,链接命名锚记,创建好锚记之后，必须创建对应的超级链接源端点。,创建锚记链接：,（,1,）复制一篇文章，在顶部将大纲列出,1.2 3,（,2,）将光标放到每一段前依次添加锚记点，英文命名,（,3,）选中大纲,1.,，在属性面板下,【,链接,】,中输入“,#,英文名”,（,5,）重复操作，保存,F12,浏览,创建空链接,要想对文本设置行为，首先必须为文本建立空超级链接（空超级链接是一个未指派目标的超级链接），这样行为才会有效。,为文本建立空超级链接时，只要先在文档窗口中选中需要建立空超级链接的文本，然后在属性面板的“链接”文本框中输入一个“,#”,符号即可。建立空超级链接的目的只是为了应用行为，其他情况下不必建立。,1,、创建空链接,有时制作网页只是为了测试一下页面，这时我们就需要使用空链接。,（,1,）选中要创建空链接的对象，打开属性面板,（,2,）在,【,链接,】,文本框里输入“,#”,号,（,3,）保存，,F12,键浏览，,当光标指向链接对象时，光标会 变为小手的形状，这就创建了空链接,二、链接分类,创建电子邮件超级链接,电子邮件在网络应用中十分广泛，在网页中建立电子邮件超级链接可方便网页浏览者与设计者之间的联系。,创建电子邮件链接,与其他链接的区别是，电子邮件链接并不是移动到特定的站点或网页文档，而是直接调用了可发送邮件的程序,创建电子邮件链接,（,1,）将光标放在需要插入邮件地址的位置,（,2,）执行,【,插入,】-【,电子邮件链接,】,，打开对话框,（,3,）在,【,文本,】,中输入电子邮件链接要显示在页面上的文本，在,【E-mail】,中输入要链接的邮箱地址,创建图像超级链接,为一般图像创建超级链接,创建图像热点超级链接,为一般图像创建超级链接,3,、创建图像链接,创建图像链接可以单击图像跳转到相关的浏览页面，是网页设计者常用的一种链接方式。,（,1,）在文档中插入一幅图像,（,2,）选择该图像，打开属性面板,（,3,）在,【,链接,】,文本框中输入链接地址或指向文件。,（,4,）保存并浏览,创建图像热点超级链接,要在一幅比较大的图片中添加许多超级链接时，应该将图片化整为零，分割成较小的图片，然后分别为这些小图像上建立超级链接来达到目的，但这时整幅图片就不能对齐，利用,Dreamweaver 8,的图像热点超级链接功能就能避免这个问题。,创建热点链接,注意：热点链接只针对图像,热点工具：矩形热点、椭圆形热点、多边形热点,如果一个文档中只有一幅图像，而又想在这幅图像的不同位置创建多个链接，这时用图像链接的方法是行不通的。只能将图像划分为多个区域作为链接的热点。,创建热点链接,（,1,）选择热点绘制工具，绘制热点,（,2,）打开属性面板在,【,链接,】,输入链接方向，确定目标,创建下载链接,常用对象为：,.doc,、,.,ppt,、,.exe,、,.,rar,、,.zip,（,1,）选中文本,（,2,）单击,【,链接,】,文本框右侧的“浏览文件,”,按钮，选择文件,（,3,）将文件保存在站点下,（,4,）单击,【,确定,】,按钮，保存并浏览,创建导航条,插入导航条,编辑导航条,插入导航条,导航条一般由图像或图像组组成，这些图像的显示内容随用户的操作不同而进行相应的变化。导航条为访问者浏览不同网页提供了一条捷径。,编辑导航条,二、导航条,导航条由图像或图像组组成，图像显示内容会随用户不同操作而变化。导航条主要是为在站点上的页面和文件之间移动提供一条简捷的途径。,导航条项目共包含有,4,种状态。,一般：指用户尚未单击或尚未与此项目交互时所显示的图像。例如，此种状态的项目看起来未被单击过。,滑过：指鼠标指针滑过“一般”图像时所显示的图像。项目的外观发生变化（例如变得更亮），以便让用户知道可与这个项目进行交互。,二、导航条,按下：指项目被单击后所显示的图像。例如，用户单击某项目后，载入一个新的页面，而导航条仍然显示，只是被单击的项目变暗，表示它曾被选择过。,按下时鼠标经过：指在项目被单击后，鼠标指针滑过“按下”图像时，所显示的图像。此状态可作为一个给用户的可视提示，告诉他们在站点的这一部分，此项目不能再被单击，例如，项目变淡或变灰,。,二、导航条,下图所示的,4,个图片即为用户自定义导航条,4,种不同状态下图片效果。,1.,插入导航条,使用,【,插入导航条,】,命令之前，须先为各个导航项目的显示状态创建一组图像，并将该组图像拷贝到站点内。用户可将导航条项目视为按钮，因为单击它时，导航条项目将链接到其他网页。打开如下图所示的,【,插入导航条,】,对话框，设置完毕后单击,【,确定,】,按钮即可。,【,插入导航条,】,对话框中各选项功能。,添加项目 ：向,【,导航条元件,】,列表框中添加项目。,二、导航条,删除项目 ：删除,【,导航条元件,】,列表框中项目。,向上移动项目 ：向上移动,【,导航条元件,】,列表框中的项目。,向下移动项目 ：向下移动,【,导航条元件,】,列表框中的项目。,导航条元件：显示所有项目。,项目名称：为导航条项目命名，例如,Home,。,状态图像：单击,【,浏览,】,按钮可从打开的对话框中自由选择最初显示的图像。值得注意的是，此项为必添项，其他图像状态选项为可选项。,鼠标经过图像：单击,Browse,按钮可从打开的对话框中自由选择当用户鼠标指针滑过项目所显示的图像。,按下图像：单击,Browse,按钮可从打开的对话框中自由选择用户单击项目后显示的图像。,按下时鼠标经过图像：单击,rowse,按钮可从打开的对话框中自由选择当用户将鼠 标指针滑过按下图像时所显示的图像。,二、导航条,替换文本：输入项目的描述性名称。,按下时，前往的,URL,：单击,Browse,按钮，以选择要打开的链接文件。该选项后包含一个下拉列表框：,选择,Main window(,主窗口,),选项可在同一窗口中打开文件。,如果导航条位于框架集中，则应选择要在其中打开文件的框架。,预先载入图像：可在载入页面时下载图像。如果未选择此选项，在用户鼠标指针滑过鼠标经过图像时可能会出现延迟。,页面载入时就显示“鼠标按下图像”：可在显示页面时，以按下状态显示所选项目。选择此选项时，在,【,导航条元件,】,列表框中该项目后面出现一个星号。,插入：可选择在文档中是设置导航条项目插入方式是垂直,Vertically,插入还是,Horizontally,水平插入。,使用表格：以表格的形式插入导航条项目。,二、导航条,打开,【,插入导航条,】,对话框的方法有两种。,选择,【,插入,】|【,图像对象,】|【,导航条,】,命令。,单击,【,插入,】,工具栏左侧的下拉三角按钮，从弹出的快捷菜单中选择,【,常规,】,选项，然后单击其右侧的,【,图像,】,按钮，从弹出的菜单中选择选择,【,导航条,】,选项，如图,8-17,所示。,新创建一个网页，向其中添加一个“首页”导航按钮，其,4,种状态使用的图片分别为,PIC01.jpg,、,PIC02.jpg,、,PIC03.jpg,、,PIC04.jpg,，替换文本为“链接至首页”，链接目标为,default.html,。,(1),选择,【,文件,】|【,新建,】,命令，创建一个,HTML,基本页。,(2),将光标置于文件的顶部，然后单击,【,常规,】,工具栏中的,【,导航条,】,按钮，打开,【,插入导航条,】,对话框。,(3),单击,【,状态图像,】,文本框右侧的,【,浏览,】,按钮，选择,PIC01.jpg,。,(4),单击,【,鼠标经过图像,】,文本框右侧的,【,浏览,】,按钮，选择,PIC02.jpg,。,(5),单击,【,按下图像,】,文本框右侧的,【,浏览,】,按钮，选择,PIC03.jpg,。,二、导航条,(6),单击,【,按下时鼠标经过图像,】,文本框右侧的,【,浏览,】,按钮，选择,PIC04.jpg,。,(7,在,【,替换文本,】,文本框中输入项目的描述性名称“链接至首页”。,(8),单击,【,按下时，前往的,】,右侧的,【,浏览,】,按钮，选择站点中的,default.html,文件。,(10),设置完毕后单击,【,确定,】,按钮即可完成导航条的设置。,2.,编辑导航条,为文档创建导航条后，可使用,【,修改导航条,】,命令向导航条添加图像，或从导航条中删除图像。此命令可用于更改图像或图像组、更改单击项目时所打开的文件、选择在不同的窗口或框架中打开文件以及重新排序图像。,若要修改导航条，选择,【,修改,】|【,导航条,】,命令，打开,【,修改导航条,】,对话框，从,【,导航条元件,】,列表框中选择要编辑的项目，再根据 实际需要进行设置，设置完毕后单击,【,确定,】,按钮即可。,三、动手实践,为“卡通动漫”网站,index.asp,网页中左框架中的,4,张图片添加超级链接，为上框架中的“设为首页”、“加入收藏”、“联系站长”添加超级链接；打开,dmjs.asp,网页，添加“返回主页”、“动漫介绍”、“动漫图库”和“留言薄”导航条；并设置“鼠标未经过”时文字超级链接样式为去除下划线。,步骤,1,设置图像链接,(1),进入,ktzj,站点，双击,【,文件,】,面板中的,index.asp,网页。,(2),选择“返回主页”图片，拖动,【,属性,】,面板中的,【,指向文件,】,按钮，指向,【,文件,】,面板中的,index.asp,网页，打开,【,目标,】,下拉列表框，选择,【_parent】,选项。,(3),选择“动漫介绍”图片，拖动,【,属性,】,面板中的,【,指向文件,】,按钮，指向,【,文件,】,面板中的,dmjs.asp,网页，打开,【,目标,】,下拉列表框，选择,【_parent】,选项。,(4),选择“动漫图库”图片，拖动,【,属性,】,面板中的,【,指向文件,】,按钮，指向,【,文件,】,面板中的,pic.asp,网页，打开,【,目标,】,下拉列表框，选择,【_parent】,选项。,(5),选择“