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

購買商店

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

$458.00

馬上購買

內容描述

★最新！響應式網頁設計趨勢實用書！★
透過Bootstrap4打造適用於各行動裝置的完美網站

　　變動區塊編排 | 滑動瀏覽 | 折疊內容 | 互動視窗 | 滾動監聽 | 響應式導覽列 | 一頁式網站……等最詳盡的Bootstrap 4功能大解析，響應式網頁範例製作過程全公開。讓企業、購物、美食網站在行動裝置中完美呈現，一次掌握熱門的響應式網頁技術，提高網站好用度與流量！

　　●必備程式碼下載。
　　●適用Dreamweaver CC 2018之後版本。

　　輕鬆掌握適用於各式行動裝置的酷炫響應式網站版面技巧╳CSS進階編排方法，快速學會Bootstrap模組化範例，開發出具設計感的響應式網頁！

　　兼具技術及視覺兩大觀點，本書以 Bootstrap技術框架為基礎，在 Dreamweaver 程式碼操作環境中配合CSS3、HTML5與JavaScrip，透過最簡便的工具及最詳盡的Bootstrap組件範例應用說明，引領大家進入響應式網頁的專業領域。

　　掌握最新網站設計12大趨勢
　　●超吸睛的全畫面式滿版背景
　　●可綜觀全局的一頁式網站設計
　　●隨時都能使用的開合式導覽列
　　●微互動大升級的捲軸設計

　　響應式網站給使用者最佳瀏覽畫面，大幅縮減維護成本
　　●節省網站設計成本，並有利於搜尋引擎最佳化
　　●方便使用者瀏覽，降低網頁跳離率，更利於網路行銷
　　●避免使用者找不到內容，提高網頁可用性
　　●使用網格系統解決不同裝置的版面規劃，畫面尺寸怎麼切換都OK

　　史上最詳盡的Bootstrap功能說明，酷炫範例現學現用
　　●16大類Bootstrap 組件素材完整示範
　　●15種齊全而多樣化的導覽列按鈕與必備的7種滑動瀏覽新花樣
　　●6款絕不無聊的大圖瀏覽方式
　　●8種精彩的網頁內容展示效果

　　方便好用的程式碼編輯器與響應式網頁參考版型
　　●使用Visual Studio Code程式碼編輯器設計開發響應式網頁
　　●16個馬上可供練習的參考版型

目錄大綱

作者序

01響應式網頁，一次解決多種裝置顯示問題的最佳解決方案
1-1為什麼要使用響應式網頁技術來設計網站？    
1-1-1使用行動裝置已成為上網主流方式
1-1-2何謂響應式網頁？
1-1-3如何辨別網站是否使用了響應式網頁技術？
1-2使用響應式網頁的優點
1-2-1節省網站設計成本
1-2-2減少重複的網頁內容，有利於搜尋引擎最佳化
1-2-3方便使用者瀏覽，降低網頁跳離率，更利於網路行銷
1-2-4避免使用者找不到內容，提高網頁可用性
1-3網頁設計新趨勢
1-3-1超吸睛的全畫面式滿版背景
1-3-2充滿活力，飽和鮮豔的顛覆式配色
1-3-3 一次可綜觀全局的單頁式頁面設計
1-3-4出現在網站上方的固定式導覽選單
1-3-5隨時都能使用的收合式選單與極簡按鈕
1-3-6極簡扁平化風格設計
1-3-7穿插具有驚喜感的小動畫
1-3-8一眼就看到的超級大字型
1-3-9適用於網頁的色塊式向量插圖
1-3-10微互動大升級，跟著捲軸一起動起來
1-3-11一目瞭然的左右分屏式設計
1-3-12可提供豐富資訊的影片式背景
1-4如何編寫響應式網頁
1-4-1 本書的使用方式
1-4-2 響應式網頁必要成分

02 認識 Dreamweaver cc 2019 與響應式網頁相關的功能
2-1 先不急著編寫CSS 語法
2-1-1 串聯 CSS 與 新增 CSS 選取器
2-1-2 網頁中常見的 CSS 屬性
2-1-3 快速調整 CSS 屬性
2-1-4 插入與編輯 CSS 導覽列
2-2 製作響應式網頁必會的 HTML5 標籤與 CSS3 屬性
2-2-1 HTML5 語意化標籤
2-2-2 HTML5 語意化標籤編排頁面區塊
2-2-3 使用 CSS3 設定文字屬性
2-2-4 使用 CSS3 設定背景屬性
2-2-5使用 CSS3 設定邊框屬性
2-2-6 使用 CSS3 設定區塊陰影屬性
2-2-7使用 CSS3 設定透明度與漸層
2-2-8 使用CSS3 設定變形
2-2-9 使用CSS3 設定轉變
2-2-10 使用CSS3 設定動畫
card 內容置中2-2-10 使用 HTML5 語意化標籤與CSS3來美化與編排網頁
2-3 認識與使用 Bootstrap
2-3-1 關於 Bootstrap 4
2-3-2 使用 Bootstrap 的準備
2-3-3 在 Dreamweaver 中建立 Bootstrap 頁面
2-3-4 Bootstrap 柵格系統
2-3-5 其他版面區塊的編排設定

03 使用 Bootstrap打造響應式網頁
3-1 Bootstrap 文字編排與常用內容類別
3-1-1 顏色的通用類別：設文字顏色與背景色
3-1-2 文字的通用類別：設定文字屬性
3-1-3 字體的通用類別：設定標題及字體樣式
3-1-4 邊界與內距的通用類別
3-1-5 表格（Table）的通用類別
3-1-6 圖片區（figures）與圓角的通用類別
3-1-7 邊框（Borders）與圓角的通用類別
3-1-8 浮動（float）的通用類別
3-2 Bootstrap 元件素材
3-2-1 標籤（badge）
3-2-2 按鈕（buttons）
3-2-3 麵包屑（breadcrumb）
3-2-4 折疊內容（accordion）
3-2-5 標籤切換內容（tab）
3-2-6 響應式圖片（Responsive image）
3-2-7 廣告大螢幕（Jumbotron）
3-2-8 多媒體物件（Media Object）
3-2-9 內嵌（Embeds）
3-2-10 列表群組（List group）
3-2-11 互動視窗（Modal）
3-2-12 彈出式提示框（Popovers）
3-2-13滾動監聽（Scrollspy）
3-3 Bootstrap響應式導覽列
3-3-1基本型收合導覽按鈕
3-3-2包含彈出選單的導覽按鈕列
3-3-3其他導覽列功能
3-4 card 與 carousel應用
3-4-1卡片 card
3-4-2card卡片應用
3-4-3 card 圖文框排列版面
3-4-4 card 圖文編排應用
3-4-5輪播 Carousel
3-4-6 Carousel頁面編排應用
3-4-7 圖寬高100%滿版的Carousel

04打造酷炫的一頁式網站
4-1 製作頁面捲動效果
4-2 設定導覽列從旁邊出現捲動頁面
4-3 進階版一頁式網站
4-4 使用 CSS 與 JavaScript 打造變化多端的一頁式網站

Ch05 更多關於的Bootstrap錦囊妙招
5-1 齊全而多樣化的導覽列按鈕
5-1-1 橫向按鈕
5-1-2 側邊導覽列
5-1-3 特殊按鈕
5-2 必備滑動瀏覽新花樣
5-2-1 簡單就能左右切換圖文內容
5-2-2 圖片文字內容滑動切換
5-2-3 大圖左右滑動瀏覽
5-2-4左右縮放滑動大圖
5-2-5 圖文區塊同步切換
5-2-6 圖文內容淡入淡出切換
5-2-7 單排多圖片左右滑動
5-3 絕不無聊的大圖瀏覽方式
5-3-1 不規則等寬多圖排列開大圖
5-3-2 整齊小圖開大圖
5-3-3 橫排小圖開大圖
5-3-4 不規則小圖開大圖
5-3-5 同高小圖開大圖
5-3-6 圖文小圖開大圖
5-4 更多精彩的網頁展示效果
5-4-1 小圖切換滑動
5-4-2 按鈕切換動態內容
5-4-3 投影片播放式切換圖片
5-4-4 淡入淡出切換圖文內容
5-4-5 拖曳滑動區塊
5-4-6 上下滑動切換
5-4-7 透明縮放切換
5-4-8 小圖切換大圖播放

附錄A. 更接地氣，使用程式碼編輯器設計開發響應式網頁
附錄B. 馬上可供練習的參考版型

作者介紹

李啟宏 Niel Li    

　　個人網站：Mr-idea多媒體設計 www.mr-idea.idv.tw
 
　　現 任：　
　　優勢數位設計學苑 資深課程專任講師

　　經 歷：
　　資深多媒體網頁設計師
　　易禧科技 多媒體網頁設計、平面設計課程講師
　　文化大學推廣教育部 多媒體設計課程講師
　　新視界雜誌、dpi設計流行創意雜誌 雜誌專欄作家

　　專 長：
　　多媒體網頁設計、平面設計、網頁視覺設計整合
　
　　認 證：
　　ACE on Photoshop CS4
　
　　著 作：
　　《網頁設計驚嘆號：Dreamweaver X PHP互動網站直擊》
　　《網頁設計驚嘆號：Dreamweaver至高的網頁特效188招》
　　《Dreamweaver vs photoshop CS3網頁視覺設計與互動特效整合》