png / psd als Html umsetzung?

Tream

Hallo,
ich hätte da mal ne Frage.
Ich habe mir mit Fireworks mein eigenes Design erstellt, jetzt wollte ich fragen wie ich ne Html umsetztung draus machen kann, html behersche ich zwar perfekt, mach sowas aber zum ersten mal!
Programme wie Dreamweaver/Fireworks/Photoshop cs2 stehen mir zur verfügung.
Es wäre sehr sehr nett wenn ihr mir eine Erklärung posten könntet, ich kann mir vorstellen das es nicht einfach ist, aber dumm bin ich nicht,
Suche und Google hab ich benutzt - ohne erfolg!

Vielen Vielen Dank an alle die mir helfen können!

driver

du kannst html perfekt ?

na dann... einfach des design in nem grafikprogramm zerschneiden.
also aufteilen in banner, buttons, hintergrund....

und diese dann via html wieder zusammenfügen... ganz easy

Tream

Also wie man es nimmt. Vielleicht nicht ganz perfekt, es gibt immer Sachen die Man nicht kann!
Also ich habs jetzt zerschnitten, in die Punkte die ich haben Will, könntest du mir aber noch etwas näher erklären wie ich es zusammenstellen soll?
Danke!

driver

tja, je nachdem du willst....
mit framesets, iframes, divs, tabellen...

kommt auch drauf an wie deine seite aufgebaut werden soll.
also wie der platz genutzt wird...

btw.
auch wenn ich drauf rumreite - wenn du sagst du kannst es (fast) perfekt,
dann sollte dir das doch eigentlich keine probleme bereiten ?

Tream

Naja wie gesagt ich hab mit sowas noch nie rumgespielt... verstehs zwar immer noch nicht so ganz..

driver

mit was rumgespielt ?

is doch nix dabei, wennst html kannst musst doch frames, divs... auch kennen.
oder haste bis jetzt nur erfahrung mit frontpage und co ?

Tream

Wäre nett wenn du mir das einfach erklären könntest und nicht nur fragen würdest wie weit ich das alles kann,
nein ich arbeite normalerweise am quellencode, wenn mit einem Programm dann mir Dreamweaver, hat aber nichts mit frontpage zu tun, schreibe selber die Tags usw...

Naja mir scheint das ich wohl doch nicht so gut html kann... alles kann ich ja unmöglich wissen sonst würde ich den Thread hier nicht aufmachen!

Ansonsten bedanke ich mich schon für deine Hilfe!

mfg Tream

driver

im prinzip hab ich dir schon alles erklärt. ne html-syntax kann ich dir kaum
geben, da ich nicht weis wie dein design aussieht....

du könntest ja einfach mal ne html seite anlegen.
gib der n hintergrundbild und setz n div-tag an die position
wo später des menü sein soll. dann füll den div mit den verschiedenen
links, verteile classen und definier die anzeige in ner css-datei...

wär schonmal n guter start...

Tream

Also,
vielen Dank für deine Mühe...
hab ne Stunde lang rumprobiert und jetzt hats geklappt.
Dauert noch was bis es fertig ist, kann dir dann mal einen screeny schicken, vom aufbau her!
ty

mfg TReam

driver

genau, mach des....

Tream

hätte mal ne Frage, immer wenn der Text auf der Seite länger ist als die Seite selber wird oben rechts ein häßliches kästchen angezeigt, das in der vorschau nicht da ist... Wie bekomm ich das weg? Hier ein screen:

[Blockierte Grafik: http://www.directupload.net/images/061221/NiBEmUzv.jpg]

Hab eigentlich keine Lust den Text immer auf eine Seite zu beschränken!

Mfg Tream

Edit: Ahja, je mehr Text auf der Seite, desto größer der "Fehler"

driver

äh.... wo steht der "mehr Text" ?

hast schon ne url oder n bischen quelltext ?

Tream

neben dem PDA Handy, da hab ich halt den TExt stehen, und je länger der Text ist desto größer wird das kästchen...

... weißt du wie ich das wegbekomme?...

driver

hm... zeig mal den quelltext...

Tream

Zitat

<td width="188" background="images/fon_right.gif"></td>

Also das steht dann über dem Kästchen das erstellt wird...

driver

hast du auch den kompletten quelltext mal ?

Tream

Zitat

<html>
<head>
<title>Your Company Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body leftmargin=0 topmargin=0 marginheight="0" marginwidth="0" bgcolor="#ffffff">

<div align="left">
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td width="50%" background="images/bg.gif" valign="top"></td>
<td valign="top" background="images/bg_left.gif"> </td>
<td valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="780"></td>
<td width="100%">
<table width="780" border="0" cellspacing="0" cellpadding="0">
<tr>
<td></td>
</tr>
<tr>
<td height="40" background="images/fon03.gif"></td>
</tr>
</table> </td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="188" background="images/fon_right.gif"></td>
<td rowspan="3" width="100%">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td height="34" background="images/fon_right.gif"></td>
<td bgcolor="#B9B9B9"></td>
</tr>
<tr valign="top">
<td background="images/fon01.gif" style="background-position: top; background-repeat: repeat-x;">

<table border="0" cellspacing="0" cellpadding="0" width="90%" background="" align="center">
<tr valign="top">
<td align="center">

[url=''][/url]

[url=''][/url] </td>
<td>

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </p>
</td>
</tr>
</table> </td>
<td bgcolor="#B9B9B9"></td>
</tr>
</table> </td>
</tr>
<tr>
<td bgcolor="#246494" valign="top">

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<form action="" method="post">
<td width="188" height="161" background="images/left_top.gif" valign="top"><p class="left"></p> </td>
</form>
</tr>
<tr>
<td bgcolor="#48C8FF"></td>
</tr>
<tr>
<td>
<p class="menu">Home[url=''][/url]</p> </td>
</tr>
<tr>
<td bgcolor="#48C8FF"></td>
</tr>
<tr>
<td>
<p class="menu"> Praktikum </p> </td>
</tr>
<tr>
<td bgcolor="#48C8FF"></td>
</tr>
<tr>
<td>
<p class="menu">Beruf[url=''][/url]</p> </td>
</tr>
<tr>
<td bgcolor="#48C8FF"></td>
</tr>
<tr>
<td>
<p class="menu"> Ausbildung </p> </td>
</tr>
<tr>
<td bgcolor="#48C8FF"></td>
</tr>
<tr>
<td>
<p class="menu">Nachwort[url=''][/url]</p> </td>
</tr>
<tr>
<td bgcolor="#48C8FF"></td>
</tr>
<tr>
<td>
<p class="menu">Gästebuch[url=''][/url]</p> </td>
</tr>
<tr>
<td bgcolor="#48C8FF"></td>
</tr>
</table>
<p class="left"></p>
</td>
</tr>
<tr bgcolor="#246494">
<td height="72" valign="bottom">
<table border="0" cellspacing="0" cellpadding="0" width="188" height="72" background="images/left_bot.gif">
<tr>
<td height="72" valign="bottom">
<p class="left" style="margin-bottom: 0px; margin-left: 20px;">Copyright ® 2007

Alle Rechte liegen bei http://www.ItsDiablo.de und Wadim Brechow.</p> </td>
</tr>
</table> </td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="77" background="images/fon_bot.gif">
<tr>
<td valign="top" width="780">
<p class="bot">[url='']Alle Rechte dieser Website und alle dazugehörigen Sites liegen bei Itsdiablo.de und Wadim Brechow[/url] </p> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table> </td>
<td valign="bottom" background="images/bg_right.gif"></td>
<td width="50%" background="images/bg.gif" valign="top"></td>
</tr>
</table>
<map name="Map">
<area shape="rect" coords="96,94,148,111" href="#">
<area shape="rect" coords="151,94,220,111" href="#">
</map>
</div>
</body>
</html>

Alles anzeigen

Hier, hoffe du kannst mir jetzt helfen!

driver

hm ganz sicher bin ich mir nicht... der quelltext is rech umfangreich...

ich würd mal sagen du musst den inhalt mit einem rowspan versehen.
damit er über mehrere zeilen geht und auch am menü vorbei.

allerdings fände ich ne lösung mit divs allein etwas angenehmer...

Tream

Könntest du es mir etwas genauer erklären?
vielen Dank!

driver

stell mal die seite online, oder lad se hier als zip hoch.
dann schau ich se mir mal an (weil ohne bilder is des mit der
verschiebung etwas schwer zu erkennen). vielleicht kann
ich se direkt verbessern...

Tags

Benutzer online in diesem Thema