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 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.

Infoga div-taggar

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.

  1. Placera insättningspunkten där du vill infoga div-taggen i dokumentfönstret.
  2. Gör något av följande:
    • Välj Infoga > HTML > Div.

    • Klicka på Div i kategorin HTML på panelen Infoga.

  3. Ange något av följande alternativ:

    Infoga

    Låter dig välja var div-taggen och taggnamnet ska placeras 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 formatmall visas klasserna som har definierats i den formatmallen i listan. Använd den här snabbmenyn om du vill välja vilket format som ska användas 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 dokumentet visas inte i listan.

    Obs!

    En varning visas om du anger samma ID som för en annan tagg i dokumentet.

    Ny CSS-regel

    Öppnar dialogrutan Ny CSS-regel.

  4. Klicka på OK.

    div-taggen visas som en ruta i dokumentet med platshållartext. När du flyttar pekaren över rutans kant markeras 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

När du har infogat en div-tagg kan du redigera 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.

  1. Markera div-taggen genom att göra något av följande:
    • Klicka på div-taggens kant.

    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.

  2. Välj Fönster > CSS Designer för att öppna panelen CSS Designer om den inte redan är öppen.

    Regler som används i div-taggen visas i panelen.

  3. Redigera efter behov.

Ä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.

  1. Välj Redigera > Inställningar (Windows) eller Dreamweaver > Inställningar (Macintosh).
  2. Välj Markering i kategorilistan till vänster.
  3. 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 svävning (mouse-over).

    Obs!

    De här alternativen påverkar alla objekt, till exempel tabeller, som markeras i programmet när du flyttar pekaren över dem.

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

Obs!

På grund av den visuella återgivningen inkluderar CSS-layoutblock inte infogade element (det vill säga element vars kod finns inom en textrad) eller enkla blockelement som stycken.

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:

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 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.

CSS-layoutrutmodell

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.

Denna produkt är licensierad enligt en Creative Commons Erkännande-Ickekommersiell-Dela Lika 3.0 Unported-licens  Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.

Juridiska meddelanden   |   Onlinesekretesspolicy