Selecteer Bestand > Nieuwe dynamische rasterlay-out.
Laatst bijgewerkt op
3 mei 2021
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.
Opmerking:
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
-
-
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.
-
Geef de waarde op als percentage als u de breedte van een pagina wilt instellen ten opzichte van de schermgrootte.
-
Wijzig zo nodig de tussenruimte. De tussenruimte is de ruimte tussen twee kolommen.
-
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.
-
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. Wanneer u de elementen invoegt, kunt u ervoor kiezen deze als dynamische elementen in te voegen.
-
Selecteer in het deelvenster Invoegen het element dat u wilt invoegen.
-
Selecteer een klasse in het dialoogvenster dat wordt weergegeven of voer een waarde voor de id in. Het menu Class bevat klassen uit het CSS-bestand dat u hebt opgegeven bij het maken van de pagina.
-
Schakel het selectievakje Invoegen als dynamisch element in.
-
Als u een ingevoegd element selecteert, worden de opties voor het verbergen, dupliceren, vergrendelen of verwijderen van het Div-element weergegeven. Voor Div-elementen die in lagen boven op elkaar zijn geplaatst, wordt de optie voor het omwisselen van de Div-elementen weergegeven.
Optie Label Beschrijving A Div-elementen omwisselen Het geselecteerde element omwisselen met het element erboven of eronder.
B Verbergen Het element verbergen..
Als u een element zichtbaar wilt maken, doet u een van de volgende dingen:
Als u id-kiezers zichtbaar wilt maken, wijzigt u de weergave-eigenschap display in het CSS-bestand in block. (display:block)
Als u klassenkiezers zichtbaar wilt maken, verwijdert u de toegepaste klasse (hide_<MediaType>) in de broncode.
C Rij omhoog verplaatsen Het element een rij omhoog verplaatsen.
D Dupliceren Het geselecteerde element dupliceren. CSS die aan het element is gekoppeld, wordt ook gedupliceerd.
E Verwijderen Verwijdert zowel de HTML- als de CSS-code voor id-kiezers. Druk op Delete als u alleen HTML wilt verwijderen.
Voor klassenkiezers wordt alleen HTML-code verwijderd.
F Vergrendelen Het element omzetten in een absoluut gepositioneerd element.
G Uitlijnen Voor class-kiezers werkt de optie Uitlijnen als een knop die de marge op nul zet.
Voor id-kiezers zet de knop Uitlijnen het element op een lijn met het raster.Opmerking:U kunt de linker- en rechterpijltoets gebruiken om cyclisch door de dynamische elementen op een pagina te bladeren. Selecteer de elementgrens en druk op een pijltoets.
Elementen nesten
Als u dynamische elementen binnen andere dynamische elementen wilt nesten, controleert u of de focus zich binnen het bovenliggende element bevindt. Voeg vervolgens het vereiste onderliggende element in.
Geneste duplicatie wordt ook ondersteund. Met geneste duplicatie wordt de HTML (van het geselecteerde element) gedupliceerd en de relevante dynamische CSS gegenereerd. Absolute elementen binnen het geselecteerde element worden op de juiste wijze gepositioneerd. Geneste elementen kunnen ook worden gedupliceerd met de knop Dupliceren.
Wanneer u een bovenliggend element verwijdert, worden de bijbehorende CSS, de onderliggende elementen en gekoppelde HTML van het element verwijderd. U kunt geneste elementen ook verwijderen met de toets Delete (toetsenbordsneltoets: Ctrl+Delete).
