Sådan bruger du layoutindstillinger i Dreamweavers CSS-egenskabspanel

Øverst i panelet CSS Designer Properties finder du de CSS-egenskaber, der almindeligvis bruges til at oprette sidelayouts. Du bruger disse muligheder til at angive højde, bredde, justering, positionering og afstand. Disse indstillinger er ideelle til at oprette sidelayouts med klasse- og id-stile til at gøre ting såsom at justere billeder og positionere

tags for at oprette flerkolonnelayouts.

Du kan bruge Layoutindstillingerne i CSS-egenskabspanelet til at indstille disse værdier:

• Bredde: Angiv en bredde for ethvert element, der kan have sine dimensioner specificeret, såsom en

  tag. Størrelsesmuligheder er pixel (px), punkt (pt), pica (pc), procent (%), em, rem, ex og ch.

• Højde: Angiv en højde for ethvert element, der kan have dets dimensioner specificeret.

  • Min og maks. bredde: Angiv minimum og maksimum bredder for

    tags og andre blokelementer. Disse muligheder er nyttige, når du angiver bredden som en procentdel af browservinduet. For eksempel kan du indstille designbredden til 80 procent af browservinduet og derefter indstille en Max Width på 1000 px for at forhindre dit layout i at blive strakt bredere end 1000 pixels.

  • Min og maks. højde: Angiv minimum- og maksimumhøjder for

    tags og andre blokelementer.

  • Margin: Indstil mængden af ​​plads omkring et element. Marginer kan bruges til at skabe mellemrum mellem kanten af ​​et element og andre elementer på siden, såsom mellem et billede og tekst eller mellem to

    tags. Du kan indstille margenen separat for top, højre, bund og venstre. Polstring måles i pixels, punkter, tommer, centimeter, millimeter, picas, ems, exs og procenter.

  • Polstring: Indstiller mængden af ​​plads inden for grænserne af et element. For eksempel kan du bruge polstring til at skabe mellemrum mellem kanterne på en

    tag og dets indhold. Du kan indstille polstring separat for top, højre, bund og venstre. Polstring måles i pixels, punkter, tommer, centimeter, millimeter, picas, ems, exs og procenter.

    Indstilling af polstring og margenafstand kan være vanskelig. Når du tilføjer margen og polstring til et element, såsom et billede eller

    tag, øger du den overordnede størrelse af det pågældende element og mængden af ​​plads, det kræver i layoutet.

• Position: Indstillingen Position, tilgængelig fra den nederste del af layoutsektionen i panelet Egenskaber, ændrer den måde, elementer er placeret på en side. Positionering kan dramatisk ændre den måde, elementer på blokniveau (såsom tabel, liste, overskrift, afsnit og

  tags) vises i en browser.

  • Arv: Du behøver ikke at angive denne standardindstilling. Medmindre en anden mulighed er valgt, arver hvert element placeringen af ​​dets overordnede element.

  • Statisk: Placer indholdet på dets placering i dokumentets flow. Som standard er alle HTML-elementer, der kan placeres, statiske.

  • Absolut: Brug de øverste og venstre koordinater til at kontrollere placeringen af ​​et element i forhold til det øverste venstre hjørne af browservinduet eller det øverste venstre hjørne af et element, der indeholder elementet.

  • Rettet: Placer et element i forhold til det øverste venstre hjørne af browseren. Indholdet af et element, der bruger fast positionering, forbliver konstant, selvom brugeren ruller ned eller hen over siden.

  • Relativ: Brug en position i forhold til det punkt, hvor du indsætter elementet på siden eller i forhold til dets beholder.

    

  • Float: Juster elementer, såsom billeder og

    tags til venstre eller højre for en side eller anden beholder, der får tekst eller andre elementer til at ombryde den. Klik på ikonerne i feltet Float for at angive følgende fire muligheder: Nedarv, Højre, Venstre eller Ingen.

  • Ryd: Undgå, at flydende indhold overlapper et område til venstre eller højre eller til begge sider af et element. Denne mulighed er nyttig, når et flydende element, såsom en

    tag, der bruges til at oprette en sidebjælke, overlapper et andet element på blokniveau, såsom et tag, der bruges til at oprette sidefoden på en side.

  • Overflow-x og -y: Fortæl browseren, hvordan indholdet af et element skal vises, hvis beholderen, som f.eks.

    tag, kan ikke passe til hele elementets højde eller bredde. Overløbsmuligheder er

  • Synlig: Hold indhold, såsom et billede eller tekst, synligt, selvom det udvider sig ud over den definerede højde eller bredde af en beholder.

  • Skjult: Skær indholdet af, hvis det overstiger beholderens størrelse. Denne mulighed giver ikke rullepaneler.

  • Rul: Føj rullepaneler til beholderen, uanset om indholdet overstiger elementets størrelse.

  • Auto: Få kun rullebjælker til at vises, når indholdet af en beholder overskrider dens grænser.

• Display: Angiv, om eller hvordan et element skal gengives i en browser. For eksempel ændrer du placeringen af ​​en uordnet liste fra vandret til lodret ved at vælge Inline eller skjule et element, hvilket gør det usynligt, ved at vælge Ingen. Du kan bruge indstillingen Vis med et scriptsprog til at ændre visningen af ​​elementer dynamisk.

• Synlighed: Kontroller, om browseren viser et element eller ej. Synlighedsmulighederne er

  • Arv: Elementet har synligheden af ​​det element, det er indeholdt i (standard).

  • Synlig: Elementet vises.

  • Skjult: Elementet vises ikke.

  • Skjul: Til brug med HTML-tabeller. Skjul kan bruges til at fjerne en kolonne eller række uden at påvirke resten af ​​tabellayoutet.

• Z-indeks: Styr positionen af ​​et element på Z-koordinaten, som styrer stablingsrækkefølgen af ​​elementer i forhold til hinanden. Højere nummererede elementer overlapper lavere nummererede elementer.

• Opacitet: Styr opacitetsniveauet for et element fra 0,0 (fuldt gennemsigtigt) til 1,0 (fuldt uigennemsigtigt). Hvis du for eksempel indtaster .5 i opacitetsfeltet, vil opaciteten af ​​et element blive reduceret til 50 procent.