Hvordan du tilføjer væskeelementer til en layout i Dreamweaver - dummier

Når du har oprettet et fluidgitterlayout i Dreamweaver, er det næste trin at tilføje tags eller andre elementer for at udfylde sektionerne af designet. Du har to muligheder, når du designer sider i Dreamweaver CC: Brug tags eller brug HTML5 tags.

Begge arbejder på samme måde i disse væskeformater, men ved hjælp af HTML5-tags, som f.eks. Og taggerne, er det en fordel, fordi tagsne tilføjer yderligere mening og struktur til din webside.

Følg disse instruktioner for at tilføje tags, HTML5-tags og andre elementer til et væskeformet layout:

1. Vælg Indsæt → Struktur → Navigation.

   Alternativt kan du klikke på Navigation i panelet Structure Insert.

2. Marker afkrydsningsfeltet Indsæt som flydende element i dialogboksen Indsæt.

   Når du anvender væskeformet layoutfunktioner, skal du vælge denne indstilling, når du tilføjer tags.

   

3. Vælg i dialogboksen Indsæt, om du vil bruge klassen eller ID-vælgeren til at oprette en ny stil til det tag, du indsætter, og indtast derefter et navn til den nye stil.

   Selvom du indsætter HTML5-tags, skal du oprette en tilsvarende klasse eller ID-stil, som kan bruges til at formatere elementet i alle tre layouter.

   Klassestilnavne skal begynde med en prik (.) Og ID-stil navne skal begynde med pundskiltet (#).

4. Klik på OK.

   Tagget tilføjes til layoutet, danner en ny boks i layoutet, og det tilsvarende stilnavn tilføjes tre gange til CSS-layoutet.

5. Vælg det indledende mærke, der var inkluderet i layoutet, og klik derefter på ikonet for lille papirkurv, der vises nederst til højre for mærket for at slette det.

   Selv om du kan beholde det oprindelige tag i fluidsnitlayouterne, eller du kan omdøbe den stil, der er anvendt på den.

6. Vælg Indsæt → Struktur → Artikel.

   Dialogboksen Indsæt artikel åbnes (svarende til dialogboksen Indsæt overskrift).

7. Marker afkrydsningsfeltet Indsæt som flydende element i dialogboksen Indsæt.

8. Vælg i dialogboksen Indsæt, om du vil bruge klassen eller ID-vælgeren til at oprette en ny stil til det tag, du indsætter, og indtast et navn til den nye stil.

9. Klik på OK.

   Tagget tilføjes til layoutet, danner en ny boks i layoutet, og det tilsvarende stilnavn tilføjes tre gange til CSS-layoutet.

10. Tilføj så mange elementer som du vil have til dit layout ved at gentage trin 6-9.

    Du kan tilføje HTML5 elementer til dit væskenet layout ved at klikke på deres tilsvarende ikoner i Structure Insert-panelet: en navigation, et overskrift, to artikler og en footer .

    Bemærk, at Dreamweaver i koden tilføjer præfikset fluid- til navnet på hver stil, du opretter til dine flydende layouts.