KompoZer logo  Formatere med Typografiark - CSS

Indtil nu har jeg udelukkende brugt strukturel formatering, dvs. overskrifter har enten været niveau 1 eller 2 (Heading 1 eller 2), jeg har anvendt lister og vist hvordan man laver tabeller. Men præsentationen af teksten har jeg indtil eksemplerne i forrige afsnit, overladt til de indstillinger (eller mangel samme) din browser måtte have. Moderne præsentation er i dag adskilt fra teksten vha. typografiark eller på engelsk Cascading Style Sheets forkortet og almindeligt kendt som CSS. Jeg har lavet en kort introduktion til CSS her...

Typografiark i KompoZer

Du kan tilføje og redigere et Typografiark ved at trykke på ikonet CaScadeS i værktøjslinjen eller gå til menulinjen -> Tools -> CSS Editor eller simpelthen trykke på F11.

CSS Editor

Som udgangspunkt står den til at lave et internt typografiark dvs. et ark (stylesheet), der bestemmer udseendet af elementer på denne side. Jeg vælger i dette tilfælde "h1 (heading 1)". Derefter skal du trykke på knappen "Create Style rule" - så opretter du en typografiregel for overskriftsniveau 1.

CSS Editor Create Style rule

Hvis du kender CSS syntaxen kan du allerede her begynde at skrive dem ind:

CSS Editor

Det er dog nemmere at trykke på fanebladet Text, hvor du kan bestemme skrifttype, farve og størrelse:

CSS Editor - Text
(læg mærke til eksempel feltet, hvor du kan se, hvordan dine valg kommer til at se ud.

Tryk OK for at gemme dine valg - du kan se hvordan det har ændret overskriften øverst på denne side. For at redigere videre i typografiarket, kan du trykke på ikonet CaScadeS i værktøjslinjen eller gå til Menulinjen -> Tools -> CSS Editor eller simpelthen trykke på F11.

Så kan du redigere direkte i typografiarkets kode under fanebladet General (her har jeg tilføjet skrifttypen Verdana)

CSS Editor - redigere internt typografiark

Hvis du klikker på Source fanebladet under skrivefeltet i Kompozer og kigger nærmere på HTML-koden, vil øverst kunne finde typografiarket mellem head-tagsene:

<style type="text/css">
h1 {
  font-family: Verdana,Arial,Helvetica,sans-serif;
  font-weight: bold;
  color: #000066;
  font-size: xx-large;
}

  </style>

Du kan fortsætte med alle de HTML-elementer du har brug for og derudover kan du oven i købet selv lave helt nye elementer, CLASS og ID, så du kan formatere et bestemt område helt for sig. I den forbindelse er SPAN og DIV elementerne nyttige - med dem kan du udforme dine helt egne typografiregler. Man kalder også DIV elementet en beholder, der virker på samme måde som afsnit, mens SPAN-elementet virker lokalt.

Du kan putte noget tekst i en DIV-beholder ved at markere teksten og vælge Generic container (div) 

Genric (div)

Elementet bliver så markeret med en stiplet tynd rød kant:

Markering af DIV element

Du kan give DIV-beholderen en kant ved at stille cursoren i beholderen og trykke på ikonen "border" Border

Og indsætte værdier i Borders-dialogboksen

Border dialog

Det vil så ende med at se sådan ud:

Dette er noget eksempeltekst, der er i en DIV-beholder. Dette er noget eksempeltekst, der er i en DIV-beholder. Dette er noget eksempeltekst, der er i en DIV-beholder. Dette er noget eksempeltekst, der er i en DIV-beholder. Dette er noget eksempeltekst, der er i en DIV-beholder.

Der er fantastisk mange muligheder for at lave et spændende layout, hvis du bruger typografiark. Jeg kan ikke nå at beskrive alt her, men håber du har fået mod på at eksperimentere for dig selv.

Videre til:  Indsæt HTML