書名：網頁設計完全攻略HTML、CSS、JavaScript、Bootstrap、jQuery、Vue.js、RWD｜搭配ChatGPT效率加倍

作者簡介

書籍目錄

第00章　網頁設計 x ChatGPT
　　0-1　開始使用 ChatGPT
　　0-2　查詢網頁設計相關的語法
　　0-3　查詢網頁設計相關的技術建議
　　0-4　撰寫網頁程式與除錯
　　0-5　與其它程式語言互相轉換
　　0-6　提供練習測驗與解答

【Part 1　HTML】
第01章　網頁設計基礎
　　1-1　網站建置流程
　　1-2　網頁設計相關的程式語言
　　1-3　HTML 的發展
　　1-4　HTML 文件的編輯工具
　　1-5　HTML 文件的基本結構
　　1-6　撰寫第一份 HTML 文件
第02章　文件結構
　　2-1 HTML 文件的根元素 - html 元素
　　2-2 HTML 文件的標頭 - head 元素
　　2-3 HTML 文件的主體 - body 元素
　　2-4 HTML5 新增的結構元素
第03章　資料編輯與格式化
　　3-1　區塊格式
　　3-2　文字格式
　　3-3　插入或刪除資料 - ins、del 元素
　　3-4　項目符號與編號 - ul、ol、li 元素
　　3-5　定義清單 - dl、dt、dd 元素
　　3-6　超連結
　　3-7　相對 URL 的路徑資訊 base 元素
第04章　嵌入內容
　　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 元素
第05章　表格
　　5-1　 建立表格 - table、tr、th、td 元素
　　5-2　 表格標題 - caption 元素
　　5-3　 表格的表頭、主體與表尾 - thead、tbody、tfoot 元素
　　5-4　 直行式表格 - colgroup、col 元素
第06章　表單
　　6-1　建立表單 - form、input 元素
　　6-2　HTML4.01 提供的輸入類型
　　6-3　HTML5 新增的輸入類型
　　6-4　按鈕 - button 元素
　　6-5　標籤 - label 元素
　　6-6　選項群組 - optgroup 元素
　　6-7　將表單欄位群組起來 - fieldset、legend 元素

【Part 2　CSS】
第07章　CSS 基本語法
　　7-1　CSS 的發展
　　7-2　在 HTML 文件中套用 CSS
　　7-3　CSS 的語法
　　7-4　選擇器的類型
　　7-5　樣式表的串接順序
第08章　色彩、字型、文字與清單
　　8-1　色彩屬性
　　8-2　字型屬性
　　8-3　文字屬性
　　8-4　清單屬性
第09章　Box Model 與定位方式
　　9-1　Box Model
　　9-2　邊界屬性
　　9-3　留白屬性
　　9-4　框線屬性
　　9-5　寬度與高度屬性
　　9-6　定位方式
第10章　背景、漸層、濾鏡與表格
　　10-1 背景屬性
　　10-2 漸層函式
　　10-3 濾鏡屬性
　　10-4 表格屬性
第11章　CSS 版面設計
　　11-1　使用 float 屬性進行版面設計
　　11-2　彈性盒子版面
　　11-3　格線版面
第12章　變形、轉場、動畫與媒體查詢
　　12-1　變形屬性
　　12-2　轉場屬性
　　12-3　動畫屬性
　　12-4　媒體查詢
第13章　響應式網頁設計實例―圖庫網站
　　13-1　開發適用於不同裝置的網頁
　　13-2　響應式網頁設計原則
　　13-3　手刻響應式網頁（圖庫網站）
　　13-4　手刻導覽按鈕（漢堡選單）
　　13-5　重置 CSS

【Part 3　JavaScript】
第14章　JavaScript 基本語法
　　14-1　撰寫第一個 JavaScript 程式
　　14-2　JavaScript 程式碼撰寫慣例
　　14-3　型別
　　14-4　變數
　　14-5　常數
　　14-6　運算子
　　14-7　流程控制
　　14-8　函式
　　14-9　變數的有效範圍
第15章　JavaScript 內建物件
　　12-1　認識物件
　　12-2　使用物件
　　12-3　內建物件
第16章　文件物件模型 (DOM)
　　16-1　認識 DOM
　　16-2　取得元素節點
　　16-3　走訪節點
　　16-4　取得 / 設定元素的屬性值與文字內容
　　16-5　新增 / 取代 / 移除節點
　　16-6　存取表單元素
　　16-7　操作 CSS 樣式表
第17章　瀏覽器物件模型 (BOM)
　　17-1　認識 BOM
　　17-2　Window 物件
　　17-3　Location 物件
　　17-4　Navigator 物件
　　17-5　History 物件
　　17-6　Screen 物件
　　17-7　Document 物件
第18章　事件處理
　　18-1　事件驅動模式
　　18-2　事件的類型
　　18-3　定義事件處理程式 / 事件監聽程式
　　18-4　移除事件處理程式 / 事件監聽程式
　　18-5　Event 物件
　　18-6　事件處理範例

【Part 4　網頁前端框架】
第19章　Bootstrap 網格系統
　　19-1　撰寫 Bootstrap 網頁
　　19-2　使用 Bootstrap 網格系統
第20章　Bootstrap 樣式
　　20-1　內容樣式
　　20-2　公用類別
　　20-3　按鈕
　　20-4　表單
第21章　Bootstrap 元件
　　21-1 關閉按鈕 (Close button)
　　21-2 警報效果 (Alert)
　　21-3 下拉式清單 (Dropdown)
　　21-4 按鈕群組 (Button group)
　　21-5 導覽與標籤頁 (Nav and tab)
　　21-6 導覽列 (Navbar)
　　21-7 卡片 (Card)
　　21-8 工具提示 (Tooltip)
　　21-9 彈出提示 (Popover)
　　21-10 摺疊 (Collapse)
　　21-11 手風琴效果 (Accordion)
　　21-12 輪播 (Carousel)
　　21-13 分頁導覽 (Pagination)
第22章　響應式網頁設計實例 - 旅遊網站
　　22-1 「快樂旅遊」網站
　　22-2 設計網頁樣板
　　22-3 設計導覽列
　　22-4 設計輪播
　　22-5 設計內容區 - 警報效果
　　22-6 設計內容區 - 卡片
　　22-7 設計頁尾
第23章　響應式網頁設計實例 - 部落格網站
　　23-1 「快樂部落格」網站
　　23-2 設計網頁樣板
　　23-3 設計頁首、導覽列與介紹區
　　23-4 設計內容區
　　23-5 設計頁尾
第24章　jQuery
　　24-1　認識 jQuery
　　24-2　取得 jQuery 核心
　　24-3　使用 jQuery 核心
　　24-4　事件處理
　　24-5　特效與動畫
第25章　Vue.js
　　25-1 認識 Vue.js
　　25-2 安裝與使用 Vue.js
　　25-3 樣板語法
　　25-4 methods 與 computed 屬性
　　25-5 事件處理
　　25-6 表單欄位繫結
　　25-7 類別與樣式繫結
　　25-8 條件式渲染
　　25-9 清單渲染

推薦序/導讀/自序

序
HTML、CSS與JavaScript是網頁設計最核心也最基礎的技術，無論您是想從頭開發一個網頁或改寫既有的網頁，這三種技術都是必學的基本功。此外，我們還會介紹響應式網頁設計 (RWD)、Bootstrap、jQuery、Vue.js等進階的技術，幫助您更有效率地開發網頁。
在ChatGPT橫空出世後，有不少人驚覺「寫程式」即將被AI工具取代，但這並不表示您就不用學程式設計，而是程式設計師必須要進化為AI工具的程式審查員或教AI學習的老師。在本書的一開始，我們先告訴您如何使用ChatGPT學習網頁設計並撰寫網頁程式，集中在一個章節，讓您有系統地學習。
本書封面圖像與部分範例圖片是以Midjourney所生成，希望透過這樣的方式，讓讀者感受到生成式AI工具的落地應用。如果對Midjourney生圖有興趣，敬請參考 《Midjourney AI圖像魔導書》 一書。