Anzeige

Text über Bilder schreiben?

Text über Bilder schreiben? | PSD-Tutorials.de

Erstellt von kn0x, 09.07.2013.

  1. kn0x

    kn0x Noch nicht viel geschrieben

    Dabei seit:
    09.06.2013
    Beiträge:
    4
    Text über Bilder schreiben?
    Hallo,

    habe mir eine Homepage mit photoshop gebastelt und die dann zu geschnitten auch mit photoshop. Nun habe ich die einzelnen menu bilder halt rein gesezt. Nun möchte ich aber das der Content bereich mit einen Text belegt wird... aber irgendwei bekomme ich das nicht hin:

    Code (Text):
    1. <html>
    2. <head>
    3. <title>hp</title>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    5. <style type="text/css">
    6. <!--
    7. body {
    8.     background-color: #000000;
    9. }
    10. -->
    11. </style></head>
    12. <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    13. <table width="1000" height="1111" border="0" align="center" cellpadding="0" cellspacing="0" >
    14.     <tr>
    15.         <td colspan="11">
    16.             <img src="Bilder/index_01.gif" width="1000" height="376" ></td>
    17.     </tr>
    18.     <tr>
    19.         <td>
    20.             <img src="Bilder/index_02.gif" width="167" height="170" ></td>
    21.         <td>
    22.             <img src="Bilder/index_03.gif" width="19" height="170" ></td>
    23.         <td><img src="Bilder/index_04.gif" width="101" height="170"></td>
    24.         <td><img src="Bilder/index_05.gif" width="133" height="170"></td>
    25.         <td>
    26.             <img src="Bilder/index_06.gif" width="25" height="170" ></td>
    27.         <td><img src="Bilder/index_07.gif" width="119" height="170"></td>
    28.         <td>
    29.             <img src="Bilder/index_08.gif" width="14" height="170" ></td>
    30.         <td><img src="Bilder/index_09.gif" width="105" height="170"></td>
    31.         <td>
    32.             <img src="Bilder/index_10.gif" width="41" height="170" ></td>
    33.         <td>
    34.             <img src="Bilder/index_11.gif" width="97" height="170" ></td>
    35.         <td>
    36.             <img src="Bilder/index_12.gif" width="179" height="170" ></td>
    37.     </tr>
    38.     <tr>
    39.         <td colspan="11">
    40.             <img src="Bilder/index_13.gif" width="1000" height="274" ></td>
    41.     </tr>
    42.     <tr>
    43.         <td colspan="11">
    44.             <img src="Bilder/index_14.gif" width="1000" height="233" ></td>
    45.     </tr>
    46.     <tr>
    47.         <td colspan="11">
    48.             <img src="Bilder/index_15.jpg" width="1000" height="58" ></td>
    49.     </tr>
    50. </table>
    51. </body>
    52. </html>
    so und davon soll folgendes bild mit einen Text belegt werden auf dem Bild:
    Code (Text):
    1. [COLOR=#008080]<td colspan=[COLOR=#0000FF]"11"[/COLOR]>[/COLOR]             [COLOR=#800080]<img src=[COLOR=#0000FF]"Bilder/index_13.gif"[/COLOR] width=[COLOR=#0000FF]"1000"[/COLOR] height=[COLOR=#0000FF]"274"[/COLOR] alt=[COLOR=#0000FF]""[/COLOR]>[/COLOR][COLOR=#008080]</td>[/COLOR]
    Und hier soll später halt ein text stehen:

    http://img1.picload.org/image/ogiwdpa/screen.png

    Also ich bin ein totaler Anfänger was das angeht also html usw.

    Bitte kann mir wer da weiter helfen?

    Gruß
     
    #1      
  2. Aelfry

    Aelfry Web Developer

    Dabei seit:
    17.02.2007
    Beiträge:
    794
    Geschlecht:
    männlich
    Ort:
    Mönchengladbach
    Software:
    CC, SublimeText, Git, Sass, Gulp
    Kameratyp:
    Canon EOS 60D
    Text über Bilder schreiben?
    AW: Text über Bilder schreiben?

    Als erstes solltest du deinen bzw. den von Photoshop generierten "Tabellen-Layout-Code" wegwerfen.
    Zum einen ist der Code von PS völliger Schrott und zum anderen ist diese Art der Programmierung (Tabellen Layout) völlig veraltet.

    Ich rate dir dringend, dir erst mal Grundkenntnisse in HTML und CSS anzueignen (gibt mehr als genug Tutorials).
    Denn sonst wird das hier nichts, weil du mit den Tipps wenig anfangen kannst.

    Da dein Layout recht einfach strukturiert ist, solltest du nach entsprechender Einarbeitung in die Materie recht flott in der Lage sein, dein Layout vernünftig umzusetzen.
     
    #2      
  3. TeimoChan

    TeimoChan Noch nicht viel geschrieben

    Dabei seit:
    14.06.2013
    Beiträge:
    16
    Text über Bilder schreiben?
    AW: Text über Bilder schreiben?

    Hallo kn0x,

    ich kann mich Aelfry nur anschließen. Bevor Du eine eigene Website mit Photoshop etc. erstellst, solltest Du HTML und CSS Kenntnisse haben. Der Code von Photoshop bringt Dir nur eine ganz grobe Strukturierung der Website.

    Damit Du überhaupt mal in das Thema HTML einsteigen kannst empfehle ich Dir: SelfHTML

    Ich selber habe mit einem Buch von Markt & Technik angefangen. Das ist auch nur zu empfehlen, weil es dort verschiedene Stufen der Bücher gibt.

    Wie Du aber schon richtiger Weise erkannt hast, muss das Bild auf jeden Fall als Hintergrund gelegt werden. Dies würde ich Dir empfehlen mit CSS zu machen. und in der Y-Achse zu wiederholen.
    Darüber hinaus solltest Du die CSS-Datei als externe Datei einbinden. Steht aber alles bei SelfHTML.

    Ansonsten finde ich Deine Idee sehr gelungen.
     
    #3      
  4. hub

    hub nicht ganz neu hier

    Dabei seit:
    11.06.2008
    Beiträge:
    1.116
    Geschlecht:
    männlich
    Ort:
    Taunus
    Software:
    PS,Lr. VS Code, NP++, ...
    Kameratyp:
    Sony a 6000
    Text über Bilder schreiben?
    AW: Text über Bilder schreiben?

    Moin,
    man kann den Export einrichten/anpassen und man bekommt sogar ein Gerüst mit DIV-Elementen (umschalten auf "CSS generieren"). Aber auch da gilt, was Aelfry geschrieben hat ...

    Gruß Ulli
     
    #4      
  5. Text über Bilder schreiben?
    AW: Text über Bilder schreiben?

    Bitte nicht schon wieder SelfHTML! Veraltet und nicht mehr maßgeblich.

    http://little-boxes.de/little-boxes-teil1-online.html
    http://www.thestyleworks.de/ref/float.shtml

    Auch noch interessant, wenn auch nicht so ganz auf dem neusesten Stand:
    http://jendryschik.de/wsdev/einfuehrung/

    Generell kann ich mich den Vorpostern nur anschließen. Vergiss den Code(müll), den PS erzeugt und eigne Dir HTML und CSS an.

    Die naheliegendste Quelle findest Du direkt hier bei PSD-Tutorials: http://www.psd-tutorials.de/tutorials/web/html-css
     
    Zuletzt von einem Moderator bearbeitet: 09.07.2013
    #5      
  6. kn0x

    kn0x Noch nicht viel geschrieben

    Dabei seit:
    09.06.2013
    Beiträge:
    4
    Text über Bilder schreiben?
    AW: Text über Bilder schreiben?

    Vielen dank für eure Antworten, na dann werd ich mich da mal rein arbeiten.
     
    #6      
x
×
×