Jak vycentrovat rozvržení stránky pomocí okrajů CSS v aplikaci Dreamweaver

Dreamweaver umožňuje vycentrovat rozvržení pomocí okrajů CSS. Mnoho návrhů webových stránek je na stránce vycentrováno, takže se zdá, že se vznášejí mezi stranami okna prohlížeče bez ohledu na to, jak široké nebo úzké je okno. To pomáhá vytvořit iluzi, že návrh vyplňuje stránku, i když je okno prohlížeče mnohem širší než návrh stránky.

Většina návrhů webových stránek vytvořených pomocí CSS dosahuje tohoto efektu vytvořením jednoho

tag, který obklopuje veškerý obsah stránky a poté na něj aplikuje styl

tag, který obsahuje pravidlo stylu, které to vycentruje

štítek. Jak zjistíte v následujících instrukcích krok za krokem, vytvoření stylu na střed a

tag není tak zřejmý, jak byste si představovali, ale jeho implementace je snadná.

Běžnou praxí je použití stylu ID pro

tag, který vycentruje váš návrh, a pojmenujte jej #wrapper nebo #container.

Pokud vaše stránka ještě není nastavena pomocí a

označujte veškerý obsah, zde je tip na přidání. Nejprve kliknutím a tažením vyberte veškerý text, obrázky a další obsah na stránce. Poté zvolte Vložit → Objekty rozvržení → Značka Div. V dialogovém okně Vložit značku Div se ujistěte, že je z rozevíracího seznamu Vložit vybrána možnost Obtékat výběr.

Ponechte zbývající pole prázdná a kliknutím na OK přidejte a

označte veškerý obsah vaší stránky a jste připraveni na následující kroky.

Chcete-li vycentrovat celý návrh stránky, ujistěte se, že a

tag obklopuje veškerý obsah stránky a postupujte takto:

Klikněte na znaménko plus na panelu Výběry CSS Designer.

V závislosti na tom, co je na stránce, se do panelu Selektory přidá nový název stylu nebo prázdné pole, do kterého můžete zadat název stylu.

Poklepáním vyberte název, který Dreamweaver přidal na panel, a změňte jej na název, který chcete pro svůj nový styl, nebo kliknutím vyberte prázdné pole a zadejte název.

Pokud není přidáno žádné jméno, zadejte požadované jméno do prázdného pole. Styl můžete pojmenovat libovolně, ale nezapomeňte před název zadat tečku, pokud vytváříte styl třídy, nebo znak # pro styl ID.

Na panelu Vlastnosti určete šířku, okraje a další nastavení formátování, které chcete definovat.

Šířka pro kontejner

tag je nastaven na 980 pixelů. Zde je trik na centrování a

takto: Nastavte levý a pravý okraj na Auto. Tímto způsobem prohlížeč automaticky přidá stejné množství místa na okraji na každou stranu

tag, který jej efektivně vycentruje na stránce.

Vyberte ID, které obklopuje veškerý obsah na stránce.

Abyste se ujistili, že jste vybrali správně

, kliknutím umístěte kurzor kamkoli do hlavní části stránky a poté klikněte na

tag uvedený úplně vlevo v Rychlém výběru tagu ve spodní části pracovní plochy.

s

vybranou značku, vyberte název stylu, který jste vytvořili, z rozevíracího seznamu ID v inspektoru Vlastnosti.

Pravidla stylu, která jste definovali při vytváření stylu, se automaticky použijí na

štítek. V tomto příkladu je výsledkem velikost

tag se změní na šířku 980 pixelů a

tag a veškerý jeho obsah je na stránce vycentrován.

Ne všechny funkce fungují, když je Dreamweaver nastaven na Živé zobrazení. Přestože Živé zobrazení je skvělý způsob, jak zobrazit náhled toho, jak budou návrhy vašich stránek vypadat ve většině moderních webových prohlížečů, použití funkce Živé zobrazení znemožňuje použití mnoha nástrojů pro úpravy Dreamweaveru. Pokud se například inspektor Vlastnosti zobrazí šedě, když jej chcete použít, ujistěte se, že není vybráno tlačítko Živě.