Web编程基础（HTML+CSS）项目实战教程教案-模块8 企业级项目综合应用2-制作新闻详情页面.docx

《Web编程基础（HTML+CSS）项目实战教程教案-模块8 企业级项目综合应用2-制作新闻详情页面.docx》由会员分享，可在线阅读，更多相关《Web编程基础（HTML+CSS）项目实战教程教案-模块8 企业级项目综合应用2-制作新闻详情页面.docx（5页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、模块8企业级工程综合应用课程名称Web编程基础课 时2课时授课班级软件技术、计算机应用、移动开发专业授课地点一体化教室授课形式做学教一体教学单元模块8-2制作新闻详情页面教学目标知识目标掌握复杂HTML页面分析的方法； 掌握复杂页面的实现技巧。能力目标能够设计制作复杂页面。素质目标激发学生学习兴趣引导学生团队合作教学重点难 点及措施教学重难点：复杂HTML页面分析的方法；复杂页面的实现技巧。措施：通过上机操作加强学习和补充案例进行巩固。教学方法做学教一体任务驱动线上线下混合教学教学任务制作新闻详情页面任务 1:制 作新 闻详 情页教学环节教学内容教学 方式学生活动新课 引入对于新闻网站而言，新

2、闻详情页面是必不可 少的。常见的新闻详情页面除了包含新闻的详细 内容之外，还应当支持新闻搜索和新闻评论。讲授思考 参与 讨论1*1*格由。制3K部。斗ANr赵昌华191：+吃，。入。与，小1已WAg. *，.*祭司.卜断大，-a,我一仔。*，小一与的工/卫”气台* 彳壬、*；*尹打,八，力子,HATN今占二奈，三，?!. %tinwT*r.公配才5天2小寄口蜀小力口以”电 的海了. u-we .、!：1i-.aixiss, *二!*：,工区a?fi. *n-tttl. 通 二举外 1ovss. B 14- Ht15. 风*血 a. tttnay 会“721?至、图个4宜t白是“/晶Me用.*.

3、 R9.更实.diK.累子.自8，, 就及*伸企amr:Y8MIIMl.tW. 1*不3柳才.认真 听讲 做好 笔记图8-4新闻详情页效果新知讲解1 .整体布局分析实现新闻详情页面采用了上中下结构：最上面是 讲授 头部，由左侧的Logo和右侧的新闻搜索区域组 成；页面中间的是主体内容，包括新闻详情、用户评论和添加评论三个局部；最下面的是版权信 息。整个页面可以采用三个div来实现，其主要 结构的HTML代码如下：内容v/divdiv class=footer版权信息v/div2 .头部的实现头部包括左侧的Log。图片和右侧的新闻搜索区, 可以通过嵌套的两个div来实现它们。3 .内容局部的实现

4、给出参考的解决方案；考核学生训练结果。内容局部包括新闻详情、用户评论和添加评 论局部，可以通过在info_content中嵌套三个div 来实现，其HTML代码结构如下： 新 闻 详 情 用 户评论 添力 评论4.版权信息局部的实现页面底部是版权信息局部，可以通过在footer 层中嵌套段落p来实现，其HTML代码如下：Copyright © 2021-2025 Web 编 程基础(HTML+CSS)课程组·版权所 有 v/p课堂实践学生做中学，教师巡视逐个指导，并监督、验收。 集中问题集体讲解、评估讨论实训任务实施过 程；教师 巡视 单独 指导动手 实践，做中 学小结

5、巩固本课时知识点学完知识点后，教师带着学生对本课时所学知识 点进行回顾。1 .熟练掌握浮动和定位的使用方法；2 .掌握复杂HTML页面分析的方法；3 .掌握复杂页面的实现技巧。通过网络教学平台预习新内容通过网络教学资源平台，预习综合工程整体设计 开发。演示 归纳 讲解认真 听取 教师 总结 评价教学评价1 .教师巡回指导学生课程过程中出现的问题，并予以指导。2 .教师根据巡回指导过程中发现的情况，进行全过程评价并总结。3 .学生实训过程中，以小组为单位，解决不了难点向老师请教。4 .小组完成情况，实现相互评价，取长补短。5 .学生认真听取教师全过程评价和总结。布置作业学习平台完成线上预习、讨论、过程性考核教学反思通过前面几章的学习，我们掌握了 HTML标记和CSS样式的 基本使用方法，能够使用它们完成常见的页面布局和进行页面设 计。本章将通过三个企业生产性工程，进一步提升网页设计的能 力。