网页设计与制作任务驱动式实用教程03单元3制作混排网页ppt课件

1、网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢网页设计与制造网页设计与制造义务驱动式教程义务驱动式教程单元单元3 3制造图文混排网页制造图文混排网页网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢教学环节教学环节【教学导航 】 1【操作预备 】 2【引导训练/引导训练考核评价】 3【同步训练 /同步训练考核评价】 4【拓展训练 /拓展训练考核评价】5网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【教学导航】【教学导航】教学目标教学目标（1 1）学会通过）学会通过“管理站点管理站点”对话框创建站点对话框创建站点（2 2）学会通过）学

2、会通过【文件文件】面板创建网页面板创建网页（3 3）掌握设置页面背景图像的方法）掌握设置页面背景图像的方法（4 4）掌握在网页中插入图像的方法）掌握在网页中插入图像的方法（5 5）掌握在网页中插入鼠标经过图像的方法）掌握在网页中插入鼠标经过图像的方法（6 6）掌握设置图像属性的方法）掌握设置图像属性的方法（7 7）掌握制作图文混排网页的技巧）掌握制作图文混排网页的技巧 本单元重点本单元重点 （1 1）设置页面背景图像）设置页面背景图像（2 2）在网页中插入图像）在网页中插入图像（3 3）设置图像属性）设置图像属性 本单元难点本单元难点 （1 1）应用）应用“管理站点管理站点”对话框创建站点对话

3、框创建站点（2 2）插入鼠标经过图像）插入鼠标经过图像 教学方法教学方法 任务驱动法、分组讨论法、四步训练法（操作准备引导训练同步训任务驱动法、分组讨论法、四步训练法（操作准备引导训练同步训练拓展训练）练拓展训练） 课时建议课时建议 6 6课时（含考核评价）课时（含考核评价） 网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【操作预备】【操作预备】1 1创建所需的文件夹，拷贝所需的资源创建所需的文件夹，拷贝所需的资源2 2启动启动Dreamweaver CS6Dreamweaver CS6网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【引导训练】【引导

4、训练】【义务【义务3-13-1】制造引见中国瀑布的图文混排网页】制造引见中国瀑布的图文混排网页 本单元本单元“引导训练的义务卡如表引导训练的义务卡如表3-13-1所示。所示。网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【引导训练】【引导训练】【义务【义务3-13-1】制造引见中国瀑布的图文混排网页】制造引见中国瀑布的图文混排网页 网页网页0301.html0301.html的阅读效果如图的阅读效果如图3-13-1所示。所示。图图3-13-1图文混排网页的阅读效果图文混排网页的阅读效果 网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【引导训练】【引导

5、训练】 运用【管理站点】对话框创建运用【管理站点】对话框创建1 1个称号为个称号为“单元单元3 3的本地的本地站点，站点文件夹为站点，站点文件夹为“Unit03Unit03。【义务描画】【义务描画】【义务【义务3-1-13-1-1】运用】运用“管理站点对话框创建站点管理站点对话框创建站点“单元单元3 3 网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【义务虚施】【义务虚施】1 1翻开【管理站点】对话框翻开【管理站点】对话框 在在Dreamweaver CS6Dreamweaver CS6的主界面，选择命令【站点】的主界面，选择命令【站点】【管理【管理站点】，翻开【管理站点

6、】对话框。站点】，翻开【管理站点】对话框。2 2翻开【站点设置对象】对话框翻开【站点设置对象】对话框 在【管理站点】对话框中单击【新建站点】按钮，翻开【站在【管理站点】对话框中单击【新建站点】按钮，翻开【站点设置对象】对话框。点设置对象】对话框。 在【管理站点】对话框在【管理站点】对话框“站点称号文本框中输入站点称号站点称号文本框中输入站点称号“单元单元3 3，在，在“本地站点文件夹文本框中输入完好的途径称本地站点文件夹文本框中输入完好的途径称号号“D:D:网页设计与制造案例网页设计与制造案例Unit03task03-1Unit03task03-1。 在【站点设置对象】对话框中单击【保管】按钮

7、，保管创建在【站点设置对象】对话框中单击【保管】按钮，保管创建的站点，前往【管理站点】对话框。的站点，前往【管理站点】对话框。 在【管理站点】对话框中单击【完成】按钮，新建站点便完在【管理站点】对话框中单击【完成】按钮，新建站点便完成。成。网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【引导训练】【引导训练】 运用【文件】面板在站点运用【文件】面板在站点“单元单元3 3中新建中新建1 1个网页文档个网页文档“0301.html0301.html。【义务描画】【义务描画】【义务【义务3-1-23-1-2】运用】运用“文件面板新建网页文件面板新建网页“0301.html“03

8、01.html 网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【义务虚施】【义务虚施】1 1翻开【文件】面板翻开【文件】面板2 2新建网页文档新建网页文档 在【文件】面板中站点在【文件】面板中站点“单元单元3 3的文件夹的文件夹“task03-1task03-1上单上单击右键，在弹出的快捷菜单中单击【新建文件】菜单项。然后击右键，在弹出的快捷菜单中单击【新建文件】菜单项。然后输入新的网页文档称号输入新的网页文档称号“0301.html0301.html，按回车键确认。，按回车键确认。网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【引导训练】【引导训练

9、】设置网页设置网页“0301.html0301.html的背景图像为的背景图像为“bg01.gifbg01.gif。【义务描画】【义务描画】【义务【义务3-1-33-1-3】设置页面的背景图像】设置页面的背景图像网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【义务虚施】【义务虚施】1 1翻开新建的网页文档翻开新建的网页文档“0301.html0301.html2 2设置网页的背景图像设置网页的背景图像 单击【属性】面板上的【页面属性】按钮，翻开【页面属单击【属性】面板上的【页面属性】按钮，翻开【页面属性】对话框，在【页面属性】对话框中性】对话框，在【页面属性】对话框中“外

10、观外观CSSCSS属性组属性组中单击背景图像文本框右侧的【阅读】按钮，弹出【选择图像中单击背景图像文本框右侧的【阅读】按钮，弹出【选择图像源文件】对话框，在该对话框中搜索到所要设置的背景图像文源文件】对话框，在该对话框中搜索到所要设置的背景图像文件件“bg01.gifbg01.gif。 接着单击【确定】按钮，前往【页面属性】对话框。然后接着单击【确定】按钮，前往【页面属性】对话框。然后单击【页面属性】对话框中的【确定】按钮，这样就为网页设单击【页面属性】对话框中的【确定】按钮，这样就为网页设置了所需的背景图像。置了所需的背景图像。网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈

11、承欢【引导训练】【引导训练】1 1将将WordWord文档文档“瀑布之美瀑布之美.doc.doc导入到网页导入到网页“0301.html0301.html中。中。2 2将网页将网页“0301.html0301.html的标题设置为的标题设置为“瀑布之美。瀑布之美。3 3将网页将网页“0301.html0301.html中文本标题中文本标题“瀑布之美的字体设置为瀑布之美的字体设置为“黑黑体，大小设置为体，大小设置为“1818像素，颜色设置为像素，颜色设置为“#0000FF#0000FF，对齐方式设，对齐方式设置为置为“居中对齐，款式称号为居中对齐，款式称号为“style1style1。4 4将网

12、页将网页“0301.html0301.html中文本中文本“引荐度：的字体设置为引荐度：的字体设置为“仿宋仿宋_GB_GB23122312，大小设置为，大小设置为“1616像素，颜色设置为像素，颜色设置为“#00FFFF#00FFFF，款式称号，款式称号命名为命名为“style2style2。【义务描画】【义务描画】【义务【义务3-1-43-1-4】从外部导入文本与设置文本格式】从外部导入文本与设置文本格式网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【引导训练】【引导训练】5 5将网页将网页“0301.html0301.html中文本中文本“的字体设置为的字体设置为“楷

13、体楷体_GB2_GB2312312，大小设置为，大小设置为“1414像素，颜色设置为像素，颜色设置为“#FF0000#FF0000，款式称号命，款式称号命名为名为“style3style3。6 6将网页将网页“0301.html0301.html中小标题中小标题“黄果树瀑布群和黄果树瀑布群和“庐山的三叠泉庐山的三叠泉瀑布的大小设置为瀑布的大小设置为“1616像素，对齐方式设置为像素，对齐方式设置为“左对齐，且设置左对齐，且设置为为“粗体，款式称号命名为粗体，款式称号命名为“style4style4。7 7将小标题将小标题“黄山的百丈瀑的大小设置为黄山的百丈瀑的大小设置为“1616像素，对齐方式

14、设像素，对齐方式设置为置为“右对齐，且设置为右对齐，且设置为“粗体，款式称号命名为粗体，款式称号命名为“style5style5。8 8将网页将网页“0301.html0301.html中正文文本的字体设置为中正文文本的字体设置为“宋体，大小设宋体，大小设置为置为“1414像素，款式称号命名为像素，款式称号命名为“style6style6。【义务描画】【义务描画】【义务【义务3-1-43-1-4】从外部导入文本与设置文本格式】从外部导入文本与设置文本格式网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【义务虚施】【义务虚施】1 1预备预备WordWord文档文档2 2翻开【

15、导入翻开【导入 Word Word 文档】对话框文档】对话框3 3导入文本导入文本4 4设置网页设置网页“0301.html0301.html的文本格式的文本格式 以类似的方法将页面文本以类似的方法将页面文本“引荐度：的字体设置为引荐度：的字体设置为“仿宋仿宋_GB2312_GB2312，大小设置为大小设置为“1616像素，颜色设置为像素，颜色设置为“#00FFFF#00FFFF，款式的称号命名为，款式的称号命名为“stylestyle2 2。 以类似的方法将页面文本以类似的方法将页面文本“的字体设置为的字体设置为“楷体楷体_GB2312_GB2312，大小设置为大小设置为“1414像素，颜色

16、为像素，颜色为“#FF0000#FF0000，款式的称号命名为，款式的称号命名为“style3style3。 以类似的方法将页面小标题以类似的方法将页面小标题“黄果树瀑布群的大小设置为黄果树瀑布群的大小设置为“1616像素，像素，对齐方式设置为对齐方式设置为“左对齐，且设置为左对齐，且设置为“粗体，款式的称号命名为粗体，款式的称号命名为“style4style4。网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【义务虚施】【义务虚施】 选择另选择另1 1个小标题个小标题“庐山的三叠泉瀑布，在庐山的三叠泉瀑布，在CSSCSS【属性】面板的【属性】面板的“目的规目的规那么列表框

17、中选择那么列表框中选择“style4style4，即可运用该款式的属性设置。，即可运用该款式的属性设置。 将页面小标题将页面小标题“黄山的百丈瀑的大小设置为黄山的百丈瀑的大小设置为“1616像素，对齐方式设置像素，对齐方式设置为为“右对齐，且设置为右对齐，且设置为“粗体，款式的称号命名为粗体，款式的称号命名为“style5style5。 将页面正文文本的字体设置为将页面正文文本的字体设置为“宋体，大小设置为宋体，大小设置为“1414像素，款式的像素，款式的称号命名为称号命名为“style6style6，一切的正文文本都运用该款式。，一切的正文文本都运用该款式。5 5设置网页标题设置网页标题 在

18、【文档】工具栏的在【文档】工具栏的“标题文本框中输入网页的标题标题文本框中输入网页的标题“瀑布之美。瀑布之美。6 6保管网页保管网页 单击【规范】工具栏中的【保管】按钮或【全部保管】按钮，保管网页单击【规范】工具栏中的【保管】按钮或【全部保管】按钮，保管网页的属性设置。的属性设置。7 7预览网页效果预览网页效果网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【引导训练】【引导训练】1 1在网页在网页“0301.html0301.html中插入图像中插入图像p01.jpgp01.jpg，且设置其属性：宽为，且设置其属性：宽为120120，高为，高为8080，交换文本为，交换文

19、本为“黄果树瀑布群，垂直边距为黄果树瀑布群，垂直边距为1515，程度边，程度边距为距为1010，对齐方式为，对齐方式为“左对齐。左对齐。2 2在网页在网页“0301.html0301.html中插入图像中插入图像“p02.jpgp02.jpg，且设置其属性：，且设置其属性：宽为宽为120120，高为，高为100100，交换文本为，交换文本为“黄山的百丈瀑，垂直边距为黄山的百丈瀑，垂直边距为1010，程度边距为程度边距为5 5，对齐方式为，对齐方式为“右对齐。右对齐。3 3在网页在网页“0301.html0301.html中插入图像中插入图像“p03.jpgp03.jpg，且设置其属性：，且设置

20、其属性：宽为宽为120120，高为，高为100100，交换文本为，交换文本为“庐山的三叠泉瀑布，垂直边距为庐山的三叠泉瀑布，垂直边距为1 15 5，程度边距为，程度边距为1010，对齐方式为，对齐方式为“左对齐。左对齐。【义务描画】【义务描画】【义务【义务3-1-53-1-5】插入图像与设置图像属性】插入图像与设置图像属性 网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【义务虚施】【义务虚施】1 1插入第插入第1 1幅图像幅图像2 2设置第设置第1 1幅图像的属性幅图像的属性3 3插入第插入第2 2幅图像幅图像4 4设置第设置第2 2幅图像的属性幅图像的属性5 5插入第插

21、入第3 3幅图像幅图像6 6设置第设置第3 3幅图像的属性幅图像的属性7 7保管网页中插入的图像和设置的图像属性保管网页中插入的图像和设置的图像属性网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【引导训练】【引导训练】1 1在网页在网页“0301.html0301.html中插入鼠标经过图像，原始图中插入鼠标经过图像，原始图像为像为“c01.jpgc01.jpg，鼠标经过图像为，鼠标经过图像为“c02.jpgc02.jpg，交换文本，交换文本为为“瀑布之美。瀑布之美。2 2设置鼠标经过图像的属性：宽为设置鼠标经过图像的属性：宽为200200，高为，高为120120，垂，垂

22、直边距为直边距为1010，边框为，边框为2 2，对齐方式为，对齐方式为“底部。底部。【义务描画】【义务描画】【义务【义务3-1-63-1-6】插入鼠标经过图像及设置其属性】插入鼠标经过图像及设置其属性 网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【义务虚施】【义务虚施】1 1插入鼠标经过图像插入鼠标经过图像2 2设置鼠标经过图像的属性设置鼠标经过图像的属性3 3保管网页中插入的鼠标经过图像及其属性设置保管网页中插入的鼠标经过图像及其属性设置4 4按按F12F12阅读图文混排网页的效果阅读图文混排网页的效果网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承

23、欢【引导训练考核实战】【引导训练考核实战】本单元的本单元的“引导训练考核评价内容如表引导训练考核评价内容如表3-33-3所示。所示。表表3-33-3单元单元3 3“引导训练考核评价表引导训练考核评价表 网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【同步训练】【同步训练】【义务描画】【义务描画】【义务【义务3-23-2】制造引见中国名泉的图文混排网页】制造引见中国名泉的图文混排网页 表表3-43-4单元单元3 3“同步训练义务卡同步训练义务卡 本单元本单元“同步训练的同步训练的义务卡如表义务卡如表3-43-4所示。所示。网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【同步训练】【同步训练】【义务描画】【义务描画】【义务【义务3-23-2】制造引见中国名泉的图文混排网页】制造引见中国名泉的图文混排网页 本单元本单元“同步训练网页的阅读效果如图同步训练网页的阅读效果如图3-243-24所示。所示。图图3-2