Ako umiestniť prvky v Dreamweaveri na vytvorenie troch rozložení v jednej fluidnej mriežke

Rozloženia s premenlivou mriežkou sú také výkonné, že v Dreamweaveri môžete zmeniť polohu a veľkosť prvkov tak, aby boli usporiadané inak pre každé z troch rozložení, čím sa vytvárajú návrhy, ktoré sú optimalizované pre obrazovky mobilných zariadení, tabletov a stolných počítačov. Ak chcete zmeniť šírku alebo polohu prvku, použite vizuálne nástroje Dreamweaveru.

Ako upraviť mobilné rozloženie v Dreamweaveri

Dreamweaver nastaví štýly tak, aby kaskádovo prechádzali cez každé z troch rozložení. To znamená, že by ste mali najskôr získať mobilný dizajn tak, ako ho chcete. Potom prejdite na rozloženie tabletu a zmeňte iba prvky, ktoré chcete, aby sa na tablete zobrazovali inak. Nakoniec si pozrite rozloženie pracovnej plochy. Opäť zmeňte iba prvky, ktoré chcete, aby sa zobrazovali inak.

Ak chcete upraviť rozloženie pre mobilné zariadenia, postupujte podľa týchto pokynov.

Vyberte možnosť Mobilná veľkosť v spodnej časti pracovného priestoru.

Oblasť pracovného priestoru sa zmení, aby sa stránka zobrazila v mobilnom náhľade, naformátovaný pomocou zodpovedajúcej sady štýlov.

Poznámka: Tri malé ikony v pravom dolnom rohu pracovného priestoru poskytujú prístup k ukážkam z mobilu, tabletu a pracovnej plochy. Keď prepnete z jedného na druhý, zmeníte nielen veľkosť oblasti zobrazenia, ale aj zodpovedajúcu sadu štýlov aplikovaných na vašu stránku.

Pridajte text a obrázky k prvkom v rozložení premenlivej mriežky tak, ako by ste pridávali obsah na akúkoľvek inú stránku v Dreamweaveri.

Môžete kopírovať a prilepiť text, ako aj použiť značky HTML a formátovanie CSS.

Vyberte prvok v oblasti dizajnu.

Príslušný štýl CSS sa zobrazí na paneli Výber, kde ho môžete upraviť.

Vytvárajte, upravujte a aplikujte štýly na text a obrázky tak, ako by ste to robili pri akomkoľvek inom návrhu stránky v Dreamweaveri.

Štýly, ktoré chcete použiť na všetky tri rozloženia, by sa mali vytvoriť pri výbere mobilného rozloženia, pretože tieto štýly sa použijú na všetky tri dizajny, pokiaľ ich neprepíše iný štýl vytvorený v rozloženiach tabletu alebo pracovnej plochy.

Ako upraviť rozloženie tabletu v Dreamweaveri

Keď získate mobilné rozloženie tak, ako chcete, prejdite na rozloženie veľkosti tabletu a upravte štýly, ktoré sa na toto rozloženie vzťahujú.

Ak chcete upraviť rozloženie tabletu, postupujte podľa týchto pokynov.

Vyberte možnosť Veľkosť tabletu v pravom dolnom rohu pracovného priestoru.

Oblasť pracovného priestoru sa zmení tak, aby zobrazila stránku v ukážke tabletu naformátovanú podľa zodpovedajúcej sady štýlov.

Vyberte prvok, ktorý chcete zmeniť na stĺpec, a pomocou úchytov na pravej strane potiahnite stĺpec na požadovanú šírku.

Dreamweaver poskytuje kolekciu vizuálnych nástrojov na úpravu, ktoré uľahčujú úpravu veľkosti a umiestnenia prvkov tekutej mriežky.

Ak potiahnete rukoväť ľubovoľného prvku tekutej mriežky zľava doprava, pridáte priestor na okraji, ktorý prinúti prvok zostať napravo od rozloženia. Ak potiahnete rukoväť sprava doľava, zmeníte veľkosť prvku.

Vyberte prvok so zmenenou veľkosťou, ktorý chcete premiestniť, a potom kliknite na šípku Posunúť o riadok nahor.

Prvok sa posunie nahor a zarovná sa vedľa prvku nad ním.

Ak chcete presunúť prvok nadol, kliknite na šípku Začína nový riadok.

Poznámka: Kliknutím na každú zo štyroch ikon skryjete prvok, posuniete ho nahor alebo nadol, duplikujete ho alebo ho vymažete.

Ako upraviť rozloženie pracovnej plochy v Dreamweaveri

Keď získate rozloženia pre mobilné zariadenia a tablety tak, ako chcete, prejdite na rozloženie veľkosti pracovnej plochy a upravte štýly, ktoré sa vzťahujú na najväčšie z troch rozložení.

Ak chcete upraviť rozloženie pracovnej plochy, postupujte podľa týchto pokynov.

Vyberte možnosť Veľkosť pracovnej plochy v pravom dolnom rohu pracovného priestoru.

Oblasť pracovného priestoru sa zmení, aby sa stránka zobrazila v ukážke pracovnej plochy, naformátovaná pomocou zodpovedajúcej sady štýlov.

Výberom šípky Zameniť v strede ľubovoľných dvoch prvkov prepnete pozície týchto dvoch prvkov.

Prvky Article1 a Article2 je možné zameniť jednoduchým kliknutím na šípku Swap medzi nimi.

Naformátujte text, obrázky a ďalšie prvky podľa potreby pre dizajn pracovnej plochy.

Všetky ostatné možnosti vizuálneho formátovania zahrnuté v rozložení tabletu sú k dispozícii.

Vyberte Súbor → Uložiť všetko, aby ste uložili všetky súbory v rozložení mriežky.

Keď upravujete rozloženie premenlivej mriežky, robíte zmeny v súbore HTML, ako aj v externom hárku štýlov. Pomocou možnosti Uložiť všetko zaistíte, že ste uložili všetky potrebné súbory predtým, ako si ich prezriete alebo zverejníte svoju lokalitu na webovom serveri.

Ako prepínať medzi rozloženiami v Dreamweaveri

Je dobrým zvykom navrhovať rozloženia mriežky v tomto poradí: najprv mobilná verzia, potom verzia pre tablet a nakoniec verzia pre počítač. Môžete však prepínať medzi týmito tromi rozloženiami, keď upravujete svoje návrhy.

Majte na pamäti niekoľko všeobecných pravidiel a osvedčených postupov:

• Rozloženia tekutej mriežky sa vytvárajú pomocou mediálnych dopytov, ktoré fungujú ako rozdeľovače medzi jednotlivými skupinami štýlov, ktoré formátujú rozloženia pre mobil, tablet a plochu.

• Keď upravujete štýly, musíte dbať na to, aby ste upravovali štýly, ktoré zodpovedajú rozloženiu, na ktorom chcete pracovať.

• Ak si prezriete zodpovedajúce štýly, ktoré sa automaticky vytvoria v zobrazení kódu, uvidíte, že šírky a ďalšie veľkosti sú zadané na štvrtú desatinnú čiarku, napríklad šírka: 48,2758 %. Ak tieto čísla zmeníte v zobrazení kódu, Dreamweaver ich už nebude automaticky upravovať za vás.

• Keď vytvoríte štýly, ktoré chcete použiť na všetky tri rozloženia, najprv vyberte možnosť Akékoľvek médium z panela @Media na paneli CSS Designer,