Sådan redigerer du stilarterne i en CSS layout i Dreamweaver - dummies

Når du har oprettet en ny side med et CSS-layout i Dreamweaver, har du et tilsyneladende uendeligt antal muligheder for redigering af det, men først du skal bestemme, hvilke stilarter i stilarket svarer til de elementer, du vil redigere.

Som du sikkert kan forestille dig, kan du redigere stilarterne i et CSS-layout på mange måder for at lave 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 stilarter som du ønsker.

Sådan checker du de tilgængelige stilarter og foretager grundlæggende redigeringer

Du kan bruge disse samme grundlæggende instruktioner med et CSS-layout, der er inkluderet i Dreamweaver. For at redigere stilarter i et CSS-layout skal du følge disse trin:

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

   CSS Designer-panelet åbner eller udvider.

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

   Alle stilarter, der er forbundet med den nye side, er angivet i panelet Selectors.

   

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

   De tilsvarende CSS-regler, der er defineret for stilen, vises i panelet Egenskaber, nederst på CSS Designer-panelet. Hvis du klikker på listen over stilarter og gennemser deres tilsvarende regler, er det en god måde at få et hurtigt overblik over designet og for at se, hvor de forskellige sideformateringsindstillinger er gemt.

HTML5-overskriften,. nav- og footer-tags styrer hovedafsnittene på siden. For eksempel omfatter overskriftsstilen en regel, der gør baggrundsfarven grøn. For at ændre farven på overskriftsområdet øverst på siden ændrer du baggrundsfarveindstillingen i overskriftsregel.

Sådan redigeres indstillinger for hele siden

For at redigere indstillinger for hele siden - f.eks. Baggrundsfarven på siden eller hovedformatets ansigt, størrelse og farve på teksten, der bruges i hele siden - følg disse trin:

1. I panelet CSS Designer Selectors skal du vælge den stil, der er navngivet.

   Egenskaberne defineret i den valgte stilregel vises i panelet Egenskaber.

   

2. Klik på T-ikonet øverst på panelet Egenskaber, og ændr eller tilføj det ønskede skrifttype og andre tekstindstillinger.

   Du kan ændre skrifttypens ansigt, størrelse, stil og vægt. For at ændre mellemrummet mellem tekstlinjer, skal du ændre linjens højde.

3. Rul ned til Bakgrundsområdet på panelet Egenskaber, og brug farveluken i feltet Baggrundsfarve til at angive en farve for hele baggrunden på siden.

   Alternativt kan du indtaste en hexadecimal farvekode i feltet Baggrundsfarve eller bruge eyedroppen til at prøve enhver farve. For at tilføje et baggrundsbillede skal du klikke i URL-feltet i baggrundsafsnittet og derefter klikke på knappen Gennemse, der vises, og vælg det billede, du vil tjene som baggrund. Brug ikonerne Background-Repeat for at angive, hvordan baggrundsbilledet skal gentage på siden.

4. Gør andre ændringer eller tilføjelser til stilreglen.

Ændringer i stilregler i panelet Egenskaber gemmes automatisk og anvendes til indhold formateret med reglen.

Sådan tilpasses indholdsområder

Følg disse trin for at ændre bredden eller andre indstillinger i hovedindholdsområderne, som styrer den samlede størrelse på siden og overskriften, sidefoden og sidebjælken:

1. For at ændre Bredden af ​​hele hoveddesignområdet:

   1. Klik på. container stil i panelet Selectors på CSS Designer panelet.

      Egenskaberne af. Regel for container stil vises i panelet Egenskaber, hvor du også kan redigere stilen.

   2. Skift størrelse i feltet Bredde eller skriv et nyt nummer til den ønskede sidebredde.

      Bredden af ​​sidedesignet ændres automatisk baseret på den størrelse, du indtastede. Når du ændrer bredden af. container stil, ændrer du bredden af ​​hele designet, fordi alle tags og andre elementer er indeholdt i formateret med. container stil - og de er alle sat til at udvide for at udfylde. beholder.

2. For at ændre størrelsen på indholdsområdet på siden, vælg den stil, der hedder. indhold og angiv størrelsen og andre muligheder, du ønsker i panelet Egenskaber.

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

3. Hvis du vil ændre baggrundsfarven på en hvilken som helst stil på siden, skal du klikke på navnet på den tilsvarende stil og ændre indstillingerne i Bakgrundsafsnittet i panelet Egenskaber.

   F.eks. I CSS-layouterne i Dreamweaver defineres sidebjælken i en navngivet stil. sidebar1. For at ændre baggrundsfarven vil du klikke på. sidebar1 i panelet Selectors, vælg kategorien Bakgrund i panelet Egenskaber, og vælg den ønskede farve. På samme måde for at ændre baggrundsfarven på overskriften, skal du vælge den navngivne overskrift i panelet Selectors og bruge farvebrønden.

   

4. For at tilføje et billede til overskriften:

   1. Vælg stedholderbilledet mærket Insert Logo og tryk på Delete eller Backspace-tasten.

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

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

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

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