Tason keskittäminen 2008-01-01 02:34

Kuvaus:

Dokumenttityypin merkitseminen

Microsoft FrontPage 2000 ei merkitse tekemilleen sivuille käyttämäänsä HTML-standardia. Tämä aiheuttaa ongelmia mm. DIV-elementin keskittämisessä.

  1. Avaa sivustoosi kuuluva sivu, ja siirry HTML-työtilaan.
  2. Tee Enter-näppäimellä yksi tyhjä rivi aivan koodin alkuun, ennen ensimmäistä <html>-aloitustunnistetta.
  3. Kopioi riville seuraava teksti:
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
  4. Tee sama jokaiselle sivustoosi kuuluvalle sivulle.

DIV-elementin lisääminen sivulle.

Taulukkoa parempi tapa sivun jäsentämiseen on käyttää CSS-kielellä hallittavia tasoja (layer). Vaikka FrontPage 2000 ei tätä toimintoa riittävästi tue, voimme kuitenkin ottaa tasot käyttöön siirtymällä HTML-työtilaan.

  1. Etsi HTML-työtilassa elementti <body>.
  2. Kirjoita seuraavalle riville <div id="asettelu">. Tee tarvittaessa lisätilaa Enter-näppäimellä. (Huomioi, että HTML-tilassa painetuilla rivinvaihdoilla ei ole merkitystä sivun ulkoasun kannalta. Niitä lisätään HTML-työtilassa vain HTML:n helpomman luettavuuden vuoksi.)
  3. Etsi elementti </body>.
  4. Kirjoita sitä edeltävälle riville </div>.
  5. Tee muutos jokaiselle sivustosi sivulle.

Ympäröimme siis koko sivun sisällön tasolla, eli div-elementillä. Nyt voimme paremmin hallita sivun sisällön sijoittumista näytöllä CSS-tyylejä apuna käyttäen.

DIV-elementin asetukset

Teemme mm. seuraavat asettelut: 

  • sivun sisällölle vakioleveys 700 kuvapistettä 
  • sijoittelu vaakasuunnassa keskelle sivua
  • hiukan tyhjää tilaa tason reunojen sisäpuolelle

Tee seuraavasti:

  1. Siirry sivustosi css-tyylitiedostoon, esim tyyli.css.
  2. Valitse Muotoile | Tyyli.
  3. Tee uusi tyyli, ja anna sille nimeksi #asettelu.
  4. Seuraavat kohdat löytyvät Muotoile -painikkeen alta, kohdista Kappale, Reuna, ja Sijainti.

i) Keskitetään taso vaakasuunnassa, ja lisätään marginaalia myös pystysuunnassa.

Kappale

ii) Lisätään reunus, ja lisätään tason sisälle hiukan tyhjää.

Reunat

iii) Lisätään div-elementille tausta- ja edustaväri.

Varjostaminen

iv) Annetaan tasolle leveys.

Sijainti

BODY-elementin asetukset

Määritetään body-elementille taustaväri, joka toimii sisältöalueen taustaväristä poikkeavana kehystävänä värinä koko sivulle. 

  1. Avaa css-tyylitiedosto.
  2. Valitse Muotoile | Tyyli.
  3. Etsi body, ja valitse muokkaa.
  4. Valitse Muotoile-painikkeen alta kohta Reuna, ja sen välilehti Varjostaminen.
  5. Valitse tausta- ja edustaväri.

Varjostaminen

Valmis tyylitiedosto

CSS-tyylitiedostossa pitäisi nyt olla mm. seuraavat keskityksen määrittävät rivit:

#asettelu { 
      width: 700px;
      margin: 20px auto;
      padding: 10px 30px; 

  }

Huom!

Huom! Varo FrontPage 2000:n Normaali-työtilaan ilmestyviä tason reunoja. Pelkkä hiirellä reunan päällä klikkaaminenkin saa FrontPagen määrittämään tason koon uudelleen, mutta tekemään tyylimäärityksen HTML-koodin yhteyteen. Näin tason koko tulee määriteltyä sekä tyylitiedostossa että itse sivulla, mikä lisää sivun loppuun paljon ylimääräistä tilaa selaimessa. 

  1. Syntyvän virheen voit korjata siirtymällä HTML-työtilaan.
  2. Etsi virheellinen rivi. Esimerkiksi: 
        <div id="asettelu" style="width: 700; height: 962">
  3. Korjaa rivi alkuperäiseen muotoonsa:
        <div id="asettelu">
Luokka:
http://raulihaverinen.fi/verkko-opas/?id=75