學網站製作、做網站、網站切版、網站架設、前端編程⋯⋯等很多不同的名稱。總之一切的一切都要從最基本的 HTML、CSS學習開始,基本上網站前端切版是用:HTML + CSS + Javascript,而他們其實各自都是不同的「語言」。看到這邊先別擔心,除了 javascript 之外,另外兩個都是比較「簡單」的程式語言。
學網站製作就像做菜一樣,你不需要學到會做滿漢全席才能當廚師,就算你只會「炒飯」,也可以開間小店鋪,專賣炒飯,也無不可,完全取決於你未來在什麼類型的公司工作,學習的過程你會開始學會「更多道菜」,會學著做網頁的各項「html 功能」,再將各項功能組合成一個「網頁」、最後將所有網頁統合成一個「網站」。
另外學前端的人,為了要跟設計更好的配合,或是自己做 sideproject 的時候,也可以處理一下圖片,建議也要學一些繪圖軟體的基礎操作方式。不用到精通,但至少要有概念,可以參考這篇:
另外如果可以加強一點美感,不管是對工作,還是自己弄好玩的專案,都會更有那麼一回事喔!!
前端網頁製作入門書籍
( 入門部分,基本上擇一研讀就好 )
學好跨平台網頁設計:HTML5、CSS3、JavaScript、jQuery與Bootstrap 4超完美特訓班(第二版)
網頁的入門書常常都是這樣,一次包了一堆教學在裡面,會從最基礎的 HTML、CSS 開始教你,後面開始越教越深。這本書是文淵閣工作室編輯的,通常這個工作室會比較注重實戰、實際案例應用,而這種學習方式也是我認為比較有用的,因此推薦。
最新 HTML5+CSS3 網頁程式設計(第二版)
這本書鎖定的重點是基礎中的重中之重,就是 HTML + CSS,我自己是比較偏好教學書不要包山包海,而是重點教學,其實學好 HTML +CSS 你就可以製作網站了,不蓋你大概所有網頁畫面你都可以製作了,但是要有程式互動的效果、以及更有效率的做網站就需要 javascript、boostrap 等,但重點還是在於先把 HTML5 + CSS3 學好。
施威銘研究室也是注重實際應用的團隊,我自己也看過好幾本他們的書,瀏覽了一下這本也是會將各個技巧獨立出來讓讀者練習,這樣會是有效的學習方式。
HTML&CSS:網站設計建置優化之道
因為我自己偏好 HTML 和 CSS 應該獨立開來學,之後再補充 Javasctipt 和 jQuery 的部分,這本滿有名的,評價也不錯。作者是外國人,有時感覺外國人在「寫書」教學這塊真的很厲害,總能把各個篇章分得很好,系統性的讓你學會網站程式。
設計師一定要學的 HTML5‧CSS3 網頁設計手冊:零基礎也能看得懂、學得會
最後這本是 2020 出版的新書,在網頁程式界、學習資源通常是越新越好,雖然做為網頁的基底的 HTML 和 CSS 只要是 HTML5 和 CSS3 版本之後的就沒問題。從書名就可以看出,作者感覺在編排上花了很多功夫,想讓門外漢也能輕易的入門。
建議購買前可以先預覽一下排版,可能有些人會喜歡,有些人也許不太喜歡這樣太多圖樣的編排,這全看每個人看書的習慣,我自己其實也有點不太習慣這樣的編排方式。可能我喜歡都是程式和文字,扎實的硬嗑吧。
圖形化製作界面:Dreamweaver 網頁編輯器
上述的網站製作都是用純文字的程式碼編輯器來撰寫,如果你想用圖形化的軟體來製作網頁就要讀 Adobe Dreamweaver 的教學書。如果全程式對你來說太過困難,其實 Dreamweaver 也是可以讓你過渡的一個方式,我一開始也是使用 Dreamweaver 在製作網頁。
一開始做得稀稀落落,也不太懂「原理」,因此很多時候有些狀況總無法解決,但自從我看了下面那本,「正確學會 Dreamweaver 的16堂課」後⋯⋯開始對整個網頁製作有觀念,做起來越來越順,建立起觀念後,我後來轉成使用全文字的程式碼開發也是很快就能轉換上手。重要的是正確觀念的建立。
正確學會 Dreamweaver CC 的16堂課
這本算是我的「啟蒙」書,當然我看的時候不是這個版本,但「施威銘研究室」的這系列書其實已經出了好幾版,這是最新版的。將網頁製作分成 16 課讓你藉著實作,一步一步就學會網頁製作了,當時的我真的很讚嘆這本書的編排,也讓我確實學會了網站製作。因此看到這本書還有在更新,我當然是要推薦的。
響應式網頁設計驚嘆號:Dreamweaver CC*╳Bootstrap 4╳JavaScript 範例大全
這本也是 Dreamweaver 的教學書,2019 年底才出版的,感覺也是編排得不錯,有將各種技巧獨立出來解釋,對於教學也是有它自己的一套方式,如果比較喜歡新書的可以考慮這本。
要讓網頁動起來:不可不會的 Javascript & jQuery
學會 HTML5 和 CSS3 後,你幾乎都以打造任何靜態的網頁「畫面」,但如果你要網頁介面更精彩,就要施一點魔法⋯⋯對初學成的新手來說,JQuery 就是網頁世界裡最精彩的「魔法」,重要的是⋯⋯它竟然並不難,只要看完一本書、噢!不⋯⋯半本!你就可以開始在你的網站上加入一些很酷的動態了!
JavaScript & JQuery:網站互動設計程式進化之道
跟上面 Html5 + CSS3 的優化之道為同作者的姊妹作,延續優良的編排和內容。
JavaScript & jQuery:The Missing Manual國際中文版(第三版)
這本是我自己讀過的,我讀的時候應該是初版,現在已經改版到第三版了。剛學完 Html + Css 的我就是靠這本書來掌握 jQuery 的,只要照著他的進度,輕鬆自然的,你也能學好 JQuery。
延伸學習:網頁切版的整體觀念補完
最完整跨平台網頁設計:HTML + CSS + JavaScript + jQuery + Bootstrap + Google Maps(全彩印刷)
這本書也是 2020 七月的新書!雖然也可歸類在入門書的選擇,但王者歸來系列向來都是以最完整、案例最多而著名,對於還沒基礎的新手來說,對於網頁全局應用還不熟悉的情況下,把每一個局部都學得太細再學下一個,很多時候效果並不好、且容易覺得太困難而半途而廢。反而是建議給已經對網頁有一定知識和大局觀後,再回頭把觀念補的更扎實。見博客來下方兩則 5 星的評論,也都是已經有基礎的人所給的好評。
最親切的SEO入門教室:關鍵字編輯x內容行銷x網站分析
身為前端你一定要懂點 SEO,雖然都是入門的 SEO 概念,但是非常適合經營網站的新手,很多概念都可以先建立,內容也有涵蓋到 WordPress 網站的 SEO 部分,除了 SEO 之外其實更可以說是本全面的初心者網站經營策略。
在這裡,所有的學習內容都是免費的。
如果這讓你感到滿意,一杯咖啡能讓我們走得更遠。
嗨!歡迎來到造九 😊 打聲招呼吧!