MUSIK Håkan Steen skriver om pop
Lars Johan Hierta På internet sedan 1994  
Aftonbladetit
SÖNDAG 3 JANUARI 1999
STARTSIDA
IT
Spel
Nätguiden
It-toppen
It-skolor
Krönikor
Läsarnas hemsidor
Artikelarkivet
Spelarkivet
Tyck till
Min egen it-diskussion
NYHETER
TELEGRAM
E-POST
INNEHÅLL
SÖK
SPORT
TIPS & TRAV
NÖJE
SMS & RING-
SIGNALER
WAP &
HANDDATOR
WEBBRADIO
WEBB-TV
KVINNA
PULS
EKONOMI
BÖRS
FONDER
NYA RESOR
BIL
HÄLSA
TV
VÄDER
NYA BOSTAD
STOCKHOLM
TYCK TILL
CHATT
LEDARE
KULTUR
BOKBANKEN
DEBATT
NYA
HOROSKOP
MAT&VIN
E-KORT
SKOLTURNÉ
JOBBA HÄR
ANNONSERA
MEDIECENTER
KONCERN-
INFO

KÖP&SÄLJ








Förnamn

Efternamn
Jag vill läsa
e-posten

Funplanet
  

Att använda stilmallar

– och hitta genvägen till en snygg sida

Nytt år och nya tag. Här får du lära dig den största av hemligheterna bakom en snygg hemsida – stilmallar.
  Med ett par knapptryck kan du bestämma att en text ska vara rubrik, och med ytterligare några knapptryck kan du ange att rubriken ska vara i ett visst typsnitt.
  Men om du efter ett tag vill ändra rubriktypsnittet på alla dina webbsidor – måste du gå igenom varje sida och ändra på dem allihop? Nej, inte om du använder dig av stilmallar.
  Med hjälp av stilmallar kan du enkelt definiera hur varje element (till exempel brödtext, rubrik och länk) ska tolkas av webbläsaren. Oavsett om det handlar om typsnitt, storlek, position eller färg. Ungefär på samma sätt som du använder formatmallar i ett ordbehandlingsprogram. Det finns bara en liten hake. Du får inte ha formaterat texten och bestämt typsnitt i efterhand. Eftersom det inte finns så många hemsidesprogram som är bra på att hantera stilmallar, gör vi stilmallen för hand.

Så gör du stilmallen


Före stilmall

Öppna en texteditor, t ex Notepad. Skriv in de element du vill ändra utseendet på, vart och ett på en egen rad.
  Elementet P används för brödtext, H1 för stor rubrik, H2 för mindre rubrik och H3 för ännu mindre rubrik. Det finns massor av element, men vi börjar så här.

P { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt }
H1 { font-family: Verdana, Arial, Helvetica, sans-serif; color: #990000 }
H2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; font-size: 14pt }
H3 { font-family: Verdana, Arial, Helvetica, sans-serif }

  Så där, då är definitionerna av elementen klara. Det som står efter font- family är typsnittet som ska användas. Jag har angivit fyra stycken, och det är i vilken ordning typsnitten ska användas om det första inte finns installerat i besökarens dator. Font-size anger typsnittsstorleken, font-weight bestämmer om typsnittet ska visas som fet eller normal och slutligen color som bestämmer färgen.
  Spara stilmallen i din hemsideskatalog där du har dina html-filer och ge den ett namn, förslagsvis hemsida.css. Css är en förkortning av det engelska uttrycket för stilmallar, Cascading Style Sheets.

Lägg in stilmallen

Efter stilmall
På webbsidan där stilmallen ska in, skriver du bara till en liten rad mellan HEAD-märkena nästan högst upp i html-koden:
  <LINK REL="stylesheet" HREF="hemsida.css">
  Inom citattecknena efter HREF skriver du helt enkelt in namnet på stilmallen du har gjort. Tyvärr klarar varken Netscape Composer eller Frontpage Express av att hantera stilmallar i dag. Programmen som kostar pengar börjar däremot bli bättre på stilmallar.
  Ett av de bästa heter Dreamweaver 2 och kommer från företaget Macromedia. Du kan själv hämta en provversion från adressen www.macromedia.com
  Mer om stilmallar nästa söndag.


Gå till förra html-lektionen. Del 6


Veckans it:

Det magiska året kommer allt närmare.

NÄTGUIDEN:
Sajter för fattiga stackare
Jessica Ritzén tittar djupt i plånboken och listar dessutom...
Toppen och Botten

Bäst och sämst på nätet just nu.
Århundradets mardröm
Läs Arne Norlins kortnovell.

Frågor och svar
Är du orolig? Kunskap kan lugna dig.

Myterna
Kommer hissarna verkligen att stanna?

Tidigt ute
Hälsa på i Falköping där man redan testat det nya århundradet.

Dessutom...

Nu kommer lågprisdatorerna
Paketen ner under 8000 kronor.

Gott nytt spelår
Nyheterna under 1999.

Världens enklaste html-skola
Del 7: Lär dig stilmallar.

KRÖNIKA:
Cyberhem, ljuva, smarta cyberhem

Läs och diskutera Helle Kleins nätkrönika.