DIVCSS布局设计项目四.ppt

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

1、布局之美我的页面我设计DIV+CSS布局设计 项目四静态网页设计之南京新华电脑专修学院 课件教改系列PART/第一步规划网站规划网站我的页面我设计PART/01 规划网站色彩搭配布局设计MAIN MENU主菜单HEADER头部CONTENT主体内容SIDE BAR边条FOOTER脚部功能使用公司首页链接新闻中心链接加盟中心链接下载专区链接网站咨询链接服务项目链接后续扩展动态页面扩展移动设备扩展设计主色调配色的数量对比和调和 轻快到浓烈 南京新华电脑专修学院 课件教改系列PART/02 图例 学生分工图南京新华电脑专修学院 课件教改系列MAIN MENU主菜单25%HEADER头部FOOTER脚

2、部CONTENT主体内容75%CONTENT两大展示PART/01 图例 时间分配图CONTENT 页面主体CONTENT 五大功能MAIN MENU 主菜单HEADER 头部对象FOOTER 脚部对象85%15%主体设计附属设计南京新华电脑专修学院 课件教改系列南京新华电脑专修学院 课件教改系列PART/第二步样式设计样式设计PART/第二步我的页面我设计PART/02 创建模板及文件目录创建HTML模板代码如下：南京新华电脑专修学院 课件教改系列PART/02 创建模板及文件目录创建网站的大框，即建立一个宽960px、高750px的盒子，它将包含网站的所有元素。代码如下：在#boxwidt

3、h:960px;height:750px;margin:auto;南京新华电脑专修学院 课件教改系列#box#left/right#top1#right/01/02#main#left/right#top1#right/01/02#main-1/2PART/02 DIV设计布局#left-1-2 right-1-2 尾部字段尾部字段Left/main/right 主窗体设计主窗体设计#right01/02 尾尾部设计部设计#top/top-1/-2 头部导航设计头部导航设计南京新华电脑专修学院 课件教改系列*统一布局margin:0px;border:0px;padding:0px;BODY*

4、Font01/02全局字体颜色主体样式统一布局PART/02 CSS外部文件详细1Body 主体样式bodyfont-family:宋体宋体;font-size:12px;color:#333;Fnot01全局字体颜色.font1/2font-size:13px;font-weight:bold;color:#76b924;南京新华电脑专修学院 课件教改系列boxtopmain#topwidth:960px;height:103px;background-image:url(./images/5301.gif);background-repeat:no-repeat;background-po

5、sition:40px 15px;#boxwidth:960px;height:750px;margin:auto;bottom南京新华电脑专修学院 课件教改系列PART/02 CSS外部文件详细2boxtopmain#top1width:180px;height:20px;float:right;padding:12px 5px 0px 0px;#top1 spanmargin:0px 5px 0px 5px;#top2width:730px;height:71px;margin-left:230px;float:right;background-image:url(./images/530

6、2.gif);bottom南京新华电脑专修学院 课件教改系列PART/02 CSS外部文件详细2boxtopmain#top2 margin:auto;width:960px;height:40px;font-family:微软雅黑微软雅黑;font-size:18px;color:#144c81;#top2 li width:100px;height:25px;float:left;list-style-type:none;text-align:center;margin-top:10px;bottom南京新华电脑专修学院 课件教改系列PART/02 CSS外部文件详细2PART/02 CS

7、S外部文件详细2#main1width:960px;height:383px;background-image:url(./images/5303.gif);background-repeat:no-repeat;#left1width:727px;height:383px;float:left;margin-left:6px;#top2-1height:27px;margin-left:88px;margin-top:19px;南京新华电脑专修学院 课件教改系列boxtopmainbottom#top2-1 spanmargin:0px 30px 0px 30px;#top2-2paddin

8、g-left:65px;margin-top:5px;#top2-2 spanmargin:0px 15px 0px 15px;#right1width:227px;height:383px;float:right;PART/02 CSS外部文件详细2#right1-1width:197px;height:127px;background-image:Url(./images/5304.gif);background-repeat:no-repeat;padding-top:45px;padding-left:30px;#right1-1 liheight:19px;#top2-1height

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