搜索
第4章超链接重点和难点1、链接的检查与测试2、绝对路径3、相对路径4、创建超链接5、锚点的建立项目一：超链接基础知识超链接就是一种超媒体链接技术，超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。1、超链接中的路径（1）绝对路径绝对路径是指被链接对象的完整路径，是一个完整URL地址。（2）根目录相对路径根目录相对路径是指从站点根文件夹到被链接对象经过的路径。站点上所有公开的文件都存放在站点的根目录下。根目录相对路径以一个正斜杠“/”开始，该正斜杠表示站点根文件夹。（3）文档目录相对路径文档目录相对路径是指以当前文档所在位置为起点到被链接对象经由的路径，使用相对路径可以省去当前文档与被链接对象的绝对路径或根目录相对路径中相同的部分，保留不同的部分。文档目录相对路径适合于网站的内部链接。2、超级链接的类型超级链接分为内部链接和外部链接。内部链接又称为本地链接，是指同一网站文件之间的链接。外部链接是指不同网站文件之间的链接。（1）文档链接：指向其他文档或文件的链接。例如，图像、影片或声音文件的链接。（2）命名锚记链接：又称为书签链接，这种链接将转到文档中的一个指定位置。（3）电子邮件链接：这种链接将创建一个新的空白电子邮件，其中收件人地址已经填入。（4）空链接：这种链接不会跳转到任何位置，对于附加Dreamweaver行为有特殊用处。（5）脚本链接：创建执行JavaScript代码的链接。3、创建本地链接的几种方法（1）使用站点地图中的“指向文件”图标创建链接----------操作步骤：①在“站点”窗口，单击“站点地图”图标并选择“地图和文件”选项，同时显示站点地图和本地文件。②在站点地图中，选中一个HTML文件，“指向文件”图标自动显示在文件右侧。③拖动“指向文件”图标，使其指向站点地图中的另一个文件；或拖动“指向文件”图标，使其指向“本地文件”视图中的某个文件。④释放鼠标。所链接文件的名称与路径显示在状态栏。（2）使用属性面板中的“指向文件”图标创建链接-------操作步骤：①在文档窗口的“设计”视图中选取文本或图像（例如图4-31所示的左文档）。②将属性面板中的“链接”框右侧的“指向文件”图标拖动到另外打开的文档上（例如图4-31所示的右文档）。③释放鼠标，创建结束。（3）使用打开文档之间的指向创建链接------操作步骤：①在文档窗口的“设计”视图中选取文本。②按住Shift键并拖动被选中的文本，指向另一个打开的文档，或指向站点窗口中的某个文件。③释放鼠标，创建结束。（4）使用菜单创建链接------操作步骤：①在文档窗口的“设计”视图中选取文本或图像。②选择“修改”菜单中的“创建链接”选项，选取链接所指向的文件。（5）使用快捷菜单创建链接-------操作步骤：①在文档窗口的“设计”视图中选取文本或图像。②在选取的文本或图像上单击鼠标右键，从快捷菜单中选择“创建链接”选项，然后选取链接所指向的文件。（6）创建外部链接----操作步骤：①选中需要创建外部链接的文字或图像。例如，“搜狐网”。②在属性面板的“链接”框中输入该链接的外部网站地址“”。项目二：超链接实验（书上典型剖析：信息导航列表）任务一：项目说明（1）在“Mystuhome”下建立文件夹“超链接”，在“超链接”文件夹下建立网页“index.html”和文件夹“image”（2）在网页中创建链接。（3）在网页中创建E-mail链接。（4）在网页中制作图像映射，设置图像热点的超链接。任务二：新建网页（1）在“Mystuhome”下建立文件夹“超链接”，在“超链接”文件夹下建立文件夹“image”和网页“index.html”，保存网页文档，如图4-1所示。（2）按图4-1所示编辑网页，过程这里不在详叙。任务三：创建内部链接为网页中的文本“我的相册”建立内部链接，操作过程如下。（1）选中要设置超接接的元素，这里是选中文本“我的相册”。（2）在属性面板的“链接”文本框中直接输入链接路径或单击“链接”文本框右边的【浏览文件】按钮，在弹出的“选择文件”框中选择一个链接目标对象。这里，选择同一个文件夹下“MyAlbum.html”。也可以在属性面板中拖动“链接”文本框右侧的【指向文件】按钮到“文件”面板中相应的链接目标对象，则链接将指向该对象。拖动时会出现一条带箭头的线，指示要拖动到的位置，指向对象后只需释放鼠标，即可自动生成链接。(3)链接文本框设置完成后，属性面板中的“目标”下来列表框就自动变为可选状态，用于设置目标对象打开的窗口，共有_blank，_parent，_self，_top四个选项可供选择。_blank：表示重新打开一个新的浏览器窗口显示网页。_parent：表示在本框架的上一级框架或浏览器窗口显示网页。_self：表示在自身的框架或浏览器窗口内显示，这个目标选项是默认的没有指定时就会被采用。_top：在浏览器窗口打开链接的网页。这里选择“_blank”。(4)一个内部链接创建完成，设置完成后如图所示。单击【保存】按钮，按F12按钮预览网页。任务四：为网页中的文本“我的家乡”建立外部链接，操作过程如下。（1）选中要设置超接接的元素，这里是选中文本“我的家乡”。（2）在属性面板的“链接”文本框中直接输入外部链接的绝对路径，这里是。(3)在属性面板中的“目标”下来列表框中设置目标对象打开的窗口，这里选择“_blank”。(4)一个外部链接创建完成，单节【保存】按钮，按F12按钮预览网页。任务五：创建E-mail链接为方便获取网页用户的意见和建议，通常需要在网页中建立E-mail链接。E-mail链接被点击后会调用系统中设置的默认邮件程序，打开一个邮件发送窗口，用户可以直接点击E-mail链接发送邮件。为网页中文本“我的邮箱”建立E-mail链接，操作过程如下。（1）选中要设置超接接的元素，这里是选中文本“我的邮箱”。（2）在DreamweaverCS4主窗口中，单击菜单【插入】→【电子邮件链接】弹出如图4-3所示的电子邮件链接对话框。(3)对话框中“文本”指在网页上显示的文本，“E-mail”指需要链接到的邮箱地址，这里输入“wysj@126.com”，单击【确定】按钮完成E-mail链接的设置。也可以在属性面板的“链接”文本框中输入“mailto:”和邮箱地址，这里是“mailto:wysj@126.com”。(4)一个E-mail链接创建完成，单击【保存】按钮，按F12按钮预览网页。任务六：创建锚链接超链接除了可以链接到文件外，还可以链接到本页中的任意位置，这种链接方式称为“锚链接”。当一个网页的主题或文字较多时，为了方便用户浏览，可以在网页内的某些分项内容上建立多个标记点，将超链接指定到这些标记点上，使用户能快速找到要阅读的内容。我们将这些标记点称为锚点（Anchor）对于一篇包含大量文本信息的、很长的网页来说，组织按标题“索引”，能够“跳跃”式阅览是十分必要的。利用书签锚记可以完成上述的需求。创建书签链接包含两个步骤：首先创建命名锚记，然后再创建指向该命名锚记的链接。1、创建命名锚记---操作步骤：①在文档窗口的设计视图中，单击需要创建命名锚记的位置，设置插入点。例如，正文区的“八达岭”之前。②执行下列操作之一，弹出命名锚记对话框。·选择“插入”菜单中的“命名锚记”选项。·按下快捷键“Ctrl+Alt+A”。·在“常用”工具栏中，单击“命名锚记”按钮，③在“锚记名称”文本框中，输入锚记名称。例如，输入a1。④单击“确定”按钮。此时，锚记符号（书签标志）将显示在插入点位置。如果锚记符号没有显示在插入点位置，可以在“查看”菜单，选择“可视化助理”中的“不可见元素”选项，以使锚记可见。⑤参照步骤①~④，继续创建其他锚记。⑥选中锚记符号，属性面板将显示该锚记的属性。2、建立锚记链接-------操作步骤：①在文档窗口的设计视图中，选取要创建链接的文本或图像。②执行下列操作之一，建立链接。·在“属性”面板的“链接”中，输入一个数字符号#以及锚记名称。例如，链接到当前文档中名为“a1”的锚记，则输入“#a1”。·单击“属性”面板“链接”框右侧的“指向文件”图标，并将它拖动到需要链接的锚记处，无论该锚记是在同一文档中还是在其他打开的文档中。·按住Shift键并拖动被选中的文本到需要链接的锚记处，无论该锚记是在同一文档还是在其他打开的文档中。③参照步骤①~②，为第二行中的其他文本分别设置锚记链接。④按快捷键Ctrl+S保存网页。⑤按快捷键F12预览网页。项目三：超级链接的检查与测试任务一：检查指定文档中的链接----操作步骤：①打开需要检查链接的站点。②在“文件”菜单中选择“检查页”、“检查链接”选项，或按快捷键“Shift+F8”，显示“链接检查器”面板。③单击“检查链接按钮”，选择如下三个选项之一开始检查。·检查当前文档中的链接：选择此项前应打开需要检查链接的文档。·为整个站点检查链接：选择此项前应打开需要检查链接的站点。·为站点中的选定文件/文件夹检查链接：选择此项前应在站点窗口选中需要检查链接的文件或文件夹。④从“显示”下拉列表中选取需要显示的链接报告。三个选项是：断掉的链接、外部链接、孤立文件。任务二：链接测试网站发布之前，应该通过浏览器对链接进行测试。在DreamweaverCS4主窗口中，单击菜单【文件】→【在浏览器中预览】→【IExplore6.0】，或按F12键或单击“在浏览器中预览”按钮就可以在浏览器中预览网页，进行链接测试。课后习题一、选择题1.下列路径属于绝对路径的是（）。A））/stuhome/index.htmlC）index.htmlD）stuhome/index.html2.将超链接的目标网页在新窗口中打开的方式是（）。A）blankB）parentC）topD）self3.用于在同一网页内容之间相互跳转的超链接是（）。A）锚点链接B）空链接C）电子邮件链接D）图像链接二、简答题1.什么是超链接2.什么是相对路径，什么是绝对路径，两者有什么区别？3.热区的作用是什么？上机实践内容1、书上第二节（典型剖析：信息导航列表）2、在超链接文件夹下创建“名站收藏..html”网页文档，在网页中列举自己经常访问的网站名称，为他们建立到网站网址的超链接。3、在超链接文件夹下创建“相册..html”网页文档，在网页中插入图片，在图片上建立热区图像链接。4、为网页“相册.html”建立到底端和到顶端的锚链接。