![Dreamweaver CC中文版网页设计与制作](https://wfqqreader-1252317822.image.myqcloud.com/cover/659/26943659/b_26943659.jpg)
section 4.4 专题课堂——页面的头信息
导读
插入页面头信息的主要内容包括设置网页标题、添加关键字、添加说明、插入视口、设置链接和设置页面的META信息等。本节将介绍插入页面的头信息方面的知识。
4.4.1 设置网页标题
微课堂 00分26秒
浏览网页时,用户可在浏览器的标题栏中看到网页的标题,在进行多个窗口切换时,标题可以很明白地提示当前网页的信息,因此网页的标题对网页起到至关重要的作用。下面详细介绍设置网页标题的操作方法。
操作步骤 >> Step by Step
第1步 启动Dreamweaver CC程序,1.单击【修改】主菜单,2.在弹出的菜单中选择【页面属性】菜单项,如图4-31所示。
![](https://epubservercos.yuewen.com/F92054/15367248304200606/epubprivate/OEBPS/Images/Figure-0068-0127.jpg?sign=1739310417-aS3eYeb22fcm7DXGgFUha0KyPpbVT5Cy-0-daf2bd844d9f1d191c8487ecade34cdd)
图4-31
第2步 弹出【页面属性】对话框,1.在【分类】列表框中选择【标题(CSS)】选项,2.在【标题(CSS)】区域中可以对标题名称、字体、大小等属性进行具体设置,3.单击【确定】按钮即可完成设置,如图4-32所示。
![](https://epubservercos.yuewen.com/F92054/15367248304200606/epubprivate/OEBPS/Images/Figure-0068-0128.jpg?sign=1739310417-JEv84JECfZLkEnGlhRux0Qv0nGjaEw28-0-56e6b335d914cc18f077240f087d69f5)
图4-32
【标题(CSS)】区域中各项的功能如下:
➢ 【标题字体】下拉列表框:在【标题字体】后的第1个下拉列表框中可以设置标题的字体,在第2个下拉列表框中可以设置标题字体的样式,在第3个下拉列表框中可以设置标题字体的粗细。
➢ 【标题1】~【标题6】下拉列表框:在HTML页面中可以通过<h1>~<h6>标签定义页面中的文字为标题文字,分别对应【标题1】~【标题6】,在该选项区中可以分别设置不同标题的文字大小以及文本颜色。
4.4.2 添加关键字
微课堂 00分23秒
在页面的头部信息中还可以添加关键字,为网页插入关键字的方法非常简单,具体操作步骤如下。
操作步骤 >> Step by Step
第1步 启动Dreamweaver CC程序,1.单击【插入】主菜单,2.在弹出的菜单中选择Head菜单项,3.在弹出的子菜单中选择【关键字】菜单项,如图4-33所示。
![](https://epubservercos.yuewen.com/F92054/15367248304200606/epubprivate/OEBPS/Images/Figure-0069-0129.jpg?sign=1739310417-sefXfcUdayYSoTNKqEZJdFagRIsrKIHv-0-a6a9db2b90a51a33f4c9edc14d4bbdba)
图4-33
第2步 弹出【关键字】对话框,1.在【关键字】文本框中输入内容,2.单击【确定】按钮即可完成关键字的设置,如图4-34所示。
![](https://epubservercos.yuewen.com/F92054/15367248304200606/epubprivate/OEBPS/Images/Figure-0069-0130.jpg?sign=1739310417-Xl560u74z5LVm5Cu4SC8YeJdZYzvDlaw-0-62c385bcf062d658b9b1d3496d018b60)
图4-34
4.4.3 添加说明
微课堂 00分23秒
在页面的头部信息中还可以添加说明,给网页添加说明的方法非常简单,下面详细介绍操作步骤。
操作步骤 >> Step by Step
第1步 启动Dreamweaver CC程序,1.单击【插入】主菜单,2.在弹出的菜单中选择Head菜单项,3.在弹出的子菜单中选择【说明】菜单项,如图4-35所示。
![](https://epubservercos.yuewen.com/F92054/15367248304200606/epubprivate/OEBPS/Images/Figure-0070-0131.jpg?sign=1739310417-PRfsP1vsoDbmCao23Idpy5r2dcArPfeX-0-86407655603c1108132e3ac0bec96bf4)
图4-35
第2步 弹出【说明】对话框,1.在【说明】文本框中输入内容,2.单击【确定】按钮即可完成说明的设置,如图4-36所示。
![](https://epubservercos.yuewen.com/F92054/15367248304200606/epubprivate/OEBPS/Images/Figure-0070-0132.jpg?sign=1739310417-MNARKlbqExVP0OqnEY36Shstk8JA8fFt-0-e6e63de9cfd8b2d9f7bf5c4ab3ef4fc0)
图4-36
4.4.4 插入视口
微课堂 00分20秒
在页面的头部信息中还可以插入视口,给网页插入视口的方法非常简单,下面详细介绍操作步骤。
操作步骤 >> Step by Step
第1步 启动Dreamweaver CC程序,1.单击【插入】主菜单,2.在弹出的菜单中选择Head菜单项,3.在弹出的子菜单中选择【视口】菜单项,如图4-37所示。
![](https://epubservercos.yuewen.com/F92054/15367248304200606/epubprivate/OEBPS/Images/Figure-0070-0133.jpg?sign=1739310417-j2aeBV2Xbsz6he3jA4s4baameRNeavPl-0-7bd5f4b73886b80df247aa458d2c2d35)
图4-37
第2步 可以看到【属性】面板的内容变为视口属性设置,通过以上步骤即可完成插入视口的操作,如图4-38所示。
![](https://epubservercos.yuewen.com/F92054/15367248304200606/epubprivate/OEBPS/Images/Figure-0070-0134.jpg?sign=1739310417-AcmIihTMapOOVospMh1GVQCMGMowHAXB-0-b380b7a0f7a96c85ca6ffedc10a5a2a7)
图4-38
4.4.5 设置链接
微课堂 00分28秒
在页面的头部信息中还可以设置链接,给网页设置链接的方法非常简单,下面详细介绍操作步骤。
操作步骤 >> Step by Step
第1步 选中准备设置链接的文本,1.在【属性】面板中选择HTML选项,2.单击【链接】文本框后面的【浏览文件】按钮,如图4-39所示。
![](https://epubservercos.yuewen.com/F92054/15367248304200606/epubprivate/OEBPS/Images/Figure-0071-0136.jpg?sign=1739310417-Srx9OOYUdoSNrtWa7YIGIxLFLz8SDImD-0-3800a593e9fc15b22bd9c2dde3bfe414)
图4-39
第2步 弹出【选择文件】对话框,1.选择准备链接到的网页,2.单击【确定】按钮,如图4-40所示。
![](https://epubservercos.yuewen.com/F92054/15367248304200606/epubprivate/OEBPS/Images/Figure-0071-0137.jpg?sign=1739310417-3PgGliyFlPUwA9ykeumFO4qt5KtFyaxK-0-b052b911fa0f69a9f58a9c8dfe71d4bc)
图4-40
第3步 可以看到文本颜色变为蓝色并带有下划线,通过以上步骤即可完成设置链接的操作,如图4-41所示。
![](https://epubservercos.yuewen.com/F92054/15367248304200606/epubprivate/OEBPS/Images/Figure-0071-0138.jpg?sign=1739310417-aiJFLJDcw6QKhwDxFFbMHJU3V5MB9Poj-0-0e7ce1ed56443fbbf401b18879072358)
图4-41
■ 指点迷津
链接到的网页必须和正在使用的网页存储于同一站点中,否则链接会出现错误。
4.4.6 设置页面的META信息
微课堂 00分24秒
META标记用来记录当前网页的相关信息,如编码、作者和版权等;也可以用来给服务器提供信息,如网页终止时间和刷新的间隔等。给网页设置页面的META信息的方法非常简单,下面详细介绍操作步骤。
操作步骤 >> Step by Step
第1步 启动Dreamweaver CC程序,1.单击【插入】主菜单,2.在弹出的菜单中选择Head菜单项,3.在弹出的子菜单中选择Meta菜单项,如图4-42所示。
![](https://epubservercos.yuewen.com/F92054/15367248304200606/epubprivate/OEBPS/Images/Figure-0072-0139.jpg?sign=1739310417-THlJzSinH7Bh216LVzSFmtZD5vXi16Lv-0-231aecf08b9365d35bd4bea32a0ce3a1)
图4-42
第2步 弹出META对话框,1.在【值】和【内容】文本框中输入内容,2.单击【确定】按钮即可完成设置页面META信息的操作,如图4-43所示。
![](https://epubservercos.yuewen.com/F92054/15367248304200606/epubprivate/OEBPS/Images/Figure-0072-0140.jpg?sign=1739310417-z2u9SK43NG3GfhUcJDLXqpvTXZ5SLgTu-0-12bf1e63d38c86b4238da03ddac9ccbf)
图4-43
专家解读
设置网页文字编码格式和网页的到期时间,在META对话框中,【属性】下拉列表中包括HTTP-equivalent和【名称】两个选项,分别对应HTTP-EQUIV变量和NAME变量。
在META对话框的【属性】下拉列表中选择HTTP-equivalent选项,在【值】文本框中输入Content-Type,在【内容】文本框中输入“text/html; charset=UTF-8”,则设置文字编码为国际通用编码。
在META对话框的【属性】下拉列表中选择HTTP-equivalent选项,在【值】文本框中输入expirse,在【内容】文本框中输入“Wed,20 Jun 2017 09:00:00 GMT”,则网页将在格林尼治时间2017年6月20日9点过期,届时将无法脱机浏览这个网页,必须联到网上重新浏览这个网页。