DIV+CSS布局设计 项目二

布局之美我的页面我设计DIV+CSS布局设计项目二静态网页设计之南京新华电脑专修学院课件教改系列PART/第一步规划网站我的页面我设计PART/01规划网站色彩搭配布局设计MAINMENU主菜单HEADER头部CONTENT主体内容SIDEBAR边条FOOTER脚部功能使用头部图片链接后续扩展动态页面扩展移动设备扩展设计主色调配色的数量对比和调和轻快到浓烈南京新华电脑专修学院课件教改系列PART/02图例学生分工图南京新华电脑专修学院课件教改系列MAINMENU主菜单30%HEADER头部FOOTER脚部CONTENT主体内容70%PART/01图例时间分配图CONTENT页面主体MAINMENU主菜单HEADER头部对象FOOTER脚部对象75%25%主体设计附属设计南京新华电脑专修学院课件教改系列南京新华电脑专修学院课件教改系列PART/第二步样式设计PART/第二步我的页面我设计PART/02创建模板及文件目录创建HTML模板代码如下：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=utf-8/title/title/headbody/body/html南京新华电脑专修学院课件教改系列PART/02创建模板及文件目录创建网站的大框，即建立一个宽1007px、高888px的盒子，它将包含网站的所有元素。代码如下：在linkhref=style/div.cssrel=stylesheettype=text/css/#box{width:1007px;height:888px;margin:auto;}南京新华电脑专修学院课件教改系列#box#span#top#bottom#main#spanPART/02DIV设计布局#bottomspan尾部字段Left/main/right主窗体设计#bottom尾部设计#top头部导航设计南京新华电脑专修学院课件教改系列*统一布局margin:0px;border:0px;padding:0px;BODY*fnot01全局字体颜色主体样式统一布局PART/02CSS外部文件详细1Body主体样式font-family:宋体;font-size:12px;color:#666666;background-image:url(../images/2501.jpg);background-repeat:no-repeat;Fnot01全局字体颜色font-size:18px;font-family:微软雅黑;line-height:30px;color:#5ca900;南京新华电脑专修学院课件教改系列PART/02CSS外部文件详细2boxtopmain#top{width:950px;height:379px;margin:auto;}#box{width:1007px;height:888px;margin:auto;}bottom南京新华电脑专修学院课件教改系列PART/02CSS外部文件详细2#bottom{width:1007;height:89px;color:#000;text-align:center;line-height:20px;background-image:url(../images/2506.png);background-repeat:no-repeat;background-position:centerbottom;border-top:#093dashed1px;margin-top:20px;}#main{width:942px;height:400px;margin:auto;}南京新华电脑专修学院课件教改系列boxtopmainbottom#main-left{width:258px;height:400px;float:left;line-height:20px;margin:0px28px0px28px;}#main-main{width:258px;height:400px;float:left;line-height:20px;margin:0px28px0px28px;}#main-right{width:258px;height:400px;float:left;margin:0px28px0px28px;line-height:20px;}PART/第三步页面设计我的页面我设计PART/03页面设计剖析图整体设计尾部设计头部设计边条设计南京新华电脑专修学院课件教改系列主体设计头部设计主体设计PART/03页面代码分段设计南京新华电脑专修学院课件教改系列头部代码设计片段：主体代码设计片段：PART/03页面代码分段设计尾部设计边条设计南京新华电脑专修学院课件教改系列尾部代码设计片段：其余各组评价页面运行正确性页面完成时效性页面布局合理性B组A组D组C组PART/03学生分组实现及评比南京新华电脑专修学院课件教改系列谢谢THANKS我的页面我设计南京新华电脑专修学院课件教改系列