网站链接的创建:
超链接是一种网站上常见的对象,它以特殊编码的文本或图形来实现链接。如果单击该链接,则相当于指示浏览器移至同一网站中的某个位置、打开一个新的网页或打开某一个新的网站中的网页。
一、网站链接概念
要正确地创建链接,就必须了解链接与被链接文档之间的路径,每一个网页都有一个唯一的地址,称为统一资源定位符(URL)。网站中的超链接按照链接路径的不同,可以分为以下3种。
第 1种是绝对URL的超链接。URL(Uniform Resource Locator)就是统一资源定位符,简单地讲就是网络上的一个站点或网站的完整路径,如“http://www.guigusheji.com”。
第2种是相对URL的超链接。如将自己网站上的某一段文字或某标题链接到同一网站的其他网页上。
第3种称为同一网站的超链接,这就是要使用到书签的超链接,一般用“#”号加上名称即可链接到同一页面的指定地方。
二、课堂案例——图像热点链接
同一个图像的不同部分可以链接到不同的文档,这就是热点链接。要使图像特定部分成为超链接,就要在图像中设置热点,然后再创建链接。这样当鼠标指针移动到图像热点的时候就会变成手的形状,当按下鼠标的时候,页面就会跳转到或者打开链接的页面。
下面创建图像热区链接。
终案例效果文件所在位置:终文件\CH01\1.7.2\index1.html
1 打开“原始文件\CH01\1.7.2\index.html”。
2 选中图像images\index18.jpg,在【属性】面板中选择【矩形热点】工具
。
提示
在【属性】面板中有3种热点工具,分别是【矩形热点】工具、【圆形热点】工具和【多边形热点】工具,可以根据图像的形状来选择热点工具。
3 将光标置于图像上要创建热点的部分,按住鼠标左键拖曳,绘制一个矩形热点。在【属性】面板中的【链接】文本框中输入链接的地址shouye。
在热点的【属性】面板中的各参数设置如下。
链接:输入相应的链接地址。
替换:输入说明文字。浏览网页时,当鼠标指针移动到图像热点上就会显示输入的说明文字。
目标:选择打开浏览器窗口的方式,不做选择则默认在浏览器窗口打开。
4 按照步骤2~3的方法绘制其他的热点并创建链接
。
5 保存文档。按F12键在浏览器中浏览效果。
三、课堂案例——E-mail链接
在网页上单击电子邮件链接时,将使计算机上的邮件程序打开一个新的空白邮件窗口,并在电子邮件消息窗口中的【收件人】一栏自动显示电子邮件链接中指定的地址。
创建电子邮件超级链接的效果具体操作步骤如下。
终案例效果文件所在位置:终文件\CH01\1.7.3\index1.html
1 打开“原始文件\CH01\1.7.3\index.html”
2 将光标置于要创建电子邮件链接的位置,选择【插入】|【电子邮件链接】命令,弹出【电子邮件链接】对话框,在对话框中的【文本】文本框中输入“联系我们”,【电子邮件】文本框中输入zhu@greatgoal-design.com。
3 单击【确定】按钮,创建电子邮件链接
.
4 保存文档。按F12键在浏览器中浏览效果.
提示
创建电子邮件链接时,也可以在【属性】面板中的【链接】文本框中输入“mailto:邮件的名称”,应注意的是输入邮件地址时一定不要省略“mailto:”。
四、课堂案例——下载文件链接
如果超级链接指向的不是一个网页文件,而是其他文件(如zip、mp3或exe文件等),单击超链接的时候就会下载文件。如果在网站中提供下载资料,就需要为文件提供下载链接。
下面创建下载文件超级链接具体操作步骤如下。
终案例效果文件所在位置:终文件\CH01\1.7.4\index1.html
1 打开“原始文件\CH01\1.7.4\index.html”,选中文字“更多”。
2 在【属性】面板中单击【链接】文本框右边的【浏览文件】按钮,弹出【选择文件】对话框。在对话框中选择要下载的文件“产品介绍.rar”。
3 单击【确定】按钮,创建下载文件超链接
。
4 保存文档。按F12键在浏览器中浏览效果。
五、课堂案例——锚点链接
有时候网页很长,为了找到其中的目标,不得不上下拖曳滚动条将整个文档的内容浏览一遍,这样就浪费了很多时间。利用锚点链接能够更精确地使访问者快速浏览到选定的位置,加快信息检索速度。
下面创建锚点链接具体操作步骤如下。
终案例效果文件所在位置:终文件\CH01\1.7.5\index1.html
1 打开“原始文件\CH01\1.7.5\index.html”
。
2 将光标置于要插入锚点的位置,选择【插入】|【命名锚记】命令,弹出【命名锚记】对话框。在对话框中的【锚记名称】文本框中输入a。
提示
锚记名称只能包含小写字母和数字,且不能以数字开头。同一个网页中可以有无数个锚记,但不能有相同的锚记名称。
3 单击【确定】按钮,插入命名锚记。
4 选中文字“抗病原微生物类”,在【属性】面板中的【链接】文本框中输入“#a”
。
5 按照步骤2~4的方法插入锚记,【锚记名称】文本框中分别输入 b、c、d、e,并创建链接。
Copyright All Rights GreatGoal Design co.,ltd. 鲁ICP备16002128号-3 技术支持: @圭谷设计