03单元3制作图文混排网页1

单元3 制作图文混排网页

【教学导航】

（1）学会通过“管理站点”对话框创建站点 （2）学会通过【文件】面板创建网页 （3）掌握设置页面背景图像的方法 教学目标 （4）掌握在网页中插入图像的方法 （5）掌握在网页中插入鼠标经过图像的方法 （6）掌握设置图像属性的方法 （7）掌握制作图文混排网页的技巧 （1）设置页面背景图像 本单元重点 （2）在网页中插入图像 （3）设置图像属性 本单元难点 教学方法 课时建议 （1）应用“管理站点”对话框创建站点 （2）插入鼠标经过图像 任务驱动法、分组讨论法、四步训练法 6课时（含课堂同步训练） 【操作准备】

（1）创建所需的文件夹，拷贝所需的资源 （2）启动Dreamweaver CS6

【引导训练】

【任务3-1】制作介绍中国瀑布的图文混排网页

本单元“引导训练”的任务卡如表3-1所示。

表3-1 单元3“引导训练”任务卡

任务编号 网页主题 3-1 任务名称 瀑布游 制作介绍中国瀑布的图文混排网页 计划工时 120min （1）应用【管理站点】对话框创建站点“单元3” （2）应用【文件】面板新建网页“0301.html” 网页制作任务描述 （3）设置网页的背景图像 （4）将Word文档“瀑布之美.doc”导入到网页“0301.html”中 （5）设置网页中文本的格式 （6）在网页中插入多幅图像 任务驱动式网页制作实用教程 （7）在网页中插入鼠标经过图像 （8）设置图像属性 网页布局结构分析 网页色彩搭配分析 网页组成元素分析 任务实现流程分析 页面自然布局、无导航栏 文本主体颜色：#000000，其他文本颜色：#0000FF、#00FFFF、#FF0000 主要包括图像、鼠标经过图像、标题文本、正文文本等网页元素 创建站点→新建网页→设置页面背景图像→导入Word文档→插入图像→设置图像属性→插入鼠标经过图像且设置其属性→预览网页效果 原始文件位置：start\\Unit03\\task03-1 最终文件位置：result\\Unit03\\task03-1 配盘素材导引 本单元“引导训练”的任务跟踪卡如表3-2所示。 表3-2 单元3“引导训练”任务跟踪卡

任务编号 开始时间 完成时间 计划工时 实际工时 当前状态 网页0301.html的浏览效果如图3-1所示。 图3-1 图文混排网页的浏览效果

【任务3-1-1】使用“管理站点”对话框创建站点“单元3”

【任务描述】

使用【管理站点】对话框创建1个名称为“单元3”的本地站点，站点文件夹为“Unit03”。

【任务实施】

（1）打开【管理站点】对话框

在Dreamweaver CS6的主界面，选择命令【站点】→【管理站点】，打开【管理站点】

50

单元3 制作图文混排网页

对话框。

（2）打开【站点设置对象】对话框

在【管理站点】对话框中单击【新建站点】按钮对话框。

，打开【站点设置对象】

在【管理站点】对话框“站点名称”文本框中输入站点名称“单元3”，在“本地站点文件夹”文本框中输入完整的路径名称“D:\\网页设计与制作案例\\Unit03\\task03-1\\”。

在【站点设置对象】对话框中单击【保存】按钮，保存创建的站点，返回【管理站点】对话框。

在【管理站点】对话框中单击【完成】按钮，新建站点便完成。

【任务3-1-2】应用“文件”面板新建网页“0301.html”

【任务描述】

应用【文件】面板在站点“单元3”中新建1个网页文档“0301.html”。

【任务实施】

（1）打开【文件】面板 （2）新建网页文档

在【文件】面板中站点“单元3”的文件夹“task03-1”上单击右键，在弹出的快捷菜单中单击【新建文件】菜单项。然后输入新的网页文档名称“0301.html”，按回车键确认。

【任务3-1-3】设置页面的背景图像

【任务描述】

设置网页“0301.html”的背景图像为“bg01.gif”。

【任务实施】

（1）打开新建的网页文档“0301.html”

（2）设置网页的背景图像

单击【属性】面板上的【页面属性】按钮，打开【页面属性】对话框，在【页面属性】对话框中“外观（CSS）”属性组中单击背景图像文本框右侧的【浏览】按钮，弹出【选择图像源文件】对话框，在该对话框中搜索到所要设置的背景图像文件“bg01.gif”。

接着单击【确定】按钮，返回【页面属性】对话框。然后单击【页面属性】对话框中的【确定】按钮，这样就为网页设置了所需的背景图像。

【任务3-1-4】从外部导入文本与设置文本格式

【任务描述】

51

任务驱动式网页制作实用教程

（1）将Word文档“瀑布之美.doc”导入到网页“0301.html”中。 （2）将网页“0301.html”的标题设置为“瀑布之美”。

（3）将网页“0301.html”中文本标题“瀑布之美”的字体设置为“黑体”，大小设置为“18像素”，颜色设置为“#0000FF”，对齐方式设置为“居中对齐”，样式名称为“style1”。

（4）将网页“0301.html”中文本“推荐度：”的字体设置为“仿宋_GB2312”，大小设置为“16像素”，颜色设置为“#00FFFF”，样式名称命名为“style2”。

（5）将网页“0301.html”中文本“★★★★”的字体设置为“楷体_GB2312”，大小设置为“14像素”，颜色设置为“#FF0000”，样式名称命名为“style3”。

（6）将网页“0301.html”中小标题“黄果树瀑布群”和“庐山的三叠泉瀑布”的大小设置为“16像素”，对齐方式设置为“左对齐”，且设置为“粗体”，样式名称命名为“style4”。

（7）将小标题“黄山的百丈瀑”的大小设置为“16像素”，对齐方式设置为“右对齐”，且设置为“粗体”，样式名称命名为“style5”。

（8）将网页“0301.html”中正文文本的字体设置为“宋体”，大小设置为“14像素”，样式名称命名为“style6”。

【任务实施】

（1）准备Word文档

（2）打开【导入 Word 文档】对话框 （3）导入文本

（4）设置网页“0301.html”的文本格式 以类似的方法将页面文本“推荐度：”的字体设置为“仿宋_GB2312”，大小设置为“16像素”，颜色设置为“#00FFFF”，样式的名称命名为“style2”。

以类似的方法将页面文本“★★★★”的字体设置为“楷体_GB2312”，大小设置为“14像素”，颜色为“#FF0000”，样式的名称命名为“style3”。

以类似的方法将页面小标题“黄果树瀑布群”的大小设置为“16像素”，对齐方式设置为“左对齐”，且设置为“粗体”，样式的名称命名为“style4”。

选择另1个小标题“庐山的三叠泉瀑布”，在CSS【属性】面板的“目标规则”列表框中选择“style4”，即可应用该样式的属性设置。

将页面小标题“黄山的百丈瀑”的大小设置为“16像素”，对齐方式设置为“右对齐”，且设置为“粗体”，样式的名称命名为“style5”。

将页面正文文本的字体设置为“宋体”，大小设置为“14像素”，样式的名称命名为“style6”，所有的正文文本都应用该样式。

（5）设置网页标题

在【文档】工具栏的“标题”文本框中输入网页的标题“瀑布之美”。 （6）保存网页

单击【标准】工具栏中的【保存】按钮或【全部保存】按钮，保存网页的属性设置。

（7）预览网页效果

【任务3-1-5】插入图像与设置图像属性

【任务描述】

52

单元3 制作图文混排网页

（1）在网页“0301.html”中插入图像p01.jpg，且设置其属性：宽为120，高为80，替换文本为“黄果树瀑布群”，垂直边距为15，水平边距为10，对齐方式为“左对齐”。

（2）在网页“0301.html”中插入图像“p02.jpg”，且设置其属性：宽为120，高为100，替换文本为“黄山的百丈瀑”，垂直边距为10，水平边距为5，对齐方式为“右对齐”。

（3）在网页“0301.html”中插入图像“p03.jpg”，且设置其属性：宽为120，高为100，替换文本为“庐山的三叠泉瀑布”，垂直边距为15，水平边距为10，对齐方式为“左对齐”。

【任务实施】

（1）插入第1幅图像

（2）设置第1幅图像的属性 （3）插入第2幅图像

（4）设置第2幅图像的属性 （5）插入第3幅图像

（6）设置第3幅图像的属性

（7）保存网页中插入的图像和设置的图像属性

【任务3-1-6】插入鼠标经过图像及设置其属性

【任务描述】

（1）在网页“0301.html”中插入鼠标经过图像，原始图像为“c01.jpg”，鼠标经过图像为“c02.jpg”，替换文本为“瀑布之美”。

（2）设置鼠标经过图像的属性：宽为200，高为120，垂直边距为10，边框为2，对齐方式为“底部”。

【任务实施】

（1）插入鼠标经过图像

（2）设置鼠标经过图像的属性

（3）保存网页中插入的鼠标经过图像及其属性设置 （4）按F12浏览图文混排网页的效果。

【引导训练考核评价】

本单元“引导训练”的考核评价内容如表3-3所示。

表3-3 单元3“引导训练”考核评价表

考核内容 （1）能应用【文件】面板新建网页文档 考核要点 （2）能正确设置页面的背景图像 （3）会从外部导入文本并能熟练设置文本的格式 0.5 1 标准分 0.5 计分 53

本文来源：https://www.bwwdw.com/article/sgah.html