V tomto článku najdete úvod do návrhu responzivních stránek v aplikaci Adobe Muse. Naučte se vytvářet responzivní weby pro libovolné zařízení.

Poznámka:

Do aplikace Adobe Muse již nejsou přidávány žádné další funkce a 26. března 2020 bude její podpora ukončena. Podrobnější informace a možnosti asistence naleznete na stránce Ukončení životnosti aplikace Adobe Muse.

Při vytváření responzivního webu není příliš vhodné přidávat zarážky pro konkrétní zařízení, OS nebo značku produktu. Takové zarážky kladou velké nároky na údržbu. Počet zarážek a jejich umístění by mělo být dáno rozvržením a obsahem webu.

Pokračujte ve čtení a seznamte se s doporučenými přístupy k návrhu responzivních webů v aplikaci Adobe Muse.

1

Vytvořte web. V dialogu Nový web vyberte tekutou šířku.

Nastavte rozměry stránky, abyste se vyhnuli problémům s prázdným místem apod. Klikněte na Pokročilé nastavení a nastavte minimální a maximální šířku webu a minimální výšku.


V dialogovém okně Nový web vyberte možnost Tekutá šířka.
V dialogovém okně Nový web vyberte možnost Tekutá šířka.

 

 

 

2

Otevřete vzorovou nebo jednotlivou stránku. Všimněte si, že výchozí zarážka je nastavena na pozici 960 pixelů.


Všimněte si, že výchozí zarážka je nastavena na pozici 960 pixelů.
Všimněte si, že výchozí zarážka je nastavena na pozici 960 pixelů.

 

 

 

3

Začněte na tuto zarážku umisťovat prvky stránky, například text, obrázky, prezentace a widgety.


Rozvrhněte svou webovou stránku.
Rozvrhněte svou webovou stránku.

 

 

 

4

Pomocí posuvníku simulujte různé šířky prohlížeče. Sledujte, jak se bude web zobrazovat při různých šířkách prohlížeče.


Pomocí posuvníku zjistěte, jak se bude web zobrazovat při různých šířkách prohlížeče.
Pomocí posuvníku zjistěte, jak se bude web zobrazovat při různých šířkách prohlížeče.

 

 

 

5

Kdykoli se návrh stránky zalomí, přidejte další zarážku. Všimněte si například, že v předchozím obrázku textové pole přesahuje šířku stránky, když táhnete posuvník. Přidejte zarážku v té šířce, kde se návrh zalomí.


Všude, kde se návrh zalomí, přidejte zarážku.
Všude, kde se návrh zalomí, přidejte zarážku.

 

 

 

6

Upravte rozvržení v místě nové zarážky tak, aby web vypadal nadále dobře navržen.


Upravte rozvržení v místě zarážky
Upravte rozvržení v místě zarážky

 

 

 

7

Pokračujte v prohlížení náhledu webu až do dosažení minimální šířky. Přidejte zarážky a dolaďujte rozvržení tam, kde je to třeba.


S tímto přístupem bude váš web vypadat dobře při libovolné šířce prohlížeče na libovolném zařízení. Návrh bude nezávislý na velikosti konkrétního zařízení nebo obrazovky.

Tato práce podléhá licenci Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Na příspěvky ze služeb Twitter™ a Facebook se nevztahují podmínky licence Creative Commons.

Právní upozornění   |   Zásady ochrany osobních údajů online