Hvordan man bruger layoutmuligheder i Dreamweaver's CSS Property Panel - dummies

Øverst på panelet CSS Designer Properties finder du CSS-egenskaberne almindeligt bruges til at oprette sidelayouter. Du bruger disse indstillinger til at angive højde, bredde, justering, positionering og mellemrum. Disse indstillinger er ideelle til at oprette sidelayouter med klasse- og ID-stilarter til at gøre ting som f.eks. Justere billeder og positionsmærker for at oprette flerfarvede layouts.

Du kan bruge indstillingerne Layout i CSS-ejendomspanelet til at indstille disse værdier:

• Bredde: Angiv en bredde for ethvert element, der kan have sine dimensioner angivet, f.eks. Et 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 sine dimensioner angivet.

  • Min og Max Bredde: Angiv mindste og maksimale bredder for tags og andre blokelementer. Disse indstillinger er nyttige, når du angiver bredden som en procentdel af browservinduet. Du kan f.eks. Indstille designbredden til 80 procent af browservinduet og derefter indstille en maksimal bredde på 1000 px for at forhindre, at dit layout bliver strakt bredere end 1000 pixels.

  • Min og Max højde: Angiv mindste og maksimale højder for tags og andre blokelementer.

  • Margen: Indstil mængden af ​​plads omkring et element. Margener kan bruges til at skabe mellemrum mellem elementets kant og andre elementer på siden, f.eks. Mellem et billede og en tekst eller mellem to tags. Du kan indstille margen separat for øverste, højre, nederste og venstre. Padding måles i pixels, point, inches, centimeter, millimeter, picas, ems, exs og percentages.

  • Polstring: Indstiller mængden af ​​plads inden for et elements grænser. Du kan f.eks. Bruge polstring til at skabe mellemrum mellem et mærkes grænser og dets indhold. Du kan indstille polstring separat for toppen, højre, bund og venstre. Padding måles i pixels, point, inches, centimeter, millimeter, picas, ems, exs og percentages.

    Indstilling af polstring og margenafstand kan være vanskelig. Når du tilføjer margen og polstring til et element, f.eks. Et billede eller et tag, øger du den samlede størrelse af det element og den mængde plads, det kræver i layoutet.

• Position: Funktionen Position, der er tilgængelig fra nederste del af Layout-sektionen på panelet Egenskaber, ændrer måden, som elementer er placeret på en side. Placering kan dramatisk ændre måden på blokniveauelementer (såsom tabel, liste, overskrift, afsnit og tags) vises i en browser.

  • Arve: 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 inden for dokumentets strømning. Som standard er alle HTML-elementer, som kan placeres, statiske.

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

  • Fast: Anbring et element i forhold til det øverste venstre hjørne af browseren. Indholdet af et element ved hjælp af fast positionering forbliver konstant, selvom brugeren ruller ned eller på tværs af siden.

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

    

  • Float: Juster elementer, såsom billeder og tags, til venstre eller højre for en side eller en anden beholder, der forårsager, at tekst eller andre elementer omgiver det. Klik på ikonerne i Float-feltet for at angive følgende fire muligheder: Arve, Højre, Venstre eller Ingen.

  • Clear: Forhindre flydende indhold fra at overlappe et område til venstre eller højre eller til begge sider af et element. Denne valgmulighed er nyttig, når et floated-element, såsom et -mærke, der bruges til at oprette et sidebjæl, overlapper et andet blokniveauelement, f.eks. Et mærke, der bruges til at oprette sidebetegn på en side.

  • Overflow-x og -y: Fortæl browseren, hvordan indholdet af et element skal vises, hvis beholderen, f.eks. Et mærke, ikke kan passe til elementets hele højde eller bredde. Overstrømningsmuligheder er

  • Synlig: Hold indhold, f.eks. Et billede eller en tekst, synlig, selvom den udvides ud over den definerede højde eller bredde af en beholder.

  • Skjult: Afbryd indholdet, hvis det overstiger beholderens størrelse. Denne indstilling giver ikke rullefelter.

  • Scroll: Tilføj rullestænger til beholderen, uanset om indholdet overstiger elementets størrelse.

  • Auto: Foretag rullefelter kun, når indholdet af en beholder overstiger grænserne.

• Skærm: Angiv om, eller hvordan, at gøre et element 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 Display-indstillingen med et script sprog til at ændre visningen af ​​elementer dynamisk.

• Synlighed: Kontroller, om browseren viser et element eller ej. Indstillingerne for synlighed er

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

  • Synlig: Elementet vises.

  • Skjult: Elementet vises ikke.

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

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

• Opacitet: Kontroller opacitetsniveauet for et element fra 0. 0 (helt transparent) til 1. 0 (helt uigennemsigtig). For eksempel, hvis du indtaster. 5 i opacitetsfeltet reduceres opaciteten af ​​et element til 50 procent.