HTML ja sivuasemointi

Index

Yleistä
Taulukon ominaisuudet
Solun ominaisuudet

Pikseli, tyhjä kuva

Yleistä

Jos HTML-koodin komennoille (tagit) ei anneta lainkaan parametrejä, eikä parametreille arvoja, asemoi käyttäjän selain laaditun sivun yleensä siten, että sisältö asemoidaan selainikkunan vasemmasta reunasta ylhäältä alas.

HTML-kieli kuitenkin mahdollistaa eri elementtien sijoittelun selainikkunaan myös keskelle, tai oikeaan reunaan sekä elementtien suhteen toisiinsa nähden.
HTML:n tärkein työkalu asemoinnissa on taulukko ja taulukon sisältämät solut. <TABLE>aloittaa taulukon, </TABLE> lopettaa sen. Taulukon sisällä <TD>aloittaa solun</TD> lopettaa sen.

Ilman mitään sisältöäkin, taulukko on hyvä asemoinnin apuväline

Elementin (esim. taulukko) -sijainti näytöllä

  • Elementtien paikka selainikkunan ja toistensa suhteen määritetään kulloisenkin komennon align - parametrilla. Useimpien elementtien kohdalla align-parametrille voidaan antaa arvoja, left, right ja center.

Elementin (esim. taulukko) -koko näytöllä

  • Jos taulukon kokoa ei määritellä, sen leveys ja korkeus näytöllä määrittyy taulukon sisältämien solujen sisällön perusteella. Jos esimerkiksi selainikkunan leveys ei riitä solun sisältämän tekstirivin näyttämiseen, teksti jaetaan useammalle riville. Samoin käy, jos selainikkunaa skaalataan pienemmäksi, taulukko sisältöineen muodostetaan uudelleen.

    Muiden elementtien tapaan taulukon koko voidaan myös määrittää staattisesti (pikseleinä), tai dynaamisesti (prosentteina).

Taulukko

FrontPage Express, taulukon määritykset


Layout

  • Alignment - Taulukon asemointi vaakasuunnassa
  • Border Size - Taulukon kehyksen vahvuus pikseleinä
  • Cell Padding - Solun sisäseinämän ja elementin väliin jäävä tila
  • Cell Spacing - Taulukon sisältämien solujen väliin jäävä tila

Minimun Width

  • Taulukon koon määrittely pikseleinä tai prosentteina. Rasti Specify Width - ruutuun sekä valinta kumpana arvo annetaan, pikseleinä vai prosentteina

Custom Background

  • Rasti Use Backround Image - ruutuun. Browse-painikkeen avulla voidaan ladata kuva. Myös absoluuttista viittausta voidaan käyttää.
  • Background Color - Taulukon taustaväri

Taulukon taustan väri ja kuva eivät kuulu html 3.2 -määritykseen. Toimii selaimissa vaihtelevasti.

Custom Colors

Edellyttää, että taulukon kehys on määritetty näkyväksi.

  • Border - Kehyksen väri
  • Light Border - Valoalueen väri
  • Dark Border - Varjoalueen väri

Taulukon kehyksen väri ei kuulu html 3.2 -määritykseen. Toimii selaimissa vaihtelevasti.

Solu

FrontPage Express, solun määritykset


Huom. Soluihin annetut määrittelyt kumoavat taulukkoon annetut arvot.


Layout

  • Horizontal Alignment - Solun sisällön asemointi vaakasuunnassa
  • Vertical Alignment - Solun sisällön asemointi pystysuunnassa
  • Header Cell - Otsikkosolu, jonka sisältö korostuu.

Minimum Width

  • Solun koon määrittely pikseleinä tai prosentteina. Rasti Specify Width - ruutuun sekä valinta kumpana arvo annetaan, pikseleinä vai prosentteina.

Custom Backround

  • Rasti Use Backround Image - ruutuun. Browse-painikkeen avulla voidaan ladata kuva. Myös absoluuttista viittausta voidaan käyttää.
  • Background Color - Solun taustaväri

Solun taustan väri ja kuva eivät kuulu html 3.2 -määritykseen. Toimii selaimissa vaihtelevasti.

Custom Colors

Edellyttää, että taulukon kehys on määritetty näkyväksi.

  • Border - Kehyksen väri
  • Light Border - Valoalueen väri
  • Dark Border - Varjoalueen väri

Solun kehyksen väri ei kuulu html 3.2 -määritykseen. Toimii selaimissa vaihtelevasti.

Cell Span

Solujen yhdistäminen vaaka- tai pystysuunnassa

  • Rows Spanned - Pystysuunnassa <TD ROWSPAN=4>
  • Columns Spanned - Vaakasuunnassa <TD COLSPAN=3>


Pikseli

Myös kuva on hyvä asemoinnin apuväline. Tehdään läpinäkyvä kuva ja muutellaan sen width ja height - arvoja tarpeen mukaan.

| 12.5.2002 |