µn¤J
¡U
µù¥U
¡U
·|û¤¤¤ß
¡U
µ²±b
¡U
°ö°V½Òµ{
Å]ªk§Ì¤l
¡U
¦Û¸ê¥Xª©
¡U
¹q¤l®Ñ
¡U
«ÈªA¤¤¤ß
¡U
´¼¼z«¬¥ßÊ^·|û
®Ñ¦W
¥Xª©ªÀ
§@ªÌ
isbn
½s¸¹
5050Å]ªk²³Äw
|
NG®Ñ«°
|
°ê»Ú¯Å«~µP½Òµ{
|
Àu´f³qª¾
|
ÅRÆE^¶¯µ¼Öºë¿ï
|
jQueryºô¶³]p½d¨Ò±Ð¾Ç
¡D
³Ì·spºâ¾÷·§½×(²Ä¤Q
¡D
·sÁͶպô¸ô·§½×(²Ä¤»
¡D
AI®É¥Nªºpºâ¾÷·§½×
¤å¾Ç¤p»¡
¤å¾Ç
¡U
¤p»¡
°ÓºÞ³Ð§ë
°]¸g§ë¸ê
¡U
¦æ¾P¥øºÞ
¤H¤åÃÀ§{
©v±Ð¡Bõ¾Ç
ªÀ·|¡B¤H¤å¡B¥v¦a
ÃÀ³N¡B¬ü¾Ç
¡U
¹q¼vÀ¸¼@
Ày§Ó¾i¥Í
ÂåÀø¡B«O°·
®Æ²z¡B¥Í¬¡¦Ê¬ì
±Ð¨|¡B¤ß²z¡BÀy§Ó
¶i׾Dzß
¹q¸£»Pºô¸ô
¡U
»y¨¥¤u¨ã
Âø»x¡B´Á¥Z
¡U
x¬F¡Bªk«ß
°Ñ¦Ò¡B¦Ò¸Õ¡B±Ð¬ì¥Î®Ñ
¬ì¾Ç¤uµ{
¬ì¾Ç¡B¦ÛµM
¡U
¤u·~¡B¤uµ{
®a®x¿Ë¤l
®a®x¡B¿Ë¤l¡B¤H»Ú
«C¤Ö¦~¡Bµ£®Ñ
ª±¼Ö¤Ñ¦a
®È¹C¡B¦a¹Ï
¡U
¥ð¶¢®T¼Ö
º©µe¡B´¡¹Ï
¡U
¨î¯Å
AI®É¥Nªººô¶³]pHTML¡BCSS¡BJavaScript¡BRWD¡BBootstrap¡BVue.js¡BjQuery(²Ä¤Eª©)
§@ªÌ¡G
陳惠貞
¤ÀÃþ¡G
¹q¸£»Pºô¸ô
¡þ
ºô¶À³¥Î
¥Xª©ªÀ¡G
ùÖ®p
¥Xª©¤é´Á¡G2025/11/18
ISBN¡G9786264252027
®ÑÄy½s¸¹¡Gkk0605523
¶¼Æ¡G512
©w»ù¡G
620
¤¸
Àu´f»ù¡G
82
§é
508
¤¸
®Ñ»ùY¦³²§°Ê¡A¥H¥Xª©ªÀ¹ê»Ú©w»ù¬°·Ç
qÁÊ«á¥ß§Y¬°±z¶i³f
qÁÊ«á¥ß§Y¬°±z¶i³f¡G¥Ø«eµL®w¦s¶q,ŪªÌ¤Uq«á,¶}©l¶i¤J½Õ®Ñµ{§Ç,¤@¯ë¤Ñ¼Æ¬ù¬°2-10¤u§@¤é(¤£§t¨Ò°²¤é)¡C
¹ÎÁʼƳ̧C¬° 20 ¥»¥H¤W
µû»ù¼Æ¡G
(½Ð±N·Æ¹«²¾¦Ü¬P¬P³B¶i¦æµû»ù)
¥Ø«e¥§¡µû»ù¡G
¤å¦r³sµ²
½Æ»s»yªk
AI®É¥Nªººô¶³]pHTML¡BCSS¡BJavaScript¡BRWD¡BBootstrap¡BVue.js¡BjQuery(²Ä¤Eª©)
¹Ï¤ù³sµ²
½Æ»s»yªk
¤À
¨É
¤º®e²¤¶
®ÑÄy¥Ø¿ý
¦PÃþ±ÀÂË
AI時代的網頁設計HTML、CSS、JavaScript、RWD、Bootstrap、Vue.js、jQuery(第九版) 內容簡介 這本經典暢銷書邁入第九版,感謝眾多讀者與授課教師的支持! 此次改版除了更新網頁設計相關技術的最新規格,更融入了與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³¹ ºô¶³]p°ò¦ 1-1 ºô¯¸«Ø¸m¬yµ{ 1-2 ºô¯¸ªº UI/UX ³]pì«h 1-3 ºô¶³]p¬ÛÃöªºµ{¦¡»y¨¥ 1-4 HTML ªºµo®i 1-5 HTML ¤å¥óªº¶}µoÀô¹Ò 1-6 HTML ¤å¥óªº°ò¥»µ²ºc 1-7 ¼¶¼g²Ä¤@¥÷ HTML ¤å¥ó ¡·ChatGPT µ{¦¡§U²z·s«äºû¡G½Ð AI §U²z§êºtºô¶³]p±M®a ¡·ChatGPT µ{¦¡§U²z·s«äºû¡G³W¹ººô¯¸¬[ºc»Pø»sºô¯¸¦a¹Ï ¡·ChatGPT µ{¦¡§U²z·s«äºû¡G¬d¸ßºô¶§Þ³N¡B»yªk»P¼¶¼gµ{¦¡ ²Ä2³¹ ¤å¥óµ²ºc 2-1 HTML ¤å¥óªº®Ú¤¸¯À¡Ð html¤¸¯À 2-2 HTML ¤å¥óªº¼ÐÀY¡Ð head¤¸¯À 2-3 HTML ¤å¥óªº¥DÅé¡Ð body¤¸¯À 2-4 HTML5 ·s¼Wªºµ²ºc¤¸¯À ¡·ChatGPT µ{¦¡§U²z·s«äºû¡G®Ú¾Ú½u®Ø¹Ï¥Í¦¨ºô¶¡B´ú¸Õ»P×§ï ²Ä3³¹ ¸ê®Æ½s¿è»P®æ¦¡¤Æ 3-1 °Ï¶ô®æ¦¡ 3-2 ¤å¦r®æ¦¡ 3-3 ¶µ¥Ø²Å¸¹»P½s¸¹¡Ð ul¡Bol¡Bli¤¸¯À 3-4 ©w¸q²M³æ¡Ð dl¡Bdt¡Bdd¤¸¯À 3-5 ¶W³sµ² 3-6 ¬Û¹ïURL ªº¸ô®|¸ê°T¡Ð base¤¸¯À ¡·ChatGPT µ{¦¡§U²z·s«äºû¡G¬d¸ß HTML ¤¸¯Àªº¥Î³~¡B»yªk¤Î½d¨Ò ²Ä4³¹ ¼vµ¦h´CÅé¡Bªí®æ»Pªí³æ 4-1 ´O¤J¹Ï¤ù¡Ð img¤¸¯À 4-2 ´O¤J¼v¤ù¡Ð video¤¸¯À 4-3 ´O¤JÁnµ¡Ð audio¤¸¯À 4-4 ³]©w´CÅé¸ê·½¡Ð source¤¸¯À 4-5 ´O¤J¤£¦Pªº¹Ï¤ù¡Ð picture¤¸¯À 4-6 ´O¤Jª«¥ó¡Ð object¤¸¯À 4-7 ´O¤J¯B°Ê®Ø¬[¡Ð iframe¤¸¯À 4-8 ´O¤JScript ¡Ð script¡Bnoscript¤¸¯À 4-9 ªí®æ¤¸¯À 4-10 ªí³æ¤¸¯À ¡·ChatGPT µ{¦¡§U²z·s«äºû¡G®Ú¾Ú¸Õºâªí©Îªí®æ¸ê®Æ¥Í¦¨ºô¶¡B´ú¸Õ¡B×§ï»P¬ü¤Æ ¡·ChatGPT µ{¦¡§U²z·s«äºû¡G¥Í¦¨ªí³æºô¶¡B´ú¸Õ¡B×§ï»P¬ü¤Æ Part 2 CSS ²Ä5³¹ CSS °ò¥»»yªk 5-1 CSS ªºµo®i 5-2 ¦b HTML ¤å¥ó¤¤®M¥Î CSS 5-3 CSS ªº»yªk 5-4 ¿ï¾Ü¾¹ªºÃþ«¬ 5-5 ¼Ë¦¡ªíªº¦ê±µ¶¶§Ç ²Ä6³¹ ±`¥Îªº CSS ÄÝ©Ê 6-1 ¦â±mÄÝ©Ê 6-2 ¦r«¬ÄÝ©Ê 6-3 ¤å¦rÄÝ©Ê 6-4 ²M³æÄÝ©Ê 6-5 ªí®æÄÝ©Ê 6-6 I´ºÄÝ©Ê 6-7 ÂoÃèÄÝ©Ê 6-8 º¥¼h¨ç¦¡ 6-9 ÅܧÎÄÝ©Ê 6-10 Âà³õÄÝ©Ê 6-11 °ÊµeÄÝ©Ê ¡·ChatGPT µ{¦¡§U²z·s«äºû¡G¬d¸ß CSS ÄݩʡB°w¹ï«ü©w¼Ë¦¡»P®ÄªG¼¶¼gµ{¦¡½X ²Ä7³¹ Box Model »P©w¦ì¤è¦¡ 7-1 Box Model 7-2 Ãä¬ÉÄÝ©Ê 7-3 ¯d¥ÕÄÝ©Ê 7-4 ®Ø½uÄÝ©Ê 7-5 ¼e«×»P°ª«×ÄÝ©Ê 7-6 ©w¦ì¤è¦¡ ¡·ChatGPT µ{¦¡§U²z·s«äºû¡G³]©wºô¶ªº¥~Æ[ ²Ä8³¹ CSS ª©±³]p»P´CÅé¬d¸ß 8-1 ¨Ï¥Îfloat Äݩʶi¦æª©±³]p 8-2 ¼u©Ê²°¤lª©± 8-3 ºô®æª©± 8-4 ´CÅé¬d¸ß ¡·ChatGPT µ{¦¡§U²z·s«äºû¡G®Ú¾Ú¸Ë¸mªº¤è¦VÅã¥Ü¤£¦Pªººô¶¤º®e ²Ä9³¹ ÅTÀ³¦¡ºô¶³]p¹ê¨Ò (RWD) 9-1 ¶}µo¾A¥Î©ó¤£¦P¸Ë¸mªººô¶ 9-2 ÅTÀ³¦¡ºô¶³]pì«h 9-3 ¤â¨èÅTÀ³¦¡ºô¶ (¹Ï®wºô¯¸) Part 3 JavaScript ²Ä10³¹ JavaScript °ò¥»»yªk 10-1 ¼¶¼g²Ä¤@ÓJavaScript µ{¦¡ 10-2 JavaScript µ{¦¡½X¼¶¼gºD¨Ò 10-3 «¬§O 10-4 ÅÜ¼Æ 10-5 ±`¼Æ 10-6 ¹Bºâ¤l 10-7 ¬yµ{±±¨î 10-8 ¨ç¦¡ 10-9 Åܼƪº¦³®Ä½d³ò ¡·ChatGPT µ{¦¡§U²z·s«äºû¡G¬d¸ß»yªk¡B¼¶¼g¡B¸ÑŪ»PÂà´«µ{¦¡¡Bµù¸Ñ¡B°£¿ù ²Ä11³¹ ª«¥ó»P 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³¹ ¨Æ¥ó³B²z 12-1 ¨Æ¥óÅX°Ê¼Ò¦¡ 12-2 ¨Æ¥óªºÃþ«¬ 12-3 ©w¸q¨Æ¥ó³B²zµ{¦¡ / ¨Æ¥óºÊÅ¥µ{¦¡ 12-4 ²¾°£¨Æ¥ó³B²zµ{¦¡ / ¨Æ¥óºÊÅ¥µ{¦¡ 12-5 Event ª«¥ó 12-6 ¨Æ¥ó³B²z½d¨Ò ¡·ChatGPT µ{¦¡§U²z·s«äºû¡G¼¶¼gºî©Òµ|¸Õºâºô¶ Part 4 «eºÝ®Ø¬[ ²Ä13³¹ Bootstrap 13-1 ¼¶¼gBootstrap ºô¶ 13-2 ºô®æ¨t²Î 13-3 ¤º®e¼Ë¦¡ 13-4 ¤½¥ÎÃþ§O 13-5 «ö¶s 13-6 ªí³æ 13-7 Ãö³¬«ö¶s (Close button) 13-8 ĵ³ø®ÄªG (Alert) 13-9 ¤U©Ô¦¡²M³æ (Dropdown) 13-10 ¾ÉÄý¦C (Navbar) 13-11 ¥d¤ù (Card) 13-12 ½ü¼½ (Carousel) 13-13 ÄÑ¥]®h¾ÉÄý (Pagination) ¡·ChatGPT µ{¦¡§U²z·s«äºû¡G¬d¸ß Bootstrap »yªk»P¤¸¥ó¡B¼¶¼g Bootstrap ºô¶ ²Ä14³¹ Vue.js 14-1 »{ÃÑ Vue.js 14-2 ¦w¸Ë»P¨Ï¥Î Vue.js 14-3 ¼ËªO»yªk 14-4 methods »P computed ÄÝ©Ê 14-5 ¨Æ¥ó³B²z 14-6 ªí³æÄæ¦ìôµ² 14-7 Ãþ§O»P¼Ë¦¡Ã´µ² 14-8 ±ø¥ó¦¡´è¬V 14-9 ²M³æ´è¬V ²Ä15³¹ jQuery ¡iPDF ¹q¤l®Ñ¡A½Ð½u¤W¤U¸ü¡j
¸òµÛ¹ê°È¾Ç²ßHTML
²`¤J²L¥X JavaS
¬Æ»ò¡Hºô¶¤]¥i¥H°µ¬£
ºë³qJavaScri
¤µ±ß¨ÓÂIWeb«eºÝ®Ä
Effective
¬íÀ´AI»²§U¦æ°Êºô¶
HTML/CSS/J
¬°§A¼gªºVue Co
JavaScript
¬°¤F«O»Ù±zªºÅv¯q¡A·sµ·¸ôºô¸ô®Ñ©±©ÒÁʶRªº°Ó«~§¡¨É¦³¨ì³f¤C¤ÑªºÅ²½à´Á¡]§t¨Ò°²¤é¡^¡C°h¦^¤§°Ó«~¥²¶·©óŲ½à´Á¤º±H¦^¡]¥H¶lÂW©Î¦¬°õÁp¬°¾Ì¡^¡A¥B°Ó«~¥²¶·¬O¥þ·sª¬ºA»P§¹¾ã¥]¸Ë(°Ó«~¡Bªþ¥ó¡B¤º¥~¥]¸Ë¡BÀH³f¤å¥ó¡BÃØ«~µ¥)¡A§_«h®¤¤£±µ¨ü°h³f¡C