Bild mit 'bearbeitbarem Bereich'...

[Admin_SWISSPILOT]

Hallo zusammen
​

Ausgangslage
Die Startseite von möchte ich umgestalten. Dafür sollen ähnliche Bilder, wie das folgende Bild zeigt, zum Einsatz kommen. Der Besucher kann somit entweder auf den Titel (im Beispiel "Kontakt") oder auf das Bild (hier ein Handy) klicken, um auf die entsprechende Unterseite zu gelangen.

Ein ähnliches Beispiel ist auf der folgenden Seite zu betrachten:



Bild:



Fragestellung
Bei diesem Bild soll jedoch der Text normal mit Dreamweaver bearbeitet werden können. Auf diesem Bild wurde der Text im Adobe Photoshop geschrieben. Ändert sich also etwas, so muss dieses Bild erneuert werden und der Text im Photoshop neu geschrieben werden.
>> Besteht aber die Möglichkeit, dass man das Textfeld/den Textbereich als einen bearbeitbaren Bereich definieren kann, damit man jederzeit den Text (z.B. in Dreamweaver) umändern kann, ohne jedes Mal den Text erneut im Photoshop korrigieren und als Bild abspeichern zu müssen? Wenn ja, wie gehe ich dabei vor?
Wichtig dabei: der Rest des Bildes (Blauer Balken oben, Bild in der Mitte) sollen dabei nicht verändert werden bzw. verschoben werden. Zudem sollte die Grösse des gesamten Bildes (schwarz umrandet) nicht verändert werden.


Herzlichen Dank für eure Hilfe

Gruss Tobias

 

[sokie]

AW: Bild mit 'bearbeitbarem Bereich'...

In der Regel wird es ja so gemacht, dass man Texte auf Webseiten als html darstellt, und Bildinformationen als Grafiken einfügt. Auf der Beispielseite der Versicherung, kann man das auch im Quelltext gut sehen,wie das gemacht ist.

 

[Admin_SWISSPILOT]

AW: Bild mit 'bearbeitbarem Bereich'...

Hallo sokie

Danke für die schnelle Antwort.

Bei der Versicherung ist es jedoch so, dass über dem Text das Bild normal als IMG hinzugefügt wurde, und der Text ebenfalls normal als HTML-Text geschrieben wurde.
Darunter bzw. rechts davon gibt es noch einen grauen Trennstrich, der auf dem Template direkt zu sein scheint.

In meinem Fall ist es aber so, dass genau dieser Trennstrich (bei mir ist es einfach die Umrandung mit Schatten) nicht in der Vorlage, sondern das Ganze als IMG dargestellt wird. Würde ich also oberhalb das Bild als Bild einfügen und unterhalb den Text normal als Text, so würde der Trennstrich unterhalb des Textes fehlen, da der Trennstrich sich ja direkt auf dem Bild und nicht innerhalb der Vorlage/Template befindet.

> Ich könnte als beispielsweise das Bild als Hintergrund definieren, dann würde ein "Darüberschreiben" möglich sein?

Gruss Tobias

EDIT: ich glaube, ich habe eine Lösung gefunden. Ich werde diese austesten und das Resultat dann hier posten.

 

[sokie]

AW: Bild mit 'bearbeitbarem Bereich'...

> Ich könnte als beispielsweise das Bild als Hintergrund definieren, dann würde ein "Darüberschreiben" möglich sein?

genau das ist der Ansatz,wie es gehen sollte. Also nicht nur den Text sondern evtl. auch gleich das <img> über den Hintergrund(nur rahmenline mit Schatten) legen.

 

[Admin_SWISSPILOT]

AW: Bild mit 'bearbeitbarem Bereich'...

Das Problem hier ist nun, dass Dreamweaver dieses Hintergrundbild automatisch gleich wiederholt (repeat x und y), obwohl ich dies im Code nicht erwähnt habe.

Folgendes habe ich in den Code hinzugefügt:

<td style="background-image:url(background.jpg)"><h2>Titel</h2></td>

Folgendes war das Resultat:



Kannst du mir dabei auf die Sprünge helfen? Diesbezüglich bin ich wohl schon etwas aus der Übung..

Herzlichen Dank
Gruss Tobias

 

[Mew]

AW: Bild mit 'bearbeitbarem Bereich'...

Hi!

Versuch es mal mit dem:

<td style="background-image:url(background.jpg); background-repeat:no-repeat;"><h2>Titel</h2></td>

 

[Admin_SWISSPILOT]

AW: Bild mit 'bearbeitbarem Bereich'...

Hi!

Versuch es mal mit dem:

Genial! Herzlichen Dank für die schnelle Antwort - es hat funktioniert.

Gruss Tobias

 

[Admin_SWISSPILOT]

AW: Bild mit 'bearbeitbarem Bereich'...

Also, nach längerem hin und her, probieren und wieder verwerfen, habe ich nun einmal die primäre Arbeit an der Startseite abgeschlossen. Ich hoffe, dass die Darstellung einwandfrei funktioniert.

Hier gehts zur Startseite

Über ein Feedback würde ich mich sehr freuen.

Gruss Tobias

 

[Crackp0t]

AW: Bild mit 'bearbeitbarem Bereich'...

Die Grafik für "Bilder und Filme" ist nicht sehr passend. Ein Handy zeugt nicht grade von guten Bildern/Filmen bzw. nur wenige würden die Grafik alleine so interpretieren. Auch fehlt mir noch ein wenig Farbe, das Design ist zwar schlicht, aber blass. Vieleicht kannst du das Rot in dem Ton des Schweizer Wappens mit einbauen.
Die News würde ich außerdem als erstes in den Content integrieren.