Buttons

Buttons
Eine Aleitung von Melanie Trentini
Erstellt am 8.12.03
Für Fragen: [email protected]
Inhalt:
1. Kapitel: Erstellen von Buttons
1.1 Bild öffnen
1.2 Text einfügen
1.3 Text bearbeiten
1.4 Extras
1.5 Buttons speichern
2. Buttons einfügen
2.1 Voraussetzungen
2.2 Einfügen per Editor
2.3 HTML-Code einfügen
2.4 Hover-Buttons
2.5 Einfügen mit FrontPage
2.6 per HTML einfügen
3. Hover-Schaltflächen
3.1 Code
3.2 Erläuterungen
3.3 Einstellungen
©Copyright by Melanie Trentini; 2003
www.justideas.ch
1. Kapitel: Erstellen von Buttons
Dieses Tutorial soll erklären, wie Standard-Buttons beschriftet werden können.
Als Voraussetzung dafür sollten Sie einen Button ohne Text auf Ihrer HD gespeichert
haben.
Zudem benötigen Sie ein Bildbearbeitungsprogramm. Hier eignet sich die
verschiedenste Software, da die meisten Programme das Einfügen von Text
ermöglichen. In der Ausführung gibt es jedoch sehr grosse Unterschiede. So gibt es
beispielsweise Programme, die Zusatzfunktionen wie das Ausrichten an einer Kurve,
3D-Text oder Schatten anbieten.
Das wohl bekannteste Produkt ist Adobe PhotoShop. Für das Erstellen aller Just
Ideas-Grafiken wurde das Microsoft Produkt Photo Draw benutzt. Natürlich gibt es
viele weitere solche Programme. Versuchen Sie es am Besten zuerst mit einem,
welches bereits auf Ihrem Computer installiert ist. Falls es damit nicht klappt, können
Sie sich nach gratis Downloads umsehen oder eines der oben genannten Produkte
kaufen.
1.1 Bild öffnen
Als erstes starten Sie Ihr Bildbearbeitunsprogramm und wählen (meist unter „Datei“)
den Befehl „öffnen“. Suchen Sie nach Ihrem Bild und öffnen Sie es.
1.2 Text einfügen
Wählen Sie nun den Befehl für das Einfügen von Text. Je nachdem, mit welchem
Produkt Sie arbeiten, können Sie gleich den gewünschten Text eintippen, oder es
erscheint ein Standard-Text.
Standard-Text
geänderter Text
Ersetzen Sie den Standard-Text durch Ihren eigenen. Achten Sie unbedingt darauf,
dass Ihr Text nicht zu lange ist. Schreiben Sie z.B. „Familie“ anstatt „über meine
Familie“.
©Copyright by Melanie Trentini; 2003
www.justideas.ch
1.3 Text bearbeiten
Nun wählen Sie Schriftart, Schriftgrösse und Schriftfarbe aus. Achten Sie darauf, dass
Ihr Text gut lesbar ist, und die Schrift zum Button bzw. zu Ihrer Seite passt.
Vergewissern Sie sich noch einmal, dass der Text nicht zu gross für Ihren Button ist.
1.4 Extras
Wie bereits erwähnt bieten viele Programme Zusatzfunktionen für die Bearbeitung
von Text an. Es gilt jedoch auch hier: weniger ist mehr. Seien Sie sich bewusst, dass
ein Button vor allem funktional sein sollte. Ist Ihre Schrift so extravagant, dass der
Bescher sie kaum mehr lesen kann, sollten Sie besser auf das eine oder andere Extra
verzichten.
Die folgenden Bilder zeigen, wie Sie Ihren Text aufpeppen können:
Schatten
Ausbuchtung
Einprägung
Kurve
1.5 Button speichern
Nun ist Ihr Button fertig und kann gespeichert werden.
In vielen Programmen muss der Button exportiert werden, um als Webfähige Grafik
(also .gif oder .jpg) abgespeichert werden zu können. Wählen Sie dazu (meist unter
„Datei“) den Befehl „speichern unter...“ oder „exportieren“.
Achten Sie darauf, dass Sie den Rohbutton, also die Datei, welche Sie bearbeitet
haben, nicht überschreiben. Zudem ist es wichtig, dass Sie nur Kleinbuchstaben und
keine Sonderzeichen (auch keine Leerschläge) verwenden. Speichern Sie also z.B.
„mein_gaestebuch.gif“ anstatt „Mein Gästebuch.gif“. Ansonsten kann der Button
später nicht angezeigt werden.
©Copyright by Melanie Trentini; 2003
www.justideas.ch
2. Kapitel: Buttons einfügen
Das Einfügen eines einfachen Buttons erfolgt genau so, wie ein Bild einzufügen und
dieses zu verlinken. Wie Sie dazu vorgehen, wird in einem ersten Schritt erklärt.
Wenn Sie jedoch Buttons einfügen möchten, deren Bild sich bei Berührung mit der
Maus (Mouseover) verändert, wird es etwas komplizierter. Dies wird im zweiten Teil
dieses Kapitels erklärt.
2.1 Voraussetzungen
Kapitel 1 behandelt das Erstellen von Buttons. Sie sollten Ihre Buttons nun bereits
erstellt und in einem geeigneten Verzeichnis auf Ihrer HD gespeichert haben.
2.2 Einfügen per Editor
Laden Sie die entsprechende Datei in Ihren Editor (z.B. Frontpage, Firstpage, GoLive
usw.), und setzen Sie den Cursor durch Klicken auf die Stelle, an der Ihr Bild
platziert werden soll. Nun wählen Sie im Menu unter Einfügenden Befehl Bild(je nach
Editor auch image). Falls Ihnen weitere Optionen angeboten werden, wählen Sie aus
Datei.. und suchen nach Ihrem Bild. In einigen Editoren gibt es unter der Menüzeile
auch einen Short-Cut-Button, mit dem Sie sofort zum Bild-Einfügen-Fenster gelangen
(blauer Pfeil).
Nun muss der Button nur noch verlinkt werden. Dafür müssen Sie das Bild anklicken
und unter Einfügen den Befehl Hyperlink einfügen wählen. Danach wird die Zielseite
angegeben, auf welche Ihr Button zeigen soll. Auch hier gibt es meist einen Button,
der das Setzen von Hyperlinks beschleunigt (roter Pfeil).
2.3 HML-Code einfügen
Wenn Sie nicht mit einem Editor arbeiten, welcher dem Benutzer eine grafische
Oberfläche für die Bearbeitung anbietet, müssen Sie den HTML-Code für den Button
in Ihre Datei einbinden. Im folgenden sehen Sie ein Beispiel-Code, den Sie in Ihre
Datei kopieren und danach entsprechend verändern müssen.
<a href="ihrfile.htm"><img src="ihrbild.jpg"></a>
Der erste Teil enthält die Hyperlinkangaben. Ersetzen Sie "ihrfile.htm" einfach durch
die gewünschte Zieldatei.
Der mittlere Teil enthält das Bild. Achten Sie darauf, dass Sie den ganzen Pfad des
Bildes angeben. Ist Ihr Bild beispielsweise in einem Image-Ordner gepspeichert,
schreiben Sie "images/ihrbild.jpg".
Der letzte Teil (End-Tag) beendet den Hyperlink.
©Copyright by Melanie Trentini; 2003
www.justideas.ch
2.4 Hover-Buttons
Hover-Buttons sind grundsätzlich Buttons, welche sich verändern, wenn man mit der
Maus darüber fährt. Hier wird nur der Fall beschrieben, bei welchem zuerst ein Bild
angezeigt wird, und bei Mouseover ein anderes. Wie Sie Hover-Schaltflächen mit Text
erstellen, erfahren Sie in Kapitel 3 .
Bevor Sie weiterfahren, sollten Sie die beiden benötigten Bilder ( .jpg oder .gif ) im
richtigen Verzeichnis auf Ihrer HardDisk speichern.
Zudem benötigen Sie eine JavaScript-Datei, welche die Funktionen für HoverSchaltflächen definiert. Speichern Sie dazu fphover.class und fphoverx.class im
selben Ordner, in welchem sich auch Ihre HTML-Datei befindet.
2.5 Einfügen mit Frontpage
Da Hover-Buttons nicht aus reinem HTML-Text bestehen, bietet nicht jeder Editor die
Möglichkeit an, solche Buttons einzufügen. Das Microsoft-Produkt FrontPage
ermöglicht einem ein rasches, einfaches Einfügen, ohne dass der Benutzer den
dahinter stehenden Code zu verstehen braucht. Aus diesem Grund sind die folgenden
Schritte speziell für die Benutzung von FrontPage erklärt. Wer mit einem anderen
Programm arbeitet, kann einfach den nötigen HTML-Code in seine Datei kopieren
(siehe Punkt 2.6 ).
Um einen Hover-Button unter FrontPage einzufügen, wählt man unter Einfügen den
Unterpunkt Komponente und danach Hoverschaltfläche. Nun öffnet sich ein Fenster,
welches die grundlegendsten Einstellungen für eine Hooverschaltfläche ermöglicht.
Achtung: die Eigenschaft Schaltflächentext schaltet sich bei jedem Öffnen dieses
Fensters automatisch wieder ein. Will man ein Bild als Schaltfläche benutzen, muss
man den Auto-Text Schaltflächentext jeweils löschen.
Wählen Sie als erstes die Zielseite für Ihre Schaltfläche, indem Sie auf Durchsuchen..
klicken. Danach drücken Sie am unteren linken Rand den Knopf Benutzerdefiniert um
ein Bild anzugeben. Nun öffnet sich ein neues Fenster, in welchem Sie ins dritte und
vierte Textfeld den Pfad für die zwei Bilder deines Buttons angeben müssen. Drücken
Sie, falls Sie diesen nicht wissen, auf Durchsuchen... Danach klicken Sie zwei Mal
OK. Nun sehen Sie wahrscheinlich nur einen Teilausschnitt Ihres Buttons. Dies
geschieht, weil die Grundeinstellungen für die Schaltflächen-Grösse sehr klein sind.
Öffnen Sie deshalb per Doppelklick auf Ihre eingefügte Schaltfläche nocheinmal das
Hoover-Fenster. ( nicht vergessen, gleich den Auto-Text zu löschen). Nun können Sie
unten die Breite und Höhe für den Hoover-Button angleichen. Dies fordert ein wenig
Übung, probieren Sie einfach so lange aus, bis die Zahlen stimmen. Wie Ihr Button
funktioniert, sehen Sie erst, wenn Sie die Seite in einem Browser ( Internet Explorer,
Netscape, etc.) betrachten.
©Copyright by Melanie Trentini; 2003
www.justideas.ch
Wählen Sie als erstes die Zielseite für Ihre Schaltfläche, indem Sie auf Durchsuchen..
klicken. Danach drücken Sie am unteren linken Rand den Knopf Benutzerdefiniert um
ein Bild anzugeben. Nun öffnet sich ein neues Fenster, in welchem Sie ins dritte und
vierte Textfeld den Pfad für die zwei Bilder deines Buttons angeben müssen. Drücken
Sie, falls Sie diesen nicht wissen, auf Durchsuchen... Danach klicken Sie zwei Mal
OK. Nun sehen Sie wahrscheinlich nur einen Teilausschnitt Ihres Buttons. Dies
geschieht, weil die Grundeinstellungen für die Schaltflächen-Grösse sehr klein sind.
Öffnen Sie deshalb per Doppelklick auf Ihre eingefügte Schaltfläche nocheinmal das
Hover-Fenster. ( nicht vergessen, gleich den Auto-Text zu löschen). Nun können Sie
unten die Breite und Höhe für den Hoover-Button angleichen. Dies fordert ein wenig
Übung, probieren Sie einfach so lange aus, bis die Zahlen stimmen. Wie Ihr Button
funktioniert, sehen Sie erst, wenn Sie die Seite in einem Browser ( Internet Explorer,
Netscape, etc.) betrachten.
2.6 HTML-Code einfügen
Eine Hoover-Schaltfläche kann man auch einfügen, indem man den nötigen HTMLCode am richtigen Ort in die Datei kopiert. In der Folge wird dies anhand eines
Beispiel-Codes erklärt.
<applet code="fphover.class" codebase="./" width="150" height="40">
<param name="image" valuetype="ref" value="images/ihrbild.jpg">
<param name="hoverimage" valuetype="ref" value="images/ihrbild2.jpg">
</applet>
Ändern Sie die Werte für die Breite (width) und die Höhe (heigth) so ab, dass Sie der
Bildgrösse Ihrer Buttons entsprechen.
Ersetzen Sie danach "ihrbild.jpg" und "ihrbild2.jpg" durch den Pfad Ihrer Buttons.
Wenn Sie diese im selben Ordner gespeichert haben, in welchem sich auch die HTMLDatei befindet, können Sie "images/" einfach weglassen. Ansonsten müssen Sie
"images" durch den Namen des Ordners ersetzen, in welchem sich die Bilder befinden.
©Copyright by Melanie Trentini; 2003
www.justideas.ch
3. Kapitel: Hover-Schaltflächen
Jede Navigation besteht aus Links, die auf verschiedene Arten dargestellt werden
können. Hoverschaltflächen sehen auf den ersten Blick aus wie normaler Text oder
blosse Zellen mit farbigem Hintergrund. Berührt der Besucher die Schaltfläche aber
mit dem Mauszeiger (sog. Mouseover), so verändert sich diese.
Hier erfahren Sie, wie Sie Hover-Schaltflächen mit Text erstellen und die Effekte
verändern. Wenn Sie lieber Hover-Buttons haben möchten, lesen Sie Kapitel 2 .
3. 1 Code:
<applet code="fphover.class" codebase="./" width="120" height="24">
<param name="text" value="Schaltflächentext">
<param name="color" value="Farbe">
<param name="hovercolor" value="Farbe">
<param name="textcolor" value="Farbe">
<param name="effect" value="glow">
<param name="url" valuetype="ref" value="link.htm">
</applet>
3.2 Erläuterungen:
Hoverschaltflächen brauchen zwei .class Dateien, um richtig funktionieren zu können.
Wenn Sie diese downloaden ( fphover.class ; fphoverx.class ) und in den gleichen
Ordner speichern, in welchem Ihr HTML-Dokument liegt, funktionieren die Buttons.
Ändern Sie die Breite (width) und Höhe (heigth) der Schaltfläche in der ersten Zeile.
Ersetzen Sie dann "Schaltflächentext" in der zweiten Zeile durch Ihren Text (z.B.
Home oder Kontakt).
Die Farbwerte für den Hintergrund (color), die Effektfarbe beim Mouseover
(hovercolor) und die Textfarbe (textcolor) können Sie beliebig verändern, indem Sie
den Namen einer Farbe einsetzen (z.B. blue) oder einen Hexadezimalcode (z.B.
#FF00AA).
Es gibt verschiedene Effekttypen (hier "glow"), die unterschiedliche Reaktionen
auslösen. Mehr dazu weiter unten.
3.3 Einstellungen
Folgende Effekt-Typen können Sie einfügen:
"fill" ersetzt die Hintergrundfarbe durch die Effektfarbe.
"average" zeigt den Farbmittelwert von Hintergrund- und Effektfarbe an
"glow" lässt den Button in der Effektfarbe von der Mitte her leuchten.
"reverseGlow" lässt den Button vom Rand her leuchten.
"bevelOut" erwirkt einen 3D-Effekt, der Button "hebt" sich an.
"bevelIn" drückt den Button optisch nach innen.
©Copyright by Melanie Trentini; 2003
www.justideas.ch