Hur man anpassar element med Floats i Dreamweaver

Konstruktörer justerar ofta en bild, en tagg eller ett annat element till vänster eller höger om en webbsida i Dreamweaver och sedan lägga in text eller annat innehåll kring det här elementet. Bilden är inriktad till höger om kolumnen så att texten wraps bredvid den till vänster. I de steg som följer får du reda på hur du skapar stilar som den här.

kredit: Bild från istockphoto. com

CSS erbjuder många fördelar när det gäller att anpassa element som detta, men sättet du konfigurerar dessa stilar är inte så uppenbart som du kanske förväntar dig först eftersom du använder float-alternativet.

När du förstår att du kan flyta element, till exempel bilder, till vänster eller höger sida på en sida, är det ganska enkelt att skapa stilar som uppnår detta mål. I denna övning lär du dig att skapa två stilar som är idealiska för att anpassa bilder till vänster och höger om en sida, komplett med en liten marginal precis där du behöver den.

CSS-layouterna som ingår i Dreamweaver CC har redan float-stilar som du kan använda för att anpassa elementen till höger och vänster. Dessa klassstilar heter. fltlft (för gissade du det, flyta till vänster) och. fltrt (för float höger).

Gör så här för att skapa två klassstilar som du kan använda för att anpassa bilder och andra element till vänster och höger om en sida:

1. 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 panelen Selectors.

2. Dubbelklicka för att välja det namn Dreamweaver lägger till i panelen och ändra det till namnet 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 vill ha i det tomma fältet. Du kan namnge stilen du vill, men se till att du anger en period före namnet om du skapar en klassstil eller ett # tecken för en ID-stil.

3. Dubbelklicka på det nya namnet och redigera det som önskat.

   Även om du kan namnge dessa stilar oberoende av vad du föredrar, är anpassningsformat vanligen benämnda med förkortad fltrt och fltlft, som står för float höger och flyter till vänster respektive.

   Om du till exempel skapar en stil för att anpassa elementen till vänster, skulle du namnge den. fltlft.

4. I fönstret Egenskaper klickar du på ikonen som sätter Float till vänster.

   

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

   Det är bra att lägga marginaler till motsatt sida från floatinställningen. Om du skapar en stil för att flyta en bild till vänster lägger du till 5 eller 10 pixlar av mellanslag till fältet Högre marginal.När du justerar en bild till vänster på sidan skapas en marginal mellan bilden och något annat element som raderas bredvid bilden.

6. Välj bild eller annat element som du vill anpassa på sidan.

7. Välj namnet på den stil du skapade i rullgardinsmenyn i egenskapsinspektören.

   Stilen regler 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 på sidan och texten skulle vikas runt den med en marginal mellan bilden och texten.

8. Repetera steg 1-7, en gång med flottören inställd till Höger och 5 till 10 pixlar av marginalutrymme i fältet Vänster marginal i rutkategorin och igen med Float-inställningen till vänster och 5 till 10 pixlar av marginalutrymme i fältet Höger marginal i rutkatalogen.