主页页面布局--Div+CSS.docVIP

班 级 高二（6）班 执教者 黄先科 课时安排 1 课 题 Div+CSS布局实例 上课地点 3号机房 教 学 目 的 1. 通过学习使学生能够运用Div+CSS进行主页页布局。 2. 培养学生对网页设计技术的兴趣，增强学生的审美意识和创新意识。 3. 教育学生理解与网页制作技术相关的文化、伦理和社会等问题，正确地使用网页制作技术。 教学重点 Div+CSS样式设计 教学难点 CSS样式设计中基本参数的应用 教 具 电子教室 课程类型 上机操作 教学方法 演示、讨论、任务分层 教学过程 主 要 教 学 内 容 教学方法 运 用 引入 1、导语：随着网页技术的发展，人们的学习、生活和工作方式，正在发生改变。作为一名网页设计者，怎么样才能使自己设计的网页，让人在浏览时有愉悦的体验呢？那么合理的网页页面布局起了先决作用。 2、展示几张页面布局较有代表性的网页。回顾前面学习的两种网页布局技术：表格布局和Div+CSS布局。 二、任务提出 1．“网店主页页面布局”任务 1）展示网店“阿伏萝得”主页并分析页面布局。 2）提出任务：如何用Div+CSS实现网店主页页面布局？ 3）页面分析：整个页面是由Div层和CSS样式表构建而成。 页面组成部分：网页顶部top、网页主体main和网页底部bottom。 4）技术处理：先完成Div层的插入和命名，再设计CSS样式表。 Div层结构： div id=box div id=top/div div id=main div id=banner/div div id=left/div div id=right/div /div div id=bottom/div /div CSS样式： #top{ },#top{ },#main{ },#banner{ },#left{ },#right{ },#bottom{ } 2．师生展演 该过程以教师为主导，学生为主体，教师协作学生完成页面设计过程。对过程中遇到的技术难点给予及时的点拔。 三、实践操作 这是一个过程是教师主导，学生自主学习、协作学习的过程。 四、鉴赏评价 在规定的时间内，每个小组完成了任务。作品风格各异，布局、审美、制作无不体现了各小组成员的智慧和汗水。每个小组派一名同学，讲述自己小组。 情境教学法 案例分析法 点拔引导法 任务驱动法 演示教学法、 点拔引导法 点拔引导法 课 堂 小 结 。 。 。 布 置 作 业 。 教 学 后 记