实验三-超级链接的建立.doc

实验二　超级链接的建立

一、实验目的
1、掌握超链接的基本概念和种类
2、能熟练设置文本和图片超链接。
3、能熟练设置锚点超级链接和电子邮件链接。
4、掌握将外部文件导入Dreamweaver中的方法。

二、实验内容
某站点下有如下4个网页，index.html，tangshi.html，songci.html，qingshi.html，现代诗精选.html
1、首页效果图如图2-3-1所示，图像显示在网页的中间，单击“唐诗”会在新的IE窗口打开tangshi.html，单击“宋词”会打开songci.html，单击“清诗”会打开qingshi.html，单击“现代诗”会打开现代诗精选.html “与我联系”会发送电子邮件。
图2-3-1

2、现代诗精选.html效果图如图2-3-2所示，图2-3-2(a)是网页上半部分的效果图，图2-3-2(b)是网页下半部分的效果图，单击右边的诗词名字可以跳到诗词所在地，单击右下角的“返回首页”能够返回首页。

图2-3-2(a) 图2-3-2 (b)

三、知识点分解
1、由图2-3-1可以看出，在该页面正中间有一张图像，当鼠标点击“唐诗”时会跳转到tangshi.html。
2、由图2-3-2可以看出，文字以表格的形式显示在网页上的， 《一切》、《远和近》、《错误》采用了锚链接，“返回首页”采用文字链接，两个链接都无下划线，当鼠标指向链接时显示下划线，点击后变色。

四、实验步骤
内容1的实验步骤：
1、新建5个HTML文档，将其分别保存为index.html，tangshi.html，songci.html，qingshi.html，现代诗精选.html。
2、 将光标定位到要插入图像的位置。
3、 执行如下方法之一：
(1) 选择[插入]/[图像]菜单命令，打开“选择图像源”文件对话框；
(2) 单击“插入”面板的“常用”选项卡中的 按钮，打开如图2-3-3所示的“选择图像源文件”对话框；
(3) 按【Ctrl+Alt+I】键打开“选择图像源文件”对话框。

图2-3-3

4、 在“选择文件名自”栏中选中单选项，在“查找范围”下拉列表框中指定要插入图像的路径并在文件列表中选择需要的文件名称（*.gif、*.jpeg和*.png）
5、 在“相对于”下拉列表框中选择“站点根目录”选项。
6、 单击“确定”按钮，弹出如图2-3-4所示的“图像标签辅助功能属性”对话框。

图2-3-4

7、 在“替换文本”下拉框中输入想要说明的文字，这样的话当鼠标移动到图像上就会出现“替换文本”下拉框中输入的文字。
8、 单击“确定”按钮。
9、 如果所选择的图像文件不在定义的本地站点中，系统会打开的询问对话框，询问是否保存到本地站点目录下。

10、 在提示对话框中单击按钮，打开“复制文件为”对话框，在该对话框中选择保存路径，并在“文件名”文本框中更改图像的名称。
11、 单击“确定”按钮即可将所选的图像插入到网页中指定的位置。
12、 选中该图像，打开“属性面板”，将图像的高度改为“700”，边框改为“1”，选择“居中对齐”按钮。
13、 选取要添加热区的图片，此时属性面板中出现热点工具，单击“矩形热点工具”，在图像上“唐诗”绘制热区后，自动打开“热区”属性面板，如图2-3-6所示。

图2-3-6
14、 在“属性面板”中将“链接”改为tangshi.html，在“替换”中输入“唐诗”，在“目标”下拉列表框中选择“_blank”.
15、 用同样的方法绘制其他热点，并设置相应的链接。
16、 热点链接完成后按【F12】键预览页面，当鼠标移至热区上时即可看到手形图标下面有一个提示文本。

内容2的实验步骤:
1、打开“现代诗精选.html”页面，选择插入\表格。
2、在Dreamweaver中还可以建立命名锚记的链接，也就是锚链接。使用命名锚记的链接可以跳转至文档内的特定位置。建立锚链接分为创建命名锚记和创建到该命名锚记的链接两部分。
创建命名锚记：将插入点放在需要命名锚记的地方，如本例中《一切》。
执行下列操作之一。
选择[插入]}[命名锚记]菜单命令；
在“插入”栏的“常用”选项中，单击“命名锚记”按钮 。
在打开的“命名锚记”对话框的“锚记名称”文本框中，输入锚记名称，如1，并单击“确定”按钮，锚记标记出现在插入点处。
创建到该命名锚记的链接：选择要创建命名锚记的文本或图像，如本例中的“《一切》”。
在属性面板的“链接”文本框中，输入一个数字符号“#”和锚记名称，如“#1” 。
注意：若要链接到当前文档中名为“1”的锚记，则输入“#1”。 若要链接到同一文件夹内其他文档中的名为“1”的锚记，则输入“index.html#1”形式的锚记引用。
8、选中“返回首页”，打开“属性面板”，将“大小”改为“16px”，对齐方式改为“右对齐”。
9、单击“链接”文本框后的 按钮，在打开的“选择新文件”对话框中选择要链接的文件，这里选择“index.html”（即首页），同时在“相对于”下拉列表框中选择相应的“站点根目录”选项。
10、单击按钮，在弹出的“页面属性对话框”中，“分类”选择“链接”，将“下划线样式”改为“始终无下划线”，单击“确定”按钮。
11、按【F12】键，在IE浏览器中单击“再看一遍”链接，则返回到“中华人民共和国婚姻法”（命名锚记处），单击“返回首页”链接，则打开index.html。
12、在建立“与我联系”链接时，则要创建电子邮件链接。创建电子邮件链接有两种方法。
方法一：
(1) 在“文档”窗口的“设计”视图中，选择“与我联系”热区。
(2) 执行下列操作之一插入该链接：
选择[插入]}[电子邮件链接]菜单命令；
在“插入”栏的“常用”选项中，单击“插入电子邮件链接”按钮 。
(3) 打开“电子邮件链接”对话框，如图2-3-7所示。

图2-3-7

在“文本”文本框中输入显示在Web页面中的链接文本，如“与我联系”。
在“E-Mail”文本框中输入要链接到的电子邮箱地址，如“happyfor912@”。
单击“确定”按钮。
方法二：
使用“属性面板创建电子邮件链接，具体操作如下。
(1) 在“文档”窗口的“设计”视图中选择要建立电子邮件链接的文本或图像，如“与我联系”。
(2) 在属性面板的“链接”文本框中，输入“mailto:”，然后在它后面输入电子邮件地址，如“happyfor912@”，在IE浏览器中单击该链接的显示效果。
13、按【F12】键，预览。
注意：此时电子邮件的发送是采用OutExpress或者是OutLook发送的。所以单击“与我联系”时，会自动创建OutExpress连接向导。