Hvordan lage et banner på Dreamweaver

I Web design, begrepet "banner" har noen betydning. Det kan referere til en meny eller navigasjonsfeltet som spenner øverst på siden, et bilde som dekker toppen av siden, en kombinasjon av et bilde og en meny eller en bannerannonse. Bannerannonser og bannere generelt, kan bestå av en statisk grafikk, en Flash-animasjon, eller roterende bannere, hvor flere bannere vises i rekkefølge, den ene etter den andre. Dreamweaver har ingen grafikk eller animasjonsverktøy. De fleste designere lage sitt banner innhold i et grafikkprogram, for eksempel Photoshop, eller et underholdningsprogram, for eksempel Adobe Flash. Du kan imidlertid lage stilark, eller CSS, container og bakgrunn for banneret i Dreamweaver, og deretter importere banner innhold inn i beholderen.

Bruksanvisning

1 Lag banneret innhold, for eksempel en Flash-film eller Photoshop bilde, eller finne en banner på internett. Du har mange alternativer for å lage eller finne banner innhold. Du kan for eksempel åpne et bilde i Photoshop og beskjære og endre størrelse på det til ønsket størrelse, eller du kan søke etter "banner" på nettet, noe som bringer opp hundrevis av gratis bannere i mange formater, for eksempel grafikk bannere, Flash bannere og roterende bannere.

Hvis du ikke har Photoshop eller et annet bilderedigeringsprogram kan du redigere og endre størrelsen på banner bilde i Windows Live Photo Gallery: Naviger til bildet i Windows Utforsker, høyreklikker du på den, velg "Edit Med" fra hurtigmenyen, og velg deretter Windows live Photo Gallery fra neste popup-menyen.

Dette åpner bildet i Windows Live Photo Gallery. Klikk på "Edit" øverst i programvinduet. Windows Live Photo Gallery viser flere alternativer for å redigere bildet, inkludert en Crop Tool og flere touch-up verktøy. For å endre størrelsen på bildet, klikk på "Properties" -knappen og velg "Endre størrelse" for å åpne dialogboksen Endre størrelse. Du kan velge en størrelse fra listen Velg en størrelse på rullegardinmenyen, eller skriv inn ønsket bredde i maksimum dimensjoner feltet. Høyden justerer automatisk.

2 Klikk på "Endre størrelse og Lagre" -knappen.

3 Start en ny side i Dreamweaver: Klikk på "File" -menyen og velg "New" for å åpne dialogboksen Nytt dokument. Velg "HTML" fra listen Sidetype, og velg deretter «en kolonne fast, sentrert, topp- og bunntekst" fra Layout-listen. Dette oppsettet skaper en layout med en heading beholder for banneret.

4 Klikk på "Oppsett CSS" drop-down menyen og velg "Legg til Head." Dette legger til CSS layout koden til toppen av HTML-siden, noe som gjør det enkelt å redigere.

5 Klikk på "OK". Dreamweaver skaper en side med en grønn header container over toppen og et banner plassholder på venstre side av beholderen.

6 Klikk på "File" -menyen og velg "Lagre som". Navn og lagre HTML-fil.

7 Velg og slett banneret plassholder.

8 Klikk på "Insert" -menyen og velg "Image". Dette åpner Velg Image Source dialogboksen. Slik setter du inn et Flash banner, klikker du på "Sett inn", velg "Media" og velg deretter "SWF" fra flyout menyen. Dette åpner Velg SWF dialogboksen.

9 Naviger til banner-filen, velger du den, og velg deretter "OK". Dette åpner Tag Accessibility attributter dialogboksen.

10 Skriv en tittel på banner i Alternativ tekst feltet og klikk "OK." Dreamweaver setter banner innholdet i overskriften beholderen.

Hint

• Hvis du vil endre bakgrunnsfargen på overskriften beholderen, før innføring av banner innholdsfilen, klikker du på overskriften container for å sette markøren, og klikk deretter på "Rediger regel" i Properties panelet. Dette åpner dialogen Definisjon CSS Rule boksen. Velg "Bakgrunn" i Kategori-listen, klikk på "background-color" swatch flyout, og deretter velge ønsket farge. Du kan også legge til en ramme til overskriften beholderen og tilpasse den med Border alternativet i dialogboksen Definition CSS Rule boksen.
• Når du laster opp HTML-siden til en webserver, også laste opp banneret innholdsfilen. Ellers vil banner ikke vises.