Sådan redigeres stilarterne i et CSS-layout i Dreamweaver

Når du har oprettet en ny side med et CSS-layout i Dreamweaver, har du et tilsyneladende uendeligt antal muligheder for at redigere den, men først skal du bestemme, hvilke typografier i typografiarket der svarer til de elementer, du vil redigere.

Som du sikkert kan forestille dig, kan du redigere stilene i et CSS-layout på mange måder for at skabe dine egne designs.

Når du har justeret de eksisterende stilarter for at få det grundlæggende sidedesign, som du ønsker det, kan du oprette så mange yderligere stile, som du ønsker.

Sådan tjekker du de tilgængelige stilarter og laver grundlæggende redigeringer

Du kan bruge de samme grundlæggende instruktioner med ethvert CSS-layout, der er inkluderet i Dreamweaver. Følg disse trin for at redigere typografier i et CSS-layout:

Åbn en sidefil, der er baseret på et Dreamweaver CSS-layout, og vælg Vindue→CSS-typografier (eller klik på fanen CSS Designer for at udvide panelet).

CSS Designer-panelet åbnes eller udvides.

Klik for at vælge navnet på typografiarket i panelet Kilder øverst i CSS Designer.

Alle de stilarter, der er knyttet til den nye side, er angivet i panelet Vælgere.

Vælg navnet på en stil, der er angivet i panelet CSS Designer Selectors.

De tilsvarende CSS-regler, der er defineret for stilen, vises i panelet Egenskaber nederst i panelet CSS Designer. At klikke sig igennem listen over stilarter og gennemgå deres tilsvarende regler er en god måde at få et hurtigt overblik over designet og til at se, hvor de forskellige sideformateringsmuligheder er gemt.

HTML5-header-, .nav- og footer-tags styrer hovedsektionerne på siden. For eksempel indeholder header-stilen en regel, der gør baggrundsfarven grøn. For at ændre farven på sidehovedområdet øverst på siden ændrer du således baggrundsfarveindstillingen i overskriftsreglen.

Sådan redigeres indstillinger for hele siden

Følg disse trin for at redigere indstillinger for hele siden - såsom sidens baggrundsfarve eller hovedskrifttypen, størrelsen og farven på den tekst, der bruges på hele siden:

I panelet CSS Designer Selectors skal du vælge den stil, der hedder body.

Egenskaberne, der er defineret i den valgte stilregel, vises i panelet Egenskaber.

Klik på T-ikonet øverst i panelet Egenskaber, og skift eller tilføj den ønskede skrifttype og andre tekstindstillinger.

Du kan ændre skrifttype, størrelse, stil og vægt. For at ændre mellemrummet mellem tekstlinjerne skal du ændre linjehøjden.

Rul ned til området Baggrund i panelet Egenskaber, og brug farvefeltet i feltet Baggrundsfarve til at angive en farve for hele baggrunden på siden.

Alternativt kan du indtaste en hvilken som helst hexadecimal farvekode i feltet Baggrundsfarve eller bruge pipetten til at prøve en hvilken som helst farve. For at tilføje et baggrundsbillede skal du klikke i URL-feltet i sektionen Baggrund og derefter klikke på knappen Gennemse, der vises, og vælge det billede, du vil have som baggrund. Brug Background-Repeat-ikonerne til at angive, hvordan baggrundsbilledet skal gentages på siden.

Foretag andre ændringer eller tilføjelser til stilreglen.

Ændringer af stilregler i panelet Egenskaber gemmes automatisk og anvendes på indhold, der er formateret med reglen.

Sådan tilpasser du indholdsområder

Følg disse trin for at ændre bredden eller andre indstillinger for de vigtigste indholdsområder, som styrer sidens overordnede størrelse og sidehoved, sidefod og sidebjælke:

Sådan ændres bredden af ​​hele hoveddesignområdet:

Klik på .container-stilen i panelet Vælgere i panelet CSS Designer.

Egenskaberne for .container-stilreglen vises i panelet Egenskaber, hvor du også kan redigere stilen.

Skift størrelsen i feltet Bredde, eller indtast et nyt tal for den ønskede sidebredde.

Bredden af ​​sidedesignet ændres automatisk baseret på den størrelse, du har indtastet. Når du ændrer bredden på .container-stilen, ændrer du bredden på hele designet, fordi alle

tags og andre elementer er indeholdt i

formateret med .container-stilen — og de er alle klar til at udvides for at fylde .containeren

.

For at ændre størrelsen på indholdsområdet på siden skal du vælge typografien med navnet .content og angive størrelsen og andre indstillinger, du ønsker, i panelet Egenskaber.

Hvis du ændrer bredden af ​​indholdsområdet i et layout, der indeholder en sidebjælke, skal du også ændre bredden af ​​sidebjælken.

For at ændre baggrundsfarven for enhver stil på siden skal du klikke på navnet på den tilsvarende stil og ændre indstillingerne i sektionen Baggrund i panelet Egenskaber.

I CSS-layouterne i Dreamweaver er sidebjælken f.eks. defineret i en stil med navnet .sidebar1. For at ændre baggrundsfarven skal du således klikke på .sidebar1 i panelet Vælgere, vælge kategorien Baggrund i panelet Egenskaber og vælge den farve, du ønsker. På samme måde, for at ændre baggrundsfarven på overskriften, skal du vælge den stil, der hedder header i panelet Vælgere og bruge farven godt.

Sådan tilføjer du et billede til overskriften:

Vælg pladsholderbilledet mærket Indsæt logo, og tryk på Delete- eller Backspace-tasten.

Vælg Indsæt →Billede→Billede, og vælg et billede ved hjælp af dialogboksen Vælg billedkilde.

Erstat tekst og indsæt billeder i sidebjælken og hovedindholdsområderne.

Du kan tilføje eller erstatte tekst og indsætte billeder på enhver side, der er oprettet fra et CSS-layout, ligesom du ville gøre på enhver anden webside.

Vælg Filer → Gem alle for at gemme siden og stilene.