3.7 用文件头标签实现网页基本功能
HTML(超文本标记语言)是制作网页的一种规范,或者说是一种标准,它通过特定的标签定义网页内容的呈现方式和组织形式。其中文件头标签是对网页的一些基本属性及页面控制功能进行定义的标签。
3.7.1 文件头标签
标签是定义网页结构的重要元素,标签内容以“<”开始,以“>”结束,中间包含标签的名称和一些属性的参数,如图像标签“<img width=′80′ height=′80′ alt=′图片1′/>”。
标签有的是成对出现,例如,“<a href=′http://www.baidu.com′>百度</a>”,也有单独出现的,例如,“<hr/>”、“<meta http-equiv=′Content-Type′ content=′text/html;charset=gb2312′/>”。
一个完整的网页通常包含<!DOCTYPE>标签、<html>标签、<head>标签、<title>标签和<body>标签等主要组成部分,其中最重要的是<head>标签中的各种文件头标签和<body>标签中的各种网页标签。
通过<head>标签中各种文件头标签可以定义网页的标题,可以为页面添加搜索关键字和描述信息,以方便搜索引擎收录,还可以定义页面的自动刷新方式等。要添加文件头标签,可选择“插入记录/HTML/文件头标签”命令,在弹出的子菜单中选择相应的命令来实现,这些命令包括“Meta”、“关键字”、“说明”、“刷新”、“基础”、“链接”共6项,如图3-43所示,选择其中的任意一个命令,在打开的对应的对话框中通过简单的设置即可添加相应的文件头标签并设置其属性参数。
◆ 图3-43
在默认情况下,操作界面中看不到任何文件头标签,要编辑已存在的文件头标签,可选择“查看/文件头内容”命令,在编辑窗口的“文件头内容”显示区域即可查看到已经存在的文件头标签的按钮,如图3-44所示。
◆ 图3-44
单击“文件头内容”显示区域的某个已存在的文件头标签的按钮即可将其选择,在“属性”检查器中将显示当前文件头标签的各参数设置项,通过“属性”检查器可对文件头标签进行修改,选择某个文件头标签的按钮后按【Delete】键可删除该文件头标签。
温馨小贴士
<body>标签中的内容则主要用于定义网页中被显示在浏览器正文窗格中的各种信息。
3.7.2 <Meta>标签
<Meta>标签是网页头部的一个辅助性标签,它提供用户不可见的控制信息。<Meta>标签通常用来记录当前页面的相关信息,例如,为搜索引擎定义页面主题、定义用户浏览器上的Cookies、鉴别作者、设定页面格式、标注关键字和内容提要等。
选择“插入记录/HTML/文件头标签/Meta”命令,在打开的“Meta”对话框中可以添加<Meta>标签并设置其参数,具体的参数设置如图3-45所示。
◆ 图3-45
① “属性”下拉列表框:只包含“名称”和“http-equivalent”两个可选项,该下拉列表框用于指定<Meta>标签是否包含有关页面的描述性信息(名称)或HTTP标题信息(http-equivalent)。
② “值”文本框:该文本框用于指定需要在标签中提供的信息类型。其中一部分值是已经事先定义好的,如说明(Desc-ription)、关键字(Keywords)和刷新(Refresh),而且在Dreamweaver CS3中有它们各自的“属性”检查器,当然也可以根据实际情况指定任何值。
③ “内容”文本框:指定实际的信息。
温馨小贴士
本节后面各小节介绍的标签(如关键字、说明、刷新等)都是<Meta>标签,只是它们被赋予了特定的“值”和不同的“内容”罢了。
3.7.3 “关键字”标签
“关键字”标签是不可见的页面元素,也就是说它并不会在浏览器窗口的任何区域显示,也不会对页面的视觉呈现产生任何影响,它只是针对搜索引擎的一种技术,因为很多搜索引擎装置都会读取“关键字”标签中的内容,然后将读取到的“关键字”保存到其数据库中并进行索引处理。
因此,“关键字”标签的设置可能会直接影响到该页面被搜索引擎收录的几率,合理的“关键字”标签可以使网页更容易被收录进搜索引擎的数据库,也就更容易被访问者搜索到,从而使网站获得更高的页面点击率。
选择“插入记录/HTML/文件头标签/关键字”命令,打开“关键字”对话框,如图3-46所示,在其中的“关键字”列表框中可以编辑关键字的内容。
◆ 图3-46
科技播报站
很多搜索引擎对“关键字”的字数有限制,因此关键字设置的重点不在于数量而在于质量。
3.7.4 “说明”标签
“说明”标签与“关键字”标签一样,也是不可见的页面元素,它也是针对搜索引擎的一种技术,与“关键字”标签的作用非常类似,不过多数情况下,“说明”标签内容比“关键字”标签的内容要复杂一些,它主要是对网页或站点的内容进行简单的概括,或对网站的主题进行简要说明。
选择“插入记录/HTML/文件头标签/说明”命令,打开“说明”对话框,如图3-47所示,在其中的“说明”列表框中可以编辑相关的说明文本。
◆ 图3-47
科技播报站
“说明”标签常与“关键字”标签配合使用,如果搭配得当,将更有助于网站在搜索引擎上进行推广。
温馨小贴士
“关键字”标签和“说明”标签主要用于在网页<head>标签中添加一些说明性内容,通常“关键字”标签的内容是一个个独立的单词,而“说明”则通常是一段比较完整的描述文字。
3.7.5 “刷新”标签
使用“刷新”标签可以指定浏览器在一定时间后自动重新加载当前页面或跳转到不同的页面。
该元素通常用于在显示了说明URL地址已改变的文本消息后,将用户从一个URL地址重新定向到另一个URL地址。另外,对于像聊天室或股市实时指数一类的网页,也常采用“刷新”标签来实现页面的定时刷新,以保证访问者访问的页面中的数据是最新的,与前面页面跳转功能不同的是它们都是在本页刷新。
选择“插入记录/HTML/文件头标签/刷新”命令,在打开的“刷新”对话框中可以添加“刷新”标签并设置其参数,具体的参数设置如图3-48所示。
◆ 图3-48
① “延迟”文本框:是指在浏览器刷新页面之前需要等待的时间,以秒为单位。若要使浏览器在完成加载后立即刷新页面,则在该文本框中输入“0”。
② “操作”栏:包括“转到URL”文本框以及相应的 按钮和“刷新此文档”单选按钮。它们用于指定在经过了设定的延迟时间后,浏览器是转到另一个URL地址还是刷新当前页面。若选择转到另一个URL地址,需要对转到的URL地址进行设置。
3.7.6 “基础”标签
使用“基础”标签可以设置页面中所有文档相对路径相对的基础URL地址。通常情况下,浏览器会从当前文档的URL地址中提取相应的元素来填写相对URL地址中的空白,简单来说,就是浏览器会通过“基础”标签来把当前文档中的相对URL地址转成绝对的URL地址。
选择“插入记录/HTML/文件头标签/基础”命令,在打开的“基础”对话框中可以添加“基础”标签并设置其参数,具体的参数设置如图3-49所示。
◆ 图3-49
① “Href”文本框:用于设置基础URL地址,可以单击按钮浏览某个文件并选择它,或在文本框中直接输入路径。
② 按钮:单击该按钮,在打开的“选择文件”对话框中设置基础URL地址。
③ “目标”下拉列表框:指定应该在其中打开所有链接的文档的框架或窗口。在当前的框架集中选择一个框架,或在该下拉列表框中选择一种系统预定的保留选项。
温馨小贴士
“目标”下拉列表框中有4个预置选项,空白(_B)将链接的文档载入一个新的、未命名的浏览器窗口;父(_P)将链接的文档载入包含该链接的框架的父框架集或窗口,如果包含链接的框架没有嵌套,则相当于_top;自身(_S)将链接的文档载入链接所在的同一框架或窗口,此目标是默认的,所以通常不需要指定它;顶部(_P)将链接的文档载入整个浏览器窗口,从而删除所有框架。
3.7.7 “链接”标签
“链接”标签允许当前文档和外部文档之间建立链接,其最常见的应用就是链接外部的用于进行页面样式定义并配合实现页面布局的CSS层叠样式表文件,即通过“链接”标签将外部独立的CSS层叠样式表文件引用到当前文档中,以便在当前文档使用该CSS文件中定义的样式。
选择“插入记录/HTML/文件头标签/链接”命令,在打开的“链接”对话框中可以添加“链接”标签并设置其参数,具体的参数设置如图3-50所示。
◆ 图3-50
① “Href”文本框:用于设置链接URL地址,可以单击“浏览”按钮浏览某个文件并选择它,或在该文本框中直接输入路径。
② 按钮:单击该按钮打开“选择文件”对话框。
③ “ID”文本框:为链接指定一个唯一标识符。
④ “标题”文本框:用于描述关系,此属性与链接的样式表有特别的关系。
⑤ “Rel”文本框:用于指定当前文档与“Href”文本框中的文档之间的关系。可能的值包括Alternate、Stylesheet、Start、Next、Prev、Contents、Index、Glossary、Copyright、Chapter、Section、Subsection、Appendix、Help和Bookmark。若要指定多个关系,可使用空格将各个值隔开。
⑥ “Rev”文本框:指定当前文档与“Href”文本框中的文档之间的反向关系(与Rel相对),其可能值与Rel的可能值相同。
3.7.8 应用案例——插入文件头标签
通过本节的学习,已经对文件头标签的用途有了一个基本的了解,下面综合本节所学的知识,在“meta.htm”网页中添加文件头标签,制作后的文档显示效果如图3-51所示(CD:\效果\第3章\meta.htm)。
◆ 图3-51
温馨小贴士
由于文档中包含脚本语言,如果通过IE浏览器来打开文档,浏览器中会出现阻止脚本运行的安全保护提示,单击提示信息,在弹出的快捷菜单中选择“允许阻止的内容”命令即可。
其具体操作步骤如下。
STEP 01. 选择命令。启动Dreamweaver CS3,打开“meta.htm”网页(CD:\素材\第3章\meta.htm),选择“插入记录/HTML/文件头标签/刷新”命令,如图3-52所示。
◆ 图3-52
STEP 02. 输入文本。在打开的“刷新”对话框的“延迟”文本框中输入“2”,选中“操作”栏中的“刷新此文档”单选按钮,单击按钮,如图3-53所示。
◆ 图3-53
STEP 03. 添加“关键字”标签。选择“插入记录/HTML/文件头标签/关键字”命令,在打开的“关键字”对话框的“关键字”列表框中输入“时钟在线时钟及时更新”,单击按钮,完成设置,如图3-54所示。
◆ 图3-54
STEP 04. 添加“说明”标签。选择“插入记录/HTML/文件头标签/说明”命令,在打开的“说明”对话框的“说明”列表框中输入“该页面每两秒刷新一次,随时显示最新时间”,如图3-55所示,单击按钮完成设置。
◆ 图3-55
STEP 05. 预览网页。返回操作界面,按【Ctrl+S】组合键保存文档,按【F12】键预览该网页,其最终效果如图3-51所示。