CSS-Template
Der henvises til CSS-filen "mycss.css" fra alle HTML-filer i templatet, så de ændringer der foretages her kan have betydning for alle sider. Det gør at det er nemmere at vedligeholde sitet, da man kan nøjes med at tilpasse et sted.
CSS er en forkortelse for Cascading Style Sheet - altså et ark (en tekst-fil) der definerer stilen, layoutet eller hvad man vil kalde det (skrifttyper, størrelser, afstande, farver og alt andet der har med udseende at gøre), med en teknik der nedarves.
I dette template udnyttes det til flere forskellige former for styling i "mycss.css". Generelle egenskaber, egenskaber til blokke og egenskaber til elementer.
Generelle egenskaber der tilpasses
Den eneste generelle egenskab der tilpasses er BODY, der laver en lille margin ude i siderne ved at kun udnytte 90% af bredden og centrere siden.
Her kunne man også tilpasse den generelle skrifttype, fx til Verdana - det er ikke gjort i templatet.
Man kunne også tilpasse andre generelle tags med egenskaber - h2 som overskrifter, p som brødtekst osv.
Egenskaber til blokke
Der er lavet definitioner til de forskellige blokke som siden består af, som tilpasser de egenskaber der placerer dem og bestemmer deres udseende. Det drejer sig om følgende ID'er:
- header, der definerer den sorte header i toppen
- nav, der definerer det der er rundt om menuen
- menu, der definerer selve menuen
- footer, der definerer den sorte footer i bunden af siden
- section, definerer en del af indholdet, som er lavet til tekstindhold der skal placeres ved siden af et billede
- aside, der anvendes sammen med sectio+n, og som er lavet til at indeholde et billede
- fullSection, der kan lave tekst der udnytter den fulde bredde af siden
- twoPart, kan anvendes hvor man vil have to blokke ved siden af hinanden der er lige store
- threepart, kan anvendes som twoPart, bare med tre blokke
Egenskaber til elementer
Her er der kun lavet tilpasning af menu-punkterne, hvor det er de egenskaber der er knyttet til hvert enkelt link i menupunktet der tilpasses.
Dette gøres med følgende:
- menuPunkt generelt, placerer menupunkterne
- menuPunkt a, angiver udseendet af selve menupunktet
- menuPunkt a:hover, angiver den ændring der skal ske i farven, når man holder musen over linket
Mobilvisning
Til sidst i CSS-filen er der angivelse af hvordan enkelte elementer skal opføre sig, hvis siden kommer under 800 pixel i bredden (typisk ved mobil-visning)
| HTML Template | |
|---|---|
| HTML-Template | Forside - Struktur - Header - Menu - Indhold - Footer - Tom side - CSS - Materialer - Editor - javaScript |