本書是秉持著行動優先 (mobile first) 的概念所撰寫,在設計網站的過程中優先考量網頁在行動裝置的操作性與可讀性,而不是將過去的 PC 網頁直接移植到行動裝置,畢竟行動裝置和 PC 的特點不同,比較明顯的差異如下:
□ 行動裝置的螢幕較小
□ 行動裝置的執行速度較慢
□ 行動裝置的上網頻寬較小
□ 行動裝置的操作方式不同
□ 行動裝置不支援 Flash 等外掛程式
為了開發適用於不同裝置的網頁,響應式網頁設計 (RWD,Responsive Web Design) 逐漸主導了近年來的網頁設計趨勢,目的是根據使用者的瀏覽器環境自動調整網頁的版面配置,以提供最佳的顯示結果,換句話說,只要設計單一版本的網頁,就能完整顯示在 PC、平板電腦、智慧型手機、遊戲機等不同裝置。
本書的目標就是要讓您快速成為響應式網頁設計高手,不僅要學會靈活運用 HTML、CSS、Bootsrtap、JavaScript 等程式語法,還要懂得掌握網頁 UI 元素的設計原則與網頁設計風格,主要內容如下:
□ 首先,第 1 章會介紹行動上網對網頁設計的影響、行動優先的概念、網站建置過程、響應式網頁設計的優點、缺點、主要技術與設計考量;第 2 章會介紹撰寫與測試網頁的工具;第 3 章會介紹網頁的 UI 組成、UI 元素的設計原則、網頁設計風格、網頁設計趨勢、網站類型與風格,這是值得深入閱讀的章節,因為一般的網頁設計書籍往往著重於程式語法,而忽略了網頁的視覺設計。
□ 接著,第 4 章會介紹 HTML5 基本語法與常用元素;第 5 章會介紹 CSS3 基本語法與常用屬性,您只要依照本書的指引做練習,無須熟背這些語法,日後有需要時再來查詢即可。
□ 繼續,第 6 ~ 10 章會以比較詳盡的篇幅介紹 Bootstrap,包括 Bootstrap 網格系統、Bootstrap 內容樣式、Bootstrap 公用類別與表單,以及 Bootstrap 元件,這是目前最受歡迎的 HTML、CSS 與 JavaScript 框架之一,用來開發響應式、行動優先的網頁,使用者無須撰寫 CSS 或 JavaScript 程式碼,就可以輕鬆設計出響應式網頁。
□ 再來,第 11 ~ 13 章會以「我的旅遊日記」網站、「日光旅遊」網站、「日光美食部落」網站等實際的例子示範如何運用 HTML、CSS 和 Bootstrap 開發響應式網頁,讓您瞭解這些程式語法如何落實在網頁設計,而且這些網頁設計得相當精美,對於學生製作專題、參加競賽或設計人員開發網頁都極具參考價值。
□ 最後,第 14 章會介紹 JavaScript 基本語法;第 15 章會介紹 jQuery 基本語法,讓想進一步學習 JavaScript 的人能先有初步的認識。
為讓初學者快速入門,本書包含 HTML5/CSS3/JavaScript/jQuery 簡易教學。
本書特色
最新 Bootstrap 5!
就算是網頁設計新手, 也要避開不合時宜、落伍的設計方式。
●Bootstrap 最新版本教學, 要學就學最新版
●掌握網頁 UI 的設計鐵則, 不怕視覺風格出差錯
●提供不同類型的專業網站範本, 新手臨摹最速成
●用網格系統快速解決不同裝置的版面規劃, 怎麼切換都不跑版
●新手必學的 HTML5 基本語法與 CSS3 常用屬性
●JavaScript、jQuery 網頁技術基礎, 網頁功力再提升
響應式網頁設計(RWD) 主導了目前的網頁設計趨勢
提供各種裝置最佳的顯示結果。
目錄
第1章 網頁設計簡介
第2章 撰寫第一個網頁
第3章 網頁的 UI 設計原則
第4章 HTML5 基本語法與常用元素
第5章 CSS3 基本語法與常用屬性
第6章 Bootstrap 網格系統
第7章 Bootstrap 內容樣式
第8章 Bootstrap 公用類別與表單
第9章 Bootstrap 元件 (一)
第10章 Bootstrap 元件 (二)
第11章 響應式網頁開發實例(一)
第12章 響應式網頁開發實例(二)
第13章 響應式網頁開發實例(三)
第14章 JavaScript 快速入門
第15章 jQuery