页面重构

Transcript 页面重构

网页重构…
一步一步走…
CSS
HTML页面
设计原稿
不急于动手…
• 栏目结构（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标准设计…
表现
（CSS）
WEB标准
结构
（XHTML）
行为
（JavaScript）
良好的结构…
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会显示出注释内容
语义化（semantic）…
语义化（结构化）的内容：
 在HTML文档中，每一个内容都有含义
 利用有相应含义的标签去格式化页面中的内容
 网页中，HTML才是重点，CSS只是修饰页面的
 网页通过对样式的定义，可以以任何外观展现出来，
前提是拥有良好的结构
 HTML添加了许多语义化的标签（header、footer、
article…），强调语义化的重要性
语义化（semantic）…
“每个元素都必须结构化”
在HTML文档中，所有内容都应该放在合适的的标记里
<ul>
List 1<br />
List 2<br />
List 3<br />
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<div>List 1</div>
<div>List 2</div>
<div>List 3</div>
</ul>
语义化（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.asp
模块化…
百度词条“模块化”：
模块化是指解决一个复杂问题时自顶向下逐层把软件系统
划分成若干模块的过程。每个模块完成一个特定的子功能，所有
的模块按某种方法组装起来，成为一个整体，完成整个系统所
要求的功能。模块具有以下几种基本属性：接口、功能、逻辑、
状态，功能、状态与接口反映模块的外部特性，逻辑反映它的内
部特性。在软件的体系结构中，模块是可组合、分解和更换的
单元。
模块化…
如何实现？
 分析设计稿，划分功能模块（Logo，导航，新闻、
广告，文章，图片，留言…）
 列出所有模块公共的部分（比如圆角，标题背景，
列表项图标，甚至模块等）
 根据各模块相同和不同的属性，给各模块和子模块
添加id或（和）class
 id和class的合理命名（命名体现模块的功能）
模块化…
一个例子：
模块化…
样式可以这样组织：
/* a模块私有样式开始 */
#mod-a .news {}
#mod-a .article_list {}
#mod-a .pic {}
#mod-a .ad {}
/* 公有样式开始 */
/* a模块私有样式结束 */
.g-radius {}
.g-rectangle {}
/* b模块私有样式开始 */
#mod-a {}
#mod-b .news {}
#mod-b {}
#mod-b .article_list {}
#mod-c {}
#mod-b .pic {}
.news {}
#mod-b .ad {}
.article_list {}
/* b模块私有样式结束 */
.pic {}
.ad {}
/* 公有样式结束 */
/* c模块私有样式开始 */
#mod-c .news {}
#mod-c .article_list {}
#mod-c .pic {}
#mod-c .ad {}
/* c模块私有样式结束 */
模块化…
再一个例子：
<div class="mod-b">
<div class="mod-a">
<div class="mod-c">
<div class="mod-a">
<h3>一个h3标题</h3>
<h3>另一个h3标题</h3>
<p>一个段落。</p>
<p>另外一个段落。</p>
</div>
</div>
<div class="cont">
<div class="cont">
<h4>一个h4标题</h4>
<h4>另一个h4标题</h4>
<ul>
<p>还有一个段落。</p>
<li>列表项</li>
<li>列表项</li>
</ul>
</div>
</div>
</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与span…
理性地对待：
 网页重构
！=
div+CSS
 div和span只是HTML很普通（无语义）的标签
 通常添加id或class实现语义化
 HTML5中可使用<section>替换<div>
领悟：重构之前，先重构思想！
样式之美…
引入
技巧
Reset
CSS
Hack
继承
权重
sprites
布局
样式之美…
样式的引入：
 外联：推荐使用的方式
<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
CSS Reset…
Reset是必要的：
 各个浏览器是有默认属性的
 各个浏览器默认的CSS属性是不同的
 清除浏览器默认样式，保证你写的CSS表现一致
 使用Reset重新定义默认的规则
 每个网站的CSS Reset都应该不同
扩展阅读：
1、Reset CSS 研究（技术篇）
2、YUI 2: Reset CSS
继承（Inheritance）…
继承是CSS的特性！
 继承就是子孙元素会继承父元素的样式
 掌握CSS的继承，让开发者更轻松，CSS更简洁
 有时候，继承让人头疼，比如行高…
 究竟哪些属性可以继承呢？
文本相关
font,letter-spacing,text-*,line-height,word-spacing
列表相关
list-style,list-style-type,list-style-images,list-style-position
颜色相关
color
权重（优先级）…
按哪条规则显示呢？
1. 样式作用的范围越小，权重越大
优先级：内嵌>外联
优先级：指定>继承
优先级：id>class>元素选择器
优先级：!important最高，但请慎用
2. 用“特性值”快速计算权重
选择符
特性值
*(通配符)
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>
Sprites…
图片拼合（CSS雪碧 /精灵）：
•
把多张图片拼合为一张图
•
这张图片作为多个元素的背景
•
利用背景的position-position属性精确定位
•
好处：减少HTTP请求，服务器减压，精确定位
•
不利：图片体积增大，修改不够灵活
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 {
.nie6 {
border:1px dashed #CCC;/* IE6，IE5支持 */
display:/* 注释 */none;/* IE6不支持 */
.nie56/* 注释 */ {
}
}
display:/* 注释 */none;/* IE6，IE5不支持 */
}
}
ＩＥ注释…
写法：

<![endif]-->

<![endif]-->

HTML code
<![endif]-->
HTML code

注：其实，注释不是Ｈａｃｋ，但是通不过验证
技巧…
 简写
border-top-width: 1px;
border-top-style: solid;
border-top: 1px solid #DDD;
border-top-color: #DDDDDD;
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 /* 单行文字垂直居中 */

页面重构

Transcript 页面重构

Directory