页面重构

Report
网页重构…
一步一步走…
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…
写法(IE系列):
.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不支持 */
}
}
IE注释…
写法:
<!--[if IE]>
HTML code
<!--[if lt IE 6]>
HTML code
<![endif]-->
<![endif]-->
<!--[if IE 5,6,7,8...]>
<!--[if lte IE 5.5]>
HTML code
HTML code
<![endif]-->
<![endif]-->
<!--[if gte IE 5]>
<!--[if !IE]><!-->
HTML code
<![endif]-->
HTML code
<!--<![endif]-->
注:其实,注释不是Hack,但是通不过验证
技巧…
 简写
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 /* 单行文字垂直居中 */

similar documents