Hvordan lage en Drop Shadow i Dreamweaver

Hvordan lage en Drop Shadow i Dreamweaver


En skygge gjør en 2-D objekt vises 3-D ved å plassere skyggelegging bak det. Den skyggelegging simulerer en lyskilde, slik at objektet ser ut til å stå utenfor siden i 3-D plass. Før HTML5, den nyeste Web Markup Language versjon, og CSS3, den nyeste versjonen stilark, designere måtte lage enkle skygger i grafikk redaktører, for eksempel Photoshop, og deretter importere dem til Dreamweaver. CSS er et sideelement formatering språk som vanligvis brukes i Web-side design. De nye HTML5 og CSS3 standarder tillater deg å lage skygger med kode, noe som sparer tid og bidrar til å holde websidene samlede filstørrelser mindre.

Bruksanvisning

1 Opprett en ny HTML5 dokument i Dreamweaver. Klikk på "File" -menyen og velg "New". Dette viser dialogboksen Nytt dokument. Velg "HTML" fra listen Sidetype, og velg deretter "Ingen" fra Layout-listen. Klikk på "DOCTYPE" drop-down menyen og velg "HTML 5," og deretter "Opprett".

2 Klikk på "Window" menyen og velg "CSS Style" for å vise CSS-panelet.

3 Klikk på "Legg til ny regel" -knappen i nederste høyre hjørne av CSS-panelet. Dette åpner New CSS Rule dialogboksen.

4 Skriv ".h1" i "Selector Name" -feltet og klikk "OK." Du kan kalle velger alt du vil. Med denne velgeren, all tekst du tagge med <h1> vil formatere i henhold til denne CSS-regel. Dette åpner CSS Rule Definition for .h1 dialogboksen.

5 Velg "Type" i listen Kategori for å vise alternativer for formatering av tekst. Bruk disse alternativene for å angi egenskaper, for eksempel skriftfamilie, skrift vekt, skriftstørrelse og skriftfarge for CSS-regel.

6 Klikk på "OK". Dreamweaver skaper en ny CSS-regel som heter ".h1" og viser den og dens egenskaper i CSS Styles panelet.

7 Klikk "Legg Property" i CSS-panelet, og skriv "text-shadow" i Legg Eiendom feltet. Denne egenskapen gir en tekst skygge. For å lage en skygge på CSS boks eller beholder, bruk "box-shadow".

8 Klikk på feltet til høyre for den nye CSS-regel. Dette viser en dialogboks for å sette egenskaper for skygge, for eksempel X - offset, Y - offset, Blur Radius og farge. Disse valgene kontrollerer mørket og skarpheten i skygge. En typisk tekst skygge kan bruke følgende innstillinger:

X- Offset = "2" piksler

Y- Offset = "2" piksler

Blur Radius = "5" piksler

Color = grå, eller "# 333"

Du kan bruke hva innstillingene du vil tilpasse din skygge. Disse innstillingene skape en fin, diskret skygge som ser bra ut med tekst.

9 Klikk på websiden der du vil sette inn tekst med en skygge, og deretter klikker du på "Målrettet Rule" drop-down menyen i Properties panelet og velg ".h1."

10 Skriv inn teksten. Dreamweaver kan ikke vise skygge i utformingsvisning. Klikk på "Live View" -knappen under menylinjen for å se skyggen.

Hint

  • Skygger kan gjøre liten tekst, som brødteksten, vanskelig å lese. Du bør bruke den for visning tekst, for eksempel overskrifter og dekorative tekst.
  • Ikke alle nettlesere støtter alle HTML5 og CSS3 egenskaper, spesielt noen mobile nettlesere. Du kan sørge for et bredere spekter av lesere kan se skygger ved hjelp av leserutvidelser. For eksempel, for å lage en skygge for WebKit nettlesere, som mange mobile nettlesere støtter, vil du skrive din skygge eiendom som følger:
  • -webkit-text-shadow: 2 piksler 2 piksler 5px # 333;
  • Mest populære nettlesere støtter utvidelser. Her er en liste over de mest populære nettleserne og deres utvidelser:
  • Microsoft Internet Explorer = -MS
  • Mozilla nettlesere = -moz
  • Opera og Opera Mobile = -o
  • WebKit nettlesere = -webkit
  • Legg merke til at Google Chrome og Firefox er Mozilla nettlesere og Apple Safari er en WebKit nettleser.