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像素”，对齐方式设