Hur man redigerar stilerna i en CSS Layout i Dreamweaver - dummies

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

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

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

Så här kontrollerar du de tillgängliga stilar och gör grundläggande redigeringar

Du kan använda samma grundläggande instruktioner med en CSS-layout som ingår i Dreamweaver. Gör så här för att redigera stilar i en CSS-layout:

Öppna en sidfil som är baserad i en Dreamweaver CSS-layout och välj Fönster → CSS-format (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å stilarket i panelen Källor längst upp i CSS Designer.

Alla stilar som är associerade med den nya sidan anges i panelen Selectors.
Välj namnet på vilken stil som finns listad i panelen CSS Designer Selectors.

De motsvarande CSS-reglerna som definieras för stilen visas på panelen Egenskaper längst ner på CSS Designer-panelen. Att klicka på listan över stilar och granska motsvarande regler är ett bra sätt att få en snabb överblick över designen och för att se var de olika sidformatalternativen lagras.

HTML5-rubriken,. nav- och sidfottaggar kontrollerar huvuddelarna på sidan. Till exempel innehåller huvudstilen en regel som gör bakgrundsfärgen grön. För att ändra färgen på rubrikområdet längst upp på sidan ändrar du bakgrundsfärginställningen i rubrikregeln.

Så här redigerar du inställningar över hela sidan

För att redigera inställningar över hela sidan - till exempel bakgrundsfärgen på sidan eller huvudfontsidan, storleken och färgen på texten som används i hela sidan - följ dessa steg:

Välj den stil som heter kropp i CSS Designer Selectors-panelen.

Egenskaperna som definieras i den valda stilregeln visas på panelen Egenskaper.
Klicka på T-ikonen längst upp på Egenskaper-panelen och ändra eller lägg till önskat teckensnitt och andra textinställningar.

Du kan ändra teckensnittets ansikte, storlek, stil och vikt. För att ändra mellanslag mellan textrader ändrar du linjens höjd.
Bläddra ner till Bakgrundsområdet 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 någon hexadecimal färgkod i fältet Bakgrundsfärg eller använd eyedroppen för att prova vilken färg som helst. Om du vill lägga till en bakgrundsbild klickar du i URL-fältet i avsnittet Bakgrund och klickar sedan på knappen Bläddra som visas och väljer den bild som du vill tjäna som bakgrund. Använd ikonerna Bakgrundsrepetition för att ange hur bakgrundsbilden ska repeteras på sidan.
Gör några andra ändringar eller tillägg till stilregeln.

Ändringar av stilregler i Egenskaper-panelen sparas automatiskt och tillämpas på innehåll som är formaterat med regeln.

Så här anpassar du innehållsområden

Så här ändrar du bredden eller andra inställningar i huvudinnehållsområdena, som styr sidans totala storlek och sidhuvud, sidfot och sidfält, så här:

För att ändra Bredden på hela huvuddesignområdet:
1. Klicka på. behållarstil i panelen Selectors på CSS Designer-panelen.
  
  Egenskaperna hos. Behållarstilregeln visas på panelen Egenskaper, där du också kan redigera stilen.
2. Ändra storleken i fältet Bredd eller skriv ett nytt nummer för önskad sidbredd.
  
  Bredden på siddesignen ändras automatiskt baserat på storleken du angav. När du ändrar bredden på. behållarstil, ändrar du bredden på hela designen eftersom alla taggar och andra element finns i formaterad med. container stil - och de är alla utvalda för att expandera för att fylla. behållare.
Om du vill ändra storleken på innehållsområdet på sidan väljer du stilen som heter. innehåll och ange storleken och andra alternativ du vill ha i 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å sidopanelen.
Om du vill ändra bakgrundsfärgen på vilken stil som helst på sidan, klickar du på namnet på motsvarande stil och ändrar inställningarna i avsnittet Bakgrund på Egenskaper-panelen.

I CSS-layouterna i Dreamweaver definieras sidofältet i en stil som heter. sidebar1. Så, för att ändra bakgrundsfärgen, skulle du klicka. sidebar1 i panelen Selectors väljer du Bakgrundskategorin 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 den stil som heter rubrik i panelen Selectors och använd färgbrunnen.
Så här lägger du till en bild i rubriken:
1. Välj platshållarens bild med etiketten Insert Logo och tryck på Delete eller Backspace-tangenten.
2. Välj Infoga → Bild → Bild och välj en bild med dialogrutan Välj bildkälla.
Ersätt text och sätt in bilder i sidofältet och huvudinnehållsområdena.

Du kan lägga till eller ersätta text och infoga bilder på en sida som skapats från en CSS-layout, precis som du skulle på någon annan webbsida.
Välj Arkiv → Spara alla för att spara sidan och stilar.