Locator: jo45jw ,

        THIS SITE ARE UNDER CONSTRUCTION



test picture


Vejledning til KompoZer

1-3-1

Beskrivelse:

Du får her et layout med en boks til en overskrift eller et logo, en venstrestillet spalte med en menu, en indholdsboks, en højrestillet spalte og en sidefod. Det hele er pakket ind i en boks med en fast bredde på 770 pixels, der er midterstillet på siden.

Boksene:

Skabelonen består af seks bokse:
Boksen side er en midterstillet boks, der indeholder de fem andre bokse. Hvis du ændrer bredden på boksen, så husk også at ændre bredden på boksene logo og sidefod, så de får samme bredde. Boksene venstrespalte, indhold og hoejrespalte skal sammenlagt have samme bredde.

Boksen logo er beregnet til en overskrift eller et logo.

Boksen venstrespalte er boksen til venstre, og den indeholder en lodret menu.

Boksen indhold er denne boks.

Boksen hoejrespalte er boksen til højre.

Boksen sidefod kan fx bruges til at skrive navn og adresse. Jeg har valgt at centrere tekst i boksen, men det kan du selvfølgelig sagtens ændre i stilklassen sidefod med css-editoren.

Du kan ændre baggrundsfarve og andre egenskaber på de seks bokse ved at tilrette deres stilklasser i KompoZers css-editor. Baggrundsfarven uden for boksene fastsættes i stilen body.

Baggrundsfarven på menuen fastsættes i stilen ul.menuliste li, mens baggrundsfarven, når musemarkøren holdes over et menupunkt, fastsættes i stilen ul.menuliste li a:hover. Du ændrer linkene ved at dobbeltklikke på dem og angive den ønskede linkadresse, og du kan tilføje flere menupunkter ved at placere musemarkøren bag et eksisterende menupunkt og så klikke på tasten Enter.

Du kan evt. lave streger mellem de tre spalter. Det kan gøre ved at lave en venstre- og en højrekant på stilklassen indhold. Vær opmærksom på, at kanten lægges til bredden. Hvis du tilføjer to kanter på hver 1px, skal du altså ændre bredden på indhold fra de nuværende 370 pixels til 368 pixels.

Ekstra stilklasser

Jeg har lavet nogle ekstra stilklasser, som du måske kan bruge, og ellers kan du selvfølgelig bare slette dem i css-editoren:

Stilklassen fed gør en tekst fed og farver den samtidig mørkegrå. Stilklassen roed farver en tekst rød. Stilklassen centrer midterstiller teksten i et tekstafsnit på siden.

Stilklassen billedvenstre kan bruges til at placere et billede til venstre, mens teksten vil flyde uden om til højre herfor. Den kan også bruges på andre elementer end billeder.

Stilklassen billedhoejre kan bruges til at placere et billede til hoejre, mens teksten vil flyde uden om til venstre herfor. Den kan også bruges på andre elementer end billeder.

OBS! Når du skriver tekst, så husk at vælge Afsnit i rullemenuen i formateringslinjen. Ellers vil du ikke få indsat afstand mellem tekst og bokskanter. Her kan du se et lille eksempel på en tekst, hvor der ikke er valgt tekstafsnit:

Denne tekst går helt ud til kanten, fordi der ikke er valgt Afsnit i rullemenuen. Der er flere andre gode grund til at benytte tekstafsnit: Du får fx automatisk indsat mellemrum mellem afsnit, og det er nemmere at ændre egenskaber på teksten.

P.S. Husk at ændre sidens titel til noget mere passende (menupunktet Formater => Sidens titel og egenskaber => udfyld feltet Titel).

Tilbage til skabelonoversigten

Bokses højde tilpasses indholdet i dem. Og det giver et problem, når du har flere bokse ved siden af hinanden som i denne skabelon. De bliver nemlig ikke lige høje. Havde de haft samme baggrundsfarve ville det ikke kunne ses - som fx ved venstre boks med menuen og boksen i midten, men når en boks, som fx denne boks, har en anden farve end de andre, er det måske ikke så kønt.

En løsning kan være at lave et billede, der fx er 5 pixels i højden, og som fylder 770 pixels i bredden. Billedet skal så have baggrundsfarven i menu-boksen og indholdsboksen på de første 570 pixels og baggrundsfarven i denne boks på de sidste 200 pixels. Prøv at tjekke billedet spaltetrick.png, som ligger i denne skabelons mappe.

Vælger du andre bredder på boksene, skal billedet selvfølgelig benytte de valgte bredder.

Du kan prøve at vælge spaltetrick.png som baggrundsbillede på stilklassen side, så du kan se effekten.

Hvis du vil lave en side med nogle andre farver end dem jeg bruger her, kan du ændre farverne på spaltetrick.png i et billedbehandlingsprogram, eller du kan lave dit eget baggrundsbillede fra bunden af.

Navn, adresse og kontaktinformationer