一起CSS » 未分类 http://www.17css.com 一起CSS，专注、关注CSS等前端技术。 Tue, 17 Jan 2012 04:59:48 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 IE全球市占率重新超过60% http://www.17css.com/june-2010-ie-browser-market-share-of-global-back-more-than-60-percent/ http://www.17css.com/june-2010-ie-browser-market-share-of-global-back-more-than-60-percent/#comments Thu, 01 Jul 2010 04:29:38 +0000 青色 http://www.17css.com/?p=719 5 月份，《IE的市场份额下降到历史最低》，为 59.75% ，今天 Net Applications 公布了 6 月份的最新数据：IE 上升了 0.57%，为 60。32%。排名第二的是 Firefox，但却有所下滑，从上月的 24.3% 下降至 23.8%。而排名第三的 Chrome 和第四的 Safari 都有略微上涨：Chrome 从 5 月的 7.0% 稍微增长至 7.2%，Safari 从 4.8% 增长至 4.9%，而排名第五的 Opera 则从 2.4% 下滑至 2.3%。

2010 年 6 月主流浏览器市场份额占有率图片

Net Applications 将本次 IE 市场占有率上涨归功于微软的信心（Confidence）推广活动，但其他因素也起了一定的促进作用，比如 Windows 7 的成功以及欧洲地区对安装系统时浏览器选择窗口的规定。

微软负责 IE 浏览器业务和营销部门的高级经理瑞恩·加文（Ryan Gavin）本周四在博客上称这条消息“令人鼓舞”。但他同时也表示了谨慎的态度，他说：“市占率提升其实只是评估 IE 浏览器进步程度的一个方面。我们当然不会仅仅因为最近两个月的好成绩沾沾自喜。

©2012 一起CSS. All Rights Reserved.

.

相关日志

]]> http://www.17css.com/june-2010-ie-browser-market-share-of-global-back-more-than-60-percent/feed/ 0 作品之每天物流平台 http://www.17css.com/%e4%bd%9c%e5%93%81%e4%b9%8b%e6%af%8f%e5%a4%a9%e7%89%a9%e6%b5%81%e5%b9%b3%e5%8f%b0/ http://www.17css.com/%e4%bd%9c%e5%93%81%e4%b9%8b%e6%af%8f%e5%a4%a9%e7%89%a9%e6%b5%81%e5%b9%b3%e5%8f%b0/#comments Tue, 10 Feb 2009 08:28:50 +0000 青色 http://www.17css.com/?p=338 每天物流平台是一个网上物流平台，在这个平台里车主和货主可以自由发布所需的信息，可以在地图上看到自己的车或者货当前所在的位置，还可以用手记发送指令进行相关的操作。该平台预计 5 月 15 号发布第一版测试版，域名目前未知。

因为该公司没有提供logo，所以用了一个临时的，该平台所属广州华正道物流有限公司，德立物流有限公司好像其公司在香港开的分公司，具体什么关系不清楚，反正就是这么一个平台了。

每天物流平台

查看大图 查看网页

©2012 一起CSS. All Rights Reserved.

.

随机日志

]]> http://www.17css.com/%e4%bd%9c%e5%93%81%e4%b9%8b%e6%af%8f%e5%a4%a9%e7%89%a9%e6%b5%81%e5%b9%b3%e5%8f%b0/feed/ 0 wordpress自动升级成功 http://www.17css.com/wordpress%e8%87%aa%e5%8a%a8%e5%8d%87%e7%ba%a7%e6%88%90%e5%8a%9f/ http://www.17css.com/wordpress%e8%87%aa%e5%8a%a8%e5%8d%87%e7%ba%a7%e6%88%90%e5%8a%9f/#comments Fri, 26 Sep 2008 20:07:43 +0000 青色 http://www.17css.com/?p=91 开始使用wordpress是的版本是2.5.1，现在已经更新到2.6.2，由于不太懂wordpress，又没有升级过wordpress，在论坛上又看到很多wordpress在升级过程中或升级之后遇到这样那样的问题，所以我迟迟没有升级。

前两天偶然知道Wordpress Automatic Upgrade这个插件，据说是一个可以让wordpress自动升级的插件。我很惊讶，我在怀疑这个插件到底行不行，是不是真的有这么神奇。怀疑归怀疑，为了不麻烦自己，我抱着试试的态度装上了这个插件。装上之后按常规的方法启用插件，可是到设置里却没有看到这个插件。怎么搞的？难道就是这样的？难道它就正在帮我升级了？然而浏览我的wordpress却依然可以访问（如果正在升级，会出现网站正在维护的提示），查看源代码提示版本也仍是2.5.1。继续捣鼓了几下，还是没有任何反应，就没有理它了。

今天登陆wordpress后台，突然发现管理导航下比以前多了一行英文提示，又看到Upgrade这个单词，我就怀疑是Wordpress Automatic Upgrade插件的作用，我点击“Click me”后转到一个英文页面，由于不上很懂英文，所以找了个在线翻译，翻译了几句，知道这确实就是Wordpress Automatic Upgrade开始升级的页面，于是我就开始自动升级起来。为了防止升级过程中出现问题，所以我小心翼翼的进行着。一遇到看不懂的地方就进行翻译。最终，我的wordpress升级成功，整个过程不超过5分钟。

有了这个插件，wordpress升级就不那么麻烦了，太好了。

©2012 一起CSS. All Rights Reserved.

.

相关日志

]]> http://www.17css.com/wordpress%e8%87%aa%e5%8a%a8%e5%8d%87%e7%ba%a7%e6%88%90%e5%8a%9f/feed/ 11 web设计辅助利器——FF必备插件 http://www.17css.com/web%e8%ae%be%e8%ae%a1%e8%be%85%e5%8a%a9%e5%88%a9%e5%99%a8%e2%80%94%e2%80%94ff%e5%bf%85%e5%a4%87%e6%8f%92%e4%bb%b6/ http://www.17css.com/web%e8%ae%be%e8%ae%a1%e8%be%85%e5%8a%a9%e5%88%a9%e5%99%a8%e2%80%94%e2%80%94ff%e5%bf%85%e5%a4%87%e6%8f%92%e4%bb%b6/#comments Thu, 25 Sep 2008 15:46:00 +0000 青色 http://www.17css.com/?p=72 1、firebug 1.05中文版

可以说是FF最强大的插件之一，无论是查看DOM结构、调节样式、调试JavaScript，Firebug都无愧是“拿莫温（NO.1）”。

2、web developer1.1.6中文版

仅次于Firebug的网页开发设计者工具。功能众多而且强劲。看着这令人眼花缭乱的插件设置窗口，就能一窥它的强大。推荐网页开发者和网页设计者使用，能够帮助你方便的对页面进行调整和完善。

3、cssviewer 1.0.3中文版

也是一个很强的CSS查看插件。

4、Aardvark

可以查看网页上鼠标出的元素的类型，id和应用的class。

5、ColorZilla

网页取色工具。

6、JavaScriptDebugge

javascript调试工具，在这方面比FireBug更强大些。

7、JSView

可以查看当前页面的外部js和css，对开发者来说很有有帮助。

©2012 一起CSS. All Rights Reserved.

.

随机日志

]]> http://www.17css.com/web%e8%ae%be%e8%ae%a1%e8%be%85%e5%8a%a9%e5%88%a9%e5%99%a8%e2%80%94%e2%80%94ff%e5%bf%85%e5%a4%87%e6%8f%92%e4%bb%b6/feed/ 5 web标准的开始——DOCTYPE http://www.17css.com/web%e6%a0%87%e5%87%86%e7%9a%84%e5%bc%80%e5%a7%8b%e2%80%94%e2%80%94doctype/ http://www.17css.com/web%e6%a0%87%e5%87%86%e7%9a%84%e5%bc%80%e5%a7%8b%e2%80%94%e2%80%94doctype/#comments Mon, 22 Sep 2008 14:49:01 +0000 青色 http://www.17css.com/?p=70 今天在论坛上解决一个问题时，又看到他的网页没有加上DOCTYPE，于是在回复里加了一句提醒。

我们浏览的大多数网站，或者用Dreamweaver创建一个新的网页文档时，源码的顶部都会有DOCTYPE声明，但是很多人没有注意它，甚至在创作时候直接将它删掉，其实这往往就是噩梦的开始，很有可能会引发一系列的问题。我在制作过程中就遇到很多因为没有加DOCTYPE声明而引发的奇怪问题，这些问题说都说不清楚。就拿行内元素来说，在加有DOCTYPE声明的文档中，它是没有高度和宽度的（这个是正确的），但不加DOCTYPE声明，给它定义高度和宽度是有效的。

不加上DOCTYPE声明，那么各个浏览器会以各自默认的DOCTYPE解释文档，这就出现了差异，不兼容。所以DOCTYPE声明是很重要的。下面具体认识一下DOCTYPE：

一、什么是DOCTYPE

DOCTYPE是Document Type（文档类型）的简写，在页面中，用来指定页面所使用的XHTML（或者HTML）的版本。要想制作符合标准的页面，一个必不可少的关键组成部分就是DOCTYPE声明。只有确定了一个正确的DOCTYPE，XHTML里的标识和CSS才能正常生效。

二、DOCTYPE的规则

DOCTYPE声明的写法遵循一定的规则，它指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的情况下，“阅读程序”通常是浏览器或者校验器这样的一个程序，“规则”则是w3c所发布的一个文档类型定义（dtd）中包含的规则。

每个dtd都包括标记、attributes、properties等内容，它们用于标记web文档的内容；此外还包括一些规则，它们规定了哪些标记能出现在其他哪些标记中。每个web建议标准（比如html 4 frameset和xhtml 1.0 transitional）都有自己的dtd。

以下是从手册上摘抄的规则：

语法：

HTML  顶级元素  可用性 "注册//组织//类型 标签//定义  语言""URL"

可能值：

- 顶级元素：指定 DTD 中声明的顶级元素类型。这与声明的 SGML 文档类型相对应。 HTML 默认。HTML。

- 可用性：指定正式公开标识符(FPI)是可公开访问的对象还是系统资源。 PUBLIC 默认。可公开访问的对象。SYSTEM 系统资源，如本地文件或 URL。

- 注册：指定组织是否由国际标准化组织(ISO)注册。 + 默认。组织名称已注册。

- 组织名称未注册。Internet 工程任务组(IETF)和万维网协会(W3C)并非注册的ISO组织。（组织：指定表明负责由 !DOCTYPE 声明引用的 DTD 的创建和维护的团体或组织的名称，即 OwnderID、IETF、W3C）

- 类型：指定公开文本类，即所引用的对象类型。 DTD 默认。DTD。

- 标签：指定公开文本描述，即对所引用的公开文本的唯一描述性名称。后面可附带版本号。 

- 定义：指定文档类型定义。

1、Frameset 框架集文档；

2、Strict 排除所有 W3C 专家希望逐步淘汰的代表性属性和元素，因为样式表已经很完善了；

3、Transitional 包含除 frameSet 元素的全部内容。

- 语言：指定公开文本语言，即用于创建所引用对象的自然语言编码系统。该语言定义已编写为 ISO 639  语言代码(大写两个字母)。 EN 默认。英语。

- URL：指定所引用对象的位置。

为了获得正确的DOCTYPE声明，关键就是让dtd与文档所遵循的标准对应。例如，假定文档遵循的是xhtml 1.0 strict标准，文档的doctype声明就应该引用相应的dtd。另一方面，如果doctype声明指定的是xhtml dtd，但文档包含的是旧式风格的html标记，就是不恰当的；类似地，如果doctype声明指定的是html dtd，但文档包含的是xhtml 1.0 strict标记，同样是不恰当的。

三、选择什么样的DOCTYPE

如上例所示，XHTML 1.0中有3种DTD（文档类型定义）声明可以选择：过渡的（Transitional）、严格的（Strict）和框架的（Frameset）。这里分别介绍如下。

1、过渡的

一种要求不很严格的DTD，允许在页面中使用HTML4.01的标识（符合xhtml语法标准）。过渡的DTD的写法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2、严格的

一种要求严格的DTD，不允许使用任何表现层的标识和属性，例如<br/>等。严格的DTD的写法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3、框架的

一种专门针对框架页面所使用的DTD，当页面中含有框架元素时，就要采用这种DTD。框架的DTD的写法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

使用严格的DTD来制作页面，当然是最理想的方式。但是，对于没有深入了解Web标准的网页设计者，比较合适的是使用过渡的DTD。因为这种DTD还允许使用表现层的标识、元素和属性，比较适合大多数网页制作人员。

四、需要注意的问题

一定要将DOCTYPE声明放在XHTML文档的顶部，上面哪怕多个HTML注释标记都不行。最好示例代码也加上DOCTYPE，否则效果会有差异。

引用部分摘自：http://www.sjweb.cn/article/2.htm

©2012 一起CSS. All Rights Reserved.

.

随机日志

]]> http://www.17css.com/web%e6%a0%87%e5%87%86%e7%9a%84%e5%bc%80%e5%a7%8b%e2%80%94%e2%80%94doctype/feed/ 0 IE的条件注释 http://www.17css.com/ie%e7%9a%84%e6%9d%a1%e4%bb%b6%e6%b3%a8%e9%87%8a/ http://www.17css.com/ie%e7%9a%84%e6%9d%a1%e4%bb%b6%e6%b3%a8%e9%87%8a/#comments Sat, 20 Sep 2008 12:24:13 +0000 青色 http://www.17css.com/?p=69 从IE 5开始，有了IE条件注释。既然是“IE”条件注释，所以只有IE中才有效果。

IE条件注释是用来判断IE浏览器版本的。其基本结构和HTML的注释(<!-- -->)是一样的，因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们，而IE则会根据条件显示。所以IE条件注释常用于CSS hank。

IE条件注释的基本语法是：

<!--[if IE]>
这里的内容IE浏览器才显示
< ![endif]-->

<!--[if IE]>和< ![endif]-->之间的内容在IE浏览器中能显示，而其他浏览器则会把它当作注释忽略。

IE条件注释还可以加上浏览器版本：

<!--[if IE 5]>
这里的内容IE 5才显示
< ![endif]-->
<!--[if IE 5.5]>
这里的内容IE 5.5才显示
< ![endif]-->
<!--[if IE 6]>
这里的内容IE 6才显示
< ![endif]-->
<!--[if IE 7]>
这里的内容IE 7才显示
< ![endif]-->

IE条件注释还有几个特殊语法：

1、lte  Less than or equal to的简写，也就是小于或等于的意思；

2、lt  Less than的简写，也就是小于的意思；

3、gte  Greater than or equal to的简写，也就是大于或等于的意思；

4、gt  Greater than的简写，也就是大于的意思；

5、!  不等于的意思，跟javascript里的不等于判断符相同。

举个例子：

<!--[if lte IE 6]>
lte的意思是小于或等于，所以这里面的内容只有IE 6及以下版本的IE浏览器能显示
< ![endif]-->

有一点需要注意的是：IE条件注释只适用于HTML，对CSS则没有用。不过我们可以换一个思路解决这个问题：

<!--[if IE]>
<style type="text/css">
这里的CSS语法只在IE浏览器里有效
</style>
< ![endif]-->

这个方法就可以使需要的CSS只在IE里有效果。

举一个综合的例子：

XHTML代码：

<!--[if ie]>
<p class="p1">你的浏览器是IE浏览器，并且这段文字是红色的。</p>
<![endif]-->
<p>如果你使用的是IE浏览器，那么你会看到上面还有一行红色的文字；如果你使用的不是IE浏览器，那么你只能看到这段蓝色的文字。</p>

CSS代码：

<style type="text/css">
p{
color:#00f;
}
</style>
<!--[if ie]>
<style type="text/css">
.p1{
color:#f00;
}
</style>
<![endif]-->

结果正如上面XHTML代码第二段所说。你可以点击这里查看结果。

©2012 一起CSS. All Rights Reserved.

.

随机日志

]]> http://www.17css.com/ie%e7%9a%84%e6%9d%a1%e4%bb%b6%e6%b3%a8%e9%87%8a/feed/ 0 几种常见浏览器内核简介 http://www.17css.com/%e5%87%a0%e7%a7%8d%e5%b8%b8%e8%a7%81%e6%b5%8f%e8%a7%88%e5%99%a8%e5%86%85%e6%a0%b8%e7%ae%80%e4%bb%8b/ http://www.17css.com/%e5%87%a0%e7%a7%8d%e5%b8%b8%e8%a7%81%e6%b5%8f%e8%a7%88%e5%99%a8%e5%86%85%e6%a0%b8%e7%ae%80%e4%bb%8b/#comments Wed, 10 Sep 2008 04:21:52 +0000 青色 http://www.17css.com/?p=61 9月3日Google发布了Chrome浏览器，试用了一下，觉得还不错：速度快，界面简洁，正是我喜欢的风格。不过这里不是介绍Chrome浏览器，而是介绍浏览器内核。

那内核是什么呢？内核只是一个通俗的说法，其英文名称为“Layout engine”，翻译过来就是“排版引擎”，也被称为“页面渲染引擎”（下文中各种说法通用）。它负责取得网页的内容（HTML、XML、图像等等）、整理信息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要排版引擎。

那浏览器的有哪些呢？事实上，有很多种（废话！），如果加上所有的几乎没有什么人在用的非商业的免费内核，那么可能大约有10款以上甚至更多，不过通常我们比较常见的大约只有以下四种，下面先简单介绍一下：

Trident：

这是微软开发的一种排版引擎。该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到目前的IE7。Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器涌现（如 Maxthon、The World 、TT、GreenBrowser、AvantBrowser等）。此外，为了方便也有很多人直接简称其为IE内核（当然也不排除有部分人是因为不知道内核名称而只好如此说）。自从发布后，Trident不断地被更新和完善：

Trident II（IE5）——增进对CSS1.0的支持及对CSS2重大的变更；

Trident III（IE5.5）——修正部分CSS的排版控制；

Trident IV（IE6）——修正了一部分box-model的错误以及增加了“兼容模式（Quirks Mode）”切换功能，以增加对文件类型描述（Document Type Definition，DTD）的支持；

Trident V（IE7）——修正许多CSS排版处理上的错误以及增加对PNG格式alpha通道（半透明）的支持。

Geckos：

Gecko是套开放源代码的、以C++编写的网页排版引擎。这软件原本是由网景通讯公司开发的，Netcape6开始采用该内核。后来的Mozilla FireFox也采用了改内核，Geckos的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。Geckos现在由Mozilla基金会维护。

Presto：

Presto是一个由Opera Software开发的浏览器排版引擎，该内核在2003年的Opera7中首次被使用，该款引擎的特点就是渲染速度的优化达到了极致，也是目前公认网页浏览速度最快的浏览器内核。

Webkit：

苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。所以Webkit也是自由软件，同时开发源代码。在安全方面不受IE、Firefox的制约，所以Safari浏览器在国内还是很安全的。

简单的总结一下：

使用Trident内核的浏览器：IE、Maxthon、TT；

使用Gecko内核的浏览器：Netcape6及以上版本、FireFox；

使用Presto内核的浏览器：Opera7及以上版本；

使用Webkit内核的浏览器：Safari、Chrome。

值得庆幸的是：Google的Chrome使用的内核并不是一个新的内核，而是苹果公司的Webkit内核，所以前端工作者的工作量没有加大。如果我们的网页在Safari中没有问题，那在Chrome里也是没有问题的。

©2012 一起CSS. All Rights Reserved.

.

随机日志

]]> http://www.17css.com/%e5%87%a0%e7%a7%8d%e5%b8%b8%e8%a7%81%e6%b5%8f%e8%a7%88%e5%99%a8%e5%86%85%e6%a0%b8%e7%ae%80%e4%bb%8b/feed/ 0 XHTML各标签对搜索引擎的权重 http://www.17css.com/xhtml%e5%90%84%e6%a0%87%e7%ad%be%e5%af%b9%e6%90%9c%e7%b4%a2%e5%bc%95%e6%93%8e%e7%9a%84%e6%9d%83%e9%87%8d/ http://www.17css.com/xhtml%e5%90%84%e6%a0%87%e7%ad%be%e5%af%b9%e6%90%9c%e7%b4%a2%e5%bc%95%e6%93%8e%e7%9a%84%e6%9d%83%e9%87%8d/#comments Fri, 22 Aug 2008 05:42:57 +0000 青色 http://www.17css.com/?p=41 一个网站如果得不到搜索引擎的青睐，就算页面再漂亮、功能再好也不会有太好的效果。因为没人知道啊（做其他推广的除外）。为了让我们的网站被更多人知道、被更多人访问，就必须让搜索引擎收录我们的网站。这就是为什么专门的搜索引擎优化团队、公司不断出现。我们虽然不是专业人士，但掌握一些基本知识并应用到自己的网站上，也能让我们的网站有比较好的效果。这里主要讲XHTML中各个标签对搜索引擎的权重。

XHTML各标签对搜索引擎的权重：

域名：7分

标题title：10分

内部链接文字：10分

H1,H2字号标题：5分

每段首句：5分

路径或文件名：4分

相似度（关键词堆积）：4分

每句开头：1.5分

加粗或斜体：1分

文本用法(内容)：1分

title属性：1分 (注意不是标题<title>, 是title属性, 比如a href="" title="")

alt标记：0.5分

meta描述（description属性）：0.5分

meta关键词（keywords属性）：0.05分

以上内容来自互联网，仅供参考。

当然，搜索引擎优化并不仅仅这些，而是由很多很多因素组成，比如内容、内链、外链、作弊等等，所以你把上面的优化应用到你的网站后排名仍不理想，也是正常的。

©2012 一起CSS. All Rights Reserved.

.

相关日志

]]> http://www.17css.com/xhtml%e5%90%84%e6%a0%87%e7%ad%be%e5%af%b9%e6%90%9c%e7%b4%a2%e5%bc%95%e6%93%8e%e7%9a%84%e6%9d%83%e9%87%8d/feed/ 0 各知名网站的团队博客、招聘网站 http://www.17css.com/%e5%90%84%e7%9f%a5%e5%90%8d%e7%bd%91%e7%ab%99%e7%9a%84%e5%9b%a2%e9%98%9f%e5%8d%9a%e5%ae%a2%e3%80%81%e6%8b%9b%e8%81%98%e7%bd%91%e7%ab%99/ http://www.17css.com/%e5%90%84%e7%9f%a5%e5%90%8d%e7%bd%91%e7%ab%99%e7%9a%84%e5%9b%a2%e9%98%9f%e5%8d%9a%e5%ae%a2%e3%80%81%e6%8b%9b%e8%81%98%e7%bd%91%e7%ab%99/#comments Thu, 21 Aug 2008 06:01:48 +0000 青色 http://www.17css.com/?p=39 你有博客吗？我想应该有。但你知不知道，一些知名网站（比如淘宝、网易、QQ）的一些开发团队也有他们的博客呢？这些团队博客的内容一般是技术性日志以及他们网站动态的日志，去看看还是很有收获的。下面是我所知道的一些团队博客，希望你们看了也能有所收获。如果您还知道我这里没有的，请你推荐给我，谢谢！

一、团队博客

淘宝UED：http://ued.taobao.com/blog/

阿里巴巴UED：http://www.aliued.com/

阿里巴巴中文站前端开发团队：http://www.f-dev.com/

阿里巴巴用户体验部群博客：http://www.aliued.cn/

阿里妈妈UED：http://ued.alimama.com/

口碑网UED：http://ued.koubei.com

阿里软件UED：http://www.alisoftued.com/

163UED：http://www.ued163.com/

九天音乐UCD：http://www.9skyucd.com/

亿玛UED团队：http://ued.emarblog.com/ 

二、招聘网站

1、阿里巴巴国际网站UED团队 招聘站点：http://job.aliued.com/

2、雅虎招聘：http://cn.career.yahoo.com/yahoo/hr/1/

©2012 一起CSS. All Rights Reserved.

.

随机日志

]]> http://www.17css.com/%e5%90%84%e7%9f%a5%e5%90%8d%e7%bd%91%e7%ab%99%e7%9a%84%e5%9b%a2%e9%98%9f%e5%8d%9a%e5%ae%a2%e3%80%81%e6%8b%9b%e8%81%98%e7%bd%91%e7%ab%99/feed/ 0 遵循Web标准的网页设计工作流程(一) http://www.17css.com/%e9%81%b5%e5%be%aaweb%e6%a0%87%e5%87%86%e7%9a%84%e7%bd%91%e9%a1%b5%e8%ae%be%e8%ae%a1%e5%b7%a5%e4%bd%9c%e6%b5%81%e7%a8%8b%e4%b8%80/ http://www.17css.com/%e9%81%b5%e5%be%aaweb%e6%a0%87%e5%87%86%e7%9a%84%e7%bd%91%e9%a1%b5%e8%ae%be%e8%ae%a1%e5%b7%a5%e4%bd%9c%e6%b5%81%e7%a8%8b%e4%b8%80/#comments Wed, 30 Jul 2008 08:48:36 +0000 青色 http://17css.com/?p=31 经常有读者来信询问在实际开发一个网站的时候，具体是按照什么工作流程进行工作的，一个网站到底是如何从零开始一点点做出来的呢?

今天我们来就这个问题作一些说明。我们今天介绍的是关于从零开始设计一个页面的过程，我们可以把一个页面的完整设计过程分为7个步骤，如下图所示。

网页设计流程

在图中，这个过程分为了7个步骤，并且说明了这7个步骤相应使用的工具。这7个步骤依次为：

1. 内容分析：仔细研究需要在网页中的展现的内容，梳理其中的逻辑关系，分清层次，以及重要程度。

2. 结构设计：根据内容分析的成果，搭建出合理的HTML结构，保证在没有任何CSS样式的情况下，在浏览器保持高可读性。

3. 原型设计：根据网页的结构，绘制出原型线框图，对页面进行合理的分区的布局，原型线框图是设计负责人与客户交流的最佳媒介。

4. 方案设计：在确定的原型线框图基础上，使用美工软件，设计出具有良好视觉效果的页面设计方法。

5. 布局设计：使用HTML和CSS对页面进行布局。

6. 视觉设计：使用CSS并配合美工设计元素，完成由设计方法到网页的转化。

7. 交互设计：为网页增添交互效果，如鼠标指针经过时的一些特效等。

下面具体解说一下，例如要设计出一个如下图所示的页面。这是为一个假想的名为“Baby Housing”的儿童用品网上商店制作的一个网站首页。

网页设计流程-首页

请读者思考一下要设计出这样的一个页面，根据上面描述的工作流程，应该在每一步骤中完成什么工作呢？今天介绍先介绍这里，明天继续！

文章转载自 http://learning.artech.cn/20080320.web-design-work-flow.html

后面几篇不再转载到本站，有兴趣的可以点击下面的链接直接到“官方”站阅读：

遵循Web标准的网页设计工作流程(二)

遵循Web标准的网页设计工作流程(三)

遵循Web标准的网页设计工作流程(四)

遵循Web标准的网页设计工作流程(五)

©2012 一起CSS. All Rights Reserved.

.

相关日志

]]> http://www.17css.com/%e9%81%b5%e5%be%aaweb%e6%a0%87%e5%87%86%e7%9a%84%e7%bd%91%e9%a1%b5%e8%ae%be%e8%ae%a1%e5%b7%a5%e4%bd%9c%e6%b5%81%e7%a8%8b%e4%b8%80/feed/ 0 图片对网站速度的测试 http://www.17css.com/%e5%9b%be%e7%89%87%e5%af%b9%e7%bd%91%e7%ab%99%e9%80%9f%e5%ba%a6%e7%9a%84%e6%b5%8b%e8%af%95/ http://www.17css.com/%e5%9b%be%e7%89%87%e5%af%b9%e7%bd%91%e7%ab%99%e9%80%9f%e5%ba%a6%e7%9a%84%e6%b5%8b%e8%af%95/#comments Fri, 25 Jul 2008 07:54:52 +0000 青色 http://17css.com/?p=15 一次偶然，用Firebug看到腾讯将许多小图标、小图片合在一张大图上（点击这里查看），当时觉得很奇怪，因为按照传统，我们会将那些小图标、小图片切分成一个一个小的图片。想来想去，我觉得可能更网站速度有关。后来又陆续见到这样的例子，我就越来越肯定这个观点了。

但到底是不是上面所说的那样呢？我一直没时间证实，今天我们就来测试一下这样做对网站速度到底有怎样的影响。我们拿一张图片（见下图），测试网页加载这一整张图片快还是把它切分成14（14个栏目）个小图片快。

测试条件/环境：

1、图片：以我目前正在做的一个网页的导航背景图片吧；点击这里查看

2、网页：针对上面的背景图片我写了3个不同的网页，分别是：测试文档a、测试文档b、测试文档c，其中测试文档a用的是14个小图片，测试文档b和测试文档c是用一整张图片；

3、服务器：以本人目前在职公司的服务器；

4、测试工具：Firebug；

5、测试次数：10次/网页。

测试结果：

次数 测试文档a 测试文档b 测试文档c
1 579ms 31ms 62ms
2 360ms 125ms 141ms
3 641ms 32ms 109ms 
4 391ms 156ms 47ms
5 344ms 47ms 344ms
6 266ms 62ms 109ms
7 1.93s 31ms 110ms
8 406ms 125ms 46ms
9 438ms 31ms 125ms
10 578ms 109ms 141ms
最大 1.93s 156ms 344ms
最小 266ms 31ms 46ms
平均 593.3ms 74.9ms 123.4ms

从上面的结果可以看出，用一整张图片的网页加载速度明显要比用14张小图片的网页快。从结果图片可以看到：用14张小图片的网页有15个http请求，而用一整张图片的网页只有2个http请求。除去共同要加载的HTML文档，用14张小图片网页的http请求与用一整张图片网页的http请求比是14：1。并且14张小图片的总大小是23.7K，一整张图片的大小是8.66K。从这里可以明显看出用一整张图片的优势。

当然，这肯定不适用于所有情况。比如直接用1000*1000的图片那肯定不行了。

测试过程中肯定或多或少受到一些客观因素的影响（如网速/虚拟内存等等），所以结果只供参考。

©2012 一起CSS. All Rights Reserved.

.

随机日志

]]> http://www.17css.com/%e5%9b%be%e7%89%87%e5%af%b9%e7%bd%91%e7%ab%99%e9%80%9f%e5%ba%a6%e7%9a%84%e6%b5%8b%e8%af%95/feed/ 4 符合web标准的flash调用方法 http://www.17css.com/%e7%ac%a6%e5%90%88web%e6%a0%87%e5%87%86%e7%9a%84flash%e8%b0%83%e7%94%a8%e6%96%b9%e6%b3%95/ http://www.17css.com/%e7%ac%a6%e5%90%88web%e6%a0%87%e5%87%86%e7%9a%84flash%e8%b0%83%e7%94%a8%e6%96%b9%e6%b3%95/#comments Sun, 20 Jul 2008 14:18:53 +0000 青色 http://17css.com/?p=13 在网页中插入flash，往往不能通过验证，即使进行修改，也很难通过验证。而且flash在IE下被认为是控件，需要点击激活，给用户一个很不好体验。下面的flash调用方法，既能通过验证，又解决了在IE下需要点击激活的问题。

1、首先建立一个js文件flash.js：

function i(ur,w,h){ document.write('<object codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,29,0" height="'+h+'" width="'+w+'" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param value="' + ur + '" name="movie" />
<param value="high" name="quality" />
<param value="transparent" name="wmode" />
<param value="false" name="menu" />
</object>'); }
ur是文件路径，w，h为flash文件尺寸，wmode为设置flash背景为透明，menu为控制flash右键菜单，js里面这些参数不需要修改。

2、在网页里调用js的文件：

<script type="text/javascript" language="javascript" src="flash.js"></script>

3、在放flash的位置写的代码如下：

<script language="JavaScript" type="text/javascript">i('flash.swf','615','310');</script>

注意把代码里面的flash.swf换成你自己文件的路径，615，310是宽和高，自己按照需要修改。

这样就可以通过w3c的验证了，同时也解决了现在浏览器中需要点击激活flash的尴尬。

©2012 一起CSS. All Rights Reserved.

.

相关日志

]]> http://www.17css.com/%e7%ac%a6%e5%90%88web%e6%a0%87%e5%87%86%e7%9a%84flash%e8%b0%83%e7%94%a8%e6%96%b9%e6%b3%95/feed/ 0 符合W3C标准网站 所具有一些优点的浅析 http://www.17css.com/%e7%ac%a6%e5%90%88w3c%e6%a0%87%e5%87%86%e7%bd%91%e7%ab%99-%e6%89%80%e5%85%b7%e6%9c%89%e4%b8%80%e4%ba%9b%e4%bc%98%e7%82%b9%e7%9a%84%e6%b5%85%e6%9e%90/ http://www.17css.com/%e7%ac%a6%e5%90%88w3c%e6%a0%87%e5%87%86%e7%bd%91%e7%ab%99-%e6%89%80%e5%85%b7%e6%9c%89%e4%b8%80%e4%ba%9b%e4%bc%98%e7%82%b9%e7%9a%84%e6%b5%85%e6%9e%90/#comments Sat, 19 Jul 2008 12:23:39 +0000 青色 http://17css.com/?p=12 业界越来越关注W3C标准设计，大到各大门户网站，小到不计其数的个人网站，在W3C标准化的影响下，网页设计人员已经把这一要求作为行业标准。那么什么是W3C标准？W3C标准化设计到底有什么好处？

Div 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。
<DIV>Very excellent webmaster club www.52css.com</DIV>
如果单独使用 DIV 而不加任何 CSS, 那么它在网页中的效果和使用 <P></P> 是一样的。
DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码。

CSS是Cascading style Sheets的简称，中文译作“层叠样式表单”，在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。网上冲浪无论你用Internet Explorer还是 Netscape Navigator，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。不管你用什么工具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB。

Div+CSS标准的优点：

1、大大缩减页面代码，提高页面浏览速度,缩减带宽成本;

2、结构清晰，容易被搜索引擎搜索到，天生优化了seo

3、缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。

4、强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了，有了CSS，我们不再需要用 FONT标签或者透明的1 px GIF图片来控制标题，改变字体颜色，字体样式等等。

5、CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。

6、提高易用性。使用CSS可以结构化HTML，例如：<p>标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本。

7、可以一次设计，随处发布。你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。

8、更好的控制页面布局。不用多说。

9、表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。

10、更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。

11、Table 布局灵活性不大，你只能遵循 table tr   td 的格式。而div 你可以 div h1-h6 p span   ul li等标签 组合来写……但要符合标准语法的来写。

12、另外如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。

13、Table 中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div 更能体现样式和结构相分离，结构的重构性强。

14、在几乎所有的浏览器上都可以使用。

15、以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。

16、使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。

17、你可以轻松地控制页面的布局 。

18、你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个 CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。 

补充A：

1、搜索引擎亲和力：搜索引擎不会在意一个页面的设计或者构成。搜索引擎不可能“欣赏”设计漂亮新颖的页面；也不会去“排斥”颜色搭配丑陋的页面。它们只是默默地拿到它们需要的内容就离开。如果一个页面中涵盖了大量的table来描述构架，试想搜索引擎要花多大的代价才可以拿到真正有用的信息呢？凭我自己的经验，一般来说，table构架描述的页面，样式结构和内容信息大小比可能达到1：1甚至更高。而CSS+DIV构架的页面，虽然在客户端看来下载一个复杂的CSS也要占用差不多的带宽，然而搜索引擎可以很方便的绕过这个css，而直接抓去div中的内容。这便是div的优势所在。带宽的稍多占用，完全显得微不足道，更何况一个冗余的table设计架构如果代码写的不好会占用更多的带宽。

2、页面重构：这个应用最经典的例子就是各大blog程序了。就如现在我用的LBS系统，以及流行的PJBLOG、php下面的WP、MT，都是采用div+css构架。内容和样式的分离导致我们在重构页面布局（更换皮肤）的时候，只用针对每一个div元素重新定义其具体位置、样式就行了。而在原来的table基础上进行改版,几乎必须改变所有的内容注入渠道,实在是太过于麻烦。

补充B： （从程序方面说）

1、使用div的方式进行程序的嵌套，特别是使用php这样的代码嵌套，可以减少出现像table中那样繁重的代码，对于页面嵌套可以减少因table代码而带来的问题。

2、使用div对于设计使用AJAX等的时候，可以减少Javascript代码对于页面控制时候的复杂度，因为使用table的时候，层次关系最起码有三层，table-tr-td以上，而使用div则基本上只有两层（div-div）的概念。

3、用div对于页面的定位更准确，因为使用div的代码的宽度高度等都使用css或者页面的style方式控制，即在需要修改一个框（box）的大小、位置时候，可以直接修改css的代码或者该标签的style代码即可实现。而几乎不用修改其他代码，但是使用table的情况下，则可能会因为table的位置出现变动，而影响到对整片代码的修改。

4、在页面效果来说，由于Firefox等浏览器再对table方面进行了很多的优化，才使得目前firefox在处理页面的输出时候可以这么接近IE的效果，但是在对于一些table的排版，用firefox 会存在一下莫名起码的以为等问题。这些问题在IE中可能不存在，但是在使用Firefox等其他引擎的浏览器就可能会出现了。

5、就是输出的代码将更小。由于使用div进行页面代码的组织，而布局由CSS等文件进行控制，因此从输出的html中产生输出的代码要一般比使用table的页面少70%。从系统的负载上考虑，将会更好解决因为代码上面的损耗，对维护系统的稳定起到一定的帮助。

6、更方便搜索引擎的搜索，目前的搜索引擎只是对页面的代码进行分析，因此页面代码更小而且有语意页面，搜索引擎的效能会更高，用户的文字信息会更容易被搜索引擎进行收集，对于web网站来说被将会更容易被搜索引擎所引用。

7、无可避免，在页面的一些位置，我们还是依旧使用table方式表现，比如说一些商品列表，订单列表,提交表单等，我们依旧使用table的方式来实现，因为对于这样的表格表现形式，使用div实现时候还不太成熟。

8、最后W3C标准是目前网站开发的主流，作为专业的web开发团队，哪有理由不使用这种技术呢！

转载自：52css http://www.52css.com/

©2012 一起CSS. All Rights Reserved.

.

相关日志

]]> http://www.17css.com/%e7%ac%a6%e5%90%88w3c%e6%a0%87%e5%87%86%e7%bd%91%e7%ab%99-%e6%89%80%e5%85%b7%e6%9c%89%e4%b8%80%e4%ba%9b%e4%bc%98%e7%82%b9%e7%9a%84%e6%b5%85%e6%9e%90/feed/ 0 解决下拉菜单被flash遮住问题 http://www.17css.com/%e8%a7%a3%e5%86%b3%e4%b8%8b%e6%8b%89%e8%8f%9c%e5%8d%95%e8%a2%abflash%e9%81%ae%e4%bd%8f%e9%97%ae%e9%a2%98/ http://www.17css.com/%e8%a7%a3%e5%86%b3%e4%b8%8b%e6%8b%89%e8%8f%9c%e5%8d%95%e8%a2%abflash%e9%81%ae%e4%bd%8f%e9%97%ae%e9%a2%98/#comments Wed, 16 Jul 2008 16:45:48 +0000 青色 http://17css.com/?p=8 下拉菜单被flash或其他层遮住始终是个问题，相信很多人都遇到过这个问题。但这个问题其实可以说是我们自己造成的，因为我们总是不明不白的就把那写属性写或粘贴上去。

下面我们来分析一下原因：

wmode 属性/参数值 Window | Opaque | Transparent

模板变量：$WM

"Window"在 Web 页上用影片自己的矩形窗口来播放应用程序。"Window"表明此 Flash 应用程序与 HTML 层没有任何交互，并且始终位于最顶层。

"Opaque" 使应用程序隐藏页面上位于它后面的所有内容。

"Transparent"使HTML 页的背景可以透过应用程序的所有透明部分显示出来，并且可能会降低动画性能。

"Opaque windowless"和"Transparent windowless"都可与 HTML 层交互，从而允许 SWF 文件上方的层遮蔽应用程序。这两种选项之间的差异在于"Transparent"允许透明，因此，如果 SWF 文件的某一部分是透明的，则 SWF 文件下方的HTML 层可以透过该部分显示出来，而"opaque"则不会显示。

如果忽略此属性，默认值为 Window。仅适用于object。

Window速度快、有效率，但无法使用z-index，也没有办法混用于DHTML图层当中，这就是为什么常有人在抱怨自己的下拉菜单跑到Flash后面。

Opaque除了可以让你正确控制z-index的样式，也可以透过Javascript來控制它的大小或是移动swf的位置！不过要注意，Opaque的背景可是没有办法透明的，也就是说，任何內容都会被放在swf下面。

至于Transparent，想当然，就是把flash的背景变成透明。让swf档案可以融入网页当中而不会出现讨厌的白底，不过，transparent在IE里面是真的透明，也就是说，下面的网页內容是可以被选取起來的，但是在FF里面，就很讨厌了，因为虽然看起來透明，但是滑鼠卻无法点选。另外，要稍微注意的是，使用这个值，会让你的flash影片变得比较慢！

找到原因了我们就来解决问题：

一、设置flash为透明：但是如果你在DW中插入动画，再加<param name="wmode" value="transparent">是不生效的。要把整个的flash插件代码换成如下：

<object type="application/x-shockwave-flash" data="http://www.konnech.cn/2/images/banner.swf" width="560" height="210">
<param name="movie" value="http://www.konnech.cn/2/images/banner.swf" />
<param name="wmode" value="transparent" />
</object>

对比一下，和DW自动生成的代码是有区别的，测试过，IE　FF　均可以。

二、设置flash置底，加个代码：<param name="wmode" value="opaque" />但是只加这个代码，IE可行，在FF下，失效。要想在FF下起作用，还要用在object　里加个　wmode="opaque" ，实例代码如下：

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="560" height="210">
<param name="movie" value="http://www.konnech.cn/2/images/banner.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque">
<embed src="http://www.konnech.cn/2/images/banner.swf" wmode="opaque" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="560" height="210"></embed>
</object>

©2012 一起CSS. All Rights Reserved.

.

相关日志

]]> http://www.17css.com/%e8%a7%a3%e5%86%b3%e4%b8%8b%e6%8b%89%e8%8f%9c%e5%8d%95%e8%a2%abflash%e9%81%ae%e4%bd%8f%e9%97%ae%e9%a2%98/feed/ 0 h1,h2,h3和strong标签的seo解说 http://www.17css.com/h1h2h3%e5%92%8cstrong%e6%a0%87%e7%ad%be%e7%9a%84seo%e8%a7%a3%e8%af%b4/ http://www.17css.com/h1h2h3%e5%92%8cstrong%e6%a0%87%e7%ad%be%e7%9a%84seo%e8%a7%a3%e8%af%b4/#comments Fri, 11 Jul 2008 14:34:17 +0000 青色 http://17css.com/?p=7 有很多同行交流的seo的时候非常频繁的提到一个方法，那就是文章题目一定要用h1标签。为什么h1标签如此重要呢？今天我们就从全局的角度来审视一下。 h1、h2、h3 和 strong 对当前网页的内容起强调作用，作用由高到低：h1 > h2 > h3 > strong 1、强调标签的使用误区 h1切勿使用过度-虽然这些标签对内容都是起强调作用，但是只要出现关键词的地方就用h1的做法是非常片面的。一个页面所承载的主题对于用户来说是越单一越好的，那就用h1来强调这个单一的主题就好了，如果标h1太多一来会冲淡主题，二来还容易惹上针对引擎作弊的小红帽。

2、一直以来大家最传统的理解 使用 h1 定义网站标题，h2 来定义文章标题，h3 来定义侧边栏目标题，strong来定义本页面关键词。但是很多情况是不能生搬硬套的，因为网站类型不同，具体页面功能不同，网站整体优化的策略不同，要灵活运用。 3、seo实例分析 首页：        用 h1 标注了seo 突出网站最核心的主题是seo        用 strong 标注了他所有的栏目，强调网站的结构和层次 列表页：        用 h1 标注了栏目名称，突出栏目的核心主题        用 h2 标注了文章题目，强调这部门文章正是这个栏目主要的内容        用 strong 标注了他所有的栏目，强调网站的结构和层次 内页：        用 h1 标注了网站核心主题：seo        用 h3 标注了文章标题 没有用strong 标注他所有的栏目 内页的强调标签用的耐人寻味，从这个布局来理解，站长还是把一些本来应该集中在文章标题的权重更多的分给了网站核心主题，可见站长对 “seo”一词的偏爱了。 就有点儿S给个内容页比较常规的布局吧： 用 h1 标注文章标题，突出每个页面的个性主题。 用strong 标注所有的栏目，继续前面的作风，强调网站的结构和层次（seo站长估计是感觉通过前面两个关节，网站结构已经很有层次了，于是没有在继续这样做）。 4。强调标签的使用原则 一是要突出当前页面最核心的主题。 一是要突出整个站点的层次结果。 只要很好的做到了这两个方面，而且没有使用过度，那么你的强调标签布局就是合理的、成功的！

©2012 一起CSS. All Rights Reserved.

.

相关日志

]]> http://www.17css.com/h1h2h3%e5%92%8cstrong%e6%a0%87%e7%ad%be%e7%9a%84seo%e8%a7%a3%e8%af%b4/feed/ 0