µ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
HTML/CSS/J
¡D
ChatGPT X
¡D
JavaScript
¤å¾Ç¤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
¨î¯Å
HTML/CSS/JavaScript»P«eºÝ®Ø¬[ªº§¹¬üµ²¦X¡G¨Ï¥ÎBootstrap»PPWA§Þ³N¡A·s¤â±q³o¶}©l¡I(¦nµû¦^õXª©)
§@ªÌ¡G
³¯婉凌 µÛ¡BZCT 策劃
¤ÀÃþ¡G
¹q¸£»Pºô¸ô
¡þ
ºô¶À³¥Î
¥Xª©ªÀ¡G
³ÕºÓ¤å¤Æ
¥Xª©¤é´Á¡G2025/2/27
ISBN¡G9786264141192
®ÑÄy½s¸¹¡Gkk0595896
¶¼Æ¡G528
©w»ù¡G
690
¤¸
Àu´f»ù¡G
79
§é
545
¤¸
®Ñ»ùY¦³²§°Ê¡A¥H¥Xª©ªÀ¹ê»Ú©w»ù¬°·Ç
µ´ª©®Ñ
µ´ª©®Ñ¡G½T©w¤£¦Aª©ªº°Ó«~¡A¶È´£¨Ñ®ÑÄy¸ê°T°Ñ¦Ò¡C
µû»ù¼Æ¡G
(½Ð±N·Æ¹«²¾¦Ü¬P¬P³B¶i¦æµû»ù)
¥Ø«e¥§¡µû»ù¡G
¤å¦r³sµ²
½Æ»s»yªk
HTML/CSS/JavaScript»P«eºÝ®Ø¬[ªº§¹¬üµ²¦X¡G¨Ï¥ÎBootstrap»PPWA§Þ³N¡A·s¤â±q³o¶}©l¡I(¦nµû¦^õXª©)
¹Ï¤ù³sµ²
½Æ»s»yªk
¤À
¨É
¤º®e²¤¶
®ÑÄy¥Ø¿ý
¦PÃþ±ÀÂË
HTML/CSS/JavaScript»P前端框架的完美結合¡G使用Bootstrap»P PWA技³N¡A新手從³o¶}始¡I(好µû回õX版) 精ªö內容不容¿ù¹L¡A好µû回õX中¡I¡I 掌握HTML/CSS/JavaScript技巧¡A 搭°t°ª效前端框架技³N¡A»´ÃP成為專業網¶³]p師 以淺Åã易懂的方式從³]p網站¶}始½Í°_¡A從網站建置的¹L程¡B³]p網 站原型(prototyping)的工具以及取得各式網¸ô¸ê源¡A再循序漸¶i介 紹Web前端三大核心技³N¡GHTML¡BCSS及JavaScript¡A並加入前端 框架Bootstrap技³N¡A加上書中介紹好用的°t¦â工具¡A就算沒有美工 基礎¡AÂÇ由Bootstrap工具模組以及°t¦âªí¡A也¯à快³t建構出專業美 Æ[的RWD網站¡C 本書也安排了Progressive Web Application(PWA)技³N¡A手把手教 您³v步將網站優化為Web APP¡AÅý網站¯à像Native App在手機等¦æ 動¸Ë置建立桌±捷徑¡A瀏Äý網¶時具有操作Native App相似的感受¡C 本書共分三大單元¡A第一單元為前端¶}發Æ[念及HTML+CSS基礎到 ¶i¶¥教學¡F第二單元安排JavaScript基礎的»y法以及Web¸ê料庫的應 用¡F第三單元介紹前端框架工具¡A包括Bootstrap»PPWA¡C各章節°£ 了實用的範例之外¡A在每一單元也安排了整合練習¡AÅýŪªÌ¯à加強學 習並Åç收學習成果¡A累積實作經Åç¡A¾A合¦Û修»P教學使用¡C |«ÂI特¦â| ?以淺Åã易懂的方式快³t了¸Ñ前端¶}發的Æ[念及技³N¡C ?熟悉網站原型(prototyping)並善用網¸ô工具»P¸ê源加以實作¡C ?循序漸¶i介紹Web前端三大核心技³N¡GHTML¡BCSS及 JavaScript¡C ?活用前端框架Bootstrap技³N以及工具模組¡A建構RWD網站¡C ?使用Progressive Web Application(PWA)技³N¡A³v步將網站優化 為Web APP¡C |¾A用對¶H| ?對前端技³N有¿³½ì卻不知從何入ªù的初學ªÌ ?前端¶}發技³N相Ãö從業人員 ?大專°|校網站³]p相Ãö½Ò程教材
CHAPTER 01 ºô¯¸¶}µoªºÆ[©À»P§Þ³N 1-1 ºô¯¸¶}µoªº°ò¦Æ[©À ????1-1-1 ºô¯¸¤Îºô¶ ????1-1-2 ºô¶¶}µoªº«eºÝ»P«áºÝ ????1-1-3 ºô§}ªº²Õ¦¨ 1-2 ºô¯¸«Ø¸m¬yµ{»P§Þ³N ????1-2-1 ÀÀ©wºô¯¸¥DÃD ????1-2-2 ³W¹ººô¯¸¬[ºc»P¤º®e ????1-2-3 »s§@ºô¶¤u¨ã ????1-2-4 ¤W¶Ç¶³ºÝ 1-3 ºô¶¤¶±ì«¬«Øºc¤u¨ã ????1-3-1 ºô¯¸ì«¬¬[ºc ????1-3-2 ¤¶±½u®Ø»P쫬¤u¨ã ????1-3-3 ¹ê§@ºô¶¤¶±ì«¬ CHAPTER 02 HTML»PCSS°ò¦ 2-1 ¾Ç²ßHTML«eªº·Ç³Æ¤u§@ ????2-1-1 «Ø¥ßHTML¤å¥ó ????2-1-2 ¦Û°Ê¥Í¦¨HTML5¬[ºcµ{¦¡½X 2-2 HTML»yªk·§©À»P¬[ºc ????2-2-1 HTMLªº¼Ð°O«¬ºA ????2-2-2 HTMLªº²Õ¦¨ ????2-2-3 ¼Ð°OÄݩʪº¹B¥Î 2-3 HTML5¤å¥óµ²ºc»P»y·N¼Ð°O ????2-3-1 »y·N¤ÆªºHTML¼Ð°O ????2-3-2 HTML5«Å§i»P½s½X³]©w 2-4 »{ÃÑCSS°ò¥»¬[ºc ????2-4-1 ¨Ï¥ÎCSS¼Ë¦¡ªí ????2-4-2 CSS°ò¥»®æ¦¡ ????2-4-3 »{ÃÑCSS¿ï¾Ü¾¹ ????2-4-4 CSSªº«×¶q³æ¦ì ????2-4-5 CSSªºÃC¦âªí¥Üªk CHAPTER 03 HTML±`¥Î¼Ð°O 3-1 ±Æª©¬ÛÃö¼Ð°O ????3-1-1 ÂsÄý¾¹§e²{ºô¶ªº¹Lµ{ ????3-1-2 ¼ÐÃD¼Ð°O ????3-1-3 ¬q¸¨¤Î´«¦æ¼Ð°O 3-2 ¶µ¥Ø¦Cªí²M³æ ????3-2-1 ¦³§Ç¦Cªí ????3-2-2 µL§Ç¦Cªí²M³æ ????3-2-3 ©w¸q¦Cªí 3-3 ªí®æ»Pªí³æ ????3-3-1 ªí®æ ????3-3-2 ªí³æ ????3-3-3 ªí³æ¤¸¥ó 3-4 ´¡¤J¹Ï¤ù»P¶W³sµ² ????3-4-1 ´¡¤J¹Ï¤ù ????3-4-2 ¶W³sµ² ????3-4-3 ¤º¸m®Ø¬[¡]iframe¡^ 3-5 div¼Ð°O»Pspan¼Ð°O ????3-5-1 »{ÃÑdiv¼Ð°O ????3-5-2 »{ÃÑspan¼Ð°O ????3-5-3 ´Àµ{¦¡½X¥[¤Wµù¸Ñ ????3-5-4 ¨Ï¥Î¯S®í²Å¸¹¤ÎEmoji¦r²Å¶° CHAPTER 04 CSS±`¥Î»yªk 4-1 ¤å¦r»P¬q¸¨¼Ë¦¡ ????4-1-1 ¤å¦r¼Ë¦¡ ????4-1-2 ¤å¦r¬q¸¨¼Ë¦¡ ????4-1-3 Ã䮨 ????4-1-4 ¤å¶¹Ï 4-2 ´x´¤CSS©w¦ì ????4-2-1 ºô¶¤¸¥óªº©w¦ì¡]position¡^ ????4-2-2 ¥ßÅéºô¶ªº©w¦ì ????4-2-3 ¦n¥Îªºcalc()¨ç¦¡ CHAPTER 05 CSS FlexboxÅTÀ³¦¡±Æª© 5-1 Flexbox¼Ò«¬·§©À ????5-1-1 »{ÃÑCSS²°¤l¼Ò«¬¡]Box Model¡^ ????5-1-2 »{ÃÑFlexbox¼u©Ê²°¤l 5-2 FlexboxÄÝ©Ê ????5-2-1 fl?ex containerÄÝ©Ê ????5-2-2 ?flex ItemsÄÝ©Ê CHAPTER 06 µ½¥Îºô¸ô¸ê·½ 6-1 ¹Ï®w¯À§÷¤À¨É¥¥x ????6-1-1 »{ÃѳХÎCC±ÂÅv ????6-1-2 ·j´MCC±ÂÅv¯À§÷ ????6-1-3 Icon nder-icon¹Ï®w ????6-1-4 ´Àºô¯¸¥[¤JLogo¤p¹Ï¥Ü 6-2 ¹ê¥Îªººô¶À³¥Î²£¥Í¾¹ ????6-2-1 CSS Layout²£¥Í¾¹ ????6-2-2 «ö¶s²£¥Í¾¹ ????6-2-3 ºô¯¸°t¦â CHAPTER 07 ¾ã¦X½m²ß¡X¸Öµü®i¥Üºô¶³]p»P¹ê§@ 7-1 ºô¶¬[ºc»¡©ú ????7-1-1 ºô¶¬[ºc¹Ï ????7-1-2 ¿ï¾Ü¦X¾AªºHTML¼Ð°O 7-2 «Ø¥ßHTML»PCSSµ{¦¡½X ????7-2-1 «Ø¥ßºô¶¬[ºcªºHTML»yªk ????7-2-2 ¥[¤J¶W³sµ² ????7-2-3 ¥[¤JCSS»yªk ????7-2-4 ¥[¤J°°¤¸¯À ????7-2-5 §Q¥ÎIcon Fonts²£¥ÍªÀ¸s¹Ï¥Ü CHAPTER 08 JavaScript°ò¦ 8-1 »{ÃÑJavaScript ????8-1-1 JavaScript°ò¥»Æ[©À ????8-1-2 JavaScript¹B¦æÀô¹Ò ????8-1-3 ÂsÄý¾¹¥D±±¥xconsole ????8-1-4 JavaScript»yªk¬[ºc 8-2 JavaScript°ò¦»yªk ????8-2-1 JavaScript»yªk¬[ºc ????8-2-2 JavaScriptµù¸Ñ²Å¸¹ ????8-2-3 ¸ê®Æ«¬§O¡]Data Type¡^ 8-3 Åܼƫŧi»P§@¥Î½d³ò ????8-3-1 ¥þ°ìÅܼƻP°Ï°ìÅÜ¼Æ ????8-3-2 ¨Ï¥ÎvarÃöÁä¦r«Å§iÅÜ¼Æ ????8-3-3 var«Å§iªº§@¥Î°ì ????8-3-4 ¨Ï¥ÎLetÃöÁä¦r«Å§iÅÜ¼Æ ????8-3-5 ¨Ï¥ÎconstÃöÁä¦r«Å§i±`¼Æ ????8-3-6 ÅܼƦWºÙªº¨î CHAPTER 09 ¨ç¦¡»P§@¥Î°ì 9-1 ¦Ûq¨ç¦¡ ????9-1-1 ¨ç¦¡ªº©w¸q»P©I¥s ????9-1-2 ¨ç¦¡°Ñ¼Æ ????9-1-3 ¨ç¦¡¦^¶ÇÈ 9-2 ¨ç¦¡ªº¦h«¥Îªk ????9-2-1 ¨ç¦¡«Å§i¦¡¡]Function Declaration¡^ ????9-2-2 ¨ç¦¡ªí¹F¦¡¡]Function Expressions¡^ ????9-2-3 ª«¥ó»PthisÃöÁä¦r ????9-2-4 ¥ß§Y°õ¦æ¨ç¦¡¡]IIFE¡^ CHAPTER 10 JavaScript¾Þ±±DOM¤¸¯À 10-1 DOMª«¥óªº¤èªk»PÄÝ©Ê ?????10-1-1 ¨ú±oª«¥ó¸ê°T ?????10-1-2 ³B²zª«¥ó¸`ÂI ?????10-1-3 ÄݩʪºÅª¨ú»P³]©w 10-2 DOMª«¥óªº¾Þ§@ ?????10-2-1 Windowª«¥ó ?????10-2-2 DOM¶°¦X¡]Collection¡^ 10-3 DOM·®æ¼Ë¦¡ ?????10-3-1 ¬d¸ß¤¸¯À¼Ë¦¡ ?????10-3-2 ³]©w¤¸¥ó¼Ë¦¡ CHAPTER 11 «eºÝ¸ê®ÆÀx¦s 11-1 »{ÃÑWeb Storage ?????11-1-1 Web Storage·§©À ?????11-1-2 °»´úÂsÄý¾¹¬O§_¤ä´©Web Storage 11-2 localStorage¤ÎsessionStorage ?????11-2-1 ¦s¨úlocalStorage ?????11-2-2 §R°£localStorage ?????11-2-3 ¦s¨úsessionStorage 11-3 IndexedDB¸ê®Æ®w ?????11-3-1 IndexedDB«n·§©À ?????11-3-2 IndexedDB°ò¥»¾Þ§@ ?????11-3-3 Ū¨ú¸ê®Æ ?????11-3-4 §R°£¸ê®Æ ?????11-3-5 ²MªÅ¸ê®Æ CHAPTER 12 ¾ã¦X½m²ß¡XÓ¤H³q°T¿ý¹ê§@ 12-1 ºô¶¬[ºc»¡©ú ?????12-1-1 ºô¶¥\¯à¬[ºc¹Ï¤Î½u®Ø¹Ï ?????12-1-2 CSS Image Sprites 12-2 IndexedDBªºCURD ?????12-2-1 «Ø¸m¸ê®Æ®wª«¥ó¤Î¶}±Ò¥æ©ö ?????12-2-2 ³]©w¨Æ¥óªº³B²z¨ç¦¡ ?????12-2-3 ·s¼W·|û»P·s¼W§¹¦¨ ?????12-2-4 °ÊºA²£¥Í¸ê®Æ¦Cªí ?????12-2-5 ×§ï»P§R°£³æµ§¸ê®Æ ?????12-2-6 ²MªÅ¸ê®Æ»P§R°£¸ê®Æ®w ?????12-2-7 ªý¤î¨Æ¥ó¶Ç»¼»P¹w³]¦æ¬° CHAPTER 13 ÅTÀ³¦¡ºô¶®Ø¬[¡XBootstrap 13-1 »{ÃÑBootstrap ?????13-1-1 ¬°¤°»òn¨Ï¥ÎBootstrap ?????13-1-2 ¤U¸üBootstrap ?????13-1-3 RWDªº³]p²z©À 13-2 Bootstrap±Æª© ?????13-2-1 Â_ÂI¡]Breakpoint¡^»P®e¾¹¡]Container¡^ ?????13-2-2 ¤F¸ÑGrid System ?????13-2-3 Viewport»PMedia queries 13-3 Bootstrapªº¼Ë¦¡ ?????13-3-1 Bootstrap³q¥ÎÃC¦â ?????13-3-2 Bootstrap¶¡¶Z ?????13-3-3 Bootstrap¼e«×»P°ª«× ?????13-3-4 Bootstrap¤å¦r 13-4 ¹Ï¤ù»Pªí®æ ?????13-4-1 ÅTÀ³¦¡¹Ï¤ù ?????13-4-2 Ã䮨¶ê¨¤ ?????13-4-3 «Ø¥ßBootstrapªí®æ CHAPTER 14 BootstrapÂX¥R¤¸¥ó®w 14-1 ¾ÉÄý»P¿ï³æ ?????14-1-1 ¾ÉÄý¦C¡]Navigation Bar¡^ 14-2 ªí³æ»P«ö¶s ?????14-2-1 ªí³æ±±¨î¤¸¥ó ?????14-2-2 ªí³æ±Æª© 14-3 ½ü¼½¤¸¥ó¡]Carousel¡^ ?????14-3-1 °ò¥»ªº½ü¼½®ÄªG ?????14-3-2 §Q¥ÎJavaScript±±¨î½ü¼½ CHAPTER 15 PWA¹ê§@¡X§Úªº°O±b¥»Web App 15-1 ¹ê§@¡u§Úªº°O±b¥»¡vºô¶ ?????15-1-1 ¡u§Úªº°O±b¥»¡vºô¶¥\¯à»P¤¶± ?????15-1-2 ¤U©Ô¦¡¿ï³æ ?????15-1-3 «ö¶s¸s²Õ ?????15-1-4 ¤¬°Êµøµ¡ ?????15-1-5 IndexedDBÃöÁä¦r¬d¸ß ?????15-1-6 µ½¥ÎBootstrap Icons»s§@¤p¹Ï¥Ü 15-2 ±Nºô¶Âà´«¦¨PWA ?????15-2-1 ¤°»ò¬OPWA ?????15-2-2 »s§@¦UºØ¤Ø¤oªºApp¹Ï¥Ü«ö¶s ?????15-2-3 ±Nºô¶Åܦ¨PWA
¸òµÛ¹ê°È¾Ç²ßHTML
²`¤J²L¥X JavaS
ºë³qJavaScri
¤µ±ß¨ÓÂIWeb«eºÝ®Ä
Effective
¬íÀ´AI»²§U¦æ°Êºô¶
AI®É¥Nªººô¶³]pH
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