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

网站设计与原理 主讲教师：陈秀敏 div css DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css 是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。 XHTML是The Extensible HyperText Markup Language（可扩展超文本标识语言）的缩写。XHTML基于可扩展标记语言（XML），是一种在HTML 基础上优化和改进的的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。 在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。 DIV+CSS的优势何在？ 1、符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。 2、支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。 DIV+CSS的优势何在？ 3、搜索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。 4、样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。 现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。 DIV+CSS的优势何在？ 5、CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。 6、表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。 div+css对SEO有怎么样的作用？ SEO：搜索引擎优化 作用： 1、精简的代码，使用DIV+CSS布局，页面代码精简，这一点相信对XHTML有所了解的都知道。观看更多的HTML教程内容。代码精简提高了百度蜘蛛的爬行效率以及高效性，能在最短的时间内爬完整个页面，同时这样对收录质量有一定好处; div+css对SEO的作用 2、提高访问速度、增加用户体验性 使得加载速度得到很大的提高，那么用户点击页面的等待时间就越少，用户体验性的增加相应的带来就是网站受到搜索引擎的喜欢，进而提高网站排名。 div+css对SEO的作用 3、div+css结构清晰，很容易被搜索引擎搜索到，天生就是适合优化了seo，降低网页大小，让网页体积变得更小。 4.缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。这样可以大大节约工作的时间，提高了工作效率。 使用div+css的误区 1、用div+css结构制作静态html网页等于彻底抛弃古老的table写法。 之所以不建议用table来布局网页是因为在网页加载很慢的时候要等table结构加载完成才能看到网页，其次是table的布局没有一定的语义，网页代码修改起来比较麻烦。但table是专门用来写网页数据表格的，页面中出现类似excel数据的地方，建议用table来写。 使用div+css的误区 2、div+css结构等于通篇区域都用div包起来。 遇到一个区块就用一个div标签，这样写完代码后全篇都是div，失去了语义的存在价值，区块修改起来也不容易找到，合理的利用dl、ul、ol、span、等标签，不仅让你的网页看起来条理清晰，而且修改起来很方便。 DIV+CSS高级布局已逐渐流行，但面对所谓DIV+CSS布局的叫法让人更为担心，不要让DIV成为Table的替代品，多层嵌套的DIV会严重影响代码的可阅读性，活用HTML为我们提供的标签吧。 ol 有序列表。 ol li……/li li……/li li……/li /ol 表现为： 1…… 2…… 3……  ul 无序列表，表现为li前面是大圆点而不是123  ul li……/li li……/li /ul  dl dt dd的用法 dl 内容块 dt 内容块的标题 dd 内容 例如： dl dt标题/dt dd内容1/dd dd内容2/dd /dl 使用div+css的误区 3、css文件一定要和html代码分开。 将css文件和html分开，是因为有些css同时为多个页面服务。用户访问时css文件可以缓存在本地，下次再访问其他页面时就不用重复加载css，可以节约时间和流量，提高访问速度 但是如果网页有些区域的css是独一无二的，其他页面用不到，就不用把css剥离出去，直接用style标签包括在html网页里就可以。 使用div+css的误区 4、用div和css写网页不用进行浏览器兼