第七单元 制作“专业教程”网页
任务三  在Div内添加内容
一、提出任务
1．任务目标
在Div中添加内容。
2．解决的问题
通过完成本任务，学习通过键入、插入、粘贴等操作将文本、表格、图像、Flash文件等网页元素添加到Div中。
3．本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：插入标题、插入图像、插入文本、添加链接，应用CSS，使用Div布局页面。
二、教学目标
1. 知识目标
⑴ 掌握在Div中插入标题、文本。
⑵ 掌握在Div中插入图像。
⑶ 掌握在Div中插入列表。
⑷ 掌握在Div中添加链接。
⑸ 掌握在Div中应用CSS。
2. 能力目标
能够在Div中插入标题、图像、文本、添加链接等，并应用CSS设置其样式。
3. 情感目标
培养学生乐于探索、主动学习的意识，树立将来成为网页制作专业技术人员的信心。
三、教学分析与准备
1. 教学重点
⑴ 在Div中插入列表。
⑵ 在Div中应用CSS。
2．教学难点
在Div中应用CSS。
3. 教学方法
任务驱动学习、协作学习、探究拓展学习与举一反三相结合
4. 课时安排
2课时。
5. 教学环境
多媒体网络教室。
四、教学过程（组织课堂、复习知识、教师引领完成任务占1学时；举一反三占1学时。）
教学环节及手段
教学内容
备注
组织课堂
复习知识
任务流程
导入任务
分析任务
完成任务
知识总结
举一反三
任务目标
启发思路
分组完成任务
学生自评或互评
教师点评总结
布置作业
集中学生注意力，准备上课。
通过让学生回答问题考察学生对使用Div布局页面的掌握情况。
1．盒子组成。
css特效文字
2．标准w3c盒子和IE盒子的区别
打开上一任务完成的页面，里面什么内容也没有，本任务向Div内添加文本、图片、列表、链接等，并设置样式，完成最后网页。
由以上问题引出本课内容。
提出任务：在Div内添加内容
本任务是根据网页效果图向Div中添加文本、图片、列表、链接等，但初始添加的图片大小、位置，文本的字体、字形、字号，链接的样式等和效果图不一致，需要设置样式。
1．向ID为“header”的Div中插入图片
删除“headerleft”中的内容，插入“images”文件夹中的“zyjc.jpg”图片；删除“headerright”中的内容，插入“images”文件夹中的“yywx.gif”图片。设置图片样式。
2．添加主体内容的标题
删除左侧ID为“maintop“的Div标签中原有内容，选择“插入”→“HTML” →“文本对象”→“标题3”菜单项，添加一个3级标题，输入内容“Photoshop技巧”。新建CSS规则，选择器名称改为“#container #main h3”，规则内容为：字体大小为14像素，行高为26像素，粗细为粗体，颜为#366，背景图像为“images”文件夹中的 “htbj.gif”文件，并将方框属性中的边界值全部设置为0像素。
使用同样方法在其他Div中插入各板块标题，分别为“办公自动化技巧”、“Dreamweaver技巧”、“计算机硬件维修技巧”和“教程”。
3．添加主体内容列表及链接
将光标插入标题“Photoshop技巧”后，按Enter键分段，在新的段落中选择“插入”→“HTML”→“文本对象”→“项目列表”菜单项，插入项目列表。输入内容“用Photoshop制作‘舞蹈’特效文字”，并设置文字超级链接为“#”，添加空链接。
在列表文本后回车，继续插入列表项，将其他教程目录输入，分别是“Photoshop画笔也能制作特效文字”、“浅谈Photoshop 6.0中自定义滤镜”、“Photoshop制作漫画风格情人节贺卡”、“Photoshop实例：制造特殊残缺美”、“Photoshop教程：制作个性十足的杯子”，并为各标题添加空链接。
在标签选择器选中标签“li”，新建CSS规则，选择器名称改为“#container #main ul li”，为列表项li设置样式：字体大小为12像素，行高为22像素。
在其他板块中添加相应内容。
4．在ID为“footer”的Div中添加友情链接
删除“footer”中的内容并输入本文“友情链接”，按Enter键分段。
添加项目列表，并插入“images”文件夹中的图像“guigudongli.jpg”。设置图像边框为0像素，超级链接为“”，
按Enter键插入新的列表项，插入图像“jiaocheng.jpg”，设置图像超级链接为“www.jcwcn”；插入列表项，插入图像“xinlangxueyuan.jpg”，设置图像超级链接为“college.sina”；插入列表项，插入图像“zixue52.jpg”，设置图像超级链接为“www.52zixue”；插入列表项，插入图像“wangyixueyuan.jpg”，设置图像超级链接为“tech.163/school”。所有图像边框均设置为0像素。
选中列表中的第一张图像，单击CSS面板中的“新建CSS规则”按钮，设置选择器名称为“#container #footer li”，为列表项li设置CSS规则：设置方框属性的浮动为“左对齐”，边界属性中右为5像素、其他为0像素，将列表属性中的列表样式设置为“无”。
本任务主要学习了通过键入、插入、粘贴等操作将文本、表格、图像、Flash文件等网页元素添加到Div中。
利用本单元素材“举一反三”文件夹中的“par7-3”文件夹制作网页,在Div中添加项目列表创建如课本图JYFS7-6所示的菜单，要求：当光标放在除“首页”以外的按钮上时，文字成红、背景图片变为“btnhui.jpg”。
使用Div和项目列表来完成任务，项目列表中列表项的宽度和高度依据背景图片的大小来设置；设置“a:hover”的CSS规则：背景为btnhui.jpg，文本颜为红，“区块”类别“显示”为“块”。
学生分组上机，讨论交流。
由各组学生代表来说明本组完成情况。
指出学生在总结时出现的错误，补充不足，鼓励学生学习Div布局网页的信心。
1．利用本单元素材“举一反三”文件夹中“par7-4”文件夹，参照课本图JYFS7-7，制作一个用户注册页面。（提示：带背景的按钮可以用表单元素中的“图像域”完成）。
2．利用本单元素材“举一反三”文件夹中“par7-5”文件夹，参照课本图JYFS7-8，将本网页中没完成的导航部分和页脚部分完成。（提示：导航部分为一个Flash导航，并设置该Flash导航为透明。）
学生回答，教师归纳。
力求通过任务导入，吸引学生学习欲望。
学生分组讨论并尝试操作。
教师作为引导者和组织者，学生分组上机操作，完成相应任务并进行评价。
学生分组讨论并通过尝试操作得出结论。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。