Nové rozvržení tekutin Grid Dreamweaver CS6

• Smět 10, 2024

Pokud vyvíjíte jednoduché webové stránky nebo komplexní CMS, máte vždy na mysli tuto otravnou otázku - dělám vše, co je v mých silách, abych zacílil na všechny typy publika a rozlišení obrazovky? No, Dreamweaver^R CS6 má nové funkce, díky kterým je tento úkol snadnější.

V minulosti by bylo nutné pro každý rozdíl v rozlišení obrazovky vytvořit jiný soubor CSS a pomocí mediálního dotazu přiřadit požadovaný soubor CSS. To bylo velmi časově náročné a přidalo se k celkovým nákladům na vývoj stránek, což byla špatná zpráva pro vývojáře i klienta. Dreamweaver CS6 zabral hodně práce při vytváření přizpůsobivých webů.

Tento nový pracovní postup závisí na novém rozvržení tekutinové mřížky, které je poněkud jako startovací šablona s výchozím rozvržením a typografií pro každé rozlišení obrazovky vašeho webu.

1. Stačí kliknout na nabídku Soubor - Nové rozvržení tekutin z nabídky.
   
   
2. V dialogovém okně Nový dokument uvidíte výchozí hodnoty pro tuto novou adaptivní webovou stránku. Šířka je pevná pro každé z různých rozlišení obrazovky.
   
   Mobilní 480 pixelů
   Tabulka 768px
   Desktop 1232px
   
   
3. Máte možnost změnit výchozí počet sloupců a procento šířky sloupců pro každé rozlišení obrazovky. Výchozí nastavení je:
   
   Mobilní 5 sloupců - 91%
   Sloupce tabletu 8 - 93%
   Sloupce 10 na ploše - 90%
   
   
4. Výchozí pracovní prostor může zobrazovat kód a návrhová zobrazení. Jak vidíte v návrhovém zobrazení, nový soubor již má jednu značku div. Na panelu Vlastnosti můžete změnit výchozí ID a třídu div.
   
   Vaše webová stránka bude samozřejmě potřebovat více než jednu div. Takže můžeme přidat další divy pro záhlaví, navigaci, hlavní, stranou a zápatí.
   
   
5. Chcete-li přidat nový oddíl div, zvolte Vložit značku Div Layid tekutin Grid Div na panelu Vložit.
   
   
6. V dialogovém okně můžete pojmenovat ID značky.
   
   
7. Když jsme přidali všechny hlavní divy pro naši stránku, můžeme na ně kliknout a přetáhnout je a přemístit je v mřížce.
   
   

Navrhujeme, abychom začali stavět mobilní verzi našeho webu a posunout se do větších velikostí. Při práci můžete snadno porovnat vizuální výsledky pomocí řešení Resolution Switcher pro rozlišení mobilních zařízení, tabletů a stolních počítačů.

Když uložíme rozvržení, získáme jeden soubor HTML5 a CSS3, který bude fungovat pro všechna tři rozlišení obrazovky. Pokud se podíváme do těchto souborů, najdeme informace o tom, jak soubory fungují při tvorbě naší adaptivní webové stránky.

* Adobe mi poskytla kopii tohoto softwaru pro účely kontroly.

Copyright 2018 Adobe Systems Incorporated. Všechna práva vyhrazena. Snímky obrazovky produktů Adobe přetištěné se souhlasem společnosti Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst a Flash Paper je / jsou [a] registrovanou ochrannou známkou (značkami) nebo ochrannou známkou (značkami) společnosti Adobe Systems Incorporated ve Spojených státech a / nebo jiných zemích.

Video Návody: UGD 29: Písma pro web (David Březina) (Smět 2024).