Hvordan redigere stilene i en CSS-layout i Dreamweaver

Etter at du har opprettet en ny side med et CSS-oppsett i Dreamweaver, har du et tilsynelatende uendelig antall alternativer for å redigere den, men først må du bestemme hvilke stiler i stilarket som samsvarer med elementene du vil redigere.

Som du sikkert kan forestille deg, kan du redigere stilene i en CSS-layout på mange måter for å lage dine egne design.

Etter at du har justert de eksisterende stilene for å få det grunnleggende sidedesignet slik du vil ha det, kan du lage så mange ekstra stiler du ønsker.

Hvordan sjekke de tilgjengelige stilene og gjøre grunnleggende endringer

Du kan bruke de samme grunnleggende instruksjonene med et hvilket som helst CSS-oppsett som er inkludert i Dreamweaver. Følg disse trinnene for å redigere stiler i en CSS-layout:

Åpne en sidefil som er basert på et Dreamweaver CSS-oppsett, og velg Vindu → CSS-stiler (eller klikk på CSS Designer-fanen for å utvide panelet).

CSS Designer-panelet åpnes eller utvides.

Klikk for å velge navnet på stilarket i kildepanelet øverst i CSS Designer.

Alle stilene knyttet til den nye siden er oppført i Velgere-panelet.

Velg navnet på en stil som er oppført i CSS Designer Selectors-panelet.

De tilsvarende CSS-reglene som er definert for stilen, vises i egenskapspanelet, nederst i CSS Designer-panelet. Å klikke gjennom listen over stiler og gjennomgå de tilsvarende reglene er en god måte å få en rask oversikt over designet og for å se hvor de ulike sideformateringsalternativene er lagret.

HTML5-header-, .nav- og bunntekst-taggene kontrollerer hoveddelene på siden. For eksempel inkluderer overskriftsstilen en regel som gjør bakgrunnsfargen grønn. For å endre fargen på overskriftsområdet øverst på siden, endrer du derfor bakgrunnsfargeinnstillingen i overskriftsregelen.

Hvordan redigere innstillinger for hele siden

Følg disse trinnene for å redigere innstillinger for hele siden – for eksempel bakgrunnsfargen på siden eller hovedfonten, størrelsen og fargen på teksten som brukes på hele siden:

I CSS Designer Selectors-panelet velger du stilen som heter body.

Egenskapene som er definert i den valgte stilregelen, vises i Egenskaper-panelet.

Klikk på T-ikonet øverst i egenskapspanelet, og endre eller legg til ønsket skrifttype og andre tekstinnstillinger.

Du kan endre skrifttype, størrelse, stil og vekt. For å endre avstanden mellom tekstlinjer, endre linjehøyden.

Rull ned til Bakgrunnsområdet i Egenskaper-panelet og bruk fargebrønnen i Bakgrunnsfarge-feltet for å spesifisere en farge for hele bakgrunnen på siden.

Alternativt kan du angi en hvilken som helst heksadesimal fargekode i Bakgrunnsfarge-feltet eller bruke pipetten til å prøve en hvilken som helst farge. For å legge til et bakgrunnsbilde, klikk i URL-feltet i Bakgrunn-delen og klikk deretter på Bla gjennom-knappen som vises og velg bildet du vil bruke som bakgrunn. Bruk Background-Repeat-ikonene for å spesifisere hvordan bakgrunnsbildet skal gjentas på siden.

Gjør eventuelle andre endringer eller tillegg til stilregelen.

Endringer i stilregler i egenskapspanelet lagres automatisk og brukes på innhold som er formatert med regelen.

Hvordan tilpasse innholdsområder

Følg disse trinnene for å endre bredden eller andre innstillinger for hovedinnholdsområdene, som kontrollerer den totale størrelsen på siden og topptekst, bunntekst og sidefelt:

Slik endrer du bredden på hele hoveddesignområdet:

Klikk på .container-stilen i Selectors-panelet i CSS Designer-panelet.

Egenskapene til .container-stilregelen vises i Egenskaper-panelet, hvor du også kan redigere stilen.

Endre størrelsen i Bredde-feltet eller skriv inn et nytt tall for ønsket sidebredde.

Bredden på sidedesignet endres automatisk basert på størrelsen du skrev inn. Når du endrer bredden på .container-stilen, endrer du bredden på hele designet fordi alle

koder og andre elementer er inneholdt i

formatert med .container-stilen – og de er alle klar til å utvides for å fylle .container

.

For å endre størrelsen på innholdsområdet på siden, velg stilen kalt .content og spesifiser størrelsen og andre alternativer du ønsker i Egenskaper-panelet.

Hvis du endrer bredden på innholdsområdet i en layout som inkluderer et sidefelt, må du også endre bredden på sidefeltet.

For å endre bakgrunnsfargen til en stil på siden, klikk på navnet på den tilsvarende stilen og endre innstillingene i Bakgrunn-delen av Egenskaper-panelet.

For eksempel, i CSS-oppsettene i Dreamweaver, er sidefeltet definert i en stil kalt .sidebar1. For å endre bakgrunnsfargen klikker du på .sidebar1 i Selectors-panelet, velger Bakgrunnskategorien i Egenskaper-panelet og velger fargen du ønsker. På samme måte, for å endre bakgrunnsfargen til overskriften, velg stilen som heter overskriften i Selectors-panelet og bruk fargebrønnen.

Slik legger du til et bilde i overskriften:

Velg plassholderbildet merket Sett inn logo og trykk på Delete- eller Backspace-tasten.

Velg Sett inn → Bilde → Bilde og velg et bilde ved å bruke dialogboksen Velg bildekilde.

Erstatt tekst og sett inn bilder i sidefeltet og hovedinnholdsområdene.

Du kan legge til eller erstatte tekst og sette inn bilder på hvilken som helst side som er opprettet fra en CSS-layout, akkurat som du ville gjort på en hvilken som helst annen nettside.

Velg Fil → Lagre alle for å lagre siden og stilene.