前端网页设计第22次课.ppt

第21次课教学回顾 各组企业网站首页设计展示 Web前端开发(小组分工) 组名 组长 组员（首页） 组员（次页） 梦之意 何雨婷 何雨婷 庄春萍、吴泽婷、张琳琳 李晓莉、梁妙如、邓婕 学渣继承者 林圳娜 林圳娜 戴巧玲、林冰琪、黄琪花、詹丹玲 growl 方浩锐 方浩锐 郑程程、林梓洁、齐睿 郭依纯、黄榕榕 无所谓 温思宇 温思宇 庄佳、蔡玉珍、朱楚铃、刘敏娜 待定 黄康顺 黄康顺 李先懿、许秋明、陈文彬 林文进、苏炳明 Nothing is impossible 蔡晓敏 蔡晓敏 巫明成、庄霖微、王钰萍 郑伶、郑宏锋 D调奢华 杨梨 杨梨 黄晶晶、邱灿鑫、林俊凯 陈琼丽、陈米米 分发文件 完成本次课 项目2-任务3-子任务1任务实施记录总结页(制作_______次页).doc 项目2-任务3制作次页--考核评价表.doc 项目2-任务3-子任务2任务实施准备页(制作_______次页).doc 技能演示1、首张次页面布局分析 请根据企业网站实例页面的结构布局、区域划分 及层嵌套关系的分析，根据各组确定的网站主题 使用DW完成企业网站首张次页布局设计 以“关于我们”页面为例，进行结构布局、区域划分及层嵌套关系的分析 Header Left Right PageBody Footer 第一 组 网页布局结构图 #Body{} #Container{} #Header{} #PageBody{} #Left{} #Right{} #Footer{} CSS样式代码结构 实例网站次页面布局分析 创建实例网站次页布局整体层结构与CSS样式 页面整体结构设计完成后在body…/body标记中添加 了DIV的基本结构代码如下：下图为设计视图浏览界面 ? div?id=“container” !--页面层容器-- 　　div?id=“Header” /div !--页面头部-- 　　div?id=“PageBody” !--页面主体-- 　　 div?id=“Sidebar” /div !--侧边栏-- 　　 div?id=MainBody /div !--主体内容-- 　 /div 　　div?id=Footer /div !--页面底部--  /div  ?2.创建css.css文件，编辑CSS代码 文件保存，用浏览器打开，可以看到此XHTML文档基础结 构，即首页页面的框架。 创建实例网站次页布局整体层结构与CSS样式 第三 组 Header Left Right MainBody Footer 网页布局结构图 CSS样式代码结构 #Container{} #Header{} #MainBody{} #MainbodyLeft{} #MainbodyRight{} #MainbodyLefdownt{} #MainbodyRightdown{} #MainbodyLefttop{} #MainbodyRightopt{} #Footer{} Header Left Right MainBody Footer 实例网站次页面布局分析 创建实例网站次页布局整体层结构与CSS样式 1.DIV的基本结构代码如下： div id=container div id=head/div div id=mainbody div id=mainbodyleft div id=mainbodylefttop/div div id=mainbodyleftdown/div /div div id=mainbodyright div id=mainbodyrighttop/div div id=mainbodyrightdown/div /div div id=foot/div /div ?2.创建css.css文件，编辑CSS代码 文件保存，用浏览器打开，可以看到此XHTML文档基础结 构，即首页页面的框架。 创建实例网站次页布局整体层结构与CSS样式 Header Left Right PageBody Footer 第 5 组 网页布局结构图 #Body{} #Container{} #Header{} #PageBody{} #Left{} #Right{} #Footer{} CSS样式代码结构 第 7 组 Header层 Banner层 LeftBar层 F