HTML_CSS_前端基礎講座-4.pdf

Transcript

1. #PPUTUSBQ
   ʧୗ 88$PEF
   5BJQFJ
   '&
   4UVEZ
   (SPVQ !ZJZJOHXV 4ZOUSFOE
   '
   
   
   'SJEBZ
   0DUPCFS
   
   

2. IUUQHFUCPPUTUSBQDPN

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

   for developing responsive, mobile first projects on the web.̀ y
   ֜ၣ #PPUTUSBQ
   JTn
   

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

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

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

   JavaScript牧犖胼墋㻌 狶ڊӞ犚च๜ጱ԰㵕 UI牐 Ꮄැί׵

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

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

   牐 Ꮄැί׵ • (4) ॠኞ疰磪蒂ቘঅ RWD 犥现猋磪 Grid System牧螭磪
 盄ग़অአጱ helper牧犥现 icon牐 • (5) 犋ॡ襑ᥝ臺碻樌戔懯ጱ盅ݣՕᶎ牐

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

   Bootstrap牧獮๗ጱ䋊聜౮๜疰独஑牐 Εැί׵

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

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

    $44
    +BWB4DSJQU
    ٙᏦࣩdɨ༱ܝ༆Ꮐᐵܝ׳ՑІʉৣႡλٙၣࠫͦ፽ɨf

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

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

14. ࢙ኜ
    $POUBJOFS
    DPOUBJOFS
    38%
    ШϞո֛௰ɽᄱdཫண̸̛ໄʕf
    
    DPOUBJOFSGMVJE
    38%
    ˲Цတፃ࿇ᄱܓf .container .container-fluid TDSFFO TDSFFO

15. ၣࣸӻ୕
    (SJE
    4ZTUFN ̀඲׳ί
    DPOUBJOFS
    א݊
    DPOUBJOFSGMVJE
    ʘʫf
    ɓΐ̍ί
    SPXd༁ࠦΎʲ
    DPMVNO
    DPMYYY f

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

    SPX .col-md-10 .col-md-2

17. ၣࣸӻ୕
    (SJE
    4ZTUFN ண௪ᄱܓ DPMVNO
    ۃၢ 
    QY ˓ዚ DPMYT 
    QY ̻ؐ DPMTN QY

    ɓছፃ࿇ DPMNE QY ɽፃ࿇ DPMMH

18. IUUQHFUCPPUTUSBQDPNFYBNQMFTHSJE

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

    'PSNT
    h #VUUPOT
    h *NBHFT
    h IFMQFST
    n
    h Ⴍॆٙΐவჿεᒔʔν੭ɽ࢕௃֜ၣܣჿ޶ˢ༰Ҟ

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

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

    
    TFMFDU
    UFYUVSF
    ഃڌఊ
    )5.-
    ʩ९f

22. #VUUPOT h ˴ࠅԴ͜
    CUO
    வࡈ
    DTT
    DMBTT
    OBNF
    Ըࡌུᅵό
    h CUO
    வࡈᅵό̙˸͜ί
    B
    CVUUPO
    JOQVU
    ɪࠦ

23. ੬ٙ͜
    $44
    ଡ଼΁
    $PNQPOFOU h /BWCBS
    h 1BHJOBUJPO
    h "MFSUT
    h #SFBEDSVNCT

    1MFBTF
    WJTJU
    IUUQHFUCPPUTUSBQDPNDPNQPOFOUT

24. -BC
    5JNF
    ਗ˓ࣛග

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

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

    h ߰ࠅࡌҷЍӻഃਪᕚးඎഛ͜
    $VTUPNJ[F
    #PPUTUSBQ
    ̌ঐdʶᄳɓɽ਼ٙ
    PWFSSJEFf
    h ߰
    #PPUTUSBQ
    ཫணٙ
    38%
    CSFBLQPJOU
    ʔୌΥЫࠅٙdɰ݊ீཀ
    $VTUPNJ[F
    #PPUTUSBQ
    ପ͛Іʉࠅٙ
    CSFBLQPJOU
    f
    h #PPUTUSBQ
    ཫணԴ͜ə
    OPSNBMJ[FDTTdʶΎ˓ਗˏ͜
    SFTFUDTTn
    ΪՇ٫ ݊̌ঐœᗳЧ

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

    ԸɛѓൡЫྼί݊Ϟᓃ௦๨d߰Ыٙၣ१ஹ
    (SJE
    4ZTUFN
    ேʔცࠅא ݊ʔልᕏ͜ʔՑʡჿ
    CPPUTUSBQ
    ٙतᓃdԟ৻ঌʔࠅ͜əы

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

    
    $44
    'SPOUFOE
    'SBNFXPSLT
    5IF
    #FTU
    
    GPS
    .PEFSO
    8FC
    %FTJHO
    
    IUUQVTBCMJDBHJUIVCJP GSPOUFOEGSBNFXPSLTDPNQBSFIUNM IUUQBNB[FVJPSH

29. ༟๕ 'SFF
    UIFNFT
    GPS
    #PPUTUSBQ
    IUUQTCPPUTXBUDIDPN
    4UBSU
    #PPUTUSBQ
    IUUQTTUBSUCPPUTUSBQDPN
    IUUQUFDITMJEFTDPNUPQCPPUTUSBQUPPMTBOESFTPVSDFT
    IUUQXXXMBWJTICPPUTUSBQDPN

30. ༟๕ IUUQTXXXDPEFTDIPPMDPNMFBSOIUNMDTT
    IUUQTXXXDPEFDBEFNZDPN

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