DIVCSS布局设计项目四.ppt

《DIVCSS布局设计项目四.ppt》由会员分享，可在线阅读，更多相关《DIVCSS布局设计项目四.ppt（21页珍藏版）》请在三一办公上搜索。

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

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

3、、高750px的盒子，它将包含网站的所有元素。,代码如下：,在#boxwidth:960px;height:750px;margin:auto;,南京新华电脑专修学院 课件教改系列,#box,#left/right,#top1,#right/01/02,#main,#left/right,#top1,#right/01/02,#main-1/2,PART/02 DIV设计布局,#left-1-2 right-1-2 尾部字段,Left/main/right 主窗体设计,#right01/02 尾部设计,#top/top-1/-2 头部导航设计,南京新华电脑专修学院 课件教改系列,*统一布局ma

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

5、round-repeat:no-repeat;background-position:40px 15px;,#boxwidth:960px;height:750px;margin:auto;,南京新华电脑专修学院 课件教改系列,PART/02 CSS外部文件详细2,#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;backgroun

6、d-image:url(./images/5302.gif);,南京新华电脑专修学院 课件教改系列,PART/02 CSS外部文件详细2,#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;,南京新华电脑专修学院 课件教改系列,PART/02 CSS外部文件详细2,PART/0

7、2 CSS外部文件详细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;,南京新华电脑专修学院 课件教改系列,#top2-1 spanmargin:0px 30px 0px 30px;#top2-2padding-left:6

8、5px;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:27

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