3、任务二 美化“关于我们”页面文本内容.doc

《3、任务二 美化“关于我们”页面文本内容.doc》由会员分享，可在线阅读，更多相关《3、任务二 美化“关于我们”页面文本内容.doc（10页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、电子商务网页设计与制作授 课 教 案 学年 第 学期 学院 （部） 专业（学部）课程名称电子商务网页设计与制作任课教师课内形式理论教学 课内实践 理实一体R 习题复习 考核评价 其他活动学习量安排课内：课外形式调查分析R 小组研讨 实践任务R 理论探究 考核评价 汇报展示 其他活动R 课外：序号14授课日期 月 日月 日 月 日 月 日授课班级课内教学内容：项目3：使用CSS美化页面简单、快捷、规范地制作页面任务二 美化“关于我们”页面文本内容课程思政设计：（1）通过教师讲解使用CSS美化页面的知识，教育引导学生正确认识世界和中国电子商务发展大势，正确认识时代责任以及历史使命。（2）通过小组合

2、作讨论，引导学生未来就业创业选择电商领域，实现自我价值和社会价值。（3）要求学生在掌握专业知识和提高专业技能的同时，必须具备正确的道德认知和良好的道德情操。（4）教育引导学生正确认识世界和中国电子商务发展大势，正确认识时代责任和历史使命。课外学习任务：（1）课前：以小组为单位，讨论制作“关于我们”页面中的文本内容；分析页面中需要包含多少“Div”并以PPT的形式记录下来。（2）课后：制作网站公告。使用类样式和id样式制作新能源电子商务网站首页帮助导航。教学目标：知识目标l 了解“关于我们”文本内容页面结构；l 熟悉使用CSS控制字体；l 掌握制作网页欢迎界面；l 掌握美化页面文本；l 掌握制作

3、网站公告；能力目标l 能够使用CSS控制字体；l 能够掌握美化页面文本；l 能够准确制作网站公告。素质目标l 较强的专业知识和自学能力；l 丰富知识结构， 提升专业知识；l 在掌握美化页面的基础上，理解并应用专业知识。重点难点及解决方法：（1）重点：使用CSS控制字体解决方法：通过课堂练习+视频式教学的方法，教师讲解使用CSS控制字体，引导学生积极思考，掌握相应知识；同时通过课堂练习，使学生可以掌握制作网站欢迎界面等相关知识；培养学生的思维能力和分析问题解决问题的能力。（2）难点：美化页面文本解决方法：通过案例演示+启发式教学讲解的方式，细致讲解美化页面文本内容的制作。帮助学生掌握通过使用CS

4、S控制文本的样式。从实用的角度帮助学生提高专业知识。课内教学授课地点：教学媒体：微课、PPT课件、网页图片、相关教学视频等。设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。其它资源：与本次课相关的专业技术论文电子版。学习效果评价方式：对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。课后小结：填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2. 授课形式在相应的选项打“”。课内教学内容及过程时间分配方

5、法及手段1. 课前调研成果展示与汇报【课前调研成果展示与汇报】教师向学生展示美化后的页面文本效果的图片，使学生了解页面都是使用Div控制页面结构，然后通过使用CSS控制页面效果。 教师注意通过本章之前所学到的知识引导学生，让学生在学习的过程中有承上启下的感觉，使学生可以更加快速掌握使用Div控制页面并通过CSS控制页面的显示效果。德育教育：引导学生掌握专业知识和提高专业技能。【根据调研结果引出新课】从分析“关于我们”页面结构进行讲解，帮助学生掌握使用CSS控制字体。同时，通过课堂练习，使学生可以制作网站欢迎页面；同时掌握美化页面文本的制作。使学生可以掌握如何制作网站公告。德育教育：启发学生思考

6、，开阔学生思维，鼓励学生发表观点看法，引起学生共鸣2.布置任务【教师展示教学载体，创设学习情境】接下来制作“关于我们”页面中的文本内容。页面中一共包含6个Div，页面效果如图所示。通过使用类样式，完成对页面中文本的美化操作。 3.任务分析 【分析“关于我们”文本内容页面结构】教师讲解“关于我们”文本内容页面结构，帮助学生掌握完成对页面中文本的美化操作；使学生可以掌握美化“关于我们”页面文本。4.知识准备（教学难点）【使用CSS控制字体】id样式通常只能用来控制Div，对于页面中的其他元素就无能为力了。需要使用类（class）选择符来设置特殊效果。类选择符用来为一系列的标签定义相同的显示样式，其

7、基本语法如下。. 类名称 属性：属性值；类名称表示类选择符的名称，其基本名称由CSS定义者自己命名。在定义类选择符时，需要在类名称前面加一个英文句点（.）。.font01 color：black;.font02 font-size:12px;以上定义了两个类选择符，分别是font01和font02。类的名称可以是任意英文本符串，也可以是以英文本母开头与数字组合的名称。通常情况下，这些名称都是其功效与功能的缩写。可以使用HTML标签的Class属性来引用类选择符。class 属性被用来引用类选择符的属性以上所定义的类选择符被应用于指定的HTML标签中（如标签），同时它还可以应用于不同的HTML标

8、签中，使其显示相同的样式。段落样式 标题样式类CSS样式在网页中的应用非常广泛，可以应用于页面中的任意元素，并且可以多次应用。需要注意的是，类CSS样式必须应用于网页中的元素，才能对该元素起作用，而标签CSS样式和id CSS样式都是针对网页中特定元素的，并不需要应用。CSS所支持的字体样式主要包括字体、字号、颜色等基本属性和其他字体微调控制方式。在了解这些属性之前，先来看一下CSS所支持的字体属性如表所示。CSS所支持的字体属性由于某些原因，在CSS的字体属性中，并不是所有属性都对中文文本产生作用，但绝大部分字体属性都可以应用于中文文本。【知识点学习情况检测，教学策略调整】教师通过课堂提问，

9、了解学生对知识的掌握情况，对共同的错误点或存在的问题，进一步有针对性地讲解。【学生实践，加深对使用CSS控制字体的掌握】通过向学生讲解CSS所支持的字体属性，使学生加深掌握使用CSS控制字体，为后续的学习做好铺垫。【通过课堂练习，进一步加深学生掌握使用CSS控制字体】v 练一练制作网站欢迎页面5.任务实施（教学重点）【美化页面文本】01 执行“文件”“打开”命令，将about1.html文件打开。在源代码视图中，将光标移动到top后面，单击“插入”面板上的Div按钮，插入id为crumbs的Div。在代码中输入如图所示的文本。 02 切换到div.css文件中，创建如图所示的id样式。页面效果

10、如图所示。 03 继续在crumbs后插入一个id为main-bg的Div。在div.css中创建一个如图所示的id样式。继续在main-bg中插入一个Div。 04 在div.css中创建类样式。选中新建的Div，在“属性”面板中为其指定类样式。 05 继续在Div中插入一个Div，并修改文本内容。在div.css中创建一个名为ind-title2的类样式。06 在“属性”面板中将ind-title2样式指定给新建Div，应用样式后的页面效果如图所示。07 继续在main-bg后插入一个id为guide-left的Div，并修改文本内容。在div.css中创建如图所示的样式。 08 应用样式

11、后的效果如图所示。继续插入一个id为guide-right的Div，并修改文本内容。在div.css文件中创建如图所示的id样式。 09 创建如图所示的类样式，并将其应用到guide-right上，完成效果如图所示。 10 在div.css中创建如图所示的样式，顶部导航图像显示效果如图所示。 11 执行“文件”“保存”命令，将文件保存为about2.html。单击软件界面右下角的“实时预览”按钮，选择在浏览器中预览，预览效果如图所示。思想、素质教育： 贯穿学生实践过程中（1）培养学生的专业知识和技能能力；（2）使学生在学习专业知识的同时，也能了解党和国家发展的战略思想，进一步增强对中国特色社会

12、主义的信心。（3）引导学生未来就业创业选择电商领域，实现自我价值。6、技能提升【学生学会如何制作网站公告】以小组为单位，学生制作网站公告，教师通过之前所讲的案例制作，使学生掌握通过使用CSS控制文本的样式。 思想、素质教育：贯穿学生实践过程中（1）通过掌握使用CSS控制文本样式，培养学生的创新精神和学习能力；（2）提高知识能力和专业能力；（3）使学生深刻认识国家坚持依法治国的决心，坚信中国特色社会主义法治体系优越性，引导学生自觉遵守法律法规，维护司法公平正义。【展示汇报】随机抽选13个小组进行展示汇报。7.教学评价【组织阶段考核与学生自评互评、展示考核结果】本次课的考核注重过程评价：课上考核包

13、括专业能力与职业素养两方面。展示本次课职业素养评价表，组织学生自评、互评。8小结与作业（课外学习）小结：本节课在教师的带领下，学生们从课前调研到课程实施，通过教师讲解、课堂互动等环节充分学习了如何提高页面用户体验，与理论知识相结合，帮助学生掌握从分析“关于我们”页面结构到美化页面文本的相关知识，做到知己知彼，有的放矢。为后面课程中学生独立完成网页设计工作铺平道路。作业：学生课后可通过网络查看如何使用CSS美化页面的相关知识，开拓视野的同时并加深理解。9.板书设计简单、快捷、规范地制作页面任务二 美化“关于我们”页面文本内容一、 分析任务：分析“关于我们”页面结构二、 知识准备：使用CSS控制字

14、体三、 任务实施：美化页面文本四、 技能提升：制作网站公告五、 教学评价六、 小结、作业课外学习任务及学习指导课前：【教师布置调研任务】调研主题：讨论制作“关于我们”页面中的文本内容以及分析页面中需要包含多少“Div”要求：以小组为单位，讨论制作“关于我们”页面中的文本内容，以及分析页面中需要包含多少“Div”，同时制作汇报PPT（梳理出“关于我们”文本内容页面结构、PPT不得不于8页，图文并茂），提交到“微信群”。【学生调研，教师线上指导】学生采用线上调研的方式，开展调研。教师使用“微信群”对学生进行指导。【教师对各组调研成果进行评价】教师查阅学生调研结果PPT，对每个小组的PPT进行评价，记录评价成绩，并挑选出优秀作品。课后：【学生制作网站公告】小组成员团结协作，通过使用CSS控制文本制作网站公告。教师使用“微信群”对学生进行指导。【学生使用类样式和id样式制作新能源电子商务网站首页帮助导航】学生通过之前所学的知识，使用类样式和id样式完成新能源电子商务网站首页帮助导航的制作。教师使用“微信群”对学生进行。教师设置“制作一个蛋糕网站的弹出页面”主题讨论题目，学生均可参与讨论，分享心得。填表说明：1. 本页可续页；2.教学方法如：项目教学、案例分析、分组讨论、角色扮演、启发引导等；3. 教学手段如：课件演示、模型讲解、实物讲解、挂图讲解、视频讲解、网络课程等。10