代码优化终极课代码优化实战演习Word文件下载.doc

1、#ffffff 背景默认属性为白色对于这些代码，可以利用Dreamweaver 的替换功能把他们替换成 空白就可以了 3. 注释语句过多的注释语句不仅会占用大量的网页存储空间，而且还会稀释关键字的密度 4. 长标签替换成短标签比如，和都是对字体加粗，起到的作用是一样的，但是比多5个字符网页中多种不同的标签可以实现同样的效果但是为了网页的精简可以才要短标签，网页中常见的有以下几种加粗 对应斜体 i删除线 s缩进 对应 2.Css等脚本优化（脚本优化）：CSS学起来并不难，但在大型项目中，一个团队中不同的人在书写CSS风格上也有不同这样这个项目就变得难以管理，团队上就更加难以沟通，为此总结了一些如

2、何实现高效整洁的CSS代码原则：步骤/方法1. 使用Reset但并非全局Reset不同浏览器元素的默认属性有所不同，使用Reset可重置浏览器元素的一些默认属性，以达到浏览器的兼容。但需要注意的是，请不要使用全局Reset：*margin:0;padding:这不仅仅因为它是缓慢和低效率的方法，而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考YUI Reset和Eric Meyer的做法。/* 清除内外边距 */body, h1, h2, h3, h4, h5, h6, hr, p,blockquote, /* structural elements 结构元素 */dl, dt

3、, dd, ul, ol, li, /* list elements 列表元素 */pre, /* text formatting elements 文本格式元素 */form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */th, td, /* table elements 表格元素 */img/* img elements 图片元素 */border:medium none;margin: 0;/* 设置默认字体 */body,button, input, select, textarea font:

4、12px/1.5 宋体,tahoma, Srial, helvetica, sans-serif; h1, h2, h3, h4, h5, h6 font-size: 100%;emfont-style:normal;/* 重置列表元素 */ul, ol list-style: none;/* 重置超链接元素 */a text-decoration: color:#333;a:hover text-decoration: underline;#F40;/* 重置图片元素 */img border:0px;/* 重置表格元素 */table border-collapse: collapse;

5、border-spacing:2. 良好的命名习惯无疑乱七八糟或者无语义命名的代码，谁看了都会抓狂。比如下面这样的代码：.aaabbmargin:2px;color:red;我想即使是初学者，也不至于会在实际项目中如此命名一个class，但有没有想过这样的代码同样是很有问题的：My name is Wiky/h1问题在于如果你需要把所有原本红色的字体改成蓝色，那修改后就样式就会变成：redcolor:bule;这样的命名就会很让人费解，同样的命名为.leftBar的侧边栏如果需要修改成右侧边栏也会很麻烦。所以，请不要使用元素的特性（颜色，位置，大小等）来命名一个class或id，您可以选择意义

6、的命名如：#navigation，.sidebar，.postwrap这样，无论你如何修改定义这些class或id的样式，都不影响它跟HTML元素间的联系。另外还有一种情况，一些固定的样式，定义后就不会修改的了，那你命名时就不用担忧刚刚说的那种情况，如:.alignleftfloat:left;margin-right:20px;.alignrightfloat:right;text-align:margin-left:.clearclear:both;text-indent:-9999px;如果需要把这个段落由原先的左对齐修改为右对齐，那么只需要修改它的className就为alignrig

7、ht就可以了。3.代码缩写CSS代码缩写可以提高你写代码的速度，精简你的代码量。在CSS里面有不少可以缩写的属性，包括margin，padding，border，font，background和颜色值等，如果您学会了代码缩写，原本这样的代码：li 1.2em/1.4em Arial, Helvetica, sans-serif;5px 0 10px 5px;4.利用CSS继承如果页面中父元素的多个子元素使用相同的样式，那最好把他们相同的样式定义在其父元素上，让它们继承这些CSS样式。这样你可以很好的维护你的代码，并且还可以减少代码量。那么本来这样的代码：#container li font-f

8、amily:Georgia, serif;#container p font-family:#container h1font-family:可以写成:#containerfont-family:Georgia,serif; 5.使用多重选择器你可以合并多个CSS选择器为一个，如果他们有共同的样式的话。这样做不但代码简洁且可为你节省时间和空间。如：h1, h2, h3 font-family:Arial, Helvetica, sans-serif; font-weight:6. 适当的代码注释代码注释可以让别人更容易读懂你的代码，且合理的组织代码注释，可使得结构更加清晰。7. 保持CSS的可

9、读性书写可读的CSS将会使得更容易查找和修改样式。对于以下两种情况，哪种可读性更高，我想不言而明。8. 使用外部样式表这个原则始终是一个很好的设计实践。不单可以更易于维护修改，更重要的是使用外部文件可以提高页面速度，因为CSS文件都能在浏览器中产生缓存。内置在HTML文档中的CSS则会在每次请求中随HTML文档重新下载。9.避免使用CSS表达式（Expression）表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上

10、的计算量。代码压缩当你决定把网站项目部署到网络上，那你就要考虑对CSS进行压缩，出去注释和空格，以使得网页加载得更快。压缩您的代码，可以采用一些工具，如YUI Compressor，利用它可精简CSS代码，减少文件大小，以获得更高的加载速度。3. SEO站内优化（整站优化）：一、代码及标签优化代码和标签的优化，主要从以下几个方面进行：1、网站代码精简和CSS&JS2、网站标题标签（titile）设置合理化3、网站关键词（keywords）设置合理化4、网站描述（Description）设置合理化5、网站H1/H2标签的合理优化6、网站METE标签的合理优化二、网站URL优化1、网站页面的静态化

11、处理（生成html）2、网站扁平化层级结构3、网站SEO定制文件名4、网站导航的面包屑处理三、网站内容优化1、网站内容的原创性2、网站内容的更新频率3、网站数据库的总体数据量不利于搜索引擎排名优化的因素：1、JS代码 JS代码，建议尽量少用这种动态，会增加网页加载时间。2、会隐藏的滑动条 还有一个就是常见的会隐藏的滑动条，我们不建议使用的。除非是你的网站实在要实现某一些功能才迫不得已。一般情况下是不建议大家使用的。是不利于优化的。滑动条的影响不大，但是会减分的。比如说100分，你做一个滑动条减了你2分。对不对?表面上是影响不大，但是对于整个关键词排名来说，它是有影响的。比如，你本来能排第一的，

12、你排第二。3、Flash代码 Flash代码，尽量的少。另外不建议你在网站里做一个页面里面做过多的Flash。你做一个就OK了，一个首页做一个就OK了。不要所有的频道页都做。这是不合理的。特别是很多企业站。4、隐藏代码 不要含有隐藏代码。常见的隐藏代码，像很多地方的新闻门户啊，就是那种带链接的网站，一般都有。一般都有那种就是滑动门。像那种出售友情链接站，把它隐藏起来，点一下它才出来的那种，其实应该是做了一个CSS隐藏的东西。这个，所有的动态都不建议做。5、 弹窗代码 最好在你的网站里面不要做前弹和后弹代码。这些都是会被减分的。当然了，这些不会有致命的危险。但是它会减分。前弹就是打开一个网站它会弹出一个网页，就是弹窗。后弹就是我们关闭一个网页，它就弹出一个网页。你关闭了，它弹出一个。这两个都是影响的。6、覆盖代码 覆盖代码。这个也很危险。就是你在百度上搜索一个词，你点开一个网页的时候弹出了一个新窗口。同时你那个百度的窗口就变成了一个广告页。他就覆盖了原来搜索引擎的搜索引擎页面，这叫做覆盖。大家明白了吗?这种覆盖是比较致命的。7、JS留言本 不要过多地使用JS代码，比如说百度的留言本。百度，那个做竞价，他一般都建议你添加留言本。留言本的确有好处，能够留住一些客户的那个。留