Nieuwe vloeistofrasterindeling Dreamweaver CS6

• Mei 6, 2024

Als u eenvoudige websites of complexe CMS ontwikkelt, heeft u altijd deze zeurende vraag in gedachten: doe ik er alles aan om me op alle soorten doelgroepen en schermresoluties te richten? Nou, Dreamweaver^R CS6 heeft nieuwe functies die dit een eenvoudiger taak maken.

In het verleden moest u een ander CSS-bestand maken voor elke verschillende schermresolutie en een mediaquery gebruiken om het vereiste CSS-bestand toe te wijzen. Dit was erg tijdrovend en droeg bij aan de totale kosten van site-ontwikkeling, wat slecht nieuws was voor zowel de ontwikkelaar als de klant. Dreamweaver CS6 heeft veel werk verzet bij het maken van adaptieve websites.

Dit nieuwe workflowproces is afhankelijk van de nieuwe Fluid Grid Layout die enigszins lijkt op een startersjabloon met standaardlay-outs en typografie voor elke schermresolutie voor uw website.

1. Klik gewoon op Bestand - Nieuwe vloeistofrasterlay-out op de menubalk.
   
   
2. In het dialoogvenster Nieuw document ziet u de standaardwaarden voor deze nieuwe adaptieve webpagina. De breedte is vast voor elk van de verschillende schermresoluties.
   
   Mobiel 480 px
   Tabel 768px
   Desktop 1232px
   
   
3. U kunt voor elke schermresolutie het standaardaantal kolommen en het percentage kolombreedte wijzigen. De standaardwaarden zijn:
   
   Mobiel 5 kolommen - 91%
   Tablet 8 kolommen - 93%
   Desktop 10 kolommen - 90%
   
   
4. De standaardwerkruimte kan de code en de ontwerpweergaven tonen. Zoals u in de ontwerpweergave kunt zien, heeft het nieuwe bestand al één div-tag. U kunt de standaard-ID en klasse voor de div in het deelvenster Eigenschappen wijzigen.
   
   Natuurlijk heeft uw webpagina meer dan één div nodig. We kunnen dus meer div's toevoegen voor de kop-, navigatie-, hoofd-, opzij- en voettekst.
   
   
5. Als u een nieuwe div wilt toevoegen, kiest u Div-label rasterlay-out invoegen in het paneel Invoegen.
   
   
6. In het dialoogvenster kunt u de ID voor de tag een naam geven.
   
   
7. Wanneer we alle belangrijke div-elementen voor onze pagina hebben toegevoegd, kunnen we erop klikken en ze slepen om ze binnen het raster te verplaatsen.
   
   

Er wordt voorgesteld dat we beginnen met het bouwen van de mobiele versie van onze site en naar de grotere formaten gaan. U kunt de visuele resultaten eenvoudig vergelijken terwijl u werkt met behulp van de resolutieomschakeling voor mobiele, tablet- en desktopresoluties.

Wanneer we onze lay-out opslaan, krijgen we één HTML5- en CSS3-bestand dat voor alle drie schermresoluties werkt. Als we deze bestanden bekijken, kunnen we informatie vinden over hoe de bestanden werken om onze adaptieve webpagina te maken.

* Adobe heeft mij een exemplaar van deze software ter beoordeling verstrekt.

Copyright 2018 Adobe Systems Incorporated. Alle rechten voorbehouden. Schermafbeeldingen van Adobe-producten herdrukt met toestemming van 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 en Flash Paper is / zijn ofwel [a] geregistreerde handelsmerken [s] of een handelsmerk [s] van Adobe Systems Incorporated in de Verenigde Staten en / of andere landen.