Hoe u een One-Column Fluid Grid-lay-out kunt maken in Dreamweaver - dummies

Voordat u een ingewikkeld ontwerp van een vloeibaar raster in Dreamweaver gaat maken, kunt u een eenvoudiger exemplaar proberen. Begin met het maken van een eenvoudige, één-kolom vloeistofrasterlay-out met behulp van deze eenvoudige instructies:

1. Kies Bestand → Nieuw.

   Het venster Nieuw document wordt geopend. Opmerking: zorg ervoor dat u het installatieproces van de site hebt voltooid voordat u aan een nieuwe lay-out voor het vloeibare raster gaat werken.

2. Selecteer Fluid Grid Layout aan de linkerkant van het scherm.

   De opties van het venster Nieuw document veranderen in de opties voor het vloeistofraster.

   

3. Geef het aantal kolommen op dat u wilt in elk van de drie lay-outs.

   Als u kolommen wilt toevoegen of verwijderen, selecteert u om de beurt het tekstveld boven elke kolom en voert u het aantal gewenste kolommen in.

4. Geef het percentage op van het browservenster dat u in elke lay-out wilt weergeven.

   Selecteer het tekstveld onder elke lay-out om de beurt en voer een getal in dat het percentage ruimte vertegenwoordigt dat u wilt dat de lay-out bedekt wanneer het ontwerp in een browservenster wordt bekeken. Standaard is de bureaubladlay-out bijvoorbeeld ingesteld op 90 procent van de beschikbare ruimte, maar u kunt deze naar 95 procent wijzigen om uzelf meer ontwerpruimte te geven en de margeruimte te verkleinen.

5. Wijzig het percentage van de kolombreedte om de hoeveelheid marge tussen elke kolom te wijzigen.

   Standaard stelt Dreamweaver elke marge in op 25 procent van de beschikbare ruimte.

6. Gebruik de vervolgkeuzelijst om een ​​doctype op te geven.

   Vloeiende rasterlay-outs worden standaard gemaakt met behulp van het HTML5-doctype. Tenzij u het doctype moet wijzigen om meer compatibel te zijn met andere opmaak die in uw website wordt gebruikt, is HMTL5 de aanbevolen optie voor responsieve webontwerpen.

7. Klik op Maken.

   Het dialoogvenster Opslaan als wordt geopend om een ​​CSS-bestand op te slaan.

8. Voer een naam in voor uw CSS-bestand en klik op Opslaan.

   Een nieuw HTML-bestand wordt geopend in de Dreamweaver-werkruimte, maar is nog niet opgeslagen. Het CSS-bestand dat u noemt, wordt opgeslagen en de naam ervan wordt zichtbaar in het paneel Bestanden.

   Opmerking: Anders dan bij het maken van andere typen pagina's in Dreamweaver, wordt het CSS-bestand eerst opgeslagen en wordt het HTML-bestand in een latere stap opgeslagen.

9. Kies Bestand → Opslaan

   Het dialoogvenster Opslaan als wordt geopend.

10. Voer een naam in voor uw HTML-bestand en klik op OK.

    Het dialoogvenster Opslaan als wordt gesloten en er verschijnt een melding in Dreamweaver met de mededeling dat voor de indeling van uw vloeistofraster twee extra bestanden nodig zijn: boilerplate. css en reageer. min. js.

11. Klik op OK om de standaard te kopiëren.css en reageer. min. js-bestanden naar uw sitemap.

    Alle drie de bestanden worden toegevoegd aan het paneel Bestanden en u keert terug naar het zojuist genoemde HTML-bestand dat is geopend in de Dreamweaver-werkruimte.

    

12. Geef de pagina een titel door tekst in te voeren in het veld Titel bovenaan de werkruimte.

En daarmee is het proces voltooid van het maken van een nieuwe set bestanden voor uw vloeibare rasterlay-out.