网页设计(divcss).pptVIP

DIV+CSS布局 Div+Css特点 DIV+CSS是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位 Div+CSS布局的优势 代码精简 表格的嵌套问题 速度问题 方便搜索引擎的搜录 重构页面的方便性 盒状编程模型 DIV+CSS通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页 内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性 一共分为四个区块，每个区块的框架是一样的，这个框架就是用CSS写出来的，样式写一次，就可以被无数次调用了(用class调用，而不是ID)，只要改变其中的文字内容就可以生成风格统一的众多板块了， 演示的相关文件 div class=mainBoxh3前言/h3p正文内容/p/divdiv class=mainBoxh3CSS盒子模式/h3p正文内容 /p/divdiv class=mainBoxh3转变思想/h3p正文内容 /p/divdiv class=mainBoxh3熟悉步骤/h3p正文内容 /p/div 演示文件 DIV+CSS设计思路 用div来定义语义结构； 然后用CSS来美化网页，如加入背景、线条边框、对齐属性等； 最后在这个CSS定义的盒子内加上内容，如文字、图片等 设计效果图 分析页面布局形式 设置主要4个盒子 div id=header/div div id=nav/div div id=content/div div id=footer/div 将盒子装入Body盒子 bodydiv id=header/divdiv id=nav/divdiv id=content/divdiv id=footer/div/body 定义整体样式 body {font-family: Arial, Helvetica, sans-serif;font-size: 12px;margin: 0px auto;height: auto;width: 760px;border: 1px solid #006633;} 分别定义各个盒子样式 #header {height: 100px;width: 760px;background-image: url(headPic.gif);background-repeat: no-repeat;margin:0px 0px 3px 0px;} 设置更小的盒子 #nav {height: 25px;width: 760px;font-size: 14px;list-style-type: none;}#nav li {float:left;}#nav li a{color:#000000;text-decoration:none;padding-top:4px;display:block;…… } 最终盒状模型结构代码 bodydiv id=header/divul id=navlia href=#首 页/a/lilia href=#文 章/a/lilia href=#相册/a/lilia href=#Blog/a/lilia href=#论 坛/a/lilia href=#帮助/a/li/uldiv id=contenth3前言/h3p第一段内容/ph3理解CSS盒子模式/h3p第二段内容/p/divdiv id=footerp 客服中心 | Q Q留言 | 网站管理 | 会员登录 |/ppCopyright copy;2006 - 2008 Keith Dan. All Rights Reserved/p/div/body 演示代码 练习一个实例 初始效果图设计 布局与规划 顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 内容部分又可分为侧边栏、主体内容； 底部，包括一些版权信息。 布局与规划 分析 结构分析 编写主题内容 div id=container[color=#aaaaaa]!--页面层容器--[/color]　　div id=Header[color=#aaaaaa]!--页面头部--[/color]　　/div　　div id=PageBody[color=#aaaaaa]!--页面主体--[/color]　　　　div id=Sidebar[color=#aaaaaa]!--侧边栏--[/color]