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

布局之美 我的页面我设计 DIV+CSS布局设计 项目四 静态网页设计之 南京新华电脑专修学院 课件教改系列 PART/第一步 规划网站 我的页面我设计 PART/01 规划网站 色彩搭配 布局设计 MAIN MENU主菜单 HEADER头部 CONTENT主体内容 SIDE BAR边条 FOOTER脚部 功能使用 公司首页链接 新闻中心链接 加盟中心链接 下载专区链接 网站咨询链接 服务项目链接 后续扩展 动态页面扩展 移动设备扩展 设计主色调 配色的数量 对比和调和 轻快到浓烈 南京新华电脑专修学院 课件教改系列 PART/02 图例 学生分工图 南京新华电脑专修学院 课件教改系列 MAIN MENU主菜单 25% HEADER头部 FOOTER脚部 CONTENT主体内容 75% CONTENT两大展示 PART/01 图例 时间分配图 CONTENT 页面主体 CONTENT 五大功能 MAIN MENU 主菜单 HEADER 头部对象 FOOTER 脚部对象 85% 15% 主体设计 附属设计 南京新华电脑专修学院 课件教改系列 南京新华电脑专修学院 课件教改系列 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 创建模板及文件目录 创建网站的大框，即建立一个宽960px、高750px的盒子，它将包含网站的所有元素。 代码如下： 在link href=style/div.css rel=stylesheet type=text/css / #box{ width:960px; height:750px; margin:auto; } 南京新华电脑专修学院 课件教改系列 #box # left/right #top1 # right/01/02 #main # left/right # top1 # right/01/02 # main-1/2 PART/02 DIV设计布局 #left-1-2 right-1-2 尾部字段 Left/main/right 主窗体设计 #right01/02 尾部设计 #top/top-1/-2 头部导航设计 南京新华电脑专修学院 课件教改系列 * 统一布局 margin:0px; border:0px; padding:0px; BODY * Font01/02 全局字体颜色 主体样式 统一布局 PART/02 CSS外部文件详细1 Body 主体样式 body{ font-family:宋体; font-size:12px; color:#333; } Fnot01全局字体颜色 .font1/2{ font-size:13px; font-weight:bold; color:#76b924;} 南京新华电脑专修学院 课件教改系列 box top main #top{ width:960px; height:103px; background-image:url(../images/5301.gif); background-repeat:no-repeat; background-position:40px 15px; } #box{ width:960px; height:750px; margin:auto; } bottom 南京新华电脑专修学院 课件教改系列 PART/02 CSS外部文件详细2 box top main #top1{ width:180px; height:20px; float:right; padding:12px 5px 0px 0px; } #top1 span{ margin:0px 5px 0px 5px; } #top2{ width:730px; height:71px; margin-left:230px; float:right; background-image:url(../images/5302.gif); } bottom 南京新华电脑专修学院 课件教改系