Lathund Bygga mallar Senselogic AB Version 2.3
Innehållsförteckning 1 Begrepp... 1 1.1 Innehållsyta... 1 1.2 Mallyta... 2 1.3 Layouter... 3 1.3.1 Fliken marginaler... 1.3.2 Fliken Inställningar... 1.3.3 Utseende, fliken Dekorationsegenskaper... 1.3.4 Utseende, fliken Kantlinjer... 3 4 5 6 2 Planera mallarna... 7 3 Praktiska förberedelser... 9 3.1 Ställ in Avancerade inställningar... 9 3.2 Lägg till webbplatsfärger... 10 3.3 Ställ in formatmallar... 11 3.3.1 Relativa mått (em)... 12 3.4 Lägg till metadata... 15 4 Bygga mallar... 17 4.1 4.2 4.3 4.4 4.5 4.6 4.7 Delmall 1 - Sidhuvud... Delmall 2 - Utgångsmall... Mall 3 - Standardmall... Mall 4 - Standardmall med högerspalt... Mall 5 Nyhetsmall... Mall 6 Bred mall... Behörighetsskydda delmallarna... 17 26 29 31 35 38 40 5 Utskriftsmallar... 41 5.1 5.2 5.3 5.4 Skapa en utskriftsmall... 41 Ställ in denna utskriftsmall som standardmall för utskrift... 41 Skapa utskriftsmall för två spalter... 42 Ställ in utskriftsmallen som standard för en viss mall... 42
Dynamiska mallar Innan man börjar bygga mallar är det bra om man vet vad vissa begrepp innebär samt att man bör förbereda sig inför mallbyggandet genom att sätta upp de formatmallar, webbplatsfärger och metadata man skall använda. Denna lathund kommer att ta upp begrepp, planering, praktiska förberedelser samt hur man bygger två delmallar, fyra slutanvändarmallar samt utskriftsmallar. 1 Begrepp Innan man börjar bygga mallar bör man förstå innebörden av följande begrepp: innehållsyta, mallyta och layouter. 1.1 Innehållsyta En innehållsyta är ett definierat område där redaktören får lägga till information. Det är enbart i detta område i mallen som en redaktör får ändra på. Om redaktören skall kunna få tillgång till ytor att arbeta med så måste man konvertera ytorna till innehållsytor. Annars tolkas allt man gör i mallen som mall dvs innehåll som redaktören inte skall kunna ändra. För att tala om att ett visst område är en innehållsyta så konverterar man ett område till en innehållsyta. Detta område måste alltid ligga i en layout. Detta område blir då tillgängligt för redaktören. Högerklicka på layouten och välj Konvertera till innehållsyta. Ett nytt fönster öppnas där det finns tre innehållsytor skapade som standard: Vänsterspalt, Mittenspalt och Högerspalt. Det går bra att använda någon av dessa eller skapa nya. Innehållsytorna bör dock ha unika namn. OBS! Det är bra om en innehållsyta i varje mall använder samma namn på innehållsytan för då kan man byta mall på ett enkelt sätt. Detta går inte om mallarna innehåller innehållsytorna med olika namn. I mallen visas en innehållsyta (i detta fall Mittenspalt) som en ikon med ett gem på: På webbsidan visas innehållsytan som en kabinhake som heter Mittenspalt. Under innehållsytan ligger de moduler som skall visas på sidan (i detta fall bara en textmodul som heter Rubrik). 1
OBS! En mall får inte innehålla två innehållsytor med samma namn. OBS! För att man skall kunna byta mallar på en webbsida måste innehållsytan ha samma namn i de olika mallarna. Därför är det bra om tex en innehållsyta på varje mall tex heter Mittenspalt. 1.2 Mallyta I SiteVision kan man bygga vidare på redan befintliga mallar. I den nya mallen får man dock inte ändra på alla områden i mallen enbart de områden som är markerade som en mallyta. En mallyta är ett definierat område där man får fortsätta att utveckla mallen. Om en mall inte har en mallyta kan man inte basera andra mallar på den. För att tala om att ett visst område är en mallyta så konverterar man ett område till en mallyta. Detta område måste alltid ligga i en layout. Högerklicka på layouten och välj Konvertera till mallyta. Ett nytt fönster öppnas där det finns en mallyta som standard: Mallinnehåll, Det går bra att använda denna eller skapa en ny mallyta. Det går inte att använda samma mallyta flera gånger på en och samma mall. I mallen visas en mallyta (i detta fall Mallinnehåll) som en ikon med ett gem och en penna på: På en mall som använder mallen visas mallytan som en kabinhake som heter Mallinnehåll. 2
1.3 Layouter En layout är en behållare som talar om hur innehållet i den skall presenteras. Är det en radvis layout kommer allt innehåll i den att visas radvis, är det en kolumnvis layout kommer innehållet att visas kolumnvis. När man bygger mallar är layouter viktiga. Både mallytor och innehållsytor måste ligga i layouter. På layouterna ställer man också in olika egenskaper som skall gälla för mallen. Layouter finns både radvis och kolumnvis och normalt brukar man använda båda typerna när man bygger mallar. För att lägga till en layout så högerklickar man på en mallyta/innehållsyta eller layout och väljer Lägg till layout radvis/kolumnvis. Följande inställlningar kan man göra på en layout: 1.3.1 Fliken marginaler Under fliken Marginaler kan man ställa in avstånd och marginaler för att placera modulen där man vill ha den. Eftersom man inte kan flytta modulen genom att dra i modulen så flyttar man dem genom att ange avstånd och marginaler. Dessa mått anges i pixlar/em (relativa mått)/procent under denna flik. Avstånd: Avstånd är utrymmet mellan objektets kant och innehållet i ett objekt. Det går att ställa in avstånd i pixlar/em/procent upptill, nertill, till vänster och höger. Marginaler: Marginaler är utrymmet mellan två objekt dvs utanför objektet. Det går att ställa in avstånd i pixlar/em/procent upptill, nertill, till vänster och höger. Avstånd <------> Marginaler <------------> 3
1.3.2 Fliken Inställningar Bredd: Här kan man ange en bredd för layouten. Standard är Ej inställd. Väljer man enhet i listan (px/em/procent) så aktiveras rutan där man kan fylla i avståndet). Tex om man vill optimera siten för 800x600 så kan man ställa in en lämplig bredd här (dock tar ju sidokanten upp lite utrymme i webbläsaren så man kan inte fylla i 800px om man vill att hela sidan skall synas utan scroll). OBS! Både marginaler och avstånd läggs på den totala bredden. Vill man t.ex. att en sida skall skall vara 770 pixlar bred med 15 px marginal till vänster och höger så sätter man bredden till 740 px, marginalvänster 15 px och marginal höger 15px. OBS! Vill man räkna om detta till relativa mått så krävs det att man satt formatmallen BODY till em (Läs mer om detta under 3.3.1 Relativa mått (em)). Sedan kan man använda följande formel: 770px/15,94/0,71 69em OBS! Decimaler avrundas lite olika av olika webbläsare. Höjd: Här kan man ange en höjd för layouten. Används med försiktighet då höjd beter sig olika i webbläsarna Internet Explorer och Firefox. Använd allt tillgängligt utrymme: Denna ruta markerar man om man vill att layouten skall använda hela bredden på kolumnen. OBS! Tänk på att detta kan se väldigt konstigt ut för användare med stora skärmar. Renderingsmall: Här kan man ändra layouten från kolumner till rader om man valde fel eller om man helt plötsligt vill bygga siten på ett annat sätt. Vertikal justering: Här anger man hur man vill att modulerna skall placeras radvis. Alternativen som man kan välja är top, middle eller bottom. Horisontell justering: Här anger man hur man vill att modulerna skall placeras kolumnvis. Alternativen är left, center och right. Mellanrum: Här kan man ställa in ett mellanrum som man alltid vill att modulerna skall ha mellan varandra. Tex om man har en innehållsyta där man får lägga ut moduler så staplas modulerna normalt på varandra utan mellanrum. Ställer man dock in ett mellanrum på tex 10 pixlar så visas modulerna med ett mellanrum på 10 px. Sidan ser bättre ut och den som lägger till nya modulen slipper att göra en inställning varje gång. Använd som innehåll på sidor: Denna ruta används automatiskt av systemet. Denna är som standard inte ikryssad men blir automatiskt ikryssad på alla layouter som ligger i en innehållsyta. Fliken Anpassade vyer handlar om layouten är profilstyrd, då visas de olika profilerna här. Detta är inget som behandlas i denna lathund. 1 Om BODY är satt till 0.7em 4
1.3.3 Utseende, fliken Dekorationsegenskaper Bakgrundsfärg: Här väljer man om modulen skall ha en bakgrundsfärg. Tex om man vill ha en bakgrundsfärg på ett textfält. Färgerna som visas i listan är de som är uppsatta på webbplatsen som webbplatsfärger. Använd bakgrundsbild: Kryssa i denna om man vill att modulen skall ha en bakgrundsbild. Välj sedan bild genom att klicka på Bläddra. Sedan kan man välja placering och upprepning för bakgrundsbilden. Placering: Följande alternativ finns för placering av bakgrundsbilden. Standard är Uppåt-vänster. - Uppåt -Vänster - Uppåt Mitten - Uppåt Höger - Mitten Vänster - Mitten Mitten - Mitten Höger - Nedåt Vänster - Nedåt Mitten - Nedåt Höger Upprepning: Följande alternativ finns för val om man vill att bakgrundsbilden skall upprepas. Standard är Horisontellt och vertikalt. - Horisontellt och vertikalt -Horisontellt - Vertikalt - Ingen upprepning Flöde: Här kan man också avgöra om modulen skall flöda höger eller vänster om en annan modul. Tex om man man vill ha text vid sidan om en bild så väljer man antingen Flöda höger eller Flöda vänster. Vill man att bilden skall flöda till höger om en modul så väljer man Flöda höger. OBS! Bilden måste ligga ovanför texten som den skall flöda runt i Innehåll. Det är alltså den övre modulen som flödar. Egen stil: Med alternativet Egen stil kan man använda egna stilmallar (CSS). Ange ett semikolon (;) om du skriver fler kommandon i Egen stil. 5
1.3.4 Utseende, fliken Kantlinjer Kantlinjer: Här väljer man om man vill ha Kantlinje runt om eller Enstaka kantlinjer. Bilden ovanför visar hur det ser ut om man valt alternativet Kantlinje runt om. Rutan ser lite annorlunda ut om man väljer alternativet Enstaka kantlinjer. OBS! Man kan inte växla mellan Enstaka kantlinjer och Kantlinjer runt om, då försvinner alla inställningar. Tjocklek: Här anger man linjens tjocklek. Storleken kan man ange i pixlar, em eller procent. Färg: Här anger man färg. De färger som visas är de färger som är uppsatta på webbplatsen. Om man har behörighet kan man också skapa en egen färg. Läs mer om färger under Färgskala. Typ: Här väljer man vilken typ av kantlinje man vill ha. Följande typer finns att välja mellan: Resultatet i Internet Explorer Resultatet i Firefox OBS! Som visas ovan skiljer sig resultatet i olika webbläsare. Vissa av typerna får heller inte vara av för liten storlek, då visas de ej (dubbel är tex 3 px bred i detta exempel). 6
2 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. Dynamiska mallar med fasta formatmallar (pixlar): Dynamiska mallar där modulerna ligger i relation till varandra. Med fasta formatmallar kan man inte ändra teckenstorleken via webbläsaren men besökaren kan göra detta via vår modul Teckenstorlek. Dynamiska mallar med relativa formatmallar (em): Dynamiska mallar där modulerna ligger i relation till varandra. Med relativa formatmallar (em) kan man storleksförändra texten med webbläsarens inställningar. Dynamiska mallar med relativa formatmallar (em) och css-kolumner: Dynamiska mallar som är byggda med relativa mått (em) för nästan alla avstånd och med CSS-kolumner för layout istället för tabeller. Detta ställer stora krav på att man både som mallbyggare och redaktör har koll på måtten för om något inte får plats så spricker designen och text hamnar radvis istället för kolumnvis. Detta beskrivs i denna lathund. Kolla alltid hur mallarna ser ut i flera webbläsare (tex Internet Explorer och Firefox )samt validera dem (http://w3.validator.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: Sidhuvud M e n y Sidhuvud Text Text 1. Vanlig mall (standardmall) 2. Bred mall Sidhuvud Sidhuvud M e n y Text Text 3. Två spalter M e n y Rubrik Ingress Innehåll 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. OBS! Även om minsta komponent inte är sidhuvudet så kan det vara bra att börja med en mall med enbart sidhuvud ifall man vill vara mer flexibel och bygga annorlunda mallar framöver. 7
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 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. Mallyta 2. Delmall 2 Utgångsmall M e n y Mallyta 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 Innehålls yta 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 Innehållsyta Innehållsyta 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 Innehållsyta med: Rubrik, Ingress Innehåll, Bild 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 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 Innehållsyta 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. Tips! Om man skall ha flera mallar som har två spalter så är det bra om man skapar ytterligare en delmall med två spalter. Annars måste man definiera bredd och avstånd mellan de två spalterna på varje ny mall för två spalter som man skapar. 8
3 Praktiska förberedelser Då börjar vi med de praktiska förberedelserna. Vi börjar med att ställa in Avancerade utställningar, lägger till webbplatsfärger, ställer in formatmallar och lägger till metadata som behövs vid mallbyggandet. Allt detta för att underlätta när man bygger mallarna. 3.1 Ställ in Avancerade inställningar Om man vill ha ökad tillgänglighet på webbplatsen bör man börja med att ställa in Avancerade inställningar. Här bör man ställa in att man skall Följa riktlinjer för WAI 1 samt att man skall Använda CSS-kolumner. Detta gör man genom att välja Egenskaper på webbplatsen. Under Webbplatsinställningar väljer man fliken Avancerade inställningar. Kryssa i: Följ riktlinjer för WAI 1: Detta innebär att när man lägger till en bild, en länk eller en tabell så blir man påmind om att lägga till en beskrivning för ökad tillgänglighet. Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 5.2.2) skall man ange title-text för otydliga länkar. Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 5.1.11) skall samtliga meningsbärande grafiska objekt beskrivas med alt-text. Alt-texten bör begränsas till max 150 tecken. Ökad tillgänglighet! Enligt 24-timmarsvägledningen skall verktyget påminna användaren att ange alternativa beskrivningar (avsnitt 8.2.8). Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 4.3.1) bör man förtydliga innebörden av en tabell i text. Använd CSS-kolumner: Detta innebär att layouten baseras på CSS-kolumner istället för tabeller. Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 4.1.12) skall man inte använda tabeller för layout. Om man vill kan man också kryssa i följande rutor: Förhindra HTML i text och tabell: Innebär att användaren inte kan skriva in html-kod i dessa moduler vilket 9
minskar risken för att en webbsida inte validerar pga ingen kontroll sker av html-koden. Ökad tillgänglighet! 24-timmarsvägledningen anger att man skall validera koden (avsnitt 4.8.1). Om man anger egen HTML-kod, kontrollera att koden validerar tex på http://validator.w3.org Flytta styleinformation till CSS-fil: I SiteVision separerar vi design och innehåll i redigeringsgränssnittet men slår ihop koden vid visning. Detta alternativ separerar dessa även vid visning. Ökad tillgänglighet! Enligt 24-timmarsvägledningen skall man separera innehåll från design (avsnitt 4.2.2). Övriga alternativ har ingen inverkan på tillgängligheten. 3.2 Lägg till webbplatsfärger För att underlätta mallbyggandet lägger man till de färger som man skall använda som profilfärger på webbplatsen. Detta gör man genom att högerklicka på webbplatsen och välj Egenskaper. Under Utseende väljer man Webbplatsfärger. Här lägger man till nya färger eller skriver över befintliga. För att lägga till en ny färg, klicka på plustecknet. Längst ner i fönstret till vänster visas sig Nyskapad färg. Markera denna och fyll i Namn, Beskrivning (valfritt) och välj en Färg genom att klicka på Välj färg. Ett nytt fönster öppnas där du kan välja färg genom en färgskala, RGB, webbsäkra färger eller genom att ta en färg med hjälp av pipettverktyget. 10
På fliken Färgskala kan man välja färg genom att klicka med musen över den stora rutan till vänster tills man hittar en färg man vill ha. Den aktuella färgen visas under Granska. När du har hittat rätt färg klickar du OK. På fliken Röd-Grön-Blå kan man ange RGB-värdet för att hitta rätt färg. Ett annat sätt är att fylla i HTML hexsträng. På fliken Webbsäkra färger kan man klicka på en färgruta och klicka OK. Annars kan man välja färg med hjälp av pipettverktyget. Med detta kan man ta färgprov från en bild och spara den färg man vill använda. För att ta ett färgprov klicka på pipettverktyget (ikonen ). Ett föns ter öppnas som visar en förstoring över allt vad du för musen över. För att välja en färg, klicka och välj OK. Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 4.1.17) skall man använda tillräckliga kontraster mellan bakgrundsfärg och förgrundsfärg. Du kan kolla kontrasterna här med ett program som heter Colour Contrast Analyser 1.0: http://www.visionaustralia.org.au/info.aspx?page=628 3.3 Ställ in formatmallar Under Utseende och fliken Formatmallar ställer man in de formatmallar som man skall använda på webbplatsen. 11
När man börjar på en ny webbplats följer det med fyra formatmallar som standard: Brödtext, Sidrubrik, Underrubrik och BODY. Dessa formatmallar är inställda på fasta mått (pixlar). I denna lathund skall vi använda relativa mått (em) så vi börjar med att ställa om de befintliga formatmallarna till em. Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 4.2.5) bör webbplatsen vara uppbyggd av relativa mått så att det går att storleksförändra teckenstorleken i webbläsaren. 3.3.1 Relativa mått (em) 1. Markera formatmallen som heter BODY och välj knappen Egenskaper. 2. Fyll i de egenskaper som formatmallen skall ha. Det viktiga är att i fältet Storlek fylla i storleken i em. Ställer man tex in att storleken skall vara 0.72 em (vilket motsvarar ca 11px) så skriver man in det i fältet. OBS! Inget mellanslag mellan 0.7em. Använd punkt, inte kommatecken. Kryssa i rutan Omskalbar för att besökaren skall kunna öka/minska storleken på webbplatsen. Ökad tillgänglighet! 24-timmarsvägledningen rekommenderar att man ger webbplatsen en typografi som underlättar läsningen. Typsnitt utan seriffer (tex verdana, georgia) är framtagna speciellt för att läsas på skärm (avsnitt 4.1.14) 3. 2 Gå till fliken Länkegenskaper. Här kryssar man för länkegenskaper för alla fyra typer av länkar och ser till att dessa har en storlek på 100%. Klicka OK. För att räkna ut em så tar man pixlar/15.94. Tex för att motsvara 11 px tar man 11/15.94. 12
4. Gå till fliken Avancerat och se till att Används för BODY är markerad med Ja. Klicka OK. 5. Markera formatmallen Brödtext och klicka på knappen Egenskaper. 6. I fältet Storlek anger man hur stor formatmallen skall vara i procent (i förhållande till formatmallen BODY). Vill man att brödtexten skall vara 11px skriver man alltså 100%. Vill man ha en mindre brödtext skriver man tex 90%. OBS! Glöm inte bort att fylla i procent på storleken om man fyller i olika länkegenskaper. Ökad tillgänglighet! 24-timmarsvägledningen anger att länkar bör (med vissa undantag) vara understrukna. Undantag kan göras i menyer om det är tydligt vad som är klickbart (avsnitt 4.1.6) Klicka OK. 13
7. Markera formatmallen Sidrubrik och klicka på knappen Egenskaper. 8. I fältet Storlek anger man i procent i förhållande till formatmallen BODY hur stor formatmallen skall vara. Vill man att sidrubriken skall vara ca 18px skriver man 160%3. OBS! Glöm inte bort att fylla i procent på storleken om man fyller i olika länkegenskaper. 9. Gå till fliken Avancerat. Se till att Används för rubriknivå är markerad med H1. Klicka OK. Ökad tillgänglighet! 24-timmarsvägledningen anger att man skall använda rätt kod för rubriker (avsnitt 5.1.5) 10. Klart! Upprepa för övriga formatmallar. TIPS! Tänk på att lägga till formatmallar för menyn dessa brukar oftast uppträda annorlunda mot vanlig brödtext som oftast har understrukna länkar. Menyer brukar inte ha understrukna länkar. Vill man ha en annan formatmall på en aktiv sida så skapar man en formatmall för detta också. Ökad tillgänglighet! 24-timmarsvägledningen anger att länkar bör (med vissa undantag) vara understrukna. Undantag kan göras i menyer om det är tydligt vad som är klickbart (avsnitt 4.1.6) 3 18/15.94/0.7 14
3.4 Lägg till metadata 1. Markera webbplatsen, högerklicka och välj Egenskaper. 2. Välj fliken Metadata. Klicka på knappen Lägg till metadata. 3. Om man vill lägga till vem som senast publicerade sidan, välj typen Systemvärden. I Beskrivning skriv tex Senast publicerad av och under Namn skriver man exempelvis senastpublicerad. Ökad tillgänglighet! Enligt 24-timmarsvägledningen skall koden validera (avsnitt 4.8.1). Metadata måste alltid ha ett namn, annars kommer inte webbsidan att validera (namnet får inte innehålla å-ö, konstiga tecken eller mellanslag). Testa på http://validator.w3.org. 4. Under fliken Format väljer man: Värde att infoga: Senast publicerad av. Under Användarinfo väljer man Användarens hela namn om man vill skriva ut hela namnet på personen som senast publicerade sidan. 15
5. Under fliken Avancerat fyller man i de kryssrutor som passar för den metadatadefintion som man skapar. Dock bör Fältet får infogas i moduler (t.ex. Text) vara ikryssad om man skall nyttja denna metadatadefintion vid skapandet av mallar senare. 6. Klicka OK. Fortsätt att lägga till de metadata som behövs tex Senast publicerad datum. Upprepa steg 1-5 med skillnaden att under steg 4 fyller man i : Värde att infoga: Senast publiceringsdatum. Under Datumformat väljer man att visa datumet som man vill (tex Datum (yyyy-mm-dd). 16
4 Bygga mallar När planeringen och de praktiska förberedelserna är klara kan vi börja med att bygga mallarna. Vi börjar att bygga en delmall som innehåller ett sidhuvud. 4.1 Delmall 1 - Sidhuvud 1. Växla över till läget Sidmallar. 2. Markera Mallar för... (det står det namn som Webbplatsen har) och välj Skapa Ny (första ikonen i verktygsraden). Välj mapp och fyll i namn på mappen, tex Delmallar. 3. Markera mappen Delmallar och välj sedan Skapa Ny (första ikonen i verktygsraden). Ett nytt fönster öppnas där man får ange namnet på mallen. Klicka OK. 4. Ett nytt fönster öppnas, Skapa mall. Här kan man välja mellan tre olika alternativ beroende på om man vill bygga mallen från början eller om man vill ha hjälp med layouter utdragna för tex sidhuvud, meny, sidfot. Har man kommit fram till att det bara är sidhuvudet som är gemensamt för samtliga webbsidor bygger man en mall baserad på en Blank mall. Välj Blank mall och klicka OK. 17
Om alla webbsidor skall ha ett sidhuvud, en meny och en sidfot kan man man använda sig av en av de förbyggda standardmallarna. Klicka på de olika ikonerna för att få mer information om vad standardmallarna innehåller. 5. Klicka OK. Nu har det skapats en mallsida som inte är publicerad. 6. Under Innehåll visas bara en gul layout som heter Mall. I redigeringsytan är det tomt. Nu kan man börja att bygga upp mallen. När man bygger mallen är det bra att tänka i form av rader och kolumner. Rader använder man om man har information staplad på varandra tex en logotyp med en flernivålänk under och kolumner används exempelvis om man vill ha en logotyp och därefter ett namn till höger om logotypen. Oftast använder man både rader och kolumner när man bygger upp sin mall. Den första layouten som heter Mall är speciell. Här gör vi inga inställningar förutom om vi vill centrera mallen4. Lägg därför tll en radvis layout direkt under Mall där vi kan sätta en sidbredd som ärvs ner till underliggande layouter. 4 För att centra webbplatsen, högerklicka på Mall och välj Egenskaper. Under fliken Utseende, skriv följande i Egen stil: text-align: center; display: table; margin: 0 auto; 18
7. Vi får en ny layout som heter Layout och är placerad under Mall. För att byta namn på layouten så högerklickar man på layouten och väljer alternativet Byt namn. Fyll i det nya namnet och tryck enter för att det nya namnet skall gälla. I exemplet byter vi namn till Sidbredd. Högerklicka på layouten Sidbredd, välj Egenskaper och fliken Inställningar och ställ in hur bred webbplatsen skall vara. OBS! Om webbplatsen skall vara optimerad för 800 så anger man inte 800 i bredd för bland annat scrollister i webbläsaren tar plats. En lämplig bredd är 770px. Vill man räkna om detta till em (relativa mått) så tar man 770px/15,94/0,7 (om body = 0.7em) 69em Ökad tillgänglighet! 24-timmarsvägledningen rekommenderar att man använder relativa mått (avsnitt 4.2.5) 8. Nu kan man börja att lägga till de moduler som man vill använda. I detta exempel vill vi kanske först ha en logotyp, en flernivålänk med bakgrundsfärg och en ikonrad med en Anpassa-länk samt en utskriftsversion. Först vill vi lägga till en logotyp och markerar därför Sidbredd och lägger till en bildmodul. Peka ut den bild som är logotypen. Om bilden inte finns i bildarkivet måste man ladda upp den med alternativet Lägg till bild. 19
TIPS! Vill man sedan behörighetsskydda sina mallbilder kan det vara bra att lägga dem i en mapp. För att skapa en mapp, markera bildarkivet och klicka på knappen Skapa mapp. 9. Klicka OK. Då visas ett nytt fönster (om man fyllt i att man skall följa WAI, se avsnitt 3.1 Ställ in Avancerade inställningar, där man blir påmind om att fylla i en bildbeskrivningstext. Fönstret växlar då över till fliken Inställningar. Här anger man en bildbeskrivningstext. Är det en logotyp som innehåller text så anger man vad som står i texten. Om man också vill länka loggan så kryssar man i alternativet Skapa länk av bilden... samt anger i bildbeskrivningstexten vart loggan länkar. Klicka OK. 20
10. Byt namn på bildikonen till Logotyp. Högerklicka på bilden, välj Byt namn. Avsluta med enter-slag. Under Innehåll har vi nu följande struktur: Om så önkas, länka logotypen till startsidan. 11. Markera layouten Sidbredd och lägg till en flernivålänk (finns under modulväljaren Navigation ). Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 4.1.2) skall man hjälpa besökaren att förstå var de är på webbplatsen tex genom en länkstig (vår flernivålänk ). Högerklicka på Flernivålänk och välj Egenskaper. Under Utseende ställer man in den bakgrundsfärg man vill ha på flernivålänken. För att bakgrundsfärgen skall få lite mer luft kan man högerklicka på flernivålänken och välja Egenskaper. Under fliken Marginaler fyller man i Avstånd Upptill, Avstånd nertill och Avstånd vänster 0,3em. 21
Under Innehåll har vi nu följande struktur: 12. Lägg till en ikonrad med en länk för att anpassa webbplatsen och en utskriftsversion. Eftersom dessa skall ligga på samma rad så måste vi börja med att lägga till en layout kolumnvis. Markera Sidbredd, högerklicka och välj Lägg till layout kolumnvis. Byt namn på layouten till Ikonrad. 13. Markera Ikonrad och lägg till en textmodul där man skriver Anpassa webbplatsen. Byt namn på denna modul till Anpassa. OBS! Denna skall sedan länkas till en sida där man kan anpassa webbplatsen. Denna sida finns inte skapad än eftersom inga mallar är klara. Vi måste alltså komma ihåg att komma tillbaks till denna mall och länka denna text senare. Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 4.2.4) bör man ha möjlighet att göra personliga inställningar för tex teckenstorlek, kontrastverkan. 14. Markera Ikonrad och lägg till en modul för utskriftsversion (finns under modulväljaren Övrigt ). Kryssa i att man skall använda både bild och text. 15. Nu ligger textmodulen och utskriftsversionen väldigt nära varandra. För att få ett avstånd mellan modulerna kan man sätta ett mellanrum på layouten Ikonrad. Högerklicka på Ikonrad, välj Egenskaper och fliken Inställningar. Under mellanrum kan man ställa in det avstånd man vill ha mellan modulerna, tex 1em. 22
Vill man att länkarna/ikonerna skall ligga till höger så kan man välja att flöda layouten Ikonrad till höger. Det gör man genom att högerklicka på Ikonrad, välj Egenskaper och under Utseende väljer man Flöde: Flöda höger. För att få ett avstånd upp till flernivålänken samt ner till texten som kommer att komma nedan så väljer vi att högerklicka på Ikonrad, väljer Egenskaper och fliken Marginaler. Där sätter vi ett avstånd upptill och nertill på 0,5em. Klicka OK. Under Innehåll har vi nu följande struktur: 16. Nu känner vi oss nöjda med sidhuvudet men vi måste nu markera ytan som vi skall kunna fortsätta att bygga mallar på, sk mallyta. I och med att en mallyta alltid måste ligga i en layout så skapar vi därmed en ny layout radvis. Markera Mall, högerklicka och välj alternativet Lägg till Layout radvis. Byt namn på layouten till Mallyta. För att menyn till höger inte skall flöda till höger om texten vi lägger till i denna mallyta så måste vi ange att flödet skall avslutas. Detta gör man genom att välja Egenskaper, Utseende och alternativet Egen stil. Här skriver man clear:both Klicka OK. 23
17. Högerklicka på Mallyta och välj alternativet Konvertera till mallyta. Ett nytt fönster öppnas där man kan välja en mallyta eller skapa en ny. Välj en mallyta och klicka OK. OBS! Det får inte finnas två mallytor med samma namn på en mall. Därför får man skapa nya namn på mallytorna. För att skapa en ny mallyta klicka på knappen Skapa ny och fyll i det nya namnet i fönstret som öppnas. När man klickar OK finns namnet i listan. Klicka OK igen. 18. Högerklicka på sidmallen och välj Uppdatera. Under Innehåll har vi nu följande struktur: 19. Publicera mallen. Klart! Detta innebär att man nu kan bygga en ny mall och skapa nytt innehåll i den yta som är markerad som mallyta dvs hela området under sidhuvudet. Denna mall är nu klar att användas av andra mallar. Dock kan inte en redaktör skapa webbsidor av denna mall, då får man upp denna varning: 24
20. Mallen har nu följande utseende: 25
4.2 Delmall 2 - Utgångsmall Då fortsätter vi och bygger delmall 2 som bygger på delmall 1. 1. Markera mappen Delmallar och välj Skapa Ny (första ikonen i verktygsraden). 2. Ett nytt fönster öppnas, fyll i namn och vilken mall den skall baseras på. I detta fall namnger vi mallen Utgångsmall och baserar den på mallen Sidhuvud. 3. Nu ser man den nya mallen Utgångsmall under mappen Delmallar. Den streckade linjen i redigeringsytan är mallytan som kan ändras i denna mall. 4. Under Innehåll ser man nu mallytan Mallinnehåll: 5. I denna mall vill vi ha två kolumner: en kolumn med meny och en kolumn med en mallyta. Därför markerar vi innehållsytan Mallinnehåll, högerklickar och väljer Lägg till layout kolumnvis. Tips! Alltid när man skall använda mer än en kolumn börjar man med att lägga till en kolumnvis layout. 6. Markera därefter den nya layouten, och lägg till de två kolumnerna i form av radvisa layouter. Högerklicka och välj Lägg till layout radvis. Döp denna layout till Meny. Markera återigen Layout, högerklicka och välj Lägg till layout radvis. Döp denna layout till Mallyta. 7. Då skall vi ställa in hur mycket yta de olika kolumnerna skall få. Högerklicka på Meny och välj Egenskaper. Här fyller man i den bredd man vill ha på menykolumnen, tex 19em. Klicka OK. 8. Högerklicka på Mallyta och välj Egenskaper, Här fyller man i den bredd man vill ha på mallyta-kolumnen. 26
Om den totala bredden var 69 em, minus menyspalten på 19 em så har vi 50 em kvar. Vill man att det skall vara ett avstånd på 1 em mellan meny och innehåll så får man dra bort det från 50. Dvs vi fyller i 49 em. 9. Växla till fliken Marginaler och fyll i ett avstånd till vänster på 1em så att menyn och innehållet får ett mellanrum mellan sig. Klicka OK. 10. Markera layouten Meny och lägg till den meny som skall användas. I detta exempel kan vi använda modulen Meny som finns under modulväljaren Navigation. Ställ in vilka formatmallar och ev ikoner som skall användas. Ökad tillgänglighet! Denna meny är den enda av SiteVisions standardmenyer som är uppbyggd som en lista, inte en tabell. 27
11. Nu har vi följande struktur: 12. Markera layouten Mallyta, högerklicka och välj Konvertera till mallyta. Skapa en ny mallyta som heter Mallyta (eller ta någon annan befintlig). Klicka OK. 13. Högerklicka på sidmallar och välj Uppdatera. Under Innehåll har vi följande utseende: 14. Publicera mallen. Klart! Nu är vi klara med delmallarna och skall börja att skapa mallar som slutanvändaren kan använda. 15. Nu har mallen följande utseende: 28
4.3 Mall 3 - Standardmall Nu har vi byggt färdigt delmallarna som ligger till grund för övriga mallar. Nu skall vi bygga en mall som kan användas av slutanvändaren. Standardmallen ärver menyspalten från Utgångsmallen. 1. Markera Mallar för... (det står det namn som Webbplatsen har) och välj Skapa Ny Mall (första ikonen i verktygsraden). 2. Ett nytt fönster öppnas, fyll i namn och vilken mall den skall baseras på. I detta fall namnger vi mallen Standardmall och baserar den på mallen Utgångsmall. OBS! Varje mapp man skapar i Sidmallar blir en egen flik. Mallen Utgångsmall ligger alltså under fliken Delmallar. 3. Nu ser man den nya mallen Standardmall under Sidmallar. 4. Under innehåll ser man nu mallytan Mallyta : 5. Den streckade linjen i redigeringsytan är mallytan som markerar det område som kan ändras i denna mall. 6. I denna mall vill vi nyttja nästan hela området. Informationen skall ligga radvis. Markera mallytan Mallyta, högerklicka och välj Lägg till layout radvis. Högerklicka på layouten och byt namn på den till Innehåll. 7. Vill vi att slutanvändaren skall få nyttja hela det streckade området på bredden sätter vi ingen bredd. Vill man minska bredden så att textraderna inte blir så långa, högerklickar vi på layouten och väljer Egenskaper. Under fliken Inställningar ställer man in Bredd: Vill man tex ha ca 70 tecken så motsvarar det ca 380 px som i sin tur kan omvandlas till em: 380/15,94/0,7 34em Ökad tillgänglighet! Enligt 24-timmarsriktlinjerna (avsnitt 4.1.16) skall man ge webbplatsen en spaltbredd som underlättar läsningen. Spaltbredden bör vara max 70 tecken lång samt vänsterställd. 8. Här kan man också ställa in Mellanrum på tex 1em. Detta innebär att när redaktören lägger ut en modul på en webbsida så blir det automatiskt 1em mellanrum mellan modulerna. Klicka OK. 9. Om man vill kan man lägga till två textmoduler för Rubrik och Text för att hjälpa slutanvändaren. Markera Innehåll och klicka på ikonen Lägg till text. Ett nytt fönster öppnas där man skriver Rubrik och använder rätt formatmall. 29
Upprepa för att skapa en textmodul där det står text. Byt namn på textmodulerna till Rubrik resp Text genom att högerklicka på dem under Innehåll och välj alternativet Byt namn. Avsluta med enter-slag. 10. Markera layouten Innehåll, högerklicka och välj Konvertera till innehållsyta. Använd gärna en av de fördefinierade innehållsytorna tex Mittenspalt. Klicka OK. 11. Högerklicka på sidmallar och välj Uppdatera. Under Innehåll har vi följande utseende: 12. Publicera mallen. Klart! Resultatet blir som följande: 30
4.4 Mall 4 - Standardmall med högerspalt 1. Markera Mallar för... (det står det namn som Webbplatsen har) och välj Skapa Ny Mall(första ikonen i verktygsraden). 2. Ett nytt fönster öppnas, fyll i namn och vilken mall den skall baseras på. I detta fall namnger vi mallen Standardmall med högerspalt och baserar den på mallen Utgångsmall. 3. Nu ser man den nya mallen Standardmall med högerspalt under Sidmallar. 4. Under innehåll ser man nu mallytan Mallyta : 5. Den streckade linjen i redigeringsytan är mallytan som markerar det område som kan ändras i denna mall. 6. I denna mall vill ha två kolumner: en för mittenspalten och en för högerspalten. Vi börjar därför med att skapa en kolumnvis layout. Markera mallytan Mallyta, högerklicka och välj Lägg till layout kolumnvis. Högerklicka på layouten och byt namn på den till Innehåll. 7. Markera därefter den nya layouten Innehåll, och lägg till de två kolumnerna i form av radvisa layouter. Högerklicka och välj Lägg till layout radvis. Döp denna layout till Mitten. Markera återigen Layouten Innehåll, högerklicka och välj Lägg till layout radvis. Döp denna layout till Höger. 8. Nu ställer man inställningar för de två kolumnerna. Börja med den som heter Mitten. Markera Mitten och välj Egenskaper. Under fliken Inställningar ställer man in kolumnbredden. I detta fall var ju mallytan 49em så vi väljer att nyttja 30em till mittenspalten. Därefter ställer vi också in ett mellanrum på 1em så att det alltid blir ett mellanrum på 1em mellan modulerna på sidan. 31
9. Markera layouten Höger och välj Egenskaper. Under fliken Inställningar ställer vi in Bredd och Mellanrum. Vi har 19em kvar att ställa in på bredden men vi vill att 1em skall vara ett avstånd mellan de båda kolumnerna, så vi fyller i 18em på bredd. 10. Växla över till fliken Marginaler och ställ in ett Avstånd vänster på 1em. Klicka OK. 32
11. Om man vill kan man lägga till textmoduler för Rubrik, Text och Kolumnrubrik för att hjälpa slutanvändaren. Markera Mitten och klicka på ikonen Lägg till text. Ett nytt fönster öppnas där man skriver Rubrik och använder rätt formatmall. Upprepa för att skapa en textmodul där det står text. Byt namn på textmodulerna till Rubrik resp Text genom att högerklicka på dem under Innehåll och välj alternativet Byt namn. Avsluta med enter-slag. 12. Markera layouten Höger och lägg till en textmodul för kolumnrubrik. Byt namn på textmodulen till Kolumnrubrik. 13. Markera layouten Mitten, högerklicka och välj Konvertera till innehållsyta. Använd samma innehållsyta som du använde i mall 3 - Mittenspalt. Klicka OK. OBS! Genom att man använder samma innehållsyta kan man enkelt byta mall på webbsidorna om man råkar basera en sida på fel mall. 14. Markera layouten Höger, högerklicka och välj Konvertera till innehållsyta. Välj Högerspalt. Klicka OK. 15. Högerklicka på sidmallen och välj Uppdatera. Under Innehåll har vi följande utseende: 33
16. Publicera mallen. Klart! Resultatet blir som följande: 34
4.5 Mall 5 Nyhetsmall 1. Markera Mallar för... (det står det namn som Webbplatsen har) och välj Skapa Ny Mall (första ikonen i verktygsraden). 2. Ett nytt fönster öppnas, fyll i namn och vilken mall den skall baseras på. I detta fall namnger vi mallen Nyhetsmall och baserar den på mallen Utgångsmall. 3. Nu ser man den nya mallen Nyhetsmall under Sidmallar. 4. Under innehåll ser man nu mallytan Mallyta : 5. Vi vill lägga till tre textmoduler och en bildmodul. Dessa bör ligga i en layout eftersom de skall ligga i en innehållsyta, så vi lägger till en layout. Markera mallytan Mallyta, högerklicka och väljer Lägg till layout radvis. Högerklicka på layouten och byt namn på den till Innehåll. 6. Nu markerar vi layouten Innehåll och lägger till tre textmoduler och en bildmodul. I den första textmodulen skriver vi Rubrik med en formatmall som är en rubrik. Därefter högerklickar vi på textmodulen och byter namn på den till Rubrik. I den andra textmodulen skriver vi Ingress och använder en lämplig formatmall. Därefter högerklickar vi på textmodulen och byter namn på den till Ingress. I den tredje textmodulen skriver vi Innehåll och använder brödtext som formatmall. Därefter högerklickar vi på textmodulen och byter namn på den till Innehåll. Lägg också till en Bildmodul och peka ut en dummybild. Bilmodulen skall heta Bild, vilket den gör som standard. OBS! Det är viktigt att modulerna heter just Rubrik, Ingress, Innehåll och Bild. Detta är metadata som nyhetsmodulen använder för att hämta informationen och därmed kunna visa artiklarna på olika sätt. 7. I denna mall behöver vi nästan inte göra några inställningar, bara bredd och mellanrum. Först vill vi minska bredden så att textraderna inte blir så långa. Markera layouten Innehåll och välj Egenskaper. Under fliken Inställningar ställer man in Bredd. Vi kan ställa in en bredd på 34em. Här kan man också ställa in Mellanrum på tex 1em. Detta innebär att när slutanvändaren lägger ut en modul på webbsidan så blir det automatiskt 1em mellanrum mellan modulerna. 35
8. Markera Innehåll, högerklicka och välj Konvertera till innehållsyta. Använd samma innehållsyta som du använde i mall 3 - Mittenspalt. Klicka OK. Publicera mallen. Högerklicka på mallen och välj Uppdatera. 9. Om man vill lägga till vem och när sidan senaste publicerades kan man lägga till detta längst ner på sidan (om man lagt till dessa metadata se steg 3.5). Lägg till en textmodul men inte i innehållsytan. Markera layouten Innehåll och klicka på Lägg till text. Döp textmodulen till Publicerad. 10. Fyll i Senast publicerad av: och välj sedan Metadata och alternativet Senast uppdaterad av (eller vad ni benämnde den till under steg 3.5), skriv ett kommatecken och välj sedan Metadata och alternativet Senast uppdaterad (eller vad ni benämnde den till under steg 3.5). 11. Högerklicka på sidmallen och välj Uppdatera. Under Innehåll har vi följande utseende: 36
12. Publicera mallen. Klart! Resultatet blir som följande: 37
4.6 Mall 6 Bred mall 1. Markera Mallar för... (det står det namn som Webbplatsen har) och välj Skapa Ny Mall (första ikonen i verktygsraden). 2. Ett nytt fönster öppnas, fyll i namn och vilken mall den skall baseras på. I detta fall namnger vi mallen Bred mall och baserar den på mallen Sidhuvud. OBS! I denna mall vi inte ha någon meny därför baserar vi denna mall på Sidhuvud. Vi vill nyttja hela området till att lägga till något som tar stor plats. 3. Nu ser man den nya mallen Bred Mall under Sidmallar. 4. Under innehåll ser man nu mallytan Mallinnehåll : 5. Den streckade linjen i redigeringsytan är mallytan som markerar det område som kan ändras i denna mall. 6. I denna mall vill vi nyttja nästan hela området. Informationen skall ligga radvis. Markera mallytan Mallinnehåll, högerklicka och välj Lägg till layout radvis. Högerklicka på layouten och byt namn på den till Innehåll. 7. Högerklicka på layouten och välj Egenskaper. Under fliken Inställningar ställer man in Mellanrum på tex 1em. Detta innebär att när redaktören lägger ut en modul på webbsidan så blir det automatiskt 1em mellanrum mellan modulerna. Om man vill att redaktören skall få nyttja hela det streckade området på bredden så vi sätter ingen bredd. Under fliken Marginaler kan vi ställa in ett avstånd till vänster på 1em så att informationen inte ligger för nära vänsterkanten. 8. Om man vill kan man lägga till två textmoduler för Rubrik och Text för att hjälpa slutanvändaren. Markera Innehåll och klicka på ikonen Lägg till text. Ett nytt fönster öppnas där man skriver Rubrik och använder rätt formatmall. Upprepa för textmodulen Text. 9. Markera layouten Innehåll, högerklicka och välj Konvertera till innehållsyta. Använd samma innehållsyta som du använde i mall 3 - Mittenspalt. Klicka OK. 10. Högerklicka på sidmallen och välj Uppdatera. Under Innehåll har vi följande utseende: 38
11. Publicera mallen. Klart! Resultatet blir som följande: 39
4.7 Behörighetsskydda delmallarna 1. Om du redan har skapat en mapp som heter Delmallar, gå till steg 4. Annars gör följande: Skapa en ny mapp genom att högerklicka på Mallar för...(det står det namn som webbplatsen har) och välj Ny Mapp. 2. Högerklicka på mappen och döp den till Delmallar. Avsluta med enter-slag. 3. Håll nere SHIFT och dra in mallarna Sidhuvud och Utgångsmall i denna mapp. Dessa mallar innehåller mallytor och kan inte användas som slutanvändarmallar utan enbart för att skapa nya mallar. 4. Dessa bör därför behörighetsskyddas och inte visas för vanliga användare. Detta gör man genom att högerklicka på Delmallar, välj Egenskaper och Säkerhet. 5. Under fliken Behörighet visas alla de användare som är uppsatta på webbplatsen. 6. Vill man att bara en eller två personer skall få behörigheter till dessa delmallar så kryssar man ur rutan Tillåt arv av behörigheter ovanifrån. 7. Därefter klickar man på Lägg till användare och bläddrar fram de användare som skall få tillgång till mallarna. 8. Klart! Nu når bara de personer som vi lade till under steg 7 mallarna. 40
5 Utskriftsmallar För att utskrifterna skall bli bra (inte ta med sidhuvud och menyer) bör man skapa en eller flera utskriftsmallar. Utskriftsmallarna skall bara skriva ut innehållet på webbsidorna, ej det som ligger i mallen. Därför måste man lägga till alla innehållsytor som används på webbplatsen. Först skapar man en utskriftsmall som innehåller de innehållsytor som används i de andra mallarna. Om man tex har följande mallar: Standardmall, innehållsytan heter Mittenspalt Standardmall med högerspalt, innehållsytorna heter Mittenspalt och Högerspalt Nyheter, innehållsytan heter Mittenspalt Bred mall, innehållsytan heter Mittenspalt. Då kan man skapa en standardutskriftsmall som innehåller en innehållsyta som heter Mittenspalt och en utskriftsmall för två spalter som innehåller två innehållsytor: Mittenspalt och Högerspalt. OBS! Hela detta avsnitt utgår från att innehållsytorna har namnen Mittenspalt och Högerspalt. Om era mallar har innehållsytor med andra namn så är det dessa namn ni skall använda. 5.1 Skapa en utskriftsmall 1. Skapa en ny mall som baseras på en blank sida och en blank mall. 2. Lägg till en textmodul med ett sidhuvud med företagsnamnet. Lägg eventuellt till en linje under textmodulen. 3. Lägg till en radvis layout där man kan sätta sidbredd så att den får plats på ett A4, ca 600 px. Högerklicka på layouten och välj Egenskaper. Under Inställningar, fyll i en bredd på 600px. Kom ihåg att också sätta mellanrum tex 10px för att modulerna skall få avstånd mellan varandra. 4. Konvertera layouten till en innehållsyta som heter Mittenspalt. 5. Klart! 5.2 Ställ in denna utskriftsmall som standardmall för utskrift 1. Högerklicka på webbplatsen och välj Egenskaper. 2. Välj webbplatsinställningar och fliken Webbplatsresurser. Här ställer man in den utskriftsmallen som standardmall, dvs den kommer att användas på alla mallar som inte specifikt har valt en utskriftsmall. 41
OBS! Använder man specialmallar som innehåller många innehållsytor i en kolumn så måste man lägga till ALLA innehållsytor som används i mallarna. Då lägger man bara till en ny layout under den andra layouten. Där ställer man in bredd och mellanrum och konverterar den till de innehållsytor som finns i de andra mallarna. Har man innehållsytor i flera kolumner så skapar man ytterligare en utskriftsmall för de/den mallen. 5.3 Skapa utskriftsmall för två spalter 1. Skapa en ny mall som baseras på en blank sida och en blank mall. 2. Lägg till en textmodul med ett sidhuvud med företagsnamnet. Lägg eventuellt till en linje under textmodulen. 3. Lägg till en kolumnvis layout där man kan sätta sidbredd så att den får plats på ett A4, ca 600 px. Högerklicka på layouten och välj Egenskaper. Under Inställningar, fyll i en bredd på 600px. 4. Markera den kolumvisa layouten och lägg till en radvis layout. Byt namn på layouten till Mitten. Högerklicka på layouten Mitten och välj Egenskaper. Under Inställningar, fyll i en bredd på ca 420px. Kom ihåg att också sätta mellanrum tex 10px för att modulerna skall få avstånd mellan varandra. Sätt också ett avstånd till höger på 10 eller 20px så att de två kolumnerna får lite mellanrum mellan sig. 5. Markera den kolumvisa layouten och lägg till en radvis layout. Byt namn på layouten till Höger. Högerklicka på layouten Höger och välj Egenskaper. Under Inställningar, fyll i en bredd på ca 180px. Kom ihåg att också sätta mellanrum tex 10px för att modulerna skall få avstånd mellan varandra. 6. Konvertera layouten Mitten till en innehållsyta som heter Mittenspalt. 7. Konvertera layouten Höger till en innehållsyta som heter Högerspalt. 8. Klart! 5.4 Ställ in utskriftsmallen som standard för en viss mall 1. Markera den mall som har flera kolumner. I detta fall mallen Två kolumner. 2. Välj Egenskaper och fliken Sidmall. Här kan man ställa in att man skall använda en specifik utskriftsmall. 3. Peka ut att denna specifika utskriftsmall skall användas istället för standardutskriftsmallen. Bläddra fram mallen och klicka OK. 4. Klart! 42
Alphabetical Index A Absoluta mallar... 6 Avstånd...3 B Bakgrundsbild... 5 Behörighetsskydda... 37 C CSS-kolumner... 8 Konvertera till innehållsyta... 1 L Layout... 3 Layouter... 3 M Mallyta... 2 Marginaler...3 Metadata... 13 D R F U Dynamiska mallar...6 Flöde...5 Formatmallar...10 I Innehållsyta...1 K Kolumnvis layout...3 Konvertera till innehållsyta... 1 Radvis layout... 3 Relativa mått (em)...10 Utskriftsmall...38 Utskriftsmallar...38 V WAI 1...8 Validera...6 Webbplatsfärger... 9 43