|
Tulostus
Yleinen ongelma taulukkosivujen kanssa on tulostus. Usein käy niin, että teksti leikkautuu ikävästi oikeasta reunasta. Lisäksi navigaatiot tulevat mukaan ja kaikki linkit on alleviivattu. Tekstiä on siis erittäin hankala lukea.
Teksti saattaa paperilla olla esim. tämän näköistä kuin tässä alla, vaikka se ruudulla näkyisikin oikein.
Ratkaisu
Ongelman voi ratkaista käyttämällä css-tyyliä (Casacading Style Sheets) eli tyyliohjetta. Ainakin Explorer 6 ja Netscape 7 tukevat tulostuksen erillistä ohjausta ccs:n avulla. Toisaalta esim. Netscape 4.7. ei ymmärrä ollenkaan css kakkosta. Tee siis esim. tällainen tyyliohje ja tallenna se juuritasolle tai johonkin muuhun kansioon.
@media print {
.noprint {display: none; }
a { text-decoration: none;
color: black;
background: white; }
table { border : none;
border-bottom : none;
border-style : none;
text-align : left; }
TD { color : Black;
border : none;
background-color : white;
font-family : Times New Roman, serif;
font-size : 13pt;
text-align : left; }
}
@media screen {
a { text-decoration: none;
color: black;
background: white; }
table { border : none;
border-bottom : none;
border-style : none;
text-align : left; }
TD { color : Black;
border : none;
background-color : white;
font-family : Times New Roman, serif;
font-size : 13pt;
text-align : left; }
}
|
Tee tyylisivuun viittaus esim. näin:
<head>
<title>IxApplication test</title>
<LINK REL="StyleSheet" TYPE="text/css" HREF="/fi/testi.css"/>
</head>
|
Oikea paikka on siis heti titlen jälkeen. HREF ilmaisee missä tyylidokumentti sijaitsee. Tässä esimerkissä css-tiedosto "testi.css" sijaitsee siis ihan juuritasolla. Lopputulos on sitten kutakuinkin tällainen. HUOM! sivun idea paljastuu vasta, kun sen tulostaa tai katselee sivua tulostuksen esikatselussa.
Homman voi tehdä toisinkin, jolloin eri medioille tehdään erilliset tyylitiedostot. Esim. näin:
<link rel="stylesheet" type="text/css"
HREF="/css/testi1.css" media="print" />
<link rel="stylesheet" type="text/css"
HREF="/fi/testi2.css" media="screen" />
|
Tehtävä 10.
Kopioi sivu
http://sarja.internetix.fi/fi/sisalto/verkkopeda/kuvaoppimateriaalissa/luku1
Muokkaa sivua niin, ettei tulostettaessa näy vasemman puoleista navigaatiovalikkoa eikä yläpalkkia ja määrittele tulostuksen fontiksi Times New roman.
|