电子商务网页设计与制作 教案 项目七 设置DIV+CSS布局（任务单）.doc

项目七 DIV+CSS布局设置 项目编号：WYSJ-07 学 时： 指导老师： 日 期： 项目简介 网页布局是根据网页规划而作出的对网页栏目、网页元素等的具体排版。网页布局有利于对网页的总体把握。采用DIV+CSS的布局方法有很多优点，如结构清晰、可以缩短页面代码、具有强大的字体控制和排版能力、提高易用性、表现和内容相分离，可以更好的控制页面布局等等。因此在网站首页布局和美化时采用DIV+CSS布局是一种常用和高效的方法，也是一个建设优秀网站的基础。 本项目要求利用div+css样式技术完成学院创业园网页的效果。 项目目标 1. 能力目标： 学习完本项目后，学生应当能够依据公司项目要求完成首页DIV+CSS布局和CSS页面美化，包括： （1）学会利用“DIV+CSS”完成页面的布局，灵活运用该技术的布局思路及方法； （2）解决“DIV+CSS”的浏览器兼容问题。 （3）学会使用“模板和库”进行网页的布局。 2. 知识目标： （1）网页布局常用结构 （2）DIV基本概概念 （3）CSS的语法及使用方法 3. 态度目标： （1）具有思考、探究问题的自觉性、主动性和创新性； （2）具备良好的沟通、表达能力； （3）具备良好的团队合作精神。 项目内容 任务一：制作创业园网站的首页 任务二：DIV+CSS制作网站子页 教学形式 1、学生两人一组进行讨论、分工及制作 2、各任务的实施（过程中教师进行分析指导，并讲解所涉及的相关知识） 3、小组交流汇报 任务一 “制作创业园网站的首页”任务单 任务编号：WYSJ-07-01 学 时： 实训地点： 日 期： 小组 姓名： 班级： 学号： 任务描述 本任务目标通过DIV+CSS的方式，利用Dreamweaver来编辑完成使用DIV+CSS技术，完成网页首页的制作，效果如图所示。 任务执行流程图 根据目标页进行排版构架 根据目标页进行排版构架 创建一个网页文件 按从上到下从左到右的顺序对各构架细化 对各DIV区块创建对应的CSS样式 保存页面预览效果 往划分出来的DIV区块中填充网页元素 三、任务分配（由学生填写） 任务实施 五、任务小结 请写出在制作过程中遇到的问题及解决办法。 六、任务执行评价： （根据任务完成的质量、及时度、报告的编写质量给出成绩 （100制），作为本项目总成绩评定时的依据之一） 成绩： 　 日期：　　年　　月　　日 七、任务拓展 任务二 “DIV+CSS制作网站子页”任务单 任务编号：WYSJ-07-02 学 时： 实训地点： 日 期： 小组 姓名： 班级： 学号： 任务描述 本任务目标通过DIV+CSS的方式，利用Dreamweaver来编辑完成杭州惠恒科技有限公司的工程案例子页面，效果如下图所示。 “工程案例”页面效果图 任务执行流程图 1．绘制首页结构布局图 2．制定任务执行流程 根据目标页进行排版构架 根据目标页进行排版构架 创建一个网页文件 按从上到下从左到右的顺序对各构架细化 对各DIV区块创建对应的CSS样式 保存页面预览效果 往划分出来的DIV区块中填充网页元素 三、任务分配（由学生填写） 四、任务实施 （1）排版构架，通过对目标页面的分析，可将版面最外层分成4块组成，分别标为“banner”、“left”、“main”和“bottom”，如图5-X所示： （2）通过Dreamweaver新建一空白页“gcal.html”。切换到“代码页面”，按上面的版面构架图在body中，输入最外层DIV布局，可通过“插入工具栏”中“插入DIV标签”按钮输入，如图所示。 “代码页面”中参考输入如下： body div id=container div id=banner/div div id=left/div div id=main/div div id=bottom/div /div /body （3）将最初的构架划分好后，再对各个模块按从上到下，从左到右的顺序，依次再细分。“#banner”区块为网页顶部，主要存放logo、导航栏、flash广告等。因此可依次再划分4个DIV块，作为“#banner”的子DIV块，如图所示。 并在“gcal.html”的“代码页面”中，改写相关代码如下： body div id=container div id=banner div id=logo/div div id=dh/div div id=flashd