1 / 38

网页重构 …

网页重构 …. 一步一步走 …. 不急于动手 …. 图片优化点滴 …. 目的 ：. 保证视觉效果 提高加载速度 节省流量. 图片优化点滴 …. 如何 做？. 图片优化点滴 …. 图片格式：. 真 彩色：图片 容量最大，图片格式为 JPG 调色板 色：图片容量次之，图片格式为 JPG ， PNG-24 小图片：对于未超过 256 种色彩的 图片，使用 PNG-8 或者 gif 格式 透明： PNG ， Gif . （ IE6 支持 二进透明，不支持 Alpha 透明） 半透明： PNG-8 （像素级）， PNG-24 ， PNG-32.

amma
Download Presentation

网页重构 …

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 网页重构…

  2. 一步一步走…

  3. 不急于动手…

  4. 图片优化点滴… 目的： • 保证视觉效果 • 提高加载速度 • 节省流量

  5. 图片优化点滴… 如何做？

  6. 图片优化点滴… 图片格式： • 真彩色：图片容量最大，图片格式为JPG • 调色板色：图片容量次之，图片格式为JPG，PNG-24 • 小图片：对于未超过256种色彩的图片，使用PNG-8或者gif格式 • 透明：PNG，Gif. （IE6支持二进透明，不支持Alpha透明） • 半透明：PNG-8（像素级），PNG-24，PNG-32 参考：第四届webrebulid重构年会广州分站-网络图像优化

  7. 图片优化点滴… 优化选项： • Gif动画的压缩：调整失真度 • 隔行扫描：Gif，PNG-24 • 勾选图片“交错”：图片增大VS加载用户体验 • 优先选择PNG（有动画除外） • Jpg质量80%-95%：体积更小，品质还好 • 不勾选“锐色”：减小体积 • PS渐进导出jpg：体积更小 • Jpg去除“噪点”：单色图体积差异大 • Jpg-2000：体积更小，质量更好，多数浏览器不支持

  8. WEB标准设计…

  9. 良好的结构…

  10. 从声明开始… 3种DTD声明： • 严格型：XHTML 1.0 Strict • 过渡型：XHTML 1.0 Transitional（我们常用的） • 框架型：XHTML 1.0 Frameset 链接：http://www.w3school.com.cn/xhtml/xhtml_dtd.asp

  11. 特殊的IE… IE浏览器的文档模式： • IE8标准模式（采用标准DTD声明） • IE8准标准模式（即我们说的过渡型） • IE7标准模式（IE=EmulateIE7） • IE5模式（怪异模式，影响盒子模型） 扩展阅读：IE8 如何确定文档模式

  12. XHTML重构… XHTML规则： 恰当的文档声明和命名空间 所有标签以及属性都用小写 所有属性添加引号并且不为空 正确嵌套、关闭标签（包括单标签） 符号使用转义字符替代（如 ） …… Tips: 1、HTML注释里面横杠使用英文，否则FF下内容会被隐藏 2、注释开始和结束前后，添加多一个空格，否则FF会显示出注释内容

  13. 语义化（semantic）… 语义化（结构化）的内容： • 在HTML文档中，每一个内容都有含义 • 利用有相应含义的标签去格式化页面中的内容 • 网页中，HTML才是重点，CSS只是修饰页面的 • 网页通过对样式的定义，可以以任何外观展现出来，前提是拥有良好的结构 • HTML添加了许多语义化的标签（header、footer、article…），强调语义化的重要性

  14. 语义化（semantic）… “每个元素都必须结构化” 在HTML文档中，所有内容都应该放在合适的的标记里 <ul> <li>List 1</li> <li>List 2</li> <li>List 3</li> </ul> List 1<br /> List 2<br /> List 3<br /> <div>List 1</div> <div>List 2</div> <div>List 3</div>

  15. 语义化（semantic）… 书写机器人能读懂的标记： <h1>这是h1标题，在所有标记中权重最大！</h1> <p>段落标记。</p> <a href="">这是超链接。</a> <ul> <li>这是列表标记。请正确嵌套。</li> </ul> <strong>这是强调的文本，语气较重。</strong><br /> <em>这也是强调，斜体显示。</em><br /> <del>这是删除标记，取代s和strike标签。</del><br /> <ins>这是插入标记。</ins><br /> <div id="block">div标记，表示网页中区别于其他模块的一个节点。也可以理解为网页中的一个元件。</div> <span id="inline">span标记，也表示节点，它是内联元素。</span> ……

  16. 语义化（semantic）… 语义化带来的好处： • 失去CSS时，页面仍然能够显示清晰的结构 • 一些对CSS支持较弱的设备能以一种有意义的方式渲染页面 • 搜索引擎的爬虫也依赖于标记来确定上下文和各个关 键字的权重 • 搜索引擎的爬虫注重语义标记，忽略表现标记 • 增强页面的可读性、易于团队开发 参考：语义化的HTML结构到底有什么好处？

  17. 语义化（semantic）… 熟练使用HTML标签！ XHTML标签列表：http://www.w3school.com.cn/tags/index.asp HTML5标签列表： http://www.w3school.com.cn/html5/html5_reference.asp

  18. 模块化… 百度词条“模块化”： 模块化是指解决一个复杂问题时自顶向下逐层把软件系统划分成若干模块的过程。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体， 完成整个系统所要求的功能。模块具有以下几种基本属性：接口、功能、逻辑、状态，功能、状态与接口反映模块的外部特性，逻辑反映它的内部特性。在软件的体 系结构中，模块是可组合、分解和更换的单元。

  19. 模块化… 如何实现？ • 分析设计稿，划分功能模块（Logo，导航，新闻、广告，文章，图片，留言…） • 列出所有模块公共的部分（比如圆角，标题背景，列表项图标，甚至模块等） • 根据各模块相同和不同的属性，给各模块和子模块添加id或（和）class • id和class的合理命名（命名体现模块的功能）

  20. 模块化… 一个例子：

  21. 模块化… /* a模块私有样式开始 */ #mod-a .news {} #mod-a .article_list {} #mod-a .pic {} #mod-a .ad {} /* a模块私有样式结束 */ 样式可以这样组织： /* 公有样式开始 */ .g-radius {} .g-rectangle {} #mod-a {} #mod-b {} #mod-c {} .news {} .article_list {} .pic {} .ad {} /* 公有样式结束 */ /* b模块私有样式开始 */ #mod-b .news {} #mod-b .article_list {} #mod-b .pic {} #mod-b .ad {} /* b模块私有样式结束 */ /* c模块私有样式开始 */ #mod-c .news {} #mod-c .article_list {} #mod-c .pic {} #mod-c .ad {} /* c模块私有样式结束 */

  22. 模块化… 再一个例子： <div class="mod-b"> <div class="mod-a"> <h3>一个h3标题</h3> <p>一个段落。</p> </div> <div class="cont"> <h4>一个h4标题</h4> <ul> <li>列表项</li> <li>列表项</li> </ul> </div> </div> <div class="mod-c"> <div class="mod-a"> <h3>另一个h3标题</h3> <p>另外一个段落。</p> </div> <div class="cont"> <h4>另一个h4标题</h4> <p>还有一个段落。</p> </div> </div>

  23. 模块化… 模块化带来的好处： • 提高代码重用率（可移植性高） • 各模块相对独立 • 提高开发效率，减少沟通成本 • …… 思考：网页中更换皮肤功能如何实现？

  24. id与class… 灵活处理： • 区别？ • 语义化地命名（命名体现功能）

  25. div与span… 理性地对待： • 网页重构 ！= div+CSS • div和span只是HTML很普通（无语义）的标签 • 通常添加id或class实现语义化 • HTML5中可使用<section>替换<div> 领悟：重构之前，先重构思想！

  26. 样式之美…

  27. 样式之美… 样式的引入： • 外联：推荐使用的方式 • <link href="name.css" type="text/css" rel="stylesheet" media="screen,print" /> • 导入：IE6下可能出现闪屏 • <style type="text/css">@import url(name.css) screen,print;</style> • 内联：不推荐，HTML代码冗长 • <style type="text/css">...</style> • 内嵌：不推荐，不利于结构与样式的分离 • <h1 style="..."></h1> 愚见：根据作用域分隔样式表，Reset、common、private、Hack

  28. CSS Reset… Reset是必要的： • 各个浏览器是有默认属性的 • 各个浏览器默认的CSS属性是不同的 • 清除浏览器默认样式，保证你写的CSS表现一致 • 使用Reset重新定义默认的规则 • 每个网站的CSS Reset都应该不同 扩展阅读： 1、Reset CSS 研究（技术篇） 2、YUI 2: Reset CSS

  29. 继承（Inheritance）… 继承是CSS的特性！ • 继承就是子孙元素会继承父元素的样式 • 掌握CSS的继承，让开发者更轻松，CSS更简洁 • 有时候，继承让人头疼，比如行高… • 究竟哪些属性可以继承呢？

  30. 权重（优先级）… 按哪条规则显示呢？ 样式作用的范围越小，权重越大 用“特性值”快速计算权重 优先级：内嵌>外联 优先级：指定>继承 优先级：id>class>元素选择器 优先级：!important最高，但请慎用

  31. 布局… 流、浮动，定位： • CSS盒子模型，IE6的不同 • 文档流，默认显示方式 • 浮动：元素堆积 • 定位：元素叠加 • 混合布局：浮动，定位的元素对其他元素有影响 扩展阅读： 1、CSS浮动布局初步 2、CSS定位布局初步

  32. 清除浮动… 四种办法： 设置浮动 设置溢出隐藏 :after伪类配合content属性 空标签清除 .father { float: left; } /* 此时父元素高度自适应，但是左右外边距auto失效，父元素靠左对齐 */ .father { overflow: hidden;/* 高度自适应的关键。auto的话ie6会产生滚动条 */ _zoom: 1; /* 兼容IE6 */ } .father:after { content: “.”; clear: both; display: block; height: 0; visibility: hidden; } <div style=“clear: both;”></div>

  33. Sprites… 图片拼合（CSS雪碧 /精灵）： • 把多张图片拼合为一张图 • 这张图片作为多个元素的背景 • 利用背景的position-position属性精确定位 • 好处：减少HTTP请求，服务器减压，精确定位 • 不利：图片体积增大，修改不够灵活

  34. Hack… 写法（ＩＥ系列）： .color { color:#000;/* 所有浏览器支持 */ color:grey !important;/* 除IE6外，所有浏览器都支持 */ color:red\9;/* IE系列浏览器(ie6+)支持 */ color:orange\0;/* IE8支持 */ *color:yellow;/* IE6,IE7支持 */ +color:#C0C;/* IE6,IE7支持 */ _color:blue;/* IE6支持 */ } *+html .bgcolor{background-color:#F9C;/* 仅IE7支持“*+html” */} html/* 注释 */>body .ie6 {border:1px dashed #CCC;/* IE6，IE5支持 */} .nie6 {display:/* 注释 */none;/* IE6不支持 */} .nie56/* 注释 */ {display:/* 注释 */none;/* IE6，IE5不支持 */}

  35. ＩＥ注释… 写法： <!--[if lt IE 6]> HTML code <![endif]--> <!--[if lte IE 5.5]> HTML code <![endif]--> <!--[if !IE]><!--> HTML code <!--<![endif]--> <!--[if IE]> HTML code <![endif]--> <!--[if IE 5,6,7,8...]> HTML code <![endif]--> <!--[if gte IE 5]> HTML code <![endif]--> 注：其实，注释不是Ｈａｃｋ，但是通不过验证

  36. 技巧… • 简写 border-top-width: 1px; border-top-style: solid; border-top-color: #DDDDDD; border-top: 1px solid #DDD; font-size: 14px; line-height: 0.85; font-weight: normal; font-family: Tahoma, "宋体", Arial, sans-serif; font: 14px/.85 Tahoma, "宋体", Arial, sans-serif; margin-top: 1em; margin-right: 1em; margin-bottom: 2em; margin-left: 1em; margin: 1em 1em 2em;

  37. 技巧… • 选择器的书写 div#wrapdiv#innerdiv#navul li a.first {} #wrap .first {} #menu > ul > li > a > span.more {} #menu .more {} body ul li a {} a.a {} div[class] {/* <div class=""> */} div[id="block"] {/* <div id="block"> */} div[class|="a"] {/* <div class="mod-a"> */} div[class~="mod"] {/* <div class="mod a"> */} a[href^="#"] {/* <a href="#zzz"> */} img[width$="x"] {/* <img width="2px"> */} p[class*="c"] {/* <p class="a b-c d"> */}

  38. 技巧… • display display: none;/* 不占物理空间，visibility占空间 */ display: block; display: inline; display: inline-block; /* IE6不支持 */ display: table; /* IE6不支持 */ display: table-cell; /* IE6不支持 */ display: list-item; /* IE6不支持 */ • 居中 margin: 0 auto;/* 块元素水平居中 */ text-align: center;/* 内部元素水平居中 */ vertical-align: middle;/* 表格或模拟表格 */ line-height=height /* 单行文字垂直居中 */

More Related