Web2.0时代，让我们生活变得多姿多彩！

黄金分割点在网页设计中的运用

xiangboo@gmail.com(xiangboo) — Wed,07 Jan 2009 14:33:10 +0800

13世纪法布兰斯提出黄金分割理论，这个理论让僵硬无聊的数学变得如此美丽。最美的设计、艺术品，似乎都离不开黄金分割。本文的将剖析网站的布局和黄金分割之间的关系。

网页剖析

网站最重要的就是内容和美观，下面是一个比较常见的网页布局。

容器

所有的网页使用容器都有同样的目的：放入需要的内容。但是他们的实现方式不一样。Body和Div是常见的两种方式（使用Table已经过时）。对于容器你可以这样认为：容器就是你家房子的外墙，房子里面要放厨房、卫生间、卧室、客厅等等。

容器的方式：

全屏式：无论屏幕大小，横向满屏幕显示，填补宽度的不足；
固定式：无论屏幕大小，横向固定宽度。

头部（Header）

很多人认为，头部不是一个表达真正内容的区域。但是几乎每个网页都有头部，里面包括Logo、Navigation、Tagline等。Header可以作为容器的一部分，他具有容器的属性，即：全屏式和固定式。

Logo和导航（Navigation）

Logo

Logo是网站的身份和品牌。最常见的Logo是左对齐，我们从左到右，从上到下阅读。Logo是进入访问者眼睛的第一元素。

Navigation

导航是一个很重要的部分，访问者访问您的网站需要能很方便的使用它。它通常处于页眉或者出于页面上方。以下两种方式一般使用在用户体验策划含量较高的网站

Navigation方式：

横向：一系列链接内嵌其中，一般被视为：导航；
纵向：一系列链接被垂直组合在一起，一般视为：菜单。

主体内容（Main Content）

大家都知道，网站，内容为王。访问者来您的网站就是为了寻找内容，所以需要让用户在最快的时间内找到他们所需要的内容。

有人说：如果网站进入您的网站，鼠标点击在3次内找到所需内容，说明您网站设计基本合理，如果超过了3次，那么您的网站设计就不及格。

边模块（Sidebar）

通常情况下，边模块是补充内容，如：广告、站内搜索、订阅等等。这里面不必要放入主体内容。最常见的是右边对齐，也有左边和右边都有变模块的。总之一个原则：边模块不能破坏主体内容。通常情况下，网站采用横向和纵向导航的话，边模块一般作为纵向菜单。

页面底部（Footer）

页面底部是让您的访问者知道，网页已经完了。页面底部通常需要传达的信息有版权、法律、联系方式等等。在这里说明一些信息的确是个好想法。

空白（Whitespace）

留出空白是一个有效的平衡网页各个模块的好办法。常言道：距离产生美，在网页的合适地方留下空白，很大程度上能方便用户的浏览体验。空白设计也是网页设计的一个重要内容。您可以看看NetTuts网站是如何留下空白来平衡网页的。让内容之间分开。

黄金分割点和网格的应用

在文章开头处，我们提到了黄金分割点。公认的视觉效果最好需要满足黄金分割。自古以来的科学家、艺术家、建筑师都会有意无意的使用这一分割率来制造视觉效果。什么是魔法数字：1.62（实际上是1.618）这里不过多的介绍它，下面教大家如何运用它。

使用黄金分割很简单。如上面的例子：页面总宽度为900px，我们只要900/1.62=555.55px。（这个结果不用太精确）我们就大概知道，内容部分占用的宽度为555px，边模块占用的宽度为900-555=345px。就这么简单。

当然，这个只是一个小小的例子，你可以运用此方法在其他地方加以应用，如高度、宽度和高度的比例，如下：

应用网格

如果您和大多数人一样，不像旁边放一个计算器来计算这个黄金比例的话，我给您介绍一个简单的方法：网格

只要保证内容和边模块分别占2/3和1/3。

有些网站，看上去觉得非常漂亮，或许它的设计者运用了这一黄金比例哟！

在您以后的设计中，您可以尝试下次方法，您会收到意想不到的效果。

谢谢！

翻译：xiangboo

原文：http://nettuts.com/tutorials/other/the-golden-ratio-in-web-design/

来自talk-mania的15个免费资源网站

xiangboo@gmail.com(xiangboo) — Mon,29 Dec 2008 16:06:30 +0800

talk-mania.com 是美国弗吉尼亚的设计网站，论坛。相当于国内的蓝色理想 talk-mania.com 近期开放了15个免费资源下载站。里面有6000多个免费资源，在国外非免非互联网的环境下，开发如此多的资源，实属罕见。

1. Brush-Mania

2. Gradient-Mania

3. Style-Mania

4. Action-Mania

5. Font-Mania

6. Pattern-Mania

7. Shape-Mania

8. Icon-Mania

9. Psd-Mania

10. Texture-Mania

11. Vector-Mania

12. Wordpress-Mania

13. Drupal-Mania

14. Joomla-Mania

15. Vbulletin-Mania

100个最漂亮的Blog设计（第二部分）

xiangboo@gmail.com(xiangboo) — Mon,29 Dec 2008 15:40:33 +0800

100个最漂亮的Blog设计（第二部分）

Squawk

Sr28 Web Design

Natalie Jost - Standards for Life

Superawesome

TehCPeng

NorthxEast - Weekly Articles About Blogging

The Big Noob

The Rissington Podcast

TheHotSeat

This Is American Soccer

Tj Mapes

TNTpixel

I Love Typography

Veerle - Webdesign, XHTML, CSS, Graphic Design

We Are Not Freelancers

Viget Labs

Web Designer Wall - Design Trends and Tutorials

Komodomedia

Ribbons of Red Web & Graphic Design

ISO50 - The Visual Work of Scott Hansen

Bonsai Studios

Paintbits - Life in Colors

GoMediaZine

Matt Mullenweg

Matt Brett

Studio Racket

{e} House Studio

Lorelei Web Design

The Yawkey Way

NemStudio Blog Developement Web

100个最漂亮的Blog设计（第一部分）

xiangboo@gmail.com(xiangboo) — Mon,29 Dec 2008 15:36:58 +0800

在这个内容为王的时代，Blog的界面样式也不能忽略。一个新颖的节目，能第一眼吸引访问的用户，让用户是否决定留下或者里开。

这篇文章的原作者用了几周的时间，访问上千Blog，寻找最漂亮的Blog设计。作为网站设计这的你，可能在这里面能找到灵感！

原文地址：http://www.hongkiat.com/blog/100-nice-and-beautiful-blog-design/

Freelance Web Designer in Cardiff

31Three - Creative services for the design-challenged developer

aNieto2k

Vikiworks Studio

Aaron Mentele

aiAlex - Artificially Intelligent Life

Alex buga - Webdesign Superstar

Zinaz

Artypapers - An Experiment Gone Useful

Start Cooking

Art Culture

Bart-Jan Verhoef

Personified

Big Sweater Design

Missy - Great Blog In My Jeans

Cause/Effect

Spoon Graphics

Blogsolid - Ideas for better blogging

Robert Beerworth - Business Solution Blog Business Idea

Carsonified

Cheaper Than Therapy

Circle Six Blog

Country Music Articles

Blog Web Design Blog

Cult-foo

Darkmotion - Animation and Illustration

david hellmann - Graphic and Webdesign

Design Disese

Design Intellection

Design Reviver

Design*Sponge

AvalonStar

Dollarshort

Eleven3

Elitist Snob - Mac snobbery and such

Elliot jay Stocks

Simply Fried

FreelanceSwitch - Freelance Advice and Freelance Jobs

Freelenz

GrantMX Design

Great Design

GZ Web Design Blog

I Am Neato - The Online Portfolio of Emilio Cavazos

I am Finch

IceBeat

Jesus Rodriguez Velasco

Josh Spear

Kimberly Coles Illustration Blog

Kohette WebDesign

Kulturbanause

Larissa Meek

Laura alter

Lucy Blackmore

Matthew Inman - Marketing & Design

Moderno Prometeo

Mutado

Narfstuff - Wordpress Development, Web and Graphic Design

Oaktree Creative

Olliekav - All things design, music and more

Papel Continuo

PhillRyu

Ploink! Brothers

Refreshing Content

Revota

Rikcat - The art of rik catlow

Rob Goodlatte

Schneeballschl8

Search Engine Optimization Edmonton

SimpleBits

Sparklette

100个最漂亮的Blog设计（第二部分）

来自talk-mania的150例网站设计教程

xiangboo@gmail.com(xiangboo) — Mon,29 Dec 2008 13:49:55 +0800

以下150例教程是来自http://www.talk-mania.com 网站设计创意。很多地方能给你灵感。请欣赏！

150. Car Dealer Website - For flash projects

149. Very clean business layout

148. Clean hosting layout

147. Internet Business layout with 3D Logo

146. Tech Hosting Layout

145. 3D Studio Layout - Portfolio Layout

144. Game layout with scratched menu

143. Real Estate Layout

142. Urban layout perfect for Web Design Company

141. VPS hosting layout

140. Realistic 3D rack server

139. Glossy Scarf / Banner

138. Hosting Layout ( for Flash Projects )

137. Wedding layout

136. Mobile phone shopping cart layout

135. Ecommerce web hosting layout

134. Web 2.0 Portfolio Website

133. Dedicated Hosting Layout

132. Talk-Mania Logo

131. Music Layout - Old look

130. Medieval Layout

129. Glossy 3D Logo

128. Web 2.0 business layout

127. Software layout

126. Web 2.0 business layout

125. Advanced Hosting Layout 2.0

124. Dot.Mobi Layout

123. Chopper layout

122. Advanced Game Layout

121. 3D Layout

120. Web Hosting Layout

119. High tech layout with grunge style

118. General website layout

117. Stylish Layout

116. Portfolio Layout #6

115. Clean Real Estate Layout

114. 3D vista software box

113. Design Studio Layout

112. Advanced game layout

111. Portfolio layout #5

110. BIZ layout !!!

109. Plasma text effect

108. Layout for video broadcast

107. Digital Bonsai

106. Golf Club Layout

105. Very Clean Business Layout

104. Transform Brushes in Masterpieces

103. Arrow layout

102. Stand-up Comedy layout

101. Wallpaper

100. Portfolio Layout #4

99. Subacvatic layout

98. Auto Layout

97. Layout for Games cheat codes

96. Military layout

95. Night club layout

94. 3D render to Wireframe effect

93. Layout for tutorial website

92. Cars & Transportation layout

91. 3D Box Logo with transparent sides

90. Button with lights

89. Small size layout ( css / xhtml files availaible for VIP )

88. Pop Art Comic - 2 Different Methods

87. Industrial Layout

86. Another portfolio layout #3

85. Another WEB design company layout

84. Another game layout

83. Clean business template

82. Cool Navigation Bar / Buttons

81. Web design company layout

80. Massive game header tutorial

79. Music Layout

78. Digital Background ( water drops -stars )

77. Web Design Company layout

76. St Valentine layout - OSCOMMERCE or CRELOADED

75. Personal Portfolio Layout

74. Black-Grey Game layout

73. Metalic Tech Button

72. Blog layout with grunge style

71. Flash page intro

70. Text with metal border

69. Prepare Sketches for Graphic Tablets

68. Game layout

67. Web 2.0 Button

66. Software layout

65. Splash Page

64. Combine 2 text layer styles

63. Liquid Metal Effect in Photoshop

62. Header with tech look for your web design company

61. Soccer / Football Template

60. Perspective Logo for your Business

59. 3D Digital Text Effect

58. Architecture Web Template

57. Apple Tab Navigation

56. Glassy orb - Only with layer styles

55. Car Dealer Layout

54. Modern layout with screw heads

53. Create simple Business templates

52. 3D shiny sign with smooth reflection

51. Smooth rounded edges

50. Digital Wallpaper Effect

49. Create a mp3 myspace player

48. Vista Style Layout

47. Modern Clean Style Layout

46. Gritty / Sandy Photos

45. Flossy snow

44. Futuristic / High Tech Logo

43. Create a Rounded Layout

42. Signature with indents and tubes

41. Create logos from fonts

40. Metal button

39. Create Vista Icons

38. Digital effect ( perfect for banners or headers )

37. Fire text effect

36. Cool background (used for a header or a signature image)

35. Clean style layout ( corporate or business )

34. Transform a photo in Illustration

33. Hosting Layout

32. Play with someone’s face

31. Create professional patterns for navigation bar

30. Professional Blue-Grey Layout

29. Layout for osCommerce or CRE Loaded

28. 3D Logo with Metal borders

27. Metal Text Effect

26. Incandescent text

25. Create a text logo

24. Cool Tiger text effect

23. Text filled with lines (Grunge Type)

22. Silver text tutorial

21. Computer case with peel effect

20. Adding a Beam of Light on your photos

19. Add Fog on your Photos

18. Professional Patterns for General Use

17. Cool Tech Signature

16. Stylish Corporate Layout

15. Trendy Corporate Layout

14. Transform a Girl into a Robot

13. Old Style Layout

12. Layout for Adsense

9. Gold Text

8. Create old photos

7. Professional software box

6. Learn how I cubed a apple

5. Business - Corporate template

4. Modern Layout

3. Button with metal border and 3D look

2. Create a 3D Logo

1. Nice Rose Template

WebApp网站列表：网站设计相关在线服务列表

xiangboo@gmail.com(xiangboo) — Fri,26 Dec 2008 17:59:53 +0800

在线调色工具收集

1.Web 2.0 调色板：列出了目前主流web2.0网站的配色方案供你参考。

2.colorblender-颜色在线编辑器：首页上提供无数种互联网上最流行的经常搭配在一起的六种基本色，你可以选择其中你认为符合你网站风格的六种基本色然后进行微调得到你喜欢的颜色。

3.颜色快速采集器：提供了上百种颜色，选中颜色即会在网页背景显示相关颜色，得到相应的颜色代码。

4.Color Blender：只要在Color1和Color2两个颜色框选出两种颜色，然后在Midpoints中选择需要生成的过渡色的数量，点击下面的Blend按钮后，在 Palette中就会显示相应的过渡颜色。你也可以在上面的Format中选择颜色格式，有HEX网页格式、RGB和百分比表示的RGB。

5.Color Schemer：是颜色管理软件Color Schemer Studio的在线版，支持PC和MAC系统。还有一个Color Scheme generator 2

6.Color scheme：提供了不同色系，不同明度的对比。

7.网页配色表：内容包括:W3C- 十六色色盘,IE4+预命名颜色,WIN- 用户系统色盘,216 安全色色盘.

8. 颜色代码选择器：根据不同的颜色显示不同的颜色代码，也可以根据颜色代码查询颜色。

9.Colorjack 是一款基于AJAX 技术的在线配色工具，可以直接获取 RGB 码。

10.4096 Color Wheel：当你的滑鼠在调色盘点一下，就能产生全色板。

11.Color palette creator：能产生十种色调，还能将十种色调建立成PNG文档。
12.Colr.org ：这是一种输入英文字并根据来产生色表的一种工具，像输入”sea” 就会产生跟大海相关的颜色。

13.Color schemer v2：根据你选择的基色，可以产生16种相关的配色方案。

14.Visibone color lab：先选其中一种颜色，然后再按隨便一种颜色，会记录你选择颜色的过程，直到你选到喜欢的颜色。

15.Colortoy：flash版调色网站，使用RGB来产生5种相关颜色。

16.Colours on the web：一个介绍网站配色的网站，从配色原理开始。

17.Dailycolorscheme：每天提供一种配色方案,并提供Photoshop、Illustrator、CSS配色档案下载，而且还提供了RSS订阅。

18.网页安全色：网页安全色是常见于Macintosh 和Windows 平台的颜色。当在设置为256 色的计算机显示器上的Web 浏览器中查看时，这些颜色不会抖动。

在线CSS工具

1.W3C CSS 校验服务 :提供万维网协会(W3C)样式表(CSS)校验服务。

2.CSS 在线编辑器:OnLine CSS Designer - CSS Style Editor。 CSS 样式在线编辑器，可以即时查看CSS 样式效果演示。

3.QrONE CSS Designer ：在线CSS编辑器，所见即所得。

4.SKUER - The CSS Search Engine :SKUER - The CSS Search Engine:CSS搜索引擎。

5.CSS Tweak : CSS 在线优化工具：优化Color值，去掉注视，压缩CSS文件的大小。

6.TypeTester :文字样式CSS在线对比工具。

7.CSS文件优化器:在不影响页面显示效果的前提下减少你的CSS代码。

8.Browsershots ：查看同一个网页在不同浏览器下的展示效果。

9.CSS整形和最佳化工具：在线CSS的优化工具。

10. CSS Text Wrapper是一个提供个性化定制Blog文章内容显示效果服务的网站。通过 CSS Text Wrapper，你无需了解任何HTML/CSS知识，你就可以个性化定制出多种多样的Blog内容显示效果。示例。详细介绍。

11.Online CSS Optimizer：在线CSS优化工具。

12. CSS Button Generator：在线CSS按钮生成工具。

CSS相关资源

1.Free Css Templates :一个提供免费CSS代码下载的网站，上面列出很多很漂亮的CSS代码供你免费下载，非常不错。

2.CSS Tempalte download:又一个提供免费CSS代码下载的网站。

3.CSS工具列表:Huge List of CSS Tools : Fonts, Forms, Layout, Formatters and Optimizers.总结的相当全的CSS工具列表。

4.CSS: Techniques, Tutorials, Layouts: 又一个关于CSS比较全的总结，关于CSS Diagrams, Bar Graphs, Star Rater，CSS Forms，CSS Galleries，CSS Image Maps, Image Switcher, Sliding Photograph Galleries ，CSS Layouts Templates等方面的内容。

5.CSS Allstar :展示和评比CSS效果做的比较好的网站。

6.CSS Bloom ：不错的CSS设计网站展示。

7.Total Tutorial ：包含大量 photoshop、flash、css、asp、php、javascript 等实用教材。

8.CSS Rounded Box Generator：一个介绍产生圆角CSS效果的教程。

9.3D Maze generated with CSS： 3D Maze generated with CSS，用CSS制作的3D迷宫。