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

ShapyShape · 09/02/2010, 23:33

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:

Header

Content-Bereich

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..

~~F431.~~ · 09/02/2010, 23:35

danke

ShapyShape · 09/02/2010, 23:47

Kein problem schön das es dir geholfen hat..

HajRii · 09/02/2010, 23:54

danke dier .
*drück thx*

ShapyShape · 09/03/2010, 00:11

Kein ding

.. hoffe hielft dir weiter..

Looneytune · 09/03/2010, 08:16

Ist das jetzt im Trend, statt den Danke-Button zu benutzen, einfach danke zu schreiben um seinen Postcounter bzw. ***** zu pushen?

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

Zum guide, schlichter gehts kaum.

~~xXxXNikiXxXx~~ · 09/03/2010, 09:45

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

Neon™ · 09/03/2010, 11:33

3 Bilder auf einer Homepage sollen ein Design sein?!

~~wurdegebannt~~ · 09/03/2010, 12:01

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.

Neon™ · 09/03/2010, 14:00

Quote:

Originally Posted by wurdegebannt

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...

ShapyShape · 09/03/2010, 14:52

Quote:

Originally Posted by Neon™

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

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™

Es geht um Designs für Homepages. Und die macht man nicht mit Gimp sondern mit css...

^this

Syc0n · 09/04/2010, 13:07

sinnloses Tutorial! So lernt man absolut gar nichts...

ShapyShape · 09/04/2010, 21:03

Eigentlich schon

.. aber dafür reicht eben dein denkvermögen nicht.. tut mir leid..

.:Tanker:. · 09/04/2010, 22:27

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

coBi' · 09/04/2010, 22:29

Danke !!!

*Thx geb*