Anzeige

Anklickbarer Newsletter-Banner

Anklickbarer Newsletter-Banner | PSD-Tutorials.de

Erstellt von wr-graphics, 25.10.2010.

  1. wr-graphics

    wr-graphics Macher, Pixelschubser

    Dabei seit:
    02.09.2009
    Beiträge:
    659
    Geschlecht:
    männlich
    Ort:
    Neu-Anspach
    Software:
    Creative Cloud, iTunes, Ableton Live
    Kameratyp:
    Nikon D90, Polaroid 600, Canon, EXA 1b, Praktika
    Anklickbarer Newsletter-Banner
    Hallo Leute,

    es ist ziemlich selten, dass ich mal was im Webbereich poste, aber heute ist so ein Tag. Im vorraus: Ich bin kein Webdesigner und habe auch gänzlich wenig Erfahrung damit. Ich möchte momentan einen Webbanner für einen Newsletter verschieden anklickbar machen. Hab erstmal die Standartexportfunktion von PS benutzt, also the dirtyway über eine Tabelle. Funktioniert, aber natürlich nur begränzt, also würde ich das Ganze Teil gern in Form von div-tags nachbauen, da ich aber von posotionierungsbefehlen über CSS oder XHTML sagen wir mal nur sehr begränzt Ahnung habe, bitte ich euch um eure Hilfe. Ich hab hier noch eine kleine Skizze wie das Teil aussieht mit ein paar Pixelmaßen. Die grauen Flächen sollen anklickbar sein.

    [​IMG]

    Uploaded with ImageShack.us

    Könnt ihr mir bitte helfen?

    LG
    Eastwood
     
    #1      
  2. fexx

    fexx Aktives Mitglied

    Dabei seit:
    13.07.2010
    Beiträge:
    1.058
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Adobe Creative Cloud, Coda2
    Anklickbarer Newsletter-Banner
    AW: Anklickbarer Newsletter-Banner

    einen newsletter sollte man generell in form von tabellen anlegen, weil manche e-mail clienten probleme mit dem darstellen von divs haben.

    und einen banner kannst du doch über das <a>-tag verlinken?!

    Code (Text):
    1.  
    2. <a href="#"><img src="" alt="" ... /></a>
    3.  
    Articles & Tips, Free Email Templates & Downloads - Campaign Monitor hier findest du einige gute tipps
     
    #2      
  3. Doitsu

    Doitsu Aktives Mitglied

    Dabei seit:
    15.04.2009
    Beiträge:
    482
    Anklickbarer Newsletter-Banner
    AW: Anklickbarer Newsletter-Banner

    Hm, wenn das jetzt einfach nur ein Bild ist, welches verlinkt werden soll wuerde ich eher auf eine image_map setzen. Wenn da aber noch HTML rein kommt machst du ein div als wrapper, welches auf position: relative; gesetzt wird, anschliessend richtest du die 3 divs welche inhalte bekommen per position: absolute; aus.
    sprich:
    Code (Text):
    1.  
    2. <style type="text/css">
    3. #wrapper {
    4.   position: relative;
    5.   top: 96px;
    6. }
    7. #wrapper div {
    8.   background: #999;
    9.   position: absolute;
    10. }
    11.  
    12. #left_content {
    13.   left: 30px;
    14.   width: 500px;
    15.   height: 500px;
    16. }
    17.  
    18. #right_top_content {
    19.   left: 560px;
    20.   height: 400px;
    21.   width: 100px;
    22. }
    23.  
    24. #right_bottom_content {
    25.   left: 560px;
    26.   top: 430px;
    27.   width: 100px;
    28. }
    29. </style>
     
    #3      
  4. wr-graphics

    wr-graphics Macher, Pixelschubser

    Dabei seit:
    02.09.2009
    Beiträge:
    659
    Geschlecht:
    männlich
    Ort:
    Neu-Anspach
    Software:
    Creative Cloud, iTunes, Ableton Live
    Kameratyp:
    Nikon D90, Polaroid 600, Canon, EXA 1b, Praktika
    Anklickbarer Newsletter-Banner
    AW: Anklickbarer Newsletter-Banner

    @ fexx: Also wäre es eher Contraproduktiv mit Div-Tags zu arbeiten?
     
    #4      
  5. nostra87

    nostra87 Nicht mehr ganz neu hier

    Dabei seit:
    20.06.2007
    Beiträge:
    176
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Photoshop
    Anklickbarer Newsletter-Banner
    AW: Anklickbarer Newsletter-Banner

    Es kommt auf die Programmierung an. Tables müssen nicht
    zwingend notwendig sein.

    Gruß
     
    #5      
  6. wr-graphics

    wr-graphics Macher, Pixelschubser

    Dabei seit:
    02.09.2009
    Beiträge:
    659
    Geschlecht:
    männlich
    Ort:
    Neu-Anspach
    Software:
    Creative Cloud, iTunes, Ableton Live
    Kameratyp:
    Nikon D90, Polaroid 600, Canon, EXA 1b, Praktika
    Anklickbarer Newsletter-Banner
    AW: Anklickbarer Newsletter-Banner

    die Frage ist vielmehr, ob es mit Tablelayout auch überall gleich angezeigt wird. Also ob alle Mailclienten den Code gleich interpretieren und was passiert wenn die Leute ihre Mails per Server aufrufen. Da gibt es ja leider interpretationslücken bezüglich der Darstellung. Nur wenn das eh keinen unterschied beim verschicken per Mail macht, wäre es ja contraproduktiv das ganze nochmal umzubauen auf Div-tags oder nicht?
     
    #6      
  7. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Anklickbarer Newsletter-Banner
    AW: Anklickbarer Newsletter-Banner

    mit dem Tabellendesign und inlinestyles wirst du die grössten chancen haben, dass die Mails bei unterschiedlichen Szenarien gleich aussehen.
     
    #7      
  8. wr-graphics

    wr-graphics Macher, Pixelschubser

    Dabei seit:
    02.09.2009
    Beiträge:
    659
    Geschlecht:
    männlich
    Ort:
    Neu-Anspach
    Software:
    Creative Cloud, iTunes, Ableton Live
    Kameratyp:
    Nikon D90, Polaroid 600, Canon, EXA 1b, Praktika
    Anklickbarer Newsletter-Banner
    AW: Anklickbarer Newsletter-Banner

    Hey Jungs hab momentan mit meiner Tabbellenversion noch das Problem, dass Firefox den Code merkwürdig intepretiert. Muss euch leider den Screenshot zensieren weils für die Arbeit ist.

    [​IMG]

    Uploaded with ImageShack.us

    Hier noch der geoxmoxte Quellcode:

    HTML:
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <title>oxmox</title>
    4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    5. </head>
    6. <body bgcolor="#FFFFFF">
    7. <!-- Save for Web Slices (oxmox.psd) -->
    8. <table id="Tabelle_01" width="570" border="0" cellpadding="0" cellspacing="0">
    9.     <tr>
    10.         <td colspan="6">
    11.             <img id="oxmox01" src="http://www.psd-tutorials.de/modules/Forum/images/oxmox01.gif" width="570" height="97" alt="" /></td>
    12.     </tr>
    13.     <tr>
    14.         <td rowspan="4">
    15.             <img id="oxmox02" src="http://www.psd-tutorials.de/modules/Forum/images/oxmox02.gif" width="30" height="311" alt="" /></td>
    16.         <td rowspan="4"><a href="oxmox.del"><img id="oxmox03" src="http://www.psd-tutorials.de/modules/Forum/images/oxmox03.png" width="303" height="311" alt="oxmoxel" /></a></td>
    17.         <td rowspan="4">
    18.             <img id="oxmox04" src="http://www.psd-tutorials.de/modules/Forum/images/oxmox04.gif" width="46" height="311" alt="" /></td>
    19.         <td colspan="2"><a href="oxmox.de"><img id="oxmox05" src="http://www.psd-tutorials.de/modules/Forum/images/oxmox.png" width="159" height="259" alt="oxmoxten" /></a></td>
    20.         <td rowspan="4">
    21.             <img id="oxmox" src="http://www.psd-tutorials.de/modules/Forum/images/oxmox06.gif" width="32" height="311" alt="" /></td>
    22.     </tr>
    23.     <tr>
    24.         <td colspan="2">
    25.             <img id="oxmox" src="http://www.psd-tutorials.de/modules/Forum/images/oxmox07.gif" width="159" height="19" alt="" /></td>
    26.     </tr>
    27.     <tr>
    28.         <td rowspan="2">
    29.             <img id="oxmox08" src="http://www.psd-tutorials.de/modules/Forum/images/oxmox08.gif" width="51" height="33" alt="" /></td>
    30.         <td><a href="http://www.smile2.de/index.php?r=smeeting/show&amp;id=1249&amp;key=smeeting_teilnehmen"><img id="oxmox09" src="http://www.psd-tutorials.de/modules/Forum/images/oxmox09.png" width="108" height="17" alt="mehr erfahren" /></a></td>
    31.     </tr>
    32.     <tr>
    33.         <td>
    34.             <img id="oxmox_10" src="http://www.psd-tutorials.de/modules/Forum/images/oxmox.gif" width="108" height="16" alt="" /></td>
    35.     </tr>
    36. <!-- End Save for Web Slices -->
    37. </body>
    38. </html>
    Könnt ihr mir helfen?
     
    #8      
  9. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Anklickbarer Newsletter-Banner
    AW: Anklickbarer Newsletter-Banner

    Nach dem, was auf dem 'Screen' zu sehen ist, sehe ich eine Tabelle mit drei Zellen. In der oberen Zelle eine Überschrift und einen Textabsatz (oder beides duch eine Grafik ersetzt), in der linken unteren Zelle unten links ausgerichtet ein Bild, in der rechten unteren recht ausgerichtet eine Grafik, und darunter eine als Button. Diese sind rechts ausgerichtet, und die Zelle hat rechts ein Padding.
    Code (Text):
    1.  
    2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    5. <meta name="language" content="de" />
    6. <title></title>
    7. </head>
    8.  
    9. <body>
    10. <table width="570" style="border: 1px solid #000000" cellpadding="0" cellspacing="0">
    11. <tr>
    12.   <td colspan="2" style="padding-top:30px; padding-left:30px; padding-bottom: 10px;">
    13.     <img src="oben.jpg" />
    14.   </td>
    15. </tr>
    16. <tr>
    17.   <td style="padding-left:30px; text-align: left;">
    18.     <img src="ul.jpg" />
    19.   </td>
    20.   <td style="padding-right:30px; text-align: right;">
    21.     <img src="rechts.jpg" />
    22.     <img src="button.jpg" style="margin-top: 20px; margin-bottom: 10px;" />
    23.   </td>
    24. </tr>
    25. </table>
    26. </body>
    27. </html>
    28.  
    http://twoiback.de/PSD/mail-table/
     
    #9      
x
×
×