授课班级
赵希洛授课日期
授课题目：原的组词第三讲  制作图文混排网页
目的要求：学会通过“管理站点”对话框创建站点；学会通过【文件】面板创建网页；掌握设置页面背景图像的方法；掌握在网页中插入图像的方法；掌握在网页中插入鼠标经过图像的方法；掌握设置图像属性的方法；掌握制作图文混排网页的技巧
重点难点：设置页面背景图像；在网页中插入图像；设置图像属性
护理学专业组织教学：点名考勤；复习；引入新课；讲解理论知识；实例演示；指导学生练习；总结
总结复习导入新课：
图像通常用来添加图形界面、具有视觉感染力的内容或交互式设计元素， Web页中通常使用的只有三种，即GIF、JPEG和PNG。
提问：
1. 如何设置页面的整体属性？
2. 如何在网页中输入与编辑文本？
3. 如何对网页文本进行格式化处理？
教学方式、手段、媒介：教学手段：讲授、多媒体；媒介：教材
授课内容：
第三讲  制作图文混排网页
【操作准备】
（1）创建所需的文件夹，拷贝所需的资源
（2）启动Dreamweaver CS6
【引导训练】
【任务3-1】制作介绍中国瀑布的图文混排网页
本单元“引导训练”的任务卡如表3-1所示。
表3-1　单元3“引导训练”任务卡
任务编号
3-1
任务名称
制作介绍中国瀑布的图文混排网页
网页主题
瀑布游
计划工时
120min
网页制作任务描述
（1）应用【管理站点】对话框创建站点“单元3”
（2）应用【文件】面板新建网页“0301.html”
（3）设置网页的背景图像
（4）将Word文档“瀑布之美.doc”导入到网页“0301.html”中
（5）设置网页中文本的格式
（6）在网页中插入多幅图像
（7）在网页中插入鼠标经过图像
（8）设置图像属性
网页布局结构分析
页面自然布局、无导航栏
网页彩搭配分析
文本主体颜：#000000，其他文本颜：#0000FF、#00FFFF、#FF0000
网页组成元素分析
主要包括图像、鼠标经过图像、标题文本、正文文本等网页元素
任务实现流程分析
初中考高中没考上咋办创建站点→新建网页→设置页面背景图像→导入Word文档→插入图像→设置图像属性→插入鼠标经过图像且设置其属性→预览网页效果
配盘素材导引
原始文件位置：start\Unit03\task03-1
最终文件位置：result\Unit03\task03-1
网页0301.html的浏览效果如图3-1所示。
图3-1　图文混排网页的浏览效果
【任务3-1-1】使用“管理站点”对话框创建站点“单元3”
【任务描述】
使用【管理站点】对话框创建1个名称为“单元3”的本地站点，站点文件夹为“Unit03”。
【任务实施】
（1）打开【管理站点】对话框
在Dreamweaver CS6的主界面，选择命令【站点】→【管理站点】，打开【管理站点】对话框。
（2）打开【站点设置对象】对话框
在【管理站点】对话框中单击【新建站点】按钮，打开【站点设置对象】对话框。
在【管理站点】对话框“站点名称”文本框中输入站点名称“单元3”，在“本地站点文件夹”文本框中输入完整的路径名称“D:\网页设计与制作案例\Unit03\task03-1\”。
在【站点设置对象】对话框中单击【保存】按钮，保存创建的站点，返回【管理站点】对话框。
在【管理站点】对话框中单击【完成】按钮，新建站点便完成。
【任务3-1-2】应用“文件”面板新建网页“0301.html”
【任务描述】
应用【文件】面板在站点“单元3”中新建1个网页文档“0301.html”。
【任务实施】
（1）打开【文件】面板
（2）新建网页文档
在【文件】面板中站点“单元3”的文件夹“task03-1”上单击右键，在弹出的快捷菜单中单击【新建文件】菜单项。然后输入新的网页文档名称“0301.html”，按回车键确认。
【任务3-1-3】设置页面的背景图像
【任务描述】
设置网页“0301.html”的背景图像为“bg01.gif”。
【任务实施】
（1）打开新建的网页文档“0301.html”
（2）设置网页的背景图像
单击【属性】面板上的【页面属性】按钮，打开【页面属性】对话框，在【页面属性】对话框中“外观（CSS）”属性组中单击背景图像文本框右侧的【浏览】按钮，弹出【选择图像源文件】对话框，在该对话框中搜索到所要设置的背景图像文件“bg01.gif”。
接着单击【确定】按钮，返回【页面属性】对话框。然后单击【页面属性】对话框中的【确定】按钮，这样就为网页设置了所需的背景图像。
图像在网页中的应用
Logo、Gif动画、广告图像、按钮图像、产品图像、背景图像
网页上常用的图像类型
Gif  图像
Jpg 图像
Png 图像
【任务3-1-4】从外部导入文本与设置文本格式
【任务描述】
（1）将Word文档“瀑布之美.doc”导入到网页“0301.html”中。
（2）将网页“0301.html”的标题设置为“瀑布之美”。
（3）将网页“0301.html”中文本标题“瀑布之美”的字体设置为“黑体”，大小设置为“18像素”，颜设置为“#0000FF”，对齐方式设置为“居中对齐”，样式名称为“style1”。
（4）将网页“0301.html”中文本“推荐度：”的字体设置为“仿宋_GB2312”，大小设置为“16像素”，颜设置为“#00FFFF”，样式名称命名为“style2”。
（5）将网页“0301.html”中文本“★★★★”的字体设置为“楷体_GB2312”，大小设置为“14像素”，颜设置为“#FF0000”，样式名称命名为“style3”。
（6）将网页“0301.html”中小标题“黄果树瀑布”和“庐山的三叠泉瀑布”的大小设置为“16像素”，对齐方式设置为“左对齐”，且设置为“粗体”，样式名称命名为“style4”。
（7）将小标题“黄山的百丈瀑”的大小设置为“16像素”，对齐方式设置为“右对齐”，且设置为“粗体”，样式名称命名为“style5”。
（8）将网页“0301.html”中正文文本的字体设置为“宋体”，大小设置为“14像素”，样式名称命名为“style6”。
【任务实施】
（1）准备Word文档
（2）打开【导入 Word 文档】对话框
（3）导入文本
（4）设置网页“0301.html”的文本格式
以类似的方法将页面文本“推荐度：”的字体设置为“仿宋_GB2312”，大小设置为“16像素”，颜设置为“#00FFFF”，样式的名称命名为“style2”。
以类似的方法将页面文本“★★★★”的字体设置为“楷体_GB2312”，大小设置为“14像素”，颜为“#FF0000”，样式的名称命名为“style3”。
以类似的方法将页面小标题“黄果树瀑布”的大小设置为“16像素”，对齐方式设置为“左对齐”，且设置为“粗体”，样式的名称命名为“style4”。
选择另1个小标题“庐山的三叠泉瀑布”，在CSS【属性】面板的“目标规则”列表框中选择“style4”，即可应用该样式的属性设置。
将页面小标题“黄山的百丈瀑”的大小设置为“16像素”，对齐方式设置为“右对齐”，且设置为“粗体”，样式的名称命名为“style5”。
三八节祝福语短句
将页面正文文本的字体设置为“宋体”，大小设置为“14像素”，样式的名称命名为“style6”，所有的正文文本都应用该样式。
（5）设置网页标题
在【文档】工具栏的“标题”文本框中输入网页的标题“瀑布之美”。
（6）保存网页
单击【标准】工具栏中的【保存】按钮或【全部保存】按钮，保存网页的属性设置。
（7）预览网页效果
【任务3-1-5】插入图像与设置图像属性
【任务描述】
（1）在网页“0301.html”中插入图像p01.jpg，且设置其属性：宽为120，高为80，替换文本为“黄果树瀑布”，垂直边距为15，水平边距为10，对齐方式为“左对齐”。
（2）在网页“0301.html”中插入图像“p02.jpg”，且设置其属性：宽为120，高为100，替换文本为“黄山的百丈瀑”，垂直边距为10，水平边距为5，对齐方式为“右对齐”。
（3）在网页“0301.html”中插入图像“p03.jpg”，且设置其属性：宽为120，高为100，替换文本为“庐山的三叠泉瀑布”，垂直边距为15，水平边距为10，对齐方式为“左对齐”。
【任务实施】
（1）插入第1幅图像
（2）设置第1幅图像的属性
（3）插入第2幅图像
（4）设置第2幅图像的属性
译文（5）插入第3幅图像
（6）设置第3幅图像的属性
（7）保存网页中插入的图像和设置的图像属性
讲解：
插入图像（快捷键Ctrl+Alt+I）
插入图像
在Dreamweaver中插入图像的基本方法是：