Operation Manual

Dynamische rasterlay-outs (CC)
Opmerking:
Naar boven
Naar boven
Naar boven
Dynamische rasterlay-outs gebruiken
Een dynamische rasterlay-out maken
Elementen voor dynamische rasterlay-outs invoegen
Elementen nesten
De lay-out van een website moet reageren op en zich aanpassen aan de afmetingen van het apparaat waarop de website wordt weergegeven.
Dynamische rasterlay-outs bieden een visuele methode om verschillende lay-outs te maken die geschikt zijn voor de apparaten waarop de
website wordt weergegeven.
Uw website wordt bijvoorbeeld weergegeven op computers, tablets en mobiele telefoons. In dat geval kunt u dynamische rasterlay-outs gebruiken
om afzonderlijke lay-outs voor deze apparaten op te geven. Afhankelijk van of de website wordt weergegeven op een computer, tablet of mobiele
telefoon, wordt de bijbehorende lay-out gebruikt om de website weer te geven.
Meer informatie: Adaptieve lay-out versus responsieve lay-out
Dreamweaver 12.2 Creative Cloud-release bevat veel verbeteringen aan dynamische rasterlay-outs, zoals ondersteuning voor HTML5-
structuurelementen en eenvoudig bewerken van geneste elementen. Voor een overzicht van de volledige lijst met verbeteringen klikt u hier.
De controlemodus voor documenten met dynamische rasterlay-outs is niet beschikbaar in Dreamweaver 13.1 en hoger.
Dynamische rasterlay-outs gebruiken
Bekijk deze videozelfstudie om te leren hoe u dynamische rasterlay-out maakt: Kennismaken met dynamische rasterlay-outs.
Een dynamische rasterlay-out maken
1. Selecteer Bestand > Nieuwe dynamische rasterlay-out.
2. De standaardwaarde voor het aantal kolommen in het raster wordt in het midden van het mediatype weergegeven. Als u het aantal
kolommen voor een apparaat wilt aanpassen, geeft u de gewenste waarde op.
3. Geef de waarde op als percentage als u de breedte van een pagina wilt instellen ten opzichte van de schermgrootte.
4. Wijzig zo nodig de tussenruimte. De tussenruimte is de ruimte tussen twee kolommen.
5. Geef de CSS-opties voor de pagina op.
Wanneer u op Maken klikt, wordt u gevraagd een CSS-bestand op te geven. U kunt dat op een van de volgende manieren doen:
Maak een nieuw CSS-bestand.
Open een bestaand CSS-bestand.
Geef het CSS-bestand op dat als Dynamisch raster-CSS-bestand wordt geopend.
Het dynamische raster voor mobiele telefoons wordt standaard weergegeven. Ook wordt het deelvenster Invoegen voor dynamische rasters
weergegeven. U kunt de opties in het deelvenster Invoegen gebruiken om de lay-out te maken.
Als u een lay-out voor een ander apparaat wilt ontwerpen, klikt u op het betreffende pictogram bij de opties onder de ontwerpweergave.
6. Sla het bestand op. Wanneer u het HTML-bestand opslaat, wordt u gevraagd om de afhankelijke bestanden, zoals boilerplate.css en
respond.min.js, op te slaan op een locatie op uw computer. Geef een locatie op en klik op Kopiëren.
Het bestand boilerplate.css is gebaseerd op HTML5 Boilerplate. Dit is een verzameling CSS-stijlen die ervoor zorgt dat uw webpagina op
een consistente wijze wordt weergegeven op verschillende apparaten. respond.min.js is een JavaScript-bibliotheek met ondersteuning voor
de mediaqueries in oudere versies van de browser.
Elementen voor dynamische rasterlay-outs invoegen
In het deelvenster Invoegen (Venster > Invoegen) worden de elementen weergegeven die u in een dynamische rasterlay-out kunt gebruiken.
162