网页设计与制作案例教程-电子教案4

第4章页面的整体控制本章主要学习如何设置网页的整体页面属性。课程引导（1）了解Dreamweaver8的参数设置方法（2）掌握页面属性的设置方法（3）掌握设置文件头内容的方法（4）学习辅助工具的使用知识技能目标站点效果展示网页01.html的页面属性整体设置效果如图所示。图4-1网页01.html的页面整体设置效果（1）在站点“长沙世界之窗”根目录下创建一个文件夹“01页面控制”，在该文件夹中创建一个命名为“01.html”的网页文档。（2）设置“首选参数”，具体设置要求见4.1节。（3）设置网页“01.html”的外观属性、链接属性、标题属性、标题/编码属性，且在浏览器中浏览网页的设置效果。具体设置要求见4.2节。（4）为网页“01.html”插入关键字和说明。本章操作任务4.1参数设置4.2设置页面属性4.3设置文件头内容4.1参数设置设置“首选参数”之前先在站点“长沙世界之窗”根目录下创建一个文件夹“01页面控制”，在该文件夹中创建一个命名为“01.html”的网页文档。在Dreamweaver8主窗口中，单击菜单【编辑】→【首选参数】或者使用快捷键“Ctrl+U”，即可打开“首选参数”对话框。1．打开“首选参数”对话框“首选参数”对话框左边的“分类”列表中列出了20种不同的类别，选择一种类别后，该类别中所有可用的选项将会显示在对话框的右边参数设置区域。2．参数设置方法（1）设置启动Dreamweaver8时不再显示起始页。打开“首选参数”对话框后，在该对话框的左边的“分类”列表中选择“常规”选项，在右边“文档选项”的“显示起始页”复选框中单击，取消复选框中的选中标记，然后单击【确定】按钮。下次启动Dreamweaver8时将不再显示起始页。3．参数设置举例（2）设置站点属性“总是显示本地文件于右”。打开“首选参数”对话框后，在该对话框的左边的“分类”列表中选择“站点”选项，然后在“总是显示”列表项中选择“本地文件”和“右”即可。（4）设置复制/粘贴属性：使用“编辑粘贴”从其他应用程序粘贴到设计视图时，复制“带结构的文本及全部格式”。4.2设置页面属性1．打开“页面属性”对话框在Dreamweaver8主窗口中，单击菜单【修改】→【页面属性】或者在“属性面板”中单击【页面属性】按钮都可以打开“页面属性”对话框。2．设置外观属性对网页“01.html”外观属性的设置要求如下：（1）“页面字体”设置为“宋体”，“大小”设置为“14px”。（2）“背景颜色”设置为“#CCFFFF”。（3）“左边距”和“右边距”设置为“80px”。下面根据属性设置要求完成网页“01.html”外观属性的设置。（1）打开“页面属性”对话框。（2）左边“分类”列表中选择“外观”。（3）从“页面字体”下拉列表框中选择“宋体”作为页面中的默认文本字体。（4）在“背景颜色”文本框中可以设置网页的背景颜色一般情况下，背景颜色都设置成白色，如果不设置背景颜色，常用的浏览器也会默认网页的背景颜色为白色。为了增强网页背景效果，可以对背景颜色进行设置。（5）设置左边距和右边距在“左边距”文本框中可以设置网页左边空白的宽度，在“右边距”文本框中可以设置网页右边空白的宽.（6）设置背景图像在“页面属性”对话框中也可以设置网页的“背景图像”，其方法是：在“背景图像”文本框中输入网页背景图像的路径和名称。（7）单击【确定】按钮或者【应用】按钮，完成外观属性的设置。（8）保存网页的属性设置。3．设置链接属性“链接”选项主要对页面的超链接文本的字体、颜色等进行设置。对网页“01.html”链接属性的设置要求如下：（1）网页中超链接文本默认状态下的字体设置为“楷体”、字体大小设置为14px。（2）网页中超链接文本的颜色设置为“blue”，访问过的超链接颜色设置为“purple”。（3）网页中已激活的超链接文本颜色设置为“navy”。（4）变换图像链接颜色设置为“aqua”（即当鼠标指针移动到网页中超链接文字上方时超链接的颜色为“aqua”），下划线样式设置为“仅在变换图像时显示下划线”。下面根据属性设置要求完成网页“01.html”链接属性的设置。（1）打开“页面属性”对话框。（2）左边“分类”列表中选择“链接”。（3）在“链接字体”列表框中选择“楷体”，如果字体下拉列表框中没有列出所需的字体，可以单击最后一项“编辑字体列表…”，添加所需的字体。（4）在“大小”列表框中选择“14”，单位默认为“像素(px)”。（5）在“链接颜色”文本框中输入“blue”。（6）在“已访问链接”文本框中输入“purple”。（7）在“活动链接”文本框中输入“navy”。（8）在“变换图像链接”文本框中输入“aqua”。（9）在“下划线样式”列表框中选择“仅在变换图像时显示下划线”。（10）单击【确定】按钮或者【应用】按钮，完成链接属性的设置。（11）保存网页的属性设置。“标题”选项用于设置网页中各级标题的字体、大小等属性。对网页“01.html”标题属性的设置要求如下：（1）设置网页中标题的字体为“黑体”。（2）设置标题1的大小为“24px”，颜色为“black”。4．设置标题属性“标题”选项用于设置网页中各级标题的字体、大小等属性。对网页“01.html”标题属性的设置要求如下：（1）设置网页中标题的字体为“黑体”。（2）设置标题1的大小为“24px”，颜色为“black”。（3）在“标题1”的“大小”列表框中选择“24”，单位默认为“像素(px)”，颜色文本框中输入“black”。（5）单击【确定】按钮或者【应用】按钮，完成标题属性的设置。（6）保存网页的属性设置。“标题/编码”选项用于设置网页的标题和文字编码等属性。对网页“01.html”标题/编码属性的设置要求如下：（1）网页的标题设置为“长沙世界之窗”。（2）文档类型设置为“HTML4.0Transitional”，编码设置为“简体中文(GB2312)”。5．设置标题/编码属性下面根据属性设置要求完成网页“01.html”标题/编码属性的设置。（1）打开“页面属性”对话框，左边“分类”列表中选择“标题/编码”。（2）在“标题”文本框中输入“长沙世界之窗”。（3）在“文档类型”列表框中选择“HTML4.0Transitional”。（4）在“编码”列表框中选择“简体中文(GB2312)”，将网页的文字编码设置成中文。（5）单击【确定】按钮或者【应用】按钮，完成“标题/编码”属性的设置。（6）保存网页的属性设置。4.3设置文件头内容对网页“01.html”文件头内容的设置要求如下：（1）设置网页“01.html”的文字编码为“简体中文”。（2）为网页“01.html”插入关键字“长沙”、“旅游”、“世界之窗”。下面根据文件头内容的设置要求完成网页“01.html”文件头内容属性的设置。如果网页处于关闭状态，先打开网页“01.html”。4.3.1在设计视图中显示“文件头内容”的工具栏在Dreamweaver8主窗口中，单击菜单【查看】→【文件头内容】，这样文件头内容工具栏便会出现在设计视图的上部。4.3.2设置文件头内容的方法设置Meta的步骤如下：（1）“插入”工具栏切换到“HTML”类型，然后在“文件头”下拉菜单中单击【META】按钮。打开“META”对话框，接下来在该对话框中进行参数设置。（2）该对话框中的属性设置完成后，单击【确定】按钮。1．设置META插入关键字的步骤如下：“插入”工具栏切换到“HTML”类型，然后在“文件头”下拉菜单中单击【关键字】按钮，打开“关键字”对话框，在该对话框中输入关键字“长沙，旅游，世界之窗”即可。2．插入关键字许多搜索引擎可以读取描述Meta标记的内容，插入说明的方法与插入关键字相似，在“HTML”插入工具栏的“文件头”下拉菜单中单击【说明】按钮，弹出“说明”对话框，在该对话框中输入对页面的说明信息即可。3．插入说明“链接”可以定义当前网页和本地站点中另一个网页之间的关系，让其他网页提供给当前网页文件相关的资源和信息。4．设置链接★课堂实践★1．操作要求打开“课堂实践”站点文件夹“01页面控制”下的网页文档“01.html”，然后完成以下各项的操作。（1）首选参数的设置要求设置启动Dreamweaver8时显示起始页；设置站点属性“总是显示本地文件于左”；创建网页文档时，设置默认文档为“HTML”文档，设置默认扩展名为“.html”；设置“复制/粘贴”属性：使用“编辑粘贴”从其他应用程序粘贴到设计视图时，复制“带结构的文本”，不清理Word段落间距。（2）页面属性的设置要求外观属性的设置“页面字体”采用“默认字体”，“大小”采用“12px”；“背景图像”选用image文件夹下的“bj01.jpg”；“左边距”和“右边距”设置为“100px”，“上边距”和“下边距”设置为“20px”。链接属性的设置要求网页中超链接文本默认状态下的字体设置为“宋体”，字体大小设置为14px；网页中超链接文本的颜色设置为“blue”，访问过的超链接的颜色设置为“olive”；当鼠标指针移动到网页中超链接文字上方时超链接的颜色设置为“maroon”，下划线样式设置为“变换图像时隐藏下划线”；网页中已激活的超链接文本颜色设置为“fuchsia”。标题属性的设置要求设置网页中标题的字体为“隶书”，标题1的大小为“18px”，颜色为“aqua”。“标题/编码”属性的设置要求网页的标题设置为“湘江谷”；文档类型设置为“HTML4.0Transitional”，编码设置为“简体中文(GB2312)”。（1）参数设置在“首选参数”对话框中进行，单击菜单【编辑】→【首选参数】或者使用快捷键“Ctrl+U”，即可打开“首选参数”对话框。2．制作要点提示（2）页面属性设置在“页面属性”对话框中进行，单击菜单【修改】→【页面属性】或者在“属性面板”中单击【页面属性】按钮都可以打开“页面属性”对话框。★课外拓展实践★1．在“湖铁职院学院网站”站点的文件夹“01页面控制”中创建一个网页文档，命名为“01.html”。2．对网页01.html设置首选参数、设置页面属性、设置文件头内容。★本章小结★本章主要讲解了如何设置首选参数，如何设置页面属性，如何设置文件头内容，辅助工具如何使用。这些设置都是从外观上对页面进行有效控制，方便网页的制作和浏览。页面整体控制的方法，除了设置常规的背景颜色、背景图片等属性之外，Dreamweaver8还有辅助线、缩放等常用且必备的功能，掌握好这些基本工具的使用，有助于我们更好的制作网页。