Nytt væskegitteroppsett Dreamweaver CS6

• Kan 18, 2024

Hvis du utvikler enkle nettsteder eller komplekse CMS, har du alltid dette irriterende spørsmålet i tankene - gjør jeg alt jeg kan for å målrette alle typer målgrupper og skjermoppløsninger? Vel, Dreamweaver^R CS6 har nye funksjoner som gjør dette til en enklere oppgave.

I det siste må man opprette en annen CSS-fil for hver annen skjermoppløsning og bruke mediesøk for å tilordne den nødvendige CSS-filen. Dette var veldig tidkrevende og bidro til de totale kostnadene for nettstedutvikling, noe som var dårlige nyheter for både utvikleren og kunden. Dreamweaver CS6 har tatt mye av arbeidskraften ut av å lage adaptive nettsteder.

Denne nye arbeidsflytprosessen avhenger av det nye Fluid Grid Layout, som er noe som en startmal med standardoppsett og typografi for hver skjermoppløsning på nettstedet ditt.

1. Bare klikk på File - New Fluid Grid Layout fra menylinjen.
   
   
2. I dialogboksen Nytt dokument ser du standardverdiene for denne nye adaptive hjemmesiden. Bredden er fast for hver av de forskjellige skjermoppløsningene.
   
   Mobil 480px
   Tabell 768px
   Skrivebord 1232px
   
   
3. Du har muligheten til å endre standard antall kolonner og prosentdel av kolonnebredde for hver skjermoppløsning. Standardverdiene er:
   
   Mobil 5-kolonner - 91%
   Nettbrett 8 kolonner - 93%
   Desktop 10 kolonner - 90%
   
   
4. Standard arbeidsområde kan vise koden og designvisningene. Som du kan se i designvisningen, har den nye filen allerede en div-kode. Du kan endre standard-ID og klasse for div i Egenskaper-panelet.
   
   Naturligvis trenger nettsiden din mer enn en div. Så vi kan legge til flere divs for overskriften, navigasjonen, hoved, til side og bunntekst.
   
   
5. Hvis du vil legge til en ny div, velger du Sett inn Fluid Grid Layout Div Tag i Sett inn-panelet.
   
   
6. I dialogboksen kan du navngi ID for koden.
   
   
7. Når vi har lagt til alle hoveddivisjonene for siden vår, kan vi klikke og dra dem for å plassere dem innenfor rutenettet.
   
   

Vi foreslår at vi begynner å bygge den mobile versjonen av nettstedet vårt og flytte opp til de større størrelsene. Du kan enkelt sammenligne de visuelle resultatene mens du arbeider ved å bruke Resolution Switcher for Mobile, Tablet og Desktop-oppløsninger.

Når vi lagrer oppsettet vårt, får vi en HTML5- og CSS3-fil som fungerer for alle tre skjermoppløsningene. Hvis vi ser på disse filene, kan vi finne informasjon om hvordan filene fungerer for å lage vår adaptive webside.

* Adobe ga meg en kopi av denne programvaren for gjennomgang.

Copyright 2018 Adobe Systems Incorporated. Alle rettigheter forbeholdt. Adobes produktskjermbilder er skrevet ut på nytt med tillatelse fra 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, Fyrverkeri, Bidra, Captivate, Flash Catalyst og Flash Paper er / er enten [a] registrert varemerke [s] eller et varemerke [s] fra Adobe Systems Incorporated i USA og / eller andre land.