Användarhandbok Avbryt

Arbeta med div-taggar

Sök

Senast uppdaterad den 2 maj 2021

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.

Placera insättningspunkten där du vill infoga div-taggen i dokumentfönstret.
Gör något av följande:
- Välj Infoga > HTML > Div.
- Klicka på Div i kategorin HTML på panelen Infoga.
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.
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.

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

Välj Redigera > Inställningar (Windows) eller Dreamweaver > Inställningar (Macintosh).
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 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.

Mer

Få hjälp snabbare och enklare

Ny användare?