HTML5+CSS3网页设计实战 教案 1.3 基础练习

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。2本章基础练习该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：掌握新建基本HTML项目。掌握网站常见页面文件的命名规则。掌握常规Hbuilder快捷键操作。能力目标：具备使用Hbuilder创建项目及相关结构的能力。具备Hbuilder中使用快捷键提高编码速度的能力。素养目标：激发创新思维与探索精神：鼓励学生在Hbuilder中查找快捷键功能，不断探索新知，培养解决问题的能力。（2）强调学习程序需要通过大量的代码输入练习，方能“唯手熟尔”。Hbuilder软件相关操作网站常见页面文件的命名规则，常规Hbuilder快捷键操作。通过观察企业或校园网各页面的命名来让学生了解文件命名规则。通过类比window或其他软件的快捷键来关联hbuilder快捷键。常规Hbuilder快捷键操作。通过类比window或其他软件的快捷键来关联hbuilder快捷键。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习使用百度搜索引擎，关键字应该如何选择？回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入欧阳修的《卖油翁》卖油翁：“无他，但手熟尔。”听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示强调Hbuilder快捷键操作知识讲授1. 网站常见页面的命名。首页、新闻栏目页、企业介绍页，分别为index.html、news.html、about_us.html（或者profile.html）2. 键盘输入技巧3. 尽可能双手脱离鼠标，操作都采用键盘去执行。☆思政讲解：有些同学手机打字、聊天发表情的速度贼快，但让他在电脑当中打字犹如云泥之别。部分同学的观点：（1）未来语音识别技术成熟，完全可以考语音录入。（2）个人拼音基础差，无法做到快速打字，干脆不学。反驳观点（1）：比如在公司内，一堆人用麦克风进行文字录入，像不像一大堆客服人员不停接电话，市场般吵闹。反驳观点（2）拼音不行，五笔输入法来凑。4. 强调绝大部分的标签成对出现，利用自动代码提示功能完成结束标签的生成。5. 在指定的浏览器中运行网页。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施使用Hbuilder新建基本HTML项目，整理相关目录及文件，并通过常规快捷键的操作完成指定的代码。【练习1】：Hbuilder新建一个基本HTML项目，并将所需图片放置在img文件夹。【练习2】在D盘创建一个website的文件夹，然后在Hbuilder中打开该目录，陆续新建3个空白html文档，如图1-21所示。拟定分别为网站的首页、新闻栏目页、企业介绍页，将这些文档分别保存为index.html、news.html、about_us.html（或者profile.html）。【练习3】Hbuilder快捷键操作实践。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展在hbuilder软件的“工具”——“自定义快捷键”命令中，可以查看更多的快捷键，也可以自行定义（但不推荐）。教师演示个性化教学，旨在给学习能力强的同学提供课外学习资料。任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分网站结构文件及文件夹命名及位置正确。20HTML代码的编写快速无误输入代码。30CSS代码的编写能以正确缩进形式输入正确代码。30快捷键运用以标准手势输入快捷键。20总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课的学习：（1）掌握新建基本HTML项目。（2）掌握网站常见页面文件的命名规则。（3）掌握常规Hbuilder快捷键操作，提高编码速度。（4）