
0人評分過此書
學好跨平台網頁設計(第二版):HTML5、CSS3、JavaScript、jQuery與Bootstrap4超完美特訓班
6大主題,300個立即可套用範例,最熱門的跨平台網頁設計技術大集合,
最適合初學入門、現學現用的21堂關鍵課!
經典改版、全新Bootstrap 4降臨
HTML5早已成為許多人首選的跨平台工具,新一代智慧手機作業系統大量運用來開發應用程式,許多設備都支援HTML5,成為最主流的學習技術。本書以HTML5為主體,綜合當今熱門的跨平台網頁程式設計工具。不繞遠路,完整解秘各項技術,立即可用,提供最佳學習途徑!
【結合最新前端技術】
全面引進最新的前端框架與技術,無論是HTML5、CSS3、JavaScript、jQuery、jQuery Mobile或是Bootstrap 4,都能銜接學習而快速上手,打造符合新一代標準的跨平台網站。
全新Bootstrap 4為響應式網頁提供最亮眼的開發模式,全面更新開發工具、元件與擴增套件,讓跨平台網站擁有更好的使用接受度。改用Sass樣式語法,重寫所有JS的應用套件,加速網頁建構與讀取,更支援新一代的flexbox盒子模式,為網頁排版與版型配置提供無比的彈性。
【徹底掌握語法基礎】
透過詳細語法解說、大量圖表示意,引領了解各主題的核心概念與重點技術,並利用最適合的開發工具進行範例實作,徹底掌握語法與應用。
【立即套用海量範例】
每個主題都依功能別加入實用範例,可依架構學習,也可以依功能主題立即尋找可套用的範例。
【跨越平台行動優先】
面對行動裝置的普及,網頁就必須跨越不同螢幕尺寸,因應不同作業平台。書中將RWD網頁建置技術徹底解構,進而掌握從電腦到手機版網頁的設計心法,讓跨平台網頁製作更簡單!
【超值RWD影音教學】
提供RWD(Responsive Web Design,響應式網頁設計)使用Bootstrap 4的實戰影音教學,利用Bootstrap 4帶領您從無到有快速打造一個跨平台的RWD網站,快速提升開發實力!
超值學習資源:範例程式檔、100分鐘RWD網頁快速開發:使用Bootstrap 4實戰影音教學
最適合初學入門、現學現用的21堂關鍵課!
經典改版、全新Bootstrap 4降臨
HTML5早已成為許多人首選的跨平台工具,新一代智慧手機作業系統大量運用來開發應用程式,許多設備都支援HTML5,成為最主流的學習技術。本書以HTML5為主體,綜合當今熱門的跨平台網頁程式設計工具。不繞遠路,完整解秘各項技術,立即可用,提供最佳學習途徑!
【結合最新前端技術】
全面引進最新的前端框架與技術,無論是HTML5、CSS3、JavaScript、jQuery、jQuery Mobile或是Bootstrap 4,都能銜接學習而快速上手,打造符合新一代標準的跨平台網站。
全新Bootstrap 4為響應式網頁提供最亮眼的開發模式,全面更新開發工具、元件與擴增套件,讓跨平台網站擁有更好的使用接受度。改用Sass樣式語法,重寫所有JS的應用套件,加速網頁建構與讀取,更支援新一代的flexbox盒子模式,為網頁排版與版型配置提供無比的彈性。
【徹底掌握語法基礎】
透過詳細語法解說、大量圖表示意,引領了解各主題的核心概念與重點技術,並利用最適合的開發工具進行範例實作,徹底掌握語法與應用。
【立即套用海量範例】
每個主題都依功能別加入實用範例,可依架構學習,也可以依功能主題立即尋找可套用的範例。
【跨越平台行動優先】
面對行動裝置的普及,網頁就必須跨越不同螢幕尺寸,因應不同作業平台。書中將RWD網頁建置技術徹底解構,進而掌握從電腦到手機版網頁的設計心法,讓跨平台網頁製作更簡單!
【超值RWD影音教學】
提供RWD(Responsive Web Design,響應式網頁設計)使用Bootstrap 4的實戰影音教學,利用Bootstrap 4帶領您從無到有快速打造一個跨平台的RWD網站,快速提升開發實力!
超值學習資源:範例程式檔、100分鐘RWD網頁快速開發:使用Bootstrap 4實戰影音教學
-
第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章 JavaScrip 函式、陣列與物件
-
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 利用 avaScript存取元素節點
-
-
-
第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章 jQueryMobile入門
-
15.1 認識 jQueryMobile
-
15.2 jQueryMobile的安裝與使用
-
15.2.1 下載jQueryMobile資源
-
15.2.2 載入jQueryMobile頁面的函式庫與樣式檔
-
15.2.3 jQueryMobile的頁面結構
-
15.2.4 範例:單頁的jQueryMobile檔案
-
15.2.5 viewport 與 data-role
-
15.2.6 固定頁首頁尾
-
15.2.7 頁面預設的佈景主題
-
-
15.3 jQueryMobile的頁面連結
-
15.3.1 jQueryMobile超連結的方式
-
15.3.2 單檔多頁面的結構
-
15.3.3 在單檔多頁面中換頁
-
15.3.4 加入返回鈕
-
15.3.5 範例:單檔多頁的切換
-
15.3.6 多檔頁面之間的切換
-
15.3.7 其他的連結方式
-
15.3.8 頁面轉換特效
-
-
-
第16章jQueryMobile常用元件
-
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章 jQueryMobile互動
-
17.1 jQueryMobile表單
-
17.1.1 jQueryMobile表單傳送
-
17.1.2 文字欄位
-
17.1.3 日期時間欄位
-
17.1.4 滑桿及切換開關
-
17.1.5 核選方塊及選項按鈕
-
17.1.6 下拉式選單
-
17.1.7 取得表單欄位值
-
-
17.2 jQueryMobile事件
-
17.2.1 頁面事件
-
17.2.2 觸控事件
-
17.2.3 捲動事件
-
17.2.4 方向切換事件
-
17.2.5 初始化事件
-
-
17.3 jQueryMobile方法
-
17.3.1 頁面切換方法
-
17.3.2 載入外部頁面方法
-
-
-
第18章 Bootstrap入門
-
18.1 認識 Bootstrap
-
18.2 Bootstrap的安裝與使用
-
18.2.1 下載 Bootstrap資源
-
18.2.2 下載jQuery及Popper.js
-
18.2.3 載入Bootstrap函式庫與樣式檔
-
18.2.4 瀏覽器的支援度
-
18.2.5 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.2.3 水平佈局表單
-
-
19.3 Bootstrap的表單元素
-
19.3.1 輸入元素:<input>
-
19.3.2 文字區域元素:<textarea>
-
19.3.3 核取方塊元素:<checkbox>
-
19.3.4 單選鈕元素:<radio>
-
19.3.5 下拉式選項:<select>、<option>
-
-
19.4 Bootstrap表單狀態樣式
-
19.5 Bootstrap的按鈕
-
19.5.1 可成為按鈕的元素
-
19.5.2 按鈕的樣式
-
19.5.3 按鈕的大小
-
19.5.4 按鈕的啟用與禁用狀態
-
-
19.6 Bootstrap的圖片
-
19.6.1 自適應圖片
-
19.6.2 形狀圖片
-
-
-
第20章 Bootsrtap元件
-
20.1 下拉式選單
-
20.1.1 基本下拉式選單
-
20.1.2 加入標題及分隔線
-
20.1.3 設定啟用選項及禁用選項
-
20.1.4 反向展開選單
-
-
20.2 按鈕群組
-
20.2.1 群組按鈕的設定
-
20.2.2 分離式按鈕
-
20.2.3 有下拉式選單的巢狀群組按鈕
-
-
20.3 輸入群組
-
20.3.1 輸入群組的設定
-
20.3.2 附加核取方塊及單選鈕元素
-
20.3.3 附加按鈕元素
-
20.3.4 附加下拉式選單
-
20.3.5 附加分離式按鈕
-
20.3.6 附加多個按鈕
-
-
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.8 警告訊息及進度條
-
20.8.1 警告訊息
-
20.8.2 進度條
-
-
20.9 清單群組
-
20.9.1 清單群組的基本設定
-
20.9.2 清單連結及清單按鈕群組的設定
-
20.9.3 選項狀態與樣式的設定
-
20.9.4 加入標籤及標記
-
-
20.10 卡片元件
-
-
第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.4.1 折疊效果元件的使用
-
21.4.2 折疊效果元件的實作範例
-
-
21.5 手風琴效果元件
-
21.5.1 手風琴效果元件的結構
-
21.5.2 手風琴效果元件的使用
-
21.5.3 手風琴效果元件的實作範例
-
-
21.6 圖片輪播效果元件
-
21.6.1 圖片輪播效果元件的結構
-
21.6.2 圖片輪播效果元件的使用
-
21.6.3 圖片輪播效果元件的實作範例
-
-
- 出版地 : 臺灣
- 語言 : 繁體中文
評分與評論
請登入後再留言與評分