讓響應式RWD網頁設計變簡單: Bootstrap開發速成 (第2版 附DVD) | 誠品線上

讓響應式RWD網頁設計變簡單: Bootstrap開發速成 (第2版 附DVD)

內容簡介

內容簡介 以4個整合性實例一探業界極為流行的響應式網頁框架Bootstrap從遊戲活動網頁、部落格、活動報名網頁，到企業型購物網站，依Bootstrap 4功能大幅改版，一次搞懂主流的RWD設計！新一代網頁設計師與網頁工程師必備技Bootstrap響應式網頁的快速開發力！熱門的Bootstrap讓全世界許多企業在徵求網頁設計師時都將之列為必備的技能條件，Bootstrap採用了模組化設計，最新Bootstrap 4的功能更加強化，簡易到只要懂得如何套用，就可以快速開發出具有美感的響應式（RWD）網頁。對於許多不擅長視覺設計的網頁工程師來說，省去了許多美化的時間與困惱，而對於視覺設計師來說，也能依著自己設計的版型建置網頁，同時支援市面上大部份的主流瀏覽器，而對於想踏入響應式網頁領域的初學者來說，則可以在短時間就學習到RWD設計技能。書中從認識響應式網頁與網站開發流程開始，詳細解說響應式網頁設計思維，並導入視覺設計與網頁製作兩個不同領域的專業知識與技巧，最終以4個案例製作響應式網頁以具備實戰技能。●完整的響應式網頁概念解說與Bootstrap 4運用方式，迅速跨入響應式設計領域。●以淺顯易懂的網頁範例，融入佈局、HTML5、CSS3、元件與JavaScript的使用技巧。●4種不同類型的整合性範例，一次掌握主流RWD版面設計，展現Bootstrap 4的強大效果。書附DVD：近150分鐘網格佈局、CSS、JavaScript與元件使用影音教學活動報名版型與部落格版型PDF 範例檔

作者介紹

作者介紹 ■作者簡介呂國泰經歷：文藻外語大學數位內容應用與管理學系 兼任講師學歷：亞洲大學數位媒體設計研究所 碩士專長：1.多媒體技術整合應用 開發2.數位出版 內容設計暨系統建置3.多媒體影音作品設計 影像非線性剪輯技術設計4.網頁視覺設計 切版組版與多媒體內容網站設置（RWD）5.大型設計案製作流程管理與執行6.設計業務相關客戶溝通協調7.廣告設計相關企劃管理作業8.影視多媒體後製技術行銷企劃、週邊產品與活動規劃與專案管理作業著作：著有動畫製作、遊戲設計、電子書、多媒體、國際認證⋯等近20本圖書

產品目錄

產品目錄 01 響應式網頁介紹1.1 為何需要響應式網頁1.2 何謂響應式網頁1.3 網頁設計趨勢02 響應式網頁的主要概念2.1 Viewport標籤2.2 媒體查詢Media Queries2.3 流動網格Fluid Grid2.4 彈性圖片Fluid Image03 網站開發流程3.1 專案3.2 企劃3.3 設計3.4 前端3.5 後端3.6 測試3.7 上線04 行動載具優先4.1 說明4.2 響應式與傳統網站的流程差異4.3 行動載具的操作特性4.4 優先專注「極端」尺寸4.5 斷點的佈局4.6 圖片格式4.7 模組化設計05 設計上的輔助5.1 製作網格系統5.2 使用Font Awesome Icon融入網頁設計5.3 響應式圖片產生器5.4 載具尺寸參考5.5 網頁字級單位06 設計師與工程師的專業認知6.1 網頁與印刷的差異6.2 網頁向量格式SVG6.3 統一的命名規則6.4 工程師眼中的設計稿07 HTML57.1 認識HTML57.2 HTML5與HTML4的觀念差異7.3 語意化標籤7.4 文件結構差異08 CSS3選擇器8.1 觀念說明8.2 選擇器介紹09 Bootstrap介紹9.1 何謂Bootstrap9.2 網格系統介紹9.3 網格系統的佈局說明9.4 通用（輔助）類別10 網格佈局與基礎CSS樣式的使用10.1 實作概述10.2 載入檔案10.3 廣告10.4 特色10.5 主標語10.6 推薦課程標題10.7 推薦課程內容10.8 頁腳11 CSS的使用11.1 實作概述11.2 載入檔案11.3 廣告11.4 遊戲介紹11.5 場景介紹11.6 魔王攻擊招式11.7 改善建議11.8 聯絡資訊11.9 頁腳12 Components元件的使用12.1 實作概述12.2 載入文件12.3 Embed（嵌入）12.4 Dropdown（下拉式選單）12.5 Card（卡片）12.6 Pagination（分頁）12.7 Card（卡片）13 Javascript的使用13.1 實作概述13.2 Popovers（彈出提示框）13.3 Collapse（摺疊）13.4 Modal（互動視窗）14 遊戲活動版型14.1 實作概述14.2 載入文件14.3 切版前說明14.4 背景樣式14.5 遊戲封面與連結14.6 遊戲關卡14.7 關卡說明14.8 排行榜14.9 活動辦法14.10 頁腳15 企業型購物網站－首頁15.1 實作概述15.2 載入檔案15.3 定義共用樣式15.4 選單15.5 廣告輪播15.6 商品類別15.7 熱門商品15.8 關於岡南15.9 地圖15.10 頁腳選單連結15.11 頁腳E－mail訂閱15.12 頁腳版權所有16 企業型購物網站－關於岡南16.1 實作概述16.2 主選單調整16.3 介紹岡南17 企業型購物網站－人力資源17.1 實作概述17.2 內容建置17.3 輔助類別17.4 定義CSS樣式18 企業型購物網站－連絡我們18.1 實作概述18.2 連絡資訊18.3 連絡表單19 企業型購物網站－登入與註冊19.1 實作概述19.2 登入19.3 註冊20 企業型購物網站－商品商城20.1 實作概述20.2 左側欄－廣告圖與商品排序20.3 左側欄－商品20.4 左側欄－分頁20.5 右側欄－搜尋20.6 右側欄－購物清單20.7 右側欄－商品分類21 企業型購物網站－商品介紹21.1 實作概述21.2 商品介紹21.3 商品描述22 企業型購物網站－ 購物車22.1 實作概述22.2 購物車清單22.3 感興趣商品22.4 購物車統計23 企業型購物網站－結帳23.1 實作概述23.2 結帳訊息23.3 帳單資訊23.4 結帳訂單24 活動報名版型（PDF電子書，收錄於書附光碟）24.1 實作概述24.2 載入文件24.3 網格佈局24.4 背景樣式24.5 廣告24.6 創作流程24.7 課程資訊24.8 課程報名24.9 頁腳25 部落格版型（PDF電子書，收錄於書附光碟）25.1 實作概述25.2 首頁載入檔案25.3 定義共用樣式25.4 背景樣式25.5 首頁選單25.6 首頁廣告25.7 首頁麵包屑25.8 首頁部落格與側邊欄佈局25.9 部落格文章－第一則25.10 部落格文章－第二則至第五則25.11 首頁側邊欄：搜尋25.12 首頁側邊欄：最新文章25.13 首頁側邊欄：分類25.14 首頁側邊欄：標籤雲25.15 首頁頁腳25.16 部落格內頁麵包屑25.17 部落格內頁圖文內容25.18 部落格內頁標籤25.19 部落格內頁社群25.20 部落格內頁分頁

商品規格

試閱文字

自序 : 隨著科技的演進造就了行動載具的普及，形成人手一機的現象，藉此瀏覽網頁的媒介已不再侷限於電腦，反而較多是使用行動載具來瀏覽網頁。由於行動載具的演變，導致載具在尺寸上的不一致，設計網頁時所要顧慮的因素也越來越多，為了使瀏覽者在行動載具上能獲得最佳的閱讀與瀏覽體驗，因而誕生了「響應式網頁設計」（Responsive
Web Design，RWD）概念。

就網頁發展史而言，不論在美感或技術等層面上，都一直不斷的在演進與更新，對於從事網頁設計的人而言，也必須不斷進步來強化自身的實力，進而設計出更好的網頁來呈現在眾人的面前。截至目前為止，網路上有很多網頁框架都具有響應式設計規範，其目的為提供一套統一的框架來減去網頁程式人員自訂響應式規範的時間，以在短時間內就能製作出具有響應式效果的網頁。因此，本書以最流行的Bootstrap網頁框架為主，從範例中引導網頁工程師該如何使用其樣式與功能。

同時，對於從事網頁平面設計的您而言，也可從書籍中理解到何謂響應式網頁，以及響應式網頁與傳統網頁設計上的差異等知識，使設計出的網頁版型能符合工程師的需求。藉此期許各位讀者可以透過此書作為一個與時俱進，充實技術能力，深得客戶和老闆歡心的設計師。

呂國泰