phoenix
02.03.06, 18:13
nachdem wir in Teil 1 (http://www.photoshop-cafe.de/forum/t1650-animiertes-web-menu-teil-1-graphik.html) unsere bilder erstellt haben, werden wir diese nun in eine html seite einbauen. dafür reicht grundsätzlich ein x-beliebiger text editor, der dazu in der lage ist unformatierten text (unicode) zu speichern.
wer einen html-editor sein eigen nennt, darf selbstverständlich auch den bemühen. ich empfehle allaire homesite/macromedia homesite (je nach version). dreamweaver/golive tuts zur not auch. von netobjects fusion oder frontpage rate ich dringend ab!!
Step 1:
- als erstes erstellen wir das html grundgerüst, oder laden eine neue html-seite in einem html-editor. das html grundgerüst sieht dann in etwa so aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
</head>
<body>
</body>
</html>
- wer will darf den titel anpassen, hat aber keine auswirkung auf die funktionalität.
Step 2:
- nun beginnen wir damit eine tabelle hinzuzufügen. das grundgerüst für eine tabelle sieht in etwa so aus:
<table width="" border="" cellpadding="" cellspacing="">
</table>
- das sind die wichtigsten eigenschaften. nun beginnen wir die werte einzutragen.
- width ist die breite der tabelle. diese soll genau so breit sein wie die graphiken die wir erstellt haben. diese haben einheitsgrösse 150px, also tragen wir da den wert 150px ein.
- border ist der tabellenrand. brauchen wir nicht, also kommt ne 0 rein.
- cellpadding/cellspacing sind abstände innerhalb der tabelle. will auch keiner, also auch hier den wert 0 rein. inzwischen sieht das tabellengrundgerüst so aus:
<table width="150px" border="0" cellpadding="0" cellspacing="0">
</table>
Step 3:
- nächster schritt sind die tabellenfelder. das grundgerüst dafür sieht so aus:
<tr><td></td></tr>
- das ist eine spalte mit einem feld. pro menupunkt brauchen wir eine solche spalte mit jeweils einem feld. zusätzlich kommt zwischen den menupunkten jeweils noch ein abstandhalter hinzu. also alles in allem brauchen wir 5 + 4 = 9 solche spalten/felder. der tabellen-code sieht bis hierher so aus:
<table width="150" border="0" cellpadding="0" cellspacing="0">
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>
Step 4:
- nun fügen wir das erste bild ein. der html-tag dafür ist <img>. wir benötigen ihn in dieser form:
<img border="" src="" id="" (alt="") onmouseover="'" onmouseout="'">
- border benötigen wir auch hier wieder damit keine umrandung um das bild gelegt wird.
- src ist der pfad zu dem bild das der img-tag anzeigt.
- id ist der name des img-tag damit man diesen einzeln ansprechen kann, wenn man mehrere davon hat.
- onmouseover/onmouseout sind die eigenschaften damit der img-tag auf die maus reagiert.
- optional kann man noch einen alt="hier kommt text rein" einfügen damit der geneigte user der die seite besucht sieht was das sein soll. der alttext wird angezeigt wenn die maus über das bild bewegt wird.
<img border="0" src="home.gif" id="home" onmouseover="'" onmouseout="'">
- so ist der tag für das erste bild bereit. onmouseover/out werden wir später einstellen.
- das fügen wir nun in die tabelle ein:
<tr><td><img border="0" src="home.gif" id="home" onmouseover="'" onmouseout="'"></td></tr>
- die weiteren tags sind dann:
<tr><td><img border="0" src="poems.gif" id="poems" onmouseover="'" onmouseout="'"></td></tr>
<tr><td><img border="0" src="art.gif" id="art" onmouseover="'" onmouseout="'"></td></tr>
<tr><td><img border="0" src="programming.gif" id="programming" onmouseover="'" onmouseout="'"></td></tr>
<tr><td><img border="0" src="links.gif" id="links" onmouseover="'" onmouseout="'"></td></tr>
- der gesamte tabelleninhalt sieht jetzt so aus:
<tr><td><img border="0" src="home.gif" id="home" onmouseover="'" onmouseout="'"></td></tr>
<tr><td></td></tr>
<tr><td><img border="0" src="poems.gif" id="poems" onmouseover="'" onmouseout="'"></td></tr>
<tr><td></td></tr>
<tr><td><img border="0" src="art.gif" id="art" onmouseover="'" onmouseout="'"></td></tr>
<tr><td></td></tr>
<tr><td><img border="0" src="programming.gif" id="programming" onmouseover="'" onmouseout="'"></td></tr>
<tr><td></td></tr>
<tr><td><img border="0" src="links.gif" id="links" onmouseover="'" onmouseout="'"></td></tr>
- als nächstes machen wir den abstandhalter. dafür erstellen wir ein neues gif in photoshop, 1px*1px, transparent und nennen es spacer.gif.
- der entsprechende img-tag ist diesmal deutlich kürzer:
<img src="spacer.gif" height="10px">
- height entspricht dem abstand den wir zwischen den einzelnen menupunkten haben wollen. hier kann man eintragen was man will, ich stell mal 10px ein. das fügen wir jetzt in die freien tabellenfelder ein.
<tr><td><img border="0" src="home.gif" id="home" onmouseover="'" onmouseout="'"></td></tr>
<tr><td><img src="spacer.gif" height="10px"></td></tr>
<tr><td><img border="0" src="poems.gif" id="poems" onmouseover="'" onmouseout="'"></td></tr>
<tr><td><img src="spacer.gif" height="10px"></td></tr>
<tr><td><img border="0" src="art.gif" id="art" onmouseover="'" onmouseout="'"></td></tr>
<tr><td><img src="spacer.gif" height="10px"></td></tr>
<tr><td><img border="0" src="programming.gif" id="programming" onmouseover="'" onmouseout="'"></td></tr>
<tr><td><img src="spacer.gif" height="10px"></td></tr>
<tr><td><img border="0" src="links.gif" id="links" onmouseover="'" onmouseout="'"></td></tr>
- der gesamte tabellen-code sieht nun so aus, wenn wir das zusammensetzen:
<table width="150px" border="0" cellpadding="0" cellspacing="0">
<tr><td><img border="0" src="home.gif" id="home" onmouseover="'" onmouseout="'"></td></tr>
<tr><td><img src="spacer.gif" height="10px"></td></tr>
<tr><td><img border="0" src="poems.gif" id="poems" onmouseover="'" onmouseout="'"></td></tr>
<tr><td><img src="spacer.gif" height="10px"></td></tr>
<tr><td><img border="0" src="art.gif" id="art" onmouseover="'" onmouseout="'"></td></tr>
<tr><td><img src="spacer.gif" height="10px"></td></tr>
<tr><td><img border="0" src="programming.gif" id="programming" onmouseover="'" onmouseout="'"></td></tr>
<tr><td><img src="spacer.gif" height="10px"></td></tr>
<tr><td><img border="0" src="links.gif" id="links" onmouseover="'" onmouseout="'"></td></tr>
</table>
Step 5:
- noch eine kleinigkeit sollten wir einstellen. die verlinkung ;)
- der link-tag sieht folgendermassen aus:
<a href="">hier kommt der text (textlink) oder ein img-tag rein</a>
- href="http://www.bla.de" ist das ziel des links.
- eingebaut in die tabelle siehts dann so aus:
<tr><td><a href=""><img border="0" src="home.gif" id="home" onmouseover="'" onmouseout="'"></a></td></tr>
- das fügen wir nun bei allen 5 menupunkten ein. der gesamte html-code sieht dann so aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>menu</title>
</head>
<body>
<table width="150px" border="0" cellpadding="0" cellspacing="0">
<tr><td><a href="http://www.photoshop-cafe.de"><img border="0" src="home.gif" id="home" onmouseover="'" onmouseout="'"></a></td></tr>
<tr><td><img src="spacer.gif" height="10px"></td></tr>
<tr><td><a href="http://www.photoshop-cafe.de"><img border="0" src="poems.gif" id="poems" onmouseover="'" onmouseout="'"></a></td></tr>
<tr><td><img src="spacer.gif" height="10px"></td></tr>
<tr><td><a href="http://www.photoshop-cafe.de"><img border="0" src="art.gif" id="art" onmouseover="'" onmouseout="'"></a></td></tr>
<tr><td><img src="spacer.gif" height="10px"></td></tr>
<tr><td><a href="http://www.photoshop-cafe.de"><img border="0" src="programming.gif" id="programming" onmouseover="'" onmouseout="'"></a></td></tr>
<tr><td><img src="spacer.gif" height="10px"></td></tr>
<tr><td><a href="http://www.photoshop-cafe.de"><img border="0" src="links.gif" id="links" onmouseover="'" onmouseout="'"></a></td></tr>
</table>
</body>
</html>
- das kann man nun speichern.
da das jetzt doch schon wieder ein bisschen länger geworden ist, folgt der javascript der das menu animiert im nächsten teil.
Teil 3 (http://www.photoshop-cafe.de/forum/t1656-animiertes-web-menu-teil-3-script.html)
(c) copyright 2006 by photoshop-cafe.de
wer einen html-editor sein eigen nennt, darf selbstverständlich auch den bemühen. ich empfehle allaire homesite/macromedia homesite (je nach version). dreamweaver/golive tuts zur not auch. von netobjects fusion oder frontpage rate ich dringend ab!!
Step 1:
- als erstes erstellen wir das html grundgerüst, oder laden eine neue html-seite in einem html-editor. das html grundgerüst sieht dann in etwa so aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
</head>
<body>
</body>
</html>
- wer will darf den titel anpassen, hat aber keine auswirkung auf die funktionalität.
Step 2:
- nun beginnen wir damit eine tabelle hinzuzufügen. das grundgerüst für eine tabelle sieht in etwa so aus:
<table width="" border="" cellpadding="" cellspacing="">
</table>
- das sind die wichtigsten eigenschaften. nun beginnen wir die werte einzutragen.
- width ist die breite der tabelle. diese soll genau so breit sein wie die graphiken die wir erstellt haben. diese haben einheitsgrösse 150px, also tragen wir da den wert 150px ein.
- border ist der tabellenrand. brauchen wir nicht, also kommt ne 0 rein.
- cellpadding/cellspacing sind abstände innerhalb der tabelle. will auch keiner, also auch hier den wert 0 rein. inzwischen sieht das tabellengrundgerüst so aus:
<table width="150px" border="0" cellpadding="0" cellspacing="0">
</table>
Step 3:
- nächster schritt sind die tabellenfelder. das grundgerüst dafür sieht so aus:
<tr><td></td></tr>
- das ist eine spalte mit einem feld. pro menupunkt brauchen wir eine solche spalte mit jeweils einem feld. zusätzlich kommt zwischen den menupunkten jeweils noch ein abstandhalter hinzu. also alles in allem brauchen wir 5 + 4 = 9 solche spalten/felder. der tabellen-code sieht bis hierher so aus:
<table width="150" border="0" cellpadding="0" cellspacing="0">
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>
Step 4:
- nun fügen wir das erste bild ein. der html-tag dafür ist <img>. wir benötigen ihn in dieser form:
<img border="" src="" id="" (alt="") onmouseover="'" onmouseout="'">
- border benötigen wir auch hier wieder damit keine umrandung um das bild gelegt wird.
- src ist der pfad zu dem bild das der img-tag anzeigt.
- id ist der name des img-tag damit man diesen einzeln ansprechen kann, wenn man mehrere davon hat.
- onmouseover/onmouseout sind die eigenschaften damit der img-tag auf die maus reagiert.
- optional kann man noch einen alt="hier kommt text rein" einfügen damit der geneigte user der die seite besucht sieht was das sein soll. der alttext wird angezeigt wenn die maus über das bild bewegt wird.
<img border="0" src="home.gif" id="home" onmouseover="'" onmouseout="'">
- so ist der tag für das erste bild bereit. onmouseover/out werden wir später einstellen.
- das fügen wir nun in die tabelle ein:
<tr><td><img border="0" src="home.gif" id="home" onmouseover="'" onmouseout="'"></td></tr>
- die weiteren tags sind dann:
<tr><td><img border="0" src="poems.gif" id="poems" onmouseover="'" onmouseout="'"></td></tr>
<tr><td><img border="0" src="art.gif" id="art" onmouseover="'" onmouseout="'"></td></tr>
<tr><td><img border="0" src="programming.gif" id="programming" onmouseover="'" onmouseout="'"></td></tr>
<tr><td><img border="0" src="links.gif" id="links" onmouseover="'" onmouseout="'"></td></tr>
- der gesamte tabelleninhalt sieht jetzt so aus:
<tr><td><img border="0" src="home.gif" id="home" onmouseover="'" onmouseout="'"></td></tr>
<tr><td></td></tr>
<tr><td><img border="0" src="poems.gif" id="poems" onmouseover="'" onmouseout="'"></td></tr>
<tr><td></td></tr>
<tr><td><img border="0" src="art.gif" id="art" onmouseover="'" onmouseout="'"></td></tr>
<tr><td></td></tr>
<tr><td><img border="0" src="programming.gif" id="programming" onmouseover="'" onmouseout="'"></td></tr>
<tr><td></td></tr>
<tr><td><img border="0" src="links.gif" id="links" onmouseover="'" onmouseout="'"></td></tr>
- als nächstes machen wir den abstandhalter. dafür erstellen wir ein neues gif in photoshop, 1px*1px, transparent und nennen es spacer.gif.
- der entsprechende img-tag ist diesmal deutlich kürzer:
<img src="spacer.gif" height="10px">
- height entspricht dem abstand den wir zwischen den einzelnen menupunkten haben wollen. hier kann man eintragen was man will, ich stell mal 10px ein. das fügen wir jetzt in die freien tabellenfelder ein.
<tr><td><img border="0" src="home.gif" id="home" onmouseover="'" onmouseout="'"></td></tr>
<tr><td><img src="spacer.gif" height="10px"></td></tr>
<tr><td><img border="0" src="poems.gif" id="poems" onmouseover="'" onmouseout="'"></td></tr>
<tr><td><img src="spacer.gif" height="10px"></td></tr>
<tr><td><img border="0" src="art.gif" id="art" onmouseover="'" onmouseout="'"></td></tr>
<tr><td><img src="spacer.gif" height="10px"></td></tr>
<tr><td><img border="0" src="programming.gif" id="programming" onmouseover="'" onmouseout="'"></td></tr>
<tr><td><img src="spacer.gif" height="10px"></td></tr>
<tr><td><img border="0" src="links.gif" id="links" onmouseover="'" onmouseout="'"></td></tr>
- der gesamte tabellen-code sieht nun so aus, wenn wir das zusammensetzen:
<table width="150px" border="0" cellpadding="0" cellspacing="0">
<tr><td><img border="0" src="home.gif" id="home" onmouseover="'" onmouseout="'"></td></tr>
<tr><td><img src="spacer.gif" height="10px"></td></tr>
<tr><td><img border="0" src="poems.gif" id="poems" onmouseover="'" onmouseout="'"></td></tr>
<tr><td><img src="spacer.gif" height="10px"></td></tr>
<tr><td><img border="0" src="art.gif" id="art" onmouseover="'" onmouseout="'"></td></tr>
<tr><td><img src="spacer.gif" height="10px"></td></tr>
<tr><td><img border="0" src="programming.gif" id="programming" onmouseover="'" onmouseout="'"></td></tr>
<tr><td><img src="spacer.gif" height="10px"></td></tr>
<tr><td><img border="0" src="links.gif" id="links" onmouseover="'" onmouseout="'"></td></tr>
</table>
Step 5:
- noch eine kleinigkeit sollten wir einstellen. die verlinkung ;)
- der link-tag sieht folgendermassen aus:
<a href="">hier kommt der text (textlink) oder ein img-tag rein</a>
- href="http://www.bla.de" ist das ziel des links.
- eingebaut in die tabelle siehts dann so aus:
<tr><td><a href=""><img border="0" src="home.gif" id="home" onmouseover="'" onmouseout="'"></a></td></tr>
- das fügen wir nun bei allen 5 menupunkten ein. der gesamte html-code sieht dann so aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>menu</title>
</head>
<body>
<table width="150px" border="0" cellpadding="0" cellspacing="0">
<tr><td><a href="http://www.photoshop-cafe.de"><img border="0" src="home.gif" id="home" onmouseover="'" onmouseout="'"></a></td></tr>
<tr><td><img src="spacer.gif" height="10px"></td></tr>
<tr><td><a href="http://www.photoshop-cafe.de"><img border="0" src="poems.gif" id="poems" onmouseover="'" onmouseout="'"></a></td></tr>
<tr><td><img src="spacer.gif" height="10px"></td></tr>
<tr><td><a href="http://www.photoshop-cafe.de"><img border="0" src="art.gif" id="art" onmouseover="'" onmouseout="'"></a></td></tr>
<tr><td><img src="spacer.gif" height="10px"></td></tr>
<tr><td><a href="http://www.photoshop-cafe.de"><img border="0" src="programming.gif" id="programming" onmouseover="'" onmouseout="'"></a></td></tr>
<tr><td><img src="spacer.gif" height="10px"></td></tr>
<tr><td><a href="http://www.photoshop-cafe.de"><img border="0" src="links.gif" id="links" onmouseover="'" onmouseout="'"></a></td></tr>
</table>
</body>
</html>
- das kann man nun speichern.
da das jetzt doch schon wieder ein bisschen länger geworden ist, folgt der javascript der das menu animiert im nächsten teil.
Teil 3 (http://www.photoshop-cafe.de/forum/t1656-animiertes-web-menu-teil-3-script.html)
(c) copyright 2006 by photoshop-cafe.de