[2008]网站重构 -who am i

网站重构——

Who am I
TwinsenLiang

2008.08.12

现在

• 切图？

• 写文档？

• 发展路向只有转产品、转开发？

2008.08.12

什么是WEB2.0

• WEB2.0是出自于2004年3月，在欧雷利媒体公司
（O’Reilly Media Inc.）在线出版及研究的副总裁戴尔·多
尔蒂（Dale Dougherty）之手。

• WEB2.0是一个概念

• WEB2.0是以一系列网站做为代表的统称

• WEB2.0是以用户作为内容来源的

2008.08.12

存在的问题

• Dale Dougherty是最早提出API的人之一。对于这样的一
个技术型的人说出了一个并非以技术作为主导的概念

• 从一个终点目标的描述去多向发展是根本不可能到达所谓
的终点目标的。

• 很多所谓的内容为王，进而的还有以用户作为内容来源。
那么我们的用户在哪里来？

2008.08.12

问题发生的原因
《What is WEB2.0》（官方指定译文）原文是包含了技术的范围的，传
到国内却变样。

• Dale Dougherty是最早提出API的人之一。对于这样的一个技术型的人
说出了一个并非以技术作为主导的概念

• 从一个终点目标的描述去多向发展是根本不可能到达所谓的终点目标的。

• 很多所谓的内容为王，进而的还有以用户作为内容来源。那么我们的用
户在哪里来？

2008.08.12

WEB2.0的单手定则

CSS XHTML

AJAX

SEO
API

2008.08.12

1、XHTML（HTML、XML）

a. 重构的最大误区

b. 从头开始来学习

c. XHTML学习的本质就是该是什么就用什么

HTML是Hypertext Markup Language的英文缩写,即超文本标记语言,是一种用来制作网页的标记语言。XML
是The Extensible Markup Language(可扩展标识语言)的简写。
XHTML是EXtensible HyperText Markup Language的英文缩写,即可扩展的超文本标记语言也可看作是
HTML与XML的交集。

2008.08.12

首先我们必须要知道为什么要“DIV+CSS”。我们一
起来看下面三个例子。
• Table+CSS做的页面

• DIV+CSS做的页面

• DIV+CSS胜出的页面

TABLE是XHTML当中用作表格的标记。
DIV是XHTML当中用作分割快的标记。
CSS是Cascading Style Sheets(层叠样式表)的简称。

2008.08.12

1.a.重构的最大误区
接着我们是要推翻它：页面界没有人不知道的一本书《网站重构》到了
中国就变成了DIV+CSS。但是却没有人认真地读过这本书，里面有着
Jeffrey Zeldman所说这样的一句话——“即大量的使用div标签作为结构
元素，没有固定的标准和道理说不行，但事实上这是一种更高级的table
滥用。”（网络的出处）

2008.08.12

1.b.从头开始来学习
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<meta name="robots" content="all" />
<meta name=“author” content=“填写作者名." />
<meta name=“copyright" content="Copyright (c) 1998-2008 Tencent Inc." />
<meta name=“description” content=“填写本页的简介." />
<meta name=“keywords” content=“填写本页的关键词，以逗号分割" />
<title>填写文章的标题</title>
<link href="/style/screen/index.css" rel="stylesheet" type="text/css" media="screen" />
<link href="/style/handheld/index.css" rel="stylesheet" type="text/css" media="handheld" />


<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
<link rel="Bookmark" href=“/favicon.ico" type="image/x-icon" />
<link rel="alternate" type="application/rss+xml" title="RSS news feed" href="/rss.xml" />
</head>
<body>
</body>
</html>

2008.08.12

1.c. XHTML学习的本质就是该是什么就用什么
常用xhtml 1.0标签

h1-h6

div

p img

table colgroup col caption thead th tfoot tbody tr td

a span strong sup sub

form input button select option textarea label fieldset legend

ul ol li dl dt dd

2008.08.12

2、CSS（网页中的魔术师）

a. XHTML中CSS启用的命名规范

b. 对于盒模型带来的一些思考

c. CSS所必须牢记的几个要诀

d. CSS的未来

CSS是Cascading Style Sheets(层叠样式表)的简称。
盒模型是指页面表现各个影响宽高的属性所塑造的一个模型结构。

2008.08.12

2.a. XHTML中CSS启用的命名规范

CSS启用的命名规范会造成团队的不协调，新人无法接手等问题。CSS的
启用方式有：

• 使用直接的继承式

• 使用id命名的方式

• 使用classname命名的方式
当前存才的一些例子：
id=“list_title” id=“ListTitle” id=“list-title”
class =“list_title” class =“ListTitle” class=“list-title”

2008.08.12

2.b.对于盒模型带来的一些思考

各浏览器对盒模型的解释不一致，造成我们定位上的困难

• IE5.5以下的padding问题

• IE的多了一只猪问题

• OP字体定位的小像素偏移问题
最佳的解决方案：
1、HTML绑定IE Hack，CSS单独周边浏览器的Hack
2、结构的规范性
3、CSS的缩略化与模块化、模板化

Margin常被翻译为外补丁。
Padding常被翻译为内补丁。

2008.08.12

2.c. CSS所必须牢记的几个要诀

• 没有难的CSS，只有磨时间的CSS

• 最简单的CSS处理方法是绝对定位

• 浮动以后一定要清除浮动

• 多用margin，少用padding，可以令你的Hack更简单

• 巧妙的使用负边界去完成CSS中的“归位”

• 懂得分清楚什么项目使用什么的CSS解决方案，扭转传统
的“切图仔”观念

2008.08.12

2.d.CSS的未来

多平台、多终端，更好的表现我们页面完美样式。
• all 用于所有设备类型

• aural 用于语音和音乐合成器

• braille 用于触觉反馈设备

• embossed 用于凸点字符（盲文）印刷设备

• handheld 用于小型或手提设备

• print 用于打印机

• projection 用于投影图像，如幻灯片

• screen 用于计算机显示器

• tty 用于使用固定间距字符格的设备。如电传打字机和终端

• tv 用于电视类设备

当然除此之外还有我们的CSS2.0-2.1当中的一些伪类、伪对象等尚未能在浏览器当中
启用的属性和功能。
2008.08.12

3、AJAX

a. AJAX的frame work不能适应我们以及互联网的发展

b. AJAX的好处在于哪里

c. AJAX与其它关键技术点的优劣在于哪里

d. AJAX的落实点在于Client端

Ajax是异步JavaScript和XML（Asynchronous JavaScript and XML）的英文缩写。而另一方面也代表以Javascript为
实现主导的异步拉取数据的技术（如拉取Json等）

2008.08.12

4、SEO
a. SEO的主要技术点在于做好XHTML

b. SEO的次要技术点在于关键字的搜索排行

c. SEO的侧重点在于弱关键字带动强关键字

d. SEO的落实点在于Portal端

e. SEO的初期需要一群点击为工作的人（可以发展项目内的每一个人，
当然这就靠个人的拓展力了）

f. SEO的必要点是数据静态化以及合理的动态化连接

SEO是Search Engine Optimization的缩写，用英文描述是to use some technics to make your website in the top
places in Search Engine when somebody is using Search Engine to find something，翻译成中文就是“搜索引擎优化”，
一般可简称为搜索优化。与之相关的搜索知识还有Search Engine Positioning（搜索引擎定位）、Search Engine
Ranking（搜索引擎排名）。

2008.08.12

前端优化
• 减少HTTP请求数. 减少HTTP请求数

 降低服务器跟客户端的建立和消除HTTP请求和响应Header的开销

 减少服务器为HTTP连接的进程和线程的开销,如果可能,还会包括GZIP压
缩的CPU开销.

• 减小被请求文件大小, 减少请求数据占用的网络带宽.

• 让用户更快的看到想要的结果.

• 提高客户端渲染速度.

• 让浏览器同时能请求更多的数据.

• 提高服务器相应速度.

• 通过版本化控制客户端Cache.
 filename.css?071225.css

2008.08.12

前端优化

首页公共图片的优化将以上图片

2008.08.12

前端优化

合并为以上的一张图片

• 合并前耗时：22.447 S，大小：19194 KB

• 合并后耗时：0.012 S，大小：19180 KB

2008.08.12

互联网网站重构组的一些范例
背景定位：

2008.08.12


Demo link

当然，这只是一种方便的方式；但是一个全能的方式是Tmenu

2008.11.07

Background-image:

Demo link

2008.11.07


2008.11.07


模板的推广以及执行永远快于一个标准以及准则的执行！
2008.11.07

相关工具
两本手册

DHTML 手册

Css20手册

2008.11.07

相关工具
浏览器工具(IE相关):

Multiple_IE(绿色版IE集):

http://tredosoft.com/Multiple_IE

HttpWatch(http request 抓包工具 ):

http://www.httpwatch.com/download/

Internet Explorer Developer Toolbar(IE调试插件,主要功能为DOM选取):

http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-
2d5e1db91038&displaylang=en

2008.11.07

相关工具
浏览器扩展(Firefox 相关):

Firebug:

http://www.getfirebug.com/

Yslow(配合Firebug使用):

http://developer.yahoo.com/yslow/

Web Developer:

https://addons.mozilla.org/en-US/firefox/addon/60

Ie tab(在Firefox上调用当前系统的IE内核):

https://addons.mozilla.org/en-US/firefox/addon/1419

2008.11.07

相关工具
平台相关工具(操作系统虚拟机)

Virtual PC:

http://www.microsoft.com/windows/products/winfamily/virtualpc/default.mspx

VMware Workstation:

http://www.vmware.com/download/ws/

2008.11.07

Thanks
Q&A

TwinsenLiang

2008.11.07

[2008]网站重构 -who am i

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to [2008]网站重构 -who am i

Similar to [2008]网站重构 -who am i (20)

[2008]网站重构 -who am i