[Tutorial;HTML]Wie code ich ein Designe..

Page 1 of 2 1 2
09/02/2010 23:33 ShapyShape#1

Für viele Leute ist es schwer von HTML Lehrgängen auf das Coden eines Designs überzuspringen.

Dies ist jedoch ein Tutorial für ein einfaches 3 Zeilen Design. Um auf kompliziertere Designs umzuspringen benötigt man mehr Geschick und z.B. Tabellen in den Tabellen.

Ihr braucht bei diesem Tutorial keine FTP Kenntnisse, d.h. es ist auch für blutige Anfänger geeignet!


Vorerst brauchen wir unser HTML-Grundgerüst das ja wie bereits bekannt wie folgt aussieht:
Code:
[COLOR="SeaGreen"]1:<html>
2:<head>
3:<title>Coden eines Designs</title>
4:</head>
5:<body>
6:</body>
7:</html>[/COLOR]
Nun brauchen wir ein Design. Ein einfaches Design besteht im Normalfall aus einem Header, dem Content-Bereich und einem Footer.

So sehen die einzelnen Teile aus:

[Only registered and activated users can see links. Click Here To Register...] Header

[Only registered and activated users can see links. Click Here To Register...] Content-Bereich

[Only registered and activated users can see links. Click Here To Register...] Footer

Um diese Bilder nun im Quelltext des Templates einzubauen müssen wir erstmal eine 3 Zeilige Tabelle in den Body des HTML-Grundgerüstes einbauen.

Dies sieht dann so aus:
Code:
1:<html>
2:<head>
3:<title>Coden eines Designs</title>
4:</head>
5:<body>
6:<table>
7:<tr>
8:<td>Header</td>
9:</tr>
10:<tr> 
11:<td>Content-Bereich</td>
12:</tr>
13:<tr>
14:<td>Footer</td> 
15:</tr>
16:</table>
17:</body>
18:</html>
Jetzt müssen die Bilder als Hintergrund für die einzelnen Zeilen gesetzt werden. Um dies zu bewerkstelligen nutzen wir in den TD-Tags das Style Attribut "background-image: url(Pfad zum Bild)". Außerdem müssen die Größe des Hintergrunds in den Attributen "width" und "height" (in Pixeln) angegeben werden.

Damit eure diese "Hintergrundbilder" der Zeilen später auch im Internet angezeigt werden sollen, müsst ihr sie auf einen Imagehoster laden. Sprich: Imageshack, Imagebanana usw. und dann den normalen Link ohne jeglichen Schnickschnacks kopieren.

Im Quelltext sieht das ganze dann so aus:
Code:
<html>
<head>
<title>Coden eines Designs</title>
</head>
<body>
<table>
<tr>
<td width="400" height="100" style="background-image: url(http://img168.imageshack.us/my.php?image=headercx3.png);">Header</td>
</tr>
<tr> 
<td width="400" height="20" style="background-image: url(http://img381.imageshack.us/my.php?image=contentbereichzs3.png);">Content-Bereich</td>
</tr>
<tr> 
<td width="400" height="13" style="background-image: url(http://img168.imageshack.us/my.php?image=footerdz9.png);">Footer</td>
</tr>
</table>
</body>
</html>
Nun müsstet ihr das ganze nur noch als HTML Datei abspeichern und fertig ist euer erstes gecodetes Design (auch Template genannt).

Gruß Don,

Thanks sind erwünscht..
09/02/2010 23:35 F431.#2
danke
09/02/2010 23:47 ShapyShape#3
Kein problem schön das es dir geholfen hat..
09/02/2010 23:54 HajRii#4
danke dier .
*drück thx*
09/03/2010 00:11 ShapyShape#5
Kein ding ;) .. hoffe hielft dir weiter..
09/03/2010 08:16 Looneytune#6
Ist das jetzt im Trend, statt den Danke-Button zu benutzen, einfach danke zu schreiben um seinen Postcounter bzw. Penis zu pushen?

Es geht auch noch duemmer, wir kommentieren jetzt auch noch jedes "danke" ...

Zum guide, schlichter gehts kaum.
09/03/2010 09:45 xXxXNikiXxXx#7
wenn´s hilft passt doch oder?

es ist zwar schlich und einfach aber manche anderen bringen
dass eben noch nicht auf die reihe da sie noch die sprache
lehrnen müssen
09/03/2010 11:33 Neon™#8
3 Bilder auf einer Homepage sollen ein Design sein?!
09/03/2010 12:01 wurdegebannt#9
In meinen Augen ist das nicht wirklich ein Design.
Sowas kann man mit Gimp natürlich besser und leichter ohne diesen HTML-Code-Quatsch machen.
09/03/2010 14:00 Neon™#10
Quote:
Originally Posted by wurdegebannt View Post
In meinen Augen ist das nicht wirklich ein Design.
Sowas kann man mit Gimp natürlich besser und leichter ohne diesen HTML-Code-Quatsch machen.
Es geht um Designs für Homepages. Und die macht man nicht mit Gimp sondern mit css...
09/03/2010 14:52 ShapyShape#11
Quote:
Originally Posted by Neon™ View Post
3 Bilder auf einer Homepage sollen ein Design sein?!
Ne nur nen beispiel.. :) kann man natürlich mehr designes einsetzen..
Quote:
Originally Posted by wurdegebannt View Post
In meinen Augen ist das nicht wirklich ein Design.
Sowas kann man mit Gimp natürlich besser und leichter ohne diesen HTML-Code-Quatsch machen.
In meinen Augen hast du überhaupt keine ahnung ;)..
Quote:
Originally Posted by Neon™ View Post
Es geht um Designs für Homepages. Und die macht man nicht mit Gimp sondern mit css...
^this
09/04/2010 13:07 Syc0n#12
sinnloses Tutorial! So lernt man absolut gar nichts...
09/04/2010 21:03 ShapyShape#13
Eigentlich schon ;) .. aber dafür reicht eben dein denkvermögen nicht.. tut mir leid..
09/04/2010 22:27 .:Tanker:.#14
Das ist eher ein Grundlagen Tutorial...und kein high End "Wie bastel ich mir ne HP in 2 Minuten" teil ;).

Gut gemacht und für kleien Projekte bestimmt zu gebrauchen ;)
09/04/2010 22:29 coBi'#15
Danke !!!

*Thx geb*
Page 1 of 2 1 2