Schrift auf Grafik einfügen

Nici92 · 29.02.2012

Hallo zusammen

Ich bin gerade dabei, mir eine Website zu erstellen. So sieht sie im Moment aus.
Jetzt möchte ich in dem leeren Bereich einen Text einfügen. Diesen Bereich habe ich allerdings als Grafik eingefügt. Kann ich diese Grafik irgendwie in ein Hintergrundbild umwandeln, sodass ich Text darauf schreiben kann? Ich erstelle die Website mit Dreamweaver.
Hier noch der Code, vielleicht hilft das:

HTML:

<html>
<head>
<title>Motivecke</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
</style>
</head>
<body background="background.jpg" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Motivecke.psd) -->
<table id="Table_01" width="848" height="712" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="4">
<img src="http://www.psd-tutorials.de/forum/images/index_01.jpg" width="87" height="48" alt=""></td>
<td>
<img src="http://www.psd-tutorials.de/forum/images/index_02.jpg" width="83" height="48" alt=""></td>
<td><a href="profil.html"><img src="http://www.psd-tutorials.de/forum/images/index_03.jpg" width="76" height="48" alt=""></a></td>
<td colspan="3">
<img src="http://www.psd-tutorials.de/forum/images/index_04.jpg" width="79" height="48" alt=""></td>
<td>
<img src="http://www.psd-tutorials.de/forum/images/index_05.jpg" width="118" height="48" alt=""></td>
<td>
<img src="http://www.psd-tutorials.de/forum/images/index_06.jpg" width="62" height="48" alt=""></td>
<td colspan="3">
<img src="http://www.psd-tutorials.de/forum/images/index_07.jpg" width="121" height="48" alt=""></td>
<td>
<img src="http://www.psd-tutorials.de/forum/images/index_08.jpg" width="62" height="48" alt=""></td>
<td colspan="3">
<img src="http://www.psd-tutorials.de/forum/images/index_09.jpg" width="160" height="48" alt=""></td>
</tr>
<tr>
<td colspan="18">
<img src="http://www.psd-tutorials.de/forum/images/index_10.jpg" width="848" height="46" alt=""></td>
</tr>
<tr>
<td colspan="18">
<img src="http://www.psd-tutorials.de/forum/images/index_11.jpg" width="848" height="105" alt=""></td>
</tr>
<tr>
<td>
<img src="http://www.psd-tutorials.de/forum/images/index_12.jpg" width="1" height="27" alt=""></td>
<td colspan="17">
<img src="http://www.psd-tutorials.de/forum/images/index_13.jpg" width="847" height="27" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="4">
<img src="http://www.psd-tutorials.de/forum/images/index_14.jpg" width="36" height="485" alt=""></td>
<td colspan="15">
<img src="http://www.psd-tutorials.de/forum/images/index_15.jpg" width="777" height="278" alt="">
</td>
<td rowspan="4">
<img src="http://www.psd-tutorials.de/forum/images/index_16.jpg" width="35" height="485" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://www.psd-tutorials.de/forum/images/index_17.jpg" width="34" height="182" alt=""></td>
<td colspan="4">
<img src="http://www.psd-tutorials.de/forum/images/index_18.jpg" width="218" height="148" alt=""></td>
<td rowspan="2">
<img src="http://www.psd-tutorials.de/forum/images/index_19.jpg" width="29" height="182" alt=""></td>
<td colspan="4">
<img src="http://www.psd-tutorials.de/forum/images/index_20.jpg" width="218" height="148" alt=""></td>
<td rowspan="2">
<img src="http://www.psd-tutorials.de/forum/images/index_21.jpg" width="30" height="182" alt=""></td>
<td colspan="3">
<img src="http://www.psd-tutorials.de/forum/images/index_22.jpg" width="218" height="148" alt=""></td>
<td rowspan="2">
<img src="http://www.psd-tutorials.de/forum/images/index_23.jpg" width="30" height="182" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="http://www.psd-tutorials.de/forum/images/index_24.jpg" width="218" height="34" alt=""></td>
<td colspan="4">
<img src="http://www.psd-tutorials.de/forum/images/index_25.jpg" width="218" height="34" alt=""></td>
<td colspan="3">
<img src="http://www.psd-tutorials.de/forum/images/index_26.jpg" width="218" height="34" alt=""></td>
</tr>
<tr>
<td colspan="15">
<img src="http://www.psd-tutorials.de/forum/images/index_27.jpg" width="777" height="25" alt=""></td>
</tr>
<tr>
<td>
<img src="http://www.psd-tutorials.de/forum/images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="http://www.psd-tutorials.de/forum/images/spacer.gif" width="35" height="1" alt=""></td>
<td>
<img src="http://www.psd-tutorials.de/forum/images/spacer.gif" width="34" height="1" alt=""></td>
<td>
<img src="http://www.psd-tutorials.de/forum/images/spacer.gif" width="17" height="1" alt=""></td>
<td>
<img src="http://www.psd-tutorials.de/forum/images/spacer.gif" width="83" height="1" alt=""></td>
<td>
<img src="http://www.psd-tutorials.de/forum/images/spacer.gif" width="76" height="1" alt=""></td>
<td>
<img src="http://www.psd-tutorials.de/forum/images/spacer.gif" width="42" height="1" alt=""></td>
<td>
<img src="http://www.psd-tutorials.de/forum/images/spacer.gif" width="29" height="1" alt=""></td>
<td>
<img src="http://www.psd-tutorials.de/forum/images/spacer.gif" width="8" height="1" alt=""></td>
<td>
<img src="http://www.psd-tutorials.de/forum/images/spacer.gif" width="118" height="1" alt=""></td>
<td>
<img src="http://www.psd-tutorials.de/forum/images/spacer.gif" width="62" height="1" alt=""></td>
<td>
<img src="http://www.psd-tutorials.de/forum/images/spacer.gif" width="30" height="1" alt=""></td>
<td>
<img src="http://www.psd-tutorials.de/forum/images/spacer.gif" width="30" height="1" alt=""></td>
<td>
<img src="http://www.psd-tutorials.de/forum/images/spacer.gif" width="61" height="1" alt=""></td>
<td>
<img src="http://www.psd-tutorials.de/forum/images/spacer.gif" width="62" height="1" alt=""></td>
<td>
<img src="http://www.psd-tutorials.de/forum/images/spacer.gif" width="95" height="1" alt=""></td>
<td>
<img src="http://www.psd-tutorials.de/forum/images/spacer.gif" width="30" height="1" alt=""></td>
<td>
<img src="http://www.psd-tutorials.de/forum/images/spacer.gif" width="35" height="1" alt=""></td><tr height="60"></tr>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Danke schonmal im Voraus für eure Hilfe

LG Nici

Pixelverwender · 29.02.2012

AW: Schrift auf Grafik einfügen

Dem Code und Deiner Frage nach zu urteilen, hast Du keinerlei Kenntnisse bezüglich HTML/CSS.
Websites werden schon lang nicht mehr mit Tabellenlayout erstellt, wie Du es hier getan hast.
Auch eine weiße Fläche als Hintergrundbild einzusetzen ist – gelinde gesagt – Unsinn.
Mit der Weiterverfolgung Deines jetzigen Ansatzes tust Du Dir keinen Gefallen.
Ganz abgesehen davon wundert mich, wozu Du nichtexistente Grafiken von der Website von PSD-Tutorials eingesetzt hast...

Ich empfehle Dir dringend, Dich mit den Grundlagen von HTML und CSS zu beschäftigen.
Eine recht gute Einführung findest Du (abgesehen von den vielen Tutorials hier) auch unter http://little-boxes.de/little-boxes-teil1-online.html

Waldfee_81 · 29.02.2012

AW: Schrift auf Grafik einfügen

Den Link von little boxes kann ich nur empfehlen.Es ist einfach, kurz und knackig erklärt, und das wichtigste es ist für Anfägner verständlich

Bauer_Lindemann · 29.02.2012

AW: Schrift auf Grafik einfügen

Ich habe mir mal den link in meine Favoriten genommen.
Auch habe ich da etwas bemerkt was ich selber noch nicht wußte.
Man lernt eben nie aus.
Vielen Dank an Pixelverwender.

Gruß Bauer_Lindemann

Nici92 · 29.02.2012

AW: Schrift auf Grafik einfügen

Die Seite steht bereits und ich will eigentlich nicht alles nochmal neu machen..alles was fehlt, ist die schrift..Kann mir da niemand helfen?
Trotzdem danke für den Link

Pixelverwender · 29.02.2012

AW: Schrift auf Grafik einfügen

Nici92 schrieb:
Die Seite steht bereits

Du meinst, Du hast in Photoshop einen grafischen Entwurf gemacht, mehr nicht.
Von einer funktionsfähigen HTML-Seite bist Du (wenn der Code tatsächlich der Deiner Seite ist) meilenweit entfernt.

Nun gut, wenn Du unbedingt jede Menge falsch machen möchtest:
Nimm Deinen Entwurf als gesamtes Bild, speichere das als jpg und verwende es in einem DIV-Container oder einer Tabellenzelle als Hintergrundbild.
Dann kannst Du Text darüber schreiben.
Sinn macht es keinen, und Du wirst auch massive Probleme mit der Textausrichtung bekommen, aber das spielt für Dich offensichtlich keine Rolle.
Du solltest Dir auch mal Gedanken darüber machen, wie Du eigentlich Deine Links für die Navigation setzen willst. Denn so, wie Du es jetzt angehst, wird auch das nicht funktionieren.

Tibine · 29.02.2012

AW: Schrift auf Grafik einfügen

Mmh - wirklich schwierig, Deine Anfrage "vernünftig" zu beantworten ... wenn Du nicht ganz so tief einsteigen möchtest, bist Du evtl. mit einem fertigen CSS Template besser bedient - z.B. http://www.freecsstemplates.org.

nightlight9 · 18.03.2012

AW: Schrift auf Grafik einfügen

Hallo Nici92,

Das Design deiner Website sieht sehr ansprechend aus. Ich denke, du solltest jedoch die Umsetzung etwas anders angehen.

Ich würde dir empfehlen einige Tutorials im Css 3 und Html 5 Bereich anzuschauen.

Gruss Nightlight9

Davi2000 · 18.03.2012

AW: Schrift auf Grafik einfügen

Aufgrund deines Designs ist es ein leichtes Spiel ein einfaches 1 Spaltiges Layoutdesign per CSS zu erstellen.

Dein Rahmen ist eine Grafik, hier erstellst du einfach ein großes div mit einer Repeatgrafik und in diesem Div machst du einen weiteren mit der Farbe deiner Wahl. Dem inneren Div gibst du in jede Richtung ein Margin und hast deine Bordergrafik.