Delmall Utgångsmall
1. Markera Mallar för... (det står det namn som Webbplatsen har) och välj Skapa Ny (i sidolisten). Välj mapp och fyll i namn på mappen, exempelvis Delmallar.
2. Markera mappen Delmallar och välj sedan Skapa Ny (första ikonen i verktygsraden). Ett nytt fönster öppnas där du får ange namnet på mallen. Klicka OK.
4. Klicka OK. Nu har det skapats en mallsida som inte är publicerad.
5. Under Innehåll visas bara en layout som heter Mall. I redigeringsytan är det tomt.
Nu kan du börja att bygga upp mallen med hjälp av grid, gridrader och spalter.
6. Börja med att lägga till ett grid. Det är det förvalda gridet som läggs till med en sidbredd (940px) och det antal kolumner du satte upp (12 kolumner). Här väljer du om det ska vara:
- Grid - Pixelbaserat, kolumnerna är fasta oberoende av webbläsarens storlek
- Flexibelt grid - Procentbaserat, anpassar sig efter webbläsarens storlek
- Fast flexibelt grid - Procentbaserat, anpassar sig efter webbläsarens storlek men om du nästlar så blir kolumnerna fasta för att de ska linjera.
Vi väljer Flexibelt grid. Ska du bygga responsiva mallar så måste du bygga procentbaserat.
7. Nu kan du se under Innehåll att du har lagt till ett grid. Markera grid, högerklicka och lägg till en gridrad.
Du börjar alltid med att lägga till en gridrad när du har lagt till ett grid. En gridrad avslutar alla flöden och ser till att du inte får någon vänstermarginal som du skulle fått om du börjar med en gridkolumn.
8. För att byta namn på raden, högerklicka på raden och välj alternativet Byt namn. Fyll i det nya namnet ("Övre sidhuvud") och tryck Enter för att det nya namnet ska gälla.
Nu kan du också passa på att ställa in att "Övre sidhuvud" är en header enligt HTML5 för att mallarna också ska bli semantiska. Det gör du genom att välja Egenskaper på layout -> Inställningar -> Elementtyp (HTML5)-> Header
9. Om du följer skisserna från planeringen så ska du skapa en mall med ett övre sidhuvud (med toppmeny och sök), en sidhuvud med logotyp, en mallyta, en sidfot med tre puffar och en nedre sidfot med kontaktuppgifter,
Då börjar du med att lägga till en spalt som motsvarar så många kolumner som toppmenyn ska använda. Markera Rad, högerklicka och välj Lägg till spalt -> 8 kolumner.
För att byta namn på kolumnen - högerklicka på kolumnen och välj alternativet Byt namn. Fyll i det nya namnet ("Toppmeny) och tryck Enter för att det nya namnet ska gälla.
10. Markera "Toppmeny" och lägg till en menymodul.
Om du vill flytta in menyn lite till vänster så väljer du Egenskaper på menyn -> Avstånd vänster. Det är lämpligt att använda em när det handlar om avstånd så att det linjerar oavsett bredd på olika ytor.
Under Innehåll har du nu följande struktur:
Nu kan du också passa på att ställa in att "Toppmeny" är en nav enligt HTML5 för att mallarna också ska bli semantiska. Det gör man genom att välja Egenskaper på laayout -> Inställningar -> Elementtyp (HTML5)-> Nav.
11. Markera raden Övre sidhuvud, högerklicka och välj Lägg till spalt -> 4 kolumner.
För att byta namn på kolumnen - högerklicka på kolumnen och välj alternativet Byt namn. Fyll i det nya namnet ("Sök") och tryck Enter för att det nya namnet ska gälla. Lägg till en sökruta.
Ställ in bredden på sökfältet i procent.
Du har ännu inte skapat någon sida för sökresultat eftersom du ännu inte har några mallar. Vill du att sökrutan ska ritas ut måste du peka ut en sida, vilken som helst, för att sedan peka ut rätt sida när du är klar med mallarna.
12. Om du vill ha bakgrundsfärg bakom Övre sidhuvud så väljer du Egenskaper på gridraden. Välj Utseende -> Bakgrundsfärg -> den färg du vill ha.
Vill du att bakgrunden ska gå över hela skärmen så lägger du hela gridet i en layout ("Bakgrundsfärg") där du sätter bakgrundsfärgen. Om du gör på detta sätt så får du lägga ut ett nytt grid i nästa steg eftersom annars får allt innehåll den bakgrundsfärgen.
13. Lägg till Sidhuvud med en logotyp. Markera Grid, högerklicka och lägg till en gridrad.
För att byta namn på gridraden, högerklicka på den och välj alternativet Byt namn. Fyll i det nya namnet ("Sidhuvud") och tryck Enter för att det nya namnet ska gälla.
Eftersom logotypen är ensam på hela raden behöver du inte lägga till någon spalt om du inte vill, men det är heller inte fel att lägga till en spalt. Markera Sidhuvud och lägg till logotypen (eller texten). Vi har ingen logotyp utan lägger till en text med företagsnamn istället. Högerklicka på texten och välj alternativet Byt namn. Fyll i det nya namnet ("Företagsnamn") och tryck Enter för att det nya namnet ska gälla.
Nu kan du också passa på att ställa in att "sidhuvud" också är en header enligt HTML5 för att mallarna också ska bli semantiska. Det gör du genom att välja Egenskaper -> Inställningar -> Elementtyp (HTML5)-> Header
14. Nu ska vi markera den yta som vi har rätt att ändra i nästa mall, mallytan. Markera Grid, högerklicka och lägg till en gridrad.
För att byta namn på gridraden, högerklicka på den och välj alternativet Byt namn. Fyll i det nya namnet ("Mallyta") och tryck enter för att det nya namnet ska gälla.
15. Högerklicka på "Mallyta" och välj alternativet "Konvertera till mallyta". En ny vy visas där du kan välja en mallyta eller skapa en ny. Välj en mallyta och klicka OK.
Vill du ha lite mellanrum mellan sidhuvudet och innehållet och sidfoten i kommande mallar så kan du högerklicka på gridraden "Mallyta" och ange avstånd upptill och nertill.
16. Under Innehåll har du nu följande struktur:
17. Nu kvarstår bara sidfoten med de tre puffarna. Markera Grid, högerklicka och lägg till en gridrad. Högerklicka på gridrad och välj alternativet Byt namn till "Sidfot".
Om du vill ha en bakgrundsfärg på sidfoten så tar du Egenskaper på gridraden och väljer alternativet Utseende -> Bakgrundsfärg -> Välj valfri färg.
18. Markera "Sidfot", högerklicka och välj Lägg till spalt -> 4 kolumner.
19. Markera kolumn och lägg till textmoduler i första puffen. Högerklicka på spalten och välj alternativet Byt namn till "Puff1".
20. Återupprepa steg 18-19 med valfritt innehåll.
Nu kan du också passa på att ställa in att "Sidfot" är en footer enligt HTML5 för att mallarna också ska bli semantiska. Det gör du genom att välja Egenskaper -> Inställningar -> Elementtyp (HTML5)-> Footer
21. Nu ska vi lägga till Nedre sidfot. Markera Grid, högerklicka och lägg till en gridrad. Högerklicka på gridrad och välj alternativet Byt namn till "Nedre sidfot".
Om du vill ha en bakgrundsfärg på sidfoten så tar du Egenskaper på gridraden och väljer alternativet Utseende -> Bakgrundsfärg -> Väljer valfri färg.
Lägg till en textmodul med kontaktuppgifter.
Vill du att kontaktuppgifterna ska vara centrerade i den nedre sidfoten, lägg till en spalt på 12 kolumner i gridraden. Flytta in texten i spalten. Högerklicka på spalten och välj Egenskaper -> Inställningar -> Horisontal justering -> Mitten.
Nu kan du också passa på att ställa in att "Nedre sidfot" är en footer enligt HTML5 för att mallarna också ska bli semantiska. Det gör du genom att välja Egenskaper -> Inställningar -> Elementtyp (HTML5)-> Footer
22. Publicera mallen. Klart!
Detta innebär att du nu kan bygga en ny mall och skapa nytt innehåll i den yta som är markerad som mallyta det vill säga hela området mellan toppmenyn och sidfoten. Denna mall är nu klar att användas av andra mallar. Dock kan inte en redaktör skapa webbsidor av denna mall.
23. Mallen har följande utseende:
Skriv ut sida
