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

《dreamweaver cs 网页制作案例教程电子教案第章制作图文混排网页》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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

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

3、新建网页“index0301.html”（3）设置网页的背景图像（4）将Word文档“瀑布之美.doc”导入到网页“index0301.html”中（5）设置网页中文本的格式（6）在网页中插入多幅图像（7）在网页中插入鼠标经过图像（8）设置图像属性网页布局结构分析页面自然布局、无导航栏网页色彩搭配分析文本主体颜色：#000000，其他文本颜色：#0000FF、#00FFFF、#FF0000网页组成元素分析主要包括图像、鼠标经过图像、标题文本、正文文本等网页元素任务实现流程分析创建站点→新建网页→设置页面背景图像→导入Word文档→插入图像、设置图像属性→插入鼠标经

4、过图像且设置其属性→预览网页效果配盘素材导引原始文件位置：start3第3章制作图文混排网页task03-1最终文件位置：result3第3章制作图文混排网页task03-12、网页制作任务跟踪卡网页制作任务跟踪卡如表3-2所示。表3-2　网页制作任务跟踪卡任务编号开始时间完成时间计划工时实际工时当前状态【网页效果展示】网页index0301.html的浏览效果如图3-1所示。【任务完成过程】3.2.1　应用“高级”方式创建站点“瀑泉游”【操作要求】应用【站点定义】对话框的“高级”方式创建站点“瀑泉游”。57第3章　制作图文混排网页图3-1　图文混排网

5、页的浏览效果【实施过程】（1）打开【管理站点】对话框（2）打开【站点定义】对话框（3）设置站点的“本地信息”在“分类”列表中单击选择“本地信息”选项，输入或选择以下各项：①在“站点名称”文本框中输入所创建站点的名称“瀑泉游”②在“本地根文件夹”文本框中输入根文件夹“D:E游天下3第3章制作图文混排网页”。③在“默认图像文件夹”文本框中输入“D:E游天下3第3章制作图文混排网页task03-1images”。也可以打开对话框选择一个文件夹。④输入本机的HTTP地址，如http://172.16.7.26/Etour/。（4）设置站点的“远程信息”

6、在【管理站点】对话框中单击【完成】按钮，新建站点便完成。3.2.2　应用“文件”面板新建网页“index0301.html”【操作要求】应用“文件”面板在站点“瀑泉游”中新建一个网页文档“index0301.html”。【实施过程】（1）打开“文件”面板如果“文件”面板处理隐藏状态，则单击菜单【窗口】→【文件】打开“文件”面板。（2）新建网页文档在“文件”面板中站点“瀑泉游”的文件夹“task03-1”57第3章　制作图文混排网页上单击右键，在弹出的快捷菜单中单击【新建文件】菜单项，如图3-7所示。然后输入新的网页文档名称“index0301.html”，按回车键

7、确认。3.2.3　设置页面的背景图像【操作要求】设置网页“index0301.html”的背景图像为“bg01.gif”。【实施过程】（1）打开新建的网页文档“index0301.html”（2）设置网页的背景图像3.2.4　从外部导入文本与设置文本格式【操作要求】（1）将Word文档“瀑布之美.doc”导入到网页“index0301.html”中。（2）将网页“index0301.html”的标题设置为“瀑布之美”。（3）将网页“index0301.html”中的文本标题“瀑布之美”字体设置为“黑体”，大小设置为“18像素”，颜色为“#0000FF”，对齐方式设

8、置为“居中