单元页面的整体控制.ppt

主讲人：烟台南山学院　樊春利 《网页设计与制作》教学课件 教学单元4：页面的整体控制 主要教学环节 五、知识讲解与操作示范 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 四、分析操作任务 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题 （一）课程引导 　　本章主要学习如何设置网页的整体页面属性。 （二）明确知识技能目标 （1）了解Dreamweaver 8的参数设置方法 （2）掌握页面属性的设置方法 （3）掌握设置文件头内容的方法 （4）学习辅助工具的使用 （三）展示网页浏览效果 2．网页01.html的页面属性整体设置效果如图所示。 1．预览网页 （四）分析操作任务 （1）在站点“长沙世界之窗”根目录下创建一个文件夹“01页面控制”，在该文件夹中创建一个命名为“01.html”的网页文档。 （2）设置“首选参数”，具体设置要求见4.1节。 （3）设置网页“01.html”的外观属性、链接属性、标题属性、标题/编码属性，且在浏览器中浏览网页的设置效果。具体设置要求见4.2节。 （4）为网页“01.html”插入关键字和说明。 （五）知识讲解与操作示范 4.1　参数设置 　　　设置“首选参数”之前先在站点“长沙世界之窗”根目录下创建一个文件夹“01页面控制”，在该文件夹中创建一个命名为“01.html”的网页文档。 　 1．打开“首选参数”对话框 在Dreamweaver 8主窗口中，单击菜单【编辑】→【首选参数】或者使用快捷键“Ctrl+U”，即可打开“首选参数”对话框。 　　 2．参数设置方法 “首选参数”对话框左边的“分类”列表中列出了20种不同的类别，选择一种类后，该类别中所有可用的选项将会显示在对话框的右边参数设置区域。 （五）知识讲解与操作示范 4.1　参数设置 3．参数设置举例 （1）设置启动Dreamweaver 8时不再显示起始页。 打开“首选参数”对话框后，在该对话框的左边的“分类”列表中选择“常规”选项，在 右边“文档选项”的“显示起始页”复选框中单击，取消复选框中的选中标记，然后单击【确定】按钮。 （2）设置站点属性“总是显示本地文件于右”。 打开“首选参数”对话框后，在该对话框的左边的“分类”列表中选择“站点”选项，然后在“总是显示”列表项中选择“本地文件”和“右”即可。 （五）知识讲解与操作示范 　　4.1　参数设置 　 （3）创建网页文档时，设置默认文档为“HTML”文档，设置默认扩展名为“.html”。 　　　 打开“首选参数”对话框后，在该对话框的左边的“分类”列表中选择“新建文档”选项，然后在右边设置“默认文档”为“HTML”，设置“默认扩展名”为“.html”即可。 （4）设置复制/粘贴属性：使用“编辑粘贴”从其他应用程序粘贴到设计视图时，复制“带结构的文本及全部格式”。 （五）知识讲解与操作示范（2） 4.2　设置页面属性 1．打开“页面属性”对话框 在Dreamweaver 8主窗口中，单击菜单【修改】→【页面属 性】或者在“属性面板”中单击【页面属性】按钮都可以打开“页面属性”对话框。 2．设置外观属性 对网页“01.html”外观属性的设置要求如下： （1）“页面字体”设置为“宋体”，“大小”设置为“14px”。 （2）“背景颜色”设置为“#CCFFFF”。 （3）“左边距”和“右边距”设置为“80px”。 下面根据属性设置要求完成网页“01.html”外观属性的设置。 （五）知识讲解与操作示范（2） 　 4.2　设置页面属性 　 （1）打开“页面属性”对话框。 （2）左边“分类”列表中选择“外观”。 （3）从“页面字体”下拉列表框中选择“宋体”作为页面中的默认文本字体。 （4）在“背景颜色”文本框中可以设置网页的背景颜色 一般情况下，背景颜色都设置成白色，如果不设置背景颜色，常用的浏览器也会默认网页的背景颜色为白色。为了增强网页背景效果，可以对背景颜色进行设置。 （5）设置左边距和右边距 在“左边距”文本框中可以设置网页左边空白的宽度，在“右边距”文本框中可以设置网页右边空白的宽。 （五）知识讲解与操作示范（2） 　 4.2　设置页面属性 （6）设置背景图像 在“页面属性”对话框中也可以设置网页的“背景图像”，其方法是：在“背景图像文本框中输入网页背景图