Hur man redigerar stilarna i en CSS-layout i Dreamweaver

Efter att du har skapat en ny sida med en CSS-layout i Dreamweaver har du ett till synes oändligt antal alternativ för att redigera den, men först måste du bestämma vilka stilar i stilmallen som motsvarar de element du vill redigera.

Som du säkert kan föreställa dig kan du redigera stilarna i en CSS-layout på många sätt för att skapa dina egna designs.

När du har justerat de befintliga stilarna för att få den grundläggande siddesignen som du vill ha den, kan du skapa så många ytterligare stilar du vill.

Hur man kollar in tillgängliga stilar och gör grundläggande redigeringar

Du kan använda samma grundläggande instruktioner med vilken CSS-layout som helst som ingår i Dreamweaver. För att redigera stilar i en CSS-layout, följ dessa steg:

Öppna en sidfil som är baserad i en Dreamweaver CSS-layout och välj Fönster → CSS-stilar (eller klicka på fliken CSS Designer för att expandera panelen).

CSS Designer-panelen öppnas eller expanderas.

Klicka för att välja namnet på formatmallen i panelen Källor högst upp i CSS Designer.

Alla stilar som är associerade med den nya sidan listas i väljarpanelen.

Välj namnet på valfri stil som listas i CSS Designer Selectors-panelen.

Motsvarande CSS-regler som definierats för stilen visas på panelen Egenskaper, längst ned på panelen CSS Designer. Att klicka igenom listan med stilar och granska deras motsvarande regler är ett bra sätt att få en snabb överblick över designen och se var de olika sidformateringsalternativen finns lagrade.

HTML5-taggarna för sidhuvud, .nav och sidfot styr huvuddelarna på sidan. Till exempel innehåller rubrikstilen en regel som gör bakgrundsfärgen grön. För att ändra färgen på rubrikområdet överst på sidan ändrar du alltså bakgrundsfärginställningen i rubrikregeln.

Hur man redigerar sidomfattande inställningar

För att redigera sidomfattande inställningar – som bakgrundsfärgen på sidan eller huvudteckensnittet, storleken och färgen på texten som används på sidan – följ dessa steg:

I panelen CSS Designer Selectors väljer du stilen med namnet body.

Egenskaperna som definieras i den valda stilregeln visas på panelen Egenskaper.

Klicka på T-ikonen högst upp på panelen Egenskaper och ändra eller lägg till önskat teckensnitt och andra textinställningar.

Du kan ändra teckensnitt, storlek, stil och vikt. För att ändra avståndet mellan textraderna, ändra radhöjden.

Rulla ned till området Bakgrund på panelen Egenskaper och använd färgbrunnen i fältet Bakgrundsfärg för att ange en färg för hela bakgrunden på sidan.

Alternativt kan du ange valfri hexadecimal färgkod i fältet Bakgrundsfärg eller använda pipetten för att prova valfri färg. För att lägga till en bakgrundsbild, klicka i URL-fältet i avsnittet Bakgrund och klicka sedan på knappen Bläddra som visas och välj bilden som du vill använda som bakgrund. Använd Background-Repeat-ikonerna för att ange hur bakgrundsbilden ska upprepas på sidan.

Gör andra ändringar eller tillägg till stilregeln.

Ändringar av stilregler i egenskapspanelen sparas automatiskt och tillämpas på innehåll som formaterats med regeln.

Hur man anpassar innehållsområden

Följ dessa steg för att ändra bredden eller andra inställningar för huvudinnehållsområdena, som styr den övergripande storleken på sidan och sidhuvudet, sidfoten och sidofältet:

Så här ändrar du bredden på hela huvuddesignområdet:

Klicka på .container-stilen i panelen Väljare på panelen CSS Designer.

Egenskaperna för stilregeln .container visas i panelen Egenskaper, där du också kan redigera stilen.

Ändra storleken i fältet Bredd eller skriv ett nytt nummer för önskad sidbredd.

Bredden på siddesignen ändras automatiskt baserat på storleken du angett. När du ändrar bredden på .container-stilen ändrar du bredden på hela designen eftersom alla

taggar och andra element finns i

formaterade med .container-stilen — och de är alla inställda på att expandera för att fylla .containern

.

För att ändra storleken på innehållsområdet på sidan, välj stilen med namnet .content och ange storleken och andra alternativ du vill ha på panelen Egenskaper.

Om du ändrar bredden på innehållsområdet i en layout som innehåller ett sidofält måste du också ändra bredden på sidofältet.

För att ändra bakgrundsfärgen för en stil på sidan, klicka på namnet på motsvarande stil och ändra inställningarna i avsnittet Bakgrund på panelen Egenskaper.

Till exempel, i CSS-layouterna i Dreamweaver, är sidofältet definierat i en stil som heter .sidebar1. För att ändra bakgrundsfärgen klickar du på .sidebar1 i panelen Väljare, väljer kategorin Bakgrund på panelen Egenskaper och väljer den färg du vill ha. På samma sätt, för att ändra bakgrundsfärgen på rubriken, välj stilen med namnet rubrik i panelen Väljare och använd färgbrunnen.

Så här lägger du till en bild i rubriken:

Välj platshållarbilden märkt Infoga logotyp och tryck på Delete- eller Backstegstangenten.

Välj Infoga → Bild→ Bild och välj en bild med hjälp av dialogrutan Välj bildkälla.

Byt ut text och infoga bilder i sidofältet och huvudinnehållsområdena.

Du kan lägga till eller ersätta text och infoga bilder på vilken sida som helst som skapats från en CSS-layout, precis som på vilken annan webbsida som helst.

Välj Arkiv → Spara alla för att spara sidan och stilarna.