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

布局之美 我的页面我设计 DIV+CSS布局设计 项目二 静态网页设计之 南京新华电脑专修学院 课件教改系列 PART/第一步 规划网站 我的页面我设计 PART/01 规划网站 色彩搭配 布局设计 MAIN MENU主菜单 HEADER头部 CONTENT主体内容 SIDE BAR边条 FOOTER脚部 功能使用 头部图片链接 后续扩展 动态页面扩展 移动设备扩展 设计主色调 配色的数量 对比和调和 轻快到浓烈 南京新华电脑专修学院 课件教改系列 PART/02 图例 学生分工图 南京新华电脑专修学院 课件教改系列 MAIN MENU主菜单 30% HEADER头部 FOOTER脚部 CONTENT主体内容 70% PART/01 图例 时间分配图 CONTENT 页面主体 MAIN MENU 主菜单 HEADER 头部对象 FOOTER 脚部对象 75% 25% 主体设计 附属设计 南京新华电脑专修学院 课件教改系列 南京新华电脑专修学院 课件教改系列 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 创建模板及文件目录 创建网站的大框，即建立一个宽1007px、高888px的盒子，它将包含网站的所有元素。 代码如下： 在link href=style/div.css rel=stylesheet type=text/css / #box { width:1007px; height:888px; margin:auto; } 南京新华电脑专修学院 课件教改系列 #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:#666666; background-image:url(../images/2501.jpg); background-repeat:no-repeat; Fnot01 全局字体颜色 font-size:18px; font-family:微软雅黑; line-height:30px; color:#5ca900; 南京新华电脑专修学院 课件教改系列 PART/02 CSS外部文件详细2 box top main #top { width:950px; height:379px; margin:auto; } #box { width:1007px; height:888px; margin:auto; } bottom 南京新华电脑专修学院 课件教改系列 PART/02 CSS外部文件详细2 #bottom { width:1007; height:89px; color:#000; text-align:center; line-height:20px; background-image:url(../images/2506.png); background-repeat:no-repeat; background-position:center bottom; border-top:#093 dashed 1px; margin-top:20px; } #main { width:942px; height:400px; margin:auto; } 南京新华电脑专修学院 课件教改系列 box top main bottom #main-left { width:258px; height:400px;