Ako používať možnosti rozloženia na paneli vlastností CSS aplikácie Dreamweaver

V hornej časti panela Vlastnosti CSS dizajnéra nájdete vlastnosti CSS bežne používané na vytváranie rozložení stránky. Tieto možnosti sa používajú na určenie výšky, šírky, zarovnania, umiestnenia a medzier. Tieto nastavenia sú ideálne na vytváranie rozložení stránky so štýlmi triedy a ID, aby ste mohli robiť veci, ako je zarovnanie obrázkov a umiestnenie

značky na vytvorenie viacstĺpcových rozložení.

Na nastavenie týchto hodnôt môžete použiť možnosti rozloženia na paneli vlastností CSS:

• Šírka: Zadajte šírku pre akýkoľvek prvok, ktorý môže mať špecifikované rozmery, ako napr

  tag. Možnosti veľkosti sú pixel (px), bod (pt), pica (pc), percento (%), em, rem, ex a ch.

• Výška: Zadajte výšku každého prvku, ktorý môže mať určené rozmery.

  • Min a Max Width: Zadajte minimálnu a maximálnu šírku pre

    tagy a iné prvky bloku. Tieto možnosti sú užitočné, keď zadáte šírku v percentách okna prehliadača. Môžete napríklad nastaviť šírku návrhu na 80 percent okna prehliadača a potom nastaviť maximálnu šírku na 1 000 pixelov, aby ste zabránili tomu, aby sa rozloženie roztiahlo na viac ako 1 000 pixelov.

  • Minimálna a maximálna výška: Zadajte minimálnu a maximálnu výšku pre

    tagy a iné prvky bloku.

  • Okraj: Nastavte množstvo priestoru okolo prvku. Okraje možno použiť na vytvorenie priestoru medzi okrajom prvku a inými prvkami na stránke, napríklad medzi obrázkom a textom alebo medzi dvoma

    značky. Okraj môžete nastaviť samostatne pre hornú, pravú, spodnú a ľavú stranu. Výplň sa meria v pixeloch, bodoch, palcoch, centimetroch, milimetroch, picas, ems, exs a percentách.

  • Padding: Nastavuje množstvo priestoru v rámci hraníc prvku. Môžete napríklad použiť výplň na vytvorenie priestoru medzi okrajmi a

    tag a jeho obsah. Výplň môžete nastaviť samostatne pre hornú, pravú, spodnú a ľavú stranu. Výplň sa meria v pixeloch, bodoch, palcoch, centimetroch, milimetroch, picas, ems, exs a percentách.

    Nastavenie výplne a medzier okrajov môže byť zložité. Keď pridáte okraj a výplň do prvku, ako je obrázok alebo

    tag, zväčšíte celkovú veľkosť tohto prvku a množstvo priestoru, ktorý si vyžaduje v rozložení.

• Pozícia: Voľba Pozícia dostupná v spodnej časti časti Rozloženie na paneli Vlastnosti mení spôsob umiestňovania prvkov na stránke. Umiestnenie môže dramaticky zmeniť spôsob, akým prvky na úrovni bloku (ako je tabuľka, zoznam, hlavička, odsek a

  značky) sa zobrazia v prehliadači.

  • Zdediť: Túto predvolenú možnosť nemusíte zadať. Pokiaľ nie je vybratá iná možnosť, každý prvok zdedí umiestnenie svojho nadradeného prvku.

  • Statické: Umiestnite obsah na svoje miesto v rámci toku dokumentu. V predvolenom nastavení sú všetky prvky HTML, ktoré je možné umiestniť, statické.

  • Absolútna: Použite hornú a ľavú súradnicu na ovládanie polohy prvku vzhľadom k ľavému hornému rohu okna prehliadača alebo k ľavému hornému rohu prvku, ktorý obsahuje prvok.

  • Opravené: Umiestnite prvok relatívne k ľavému hornému rohu prehliadača. Obsah prvku, ktorý používa pevné umiestnenie, zostáva konštantný, aj keď sa používateľ posúva nadol alebo naprieč stránkou.

  • Relatívne: Použite polohu relatívne k bodu, do ktorého vložíte prvok na stránku, alebo relatívne k jej kontajneru.

    

  • Float: Zarovnajte prvky, ako sú obrázky a

    tagy naľavo alebo napravo od stránky alebo iného kontajnera, čo spôsobí, že sa okolo nej zalomí text alebo iné prvky. Kliknutím na ikony v poli Float zadajte nasledujúce štyri možnosti: Zdediť, Vpravo, Vľavo alebo Žiadne.

  • Vymazať: Zabráňte tomu, aby plávajúci obsah prekrýval oblasť doľava alebo doprava alebo na obe strany prvku. Táto možnosť je užitočná, keď plávajúci prvok, ako napr

    značka použitá na vytvorenie bočného panela, prekrýva iný prvok na úrovni bloku, ako je značka použitá na vytvorenie päty stránky.

  • Overflow-x a -y: Povedzte prehliadaču, ako má zobraziť obsah prvku, ak kontajner, ako napríklad a

    tag sa nezmestí na celú výšku alebo šírku prvku. Možnosti pretečenia sú

  • Viditeľné: Obsah, ako je obrázok alebo text, zostane viditeľný, aj keď sa rozšíri nad definovanú výšku alebo šírku kontajnera.

  • Skryté: Odrežte obsah, ak presahuje veľkosť nádoby. Táto možnosť neposkytuje posuvníky.

  • Posúvanie: Pridajte posúvacie lišty do kontajnera bez ohľadu na to, či jeho obsah presahuje veľkosť prvku.

  • Automaticky: Posuvníky sa zobrazia iba vtedy, keď obsah kontajnera presiahne jeho hranice.

• Displej: Označte, či alebo ako sa má vykresliť prvok v prehliadači. Napríklad zmeníte umiestnenie neusporiadaného zoznamu z horizontálneho na vertikálne výberom Inline alebo skryjete prvok a urobíte ho neviditeľným výberom None. Na dynamickú zmenu zobrazenia prvkov môžete použiť možnosť Display so skriptovacím jazykom.

• Viditeľnosť: Ovládajte, či prehliadač zobrazí prvok. Možnosti viditeľnosti sú

  • Zdediť: Prvok má viditeľnosť prvku, v ktorom je obsiahnutý (predvolené nastavenie).

  • Viditeľné: Prvok je zobrazený.

  • Skryté: Prvok sa nezobrazuje.

  • Zbaliť: Na použitie s tabuľkami HTML. Zbaliť možno použiť na odstránenie stĺpca alebo riadka bez ovplyvnenia zvyšku rozloženia tabuľky.

• Z-Index: Ovláda polohu prvku na súradnici Z, ktorá riadi poradie usporiadania prvkov vo vzťahu k sebe navzájom. Prvky s vyšším číslom sa prekrývajú s prvkami s nižším číslom.

• Nepriehľadnosť: Ovládajte úroveň nepriehľadnosti prvku od 0,0 (úplne priehľadné) do 1,0 (úplne nepriehľadné). Napríklad, ak do poľa nepriehľadnosti zadáte 0,5, nepriehľadnosť prvku sa zníži na 50 percent.