1、布局之美我的页面我设计DIV+CSS布局设计 项目一静态网页设计之南京新华电脑专修学院 课件教改系列PART/第一步 规划网站我的页面我设计PART/01 规划网站色彩搭配布局设计MAIN MENU主菜单HEADER头部CONTENT主体内容SIDE BAR边条FOOTER脚部功能使用主页菜单链接工作介绍链接公司简介链接论坛社区链接联系方式链接后续扩展动态页面扩展移动设备扩展设计主色调配色的数量对比和调和 轻快到浓烈 南京新华电脑专修学院 课件教改系列PART/02 图例 学生分工图南京新华电脑专修学院 课件教改系列MAIN MENU主菜单40%HEADER头部FOOTER脚部CONTENT主
2、体内容SIDE BAR边条 60%PART/01 图例 时间分配图CONTENT 页面主体SIDE BAR 边条部分MAIN MENU 主菜单HEADER 头部对象FOOTER 脚部对象65%35%主体设计附属设计南京新华电脑专修学院 课件教改系列南京新华电脑专修学院 课件教改系列PART/第二步 样式设计第二步我的页面我设计PART/02 创建模板及文件目录创建 HTML模板代码如下： 南京新华电脑专修学院 课件教改系列PART/02 创建模板及文件目录创建网站的大框，即建立一个宽 100%、高 900px的盒子，它将包含网站的所有元素。 代码如下： 在 #boxwidth:100%;hei
3、ght: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全局字体颜色主体样式统一布局PART/02 CSS外部文件详细 1Body 主体样式font-family:“宋体 “;font-size:12px;color:#969696;Fnot01 全局字体颜色margin:0px;border:0px;padding:0px;南京新华电脑专修学院 课件教改系列
