03第3章制作图文混排网页.docx
- 文档编号:1628738
- 上传时间:2022-10-23
- 格式:DOCX
- 页数:13
- 大小:647.03KB
03第3章制作图文混排网页.docx
《03第3章制作图文混排网页.docx》由会员分享,可在线阅读,更多相关《03第3章制作图文混排网页.docx(13页珍藏版)》请在冰豆网上搜索。
03第3章制作图文混排网页
第3章 制作图文混排网页
图像也是网页中的主要元素之一,图像不但能美化网页,而且能够更直观地表达信息。
在页面中恰到好处地使用图像,能使网页更加生动、形象和美观。
【教学导航】
教学目标
(1)学会通过“管理站点”对话框创建站点
(2)学会应用“高级”方式创建站点
(3)学会通过“文件”面板创建网页
(4)掌握设置页面背景图像的方法
(5)掌握在网页中插入图像的方法
(6)掌握在网页中插入鼠标经过图像的方法
(7)掌握设置图像属性的方法
(8)掌握制作图文混排网页的技巧
本章重点
(1)设置页面背景图像
(2)在网页中插入图像
(3)设置图像属性
本章难点
(1)应用“高级”方式创建站点
(2)插入鼠标经过图像
教学方法
任务驱动法、分组讨论法、三步训练法
课时建议
6课时(含课堂同步训练)
3.1 课前准备
(1)在本地硬盘创建文件夹
(2)启动DreamweaverCS3
通过Windows的【开始】菜单启动DreamweaverCS3。
3.2 课堂引导训练及评价
【课堂引导训练任务描述】
1、网页制作任务卡
网页制作任务卡如表3-1所示。
表3-1 网页制作任务卡
任务编号
03-1
任务名称
制作图文混排网页
网页主题
瀑布游
计划工时
min
网页制作任务描述
(1)应用【站点定义】对话框的“高级”方式创建站点“瀑泉游”
(2)应用“文件”面板新建网页“index0301.html”
(3)设置网页的背景图像
(4)将Word文档“瀑布之美.doc”导入到网页“index0301.html”中
(5)设置网页中文本的格式
(6)在网页中插入多幅图像
(7)在网页中插入鼠标经过图像
(8)设置图像属性
网页布局结构分析
页面自然布局、无导航栏
网页色彩搭配分析
文本主体颜色:
#000000,其他文本颜色:
#0000FF、#00FFFF、#FF0000
网页组成元素分析
主要包括图像、鼠标经过图像、标题文本、正文文本等网页元素
任务实现流程分析
创建站点→新建网页→设置页面背景图像→导入Word文档→插入图像、设置图像属性→插入鼠标经过图像且设置其属性→预览网页效果
配盘素材导引
原始文件位置:
start\03第3章制作图文混排网页\task03-1
最终文件位置:
result\03第3章制作图文混排网页\task03-1
2、网页制作任务跟踪卡
网页制作任务跟踪卡如表3-2所示。
表3-2 网页制作任务跟踪卡
任务编号
开始时间
完成时间
计划工时
实际工时
当前状态
【网页效果展示】
网页index0301.html的浏览效果如图3-1所示。
【任务完成过程】
3.2.1 应用“高级”方式创建站点“瀑泉游”
【操作要求】
应用【站点定义】对话框的“高级”方式创建站点“瀑泉游”。
图3-1 图文混排网页的浏览效果
【实施过程】
(1)打开【管理站点】对话框
(2)打开【站点定义】对话框
(3)设置站点的“本地信息”
在“分类”列表中单击选择“本地信息”选项,输入或选择以下各项:
①在“站点名称”文本框中输入所创建站点的名称“瀑泉游”
②在“本地根文件夹”文本框中输入根文件夹“D:
\E游天下\03第3章制作图文混排网页\”。
③在“默认图像文件夹”文本框中输入“D:
\E游天下\03第3章制作图文混排网页\task03-1\images\”。
也可以打开对话框选择一个文件夹。
④输入本机的HTTP地址,如http:
//172.16.7.26/Etour/。
(4)设置站点的“远程信息”
在【管理站点】对话框中单击【完成】按钮,新建站点便完成。
3.2.2 应用“文件”面板新建网页“index0301.html”
【操作要求】
应用“文件”面板在站点“瀑泉游”中新建一个网页文档“index0301.html”。
【实施过程】
(1)打开“文件”面板
如果“文件”面板处理隐藏状态,则单击菜单【窗口】→【文件】打开“文件”面板。
(2)新建网页文档
在“文件”面板中站点“瀑泉游”的文件夹“task03-1”上单击右键,在弹出的快捷菜单中单击【新建文件】菜单项,如图3-7所示。
然后输入新的网页文档名称“index0301.html”,按回车键确认。
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”,对齐方式设置为“居中对齐”。
(4)将网页“index0301.html”中的文本“推荐度:
”字体设置为“仿宋_GB2312”,大小设置为“16像素”,颜色为“#00FFFF”,对齐方式设置为“居中对齐”。
(5)将网页“index0301.html”中的文本“★★★★”字体设置为“楷体_GB2312”,大小设置为“14像素”,颜色为“#FF0000”,对齐方式设置为“居中对齐”。
(6)将网页“index0301.html”中正文文本的字体设置为“宋体”,大小设置为“14像素”。
(7)将网页“index0301.html”中的小标题“黄果树瀑布群”、“黄山的百丈瀑”和“庐山的三叠泉瀑布”大小设置为“16像素”,且设置为“粗体”。
(8)将网页“index0301.html”中的小标题“黄山的百丈瀑”对齐方式设置为“右对齐”,其他两个小标题的对齐方式设置为“左对齐”。
【实施过程】
(1)准备Word文档
(2)打开导入对话框
(3)导入文本
(4)设置网页“index0301.html”的文本格式
(5)设置网页标题
(6)保存网页
(7)预览网页效果
按F12预览网页的效果如图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,垂直边距为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)设置鼠标经过图像的属性
(3)保存网页中插入的鼠标经过图像及其属性设置
3.2.7 浏览网页效果
按F12浏览图文混排网页的效果,如图3-所示。
【课堂引导训练任务完成情况评价】
对本次网页制作任务的完成情况进行自评,网页制作任务完成情况评价内容如表3-3所示。
表3-3 网页制作任务完成情况评价表
任务名称
制作图文混排网页
综合评价
任务完成情况分项评价
创建站点
网页布局
色彩搭配
网页内容
浏览效果
其他
存在的主要问题
3.3 课堂同步训练及评价
3.3.1 课堂同步训练任务描述
1、同步训练任务卡
课堂同步训练的任务卡如表3-4所示。
表3-4 课堂同步训练任务卡
任务编号
03-2
任务名称
制作介绍中国名泉的图文混排网页
网页主题
中国名泉
计划工时
30min
同步训练任务描述
(1)创建一个命名为“中国名泉”的站点,该站点存储在本地计算机的文件夹“task03-2”中。
(2)在“文件”面板的站点根目录下创建文件夹“images”和“text”。
(3)创建一个网页介绍中国名泉,该网页的名称为“ex0302.html”,存储在文件夹“task03-2”中。
(4)将网页的背景颜色设置为“#ffffff”,背景图像设置为“bg-blue.gif”,左、右边距设置为“80px”,上、下边距设置为“20px”。
(5)将网页的标题设置为“中国名泉欣赏”。
(6)在该网页中输入多个文本标题和多段文本。
(7)将网页文本标题“中国名泉”的字体设置为“宋体”,大小设置为“24px”,字形设置为“粗体”,文本颜色设置为“#00FFFF”,对齐方式设置为“居中对齐”。
(8)将标题“济南趵突泉”、“庐山谷帘泉”和“虎跑泉”的字体设置为“宋体”,大小设置为“18px”,字形设置为“粗体”。
(9)在网页“ex0302.html”中插入图像m01.jpg,且设置其属性:
宽为135,高为70,垂直边距为8,水平边距为8,替换文本为“趵突泉”,对齐方式为“左对齐”。
(10)在网页“ex0302.html”中插入图像“m02.jpg”,且设置其属性:
宽为124,高为70,垂直边距为5,水平边距为5,替换文本为“谷帘泉”,对齐方式为“右对齐”。
(11)在网页“ex0302.html”中插入图像“m03.jpg”,且设置其属性:
宽为120,高为70,垂直边距为10,水平边距为10,替换文本为“虎跑泉”,对齐方式为“基线”。
(12)在网页“ex0302.html”中插入鼠标经过图像,原始图像为“c01.jpg”,鼠标经过图像为“c02.jpg”,替换文本为“中国名泉”。
(13)设置鼠标经过图像的属性:
宽为110,高为85,边框为0。
配盘素材导引
原始文件位置:
start\03第3章制作图文混排网页\task03-2
最终文件位置:
result\03第3章制作图文混排网页\task03-2
2、同步训练任务跟踪卡
课堂同步训练的任务跟踪卡如表3-5所示。
表3-5 课堂同步训练的任务跟踪卡
任务编号
开始时间
完成时间
计划工时
实际工时
当前状态
3.3.2 同步训练网页的效果展示
同步训练网页的浏览效果如图3-24所示。
图3-24 同步训练网页的浏览效果
3.3.3 同步训练网页的制作要点提示
(1)首先在文件夹“03第3章制作图文混排网页”新建一个子文件夹“task03-2”。
这些操作应在Windows操作系统的资源管理器中完成。
(2)利用【站点定义】对话框创建站点“中国名泉”,注意存储位置为“盘符\03第3章制作图文混排网页\task03-2”。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 03 制作 图文 网页