
0人評分過此書
學好跨平台網頁設計:HTML5、CSS3、JavaScript、jQuery與Bootstrap 5超完美特訓班
內容簡介:最熱門的跨平台網頁設計技術大集合!
6大主題、300個立即可套用範例,全新Bootstrap 5來襲,
最適合全面學習、現學現用的21堂經典關鍵課!
HTML5是最主流的跨平台網頁開發技術,書中以HTML5為主體,綜合當今最經典的跨平台網頁程式設計工具,完整解鎖各項技術,提供最佳學習途徑,現學現用!
【結合最新前端技術】
全面引進最新的前端框架與技術,無論是HTML5、CSS3、JavaScript、jQuery、jQuery Mobile或是Bootstrap 5,都能銜接學習而快速上手,打造符合新一代標準的跨平台網站。
全新Bootstrap 5更是新一代RWD網站開發中的熱門焦點,能讓網頁因應不同大小的螢幕自動改變內容的配置,確保每個平台的使用者都能得到最好的操作體驗。無論是框架的安裝方式、格線系統的使用、網頁的元件、表單及工具的應用,一直到網頁互動程式的開發,Bootstrap 5都能提供簡單但功能強大的幫助!
【徹底掌握開發語法】
透過詳細語法解說、大量圖表示意,引領了解各主題的核心概念與重點技術,並利用最適合的開發工具進行範例實作,徹底掌握語法與應用。
【立即套用海量範例】
提供大量範例應用,每個主題都依功能別加入實用範例,可依架構學習,也可以依功能主題立即尋找可套用的範例。
【跨越平台行動優先】
面對行動裝置的普及,網頁就必須跨越不同螢幕尺寸,因應不同作業平台。書中將RWD網頁建置技術徹底解構,進而掌握從電腦到手機版網頁的設計心法,讓跨平台網頁製作更簡單!
【超值RWD影音教學】
提供RWD(Responsive Web Design,響應式網頁設計)使用Bootstrap 5的實戰影音教學,利用Bootstrap 5引導您從無到有快速打造一個跨平台的RWD網站,快速強化開發實力!
【超值學習資源】範例程式檔、RWD網頁快速開發:使用Bootstrap 5實戰影音教學
6大主題、300個立即可套用範例,全新Bootstrap 5來襲,
最適合全面學習、現學現用的21堂經典關鍵課!
HTML5是最主流的跨平台網頁開發技術,書中以HTML5為主體,綜合當今最經典的跨平台網頁程式設計工具,完整解鎖各項技術,提供最佳學習途徑,現學現用!
【結合最新前端技術】
全面引進最新的前端框架與技術,無論是HTML5、CSS3、JavaScript、jQuery、jQuery Mobile或是Bootstrap 5,都能銜接學習而快速上手,打造符合新一代標準的跨平台網站。
全新Bootstrap 5更是新一代RWD網站開發中的熱門焦點,能讓網頁因應不同大小的螢幕自動改變內容的配置,確保每個平台的使用者都能得到最好的操作體驗。無論是框架的安裝方式、格線系統的使用、網頁的元件、表單及工具的應用,一直到網頁互動程式的開發,Bootstrap 5都能提供簡單但功能強大的幫助!
【徹底掌握開發語法】
透過詳細語法解說、大量圖表示意,引領了解各主題的核心概念與重點技術,並利用最適合的開發工具進行範例實作,徹底掌握語法與應用。
【立即套用海量範例】
提供大量範例應用,每個主題都依功能別加入實用範例,可依架構學習,也可以依功能主題立即尋找可套用的範例。
【跨越平台行動優先】
面對行動裝置的普及,網頁就必須跨越不同螢幕尺寸,因應不同作業平台。書中將RWD網頁建置技術徹底解構,進而掌握從電腦到手機版網頁的設計心法,讓跨平台網頁製作更簡單!
【超值RWD影音教學】
提供RWD(Responsive Web Design,響應式網頁設計)使用Bootstrap 5的實戰影音教學,利用Bootstrap 5引導您從無到有快速打造一個跨平台的RWD網站,快速強化開發實力!
【超值學習資源】範例程式檔、RWD網頁快速開發:使用Bootstrap 5實戰影音教學
-
第01 章 HTML 基礎入門
-
1.1 HTML 的出現
-
1.2 HTML5 的歷史
-
1.2.1 HTML5 的演進
-
1.2.2 HTML5 的特色
-
-
1.3 HTML5 的新功能
-
1.3.1 進化的 HTML5
-
1.3.2 HTML5 的改變
-
-
1.4 HTML5 的編輯與瀏覽
-
1.4.1 HTML5 推薦的編輯器
-
1.4.2 HTML5 使用的瀏覽器
-
1.4.3 HTML5 的編輯與瀏覽
-
1.4.4 HTML5 網頁的驗證
-
-
-
第02 章 HTML 結構與文字段落
-
2.1 HTML 文件結構
-
2.1.1 HTML 的元素、標籤與屬性
-
2.1.2 HTML5 的網頁結構
-
-
2.2 段落
-
2.2.1 段落相關的標籤
-
2.2.2 段落與分行: p 、 br
-
2.2.3 段落標題: hx
-
2.2.4 預先格式化區域: pre
-
2.2.5 縮排區域: blockquote
-
2.2.6 水平線: hr
-
2.2.7 編號與項目符號: ol 、 ul 、 li
-
2.2.8 自訂表列: dl 、 dt 、 dd
-
2.2.9 區域群組: div 、 span
-
2.2.10 加入註釋與特殊符號的使用
-
-
2.3 文字格式
-
2.4 HTML5 的語意標籤
-
-
第03 章 超連結、圖片、音效與影片
-
3.1 路徑的表示方法
-
3.2 超連結
-
3.2.1 認識超連結
-
3.2.2 常見的超連結
-
3.2.3 頁內超連結
-
-
3.3 圖片
-
3.3.1 網頁中可以使用的圖片格式
-
3.3.2 插入圖片: img
-
3.3.3 圖片區域及說明: figure 、 figcaption
-
-
3.4 音效的使用
-
3.4.1 瀏覽器對HTML5 音效檔格式的支援
-
3.4.2 加入音效: audio
-
-
3.5 影片的使用
-
3.5.1 video 元素的格式支援
-
3.5.2 加入影片: video
-
-
-
第04 章 表格與表單
-
4.1 表格
-
4.1.1 基礎的表格結構
-
4.1.2 加入表格: table
-
4.1.3 合併儲存格
-
-
4.2 表單
-
4.2.1 表單的功能
-
4.2.2 建立表單區域
-
4.2.3 文字、密碼及按鈕輸入欄位: input
-
4.2.4 單選鈕及多選核取方塊:radio、checkbox
-
4.2.5 輸入欄位的標籤: label
-
4.2.6 下拉式選項: select 、 option
-
4.2.7 文字區域: textarea
-
4.2.8 表單群組元件: fieldset 、 legend
-
4.2.9 HTML5 新增表單元件與屬性
-
-
-
第05 章 CSS 基礎入門
-
5.1 認識 CSS
-
5.1.1 什麼是 CSS ?
-
5.1.2 CSS 的演進
-
5.1.3 CSS 的特色
-
-
5.2 CSS3 的新功能
-
5.3 CSS 的套用方式
-
5.3.1 行內樣式
-
5.3.2 內部樣式表載入
-
5.3.3 外部樣式檔載入
-
-
5.4 CSS 基本語法
-
5.4.1 CSS 的語法結構
-
5.4.2 瀏覽器的前綴詞
-
-
5.5 CSS 基本選擇器
-
5.5.1 全域選擇器
-
5.5.2 元素選擇器
-
5.5.3 class 選擇器
-
5.5.4 id 選擇器
-
-
5.6 CSS 屬性選擇器
-
5.7 CSS 虛擬類別選擇器
-
5.7.1 常用虛擬類別選擇器
-
5.7.2 child 虛擬類別選擇器
-
5.7.3 of-type 虛擬類別選擇器
-
-
5.8 CSS 虛擬元素選擇器
-
5.9 組合選擇器
-
5.9.1 後代選擇器
-
5.9.2 子選擇器
-
-
5.10 CSS 選擇器的套用順序
-
-
第06 章 顏色與文字設定
-
6.1 顏色的設定
-
6.1.1 使用RGB 設定
-
6.1.2 使用RGBA 設定
-
6.1.3 使用HSL 設定
-
6.1.4 使用HSLA 設定
-
6.1.5 使用顏色名稱設定
-
-
6.2 文字大小、字型及相關的樣式設定
-
6.2.1 文字大小:font-size
-
6.2.2 文字粗細:font-weight
-
6.2.3 文字斜體:font-style
-
6.2.4 文字變體:font-variant
-
6.2.5 文字及背景顏色:color、background-color
-
6.2.6 文字大小寫轉換:text-transform
-
6.2.7 底線與刪除線:text-decoration
-
6.2.8 文字樣式快速設定:font
-
-
6.3 字型設定
-
6.3.1 字型:font-family
-
6.3.2 網路字型:Google fonts
-
6.3.3 嵌入字型:@font-face
-
-
-
第07 章 段落與表列設定
-
7.1 文字段落相關的樣式設定
-
7.1.1 行高:line-height
-
7.1.2 文字的間距:letter-spacing、word-spacing
-
7.1.3 文字對齊:text-align
-
7.1.4 垂直對齊:vertical-align
-
7.1.5 首行縮排:text-indent
-
-
7.2 項目符號及編號的設定
-
7.2.1 項目符號及編號的樣式:list-style-type
-
7.2.2 使用圖片作為項目符號:list-style-image
-
7.2.3 項目符號及編號的位置:list-style-position
-
7.2.4 項目符號及編號快速設定:list-style
-
-
7.3 超連結的樣式設定
-
7.4 CSS3:文字陰影
-
7.4.1 文字陰影的設定
-
7.4.2 多重文字陰影的設定
-
-
-
第08 章 背景與框線設計
-
8.1 設定背景顏色及圖片
-
8.1.1 背景顏色:background-color
-
8.1.2 背景圖片:background-image
-
8.1.3 背景圖片重複顯示:background-repeat
-
8.1.4 背景圖片位置:background-postition
-
8.1.5 固定背景圖片:background-attachment
-
8.1.6 背景樣式快速設定:background
-
-
8.2 設定透明度
-
8.3 設定漸層
-
8.3.1 設定線性漸層:linear-gradient
-
8.3.2 重複線性漸層:repeating-linear-grandient
-
8.3.3 設定放射性漸層:radial-gradient
-
8.3.4 重複放射性漸層:repeating-radial-grandient
-
-
8.4 框線的設定
-
8.4.1 設定框線:border
-
8.4.2 分別設定各邊的框線
-
8.4.3 單邊框線的設定
-
-
8.5 表格框線
-
8.5.1 認識表格框線
-
8.5.2 表格的框線重疊顯示:border-collapse
-
-
8.6 CSS3:圓角框線
-
8.6.1 圓角設定:border-radius
-
8.6.2 分別設定各邊的圓角
-
-
8.7 CSS3:區塊陰影
-
8.7.1 區塊陰影設定:box-shadow
-
8.7.2 區塊內部陰影設定:inset
-
-
-
第09 章 盒子模型與版面定位
-
9.1 使用元素結構的重要觀念
-
9.1.1 元素的區別
-
9.1.2 容器的觀念
-
-
9.2 認識盒子模型
-
9.2.1 關於盒子模型
-
9.2.2 內容顯示區域尺寸:width、height
-
9.2.3 內距的設定:padding
-
9.2.4 邊界的設定:margin
-
9.2.5 設定區塊元素在版面水平置中
-
9.2.6 設定區塊元素與行內元素的狀態:display
-
9.2.7 顯示或隱藏元素:visibility
-
-
9.3 float 的使用
-
9.3.1 float 設定浮動元素
-
9.3.2 clear 去除浮動元素
-
-
9.4 position 的使用
-
9.4.1 position 設定元素位置
-
9.4.2 position:relative 定位
-
9.4.3 position:absolute 定位
-
9.4.4 position:fixed 定位
-
-
9.5 媒體查詢
-
9.5.1 認識媒體查詢
-
9.5.2 用媒體查詢設計RWD 版面
-
-
-
第10 章 變形、轉換與動畫
-
10.1 變形效果
-
10.1.1 變形效果:transform
-
10.1.2 改變變形的基準點:transform-origin
-
-
10.2 轉換效果
-
10.2.1 轉換效果的設定
-
10.2.2 統合設定轉換的效果:transition
-
10.2.3 分段執行轉換的效果
-
-
10.3 動畫效果
-
10.3.1 動畫關鍵影格的設定
-
10.3.2 動畫效果的設定
-
10.3.3 統合設定動畫的效果:animation
-
-
-
第11 章 JavaScript 語法與結構
-
11.1 認識 JavaScript
-
11.1.1 關於 JavaScript
-
11.1.2 建立第一個JavaScript 程式
-
11.1.3 JavaScript 的語法規定
-
11.1.4 JavaScript 的保留字
-
-
11.2 變數的使用
-
11.2.1 變數的命名與宣告
-
11.2.2 設定變數值
-
-
11.3 運算子
-
11.3.1 算術運算子
-
11.3.2 指派運算子
-
11.3.3 邏輯運算子
-
-
11.4 流程控制
-
11.4.1 條件控制與迴圈控制
-
11.4.2 if 單向選擇條件控制
-
11.4.3 if/else 雙向選擇條件控制
-
11.4.4 ? : 條件運算子條件控制
-
11.4.5 if/else if/else 多向選擇條件控制
-
11.4.6 switch 多向選擇條件控制
-
11.4.7 while 迴圈控制
-
11.4.8 do/while 迴圈控制
-
11.4.9 for 計次迴圈控制
-
-
-
第12 章 JavaScript 函式、陣列與物件
-
12.1 函式的使用
-
12.1.1 認識函式
-
12.1.2 函式的使用
-
12.1.3 函式的參數
-
12.1.4 函式的傳回值
-
-
12.2 陣列的使用
-
12.2.1 認識陣列
-
12.2.2 建立一維陣列
-
12.2.3 建立多維陣列
-
-
12.3 物件
-
12.3.1 認識物件
-
12.3.2 自訂物件的建立與使用
-
-
12.4 Javascript 與 DOM
-
12.4.1 認識 DOM
-
12.4.2 利用 JavaScript 存取元素節點
-
-
-
第13 章 jQuery 基礎入門
-
13.1 認識 jQuery
-
13.1.1 關於jQuery
-
13.1.2 jQuery 的安裝與使用
-
13.1.3 jQuery 的基本結構
-
-
13.2 jQuery 選擇器
-
13.2.1 jQuery 基本選擇器
-
13.2.2 jQuery 階層選擇器
-
13.2.3 jQuery 篩選選擇器
-
13.2.4 jQuery 選取器其他選取方式
-
-
-
第14 章 jQuery 的事件與特效
-
14.1 jQuery 與 CSS、DOM 的處理
-
14.1.1 jQuery 與CSS 的互動
-
14.1.2 jQuery 與 DOM 的互動
-
-
14.2 jQuery 的事件
-
14.2.1 事件的分類
-
14.2.2 事件的處理
-
-
14.3 jQuery 的特效
-
14.3.1 jQuery 特效的基本語法
-
14.3.2 jQuery 特效的分類
-
-
-
第15 章 jQuery Mobile 入門
-
15.1 認識 jQuery Mobile
-
15.2 jQuery Mobile 的安裝與使用
-
15.2.1 下載 jQuery Mobile 資源
-
15.2.2 載入jQuery Mobile 頁面的函式庫與樣式檔
-
15.2.3 jQuery Mobile 的頁面結構
-
15.2.4 範例:單頁的 jQuery Mobile 檔案
-
15.2.5 viewport 與 data-role
-
15.2.6 固定頁首頁尾
-
15.2.7 頁面預設的佈景主題
-
-
15.3 jQuery Mobile 的頁面連結
-
15.3.1 jQuery Mobile 超連結的方式
-
15.3.2 單檔多頁面的結構
-
15.3.3 在單檔多頁面中換頁
-
15.3.4 加入返回鈕
-
15.3.5 範例:單檔多頁的切換
-
15.3.6 多檔頁面之間的切換
-
15.3.7 其他的連結方式
-
15.3.8 頁面轉換特效
-
-
-
第16 章 jQuery Mobile 常用元件
-
16.1 按鈕、按鈕群組與導覽元件
-
16.1.1 按鈕元件
-
16.1.2 群組按鈕元件
-
16.1.3 導覽列元件
-
-
16.2 清單元件
-
16.2.1 檢視清單
-
16.2.2 清單篩選及分組
-
-
16.3 版面格點元件
-
16.4 版面格點元件
-
16.4.1 可摺疊內容區塊
-
16.4.2 摺疊式內容區塊組
-
-
16.5 對話方塊元件
-
16.5.1 新增對話方塊
-
16.5.2 對話方塊的頁面轉換特效
-
16.5.3 對話方塊的標題關閉鈕
-
-
16.6 側邊欄面板元件
-
-
第17 章 jQuery Mobile 互動
-
17.1 jQuery Mobile 表單
-
17.1.1 jQuery Mobile 表單傳送
-
17.1.2 文字欄位
-
17.1.3 日期時間欄位
-
17.1.4 滑桿及切換開關
-
17.1.5 核選方塊及選項按鈕
-
17.1.6 下拉式選單
-
17.1.7 取得表單欄位值
-
-
17.2 jQuery Mobile 事件
-
17.2.1 頁面事件
-
17.2.2 觸控事件
-
17.2.3 捲動事件
-
17.2.4 方向切換事件
-
17.2.5 初始化事件
-
-
17.3 jQuery Mobile 方法
-
17.3.1 頁面切換方法
-
17.3.2 載入外部頁面方法
-
-
-
第18 章 Bootstrap 入門
-
18.1 認識 Bootstrap
-
18.2 Bootstrap 的安裝與使用
-
18.2.1 下載 Bootstrap 資源
-
18.2.2 安裝 Bootstrap 函式庫與樣式檔
-
18.2.3 瀏覽器的支援度
-
18.2.4 Bootstrap 的基本結構
-
-
18.3 Bootstrap 的格線系統
-
18.3.1 認識格線系統
-
18.3.2 認識Bootstrap 格線系統
-
18.3.3 設定不同螢幕尺寸的格線系統
-
18.3.4 flexbox 的使用
-
18.3.5 排序、位移及巢狀
-
-
18.4 Bootstrap 的文字段落
-
18.4.1 標題、段落及文字
-
18.4.2 對齊轉換類別與其他
-
18.4.3 清單
-
18.4.4 程式碼區塊
-
-
-
第19 章 表格、表單、按鈕與圖片
-
19.1 Bootstrap 的表格
-
19.1.1 基本表格
-
19.1.2 表格交替換色
-
19.1.3 表格邊框
-
19.1.4 表格緊縮
-
19.1.5 加入滑過表格列變色效果
-
19.1.6 表格特殊顏色
-
19.1.7 響應式表格
-
-
19.2 Bootstrap 的表單佈局
-
19.2.1 基本表單
-
19.2.2 表單排版
-
-
19.3 Bootstrap 的表單元素
-
19.3.1 輸入元素:input
-
19.3.2 文字區域:textarea
-
19.3.3 核取方塊:checkbox
-
19.3.4 單選按鈕:radio
-
19.3.5 切換開關:switch
-
19.3.6 下拉式選項: select 、 option
-
19.3.7 範圍選項:range
-
-
19.4 Bootstrap 表單狀態樣式
-
19.5 輸入群組
-
19.5.1 輸入群組的設定
-
19.5.2 附加核取方塊及單選鈕元素
-
19.5.3 附加按鈕元素
-
19.5.4 附加下拉式選單
-
19.5.5 附加分離式按鈕
-
19.5.6 附加多個按鈕
-
-
19.6 Bootstrap 的圖片
-
19.6.1 自適應圖片
-
19.6.2 形狀圖片
-
19.6.3 圖片區域:figures
-
-
-
第20 章 Bootsrtap 元件
-
20.1 Bootstrap 的按鈕
-
20.1.1 可成為按鈕的元素
-
20.1.2 按鈕的樣式
-
20.1.3 按鈕的大小
-
20.1.4 按鈕的啟用與禁用狀態
-
-
20.2 按鈕群組
-
20.2.1 群組按鈕的設定
-
20.2.2 多選與單選群組按鈕
-
20.2.3 分離式按鈕
-
20.2.4 有下拉式選單的巢狀群組按鈕
-
20.2.5 按鈕工具列
-
-
20.3 下拉式選單
-
20.3.1 基本下拉式選單
-
20.3.2 加入標題及分隔線
-
20.3.3 設定啟用選項及禁用選項
-
20.3.4 深色下拉式選單
-
20.3.5 指定方向展開選單
-
-
20.4 導覽與頁籤
-
20.4.1 導覽
-
20.4.2 使用下拉式選單的導覽
-
-
20.5 導覽列
-
20.5.1 導覽列的使用
-
20.5.2 固定導覽列
-
-
20.6 其他導覽元件
-
20.6.1 麵包屑導覽
-
20.6.2 分頁導覽
-
-
20.7 警告訊息及進度條
-
20.7.1 警告訊息
-
20.7.2 進度條
-
-
20.8 清單群組
-
20.8.1 清單群組的基本設定
-
20.8.2 連結及按鈕清單群組的設定
-
20.8.3 選項狀態與樣式的設定
-
20.8.4 加入標籤
-
-
20.9 卡片元件
-
-
第21 章 Bootstrap JS 元件
-
21.1 可切換內容標籤元件
-
21.1.1 可切換內容標籤元件的結構
-
21.1.2 可切換內容標籤元件的運作
-
21.1.3 可切換內容標籤元件的實作範例
-
-
21.2 互動視窗元件
-
21.2.1 互動視窗元件的結構
-
21.2.2 互動視窗元件的運作
-
21.2.3 互動視窗元件的實作範例
-
-
21.3 提示訊息及彈跳提示訊息
-
21.3.1 提示訊息元件
-
21.3.2 彈跳提示訊息元件
-
-
21.4 折疊效果元件
-
21.5 手風琴效果元件
-
21.5.1 手風琴效果元件的結構
-
21.5.2 手風琴效果元件的使用
-
21.5.3 手風琴效果元件的實作範例
-
-
21.6 圖片輪播效果元件
-
21.6.1 圖片輪播效果元件的結構
-
21.6.2 圖片輪播效果元件的使用
-
21.6.3 圖片輪播效果元件的實作範例
-
-
- 出版地 : 臺灣
- 語言 : 繁體中文
評分與評論
請登入後再留言與評分