Tutorial for CSS i Dreamweaver

November 30

Tutorial for CSS i Dreamweaver

Cascading Style Sheets (CSS) er en avansert form for HTML nettside-koding som gir økt design og formateringsalternativer. Stedet for å bruke individuelle utdrag av HTML-koden til hver tekstblokk eller -delen på siden, CSS kan du definere "stil" regler og klasser, ligner på stil angir i tekstbehandling og side layout. Du kan deretter bruke stilene til elementer på sidene---gjør formatering raskere og enklere, samt sikre ensartethet siden eller et helt nettsted. DreamWeavers innebygde CSS-funksjonen virker komplisert i begynnelsen, men ikke etter at du har prøvd det et par ganger.

Instruksjoner

Ved hjelp av CSS i Dreamweaver

1 Start et nytt Dreamweaver HTML dokument eller åpner et eksisterende dokument der du vil lage CSS-regler.

2 Gå til egenskaper-panelet og klikk på "CSS" knappen på venstre side av panelet. Dette setter Dreamweaver i CSS-modus.

3 Klikk "Målrettet regelen" drop-down i Egenskaper-panelet, og velg "< nye CSS regelen >".

4 Klikk "Rediger regel" i Egenskaper-panelet. Dette åpner dialogboksen nye CSS-regelen der du navngir den stil regelen og definere virkemåten.

5 Klikk rullegardinlisten "utvalgstype". Det finnes fire alternativer i denne slipp-slipp, som har beskrivende navn forklare hva de gjør. For eksempel kan "Klasse (kan bruke HTML-elementet)" du opprette en stil klassen du kan bruke på teksten i dokumentet. "Sammensatte (basert på valget)" kan du opprette en stil klassen basert på teksten du merker før du klikker "Rediger regelen."

6 Klikk i feltet "Velgeren navn" og skriv inn navnet din stil. Avhengig av hvilket valg valgte du i forrige trinn, visse typer stilregler krever bestemte navnekonvensjoner. "Klasse (kan bruke HTML-elementet)" krever for eksempel at navnet på begynne med et punktum (.). Så, hvis du definerer en overskriftsstil, for eksempel, du kunne navnet de første nivå ".h1." Du kunne navnet brødtekst ".body". Dreamweaver vil spørre deg om din navnekonvensjonen er galt, og gi deg en forklaring på hvordan du navngir stilen.

7 Klikk "Regeldefinisjonen" rullegardinlisten og velger du hvordan Dreamweaver bruke stilen. Det er to alternativer: "Bare dette dokumentet" oppretter stil kodene i HTML Head-delen av gjeldende side. Stilene er tilgjengelig for bare denne siden. "(New stilarkfilen)" skaper en ekstern CSS (.css)-fil.

Kraften i CSS er at du kan formatere flere sider---hele området---basert på samme sett med CSS-regler. Dette oppnås med eksterne CSS-filer. Hvis du velger "(New stilarkfilen)," når du klikker "OK" i denne dialogboksen, Dreamweaver ber deg nevne CSS-filen. Hvis du bruker bare en CSS-fil for hele området, er standard navnekonvensjonen "styles.css." Et område kan imidlertid ha mange stilark---for overskrifter, en annen for bunntekst, sidefelt. Gi CSS filene meningsfylt navn.

Når du oppretter din første eksterne CSS-filen, vises neste gang du åpner nye CSS-regelen, filen i rullegardinlisten regeldefinisjonen. Når du oppretter en annen stil, må du legge det til den riktige eksterne CSS-filen.

8 Klikk "OK" for å vise dialogboksen "CSS regelen definisjon for...". Dette er hvor du formatere din stil, for eksempel skrift, størrelse, stil (fet, kursiv), farger. Valgene her er omfattende, slik at ganske forseggjort formatering, inkludert tekstbokser, bakgrunner og mange andre formateringsvalg. Angi alle ønsket formatering for denne stilen, og klikk deretter "OK".

9 Gjenta denne prosessen for å opprette flere stilregler. For å bruke en stil for en tekstblokk, bare klikk i avsnittet, og velg deretter den ønskede stilen fra "Målrettet regelen" drop-down i Egenskaper-panelet.

Tips og advarsler

  • Dreamweaver leveres med flere forhåndsdefinerte CSS maler. Du kan starte med en av disse, snarere enn å lage alle stiler fra bunnen. Klikk "Fil" i menyen og velg "Ny." Dette åpner dialogboksen "Ny dokumentet". Klikk "Ny fra Sample" i venstre kolonne, og velg "CSS stilsett. Deretter velger du en av malene i høyre kolonne.
  • Du kan endre stilformatering når som helst med Rediger regel. Når du endrer en stil, alle tekst merket med stil regelen i dokumentet, eller området, når du bruker eksterne CSS-filer, endres automatisk.
  • Når laste opp sidene til Internett, kontroller at du også laste opp din eksterne CSS-filer.

© 2020 pcdriverupdate.com | Kontakt oss: webmaster# pcdriverupdate.com