网页重构…

一步一步走…

设计原稿

HTML 页面

CSS

• 栏目结构（ 2/3栏）

• 各模块相同点和不同之处

• 背景图片 / 文字/ 链接

分 析

• 切出所需要的图片即可

• 图片命名、尺寸合理

切 图 • PNG/JPEG/Gif• 体积 VS 色彩• 透明 / 圆角 /

RGB 替代• 图片的优化

格 式

不急于动手…

图片优化点滴…目的：

保证视觉效果提高加载速度节省流量

图片优化点滴…如何做？

图片优化

格式

工具压缩

图片优化点滴…图片格式：

真彩色：图片容量最大，图片格式为 JPG

调色板色：图片容量次之，图片格式为 JPG ， PNG-

24

小图片：对于未超过 256 种色彩的图片，使用 PNG-8

或者 gif 格式透明： PNG ， Gif. （ IE6 支持二进透明，不支持Alpha 透明）

半透明： PNG-8 （像素级）， PNG-24 ， PNG-32参考：第四届webrebulid重构年会广州分站-网络图像优化

图片优化点滴…优化选项：

Gif 动画的压缩：调整失真度隔行扫描： Gif ， PNG-24

勾选图片“交错”：图片增大 VS 加载用户体验优先选择 PNG （有动画除外）Jpg 质量 80%-95% ：体积更小，品质还好不勾选“锐色”：减小体积PS 渐进导出 jpg ：体积更小Jpg 去除“噪点”：单色图体积差异大Jpg-2000 ：体积更小，质量更好，多数浏览器不支

持

WEB 标准设计…

WEB 标准

表现（ CSS ）

行为（ JavaScrip

t ）

结构（ XHTML

）

良好的结构…

DTD 声明——浏览器以什么模式解析网页

XHTML 规则——前后兼容

语义化、结构化——为表达语义而标记文档

模块化——可移植、代码重用性高、独立

从声明开始…3 种 DTD 声明：

严格型： XHTML 1.0 Strict

过渡型： XHTML 1.0 Transitional （我们常用的）

框架型： XHTML 1.0 Frameset

链接： http://www.w3school.com.cn/xhtml/xhtml_dtd.asp

特殊的 IE…

IE 浏览器的文档模式：

IE8 标准模式（采用标准 DTD 声明）IE8 准标准模式（即我们说的过渡型）IE7 标准模式（ IE=EmulateIE7 ）IE5 模式（怪异模式，影响盒子模型）

扩展阅读： IE8 如何确定文档模式

XHTML 重构…XHTML 规则：

1. 恰当的文档声明和命名空间2. 所有标签以及属性都用小写3. 所有属性添加引号并且不为空4. 正确嵌套、关闭标签（包括单标签）5. 符号使用转义字符替代（如   ）6. ……

Tips:

1 、 HTML 注释里面横杠使用英文，否则 FF下内容会被隐藏 2 、注释开始和结束前后，添加多一个空格，否则 FF 会显示出注释内容

语义化（结构化）的内容：

在 HTML 文档中，每一个内容都有含义利用有相应含义的标签去格式化页面中的内容网页中， HTML才是重点， CSS只是修饰页面的网页通过对样式的定义，可以以任何外观展现出来，

前提是拥有良好的结构HTML 添加了许多语义化的标签

（ header 、 footer 、 article… ），强调语义化的重要性

语义化（ semantic ）…

“每个元素都必须结构化”

在 HTML 文档中，所有内容都应该放在合适的的标记里

List 1<br />List 2<br />List 3<br />

<div>List 1</div><div>List 2</div><div>List 3</div>

<ul><li>List 1</li><li>List 2</li><li>List 3</li>

</ul>

语义化（ semantic ）…

语义化（ 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>

……

语义化（ semantic ）…语义化带来的好处：

失去 CSS时，页面仍然能够显示清晰的结构 一些对 CSS 支持较弱的设备能以一种有意义的方式渲染页面

搜索引擎的爬虫也依赖于标记来确定上下文和各个关 键字的权重

搜索引擎的爬虫注重语义标记，忽略表现标记 增强页面的可读性、易于团队开发

参考：语义化的HTML结构到底有什么好处？

语义化（ semantic ）…熟练使用 HTML 标签！

XHTML 标签列表：http://www.w3school.com.cn/tags/index.asp

HTML5 标签列表：http://www.w3school.com.cn/html5/html5_reference.a

sp

模块化…百度词条“模块化”：

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

如何实现？ 分析设计稿，划分功能模块（ Logo ，导航，新闻、

广告，文章，图片，留言…）列出所有模块公共的部分（比如圆角，标题背景，列表项图标，甚至模块等）

根据各模块相同和不同的属性，给各模块和子模块添加 id 或（和） class

id 和 class 的合理命名（命名体现模块的功能）

模块化…

一个例子：

模块化…

样式可以这样组织：

/* 公有样式开始 */.g-radius {}

.g-rectangle {}

#mod-a {}

#mod-b {}

#mod-c {}

.news {}

.article_list {}

.pic {}

.ad {}

/* 公有样式结束 */

模块化…/* a 模块私有样式开始 */#mod-a .news {}

#mod-a .article_list

{}

#mod-a .pic {}

#mod-a .ad {}

/* a 模块私有样式结束 *//* 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 模块私有样式结束 */

再一个例子：

模块化…

<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>

模块化带来的好处：

提高代码重用率（可移植性高） 各模块相对独立 提高开发效率，减少沟通成本 ……

模块化…

思考：网页中更换皮肤功能如何实现？

灵活处理：

区别？语义化地命名（命名体现功能）

id与 class…

Module Name Module Name Module Name

头 header 尾 footer 导航 nav

侧栏 sideBar 栏目 column 内容 content

登录 loginBar 菜单 menu 注册 regsiter

新闻 news 文章列表 list 服务 service

搜索 search 标题 title 指南 guild

理性地对待：

网页重构 ！ = div+CSSdiv 和 span只是 HTML很普通（无语义）的标

签通常添加 id 或 class实现语义化HTML5中可使用 <section> 替换 <div>

div与 span…

领悟：重构之前，先重构思想！

样式之美…

CSS

引入

Reset

继承

权重

布局

sprites

Hack

技巧

样式的引入：

外联：推荐使用的方式<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

样式之美…

Reset是必要的：

各个浏览器是有默认属性的各个浏览器默认的 CSS 属性是不同的清除浏览器默认样式，保证你写的 CSS 表现一致使用 Reset 重新定义默认的规则每个网站的 CSS Reset 都应该不同

CSS Reset…

扩展阅读：1 、 Reset CSS 研究（技术篇）2 、 YUI 2: Reset CSS

继承是 CSS 的特性！

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

继承（ Inheritance ）…

文本相关 font,letter-spacing,text-*,line-height,word-spacing

列表相关 list-style,list-style-type,list-style-images,list-style-position

颜色相关 color

按哪条规则显示呢？1. 样式作用的范围越小，权重越大

2. 用“特性值”快速计算权重

权重（优先级）…

优先级：内嵌 > 外联优先级：指定 >继承优先级： id>class>元素选择器优先级： !important 最高，但请慎用

选择符 特性值*(通配符 ) 0,0,0,0

H1(元素选择符 ),:first-child(伪元素选择符 ) 0,0,0,1

.class,:hover(伪类选择符 ),[alt]( 属性选择符 )

0,0,1,0

#id 0,1,0,0

混合： #id h1 a[title]:hover 0,1,2,2

流、浮动，定位：

CSS 盒子模型， IE6 的不同文档流，默认显示方式浮动：元素堆积定位：元素叠加混合布局：浮动，定位的元素对其他元素有影响

布局…

扩展阅读：1 、 CSS浮动布局初步2 、 CSS定位布局初步

四种办法：

1. 设置浮动2. 设置溢出隐藏3. :after伪类配合 content 属性4. 空标签清除

清除浮动…

.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>

图片拼合（ CSS雪碧 /精灵）：

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

Sprites…

写法（ＩＥ系列）：

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 不支持 */　 }

写法：

ＩＥ注释…

<!--[if IE]>

HTML code

<![endif]-->

<!--[if IE 5,6,7,8...]>

HTML code

<![endif]-->

<!--[if gte IE 5]>

HTML code

<![endif]-->

<!--[if lt IE 6]>

HTML code

<![endif]-->

<!--[if lte IE 5.5]>

HTML code

<![endif]-->

<!--[if !IE]><!-->

HTML code

<!--<![endif]-->

注：其实，注释不是Ｈａｃｋ，但是通不过验证

简写

技巧…

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;

选择器的书写

技巧…

div#wrap div#inner div#nav ul 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"> */}

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 /* 单行文字垂直居中 */