经典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文件来实现了。而且合理的文件结构对于今后的网站代码维护有很大的方便性。 继承与重用的优势：在代码压缩方面优势明显，可以减少重复代码的书写。 设计跨平台的代码：CSS hack译为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请求次数，最直接有效的方法是使用精灵图片（CSS sprites），精灵图片是把许多图片放到一张大图片里面，通过CSS来显示图片的一部分。 CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。 操作举例： 例如通过/，上传几张所需操作的图片，该网站会为你自动生成一张合成的图片，同时生成对应的代码background-position等，保证定位的准确性，同时省去自己用photoshop裁剪的麻烦性。大家操作一下即可明白。,CSS网站元素设计-CSS精灵,CSS精灵优缺点,CSS精灵简单实例,CSS精灵实例,你一看即懂，无需赘述！,CSS网站元素设计-字体样式,Label提升表单的可用性：点击label中的文字同时可以使与其关联的复选框关联起来。 表单设计建议：（当然目前的世邦可能用不到，但是对于那种大型网站这是必要的） 明确的输入域标识(*) 验证数据及减少提交次数：例如Ajax或者js的同步刷新模式 提交比较智能的表单：例如搜索功能 减少用户点击键盘的次数：例如日期的输入 有好的提示：鼠标滑过文字提示等 以上在很多设计良好的网站都很常见的，不再赘述,CSS网站元素设计-表单设计,CSS网站元素设计- position的理解,CSS高级技巧应用,CSS高级技巧应用-CSS文件结构设计与优化,CSS高级技巧应用-圆角样式,1.九宫格圆角样式 2. CSS Sprites 3. 960栅格系统 4. JQuery的使用 点到为止，不管现在能否用到，趁着年轻，多学有益，总不能一辈子做小网站吧。 不要以为自己电脑水平很好，把自己当高手了，而且觉得高手就一定要冷酷，觉得别人的问题很弱智就讽刺别人。更不要以为自己是高手就去骂别人不行，其实能骂的人最不行，高手从来都是低调的。 人们日常所犯最大的错误，是对陌生人太