CSS Design
At lave hjemmesider med CSS.
Når man i dag laver hjemmesider i XHTML eller i et CMS-system, adskiller man indholdet (content) fra selve stylingen.
En hjemmeside, som du ser i din webbrowser, består helt forenklet sagt af to filer. En fil med XHTML-koder, tekst, billeder og lign. elementer og en CSS-fil der fortæller webbrowseren, hvordan den skal vise/fortolke de enkelte elementer i XHTML fil.
Typisk tager en hjemmeside sit udgangspunkt i en behovs- og funktions-analyse.
Derefter udarbejdes et designforslag ud fra analysen og ikke mindst firmaets øvrige visuelle materiale som logo, foldere, visitkort o.lig.
I Adobe Photoshop eller et lignende program udfærdiges selve designet via grafik-elementer. Dette design skal nu konverteres til koder i html filen og i CSS filen.
Container
Hjemmesidens opbygning eller placering af de enkelt elementer styres af div-container.
Div-container er en slags beholder der holder tekst, billeder og andet indhold fast i en position på hjemmesiden.
En typisk hjemmeside har et banner for oven, en menu til venstre, selve indholdet til højre og en side-fod for neden. Disse fire elementers placering, udseende og størrelse styres af div-containeren.
De enkelte elementer
De enkelte elementer i div-containeren som brødtekst, overskrifter og billeder styles ligeledes med CSS filen.
Her bestemmes hvilken skrifttype, skriftfarve og størrelse brødteksten og overskrifterne skal have.
Billeder kan styles med en ramme og en placering i forhold til den omgivne tekst.
Her er et billede "tvunget" til ventre med en blå ramme omkring. Skriften-farven er her hvid. Afstanden mellem billede og tekst er 30px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a felis. Vestibulum et ante ut felis bibendum egestas. Donec lectus. Donec leo nulla, feugiat ac, mollis ac, volutpat at, urna. Duis eget tellus. Aenean lacinia pretium turpis. Suspendisse ac odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nem opdatering
En af de store fordel ved at opbygge hjemmesider hvor man adskilder indhold fra styling (design) er at fremtidige ønsker om designændringer nemt lader sig gøre. Og det på samtlige sider på en gang!
Her er det samme indhold vist med en anden styling!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a felis. Vestibulum et ante ut felis bibendum egestas. Donec lectus. Donec leo nulla, feugiat ac, mollis ac, volutpat at, urna. Duis eget tellus. Aenean lacinia pretium turpis. Suspendisse ac odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Hurtigere hjemmesider
En anden stor fordel ved at style hjemmesider med CSS (externt CSS) er at svar-tiden på de enkelte sider reduceres.