<![CDATA[runoo' blog - 网站重构]]> http://www.runoo.com/blog/ zh-cn PBlog2 v2.4 runoo' blog http://www.runoo.com/blog/images/logos.gif http://www.runoo.com/blog/ runoo' blog http://www.runoo.com/blog/default.asp?id=215 <![CDATA[ 网站策划常识]]> jordanqiu@msn.com(admin) Fri,02 Nov 2007 17:50:43 +0800 http://www.runoo.com/blog/default.asp?id=215
　　首先确定web站点的营销目标:


　　1）、市场调查阶段
　　了解一下目前internet的发展状况以及同类站点的发展、经营状况，吸取他们的长处，找出自己的优势，对市场作个调查，明确自己网站的主题，寻找一个好的出发点。

　　2）、你设想中的网站规模有多大？
　　作网站并不是盲目的想做多大就作多大，而要根据自身的现阶段能力，以及企业的规模大小，确定你的网站是小型、中型、大规模的网站，还是从小规模的开始，然后逐步发展。这主要的是关系到网站的后期维护以及网站的发展方向来考虑的。

　　3）、确定网站的类别，你希望网站有怎样的设计特色
　　根据主题、形式以及本身企业的特点，网站设计也有不同的类别，大概可分为：以内容为主，设计为辅，注重速度这种大型的专业网站，它一般体现在专业的icp，isp供应商制作的网站，在设计这类网站时不要太花哨，应注重信息量；第二种大多数企业为了更好的宣传自己的产品，扩大销路，使自己的产品走向世界，提高自己企业的形象而制作的网站，这种网站制作应结合本身产品特点而制作的特色网站，相对来说比较注重产品的营销；第三种是形象类的网站，一般这种网站相对体现在政府部门，作为对外一个窗口，相对来说这种网站设计比较严肃；第四种是个人主页网站，这种网站相对比较自由，不受什么约束，可以根据每个人自己的特长自由发挥。因此我们在制作主页时先明确自己的定位方向，设计出适合自己的站点。

　　4）、你的主要目标受众是谁？
　　根据网站的类别不同，目标受众也不一样，有工商业者、专业人士、学生；女性，男性；儿童，青少年，中年人，老人；还是所有的人，比如教育类的网站相对来说是目标受众是院校的老师和学生。化装类、护肤产品类的网站相对来说是女性等。

　　5）、确定整个网站的整体风格
　　其实，这个原则和传统的印刷出版物没什么区别。你网页上所有的图像、文字，包括像背景颜色、区分线、字体、标题、注脚什么的，都要统一风格，贯穿全站。这样子读者看起来舒服、顺畅，会对你的网站留下一"很专业"的印象。
　　举个简单例子。如果你在列示一二三四若干条的情况下，在每条前面用黑圆点加强视觉效果，那么其他类似地方，也应该用保持同样的风格。色彩斑斓的站点，尤其要注意风格的统一。颜色可以变，不过字体、主体文本对齐风格、标题、背景效果以及特殊图像效果等等都应保持统一。
很多缺乏编辑、出版背景的网友，很容易忽视这点，特别是网页一多，更容易忘。

　　6）、你准备投入多少资金、如何经营这个网站？
　　对所作的网站大概的作个估价，需要多少资金，你准备投入多少资金来运营这个网站，假设网站制作好以后如何经营这个网站，是全部由自己来做，还是委托专业服务来做，自己定期指导，还是设定要求、目标完全由别人代劳。这是不可忽略的问题，如果一个网站前期作的再好，后期没人维护也是空的，就好比一条刚建好的街道，干干净净的，人们也比较喜欢来这里逛街，日久了，人走的人多了，垃圾多了这时没人来管里，这样垃圾越堆越多，走的人肯定也越来越少了。日久了也逐渐被人遗忘了。域名注册虚拟主机网站经营也是这个原理。

　　7）、根据目标框架整理出站点的内容框架以及逻辑结构图
　　①把目标细化以整理出站点内容框架
　　基本确定的目标，您就应该把目标细化，并初步整理出为达到这些目的，站点所需要包含的所有内容了。例如，站点应该发布什么信息，站点需要提供什么应用程序，等等。然后，你应该把初步定下的内容纲要写下来，交给上级或业务人员审核批准。这实际上就形成了站点设计的需求报告。在你的内容纲要里，还应该注明这些内容的信息来源，哪个部门应该提供哪方面的信息。把这些罗列下来，会使得上级以及各个相关部门清楚"谁应该为这些内容负责"。
　　②进一步整理出站点逻辑结构图
　　定下内容纲要后，你应该能够大致画出站点的结构图了。结构图也有很多种，顺序结构，网状结构，继承结构，WEB结构等，应依据你的内容而定。例如，如果你是在编一个教程，那么可能用表示顺序的流程图就比较合适。多数复杂的网站会综合应用到几种不同的结构图。画出结构图的目的，主要是便于有逻辑地组织站点和链接，同时，将来你会用这个图去分配工作和任务。
　　例如:
　　你可以告诉某个开发人员，让他完成结构图中某个分支的内容；
　　你可以把这个图递交给业务人员，告诉他们哪些页面，需要他们进一步提供内容或资料；
　　你可以把结构图给专业美工看，让美工人员考虑以什么样的形式来表现你要表达的内容等等。
　　简而言之，这个框架图，将为你下一步进行工作分配，人员安排提供依据。


网站制作过程中把握的几点

　　1）、重点信息放在突出醒目的位置，整个网站空间排序适当
　　一个网站很重要的就是标题，标题就像路牌一样，人家在你的网站上逛来逛去，全靠它指路了。给人的第一印象是否能够马上注意到标题，标题要意义清晰、描述性强，把最吸引人的地方放在突出显眼的位置，然后再慢慢展开。或者说，把你的独特内容包裹成一个悬念，吸引人家注意。读者看一篇文章，前三段注意力最集中，如果这"寸土寸金"的前三段用不好，人家就要和你拜拜喽！

　　留出可调整的位置，用于满足临时性或短期营销活动的宣传需要。如，福州电信局12月11日举办的"福建省首届信息网络展示会"展览，需要在网页中放在最突出的位置。这就需要调整原有的结构，既让新的内容有突出的体现，还要不至于淹没其他重点。
　　在每屏中的文字与图形的布局既要考虑到重点的突出，还要给人以和谐的感觉。不能让图形淹没文字，也不能图形太少而让人觉得单调。视觉的吸引和诱惑力是不能低估的。

　　2）、网页应该易懂，控制没个模块的信息量。
　　网站设计最重要的诀窍，恐怕就是你的网页要易读。
　　这就意味着，你必须花点心思来规划文字与背景颜色的搭配方案。注意不要使背景的颜色冲淡了文字的视觉效果，别用花里胡哨的色彩组合，让人看起你的网页来很费劲。一般来说，浅色背景下的深色文字为佳。
　　这个原则也意味着，你最好别把文字的规格设得太小、也不能太大。文字太小，人家读起来难受；文字太大，或者文字视觉效果变化频繁，像是冲着人大喊大叫，看起来不舒服。
另外，最好让文本左对齐，而不是居中。按当代中文的阅读习惯，文本大都居左的。当然，标题一般应该居中，因为这符合读者的阅读习惯。
　　在内容上着笔尽量要细致，让人家能在最短的时间内，了解你想呈现给人家什么。给人家一幅清晰的画卷，别云山雾罩的。开门见山，直接了当。大家都知道，网友的耐心尤其少。你能提供的信息或许对他们有裨益，但如果要人家没完没了地翻下去才能找到，恐怕极少有人有这份耐心。
　　立体规划内容，将所有部分按一定的构架各就其位、分别纳入不同层次的页面。注意先要把最重要的内容放到首页上，其他的依次就绪。
　　然后，你就可以勾划页面蓝图、编HTML了。就文本内容的表现而言，记住尽量别让其一行文字的宽度，横跨整个屏幕。段落一多，这样子看起来很费劲，而且别人的浏览器还可能和你的差别很大。最好别超过屏幕宽度的一半。

　　3）、网页页面越小越好，最好别超过50k，尽量精简
　　有研究显示，如果一个网站页面的主体在15秒之内显现不出来，访客会很快失去对该站的兴趣。当然，也有例外，比如内容实在太精彩，人家不去不行。再像视觉艺术类站点，也不能以"快"为唯一设计标准。不过，即使这类站点，也该在加个导引页，给读者一个提示，别不理睬人家的心情。但是大多数网站还是以内容为主，大部分人感兴趣的还是信息量，追求的是速度。
　　要限定页面的大小，就得从各个角度考虑节省。最大的一头是图像，有的好东西，只得割爱了。想想看，在创意表达、品牌形象、挣钱几个目标之中，哪个最重要？

　　4）、网站导航要清晰，容易查找，
　　所有的超链接应清晰无误地向读者标识出来，所有导航性质的设置，像图像按钮，都要有清晰的标识，让人看得明白，千万别光顾视觉效果的热闹的，而让人家不知东西南北。
　　链接文本的颜色最好用约定俗成的：未访问的，蓝色；点击过的，紫色或栗色。如果你一定要别出心裁，链接的文本就要想着以什么方式加以突出，比如说加粗体？加字号？两侧加竖标？或者几者兼用。总之，文本链接一定要和页面的其他文字有所区分，给读者清楚的导向。
　　清晰导航还要求：读者进入目的页的点击次数，不能超过三次。如果三次以上还找不到，人家可就没有耐心陪你玩了！


网站推广　　

　　网上世界黑漆无边，你怎么让人家找到你？很多有些经验的网友知道这个问题的份量，不过对于一波一波兴奋上网的新手，他们脑中的概念大多是："有了网站，自然有人来"。不怪他们，商家们的欺骗宣传太成功了，他们哪里知道，网上有数不清的网站像"无人区"一样死寂。因此我们在作好网站以后，后期的推广宣传工作也不可忽略，主要的可以从以下几个方面来宣传。

　　1）、传统媒体：广播、报纸、电视都是很好的方法。现在我们已经看到很多在传统媒体中的商家广告，就是以网址为广告内容的主体。同时，商家所有的印刷品，包括名片，都是宣传网址的良好介质。

　　2）、因特网本身的方法：诸如导航台、新闻组、电子邮件群组、图标广告、分类广告等等，都是宣传网址的好方法。提高你网站在导航站点的排名、Banner广告、有技巧得利用传统媒体、BBS、新闻组都是获取潜在用户注意力的手段。 充分利用网页的交互性，增强与客户之间的联系，及时得到客户的反馈信息，了解客户的需求，不断的改进网站，提高整个网站的信誉。]]> http://www.runoo.com/blog/default.asp?id=213 <![CDATA[RSS: Best Design Practices And Icons]]> jordanqiu@msn.com(admin) Fri,02 Nov 2007 12:47:37 +0800 http://www.runoo.com/blog/default.asp?id=213
In this article we present an overview of what RSS is and present best design and usability-practices for design and placement of RSS-buttons on a web site. We also showcase dozens of free RSS-icons and provide you with references to related tutorials and how-tos.

Please notice that

you can find even more icons, buttons and design templates in our articles 20+ Free And Fresh Icon Sets, Freebies Round-Up: Icons, Buttons and Templates and in our Graphics category.
What is RSS?
RSS is basically a family of formats used to publish (not broadcast!) frequently updated content such as blog entries, news headlines or podcasts. The main advantage for users lies in the fact that they don’t have to keep up with their favorite web sites checking the web site manually. Instead, it is done in an automated manner so you get notified automatically once the site is updated.

RSS content can be read using feed readers such as Bloglines or aggregators such as Netvibes. The user subscribes to a feed by entering the feed’s link into the reader or by clicking an RSS icon in a browser thus subscribing to the feed. The reader checks the user’s subscribed feeds regularly for new content, downloading any updates that it finds — automatically.



To get an instant idea of how it is actually done you should take a look at RSS in Plain English which explains the basics of RSS in 3.5 minutes in Plain English.

RSS != XML
Since more and more users and bloggers indeed use RSS Syndication, it is gradually becoming a standard (or already is a de-facto-standard). This reflects in a number of approaches designers choose to animate their visitors for feed-subscription. The early feed-buttons have been labeled with “XML”, which is wrong, because this term stands not for the syndication format itself, but for the markup-language it uses. You can compare calling RSS-feeds XML with calling web sites HTML which obviously doesn’t really make any sense.

This is what it looked like few years ago (and in some cases still exists nowadays).


Source: cadenhead.org

Standard RSS-icon
RSS is used on most sites which are updated frequently; it also found its path in browsers and software applications. Therefore it’s reasonable to make sure that visitors can identify and recognize RSS quickly and easily. And this is why the standard RSS-icon is used in most cases.




The common RSS-icon

However, the Web is a creative place for experiments. Variations and modifications are common and interesting to observe. Creative designers come up with unusual solutions to integrate the RSS-button in their design and ensure that the overall site design is perfect.

The button itself doesn’t need to look like the standard RSS-button. For instance, it doesn’t need to have an orange color; shadows, frames and other visual effects can be used effectively to convey the message and attract visitor’s eye. What is important, however, is that despite all modifications the icon remains recognizable. This is not always the case.

If you’d like to use them you’ll find a quite comprehensive choice of possible variations offered for free download as icon sets. Before using them make sure you’ve read the license agreement carefully.

Ideas For RSS-Buttons
If you are a graphic designer you might find yourself in the situation where you’d like to risk some unusual solutions in order to provide your visitors with visually appealing designs. Please keep in mind: experiments can go wrong. You need to make sure that your button is recognizable, not that it simply looks good. After all, you want to find new readers instead of losing them.

Here are some examples of interesting uncommon solutions for RSS-buttons:



Nice, original, and in a different color. Greetings from Titanic.



RSS-button in 3D-look. The design fits perfectly to the overall site design.



What about an RSS-icon with foot?



RSS-symbol is integrated into a notebook.



Blue variation, independent in the header.



An extended version of the button; you can download it as a vector template.



Shadows and background in use to put the button in the front.



A part of a navigation menu. Where is the grey zone between creativity and standard? In this case the original theme is hopefully still recognizable.



The design can also be completely different: actually this RSS-blimp on Zach Braff’s page is animated. However, new visitors will find it quite difficult to recognize it as an RSS-button. What is the purpose of such designs? To fit to the site layout or win new readers? It doesn’t matter for portfolio-pages where it’s all about creative design approaches, it is however essential for weblogs.



Not that impressive trend, but still very often used: huge, enormous, gigantic buttons which have to be recognized immediately. Extremely overused and not really user-friendly. If this trend persists at some point we’ll see designs with the biggest RSS button of the world.

Where To Place An RSS-Icon?
The most beautiful design doesn’t serve its purpose if the visitors of your web-site can’t find an easy way to subscribe to your feed. While some designers put an enormous RSS-icon in the middle of the page, the other ones place it at the bottom of the page making it harder for users to find it. The funny thing is that enormous RSS-buttons are indeed more effective.

If the feeds are properly declared in the source code, browsers recognize it and offer visitors a choice of available feeds. Besides, most browsers also use an auto detection-function to find the feeds automatically. Therefore visually appealing icons and buttons serve not only the purpose to animate visitors to subscriptions; they also point visitors’ attention to the fact that the subscription via RSS is available.

An optimal position for RSS-icons is the area that surrounds your logo and the top area of your site. The lower an RSS-icon is placed, the little subscribers you’ll be able to get.

Of course, the best position depends on the layout and design of the site. For instance, if the design is based only upon black and white, it’s enough to place an orange RSS-button in the sidebar. And if a site uses too many colors an RSS-icon at the top of the page won’t help, because users won’t be able to perceive at as a single design element. An optimal position can be determined with usability tests or heatmaps.


Real Live Button. Source: Flickr

Standard in variations: RSS-Icons For Free Download
Please notice that some of the references mentioned below have already been published in our Dr. Web Magazine in September. Brian from Designbliss used some of the references and expanded the collection with further icon-sets and tutorials in his article Over 35 Styles of RSS Icons. In this post we’ve taken a profound look at what is available on the Web and collected our best findings.

Social Bookmarks Icon Set
12 .png-icons, among them an RSS-icon.


Fresh Icons Pack
.png-icons, 256×256.


Browsing Dock Icons
Taking a look at RSS-buttons from another perspective. 3D Cartoons Icons Pack.



RSS News
2 RSS icons.


RSS-Icon: standard in variations
A number of RSS-button-templates by Dirk Metzmacher.


Web 2 Social Bookmarks
12 FastIcon-freeware “iPhone-like” icons of Web 2 Social Bookmarks. Among them — RSS button.


RSS Dock Icon
256×256, 512×512, .png-icons.


Web 2.0 style RSS buttons


Dock Icons
4 Icons by Valentina Olini

A collection of vector templates (Developer Kit) for standard-feed-icon including 14 Photoshop-templates (.psd) and 4 Adobe Illustrator-templates.


Free Glass Style RSS/Feed Icons
Feed-o-rama. 213 Icons, 8 sizes, a variety of formats: AI(5), EPS (16), SVG(1), PNG (64), JPG (128).


RSS orb Icons
4 “orbital” RSS-icons.


Feedicons
34 Icons in 32*32 und 16*16 Pixels - .png.


3D Rss Feeds Icon
1 3D-icon in 4 sizes, by Dirceu Veiga.

Circle Feeds Icons
4 circular variations in 4 colors.


Zeusbox Feedicons
A set of RSS-icons.


Web 2.0 Icons
Include 48×48 and 32×32 RSS-buttons.



Feed icons for blogging guitarists
Guitar pick style. Get the PSD file or the PNG.


Icone Blog - Set 1
6 color variations included in a bigger set. Italian. Buongiorno Amici!


RSS Icon
This is one icon in 8 sizes. Is the RSS-symbol still recognizable?


30 Free Vector RSS Icons


How to mess with your readers
Two animated Feed-Icons.

DeviantArt has some quite creative work. Examples are petemh, nam0, carlnewton, leoparn, jb55 and again petemh.


Please notice that also wide-spread icon sets and templates such as FamFamFam Silk Icons and vector templates by GoSquared include RSS-buttons. Not all of them are included.
Make Yourself Your Own RSS-Button
If you’d like to create your own variation of an RSS-button you might find it useful to browse through some tutorials we’ve collected below.

Design a custom RSS feed icon
For Adobe Photoshop, by PixelHive.
Glassy & Vibrant RSS feed icon Tutorial
Vista Style for Adobe Photoshop


RSS Button Variations
The first is quite similar to traditional RSS buttons but it has a thick border that makes it look more like plastic.
Create a Vector RSS Icon
For Illustrator by Spoon Graphics.


Make your own RSS Feed icon
A Photoshop tutorial.
RSS Icons
A Fireworks tutorial.]]> http://www.runoo.com/blog/default.asp?id=207 <![CDATA[div和table在重构中的理解]]> jordanqiu@msn.com(admin) Thu,06 Sep 2007 11:23:17 +0800 http://www.runoo.com/blog/default.asp?id=207 使用DIV等布局元素来制作页面的设计布局,定位,色块,图片等
使用TABLE,UL等这样的元素来显示页面中需要展示数据
当然,DIV也起整理数据的作用,使用DIV的ID属性可以很方便的将一个DIV作为一个你名命的数据块 ]]> http://www.runoo.com/blog/default.asp?id=206 <![CDATA[block和inline]]> jordanqiu@msn.com(admin) Thu,06 Sep 2007 11:19:30 +0800 http://www.runoo.com/blog/default.asp?id=206 块元素(block element)
◎ address - 地址
　　◎ blockquote - 块引用
　　◎ center - 举中对齐块
　　◎ dir - 目录列表
　　◎ div - 常用块级容易，也是css layout的主要标签
　　◎ dl - 定义列表
　　◎ fieldset - form控制组
　　◎ form - 交互表单
　　◎ h1 - 大标题
　　◎ h2 - 副标题
　　◎ h3 - 3级标题
　　◎ h4 - 4级标题
　　◎ h5 - 5级标题
　　◎ h6 - 6级标题
　　◎ hr - 水平分隔线
　　◎ isindex - input prompt
　　◎ menu - 菜单列表
　　◎ noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
　　◎ noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
　　◎ ol - 排序表单
　　◎ p - 段落
　　◎ pre - 格式化文本
　　◎ table - 表格
　　◎ ul - 非排序列表
inline
◎ a - 锚点◎ abbr - 缩写
　　◎ acronym - 首字
　　◎ b - 粗体(不推荐)
　　◎ bdo - bidi override
　　◎ big - 大字体
　　◎ br - 换行
　　◎ cite - 引用
　　◎ code - 计算机代码(在引用源码的时候需要)
　　◎ dfn - 定义字段
　　◎ em - 强调
　　◎ font - 字体设定(不推荐)
　　◎ i - 斜体
　　◎ img - 图片
　　◎ input - 输入框
　　◎ kbd - 定义键盘文本
　　◎ label - 表格标签
　　◎ q - 短引用
　　◎ s - 中划线(不推荐)
　　◎ samp - 定义范例计算机代码
　　◎ select - 项目选择
　　◎ small - 小字体文本
　　◎ span - 常用内联容器，定义文本内区块
　　◎ strike - 中划线
　　◎ strong - 粗体强调
　　◎ sub - 下标
　　◎ sup - 上标
　　◎ textarea - 多行文本输入框
　　◎ tt - 电传文本
　　◎ u - 下划线
　　◎ var - 定义变量
可变元素
◎ applet - java applet
　　◎ button - 按钮
　　◎ del - 删除文本
　　◎ iframe - inline frame
　　◎ ins - 插入的文本
　　◎ map - 图片区块(map)
　　◎ object - object对象
　　◎ script - 客户端脚本]]> http://www.runoo.com/blog/default.asp?id=205 <![CDATA[IE捉迷藏bug（peek-a-boo）]]> jordanqiu@msn.com(admin) Thu,06 Sep 2007 11:11:48 +0800 http://www.runoo.com/blog/default.asp?id=205 　IE捉迷藏bug（peek-a-boo），之所以起这个名称是因为在某些条件下文本看起来消失了，只有在重新装载页面时才再度出现。出现这个bug的条件是：一个浮动元素后而跟着一些非浮动元素，然后是一个清理元素，所有这些元素都包含在一个设置了背景颜色或图像的你元素中。如果清理元素砬到了浮动元素，那么中间的非浮支元素看起来消失了，隐到了父元素的背景颜色或图像后面，只有在刷新页面时才重新出现。




　　幸运的是，有许多方法可以解决这个bug。最容易的方法可能是去掉父元素上的背景颜色或图像。但是，这常常是不可行的。另一个方法是避免清理元素与浮动元素接触。如果窗口元素应用了特定的尺寸，那么这个bug似乎就不会出殃了。如果给窗口指定行高，这个bug也不会出现。最后，将浮动元素和容器元素的position属性设置为relative也会减轻这个问题。

解决方案

　　在使用一些小技巧来解决这个bug之前，应当听听来自positioniseverything.net的网站专家的建议，positioniseverything.net是网上最早开始研究CSS在浏览器下兼容性的组织之一，而捉迷藏bug也是由positioniseverything首先整理出来的，对于此问题，应当从两方面入手：一是使用技巧去解决bug，二是通过一些编码习惯，预防捉迷藏情况的发生。positioniseverything提供了4个途径供大家来预防和解决捉迷藏问题：

　　1.在对页面上的对象使用float浮动之后，最后在下面使用带有clear:both的div对页面进行一些浮动上的清理工作，并且尽量避免对#layout使用background。

　　2.如果有可能，可以给#layout使用固定和高度，尽管这样会对页面有所限制，但能消除一些捉迷藏的影响。

　　3.可以尝试给#layout和#left使用position:relative。

　　4.对#layout使用line-height属性，强制浏览器对其中的内容进行选中调整，从面可以消除捉迷藏bug，例如使用line-height:1.2；就能够使页面运作变得正常。

　　bug虽然是IE留下的后遗症，但是别一方面我们应当在div的嵌套上遵循一些习惯，昼使用最少的层次嵌套来满足页面设计需要，使页面结构简单，容易控制与管理，尽可能的减小由于不必要的嵌套引来的边锁问题。 ]]> http://www.runoo.com/blog/default.asp?id=201 <![CDATA[csspaly小改版]]> jordanqiu@msn.com(admin) Thu,30 Aug 2007 16:28:59 +0800 http://www.runoo.com/blog/default.asp?id=201
]]> http://www.runoo.com/blog/default.asp?id=199 <![CDATA[三种简洁tab]]> jordanqiu@msn.com(admin) Wed,22 Aug 2007 09:42:13 +0800 http://www.runoo.com/blog/default.asp?id=199
HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
]]> http://www.runoo.com/blog/default.asp?id=198 <![CDATA[web.20工具箱]]> jordanqiu@msn.com(admin) Mon,20 Aug 2007 09:11:59 +0800 http://www.runoo.com/blog/default.asp?id=198 The Web Designers Tool Kit
原文地址：
http://www.dezinerfolio.com/2007 ... designers-tool-kit/
链接数量很多，翻译不全欢迎大家查漏补缺。个人比较喜欢js特效库。
分类一、DHTML AJAX Javascript 【Ajax脚本库】
1. RO Scripts - Growing Collection of Scripts under various categories
每天收集更多不同类型的脚本

2. HOT Scripts - Huge collection of Scripts under various categories.
收藏大量丰富类型的脚本

3. DHTML Goodies - Easy and Nice DHTML and AJAX scripts with cool examples.
简单易用的DHTML和Ajax脚本，并陪有丰富的实例

4. DHTML Site - Extremely cool collection of very useful scripts.
非常酷的脚本收藏站点

分类二、AJAX Frameworks and JS Effects 【Ajax框架及Js特效】
1. moo.fx - a superlightweight, ultratiny, megasmall javascript effects library, to be used with prototype.js or the mootools framework
moo.fx是一个超级轻量级易用的js特效库，基于protoype.js框架或者mootools框架



2. script.aculo.us - easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly.
script.aculo.us 简单易用的跨浏览器UI特效库，让你的网站和应用程序运行如飞。




3. MAD 4 Milk  疯狂牛奶



4. Moo Tools - Compact, Modular, Object-Oriented javascript framework
Mootools 压缩，模块化，面向对象设计的js框架。 每个项目都可以自由定制，压缩后的脚本大小约36KB左右，完整注释版130KB左右



{ moo.fx | mad4milk | mootools 应该是同一个开源项目组了}
分类三、Free Icons 【免费图标】
1.
Yellow Icon




2.
Fast Icon


3.
Icon Factory


4.
Icon Archive

5.
Icon Finder

6.
Icon Kits


7.
Icon Buffet


8.
Max Power


分类四、Color Tools 【配色工具】
1
. Color Schemer - Professional color matching application for anyone from hobbyists to advanced professionals.
Color Schemer专业色彩搭配程序， 菜鸟到专业人士都适合

2. Color Lovers - A resource that monitors and influences color trends
Color Lovers 预测色彩流行趋势资源网站

3. Color Whore - A directory of nice colors
Color Whore 一个收藏色彩搭配的“大字典”

4. Color Jack

5. Daily Color Scheme - Daily fresh color schemes
每日新鲜的配色方案出炉

6. Color Blender

7. Well Styled


分类五、其他在线资源
1. CSS Validator
  这个不用说了css验证器

2. Napyfab - Ajax Activity Indicators ( loading animations )
Ajax的loading 动画资源

3. XHTML Validator

4. iCapture - Test ( screenshot ) your web site on different operating systems.
iCapture 在不同的操作系统下给你的网站抓屏测试。

5. SEO Moz - Quickly diagnose search engine crawling issues on your website.
SEO Moz 获取搜索引擎蜘蛛爬（你的）网信息

6. EM Calculato - Convert em to px and px to em
em单位换算px单位

7. Clean CSS - CSS Formatter and Optimiser
Clean CSS 用来优化css代码

8. CSS Type - web safe typography on screen for pixel perfectionists

网站排版，在显示器上获取最佳的显示

9. Google Code Search - Search public source code.
搜索开源代码

10. Browser Shots - Test your web design in different browsers
给网站抓屏

11. Meta Tag Generator
媒体标签生成器

12. Make Words - Name Generator. Find unique names and register available domains

MakeWords 名称生成器，寻找独特唯一的名字来注册玉米

13. ROR Sitemap Generator - This free tool will crawl your website and generate a Sitemap with up to 1,000 URLs for ALL search engines, not just Google.
网站导航生成器。

14. Instant SQL Formatter - Instant SQL Formatter
快速格式化SQL语句

15. Font Tester - Font Tester is a free online font comparison tool
字体在线测试，免费在线排版工具，都是网络安全字体。

16. Poll Daddy - Create free polls anywhere online
创建免费的在线投票统计。

17. Stripe Generator - The ultimate tool for Web 2.0 Designers

18. Smashing Magazine - Very useful Tips, Resources and Web Development based stuff.
非常有用的技巧，资源和网络开发基础知识

19. Bittbox - Lots of free Design Resources
丰富的免费设计资源。

20. Zamar - Have you ever wanted to convert files without the need to download software ?
在线转换文件格式

21. CSS Fly - Online CSS Editor
在线的CSS编辑器

分类六、免费字体
1. Urban Fonts
  

2. Font Reactor

3. DaFont

4. Search Free Fonts


5. 1001 Fonts


6. Font Leech


分类七、网络优化，流量统计统计，数据分析
1. Google Analytics

2. Crazy Egg

3. Feedburner


4. reinvogorate

5. measuremap

6. W3 Counter


7. AW Stats


8.
MyBlogLog

9.
WebSideStory

10.  Sitemeter
]]> http://www.runoo.com/blog/default.asp?id=197 <![CDATA[一个CSS书写顺序建议]]> jordanqiu@msn.com(admin) Mon,20 Aug 2007 08:54:47 +0800 http://www.runoo.com/blog/default.asp?id=197

引用内容
//显示属性
display
list-style
position
float
clear

//自身属性
width
height
margin
padding
border
background

//文本属性
color
font
text-decoration
text-align
vertical-align
white-space
other text
content


记录：

程序代码
test:791px!important;    /*FF Hack*/
*test:785px!important;    /*IE7 Hack*/
test:777px;    /*IE7以下*/
]]> http://www.runoo.com/blog/default.asp?id=193 <![CDATA[css技巧汇总]]> jordanqiu@msn.com(admin) Thu,02 Aug 2007 11:22:03 +0800 http://www.runoo.com/blog/default.asp?id=193 http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/]]>