Slalom layout

En "slalom-layout" är en del av en webbsida med text- och bildinnehåll där texten flödar växelvis till höger och vänster om bilderna. Slalomlayouten finns inte som mall, utan hela slalomlayouten skapas som innehåll i en editor (Tiny MCE).

Skapa en Slalom-layout

1. Förbered bilderna genom att optimera och spara dem så att de är 600px breda (hälften av en full 1200px bredd) innan de läggs upp.

2. Lägg sedan in all rå text först helt utan formatteringar.

3. Dela in texten i de stycken den ska ha. Det kan vara så att textstycken hör ihop med bilder, men det behöver inte vara så. Spara sidan innan du fortsätter:

   

4. Öppna upp editorn igen, placera textmarkören före första textstycket och tryck på Retur (Enter) för att skapa ett nytt, tomt stycke ovanför första textstycket. Med markören i det tomma textstycket, tryck på bild-ikonen i verktygsraden för att lägga in en bild (Insert/edit image).

   

5. Dialogrutan för Insert/edit image öppnas. Tryck på den lilla filväljarknappen bredvid Source-fältet för att öppna mediabiblioteket elFinder. Navigera i eFinder fram till bilden som ska läggas in. Skapa eventuellt mappar och ladda upp bilden om den inte redan finns där.

6. Dubbelklicka på bilden i elFinder för att välja den och samtidigt stänga elFinder. I bildväljarrutan ska nu bildens sökväg synas (Source). Glöm inte att ange en bild-beskrivning innan du trycker på Save.

   

7. Bilden lägger sig först ovanför texten. Med bilden markerad, gå till Formats-menyn och välj Figure L. Bilden hamnar nu till vänster om texten.

   

8. Placera markören i slutet av första textstycket och tryck Retur för att skapa ett nytt, tomt stycke. Med markören i det nya, tomma stycket - välj Clear i Formats-menyn. Texten som hör till bild 2 hoppar ner under den första bilden om den är högre än det första textstycket.

   

9. Placera nu markören i början av det andra textstycket och tryck återigen Retur för att skapa ett nytt, tomt textstycke. Med markören i det nya tomma textstycket, tryck på bildikonen i verktygsraden för att sätta in bild nummer 2 från elFinder.

   

10. Med bild nummer 2 markerad, välj Figure R i Formats-menyn. Texten i andra stycket flödar nu till vänster om bild 2.

    

11. Placera markören i början på nästa stycke och tryck retur för att skapa nästa, tomma stycke. Placera markören i det nya, tomma stycket och välj Clear i Formats-menyn. Textstycke 3 hoppar nu ned på en ny rad under bild 2.

    

12. Upprepa proceduren så många gånger som önskas, bild i nytt stycke, växelvis Figure L och Figure R, nytt stycke med Clear efter varje stycke.

Clear

Clear innebär att efterföljande stycken med innehåll alltid börjar under allt annat, på en ny rad i ett nytt stycke. Det är användbart för att kontrollera hur texter flödar runt om bilder oberoende av storlek och bredd i en flytande layout.

Pröva följande exempel med olika bredd på webbläsarfönstret för att se hur en text kan flöda.

• Slalom exempel 1 med stycken, men utan Clear.
• Slalom exempel 2 med stycken och Clear efter varje stycke.