psyhead.de - Forum, Community and more ... || how Home Slicen und HTML bearbeiten

Forenübersicht : PHP / MYSQL / HTML / CSS »

[how2]Homepage Slicen und HTML bearbeiten

psyhead

Profilbild

King of Party
Beiträge: 1374

#1670 | 11.04.2007 - 21:55:49[Zitieren] [Bearbeiten]

Hier eine kurze und knappe Anleitung, wie man seine Seite selber malt und daraus eine Seite erstellt. Diese Methode ist schnell und einfach und auf Grafik konzentriert. Hier wird nicht die Verwendung von CSS angesprochen. Dies ist ein Tabellendesign.

1.
Mal dir in Photoshop deine Seite

2.
Springe zu Image Ready mit der Tastenkombination: Umsch + Strg + M
oder über das Menü: Datei -> Springe zu -> Image Ready
3.
Zerschneide dir deine Seite mit dem Splicewerkzeug

4.
Stell die HTML-Parameter ein:

5.
Speicher deine Seite als HTML + Bild ab

6. Quelltext anschauen

Hier in schön: http://www.psyhead.org/pics/webdesign/tutorials/slicen_html/6.jpg

beim slicen gibt es kleine nummern. slicenummer gleich bild_x!
in den td muss rein style="background: url('adresse_bild') #fff" width: Xpx; height: Xpx; repeat-y;
Damit wird der Tabellencelle dieses Bild als Hintergrundbild eingestellt.
wenn die Zelle unverändert bleibt, muss breite und höhe mit angegeben werden.

Das sieht dann so aus

code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47 <html> <head> <title>Testseite</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table width="800" border="0" cellpadding="0" cellspacing="0"> <tr> <td rowspan="5" style="vertical-align:top;"> <img src="Bilder/index_01.gif" width="4" /></td> <td rowspan="2"> <img src="Bilder/index_02.gif" width="261" height="152" alt="Martin Kumbier Webdesign & Webprogrammierung" /></td> <td> <img src="Bilder/index_03.gif" /></td> </tr> <tr> <td> <img src="Bilder/index_04.gif" /></td> </tr> <tr> <td style="background: url('Bilder/index_05.gif') repeat-y; width: 261px; height: 300px; padding-left: 10px; vertical-align:top;"> Menü <li>Link1</li> <li>Link2</li> <li>Link3</li> <li>Link4</li> </td> <td rowspan="3" style="vertical-align: top;"> Testbla <img src="img/smilies/stimmung/biggrin.gif" alt=":D" /></td> </tr> <tr> <td> <img src="Bilder/index_07.gif" width="261" height="14" alt="" /></td> </tr> <tr> <td> <img src="Bilder/index_08.gif" width="261" height="39" alt="" /></td> </tr> </table> </body> </html>

Wenn alles fertig ist, sieht es so aus. der Quelltest der oben steht ist das auf dem Bild!

So, das wars doch eigentlich schon. Ich hoffe es hat geholfen. Wenn nicht, bitte Fragen.

- Der Merkel Effekt: Mehr Brutto verdienen, weniger Netto kriegen.
- Das Leben ist zu kurz für lange Kabelwege
- Wenn eine Idee am Anfang nicht absurd klingt, dann gibt es keine Hoffnung für sie. - Albert Einstein

2x editiert. Zuletzt am 11.04.2007 - 23:16:17

psyhead

Avatar

11.04.2007 - 21:55:49

Um die Werbung auszublenden, einfach kostenlos registrieren. Für Mitglieder ist die Werbung nicht sichtbar!

[Antworten]