DIVCSS布局设计项目一.ppt

,布局之美,我的页面我设计,DIV+CSS布局设计项目一,静态网页设计之,南京新华电脑专修学院课件教改系列,PART/第一步,规划网站,我的页面我设计,PART/01规划网站,色彩搭配,布局设计,MAINMENU主菜单HEADER头部CONTENT主体内容SIDEBAR边条FOOTER脚部,功能使用,主页菜单链接工作介绍链接公司简介链接论坛社区链接联系方式链接,后续扩展,动态页面扩展移动设备扩展,设计主色调配色的数量对比和调和轻快到浓烈,南京新华电脑专修学院课件教改系列,PART/02图例学生分工图,南京新华电脑专修学院课件教改系列,MAINMENU主菜单,40%,HEADER头部,FOOTER脚部,CONTENT主体内容,SIDEBAR边条,60%,PART/01图例时间分配图,CONTENT页面主体SIDEBAR边条部分,MAINMENU主菜单HEADER头部对象FOOTER脚部对象,65%,35%,主体设计,附属设计,南京新华电脑专修学院课件教改系列,南京新华电脑专修学院课件教改系列,PART/第二步,样式设计,PART/第二步,我的页面我设计,PART/02创建模板及文件目录,创建HTML模板,代码如下：,南京新华电脑专修学院课件教改系列,PART/02创建模板及文件目录,创建网站的大框，即建立一个宽100%、高900px的盒子，它将包含网站的所有元素。,代码如下：,在#boxwidth:100%;height:900px;background-image:url(./images/2401.jpg);background-repeat:no-repeat;,南京新华电脑专修学院课件教改系列,#box,#span,#top,#bottom,#main,#span,#top,#bottom,#main,PART/02DIV设计布局,#bottomspan尾部字段,Left/main/right主窗体设计,#bottom尾部设计,#top头部导航设计,南京新华电脑专修学院课件教改系列,*统一布局margin:0px;border:0px;padding:0px;,BODY,*,fnot01,全局字体颜色,主体样式,统一布局,PART/02CSS外部文件详细1,Body主体样式font-family:宋体;font-size:12px;color:#969696;,Fnot01全局字体颜色margin:0px;border:0px;padding:0px;,南京新华电脑专修学院课件教改系列,#toppadding-top:10px;margin-left:283px;width:550px;height:20px;font-size:16px;font-family:微软雅黑;color:#FFF;,#boxwidth:100%;height:900px;background-image:url(./images/2401.jpg);background-repeat:no-repeat;,南京新华电脑专修学院课件教改系列,PART/02CSS外部文件详细2,PART/02CSS外部文件详细2,#bottomwidth:100%;height:100px;background-image:url(./images/2406.png);background-repeat:repeat-x;color:#000;text-align:center;line-height:20px;,#mainwidth:830px;height:390px;margin-left:95px;,南京新华电脑专修学院课件教改系列,PART/第三步,页面设计,我的页面我设计,PART/03页面设计剖析图,整体设计,尾部设计,头部设计,边条设计,南京新华电脑专修学院课件教改系列,主体设计,头部设计,主体设计,PART/03页面代码分段设计,头部代码设计片段：,主体代码设计片段：,南京新华电脑专修学院课件教改系列,PART/03页面代码分段设计,尾部设计,边条设计,尾部代码设计片段：,南京新华电脑专修学院课件教改系列,其余各组评价,页面运行正确性,页面完成时效性,页面布局合理性,B组,A组,D组,C组,PART/03学生分组实现及评比,南京新华电脑专修学院课件教改系列,谢谢,THANKS,我的页面我设计,南京新华电脑专修学院课件教改系列,