经典CSS网站布局实录(实战型的高手之路)ppt课件

.,CSS网站布局实录,基于WEB标准的网站设计指南小波,.,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标准制定的核心目的?表现与内容的分离技术好处?下一页,WEB标准,.,高效率的开发和简单维护信息跨平台的可用性，例如只需要更改一个样式文件可以使得网页在不同的终端设备上进行不同的显示。降低服务器成本:对于大型网站而言，网页代码量减少一半则意味着其所需要的服务器带宽得到提升，节省下来的服务器费用可用于其它服务。便于改版测试表明，内容与设计分离的结构进行网页设计方法，使得浏览器的解析速度大幅度提高。与未来兼容良好的用户体验这种好处我们可以从CSS布局与Table布局的使用中体会到，针对CSS优化有如下建议：,表现与内容的分离技术的好处,.,合理的文件结构：例如font.css文件放置字体，form.css放置表单设计，layout.css放置布局等等，我们目前做的小站可能你感觉不到优势，但是如果做的几千个页面的大型网站优势就很明显了。例如网站换肤操作，你可以简单的通过操作css文件来实现了。而且合理的文件结构对于今后的网站代码维护有很大的方便性。继承与重用的优势：在代码压缩方面优势明显，可以减少重复代码的书写。设计跨平台的代码：CSShack译为CSS黑客程序，针对特色浏览器的欺骗代码，就是平日里说的浏览器兼容，目前IE6还是主流的浏览器，淘宝2010年六月份统计显示，使用IE6访问的客户占到49%左右，而对于IE7及以上版本，其兼容性已经和火狐趋近了，尤其是IE8对CSS的支持近似于FF了，而目前FF是公认的对CSS支持最完善的浏览器。所以目前兼容性测试主要是针对FF和IE6.良好可用性的CSS样式设计使用基于DOM的脚本语言来编写交互(如那些className等属性调用都属于DOM的范畴。JQuery的使用越来越流行，大家应该尝试下，其中就有针对DOM调用的使用。)高效，可维护，组件化的CSS(文档原始来.au),CSS编写建议,.,CSS设计奖：(大量CSS实现的网站，设计不错)3W建设：(pr=10,值得信赖，网站设计学习等)人人皆知：不在于你知道多少相关的网站，例如你只要网站上的东西搞定，这就足够了，关键是在于积累和对所学东西的使用。,参考,.,可能讲得有些肤浅，大家凑活着听听吧！,CSS基础,.,.,CSS基础之特殊布局,.,.,.,CSS基础之Margin属性与Hack,.,.,CSS网站元素设计-下拉导航,.,提高网页显示速度最有效的一个方法是减少页面的HTTP请求次数，为了减少HTTP请求次数，最直接有效的方法是使用精灵图片（CSSsprites），精灵图片是把许多图片放到一张大图片里面，通过CSS来显示图片的一部分。CSSSprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。操作举例：例如通过,CSS网站元素设计-CSS精灵,.,CSS精灵优缺点,.,CSS精灵简单实例,.,CSS精灵实例,你一看即懂，无需赘述！,.,CSS网站元素设计-字体样式,.,Label提升表单的可用性：点击label中的文字同时可以使与其关联的复选框关联起来。表单设计建议：（当然目前的世邦可能用不到，但是对于那种大型网站这是必要的）明确的输入域标识(*)验证数据及减少提交次数：例如Ajax或者js的同步刷新模式提交比较智能的表单：例如搜索功能减少用户点击键盘的次数：例如日期的输入有好的提示：鼠标滑过文字提示等以上在很多设计良好的网站都很常见的，不再赘述,CSS网站元素设计-表单设计,.,CSS网站元素设计-position的理解,.,CSS高级技巧应用,.,CSS高级技巧应用-CSS文件结构设计与优化,.,CSS高级技巧应用-圆角样式,.,1.九宫格圆角样式2.CSSSprites3.960栅格系统4.JQuery的使用点到为止，不管现在能否用到，趁着年轻，多学有益，总不能一辈子做小网站吧。不要以为自己电脑水平很好，把自己当高手了，而且觉得高手就一定要冷酷，觉得别人的问题很弱智就讽刺别人。更不要以为自己是高手就去骂别人不行，其实能骂的人最不行，高手从来都是低调的。人们日常所犯最大的错误，是对陌生人太客气，而对亲密的人太苛