Photoshop-Cafe.de :: Dein Photoshop-Forum

Zurück   Photoshop-Cafe.de :: Dein Photoshop-Forum > Kreativ-Tutorials > Werkzeuge, Bedienfelder und sonstige Grundlagen
Seite neu laden Animiertes Web Menu Teil 2 (html)
Registrieren Hilfe Kalender Heutige Beiträge Suchen

Hinweise
Aktuelles aus dem PSC
„Kreativ Hallo Du!
Das Userbattle zwischen Caradhras und wackelelvis hat begonnen. Kommt ⇒ hierher, um die beiden Battler anzufeuern und zu plaudern.
Hier findest du unser Thema für den P-S-C 06/2024: ⇒ Tattookunst - erstelle ein Tattoo auf einer Hand. Bis 31.12.2024 kannst du dir was dazu ausdenken.
Das Foto-Thema für November 2024 ist ⇒ Holz.
Zur C-C-C für November 2024 gehts hier lang: ⇒ Hunde .
 Unterstützung für das PSC
ACHTUNG: Regeln für die Verwendung von KI-Bildern im PSC.
Bitte sorgfältig durchlesen und beachten!

Antwort
 
Themen-Optionen Ansicht
  #1  
Alt 02.03.06, 18:13
Benutzerbild von phoenix
phoenix phoenix ist offline
mother-brain
  
Registriert seit: 06/2005
Ort: Basel
Beiträge: 9.684
OS: Windows 8 x64
Kreativ-Software: CS6 x64
phoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es geht
Grundlagen Animiertes Web Menu Teil 2 (html)
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
__________________
http://photoshop-cafe.de/sig/themen_bewerten.gifhttp://photoshop-cafe.de/sig/bilder_und_schriften.gifhttp://photoshop-cafe.de/sig/tutorials.gifhttp://photoshop-cafe.de/sig/signaturleitfaden.gifhttp://photoshop-cafe.de/sig/forenleitfaden.gifhttp://www.photoshop-cafe.de/sig/stock-galerie.gif

design oder nicht sein

"So, we’ve got a full pot of coffee, half a pack of cigarettes, it’s dark out, and we’re coding. Hit it." - Synthesoft
Geändert von phoenix (13.03.06 um 21:32 Uhr).
Mit Zitat antworten
  #2  
Alt 02.03.06, 23:42
Benutzerbild von Fobby
Fobby Fobby ist offline
hat immer was zu sagen
  
Registriert seit: 07/2005
Ort: Leipzig
Beiträge: 582
Fobby geht den richtigen Weg
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
__________________
http://sfx-images.mozilla.org/affiliates/Buttons/110x32/get.gif
Mit Zitat antworten
  #3  
Alt 02.03.06, 23:46
Benutzerbild von Darkwing-dave
Darkwing-dave Darkwing-dave ist offline
PSC-süchtig
  
Registriert seit: 10/2005
Ort: Schweiz, nähe Zürich
Beiträge: 826
OS: Windows
Darkwing-dave geht den richtigen Weg
2 Super Tuts!!! Steckt sicher eine menge Arbeit dahinter!!! Vielen Dank!!!
__________________
Beim Spiel kann man einen Menschen in einer Stunde besser kennen lernen, als im Gespräch während eines Jahres.
Mit Zitat antworten
  #4  
Alt 03.03.06, 06:04
Benutzerbild von phoenix
phoenix phoenix ist offline
mother-brain
  
Registriert seit: 06/2005
Ort: Basel
Beiträge: 9.684
OS: Windows 8 x64
Kreativ-Software: CS6 x64
phoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es geht
@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 ^^
__________________
http://photoshop-cafe.de/sig/themen_bewerten.gifhttp://photoshop-cafe.de/sig/bilder_und_schriften.gifhttp://photoshop-cafe.de/sig/tutorials.gifhttp://photoshop-cafe.de/sig/signaturleitfaden.gifhttp://photoshop-cafe.de/sig/forenleitfaden.gifhttp://www.photoshop-cafe.de/sig/stock-galerie.gif

design oder nicht sein

"So, we’ve got a full pot of coffee, half a pack of cigarettes, it’s dark out, and we’re coding. Hit it." - Synthesoft
Geändert von phoenix (03.03.06 um 06:13 Uhr).
Mit Zitat antworten
  #5  
Alt 03.03.06, 20:35
Benutzerbild von Fobby
Fobby Fobby ist offline
hat immer was zu sagen
  
Registriert seit: 07/2005
Ort: Leipzig
Beiträge: 582
Fobby geht den richtigen Weg
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
__________________
http://sfx-images.mozilla.org/affiliates/Buttons/110x32/get.gif
Mit Zitat antworten
  #6  
Alt 03.03.06, 20:58
Benutzerbild von phoenix
phoenix phoenix ist offline
mother-brain
  
Registriert seit: 06/2005
Ort: Basel
Beiträge: 9.684
OS: Windows 8 x64
Kreativ-Software: CS6 x64
phoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es geht
hey das ist html und kein c++ ... man kanns auch übertreiben
__________________
http://photoshop-cafe.de/sig/themen_bewerten.gifhttp://photoshop-cafe.de/sig/bilder_und_schriften.gifhttp://photoshop-cafe.de/sig/tutorials.gifhttp://photoshop-cafe.de/sig/signaturleitfaden.gifhttp://photoshop-cafe.de/sig/forenleitfaden.gifhttp://www.photoshop-cafe.de/sig/stock-galerie.gif

design oder nicht sein

"So, we’ve got a full pot of coffee, half a pack of cigarettes, it’s dark out, and we’re coding. Hit it." - Synthesoft
Mit Zitat antworten
  #7  
Alt 19.12.09, 00:10
Benutzerbild von dorftrottel
dorftrottel dorftrottel ist offline
PSC-süchtig
  
Registriert seit: 05/2009
Ort: Schweiz
Beiträge: 5.050
OS: Mac OS X (Mountain) Lion
Kreativ-Software: Design & Web Premium CS6
dorftrottel ist ein Photoshop-Spezialist und hilft wo es gehtdorftrottel ist ein Photoshop-Spezialist und hilft wo es gehtdorftrottel ist ein Photoshop-Spezialist und hilft wo es gehtdorftrottel ist ein Photoshop-Spezialist und hilft wo es gehtdorftrottel ist ein Photoshop-Spezialist und hilft wo es gehtdorftrottel ist ein Photoshop-Spezialist und hilft wo es gehtdorftrottel ist ein Photoshop-Spezialist und hilft wo es gehtdorftrottel ist ein Photoshop-Spezialist und hilft wo es gehtdorftrottel ist ein Photoshop-Spezialist und hilft wo es gehtdorftrottel ist ein Photoshop-Spezialist und hilft wo es gehtdorftrottel ist ein Photoshop-Spezialist und hilft wo es geht
Erst jetzt gesehen!
Top!
__________________
http://photoshop-cafe.de/sig/themen_bewerten.gifhttp://photoshop-cafe.de/sig/bilder_und_schriften.gifhttp://photoshop-cafe.de/sig/tutorials.gifhttp://photoshop-cafe.de/sig/signaturleitfaden.gifhttp://photoshop-cafe.de/sig/forenleitfaden.gifhttp://www.photoshop-cafe.de/sig/stock-galerie.gif

Liebe Grüsse - dorftrottel
flickr.
Mit Zitat antworten
Antwort

Lesezeichen

« Vorheriges Thema | Nächstes Thema »

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

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.
BB-Code ist An.
Smileys sind An.
[IMG] Code ist An.
HTML-Code ist Aus.
Gehe zu

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


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:04 Uhr.

Impressum

Kontakt      Photoshop-Cafe      Archiv     Impressum     Nach oben

Powered by vBulletin® Version 3.8.7 (Deutsch)
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
©2005-2020 photoshop-cafe.de

Seite wurde generiert in 0,07581 Sekunden mit 10 Queries