Hur man använder layoutalternativ i Dreamweavers CSS Property Panel - dummies

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

Du kan använda alternativen Layout på CSS-objektpanelen för att ställa in dessa värden:

• Bredd: Ange en bredd för ett element som kan ha dess angivna dimensioner, t.ex. en tagg. Storleksalternativ är pixel (px), punkt (pt), pica (pc), procent (%), em, rem, ex och ch.

• Höjd: Ange en höjd för något element som kan ha sina dimensioner angivna.

  • Min och Max Bredd: Ange minsta och maximala bredd för taggar och andra blockelement. Dessa alternativ är användbara när du anger bredden i procent av webbläsarfönstret. Du kan till exempel ställa in designbredden vid 80 procent av webbläsarfönstret och ställa in en maxbredd på 1000 px för att förhindra att din layout sträcker sig bredare än 1000 pixlar.

  • Min och Max Höjd: Ange minsta och maximala höjder för taggar och andra blockelement.

  • Marginal: Ange 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, som mellan en bild och text eller mellan två taggar. Du kan ställa in marginalen separat för topp, höger, botten och vänster. Padding mäts i pixlar, punkter, inches, centimeter, millimeter, picas, ems, exs och procentandelar.

  • Padding: Ställer in mängden utrymme inom ett elements gränser. Du kan till exempel använda padding för att skapa utrymme mellan gränserna för en tagg och dess innehåll. Du kan ställa in vadderingen separat för topp, höger, botten och vänster. Padding mäts i pixlar, punkter, inches, centimeter, millimeter, picas, ems, exs och procentandelar.

    Det kan vara svårt att ställa in vadderings- och marginalavstånd. När du lägger till margin och vaddering på ett element, till exempel en bild eller tagg, ökar du den totala storleken på det elementet och hur mycket utrymme det behöver i layouten.

• Position: Alternativet Position, som finns tillgängligt under nedre delen av Layout-sektionen på Egenskaper-panelen, ändrar hur elementen är placerade på en sida. Positionering kan dramatiskt ändra hur blockelement (t.ex. tabell, lista, rubrik, punkt och taggar) visas i en webbläsare.

  • Inherit: Du behöver inte ange det här standardalternativet. Om inget annat alternativ är valt, arv varje element placeringen av dess moderelement.

  • Statisk: Placera innehållet på platsen i dokumentets flöde. 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 i webbläsarfönstret eller det övre vänstra hörnet av ett element som innehåller elementet.

  • Fast: Placera ett element i förhållande till webbläsarens övre vänstra hörn. Innehållet i ett element med fast positionering förblir konstant även om användaren rullar ner eller över sidan.

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

    

  • Float: Rikta in element, till exempel bilder och taggar, till vänster eller höger om en sida eller annan behållare som orsakar att text eller andra element sätter sig runt det. Klicka på ikonerna i Float-fältet för att ange följande fyra alternativ: Inherit, Right, Left, eller None.

  • Clear: 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 flytat element, till exempel en -tagg som används för att skapa en sidovägg, överlappar ett annat blocknivåelement, till exempel en tagg som används för att skapa sidfotens sidfot.

  • Överflöde-x och -y: Berätta för webbläsaren hur innehållet i ett element ska visas om behållaren, t.ex. en etikett, inte kan passa elementets hela höjd eller bredd. Överflödesalternativ är

  • Synlig: Håll innehåll, till exempel en bild eller text, synlig, även om den expanderar utöver den definierade höjden eller bredden på en behållare.

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

  • Scroll: Lägg till rullfält i behållaren oavsett om innehållet överstiger elementets storlek.

  • Auto: Gör att rullningsfältet bara visas när innehållet i en behållare överstiger dess gränser.

• Display: Ange om, eller hur, att göra ett element i en webbläsare. Du ändrar exempelvis placeringen av en obestämd lista från horisontal 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 Display-alternativet med ett skriptspråk för att ändra visning av element dynamiskt.

• Synlighet: Kontrollera om webbläsaren visar ett element. Siktningsalternativen är

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

  • Synlig: Elementet visas.

  • Dold: Elementet visas inte.

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

• Z-Index: Kontrollera positionen för ett element på Z-koordinaten, som kontrollerar stackordning av element i förhållande till varandra.Högre nummererade element överlappar lägre nummererade element.

• Opacitet: Kontrollera opacitetsnivån för ett element från 0. 0 (helt transparent) till 1. 0 (helt ogenomskinligt). Till exempel, om du anger. 5 i ogenomskinningsfältet, sänks opaciteten hos ett element till 50 procent.