Gewusst wie: Hinzufügen von Text über ein Bild in Dreamweaver Cs5

Platzieren von Text über ein Bild auf einer Webseite ist eine Technik, attraktives Design. Adobe Dreamweaver, eine führende Webseite-Design-Programm unterstützt mehrere Möglichkeiten, diesen Effekt zu erzielen. Eine der einfachsten und gebräuchlichsten Methoden ist die Schaffung eines Cascading Style Sheet oder CSS-Container, dann fügen Sie das Bild als Hintergrund für den Container. Sie können dann Text über dem Bild eingeben und formatieren Sie den Text wie gewünscht.

Anweisungen

1 Öffnen Sie die Dreamweaver HTML-Datei, in der Sie ein Bild mit darüber liegende Text erstellen möchten, oder starten Sie eine neue HTML-Datei zu, klicken Sie im Menü "Datei" und wählen "Neu." Dies öffnet das Dialogfeld "neues Dokument". Wählen Sie HTML aus der Liste und das gewünschte Layout aus der Liste Layout und dann auf die Schaltfläche "Erstellen".

2 Klicken Sie im Menü "Datei" und wählen "Speichern unter". Dies öffnet das Dialogfeld "Speichern unter". Benennen Sie und speichern Sie der Webseite.

3 Klicken Sie auf der Seite, wo Sie mit darüberliegenden Text platzieren Sie den Cursor über das Bild einfügen möchten.

4 Klicken Sie im Dropdownmenü "Zielregel" im Bedienfeld "Eigenschaften" und wählen Sie "Neue CSS-Regel." Dies öffnet das Dialogfeld "neue CSS-Regel".

5 Klicken Sie im Feld "Selektor-Name", und geben Sie einen Namen für die neue CSS-Regel. Den Selektor etwas nennen soll, aber muss es beginnen mit einem Punkt wie ".image."

6 Klicken Sie auf "OK", um das Dialogfeld CSS-Regel-Definition zu öffnen. Hier konfigurieren Sie die Formatierung für den darüberliegenden Text, wählen Sie die Hintergrund-Bild-Datei und legen Sie die Ränder für den Container. Im darüberliegenden Text werden innerhalb der Ränder, so dass Sie den Text über dem Bild zentrieren.

7 Klicken Sie in der Liste Kategorie auf "Type". Dies zeigt die Optionen für die Textformatierung. Wählen Sie die Schriftfamilie, Schriftgröße, Schriftschnitt und Schriftfarbe und anschließend auf die Schaltfläche "Übernehmen".

8 Klicken Sie in der Liste Kategorie auf "Hintergrund". Dies zeigt die Optionen für die Formatierung des CSS-Container-Hintergrund. Klicken Sie auf "Durchsuchen" neben "Hintergrundbild." Dies öffnet das Dialogfeld Bildquelle auswählen. Navigieren Sie zu der Image-Datei, wählen Sie ihn aus, dann klicken Sie auf "OK".

9 Klicken Sie auf "Background-Repeat" Drop-Down-Menü, und wählen Sie "nicht wiederholen." Dies weist Dreamweaver anzeigen nur eine Instanz des Bildes, anstatt Fliesen Mehrfachkopien um den gesamten Hintergrund des Containers zu füllen.

10 Klicken Sie auf "Anwenden".

11 Klicken Sie in der Liste Kategorie auf "Box". Dies zeigt die Optionen für die Formatierung des Containers, z. B. die Breite und Höhe sowie die Seitenränder. In der Regel setzen Sie die Containergröße entsprechend die Größe des Hintergrundbildes. Beispielsweise wenn das Bild 800 x 300 Pixel misst, geben Sie "800" im Feld "Breite" und "300" im Feld "Höhe".

12 Klicken Sie im Feld "Breite" und geben Sie die gewünschte Breite für Ihre Behälter, dann klicken Sie im Feld "Höhe" und geben Sie die gewünschte Höhe für Ihre Container.

13 Aktivieren Sie das Kontrollkästchen "Für alle" im Abschnitt "Rand" des Dialogfelds CSS-Regel-Definition. Dies weist Dreamweaver an den Rändern die gleiche Größe auf allen vier Seiten des Containers machen. Geben Sie die gewünschte Randbreite im Feld "Top". Dreamweaver fügt die entsprechenden Werte in die "richtige", "Unten," und "Links" Felder.

Beachten Sie, dass es, einige Experimente dauern kann erhalten Ihre Ränder Legen Sie genau, wie sie möchten.

14 Klicken Sie auf "OK". Dreamweaver erstellt den Container und platziert das Bild.

15 Klicken Sie auf das Bild und geben Sie den gewünschten Text. Im Text werden über dem Bild mit den Eigenschaften, die Sie im Dialogfeld CSS-Regel-Definition festgelegt

Tipps & Warnungen

• Sie können die Text-Formatierung, die Containergröße und die Ränder durch Bearbeiten der CSS-Regel ändern. Klicken Sie im Dropdownmenü "Zielregel" im Bedienfeld "Eigenschaften", wählen Sie die CSS-Regel, die Sie bearbeiten möchten, und klicken Sie auf "Regel bearbeiten". Dies öffnet das Dialogfeld CSS-Regel-Definition. Nehmen Sie die gewünschten Änderungen an den Container und die darüberliegenden Texteigenschaften.