DIVCSS布局设计项目五.ppt

,布局之美,我的页面我设计,DIV+CSS布局设计项目五,静态网页设计之,南京新华电脑专修学院课件教改系列,PART/第一步,规划网站,我的页面我设计,PART/01规划网站,色彩搭配,布局设计,MAINMENU主菜单HEADER头部CONTENT主体内容SIDEBAR边条FOOTER脚部,功能使用,乐园概况链接新闻中心链接民众搜索链接时尚搜索链接在线招商链接网上购物链接,后续扩展,动态页面扩展移动设备扩展,设计主色调配色的数量对比和调和轻快到浓烈,南京新华电脑专修学院课件教改系列,PART/02图例学生分工图,南京新华电脑专修学院课件教改系列,MAINMENU主菜单,15%,HEADER头部,FOOTER脚部,CONTENT主体内容,85%,边条三大功能展示,PART/01图例时间分配图,CONTENT页面主体边条三大功能展示MAINMENU主菜单,HEADER头部对象FOOTER脚部对象,85%,15%,主体设计,附属设计,南京新华电脑专修学院课件教改系列,南京新华电脑专修学院课件教改系列,PART/第二步,样式设计,PART/第二步,我的页面我设计,PART/02创建模板及文件目录,创建HTML模板,代码如下：,南京新华电脑专修学院课件教改系列,PART/02创建模板及文件目录,创建网站的大框，即建立一个宽784px、高1136px的盒子，它将包含网站的所有元素。,代码如下：,在#boxwidth:784px;height:1136px;margin:auto;,南京新华电脑专修学院课件教改系列,#box,#left/right,#top1,#menu,#main,#left/right,#top1,#menu,#main-1/2,PART/02DIV设计布局,#left-1-2right-1-2尾部字段,Left/main/right主窗体设计,#menu尾部设计,#top/top-1/-2头部导航设计,南京新华电脑专修学院课件教改系列,*统一布局margin:0px;border:0px;padding:0px;,BODY,*,Font01/02,全局字体颜色,主体样式,统一布局,PART/02CSS外部文件详细1,Body主体样式bodyfont-family:宋体;font-size:12px;color:#666;background-color:#e3e6c7;,Fnot01全局字体颜色.font01font-weight:bold;font-size:15px;font-family:黑体;,南京新华电脑专修学院课件教改系列,#topwidth:784px;height:57px;#menuwidth:784px;height:339px;,#boxwidth:784px;height:1136px;margin:auto;,南京新华电脑专修学院课件教改系列,PART/02CSS外部文件详细2,#mainwidth:784px;height:670px;#leftwidth:223px;height:670px;float:left;#left01width:213px;height:50px;background-color:#efefef;line-height:20px;color:#669900;font-weight:bold;padding-left:10px;padding-top:8px;,南京新华电脑专修学院课件教改系列,PART/02CSS外部文件详细2,#left01imgfloat:right;margin-right:5px;#left02width:206px;height:180px;background-color:#efefef;line-height:20px;padding-left:17px;padding-top:13px;font-weight:bold;#left02imgmargin-bottom:5px;#left03width:189px;height:220px;background-color:#efefef;line-height:20px;padding:13px17px0px17px;,南京新华电脑专修学院课件教改系列,PART/02CSS外部文件详细2,PART/02CSS外部文件详细2,#right01dtwidth:340px;line-height:27px;float:left;background-image:url(./images/tb.gif);background-position:7px13px;background-repeat:no-repeat;margin-left:20px;border-bottom:#a1a09cdashed1px;padding-left:20px;,#left03imgmargin-bottom:5px;,南京新华电脑专修学院课件教改系列,#right01width:510px;height:200px;,#bottomwidth:784px;height:60px;padding-top:20px;,#right02width:510px;height:402px;margin-top:10px;,PART/第三步,页面设计,我的页面我设计,PART/03页面设计剖析图,整体设计,尾部设计,头部设计,边条设计,南京新华电脑专修学院课件教改系列,主体设计,头部设计,主体设计,PART/03页面代码分段设计,南京新华电脑专修学院课件教改系列,主体代码设计片段：,PART/03页面代码分段设计,尾部设计,尾条设计,南京新华电脑专修学院课件教改系列,尾条代码设计片段：,其余各组评价,页面运行正确性,页面完成时效性,页面布局合理性,B组,A组,D组,C组,PART/03学生分组实现及评比,南京新华电脑专修学院课件教改系列,谢谢,THANKS,我的页面我设计,南京新华电脑专修学院课件教改系列,