9. Pynt dine links

Indledning

Nu springer vi i denne øvelse bort fra PHP, for at kigge på noget, som nærmere hører til design-delen af WebKurset. Nemlig Links og hvad man kan gøre med stylesheets for at pynte på dem.

Du skal bruge de sider, du oprettede i Kapitel 6.

Du kommer til at arbejde med ramme-funktionen (til at oprette en ramme om link-menuen) og til at arbejde med stylesheet-regler for links.

Opret ny mappe og kopier dine sider

1. Opret en ny mappe og kald den links1
2. Kopier alle opgaverne fra Kapitel 6 over i denne mappe. Det drejer sig om disse sider:
   • aventura.php
   • koncert.php
   • middelalder.php
   • top.php
   • bund.php
   • menu.php
   Hvis du allerede har oprettet et stylesheet, kan du også kopiere dette.

Opret stylesheet - Opret rammer om menuen

1. Start stylesheet-editoren (Funktioner -> Typografiark-editor). Hvis du allerede har oprettet et stylesheet, så åbn dette i stedet.
   Du skal oprette en klassifikation, der kan bruges til menu-en med linkene.
2. Opret en ny selektor (Selektor -> Ny selektor)
3. Skriv menu i den midterste boks
4. Klik Tilføj
   
   
5. Klik OK
6. Udfyld nu således (forklaring følger):

   .menu {
   	border-color:#004000;
   	border-style:solid;
   	border-width:1px 0;
   	padding-top:4px;
   	padding-bottom:4px;
   	text-align:center;
   }
   

   Forklaring:
   .menu { Punktummet angiver at vi har oprettet en klassifikation i stedet for en normal selektor, der henviser til et HTML-tag.
   border-color:#004000; Sætter rammens farve (i dette tilfælde til en grøn farve, men du kan vælge en anden, du synes passer bedre)
   border-style:solid; Sætter rammens stil. Dvs. om det skal være en stiplet eller en fast linie (i dette tilfælde en fast linie)
   border-width:1px 0; Sætter rammens bredde. Når bredden bliver angivet på denne måde betyder det: Rammen i top og bund: 1px - rammen i venstre og højre side: 0 (dvs. ingen ramme).
   padding-top:4px; Padding bruges til at lægge afstand fra rammen og ind til teksten (her i toppen).
   padding-bottom:4px; Padding bruges til at lægge afstand fra rammen og ind til teksten (her i bunden). text-align:center Denne kode bruges til at lave tekst-justering. Her bliver teksten centreret.
   
7. Gem nu stylesheetet (typografiarket) som aventura.css i samme mappe.

Læs mere om Stylesheets i: WebDesign med Grafisk Editor:
Kapitel 9
Kapitel 10
Kapitel 11
og i WebDesign med Composer:
Kapitel 12 - 15
Kapitel 20 (Om klassifikationer)

Opret et link til typografiarket

Du skal nu oprette et link til typografiarket (dit stylesheet). Dette er ikke et normalt link til at klikke på, men et link, der fortæller hjemmesiden at stylesheet-reglerne skal hentes fra en fil der er gemt et andet sted.

1. Åbn siden top.php
2. Vælg: Funktioner -> Eksterne resursefiler...
3. Klik på Tilføj
4. Marker aventura.css
5. Klik på Åbn
6. Klik på OK

Arbejd med links

Links er jo "en forbindelse fra én Web resurse til en anden. Dette er den grundlæggende forskel mellem websider og andre tekst-dokumenter.

Links har 3 forskellige udseender i HTML:

1. Et link, der ikke er besøgt
2. Et link, der er besøgt
3. Et link, der bliver klikket på

Med stylesheet har man også mulighed for at tilføje en ekstra:

1. Et link, hvor markøren placeres over.

Opret farver til links

1. Start Stylesheet-editoren og åbn aventura.css
2. Opret en ny selektor
3. Marker a
4. Marker derefter pseudo-klassen :link
5. Klik på Tilføj
   
   
6. Klik på OK
7. Vælg derefter en farve under color. Jeg har i dette eksempel valgt en mørkere grøn farve:

   a:link {
   	color:#008000;
   }
   

8. Opret på samme måde en ny selektor med a:visited (altså links, der har været besøgt). Vælg en mørkere nuance af farve du brugte til a:link. Jeg har her valgt en mørkere grøn:

   a:visited {
   	color:#006200;
   }
   

9. Opret derefter en ny selektor med a:hover. Nu skal vi til at lave lidt mere spræl med vores links.
10. Vælg den samme farve som du brugte til a:links, men brug den til baggrundsfarve ( background-color ).
11. Vælg hvid til tekst-farven ( color ). Resultat:

    a:hover {
    	color:#FFFFFF;
    	background-color:#008000;
    }
    

12. Opret til sidst en ny selektor med a:active (den bruges, når man klikker på linket).
13. Vælg en lysere nuance af den du brugte til a:link, f.eks.:

    a:active {
    	color:#00D500;
    }
    

14. Gem dit stylesheet igen.

Tilføj klassifikation til menuen

Nu mangler du blot én ting før du kan uploade og afprøve dine sider med de nye stylesheet-regler. Du skal tilføje en enkelt lille kode til menu.php, der henter klassifikationen .menu, som du oprettede før.

1. Åbn siden menu.php
2. Flyt markøren til 1. linie, der hvor der står <div>.
3. Ret koden, så der nu står: <div class="menu">
   Dette er koden, der sørger for at klassifikationen .menu bliver brugt på DIV-tagget (dvs. den bliver vist med en ramme foroven og forneden).
4. Gem siden igen.

Upload siderne og afprøv

1. Upload siderne (husk at oprette en ny mappe, der hedder links1 på serveren først) til din server.
2. Afprøv siderne i en browser.
3. Sammenlign evt. med eksemplet her: aventura.php

Opgave 9.1

1. Opret en ny mappe. Kald den opg91
2. Find et emne du vil lave nogle hjemmesider om.
3. Opret 4 sider.
4. Brug include og opret top.php og bund.php som i de tidligere øvelser.
5. Opret også en menu.php med links til alle siderne.
6. Upload siderne til din server.