0人評分過此書

學好跨平台網頁設計:HTML5、CSS3、JavaScript、jQuery與Bootstrap 5超完美特訓班

出版日期
2021
閱讀格式
PDF
書籍分類
學科分類
ISBN
9789865029074

本館館藏

借閱規則
當前可使用人數 30
借閱天數 14
線上看 0
借閱中 0
選擇分享方式

推薦本館採購書籍

您可以將喜歡的電子書推薦給圖書館,圖書館會參考讀者意見進行採購

讀者資料
圖書館
* 姓名
* 身分
系所
* E-mail
※ 我們會寄送一份副本至您填寫的Email中
電話
※ 電話格式為 區碼+電話號碼(ex. 0229235151)/ 手機格式為 0900111111
* 請輸入驗證碼
內容簡介:最熱門的跨平台網頁設計技術大集合!
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 圖片輪播效果元件的實作範例

評分與評論

請登入後再留言與評分
幫助
您好,請問需要甚麼幫助呢?
使用指南

客服專線:0800-000-747

服務時間:週一至週五 AM 09:00~PM 06:00

loading