Www-sivut tutorial

 

Www-sivut

Av-Heltech (11C) 03.12.2012- 15.01.2013

 

Taittotutorial

  1. avaa dreamweaver
  2. sivuston määrittely: (luodaan juurikansio)
    1. site valikko > new site
    2. kerro dw:lle sivuston nimi, juurikansion sijainti
    3. paina Save
  3. luodaan uusi html sivu
    1. file > new
    2. blank page, html, layout none, DocType html5
    3. tallenna sivu nimellä index.html
  4. preferenssit: new document > default document type html5
  5. koodit "tyhjälllä" sivulla:
    • <!DOCTYPE HTML>: dokumenttityyppi (html4, html5, xhml )
    • html tägi: käärii koko sivun
    • head-tägi: metatietoa sivusta
    • charset-määre: merkistökoodaus
    • title elementti
    • body elementti: nettisivun näkyvä sisältö
    • p: paragraph: tekstikappale elementti
  6. taitto:
    1. tallenna leiskaesim01a.jpg tiedosto samaan kansioon kuin index.html
    2. paina properties paneelissa Page Properties > Tracing Image > Browse > hae tiedosto taustakuvaksi
    3. lisätään 4 div tägiä
    4. insert > Layout > div tag (anna class määreeksi "wrapper"
    5. index.html nyt: index.html
    6. css styles paneeli:
      1. Selector type : Compound
      2. Selector name: .wrapper
      3. new stylesheet file
      4. luo uusi kansio "css"
      5. tallenna css tiedosto nimellä tyyli01.css
      6. anna Bordet caterialle arvot: style: solid, width: thin, background: #999
      7. nyt tiedosto näytää tältä index02
    7. lisätään taittokoodit:
      1. tyylisääntöihin:
      2. body {
        margin:0;
        padding:0;
        font-size: 100%;
        }

        .wrapper {
        border: thin solid #999;
        margin-left:12px;
        width:816px;
        }

        #header {
        font-size:2em;
        border:2px solid #959;
        height:120px;
        }
    8. näidenä jälkeen tiedosto index näyttää tältä: index
    9. lisätään css koodit:
      • body {
        margin:0;
        padding:0;
        font-size: 100%;
        }
        .wrapper {
        /*border: thin solid #999;*/
        margin-left:12px;
        margin: 0 auto; /* tämä keskittää laita viimeiseksi */
        width:816px;
        }
        #header {
        font-size:2em;
        /*border:2px solid #959;*/
        height:120px;
        margin-bottom:35px;
        background-color:#f0ccb6;
        }
        #sidebarLeft {
        width: 290px;
        float:left;
        /* border:2px solid #959;*/
        height:310px;
        background-color:#efefef;

        }
        #sidebarRigth {
        width: 520px;
        float:left;
        border: 2px solid #999;
        height:310px;
        }
    10. tilanne muutosten jälkeen: index