Nytt vätskegridlayout Dreamweaver CS6

• April 19, 2024

Om du utvecklar enkla webbplatser eller komplexa CMS, har du alltid denna irriterande fråga i åtanke - gör jag allt jag kan för att rikta in alla typer av målgrupper och skärmupplösningar? Tja, Dreamweaver^R CS6 har nya funktioner som gör detta till en enklare uppgift.

Tidigare skulle man behöva skapa en annan CSS-fil för varje olika skärmupplösning och använda mediefråga för att tilldela den nödvändiga CSS-filen. Detta var mycket tidskrävande och ökade den totala kostnaden för webbplatsutveckling, vilket var dåliga nyheter för både utvecklaren och kunden. Dreamweaver CS6 har tagit mycket av arbetet med att skapa anpassningsbara webbplatser.

Den här nya arbetsflödesprocessen beror på den nya Fluid Grid Layout som är ungefär som en startmall med standardlayout och typografi för varje skärmupplösning för din webbplats.

1. Klicka bara på Arkiv - Nytt vätskegridlayout från menyraden.
   
   
2. I dialogrutan Nytt dokument ser du standardvärdena för den här nya adaptiva webbsidan. Bredden är fixerad för var och en av de olika skärmupplösningarna.
   
   Mobil 480px
   Tabell 768px
   Skrivbord 1232px
   
   
3. Du har möjlighet att ändra standardantalet kolumner och procenten av kolumnbredden för varje skärmupplösning. Standardvärdena är:
   
   Mobil 5-kolumner - 91%
   Tablet 8 kolumner - 93%
   Skrivbord 10 kolumner - 90%
   
   
4. Standardarbetsytan kan visa koden och designvyerna. Som du kan se i designvyn har den nya filen redan en div-tagg. Du kan ändra standard-ID och klass för div i Egenskaper-panelen.
   
   Naturligtvis kommer din webbsida att behöva mer än en div. Så vi kan lägga till fler div för rubriken, navigering, huvud, åt sidan och sidfot.
   
   
5. För att lägga till en ny div väljer du Infoga Fluid Grid Layout Div Tag på Infoga-panelen.
   
   
6. I dialogrutan kan du namnge ID för taggen.
   
   
7. När vi har lagt till alla huvuddelarna för vår sida kan vi klicka och dra dem för att flytta dem inom rutnätet.
   
   

Vi föreslås att vi börjar bygga den mobila versionen av vår webbplats och flytta upp till större storlekar. Du kan enkelt jämföra de visuella resultaten när du arbetar med hjälp av upplösningsomkopplaren för mobil-, surfplatta- och stationär upplösning.

När vi sparar vår layout får vi en HTML5- och CSS3-fil som fungerar för alla tre skärmupplösningar. Om vi ​​tittar inuti dessa filer kan vi hitta information om hur filerna fungerar för att skapa vår adaptiva webbsida.

* Adobe tillhandahöll en kopia av denna programvara till mig för granskningssyften.

Copyright 2018 Adobe Systems Incorporated. Alla rättigheter förbehållna. Adobes produktskärmbild (ar) tryckta med tillstånd från 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 och Flash Paper är / är antingen [a] registrerat varumärke [s] eller ett varumärke [s] från Adobe Systems Incorporated i USA och / eller andra länder.