慣用商業軟體的人可能不知道，在開放源碼（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.TemplateNavigator: 一個最大的網頁與flash之樣板目錄索引網站，還有品質優良的攫取圖像可預覽。

12.TemplateBox: 超過300個免費的網站，以及相關配合的logo、banner與flash樣板等來提供設計的參照使用。

13.Template Monster: 一組小型但非常高品質的網頁、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.TemplateWorkz: 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.Solucija:已經裝置好的免費XHTML/CSS網頁樣板，而且依商業上使用來分類。

39.MasterTemplates: 專業水平的網頁設計樣板，包括有PowerPoint的樣板設計。

40.TemplateWorld: 免費的非表格式，但合乎W3C標準的網頁設計樣板。

41.Painted Pixels:提供非商業性使用的免費網頁樣板、按鈕圖與背景磚塊等。

42.CSSFill:由Michael Strand提供的CSS/XHTML基礎之設計樣板組選。

43.ThemesBase: 一個樣板組構系統，以流行的內容管理、部落格與論壇設計需求來配合。

44.Arcsin Design Templates: 22個免費的XTML與CSS樣板。

45.Snakeye 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.ThreeColumnLayouts: 終極 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.IntensiveStation: 收集所有最新的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.Inknoise: 填下所需要的格式後立刻自動彈出你所要的CSS頁碼。

81.Strange Banana:快速簡單地更新CSS樣板，直到得到你喜歡的款式的產生器，儲存起來然後嵌入到你的網頁開頭之處。

82.Nidahas:一個CSS基礎的表格製作產生器。

83.Maketemplate:一個PHP- HTML–CSS格式的兩欄段之樣板產生器。

84.IBDjohn: 3欄段設計的CSS樣板產生器。

85.TemplatR: 另一類的簡易型CSS樣板產生器。

86.PsycHo: 由你自己心理反應需要來設計你的網頁樣板。

87.Firdamatic: 不需應用表格的2或3欄設計產生器。

88.Wordpress Theme Generator: 建立客製化獨特Wordpress主題的線上應用產生器。

部落格題材與樣板

在一個主網站下設計個別的部落格是流行大勢所趨，所以應該思考個別區段想得到的樣板型式，在本節中就特別挑選一些最佳的開放源碼之Weblog樣板資源。

89.SmashingMagazine:你大概還沒見過的83種漂亮Wordpress 題材。

90.Kaushal Sheth: 相當優雅的WordPress主題設計。(圖五)

《圖五》

91.ErraticWisdom: 文字花樣的設計樣板。

92.Scribez: 10個最佳的Wordpress樣板。

93.pinkdesign: 免費的日誌/部落格樣板。

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樣板。