Začínáme s responzivním návrhem v aplikaci Adobe Muse

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í.

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.

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.

 

 

 

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ů.

 

 

 

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.

 

 

 

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.

 

 

 

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.

 

 

 

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

 

 

 

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.

Logo Adobe

Přihlaste se ke svému účtu.