Jak umístit prvky v Dreamweaveru a vytvořit tři rozvržení v jedné tekuté mřížce

Rozvržení s proměnlivou mřížkou jsou tak výkonná, že můžete změnit polohu a velikost prvků v Dreamweaveru tak, aby byly pro každé ze tří rozvržení uspořádány jinak, a vytvořit tak návrhy, které jsou optimalizované pro obrazovky mobilních zařízení, tabletů a stolních počítačů. Chcete-li změnit šířku nebo polohu prvku, použijte vizuální nástroje Dreamweaveru.

Jak upravit mobilní rozvržení v Dreamweaveru

Dreamweaver nastaví styly tak, aby kaskádovitě procházely každým ze tří rozvržení. To znamená, že byste měli nejprve získat mobilní design tak, jak ho chcete. Poté přejděte k rozložení tabletu a změňte pouze prvky, které chcete, aby se na tabletu zobrazovaly jinak. Nakonec si prohlédněte rozložení pracovní plochy. Opět změňte pouze prvky, které chcete, aby se zobrazovaly jinak.

Chcete-li upravit mobilní rozložení, postupujte podle těchto pokynů.

Vyberte možnost Mobilní velikost v dolní části pracovní plochy.

Oblast pracovního prostoru se změní tak, aby zobrazila stránku v mobilním náhledu naformátovanou pomocí odpovídající sady stylů.

Poznámka: Tři malé ikony v pravé dolní části pracovní plochy poskytují přístup k náhledům na mobilu, tabletu a ploše. Když přepnete z jednoho na druhý, změníte nejen velikost oblasti zobrazení, ale také odpovídající sadu stylů aplikovaných na vaši stránku.

Přidejte text a obrázky k prvkům v rozvržení proměnlivé mřížky stejně, jako byste přidávali obsah na jakoukoli jinou stránku v Dreamweaveru.

Můžete kopírovat a vkládat text a také používat HTML tagy a formátování CSS.

Vyberte prvek v oblasti návrhu.

Odpovídající styl CSS se zobrazí na panelu Selektory, kde jej můžete upravit.

Vytvářejte, upravujte a aplikujte styly na text a obrázky jako v jakémkoli jiném návrhu stránky v Dreamweaveru.

Styly, které chcete použít na všechna tři rozvržení, by měly být vytvořeny, když je vybráno mobilní rozvržení, protože tyto styly se použijí na všechny tři návrhy, pokud nebudou přepsány jiným stylem vytvořeným v rozvrženích tabletu nebo plochy.

Jak upravit rozložení tabletu v Dreamweaveru

Poté, co získáte mobilní rozložení tak, jak chcete, přejděte na rozložení velikosti tabletu a upravte styly, které se na toto rozložení vztahují.

Chcete-li upravit rozložení tabletu, postupujte podle těchto pokynů.

Vyberte možnost Velikost tabletu v pravé dolní části pracovní plochy.

Oblast pracovního prostoru se změní tak, aby zobrazila stránku v náhledu tabletu, naformátovaného pomocí odpovídající sady stylů.

Vyberte prvek, který chcete změnit na sloupec, a pomocí úchytů na pravé straně sloupec přetáhněte na požadovanou šířku.

Dreamweaver poskytuje sadu nástrojů pro vizuální úpravy, které usnadňují úpravu velikosti a umístění prvků tekuté mřížky.

Pokud přetáhnete táhlo libovolného prvku tekuté mřížky zleva doprava, přidáte prostor na okraji, který přinutí prvek zůstat napravo od rozvržení. Pokud přetáhnete táhlo zprava doleva, změníte velikost prvku.

Vyberte prvek se změněnou velikostí, který chcete přemístit, a poté klikněte na šipku Posunout o řádek nahoru.

Prvek se posune nahoru a zarovná se vedle prvku nad ním.

Chcete-li prvek přesunout dolů, klikněte na šipku Začíná nový řádek.

Poznámka: Klepnutím na každou ze čtyř ikon prvek skryjete, přesunete nahoru nebo dolů, duplikujete nebo odstraníte.

Jak upravit rozvržení plochy v Dreamweaveru

Poté, co získáte rozložení pro mobily a tablety podle svých představ, přejděte na rozložení velikosti plochy a upravte styly, které se vztahují na největší ze tří rozložení.

Chcete-li upravit rozložení plochy, postupujte podle těchto pokynů.

Vyberte možnost Velikost plochy v pravém dolním rohu pracovní plochy.

Oblast pracovní plochy se změní tak, aby zobrazila stránku v náhledu na ploše, naformátovanou pomocí odpovídající sady stylů.

Výběrem šipky Zaměnit uprostřed libovolných dvou prvků přepnete pozice těchto dvou prvků.

Prvky Article1 a Article2 lze zaměnit jednoduše kliknutím na šipku Swap mezi nimi.

Naformátujte text, obrázky a další prvky podle potřeby pro návrh plochy.

Všechny ostatní možnosti vizuálního formátování zahrnuté v rozložení tabletu jsou k dispozici.

Chcete-li uložit všechny soubory v rozvržení proměnlivé mřížky, zvolte Soubor→Uložit vše.

Když upravujete rozvržení proměnlivé mřížky, provádíte změny v souboru HTML i v externí šabloně stylů. Pomocí možnosti Uložit vše zajistíte, že jste uložili všechny potřebné soubory před jejich náhledem nebo publikováním webu na webový server.

Jak přepínat mezi rozvrženími v Dreamweaveru

Je dobrým zvykem navrhovat rozvržení plynulé mřížky v tomto pořadí: nejprve mobilní verze, poté verze pro tablety a nakonec verze pro stolní počítače. Můžete však přepínat mezi těmito třemi rozvrženími, když upravujete své návrhy.

Mějte na paměti následujících několik obecných pravidel a osvědčených postupů:

• Rozvržení proměnlivé mřížky se vytvářejí pomocí dotazů na média, které fungují jako oddělovače mezi jednotlivými sadami stylů, které formátují rozvržení pro mobily, tablety a počítače.

• Když upravujete styly, musíte si dát pozor, abyste upravovali styly, které odpovídají rozvržení, na kterém chcete pracovat.

• Pokud zobrazíte odpovídající styly, které se automaticky vytvářejí v zobrazení kódu, uvidíte, že šířky a další velikosti jsou zadány na čtvrtou desetinnou čárku, například šířka: 48,2758 %. Pokud tato čísla změníte v zobrazení kódu, Dreamweaver je již nebude automaticky upravovat za vás.

• Když vytváříte styly, které chcete použít na všechna tři rozvržení, nejprve vyberte Libovolná média z panelu @Media na panelu CSS Designer,