1.5 定义网页元信息
视频讲解
网页都由两部分组成：头部信息区和主体可视区。其中头部信息位于<head>和</head>标记之间，不会被显示出来，但可以在源代码中查看，头部信息一般作为网页元信息方便搜索引擎等设备识别，页面可视区域包含在<body>标记中，浏览者所看到的所有网页信息都包含在该区域。
头部信息对于网页来说是非常重要的。例如，当页面以乱码形式显示，就是因为网页字符编码没有设置正确。还可以通过头部信息设置网页标题、关键词、作者、描述等多种信息。
在代码视图下可以直接输入<meta>标记，组合使用http-equiv、name和content这3个属性可以定义各种元数据。在Dreamweaver CC中，用户使用可视化方式快速插入元数据会更直观方便。具体方法：选择【插入】|【Head】|【Meta】命令，打开【META】对话框，如图1.37所示。
图1.37 【META】对话框
提示：也可以通过【插入】面板插入元数据。在【插入】面板中选择【常用】工具类中的【Head】图标
，在弹出的下拉列表中选择【META】选项。
下面介绍【META】对话框中的各个选项。
☑ 【属性】下拉列表：该列表框中有【HTTP-equivalent】和【名称】两个选项，分别对应http-equiv和name变量类型。
☑ 【值】文本框：输入http-equiv或name变量类型的值，用于设置不同类型的元数据。
☑ 【内容】文本框：在该文本框中输入http-equiv或name变量的内容，即设置元数据项的具体内容。
【拓展】
http-equiv是HTTP Equivalence的简写，它表示HTTP的头部协议，这些头部协议信息将反馈给浏览器一些有用的信息，以帮助浏览器正确和精确地解析网页内容。在【META】对话框的【属性】下拉列表中选择【HTTP-equivalent】选项，则可以设置下面各种元数据。
name属性专门用来设置页面隐性信息。在【META】对话框的【属性】下拉列表中选择【名称】选项，然后设置【值】和【内容】选项的值，就可以定义文档各种隐性数据，这些元信息是不会显示的，但可以在网页源代码中查看，主要目的是方便设备浏览。
1.5.1 实战演练：设置网页字符编码
网页内容可以设置不同的字符集进行显示，例如，GB 2312简体中文编码、BIG5繁体中文编码、ISO 8859-1英文编码，国际通用字符编码UTF-8等。对于不同字符编码页面，如果浏览器不能显示该字符，则会显示为乱码。因此需要首先定义页面的字符编码，告诉浏览器应该使用什么编码来显示页面内容。
【示例】在【META】对话框的【属性】下拉列表中选择【HTTP-equivalent】选项，在【值】文本框中输入Content-Type，在【内容】文本框中输入text/html;charset=gb2312，则可以设置网页字符编码为简体中文，如图1.38所示。
图1.38 设置简体中文字符
使用HTML代码在<head>标记中直接书写，如图1.39所示，新建页面默认为UTF-8编码（国际通用字符编码），如果在页面中输入其他国家语言，还需要重新设置相应的字符编码。
图1.39 直接输入代码
1.5.2 实战演练：设置网页关键词
关键词的设置非常重要，它是为搜索引擎而设置的，也比较讲究，因为网上浏览网页途径主要是通过搜索引擎来实现的。为了提高在搜索引擎中被搜索到的概率，可以设置多个与网页主题相关的关键词以便搜索。这些关键词不会在浏览器中显示。输入关键词时各个关键词之间用逗号分隔。
【示例】在【META】对话框的【属性】下拉列表中选择【名称】选项，在【值】文本框中输入keywords，在【内容】文本框中输入与网站相关的关键词，如“网页设计师，网页设计师招聘，网页素材，韩国模板，古典素材，优秀网站设计，国内酷站欣赏……”，如图1.40所示。
图1.4 【修改】下拉菜单
图1.40 设置网页关键词
1.5.3 实战演练：设置网页说明
在一个网站中，可以在网页源代码中添加说明文字，概括描述网站的主题内容，方便搜索引擎按主题搜索。这个说明文字内容不会显示在浏览器中，主要为搜索引擎寻找主题网页提供方便，这些说明文字还可存储在搜索引擎的服务器中，在浏览者搜索时随时调用，还可以在检索到网页时作为检索结果返给浏览者，例如，在用搜索引擎搜索的结果网页中显示的说明文字就是通过这样设置的。搜索引擎同样限制说明文字的字数，所以内容要尽量简明扼要。
【示例】在【META】对话框的【属性】下拉列表中选择【名称】选项，在【值】文本框中输入“description”，在【内容】文本框中输入说明文字即可，如“网页设计师联盟，国内专业网页设计人才基地，为广大设计师提供学习交流空间”，如图1.41所示。
图1.41 设置搜索说明