第二讲.CSS网站布局入门.ppt

基于WEB标准的网站设计指南 By CB 1.WEB标准与CSS布局 2. CSS基础 3. CSS网站元素设计 4. CSS高级技巧应用 有些东西不是书本上的，有错请指正。 WEB标准构成：结构(Structure),表现(Presentation),行为(Behavior). 一看就懂,其实不然： 结构是用来对网页中用到的信息进行整理和分类，用于结构化设计的Web标准技术有：HTML,XML,XHTML，XML最初设计的目的是为了弥补HTML的不足，以其强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换及描述。XHTML为了实现HTML到XML的过渡。 表现：CSS，分离表现与内容，便于站点维护。 行为：指对整个文档内部的一个模型进行定义及交互行为的编写，用于编写用户可以进行交互式操作的文档，DOM和ECMAScript。(例如时下流行的开源的JS库JQuery中包含了对DOM的操作) WEB标准制定的核心目的? 表现与内容的分离技术 好处? 下一页 基本网页设计尺寸： 主流： 950px(代表:Yahoo,天涯等),960px(Facebook等). 前卫： 1002px(Flash全站,新新的个人网站,小站点). WEB设计尺寸注意： 1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右 4、页面长度原则上不超过3屏，宽度不超过1屏  真正的表现与内容完全分离，代码可读性强，样式可重复应用 !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=gb2312 / title测试页/title link href=css/style1.css rel=stylesheet type=text/css / /head body div id=container div id=header头部/div div id=“content”主体/div div id=footer尾部/div /div /body /html Xhtml文档 * { font-family: Arial, Helvetica, sans-serif, 宋体; font-size: 12px; margin: 0px; text-align:center; } #container { width: 810px; margin:auto; background:#CCCCCC; } #header { height: 100px; width: 800px; padding:5px; background-color: #6699FF; } #content { height: 400px; width: 800px; padding:5px; background-color#FF9900; } #footer { width: 800px; height: 50px; padding:5px; background-color: #6699FF; } Style1.css 最终布局效果 合理的文件结构：例如font.css文件放置字体，form.css放置表单设计，layout.css放置布局等等，我们目前做的小站可能你感觉不到优势，但是如果做的几千个页面的大型网站优势就很明显了。例如网站换肤操作，你可以简单的通过操作css文件来实现了。而且合理的文件结构对于今后的网站代码维护有很大的方便性。 继承与重用的优势：在代码压缩方面优势明显，可以减少重复代码的书写。 设计跨平台的代码：CSS hack译为CSS黑客程序，针对特色浏览器的欺骗代码，就是平日里说的浏览器兼容，目前IE6还是主流的浏览器，淘宝2010年六月份统计显示，使用IE6访问的客户占到49%左右，而对于IE7及以上版本，其兼容性已经和火狐趋近了，尤其是IE8对CSS的支持近似于FF了，而目前FF是公认的对CSS支持最完善的浏览器。所以目前兼容性测试主要是针对FF和IE