Hur man använder layoutalternativ i Dreamweavers CSS-egenskapspanel

Överst på panelen CSS Designer Properties hittar du de CSS-egenskaper som vanligtvis används för att skapa sidlayouter. Du använder dessa alternativ för att ange höjd, bredd, justering, positionering och avstånd. Dessa inställningar är idealiska för att skapa sidlayouter med klass- och ID-stilar för att göra saker som att justera bilder och positionera

taggar för att skapa flerkolumnlayouter.

Du kan använda layoutalternativen i CSS-egenskapspanelen för att ställa in dessa värden:

• Bredd: Ange en bredd för alla element som kan ha sina dimensioner specificerade, till exempel en

  märka. Storleksalternativ är pixel (px), punkt (pt), pica (pc), procent (%), em, rem, ex och ch.

• Höjd: Ange en höjd för alla element som kan ha sina dimensioner specificerade.

  • Min och maxbredd: Ange minsta och maximala bredd för

    taggar och andra blockelement. Dessa alternativ är användbara när du anger bredden som en procentandel av webbläsarfönstret. Du kan till exempel ställa in designbredden på 80 procent av webbläsarfönstret och sedan ställa in en maxbredd på 1000 px för att förhindra att din layout blir bredare än 1000 pixlar.

  • Min och maxhöjd: Ange lägsta och högsta höjder för

    taggar och andra blockelement.

  • Marginal: Ställ in mängden utrymme runt ett element. Marginaler kan användas för att skapa utrymme mellan kanten på ett element och andra element på sidan, till exempel mellan en bild och text eller mellan två

    taggar. Du kan ställa in marginalen separat för toppen, höger, botten och vänster. Utfyllnad mäts i pixlar, punkter, tum, centimeter, millimeter, picas, ems, exs och procent.

  • Utfyllnad: Ställer in mängden utrymme inom gränserna för ett element. Till exempel kan du använda stoppning för att skapa utrymme mellan kanterna på en

    taggen och dess innehåll. Du kan ställa in stoppning separat för toppen, höger, botten och vänster. Utfyllnad mäts i pixlar, punkter, tum, centimeter, millimeter, picas, ems, exs och procent.

    Att ställa in stoppning och marginalavstånd kan vara svårt. När du lägger till marginal och utfyllnad till ett element, till exempel en bild eller

    taggen ökar du den övergripande storleken på det elementet och mängden utrymme som det kräver i layouten.

• Position: Alternativet Position, tillgängligt från den nedre delen av layoutsektionen på panelen Egenskaper, ändrar hur element placeras på en sida. Positionering kan dramatiskt förändra hur element på blocknivå (som tabell, lista, rubrik, stycke och

  taggar) visas i en webbläsare.

  • Ärv: Du behöver inte ange detta standardalternativ. Om inte ett annat alternativ väljs, ärver varje element placeringen av sitt överordnade element.

  • Statisk: Placera innehållet på dess plats inom dokumentflödet. Som standard är alla HTML-element som kan placeras statiska.

  • Absolut: Använd de övre och vänstra koordinaterna för att styra positionen för ett element i förhållande till det övre vänstra hörnet av webbläsarfönstret eller det övre vänstra hörnet av ett element som innehåller elementet.

  • Fixat: Placera ett element relativt det övre vänstra hörnet av webbläsaren. Innehållet i ett element som använder fast positionering förblir konstant även om användaren rullar nedåt eller över sidan.

  • Relativ: Använd en position i förhållande till den punkt där du infogar elementet på sidan eller i förhållande till dess behållare.

    

  • Flytande: Justera element, som bilder och

    taggar, till vänster eller höger om en sida eller annan behållare som gör att text eller andra element lindas runt den. Klicka på ikonerna i fältet Flytande för att ange följande fyra alternativ: Ärv, Höger, Vänster eller Ingen.

  • Rensa: Förhindra att flytande innehåll överlappar ett område till vänster eller höger, eller på båda sidor av ett element. Det här alternativet är användbart när ett flytande element, t.ex

    taggen som används för att skapa ett sidofält, överlappar ett annat element på blocknivå, till exempel en tagg som används för att skapa sidfoten på en sida.

  • Overflow-x och -y: Tala om för webbläsaren hur den ska visa innehållet i ett element om behållaren, t.ex.

    taggen, kan inte passa elementets hela höjd eller bredd. Överflödesalternativ är

  • Synligt: Se till att innehåll, till exempel en bild eller text, är synligt, även om det expanderar utanför den definierade höjden eller bredden på en behållare.

  • Dolt: Klipp av innehållet om det överstiger behållarens storlek. Det här alternativet tillhandahåller inte rullningslister.

  • Rulla: Lägg till rullningslister till behållaren oavsett om dess innehåll överstiger elementets storlek.

  • Auto: Gör att rullningslister endast visas när innehållet i en behållare överskrider dess gränser.

• Display: Ange om eller hur ett element ska renderas i en webbläsare. Du ändrar till exempel placeringen av en oordnad lista från horisontell till vertikal genom att välja Inline eller dölja ett element, vilket gör det osynligt, genom att välja Ingen. Du kan använda alternativet Visa med ett skriptspråk för att ändra visningen av element dynamiskt.

• Synlighet: Styr om webbläsaren visar ett element eller inte. Synlighetsalternativen är

  • Inherit: Elementet har synligheten för det element som det ingår i (standard).

  • Synlig: Elementet visas.

  • Dolt: Elementet visas inte.

  • Dölj: För användning med HTML-tabeller. Komprimera kan användas för att ta bort en kolumn eller rad utan att påverka resten av tabelllayouten.

• Z-index: Styr positionen för ett element på Z-koordinaten, som styr staplingsordningen för element i förhållande till varandra. Högre numrerade element överlappar lägre numrerade element.

• Opacitet: Styr opacitetsnivån för ett element från 0,0 (helt genomskinligt) till 1,0 (helt ogenomskinligt). Om du till exempel anger .5 i opacitetsfältet kommer opaciteten för ett element att minska till 50 procent.