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.
-
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.
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.
-
Obs!
Leta efter markeringen för att se kanten.
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.
-
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.
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-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.
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.
Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.