网页制作教程 3 框架页面的搭建超级链接的编辑

如何插入和编辑超链接以跳转页面

如何插入和编辑超链接以跳转页面超链接是网页中非常常见的元素，它可以将用户引导到其他页面，扩展了页面的功能和内容展示。

在本文中，我们将讨论如何插入和编辑超链接以跳转页面。

1. 插入超链接在开始插入超链接之前，我们需要确保所要跳转的页面已经存在并可以通过URL地址访问。

接下来，我们可以按照以下步骤插入超链接：（1）选择要添加超链接的文本或图片，例如一段文字或者一张图片。

（2）在编辑器的工具栏中找到超链接插入的图标，通常是一个链状图标。

（3）在弹出的超链接插入窗口中，将要跳转到的页面的URL地址粘贴到“链接URL”或“目标URL”字段中。

（4）根据需要，可以编辑其他超链接属性，例如添加标题、描述或者设置在新标签页中打开等选项。

（5）点击“确认”或“插入”按钮，完成超链接的插入。

2. 编辑超链接如果需要修改已经插入的超链接，我们可以按照以下步骤进行编辑：（1）选中已经插入的超链接文本或图片。

（2）在编辑器的工具栏中找到超链接编辑的图标，通常是一个链状图标加上一个铅笔图标。

（3）弹出超链接编辑窗口后，可以编辑链接URL、标题、描述等属性。

（4）完成编辑后，点击“确认”或“保存”按钮，保存修改。

3. 跳转页面当用户点击超链接时，会自动跳转到所指定的页面。

为了保证用户能够正常跳转，我们可以注意以下几点：（1）确保链接URL的准确性，避免链接地址错误导致页面无法访问。

（2）测试超链接的跳转效果，确保目标页面可以正常打开。

（3）在页面中提供明显的提示，表明某段文字或者图片是一个可点击的链接，以引导用户进行操作。

（4）若有需要，可以通过设置在新标签页中打开的方式，保持用户在原页面的浏览。

总结：插入和编辑超链接以跳转页面是网页制作中常见的操作。

通过选择要跳转的文本或图片，插入超链接并设置链接URL，我们可以在页面中创建可交互的内容。

编辑超链接可以对已有的链接进行修改，确保链接的准确性和完整性。

最后，为了提供良好的用户体验，我们需注意链接URL的正确性、目标页面的可访问性，并为用户明确标识可点击的链接。

网页链接是怎么制作的？网页链接制作生成

网页链接是怎么制作的？网页链接制作生成在现代社会，互联网已经成为人们日常生活中必不行少的一部分。

随着互联网的不断进展，网页的制作和链接也越来越重要。

那么，网页链接是怎么制作的呢?本文将为您具体解答。

什么是网页链接?网页链接是指在网页中，通过点击文字、图片或者按钮等元素，跳转到另一个网页或者同一网页的不同部分的操作。

在网页中，链接是特别重要的，它们可以让用户便利地跳转到其他网页，也可以让用户在同一网页中快速定位到需要的内容。

网页链接的制作1.超链接超链接是最基本的网页链接形式，它可以在网页中任何位置添加。

在HTML中，超链接的代码格式为：“a href="链接地址"”链接文字“/a”其中，href属性用于指定链接的目标地址，链接文字则是用户点击时看到的文字。

2.锚点链接锚点链接是指在同一网页中，通过点击链接跳转到该网页的不同部分。

在HTML中，锚点链接的代码格式为：“a href="#锚点名称"”链接文字“/a”其中，href属性的值以#开头，后面跟着锚点名称，链接文字则是用户点击时看到的文字。

在网页中，锚点名称需要用id属性指定。

3.邮件链接邮件链接是指在网页中添加一个链接，点击该链接可以打开电子邮件客户端，并自动填写收件人的邮件地址。

在HTML中，邮件链接的代码格式为：“a href="mailto:收件人邮件地址"”链接文字“/a”其中，href属性的值以mailto:开头，后面跟着收件人的邮件地址，链接文字则是用户点击时看到的文字。

4.电话链接电话链接是指在网页中添加一个链接，点击该链接可以直接拨打电话号码。

在HTML中，电话链接的代码格式为：“a href="tel:电话号码"”链接文字“/a”其中，href属性的值以tel:开头，后面跟着电话号码，链接文字则是用户点击时看到的文字。

网页链接的生成工具除了手动编写HTML代码外，网页链接的生成还可以使用一些工具来简化操作。

如何制作自己的网页链接？制作网页链接的步骤和注意事项

如何制作自己的网页链接？制作网页链接的步骤和注意事项在当今数字化时代，网页链接是连接互联网世界的纽带，它们使得用户可以轻松地在不同的网页之间跳转。

无论是个人网站、企业网站还是电子商务平台，网页链接都是构建用户友好的网站体验的重要组成部分。

本文将具体介绍如何制作自己的网页链接，并供应一些制作网页链接的步骤和留意事项，关心您创建专业、时尚且高效的网页链接。

了解网页链接的基本概念在开头制作网页链接之前，我们首先需要了解网页链接的基本概念。

网页链接，也被称为超链接，是一种在网页上创建可点击的文本或图像，通过点击这些链接，用户可以跳转到其他网页、文件或特定位置。

网页链接通常以蓝色文本显示，并且在鼠标悬停时会显示下划线，以便用户能够识别和点击。

制作网页链接的步骤1、确定链接目标：在制作网页链接之前，您需要确定链接的目标。

链接目标可以是其他网页、文件、特定位置或者是电子邮件地址。

确保您已经预备好链接目标的正确网址或文件路径。

2、编写链接文本：链接文本是用户将要点击的可见文本。

为了吸引用户点击，链接文本应当简洁、明确，并且与链接目标相关。

例如，假如您要链接到一个关于烹饪的网页，链接文本可以是“点击这里了解更多关于烹饪的信息”。

3、使用HTML标签创建链接：在网页制作中，使用HTML标签是创建网页链接的常用方法。

在适当的位置插入以下代码即可创建一个基本的网页链接：其中，`链接目标`是您确定的链接目标，可以是其他网页的URL、文件的路径或者是电子邮件地址。

`链接文本`是您编写的链接文本。

4、添加样式和属性：为了使网页链接看起来更加吸引人和易于识别，您可以为链接添加样式和属性。

例如，您可以使用CSS来更改链接的颜色、字体大小、背景颜色等。

此外，您还可以为链接添加`target="_blank"`属性，使链接在新的标签页中打开，而不是在当前标签页中打开。

5、测试链接：在完成网页链接的制作后，务必进行测试以确保链接正常工作。

用Frontpage制作简单网页框架结构中超级链接的使

《用Frontpage制作简单网页——框架结构中超级链接的使用》教案[课前准备]：1、学生已经掌握的技能<1>基本的计算机操作技巧<2>基本的字处理软件操作技能<3>基本的网络搜索、下载技能<4>在不同程序间的基本操作技能：如复制、粘贴2、本课所需的学习资源素材：图片、文字提供学习网页课件(为了让学生更好地理解,课件本身用Frontpage框架网页形式制成)链接的网站有：<1>/huaian/index.jsp淮安市人民政府<2> / 绿色淮安<3> / /淮安旅游网[对不同起点的学生]：1、需要帮助的学生<1>在操作技巧上提供个别指导<2>在分组策略上和任务安排上进行考虑,让他们与程度较好的学生组成小组,相互帮助,共同提高2、可以提高的学生<1>在操作技能上提出更高的要求<2>对网站的制作提出更高的要求(美化网页、充实内容、设置网页特效)<3>在完成小组任务和合作中应起更重要和突出的作用[学习目标]：1、知识性目标框架网页中超级链接的概念和特点2、技能性目标学会根据任务需要运用超级链接的各种形式：外部网站、本地网页、本地文件（如：Word 文档）、电子邮件3、情感性目标<1>通过分组活动形式对家乡——淮安的面貌进行深入了解，激发学生更加热爱家乡的情感<2>在活动过程中形成分工与合作意识<3>培养加工处理信息的能力[教学方法]：１、教师演示课件，讲解技巧，适时指导２、学生自主浏览课件，分工选做四种形式的超级链接。

网页制作--插入和设置框架

作业1：插入和设置框架操作步骤：1.创建一个【上方固定，右侧嵌套】的框架页。

2.将鼠标定于顶部框架内，选择【文件】/【在框架中打开】打开文挡“top.htm”，然后依次在左侧和右侧的框架内打开文档“main.htm”和“right.htm”。

3.在框架面板中单击第1层框架集边框选择整个框架集，然后选择菜单命令【文件】/【保存框架页】，将整个框架页保存为“7-2-2.htm”。

4.在【属性】面板中，将顶部框架高度设置为“80像素”，其他保持默认设置。

5.选择2层框架集，将右侧框架列宽设置为“180像素”，其他保持默认设置。

6.选择顶部框架，然后在【属性】面板中设置边框为“否”，其他保持默认设置。

7.选择右侧框架，然后在【属性】面板中设置边框为“否”，其他保持默认设置。

8.选择左侧框架，然后在【属性】面板中设置边框为“否”，其他保持默认设置。

9.用鼠标选中右侧窗口中的文本“我说九零后”，然后在HTML【属性】面板中为其添加连接文件“90hou.htm”，并在【目标】下拉列表中选择“mainFrame”选项。

10.选择菜单命令【文件】/【保存全部】。

作业2：使用框架布局“技术论坛”网页操作步骤：1．新建一个文档窗口，然后在【插入】/【布局】面板中单击按钮，创建一个框架页。

2．选择菜单命令【文件】/【保存框架页】，将整个框架页保存为“7-2-3.htm”。

3．在顶部框架、左侧框架和右侧框架中，依次打开文挡“top.htm”、“left.htm”和“main.htm”。

4．选中第1层框架集，将顶部框架高度设置为“100像素”。

5．选中2层框架集，将左侧框架列宽设置为“190像素”。

6．选择顶部框架，然后在【属性】面板中设置边框为“否”，其他保持默认设置。

7．选择左侧框架，然后在【属性】面板中设置边框为“否”，其他保持默认设置。

8．选择右侧框架，然后在【属性】面板中设置边框为“否”，其他保持默认设置。

9．用鼠标选中左侧窗口中的文本“网络技术”，然后在HTML【属性】面板中为其添加连接文件“wangluojishu.htm”，并在【目标】下拉列表中选择“mainFrame”选项。

Web前端设计与开发实用教程第3章-超级链接

3.2.2 绝对路径与相对路径
（2）文档相对路径：是指和当前文档所在的文件夹相对的路径。这种路径通常是最简单的路径，可以用来链接和当前文档处于同一文件夹下的文档。下面举例说明。
3.2.2 绝对路径与相对路径
1．绝对路径
绝对路径是包含服务器协议（对于网页来说通常是http:// 或ftp://）的完全路径，绝对路径包含的是精确地址而不用考虑源文件的位置。但是如果目标文件被移动，则链接无效。创建外部超链接时必须使用绝对路径。
绝对路径是指资源的完整地址，包括URL的所有3个部分，形式如下：协议：//计算机/文档名例如，/20110721/n314120792.shtml就是绝对路径，协议为http，访问主机20110721目录下的n314120792.shtml文件。
表3-1
服务
文字描述
URL形式
WWW FTP4;">新浪</a>
清华大学ftp服 <a href=" ftp:// ">清
务器
华大学</a>
邮件地址
<a href="mailto:itwangwu@"> 写信</a>
3.1.2 超链接类型
1．按照链接路径分类
按照链接路径的不同，网页中超链接一般分为以下3种类型：内部链接、锚点链接和外部链接。
所谓内部链接，指的是在同一个网站内部，不同的html 页面之间的链接关系，在建立网站内部链接的时候，要明确哪个是主链接文件（即当前页），哪个是被链接文件。
所谓外部链接，指的是跳转到当前网站外部，与其它网站中页面或其它元素之间的链接关系。
3.2.1 <a>标记

网页制作与网站设计_05Dreamweaver CS3创建超级链接

任务三
任务描述任务说明
操作步骤
3)按F12键，保存网页文档并在浏览器中检验该文档。
任务四
任务描述任务说明操作步骤
小张想自己设立了一个网页，在
运行过程中可能会出现问题，通过浏
览者能反馈的信息，及时改进，提高网页的制作水平。
任务四
任务描述任务说明
在网页上创建E-mail链接，可以使浏
任务一
任务描述
任务说明操作步骤
“_blank”:在弹出的新窗口中打开所链接的目标。 “_parent”:如果是嵌套的框架，表示在父框架 “_self”:浏览器默认的设置，在当前网页所在的窗口中打开链接的网页。 “_top”:在完整的浏览器窗口的顶层打开链接目标。
任务一
任务描述
任务说明操作步骤
任务一
任务描述
任务说明操作步骤
在“属性”面板中，单击“链接”文
本框右侧的指向文件图标，拖动鼠标时会
出现一条带箭头的细线，指示到链接的文件后，释放鼠标，可以链接该文件⑻如图
5-4所示。
任务一
任务描述
任务说明操作步骤
图5-4 创建指向文件图标链接
任务二
任务描述
任务说明操作步奏
小张在浏览网页时，看见鼠标经过某些文本时，会出现一个小手，点击后会出现新的窗口，自己也想试一试。
图5-2 目标选项
任务一
任务描述
任务说明操作步骤
④“标题”:设置超链接的标题。当鼠标悬停在超级链接上时出现的说明文字。 ⑤“访问键”:设置键盘快捷键，设置好后，如果按键盘上的快捷键将选中这个超级链接。 ⑥“Tab键索引”:设置在网页中用 Tab键选中这个超链接的顺序。 2）完成参数设置后，单击“确定”按钮，即可完成链接。

Dreamweaver CS3网页制作基础教程第5章设置超级链接

5.1.4 超级链接的分类
超级链接通常由源端点和目标端点两部分组成。 (1) 根据源端点的不同，超级链接可分为文本超级链接、图像超级链接和表单超级链接。
(2) 根据目标端点的不同，超级链接可分为内部超级链接、外部超级链接、电子邮件超级链接和锚记超级链接。
5.2 创建超级链接
文本超级链接图像超级链接图像地图电子邮件超级链接锚记超级链接空链接鼠标经过图像导航条 Flash文本 Flash按钮脚本链接
选择【插入记录】/【图像对象】/【导航条】命令，或在【插入】/【常用】面板中单击（导航条）按钮，打开【插入导航条】对话框进行设置即可。
5.2.9 Flash文本
将鼠标光标置于文档中，然后选择【插入记录】/【媒体】/ 【Flash文本】命令，打开【插入Flash文本】对话框进行参数设置即可。在保存路径中不能出现中文字符，保存的Flash动画文件如果使用的是相对路径，应该和网页文档放在同一目录下。
5.2.10 Flash按钮
将鼠标光标置于文档中，然后选择【插入记录】/【媒体】/【Flash 按钮】命令，打开【插入Flash按钮】对话框并进行参数设置即可。在保存的路径和文件名中也不能含有中文字符。保存的Flash动画文件如果使用的是相对路径，应该和网页文档放在同一目录下。
5.2.11 脚本链接
5.2.6 空链接
添加空链接的方法是，在【属性】面板的【链接】文本
框中输入“#”即可
。
5.2.7 鼠标经过图像
将鼠标光标置于文档中，然后选择【插入记录】/【图像对象】/ 【鼠标经过图像】命令，或在【插入】/【常用】面板中单击（鼠标经过图像）按钮，打开【插入鼠标经过图像】对话框进行设置即可。
5.2.8 导航条

制作包含超级链接的网页

实验六：制作包含超级链接的网页
一、实验任务：
1、熟练掌握创建网页外部链接和内部链接，根据页面内容的需要添加和制作不同类型的超级链接。

2、完成【任务6-1】。

3、根据任务6-1的制作，观察和说明外部链接和内部链接、绝对地址和相对地址之间的差别。

二、实验步骤：
1、设置超链接的属性
2、选中所要超链接的文字，点击属性面板，输入链接地址，更改目标状态
3、选中“天子山自然保护区”，点击插入中的Hyperlink，点击链接
按钮，选择网页文件，更改目标填入标题。

3、点击图片，点击属性，点击链接旁的浏览文件夹，选择文件，再点击拆分视图，编入代码
4、选中文字，在属性面板中点击链接，输入链接
5、点击代码视图，首页左侧输入代码<a name=“top”id=“top”></a>，再在“索溪峪自然保护区”左侧输入代码，最后点击“回到首页”设置其链接为“#top’
6、在图像中点击热点工具按钮，在图中绘制一个合适的区域，点击所绘制的区域进行设置超链接。

7、点击窗口里的结果，再点击链接检查器，选择见检查的范围进行检查。

8、外部链接：本网站外部的链接，一般是指其他网站连到本网站的链接。

内部链接：本网站内部网页之间的链接。

相对地址是指相对于当前网页的地址。

绝对路径是被链接文档的完整路径包括使用的传输协议.
三、实验体会
本次的实验报告，让我更加对我的期末报告有了更好的完善，对文字的链接，图片的链接以及图形有了更深次的了解。

网页设计使用Dreamweaver创建超级链接

网页设计使用Dreamweaver创建超级链接超级链接是在网站中最常用的元素之一，它可以将不同的网页链接在一起，为用户提供更好的网站浏览体验。

在Dreamweaver中创建超级链接非常容易，这里将向你介绍如何在Dreamweaver中创建超级链接。

在Dreamweaver中打开或新建一个页面首先，我们需要在Dreamweaver中打开或新建一个页面。

如果你已经有了一个页面，只需要在Dreamweaver中打开它。

如果你需要新建一个页面，选择“文件”-> “新建” -> “HTML”或“XHTML”文档。

选择一个要链接的文本在打开或新建页面后，我们需要选择一个要链接的文本。

这可以是一个单词、一句话、一段文字或图片。

创建一个超级链接要创建一个超级链接，选择要链接的文本，然后单击工具栏中的“超级链接”图标。

这将打开“超级链接”对话框。

在这个对话框中，你可以设置链接的URL、目标、标题和样式。

在链接URL中，输入你想要链接到的网页地址，这可以是一个外部链接，也可以是你当前网站中的一个页面。

在目标中，你可以选择链接在哪个窗口或帧中打开，默认是在当前窗口中打开。

在标题中，你可以输入链接的文字。

在样式中，你可以选择链接的样式，例如，链接的颜色、字体等。

测试超级链接完成后，单击“确定”按钮，Dreamweaver将在你选定的文本上自动创建超级链接。

现在，你可以测试链接是否可以正常工作。

在Dreamweaver中，你可以选择“文件”-> “预览在浏览器中”来预览你的网页。

在浏览器中，单击链接，确保它可以正常打开。

创建内部链接如果你需要创建内部链接，这意味着你需要在你的网站中链接到另一个网页，这个网页可能是你自己站点中的一个页面。

在Dreamweaver中，这非常容易。

首先，选择你要链接的文本，然后在“超级链接”对话框中选择你要链接的页面。

插入电子邮件链接在Dreamweaver中，你还可以创建一个电子邮件链接。

第3单元制作框架网页

5、认识框架网页的视图（1）用FrontPage打开一个框架网页，单击“设计” 选项卡，进入“设计”视图。（2）单击“拆分”选项卡，进入“拆分”视图。（3）单击“无框架”选项卡，进入“无框架”视图。（4）单击“代码”选项卡，进入“代码”视图。（5）单击“预览”选项卡，进入“预览”视图。
二、设计框架网页
五、保存框架网页
1、在菜单栏中选择“文件/保存”，弹出“另存为”对话框。 2、在“另存为”对话框中一一保存各个框架（如横幅框架、目录框架和主要框架）。（1）在“另存为”对话框中，输入对应文件和网页标题，保存“横幅框架”。（2）单击“保存”按钮后，预览框中又选中了目录框架，输入对应文件名和网页标题，保存“目录框架”。（3）保存完目录框架后，预览框中显示选择了整个网页框架，输入对应的文件名和网页标题，保存网页设置文件。
将“多面的我”网页设计为框架网页。多面的我（标题）
（目录）好文的我好动的我好摄影的我
（单击左边目录，动态显示相应内容）
知识充电站：如果一个站点在浏览器中显示为包含3个框架的单个页面，则它实际上至少由4个单独的页面组成：框架集页面以及3个单个页面，这3个单个页面包含这些框架内初始显示的内容。当在Frontpage中设计使用框架集的页面时，必须全部保存这4个页面，以便该页面可以在浏览器中正常工作。

一、认识框架网页
1、框架网页的作用：是将浏览器窗口划分为若干个不同的区域，每个区域可以分别显示不同的网页。 2、框架的组成：框架集和单个框架。 3、框架集和单个框架的定义：框架集是指框架网页显示的框架数、框架的大小、载入框架的网页源和其他可定义的属性等。单个框架是指在网页上定义的一个区域。 4、框架网页：是通过超链接将不同的单个框架建立起了联系，从而实现页面的导航和页面间的交互操作。

DW网页设计教学—单元3 创建超级链接与导航栏

教学目标
教学方法课时建议
任务驱动法、理论实践一体化、讲练结合 8课时（包含考核评价）
【3.1
操作准备】
在本地硬盘（例如D盘）中创建一个文件夹 “网页设计与制作案例”，将光盘中的“单元3” （包括所有子文件夹以及文件）拷贝到该文件夹中。使用创建站点向导创建名称为“单元3”的本地站点。打开文件夹“3-1”中的网页文档0303.html，在该网页的“<head>”与“</head>”之间添加以下代码，链接外部样式文件。
保存网页0302.html，然后按快捷键F12浏览其效果，如图3-12所示，单击各个链接，观察其链接效果是否正确。
【3.3
技术提升】
【任务3-6】创建下拉菜单和自动展开菜单【任务描述】（1）创建纵向下vaScript代码，实现菜单的展开与收缩功能。
图3-12 网页0302.html的浏览效果
【任务实施】

1．创建图片形式的内部链接 2．创建电子邮件链接 3．创建锚点链接
（1）插入一个命名锚记（2）创建锚点链接

4．创建图像热点链接

（1）选中绘制热点区域的图像（2）绘制矩形热点区域
5．为“设为首页”和“收藏易购”设置链接
【任务实施】

1．创建左侧帮助导航栏 2．创建文本形式的超链接

（1）使用【指向文件】按钮创建超链接（2）使用【属性】面板定义超链接（3）使用菜单命令和对话框定义超链接
使用类似方法创建其他15个超链接。

3．查看左侧帮助导航栏的HTML代码 4．保存网页与浏览网页效果
保存网页0303.html，然后按快捷键F12，左侧帮助导航栏的浏览效果如图3-10所示。

如何添加和编辑超链接

如何添加和编辑超链接在互联网时代，超链接是连接网页和网页之间的重要工具。

通过超链接，用户可以方便地跳转到其他网页或定位到特定的内容位置。

本文将介绍如何在常见的编辑平台中添加和编辑超链接。

一、添加超链接无论是在文字编辑软件、网页编辑工具，还是在社交媒体平台上，添加超链接的方法都大体相同。

以下以常见的编辑平台为例，介绍如何添加超链接。

1. Microsoft Word在Microsoft Word中添加超链接非常简单：步骤一：选中需要添加超链接的文本或将光标定位到需要添加超链接的位置。

步骤二：点击顶部菜单栏中的“插入”选项。

步骤三：在弹出的下拉菜单中，选择“超链接”。

步骤四：在弹出的对话框中，输入要链接的网址或选择已有的文件。

步骤五：点击“确定”按钮，完成超链接的添加。

2. WordPressWordPress是一个流行的博客平台，添加超链接也非常简单：步骤一：在编辑文章的页面，选中需要添加超链接的文本。

步骤二：点击编辑器工具栏上的“链接”图标。

步骤三：在弹出的对话框中，输入相应的网址或选择已有的内容。

步骤四：点击“插入链接”按钮，完成超链接的添加。

3. 微信公众号编辑器在微信公众号编辑器中添加超链接也很方便：步骤一：在编辑文章的页面，选中需要添加超链接的文本。

步骤二：点击编辑器工具栏上的“链接”图标。

步骤三：在弹出的对话框中，输入要链接的网址。

步骤四：点击“确定”按钮，完成超链接的添加。

二、编辑超链接在添加超链接后，有时需要对已有的超链接进行编辑或修改。

以下将介绍如何编辑超链接。

1. Microsoft Word在Microsoft Word中编辑超链接的步骤如下：步骤一：选中已添加的超链接文本。

步骤二：右键点击选中的文本，选择“编辑超链接”。

步骤三：在弹出的对话框中，修改超链接的网址或其他属性。

步骤四：点击“确定”按钮，完成超链接的编辑。

2. WordPress在WordPress中编辑超链接的步骤如下：步骤一：在编辑文章的页面，选中需要编辑的超链接文本。

网页制作教程3框架页面的搭建超级链接的编辑

网页制作教程3框架页面的搭建超级链接的编辑
上一节课主要内容回顾
• 课堂练习7 （P35）
2
实例1（P84）实例4（P95）
• 建立上下划分的框架页面，并在不同的框架调用已经做好的页面内容。
5
超级链接实例1（P206）
• 超级链接是指 • 超级链接的参数说明
_top：指的是最上层的窗口 _parnet：指的是子框架所属的框架页 _self：指的是链接所在的网页 _blank：指的是新建一个IE浏览窗口 **frame：指的是在一个指定的框架中显示
链接的页面
6
实例4（P218）
• 特殊的超级链接－脚本链接
调用使用Javascript或VBScript语言下的函数。
Alert()警告提示窗口函数
7
作业
• 第三章课堂练习6 P105 • 第六章课堂练习5 P224 பைடு நூலகம் 第六章课堂练习6 P228
8

网页制作中关于超链接

超链接与框架网页及应用（一）创建网页的超链接1.打开要加入链接的网页新建一个站点，将素材复制到相关文件夹中。

选取文件菜单→ 选取打开选项→ 选取范例文件 sample3-1.htm → 点击打开按钮2．制作到网站的链接选择要添加链接的文本→ 选取链接文本方块（中国教育网）→ 输入链接的网站地址（绝对地址 )3.制作到自己网站中网页的链接选择要添加链接文本（简历撰写要点）→点击浏览文件按钮→选取要链接的网页d1.htm →点击确定按钮4.制作到图片的链接选择要添加链接的文本（图片欣赏）→点击浏览文件按钮→选取要链接的图片p1.jpg →点击确定按钮5.制作到word文档的链接选取添加链接的文本（文章欣赏）→ 点击浏览文件按钮→ 双击 word 文件夹→ 选择要链接的文件（word 文档）→ 点击确定按钮→ 选取目标框→ 选取 _blank 项目(在新窗口打开)6.制作到flash动画的链接选取添加链接的文本（夜之歌（Flash动画））→点击浏览文件按钮→选取要链接的flash文件MK.SWF→点击确定按钮7.制作到声音文件的链接选取添加链接的文本（飘摇）→ 点击浏览文件按钮→ 选取要链接的声音文件py.mp3 → 点击确定按钮8.制作到程序文件的链接选取要添加链接的文本（可爱的小猫（应用程序））→ 点击浏览按钮→ 选取要链接的程序kitty.exe → 点击确定按钮9.制作缩略图到大图的链接点击要添加链接的图片 → 点击浏览文件按钮 → 选取要链接的图片 MONKEY.GIF → 点击确定按钮 → 选取链接目标选择框 → 选取 _blank （在新窗口打开）（二）制作锚点链接 1. 插入第一个锚点打开要编辑的网页 article.htm →将插入点置于要插入锚点的位置→点击插入锚点按钮→输入锚点名1（不能是汉字或全角字符）→点击“确定”按钮2. 插入其它锚点拖动滚动条至下一个要插入锚点处→将插入点置于要插入锚点处→按下插入锚点按钮→输入锚点名2 →点击“确定重复以上步骤，插入所有锚点名。

网页制作-超链接

建立图形地图，使一个图形指向多个链接目标。单击图片的不同部分时，就可以跳到页面的不同部分。首先，要在图形上绘制热点：绘图工具栏有按钮可以添加热点。这个可以添加矩形热点，我们用的就是它。这个用来添加圆形热点，这个可以添加不规则热点。接下来我们按下“矩形热点”按钮，在图片的某一部分上拖一个框，接着就会弹出“创建超链接”对话框。还可以拖动热点框调整位置，也可以拖动热点框的小黑点改变框的大小。
在默认情况下，超链接是蓝色的，以与未访问已经访问过的超链接一般用不同的颜色过的相区别。我们可以改变这些颜色。首先在网页上单击鼠标右键，选择“网页属性”，进入“网页属性”对话框，选择“背景”选项卡，你可以改变一般的、已访问的和当前的超链接的颜色，这里我们单击“超链接”下拉列表框，选择绿色，单击“确定”按钮，超链接的颜色就改变了。
建立到书签的链接
选中文字或图片，把它作为超链接标志，单击“常用”工具栏 “超链接”按钮，在可选组框里书签下拉列表中选择相应的书签，单击“确定”。“书签名称”就变为超链接了。修改书签：选择“插入”菜单的“书签”命令，在对话框中选中你要修改的书签，选择“转到”，跳到相应位置，这时可以直接修改书签名称，也可以单击“清除”按钮删除书签。
定义书签
书签可以是字符串，也可以是光标所在位置。我们选中“默认名称”四个字，选择“插入” 菜单“书签”命令，书签名称就是选择的文本名称。我们可以直接修改书签名称。当你的书签名为空时，你还要自己输入一个名称。现在我们单击“确定”按钮，在普通视图里“默认名称” 被加了下划虚线，表示这儿有一个书签。
还有一种超链接，可以链接电子邮件。这样可以使你的网上朋友通过Email及时与你联系，这是一个网站站长和网友交流的重要手段。首先选中要作为超链接的文本和图片，一般文本就是你的邮箱地址，单击“超链接”按钮，单击“信封”按钮，输入你的邮箱地址：

用FP制作网页--3

新课学生时行为间
浏览 5 样例
学习 20 练习
二、共享边框：当需要在许多网页上显示相同内容时我们可以使用共享边框页面上右击——共享边框
自学 10 练习
三、导航栏插入菜单——导航栏导航视图
四、本节网页制作要求： 1．制作 4 种不同类型超级链接。 2．使用共享边框尝试使用导航栏。 3．完善网站，保存网页。
小结：共享边框的作用。
完善 10 网站
复习：建立表单网页和新建空白网页导入：上节我们已经建好了自己网站的首页和留言板页面
今天我们来学习如何建立超级链接把关联的网页联系起来。打开站点
一、超级链接：建立超链接对象：可以是文字、图片、动画等链接到的对象：可以是网页、文件、email、url 地址超级链接的分类：
1．页面间的超级链接：选定对象——在对象上右击——超链接——选择网页文件（或新建网页） 2．链接到电子邮件地址 3．链接到外部站点：url：http;// 4．链接到书签：在目的位置插入书签然后建立超链接
教案
授课学目标
知识内容
§3-3 用 FP 制作网页--3 1、建立超级链接。 2、使用共享边框和导航栏
能力培养
学习接受新知识的能力。
思想教育
勤练习多思考。
教学重点
创建表单网页
教学难点
创建表单网页
教学方法讲练结合教学媒体
计算机
课程类型
教学过程，教师行为（复习、导入新课、实施过程、小结、板书）

网页设计类之框架的制作

框架所谓框架就是将一个窗口划分为若干个独立的子窗口（或区域），每个子窗口可构成一个独立的网页，即可有各自的标题、背景、内容等，对各个区域可进行独立的操作。

如为了使网页的版面结构清晰，我们可以对网页进行适当的区域分割，使网页中不同内容在不同区域中显示，达到布局合理的目的。

1、创建框架创建框架又叫创建框架集页面，有三种方法：（1）单击主菜单“文件”→“新建”命令或者单击标准工具栏上的按钮，弹出“新建文档”对话框，然后选择“框架集”如图1所示，选择所需的结构。

图1新建框架集窗口（2）在已打开的空页面中，单击主菜单“插入”→“框架”命令，在其子菜单中可以选择不同的框架样式，单击其中一种命令就可在编辑页面中插入相应的框架。

（3）在已打开的空页面中，直接单击“插入”面板组上的“框架”面板，然后选择所需的结构，如图2所示。

图2框架面板如选择所示的第一种结构：垂直拆分。

“显示设计”视图自动被拆分为左右两个窗口，显示如图3所示。

图3垂直拆分另外，可以通过单击主菜单“窗口”→“其它”→“框架”来显示或隐藏系统所提供的一个帮助编辑的“框架”面板。

框架分割线，可单击“文档”工具栏的“视图选项”按钮（弹出如图4所示的菜单）→“可视化助理”→“框架边框”进行显示和隐藏。

图4选择框架边框显示（隐藏）2、编辑框架集页面（1）手工调整框架页如图3所示。

①将鼠标移至区域之间的边框线，鼠标光标变成双向箭头，然后左右拖动可以调整左右窗口的大小。

②如需将页框再进行分割，可先在“框架”面板中选中对应的框（此时框线会变粗），如图5所示的小窗口。

再在“显示设计”视图中拖动相应边框至合适位置即可。

图5框架再分割如在“框架”面板中选取右框，拖动“显示设计”视图的右框下边框，即可将右框分割成一上下框结构，如图5所示。

③删除某个页框时，只需拖动其边框线至整个编辑窗口的外边框即可。

（2）通过属性检查器设置框架页在“框架”面板中，单击外框（或单击“显示设计”视图中各框架间的分割框线）以选取整个框架，属性检查器就会切换成框架集属性检查器，如图6所示。