Vloeiende elementen toevoegen aan een lay-out in Dreamweaver - dummies

Nadat u een vloeiende rasterlay-out hebt gemaakt in Dreamweaver, is de volgende stap het toevoegen van labels of andere elementen om de secties van het ontwerp samen te stellen. U hebt twee opties wanneer u pagina's ontwerpt in Dreamweaver CC: tags gebruiken of HTML5-tags gebruiken.

Beide werken op dezelfde manier in deze vloeiende lay-outs, maar het gebruik van HTML5-tags, zoals de tags en, heeft enig voordeel, omdat de tags extra betekenis en structuur toevoegen aan uw webpagina.

Volg deze instructies om tags, HTML5-tags en andere elementen toe te voegen aan een vloeiende rasterlay-out:

1. Kies Invoegen → Structuur → Navigatie.

   U kunt ook op Navigatie klikken in het deelvenster Structuur invoegen.

2. Schakel het selectievakje Invoegen als vloeiend element in het dialoogvenster Invoegen in.

   Wanneer u de lay-outfuncties voor het vloeiende raster gebruikt, moet u deze optie selecteren wanneer u tags toevoegt.

   

3. Selecteer in het dialoogvenster Invoegen of u de klasse- of ID-selector wilt gebruiken om een ​​nieuwe stijl te maken voor de tag die u invoegt en voer vervolgens een naam in voor de nieuwe stijl.

   Zelfs als u HTML5-tags invoegt, moet u een overeenkomstige klasse- of ID-stijl maken die kan worden gebruikt om het element in alle drie lay-outs op te maken.

   Stijltypen moeten beginnen met een punt (.) En de namen van de ID-stijlen moeten beginnen met het hekje (#).

4. Klik op OK.

   De tag wordt toegevoegd aan de lay-out en vormt een nieuw vak in de lay-out en de bijbehorende stijlnaam wordt driemaal toegevoegd aan de CSS-lay-out.

5. Selecteer de eerste tag die in de lay-out was opgenomen en klik vervolgens op het prullenbakpictogram in de rechterbenedenhoek van de tag om deze te verwijderen.

   Hoewel u de initiële tag kunt opnemen in de lay-outs van het vloeibare raster, of de stijl die erop is toegepast kunt hernoemen.

6. Kies Invoegen → Structuur → Artikel.

   Het dialoogvenster Artikel invoegen wordt geopend (vergelijkbaar met het dialoogvenster Kop invoegen).

7. Schakel het selectievakje Invoegen als vloeiend element in het dialoogvenster Invoegen in.

8. Selecteer in het dialoogvenster Invoegen of u de klasse- of ID-selector wilt gebruiken om een ​​nieuwe stijl te maken voor de tag die u invoegt en voer een naam in voor de nieuwe stijl.

9. Klik op OK.

   De tag wordt toegevoegd aan de lay-out en vormt een nieuw vak in de lay-out en de bijbehorende stijlnaam wordt driemaal toegevoegd aan de CSS-lay-out.

10. Voeg zoveel elementen toe als u wilt voor uw lay-out door stap 6-9 te herhalen.

    U kunt HTML5-elementen aan uw vloeiende rasterlay-out toevoegen door op de bijbehorende pictogrammen in het deelvenster Structuur invoegen te klikken: één navigatie, één koptekst, twee artikelen en één voettekst .

    Houd er rekening mee dat Dreamweaver in de code het voorvoegsel vloeistof- toevoegt aan de naam van elke stijl die u maakt voor uw vloeibare rasterlay-outs.