I dokumentfönstret placerar du markören
där du vill att div-taggen ska visas.
Senast uppdaterad den
25 sep. 2023
Lär dig använda div-taggar när du vill centrera innehållsblock, skapa kolumneffekter, skapa olika färgområden och mycket annat.
Du kan skapa sidlayouter genom att manuellt infoga div-taggar och tillämpa CSS-positioneringsstilar på dem. En div-tagg är en tagg som definierar logiska uppdelningar inom innehållet på en webbsida. Du kan använda div-taggar för att centrera innehållsblock, skapa kolumneffekter, skapa olika färgområden och mycket mer.
Om du inte är bekant med att använda div-taggar och Cascading Style Sheets (CSS) för att skapa webbsidor kan du skapa en CSS-layout baserad på en av de fördesignade layouter som kommer med Dreamweaver. Om du inte är bekväm med att arbeta med CSS, men är bekant med att använda tabeller, kan du även prova att använda tabeller.
Infoga div-taggar
Du kan använda div-taggar för att skapa CSS-layoutblock och placera dem i ditt dokument. Detta är användbart om du har en befintlig CSS-stilmall med positioneringsstilar kopplade till ditt dokument. Dreamweaver gör det möjligt för dig att snabbt infoga en div-tagg och tillämpa befintliga stilar på den.
Gör något av följande:
Välj Infoga > HTML > Div.
I HTML-kategorin i panelen Infoga klickar du på Div.
Ange något av följande alternativ:
Infoga
Låter dig välja platsen för div-taggen och taggnamnet om det inte är en ny tagg.
Klass
Visar det klassformat som för tillfället används i taggen. Om du har kopplat en stilmall visas klasser som definierats i den stilmallen i listan. Använd den här snabbmenyn för att välja den stil du vill tillämpa på taggen.
ID
Gör att du kan ändra det namn som används för att identifiera div-taggen. Om du har kopplat en formatmall visas ID:n som har definierats i den formatmallen i listan. ID:n för block som redan finns i ditt dokument listas inte.
Obs!
Dreamweaver varnar dig om du anger samma ID som en annan tagg i ditt dokument.
Ny CSS-regel
Öppnar dialogrutan Ny CSS-regel.
Klicka på OK.
div-taggen visas som en ruta i dokumentet med platshållartext. När du för pekaren över kanten på rutan markerar Dreamweaver den.
Om div-taggen är absolut positionerad blir den ett AP-element. (Du kan redigera div-taggar som inte är absolut positionerade.)
Redigera div-taggar
Efter att du har infogat en div-tagg kan du manipulera den eller lägga till innehåll i den.
Obs!
Div-taggar som är absolut positionerade blir AP-element.
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.
Markera div-taggen genom att göra något av följande:
- Klicka på kantlinjen för div-taggen.
Obs!
Leta efter markeringen för att se kanten.
Klicka i div-taggen och tryck på Ctrl+A (Windows) eller Kommando+A (Macintosh) två gånger.
Klicka i div-taggen och markera sedan div-taggen från taggväljaren längst ned i dokumentfönstret.
Välj Fönster > CSS Designer för att öppna CSS Designer-panelen om den inte redan är öppen.
Regler som tillämpas på div-taggen visas i panelen.
Redigera efter behov.
Ändra markeringsfärgen för div-taggar
När du för pekaren över kanten på en div-tagg i designvyn markerar Dreamweaver taggens kantlinjer.Du kan aktivera eller inaktivera markering efter behov, eller ändra markeringsfärgen i dialogrutan Inställningar.
Välj Redigera > Inställningar (Windows) eller Dreamweaver > Inställningar (Mac OS).
Välj Markering i kategorilistan till vänster.
Gör någon av följande ändringar och klicka på OK:
Om du vill ändra markeringsfärgen för div-taggar klickar du först på färglådan för svävning (mouse-over) och väljer sedan en markeringsfärg med färgväljaren (eller anger ett hexadecimalt värde för markeringsfärgen i textrutan).
Om du vill aktivera eller inaktivera markering för div-taggar markerar eller avmarkerar du kryssrutan Visa för mouse-over.
Obs!
Dessa alternativ påverkar alla objekt, till exempel tabeller, som Dreamweaver markerar när du flyttar pekaren över dem.
CSS-layoutblock
Du kan visualisera CSS-layoutblock medan du arbetar i designvyn. Ett CSS-layoutblock är ett HTML-sidelement som du kan placera var som helst på din sida. 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.Här följer några exempel på element som betraktas som CSS-layoutblock i Dreamweaver:
En div-tagg
En bild med en absolut eller relativ position tilldelad till den
En a-tagg med stilen display:block tilldelad till den
Ett stycke med en absolut eller relativ position tilldelad till det
Obs!
För visuell renderingsändamål inkluderar CSS-layoutblock inte infogade element (det vill säga element vars kod faller inom en textrad), eller enkla blockelement som stycken.
Dreamweaver tillhandahåller ett antal visuella hjälpmedel för att visa CSS-layoutblock. Du kan till exempel aktivera konturer, bakgrunder och boxmodellen för CSS-layoutblock medan du designar. Du kan också visa informationsrutor som visar egenskaper för ett valt CSS-layoutblock när du flyttar muspekaren över layoutblocket.
Följande lista över visuella hjälpmedel för CSS-layoutblock beskriver vad Dreamweaver renderar som synligt för varje:
CSS-lagerkonturer
Visar konturer för alla CSS-layoutblock på sidan.
CSS-lagerbakgrunder
Visar tillfälligt tilldelade bakgrundsfärger för enskilda CSS-layoutblock och döljer alla andra bakgrundsfärger eller bilder som normalt visas på sidan.
När du aktiverar det visuella hjälpmedlet för att visa bakgrunder för CSS-layoutblock tilldelar Dreamweaver automatiskt varje CSS-layoutblock en distinkt bakgrundsfärg.(Dreamweaver väljer färgerna med en algoritmisk process – det finns inget sätt för dig att tilldela färgerna själv.)De tilldelade färgerna är visuellt distinkta och är utformade för att hjälpa dig att skilja mellan CSS-layoutblock.
CSS-layoutrutmodell
Visar boxmodellen (det vill säga utfyllnad och marginaler) för det valda CSS-layoutblocket.
Visa CSS-layoutblock
Du kan aktivera eller inaktivera visuella hjälpmedel för CSS-layoutblock efter behov. För att visa alla CSS-layoutblock väljer du Visa > Alternativ för designvy > Visuella hjälpmedel.
Du kan aktivera eller inaktivera CSS-layoutbakgrunder, CSS-layoutboxmodell och CSS-layoutkonturer.
Skapa snygga webbplatser i Dreamweaver
Designa, koda och hantera dynamiska webbplatser med ett kraftfullt allt-i-ett-verktyg.
