DIVCSS布局设计项目一.ppt

,布局之美,我的页面我设计,DIV+CSS布局设计 项目一,静态网页设计之,南京新华电脑专修学院 课件教改系列,PART/第一步,规划网站,我的页面我设计,PART/01 规划网站,色彩搭配,布局设计,MAIN MENU主菜单 HEADER头部 CONTENT主体内容 SIDE BAR边条 FOOTER脚部,功能使用,主页菜单链接 工作介绍链接 公司简介链接 论坛社区链接 联系方式链接,后续扩展,动态页面扩展 移动设备扩展,设计主色调 配色的数量 对比和调和 轻快到浓烈,南京新华电脑专修学院 课件教改系列,PART/02 图例 学生分工图,南京新华电脑专修学院 课件教改系列,MAIN MENU主菜单,40%,HEADER头部,FOOTER脚部,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 width:100%; height:900px; background-image:url(/images/2401.jpg); background-repeat:no-repeat; ,南京新华电脑专修学院 课件教改系列,#box,#span,#top,#bottom,#main,# span,# top,# bottom,# main,PART/02 DIV设计布局,#bottom span 尾部字段,Left/main/right 主窗体设计,#bottom 尾部设计,#top 头部导航设计,南京新华电脑专修学院 课件教改系列,* 统一布局 margin:0px; border:0px; padding:0px;,BODY,*,fnot01,全局字体颜色,主体样式,统一布局,PART/02 CSS外部文件详细1,Body 主体样式 font-family:“宋体“; font-size:12px; color:#969696;,Fnot01 全局字体颜色 margin:0px; border:0px; padding:0px;,南京新华电脑专修学院 课件教改系列,#top padding-top: 10px; margin-left:283px; width:550px; height:20px; font-size:16px; font-family:“微软雅黑“; color:#FFF; ,#box width:100%; height:900px; background-image:url(/images/2401.jpg); background-repeat:no-repeat; ,南京新华电脑专修学院 课件教改系列,PART/02 CSS外部文件详细2,PART/02 CSS外部文件详细2,#bottom width:100%; height:100px; background-image:url(/images/2406.png); background-repeat:repeat-x; color:#000; text-align:center; line-height:20px; ,#main width:830px; height:390px; margin-left:95px; ,南京新华电脑专修学院 课件教改系列,PART/第三步,页面设计,我的页面我设计,PART/03 页面设计剖析图,整体设计,尾部设计,头部设计,边条设计,南京新华电脑专修学院 课件教改系列,主体设计,头部设计,主体设计,PART/03 页面代码分段设计,头部代码设计片段：,主体代码设计片段：,南京新华电脑专修学院 课件教改系列,PART/03 页面代码分段设计,尾部设计,边条设计,尾部代码设计片段：,南京新华电脑专修学院 课件教改系列,其余各组评价,页面运行正确性,页面完