Handboek Annuleren

Responsief ontwerp met dynamische rasterlay-outs

Zoeken

Laatst bijgewerkt op 18 feb. 2022

Wilt u responsieve websites voor meerdere schermen maken? Lees hoe u dynamische rasters in Dreamweaver gebruikt om websites voor mobiele apparaten en desktopcomputers te ontwerpen.

De lay-out van een website moet reageren op en zich aanpassen aan de afmetingen van het apparaat waarop de website wordt weergegeven (responsief ontwerp). Een dynamische rasterlay-out biedt 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

Controlemodus is niet beschikbaar voor documenten met dynamische rasterlay-out.

Een dynamische rasterlay-out maken

U kunt bestaande dynamische rasterlay-outs bewerken in Dreamweaver 2017. U kunt echter geen dynamische rasterlay-outs maken.

Gebruik in plaats daarvan Bootstrap om responsieve lay-outs in Dreamweaver 2017 te maken. Zie Werken met Bootstrap-bestanden voor meer informatie over Bootstrap.

Selecteer Bestand > Dynamisch raster (verouderd).
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.

Documenten met dynamische rasters bewerken

U kunt documenten met dynamische rasters rechtstreeks in Live View bewerken om:

De HTML-klassen en -ID's aan elementen te koppelen. Zie Elementweergave voor meer informatie.
Afbeeldingskenmerken en tekst te bewerken. Zie Snelle eigenschappencontrole en Tekst bewerken in Live View voor meer informatie.
Nieuwe elementen in te voegen. Zie Elementen voor dynamische rasters invoegen voor meer informatie.

Met behulp van Snelle elementweergave kunt u ook de HTML DOM-structuur van een document met een dynamisch raster visualiseren.

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.

Klik in het deelvenster Invoegen op het element dat u wilt invoegen.
Klik in het dialoogvenster dat verschijnt op Voor, Na of Nesten om het element te plaatsen ten opzichte van het verwijzingselement dat in het document is gemarkeerd.
Selecteer een klasse of voer een waarde voor de ID in. Het menu Klasse 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 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	Beschrijving
Div-elementen omwisselen	Het geselecteerde element omwisselen met het element erboven of eronder.
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.
Rij omhoog verplaatsen	Het element een rij omhoog verplaatsen.
Dupliceren	Het geselecteerde element dupliceren. CSS die aan het element is gekoppeld, wordt ook gedupliceerd.
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.
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 toetsen Pijl-omhoog en Pijl-omlaag gebruiken om cyclisch door de 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).