Ako vycentrovať rozloženie stránky s okrajmi CSS v aplikácii Dreamweaver

Dreamweaver vám umožňuje vycentrovať rozloženie pomocou okrajov CSS. Mnohé návrhy webových stránok sú vycentrované na stránke, takže sa zdá, že sa vznášajú medzi stranami okna prehliadača bez ohľadu na to, ako široké alebo úzke je okno. To pomáha vytvárať ilúziu, že dizajn vypĺňa stránku, aj keď je okno prehliadača oveľa širšie ako dizajn stránky.

Väčšina návrhov webových stránok vytvorených pomocou CSS dosahuje tento efekt vytvorením jedného

tag, ktorý obklopuje celý obsah stránky a potom naň použije štýl

tag, ktorý obsahuje pravidlo štýlu, ktoré ho vycentruje

tag. Ako zistíte v nasledujúcich inštrukciách krok za krokom, vytvorenie štýlu na stred a

tag nie je taký zrejmý, ako by ste si predstavovali, ale jeho implementácia je jednoduchá.

Bežnou praxou je použitie štýlu ID pre

tag, ktorý vycentruje váš dizajn, a pomenujte ho #wrapper alebo #container.

Ak vaša stránka ešte nie je nastavená s a

označte celý svoj obsah, tu je tip na pridanie. Prvým kliknutím a ťahaním vyberte celý text, obrázky a ďalší obsah na stránke. Potom vyberte Vložiť → Objekty rozloženia → Značka Div. V dialógovom okne Vložiť značku Div skontrolujte, či je v rozbaľovacom zozname Vložiť vybratá možnosť Zalomiť výber.

Nechajte ostatné polia prázdne a kliknutím na OK pridajte a

označte celý obsah svojej stránky a ste pripravení na nasledujúce kroky.

Ak chcete vycentrovať celý dizajn strany, uistite sa, že a

tag obklopuje celý obsah stránky a postupujte takto:

Kliknite na znamienko plus na paneli Výbery návrhárov CSS.

V závislosti od toho, čo je na stránke, sa na panel Výbery pridá nový názov štýlu alebo prázdne pole, do ktorého môžete zadať názov štýlu.

Dvojitým kliknutím vyberte názov, ktorý Dreamweaver pridal na panel, a zmeňte ho na názov, ktorý chcete pre svoj nový štýl, alebo kliknutím vyberte prázdne pole a zadajte názov.

Ak nie je pridané žiadne meno, zadajte požadované meno do prázdneho poľa. Štýl si môžete pomenovať akokoľvek, ale nezabudnite pred názov zadať bodku, ak vytvárate štýl triedy, alebo znak # pre štýl ID.

Na paneli Vlastnosti zadajte šírku, okraje a akékoľvek ďalšie nastavenia formátovania, ktoré chcete definovať.

Šírka pre kontajner

tag je nastavený na 980 pixelov. Tu je trik na centrovanie a

takto: Nastavte ľavý a pravý okraj na Auto. Týmto spôsobom prehliadač automaticky pridá rovnaké množstvo miesta na okraji na každú stranu

tag, ktorý ho efektívne vycentruje na stránke.

Vyberte ID, ktoré obklopuje celý obsah na stránke.

Aby ste sa uistili, že ste vybrali správne

kliknutím umiestnite kurzor kamkoľvek do hlavnej časti stránky a potom kliknite na

tag uvedený úplne vľavo v rýchlom výbere tagu v spodnej časti pracovného priestoru.

S

vybranú značku, vyberte názov štýlu, ktorý ste vytvorili z rozbaľovacieho zoznamu ID v inšpektorovi vlastností.

Pravidlá štýlu, ktoré ste definovali pri vytváraní štýlu, sa automaticky použijú na

tag. V tomto príklade je výsledkom veľkosť

tag sa zmení na šírku 980 pixelov a

tag a celý jeho obsah sú vycentrované na stránke.

Nie všetky funkcie fungujú, keď je Dreamweaver nastavený na Živé zobrazenie. Hoci živé zobrazenie je skvelý spôsob, ako zobraziť ukážku toho, ako budú návrhy vašich stránok vyzerať vo väčšine moderných webových prehliadačov, použitie funkcie živého zobrazenia znemožňuje použitie mnohých nástrojov na úpravu aplikácie Dreamweaver. Ak sa napríklad inšpektor Vlastnosti javí ako zatemnený, keď ho chcete použiť, uistite sa, že tlačidlo Živé je zrušené.