我是如何建立網站的

　　我在學習程式碼上遇到過的最大問題之一就是把我的知識翻譯成物理上的東西。這麼多年，我看到很多開發者問“我已經學會了HTML/CSS，接下來呢？”。答案往往是：

“做些東西”

　　我是做了一些東西。這是個人網站/作品集，我想帶你看看我是如何完成的。儘管我的目標是向其他人演示他們怎樣才能建立網站，這也是記錄我的過程和進步的絕佳方式。

　　找個想法

　　你的網站不需要有什麼特別，它也不需要是你的最愛、發tweet、頂拳（fist bump）或每天1000個訪問。它只需要成為你願意享受其中的東西。

　　我確信沒人坐下來就能馬上魔法般地產生令人驚奇的想法。我的大部分想法出現時，我通常在睡覺或洗澡。我可以用一天時間來考慮讓人激動的東西，只是一兩週內不會有另一個想法。

　　不要試著強迫自己得到想法，這行不通，還會導致大量的沮喪情緒。從簡單開始，為自己而做。我經常看到世界上的某些東東，對我自己說“嗯，我想，我能夠建立屬於我自己的、更加適合我的版本”，或“我需要一個工具來完成這項單調的任務，因此我儘量自己開發它”。沒錯，這就是起步的偉大地方。

　　我有一份長長的想法列表，它們都不是有獎勵的、但都讓我感興趣。如果你有了想法，記下來，當你有時間去開發的時候，你就能看到你自己產生的所有好玩的想法了。

　　規劃想法

　　你只需一支筆和一張紙。在開始我的作品集之前，我草擬出基本要點，並就我樂於使用的顏色和字型做了註解。

　　最終完成的作品與我的草圖看起來非常不同，不過這是一個偉大的起點。我也規劃了網站的很多版本，因此不要擔心最終產品與你開始畫的草圖有什麼不同。

　　PhotoShop做原型

　　畫好想法的草圖後，我開啟PhotoShop佈局網站。有的人在寫程式碼之前用PhotoShop進行設計，有的人喜歡直接寫程式碼然後在瀏覽器裡設計。選擇你喜歡的方式。

　　配置專案

　　我喜歡把所有想法放在桌面的同一個資料夾裡。我在專案資料夾裡新建一個資料夾，在裡面做如下配置：

　　index.html位於目錄頂層（根目錄）。其它重要的檔案放在“assets”資料夾。為了保持直觀的結構，CSS、JavaScript和圖片單獨放在的另外資料夾。

　　設計HTML

　　沒有HMTL就沒有網站。它包含了出現在網站上的所有資訊，而CSS只是讓它們看著舒服些。

　　我開始設計網站每一部分的容器：header，主內容和about頁。在定下來之前，我不是十分精確地知道將呈現什麼內容，因此做了一些修改。沒事，確保新增一些模擬內容，當應用CSS時，你就能看到它的樣子了。

　　選擇字型和顏色

　　我在草案裡寫有我想在專案中使用的顏色。大部分來自於我的twitter主頁，然後是要匹配avatar（網站header裡的主要圖片）的顏色。

　　有一些優秀的工具，用來找到和建立顏色，比如Colour和Coolors。我打算站點簡潔、乾淨，只用一兩種強調色。

　　我還從Google Fonts找了兩種字型。它們可以免費使用，且易於包含在專案裡。我想給body裡的文字和副標題應用清晰的sans-serif字型Open Sans，像大塊引用和“About”頭部等較大文字，我用Roboto Slab字型。

　　我喜歡纖細的字型，但是font-weight（鮮明度）太低的字型將不利於文字閱讀，這是非常重要的。也不要使用太多字型，這會讓人抓狂，也會增加網站載入的時間。你想讓讀者吸收的是你要表達的東西，而不是在單獨一個段落裡使用的15種字型，如果他們不想粗暴地關掉網頁，就要決定是否等待這些字型載入。

　　用CSS做樣式

　　我首先把normalize.css新增到CSS資料夾，在HTML裡做了連結。

　　在一種瀏覽器（比如Chrome）裡開發網站絕不意味著在另一種瀏覽器（比如IE）裡有著同樣的表現。normalize.css就是為了儘可能多地通過提供一種“reset”來修復這種差異。它讓網站在各種瀏覽器裡良好地呈現，我相信，開發一個跨瀏覽器相容的網站是至關重要的。

　　我首先從最重要的樣式開始，像body和header的字型和字型大小。然後深入頁面，不用在頁面之間來回多次就能夠定義好每個元素的樣式。

　　可訪問性

　　在你開發東西的時候，你應該時常為你的使用者考慮。世界上的任何app、產品、印刷品、信件、海報、網站、工作臺、商店以及其它東西，都被儘可能多的人使用。想理解網站為什麼需要可訪問性，請訪問Laura Kalbag的“Why Bother with Accessibility?”。

　　讓我的網站具有可訪問性是相當簡單的。我在必要的地方新增了ARIA landmark role【注1】，給螢幕閱讀器（通常殘障人士使用）指示內容型別。我確保所有的連結都可以用鍵盤訪問，並用CSS作了突出。

　　接下來是網頁底部的社會化圖示了，我在文字里指示了每種圖示連結到了什麼網站。我在瀏覽器裡作了隱藏，但是確保可以螢幕閱讀器使用者是可見的。

　　一些人誇獎我在做網站的時候考慮了可訪問性。雖然這讓我感到自豪，但是，如果我因為給了它本應該得到的關注而被誇獎的話，只能說明可訪問性還沒有得到足夠考慮。如果你需要製作可訪問性網站的一些優秀資源，請訪問A11Y Project。

　　測試

　　正如剛才提到的，一個網站在每個瀏覽器和裝置上表現一樣是非常少見的。測試是比較耗時的，甚至取決於你手頭的資源，但是它相當重要。當網站準備讓全世界看到時，馬上測試，確保你找不到網站故障。

　　跨裝置和瀏覽器測試為什麼是重要的，如果你想了解，下面列出了過去24小時訪問我網站的使用者的資料。來自於Safari（26%）、Android（3%）、IE（2%）、Chrome（39%）、Opera（2%）。讓不同的使用者在你的網站有一個好的體驗，是比較重要的，因此在條件允許時，要在儘可能多的不同環境下測試。

　　我使用下面瀏覽器的最新版本測試網站：Chrome、Firefox、Opera、Safari和IE。前四個瀏覽器很容易就能下載到。如果你不在Windows上，用IE測試就有點兒難了。藉助Virtual Box在Mac上安裝一個Windows版本，就能用IE測試了。微軟自己做了一個網站，向你展示瞭如何零成本地測試：Modern IE。

　　有一些工具，能夠對你的網站在各種瀏覽器和裝置上的展示進行截圖併傳送給你。我問一些朋友，他們用什麼工具測試，你可以在這裡找到答案。Modern IE也能在使用廣泛的瀏覽器/裝置上截圖，免費的。

　　如果你對那些可以訪問網路的一堆裝置沒有限制，這是聰明的，但是很可能你不是這樣的。我有iPad、Samsung Galaxy S3和老款的iPod Touch，難以覆蓋所有種類的裝置。

　　如果你是Mac，就能用Xcode下載iOS模擬器，基於一些iPhone和iPad版本進行測試。有個初級方法，調整瀏覽器大小到移動裝置寬度，但是，這不是真正靠譜的可選方法。

　　我還測試了網站在可閱讀性、良好地對比【注2】、校驗和可訪問性。

　　關於測試的最後一點是：你應該隨著開發進度去測試網站。這樣做的話，在專案結束、或讓人沮喪、或潛在地讓你變得更糟之前，你就能修復好bug。我有過一次經歷，開發人員在專案結束之前不想測試他們的產品。對我而言，那時候長達數小時的痛苦的重複測試，而他們在儘量修復我報告給他們的一堆堆bug。簡直一團糟，如果他們自始至終都測試網站的話，將平靜很多。

　　分享，讓朋友看看

　　我已經建立了一個網站，從中學到了很多東西。儘管如此，我知道還有一些我能夠做得更好的地方。我給你分享我的程式碼，不只是希望你能從中學習，而且還能指出我的錯誤！

　　你可以在這裡找到我個人網站的程式碼，在這裡檢視最終的網站。如果你找到了一些有問題或值得提高的地方，請告訴我。

• 注1：網頁親和力（又稱網路無障礙、網路可達性或網路可用性）旨於確保任何人都有辦法獲取放在網頁上的媒體內容——無論人們是否遭遇了身體、心理或技術上的障礙，都不會妨礙人們接收作者所釋出的資訊。也就是讓網上的內容“易於親近”，易於獲取、利用。請參考http://en.wikipedia.org/wiki/WAI-ARIA和http://zh.wikipedia.org/wiki/%E7%B6%B2%E9%A0%81%E8%A6%AA%E5%92%8C%E5%8A%9B
• 注2：Spur是一個由設計諮詢公司ZURB​​推出的簡單有趣的網頁設計web小應用。通過快速擷取網頁內容，從而幫助企業設計出更好的網站以及網路相關服務和產品。http://www.techweb.com.cn/newsite/2011-09-19/1095284.shtml

　　原文：https://ccharlottespencer.wordpress.com/2014/11/03/how-i-built-a-website/ 翻譯：labazhou