Hvordan legge til tekst over et bilde i Dreamweaver CS5

Plassere tekst over et bilde på en webside er en attraktiv design teknikk. Adobe Dreamweaver, en ledende web-side design program, støtter flere måter å oppnå denne effekten. En av de enkleste og mest vanlige metodene er å skape en Cascading Style Sheet, eller CSS container, deretter setter inn bildet som bakgrunn for beholderen. Deretter kan du skrive inn tekst over bildet og formatere tekst som ønsket.

Bruksanvisning

1 Åpne Dreamweaver HTML-fil som du ønsker å lage et bilde med overliggende tekst, eller starte en ny HTML-fil ved å klikke på "File" -menyen og velge "New". Dette åpner dialogboksen Nytt dokument. Velg HTML fra Type-listen, og ønsket layout fra Layout-listen, og klikk deretter på "Create" -knappen.

2 Klikk på "File" -menyen, og velg "Lagre som". Dette åpner dialogboksen Lagre som. Navn og lagre websiden.

3 Klikk på siden der du vil sette inn bildet med overliggende tekst for å plassere markøren.

4 Klikk på "Målrettet Rule" drop-down menyen i Properties-panelet, og velg "New CSS Rule". Dette åpner New CSS Rule dialogboksen.

5 Klikk på "Selector Name" -feltet, og skriv inn et navn for den nye CSS-regel. Du kan kalle velger alt du vil, men det må starte med en periode, for eksempel ".image."

6 Klikk "OK" for å åpne dialogboksen Definisjon CSS Rule boksen. Herfra kan du konfigurere formatering for overliggende teksten, velge bakgrunnsbildefilen og margene for beholderen. De overliggende teksten vises i margen, slik at du kan sentrere teksten over bildet.

7 Klikk "Type" i kategorilisten. Dette viser alternativer for formatering av tekst. Velg skriftfamilie, skriftstørrelse, skrift vekt, og skriftfarge, klikk på "Apply" -knappen.

8 Klikk på "Bakgrunn" i Kategori-listen. Dette viser alternativer for formatering av CSS beholder bakgrunnen. Klikk på "Browse" -knappen ved siden av "background-image". Dette åpner Velg Image Source dialogboksen. Naviger til bildefilen, velger du den, og deretter på "OK" -knappen.

9 Klikk på "Bakgrunn-repeat" drop-down menyen og velg "no-repeat". Dette forteller Dreamweaver til å vise bare én forekomst av bildet, i stedet for å legge fleire eksemplarer til å fylle hele bakgrunnen av beholderen.

10 Klikk på "Apply".

11 Klikk "Box" i Kategori-listen. Dette viser alternativer for formatering av beholderen, slik som dens bredde og høyde, samt margene. Vanligvis ville du sette beholderen størrelse for å matche størrelsen på bakgrunnsbildet. For eksempel, hvis bildet måler 800 x 300 piksler, skriv "800" i "Bredde" -feltet og "300" i "Høyde" -feltet.

12 Klikk på "bredde" feltet og skriv inn ønsket bredde for beholderen, og klikk deretter på "Høyden" feltet og skriv inn ønsket høyde for container.

1. 3 Klikk på "Samme for All" boksen i Margin delen av dialogen Definisjon CSS Rule boksen. Dette forteller Dreamweaver for å gjøre margene den samme størrelse på alle fire sider av beholderen. Skriv inn ønsket margbredden i "Top" -feltet. Dreamweaver inserts ingen verdier i "riktig", "Bottom" og "Left" feltene.

Merk at det kan ta litt eksperimentering for å få marginene satt akkurat slik du vil ha dem.

14 Klikk på "OK". Dreamweaver skaper beholderen og plasserer bildet.

15 Klikk på bildet og skriv inn ønsket tekst. Teksten viser over bildet med de egenskapene du har angitt i dialogboksen Definition CSS Rule boksen

Hint

• Du kan endre tekstformatering, beholderen størrelse, og marginene ved å redigere CSS-regel. Klikk på "Målrettet Rule" drop-down menyen i Properties panelet, velger CSS regelen du vil redigere, klikk på "Rediger regel" -knappen. Dette åpner dialogen Definisjon CSS Rule boksen. Gjør de ønskede endringer i beholderen og de overliggende tekstegenskaper.