Du kan skapa sidlayouter genom att infoga div-taggar manuellt och använda CSS-placeringsformat i dem. En div-tagg är en tagg som definierar logiska indelningar av innehållet på en webbsida. Du kan använda div-taggar när du vill centrera innehållsblock, skapa kolumneffekter, skapa olika färgområden och mycket annat.

Om du inte är van vid att använda div-taggar och CSS (Cascading Style Sheets) för att skapa webbsidor, kan du skapa en CSS-layout baserad på en av de fördesignade layouterna som finns i Dreamweaver. Om du känner dig osäker på att arbeta med CSS, men är van vid att använda tabeller, kan du också försöka använda tabeller.

Du kan använda div-taggar när du vill skapa CSS-layoutblock och placera dem i dokumentet. Detta är användbart om du har en befintlig CSS-formatmall med placeringsformat kopplad till dokumentet. I Dreamweaver kan du snabbt infoga en div-tagg och använda befintliga format i den.

Redigera div-taggar

När du har infogat en div-tagg kan du redigera den eller lägga till innehåll i den.

När du tilldelar kanter till div-taggar eller när CSS-lagerkonturer är markerat har de synliga kanter. (CSS-lagerkonturer är markerat som standard på menyn Visa > Visuella hjälpmedel.) När du flyttar pekaren över en div-tagg markeras den. Du kan ändra markeringsfärgen eller inaktivera markering.

När du markerar en div-tagg kan du visa och redigera regler för den med CSS Designer-panelen. Du kan också lägga till innehåll i div-taggen genom att helt enkelt placera insättningspunkten i div-taggen och sedan lägga till innehåll på samma sätt som du lägger till innehåll på en sida.

Ändra markeringsfärgen för div-taggar

När du flyttar pekaren över kanten på en div-tagg i designvyn markeras taggens kanter. Du kan aktivera och inaktivera markering efter behov eller ändra markeringsfärg i dialogrutan Inställningar.

CSS-layoutblock

Du kan synliggöra CSS-layoutblock medan du arbetar i designvyn. Ett CSS-layoutblock är ett HTML-sidelement som du kan placera var som helst på sidan. Mer specifikt är ett CSS-layoutblock antingen en div-tagg utan display:inline, eller något annat sidelement som innehåller CSS-deklarationerna display:block, position:absolute eller position:relative. Nedan följer några exempel på element som betraktas som CSS-layoutblock i Dreamweaver:

• En div-tagg

• En bild som har tilldelats en absolut eller relativ position

• En a-tagg som har tilldelats formatet display:block

• Ett stycke som har tilldelats en absolut eller relativ position

I Dreamweaver finns ett antal visuella hjälpmedel för visning av CSS-layoutblock. Exempelvis kan du aktivera konturer, bakgrunder och rutmodellen för CSS-layoutblock medan du designar. Du kan också visa knappbeskrivningar som anger egenskaper för ett markerat CSS-layoutblock när du placerar muspekaren över layoutblocket.

I följande lista över visuella hjälpmedel för CSS-layoutblock beskrivs vad som återges som synligt i Dreamweaver:

Visar konturer för alla CSS-layoutblock på sidan.

Visar tillfälligt tilldelade bakgrundsfärger för enskilda CSS-layoutblock och döljer andra bakgrundsfärger eller bakgrundsbilder som normalt visas på sidan.

När du aktiverar det visuella hjälpmedlet för att visa bakgrunder för CSS-layoutblock tilldelas varje CSS-layoutblock automatiskt en särskild bakgrundsfärg i Dreamweaver. (Färgerna väljs i Dreamweaver med hjälp av en algoritmisk process – du kan inte tilldela färgerna själv.) De tilldelade färgerna är visuellt olika och har utformats för att hjälpa dig att skilja mellan CSS-layoutblocken.

Visar rutmodellen (det vill säga utfyllnad och marginaler) för det markerade CSS-layoutblocket.

Visa CSS-layoutblock

Du kan aktivera eller inaktivera visuella hjälpmedel för CSS-layoutblock efter behov. Om du vill visa alla CSS-layoutblock väljer du Visa > Designvyalternativ > Visuella hjälpmedel.

Du kan aktivera och inaktivera CSS-lagerbakgrunder, CSS-layoutrutmodell och CSS-lagerkonturer.