DreamweaverCS网页制作案例教程电子教案第章制作图文混排网页

《DreamweaverCS网页制作案例教程电子教案第章制作图文混排网页》由会员分享，可在线阅读，更多相关《DreamweaverCS网页制作案例教程电子教案第章制作图文混排网页（10页珍藏版）》请在装配图网上搜索。

1、第3章制作图文混排网页第3章制作图文混排网页图像也是网页中的主要元素之一，图像不但能美化网页，而且能够更直观地表达信息。在页面中恰到好处地使用图像，能使网页更加生动、形象和美观。【教学导航】教学目标（1）学会通过“管理站点”对话框创建站点（2）学会应用“高级”方式创建站点（3）学会通过“文件”面板创建网页（4）掌握设置页面背景图像的方法（5）掌握在网页中插入图像的方法（6）掌握在网页中插入鼠标经过图像的方法（7）掌握设置图像属性的方法（8）掌握制作图文混排网页的技巧本章重点（1）设置页面背景图像（2）在网页中插入图像（3）设置图像属性本章难点（1）应用“高级”方式创建站点（2）插入鼠标经过图像

2、教学方法任务驱动法、分组讨论法、三步训练法课时建议6课时（含课堂同步训练）3.1课前准备（1）在本地硬盘创建文件夹（2）启动Dreamweaver CS3通过Windows的【开始】菜单启动Dreamweaver CS3。3.2课堂引导训练及评价【课堂引导训练任务描述】1、网页制作任务卡网页制作任务卡如表3-1所示。表3-1网页制作任务卡任务编号03-1任务名称制作图文混排网页网页主题瀑布游计划工时min网页制作任务描述（1）应用【站点定义】对话框的“高级”方式创建站点“瀑泉游”（2）应用“文件”面板新建网页“index0301.html”（3）设置网页的背景图像（4）将Word文档“瀑布之美

3、.doc”导入到网页“index0301.html”中（5）设置网页中文本的格式（6）在网页中插入多幅图像（7）在网页中插入鼠标经过图像（8）设置图像属性网页布局结构分析页面自然布局、无导航栏网页色彩搭配分析文本主体颜色：#000000，其他文本颜色：#0000FF、#00FFFF、#FF0000网页组成元素分析主要包括图像、鼠标经过图像、标题文本、正文文本等网页元素任务实现流程分析创建站点新建网页设置页面背景图像导入Word文档插入图像、设置图像属性插入鼠标经过图像且设置其属性预览网页效果配盘素材导引原始文件位置：start03第3章制作图文混排网页task03-1最终文件位置：result

4、03第3章制作图文混排网页task03-12、网页制作任务跟踪卡网页制作任务跟踪卡如表3-2所示。表3-2网页制作任务跟踪卡任务编号开始时间完成时间计划工时实际工时当前状态【网页效果展示】网页index0301.html的浏览效果如图3-1所示。【任务完成过程】3.2.1应用“高级”方式创建站点“瀑泉游”【操作要求】应用【站点定义】对话框的“高级”方式创建站点“瀑泉游”。图3-1图文混排网页的浏览效果【实施过程】（1）打开【管理站点】对话框（2）打开【站点定义】对话框（3）设置站点的“本地信息”在“分类”列表中单击选择“本地信息”选项，输入或选择以下各项： 在“站点名称”文本框中输入所创建站点

5、的名称“瀑泉游” 在“本地根文件夹”文本框中输入根文件夹“D:E游天下03第3章制作图文混排网页”。 在“默认图像文件夹”文本框中输入“D:E游天下03第3章制作图文混排网页task03-1images”。也可以打开对话框选择一个文件夹。 输入本机的HTTP地址，如http:/172.16.7.26/Etour/。（4）设置站点的“远程信息”在【管理站点】对话框中单击【完成】按钮，新建站点便完成。3.2.2应用“文件”面板新建网页“index0301.html”【操作要求】应用“文件”面板在站点“瀑泉游”中新建一个网页文档“index0301.html”。【实施过程】（1）打开“文件”面板如果

6、“文件”面板处理隐藏状态，则单击菜单【窗口】【文件】打开“文件”面板。（2）新建网页文档在“文件”面板中站点“瀑泉游”的文件夹“task03-1”上单击右键，在弹出的快捷菜单中单击【新建文件】菜单项，如图3-7所示。然后输入新的网页文档名称“index0301.html”，按回车键确认。3.2.3设置页面的背景图像【操作要求】设置网页“index0301.html”的背景图像为“bg01.gif”。【实施过程】（1）打开新建的网页文档“index0301.html”（2）设置网页的背景图像3.2.4从外部导入文本与设置文本格式【操作要求】（1）将Word文档“瀑布之美.doc”导入到网页“in

7、dex0301.html”中。（2）将网页“index0301.html”的标题设置为“瀑布之美”。（3）将网页“index0301.html”中的文本标题“瀑布之美”字体设置为“黑体”，大小设置为“18像素”，颜色为“#0000FF”，对齐方式设置为“居中对齐”。（4）将网页“index0301.html”中的文本“推荐度：”字体设置为“仿宋_GB2312”，大小设置为“16像素”，颜色为“#00FFFF”，对齐方式设置为“居中对齐”。（5）将网页“index0301.html”中的文本“”字体设置为“楷体_GB2312”，大小设置为“14像素”，颜色为“#FF0000”，对齐方式设置为“居

8、中对齐”。（6）将网页“index0301.html”中正文文本的字体设置为“宋体”，大小设置为“14像素”。（7）将网页“index0301.html”中的小标题“黄果树瀑布群”、“黄山的百丈瀑”和“庐山的三叠泉瀑布”大小设置为“16像素”，且设置为“粗体”。（8）将网页“index0301.html”中的小标题“黄山的百丈瀑”对齐方式设置为“右对齐”，其他两个小标题的对齐方式设置为“左对齐”。【实施过程】（1）准备Word文档（2）打开导入对话框（3）导入文本（4）设置网页“index0301.html”的文本格式（5）设置网页标题（6）保存网页（7）预览网页效果按F12预览网页的效果如图

9、3-13所示。图3-13网页“index0301.html”的预览效果3.2.5插入图像【操作要求】（1）在网页“index0301.html”中插入图像p01.jpg，且设置其属性：宽为120，高为80，垂直边距为15，水平边距为10，替换文本为“黄果树瀑布群”，对齐方式为“左对齐”。（2）在网页“index0301.html”中插入图像“p02.jpg”，且设置其属性：宽为120，高为100，垂直边距为10，水平边距为5，替换文本为“黄山的百丈瀑”，对齐方式为“右对齐”。（3）在网页“index0301.html”中插入图像“p03.jpg”，且设置其属性：宽为120，高为100，垂直边距

10、为15，水平边距为10，替换文本为“庐山的三叠泉瀑布”，对齐方式为“左对齐”。【实施过程】（1）插入第一幅图像（2）设置第一幅图像的属性（3）插入第二幅图像（4）设置第二幅图像的属性（5）插入第三幅图像（6）设置第三幅图像的属性（7）保存网页中插入的图像和设置的图像属性3.2.6插入鼠标经过图像【操作要求】（1）在网页“index0301.html”中插入鼠标经过图像，原始图像为“c01.jpg”，鼠标经过图像为“c02.jpg”，替换文本为“瀑布之美”。（2）设置鼠标经过图像的属性：宽为200，高为120，垂直边距为10，边框为2，对齐方式为“底部”。【实施过程】（1）插入鼠标经过图像（2）

11、设置鼠标经过图像的属性（3）保存网页中插入的鼠标经过图像及其属性设置3.2.7浏览网页效果按F12浏览图文混排网页的效果，如图3-所示。【课堂引导训练任务完成情况评价】对本次网页制作任务的完成情况进行自评，网页制作任务完成情况评价内容如表3-3所示。表3-3网页制作任务完成情况评价表任务名称制作图文混排网页综合评价任务完成情况分项评价创建站点网页布局色彩搭配网页内容浏览效果其他存在的主要问题3.3课堂同步训练及评价3.3.1课堂同步训练任务描述1、同步训练任务卡课堂同步训练的任务卡如表3-4所示。表3-4课堂同步训练任务卡任务编号03-2任务名称制作介绍中国名泉的图文混排网页网页主题中国名泉计

12、划工时30min同步训练任务描述（1）创建一个命名为“中国名泉”的站点，该站点存储在本地计算机的文件夹“task03-2”中。（2）在“文件”面板的站点根目录下创建文件夹“images”和“text”。（3）创建一个网页介绍中国名泉，该网页的名称为“ex0302.html”，存储在文件夹“task03-2”中。（4）将网页的背景颜色设置为“#ffffff”，背景图像设置为“bg-blue.gif”，左、右边距设置为“80px”，上、下边距设置为“20px”。（5）将网页的标题设置为“中国名泉欣赏”。（6）在该网页中输入多个文本标题和多段文本。（7）将网页文本标题“中国名泉”的字体设置为“宋体”

13、，大小设置为“24px”，字形设置为“粗体”，文本颜色设置为“#00FFFF”，对齐方式设置为“居中对齐”。（8）将标题“济南趵突泉”、“庐山谷帘泉”和“虎跑泉”的字体设置为“宋体”，大小设置为“18px”，字形设置为“粗体”。（9）在网页“ex0302.html”中插入图像m01.jpg，且设置其属性：宽为135，高为70，垂直边距为8，水平边距为8，替换文本为“趵突泉”，对齐方式为“左对齐”。（10）在网页“ex0302.html”中插入图像“m02.jpg”，且设置其属性：宽为124，高为70，垂直边距为5，水平边距为5，替换文本为“谷帘泉”，对齐方式为“右对齐”。（11）在网页“ex0

14、302.html”中插入图像“m03.jpg”，且设置其属性：宽为120，高为70，垂直边距为10，水平边距为10，替换文本为“虎跑泉”，对齐方式为“基线”。（12）在网页“ex0302.html”中插入鼠标经过图像，原始图像为“c01.jpg”，鼠标经过图像为“c02.jpg”，替换文本为“中国名泉”。（13）设置鼠标经过图像的属性：宽为110，高为85，边框为0。配盘素材导引原始文件位置：start03第3章制作图文混排网页task03-2最终文件位置：result03第3章制作图文混排网页task03-22、同步训练任务跟踪卡课堂同步训练的任务跟踪卡如表3-5所示。表3-5课堂同步训练的

15、任务跟踪卡任务编号开始时间完成时间计划工时实际工时当前状态3.3.2同步训练网页的效果展示同步训练网页的浏览效果如图3-24所示。图3-24同步训练网页的浏览效果3.3.3同步训练网页的制作要点提示（1）首先在文件夹“03第3章制作图文混排网页”新建一个子文件夹“task03-2”。这些操作应在Windows操作系统的资源管理器中完成。（2）利用【站点定义】对话框创建站点“中国名泉”，注意存储位置为“盘符 03第3章制作图文混排网页task03-2”。（3）在Dreamweaver CS3的“文件”面板中新建文件夹“images”和“text”，然后将光盘中图像文件拷贝到子文件夹“images

16、”中，将文本文件“ex0302.txt”拷贝到子文件夹“text”中，注意拷贝文件也应在Windows操作系统的资源管理器中完成。（4）为了节省输入文字的时间，文本网页中所需的文字直接从文本文件“ex0302.txt”中拷贝即可。3.3.4课堂同步训练评价课堂同步训练评价内容如表3-6所示。表3-6课堂同步训练评价表任务编号03-2任务名称制作介绍中国名泉的图文混排网页任务完成方式【】小组协作完成【】个人独立完成课堂同步实践任务完成情况评价自我评价小组评价教师评价存在的主要问题3.4课外拓展训练1、拓展训练任务卡课外拓展训练的任务卡如表3-7所示。表3-7课外拓展训练任务卡任务编号03-3任务

17、名称制作介绍中国名岛的图文混排网页网页主题中国名岛计划工时60min拓展任务描述我国悠久的文化、辽阔的海域，造就了独特的海岛风情。海岛观光不仅可以尽情地欣赏海景，感受大海宽阔的胸怀、多变的景色、深沉的性格，欣赏海蚀奇观、神秘海火、海市蜃楼等迷人的海上奇观，还可以欣赏海岛独特的山水景色，感受不同的人文底蕴。素有“蓬莱仙岛”之名的岱山岛，以“山海奇观”著称的嵊泗列岛，被誉为“东方明珠”的香港岛、享有“宝岛”美名的台湾岛等，都融自然和人文景观于一体，以其奇特的海滩，多变的海景，丰富的人文底蕴，给人以启迪，令人神往，叫人眷恋。请完成以下课外拓展任务：（1）以“中国名岛”为主题创建一个站点。（2）制作一

18、个介绍中国名岛（例如海南岛、岱山岛、鼓浪屿、嵊泗列岛等）的图文混排网页ex0303.html，该网页的图片和文字内容从相关网站获取。（3）参照网页index0301.html设置网页ex0303.html的标题、正文文字的字体、大小和颜色等格式。（4）参照网页index0301.html在网页ex0303.html中插入普通图片和鼠标经过图像，且设置这些图片的属性。素材准备要求利用百度、谷歌等网站搜索介绍“中国名山”的网站，然后从这些网站中收集有关中国名岛的图片和文字，并整理成制作网页所需的素材。2、拓展训练任务跟踪卡课外拓展训练的任务跟踪卡如表3-8所示。表3-8课外拓展训练的任务跟踪卡任务编号开始时间完成时间计划工时实际工时当前状态3、拓展训练任务完成情况描述课外拓展训练任务完成情况如表3-9所示。表3-9课外拓展训练任务完成情况任务编号03-3任务名称制作介绍中国名岛的图文混排网页任务完成方式【】小组协作完成【】个人独立完成网页色彩搭配网页的主要元素已参考的网站完成情况评价【本章小结】本章介绍了应用“高级”方式创建站点和应用“文件”面板新建网页的方法，本章所制作的网页中的文字内容通过导入外部文本获取的，本章主要介绍了设置页面背景图像、插入图像和插入鼠标经过图像的方法和技巧，同时也熟悉了图像与文本混合编排的方法。57