寫在前面
前一段時間突然心血來潮，想建立一個自己的個人網頁，打造自己的互聯網明信片，於是Google查了許多教程和博客分析，但是無奈的是沒有一個排名靠前的搜索結果能夠詳實地介紹給新手該如何一步步建立網站。是的，或者流於講道理的層次說你該看些書看些網頁模板學學HTML，或者整體流程給了但是說得很模糊，或者是指在某一個節點上講得比較細但是其他方面一概不關心。
在這個信息爆炸的時代，要辦成什麼事情當然是求人不如求己，渴望通過一次查詢，一個答案來圓滿地解決一個複雜的問題是不實際的。
但是，在這裏，我想說，在我花了一週的時間，逐步建立好一個簡單的個人主頁後，我不想一個人獨享這份經驗而敝帚自珍，也不願意籠統地說點沒營養的東西去自我炫耀。我想讓更多的人能夠順利地、一次性地建立好自己的網頁（如果是網站的話會複雜一些，但是如果你想學，歡迎和我交流，交流方式暫時保密，最後會有彩蛋）。
是的，不需要在茫茫網頁中再去搜索那些多餘的內容和囉嗦沒有營養的廢話，我希望憑藉這篇博客的內容，就可以好好地幫到大家，哪怕你是一個完全不懂網頁開發，完全不懂HTML語言的新手。
我希望自己的這種情感不是自負，如果你也願意相信我，請跟我一起踏上這趟征服之旅吧。
讓我們，從零開始建設個人網頁。
Python相關
這一部分內容不屬於正文步驟，沒有興趣的讀者可以跳過。
之所以要提一下Python，是因爲之前我在閱讀學習《Head First Python》這本書的時候，發現有一章的內容是網頁開發（Web Design）。通過編寫簡單的Python程序，就可以實現簡單的網頁。有興趣的讀者可以去下載《Head First Python》的電子書來閱讀，書中所用的源代碼都可以在它提供的資源網站上下載哦！
書籍下載鏈接：點擊轉到下載頁
源代碼下載鏈接：點擊轉到資源下載頁
但是遺憾的是，本篇博客內容將會採用最簡單也最世故的方法帶領大家建立網頁，所以期待用Python編程建網頁的諸位可能要失望了。
總而言之，Head First系列的書我都非常喜歡。書中的內容簡潔而不簡單，豐富而不繁雜，是非常適合初學者閱讀的編程、設計和開發的書籍。
網頁設計
· 材料準備
就如同做一道菜，搭一個房子一樣，我們必須有建設的原材料，才能開始建設的步驟。
如果你對網頁和網頁管理有一定的概念，相信你應該知道互聯網中的網頁是以何種形式存在，又以何種形式展示資源的。
其實網頁與我們自己PC端的GUI並沒有什麼區別，網頁上的文件與本機文件也並沒有多大的區別。只不過在訪問網頁的時候，我們看到的內容，它們是存儲在遠程的某個計算機（或曰服務器主機）上的。
在建立網頁之前，我們需要的材料只有兩種：邏輯展示頁面和文件存儲空間。
當然，以上兩個名詞都是我個人的“誤導性”發明創造，但是這是一個比較貼切的總結。
什麼是邏輯展示頁面呢？就是你打算建的這個網頁應該是在互聯網上可以搜索到、訪問到的。它是一個或多個從屬於某個中心地址的頁面，也就是域名。相信讀者們對域名這個概念都並不陌生，比如www.baidu.com就是一家廣告公司的域名，通常我們習慣性地去掉萬維網www頂級域名，稱呼後面的xxx.com或xxx.net爲某個對象的域名。
所以，如果你要建立一個網頁，首先你得有一個可以訪問到的域名。所以，這時候，問題來了？你怎麼纔能有一個自己的域名呢？
很簡單，買！但是淘寶上是買不到的哦。世界各地有許多的域名服務商和代理，你可以在他們的網站上登記並通過支付寶等方式購買自己喜歡的域名（如果該域名未被使用的話）。
我個人是在NameSilo這個服務商這裏購買的域名（非廣告，大家可以在自己喜歡的域名服務商那裏購買）。但是按照慣例，不推薦大家在國內的服務商處購買域名，因爲買了也可能不是你的。詳情請跳轉至網頁新手教程：建立網站的全套流程查看，哦對了，記得跳轉回來哦。
接下來的例子，我會以圖文結合的方式教大家如何查找可用域名，如何購買域名。
以NameSilo爲例，該網站的主頁是https://www.namesilo.com。
我現在想選一個自己喜歡的域名（我們當然是有選擇權的），由於是要建立個人網頁，我覺得選用自己名字（黃開心-手動滑稽）的拼音做域名更有辨識度，於是我輸入www.huangkaixin.com（.net/.com/.cn的區別詳情可谷歌，後綴不影響我們建設個人網頁，所以此文中不細講）來查詢，如下圖所示：
查詢之後的結果如下圖所示：
哎呀，這個域名已經被登記（Registered）了，看來是有跟我名字差不多的老兄搶先一步買走了這個域名。
Registered後面顯示的是不同後綴名稱的價格，比如.net和.co價格相差一倍多，這當然有各種各樣的原因了。最大的發現是，以huangkaixin作爲域名的只有.com後綴是被登記過的哦。綠色表示.net是可用的。咦，既然如此，何不順勢而爲買一個huangkaixin.net域名呢？9.99美刀摺合人民幣不到80元，還是不錯的。
於是我們選擇好域名後（如果你覺得不喜歡這個，當然可以繼續查詢任意感興趣的域名，直到搜索到一個沒被登記過而你又看得上的爲止，注意頁面右下角紅色框框是有推薦域名的哦），就可以選中.NET下的方框，再點擊“REGISTER CHECKED DOMAINS”，就進入了一個如圖所示的頁面：
要注意，當你選中某個域名商品時，必須要以登錄狀態進入該網站，將商品放入購物車纔可以購買（就像淘寶一樣），比如我是以KaixinHuang賬號登錄的。
這裏插入一個重要提醒：請在閱讀完整個本節內容後再開始購買域名（及服務器主機），否則可能會造成一些你覺得不必要的麻煩。
放入購物車後，點擊CONTINUE（配置什麼的可以先不用管，不影響網頁設計），進入下圖頁面，準備付款：
根據我國國情，相信大多數人會選擇支付寶的。付款流程很簡單，這裏就不介紹了（花錢誰不會啊，哈哈）。值得注意的是，域名不是一次購買終生享用的，要按年付費纔可以。也就是說，如果一年後不續費，這個域名就又屬於非登記了，可以再次被別人購買。
於是，你現在有了一個自己的域名，針對本文的例子，我用的是huangkaixin.net。訪問的時候最好使用全稱：http://www.huangkaixin.net（該頁面應該無法訪問）。
然後有了一個域名我們是不是就可以開始填充我們的個人網頁內容了呢？
錯，就像是買車既要有車，也要有車牌號才行。域名只是一個車牌號，要真正建設一個網頁，我們還需要一輛車——服務器主機，也就是上文中提到的文件存儲空間。
當然了，這個例子不太嚴謹。更確切地說，域名是我們網頁的一個標記，是一個名片，而我們網頁中真正展示的內容必須存儲在某個地方，這個地方應該足夠安全，全年無休，我們通常稱之爲服務器（或者主機，或者服務器主機）。但其實，服務器也可能會因爲地震火災外星人入侵等不可抗力而發生故障，在某一段時間內癱瘓。
但比起我們的個人電腦來說，無論是容量上還是安全性、可靠性，服務器主機都更加強大。然而，你可以把自己的PC打造成一個服務器，這是可行的，不過涉及到非常深厚的編程知識，事實上我沒有對這方面深入研究，目前似乎也沒這個必要。
我是在http://www.gegehost.com/這個網站上購買的服務器主機，價格也不高，600M空間大概100元一年（新手的話不需要太大的空間容量，這個空間容量就是你需要展示在網頁中的最大文件總量大小）。
購買服務器的流程和域名差不多，這裏簡單用幾個圖走一遍吧：
如果想在同一個服務商處購買域名也是可以的哦，比如申請註冊一個新的域名如下圖：
同理，你需要有一個該網站的賬號，才能正常的進行購物和管理。註冊賬號是很簡單的啦~
值得強調的是，並且如果你的域名和主機都是在它這裏購買的話，會自動幫你進行地址解析，從而省去不必要的麻煩（其他許多網站也提供類似的這樣的服務）。
你可能想問，什麼是地址解析？爲什麼要地址解析？如果我的域名和服務器不是在同一個地方買的怎麼解析？
這些問題我在建設網頁的過程中也都思索過、查詢過、甚至煩惱過。放心，下一節內容將會詳細地解答這些疑問。
地址解析：讓文件顯示到你的頁面
所謂地址解析，也就是DNS解析，目的是將域名指向一個固定的IP地址，以實現使得對域名的訪問轉換成對IP地址的訪問。是的，域名本身不包含文件，自然也就沒有可以展示的內容，只有將域名綁定到一個服務器主機的IP地址上，才能將服務器空間的文件、程序顯示在個人網頁中，使對域名的訪問是成功的。
當你購買一個服務器主機後，一定會收到一封類似這樣的郵件，如下圖所示：
比如你的域名信息（在購買的時候需要使用域名，但這時候並沒有綁定），付款信息，主機信息，FTP信息等等。這些信息都有什麼用呢？
服務器IP信息告訴我們，必須將域名指向這個IP地址，本例中就是198.252.107.174。
添加A記錄意思就是，必須將www.kaixinhuang.com（好吧，這是我真實的個人網頁域名）到IP的映射寫成一個記錄，添加到某個信息頁中（待會會解釋添加到哪裏）。
FTP信息告訴我們，可以通過FTP的方式將本地文件上傳到主機空間中，而且主域名的話還必須將文件放到public_html這個目錄中。
我之前申請到服務器主機以後，就以爲它自動進行地址解析了，然後訪問我的個人主頁時，發現是這個效果，如下圖所示：
不毛之地，啥都沒有。我當時感覺整個人都不好了。
但功夫不負有心人，在查遍了谷歌的幾十條搜索結果後，我才知道自己少幹了一件地址解析的事，也知道了該在哪裏做地址解析。
爲了不讓大家重複性地做錯誤的工作，我就簡單地先把結論放在這裏了。在你購買域名的服務商那裏做地址解析，對於本文的案例而言也就是NameSilo，如下圖所示：
首先找到這個頁面（因爲你已經有了一個域名，因此可以點擊自己購買的域名的Domain Manager頁），然後選中域名，點擊紅色框框圍住的圖標（詳細的域名管理頁面），進入如下頁面：
在這個頁面，我們可以添加A（Address）記錄和CNAME記錄（關於A記錄和CNAME的解讀可谷歌查詢）。紅色框圍住的部分是我添加的一條核心A記錄，是將kaixinhuang.com指向我的主機IP。注意，因爲我的網站是配置好了，所以纔有這個記錄。一開始應該是沒有的，需要手動添加，添加過程如下所示：
注意後面會出現第三方的一個服務標註，說明域名服務商和主機服務商不是同一家。
在這裏說一個令我困擾了很久的問題，CNAME某種意義上指的是別名，比如我插入一個CNAME記錄如下圖所示，那麼我就不能再添加以www.kaixinhuang.com爲域名類型的A記錄，而是應該用kaixinhuang.com的A記錄。CNAME是將對www.kaixinhuang.com的訪問當成是對kaixinhuang.com的訪問（你還以設置成是對百度主頁，谷歌主頁的訪問哦，現在你明白爲什麼很多時候訪問不同的網站會轉向同一個網頁了吧）
對我們個人主頁來講，CNAME一般沒什麼用，不如刪掉。但是我偏偏就刪不掉，所以就採用了上述的曲線救國的方式。
好了，到這裏，地址解析就完成了。也即是說，我們的域名已經和主機空間綁定在一起了。接下來，只需要上傳文件，到正確的位置（比如public_html）就可以打造我們自己的網頁啦！
學習模板
俗話說好的開始是成功的一半，既然已經有了原材料（域名和主機），也磨好了刀（地址解析），接下來就是毫無後顧之憂地做網頁內容了。
一般問該如何做網頁的時候？許多回答都會泛泛地說，去學HTML啦，CSS啦，網頁設計軟件（比如PS，DreamWeaver，WordPress）啦。然後就沒有然後了。
但最關鍵的問題是，怎麼學啊？從哪開始學啊？是不是抱着一本書從頭讀到尾呢？當然不是，既然是從零開始，又要快速上手，我們就必須走點野路子。從“偷別人的設計”開始打造自己的網頁。當然了，這個“偷”不是盜版侵權的意思，而是借鑑整合，先從模板開始學起，而不是從在網頁上顯示一個“hello world”開始（雖然我們的題目是“從零”，但如果要從hello world開始做起，就得開一個HTML，CSS專門的培訓教程了吧）。
好的網頁模板網站可以直接通過谷歌查詢，比如我直接搜到的一家就是這個網站：網頁模板王，裏面的網頁模板可以免費下載學習和使用的。你可以下載一些模板，預覽大致的結構，挑選一個自己喜歡的風格，變更其中的一些數據，從而變成自己需要的內容。
該網站提供了許多不同類型的個人網頁模板風格，如下圖所示：
但一般來說，個人網頁對於初學者來說，肯定不是做交易用的，一般可以先設計爲形象展示或者是簡歷介紹。比如我們先隨便下載一個“個人簡歷詳細介紹響應式網頁”，也就是上圖第二排第一個模板。
下載後打開文件以後有這些子文件及文件夾如下圖所示：
其中inde.html是核心，它是對其他文件夾中的內容和程序進行整合的一段HTML代碼。我們可以使用瀏覽器將其打開，看看它顯示的主頁設計是什麼樣的。打開後如下圖所示：
也可以通過文本文檔或者Sublime Text等應用直接將其打開，顯示的是代碼，可修改。但是要讀懂它的內容需要相當部分的HTML語言基礎（雖然我個人覺得HTML語句結構其實很清晰，並不難讀）。所以我們可以選擇一個簡單一些的路線，比如使用人性化的GUI軟件Dreamweaver打開index.html修改。
Dreamweaver下載鏈接，點擊進入
使用Dreamweaver後打開，顯示如下圖所示：
使用ctrl+（+/-）可以放大或者縮小畫面：
Dreamweaver的方便之處就在於可以像在word中修改字詞那樣改動html文件的內容，所以你可以將名字、出生日期、地址等信息代換成自己的，也可以通過複製粘貼手段新增信息哦。
當然啦，Dreamweaver也是可以查看源代碼的，只要點擊代碼模式或者拆分模式（直接打開的是設計模式哦）即可：
爲了簡單，我們其實只需要在設計模式下修改必要的基本文字信息就可以完成個人主頁的填充啦，但是像圖片鏈接，網頁鏈接這樣的功能似乎還是需要改一改代碼的。大家不要怕，比如說，我想將主頁上的個人圖像改爲自己的頭像，該怎麼做呢？
很簡單哦，只要在圖片上右鍵單擊，出現如下圖所示的頁面：
改變一下圖片源文件位置，比如將自己的照片放入到html/images文件夾中選中，即可完成替換過程。
另一種是在代碼區改變圖片鏈接，圖片鏈接的代碼段是非常有特點的，如下圖紅框所示：
比如你自己放到images文件夾中的照片名叫myself.png的話，就將紅框中的代碼段改成：
<img src="images/myself.png" atl=""/>利用代碼，我們甚至還可以將圖片鏈接到某個網站哦，使得訪問者點擊圖片就可以轉到特定的網址。
只需要將紅框中的代碼段更改爲如下形式就可以哦：
<a href="http://www.???.com"><img src="images/myself.png" atl=""/>至於更多的修改內容可以根據自己的需求在Dreamweaver中做相應的修改，在設計模式下如果解決不了，最好進入代碼模式修改。記住，代碼是有規律的，圖片也好，段落佈局也好，要耐心地去發現規律哦！
上傳文件
一般來說，我們不會在所有內容都做好後才上傳網頁文件，而是改一部分，就上傳一部分，看看效果如何。
所謂上傳就是將自己本地的網頁文件和程序發送至主機文件空間，上傳的方式分很多種，常用的是FTP上傳。Windows系統雖然自帶了FTP文件傳輸功能，不過這裏推薦大家使用一款我覺得還不錯的軟件，叫FileZilla（FileZilla下載網站，點擊進入）。使用界面如下圖所示：
還記得自己的主機地址，用戶名和密碼嗎？這個信息在剛纔介紹的那封由服務器服務商發給你的郵件裏哦：
就是“默認的FTP信息”這一段哦！
點擊“快速連接”，只要輸入的賬號信息正確無誤，就可以成功顯示如下圖所示的信息：
右邊那一欄就是你的主機空間裏的文件，左邊這一欄是你的本地文件。記住，要像郵件裏說得那樣，把你的文件（圖片/字體/佈局）和程序(index.html)都上傳到public_html裏才能成功更改網頁內容。上傳的方法很簡單，採用拖曳（使用鼠標移動）上傳或者點開右欄的public_html文件夾再單擊本地文件依次上傳。上傳成功後你的文件應該會顯示在public_html文件夾中。
大功告成
終於到了這個激動人心的時刻。不錯，上傳完成之後就要看看我們自己的網頁長相如何了。如果哪裏有瑕疵還是要微調一番的，那我就以我的個人網頁爲示範，截圖給大家看看好啦：
有興趣的筒子們可以猜一猜後面的谷歌地圖是怎麼改成自己想要的位置的哦！
因爲我的網頁屬於多次微調後還算比較過得去的成品，但是在初次利用模板修飾增添內容時，要記得多上傳比對各項功能是否無誤、圖片位置是否正確、文字排版是否美觀等等······
這樣一來，我們個人網頁設計的第一課也就結束啦！相信大家現在有動力也有能力做一個初步的屬於自己的個人主頁啦！
總結
本博客內容較多，簡單回顧一下做網頁的重點：
第一，要有兩個材料，域名和主機；
第二，要做域名到主機IP的地址解析（如果兩者不是在同一服務商處購買的話）；
第三，要用一些基本的網頁設計軟件（比如親民的Dreamweaver）；
第四，使用FTP上傳內容到主機空間；
第五，查看網頁，調修校正。
雖然這只是網頁設計萬水千山的第一步，卻也是彌足珍貴很不容易的第一步。擁有一個個人網頁/網站，其實不是那麼難的事情，它不神祕也不高貴，它可以屬於我們每個人。在此將我淺薄的經驗分享給有需要的人，希望能夠幫得上忙。
感謝閱讀，歡迎轉載！
PS：
歡迎大家訪問我的個人主頁開心黃,點擊訪問。
如果我有哪裏沒說清楚的，歡迎發郵件給我（我的個人網頁上有詳細的聯繫方式），我每天會定期回覆的。
希望能夠與諸位一同進步和成長！