Nový rozvrh tekutých mriežok Dreamweaver CS6

• Smieť 9, 2024

Ak vyvíjate jednoduché webové stránky alebo komplexné redakčné systémy, vždy máte na pamäti túto nepríjemnú otázku - robím všetko, čo je v mojich silách, aby som zacielil všetky typy publika a rozlíšenie obrazovky? Dreamweaver^R CS6 má nové funkcie, vďaka ktorým je to ľahšia úloha.

V minulosti by bolo potrebné vytvoriť iný súbor CSS pre každé rozlíšenie obrazovky a pomocou mediálneho dotazu priradiť požadovaný súbor CSS. To bolo veľmi časovo náročné a zvýšilo sa celkové náklady na vývoj stránok, čo bola zlá správa pre vývojárov aj pre klienta. Dreamweaver CS6 vyťažil veľa práce pri vytváraní prispôsobivých webových stránok.

Tento nový postup toku práce závisí od nového rozloženia tekutinových mriežok, ktoré je trochu ako šablóna štartéra s predvolenými rozloženiami a typografiou pre každé rozlíšenie obrazovky vášho webu.

1. V ponuke Menubar jednoducho kliknite na položku File - New Layid Grid Layout.
   
   
2. V dialógovom okne Nový dokument sa zobrazia predvolené hodnoty pre túto novú prispôsobivú webovú stránku. Šírka je pevná pre každé z rôznych rozlíšení obrazovky.
   
   Mobilný 480px
   Tabuľka 768px
   Desktop 1232px
   
   
3. Máte možnosť zmeniť predvolený počet stĺpcov a percento šírky stĺpcov pre každé rozlíšenie obrazovky. Predvolené hodnoty sú:
   
   Mobilný stĺpec 5 - 91%
   Stĺpce tabletu 8 - 93%
   Stĺpce na pracovnej ploche 10 - 90%
   
   
4. Predvolený pracovný priestor môže zobrazovať kód a návrhové zobrazenia. Ako vidíte v zobrazení dizajnu, nový súbor už obsahuje jednu značku div. Na paneli Vlastnosti môžete zmeniť predvolené ID a triedu div.
   
   Vaša webová stránka bude samozrejme potrebovať viac ako jednu div. Takže môžeme pridať ďalšie divy pre hlavičku, navigáciu, hlavnú, bokom a pätu.
   
   
5. Ak chcete pridať nový diel div, na paneli Vložiť vyberte položku Vložiť značku rozloženia tekutinovej mriežky.
   
   
6. V dialógovom okne môžete pomenovať ID značky.
   
   
7. Keď sme pre našu stránku pridali všetky hlavné oddiely, môžeme na ne kliknúť a presunúť ich, aby sme ich premiestnili v mriežke.
   
   

Navrhujeme, aby sme začali s budovaním mobilnej verzie našich stránok a presunuli sa do väčších rozmerov. Počas práce môžete vizuálne výsledky ľahko porovnávať pomocou rozlíšenia prepínača pre rozlíšenie mobilných zariadení, tabletov a stolných počítačov.

Keď uložíme rozloženie, získame jeden súbor HTML5 a CSS3, ktorý bude fungovať pre všetky tri rozlíšenia obrazovky. Ak sa pozrieme do týchto súborov, nájdeme informácie o tom, ako tieto súbory fungujú pri vytváraní našej prispôsobivej webovej stránky.

* Spoločnosť Adobe mi poskytla kópiu tohto softvéru na účely kontroly.

Copyright 2018 Adobe Systems Incorporated. Všetky práva vyhradené. Snímky obrazovky produktov spoločnosti Adobe znova vytlačené so súhlasom spoloč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 / sú [a] registrované ochranné známky alebo ochranné známky spoločnosti Adobe Systems Incorporated v USA a / alebo iných krajinách.