Skapa en sida i Dreamweaver, med dummytexter, tre rubriknivåer och en ingress, samt byline. Kopiera och klistra brödtexter. (Se exempelsida)
Märk upp rubriker med H1, H2 och H3, i övrigt som paragraph
Spara dokumentet i en egen katalog
Öppna Internet Explorer, öppna dokumentet via Arkiv > Open. Låt Explorer ligga öppet under arbetet, för att kolla stilsättningen

Skapa en extern formatmall som länkas in i dokumentet

Formge h1

Ta fram Style-fönstret i menyn Windows > CSS Styles
Öppna Style-menyn via pilen i fönsterhuvudet
Välj New Style
Vid Type, markera Redefine HTML Tag
Vid Tag-rutan se till att h1 anges
Markera Define In, New Style Sheet File
Klicka OK
Du uppmanas namnge och spara mallen
Ge formatmallen ett kort namn utan åäö, ge suffixet .css
Se till att den sparas i din arbetskatalog
Fönstret Style Definition visas. Kolla att h1 och mallens namn anges i fönsterhuvudet
I avdelningen Type anger vi Font t.ex. Verdana.
I Size välj en storlek i listen eller skriv en siffra
Ange pixels som måttenhet
Style kan vi hoppa över
Line Height kan anges till samma värde som Font i pixels
Weight anges till Bold
I Color ange svart #000000
Klicka OK, fönstret stängs
I Style-fönstret avmarkera Apply-rutan längst ned till vänster
Expander Style-menyn, välj New Style
I New Style se till att h2 anges vid Tag, Redefine HTML Tag är markerat och Define In den aktuella formatmallen. Klicka OK

Stilsätt h2, h3 och paragraph, men ange större Line Height i paragraph.

Kolla dokumentet i Explorer, uppdatera sidan via Refresh.

Radavstånd i brödtexten behöver justeras.

I Dreamweaver expandera Style-menyn, välj Edit Style Sheet
Markera din formatmall, välj Edit
Markera p och välj Edit
Justera Line Height, ev Size m.m. Klicka OK, Save och Done
Gå till dokumentets visning i Explorer och kolla

Skapa egna klasser

Vi ska skapa egna klasser för ingress och byline.

I Style-fönstret, välj New Style
I New Style, markera Make Custom Style
Namnge den till .ingress. Se till att din formatmall är angiven vid Define in
Stilsätt ingressen i avdelningen Type och spara
Välj på nytt New Style, Custom Style, döp klassen till .byline.
I Style Definition, ange font, storlek etc. Välj italic vid Style.
Välj Block i kategorilisten
Vid Text Align, välj right. Klicka OK
De nya klasserna visas i Styles-fönstret
Applicera klasserna .ingress och .byline
Markera stycket genom att sätta insättningsmarkören i respektive stycke eller markera hela stycket.
I Style-fönstret klicka respektive klass och klicka Apply i sidans fot.
Spara dokumentet och kolla det i Explorer, refresh först.

Format för textlänkar

Vi ska stilsätta textlänkar. Typsnitt, radavstånd etc anges inte – därmed får länkarna samma typografi som den omgivande texten. Länkar kan också ges ett helt annat typsnitt eller vikt, men det gör vi inte nu.

Välj New Style, markera Use CSS Selector
I Selector-fönstret välj a:link, klicka OK
I Style Definition markera Decoration none, för att ta bort understrykning vid länkarna. Klicka Color-rutan och välj lämplig länkfärg. Klicka OK
Välj New Style, markera Use CSS Selector, välj a:visited, klicka OK. Gör som ovan, ange lämplig färg för använd länk och markera Decoration none. . Klicka OK, Save, Done
Välj New Style, markera Use CSS Selector, välj a:active, klicka OK.
I Style Definition ange Decoration till none och färg till vit
Välj Background i Category-listen.
Ange Background till svart. Klicka OK, Save, Done
Välj New Style, markera Use CSS Selector, välj a:hover, klicka OK.
Stilsätt a:hover som active, men välj en mörkt gul färg. Spara o.s.v.
Skapa en länk i dokumentet. Skriv in texten "Detta är en länk", markera texten och ange URL till x vid Link i Properties-fönstret
Kolla i Explorer att länkens interaktivitet funkar. (Om det inte funkar kan det bero på den inbördes ordningen av länkegenskaperna i formatmallen. Link-visited-hover-active fungerar. Kan redigeras i t.ex. Word)

Skapa satsyta

Vi ska skapa en satsyta med hjälp av CSS-kategorin Box och DIV-taggen, istället för att använda tabell.

Skapa en ny klass som döps till .satsyta
Välj kategorin Box
Gör följande inställningar, allt i pixels: Width 500, Padding: Top 20, Right 10, Left 20, Margin: Left 50. Klicka OK - Save - Done.
Vi använder DIV-taggen för att ange egenskaper för många stycken i ett dokument.
Visa dokumentet i Code Inspector genom att klicka <> i sidfotens list.
Högst upp i dokumentet, under Body och före h1, skriv in <div class="satsyta">
Längst ned i dokumentet, före </body>, skriv in </div>.
Kolla i Explorer att texten fått en spalt.
Vi ska ge satsytan bakgrundsfärg.
I fönstret CSS Styles, öppna menyn, välj Edit Style Sheet, markera formatmallen, klicka Edit. Välj klassen .satsyta, klicka Edit.
Välj kategorin Background. Välj en ljusgul färg eller skriv in #FFFFCC. OK - Save - Done. Kolla i Explorer.

Relativa mått för text

För att användaren ska kunna förstora texten i ditt dokument måste relativa måttenheter användas.

När du nu behärskar hantering av formatmallar kan det vara dags att experimentera med andra mått än pixel (px).

Kolla ditt dokument i Explorer och gå till Visa > Textstorlek, välj ”Större”. Inget händer eftersom alla mått är låsta till en viss storlek på bildskärmen. (OBS Opera har en funktion med zoomning, som förstorar själva bildskärmsbilden, såväl text som bild.)

För att den som så vill ska kunna läsa dina texter förstorade ska vi ersätta textmåtten med relativa mått, som kan förstoras på bildskärmen.

Vi ska använda måttenheten ”em” som står för ”bredden på bokstaven M”, och som avser typsnittets teckenstorlek. (På svenska blir det ”fyrkant”, en kvadrat med teckenstorleken som sida.)

Detta mått anger hur stort något ska vara i förhållande till webbläsarens standard för teckenstorlek. Det brukar vara 12 pt, så i allmänhet betyder 1em 12 pt och 0.5em 6 pt. (Om man har ändrat webbläsarens inställning så att ett annat värde gäller för standardstorlek för typsnitt, så blir det utifrån detta värde som em beräknas.)

Översatt i måttet pixel blir det 1em = 12pt = 16px, 0.5em = 6pt = 8px. Man kan beräkna värdet för em genom att dividera pixelmåttet med 16, alltså 8px/16 = 0.5em.

Detta stämmer i stort när det gäller teckenstorlek, som man kan ange med flera decimaler, men endast steg om .05 fungerar i webbläsaren. Därvid kan man få fram alla teckenstorlekar som finns i px.

För radavstånd bör man ange lite större värden i em, för att det ska fungera.

För andra mått än de som rör typsnitt fungerar inte em, eftersom det måste utgå från uppgifter om just teckenstorlekar.

Omvandla dina pixelmått, granska i webbläsaren och testa med att visa större teckenstorlek.

Här är lite hjälp på traven för att omvandla pixelmått till em, kom ihåg att justera upp dem och testa vid radavstånd och marginaler.

pixel	point	size	em
9	7		0.60
10		1	0.65
11	8		0.70
12	9		0.75
13	10	2	0.80
14			0.85
15	11		0.90
16	12	3	0.95

Generella egenskaper i BODY

BODY kan formges för generella egenskaper hos dokumentet, bakgrundsfärg, bastypsnitt etc.

Välj New Style, markera Redefine HTML Tag, välj body, klicka OK.
I Style Definition, välj Background, ange en generell bakgrundsfärg som inte är densamma som satsytan.
Spara och kolla i Explorer. Färgen påverkar inte satsytan.

Formge enstaka ord med <Span class="…">

Format kan appliceras på enstaka ord, genom att man markerar dem och väljer klass i Style-listan.

Överkurs 1: Faktaruta med positionering, float, kantlinje och egen typografi.

Deklaration för faktaruta:

.faktaruta

{

width: 180px;

background-color: White;

font-family: Verdana;

font-size: 11px;

font-weight: bold;

line-height: 14px;

padding-left: 10px;

padding-top: 10px;

padding-right: 10px;

padding-bottom: 10px;

float : right;

margin-right: 10px;

margin-top: 26px;

margin-left: 10px;

margin-bottom: 12px;

border-top: dashed;

border-bottom: dashed;

border-left-color: Black;

border-left-width: 10px;

}

Utför formgivningen på egen hand med hjälp av dessa tips:

Background color i Dreamweaver kategori Background
Font och line height finns i Dreamweaver kategori Font
Width finns i Dreamweaver kategori Box
Padding finns i Dreamweaver kategori Box
Float innebär att detta objekt flyter vid sidan av andra objekt. I Dreamweaver kategori Box
Margin finns i Dreamweaver kategori Box
Border finns i Dreamweaver kategori Border

Överkurs 2: Tillämpa utsluten sats och avstavning i ett stycke

Skapa en klass med namnet .utsluten. I Dreamweaver kategori Block > Text Align välj justify.
Sätt manuellt in mjuk avstavning i dokumentets kod med "" där avstavning kan förekomma.

Överkurs 3: Länka in en alternativ formatmall för utskrift

Man kan skapa och länka in en variant av formatmallen som är bättre anpassad för utskrift. Därvid kan objekt, t.ex. navigeringslister, döljas vid utskriften. Vid utskrift aktiveras automatiskt utskriftsmallen. (Alternativt kan man direkt i den vanliga formatmallen ange de regler som ska ändras vid utskrift genom att arbeta med selektorn "@media print", men funktionen stöds inte av Dreamweaver".)

Teckenstorlek och radavstånd bör anges med punktmått, precis som vid typografi för tryck.
Olika formatmallar för skärmvisning och utskrift kräver att man för båda mallarna anger mediatyp, t.ex.
<link rel="stylesheet" type="text/css" href=" standardstil.css" media="screen">
<link rel="stylesheet" type="text/css" href=" printstil.css" media="print">
För att skapa utskriftsmall, skapa en kopia av normalmallen och länka in den till dokumentet, via Style-menyn > Attach Style Sheet
I kodläge ange media-typ och redigera den för utskrift
Vid utformningen av utskriftsmallen kan man se resultaten direkt via webbläsarens funktion för förhandsgranskning av utskrift,, eller låta den få media="screen", därefter återställer man media-typerna.

Överkurs 4: Navigator: Positionera objekt med position, lagerordning

Position relative innebär att placeringen är relaterad till omgivande objekt och följer med vid rullning av sidan.

Absolute är definierad i förhållande till dokumentet, följer med vid rullning. Kan täcka över löpande texten

Fixed är relaterad till bildskärmen, och följer inte med vid rullning av sidan.

I Dreamweaver kategori Positioning
Skapa ny klass, döp den till .navigator
I Dreamweaver kategori Box:

width: 100px;

height: 150px;

padding-top: 10px;

padding-right:

10px;

padding-bottom: 10px;

padding-left: 10px;

I Dreamweaver kategori Position

position: absolute;

visibility: visible;

left: 2px;

top: 20px;

I Dreamweaver kategori Background: Välj lämplig bakgrundsfärg
I dokumentet gå till kodläge och skriv in följande mellan <body> och <div class="satsyta">

<p>Knapp 1</p>

<p>Knapp 2</p>

<p>Knapp 3</p>

</div>

Spara dokumentet och kolla i Explorer
Navigatorn täcker över satsytan. Vi ändrar lagerordningen med z-index i kategorin Position. Z-index anger relativa positioner i djupled. Saknas angivelse blir värdet 0.
Välj Edit Style Sheet, markera din mall, klicka Edit, markera .navigator, gå till kategorin Box. Ange z-index till -100 för
Spara mallen och kolla i Explorer. Satsytan täcker över navigatorn. Satsytan har inget z-index, så det blir 0.
OBS! För att markera navigatorn i Dreamweaver måste Layer-fönstret öppnas och lagret markeras där.
Flytta in satsytan så att navigatorn får plats.
Redigera formatmallens klass satsyta i kategorin Box. Ta bort Margin: Left,
Gå till Positioning, ange Position: Absolute; och Top: 10 pixels, Left : 102 pixels.
Spara mallen och kolla i Explorer

Överkus 5: Navigationslänkar som interaktiva knappar

Vi ska skapa en alternativ utformning av länkegenskaper, som endast ska användas på menylistens knappar.

Skriv först in ett antal länkar i navigatorrutan, skilj dem med radbrytning. Ange formatet "Paragraph" och i övrigt ingen formgivning.

Gör texterna till länkar till verkliga eller fiktiva sidor.

Vi skapar en klass för dessa menylänkar, som vi döper till ".menytext", enligt denna specifikation:

.menytext

{

font-family : Verdana;

font-size : 11px;

font-weight : bold;

line-height : 15px;

padding-bottom : 3px;

padding-left : 3px;

padding-right : 3px;

padding-top : 2px;

text-decoration : none;

}

Nu ska vi skapa en speciell stil för menylänkarna.

Finessen är att vi kombinerar selektorn "menytext" med länkutseende, så att dessa regler endast påverkar klassen ".menytext".

1. 1. I Dreamweaver välj "New Style", markera "Use CSS Selector". Kolla att din formatmall anges i "Define in".

2. I Selector-fönstret välj "a:link".

3. Skriv in ".menytext" efter "a", så att selektorn blir "a.menytext:link".

4. På motsvarande sätt skapar du "a.menytext:visited", "a.menytext:hover" och "a.menytext:visited".

Utför formgivningen av länkarna i menytext med samma förfarande som textlänkarna, enligt denna specifikation:

"a.menytext:link": "color: white;"

"a.menytext:visited": "color: white;"

Denna utformning kan räcka. I övrigt styrs även menylänkarna av samma formgivning som de vanliga länkarna har fått. Den svarta bakgrundsfärgen kommer också från denna utformning.

Men vi ska ge menylänkarna en annan färg vid mus-över och klickning, så det kan vara lika bra att göra en fullständig utformning. Ett annat skäl är att du kanske vill ändra utformning av de vanliga textlänkarna, och då skulle också menylänkarna påverkas.

Fortsätt med resten av länkarna och lägg också till bakgrundsfärg, som skapar ett knappliknande utseende.

"a.menytext:hover": "color: #00008B; background-color: #FFFFFF;

"a.menytext:active": "color: # FFD700; background-color: Maroon;"

Spara och testa utformningen i webbläsaren.

OBS! Denna teknik, där vi skapar en speciell "menytext-variant" av länkarnas utseende genom att kombinera selektorer, kräver att klassen "menytext" knyts till "< a href> och inte till <p> som annars är normalt. För att uppnå detta med Dreamweaver ska du först ange länken, sedan applicera klassen. Har det blivit fel får du gå in i koden och ändra manuellt.

Länken ska alltså se ut så här: "<p><a href="xxx.htm" class="menytext">XXX</a></p>"

(Med Topstyle kan denna kombination utföras enklare och selektorer grupperas, se Överkurs 6.)

Överkurs 6: Interaktiva navigationslänkar genom gruppering och kontextuella selektorer

Genom att gruppera selektorer som har samma deklarationer kan man effektivare redigera formatmallen. Våra H1, H2 och H3 har ju Verdana Bold gemensam, men skiljer i teckenstorlek. Man kunde därför skriva

H1, H2, H3 { font-family : Verdana; font-weight : bold;}

H1 { font-size : 36px;}

H2 { font-size : 19px;

H3 { font-size : 14px;}

Vill man ändra rubrik-typografin behöver man ändra font och vikt på endast ett ställe

Man kan också sammanföra flera selektorer till så kallade "kontextuella selektorer" eller "descendent selectors", där regeln anger en relation mellan selektorer, så att den endast aktiveras i ett visst sammanhang, t.ex.

"H1 a:link { font-size : 19px;}".

Det innebär att när en länk finns inom märket H1 ska den vara 19 pixlar, medan länkar i övrigt följer den omgivande typografin.

Man kan givetvis göra gruppering av kontextuella selektorer, som vi ska göra.
I stället för att skapa en särskild regel för ".menyklass" och sedan kombinera den med olika varianter av länkegenskaper ("a.menytext:link" i övning 5), kan man direkt skapa klassen och gemensamma länkegenskaper och sedan endast ange specifika länkegenskaper.

Länken kan därmed utformas normalt, alltså se ut så här:

"<p class="menytext"><a href="xxx.htm">XXX1</a></p>"

Klassen ".menytext" kan alternativt knytas till märket "DIV" för att undvika arv av egenskaper från "p", såsom radavstånd, styckemellanrum och ev. radindrag. I så fall måste styckemellanrum anges med positiva värden för "margin-bottom" i ".menytext".

Länken blir då "<div class="menytext"><a href="xxx.htm">XXX1</a></div>"

Vi ska skapa knappliknande länkar för navigatorn, vilket vi gör i klassen .menytext. Härvid bör man arbeta i en style-editor som TopStyle, ty Dreamweaver hanterar inte gruppering och kontextuella selektorer.

Alternativt får vi skriva in formaten via en ordbehandlare, och se till att spara mallen med suffixet .css.

.menytext a

{