學習架設網站 HTML5 CSS Javascript 推薦書單

網站切版 前端 學習書籍推薦

學網站製作、做網站網站切版網站架設前端編程⋯⋯等很多不同的名稱。總之一切的一切都要從最基本的 HTML、CSS學習開始,基本上網站前端切版是用:HTML + CSS + Javascript,而他們其實各自都是不同的「語言」。看到這邊先別擔心,除了 javascript 之外,另外兩個都是比較「簡單」的程式語言

 

學網站製作就像做菜一樣,你不需要學到會做滿漢全席才能當廚師,就算你只會「炒飯」,也可以開間小店鋪,專賣炒飯,也無不可,完全取決於你未來在什麼類型的公司工作,學習的過程你會開始學會「更多道菜」,會學著做網頁的各項「html 功能」,再將各項功能組合成一個「網頁」、最後將所有網頁統合成一個「網站」。

前端網頁製作入門書籍

( 入門部分,基本上擇一研讀就好 )

 

學做網站 html 推薦入門書籍
書名

學好跨平台網頁設計:HTML5、CSS3、JavaScript、jQuery與Bootstrap 4超完美特訓班(第二版)

網頁的入門書常常都是這樣,一次包了一堆教學在裡面,會從最基礎的 HTML、CSS 開始教你,後面開始越教越深。這本書是文淵閣工作室編輯的,通常這個工作室會比較注重實戰、實際案例應用,而這種學習方式也是我認為比較有用的,因此推薦。

購買連結

 

 

 

學網站設計 html CSS3 推薦入門書籍
書名

最新 HTML5+CSS3 網頁程式設計(第二版)

這本書鎖定的重點是基礎中的重中之重,就是 HTML + CSS,我自己是比較偏好教學書不要包山包海,而是重點教學,其實學好 HTML +CSS 你就可以製作網站了,不蓋你大概所有網頁畫面你都可以製作了,但是要有程式互動的效果、以及更有效率的做網站就需要 javascript、boostrap 等,但重點還是在於先把 HTML5 + CSS3 學好。

施威銘研究室也是注重實際應用的團隊,我自己也看過好幾本他們的書,瀏覽了一下這本也是會將各個技巧獨立出來讓讀者練習,這樣會是有效的學習方式。

購買連結

 

 

學網站設計 html CSS3 推薦入門書籍
書名

HTML&CSS:網站設計建置優化之道

因為我自己偏好 HTML 和 CSS 應該獨立開來學,之後再補充 Javasctipt 和 jQuery 的部分,這本滿有名的,評價也不錯。作者是外國人,有時感覺外國人在「寫書」教學這塊真的很厲害,總能把各個篇章分得很好,系統性的讓你學會網站程式。

購買連結

 

學網站設計 html CSS3 推薦入門書籍
書名

設計師一定要學的 HTML5‧CSS3 網頁設計手冊:零基礎也能看得懂、學得會

最後這本是 2020 出版的新書,在網頁程式界、學習資源通常是越新越好,雖然做為網頁的基底的 HTML 和 CSS 只要是 HTML5 和 CSS3 版本之後的就沒問題。從書名就可以看出,作者感覺在編排上花了很多功夫,想讓門外漢也能輕易的入門。

建議購買前可以先預覽一下排版,可能有些人會喜歡,有些人也許不太喜歡這樣太多圖樣的編排,這全看每個人看書的習慣,我自己其實也有點不太習慣這樣的編排方式。可能我喜歡都是程式和文字,扎實的硬嗑吧。

購買連結

 

圖形化製作界面:Dreamweaver 網頁編輯器

上述的網站製作都是用純文字的程式碼編輯器來撰寫,如果你想用圖形化的軟體來製作網頁就要讀 Adobe Dreamweaver 的教學書。如果全程式對你來說太過困難,其實 Dreamweaver 也是可以讓你過渡的一個方式,我一開始也是使用 Dreamweaver 在製作網頁。

 

一開始做得稀稀落落,也不太懂「原理」,因此很多時候有些狀況總無法解決,但自從我看了下面那本,「正確學會 Dreamweaver 的16堂課」後⋯⋯開始對整個網頁製作有觀念,做起來越來越順,建立起觀念後,我後來轉成使用全文字的程式碼開發也是很快就能轉換上手。重要的是正確觀念的建立。

其實用 Dreamweaver 做網頁的也是大有人在,且 Dreamweaver 也是完整內建了程式編輯器等功能,因此就算之後要轉全程式、或是程式碼 + 圖形介面編輯器並用,其實都是可以的!做網頁的效率才是最重要的。
網站製作 Dreamweaver CC 推薦入門書籍
書名

正確學會 Dreamweaver CC 的16堂課

這本算是我的「啟蒙」書,當然我看的時候不是這個版本,但「施威銘研究室」的這系列書其實已經出了好幾版,這是最新版的。將網頁製作分成 16 課讓你藉著實作,一步一步就學會網頁製作了,當時的我真的很讚嘆這本書的編排,也讓我確實學會了網站製作。因此看到這本書還有在更新,我當然是要推薦的。

購買連結

 

網站製作 Dreamweaver CC 推薦入門書籍
書名

響應式網頁設計驚嘆號:Dreamweaver CC*╳Bootstrap 4╳JavaScript 範例大全

這本也是 Dreamweaver 的教學書,2019 年底才出版的,感覺也是編排得不錯,有將各種技巧獨立出來解釋,對於教學也是有它自己的一套方式,如果比較喜歡新書的可以考慮這本。

購買連結

 

要讓網頁動起來:不可不會的 Javascript & jQuery

學會 HTML5CSS3 後,你幾乎都以打造任何靜態的網頁「畫面」,但如果你要網頁介面更精彩,就要施一點魔法⋯⋯對初學成的新手來說,JQuery 就是網頁世界裡最精彩的「魔法」,重要的是⋯⋯它竟然並不難,只要看完一本書、噢!不⋯⋯半本!你就可以開始在你的網站上加入一些很酷的動態了!

JQuery 是讓 javasctipt 變得簡單很多的套件,你依然是在寫 javascript 程式,但你會發現 javascript 變得好簡單。非常推薦初學者學習這套網頁世界無人不知的 JQuery。
javscript jQuery 推薦入門書籍
書名

JavaScript & JQuery:網站互動設計程式進化之道

跟上面 Html5 + CSS3 的優化之道為同作者的姊妹作,延續優良的編排和內容。

購買連結

 

javscript jQuery 推薦入門書籍
書名

JavaScript & jQuery:The Missing Manual國際中文版(第三版)

這本是我自己讀過的,我讀的時候應該是初版,現在已經改版到第三版了。剛學完 Html + Css 的我就是靠這本書來掌握 jQuery 的,只要照著他的進度,輕鬆自然的,你也能學好 JQuery。

購買連結

 

延伸學習:網頁切版的整體觀念補完

 

html css 即戰力 切版實作書籍
書名

最潮 HTML5+CSS3 網頁版型設計:Standard Layout‧Grid Layout‧Single Page Layout

雖然標題也是寫 HTML5 CSS3 但這本並不是普通的入門教學,而是以接案為目的實戰教學,直接舉各種現在線上常用的實際排版案例,來做切版的練習和說明,很適合剛學完的人需要找案例練手以及與業界接軌。

購買連結

 

 

html css 範例大全 一本變精通入門書籍
書名

最完整跨平台網頁設計:HTML + CSS + JavaScript + jQuery + Bootstrap + Google Maps(全彩印刷)

這本書也是 2020 七月的新書!雖然也可歸類在入門書的選擇,但王者歸來系列向來都是以最完整、案例最多而著名,對於還沒基礎的新手來說,對於網頁全局應用還不熟悉的情況下,把每一個局部都學得太細再學下一個,很多時候效果並不好、且容易覺得太困難而半途而廢。反而是建議給已經對網頁有一定知識和大局觀後,再回頭把觀念補的更扎實。見博客來下方兩則 5 星的評論,也都是已經有基礎的人所給的好評。

購買連結

 

SEO 書籍推薦
書名

最親切的SEO入門教室:關鍵字編輯x內容行銷x網站分析

雖然都是入門的 SEO 概念,但是非常適合經營網站的新手,很多概念都可以先建立,內容也有涵蓋到 WordPress 網站的 SEO 部分,除了 SEO 之外其實更可以說是本全面的初心者網站經營策略。

購買連結

 

 

上一篇更靈活駕馭 WordPress 入門 / 進階學習 WP 推薦書單 下一篇過去的官方網站們:從個人履歷網站到公司網站

關於作者

黃裕二

黃裕二Perry Huang

財經媒體鉅亨網專案網站PM / 台北數位廣告AE / 巨匠電腦網站前端講師 / 高雄資訊培育協會Dreamaver教師 / 現職造九頑五,參與過網站從製作規劃到行銷的所有工作、融合全面的知識,創立造九頑五致力於帶給客戶更好的網站體驗。