Hoe elementen uit te lijnen met vlotters in Dreamweaver - dummies

Designers plaatsen een afbeelding, een tag of een ander element vaak links of rechts van een webpagina in Dreamweaver en wikkelen vervolgens alle tekst of andere inhoud rond dat element. De afbeelding wordt rechts van de kolom uitgelijnd zodat de tekst ernaast aan de linkerkant wordt ingepakt. In de volgende stappen leer je hoe je stijlen zoals deze kunt maken.

tegoed: afbeelding van istockphoto. com

CSS biedt veel voordelen als het gaat om het uitlijnen van elementen zoals deze, maar de manier waarop je deze stijlen instelt, is niet zo duidelijk als je eerst zou verwachten omdat je de zweefoptie gebruikt.

Nadat u begrijpt dat u elementen, zoals afbeeldingen, aan de linker- of rechterkant van een pagina kunt laten zweven, is het vrij eenvoudig om stijlen te maken die dit doel bereiken. In deze oefening leert u twee stijlen te maken die ideaal zijn voor het uitlijnen van afbeeldingen links en rechts van een pagina, compleet met een kleine marge precies daar waar u het nodig hebt.

De CSS-lay-outs in Dreamweaver CC hebben al zwevende stijlen die u kunt gebruiken om elementen rechts en links uit te lijnen. Deze klassenstijlen worden genoemd. fltlft (want, je raadt het al, zweeft naar links) en. fltrt (voor zweven rechts).

Ga als volgt te werk om twee klassestijlen te maken die u kunt gebruiken om afbeeldingen en andere elementen links en rechts van een pagina uit te lijnen:

1. Klik op het plusteken in het paneel CSS Designer Selectors.

   Afhankelijk van wat er op de pagina staat, wordt een nieuwe stijlnaam of een leeg veld waarin u een stijlnaam kunt invoeren toegevoegd aan het paneel Selectors.

2. Dubbelklik om de naam te selecteren die Dreamweaver aan het paneel heeft toegevoegd en verander deze in de gewenste naam voor uw nieuwe stijl, of klik om het lege veld te selecteren en voer een naam in.

   Als er geen naam is toegevoegd, voert u de gewenste naam in het lege veld in. U kunt de stijl een naam geven die u wilt, maar zorg ervoor dat u een punt vóór de naam invoert als u een klassestijl of een # -teken voor een ID-stijl maakt.

3. Dubbelklik op de nieuwe naam en bewerk deze naar wens.

   Hoewel u deze stijlen kunt benoemen zoals u dat wilt, worden uitlijningsstijlen meestal aangeduid met de afgekorte flt en fltlft, die respectievelijk voor zweef rechts en zwevend links staan.

   Als u bijvoorbeeld een stijl maakt om elementen links uit te lijnen, geeft u deze een naam. fltlft.

4. Klik in het venster Eigenschappen op het pictogram Float instellen op Links.

   

5. Gebruik de Marge-instellingen in het paneel Properties om een ​​marge rond het zwevende element te maken.

   Het is een goede gewoonte om extra ruimte aan de andere kant toe te voegen aan de zwevende instelling. Als u een stijl maakt om een ​​afbeelding naar links te zweven, voegt u 5 of 10 pixels ruimte toe aan het veld Rechte marge.Wanneer u een afbeelding aan de linkerkant van de pagina uitlijnt, wordt er een marge gemaakt tussen de afbeelding en een ander element dat zich naast de afbeelding bevindt.

6. Selecteer de afbeelding of ander element dat u op de pagina wilt uitlijnen.

7. Selecteer de naam van de stijl die u in de vervolgkeuzelijst Class hebt gemaakt in de eigenschappencontrole.

   De stijlregels die u hebt gedefinieerd toen u de stijl maakte, worden automatisch toegepast. Als u een afbeelding in een pagina met tekst had geselecteerd, zou de afbeelding naar de linkerkant van de pagina gaan en de tekst er om heen wikkelen met een marge tussen de afbeelding en de tekst.

8. Herhaal de stappen 1-7, een keer met de vlotter rechts en 5 tot 10 pixels marge in het veld Linkermarge in de categorie Box en nogmaals met de Float ingesteld op Links en 5 tot 10 pixels margeruimte in het veld Rechter marge in de categorie Box.