大家好！
今天要來分享的是一些作為網頁架設初學者收藏的一些實用教學&實用參考資源！
不過這條學習之路，主要還是給最基本的網頁架設者，也就是基本的個人網誌、作品網站等等需求，對於需要複雜的資料庫等網站設計，就比較不適用了。
▲ 2020/10/13 更新內容以綠色字體標示，主要為GitHub的repository隱私更新。
一、搞懂網頁到底是什麼構成的
Web入門： https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web
這個「Web入門」的文章，對於一個初學者來說，是非常深入淺出的說明。
從最基本的概念，到一些簡易的樣式(例如：文字、邊框、圖片、超連結鍵)，以及基本功能實際操作(例如：按鈕)。
如果沒有網頁基礎，甚至沒有任何程式編寫經驗的人，建議一定要耐著性子一一完成這篇文章的教學！如果這關過不了，後面也會很困難的！
補充一點，這網站是由英文翻譯過來的，到後面就變成英文啦！不過英文的部分不難，基本上不會有問題，如果有不清楚，可再配合其他網站資源。
二、選擇適合的編輯環境
1. 直接使用瀏覽器開啟HTML
在前一部份的教學網站中，你應該是直接在電腦裡面建立一個資料夾，並新增.html、.js、.css檔案。
其中一種編輯環境就是這樣，直接在檔案總管中開啟這些檔案編寫。
但是這裡就出現一個問題。如果沒有適合的文字編輯器，使用記事本，在編寫的時候會很辛苦，沒有特殊的顏色標記、自動縮排、補齊指令。
這邊有兩個建議，第一是安裝Notepad++，第二是直接用方法3提到的Visual Studio IDE。
2. 線上CodePen
CodePen首頁： https://codepen.io/
使用CodePen就可以在線上編寫HTML、CSS、JavaScript。
創建一個Pen，可以把三種不同檔案格式的程式碼分別貼進去，你只要在其中一個地方做修改，CodePen立刻就會給出最新的網頁狀態，對於修改來說很方便，可以立刻看到變化。
註冊後，也可以儲存你所寫的網頁，以便日後開啟編輯。
3. Visual Studio IDE
Visual Studio官網： https://visualstudio.microsoft.com/
Visual Studio是非常有名也非常好用的IDE，可以到官網下載試用版或是購買其他版本。
許多校園也有開放校園軟體免費下載使用，若有學生身分，不妨看看學校是否有開放，趁畢業前先把好用的軟體載下來！
Visual Studio的環境就很專業，應有的功能也很齊全，就簡易的網頁架設來說絕對足夠。
若使用Visual Studio，就簡易網頁而言，不需用「建立專案」的網頁架構。可以直接把檔案總管中的HTML拖曳到Visual Studio中，直接編輯修改，與普通的文字編輯器相同。
三、選擇適合的模板
建立個人網頁的第一步，就是要有好的視覺架構。在第一步的「Web入門」中，使用的網頁視覺架構都是完全自己寫的HTML。
然而要自己從頭設計HTML，不只要安排好比例結構、調色、風格等，如果要有更進一步的方格、拉桿等特殊小工具，還要另外去搜尋與學習新的HTML寫法。
因此最簡單也最快速的方法，就是去下載免費的模板。以他人設計好的模板為基礎，加以修改成自己需要的版面，也可以從他人的HTML中直接複製特殊小工具的寫法。
Templatemo免費模板下載： https://templatemo.com/page/1
Templatemo有六百種不同的模板可以選擇，可以選擇視覺化架構與想要架設的網頁較相近的，畢竟圖片修改很快，架構修改很花時間，因此選擇相似架構的可以節省功夫。
下載後可以取得架設好的資料夾架構(css, js, img等資料夾路徑都有了)，你只要針對HTML進行修改，輔以新增CSS的樣式，基本上就可以做出想要的網頁了！
Templatemo下載下來的模板有個優點，就是架構乾淨、程式碼也簡潔易懂，對於下載後的閱讀、以及後續修改來說，是非常好的。
下載模板後，若是使用編輯環境1「直接使用瀏覽器開啟HTML」，那只要找到「index.html」這個檔案，點擊開啟，即可進入網頁。
若是使用編輯環境2「線上CodePen」，那就必須先打開下載的HTML、CSS、JS檔案(可用記事本或NotePad++)，全選複製，貼上到CodePen。
若是使用編輯環境3「Visual Studio IDE」，那就要把有用到的HTML、CSS、JS檔案拖曳到Visual Studio中，再點擊開啟「index.html」這個檔案。在Visual Studio中修改程式碼後，瀏覽器那邊重新整理，即可顯示更動。
四、替網頁新增更多東西
有了基本架構，就可以新增更多的按鈕、連結、特效、甚至分頁頁面(例如：從「首頁」進入「自我介紹」、從「作品集」進入「攝影作品類」)。
以下這邊分享幾個實用的素材網頁，可以複製程式碼，加以修改成自己需要的樣子，再植入自己的網頁程式碼中。
1. HTML reference： https://htmlreference.io/
可以當成HTML手冊或百科全書的東西。
2. CSS reference： https://cssreference.io/
可以當成CSS手冊或百科全書的東西。
3. JacaScripe reference： https://www.w3schools.com/jsref/jsref_reference.asp
可以當成JacaScripe手冊或百科全書的東西。
4. HTML DOM事件(中文)： http://www.runoob.com/jsref/dom-obj-event.html
如何擷取使用者在網頁上的動作(例如：滑鼠點擊、滑鼠鬆開、滑鼠移動到某物上、滑鼠離開某物)
5. 阿盛網站網頁素材(中文)： http://sheng.phy.nknu.edu.tw/shengwjs08MY/wjs-1307.htm
豐富多樣網頁特效素材，有許多實用小工具(例如：瀏覽人次、跑馬燈、滑鼠跟屁蟲)，可以直接複製程式碼並加以修改。
五、發布網站
在自己的電腦裡打了那麼多程式碼，最後總是想趕快發布，變成一個網址，可以給人瀏覽。
在第一步的「Web入門」中有提到網域通常是要購買的。如果你想要發布一個網站，卻不想花錢，這裡推薦你一個好方法。
這兩個網站都有詳細的教學，如何申請到免費網域，甚至第一個GitHub只要註冊帳號就可以快速發表了！
但是最後發表的網站還是使用這些機構的網域，也就是如果你帳號叫做「star_fall22」，你的網站名稱叫做「MyWebsite」，那最後的網址就會是「https://star_fall22.github.io/MyWebsite/」。
特別要注意的是，第一個「GitHub網域」的教學還是有些複雜。以下提供一個使用GitHub更快速，也最低技術要求的發布步驟。
(1) 建立GitHub帳號。官網： https://github.com/
(2) 點右上角頭貼旁的「+」符號，選擇「New Repository」。
(3) Repository name輸入你的網站名稱，這個名稱會出現在最終發布的網址中。隱私設定必須為「Public」，要設定「Private」必須升級付費帳號。其餘選項保留預設狀態即可。
▲ 更新：所有帳號皆可將repository設定為「Private」不公開，但若要發布成網站，仍需設定為「Public」公開。
(4) 建立後點選「Settings」。
(5) 在「GitHub Pages」區塊中點選「Choose a theme」。
(6) 點選「Select theme」。無論選擇何種主題，都會被覆蓋，所以這邊的選擇並沒有影響，直接點選Select theme即可。
(7) 完成後會開啟「index.md」這個檔案，請把檔案名稱改成「index.html」，並把內容改成你的網頁的「index.html」內容。在GitHub中，每個檔案修改後都要按「Commit changes」。
(8) 這個時候你就可以進入你的網頁了。網址是「https://」+「你的GitHub帳號」+「.github.io/」+「你的網站名稱」。
(9) 進入你的網站後可能發現所有的圖片素材都不見了，那是因為你尚未上傳你存在電腦裡的圖片與素材檔案。接下來只要回到網頁的repository，依照檔案路徑上傳所有電腦資料夾內的檔案(CSS, JS, 圖檔, 字型檔案......等)。關於如何在GitHub建立不同檔案路徑與資料夾，可參考：https://segmentfault.com/q/1010000008031288 。
(10) 未來只要修改或上傳檔案就可以更新網站，但更新都需要過幾秒甚至一兩分鐘的時間，你的網站才會更新，所以看到重新整理後沒有變化，請先耐心等待。
▲ 更新：日後網頁維護時，可於setting中將隱私設定為「Private」，維護完成後再開啟為「Public」並重複步驟(4)至(6)。
* 上述步驟較為複雜，之後可能開另外一篇文章說明~
以上，大概就是一些收藏的資源和網站整理，也大致說明簡易網站架構流程。
還不是很專業，如有誤歡迎指正。有其他更豐富的資源，也歡迎補充分享。謝謝大家看到這裡~~
留言列表
程式語言 (1)
