03单元3制作图文混排网页 网页设计与制作.pptVIP

网页设计与制作任务驱动式教程　陈承欢 网页设计与制作 任务驱动式教程 单元3　制作图文混排网页 教学环节 【教学导航 】 1 【操作准备 】 2 【引导训练/引导训练考核评价】 3 【同步训练 /同步训练考核评价】 4 【拓展训练 /拓展训练考核评价】 5 【教学导航】 （1）设置页面背景图像 （2）在网页中插入图像 （3）设置图像属性 本单元重点 （1）应用“管理站点”对话框创建站点 （2）插入鼠标经过图像 本单元难点 任务驱动法、分组讨论法、四步训练法（操作准备－引导训练－同步训练－拓展训练） 教学方法 6课时（含考核评价） 课时建议 （1）学会通过“管理站点”对话框创建站点 （2）学会通过【文件】面板创建网页 （3）掌握设置页面背景图像的方法 （4）掌握在网页中插入图像的方法 （5）掌握在网页中插入鼠标经过图像的方法 （6）掌握设置图像属性的方法 （7）掌握制作图文混排网页的技巧 教学目标 【操作准备】 （1）创建所需的文件夹，拷贝所需的资源 （2）启动Dreamweaver CS6 【引导训练】 【任务3-1】制作介绍中国瀑布的图文混排网页 本单元“引导训练”的任务卡如表3-1所示。 【引导训练】 【任务3-1】制作介绍中国瀑布的图文混排网页 网页0301.html的浏览效果如图3-1所示。 图3-1　图文混排网页的浏览效果 【引导训练】 使用【管理站点】对话框创建1个名称为“单元3”的本地站点，站点文件夹为“Unit03”。 【任务描述】 【任务3-1-1】使用“管理站点”对话框创建站点“单元3” 【任务实施】 （1）打开【管理站点】对话框 在Dreamweaver CS6的主界面，选择命令【站点】→【管理站点】，打开【管理站点】对话框。 （2）打开【站点设置对象】对话框 在【管理站点】对话框中单击【新建站点】按钮，打开【站点设置对象】对话框。 在【管理站点】对话框“站点名称”文本框中输入站点名称“单元3”，在“本地站点文件夹”文本框中输入完整的路径名称“D:\网页设计与制作案例\Unit03\task03-1\”。 在【站点设置对象】对话框中单击【保存】按钮，保存创建的站点，返回【管理站点】对话框。 在【管理站点】对话框中单击【完成】按钮，新建站点便完成。 【引导训练】 应用【文件】面板在站点“单元3”中新建1个网页文档“0301.html”。 【任务描述】 【任务3-1-2】应用“文件”面板新建网页“0301.html” 【任务实施】 （1）打开【文件】面板 （2）新建网页文档 在【文件】面板中站点“单元3”的文件夹“task03-1”上单击右键，在弹出的快捷菜单中单击【新建文件】菜单项。然后输入新的网页文档名称“0301.html”，按回车键确认。 【引导训练】 设置网页“0301.html”的背景图像为“bg01.gif”。 【任务描述】 【任务3-1-3】设置页面的背景图像 【任务实施】 （1）打开新建的网页文档“0301.html” （2）设置网页的背景图像 单击【属性】面板上的【页面属性】按钮，打开【页面属性】对话框，在【页面属性】对话框中“外观（CSS）”属性组中单击背景图像文本框右侧的【浏览】按钮，弹出【选择图像源文件】对话框，在该对话框中搜索到所要设置的背景图像文件“bg01.gif”。 接着单击【确定】按钮，返回【页面属性】对话框。然后单击【页面属性】对话框中的【确定】按钮，这样就为网页设置了所需的背景图像。 【引导训练】 （1）将Word文档“瀑布之美.doc”导入到网页“0301.html”中。 （2）将网页“0301.html”的标题设置为“瀑布之美”。 （3）将网页“0301.html”中文本标题“瀑布之美”的字体设置为“黑体”，大小设置为“18像素”，颜色设置为“#0000FF”，对齐方式设置为“居中对齐”，样式名称为“style1”。 （4）将网页“0301.html”中文本“推荐度：”的字体设置为“仿宋_GB2312”，大小设置为“16像素”，颜色设置为“#00FFFF”，样式名称命名为“style2”。 【任务描述】 【任务3-1-4】从外部导入文本与设置文本格式 【引导训练】 （5）将网页“0301.html”中文本“★★★★”的字体设置为“楷体_GB2312”，大小设置为“14像素”，颜色设置为“#FF0000”，样式名称命名为“style3”。 （6）将网页“0301.html”中小标题“黄果树瀑布群”和“庐山的三叠泉瀑布”的大小设置为“16像素”，对齐方式设置为“左对齐”，且设置为“粗体”，样式名称命名为“style4”。 （7）将小标题“黄山的百丈瀑”的大小设置为“16像素”，对齐方式设