HTML5+CSS3+JavaScript Web 前端基础教程电子教案 单元 3 HTML5 排版.docxVIP

PAGE1

PAGE

单元3HTML5排版

课程名称

HTML5+CSS3+JavaScriptWeb前端基础教程

项目名称

HTML5排版技术（表格、列表、框架）

任务名称

HTML5表格、列表与框架的应用

课时

4

项目性质

□演示性□验证性□设计性√综合性

授课班级

授课日期

授课地点

教学目标

知识目标

1．掌握HTML表格（table、tr、th、td）的创建与属性配置；

2．熟悉有序列表（ol）、无序列表（ul）、自定义列表（dl）的使用；

3．了解列表嵌套与iframe框架的应用场景；

4．掌握表格合并（colspan/rowspan）的实现方法。

能力目标

1．能够制作课程表、数据统计表等表格类网页；

2．能够使用列表实现新闻列表、导航菜单等排版；

3．能够使用iframe嵌入外部网页，完成猜你喜欢模块的商品列表排版。

素质目标

1．培养网页排版的逻辑性与美观性思维；

2．养成规范的标签嵌套习惯；

3．提升复杂内容的结构化组织能力；

教学内容

1.任务描述：掌握HTML5排版技术，完成仿写淘宝首页项目的猜你喜欢模块开发；

2.任务展示与实现：

（1）教师演示表格、列表、框架的核心语法与案例；

（2）学生动手制作课程表（含单元格合并）与新闻列表页；

（3）分组开发猜你喜欢商品列表，