2.3 定义元信息_Dreamweaver CC网页设计从入门到精通（微课精编版）-QQ阅读男生都市网

上QQ阅读APP看书，第一时间看更新

2.3 定义元信息

网页都由头部信息区和主体可视区两部分组成。其中，头部信息位于<head>和</head>标记之间，不会被显示出来，但可以在源代码中查看，头部信息一般作为网页元信息方便用户参考、浏览器解析或搜索引擎等设备识别，页面可视区域包含在<body>标记中，浏览者所看到的所有网页信息都包含在该区域。

头部信息对于网页来说是非常重要的，可以说它是整个页面的控制中枢，例如，当页面以乱码形式显示，就是因为网页字符编码没有设置正确等。还可以通过头部元信息设置网页标题、关键词、作者、描述等多种信息。

图2.24 【META】对话框

在【代码】视图下可以直接输入<meta>标记，组合使用HTTP-EQUIV、Name和Content这3个属性可以定义各种元数据。在Dreamweaver CC中，用户使用可视化方式快速插入元数据会更直观方便。具体方法是，选择【插入】｜【Head】｜【META】命令，打开【META】对话框，如图2.24所示。

提示：也可以通过【插入】面板插入元数据。在【插入】面板中单击【常用】工具类中的【Head】按钮，在弹出的下拉列表中选择【META】命令。

下面介绍【META】对话框中各个选项。

（1）【属性】下拉列表框：该下拉列表框中有【HTTP-equivalent】和【名称】两个选项，分别对应HTTP-EQUIV和NAME变量类型。

（2）【值】文本框：输入HTTP-EQUIV或NAME变量类型的值，用于设置不同类型的元数据。

（3）【内容】文本框：在该文本框中输入HTTP-EQUIV或NAME变量的内容，即设置元数据项的具体内容。

【拓展】

HTTP-EQUIV是HTTP Equivalence的简写，它表示HTTP的头部协议，这些头部协议信息将反馈给浏览器一些有用的信息，以帮助浏览器正确和精确地解析网页内容。在【META】对话框的【属性】下拉列表框中选择【HTTP-equivalent】选项，则可以设置下面各种元数据。

Name属性专门用来设置页面隐性信息。在【META】对话框的【属性】下拉列表框中选择【名称】选项，然后设置【值】和【内容】选项的值，就可以定义文档各种隐性数据，这些元信息是不会显示的，但可以在网页源代码中查看，主要目的是方便设备浏览。

提示：在插入元信息时，可以重复插入相同类型的信息，虽然在网页中已经设置了字符编码为UTF-8，但系统依然会再次插入字符编码信息，这与【页面属性】对话框设置不同，它不会修改原来已经设置的信息。

2.3.1 实战演练：设置网页字符编码

网页内容可以设置不同的字符集进行显示，如Gb2312简体中文编码、BIG5繁体中文编码、IS08859-1英文编码、国际通用字符编码UTF-8等。对于不同字符编码页面，如果浏览器不能显示该字符，则会显示为乱码。因此需要首先定义页面的字符编码，告诉浏览器应该使用什么编码来显示页面内容。

【示例】

在【META】对话框的【属性】下拉列表框中选择【HTTP-equivalent】选项，在【值】文本框中输入“Content-Type”，在【内容】文本框中输入“text/html;charset=gb2312”，则可以设置网页字符编码为简体中文，如图2.25所示。

图2.25 设置简体中文字符

使用HTML代码在<head>标记中直接进行书写，如图2.26所示，默认情况下新建页面设置为UTF-8编码（国际通用编码），如果在页面中输入其他国家语言，还需要重新设置相应的字符编码。也可以在【首选项】对话框的【新建文档】分类中设置默认网页编码。

图2.26 直接输入代码

2.3.2 实战演练：设置页面有效期

通过设置<meta>标记属性可以控制页面的有效期限。

【示例】

在【META】对话框的【属性】下拉列表框中选择【HTTP-equivalent】选项，在【值】文本框中输入“expires”，expires为网页到期，在【内容】文本框中输入“Sun,1 Dec 2014 12:00:00 GMT”，则可以设置网页在2014年12月1日12点过期，其格式为“星期，日月年时分秒 GML”。过期之后将无法脱机浏览该网页，只有重新登录并连接该网页才可以继续再次浏览，如图2.27所示。用HTML代码在<head>标记中直接书写如图2.28所示。

图2.27 设置网页期限

图2.28 输入网页期限代码

2.3.3 实战演练：设置网页禁止缓存

使用网页缓存可以加快浏览网页的速度，因为缓存将曾经浏览过的页面暂存在客户端计算机内存中，当下次打开同一个网页内容时，即可直接从内存中调出已浏览的页面，实现快速浏览，避免再次去服务器读取同一网页内容。但是如果网页的内容经常频繁地更新，用户希望随时都能查看到最新的网页内容，则可以通过设置禁止页面缓存。

【示例】

在【META】对话框的【属性】下拉列表框中选择【HTTP-equivalent】选项，在【值】文本框中输入“cache-control”，在【内容】文本框中输入“no-cache”，则可以禁止该网页缓存，如图2.29所示。其中cache-control表示缓冲机制，content属性或者【内容】文本框中内容no-cache定义禁止缓存。用HTML代码在<head>标记中直接书写如图2.30所示。

图2.29 设置网页禁止缓存

图2.30 直接输入禁止缓存代码

2.3.4 实战演练：设置网页自动刷新

使用<meta>标记可以设置网页自动刷新。例如，在直播频道、论坛网站等就需要设置页面自动刷新，以实现信息的自动实时显示。

【示例】

在【META】对话框的【属性】下拉列表框中选择【HTTP-equivalent】选项，在【值】文本框中输入“refresh”，在【内容】文本框中输入“5”，则可以每5秒钟刷新一次网页，如图2.31所示。用HTML代码在<head>标记中直接书写如图2.32所示。

图2.31 设置网页自动刷新

图2.32 直接输入自动刷新代码

2.3.5 实战演练：设置网页自动跳转

使用refresh属性，不仅能够完成页面自动刷新，也可以实现页面之间相互跳转。如果网站地址有所变化，希望在当前的页面中等待几秒钟之后就自动跳转到新的网站地址，可以通过设置跳转时间和地址来实现。

【示例】

在【META】对话框的【属性】下拉列表框中选择【HTTP-equivalent】选项，在【值】文本框中输入“refresh”，在【内容】文本框中输入“5;url= http://www.baidu.com/”，如图2.33所示。则5秒钟后，网页自动跳转到http://www.baidu.com/页面。使用HTML代码在<head>标记中直接书写如图2.34所示。

图2.33 设置网页自动跳转

图2.34 直接输入网页自动跳转代码

2.3.6 实战演练：设置网页转场效果

转场效果即网页过渡特效，是指当进入或离开网站的某个网页时，页面具有不同的切换效果。添加此功能可以使网页看起来更具有动感。

【示例】

在【META】对话框的【属性】下拉列表框中选择【HTTP-equivalent】选项，在【值】文本框中输入“page-enter”，在【内容】文本框中输入“revealtrans(duration=10, transition=1)”，则可以设置网页被打开时以盒状展开，如图2.35所示。使用HTML代码在<head>标记中直接书写如图2.36所示。

图2.35 设置网页转场特效

图2.36 直接输入网页转场特效代码

在【META】对话框的【属性】下拉列表框中选择【HTTP-equivalent】选项，在【值】文本框中输入“page-enter”，表示打开网页；输入“page-exit”，表示关闭网页。Duration表示设置转场时间，transition表示转场效果，如表2.1所示。

表2.1 转场特效编号

2.3.7 实战演练：设置网页独立显示

设置页面在当前窗口中以独立的页面显示。

【示例】

在【META】对话框的【属性】下拉列表框中选择【HTTP-equivalent】选项，在【值】文本框中输入“window-target”，在【内容】文本框中输入“_top”，则可以设置网页被独立打开，避免在其他网页框架结构中显示，如图2.37所示。使用HTML代码在<head>标记中直接书写如图2.38所示。

图2.37 设置网页独立显示

图2.38 直接输入网页独立显示代码

2.3.8 实战演练：设置网页编辑器说明

使用Dreamweaver等网页编辑器时，可以在源代码中设置使用软件的说明。

【示例】

在【META】对话框的【属性】下拉列表框中选择【名称】选项，在【值】文本框中输入“generator”，在【内容】文本框中输入“Dreamweaver”即可，说明该网页的编辑器是Dreamweaver，如图2.39所示。使用HTML代码在<head>标记中直接书写如图2.40所示。

图2.39 设置网页编辑器说明

图2.40 直接输入网页编辑器说明代码

2.3.9 实战演练：设置网页关键词

关键词的设置非常重要，它是为搜索引擎而设置的，也比较讲究，因为网上浏览网页途径主要是通过搜索引擎来实现的。为了提高在搜索引擎中被搜索到的概率，可以设置多个与网页主题相关的关键词以便搜索。这些关键词不会在浏览器中显示。输入关键词时各个关键词之间用逗号分隔。

注意：大多数搜索引擎检索时都会限制关键词的数量，有时关键词过多，该网页会在检索中被忽略。所以关键词的输入不宜过多，应切中要害。

【示例】

在【META】对话框的【属性】下拉列表框中选择【名称】选项，在【值】文本框中输入“keywords”，在【内容】文本框中输入与网站相关的关键词，如“网页设计师，网页设计师招聘，网页素材，韩国模板，古典素材，优秀网站设计，国内酷站欣赏，我的联盟，设计名站，网页教学，网站重构，网站界面欣赏，平面设计，Flash，Dreamweaver，Photoshop，Coreldraw，ASP，PHP，ASP. NET”，如图2.41所示。

图2.41 设置网页关键词

2.3.10 实战演练：设置首页搜索限制

通过设置禁止或者允许权限来避免搜索引擎的搜索，保护网站隐私。

【示例】

在【META】对话框的【属性】下拉列表框中选择【名称】选项，在【值】文本框中输入“robots”，定义搜索方式，在【内容】文本框中输入搜索权限，取值说明如表2.2所示。

表2.2 搜索权限取值

2.3.11 实战演练：设置网页说明

在一个网站中，可以在网页源代码中添加说明文字，概括描述网站的主题内容，方便搜索引擎按主题搜索。这个说明文字内容不会显示在浏览器中。主要为搜索引擎寻找主题网页提供方便，这些说明文字还可存储在搜索引擎的服务器中，在浏览者搜索时随时调用，还可以在检索到网页时作为检索结果返给浏览者，例如在用搜索引擎搜索的结果网页中显示的说明文字就是通过这样设置的。搜索引擎同样限制说明文字的字数，所以内容要尽量简明扼要。

【示例】

在【META】对话框的【属性】下拉列表框中选择【名称】选项，在【值】文本框中输入“description”，在【内容】文本框中输入说明文字即可，如“网页设计师联盟，国内专业网页设计人才基地，为广大设计师提供学习交流空间”，如图2.42所示。