Jak používat možnosti rozvržení v panelu vlastností CSS aplikace Dreamweaver

V horní části panelu Vlastnosti CSS Designeru najdete vlastnosti CSS běžně používané k vytváření rozvržení stránky. Tyto volby se používají k určení výšky, šířky, zarovnání, umístění a rozestupu. Tato nastavení jsou ideální pro vytváření rozvržení stránky se styly tříd a ID, abyste mohli dělat věci, jako je zarovnání obrázků a umístění

tagy pro vytvoření vícesloupcových rozvržení.

Pomocí voleb rozvržení na panelu Vlastnosti CSS můžete nastavit tyto hodnoty:

• Šířka: Zadejte šířku pro jakýkoli prvek, který může mít určené rozměry, například a

  štítek. Možnosti velikosti jsou pixel (px), bod (pt), pica (pc), procenta (%), em, rem, ex a ch.

• Výška: Zadejte výšku jakéhokoli prvku, který může mít určené rozměry.

  • Min a Max Width: Určete minimální a maximální šířku pro

    tagy a další prvky bloku. Tyto možnosti jsou užitečné, když zadáte šířku jako procento okna prohlížeče. Můžete například nastavit šířku návrhu na 80 procent okna prohlížeče a poté nastavit maximální šířku na 1000 px, abyste zabránili roztažení rozvržení na více než 1000 pixelů.

  • Minimální a maximální výška: Zadejte minimální a maximální výšku pro

    tagy a další prvky bloku.

  • Okraj: Nastavte velikost prostoru kolem prvku. Okraje lze použít k vytvoření prostoru mezi okrajem prvku a dalšími prvky na stránce, například mezi obrázkem a textem nebo mezi dvěma

    značky. Okraj můžete nastavit samostatně pro horní, pravý, spodní a levý okraj. Výplň se měří v pixelech, bodech, palcích, centimetrech, milimetrech, picas, ems, exs a procentech.

  • Padding: Nastavuje velikost prostoru v hranicích prvku. Můžete například použít výplň k vytvoření prostoru mezi okraji a

    tag a jeho obsah. Výplň můžete nastavit samostatně pro horní, pravou, spodní a levou stranu. Výplň se měří v pixelech, bodech, palcích, centimetrech, milimetrech, picas, ems, exs a procentech.

    Nastavení odsazení a rozestupu okrajů může být složité. Když přidáte okraj a výplň k prvku, jako je obrázek nebo

    tag, zvětšíte celkovou velikost tohoto prvku a množství prostoru, který vyžaduje v rozvržení.

• Pozice: Možnost Umístění, která je dostupná ve spodní části části Rozvržení panelu Vlastnosti, mění způsob umístění prvků na stránce. Umístění může dramaticky změnit způsob, jakým prvky na úrovni bloku (jako je tabulka, seznam, záhlaví, odstavec a

  tagy) se zobrazí v prohlížeči.

  • Převzít: Tuto výchozí volbu nemusíte zadávat. Pokud není vybrána jiná možnost, každý prvek zdědí umístění svého nadřazeného prvku.

  • Statické: Umístěte obsah na jeho místo v rámci toku dokumentu. Ve výchozím nastavení jsou všechny prvky HTML, které lze umístit, statické.

  • Absolutní: Pomocí horní a levé souřadnice můžete ovládat polohu prvku vzhledem k levému hornímu rohu okna prohlížeče nebo k levému hornímu rohu prvku, který prvek obsahuje.

  • Opraveno: Umístěte prvek relativně k levému hornímu rohu prohlížeče. Obsah prvku využívajícího pevné umístění zůstává konstantní, i když uživatel posouvá stránku dolů nebo přes ni.

  • Relativní: Použijte polohu vzhledem k bodu, do kterého vkládáte prvek do stránky, nebo vzhledem k jeho kontejneru.

    

  • Plovoucí: Zarovnání prvků, jako jsou obrázky a

    tagy nalevo nebo napravo od stránky nebo jiného kontejneru, což způsobí, že se kolem ní obtéká text nebo jiné prvky. Klepnutím na ikony v poli Plovoucí zadejte následující čtyři možnosti: Zdědit, Vpravo, Vlevo nebo Žádné.

  • Clear: Zabrání plovoucímu obsahu v překrývání oblasti doleva nebo doprava nebo na obě strany prvku. Tato možnost je užitečná, když plovoucí prvek, jako je a

    tag používaný k vytvoření postranního panelu, překrývá jiný prvek na úrovni bloku, jako je tag používaný k vytvoření zápatí stránky.

  • Overflow-x a -y: Řekněte prohlížeči, jak má zobrazit obsah prvku, pokud kontejner, jako je a

    tag, se nevejde na celou výšku nebo šířku prvku. Možnosti přetečení jsou

  • Viditelný: Udržuje obsah, jako je obrázek nebo text, viditelný, i když přesahuje definovanou výšku nebo šířku kontejneru.

  • Skrytý: Odřízněte obsah, pokud přesahuje velikost nádoby. Tato možnost neposkytuje posuvníky.

  • Posouvání: Přidejte do kontejneru posuvníky bez ohledu na to, zda jeho obsah přesahuje velikost prvku.

  • Automaticky: Posuvníky se zobrazí pouze tehdy, když obsah kontejneru přesahuje jeho hranice.

• Display: Označuje, zda nebo jak se má vykreslit prvek v prohlížeči. Můžete například změnit umístění neuspořádaného seznamu z horizontálního na vertikální výběrem Inline nebo skrýt prvek a učinit jej neviditelným výběrem None. Chcete-li dynamicky změnit zobrazení prvků, můžete použít volbu Zobrazit se skriptovacím jazykem.

• Viditelnost: Určuje, zda prohlížeč zobrazí prvek. Možnosti viditelnosti jsou

  • Převzít: Prvek má viditelnost prvku, ve kterém je obsažen (výchozí).

  • Viditelné: Prvek je zobrazen.

  • Skrytý: Prvek se nezobrazuje.

  • Sbalit: Pro použití s ​​tabulkami HTML. Sbalení lze použít k odstranění sloupce nebo řádku bez ovlivnění zbytku rozložení tabulky.

• Z-Index: Řídí pozici prvku na Z-souřadnici, která řídí pořadí překrývání prvků ve vztahu k sobě navzájem. Prvky s vyšším číslem se překrývají s prvky s nižším číslem.

• Neprůhlednost: Ovládejte úroveň krytí pro prvek od 0,0 (plně průhledný) do 1,0 (plně neprůhledný). Pokud například zadáte do pole krytí 0,5, krytí prvku se sníží na 50 procent.