Planera mallarna
Innan man börjar bygga mallarna bör man fundera på hur mallarna skall se ut samt om de skall uppfylla några speciella krav. Tex kan det finnas krav på tillgänglighet.
- Absoluta mallar: Absoluta mallar där man drar ut modulerna där man vill ha dem. De ligger då fast på den position där man dragit ut dem. Väldigt enkelt men dåligt ur tillgänglighetsperspektiv.
- Dynamiska mallar: Dynamiska mallar där modulerna ligger i relation till varandra.
- Fasta formatmallar (pixlar): Med fasta formatmallar kan man inte ändra teckenstorleken via webbläsaren men besökaren kan göra detta via vår modul Teckenstorlek.
- Relativa mått (em eller procent) på formatmallar: Med formatmallar i em eller procent kan man storleksförändra texten med webbläsarens inställningar.
- Låst layout (pixlar): Med låst layout innebär det att man använder pixlar för att ställa in spaltbredder. Innebär att sidbredden inte ökar i storlek när textstorleken ökar.
- Elastisk eller flytande layout (em eller procent): Flytande layout innebär spaltbredder i procent för att anpassa sig efter webbläsarfönstrets bredd. Elastisk layout innebär spaltbredder i enheten em som anpassar sig efter den textstorlek webbläsaren är inställd på.
Kolla alltid hur mallarna ser ut i flera webbläsare (tex Internet Explorer och Firefox) samt validera dem (http://validator.w3.org ) innan ni börjar skapa sidor med mallarna.
I denna manual beskrivs alltså dynamiska mallar med css-kolumner.
Innan man börjar bygga mallar dynamiskt är det bra att fundera ut vilken den minsta gemensamma komponenten i mallbyggandet är (det som ser likadant ut på alla sidor) och börja med att bygga den mallen. Alla andra mallar kan sedan baseras på denna mall. Det är dock bra att veta hur övriga mallar skall se ut eftersom man måste planera för nästa mall redan vid skapandet av första mallen genom att skapa mallytor. Mallytor innebär områden som man har rätt att ändra på vid byggandet av nästa mall.
Skissa gärna upp en enkel ritning över de mallar man vill ha. Vill man tex ha en vanlig mall, en bred mall, en med två spalter och en nyhetsmall så skissar man upp hur man vill att de skall se ut:
1. Vanlig mall (standardmall)
2. Bred mall
3.Två spalter
4. Nyhetsmall
Utifrån ovanstående skisser kan vi se att den minsta gemensamma komponenten är sidhuvudet. Vi börjar därför att bygga en mall med enbart sidhuvudet.
Utifrån ovanstående skisser kommer vi att bygga sex olika mallar, två delmallar med mallytor samt fyra mallar med innehållsytor:
1. Delmall 1 — Sidhuvud
Här bygger vi en utgångsmall med enbart sidhuvud. Området nedanför konverterar vi till en mallyta som vi skall bygga vidare på i kommande mallar.
2. Delmall 2 — Utgångsmall
Här ärver vi sidhuvudet från mall 1. Till vänster lägger vi till en meny och resten av ytan konverterar vi till en mallyta.
3. Mall 3 — Standardmall
Här ärver vi menyn från mall 2 (som i sin tur ärver sidhuvudet från mall 1). Därefter konverterar vi området som var en mallyta till en innehållsyta så att redaktören kan använda denna mall.
4. Mall 4 —Standardmall med högerspalt
Här ärver vi menyn från mall 2 (som i sin tur ärver sidhuvudet från mall 1). Därefter delar vi området som var en mallyta i två kolumner sin vi sedan konverterar till två innehållsytor så att redaktören kan använda denna mall.
5. Mall 5 — Nyhetsmall
Här ärver vi menyn från mall 2 (som i sin tur ärver sidhuvudet från mall 1). Vi lägger till ett publiceringsdatum högst upp i mallen. Därefter konverterar vi området som var en mallyta till en innehållsyta med tre textmoduler som heter Rubrik, Ingress och Innehåll och Bild (en bildmodul) så att redaktören kan använda denna mall.
6. Mall 6 — Bred mall
Här ärver vi sidhuvudet från mall 1. Resten av ytan konverterar vi till en innehållsyta så att redaktören kan använda denna mall.
Sidan uppdaterad:
Nästa generations publiceringsverktyg är här!
216.73.217.134