×
AI時代的網頁設計HTML、CSS、JavaScript、RWD、Bootstrap、Vue.js、jQuery(第九版)
作者: 陳惠貞
書號: AEL028100
出版日: 2025/11/12
ISBN:9786264252027
附件: 線上下載
定價: 620
電子書: 已出版
購買電子書
內容特色
這本經典暢銷書邁入第九版,感謝眾多讀者與授課教師的支持!
此次改版除了更新網頁設計相關技術的最新規格,更融入了與AI助理協同作業的觀念與技巧。
傳統以語法為導向的學習模式,在AI時代已轉向「以問題解決為核心」:面對需求時,先拆解問題規劃解法,接著才是撰寫程式碼、測試程式碼。
本書不只教您寫出正確語法,更培養能與 AI 高效溝通的問題解決能力,讓您能生成、審閱並測試出安全、正確且效能良好的程式碼。

★網頁設計小白一學就會★
語法教學、範例導向、全彩圖解、淺顯易懂!

★快速掌握網頁設計關鍵技術★
網羅最新技術、最新語法、活用熱門前端框架!
【HTML】、【CSS】與【JavaScript】是網頁設計最核心、也最基礎的技術,無論您是想從頭開發一個網頁或改寫既有的網頁,這三種技術都是必學的基本功。此外,我們還會介紹【響應式網頁設計 (RWD)】、【Bootstrap】、【Vue.js】、【jQuery】等進階的技術與前端框架,幫助您更有效率地開發網頁。

★與ChatGPT合作寫程式★
提示工程、拆解問題、生成程式碼、完整測試與除錯!
在本書中,我們會在章節的開頭講解重要的語法與主題,然後在結尾的地方透過【ChatGPT程式助理新思維】專欄,示範如何與AI助理協同作業,讓初學者不再糾結於繁瑣的語法,快速寫出正確、高效、有用的程式,相同的技巧也可以運用到Gemini、Copilot、Perplexity、Claude等AI助理!

★提示工程技巧大公開★
規劃網站架構與繪製網站地圖◎根據線框圖生成網頁、測試與修改◎查詢HTML元素的用途、語法及範例◎根據試算表或表格資料生成網頁、測試、修改與美化◎生成表單網頁、測試、修改與美化◎查詢CSS屬性、針對指定樣式與效果撰寫程式碼◎設定網頁的外觀◎查詢JavaScript語法、撰寫、解讀與轉換程式、註解、除錯◎撰寫綜所稅試算網頁◎查詢Bootstrap語法與元件、撰寫Bootstrap網頁。
章節目錄
Part 1 HTML
第1章 網頁設計基礎
1-1 網站建置流程
1-2 網站的 UI/UX 設計原則
1-3 網頁設計相關的程式語言
1-4 HTML 的發展
1-5 HTML 文件的開發環境
1-6 HTML 文件的基本結構
1-7 撰寫第一份 HTML 文件
◎ChatGPT 程式助理新思維:請 AI 助理扮演網頁設計專家
◎ChatGPT 程式助理新思維:規劃網站架構與繪製網站地圖
◎ChatGPT 程式助理新思維:查詢網頁技術、語法與撰寫程式

第2章 文件結構
2-1 HTML 文件的根元素- html元素
2-2 HTML 文件的標頭- head元素
2-3 HTML 文件的主體- body元素
2-4 HTML5 新增的結構元素
◎ChatGPT 程式助理新思維:根據線框圖生成網頁、測試與修改

第3章 資料編輯與格式化
3-1 區塊格式
3-2 文字格式
3-3 項目符號與編號- ul、ol、li元素
3-4 定義清單- dl、dt、dd元素
3-5 超連結
3-6 相對URL 的路徑資訊- base元素
◎ChatGPT 程式助理新思維:查詢 HTML 元素的用途、語法及範例

第4章 影音多媒體、表格與表單
4-1 嵌入圖片- img元素
4-2 嵌入影片- video元素
4-3 嵌入聲音- audio元素
4-4 設定媒體資源- source元素
4-5 嵌入不同的圖片- picture元素
4-6 嵌入物件- object元素
4-7 嵌入浮動框架- iframe元素
4-8 嵌入Script - script、noscript元素
4-9 表格元素
4-10 表單元素
◎ChatGPT 程式助理新思維:根據試算表或表格資料生成網頁、測試、修改與美化
◎ChatGPT 程式助理新思維:生成表單網頁、測試、修改與美化

Part 2 CSS
第5章 CSS 基本語法
5-1 CSS 的發展
5-2 在 HTML 文件中套用 CSS
5-3 CSS 的語法
5-4 選擇器的類型
5-5 樣式表的串接順序

第6章 常用的 CSS 屬性
6-1 色彩屬性
6-2 字型屬性
6-3 文字屬性
6-4 清單屬性
6-5 表格屬性
6-6 背景屬性
6-7 濾鏡屬性
6-8 漸層函式
6-9 變形屬性
6-10 轉場屬性
6-11 動畫屬性
◎ChatGPT 程式助理新思維:查詢 CSS 屬性、針對指定樣式與效果撰寫程式碼

第7章 Box Model 與定位方式
7-1 Box Model
7-2 邊界屬性
7-3 留白屬性
7-4 框線屬性
7-5 寬度與高度屬性
7-6 定位方式
◎ChatGPT 程式助理新思維:設定網頁的外觀

第8章 CSS 版面設計與媒體查詢
8-1 使用float 屬性進行版面設計
8-2 彈性盒子版面
8-3 網格版面
8-4 媒體查詢
◎ChatGPT 程式助理新思維:根據裝置的方向顯示不同的網頁內容

第9章 響應式網頁設計實例 (RWD)
9-1 開發適用於不同裝置的網頁
9-2 響應式網頁設計原則
9-3 手刻響應式網頁 (圖庫網站)

Part 3 JavaScript
第10章 JavaScript 基本語法
10-1 撰寫第一個JavaScript 程式
10-2 JavaScript 程式碼撰寫慣例
10-3 型別
10-4 變數
10-5 常數
10-6 運算子
10-7 流程控制
10-8 函式
10-9 變數的有效範圍
◎ChatGPT 程式助理新思維:查詢語法、撰寫、解讀與轉換程式、註解、除錯

第11章 物件與 DOM
11-1 認識物件
11-2 使用物件
11-3 內建物件
11-4 Window 物件
11-5 Location 物件
11-6 Navigator 物件
11-7 History 物件
11-8 Screen 物件
11-9 Document 物件
11-10 Element 物件

第12章 事件處理
12-1 事件驅動模式
12-2 事件的類型
12-3 定義事件處理程式 / 事件監聽程式
12-4 移除事件處理程式 / 事件監聽程式
12-5 Event 物件
12-6 事件處理範例
◎ChatGPT 程式助理新思維:撰寫綜所稅試算網頁

Part 4 前端框架
第13章 Bootstrap
13-1 撰寫Bootstrap 網頁
13-2 網格系統
13-3 內容樣式
13-4 公用類別
13-5 按鈕
13-6 表單
13-7 關閉按鈕 (Close button)
13-8 警報效果 (Alert)
13-9 下拉式清單 (Dropdown)
13-10 導覽列 (Navbar)
13-11 卡片 (Card)
13-12 輪播 (Carousel)
13-13 麵包屑導覽 (Pagination)
◎ChatGPT 程式助理新思維:查詢 Bootstrap 語法與元件、撰寫 Bootstrap 網頁

第14章 Vue.js
14-1 認識 Vue.js
14-2 安裝與使用 Vue.js
14-3 樣板語法
14-4 methods 與 computed 屬性
14-5 事件處理
14-6 表單欄位繫結
14-7 類別與樣式繫結
14-8 條件式渲染
14-9 清單渲染

第15章 jQuery 【PDF 電子書,請線上下載】
超值加贈
本書學習資源(範例檔、第15章 jQuery電子書)請線上下載,下載方式請見書內說明。
AI時代的網頁設計HTML、CSS、JavaScript、RWD、Bootstrap、Vue.js、jQuery(第九版) 分享
  • 作者: 陳惠貞
  • 書號:AEL028100
  • ISBN:9786264252027
  • 出版日:2025/11/12
  • 定價:$ 620
  • 電子書:已出版
  • 購買紙本書

    內容特色
    這本經典暢銷書邁入第九版,感謝眾多讀者與授課教師的支持!
    此次改版除了更新網頁設計相關技術的最新規格,更融入了與AI助理協同作業的觀念與技巧。
    傳統以語法為導向的學習模式,在AI時代已轉向「以問題解決為核心」:面對需求時,先拆解問題規劃解法,接著才是撰寫程式碼、測試程式碼。
    本書不只教您寫出正確語法,更培養能與 AI 高效溝通的問題解決能力,讓您能生成、審閱並測試出安全、正確且效能良好的程式碼。

    ★網頁設計小白一學就會★
    語法教學、範例導向、全彩圖解、淺顯易懂!

    ★快速掌握網頁設計關鍵技術★
    網羅最新技術、最新語法、活用熱門前端框架!
    【HTML】、【CSS】與【JavaScript】是網頁設計最核心、也最基礎的技術,無論您是想從頭開發一個網頁或改寫既有的網頁,這三種技術都是必學的基本功。此外,我們還會介紹【響應式網頁設計 (RWD)】、【Bootstrap】、【Vue.js】、【jQuery】等進階的技術與前端框架,幫助您更有效率地開發網頁。

    ★與ChatGPT合作寫程式★
    提示工程、拆解問題、生成程式碼、完整測試與除錯!
    在本書中,我們會在章節的開頭講解重要的語法與主題,然後在結尾的地方透過【ChatGPT程式助理新思維】專欄,示範如何與AI助理協同作業,讓初學者不再糾結於繁瑣的語法,快速寫出正確、高效、有用的程式,相同的技巧也可以運用到Gemini、Copilot、Perplexity、Claude等AI助理!

    ★提示工程技巧大公開★
    規劃網站架構與繪製網站地圖◎根據線框圖生成網頁、測試與修改◎查詢HTML元素的用途、語法及範例◎根據試算表或表格資料生成網頁、測試、修改與美化◎生成表單網頁、測試、修改與美化◎查詢CSS屬性、針對指定樣式與效果撰寫程式碼◎設定網頁的外觀◎查詢JavaScript語法、撰寫、解讀與轉換程式、註解、除錯◎撰寫綜所稅試算網頁◎查詢Bootstrap語法與元件、撰寫Bootstrap網頁。
    章節目錄
    Part 1 HTML
    第1章 網頁設計基礎
    1-1 網站建置流程
    1-2 網站的 UI/UX 設計原則
    1-3 網頁設計相關的程式語言
    1-4 HTML 的發展
    1-5 HTML 文件的開發環境
    1-6 HTML 文件的基本結構
    1-7 撰寫第一份 HTML 文件
    ◎ChatGPT 程式助理新思維:請 AI 助理扮演網頁設計專家
    ◎ChatGPT 程式助理新思維:規劃網站架構與繪製網站地圖
    ◎ChatGPT 程式助理新思維:查詢網頁技術、語法與撰寫程式

    第2章 文件結構
    2-1 HTML 文件的根元素- html元素
    2-2 HTML 文件的標頭- head元素
    2-3 HTML 文件的主體- body元素
    2-4 HTML5 新增的結構元素
    ◎ChatGPT 程式助理新思維:根據線框圖生成網頁、測試與修改

    第3章 資料編輯與格式化
    3-1 區塊格式
    3-2 文字格式
    3-3 項目符號與編號- ul、ol、li元素
    3-4 定義清單- dl、dt、dd元素
    3-5 超連結
    3-6 相對URL 的路徑資訊- base元素
    ◎ChatGPT 程式助理新思維:查詢 HTML 元素的用途、語法及範例

    第4章 影音多媒體、表格與表單
    4-1 嵌入圖片- img元素
    4-2 嵌入影片- video元素
    4-3 嵌入聲音- audio元素
    4-4 設定媒體資源- source元素
    4-5 嵌入不同的圖片- picture元素
    4-6 嵌入物件- object元素
    4-7 嵌入浮動框架- iframe元素
    4-8 嵌入Script - script、noscript元素
    4-9 表格元素
    4-10 表單元素
    ◎ChatGPT 程式助理新思維:根據試算表或表格資料生成網頁、測試、修改與美化
    ◎ChatGPT 程式助理新思維:生成表單網頁、測試、修改與美化

    Part 2 CSS
    第5章 CSS 基本語法
    5-1 CSS 的發展
    5-2 在 HTML 文件中套用 CSS
    5-3 CSS 的語法
    5-4 選擇器的類型
    5-5 樣式表的串接順序

    第6章 常用的 CSS 屬性
    6-1 色彩屬性
    6-2 字型屬性
    6-3 文字屬性
    6-4 清單屬性
    6-5 表格屬性
    6-6 背景屬性
    6-7 濾鏡屬性
    6-8 漸層函式
    6-9 變形屬性
    6-10 轉場屬性
    6-11 動畫屬性
    ◎ChatGPT 程式助理新思維:查詢 CSS 屬性、針對指定樣式與效果撰寫程式碼

    第7章 Box Model 與定位方式
    7-1 Box Model
    7-2 邊界屬性
    7-3 留白屬性
    7-4 框線屬性
    7-5 寬度與高度屬性
    7-6 定位方式
    ◎ChatGPT 程式助理新思維:設定網頁的外觀

    第8章 CSS 版面設計與媒體查詢
    8-1 使用float 屬性進行版面設計
    8-2 彈性盒子版面
    8-3 網格版面
    8-4 媒體查詢
    ◎ChatGPT 程式助理新思維:根據裝置的方向顯示不同的網頁內容

    第9章 響應式網頁設計實例 (RWD)
    9-1 開發適用於不同裝置的網頁
    9-2 響應式網頁設計原則
    9-3 手刻響應式網頁 (圖庫網站)

    Part 3 JavaScript
    第10章 JavaScript 基本語法
    10-1 撰寫第一個JavaScript 程式
    10-2 JavaScript 程式碼撰寫慣例
    10-3 型別
    10-4 變數
    10-5 常數
    10-6 運算子
    10-7 流程控制
    10-8 函式
    10-9 變數的有效範圍
    ◎ChatGPT 程式助理新思維:查詢語法、撰寫、解讀與轉換程式、註解、除錯

    第11章 物件與 DOM
    11-1 認識物件
    11-2 使用物件
    11-3 內建物件
    11-4 Window 物件
    11-5 Location 物件
    11-6 Navigator 物件
    11-7 History 物件
    11-8 Screen 物件
    11-9 Document 物件
    11-10 Element 物件

    第12章 事件處理
    12-1 事件驅動模式
    12-2 事件的類型
    12-3 定義事件處理程式 / 事件監聽程式
    12-4 移除事件處理程式 / 事件監聽程式
    12-5 Event 物件
    12-6 事件處理範例
    ◎ChatGPT 程式助理新思維:撰寫綜所稅試算網頁

    Part 4 前端框架
    第13章 Bootstrap
    13-1 撰寫Bootstrap 網頁
    13-2 網格系統
    13-3 內容樣式
    13-4 公用類別
    13-5 按鈕
    13-6 表單
    13-7 關閉按鈕 (Close button)
    13-8 警報效果 (Alert)
    13-9 下拉式清單 (Dropdown)
    13-10 導覽列 (Navbar)
    13-11 卡片 (Card)
    13-12 輪播 (Carousel)
    13-13 麵包屑導覽 (Pagination)
    ◎ChatGPT 程式助理新思維:查詢 Bootstrap 語法與元件、撰寫 Bootstrap 網頁

    第14章 Vue.js
    14-1 認識 Vue.js
    14-2 安裝與使用 Vue.js
    14-3 樣板語法
    14-4 methods 與 computed 屬性
    14-5 事件處理
    14-6 表單欄位繫結
    14-7 類別與樣式繫結
    14-8 條件式渲染
    14-9 清單渲染

    第15章 jQuery 【PDF 電子書,請線上下載】
    超值加贈
    本書學習資源(範例檔、第15章 jQuery電子書)請線上下載,下載方式請見書內說明。