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