|
Nehmen Sie einige Zeit
und entwickeln Sie zuerst die Hierachie (Navigation) Ihrer Homepage, das
Aussehen, die Anbindung, als auch deren Inhalt.
Zeichnen Sie zuerst auf einen Blatt Papier das o.g. auf, und wenn Sie sowohl
dieses beendet haben, als auch die Grafiken für die Knöpfe (Buttons)
erstellt wurden, können Sie erst mit JSMOC arbeiten.
Was Sie vor dem Start von JSMOC bereits entschieden haben müssen,
ist:
 |
Welche Optionen / Selektionen Sie zur Verfügung stellen wollen - dies
ist das Navigationssystem auf und innerhalb Ihrer Homepage. |
|
Welche Art von "Maus über Effekten" Sie benutzen möchten.
Brauchen Sie ein horizontales oder vertikales Menü,
wünschen Sie die Anzeige eines 2. Bildes, welches angezeigt werden soll,
sobald die Maus sich im Bereich des entsprechenden Knopfes befindet,
hätten Sie gern auch, daß eine Meldung angezeigt wird, wenn die Maus
sich über einen Knopf befindet (z.B. wohin der Link führt, wenn der
Knopf angeklickt wird - dies ist für den Besucher hilfreich, wenn Sie den
Dateiname der Seite kennen). |
|
Form, Beschriftung und Aussehen Ihrer Knöpfe, und dieses für alle Stufen
(normal, wenn die Maus im Bereich des Knopfes ist, bei einem Klick auf den Knopf [optional],
Anzeige eines 2. Bildes [optional]) des MouseOverMenüs
in den entsprechenden Grafikdateien vorhanden sind. |
Lassen Sie uns sagen, daß Sie eine Hompage erstellen wollen,
welche nicht Bestandteil einem Frame-Sets ist und
dessen Navigationsmenü natürlich mit einigen coolen Grafikeffekten ausgestattet,
sich auf der linken Seite der Page befindet.
(Anmerkung des Übersetzers: Alle, in den Beispielen, benötigten Grafiken wurden
von Dimitris Siskopoulos, dem Autor des Programms, bereits erzeugt.)
| Optionen
- Selektionen (Navigation-Menü) |
|
Für unser Beispiel benötigen wir folgende Knöpfe:
1. Home (1. Seite in der Hierachie)
2. Design (nächste Seite in der Hierachie)
3. Coding ( u.s.w. )
4. Contact ( eMail-Adresse )
|
| Was wir wirklich brauchen |
|
Wir wünschen uns ein horizontales Menü mit all den Knöpfen
und wenn der Besucher mit der Maus über einen Knopf, dann soll
ein anderes BILD/KNOPF eingeblendet werden und eine Meldung in der
Statuszeile des Browsers erscheinen.
|
|
Falls Sie nicht wissen wie Sie Grafik-Programme einsetzen müssen, bzw.
keines dieser besitzen oder installiert haben, so können Sie immer noch
auf Paint/Imaging/PaintBrush in Abhängigkeit Ihrer Windowsversion
unter [Start] [Programme] [Zubehör] zurück greifen oder Sie suchen im
WEB nach fertigen Bilder- / Icons- / Images- und ClipArt-Dateien.
Hier folgen nun einige sehr nützliche Links für den Anfang:
altavista,
clipart.com,
animation Central,
Andy Graphics,
Animation Factory,
Prodraw button gallery
und viele weitere...
Ich fand meine besten vorgefertigten Knöpfe unter:
Pankpages,
Freeweb Templates,
Benutzen können Sie auch: Buttonz and tilez.
Ein Freeware-Programm zur Erzeugung von Knöpfen und nahtlosen Texturen.
Andere Programme, gleich diesem sind:
Border Mania,
Harmwave,
Just Buttons
Es gibt ebenso einige Online-Tools zur Erzeugung von Knöpfen im Internet:
Button maker,
Flaming Text (free buttons!),
(Um gute Grafiken und Navigationsmenüs zu erzeugen, können Sie immer auch professionelle
Softwareprogramme, wie:
Photoshop
oder Paint Shop Pro einsetzen.
Hier können Sie sich, durch lesen einiger Tutoriale, das nötige Wissen, z.B., wie Sie
Roll-Over-Effekte bei Menüzeilen
rollover menu bars,
ein weiteres
bei adobe, und als letztes jasc tutorial
für Paintshop) ansehen.
Lassen Sie uns nun beginnen:
Schritt 1
|
|
|
|
|
|
|
|
|
Schritt
3
Zuerst plazierte ich alle benötigeten Dateien in ein
gemeinsames Verzeichnis: (Beispiel 1).
Jetzt sollte JSMOC Version 2.0 gestartet werden.
Danach führen Sie einen Doppel-Klick auf das
"Normal Button" - Feld
(oder klicken Sie den Browse-Knopf an) und wählen Sie
dann die Datei:
"btn-home-normal.gif" innherhalb
Ihres Datei-Verzeichnisses aus.
Ein weiterere Doppel-Klick in das "Mouse Over" - Feld
mit anschließender Auswahl der "btn-home-over.gif" - Datei,
sowie noch ein Doppel-Klick auf das "on click" - Feld
mit derSelektion der "btn-home-clicked.gif"-Datei,
als auch im nächsten Schritt auf das "Highlight Image" - Feld
mit Auswahl der Datei "btn-home-highl.gif" oder durch Eingabe des entsprechenden Dateinamens
führt Sie im nächsten Schritt zum "Link to" Feld,
in welches ich per Tastatzreingabe "http://www.code.gr" (natürliche ohne Gänsefüßchen)
eintrug (falls Sie einen Link auf eine gespeicherte Datei wünschen,
so führen Sie ein Doppel-Klick in das "Link to" - Feld
und wählen Sie Ihre Datei aus).
Nun nur noch das entsprechende Hintergrundbild "hlp-bg.gif" im Feld "BG Image
(background/Hintergrund)" auswählen und "Home - :: code ::" to "
Status Bar text" - Feld eingeben und schon ist die Eingabe für den 1. Knopf beendet.
Klicken Sie den Knopf  an,
um einen weiteren, neuen Knopf dem Menü hinzuzufügen.
(with 
können Sie später jeden erstellten Button, welchen Sie vorher
im List-Feld angeklickt haben wieder löschen).
Kilicken Sie nun
an, (oder führen Sie einen Doppel-Klick auf "New button" innerhalb
der Liste aus) um den Bezeichner des 1. erstellten Knopfes nach "Home"
zu ändern.
Nun erzeugen wir den nächsten Knopf - in dem Sie einen Klick auf "Design" ausführen.
Folgen Sie nun den oben aufgezeichneten Schritten, um diesen Knopf zu erstellen. Verwenden Sie dabei aber die
nachfolgend genannten Dateien und Einträge.
Auf geht's - Doppel-Klick auf "Normal Button" - Feld,
Auswahl von "btn-design-normal.gif";
Doppel-Klick auf Mouse Over - Feld,
Auswahl von "btn-design-over.gif";
Doppel-Klick auf click - Feld,
Auswahl von "btn-design-clicked.gif";
Doppel-Klick auf highlited - Feld,
Auswahl von "btn-design-highl.gif";
Tastatur-Eingabe im "Link to" - Feld,
von "http://www.code.gr/services";
Tastatur-Eingabe im "Status bar" - Feld,
von "Web design";
Und wieder einen Klick auf add:
Bennen Sie nun diesen "New Button" in "Coding" um und führen
die Schritte:
für Normal Button=btn-coding-normal.gif,
für Mouse Over=btn-coding-over.gif,
für click=btn-coding-click.gif,
für highlited=btn-coding-highl.gif,
für Link to=http://www.code.gr/coding,
für Status bar=Web Authoring - Programming.
Fügen Sie nun den letzten Knopf hinzu und bezeichnen diesen gleich unter
name um in:"Contact" und für:
Normal Button=btn-contact-normal.gif,
Mouse Over=btn-contact-over.gif,
click=btn-design-clicked.gif,
highlited=btn-contact-highl.gif,
Link to=mailto:dimitris@siskopoulos.gr
tragen Sie die vorstehenden Parameter ein
(wenn Sie einen Link auf Ihre eigene eMail-Adresse
kreieren wollen, dann müssen Sie "mailto:IhrEmailName@IhrEmailProvider" per Tastatur eingeben,
so bin ich Willi Walter z.B. unter meinem Domane-Postfach: "MailTo:ww@go-ww.de"
zu erreichen, und nichts weiter.),
Status bar=Email.
Sie haben jetzt alle Knöpfe des Beispiels dem Programm bekannt gegeben, sodaß
Sie nun Ihre Arbeit sichern sollten. Das Sichern Ihres "Site's Schematas",
erfolgt über Klick auf 
und anschließender Dateinamenseingabe (per Tastatur) von "code_gr"
(ohne Gänsefüßchen). Diese Eingabe schließen Sie wie immer mit Betätigung der
Eingabe/Enter/Return-Taste ab.
Falls Sie nun Änderungen in der Zukunft vornehmen wollen, brauchen Sie nur den
 - Knopf zu betätigen
und die Datei "code_gr.jsm", welche das Schemata enthält, zu öffnen und Sie könne
Ihre Veränderungen vornehmen (die Schemata-Dateien erhalten automatisch die Datei-Extension: "jsm").
Jetzt ist es an der Zeit, einen Echt-Zeit-Test innerhalb Ihres Standard-Browsers durchzuführen.
Dazu klicken Sie bitte auf:  .
Was denken Sie nun? - Sind Sie mit dem Ergebnis zufrieden ?
Wenn ja, dann können Sie jetzt die Ergebis-Datei im HTML-Format durch Klick auf:
 erzeugen lassen.
Und vergessen Sie bitte nicht, Sie können jederzeit, innerhalb des Programms, durch Klick auf
die Hilfsfunktion aufrufen!
|
In dem Installationsverzeichnis von JSMOC 2.0 können
Sie die Unterverzeichnisse "example1"
und "example2" finden.
Hieraus können Sie die jeweilige Schemata-Datei in JSMOC öffnen und
deren Inhalt zum besseren Verständnis betrachten. Klicken Sie einen der
Hyperlinks an, wenn Sie Online sind und Sie können die Verzweigung des
Links verfolgen.
Tipps & Tricks
| Tipp 1: |
Falls Sie Sound-Effekte zusätzlich zu den Mouse-Overeffekten wünschen, so folgen Sie bitte dem Link hier!
|
| |
|
| Tipp 2: |
Vergesse sollten Sie bitte auch nicht, daß Sie zu jeder Zeit und innerhalb jeder Stufe animierte GIF-Dateien als Knöpfe einsetzen können!
|
| |
|
| Tipp 3 : |
Falls Sie es wünschen, eine eMail zu erhalten, wenn der Gast den entsprechenden Knopf anklickt, dann müssen Sie mailto:IhrName@IhrProvider.com innerhalb des Link to -Feldes eingegeben haben.
|
| |
|
| Tipp 4: |
Falls Sie Image-Dateien in einem Verzeichnis (welches verschieden von dem Speicherort der HTMK-Dateien ist) dann müssen Sie in den "images"- Feldern imagedir/yourimage.gif eingeben und danach einen Klick auf den "write code" - Knopf ausführen.
|
| |
|
| Tipp 5: |
Für den Link-Typ - Anker - müssen Sie im link to - Feld #anchor eingeben.
|
| |
|
| Tipp 6: |
Es wird empfohlen zuerst das Navigations-Menü per JSMOC zu erstellen und erst im Anschluß daran den Inhalt der Datei: "contents.htm" in Ihre Webseite - natürlich mit entsprechender Anpassung - zu implementieren. Sie können aber auch per JSMOC die entgültige "index.htm"-Seite erzeugen lassen und dieses umbenennen.
Benutzen Sie den WEB-Editor DreamWeaver (er hat sowohl eine "rollover images" - Funktion, wie auch einen einfachen Text-Editor eingebaut) zur Einfügung des Inhalts der "contents.htm"-Datei.
|
| |
|
| Anmerkung: |
Falls Sie Frontpage oder einen anderen HTML-Editor benutzen, welcher den Quell-Code verändert, dann kann es sein, daß das JavaScript die "MouseOver"-Effekte nicht ordentlich verarbeitet.
|
|
|
by Willi Walter
