前端网页设计教学课件作者杜黎强编著第20次课课件幻灯片.pptVIP

第19次课任务实施情况检查 教学实施 教学导入 技能演示 任务实施 完成本次课堂记录文件：任务实施记录总结页(首页-子任务1).doc 第20次课教学内容及实施环节 项目实施：项目2 企业网站开发 任务2 制作首页-子任务1 创建网站首页布局结构文件（HTML/CSS文件） 各组企业网站站点目录结构检查 第19次课教学回顾 Web前端开发(小组分工) 组名 组长 组员（首页） 组员（次页） 梦之意 何雨婷 何雨婷 庄春萍、吴泽婷、张琳琳 李晓莉、梁妙如、邓婕 学渣继承者 林圳娜 林圳娜 戴巧玲、林冰琪、黄琪花、詹丹玲 growl 方浩锐 方浩锐 郑程程、林梓洁、齐睿 郭依纯、黄榕榕 无所谓 温思宇 温思宇 庄佳、蔡玉珍、朱楚铃、刘敏娜 待定 黄康顺 黄康顺 李先懿、许秋明、陈文彬 林文进、苏炳明 Nothing is impossible 蔡晓敏 蔡晓敏 巫明成、庄霖微、王钰萍 郑伶、郑宏锋 D调奢华 杨梨 杨梨 黄晶晶、邱灿鑫、林俊凯 陈琼丽、陈米米 分发本次课所用文件 完成本次课 项目2-任务2-子任务1任务实施记录总结页.doc 项目2-任务2-子任务2任务实施准备页.doc 《网页美工(二)》网站原型设计图 第1组 第3组 第5组 第7组 技能演示： 一、网站首页布局与规划 所有的设计首先是构思与规划，以 “企业”实例网站首页为 例，首页界面截图如下: 技能演示： 一、网站首页布局与规划 回答问题: 根据界面截图来规划页 面的布局，仔细分析该页 面，大致分为几个区域? 1.页眉：包括了Logo、Menu； 2.内容：上部为Banner图片、内容部分又分为两栏； 3.页脚：包括一些版权信息等。 　　 经过分析，就可以很容易的布局了，请大家做下面练习： Header层 Banner层 LeftBar层 Footer层 RightBar层 技能演示： 一、网站首页布局与规划 Container层 Header层 Footer层 Banner层 RightBar层 LeftBar层 第3组企业网站首页布局规划区域图示 Header层 Footer层 Banner层 Pagebody层 Container 层 Header层 Footer层 Banner层 Pagebody2层 Pagebody1层 Pagebody3层 第5组企业网站首页布局规划区域图示 Header SideBar MainBody PageBody Footer 第7组企业网站首页布局规划区域图示 Header层 Footer层 Banner层 Pagebody层 Container 层 Header层 Footer层 Banner层 Pagebody2层 Pagebody1层 Pagebody3层 CSS样式代码结构 DIV样式结构如下： │body?{}　 /*文档主体*/ └#container?{}　 /*页面层容器*/ ├#Header?{}　 /*页面头部*/ ├#Banner{} /*页面banner*/ ? #PageBody?{}　 /*页面主体*/ │　├#Sidebar?{}　 /*侧边栏*/ │　└#MainBody?{} /*主体内容*/ └#Footer?{}　 /*页面底部*/ 页面布局与规划完成后，可以编辑HTML代码和CSS文档 #container{ } #header{ } #footer{} #banner{ } #rightBar{} #leftBar{ } body{ } 技能演示： 二、创建整体层结构与CSS样式 1.创建“CSS+DIV布局”的XHTML网页文档：使用DW或新建记 事本文档，程序代码如下： !DOCTYPE?html?PUBLIC?-//W3C//DTD?XHTML?1.0?Transitional//EN?/TR/xhtml1/DTD/xhtml1-transitional.dtd html?xmlns=/1999/xhtml head meta?http-equiv=Content Type?content=text/html;?charset=gb2312?/ title无标题文档/title link?href=css.css?r