网页设计与制作项目教学课件王君学孙海伦金哲第5章节教案项目5五超级链接──制作导航网页.pptVIP

项目五 超级链接──制作导航网页 在浩瀚的网海中，每个网页之间都似乎维系着一条看不见的线，无论天涯海角，都能在刹那间联系起来。拥有超级的魔力正是“超级链接”功能的体现。在本项目中将重点介绍有关超级链接的基本知识。通过制作一个简单的导航网页，依次展示文字链接、图像链接、按钮链接、网页地图和电子邮件超级链接等链接方式。 任务一 设置锚记超级链接 （2）在【文件】面板的列表框中双击打开网页文件“index.htm”。 （3）将鼠标光标置于正文第2部分“创作背景”前方，在常用工具栏中单击按钮，在【命令锚记】对话框的【锚记名称】文本框中输入“01”。单击确定按钮，这时在文档鼠标光标位置便插入了一个锚记 。 （4）按照相同的步骤为“赏析”添加命名锚记“02”。 （5）在文档顶部选中文本“赏析”，然后在【属性】面板的【链接】下拉列表中输入锚记名称“#02”，或者直接将【链接】下拉列表后面的图标拖曳到锚记名称“#02”上。 （6）最后在菜单栏中选择【文件】／【保存】命令，保存文件并进行预览。当将鼠标光标移动到链接文字上时，它就会呈现出手指状，待单击“赏析”时，整个页面就会快速滚动到“赏析”内容部分。 任务二 设置图像超级链接 （1）选择“友情链接”栏目下的第1幅图像，然后在【属性】面板的【链接】文本框中输入图像的链接地址“/qts/QTS_sml.htm”，在【目标】下拉列表中选择【_blank】选项 。 （2）选择“友情链接”栏目下的第2幅图像，然后在【属性】面板中单击【地图】下面的（矩形热点工具）按钮，并将鼠标光标移到图像上，按住鼠标左键绘制一个矩形区域。 （4）选中正文最后一行文本“返回”前的图片。然后在【属性】面板中对其进行设置，在【链接】文本框中输入首页的命令锚记“# top”，在【替换】下拉列表中选择【返回首页】选项 。 （5）完成了图像的链接设置并保存文件后，进行预览。当鼠标光标移动到设置链接的图像上时，鼠标光标立刻呈现出手指状，单击即可进入到链接的网页中。当鼠标光标单击网页最下端的图标时，页面很快就滚动到网页的最上端了。 任务三 设置电子邮件超级链接 任务四 设置文本超级链接 （1）选择主页左侧表格中文本“水调歌头”，然后在菜单栏中选择【插入】／【超级链接】命令，或在【插入】／【常用】面板中单击按钮，打开【超级链接】对话框。 （2）在【超级链接】对话框的【文本】文本框中输入网页文档中带链接的文本“水调歌头”。 （3）单击【链接】下拉列表右边的按钮，打开【选择文件】对话框，通过【查找范围】下拉列表选择要链接的网页文件“sdgt.htm”。 （4）在【目标】下拉列表中选择【_blank】选项 。 （5）单击确定按钮，返回【超级链接】对话框，在【目标】下拉列表中选择【_blank】选项，在【标题】文本框中输入当鼠标经过链接时的提示信息，如“水调歌头”。 （6）可以通过【访问键】选项设置链接的快捷键（即按Alt＋1个字母键），将焦点切换至文本链接，还可以通过【Tab键索引】选项设置Tab 键切换顺序，这里均不进行设置。 （7）单击确定按钮，插入“水调歌头”超级链接。 （8）选择【宋词概述】栏目，在【属性】面板的【链接】文本框中输入“/qsc/qscml1.htm”，在【目标】下拉列表中选择【_self】选项 。 （9）通过【属性】面板设置超级链接使用相同的方法为【佳句欣赏】栏目和【宋词词牌】栏目设置超级链接。 （10）选择网页上方文本“唐诗”、“宋词”在【属性】面板的【链接】下拉列表文本框中输入“#” 。 实训 设置“唐诗欣赏”网页 本项目主要介绍了在网页中设置超级链接的基本方法，本实训将让读者进一步巩固所学的基本知识。 要求：把“项目实训\素材”文件夹下的内容复制到站点根文件夹下，然后在网页文档中设置超级链接 小结 超级链接通常由源端点和目标端点两部分组成。根据源端点的不同，超级链接可分为文本超级链接、图像超级链接和表单超级链接。文本超级链接以文本作为超级链接源端点，图像超级链接以图像作为超级链接源端点，表单超级链接比较特殊，当填写完表单后，单击相应按钮会自动跳转到目标页。 * * 尚辅网 / 任务一 设置锚记超级链接 任务二 设置图像超级链接 实 训 设置唐诗欣赏网页 任务三 设置电子邮件超级链接 任务四 设置文本超级链接 （1）首先在Dreamweaver 8中定义一个本地静态站点，然后把“项目素材”文件夹中的内容复制到站点根文件夹下。 （3）在【属性】面板中设置各项参数。 （1）将