GIMP Design in HTML umsetzen?!?!

marco563

Hallo,
ich habe mir gerade mal ein Tutorial zu Gimp durchgelesen,wie ich damit ein Design erstelle.Das habe ich jetzt auch mal so gemacht.Aber wie bekomme ich das jetzt in HTML umgesetzt? Also was muss ich machen das die Links vom Navi genau da angezeigt werden wo sie hin sollen und wie bekomme ich das Copyright in den Footer? Wäre nett wenn mir jemand helfen könnte,deswegen hänge ich das Bild auch mal an.Aber bitte nicht bewerten.Danke!
http://img102.imageshack.us/my.php?image=designof8.jpg

Gamling

Zuerst einmal: http://de.selfhtml.org <=hilft

Zum Bild sag ich wie gewünscht nichts...

Also du müsstest die Bilder als Hintergründe in z.B. divs, Tabellen, frames machen. (Von links nach rechts abnehmend in der Qualität). Dazu müsstest du aber schon wenigstens ein bisschen html können. Lies dich vielleicht mal 4-5 Stunden ein, dann kannst du mit spezifischen Fragen wiederkommen. Alternativ kannst du dir halt auch irgendwo einen suchen, der dir das codet.

Gamling

marco563

Hi,
etwas HTML kann ich auch....würde mich halt als Anfänger bezeichnen.Nur ist das das erste mal das ich mich an ein eigenes Design ran wage.Also muss ich das Bild bzw. Design in mehrere Bilder unterteilen( sprich Navi,Header etc...)? Weil das ist ja eine einteilige Grafik.

sudeki05

Ja genau unterteilen und dann nach wunsch zerschneiden
diese dann als bgs in wie geschreiben div/table etc. einbinden

marco563

Hallo,
habe es mir jetzt nochmal erstellt und jetzt als .xcf gespeichert(um es später bearbeiten zu können),was muss ich jetzt machen? Wie bekomme ich die einzelnen Teile da jetzt raus?

Edit: Die einzelnen Teile habe ich rauskopiert(habs doch geschafft).Was muss ich jetzt machen.Ich habe jetzt alle einzelnen Teile erstmal als .xcf gespeichert (navi,header,footer etc.) und jetzt?

sudeki05

Du musst diese nun als z.B. .jpg oder .png speichern, da der browser sie sonst nicht unbedingt verarbeiten kannt und dann ziehst du ein design einfach auf z.B. eine tabelle
und machst aus dem ersten td einen headerplatz du gibst den td die größe und länge des headers und den nimmst du dann als bg dort mit rein:

<table>
<tr><td width="300" height="100" background="header.jpg"></td></tr>
</table>
das wäre zum Beispiel der header

marco563

Also so?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Marco´s World</title>
</head>
<body>
<table>
<tr><td width="800" height="168" background="img/header.jpg"></td></tr>
</table>
</body>
</html>

Im Browser wirds so aber nicht angezeigt.

Martin279

Ist die Datei Header auch im verzeichnis wie die Index Datei(deine Datei untne)??

marco563

Ne....deswegen ja auch img/header.jpg und wenn ich die ins gleiche Verzeichniss packe gehts auch nicht.

Edit: Jetzt gehts hatte die Datein eben nur umgenannt^^.Jetzt habe ich oben den Header und links dadrunter das Menü.Aber wie bekomme ich jetzt ganz rechts nach aussen die Partner-Box?

McPokers

Nimm dein Bild, und "slice" es erstmal. Bei gimp macht man das mit der Guilloutine.

Hast dann alle Teilbilder in einem Ordner, und musst sie via HTML nur wieder zusammensetzten.

marco563

Jop,soweit war ich ja jetzt.Ich habe den Header und das Navi in HTML umgesetzt.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Marco´s World</title>
</head>
<body>
<table>
<tr><td width="800" height="168" background="img/header.jpg"></td></tr>
</table>
<table>
<tr><td width="173" height="340" background="img/navi.jpg"></td></tr>
</table>
</body>
</html>

Aber wie bekomme ich jetzt die Partner-Box (also im Endeffekt das gleiche wie das Navi) nach rechts aussen? Weil wenn ich das jetzt darunter setze wird es ja unter der Navi Box angezeigt,wie bekomme ich das jetzt nach rechts aussen?

sudeki05

leider sehe ich auf dein bild keine partnerbox aber wie folgt:

Code

<table border="1"><tr><td>NAVI</td><td>inhalt</td><td>partnerbox</td></tr></table>

so sinds nun 3 spalten und border="1" zeigt dir mal den rand an..

McPokers, bitte erst möglichst die anderen replys durchlesen denn dies hattenw ir schon allerdigt.

mit width kannst auch wieder der table die breite geben
gleich voraus, damit der inhalt der <td> immer ganz oben ist einfach im td-tag valign="top" hinzufügen also so:

Code

... <td valign="top"></td>....

marco563

Hi,
ich meinte das mit der Partner-Box auch so wie mit dem Navi,hab auch so einen Kasten als .jpg gemacht und der soll auch mit table gemacht werden
also : <table>
<tr><td width="173" height="340" background="img/partner.jpg"></td></tr>
</table> nur halt das das rechts angezeigt werden soll.Wie kriege ich das hin?

marco563

Weiss keiner weiter? Ich bin schon die ganze Zeit am rum probieren und im Internet finde ich nichts gescheites.Ich will aber endlich an der Page weiter machen und dazu muss ich wissen wie ich die Box rechts ausrichte.Wäre also nett wenn jemand weiter weiss.

sudeki05

schau doch mein beitrag mach den hauptbereich als große tabelle wo
navi+content+partnerbox reinkommen...

Code

<table border="1"><tr><td>NAVI</td><td>inhalt</td><td>partnerbox</td></tr></table>

....

marco563

Hm...aber das sieht da irgendwie komisch aus.Schau mal http://marco565.ma.funpic.de/marco/ .

sudeki05

Dann musst du einfach mal den tabelle zund einzelnen td's eine feste größe zu weisen und wie die schrift ganz oben steht hatte ich ein zwei post vorher ergklärt mit avlign="top"

mit cellspacing="0" und cellpadding="0" kannst noch die rest abstände nehmen wenn du willst... diese kommen ins table also:

Code

<table cellspacing="0" cellpadding="0" > ...

marco563

So jetzt gehts^^.Aber sieht das mit den Tabellen-Rändern nicht etwas komisch aus? Und wenn ich jetzt einige Zeichen vom Content-Bereich weg nehme,dann rückt natürlich die ganze Tabelle nach links,dass wäre dann das nächste Problem. http://marco565.ma.funpic.de/marco/

sudeki05

weise deinen td eine feste größe zu dein content bereicht hat keine eingestellte größe und bei der partnerbox kannst das " wegmachen sprich da:

marco563

Hi,
so feste Größe ist zugewiesen.Aber findest du nicht auch das ein bischen komisch aussieht wenn diese Rahmen von den Tabellen rum sind? Alle anderen haben es doch auch ohne Rahmen sprich Tabelle.

Tags