簡介 這是一本內容非常齊全的網頁設計書籍，網羅最新技術、最新語法、最多範例，包含下列的【7大主題】和【超過700個範例程式】，全彩印刷，圖解詳盡，觀念正確，讓讀者快速學會網頁設計的關鍵技術！ ．HTML ．CSS ．JavaScript ．Bootstrap ．jQuery ．Vue.js ．響應式網頁設計 (RWD) 除了分篇分章進行語法教學，目前最熱門的【ChatGPT】也是重要主題，我們會介紹如何使用ChatGPT學習網頁設計，包括撰寫網頁程式、解讀網頁程式、加註解、除錯、查詢語法、尋求技術支援、出題練習、解題、與其它程式語言做轉換等。 為了讓讀者體驗如何將各種語法活用到實際的網頁設計，不再陷入只會語法，卻不知如何活用的窘境，我們設計了【三大響應式網頁範例】－【圖庫網站】、【旅遊網站】和【部落格網站】，其中第一個範例是使用HTML和CSS手刻響應式網頁，而第二、三個範例是使用HTML、CSS和Bootstrap開發響應式網頁，這些範例均相當精美，對於設計人員開發網頁、老師設計教學範例、學生製作專題或參加競賽都極具參考價值。 學習重點------------------------------------------------------------ 【第0章－ChatGPT】 在本章中，我們會介紹如何使用ChatGPT學習網頁設計，例如撰寫網頁程式、解讀網頁程式、加註解、除錯、查詢語法、尋求技術支援、出題練習、解題、與其它程式語言做轉換等。 【第1篇－HTML】 HTML可以用來定義網頁的內容，開發各種網頁應用程式。在本篇中，我們會介紹HTML常用的元素，例如文件結構、資料編輯與格式化、嵌入內容、表格、表單等。 【第2篇－CSS】 CSS可以用來定義網頁的外觀，包括編排、顯示、格式化及特殊效果。在本篇中，我們會介紹CSS常用的屬性，例如色彩、字型、文字、清單、Box Model、定位方式、背景、漸層、濾鏡、表格、Flexbox Layout、Grid Layout、變形、轉場、動畫、媒體查詢等。 【第3篇－JavaScript】 JavaScript可以用來定義網頁的行為，在本篇中，我們會介紹JavaScript的基本語法，包括型別、變數、常數、運算子、流程控制、函式、物件等，還會介紹JavaScript在瀏覽器端的應用，也就是如何利用JavaScript讓靜態網頁具有動態效果，包括文件物件模型 (DOM)、瀏覽器物件模型 (BOM)、事件處理等。 【第4篇－網頁前端框架】 除了最核心的HTML、CSS和JavaScript，還有許多應用於JavaScript程式開發的函式庫與框架，在本篇中，我們會介紹下列幾種技術： ．Bootstrap：是很受歡迎的HTML、CSS與JavaScript框架，用來開發響應式 (responsive)、行動優先 (mobile first) 的網頁，使用者無須撰寫CSS或JavaScript程式碼，就可以輕鬆設計出響應式網頁。 ．jQuery：是一個快速、輕巧、功能強大的JavaScript函式庫，透過它所提供的API，可以讓諸如操作HTML文件、選擇HTML元素、處理事件、建立特效、使用Ajax技術等動作變得更簡單。 ．Vue.js：這個JavaScript函式庫，提供API讓Web開發人員進行資料繫結及操作網頁上的元素，解決畫面顯示與資料狀態同步的問題。 此外，我們還會介紹【響應式網頁設計】(RWD，Responsive Web Design)，這是一種網頁設計方式，目的是根據使用者的瀏覽器環境 (例如寬度或方向等)，自動調整網頁的版面配置，以提供最佳的顯示結果，同時設計了【3大響應式網頁範例】－圖庫網站、旅遊網站、部落格網站，讓您不只懂語法，更懂如何運用到實際的網頁設計。 目錄 第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 清單渲染