Hur man justerar element med flyter i Dreamweaver

Designers anpassar ofta en bild, en

taggen eller något annat element till vänster eller höger om en webbsida i Dreamweaver och linda sedan all text eller annat innehåll runt det elementet. Bilden är justerad till höger om kolumnen så att texten radbryts bredvid den till vänster. I stegen som följer får du reda på hur du skapar stilar som denna.

Kredit: Bild från istockphoto.com

CSS erbjuder många fördelar när det gäller att justera element som detta, men sättet du ställer in dessa stilar på är inte så självklart som du kan förvänta dig först eftersom du använder float-alternativet.

När du har förstått att du kan flytta element, som bilder, till vänster eller höger sida av en sida, är det ganska enkelt att skapa stilar som uppnår detta mål. I den här övningen lär du dig att skapa två stilar som är idealiska för att justera bilder till vänster och höger på en sida, komplett med en liten marginal precis där du behöver det.

CSS-layouterna som ingår i Dreamweaver CC har redan flytstilar som du kan använda för att justera element till höger och vänster. Dessa klassstilar heter .fltlft (för, du gissade rätt, flyta vänster) och .fltrt (för flytande höger).

För att skapa två klassstilar som du kan använda för att justera bilder och andra element till vänster och höger på en sida, följ dessa steg:

Klicka på plustecknet i panelen CSS Designer Selectors.

Beroende på vad som finns på sidan läggs ett nytt stilnamn eller ett tomt fält där du kan ange ett stilnamn till på väljarpanelen.

Dubbelklicka för att välja namnet som Dreamweaver lade till i panelen och ändra det till det namn du vill ha för din nya stil, eller klicka för att markera det tomma fältet och ange ett namn.

Om inget namn läggs till anger du det namn du önskar i det tomma fältet. Du kan namnge stilen vad du vill, men se till att ange en punkt före namnet om du skapar en klassstil eller ett #-tecken för en ID-stil.

Dubbelklicka på det nya namnet och redigera det efter önskemål.

Även om du kan namnge dessa stilar vad du än föredrar, namnges alignmentstilar vanligtvis med de förkortade fltrt och fltlft, som står för float right respektive float left.

Om du till exempel skapar en stil för att justera element till vänster, skulle du döpa den till .fltlft.

I egenskapspanelen klickar du på ikonen som anger Flytande till vänster.

Använd marginalinställningarna på panelen Egenskaper för att skapa en marginal runt det flytande elementet.

Det är bra att lägga till marginalutrymme på den motsatta sidan av flytinställningen. Om du skapar en stil för att flyta en bild till vänster, lägg till 5 eller 10 pixlar utrymme i fältet Högermarginal. När du justerar en bild till vänster på sidan skapas en marginal mellan bilden och alla andra element som lindas bredvid bilden.

Välj bilden eller annat element som du vill justera på sidan.

Välj namnet på stilen du skapade från rullgardinsmenyn Klass i egenskapsinspektören.

Stilreglerna du definierade när du skapade stilen tillämpas automatiskt. Om du hade valt en bild på en textsida skulle bilden flyttas till vänster sida av sidan och texten skulle lindas runt den med en marginal mellan bild och text.

Upprepa steg 1–7, en gång med float inställt på Höger och 5 till 10 pixlar marginalutrymme i fältet Vänstermarginal i kategorin Box, och igen med Float inställt på Vänster och 5 till 10 pixlar marginalutrymme i höger marginalfältet i kategorin Box.