homepage-buttons.de
Templates, Buttons und mehr
 
 

HTML-Kurs - Grafiken beschriften

2. Grafik

2.1 Grafiken beschriften

Die angebotenen Grafiken auf dieser Seite sind bewusst ohne Beschriftung. Damit sie für Ihre Website brauchbar werden, müssen sie beschriftet werden. Dies geht auf 2 Arten.

1.) Sie öffnen die gewünschte Grafik - z.B. diese hier: gewünschte Grafik öffnen mit einem x-beliebigen Grafikprogramm (es kann sogar das bei Windows integrierte "Paint" sein), fügen mit der Textauswahl den gewünschten Schriftzug hinzu und speichern die Grafik unter einem anderen Namen ab.

Ergebnis:
Schaltfläche mithilfe eines Grafikprogrammes beschriften

Diesen Vorgang wiederholen Sie, bis Sie alle benötigten Buttons haben.

Je nach Grafikprogramm müssen Sie vor der Beschriftung die Grafik zuerst in RGB-Echtfarben umwandeln (z.B. bei PhotoImpact), falls die Schrift eine andere Farbe haben soll.

2.) Bei der 2. Möglichkeit definieren Sie den neutralen Button als Hintergrundgrafik eines div-Elementes und setzen einen Text darüber.

Ergebnis:
Home

Der Quellcode dafür sieht so aus:

<div style="width:105px;color:white;background-image:url(button.gif)" height="20" width="105" align="center"><b>Home</b></div>