D - designs

Base Layout D er et simpelt design hvor man framer indholdet. Vi har defineret to versioner. En version hvor headeren (logo og menu) ligger inde i inholdsfeltet og version hvor headeren ligger uden for indholdsfeltet. Læs herunder hvordan du designer de versioner.

Design 1: Header ligger i indholdsfeltet

I denne version bruger man baggrundsbillede til at frame top-designet med. Som i Base Layout C lægger man et baggrundsbillede ind (2500x2000 pix) og lægger så en grafik i bunden af siden for at afslutte rammen. Bundgrafikken skal lægges ind på hver side side.

Derefter giver man footeren samme farve som baggrunden så det ser ud som om, at footer tekster og ikoner ligger direkte på baggrunden.

For at give dette design endnu et særpræg kan man lægge en boarder eller skygge omkring indholdsfeltet. Dette gøres på selve baggrundsgrafikken og bundgrafikken (se eksempler på det her (link til eksempelside)) Hvis man har brug for at skubbe logoet lidt ned, kan man med fordel indsætte et gennemsigtigt billede ind i toppen med en passende højde.

Læg en illustration ind af baggrund + footer grafik - evt en med boarder så man kan se hvordan man gør.

Design 2: Header ligger uden for indholdsfeltet

I denne version designer man en baggrundsgrafik i den farve man ønsker. Grafikken skal være 1030 px bred, så indholdet passer til baggrunden. Man lægger grafikken ind som baggrundsbillede og  repeater den nedad på siden. Derefter giver man baggrundsfarve, header-baggrunden og footer-baggrunden samme farve. På den måde får man defineret en ramme til sit indhold. For at få både menu og logo uden for indholdet, vælges skin 4. Denne opbygning er "global" og indgår automatisk på alle sider hvilket gør det nemt at bygge siderne op med indhold. Man kan dog ikke i denne version lave skyggekanter og boarders.

Vis et eksempel på baggrundsgrafikken og hvordan den repeater ned ad siden

Design 3: Logo ligger uden for indholdsfeltet, menu ligger indenfor

I denne version designer man en baggrundsgrafik, på samem måde som 2. version. Man lægger grafikken ind som baggrundsbillede og  repeater den nedad på siden. Her ses logoet uden for indholdsfeltet mens menuen er kommet ned i indholdsfeltet, dette sker ved at vælge skin 2. Denne opbygning er "global" og indgår automatisk på alle sider hvilket gør det nemt at bygge siderne op med indhold. Man kan dog ikke i denne version lave skyggekanter og boarders.

Tablet- og mobile view

Når man definere bredden på indholdsrammen skal man være opmærksom på, at sitet er optimeret til 1024 pixels i tablet view. Det betyder at man har to muligheder: Enten skal man lave rammen så bred at kanterne går ud over de 1024 pix. i den version vil man så kun kunne se baggrundsfarven og ikke selve kanterne. Man kan også lave indholdsfeltet smallere - feks 950 pixels. Her vil man så kunne se de lodrette kanter i tablet view. Vælg den løsning der passer bedst til det overordnede design.

Vis eksempler på tablet og mobile view (hvor rammen er fjernet)