DIVCSS布局设计项目一.ppt

《DIVCSS布局设计项目一.ppt》由会员分享，可在线阅读，更多相关《DIVCSS布局设计项目一.ppt（18页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、布局之美我的页面我设计DIV+CSS布局设计 项目一静态网页设计之南京新华电脑专修学院 课件教改系列PART/第一步规划网站划网站我的页面我设计PART/01 规划网站色彩搭配布局设计MAIN MENU主菜单HEADER头部CONTENT主体内容SIDE BAR边条FOOTER脚部功能使用主页菜单链接工作介绍链接公司简介链接论坛社区链接联系方式链接后续扩展动态页面扩展移动设备扩展设计主色调配色的数量对比和调和 轻快到浓烈 南京新华电脑专修学院 课件教改系列PART/02 图例 学生分工图南京新华电脑专修学院 课件教改系列MAIN MENU主菜单40%HEADER头部FOOTER脚部CONTEN

2、T主体内容SIDE BAR边条60%PART/01 图例 时间分配图CONTENT 页面主体SIDE BAR 边条部分MAIN MENU 主菜单HEADER 头部对象FOOTER 脚部对象65%35%主体设计附属设计南京新华电脑专修学院 课件教改系列南京新华电脑专修学院 课件教改系列PART/第二步样式式设计PART/第二步我的页面我设计PART/02 创建模板及文件目录创建HTML模板代码如下：南京新华电脑专修学院 课件教改系列PART/02 创建模板及文件目录创建网站的大框，即建立一个宽100%、高900px的盒子，它将包含网站的所有元素。代码如下：在#boxwidth:100%;heig

3、ht: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;BODY*fnot01全局字体颜色

4、主体样式统一布局PART/02 CSS外部文件详细1Body 主体样式font-family:宋体;font-size:12px;color:#969696;Fnot01 全局字体颜色margin:0px;border:0px;padding:0px;南京新华电脑专修学院 课件教改系列boxtopmain#toppadding-top:10px;margin-left:283px;width:550px;height:20px;font-size:16px;font-family:微微软雅黑雅黑;color:#FFF;#boxwidth:100%;height:900px;background

5、-image:url(./images/2401.jpg);background-repeat:no-repeat;bottom南京新华电脑专修学院 课件教改系列PART/02 CSS外部文件详细2PART/02 CSS外部文件详细2boxtopmain#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

6、;margin-left:95px;bottom南京新华电脑专修学院 课件教改系列PART/第三步页面面设计我的页面我设计PART/03 页面设计剖析图整体设计尾部设计头部设计边条设计南京新华电脑专修学院 课件教改系列主体设计头部设计主体设计PART/03 页面代码分段设计头部代码设计片段：主体代码设计片段：南京新华电脑专修学院 课件教改系列PART/03 页面代码分段设计尾部设计边条设计尾部代码设计片段：南京新华电脑专修学院 课件教改系列其余各组评价页面运行正确性页面完成时效性页面布局合理性B组A组D组C组PART/03 学生分组实现及评比南京新华电脑专修学院 课件教改系列谢谢THANKS我的页面我设计南京新华电脑专修学院 课件教改系列