教案4：网页设计之 设置网页基本信息

南宁市中南理工职业技术学校教案纸

主要教学内容及步骤

导入：上节课学习利用DW新建和管理站点的方法，那么，网页基本信息如何设置？网页文本如何编辑？本节课，将带着大家一起来学习

设置网页基本信息

一、设置文档头信息

文档头信息包括网页关键字、网页说明等。网页关键字对搜索引擎来说起着不容忽视的作用。用户使用Google、Baidu、Yahoo等搜索引擎搜索网页时，搜索引擎是通过网页关键字找到网页的

实操步骤

（1）、将本书附赠素材“素材与实例\ch03”目录下的“text”文件夹拷贝至第2章创建的站点“test”

根目录下。

（2）、在Dreamweaver中打开“text”文件夹中的“index-1x.html”文档，单击“文档工具栏”中的“拆分”按钮，使文档窗口左侧显示HTML代码

（3）、将插入点置于代码界面中标签的后面，在菜单栏中选择“插入”>“HTML”>“Keywords”，弹出“Keywords”对话框，在“关键字”编辑框中输入要为网页设置的关键字，各个关键字之间用逗号或空格隔开，单击“确定”按钮，即在网页中插入关键字

（4）、将插入点置于代码界面中刚插入的关键字标签后面，在菜单栏中选择“插入”>“Head”

>“说明”，弹出“说明”对话框，在“说明”编辑框中输入要为网页设置的说明信息，单击“确定”按钮，即在网页中插入说明信息

主要教学内容及步骤

二、设置网页页面属性

一般在创建一个新网页后，首先要对网页进行页面属性设置，主要是对“标题/编码”的设置。实操步骤：

（1）继续在前面的文档“index_1x.html”

中操作，在文档窗口设计界面中任意位置单击鼠标右键，在弹出的快捷菜单中选择“页面属性”，将弹出“页面属性”对话框，对话框左侧的“分类”列表中显示可以设置的类别，右侧显示相应的设置项，默认显示“外观（CSS）”设置项

（2）在左侧的“分类”列表中选择“标题/编码”，然后在“标题”编辑框中输入网页标题“海的女儿”，“编码”类型保持默认

“跟踪图像”是Dreamweaver一个非常有效的功能，它允许用户在网页中将原来的平面设计稿作为辅助背景。这样，用户就可以非常方便地定位文字、图像、表格等网页元素在页面中的位置。在“跟踪图像”选项中，“跟踪图像”编辑框用于设置跟踪图像的路径和名称。在实际生

主要教学内容及步骤

成网页时，跟踪图像并不显示在网页中。在“透明度”标尺上可以通过拖动滑块改变设计图（跟踪图像）的透明度

三、案例实训：中国亿达集团网页设置实施步骤：

（1）将本书附赠素材“素材与实例\ch03\ydjt”目录下的所有文件拷贝至项目二中创建好的网站“ydjt”根目录下，将两个“images”文件夹合并

（2）启动Dreamweaver CC，在“文件”面板中打开“ydjt”站点，双击其中的“xinwen_1x.html”文档，将其打开

（3）参照相关知识第一节中的操作，将插入点置于代码界面标签的后面，打开“关键字”对话框，在“关键字”编辑框中输入要为该网页设置

的关键字

（4）单击“确定”按钮即在网页中插入关键字，按照同样的方法插入说明文本，最终效果

主要教学内容及步骤

（5）在设计界面空白处单击鼠标右键，在弹出的快捷菜单中选择“页面属性”，打开“页面属性”对话框，单击左侧“分类”列表中的“标题/编码”选项，然后在“标题”

文本框中输入网页标题“忆达新闻”，并单击“确定”按钮完成设置

（6）保存文档，并在浏览器中预览，可看到浏览器标题栏中的标题为刚刚设置的信息