HTML_T6教案

《使用HTML语言开发商业网站》理论课 第六章  网站和页面布局技术（一） 一、整章授课思路 [100分钟]    2 1.    回顾、预习检查、任务、目标部分 [10分钟]    2 2.    网站开发的流程介绍[10分钟]    2 3.    页面布局-框架布局[10分钟]    3 4.    课堂练习1[10分钟]    3 5.    页面布局-表格布局[10分钟]    3 6.    课堂练习2[10分钟]    3 7.    页面布局-层布局[20分钟]    3 8.    课堂练习3[15分钟]    4 9.    总结  [5分钟]    4 二、    学员问题汇总    4 三、    作业布置    4 课时：2学时 授课人：粟永登 ? 本章工作任务 ? 制作首页的淘宝集市部分 ? 制作首页的导航部分 ? 设计首页的整体布局 ? 创建淘宝网站点 ? 本章技能目标 ? 能使用DIV层技术进行页面整体布局 ? 能使用表格进行图文内容的布局（导航栏、淘宝集市页） ? 能使用网站设计流程简单网站的设计 ? 本章重点 ? 熟悉网站开发的流程 ? 网站开发的一些经验、技巧 ? DIV层和表格布局各自的使用场合 ? 本章难点 1) 如何进行网页布局 一、整章授课思路 [100分钟] 主要采用边讲边练的方式，讲解顺序如下： 1. 网站开发的流程介绍 2. 制作淘宝网案例讲解，使用Dreamweaver创建站点 3. 以制作淘宝网首页为例，引出讲解3种常用的页面布局——框架布局、表格布局、层布局，每种布局都穿插课堂练习 注意：1.讲解重点主要是各种布局的优缺点、使用场合和相互对比，需要教员课堂现场演示 2. 课堂练习提供了页面素材和图片素材，让学员在素材基础上制作，否则会影响课堂进度 1. 回顾、预习检查、任务、目标部分 [10分钟] 根据中的问题，逐一提问，注意给予学员引导，建立学员信心 2. 网站开发的流程介绍[10分钟] ? 讲解要点： 1) 网站开发的流程介绍：需求分析、网站制作、测试网页、发布网站 2) 结合淘宝网案例讲解如何进行需求分析、创建站点，后续内容并在第7章以淘宝网为例，讲解如何制作淘宝网的6个典型页面：首页、某类商品展示页、具体商品的详细介绍页、购买页、注册页面、登录页面、客户中心页（用户使用帮助），中间穿插讲解页面布局、页面模板等技术。 ? 课堂案例：课堂案例\网站开发流程\ 3. 页面布局-框架布局[10分钟] ? 讲解要点： 1) 以淘宝网首页内容为例，引出页面需求设计：页面布局的问题。 2) 简介框架布局，以前讲过 3) 演示制作实例 4) 总结框架布局的优缺点及适用场合 框架实际工作中用得不是很多，可以稍微省略 ? 课堂案例：课堂案例\制作淘宝网首页 4. 课堂练习1[10分钟] ? 课堂案例：课堂案例\制作淘宝网首页\课堂练习1 有棉业素材、练习和答案素材 5. 页面布局-表格布局[10分钟] ? 讲解要点： 1) 介绍表格布局 2) 演示制作实例 3) 总结表格布局的优缺点及适用场合 ? 课堂案例：课堂案例\制作淘宝网首页\表格布局 6. 课堂练习2[10分钟] ? 课堂案例：课堂案例\制作淘宝网首页\课堂练习2 7. 页面布局-层布局[20分钟] ? 讲解要点： 1) 如何布局页面内容不规则的页面？使用表格布局将涉及表格多层嵌套问题，非常麻烦，最开始表格设计的目的就是存放数据而不是做布局的，从而引出层DIV布局 2) 以制作淘宝网首页为例，现场演示如何进行DIV布局：先规划分几个层，然后在Dreamweaver中绘制层。 3) 介绍层布局的原理：采用DIV+CSS ，能实现样式和内容的分离，层内容的精确定位；和表格布局相比，不会因为某个表格的内容改变而牵连相邻表格。所以方便分块设计，某块的设计不会影响相邻块。层布局的优点请参考补充案例。 4) 最佳布局：层布局是一种趋势，但现在有很多网站走极端，整个页面全部用层布局，这样造成的问题是操作过于麻烦，所以最佳的方式是采用DIV+Table 布局，这样更实用，同时发挥了层布局、表格布局的优势 5) 以制作淘宝网首页的head层内的导航部分为例，演示层套表格的布局制作。 ? 课堂案例：课堂案例\制作淘宝网首页\DIV布局 ? 补充材料： 层布局是W3C组织推荐的WEB，相关案例参考：补充案例目录 8. 课堂练习3[15分钟] 练习层套表格布局，制作content 层淘宝集市部分 ? 课堂案例：课堂案例\制作淘宝网首页\课堂练习3 9. 总结  [5分钟] ? 根据PPT上的问题，对本次课进行总结。以提问方式检验学员学习效果。 一、 学员问题汇总 ? 问题1：。。。。。。 答：。。。。。。 ? 问题2：。。。。。。 答：。。。。。。 ? 问题3：。。。。。。 答：。。。。。。 二、 作业布置 ? 预习作业： 1）。。。。。 2）。。。。 ? 复习作业： 1）补充作业1：。。。。。。。 2）补充作业2：。。。。。。。