Animiertes Web Menu Teil 2 (html) - Photoshop-Cafe.de :: Dein Photoshop-Forum

**phoenix** · #1 02.03.06, 17:13

nachdem wir in Teil 1 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:

HTML-Code:

<!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:

HTML-Code:

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

HTML-Code:

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

HTML-Code:

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

HTML-Code:

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

HTML-Code:

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

HTML-Code:

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

HTML-Code:

<tr><td><img border="0" src="home.gif" id="home" onmouseover="'" onmouseout="'"></td></tr>

- die weiteren tags sind dann:

HTML-Code:

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

HTML-Code:

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

HTML-Code:

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

HTML-Code:

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

HTML-Code:

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

HTML-Code:

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

HTML-Code:

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

HTML-Code:

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

(c) copyright 2006 by photoshop-cafe.de

Fobby · #2 02.03.06, 22:42

Also nix gegen das Tut aber den HTML-Code hättest etwas schöner formatieren können ... Tabulatoren und so, einrücken

Ich weiß ja schon wie's fertig aussieht, fein machst du das

Darkwing-dave · #3 02.03.06, 22:46

2 Super Tuts!!! Steckt sicher eine menge Arbeit dahinter!!! Vielen Dank!!!

**phoenix** · #4 03.03.06, 05:04

@fobby: besser?

@darkwing: es hällt sich in grenzen ... den html teil hat man in wenigen minuten soweit zusammen, dann halt noch text dazu schreiben ^^

Fobby · #5 03.03.06, 19:35

Ja, wir wollen mal nicht penibel sein und es folgendermaßen verlagen

Code:

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

/edit:
huch, hier werden die tabs ja ganz schön langgezogen ... so was das natürlich nich gedacht ... aber nochmal ändern tu ichs nu nich

**phoenix** · #6 03.03.06, 19:58

hey das ist html und kein c++ ... man kanns auch übertreiben

dorftrottel · #7 18.12.09, 23:10

Erst jetzt gesehen!
Top!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Menu auf deutsch?	Docmartin1808	Installation, Konfiguration, Hardware und Software	1	06.07.10 01:14
Animiertes Web Menu Teil 1 (graphik)	phoenix	Werkzeuge, Bedienfelder und sonstige Grundlagen	12	22.01.10 10:19
Schriftgrösse in Menu-Leisten	Willi II	Installation, Konfiguration, Hardware und Software	2	30.10.09 08:32
Animiertes Web Menu Teil 3 (script)	phoenix	Werkzeuge, Bedienfelder und sonstige Grundlagen	2	21.06.06 13:45

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)