DIV+CSS布局设计 项目一.pptVIP

布局之美 我的页面我设计 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模板 代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title/title /head body /body /html 南京新华电脑专修学院 课件教改系列 PART/02 创建模板及文件目录 创建网站的大框，即建立一个宽100%、高900px的盒子，它将包含网站的所有元素。 代码如下： 在link href=style/div.css rel=stylesheet type=text/css / #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; 南京新华电脑专修学院 课件教改系列 box top main #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; } bottom 南京新华电脑专修学院 课件教改系列 PART/02 CSS外部文件详细2 PART/02 CSS外部文件详细2 box top main #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; } bottom 南京新华