1. Markera Mallar för... (det står det namn som Webbplatsen har) och välj Ny Sida (första ikonen i verktygsraden). 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 man får ange namnet på mallen. Klicka OK.

3. Ett nytt fönster öppnas, Skapa mall. Här kan man välja bland tre alternativ beroende på om man vill bygga mallen från början eller om man vill ha hjälp med layouter utdragna för exempelvis sidhuvud, meny, sidfot.

Välj Blank mall och klicka OK.

4. Klicka OK. Nu har det skapats en mallsida som inte är publicerad.

5. 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 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 (978px) och det antal kolumner vi satte upp (12 kolumner). Här väljer vi 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 man nästlar så blir kolumnerna fasta för att de ska linjera.

Vi väljer Flexibelt grid. Ska man bygga responsiva mallar så måste man bygga procentbaserat.

7. Under Innehåll ser vi nu att vi har lagt till ett grid. Markera grid, högerklicka och lägg till en gridrad.

Man börjar alltid med att lägga till en gridrad när man har lagt till ett grid. En gridrad avslutar alla flöden och ser till att vi inte får någon vänstermarginal som vi skulle fått om vi 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.

9. Om vi följer skisserna som vi gjorde under planeringen så ska vi 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 vi 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 man vill flytta in menyn lite till vänster så väljer man 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 vi nu följande struktur:

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.

12. Om man vill ha bakgrundsfärg bakom Övre sidhuvud så väljer man Egenskaper på gridraden. Välj Utseende -> Bakgrundsfärg -> den färg ni vill ha.

13. Nu ska vi lägga 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 vi inte lägga till någon spalt om vi 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.

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". Ett nytt fönster öppnas där man kan välja en mallyta eller skapa en ny.

Välj en mallyta och klicka OK.

16. Under Innehåll har vi 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 man vill ha en bakgrundsfärg på sidfoten så tar man Egenskaper på gridraden och väljer alternativet Utseende -> Bakgrundsfärg -> Väljer 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.

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 man vill ha en bakgrundsfärg på sidfoten så tar man Egenskaper på gridraden och väljer alternativet Utseende -> Bakgrundsfärg -> Väljer valfri färg.

Lägg till en textmodul med kontaktuppgifter.

22. 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 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, då får man upp denna varning:

23. Mallen har följande utseende: