6-网站前台设计之CSS.ppt

《6-网站前台设计之CSS.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、网站设计与原理主讲教师：陈秀敏——CSS+DIVdivcssDIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。XHTML是TheExtensibleHyperTextMarkupLanguage（可扩展超文本标识语言）的缩写。XHTML基于可扩展标记语言（XML），是一种在HTML基础上优化和改进的的新语言，目的是基于XML应用与强大的数据

2、转换能力，适应未来网络应用更多的需求。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。DIV+CSS的优势何在？1、符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。2、支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。DIV+CSS的优势何在？3、搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加

3、友好。4、样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。DIV+CSS的优势何在？5、CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。6、表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。div+css对SEO有怎么样的作用？SEO：搜索引擎优化作

4、用：1、精简的代码，使用DIV+CSS布局，页面代码精简，这一点相信对XHTML有所了解的都知道。观看更多的HTML教程内容。代码精简提高了百度蜘蛛的爬行效率以及高效性，能在最短的时间内爬完整个页面，同时这样对收录质量有一定好处;div+css对SEO的作用2、提高访问速度、增加用户体验性使得加载速度得到很大的提高，那么用户点击页面的等待时间就越少，用户体验性的增加相应的带来就是网站受到搜索引擎的喜欢，进而提高网站排名。div+css对SEO的作用3、div+css结构清晰，很容易被搜索引擎搜索到，

5、天生就是适合优化了seo，降低网页大小，让网页体积变得更小。4.缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。这样可以大大节约工作的时间，提高了工作效率。使用div+css的误区1、用div+css结构制作静态html网页等于彻底抛弃古老的table写法。之所以不建议用table来布局网页是因为在网页加载很慢的时候要等table结构加载完成才能看到网页，其次是table的布局没有一定的语义，网页代码修改起来比较麻烦。但table是专门用来写网页数据表格的，页面中出

6、现类似excel数据的地方，建议用table来写。使用div+css的误区2、div+css结构等于通篇区域都用div包起来。遇到一个区块就用一个div标签，这样写完代码后全篇都是div，失去了语义的存在价值，区块修改起来也不容易找到，合理的利用dl、ul、ol、span、等标签，不仅让你的网页看起来条理清晰，而且修改起来很方便。DIV+CSS高级布局已逐渐流行，但面对所谓DIV+CSS布局的叫法让人更为担心，不要让DIV成为Table的替代品，多层嵌套的DIV会严重影响代码的可阅读性，活用HTML

7、为我们提供的标签吧。ol有序列表。


1. ……

2. ……

3. ……



• ……

• ……




标题



内容1



内容2



8、html分开，是因为有些css同时为多个页面服务。用户访问时css文件可以缓存在本地，下次再访问其他页面时就不用重复加载css，可以节约时间和流量，提高访问速度但是如果网页有些区域的css是独一无二的，其他页面用不到，就不用把css剥离出去，直接用style标签包括在html网页里就可以。使用div+css的误区4、用div和css写网页不用进行浏览器兼容测试。一定要在不同类型和不同版本的浏览器进行测试。最好是同时打开多个浏览器，最少也得兼容ie6、7、8等版本。在写