Placera insättningspunkten där du vill infoga div-taggen i dokumentfönstret.
Senast uppdaterad den
|
Gäller även Adobe Dreamweaver
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.
-
-
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.
Logga in på ditt konto