Ako vytvoriť jednostĺpcové rozloženie tekutej mriežky v Dreamweaveri

Predtým, ako sa pustíte do vytvárania komplikovaného návrhu tekutej mriežky v Dreamweaveri, zvážte vyskúšanie jednoduchšieho. Začnite vytvorením jednoduchého rozloženia tekutej mriežky s jedným stĺpcom podľa týchto jednoduchých pokynov:

Vyberte Súbor → Nový.

Otvorí sa okno Nový dokument. Poznámka: Pred začatím práce na novom rozložení mriežky sa uistite, že ste dokončili proces nastavenia lokality.

Na ľavej strane obrazovky vyberte Fluid Grid Layout.

Možnosti okna Nový dokument sa zmenia na možnosti tekutej mriežky.

Zadajte požadovaný počet stĺpcov v každom z troch rozložení.

Ak chcete pridať alebo odstrániť stĺpce, postupne vyberte textové pole nad každým stĺpcom a zadajte požadovaný počet stĺpcov.

Zadajte percento okna prehliadača, ktoré má každé rozloženie pokryť.

Postupne vyberte textové pole pod každým rozložením a zadajte číslo predstavujúce percento priestoru, ktorý má rozloženie pokryť, keď je návrh zobrazený v okne prehliadača. Napríklad v predvolenom nastavení je rozloženie pracovnej plochy nastavené tak, aby zaberalo 90 percent dostupného priestoru, ale môžete ho zmeniť na 95 percent, aby ste získali viac priestoru na dizajn a zmenšili priestor na okraji.

Zmeňte percento šírky stĺpca, aby ste zmenili veľkosť medzery medzi jednotlivými stĺpcami.

V predvolenom nastavení Dreamweaver nastaví každý okraj tak, aby zaberal 25 percent dostupného priestoru.

Pomocou rozbaľovacieho zoznamu zadajte typ dokumentu.

V predvolenom nastavení sa rozloženia premenlivej mriežky vytvárajú pomocou dokumentu HTML5. Ak nepotrebujete zmeniť typ dokumentu, aby bol kompatibilnejší s iným formátovaním používaným na vašej webovej lokalite, odporúčanou možnosťou pre responzívne webové dizajny je HMTL5.

Kliknite na Vytvoriť.

Otvorí sa dialógové okno Uložiť ako pripravené na uloženie súboru CSS.

Zadajte názov súboru CSS a kliknite na tlačidlo Uložiť.

V pracovnom priestore Dreamweaveru sa otvorí nový súbor HTML, ale ešte nie je uložený. Súbor CSS, ktorý ste pomenovali, sa uloží a jeho názov sa zobrazí na paneli Súbory.

Poznámka: Na rozdiel od procesu vytvárania iných typov stránok v Dreamweaveri sa súbor CSS uloží ako prvý a súbor HTML sa uloží v neskoršom kroku.

Vyberte Súbor → Uložiť

Otvorí sa dialógové okno Uložiť ako.

Zadajte názov súboru HTML a kliknite na tlačidlo OK.

Dialógové okno Uložiť ako sa zatvorí a v aplikácii Dreamweaver sa zobrazí upozornenie, ktoré vás informuje, že rozloženie premenlivej mriežky vyžaduje dva ďalšie súbory: boilerplate.css a respond.min.js.

Kliknutím na tlačidlo OK skopírujte súbory boilerplate.css a respond.min.js do priečinka vašej lokality.

Všetky tri súbory sa pridajú na panel Súbory a vrátite sa k svojmu novo pomenovanému súboru HTML otvorenému v pracovnom priestore Dreamweaveru.

Zadajte názov stránky zadaním textu do poľa Názov v hornej časti pracovného priestoru.

Tým sa dokončí proces vytvárania novej sady súborov pre rozloženie tekutej mriežky.