Slik bruker du Layout-alternativer i Dreamweavers CSS Property Panel - dummies

På toppen av CSS Designer Properties-panelet finner du CSS-egenskapene ofte brukes til å lage sideoppsett. Du bruker disse alternativene til å angi høyde, bredde, justering, posisjonering og mellomrom. Disse innstillingene er ideelle for å lage sidelayouter med klasse- og ID-stiler for å gjøre ting som for eksempel justere bilder og plasseringskoder for å lage multikolonneoppsett.

Du kan bruke Layout-alternativene i CSS-eiendomspanelet til å angi disse verdiene:

• Bredde: Angi en bredde for et element som kan ha sine dimensjoner angitt, for eksempel en tagg. Størrelsesalternativer er piksel (px), punkt (pt), pica (pc), prosent (%), em, rem, ex og ch.

• Høyde: Angi en høyde for ethvert element som kan ha sine dimensjoner angitt.

  • Min og Maks Bredde: Angi minste og maksimale bredder for koder og andre blokkelementer. Disse alternativene er nyttige når du angir bredden som en prosentandel av nettleservinduet. Du kan for eksempel angi designbredden ved 80 prosent av nettleservinduet, og deretter angi en maksimal bredde på 1000 px for å hindre at layoutet strekker seg bredere enn 1000 piksler.

  • Min og Maks høyde: Angi minimum og maksimum høyder for koder og andre blokkelementer.

  • Margin: Angi mengden plass rundt et element. Marginer kan brukes til å skape mellomrom mellom kanten av et element og andre elementer på siden, for eksempel mellom et bilde og en tekst eller mellom to koder. Du kan angi marginen separat for topp, høyre, bunn og venstre. Padding er målt i piksler, poeng, tommer, centimeter, millimeter, picas, ems, exs og prosentandeler.

  • Padding: Angir mengden plass innenfor grensen til et element. For eksempel kan du bruke polstring for å skape mellomrom mellom kantene på en tag og innholdet. Du kan sette polstring separat for topp, høyre, bunn og venstre. Padding er målt i piksler, poeng, tommer, centimeter, millimeter, picas, ems, exs og prosentandeler.

    Angi polstring og marginavstand kan være vanskelig. Når du legger til margin og polstring på et element, for eksempel et bilde eller en tag, øker du den totale størrelsen på elementet og mengden plass det krever i oppsettet.

• Posisjon: Alternativet Posisjon, tilgjengelig fra nederste del av Layout-delen av Egenskaper-panelet, endrer måten elementene er plassert på på en side. Posisjonering kan dramatisk endre måten blokkelementer (som tabell, liste, overskrift, avsnitt og koder) vises i en nettleser.

  • Erver: Du trenger ikke å angi dette standardalternativet. Med mindre annet valg er valgt, arver hvert element plasseringen av dets overordnede element.

  • Statisk: Plasser innholdet på stedet i dokumentets strømning. Som standard er alle HTML-elementer som kan plasseres, statiske.

  • Absolutt: Bruk topp- og venstrekoordinatene til å kontrollere posisjonen til et element i forhold til øvre venstre hjørne i nettleservinduet eller øverste venstre hjørne av et element som inneholder elementet.

  • Fast: Plasser et element i forhold til det øverste venstre hjørnet av nettleseren. Innholdet av et element ved hjelp av fast posisjonering forblir konstant selv om brukeren ruller ned eller over hele siden.

  • Relativ: Bruk en posisjon i forhold til punktet der du setter elementet inn i siden eller i forhold til beholderen.

    

  • Float: Juster elementer, for eksempel bilder og koder, til venstre eller høyre for en side eller en annen beholder som forårsaker at tekst eller andre elementer skal vikle rundt den. Klikk på ikonene i Float-feltet for å angi følgende fire alternativer: Arve, Høyre, Venstre eller Ingen.

  • Clear: Forhindre at flytende innhold overlapper et område til venstre eller høyre eller til begge sider av et element. Dette alternativet er nyttig når et flytende element, for eksempel en -kode som brukes til å opprette et sidebar, overlapper et annet blokknivåelement, for eksempel en etikett som brukes til å lage sidene til en side.

  • Overflow-x og -y: Fortell nettleseren hvordan du viser innholdet i et element hvis beholderen, for eksempel en etikett, ikke kan passe hele elementets hele høyde eller bredde. Overflowalternativer er

  • Synlig: Hold innhold, for eksempel et bilde eller en tekst, synlig, selv om den ekspanderer utover den definerte høyden eller bredden av en beholder.

  • Skjult: Klipp ut innholdet hvis det overskrider beholderens størrelse. Dette alternativet gir ikke rullestolper.

  • Bla: Legg til rullestenger i containeren, uansett om innholdet overstiger elementets størrelse.

  • Auto: Lag rullefelt vises bare når innholdet i en beholder overskrider grensene.

• Skjerm: Angi om, eller hvordan, å gjøre et element i en nettleser. For eksempel endrer du plasseringen av en uordnet liste fra horisontal til vertikal ved å velge Inline eller skjul et element, som gjør det usynlig, ved å velge Ingen. Du kan bruke skjermalternativet med et skriptspråk for å endre visning av elementer dynamisk.

• Synlighet: Kontroller om nettleseren viser et element eller ikke. Siktalternativene er

  • Arve: Elementet har synligheten til elementet der den er inneholdt (standard).

  • Synlig: Elementet vises.

  • Skjult: Elementet vises ikke.

  • Skjul: For bruk med HTML-tabeller. Skjul kan brukes til å fjerne en kolonne eller rad uten å påvirke resten av tabelloppsettet.

• Z-indeks: Kontroller posisjonen til et element på Z-koordinaten, som styrer stablingsordren til elementene i forhold til hverandre.Høyere nummererte elementer overlapper nedre nummererte elementer.

• Opacity: Kontroller opasitetsnivået for et element fra 0. 0 (helt gjennomsiktig) til 1. 0 (helt ugjennomsiktig). For eksempel, hvis du skriver inn. 5 i opacitetsfeltet, vil opaciteten til et element reduseres til 50 prosent.