任务2 页面的属性设置

任务说明

本任务将制作含有背景颜色、背景图像的网页，最终效果如下图所示。

任务目标

通过本任务的学习，读者能够掌握如何添加页面字体，如何设置背景颜色和背景图像，如何制作页面刷新效果。

实训步骤

（1）在D盘创建文件夹website，将文件夹D：\website作为本任务的本地根目录，并以此建立Dreamweaver站点webpage，在站点中新建三个页面0102a.html、0102b.html和0102c.html，并将图片素材复制到站点，如图1-2-1所示。

（2）双击0102a.html，在Dreamweaver的文档编辑区中打开该文档，并点击文档编辑区中的按钮，使用“拆分”编辑模式显示“代码”视图和“设计”视图，如图1-2-2所示。

（3）在文档编辑区的“标题”输入框中输入“网页的背景颜色设置”，然后按回车键确认输入的内容，如图1-2-3所示。同时在代码视图中可以看到如图1-2-4所示的HTML代码内容。保存页面，点击文档编辑区的按钮，在所选择的浏览器中浏览网页效果（或直接按F12打开Internet Explorer进行页面浏览，本书使用Internet Explorer 9进行页面浏览）。在打开的Internet Explorer窗口中，可以在标题栏位置看到刚才输入的文字内容“网页的背景颜色设置”，如图1-2-5所示。

提示：如果页面有进行编辑修改操作，那么在文档编辑区的页面名称标签中将会出现标识“*”，如。保存页面后，标识“*”将会消失。

（4）在0102a.html的“设计”视图中输入文字内容“网页制作实训教程”，然后点击“属性”面板（可以执行“窗口—属性”命令打开“属性”面板）的按钮，打开“页面属性”对话框，执行“分类—外观（CSS）”命令，对页面的外观进行设置，如图1-2-6所示。

（5）单击“默认字体”右侧的按钮，在弹出的菜单中选择“编辑字体列表”命令，弹出“编辑字体列表”对话框。在“可用字体”列表框中选择“华文仿宋”，单击按钮将其添加到字体列表中，如图1-2-7所示。单击按钮，并重复上面的操作加入其他字体，完成后单击“确定”按钮。

（6）在“外观（CSS）”对话框中，页面字体选择“华文仿宋”，单击按钮设置字体加粗效果，单击按钮设置字体倾斜效果，字体大小选择“36px”，文本颜色选择“红色”（＃F00），背景颜色选择“蓝色”（＃00F），如图1-2-8所示。然后单击“确定”按钮，0102a.html在文档编辑区域中的效果如图1-2-9所示。

提示：在“外观（CSS）”对话框中设置的字体效果对整个页面的字体均起作用，如果只需要设置部分字体的效果，则不适合使用该方法。

（7）执行“插入面板—常用—文件头—刷新”命令，弹出“刷新”对话框，“延迟”时间输入“3”秒，“转到URL”选择“0102b.html”，如图1-2-10所示，然后点击“确定”按钮。至此，完成0102a.html的制作，保存0102a.html，按F12打开Internet Explorer进行页面浏览。

（8）打开Internet Explorer浏览0102a.html，如图1-2-11所示。点击图1-2-12中的按钮，可以允许脚本或ActiveX控件在此网页中运行。

提示：允许脚本或ActiveX控件在网页中运行可以通过更改Internet Explorer的设置进行统一操作。步骤如下：Internet Explorer工具—Internet选项—高级—勾选“允许活动内容在我的计算机上的文件中运行”，如图1-2-13所示。

（9）双击0102b.html，在Dreamweaver的文档编辑区中打开该文档，并点击文档编辑区中的按钮，使用“设计”编辑模式显示“设计”视图。

（10）在文档编辑区的“标题”输入框中输入“网页的背景图像设置”，然后按回车键确认输入的内容，如图1-2-14所示。

（11）点击“属性”面板上的“页面属性”按钮，弹出“页面属性”对话框。执行“分类—外观（CSS）”命令，在“外观（CSS）”对话框中，“背景图像”选择站点根目录的子文件夹images的图片bg.jpg，如图1-2-15所示。然后单击“确定”按钮，0102b.html在文档编辑区域中的效果如图1-2-16所示。至此，完成0102b.html的制作，保存0102b.html，按F12打开Internet Explorer进行页面浏览，如图1-2-17所示。

提示：在“外观（CSS）”对话框中，可以通过“重复”选项对背景图像的显示效果进行设置。选择“no-repeat”，背景图像不重复显示；选择“repeat”，背景图像重复显示；选择“repeat-x”，背景图像横向重复显示；选择“repeat-y”，背景图像纵向重复显示。

（12）除了可以在“外观（CSS）”对话框中对页面的背景颜色、背景图像、文本颜色等进行设置外，还可以通过“外观（HTML）”对话框进行设置，如图1-2-18所示。两个方法制作的页面效果是一样的，只是在页面代码方面有区别。以设置页面背景颜色为例，通过“外观（CSS）”设置背景颜色，则页面代码如图1-2-19所示；通过“外观（HTML）”设置背景颜色，则页面代码如图1-2-20所示。

（13）双击0102c.html，在Dreamweaver的文档编辑区中打开该文档，并点击文档编辑区中的按钮，使用“设计”编辑模式显示“设计”视图。

（14）在文档编辑区的“标题”输入框中输入“同时设置背景颜色与背景图像”，然后按回车键确认输入的内容，如图1-2-21所示。同时，在页面中输入文字内容：“使用透明的GIF格式图片bg2.gif作为页面的背景图像，同时设置页面的背景颜色，那么背景颜色将会透过GIF图片的透明部分显示出来，背景颜色与背景图像同时生效。”

（15）点击“属性”面板上的“页面属性”按钮，弹出“页面属性”对话框。执行“分类—外观（CSS）”命令，在“外观（CSS）”对话框中，“页面字体”选择“宋体”，“大小”选择“36px”，“背景颜色”选择“＃FC0”，“背景图像”选择站点根目录的子文件夹images的图片bg2.gif，如图1-2-22所示。然后单击“确定”按钮，0102c.html在文档编辑区域中的效果如图1-2-23所示。至此，完成0102c.html的制作，保存0102c.html，按F12打开Internet Explorer进行页面浏览，如图1-2-24所示。

（16）至此，本任务完成。

拓展练习

创建一个页面，页面标题为“春节快乐”，在页面上添加文字内容“新春大吉”，文字内容设置为红色、隶书、加粗，同时添加能够展现春节气氛的图片作为页面背景。