Group items tagged

1. CSS Based Navigation //基于CSS的导航 2. Navigation Matrix Reloaded //导航矩块翻转3. CSS Tabs //CSS标签4. CSS Bar Graphs //CSS条状图表5. Collapsing Tables: An Example //压缩表格：一个实例       6. Adam’s Radio & Checkbox Customisation Method //亚当的单选框和复选框的用户化方法7. CSS Image Replacement //CSS图像替代8. CSS Shadows(CSS Shadows Roundup) //CSS阴影（CSS阴影综述）9. CSS Rounded Corners Roundup (Nifty Corners) //CSS圆角综述（漂亮的拐角）10. Drop Cap-Capital Letters with CSS //用CSS实现首字母下沉

11. Define Image Opacity with CSS //用CSS定义图像半透明12. How to Create a Block Hover Effect for a List of Links //如何给链接列表创建鼠标悬停的区块效果13. Pullquotes with CSS (Automatic Pullquotes with JavaScript and CSS) //用CSS实现引用（用JavaScript和CSS实现自动引用）14. CSS Diagrams //CSS图表15.CSS Curves //CSS曲线 16. Footer Stickallows for the footer of a Web page to appear either at the bottom of the browser window or the bottom of the Web page content – whichever is visually lowest.页脚帖允许一个网站页面的页脚显示在在浏览器窗口的底部或者网站页面内容的底部中实际最底的一个。17. CSS Image Map //CSS图像地图18. CSS Image Pop-Up //CSS图像弹出19.CSS Image Preloader //CSS图像预载20. CSS Image Replacement for Buttons //CSS按钮的图片替换

21.Link Thumbnail //链接缩略图22. CSS Map Pop //CSS地图提示23. PHP-based CSS Style Switcher //基于PHP的CSS样式改变24. CSS Unordered List Calender (CSS Styled Calender) //CSS无序列表日历（CSS设计的日历）25. CSS-Based Forms: Techniques //基于CSS的表单：技巧 26. CSS-Based Tables: Techniques //基于CSS的表格：技巧27. Printing Web-Documents and CSS //打印网站文档和CSS28. Improved Links-Display for Print-Layouts with CSS //用CSS改良打印布局的链接显示29. CSS-Submit Buttons //CSS提交按钮30. CSS Teaser Box //CSS内容摘要盒子

用户界面 I Like Your Color 输入URL然后它会抓出其中的颜色并用16进制表示。 CSS Multi-element Rollover Generator 使用CSS和一个图片创建出一个翻转按钮的样式。 CSS Rounded Box Generator Ruthsarian Layouts 6个CSS页面布局模板，包括颜色、标题等。 Bluerobot Layout Reservoir 2栏和3栏的CSS布局框架 Glish CSS Layout techniques 2、3、 4栏的CSS布局框架 The Layout-o-matic 输入页宽、栏数和padding，它会自动生成CSS和HTML的布局框架。 Little Boxes w3cn.org上提供的那些布局模板 Open Source Web Design 各种免费的完整页面模板 Web Builders’ Toolkit 更多的模版资源 Iconico Online CSS Scrollbar Color Changer List-u-Like 一个CSS菜单生成器：轻松创建采用li并兼容各种浏览器的导航菜单。 Nifty Corners: 无需图片的圆角矩形 Round Corner Stone/Icon (rcsi) V1.0 增强的圆角矩形 Xylescope 无需下载其他站点就能轻松分析其CSS代码。 W3C Core Styles Checkliste zur Webseitengestaltung Testseite zur Zeilenbreite

易用性检查 Accessibility Valet Demonstrator Bobby Online Service Cynthia Says OCAWA Web Accessibility Expert Torquemada 使用工具对页面进行一个完整的易用性分析方法测试，以快速辨别页面中哪些部分存在错误。 UI Site check 一个站点检查工具，只需要输入你的网址，便可以列出几十个验证器和易用性工具。 WAVE 3.5 Accessibility Tool 可以提供你页面上的易用性细节和错误方面的有用信息。他会用红黄绿蓝等几种图标来表示需要改进的页面部分。这些图标代表了你页面上有关结构、内容、可用性和易用性方面的问题细节。你可以清楚地看到当前页面上哪些位置存在问题。 Web-based Site Usability Checker WebXACT Quality & Accessibility Check 一个免费的在线服务，让你对单个页面进行质量、易用性和保密性问题的测试。 Will the browser apply the rule(s)? TAW - Test accessibilidad web

整理和优化 CSS Formatter and Optimiser 能让你选择你的CSS更易读还是更小。 CSS Compressor 使用这个工具可以压缩你的CSS使之提高载入速度和节约带宽。 Online CSS Compressor 多种途径来清理并压缩你的CSS，牺牲了可读性来获得相当程度的优化和尺寸的减少。 CSS Compressor CSS Syntax Checker for BBEdit and TextWrangler CSSTidy CSSTidy 是一个开源的CSS解释器和优化工具 CSS Tweak ~ Web Based CSS Tweaker! CSS Tweak 会优化你的CSS以减少文件大小和下载时间。 Clean CSS - Optmize and Format your CSS Format CSS Online 自动格式化你的CSS使之便于阅读和编辑 Online CSS Optimizer CSS Optimizer 优化并减少CSS的文件尺寸 Online CSS Optimiser/Optimizer 这个工具用于优化CSS代码。 Tabifier 使HTML和CSS代码变漂亮。 Webucator 有一个CSS参考手册，你还可以在上面测试你的CSS代码 CSS Centricle CSS hack浏览器兼容一览表 （就是w3cn.org 上的那个）

团队创建的框架包含5个样式文件： reset.css —处理重置 type.css —处理排版 grid.css —处理布局 widgets.css —处理小零件（widgets），如tab菜单、下拉菜单、以及“更多”按钮 base.css —包含所有的其他样式表文件，以便我们只需要在(X)HTML引用base.css即可使用整个CSS框架 然后，我们把框架存放在一个单独的地方，使每一个站点都引入这个框架。当然，每一个网站也需要有特有样式表，特有样式对框架进行了必要的补充

一套包含工具、函数库、约定，以及尝试从常用任务中抽象出可以复用的通用模块，目标是使设计师和开发人员把重点放在任务项目所特有的方面，避免重复开发。通常的讲，框架就是上面提到的JavaScript框架和Web应用框架。

几乎每个我参与的项目中，我必须声明的几个CSS问题： “大量重置”浏览器默认风格，比如，设置所有元素的margin和padding为0，去掉框架（framesets）和图片（images）的border，等等。 以基线对齐。这包括诸如设定块级元素的margins相同的(或多个)基准行高，如段落（paragraph）、头（header）、以及列表（list）。 创建表单（Form）的基本样式。 创建几个常用的CSS 类，例如，.hide(把display置为none，即隐藏元素)、.mute(设定为一个较小的字体和较亮的颜色)。 还有更有趣的事情，许多网站设计师发现自己不断重复使用着相同的基本结构，为什么不动它整理成自己的，在某种程度上可以非常灵活的用于多个网站? Yahoo这样做了，这就是YUI。当我们为的劳伦斯日报网站（the Journal-World）建立CSS框架的时候，我先看看Yahoo是怎么做的。我们很肯定那不是我们想要的，但作为一个很好的例子，给我们提供了很多思考和如何建构自己框架的想法。我们解决了16个单元格的问题，它具有足够的灵活性使我们的每一个网站都可以应用，即使每个网站看上去与下一个版本有些差异。另外大多数网站共用widgets ，象下拉菜单、导航菜单、按钮等，这些也是主要的需要抽象提取的对象。除此之外,你可能有共同的内容名称，如图片列表的缩略图，你可以规范对CSS命名，如“thumbnail-list”，让所有显示缩略图的都使用这个CSS类。 另外要做的可能是抽取hack（如兼容那些旧浏览器)加入自己的扩展的样式模块。我自己尝试过，但发现hack过于专有而不能抽取到通用框架里。

Make Fewer HTTP RequestsUse a Content Delivery NetworkAdd an Expires or a Cache-Control HeaderGzip ComponentsPut Stylesheets at the TopPut Scripts at the BottomAvoid CSS ExpressionsMake JavaScript and CSS ExternalReduce DNS LookupsMinify JavaScript and CSSAvoid RedirectsRemove Duplicate ScriptsConfigure ETagsMake Ajax CacheableFlush the Buffer EarlyUse GET for AJAX RequestsPost-load ComponentsPreload ComponentsReduce the Number of DOM ElementsSplit Components Across DomainsMinimize the Number of iframesNo 404sReduce Cookie SizeUse Cookie-free Domains for ComponentsMinimize DOM AccessDevelop Smart Event HandlersChoose <link> over @importAvoid FiltersOptimize ImagesOptimize CSS SpritesDon't Scale Images in HTMLMake favicon.ico Small and CacheableKeep Components under 25KPack Components into a Multipart Document

1） 性感滑动菜单（Sexy Sliding Menu） － 一种由 Mootools 制作，另外一种使用 scrip.aculo.us 制作的。演示：Mootols 版本演示：Script.aculo.us 版本

3） Webber 2.0 Dock Menu － 类似 Apple Mac 系统中船坞类型的导航菜单。演示： Webber 2.0 Dock Menu

5）可拖拽排序的树状菜单 演示：http://extjs.com/deploy/dev/examples/tree/reorder.html

IE Tab浏览器兼容是所有Web开发者都要考虑的问题,IE Tab能够让您再Firefox中以IE的渲染方式来呈现页面,并且可以方便的在两者之间切换。

Style Sheet Chooser IIStyle Sheet Chooser II 允许浏览者或开发者迅速的在为同一页面编写的不同样式之间来回的切换,甚至能够保证被选择样式应用到该站点的全部页面上. Style Sheet Chooser II 会覆盖Firefox内置的样式表切换器[style-sheet-switcher].你可以用多种方式来调用它:a. 通过"查看"[View]->"页面样式"[Page Style]下面的选项;b. 通过工具栏[Toolbar]的一键切换;c. 通过状态栏[Status Bar]的图标按钮;小提示: 是否在状态栏和工具栏中显示图标,可以在扩展偏好[Extension Preference]中设置

CSSViewer一款小巧的CSS属性查看器,随着鼠标的移动显示当前所指示元素的CSS样式信息,其中包括了所有从父级元素继承而来,用户自定义以及浏览器自定义的样式信息. 同Style Sheet Chooser II 一样,你也可以通过在工具栏添加该扩展的图标按钮来激活/禁用该扩展。

希腊Web 设计师Christos Chiotis 发表在 CssGlobe 的一篇文章，讲述了黄金分割率在 CSS 中的应用。黄金分割率是一个应用广泛的数学常数，大约为 1.6180339887。黄金分割率用在 Web 设计中，可以为设计带来更多视觉上的和谐。在一个简单的两栏式页面布局中，使用两个容器，第一个容器用来显示主要内容，第二个容器显示侧条。比如，页面宽度为 960 px，使用黄金分割率，主内容容器的宽度应该为 960 / 1.62 = 593 px，而侧条的宽度为 960-593=367 px。

在 Web 排版与布局中可以使用以下基本 CSS 设置line-height = font-size * 1.62paragraph margin = paragraph line-height * 1.62 / 2header’s margin-top = headers line-height * 1.62

错误的设置 数据库服务器的参数配置问题：导致 MySQL 消耗了大量资源。Apache Keepalive 的设置为不合理，修改为 off。我想这个前提应该还是要选择自己最擅长的技术路线。如果错误的选择另一条不熟悉的技术路线，那么遇到技术时解决问题的速度怕是更让用户恼火。对于 Apache 还应该知道 Httpd.Worker 比 Prefork 消耗更多内存 (httperf 来进行 Benchmark) ，内存也是蛮贵的。

尽可能的缓存动态内容 尽可能的利用数据库的 Cache，利用其他 Cache 工具，如 MemCacheD，来减轻对磁盘的 IO 压力。为了节省成本，很多站点都是用的低速大容量的磁盘，所以，充分利用 Cache 是一个网站成功的必然条件。这样的软件BerkeleyDB 的最高事务处理记录是 90000 事务/秒。

剥离图片与CSS 到单独的服务器 说白了，也是为了减轻磁盘的压力。现在很多 Web 2.0 站点都把图片放到 Amazon S3 上，省心了不少。当然，国内还没这样的服务。

一、本地化译文的基本准则凝练平实，言简意赅；信息全面，含义准确；语气流畅，逻辑通顺；使用书面用语，符合汉语语法习惯；杜绝错字、别字、多字、少字、标点符号误用和英文拼写错误；译文的用词及语气须避免有对性别、年龄、种族、职业、宗教信仰、政治信仰、政党、国籍、地域、贫富以及身体机能障碍者的歧视。

本地化翻译的一般规则译、校要求翻译或校对时，要在正确理解原文的基础上，结合软件功能和操作的实际情况进行。对于原文中的技术或语言错误，在译文中要更正过来；对于原文中叙述不清的地方，如果不是很复杂，应在译文中加入进一步的解释，以利于用户理解。精确避免含意模棱两可。例如：“一次发送文件给一个人”这句话就可以有“一次只给一个人发送文件”和“将所有文件一次发给某人”两种不同的理解。符合中国人的习惯有时，英文作者为了使内容变得生动活泼，往往会加入一些比较“花梢”的比喻，有些内容，并不符合我们的习惯，对这些语句，在不影响其他内容的情况下，可改变其中的说法，使之符合中国人的习惯。有时，把英文的示例、文字、地名、人名改成中国的地名、人名，会使用户感到亲切自然。简洁用“可”则尽量不用“可以”。能用“用”则尽量不用“使用”。能用“将”则尽量不用“把”。这一点并不绝对，取舍标准是语句读起来既要通顺，又要凝练。使用书面语避免口语化，以及多余的词（罗嗦）。对应与一致与本产品早期版本、同类产品尽量保持一致。本产品内类似的短语保持一致。灵活用词，避免单调重复段落中的多个句子中，要灵活使用词汇，避免单调重复。语言风格注意语言环境，不同的文章需要不同风格，且不能前后不一致。规范用词规范用词（即使在与界面无关的叙述中，也不要无故自造词汇）。对词意的使用要精确，如果有特指，需要加引号。章、节、项的翻译章、节、项等文档的标题应尽量简洁，少用句子。并且能以标题推测内容。同一级的标题应尽量保持风格一致（比如统一用主谓结构或动宾结构等）。但如果难于统一或易于引起意义混淆时，不必强求统一。要求用户进行操作的短句联机帮助（尤其是Quick Help）中，有许多要求用户进行操作的短句，翻译这些句子时，句首要加“请”。

本地化翻译的字间距规则在用户界面（UI）的翻译或联机帮助（rtf格式和html格式）的翻译过程中，应按以下规则，手动加入/不加入半角空格：全角符号（中文文字、中文标点）之间不能加空格。中文标点与前后字符（包括全角和半角）之间不能加空格。中文文字与英文、阿拉伯数字及 @ # $ % ^ & *. 等符号之间必须加空格。 半角英文括号与括号外的中文之间应加空格，如：“级联样式表 (css)”。注意：如果括号内有中文，则使用中文括号，如果括号中的内容全部都是英文，则使用半角英文括号。/为半角符号，与前后的中文之间不加空格。图片与前后的文字之间的空格： 如果一行中只有图片和超链接（Icon+Hyperlink），则图片与超链接之间没有空格，且超链接文本的尾端也不应该有空格。其他情况下，图片前后应有空格。手册的本地化翻译字间距规则：文字间的空格不需人工按空格键加入，可留待排版时通过设置样式自动加入；文字或标点符号与图片间的空格需要人工加入；中文文字与半角符号（@ # $ % ^ & *. 等）间的空格也需人工加入。原则是如果Word已经在全、半角字符之间自动留出空间，则不必加空格，反之则要加。

这里有家庭、客厅、酒吧... 能交友、逛街、购物...... 现实生活的每一步都能在这里自如开展。 它善解人意，你将不再面对茫茫人海却知音难觅； 它诚恳真实，这里全部实名交流，有高手现身马上过招； 它开放包容，不必奔走，就能与第三方网站提供的服务时刻连通！ 让你在互联网上第一次有了如鱼得水的感觉。

总结一下： 1、中文的行间距太小； 2、中文缺乏一种起伏的节奏； 3、中文的自动回行有重大缺陷。 结论：中文一不小心就变成铁板一块。 如何解决这个问题，设计师有的是办法，我就不一一赘述了，我这里想说的是：中文和英文由于语言属性根本上的差异，因此完全照搬英文站的设计是一种愚蠢的、教条的思路，尤其当这种设计方案需要用同一种计算机语言（XHTML＋CSS）来实现的时候，细节的修改就显得更加重要。建议还是多参考亚洲同行的作品，前两年韩国和日本网站模板盛行，有它的道理，至少我很少看到他们用纯黑色——嗯，就说到这儿，不多不少刚刚好，完美！

twitter看上去简单到只分享文字信息，但不简单的是，它把微网志、即时消息/回复（@id前缀）、定向消息（d指令）混合在一起。 当然链接也可以，twitter会自动将文字里的网址转换为可点击的链接。p.s.tinyurl类的短Url应用也在twitter的激发下被广泛使用。 以”What are you doing?”（你在干嘛？）为题，不停的答复着，自说自话着。 但，有多少人真正是在回答这个问题呢（我的好友就很少照做），尤其是gtalk、twitterfox、twhirl等tw应用的流行，现在的twitter已经变成了带群聊功能的IM。 twitter将好友的概念实质化，加好友变成跟随（follow），单方面的相当于订阅，双方面确认的是好友关系。 twitter的分享有一定权限划分，分几个层次： 跟随用户和收藏内容为任何人可见 更新内容可以限制只有好友可见 @id前缀的回复内容被同样跟随该id的用户可见 d指令定向消息只有对应用户可以看到 被跟踪数量和资料只用户自己可见 twitter的网站我很少去，除了为加好友等特定功能外，能不用就不用，因为我觉得twitter网站交互性不够好，不能总是没完没了地刷新页面。 好在twitter提供imbot，用gtalk就很方便的互动起来，而且它提供丰富的API，除了twhirl等纯客户端外，还有twitterfox、twiiterbar等firefox插件，另外还有一批特殊应用将twitter可以共享的内容无限扩大，比如twitterfeed可以把feed按自定规则发布到twitter，其中长地址还自动转换为tinyurl。 twitter可以自定义部分页面CSS。 可以通过手机短信、wap移动更新、分享。 使用Amazon S3服务存储用户的头像文件。 页面用户信息使用vcard。

　　步骤一：数据调查          数据可以带来什么？对于各页面及路径的pv(产品),uv(用户)的总结，可以得到产品使用情况的一个大致概貌。　 　　 缺乏什么？不了解用户，不了解过程。 　　步骤二：用户访谈 　　有什么好处？产品和用户之间的联系，就像一个黑匣子。对用户的访谈，就是一个试图打开黑匣子的过程。 　　打开了黑匣子，我们就可以改造他们之间的路径。从而使两者无缝融合。就像是研究dna，对结构的研究可以重塑基因。反映到产品上，就是我们可以以用户的心理模型去创造产品，或者是用富于创造的产品去影响用户。 　　步骤三：产品分析 　　即使了解用户，是否能提出有效的解决方案呢？此时，对于相关产品的研究就会作出帮助。如果说对用户的需求，可以对产品有纵深的认识。那么对产品的分析，有利于横向去加深去产品的理解。为什么做同一个功能，会产生出两种不同的产品？差异表现在大体，也体现在细节，通过不断的比较，会发现产品各功能间，产品和用户间千丝万缕的联系。 　　步骤四：产品定位 　　定位本应在一个产品做出之前决定，可为什么我会在此阶段提出这个步骤呢？事实上，因前面工作的铺垫。只有了解了用户，了解了相关产品后，定位才会更加明确。最初时，时时需要一个定位，却感觉模糊，在此刻，就清楚许多。能否改变，看造化了~~ 　　步骤五：功能确认 　　基于对用户和产品的分析，此时会提出一些新的功能。从产品长远的发展，对用户使用的引导，以及易用性综合考虑，慎审地推出每一项功能。 　　步骤六：信息架构 　　产品的印象开始在脑海里浮现。此时，将信息注入到产品结构中去。导航，管理等是很重要的几项，需要格外小心。另外，不同的页面有不同的信息，以及页面与页面间的信息跳转，甚至是产品间的跳转，每条信息都需要经过审核。如果对产品没有帮助，或者对用户是负担，都不要向里加。 　　步骤七：页面原型 　　就个人而言，在页面原型阶段，除了用visio来画结构图，还是不自觉得要用ps去协助找感觉，这个过程，对自己而言也是一个迭代的过程。当然，之前那些阶段，使整个产品的结构都在脑海里快成型了，这个只需要把它落实到纸上。 　　原型的确认，需要坚持。如果是你自己做了这个过程，而且每一点都是经过思考的。那么就去说服来自各方的反对。事实上，你要相信，人们相信思考的价值，只要你付出了，就有回报，最怕没有付出天天在那里抱怨。 　　步骤八：视觉设计 　　不必多说了。可能会比较多，icon，字体，区域的划分，模块的统一，css的定义，风格的设定~~~所有的一切，都要体现前面工作所得到的东西。 　　步骤清晰，但其实中间的过程可能更有意思。

老域名的价值，如果有个老域名没有被搜索引擎惩罚过，并且建立了大量的高质量反向链接，PR值较高，你能拿来建站的话，那么，你的网站会具有非常大的SEO优势。

Dmoz(The Open Directory Project/ODP)是一个人工编辑管理的网址分类目录网站，为全球上百家的分类目录和很多搜索引擎提供数据。如果你的网站能够登录到DMOZ..org的话，意味着你会获得上百个分类目录的链接。同时，在其它条件相同的情况下，Google的第一页更倾向于留给已经加入Dmoz的网站。

持续不断原创内容，为用户提供独特的、优质的、有价值的内容。这是它排名靠前的根本所在

（1）网站栏目结构合理，栏目设置不要过于复杂；（2）网站导航清晰且全站统一，通过任何一个网页可以逐级返回上一级栏目直到首页；（3）网页布局设计合理，网站设计符合用户浏览习惯；（4）重要文字信息尽可能出现在网页靠前位置；（5）字体清晰，CSS风格协调一致；（6）最多3次点击可到达产品详细内容页面；（7）通过网站任何一个网页不超过3次点击可达到站内其他任何一个网页；（8）遵照搜索引擎为管理员提供的网站优化指南，通过网站结构和内容等基本要素的优化为搜索引擎检索信息提供方便，不采用任何被搜索引擎视为垃圾信息的方法和欺骗搜索引擎的方式；（9）网站首页、栏目首页及产品内容页面均有一定的文字信息量；（10）每个网页有独立的、可概括说明该网页核心内容的网页标题；（11）每个网页有独立的、与该网页内容相关的META标签设计；（12）每个网页有独立的URL；（13）产品内容页面URL尽可能简短且体现出产品属性；（14）产品/企业新闻详细内容页面是独立网页不是弹出窗口；（15）对于产品品种多的企业网站，要有合理的产品分页方式；（16）网站内容保持适当的更新周期。

反 Box 式布局 单页布局 多栏布局  巨型插图与多变背景 更多留白 社会网络元素 讲解式导航菜单 Status elements (Flickr, Twitter et al) 动态 Tab  超大搜索框 Category visuals 作者头像图标 （这也算？-译者） 图标和视觉引导 Tag 索引 (取代 Tag 云) 插图风格 水彩风格 手写风格 怀旧风格 有机纹理或照片背景 证章风格 价格标签风格  条带风格