跟著實務學習HTML、CSS、JavaScript、Bootstrap、jQuery網頁設計(含ITS HTML&CSS國際認證模擬試題) (1版)

類似書籍推薦給您

【簡介】 本書主要介紹網站開發的前端技術為主，以HTML 5、CSS 3、JavaScript、jQuery為基礎，搭配最新的Bootstrap 5前端框架開發行動優先的響應式網頁，逐步引導初學者邁向網頁設計高手的坦途。 【快速上手HTML5語法】 使用大量範例輔助學習HTML與CSS，使初學者快速進入網頁開發領域。 【CSS3排版】 以豐富的案例介紹CSS文字樣式、段落、列表、區域設計，精進排版技巧。 【CSS3動畫】 學習控制網頁元素變形、轉換與動畫設計，讓網頁的視覺呈現更加豐富。 【JavaScript程式】 從零開始學習JavaScript，由變數宣告、選擇結構、重複結構、陣列到函式，沒有艱澀專業用詞，讓初學者不再害怕程式設計。 【Bootstrap元件與互動組件】 使用Bootstrap元件，如表單、按鈕、表格、縮圖、卡片、廣告看板與格線系統與互動組件，快速打造具使用者體驗的跨平台RWD響應式網站。 【jQuery互動應用】 透過jQuery函式選擇元素進行互動、選取表單資料、呼叫動畫函式與替換樣式，打造良好的酷炫效果與互動網頁。 【RWD網站實戰】 實作具實務案例與行動優先的跨平台網頁，讓初學者的學習展現成果。 【ITS HTML&CSS國際證照訓練】 內文涵蓋ITS HTML&CSS國際認證技能知識，並提供模擬試題訓練，讓讀者除了擁有實作的能力，更擁有國際認證證明自己。【目錄】 Ch1 認識HTML與網頁開發工具 1.1 網頁開發技術簡介 1.2 HTML 簡介 1.3 RWD 響應式網頁設計概念與優缺點 1.4 HTML5 支援的瀏覽器 1.5 HTML5 開發工具 Ch2 網頁圖文、超連結、音效與影片 2.1 HTML5 網頁文件結構 2.2 段落設定 2.3 超連結 2.4 圖片、音效與影片 2.5 語意標籤 Ch3 表格的設計 3.1 表格的功能 3.2 表格的組成 3.3 表格常用的屬性 3.4 表格排版實例-旅遊相簿 Ch4 表單的設計 4.1 表單的建立 4.2 表單欄位類型簡介 4.3 表單欄位的使用 4.4 表單欄位常用的屬性 4.5 表單欄位顯示名稱 label標籤 4.6 表單欄位外框 Ch5 CSS基礎 5.1 CSS 的演進與特色 5.2 CSS 基本語法 5.3 CSS 套用方法 5.4 CSS 各類選擇器 Ch6 CSS顏色、文字、段落與列表設計 6.1 顏色設定 6.2 文字設定 6.3 段落設定 6.4 項目清單設定 Ch7 CSS背景、區域與外框設計 7.1 背景與圖片設定 7.2 版面定位 7.3 框線變化設定 7.4 表格設定 7.5 陰影與漸層 7.6 媒體查詢 7.7 CSS 網頁範例 Ch8 CSS變形、轉換與動畫設計 8.1 變形效果 8.2 轉場效果 8.3 動畫效果 Ch9 JavaScript語言、變數與運算子 9.1 JavaScript 基本功能介紹 9.2 JavaScript 程式碼位置 9.3 JavaScript 變數的使用 9.4 JavaScript 運算子 9.5 JavaScript 常用輸出入方法 Ch10 JavaScript流程控制 10.1 選擇敘述 10.2 迴圈敘述 Ch11 JavaScript陣列與函式 11.1 陣列 11.2 函式 11.3 習題 Ch12 jQuery 基礎與選擇器的使用 12.1 jQuery 特色與功能 12.2 jQuery 語法 12.3 jQuery 選擇器使用 Ch13 jQuery函式、特效與事件應用 13.1 與DOM 元素互動 13.2 與元素的CSS 互動 13.3 事件處理 13.4 特效應用 13.5 jQuery 網頁開發實例 Ch14 Bootstrap 套件與基礎元件使用 14.1 Bootstrap 簡介與下載 14.2 格線系統 14.3 Bootstrap 常用元件 Ch15 Bootstrap JS 互動組件 15.1 標籤頁組件(Bootstrap JS Tab) 15.2 圖片輪播組件(Bootstrap JS Carousel) 15.3 互動視窗組件(Bootstrap JS Modal) 15.4 手風琴組件(Bootstrap JS Collapse) 15.5 實例-科技公司資訊網 附錄 A：ITS HTML & CSS 國際認證模擬試題【A 卷】 附錄 B：ITS HTML & CSS 國際認證模擬試題【B 卷】

AI時代的網頁設計HTML、CSS、JavaScript、RWD、Bootstrap、Vue.js、jQuery (9版)

類似書籍推薦給您

【簡介】 　　這本經典暢銷書邁入第九版，感謝眾多讀者與授課教師的支持！  　　此次改版除了更新網頁設計相關技術的最新規格，更融入了與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 電子書，請線上下載】  

HTML/CSS/JavaScript與前端框架的完美結合：使用Bootstrap與PWA技術，新手從這開始！(AI加強版) (4版)

類似書籍推薦給您

【簡介】 全新章節教您巧妙運用AI，讓寫程式更有效率！！ 掌握HTML/CSS/JavaScript技巧， 搭配高效前端框架技術，輕鬆成為專業網頁設計師 　　以淺顯易懂的方式從設計網站開始談起，從網站建置的過程、設計網站原型(prototyping)的工具以及取得各式網路資源，再循序漸進介紹Web前端三大核心技術：HTML、CSS及JavaScript，並加入前端框架Bootstrap技術，加上書中介紹好用的配色工具，就算沒有美工基礎，藉由Bootstrap工具模組以及配色表，也能快速建構出專業美觀的RWD網站。 　　本書也安排了Progressive Web Application(PWA)技術，手把手教您逐步將網站優化為Web APP，讓網站能像Native App在手機等行動裝置建立桌面捷徑，瀏覽網頁時具有操作Native App相似的感受。 　　本書共分三大單元，第一單元為前端開發觀念及HTML+CSS基礎到進階教學；第二單元安排JavaScript基礎的語法以及Web資料庫的應用；第三單元介紹前端框架工具，包括Bootstrap與PWA。各章節除了實用的範例之外，在每一單元也安排了整合練習，讓讀者能加強學習並驗收學習成果，累積實作經驗，適合自修與教學使用。 　　本次改版新增了一個全新的章節「善用ChatGPT寫JavaScript程式」。透過這個章節，讀者可以學習如何應用AI，來協助自己更有效率地撰寫程式。 　　|重點特色| 　　✰以淺顯易懂的方式快速了解前端開發的觀念及技術。 　　✰熟悉網站原型(prototyping)並善用網路工具與資源加以實作。 　　✰循序漸進介紹 Web 前端三大核心技術：HTML、CSS 及 JavaScript。 　　✰活用前端框架 Bootstrap 技術以及工具模組，建構 RWD 網站。 　　✰使用 Progressive Web Application(PWA)技術，逐步將網站優化為 Web APP。 　　✰學習如何聰明使用 ChatGPT 來協助程式開發。 　　|適用對象| 　　✰對前端技術有興趣卻不知從何入門的初學者 　　✰前端開發技術相關從業人員 　　✰大專院校網站設計相關課程教材  【目錄】 CHAPTER 01 網站開發的觀念與技術 1-1 網站開發的基礎觀念 1-1-1 網站及網頁 1-1-2 網頁開發的前端與後端 1-1-3 網址的組成 1-2 網站建置流程與技術 1-2-1 擬定網站主題 1-2-2 規劃網站架構與內容 1-2-3 製作網頁工具 1-2-4 上傳雲端 1-3 網頁介面原型建構工具 1-3-1 網站原型架構 1-3-2 介面線框與原型工具 1-3-3 實作網頁介面原型 CHAPTER 02 HTML與CSS基礎 2-1 學習HTML前的準備工作 2-1-1 建立HTML文件 2-1-2 自動生成HTML5架構程式碼 2-2 HTML語法概念與架構 2-2-1 HTML的標記型態 2-2-2 HTML的組成 2-2-3 標記屬性的運用 2-3 HTML5文件結構與語意標記 2-3-1 語意化的HTML標記 2-3-2 HTML5宣告與編碼設定 2-4 認識CSS基本架構 2-4-1 使用CSS樣式表 2-4-2 CSS基本格式 2-4-3 認識CSS選擇器 2-4-4 CSS的度量單位 2-4-5 CSS的顏色表示法 CHAPTER 03 HTML常用標記 3-1 排版相關標記 3-1-1 瀏覽器呈現網頁的過程 3-1-2 標題標記 3-1-3 段落及換行標記 3-2 項目列表清單 3-2-1 有序列表 3-2-2 無序列表清單 3-2-3 定義列表 3-3 表格與表單 3-3-1 表格 3-3-2 表單 3-3-3 表單元件 3-4 插入圖片與超連結 3-4-1 插入圖片 3-4-2 超連結 3-4-3 內置框架（iframe） 3-5 div標記與span標記 3-5-1 認識div標記 3-5-2 認識span標記 3-5-3 替程式碼加上註解 3-5-4 使用特殊符號及Emoji字符集 CHAPTER 04 CSS常用語法 4-1 文字與段落樣式 4-1-1 文字樣式 4-1-2 文字段落樣式 4-1-3 邊框 4-1-4 文繞圖 4-2 掌握CSS定位 4-2-1 網頁元件的定位（position） 4-2-2 立體網頁的定位 4-2-3 好用的calc()函式 CHAPTER 05 CSS Flexbox響應式排版 5-1 Flexbox模型概念 5-1-1 認識CSS盒子模型（Box Model） 5-1-2 認識Flexbox彈性盒子 5-2 Flexbox屬性 5-2-1 fl¬ex container屬性 5-2-2 ¬flex Items屬性 CHAPTER 06 善用網路資源 6-1 圖庫素材分享平台 6-1-1 認識創用CC授權 6-1-2 搜尋CC授權素材 6-1-3 Icon nder-icon圖庫 6-1-4 替網站加入Logo小圖示 6-2 實用的網頁應用產生器 6-2-1 CSS Layout產生器 6-2-2 按鈕產生器 6-2-3 網站配色 CHAPTER 07 整合練習—詩詞展示網頁設計與實作 7-1 網頁架構說明 7-1-1 網頁架構圖 7-1-2 選擇合適的HTML標記 7-2 建立HTML與CSS程式碼 7-2-1 建立網頁架構的HTML語法 7-2-2 加入超連結 7-2-3 加入CSS語法 7-2-4 加入偽元素 7-2-5 利用Icon Fonts產生社群圖示 CHAPTER 08 JavaScript基礎 8-1 認識JavaScript 8-1-1 JavaScript基本觀念 8-1-2 JavaScript運行環境 8-1-3 瀏覽器主控台console 8-1-4 JavaScript語法架構 8-2 JavaScript基礎語法 8-2-1 JavaScript語法架構 8-2-2 JavaScript註解符號 8-2-3 資料型別（Data Type） 8-3 變數宣告與作用範圍 8-3-1 全域變數與區域變數 8-3-2 使用var關鍵字宣告變數 8-3-3 var宣告的作用域 8-3-4 使用Let關鍵字宣告變數 8-3-5 使用const關鍵字宣告常數 8-3-6 變數名稱的限制 CHAPTER 09 函式與作用域 9-1 自訂函式 9-1-1 函式的定義與呼叫 9-1-2 函式參數 9-1-3 函式回傳值 9-2 函式的多重用法 9-2-1 函式宣告式（Function Declaration） 9-2-2 函式表達式（Function Expressions） 9-2-3 物件與this關鍵字 9-2-4 立即執行函式（IIFE） CHAPTER 10 JavaScript操控DOM元素 10-1 DOM物件的方法與屬性 10-1-1 取得物件資訊 10-1-2 處理物件節點 10-1-3 屬性的讀取與設定 10-2 DOM物件的操作 10-2-1 Window物件 10-2-2 DOM集合（Collection） 10-3 DOM風格樣式 10-3-1 查詢元素樣式 10-3-2 設定元件樣式 CHAPTER 11 前端資料儲存 11-1 認識Web Storage 11-1-1 Web Storage概念 11-1-2 偵測瀏覽器是否支援Web Storage 11-2 localStorage及sessionStorage 11-2-1 存取localStorage 11-2-2 刪除localStorage 11-2-3 存取sessionStorage 11-3 IndexedDB資料庫 11-3-1 IndexedDB重要概念 11-3-2 IndexedDB基本操作 11-3-3 讀取資料 11-3-4 刪除資料 11-3-5 清空資料 CHAPTER 12 整合練習—個人通訊錄實作 12-1 網頁架構說明 12-1-1 網頁功能架構圖及線框圖 12-1-2 CSS Image Sprites 12-2 IndexedDB的CURD 12-2-1 建置資料庫物件及開啟交易 12-2-2 設定事件的處理函式 12-2-3 新增會員與新增完成 12-2-4 動態產生資料列表 12-2-5 修改與刪除單筆資料 12-2-6 清空資料與刪除資料庫 12-2-7 阻止事件傳遞與預設行為 CHAPTER 13 響應式網頁框架—Bootstrap 13-1 認識Bootstrap 13-1-1 為什麼要使用Bootstrap 13-1-2 下載Bootstrap 13-1-3 RWD的設計理念 13-2 Bootstrap排版 13-2-1 斷點（Breakpoint）與容器（Container） 13-2-2 了解Grid System 13-2-3 Viewport與Media queries 13-3 Bootstrap的樣式 13-3-1 Bootstrap通用顏色 13-3-2 Bootstrap間距 13-3-3 Bootstrap寬度與高度 13-3-4 Bootstrap文字 13-4 圖片與表格 13-4-1 響應式圖片 13-4-2 邊框圓角 13-4-3 建立Bootstrap表格 CHAPTER 14 Bootstrap擴充元件庫 14-1 導覽與選單 14-1-1 導覽列（Navigation Bar） 14-2 表單與按鈕 14-2-1 表單控制元件 14-2-2 表單排版 14-3 輪播元件（Carousel） 14-3-1 基本的輪播效果 14-3-2 利用JavaScript控制輪播 CHAPTER 15 PWA實作—我的記帳本Web App 15-1 實作「我的記帳本」網頁 15-1-1 「我的記帳本」網頁功能與介面 15-1-2 下拉式選單 15-1-3 按鈕群組 15-1-4 互動視窗 15-1-5 IndexedDB關鍵字查詢 15-1-6 善用Bootstrap Icons製作小圖示 15-2 將網頁轉換成PWA 15-2-1 什麼是PWA 15-2-2 製作各種尺寸的App圖示按鈕 15-2-3 將網頁變成PWA CHAPTER 16 善用ChatGPT 寫 JavaScript 程式 16-1 AI人工智慧聊天機器人 16-1-1 認識ChatGPT 16-1-2 認識聊天機器人 16-1-3 聊天機器人的種類 16-2 ChatGPT初體驗 16-2-1 寫在使用ChatGPT之前 16-2-2 註冊免費ChatGPT帳號 16-2-3 與ChatGPT文字對談 16-2-4 開啟新的對話與登出ChatGPT 16-3 使用ChatGPT寫JavaScript程式 16-3-1 利用ChatGPT AI撰寫JavaScript程式 16-3-2 複製ChatGPT寫的程式碼 16-4 ChatGPT AI JavaScript程式範例集 16-4-1 實作基本的計算機 16-4-2 模擬大樂透的開獎程式 16-4-3 實作具有時針、分針、秒針的時鐘 16-4-4 製作電子簽名板 16-4-5 實作簡單的貪吃蛇遊戲 16-5 課堂上學不到的ChatGPT使用秘訣 16-5-1 善用ChatGPT指令大全 16-5-2 GPT-3.5與GPT-4

HTML/CSS/JavaScript與前端框架的完美結合：使用Bootstrap與PWA技術，新手從這開始！(好評回饋版) (3版)

類似書籍推薦給您

【簡介】 精采內容不容錯過，好評回饋中！！ 掌握HTML/CSS/JavaScript技巧， 搭配高效前端框架技術，輕鬆成為專業網頁設計師 以淺顯易懂的方式從設計網站開始談起，從網站建置的過程、設計網站原型(prototyping)的工具以及取得各式網路資源，再循序漸進介紹Web前端三大核心技術：HTML、CSS及JavaScript，並加入前端框架Bootstrap技術，加上書中介紹好用的配色工具，就算沒有美工基礎，藉由Bootstrap工具模組以及配色表，也能快速建構出專業美觀的RWD網站。 本書也安排了Progressive Web Application(PWA)技術，手把手教您逐步將網站優化為Web APP，讓網站能像Native App在手機等行動裝置建立桌面捷徑，瀏覽網頁時具有操作Native App相似的感受。 本書共分三大單元，第一單元為前端開發觀念及HTML+CSS基礎到進階教學；第二單元安排JavaScript基礎的語法以及Web資料庫的應用；第三單元介紹前端框架工具，包括Bootstrap與PWA。各章節除了實用的範例之外，在每一單元也安排了整合練習，讓讀者能加強學習並驗收學習成果，累積實作經驗，適合自修與教學使用。 |適用對象| ✰對前端技術有興趣卻不知從何入門的初學者 ✰前端開發技術相關從業人員 ✰大專院校網站設計相關課程教材 |重點特色| ✰以淺顯易懂的方式快速了解前端開發的觀念及技術。 ✰熟悉網站原型(prototyping)並善用網路工具與資源加以實作。 ✰循序漸進介紹Web前端三大核心技術：HTML、CSS及JavaScript。 ✰活用前端框架Bootstrap技術以及工具模組，建構RWD網站。 ✰使用Progressive Web Application(PWA)技術，逐步將網站優化為Web APP。 精采內容不容錯過，好評回饋中！！ 本書共分三大單元，第一單元為前端開發觀念及HTML+CSS基礎到進階教學；第二單元安排JavaScript基礎的語法以及Web資料庫的應用；第三單元介紹前端框架工具，包括Bootstrap與PWA。各章節除了實用的範例之外，在每一單元也安排了整合練習，讓讀者能加強學習並驗收學習成果，累積實作經驗，適合自修與教學使用。 【目錄】 CHAPTER 01 網站開發的觀念與技術 1-1 網站開發的基礎觀念 1-1-1 網站及網頁 1-1-2 網頁開發的前端與後端 1-1-3 網址的組成 1-2 網站建置流程與技術 1-2-1 擬定網站主題 1-2-2 規劃網站架構與內容 1-2-3 製作網頁工具 1-2-4 上傳雲端 1-3 網頁介面原型建構工具 1-3-1 網站原型架構 1-3-2 介面線框與原型工具 1-3-3 實作網頁介面原型 CHAPTER 02 HTML與CSS基礎 2-1 學習HTML前的準備工作 2-1-1 建立HTML文件 2-1-2 自動生成HTML5架構程式碼 2-2 HTML語法概念與架構 2-2-1 HTML的標記型態 2-2-2 HTML的組成 2-2-3 標記屬性的運用 2-3 HTML5文件結構與語意標記 2-3-1 語意化的HTML標記 2-3-2 HTML5宣告與編碼設定 2-4 認識CSS基本架構 2-4-1 使用CSS樣式表 2-4-2 CSS基本格式 2-4-3 認識CSS選擇器 2-4-4 CSS的度量單位 2-4-5 CSS的顏色表示法 CHAPTER 03 HTML常用標記 3-1 排版相關標記 3-1-1 瀏覽器呈現網頁的過程 3-1-2 標題標記 3-1-3 段落及換行標記 3-2 項目列表清單 3-2-1 有序列表 3-2-2 無序列表清單 3-2-3 定義列表 3-3 表格與表單 3-3-1 表格 3-3-2 表單 3-3-3 表單元件 3-4 插入圖片與超連結 3-4-1 插入圖片 3-4-2 超連結 3-4-3 內置框架（iframe） 3-5 div標記與span標記 3-5-1 認識div標記 3-5-2 認識span標記 3-5-3 替程式碼加上註解 3-5-4 使用特殊符號及Emoji字符集 CHAPTER 04 CSS常用語法 4-1 文字與段落樣式 4-1-1 文字樣式 4-1-2 文字段落樣式 4-1-3 邊框 4-1-4 文繞圖 4-2 掌握CSS定位 4-2-1 網頁元件的定位（position） 4-2-2 立體網頁的定位 4-2-3 好用的calc()函式 CHAPTER 05 CSS Flexbox響應式排版 5-1 Flexbox模型概念 5-1-1 認識CSS盒子模型（Box Model） 5-1-2 認識Flexbox彈性盒子 5-2 Flexbox屬性 5-2-1 flex container屬性 5-2-2 flex Items屬性 CHAPTER 06 善用網路資源 6-1 圖庫素材分享平台 6-1-1 認識創用CC授權 6-1-2 搜尋CC授權素材 6-1-3 Icon nder-icon圖庫 6-1-4 替網站加入Logo小圖示 6-2 實用的網頁應用產生器 6-2-1 CSS Layout產生器 6-2-2 按鈕產生器 6-2-3 網站配色 CHAPTER 07 整合練習—詩詞展示網頁設計與實作 7-1 網頁架構說明 7-1-1 網頁架構圖 7-1-2 選擇合適的HTML標記 7-2 建立HTML與CSS程式碼 7-2-1 建立網頁架構的HTML語法 7-2-2 加入超連結 7-2-3 加入CSS語法 7-2-4 加入偽元素 7-2-5 利用Icon Fonts產生社群圖示 CHAPTER 08 JavaScript基礎 8-1 認識JavaScript 8-1-1 JavaScript基本觀念 8-1-2 JavaScript運行環境 8-1-3 瀏覽器主控台console 8-1-4 JavaScript語法架構 8-2 JavaScript基礎語法 8-2-1 JavaScript語法架構 8-2-2 JavaScript註解符號 8-2-3 資料型別（Data Type） 8-3 變數宣告與作用範圍 8-3-1 全域變數與區域變數 8-3-2 使用var關鍵字宣告變數 8-3-3 var宣告的作用域 8-3-4 使用Let關鍵字宣告變數 8-3-5 使用const關鍵字宣告常數 8-3-6 變數名稱的限制 CHAPTER 09 函式與作用域 9-1 自訂函式 9-1-1 函式的定義與呼叫 9-1-2 函式參數 9-1-3 函式回傳值 9-2 函式的多重用法 9-2-1 函式宣告式（Function Declaration） 9-2-2 函式表達式（Function Expressions） 9-2-3 物件與this關鍵字 9-2-4 立即執行函式（IIFE） CHAPTER 10 JavaScript操控DOM元素 10-1 DOM物件的方法與屬性 10-1-1 取得物件資訊 10-1-2 處理物件節點 10-1-3 屬性的讀取與設定 10-2 DOM物件的操作 10-2-1 Window物件 10-2-2 DOM集合（Collection） 10-3 DOM風格樣式 10-3-1 查詢元素樣式 10-3-2 設定元件樣式 CHAPTER 11 前端資料儲存 11-1 認識Web Storage 11-1-1 Web Storage概念 11-1-2 偵測瀏覽器是否支援Web Storage 11-2 localStorage及sessionStorage 11-2-1 存取localStorage 11-2-2 刪除localStorage 11-2-3 存取sessionStorage 11-3 IndexedDB資料庫 11-3-1 IndexedDB重要概念 11-3-2 IndexedDB基本操作 11-3-3 讀取資料 11-3-4 刪除資料 11-3-5 清空資料 CHAPTER 12 整合練習—個人通訊錄實作 12-1 網頁架構說明 12-1-1 網頁功能架構圖及線框圖 12-1-2 CSS Image Sprites 12-2 IndexedDB的CURD 12-2-1 建置資料庫物件及開啟交易 12-2-2 設定事件的處理函式 12-2-3 新增會員與新增完成 12-2-4 動態產生資料列表 12-2-5 修改與刪除單筆資料 12-2-6 清空資料與刪除資料庫 12-2-7 阻止事件傳遞與預設行為 CHAPTER 13 響應式網頁框架—Bootstrap 13-1 認識Bootstrap 13-1-1 為什麼要使用Bootstrap 13-1-2 下載Bootstrap 13-1-3 RWD的設計理念 13-2 Bootstrap排版 13-2-1 斷點（Breakpoint）與容器（Container） 13-2-2 了解Grid System 13-2-3 Viewport與Media queries 13-3 Bootstrap的樣式 13-3-1 Bootstrap通用顏色 13-3-2 Bootstrap間距 13-3-3 Bootstrap寬度與高度 13-3-4 Bootstrap文字 13-4 圖片與表格 13-4-1 響應式圖片 13-4-2 邊框圓角 13-4-3 建立Bootstrap表格 CHAPTER 14 Bootstrap擴充元件庫 14-1 導覽與選單 14-1-1 導覽列（Navigation Bar） 14-2 表單與按鈕 14-2-1 表單控制元件 14-2-2 表單排版 14-3 輪播元件（Carousel） 14-3-1 基本的輪播效果 14-3-2 利用JavaScript控制輪播 CHAPTER 15 PWA實作—我的記帳本Web App 15-1 實作「我的記帳本」網頁 15-1-1 「我的記帳本」網頁功能與介面 15-1-2 下拉式選單 15-1-3 按鈕群組 15-1-4 互動視窗 15-1-5 IndexedDB關鍵字查詢 15-1-6 善用Bootstrap Icons製作小圖示 15-2 將網頁轉換成PWA 15-2-1 什麼是PWA 15-2-2 製作各種尺寸的App圖示按鈕 15-2-3 將網頁變成PWA

HTML/CSS/JavaScript與前端框架的完美結合：使用Bootstrap與PWA技術，新手從這開始！(暢銷回饋版) (2版)

類似書籍推薦給您

【簡介】 精采內容不容錯過，暢銷回饋中！！ 掌握HTML/CSS/JavaScript技巧， 搭配高效前端框架技術，輕鬆成為專業網頁設計師 　　以淺顯易懂的方式從設計網站開始談起，從網站建置的過程、設計網站原型(prototyping)的工具以及取得各式網路資源，再循序漸進介紹Web前端三大核心技術：HTML、CSS及JavaScript，並加入前端框架Bootstrap技術，加上書中介紹好用的配色工具，就算沒有美工基礎，藉由Bootstrap工具模組以及配色表，也能快速建構出專業美觀的RWD網站。 　　本書也安排了Progressive Web Application(PWA)技術，手把手教您逐步將網站優化為Web APP，讓網站能像Native App在手機等行動裝置建立桌面捷徑，瀏覽網頁時具有操作Native App相似的感受。 　　本書共分三大單元，第一單元為前端開發觀念及HTML+CSS基礎到進階教學；第二單元安排JavaScript基礎的語法以及Web資料庫的應用；第三單元介紹前端框架工具，包括Bootstrap與PWA。各章節除了實用的範例之外，在每一單元安排了整合練習，讓讀者能加強學習並驗收學習成果，累積實作經驗，適合自修與教學使用。 本書特色 　　✰以淺顯易懂的方式快速了解前端開發的觀念及技術。 　　✰熟悉網站原型(prototyping)並善用網路工具與資源加以實作。 　　✰循序漸進介紹Web前端三大核心技術：HTML、CSS及JavaScript。 　　✰活用前端框架Bootstrap技術以及工具模組，建構RWD網站。 　　✰使用Progressive Web Application(PWA)技術，逐步將網站優化為Web APP。 　　|適用對象| 　　✰對前端技術有興趣卻不知從何入門的初學者 　　✰前端開發技術相關從業人員 　　✰大專院校網站設計相關課程教材 【目錄】 CHAPTER 01 網站開發的觀念與技術 1-1 網站開發的基礎觀念 1-1-1 網站及網頁 1-1-2 網頁開發的前端與後端 1-1-3 網址的組成 1-2 網站建置流程與技術 1-2-1 擬定網站主題 1-2-2 規劃網站架構與內容 1-2-3 製作網頁工具 1-2-4 上傳雲端 1-3 網頁介面原型建構工具 1-3-1 網站原型架構 1-3-2 介面線框與原型工具 1-3-3 實作網頁介面原型 CHAPTER 02 HTML與CSS基礎 2-1 學習HTML前的準備工作 2-1-1 建立HTML文件 2-1-2 自動生成HTML5架構程式碼 2-2 HTML語法概念與架構 2-2-1 HTML的標記型態 2-2-2 HTML的組成 2-2-3 標記屬性的運用 2-3 HTML5文件結構與語意標記 2-3-1 語意化的HTML標記 2-3-2 HTML5宣告與編碼設定 2-4 認識CSS基本架構 2-4-1 使用CSS樣式表 2-4-2 CSS基本格式 2-4-3 認識CSS選擇器 2-4-4 CSS的度量單位 2-4-5 CSS的顏色表示法 CHAPTER 03 HTML常用標記 3-1 排版相關標記 3-1-1 瀏覽器呈現網頁的過程 3-1-2 標題標記 3-1-3 段落及換行標記 3-2 項目列表清單 3-2-1 有序列表 3-2-2 無序列表清單 3-2-3 定義列表 3-3 表格與表單 3-3-1 表格 3-3-2 表單 3-3-3 表單元件 3-4 插入圖片與超連結 3-4-1 插入圖片 3-4-2 超連結 3-4-3 內置框架（iframe） 3-5 div標記與span標記 3-5-1 認識div標記 3-5-2 認識span標記 3-5-3 替程式碼加上註解 3-5-4 使用特殊符號及Emoji字符集 CHAPTER 04 CSS常用語法 4-1 文字與段落樣式 4-1-1 文字樣式 4-1-2 文字段落樣式 4-1-3 邊框 4-1-4 文繞圖 4-2 掌握CSS定位 4-2-1 網頁元件的定位（position） 4-2-2 立體網頁的定位 4-2-3 好用的calc()函式 CHAPTER 05 CSS Flexbox響應式排版 5-1 Flexbox模型概念 5-1-1 認識CSS盒子模型（Box Model） 5-1-2 認識Flexbox彈性盒子 5-2 Flexbox屬性 5-2-1 fl¬ex container屬性 5-2-2 ¬flex Items屬性 CHAPTER 06 善用網路資源 6-1 圖庫素材分享平台 6-1-1 認識創用CC授權 6-1-2 搜尋CC授權素材 6-1-3 Icon nder-icon圖庫 6-1-4 替網站加入Logo小圖示 6-2 實用的網頁應用產生器 6-2-1 CSS Layout產生器 6-2-2 按鈕產生器 6-2-3 網站配色 CHAPTER 07 整合練習—詩詞展示網頁設計與實作 7-1 網頁架構說明 7-1-1 網頁架構圖 7-1-2 選擇合適的HTML標記 7-2 建立HTML與CSS程式碼 7-2-1 建立網頁架構的HTML語法 7-2-2 加入超連結 7-2-3 加入CSS語法 7-2-4 加入偽元素 7-2-5 利用Icon Fonts產生社群圖示 CHAPTER 08 JavaScript基礎 8-1 認識JavaScript 8-1-1 JavaScript基本觀念 8-1-2 JavaScript運行環境 8-1-3 瀏覽器主控台console 8-1-4 JavaScript語法架構 8-2 JavaScript基礎語法 8-2-1 JavaScript語法架構 8-2-2 JavaScript註解符號 8-2-3 資料型別（Data Type） 8-3 變數宣告與作用範圍 8-3-1 全域變數與區域變數 8-3-2 使用var關鍵字宣告變數 8-3-3 var宣告的作用域 8-3-4 使用Let關鍵字宣告變數 8-3-5 使用const關鍵字宣告常數 8-3-6 變數名稱的限制 CHAPTER 09 函式與作用域 9-1 自訂函式 9-1-1 函式的定義與呼叫 9-1-2 函式參數 9-1-3 函式回傳值 9-2 函式的多重用法 9-2-1 函式宣告式（Function Declaration） 9-2-2 函式表達式（Function Expressions） 9-2-3 物件與this關鍵字 9-2-4 立即執行函式（IIFE） CHAPTER 10 JavaScript操控DOM元素 10-1 DOM物件的方法與屬性 10-1-1 取得物件資訊 10-1-2 處理物件節點 10-1-3 屬性的讀取與設定 10-2 DOM物件的操作 10-2-1 Window物件 10-2-2 DOM集合（Collection） 10-3 DOM風格樣式 10-3-1 查詢元素樣式 10-3-2 設定元件樣式 CHAPTER 11 前端資料儲存 11-1 認識Web Storage 11-1-1 Web Storage概念 11-1-2 偵測瀏覽器是否支援Web Storage 11-2 localStorage及sessionStorage 11-2-1 存取localStorage 11-2-2 刪除localStorage 11-2-3 存取sessionStorage 11-3 IndexedDB資料庫 11-3-1 IndexedDB重要概念 11-3-2 IndexedDB基本操作 11-3-3 讀取資料 11-3-4 刪除資料 11-3-5 清空資料 CHAPTER 12 整合練習—個人通訊錄實作 12-1 網頁架構說明 12-1-1 網頁功能架構圖及線框圖 12-1-2 CSS Image Sprites 12-2 IndexedDB的CURD 12-2-1 建置資料庫物件及開啟交易 12-2-2 設定事件的處理函式 12-2-3 新增會員與新增完成 12-2-4 動態產生資料列表 12-2-5 修改與刪除單筆資料 12-2-6 清空資料與刪除資料庫 12-2-7 阻止事件傳遞與預設行為 CHAPTER 13 響應式網頁框架—Bootstrap 13-1 認識Bootstrap 13-1-1 為什麼要使用Bootstrap 13-1-2 下載Bootstrap 13-1-3 RWD的設計理念 13-2 Bootstrap排版 13-2-1 斷點（Breakpoint）與容器（Container） 13-2-2 了解Grid System 13-2-3 Viewport與Media queries 13-3 Bootstrap的樣式 13-3-1 Bootstrap通用顏色 13-3-2 Bootstrap間距 13-3-3 Bootstrap寬度與高度 13-3-4 Bootstrap文字 13-4 圖片與表格 13-4-1 響應式圖片 13-4-2 邊框圓角 13-4-3 建立Bootstrap表格 CHAPTER 14 Bootstrap擴充元件庫 14-1 導覽與選單 14-1-1 導覽列（Navigation Bar） 14-2 表單與按鈕 14-2-1 表單控制元件 14-2-2 表單排版 14-3 輪播元件（Carousel） 14-3-1 基本的輪播效果 14-3-2 利用JavaScript控制輪播 CHAPTER 15 PWA實作—我的記帳本Web App 15-1 實作「我的記帳本」網頁 15-1-1 「我的記帳本」網頁功能與介面 15-1-2 下拉式選單 15-1-3 按鈕群組 15-1-4 互動視窗 15-1-5 IndexedDB關鍵字查詢 15-1-6 善用Bootstrap Icons製作小圖示 15-2 將網頁轉換成PWA 15-2-1 什麼是PWA 15-2-2 製作各種尺寸的App圖示按鈕 15-2-3 將網頁變成PWA