惯用商业软体的人可能不知道，在开放源码（Open Source）中有更多选择的工具可以使用，它们不仅免费可自由流通，同时在共创开发的环境下还是吸收最新观念与构想的最佳途径。 Open Source经济模式已超过20年的发展光景，多元开放的力量使得影响力、重要性与日俱增。

简单来讲，未来的商业软体只能说是Open Source中某一概念发展的软体，其它还有成千上万的概念尚未被挖掘推广，可见Open Source的广泛与深厚，是任何IT业者都应该学习应用的资源。

事实上Open Source模式是由程式设计人员开始建构而来的，但它是如此的成功，以致现在一些政府单位、媒体、教育单位与私人企业也都投入这样的应用。尽管如此，网页设计在Open Source仍是最为独特普遍的一项理想应用模式。意思就是根据Open Source的普遍性原则，在网页设计里包括图形、CSS与HTML你都可以拿来设计或修改使用，同时还有许多可靠的原始程式码或数以千计的网页设计样板可作为参考基础。下面我们就特别甄选100种Open Source网页设计的样板、资源与工具等，让你马上现拿现用：

最佳的网页版型名录

在网路上有非常多的免费设计样板，但要全部过滤搜寻它们就变成是相当烦琐枯燥的工作了。经过慎重考虑后，在这里推荐4个最佳且免费的线上Open Source样板名录网站，可以做为查询使用的开始点。

1.OSWD: 超过2,000个最佳且免费的网页设计样板可供选用，本站还提供依色彩、对比、认同度与其它类别的搜寻能力，相当方便好用。 (图一)

《图一 》 - BigPic:760x622

2.OpenWebDesign:一个相当大而活跃的个人使用社群，他们在此分享免费的设计样板，包括一些常态的设计背景，加上提供更多最流行的设计款式在次目录上让你快速搭配选用。

3.Open Designs: 这是一家以非营利为标头的讨论版，Open design社群将近有600个设计讨论群组，而且确实都有社群志工担任讨论版的信件管理员。当然在活跃的论坛上，相对地也都有优秀的设计人员在版上提供一些小技巧与其它资源。

4.CSS Tinderbox: 提供相当基本的，也是固定模式的CSS/XHTML设计样板，使用者就不必凡事从头再创作一遍，并据此再做更改或创新的基础。

网页设计软体程式

如果能够找到免费的软体，为什么还要付费去买商业软体呢？通常答案总是会认为免费的东西既阳春又不好用，但当你去探索本节所介绍的软体时，会发现这些软体才是极品中的极品哩。

5.Nvu: 一个开放原码的网页开发制作系统，是FrontPage与Dreamweaver的竞争对手。 (可在Linux, Windows与Mac环境下使用。) (图二)

《图二 》 - BigPic:749x548

6. Cssed:一个CSS编辑器。特点是能自动完成作业程序，还有语法的特别标示与验证等功能。原始程式码为C,C++，在Linux作业系统下应用。

7.Quanta Plus: 在K Desktop(图形使用介面)环境下使用的顶级HTML编辑器与网页开发软体。

8.Bluefish:提供GTK程式设计人员使用的HTML编辑器，将网页管理者的经验融入在ㄧ些特定字键中使用。 (C, GNU/Linux, Unix)

9.GIMPShop: 开放源码中的Photoshop软体，够明白了吧。 (可在Linux, Windows与Mac环境下使用。)

10.Inkscape: 一个向量绘图的应用软体，有了这个你可以跟Adobe的Illustrator说拜拜了。

网页设计样板完全素材

假如你想要快速地建构你的网站，那么就需要一个让你花费最少气力的完整版样板资源来配合。在本节特别点出线上一些优良的样板资源网站，这些样板不只有CSS，也包括(X)HTML，某些专案则连图档也一并奉上，让你尽可能快速地设计好网页。

11.Template Navigator: 一个最大的网页与flash之样板目录索引网站,还有品质优良的攫取图像可预览。

12.TemplateBox: 超过300个免费的网站，以及相关配合的logo、banner与flash样板等来提供设计的参照使用。

13.Templatemonster: 一组小型但非常高品质的网页、flash与Blog的样板。

14.Art for the Web: 75个免费版型，如果你想要找一些不同凡响的样式，这是ㄧ个很好的选择。

15.Free CSS Templates: 有206个强大的样板资源，而且还会频繁地更新最新发表的样式。

16.Effex-Media: 由设计师提供的免费网站样板设计资源，而且以网站性质来做分类，很多版型还包括使用者对它的评价说明。 (图三)

《图三 》

17.DotcomWebDesign: 数百个免费的网页样板，有些且属于真正的顶级作品，但它的目录分类显然有些欠缺规则性，因此可能得多花些时间以逐项手动的方式来搜寻。

18.Themebot Design Templates: 本站的网页样板不是很多，但有大量的免费题材资源。

19.Groovy Lizard: 个人提供的网页样板，如果是商业上的使用必需购买使用权。

20.Interspire: 免费的网页资源，主要是提供使用Frontpage与Dreamweaver者一些现成的样板。

21.Joyful Heart Designs: 一般个人提供的网页样板，有花草般的设计风格。

22.OpenSourceTemplates: 免费的CSS与XHTML开放源码资源网页样板，且是Web 2.0的设计概念。

23.Ricky’s Web Templates: 超过50个的免费样板、图形与按钮图样等。

24.Free CSS Templates: 十几个全功能有特色的CSS基础样板。

25.FreekTemplates.com: 收及一些商业款式、汽车、自行车与群众的样板。

26.Template Perfection: 提供200多个免费样板，而且有一些是非英语系风格的样板。

27.Template Workz: 48种网页样版,包括一些基本的logo与电子报样板。

28.Zymic: 80种免费样板。 (包括有HTML网页、CSS、图形、PSD与空白图形档等)

29.OpenSourceTemplates: 由网路上社群成立的CSS与XHTML开放源码设计资源。

30.Freelayouts: 一些HTML与Flash的样板。

31.FreeCSSTemplates.org:超过100个的免费CSS样板资源。

32.Free Layouts: 数百个HTML、Flash与CSS的完整样板清单。

33.Free Templates Online:依主题分类的一些简单客制化样板。

34.Free Website Templates: 在ㄧ个站上提供所收集的大量样板，不需互相连结来取得。

35.Six-Shooter Media:免费CSS与XHTML开放源码样板。

36.Free Flash Template: 相当具特色的网页样板与介绍。

37.Layouts4Free.com:免费的网页设计样板，并有搜寻的功能。

38.Solucja:已经装置好的免费XHTML/CSS网页样板,而且依商业上使用来分类。

39.MasterTemplates: 专业水平的网页设计样版,包括有PowerPoint的样板设计。

40.TemplateWorld: 免费的非表格式，但合乎W3C标准的网页设计样板。

41.Painted Pixels:提供非商业性使用的免费网页样板、按钮图与背景砖块等。

42.CSS Fill:由Michael Strand提供的CSS/XHTML基础之设计样板组选。

43.ThemesBase: 一个样板组构系统，以流行的内容管理、部落格与论坛设计需求来配合。

44.Arcsin Design Templates: 22个免费的HTML与CSS样板。

45.Snake Eye Web Templates: 20 个针对Dreamweaver与Fireworks为应用的样板。

46.​​Steve’s Templates: 10几个免费样板与连结资源。

47.GordonMac.com:免费的CSS样板，并包括一些PHP描述程式之功能提供。

48.Web Design Helper: 完全的网页样板提供，包括图形与程式码。

49.Webmaster Resources: 25个免费的网页样板。

CSS 设计样板

假如寻求建立完全原创又自由的设计样式，但又要兼顾基本设计布局，本节就是你最好参考资料。以下的样板都是纯粹的CSS，提供ㄧ个干净的版材，让你能加入适合自己的设计、图形与文字。

50.Layout Gala: 40个CSS，三层颜色布局，帮你挑一个适合的格式。

51.AndreasVilkund.com:著名设计师Andreas Viklund提供的免费样板。

52.CSS Template Directory:收集多个设计师所发展与分享的CSS网页样板。

53.BenMeadowcroft.com: 由Ben Meadowcroft提供的顶级网页设计样板，混合了一些戏谑实验性的样板。

54.Mollio:一组基本的CSS样版,也有一些基本内容范本可作快速延伸。

55.Real World Style: 依一定版式设计的CSS样板系列。

56.Little Boxes:以快速可取用的CSS码来编制的样板。

57.The Layout Reservoir: 简单、直捷了当的2栏或3栏操作之设计。

58.Protagonist Web Resources: 43个不用表格做应用的设计系列，也包括其它类似资源的提供。

59.Glish:由Eric Costello提供的CSS设计技术，而且将其中要素都揭露公开。

60.FU2K: 针对与Netscape 4相容的CSS编排设计样板。

61.Position is Everything: 不需应用表格来做网页的CSS设计。 (图四)

《图四》 - BigPic:755x616

62.Three Column Layouts: 终极 3 栏式设计资源系列。

63.ssi-developer: 2段式CSS示范样版,包括一些建议事项。

64.MIS Web Design: 以CSS设计的片段花样。

65.Ruthsarian Layouts: 从基本到复杂形式的免费CSS设计样板排列。

66.A List Apart: CSS: 实用的CSS设计要件、窍门与技术。

67.Code-Sucks.com: 建构1、2、3与4栏的设计版型。

68.Particle Tree: 依照设计版型的动态网页解决方式。

69.Project Seven: 流畅动感的CSS版型设计。

70.MyCelly: 收集16个基本的CSS版型设计。

71.Ideas: 12个免费的CSS样版。

72.CSS Library: 动态执行的CSS版型设计，不需应用表格来排版定位。

73.IntensivStation: 收集所有最新的CSS基本样本。

74.IronMyers: 收集完全为A等级的版型设计，支援IE6、IE7、Firefox、Opera、Safari等浏览器。

75.The CSS Playground: 由Stu Nicholls示范的最顶尖CSS设计样板。

76.Wordpress Theme Viewer: 收集以行段、颜色、圆角及其他分类方式的设计素材系列。

77.Fluid 2-Column Template:一个完全可应用的「流动型」样板，且表示设计的样式可随着视窗大小来伸缩调整。

78.Avinash 2.0: 也是12个免费的CSS样板。

自动化CSS应用工具与产生器

这一组的资源并不是给那些想建构完全独特CSS样板者所应用的东西。但如果你本身不是很强的编码设计者，而且只是要完成工作，那么这些自动化的CSS编码工具可以让你按个钮就建立起来的。

79.CSS Creator:从所选的颜色、行段数、HTML版本等后按下自动按钮就能产生CSS版型到你的网页上。

80.Ink Noise: 填下所需要的格式后立刻自动弹出你所要的CSS页码。

81.Strange Banana:快速简单地更新CSS样版,直到得到你喜欢的款式的产生器,储存起来然后嵌入到你的网页开头之处。

82.Nidahas:一个CSS基础的表格制作产生器。

83.Make Template:一个PHP- HTML–CSS格式的两栏段之样板产生器。

84.IBDjohn: 3栏段设计的CSS样板产生器。

85.TemplatE: 另一类的简易型CSS样板产生器。

86.PsycHo: 由你自己心理反应需要来设计你的网页样板。

87.Firbimatic: 不需运用表格的2或3栏设计产生器。

88.Wordpress Theme Generator: 建立客制化独特Wordpress主题的线上应用产生器。

部落格题材与样板

在一个主网站下设计个别的部落格是流行大势所趋，所以应该思考个别区段想得到的样板型式，在本节中就特别挑选一些最佳的开放源码之Weblog样板资源。

89.Smashing Magazine:你大概还没见过的83种漂亮Wordpress 题材。

90.Kaushal Sheth: 相当优雅的WordPress主题设计。 (图五)

《图五》

91.Erratic Wisdom: 文字花样的设计样板。

92.Scribez: 10个最佳的Wordpress样板。

93.pink design: 免费的日志/部落格样板。

94.Textgarden.org:以文字花样为主题分享的官方网站。

95.Blogger Templates: 收集广泛不同题材的部落格样板。

96.Blogfashions:收集一些免费且可移动性的部落格样板。

97.FinalSense: 一些高品质的部落格样板。

98.WP Themes: 由Sadish Bala提供的WordPress主题设计。

99.Drupal Theme Garden: 针对Drupal 4.7x 与 Drupal 5.x.版本提供的示范可用题材。

100.Weblog Design: 小量不多但高品质weblog样板。