HTML_CSS_前端基礎講座-4.pdf

#PPUTUSBQʧୗ 88$PEF5BJQFJ'&4UVEZ(SPVQ !ZJZJOHXV 4ZOUSFOE''SJEBZ 0DUPCFS

IUUQHFUCPPUTUSBQDPN

̿Bootstrap is the most popular HTML, CSS, and JS framework
for developing responsive, mobile first projects on the web.̀ y֜ၣ #PPUTUSBQJTn

Ӟ㮆ٍ磪毆戔 CSS 䰬ୗ, 奲կ犥现Ӟ犚 JavaScript 秇奲ጱ獮ᒒ Framework牧虏樄咳Ո㹓盠蝧樄咳獮ᒒՕ ᶎ牐 ౬̩༑Ⴍ ᄿ່ٙႭج

IUUQFYQPHFUCPPUTUSBQDPN ޶޶ϞࡳԬၣ१݊͜#PPUTUSBQਂ̈Ըٙ

• (1) 虏䌘ෝ CSS/JavaScript 犋ᆧጱ樄咳Ո㹓牧ݝᥝ 䨝䌃 HTML牧䋊聜 Bootstrap 疰ݢ犥仂斕獮ᒒՕᶎ ጱ矎粚ದૣ牐ݚक़䨝አӞ讨
JavaScript牧犖胼墋㻌狶ڊӞ犚च๜ጱ԰㵕 UI牐 Ꮄැί׵

• (2) 犋ॡ磪碻樌蒂ቘ戔懯牧獍ݪ㴄অ犖䷱磪戔懯䒍 ጱ眐丆牐 Ꮄැί׵

• (3) 螕ݳ䌃 Code 穉叨ڊ Prototype ౲ฎ PPT 螭ᥝ盠ጱՈ  (犋螂蝡圵Ո盄੝މ...)
牐 Ꮄැί׵ • (4) ॠኞ疰磪蒂ቘঅ RWD 犥现猋磪 Grid System牧螭磪  盄ग़অአጱ helper牧犥现 icon牐 • (5) 犋ॡ襑ᥝ臺碻樌戔懯ጱ盅ݣՕᶎ牐

• 犋螕ݳ翕ᒊ觓໒ Layout 螂ෝ粬獨ጱ翕ᒊ (ই篷ဩ瞟ڊ Grid System ౲ฎತ犋ڊ粬磪憒㳷ጱ翕ᒊ)牐  • 獮๗䋊聜ใ娄य़夹Ӿ樌纷ଶ櫞牧֕舙盄毱耆ֵአک
Bootstrap牧獮๗ጱ䋊聜౮๜疰独஑牐 Εැί׵

νОක֐ ЫცࠅՈ௪ਿ͉ٙ)5.-ঐɢf ЫცࠅՈ௪ਿ͉ٙ$44͜جf ЫცࠅϞԴ͜ᇜ፨ኜԸක೯)5.-$44 +BWB4DSJQUٙঐɢf ¨ਿ͉©ՇࡈοϞᓃᗭ່֛dШཫ΋ኪ୦வԬཫ௪ٝᗆ݊̀ࠅٙf

νОԴ͜ճ Ց֜ၣɨ༱#PPUTUSBQ ݟ޶(FUUJOH4UBSUFEࠫࠦdኪ୦νОί)5.- ˏɝቇ຅ٙ$44 +BWB4DSJQU  ˏɝ#PPUTUSBQٙ+BWB4DSJQUʘۃɓ֛ࠅ΋ˏɝK2VFSZdΪމ#PPUTUSBQ ޴Ա׵K2VFSZ Չྼτༀ#PPUTUSBQٙ˙όϞܘεdίϤ̥݊ᑘԷɨ༱ᇜᙇλٙ௰Գʷ
$44 +BWB4DSJQUٙᏦࣩdɨ༱ܝ༆Ꮐᐵܝ׳ՑІʉৣႡλٙၣࠫͦ፽ɨf

$44ணࠇ˙όʧୗ л͜#PPUTUSBQ່֛λٙ$44DMBTTOBNFd˸ʿภ ৣணࠇλٙ)5.-ഐ࿴ʘɨdІ್̙˸ପ͛̈ՈϞ ഐ࿴׌ٙ)5.-DPEF˸ʿɓߧ׌ٙ6*f

࢙ኜ$POUBJOFS л͜DPOUBJOFSא݊DPOUBJOFSGMVJE̍ᔧࠫࠦהϞ ٙ)5.-ʩ΁dא݊ఊዹԴࣛ͜d͜Ը̍ᔧၣࣸӻ ୕ٙ)5.-ʩ९f

࢙ኜ$POUBJOFS DPOUBJOFS38%ШϞո֛௰ɽᄱdཫண̸̛ໄʕf DPOUBJOFSGMVJE38%˲Цတፃ࿇ᄱܓf .container .container-ﬂuid TDSFFO TDSFFO

ၣࣸӻ୕(SJE4ZTUFN ̀඲׳ίDPOUBJOFSא݊DPOUBJOFSGMVJEʘʫf ɓΐ̍ίSPXd༁ࠦΎʲDPMVNO DPMYYY f

ၣࣸӻ୕(SJE4ZTUFN ίSPX༁ࠦٙDPMYYZZ  YY˾ڌცࠅЪٙ͜CSFBLQPJOUٙ࠽dνYT TN NE MH ༉Ԉɨࠫ ZZ˾ڌDPMVNOٙ࠽d̙˸݊_dШίΝɓࡈSPX༁ࠦٙᐼᅰ ௰ε̥ঐf
SPX .col-md-10 .col-md-2

ၣࣸӻ୕(SJE4ZTUFN ண௪ᄱܓ DPMVNOۃၢ QY ˓ዚ DPMYT QY ̻ؐ DPMTN QY
ɓছፃ࿇ DPMNE QY ɽፃ࿇ DPMMH

IUUQHFUCPPUTUSBQDPNFYBNQMFTHSJE

੬ٙ͜$44ᅵό h ਿ͉ٙ)5.-ʩ९ᅵόҷᄳ IY Q DPEFn h 5BCMF h
'PSNT h #VUUPOT h *NBHFT h IFMQFSTn h Ⴍॆٙΐவჿεᒔʔν੭ɽ࢕௃֜ၣܣჿ޶ˢ༰Ҟ

5BCMF h Դ͜ਿ͉ٙUBCMFʩ९dΎࢁ͜UBCMFDTTᅵό h ࡌུᅵό̙˸̋ɪUBCMFTUSJQFE UBCMFCPSEFSFE UBCMF IPWFS UBCMFDPOEFOTFE

'PSNT h ̥ࠅԴ͜GPSNᅺᜀఱึ஗ረʚᅵό h JOQVUʩ९ɽ௅ʱცࠅ̋ɪGPSNDPOUSPMٙDTT ˲ᄱܓึ஗ண֛މ XJEUI h Դ͜GPSNHSPVQภৣMBCFM༧JOQVU
TFMFDU UFYUVSFഃڌఊ)5.-ʩ९f

#VUUPOT h ˴ࠅԴ͜CUOவࡈDTTDMBTTOBNFԸࡌུᅵό h CUOவࡈᅵό̙˸͜ίB CVUUPO JOQVUɪࠦ

੬ٙ͜$44ଡ଼΁ $PNQPOFOU h /BWCBS h 1BHJOBUJPO h "MFSUT h #SFBEDSVNCT
1MFBTFWJTJUIUUQHFUCPPUTUSBQDPNDPNQPOFOUT

-BC5JNF ਗ˓ࣛග

ઋྤᕚ Ы݊ɧ௴'SJEBZ/JHIUʮ̡࡝ආԸٙ'SPOUFOE ϼᒮၡܢცࠅ8FCʧ̘ࠦΣ܄˒࢝ͪอӻ୕ٙܝ̨d Ϥܝ̨̌ঐʔεdШࠅঐ࢝ͪ೮ɝd೮ɝܝٙ࠯ࠫd ˸ʿପۜΐڌdପۜอᄣഃݴ೻d༟ࣘே݊৿ٙӚᗫڷd  ϼᒮႭ܄˒ɰ͊̀ึႩॆ޶dШࠅӋݴ೻න࿫d  ცࠅઆᏍώႡЪঐ੄࢝ͪϤݴ೻ٙ)5.-ࠫࠦf

ࡈɛจԈ h ึ͜#PPUTUSBQʔഃ׵ึᄳۃ၌dε޶˖΁f)5.-ʶ඾̍඾ࢁf  ሗйɛᏍЫ$PEF3FWJFXא݊#PPUMJOUҢɰӚ͜ཀ h ᅠᄳልᄳ 0WFSSJEF ࡡ΋ٙ#PPUTUSBQٙ$44ࠅϞɓ֛ٙ஝ۆfʶᜫટ ˓ɛࡰชՑѢᓔf
h ߰ࠅࡌҷЍӻഃਪᕚးඎഛ͜$VTUPNJ[F#PPUTUSBQ̌ঐdʶᄳɓɽ਼ٙ PWFSSJEFf h ߰#PPUTUSBQཫணٙ38%CSFBLQPJOUʔୌΥЫࠅٙdɰ݊ீཀ $VTUPNJ[F#PPUTUSBQପ͛ІʉࠅٙCSFBLQPJOUf h #PPUTUSBQཫணԴ͜əOPSNBMJ[FDTTdʶΎ˓ਗˏ͜SFTFUDTTn ΪՇ٫ ݊̌ঐᗳЧ

ࡈɛจԈ h ᒱ್˂͛˕౪38%݊#PPUTUSBQٙᎴැdШ#PPUTUSBQʔ݊38%ٙ Ν່൚ ʔ݊ༀə#PPUTUSBQఱϞ38%dɰ݊ࠅৣΥ̴ٙ)5.- $44 ٙ஝ྌʑϞจ່ f h ׼׼͜əՈϞ38%ٙ#PPUTUSBQШ݊ɦʔซࠅ38%ܣჿ፬klཀ
ԸɛѓൡЫྼί݊Ϟᓃ௦๨d߰Ыٙၣ१ஹ(SJE4ZTUFNேʔცࠅא ݊ʔልᕏ͜ʔՑʡჿCPPUTUSBQٙतᓃdԟ৻ঌʔࠅ͜əы

һεٙ፯኿ ᗳЧ#PPUTUSBQவᅵٙۃ၌)5.-$44+BWB4DSJQU'SBNFXPSL  ɰϞՉ˼ٙ፯኿dЫ̙˸Ա๫ʔΝ࣪ݖٙत׌dνணࠇࠬࣸ )5.-ഐ࿴஝ྌd $44նΤd˸ʿɓԬ੬͜ၣࠫʩ΁d፯኿ቇΥઆٙ࣪ݖԸԴ͜f IUUQTFNBOUJDVJDPN IUUQGPVOEBUJPO[VSCDPN IUUQQVSFDTTJP Չ˼ਞϽ
$44'SPOUFOE'SBNFXPSLT5IF#FTUGPS.PEFSO8FC%FTJHO IUUQVTBCMJDBHJUIVCJP GSPOUFOEGSBNFXPSLTDPNQBSFIUNM IUUQBNB[FVJPSH

༟๕ 'SFFUIFNFTGPS#PPUTUSBQIUUQTCPPUTXBUDIDPN 4UBSU#PPUTUSBQIUUQTTUBSUCPPUTUSBQDPN IUUQUFDITMJEFTDPNUPQCPPUTUSBQUPPMTBOESFTPVSDFT IUUQXXXMBWJTICPPUTUSBQDPN

༟๕ IUUQTXXXDPEFTDIPPMDPNMFBSOIUNMDTT IUUQTXXXDPEFDBEFNZDPN

௰ܝ Ҏૐ̬ੀᑺࢭ˸Ըᜫɽ࢕࿁׵ ᄳۃ၌Ϟጳሳ  ᑽᑽ

HTML_CSS_前端基礎講座-4.pdf

HTML_CSS_前端基礎講座-4.pdf

winwu

More Decks by winwu

Other Decks in Programming

Featured

Transcript

#PPUTUSBQʧୗ 88$PEF5BJQFJ'&4UVEZ(SPVQ !ZJZJOHXV 4ZOUSFOE''SJEBZ 0DUPCFS

IUUQHFUCPPUTUSBQDPN

̿Bootstrap is the most popular HTML, CSS, and JS framework

Ӟ㮆ٍ磪毆戔 CSS 䰬ୗ, 奲կ犥现Ӟ犚 JavaScript 秇奲ጱ獮ᒒ Framework牧虏樄咳Ո㹓盠蝧樄咳獮ᒒՕ ᶎ牐 ౬̩༑Ⴍ ᄿ່ٙႭج

IUUQFYQPHFUCPPUTUSBQDPN ޶޶ϞࡳԬၣ१݊͜#PPUTUSBQਂ̈Ըٙ

• (1) 虏䌘ෝ CSS/JavaScript 犋ᆧጱ樄咳Ո㹓牧ݝᥝ 䨝䌃 HTML牧䋊聜 Bootstrap 疰ݢ犥仂斕獮ᒒՕᶎ ጱ矎粚ದૣ牐ݚक़䨝አӞ讨

• (2) 犋ॡ磪碻樌蒂ቘ戔懯牧獍ݪ㴄অ犖䷱磪戔懯䒍 ጱ眐丆牐 Ꮄැί׵

• (3) 螕ݳ䌃 Code 穉叨ڊ Prototype ౲ฎ PPT 螭ᥝ盠ጱՈ  (犋螂蝡圵Ո盄੝މ...)

• 犋螕ݳ翕ᒊ觓໒ Layout 螂ෝ粬獨ጱ翕ᒊ (ই篷ဩ瞟ڊ Grid System ౲ฎತ犋ڊ粬磪憒㳷ጱ翕ᒊ)牐  • 獮๗䋊聜ใ娄य़夹Ӿ樌纷ଶ櫞牧֕舙盄毱耆ֵአک

νОක֐ ЫცࠅՈ௪ਿ͉ٙ)5.-ঐɢf ЫცࠅՈ௪ਿ͉ٙ$44͜جf ЫცࠅϞԴ͜ᇜ፨ኜԸක೯)5.-$44 +BWB4DSJQUٙঐɢf ¨ਿ͉©ՇࡈοϞᓃᗭ່֛dШཫ΋ኪ୦வԬཫ௪ٝᗆ݊̀ࠅٙf

νОԴ͜ճ Ց֜ၣɨ༱#PPUTUSBQ ݟ޶(FUUJOH4UBSUFEࠫࠦdኪ୦νОί)5.- ˏɝቇ຅ٙ$44 +BWB4DSJQU  ˏɝ#PPUTUSBQٙ+BWB4DSJQUʘۃɓ֛ࠅ΋ˏɝK2VFSZdΪމ#PPUTUSBQ ޴Ա׵K2VFSZ Չྼτༀ#PPUTUSBQٙ˙όϞܘεdίϤ̥݊ᑘԷɨ༱ᇜᙇλٙ௰Գʷ

$44ணࠇ˙όʧୗ л͜#PPUTUSBQ່֛λٙ$44DMBTTOBNFd˸ʿภ ৣணࠇλٙ)5.-ഐ࿴ʘɨdІ್̙˸ପ͛̈ՈϞ ഐ࿴׌ٙ)5.-DPEF˸ʿɓߧ׌ٙ6*f

࢙ኜ$POUBJOFS л͜DPOUBJOFSא݊DPOUBJOFSGMVJE̍ᔧࠫࠦהϞ ٙ)5.-ʩ΁dא݊ఊዹԴࣛ͜d͜Ը̍ᔧၣࣸӻ ୕ٙ)5.-ʩ९f

࢙ኜ$POUBJOFS DPOUBJOFS38%ШϞո֛௰ɽᄱdཫண̸̛ໄʕf DPOUBJOFSGMVJE38%˲Цတፃ࿇ᄱܓf .container .container-ﬂuid TDSFFO TDSFFO

ၣࣸӻ୕(SJE4ZTUFN ̀඲׳ίDPOUBJOFSא݊DPOUBJOFSGMVJEʘʫf ɓΐ̍ίSPXd༁ࠦΎʲDPMVNO DPMYYY f

ၣࣸӻ୕(SJE4ZTUFN ίSPX༁ࠦٙDPMYYZZ  YY˾ڌცࠅЪٙ͜CSFBLQPJOUٙ࠽dνYT TN NE MH ༉Ԉɨࠫ ZZ˾ڌDPMVNOٙ࠽d̙˸݊_dШίΝɓࡈSPX༁ࠦٙᐼᅰ ௰ε̥ঐf

ၣࣸӻ୕(SJE4ZTUFN ண௪ᄱܓ DPMVNOۃၢ QY ˓ዚ DPMYT QY ̻ؐ DPMTN QY

IUUQHFUCPPUTUSBQDPNFYBNQMFTHSJE

੬ٙ͜$44ᅵό h ਿ͉ٙ)5.-ʩ९ᅵόҷᄳ IY Q DPEFn h 5BCMF h

5BCMF h Դ͜ਿ͉ٙUBCMFʩ९dΎࢁ͜UBCMFDTTᅵό h ࡌུᅵό̙˸̋ɪUBCMFTUSJQFE UBCMFCPSEFSFE UBCMF IPWFS UBCMFDPOEFOTFE

'PSNT h ̥ࠅԴ͜GPSNᅺᜀఱึ஗ረʚᅵό h JOQVUʩ९ɽ௅ʱცࠅ̋ɪGPSNDPOUSPMٙDTT ˲ᄱܓึ஗ண֛މ XJEUI h Դ͜GPSNHSPVQภৣMBCFM༧JOQVU

#VUUPOT h ˴ࠅԴ͜CUOவࡈDTTDMBTTOBNFԸࡌུᅵό h CUOவࡈᅵό̙˸͜ίB CVUUPO JOQVUɪࠦ

੬ٙ͜$44ଡ଼΁ $PNQPOFOU h /BWCBS h 1BHJOBUJPO h "MFSUT h #SFBEDSVNCT

-BC5JNF ਗ˓ࣛග

ࡈɛจԈ h ึ͜#PPUTUSBQʔഃ׵ึᄳۃ၌dε޶˖΁f)5.-ʶ඾̍඾ࢁf  ሗйɛᏍЫ$PEF3FWJFXא݊#PPUMJOUҢɰӚ͜ཀ h ᅠᄳልᄳ 0WFSSJEF ࡡ΋ٙ#PPUTUSBQٙ$44ࠅϞɓ֛ٙ஝ۆfʶᜫટ ˓ɛࡰชՑѢᓔf

ࡈɛจԈ h ᒱ್˂͛˕౪38%݊#PPUTUSBQٙᎴැdШ#PPUTUSBQʔ݊38%ٙ Ν່൚ ʔ݊ༀə#PPUTUSBQఱϞ38%dɰ݊ࠅৣΥ̴ٙ)5.- $44 ٙ஝ྌʑϞจ່ f h ׼׼͜əՈϞ38%ٙ#PPUTUSBQШ݊ɦʔซࠅ38%ܣჿ፬klཀ

һεٙ፯኿ ᗳЧ#PPUTUSBQவᅵٙۃ၌)5.-$44+BWB4DSJQU'SBNFXPSL  ɰϞՉ˼ٙ፯኿dЫ̙˸Ա๫ʔΝ࣪ݖٙत׌dνணࠇࠬࣸ )5.-ഐ࿴஝ྌd $44նΤd˸ʿɓԬ੬͜ၣࠫʩ΁d፯኿ቇΥઆٙ࣪ݖԸԴ͜f IUUQTFNBOUJDVJDPN IUUQGPVOEBUJPO[VSCDPN IUUQQVSFDTTJP Չ˼ਞϽ

༟๕ 'SFFUIFNFTGPS#PPUTUSBQIUUQTCPPUTXBUDIDPN 4UBSU#PPUTUSBQIUUQTTUBSUCPPUTUSBQDPN IUUQUFDITMJEFTDPNUPQCPPUTUSBQUPPMTBOESFTPVSDFT IUUQXXXMBWJTICPPUTUSBQDPN

༟๕ IUUQTXXXDPEFTDIPPMDPNMFBSOIUNMDTT IUUQTXXXDPEFDBEFNZDPN

௰ܝ Ҏૐ̬ੀᑺࢭ˸Ըᜫɽ࢕࿁׵ ᄳۃ၌Ϟጳሳ  ᑽᑽ