DIVCSS布局设计项目五.ppt
,布局之美,我的页面我设计,DIV+CSS布局设计 项目五,静态网页设计之,南京新华电脑专修学院 课件教改系列,PART/第一步,规划网站,我的页面我设计,PART/01 规划网站,色彩搭配,布局设计,MAIN MENU主菜单HEADER头部CONTENT主体内容SIDE BAR边条FOOTER脚部,功能使用,乐园概况链接新闻中心链接民众搜索链接时尚搜索链接在线招商链接网上购物链接,后续扩展,动态页面扩展移动设备扩展,设计主色调配色的数量对比和调和 轻快到浓烈,南京新华电脑专修学院 课件教改系列,PART/02 图例 学生分工图,南京新华电脑专修学院 课件教改系列,MAIN MENU主菜单,15%,HEADER头部,FOOTER脚部,CONTENT主体内容,85%,边条三大功能展示,PART/01 图例 时间分配图,CONTENT 页面主体边条三大功能展示MAIN MENU 主菜单,HEADER 头部对象FOOTER 脚部对象,85%,15%,主体设计,附属设计,南京新华电脑专修学院 课件教改系列,南京新华电脑专修学院 课件教改系列,PART/第二步,样式设计,PART/第二步,我的页面我设计,PART/02 创建模板及文件目录,创建HTML模板,代码如下：,南京新华电脑专修学院 课件教改系列,PART/02 创建模板及文件目录,创建网站的大框，即建立一个宽784px、高1136px的盒子，它将包含网站的所有元素。,代码如下：,在#boxwidth:784px;height:1136px;margin:auto;,南京新华电脑专修学院 课件教改系列,#box,#left/right,#top1,#menu,#main,#left/right,#top1,#menu,#main-1/2,PART/02 DIV设计布局,#left-1-2 right-1-2 尾部字段,Left/main/right 主窗体设计,#menu 尾部设计,#top/top-1/-2 头部导航设计,南京新华电脑专修学院 课件教改系列,*统一布局margin:0px;border:0px;padding:0px;,BODY,*,Font01/02,全局字体颜色,主体样式,统一布局,PART/02 CSS外部文件详细1,Body 主体样式bodyfont-family:宋体;font-size:12px;color:#666;background-color:#e3e6c7;,Fnot01全局字体颜色.font01 font-weight:bold;font-size:15px;font-family:黑体;,南京新华电脑专修学院 课件教改系列,#topwidth:784px;height:57px;#menu width:784px;height:339px;,#boxwidth:784px;height:1136px;margin:auto;,南京新华电脑专修学院 课件教改系列,PART/02 CSS外部文件详细2,#mainwidth:784px;height:670px;#leftwidth:223px;height:670px;float:left;#left01 width:213px;height:50px;background-color:#efefef;line-height:20px;color:#669900;font-weight:bold;padding-left:10px;padding-top:8px;,南京新华电脑专修学院 课件教改系列,PART/02 CSS外部文件详细2,#left01 img float:right;margin-right:5px;#left02 width:206px;height:180px;background-color:#efefef;line-height:20px;padding-left:17px;padding-top:13px;font-weight:bold;#left02 img margin-bottom:5px;#left03 width:189px;height:220px;background-color:#efefef;line-height:20px;padding:13px 17px 0px 17px;,南京新华电脑专修学院 课件教改系列,PART/02 CSS外部文件详细2,PART/02 CSS外部文件详细2,#right01 dt width:340px;line-height:27px;float:left;background-image:url(./images/tb.gif);background-position:7px 13px;background-repeat:no-repeat;margin-left:20px;border-bottom:#a1a09c dashed 1px;padding-left:20px;,#left03 img margin-bottom:5px;,南京新华电脑专修学院 课件教改系列,#right01 width:510px;height:200px;,#bottomwidth:784px;height:60px;padding-top:20px;,#right02 width:510px;height:402px;margin-top:10px;,PART/第三步,页面设计,我的页面我设计,PART/03 页面设计剖析图,整体设计,尾部设计,头部设计,边条设计,南京新华电脑专修学院 课件教改系列,主体设计,头部设计,主体设计,PART/03 页面代码分段设计,南京新华电脑专修学院 课件教改系列,主体代码设计片段：,PART/03 页面代码分段设计,尾部设计,尾条设计,南京新华电脑专修学院 课件教改系列,尾条代码设计片段：,其余各组评价,页面运行正确性,页面完成时效性,页面布局合理性,B组,A组,D组,C组,PART/03 学生分组实现及评比,南京新华电脑专修学院 课件教改系列,谢谢,THANKS,我的页面我设计,南京新华电脑专修学院 课件教改系列,
