![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=1739264442-cQhZaVmb6ZmIScNRNPxUUvkuEqm2GIVp-0-0f1473efbff8dbca2e982af720405fc8)
图4-31
第2步 弹出【页面属性】对话框,1.在【分类】列表框中选择【标题(CSS)】选项,2.在【标题(CSS)】区域中可以对标题名称、字体、大小等属性进行具体设置,3.单击【确定】按钮即可完成设置,如图4-32所示。
![](https://epubservercos.yuewen.com/F92054/15367248304200606/epubprivate/OEBPS/Images/Figure-0068-0128.jpg?sign=1739264442-5SgDw3doaJILQEiQEd2Gkmsu9dkqoUsJ-0-e8873281f2ad5bdab79cfae8f5732040)
图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=1739264442-tHPsP2eJ4yf21BcEpskYEA2DfvgyvRja-0-96ce68e0867f3d033c73e07aa5be64a6)
图4-33
第2步 弹出【关键字】对话框,1.在【关键字】文本框中输入内容,2.单击【确定】按钮即可完成关键字的设置,如图4-34所示。
![](https://epubservercos.yuewen.com/F92054/15367248304200606/epubprivate/OEBPS/Images/Figure-0069-0130.jpg?sign=1739264442-SiOlqo36K6XBXlQNNKMAg2EH03RKaJEX-0-2642df5aa3cb99aea68c9dbaf0ca6845)
图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=1739264442-ZaKDJ55rvMy2XwMR6pEsNpj0o6H7WccA-0-d609e07ca31d9e9b6bfa73fea598ce3f)
图4-35
第2步 弹出【说明】对话框,1.在【说明】文本框中输入内容,2.单击【确定】按钮即可完成说明的设置,如图4-36所示。
![](https://epubservercos.yuewen.com/F92054/15367248304200606/epubprivate/OEBPS/Images/Figure-0070-0132.jpg?sign=1739264442-hUhCOoLLNr90BSVwxCYHICZJZxI1Fdwo-0-dde6986dbe8f8ae80d6e41c544bb0909)
图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=1739264442-B9oY20ZoweOybQbztN4BSVzwwwJj7jRb-0-3d7f2de095563ade0eac45f703fa5516)
图4-37
第2步 可以看到【属性】面板的内容变为视口属性设置,通过以上步骤即可完成插入视口的操作,如图4-38所示。
![](https://epubservercos.yuewen.com/F92054/15367248304200606/epubprivate/OEBPS/Images/Figure-0070-0134.jpg?sign=1739264442-r8zcQBjXU0aNtyeQVuWnxW7hoXL0uoxm-0-8d68b7d3bc353e56ada5992087d8c5b8)
图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=1739264442-uJUXWeVV8SYaViim2pnHwBFAeFVWWrVE-0-bcc2dde47068e1c39f13d1a629ffb9ef)
图4-39
第2步 弹出【选择文件】对话框,1.选择准备链接到的网页,2.单击【确定】按钮,如图4-40所示。
![](https://epubservercos.yuewen.com/F92054/15367248304200606/epubprivate/OEBPS/Images/Figure-0071-0137.jpg?sign=1739264442-LJ2tyrLQd7UUWb1EsXAzJ0YeoAQ6QreE-0-f3231582df75b985b7031741a0c758e9)
图4-40
第3步 可以看到文本颜色变为蓝色并带有下划线,通过以上步骤即可完成设置链接的操作,如图4-41所示。
![](https://epubservercos.yuewen.com/F92054/15367248304200606/epubprivate/OEBPS/Images/Figure-0071-0138.jpg?sign=1739264442-ZkxuzXVMXayDQG9MhM7sBbe2ccc8QeKV-0-32dc2401b16bb46019556dfcefea01b5)
图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=1739264442-xiCcWn7sDDmUWBmUkLDt5uWpw9zSyF9i-0-61e6b373f0fec686f3d3a91860079a8c)
图4-42
第2步 弹出META对话框,1.在【值】和【内容】文本框中输入内容,2.单击【确定】按钮即可完成设置页面META信息的操作,如图4-43所示。
![](https://epubservercos.yuewen.com/F92054/15367248304200606/epubprivate/OEBPS/Images/Figure-0072-0140.jpg?sign=1739264442-RX9b6QmARbDrsHhWRM8s7yp4Kfrtwnhe-0-8e08a8c3d1c0cf520bf3f22b530c3f1d)
图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点过期,届时将无法脱机浏览这个网页,必须联到网上重新浏览这个网页。