內容簡介
以4個整合性實例一探業界極為流行的Bootstrap響應式網頁框架
從「遊戲活動網頁」、「部落格」、「活動報名網頁」,到「企業型購物網站」,
依Bootstrap 5改版,一次搞懂主流的RWD設計!
Bootstrap早已成為全世界許多企業在徵求網頁設計師時列為必備的技能條件,其採用了模組化設計,簡易到只要懂得如何套用,就可以快速設計出頗具美感的響應式(RWD)網頁。
對於許多不擅長視覺設計的網頁工程師來說,省去了許多美化的時間與困擾;而對於視覺設計師來說,也能依著自己設計的版型建置網頁,同時支援市面上大部份的主流瀏覽器,而對於想踏入響應式網頁領域的初學者來說,則可以在短時間學好RWD設計技能。
網頁設計師與網頁工程師必備技
Bootstrap響應式網頁的快速設計力
書中從認識響應式網頁與網站開發流程開始,詳細解說響應式網頁設計思維,並導入視覺設計與網頁製作兩個不同領域的專業知識與技巧,最終以4個案例製作響應式網頁以具備實戰技能。
‧完整的響應式網頁概念解說與Bootstrap運用方式,迅速跨入響應式設計領域。
‧以淺顯易懂的網頁範例,融入佈局、HTML5、CSS3、元件與JavaScript的使用技巧。
‧4種不同類型的整合性範例,一次掌握主流RWD版面設計,展現Bootstrap的強大效果。
【超值學習資源】554分鐘(CH10~CH25實作)影音教學/活動報名版型與部落格版型PDF/範例檔
從「遊戲活動網頁」、「部落格」、「活動報名網頁」,到「企業型購物網站」,
依Bootstrap 5改版,一次搞懂主流的RWD設計!
Bootstrap早已成為全世界許多企業在徵求網頁設計師時列為必備的技能條件,其採用了模組化設計,簡易到只要懂得如何套用,就可以快速設計出頗具美感的響應式(RWD)網頁。
對於許多不擅長視覺設計的網頁工程師來說,省去了許多美化的時間與困擾;而對於視覺設計師來說,也能依著自己設計的版型建置網頁,同時支援市面上大部份的主流瀏覽器,而對於想踏入響應式網頁領域的初學者來說,則可以在短時間學好RWD設計技能。
網頁設計師與網頁工程師必備技
Bootstrap響應式網頁的快速設計力
書中從認識響應式網頁與網站開發流程開始,詳細解說響應式網頁設計思維,並導入視覺設計與網頁製作兩個不同領域的專業知識與技巧,最終以4個案例製作響應式網頁以具備實戰技能。
‧完整的響應式網頁概念解說與Bootstrap運用方式,迅速跨入響應式設計領域。
‧以淺顯易懂的網頁範例,融入佈局、HTML5、CSS3、元件與JavaScript的使用技巧。
‧4種不同類型的整合性範例,一次掌握主流RWD版面設計,展現Bootstrap的強大效果。
【超值學習資源】554分鐘(CH10~CH25實作)影音教學/活動報名版型與部落格版型PDF/範例檔
作者簡介
作者介紹呂國泰
現職:
中信金融管理學院/講師
學歷:
國立雲林科技大學企業管理系博士班 進修中
亞洲大學數位媒體設計學系碩士班
經歷:
文藻外語大學數位內容應用與管理學系/兼任講師
專長:
網頁視覺設計與RWD切版、多媒體技術整合應用與開發、多媒體影音剪輯
著作:
著有動畫製作、遊戲設計、電子書、多媒體、國際認證⋯等近20本圖書
鍾國章
現職:
國立澎湖科技大學航運管理系/助理教授
學歷:
國立東華大學企業管理系/博士
經歷:
國立澎湖科技大學行銷與物流管理系/助理教授
台灣觀光學院旅館管理系/兼任講師
勞動部勞動力發展署北基宜花金馬分署/講師
東科資訊/工程師
專長:
數位行銷、大數據分析、資料探勘譯者介紹
現職:
中信金融管理學院/講師
學歷:
國立雲林科技大學企業管理系博士班 進修中
亞洲大學數位媒體設計學系碩士班
經歷:
文藻外語大學數位內容應用與管理學系/兼任講師
專長:
網頁視覺設計與RWD切版、多媒體技術整合應用與開發、多媒體影音剪輯
著作:
著有動畫製作、遊戲設計、電子書、多媒體、國際認證⋯等近20本圖書
鍾國章
現職:
國立澎湖科技大學航運管理系/助理教授
學歷:
國立東華大學企業管理系/博士
經歷:
國立澎湖科技大學行銷與物流管理系/助理教授
台灣觀光學院旅館管理系/兼任講師
勞動部勞動力發展署北基宜花金馬分署/講師
東科資訊/工程師
專長:
數位行銷、大數據分析、資料探勘譯者介紹
目錄
第 1 章 響應式網頁介紹
1.1 為何需要響應式網頁
1.2 何謂響應式網頁
1.3 網頁設計趨勢
第 2 章 響應式網頁的主要概念
2.1 Viewport 標籤
2.2 媒體查詢 Media Queries
2.3 流動網格 Fluid Grid
2.4 彈性圖片 Fluid Image
第 3 章 網站開發流程
3.1 專案
3.2 企劃
3.3 設計
3.4 前端
3.5 後端
3.6 測試
3.7 上線
第 4 章 行動載具優先
4.1 說明
4.2 響應式與傳統網站的流程差異
4.3 行動載具的操作特性
4.4 優先專注「極端」尺寸
4.5 斷點的佈局
4.6 圖片格式
4.7 模組化設計
第 5 章 設計上的輔助
5.1 製作網格系統
5.2 響應式圖片產生器
5.3 載具尺寸參考
5.4 網頁字級單位
第 6 章 設計師與工程師的彼此認知
6.1 網頁與印刷的差異
6.2 網頁向量格式 SVG
6.3 統一的命名規則
6.4 工程師眼中的設計稿
第 7 章 HTML5
7.1 認識 HTML5
7.2 HTML5 與 HTML4 的觀念差異
7.3 語意化標籤
7.4 文件結構差異
第 8 章 CSS 3 選擇器
8.1 觀念說明
8.2 選擇器介紹
第 9 章 Bootstrap 介紹
9.1 何謂 Bootstrap
9.2 容器介紹
9.3 網格系統介紹
9.4 網格系統的佈局說明
9.5 通用(輔助)類別
第 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(卡...
1.1 為何需要響應式網頁
1.2 何謂響應式網頁
1.3 網頁設計趨勢
第 2 章 響應式網頁的主要概念
2.1 Viewport 標籤
2.2 媒體查詢 Media Queries
2.3 流動網格 Fluid Grid
2.4 彈性圖片 Fluid Image
第 3 章 網站開發流程
3.1 專案
3.2 企劃
3.3 設計
3.4 前端
3.5 後端
3.6 測試
3.7 上線
第 4 章 行動載具優先
4.1 說明
4.2 響應式與傳統網站的流程差異
4.3 行動載具的操作特性
4.4 優先專注「極端」尺寸
4.5 斷點的佈局
4.6 圖片格式
4.7 模組化設計
第 5 章 設計上的輔助
5.1 製作網格系統
5.2 響應式圖片產生器
5.3 載具尺寸參考
5.4 網頁字級單位
第 6 章 設計師與工程師的彼此認知
6.1 網頁與印刷的差異
6.2 網頁向量格式 SVG
6.3 統一的命名規則
6.4 工程師眼中的設計稿
第 7 章 HTML5
7.1 認識 HTML5
7.2 HTML5 與 HTML4 的觀念差異
7.3 語意化標籤
7.4 文件結構差異
第 8 章 CSS 3 選擇器
8.1 觀念說明
8.2 選擇器介紹
第 9 章 Bootstrap 介紹
9.1 何謂 Bootstrap
9.2 容器介紹
9.3 網格系統介紹
9.4 網格系統的佈局說明
9.5 通用(輔助)類別
第 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(卡...