第7单元创建超级链接

《第7单元创建超级链接》由会员分享，可在线阅读，更多相关《第7单元创建超级链接（54页珍藏版）》请在文档大全上搜索。

1、 课堂讲解 上机实战 第7单元 创建超级链接 课堂讲解 超级链接概念 超级链接分类 创建文本超级链接 创建锚链接 创建空链接 创建电子邮件超级链接 创建javascript脚本链接创建图像超级链接 创建导航条 超级链接概念 超级链接是指页面对象之间的链接关系，它网页的灵魂，能合理、协调地把网站中的各个元素、页面通过超级链接构成了一个有机整体，使浏览者能快速地访问到想要访问的页面。 链接有相对链接和绝对链接两种，根据所链接对象的不同分为文本链接、图像链接、锚链接、热区链接、空链接脚本链接等。一般都采用相对链接，可使用基于文档的路径（如：contents.htm）或基于根目录的路径（如：/pic/

2、bg.gif）。超级链接分类 链接有相对超级链接和绝对超级链接两种，根据所链接对象的不同分为文本链接、图像链接、锚链接、热区链接、空链接脚本链接等。一般都采用相对链接，可使用基于文档的路径（如：contents.htm）或基于根目录的路径（如：/pic/bg.gif）。绝对超级链接 绝对超级链接就是形如“http:/www.china/zh_cn”的超级链接地址，它给出了超级链接目标端点完整的URL地址，包括使用的协议“http:/”。一般用于创建站外具有固定地址的超级链接。相对超级链接 使用相对超级链接不需要给出完整的URL地址，可省去URL地址的协议，只需保留不同的部分。如pic/logo

3、.gif，这是本地站点超级链接中最常用的链接形式。由于相对超级链接的文件之间相互关系并没有发生变化，因此使用文档相对路径创建的超级链接在上传时可以不用更新各个超级链接。 创建文本超级链接 文本超级链接是最常见的超级链接，通过使用鼠标点击文本即可从一个网页跳转到另一个网页。 具体操作如下。 （1）选中要建立链接的文本。 （2）单击“文本”属性面板“链接”文本框后的 按钮，在打开的“选择新文件”对话 框 中 选 择 要 链 接 的 文 件 ， 这 里 选 择“index.html”（即首页），同时在“相对于”下拉列表框中选择相应的选项。 （3）单击 按钮返回到Dreamweaver编辑窗口，新建链

4、接地址出现在“链接”后的文本框中，同时，编辑窗口中的文本显示为蓝色，且加上了下划线。 （4）按【F12】键在IE浏览器中浏览，当鼠标移动到该链接上面时，会变成手形（如图5-23所示），单击它则可以在当前窗口中打开该文本所链接的页面。 图5-24创建锚链接 使用锚链接可以跳转至文档内的特定位置。建立锚链接分为创建命名锚记和创建到该命名锚记的链接两部分。创建命名锚记 链接命名锚记 创建命名锚记 创建命名锚记的具体操作如下。 （1）在“文档”窗口的“设计”视图中，将插入点放在需要命名锚记的地方。 （2）执行下列操作之一。选择插入命名锚记菜单命令；按下【Ctrl+Alt+A】键；在“插入”栏的“常用”

5、选项中，单击“命名锚记”按钮 。 （3）在打开的“命名锚记”对话框的“锚记名称”文本框中，输入锚记名称，如图所示，并单击 按钮，锚记标记出现在插入点处。 图5-26链接命名锚记的创建 创建好锚记之后，就可以创建到该命名锚记的链接。具体操作如下。（1）选择要创建命名锚记的文本或图像。（2）在属性面板的“链接”文本框中，输入一个数字符号“#”和锚记名称。 若要链接到当前文档中名为“top”的锚记，则输入“#top”，如图5-27所示。 若要链接到同一文件夹内其他文档中的名为“top”的锚记，则输入“index.html#top”形式的锚记引用。 （3）按【F12】键，在IE浏览器中单击“返回顶部”

6、链接，则返回到页面顶部（命名锚记处），如图5-28所示。 若要使用指向文件的方法链接到命名锚记，具体操作如下。 （1）打开含有所需命名锚记的文档。 （2）在“文档”窗口的“设计”视图中，选择要从其创建链接的文本或图像（如果这是其他打开文档，则必须切换到该文档）。 （3）执行下列操作之一。 单击属性面板“链接”文本框右侧的“指向文件”按钮， 然后将其拖到要链接到的锚记上（可以是同一文档中的锚记，也可以是其他打开文档中的锚记）； 在“文档”窗口中，按住【Shift】键进行拖动，将所选文本或图像拖动到要链接到的锚记（可以是同一文档中的锚记，也可以是其他打开文档中的锚记）。 图5-27 图5-28创建

7、电子邮件超级链接 电子邮件在网络应用中十分广泛，在网页中建立电子邮件超级链接可打开一个新的空白邮件窗口（使用的邮件程序跟浏览者的计算机环境有关）。在电子邮件消息窗口中，“收件人”文本框会自动更新为显示电子邮件链接中指定的地址。 具体操作如下。 （1）在“文档”窗口的“设计”视图中，将插入点置于希望出现电子邮件链接的位置，或者选择要作为电子邮件链接的文本或图像。 （2）执行下列操作之一插入该链接： 选择插入电子邮件链接菜单命令； 在“插入”栏的“常用”选项中，单击“插入电子邮件链接”按钮 。 （3）打开“电子邮件链接”对话框，如图所示。（4）在“文本”文本框中输入显示在Web页面中的链接文本，如

8、“与我联系”，如图所示。 （5）在“E-Mail”文本框中输入要链接到的电子邮箱地址，如“”，如图所示。 （6）单击 按钮，其效果如图所示。 也可以使用“文本”属性面板创建电子邮件链接，具体操作如下。 （1）在“文档”窗口的“设计”视图中选择要建立电子邮件链接的文本或图像，如“与我联系”。 （2）在属性面板的“链接”文本框中，输入“mailto:”，然后在它后面输入电子邮件地址，如“mailto:”，如图所示，在IE浏览器中单击该链接的显示效果如图所示。 图5-32创建空链接 要想对文本设置行为，首先必须为文本建立空超级链接（空超级链接是一个未指派目标的超级链接），这样行为才会有效。 为文本建