W3C网页标准之网页布局学习任务书.doc

附件一：DIV+CSS浮动布局复杂页面工作任务书工作背景 某知名线下食品连锁店计划开展电子商务业务，主要通过独立B2C站点进行产品销售，后台与前台开发同步进行，目前已经完成了页面模板的设计。你作为网页前端开发人员需要着手进行页面的前台编码工作，页面必须采用DIV+CSS布局完成，要求代码规范、格式良好，能跨浏览器兼容运行。工作目标1、 完成页面布局草图的绘制。2、 完成页面各模块参数的测量。3、 完成页面布局DIV+CSS代码的编写。学习目标1、 能够对设计稿进行分析，并合理划分页面模块。2、 能够使用Photoshop准确测量页面模块宽度、高度、外边距等参数。3、 能够使用Photoshop绘制页面布局草图。4、 能够编写DIV+CSS代码实现页面简单布局。5、 能配合组长工作，与小组成员紧密合作，提高团队合作能力。浏览器中最终参考效果图如下：知识点准备通过观看教师下发的微课视频，填空回答下面的问题。 1、在宽度符合条件的情况下，假设需要将上图中左边布局通过浮动设置成右边布局，那么，需要先写 模块的div标签，然后设置A模块 浮动，B模块 浮动，C模块 浮动。 2、在宽度符合条件的情况下，如果需要设置成以上布局，那么，需要先写 模块的div标签，然后设置A模块 浮动，B模块 浮动，C模块 浮动。3、如果需要完成以上布局，需要先划分 个大模块，并统一做左或右浮动使其水平排列，再在中间的div中，插入B、C两个div模块。4、如果页面中有浮动的元素，为了使浮动元素在页面居中，必须先设置body的宽度，并书写居中代码：* margin: ; padding: ;5、网页中表示宽度、高度等属性时，通常使用 为单位，浮动的英文单词是 网站首页设计图示例（PSD源文件在下发的素材中）任务过程（空白部分用于记录该过程相关内容）1、小组讨论划分模块并手绘示意图（下面空白区用于草稿）2、 组长组织小组成员测量各模块宽度高度和边距，并记录到下表中模块名称宽度高度外边距（上右下左）3、根据记录，小组成员使用纸笔在画板上绘制布局草图，要求在模块上注明模块名称和宽度、高度等数据，绘制清晰完整。4、编写div+css代码实现页面布局，代码格式良好，命名规范，布局效果与模板高度一致，参数精准。5、小组挑选出小组最佳作品，将网站源文件（包括模板图）放到独立文件夹中，重命名为“第几组+该作品作者名称”，使用飞秋提交到教师机。附件二：评价表 评价人： 日期： 年 月 日名称过程评价细则小组评价 对象标准第一组第二组第三组第四组第五组1、 页面布局草图绘制结构清晰，版块名称和大小等信息记录完整（20分）2、 模块划分合理，作品最终效果与模板实际布局一致（20分）3、 DIV+CSS代码编写规范合理、格式良好（30分）4、 工作效率高，能快速完成工作任务（20分）5、 小组讨论积极，学习氛围好，能共同学习，相互促进（10分）得分个人评价（组长课后填写） 评分项 对象1、上课认真听讲，认真完成练习（20分）2、能够与小组成员很好的协调合作，