《网页设计与制作》 教学课件.

Presentation on theme: "《网页设计与制作》 教学课件."— Presentation transcript:

1 《网页设计与制作》 教学课件

2 第4章：页面的整体控制 主要教学环节 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 四、分析操作任务 五、知识讲解与操作示范
六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题

3 （一）课程引导 　　本章主要学习如何设置网页的整体页面属性。

4 （二）明确知识技能目标 （1）了解Dreamweaver 8的参数设置方法 （2）掌握页面属性的设置方法 （3）掌握设置文件头内容的方法
（4）学习辅助工具的使用

5 （三）展示网页浏览效果 网页01.html的页面属性整体设置效果如图所示。

6 （四）分析操作任务 （1）在站点“长沙世界之窗”根目录下创建一个文件夹“01页面控制”，在该文件夹中创建一个命名为“01.html”的网页文档。 （2）设置“首选参数”，具体设置要求见4.1节。 （3）设置网页“01.html”的外观属性、链接属性、标题属性、标题/编码属性，且在浏览器中浏览网页的设置效果。具体设置要求见4.2节。 （4）为网页“01.html”插入关键字和说明。

7 （五）知识讲解与操作示范 4.1 参数设置 1．打开“首选参数”对话框
4.1　参数设置 　　　设置“首选参数”之前先在站点“长沙世界之窗”根目录下创建一个文件夹“01页面控制”，在该文件夹中创建一个命名为“01.html”的网页文档。 　 1．打开“首选参数”对话框 在Dreamweaver 8主窗口中，单击菜单【编辑】→【首选参数】或者使用快捷键“Ctrl+U”，即可打开“首选参数”对话框。 　　 2．参数设置方法 “首选参数”对话框左边的“分类”列表中列出了20种不同的类别，选择一种类后，该类别中所有可用的选项将会显示在对话框的右边参数设置区域。

8 （五）知识讲解与操作示范 3．参数设置举例 （1）设置启动Dreamweaver 8时不再显示起始页。
打开“首选参数”对话框后，在该对话框的左边的“分类”列表中选择“常规”选项，在 右边“文档选项”的“显示起始页”复选框中单击，取消复选框中的选中标记，然后单击【确定】按钮。 （2）设置站点属性“总是显示本地文件于右”。 打开“首选参数”对话框后，在该对话框的左边的“分类”列表中选择“站点”选项，然后在“总是显示”列表项中选择“本地文件”和“右”即可。

9 （五）知识讲解与操作示范 　　 （3）创建网页文档时，设置默认文档为“HTML”文档，设置默认扩展名为“.html”。 　　　 打开 “首选参数”对话框后，在该对话框的左边的“分类”列表中选择“新建文档”选项，然后在右边设置“默认文档”为“HTML”，设置“默认扩展名”为“.html”即可。 （4）设置复制/粘贴属性：使用“编辑>粘贴”从其他应用程序粘贴到设计视图时，复制“带结构的文本及全部格式”。

10 （五）知识讲解与操作示范 4.2 设置页面属性 1．打开“页面属性”对话框
4.2　设置页面属性 1．打开“页面属性”对话框 在Dreamweaver 8主窗口中，单击菜单【修改】→【页面属性】 或者在“属性面板”中单击【页面属性】按钮都可以打开“页面属 性”对话框。 2．设置外观属性 对网页“01.html”外观属性的设置要求如下： （1）“页面字体”设置为“宋体”，“大小”设置为“14px”。 （2）“背景颜色”设置为“#CCFFFF”。 （3）“左边距”和“右边距”设置为“80px”。

11 （五）知识讲解与操作示范 下面根据属性设置要求完成网页“01.html”外观属性的设置 （2）左边“分类”列表中选择“外观”。
（1）打开“页面属性”对话框。 （2）左边“分类”列表中选择“外观”。 （3）从“页面字体”下拉列表框中选择“宋体”作为页面中的 默认文本字体。 （4）在“背景颜色”文本框中可以设置网页的背景颜色 一般情况下，背景颜色都设置成白色，如果不设置背景颜色， 常用的浏览器会默认网页的背景颜色为白色。为了增强网页背景效 果，可以对背景颜色进行设置。

12 （五）知识讲解与操作示范 （5）设置左边距和右边距 在“左边距”文本框中可以设置网页左边空白的宽度，在“右边
距”文本框中可以设置网页右边空白的宽。 （6）设置背景图像 在“页面属性”对话框中也可以设置网页的“背景图像”，其方 法是：在“背景图像文本框中输入网页背景图像的路径和名称。 （7）单击【确定】按钮或者【应用】按钮，完成外观属性的设置 （8）保存网页的属性设置。

13 （五）知识讲解与操作示范 3．设置链接属性 “链接”选项主要对页面的超链接文本的字体、颜色等进行 设置。
对网页“01.html”链接属性的设置要求如下： （1）网页中超链接文本默认状态下的字体设置为“楷体”、 字体大小设置为14px。 （2）网页中超链接文本的颜色设置为“blue”，访问过的超 链接颜色设置为“purple”。 （3）网页中已激活的超链接文本颜色设置为“navy”。 （4）变换图像链接颜色设置为“aqua”（即当鼠标指针移动 到网页中超链接文字上方时超链接的颜色为“aqua”），下划 线样式设置为“仅在变换图像时显示下划线”。

14 （五）知识讲解与操作示范 “标题”选项用于设置网页中各级标题的字体、大小等属 对网页“01.html”标题属性的设置要求如下：
4．设置标题属性 “标题”选项用于设置网页中各级标题的字体、大小等属 性。 对网页“01.html”标题属性的设置要求如下： （1）设置网页中标题的字体为“黑体”。 （2）设置标题1的大小为“24px”，颜色为“black”。

15 （五）知识讲解与操作示范 5．设置标题/编码属性 “标题/编码”选项用于设置网页的标题和文字编码等属 性。
对网页“01.html”标题/编码属性的设置要求如下： （1）网页的标题设置为“长沙世界之窗”。 （2）文档类型设置为“HTML 4.0 Transitional”，编码设置为“简体中文(GB2312)”。

16 （五）知识讲解与操作示范 4.3 设置文件头内容 4.3.1 在设计视图中显示“文件头内容”的工具栏
4.3　设置文件头内容 4.3.1　在设计视图中显示“文件头内容”的工具栏 在Dreamweaver 8主窗口中，单击菜单【查看】→ 【文件头内容】，这样文件头内容工具栏便会出现在设计 视图的上部。

17 （五）知识讲解与操作示范 4.3.2 设置文件头内容的方法 1.设置META
4.3.2　设置文件头内容的方法 1.设置META （1）“插入”工具栏切换到“HTML”类型，然后在“文件头”下拉菜单中单击【META】按钮。打开“META”对话框，接下来在该对话框中进行参数设置。 （2）该对话框中的属性设置完成后，单击【确定】按钮。 2.插入关键字 “插入”工具栏切换到“HTML”类型，然后在“文件头”下拉菜 单中单击【关键字】按钮，打开“关键字”对话框。在该对话框中输入关键字如“长沙，旅游，世界之窗”

18 （五）知识讲解与操作示范 3．插入说明 许多搜索引擎可以读取描述Meta标记的内容，插入说明的方法与插入关键字相似，在“HTML”插入工具栏的“文件头”下拉菜单中单击【说明】按钮，弹出“说明”对话框在该对话框中输入对页面的说明信息即可。 4．设置链接 “链接”可以定义当前网页和本地站点中另一个网页之间的关系，让其他网页提供给当前网页文件相关的资源和信息。

19 （六）课堂实践 1．操作要求 打开“课堂实践”站点文件夹“01页面控制”下的网页文档。 “01.html”，然后完成以下各项的操作。
　 打开“课堂实践”站点文件夹“01页面控制”下的网页文档。 “01.html”，然后完成以下各项的操作。 （1）首选参数的设置要求 设置启动Dreamweaver 8时显示起始页；设置站点属性“总是显示本地文件于左”；创建网页文档时，设置默认文档为“HTML”文档，设置默认扩展名为“.html”；设置“复制/粘贴”属性：使用“编辑>粘贴”从其他应用程序粘贴到设计视图时，复制“带结构的文本”，不清理Word段落间距。

20 （六）课堂实践 （2）页面属性的设置要求 外观属性的设置 “页面字体”采用“默认字体”； “大小”采用“12px”；
“背景图像”选用image文件夹下的bj01.jpg”； “左边距”和“右边距”设置为“100px”； “上边距”和“下边距”设置为“20px”。

21 （六）课堂实践 （3）链接属性的设置要求 网页中超链接文本默认状态下的字体设置为“宋体”，字体大小设置为14px；网页中超链接文本的颜色设置为“blue”，访问过的超链接的颜色设置为“olive”；当鼠标指针移动到网页中超链接文字上方时超链接的颜色设置为“maroon”，下划线样式设置为“变换图像时隐藏下划线”；网页中已激活的超链接文本颜色设置“fuchsia”。

22 （六）课堂实践 （4）标题属性的设置要求 设置网页中标题的字体为“隶书”，标题1的大小为“18px”，颜色为“aqua”。
（5）“标题/编码”属性的设置要求 网页的标题设置为“湘江谷”；文档类型设置为“HTML 4.0 Transitional”，编码设置为“简体中文(GB2312)”。

23 （六）课堂实践 2．制作要点提示 （1）参数设置在“首选参数”对话框中进行，单击菜单【编辑】→【首选参数】或者使用快捷键“Ctrl+U”，即可打开“首选参数”对话框。 （2）页面属性设置在“页面属性”对话框中进行，单击菜单【修改】→【页面属性】或在“属性面板”中单击【页面属性】按钮都可以打开“页面属性”对话框。

24 1．在“学院网站”站点的文件夹“01页面控制”中创建一个网页文档，命名为“01.html”。
(七)课外拓展实践 　　1．在“学院网站”站点的文件夹“01页面控制”中创建一个网页文档，命名为“01.html”。 2．对网页01.html设置首选参数、设置页面属性、设置文件头内容。

25 （八）归纳总结 性，如何设置文件头内容，辅助工具如何使用。这些设置 都是从外观上对页面进行有效控制，方便网页的制作和浏
　　 本章主要讲解了如何设置首选参数，如何设置页面属 性，如何设置文件头内容，辅助工具如何使用。这些设置 都是从外观上对页面进行有效控制，方便网页的制作和浏 览。页面整体控制的方法，除了设置常规的背景颜色、背 景图片等属性之外，Dreamweaver 8 还有辅助线、缩放等 常用且必备的功能，掌握好这些基本工具的使用，有助于 我们更好的制作网页。