Hvordan man kobler Cascading Style Sheets (CSS) med Dreamweaver - dummies

Dreamweaver-brukere kan enkelt sette inn en koblingsmerke til et eksternt Cascading Style Sheet (CSS) uten å måtte forplikte seg til å minne all nødvendig kode eller riktig syntaks. Videre, når du lager koblinger til en ekstern CSS-fil i Dreamweaver, kan du også bruke denne muligheten til å velge en CSS-mediatype, hvis ønskelig.

I de følgende trinnene finner du ut hvordan du kobler en ekstern CSS-fil med all medietype til en åpen HTML-fil i Dreamweaver.

For å fullføre alle trinnene, trenger du Dreamweaver sammen med sample HTML og CSS-filer, som du raskt kan lage selv.

Plasser begge kopier av de lagrede filene i en mappe på datamaskinen din, og fortsett deretter med følgende trinn:

1. Start Dreamweaver og sett opp et administrert nettsted ved å velge Site → New Site.

   Dialogboksen Nettstedoppsett vises, og viser Nettstedskategorien, som viser felt for mappen Nettstednavn og lokalnettsted.

2. Skriv inn navnet på nettstedet ditt i feltet Nettstednavn.

   Skriv inn et navn som samsvarer med klientens navn eller angir at nettstedet ditt har det beste, for eksempel ABC Company eller My Blog.

3. Verifiser at banen peker til mappen på datamaskinen du vil bruke for dette nettstedet, i feltet Lokal webområdemappe.

   Hvis du for eksempel har en mappe på datamaskinen din dedikert til lokale nettsteder, og du vil opprette en mappe inne for å huse filene på et nytt ABC Company-nettsted, kan Lokal mappe-mappe være noe slikt: <

   BrukersyournavnDokumenterlocal-sitesABC web

   Klikk Lagre for å lukke dialogboksen.
   

4. Din nye administrerte side åpnes, viser alle eksisterende filer og mapper (hvis noen) i rotmappen i Filer-panelet.

   Fra filpanelet åpner du HTML-filen du vil legge til CSS-koblingen til.

5. Filen du bruker, bør ha noen type inne i den og være merket med avsnitt, h1 og listekoder.

   For å legge til lenken, klikk på ikonet Vedlegg stilark (som ser ut som et lite stykke kjede) nederst på CSS-stilpanelet.

6. Når du klikker på ikonet, åpnes dialogboksen Legg til ekstern stilark. Hvis du ikke ser panelet CSS-stiler i Dreamweaver-arbeidsområdet, velger du Vindu → CSS-stiler for å åpne det.

   Skriv inn navnet på CSS-filen du vil koble til i, eller klikk Bla gjennom-knappen for å finne og velge ønsket CSS-fil i fil / URL-tekstfeltet.

   

7. Hvis du bruker prøvefilene du nettopp lastet ned fra nettet, klikker du Bla gjennom-knappen for å navigere til stedet der du lagret prøvefilene og velge filen cssdemo.css.

   I dialogboksen Legg til som i dialogboksen klikker du på Link eller Import-knappen for å velge ønsket metode for å legge til CSS-filen på HTML-siden din.

8. Alternativet Link legger til CSS som en ekstern fil ved å bruke taggen:

   Importeringsalternativet angir ekstern CSS i en stilkobling inne i hodet på siden ved hjelp av @import at-regelen. Husk at denne metoden ikke anbefales for CSS3-mediesøk:

   I rullegardinmenyen Media, skriv inn ordet alt, eller klikk på menyens nedpil og velg all media type.
   

9. For å angi flere medietyper i stedet for bare en, skriv inn navnene på hver av de ønskede medietyper, skilt med komma og ingen mellomrom, som på skjermen, skriv ut, tty.

   Hvis ønskelig, klikker du på dialogboksen Forhåndsvisning-knapp for å se hvordan den nylig koblede CSS-filen stiler eksempelf HTML-filen.

10. Klikk OK for å fullføre vedlegget til den eksterne CSS-filen.

11. Dreamweavers CSS-stilpanel viser nå den nylig vedlagte CSS-filen og viser alle stilene i den, og HTML-filen i prøven er utformet med stilreglene på den koblede CSS-filen.