Hur man lägger till vätskeelement i en layout i Dreamweaver - dummies

När du har skapat en vätskegridlayout i Dreamweaver, är nästa steg att lägga till taggar eller andra element för att kompensera delarna av designen. Du har två alternativ när du designar sidor i Dreamweaver CC: använd taggar eller använd HTML5-taggar.

Båda fungerar på samma sätt i dessa vätskeformat, men med HTML5-taggar, till exempel och taggarna, har någon fördel, eftersom taggarna lägger till ytterligare mening och struktur för din webbsida.

Följ anvisningarna nedan för att lägga till taggar, HTML5-taggar och andra element i en flytnätlayout:

1. Välj Infoga → Struktur → Navigering.

   Alternativt kan du klicka på Navigation i Structure Insert-panelen.

2. Markera kryssrutan Insert as Fluid Element i dialogrutan Infoga.

   När du använder installationsfunktionerna för fluidnätet måste du välja det här alternativet när du lägger till taggar.

   

3. Välj i dialogrutan Infoga om du vill använda klass- eller ID-väljaren för att skapa en ny stil för taggen du lägger in och ange sedan ett namn för den nya stilen.

   Även om du lägger in HTML5-taggar måste du skapa en motsvarande klass- eller ID-stil som kan användas för att formatera elementet i alla tre layouterna.

   Klassnamn namn måste börja med en punkt (.) Och ID-stil namn måste börja med pund tecknet (#).

4. Klicka på OK.

   Koden läggs till i layouten, bildar en ny ruta i layouten och motsvarande stilnamn läggs till tre gånger i CSS-layouten.

5. Välj den ursprungliga taggen som inkluderades i layouten och klicka sedan på den lilla papperskorgikon som visas längst ned till höger om taggen för att radera den.

   Även om du kan behålla den ursprungliga taggen i fluidsnittslayouter, eller du kan byta namn på den stil som appliceras på den.

6. Välj Infoga → Struktur → Artikel.

   Dialogrutan Infoga artikel öppnas (liknande dialogrutan Infoga rubrik).

7. Markera kryssrutan Insert as Fluid Element i dialogrutan Infoga.

8. I dialogrutan Infoga väljer du om du vill använda klass- eller ID-väljaren för att skapa en ny stil för taggen du lägger in och ange ett namn för den nya stilen.

9. Klicka på OK.

   Koden läggs till i layouten, bildar en ny ruta i layouten och motsvarande stilnamn läggs till tre gånger i CSS-layouten.

10. Lägg till så många element som du vill ha för din layout genom att upprepa steg 6-9.

    Du kan lägga till HTML5-element i ditt fluidgridlayout genom att klicka på motsvarande symboler i Structure Insert-panelen: en navigering, en rubrik, två artiklar och en sidfot .

    Observera att i koden lägger Dreamweaver prefixet fluid- till namnet på varje stil du skapar för dina vätskegridlayouter.