[Tutorial] einfache Firefox Startseite
Verfasst: 04.10.2008, 14:00
Ich bin kein Fan von personalisierten Webseiten wie iGoogle o.ä., noch tippe ich gerne alle urls manuell in die Adressleiste von Firefox ein. Aus diesem Grund bastel ich mir immer gerne eigene Startseiten und will meine neuste einfach mal vorstellen 
:
Wie solls Aussehen?
Beginnen wir mit dem Entwurf, da gerade GAIA08 released wurde und ich die Suite nutze, möchte ich etwas passendes dazu erstellen. Letztendlich habe ich mich entschlossen mit meinem aktuellen Wallpaper zu arbeiten: Distance and time by imrik.
Die Seite soll extrem simpel aufgebaut sein, und meine paar Links sollen so einfach zu erreichen sein wie möglich. Ich brauche also nur den Hintergrund und die Buttons für die Links.
Mein Entwurf (verkleinert dargestellt):
Die Grafiken:
Fangen wir mit dem Hintergrund an, ihr ladet euch das Wallpaper herunter und öffnet es in Photoshop. (Alle Grafiken verkleinert dargestellt!)
Das gesamte Wallpaper ist für unser Vorhaben zu groß, wir möchten nur den Vogel benutzen. Also schneiden wir das Bild zurecht (Taste: C).
Da ich wirklich nur den Vogel benutzen möchte, fülle ich die Bereiche außerhalb des Vogels alle mit der selben Farbe.
Dazu nehme ich zuerst die Pipette und wähle die Farbe aus die ich benutzen möchte (Taste: I)
Jetzt nehme ich das Füllwerkzeug (Taste: G), stelle die Toleranz auf 50% und klicke irgendwo außerhalb des Vogels. Als Ergebnis erhalten wir den Vogel auf gleichfarbigem Hintergrund.
Dieses Bild wird jetzt abgespeichert, über "Für Web und Geräte speichern" als PNG -> bg.png
Der Hintergrund ist fertig, kommen wir zu den Buttons.
Erstellt ein neues transparentes Bild mit den Abmessungen 228px*34px. Über die Taste: U wählen wir das "Abgerundetes-Rechteck-Werkzeug" an und stellen den Radius auf 15px. Als Farbe wählen wir den hellsten Blauton, den der Vogel zu bieten hat (#c5ecf1). Wir erzeugen das Rechteck über die ganze Fläche.
Jetzt kommt der Text hinzu. Ich verwende die Schriftart "advent", die ihr euch hier runterladen könnt.
Erstellt eine neue Textebene (Taste: T), Textausrichtung sollte zentriert sein, schreibt etwas, z.B. "deskmodder" und zentriert den Text im Bild. Als Textfarbe verwenden wir die dunkelste Farbe, die der Vogel zu bieten hat (#205259). Schriftgröße ist 22px.
Und schon haben wir den ersten Button, wir speichern ihn über "Für Web und Geräte speichern" als PNG -> dm.png.
Als nächstes duplizieren wir die Hintergrundebene, blenden das Original aus und stellen die Farbe der neuen Ebene auf Weiß (#ffffff).
Diesen zweiten Button speichern wir wieder als PNG -> dmho.png
Jetzt könnt ihr euch weitere Buttons mit Hilfe dieses Templates machen, speichert immer eine Grafik mit blauem und eine mit weißem Hintergrund.
Die Webseite:
Jetzt kommt der einfachste Teil des ganzen, wir coden uns die passende Webseite.
Dazu erstellen wir im Ordner mit den Grafiken eine Datei index.htm und eine Datei style.css.
Beginnen wir mit dem HTML.
Jede HTML-Datei besteht aus eine Kopf und einem Körper (head und body).
Den folgenden Code kopiert ihr einfach in eure index.htm. Hier wird lediglich die Sprache festgelegt ( (X)HTML ), die Webseite bekommt einen Namen und die HTML-Seite wird mit der style.css verknüpft.
Kommen wir zum "Körper". Tabellen waren gestern, wir benutze DIV's.
Wir erstellen nun einen Bereich, hier content genannt, in dem wir eine Liste erzeugen, in die wir unsere Links packen. Jedem Link weisen wir eine eigene Klasse zu, um ihm später das entsprechende Bild zuordnen zu können.
Um weiter Links hinzuzufügen, müsst ihr lediglich die neue Listenpunkte hinzufügen. z.B.
Damit ist eure index.htm fertig, kommen wir nun zum Stylesheet. Für die, die kein CSS verstehen wär es vermutlich zu kompliziert den Code zu erklären, die anderen brauchen ihn nicht erklärt haben, deshalb poste ich ihn einfach komplett (dieser Code kommt in die style.css):
Kurz was ich gemacht habe: Das gesamte Dokument bekommt die Hintergrundfarbe #b1dee4 zugewiesen, der div content bekommt unseren Vogel als Hintergrundbild. Bei den Listen nehme ich die Aufzählungszeichen weg, aus den Links mache ich Block-Elemente, wodurch ich ihnen Hintergrundbilder zuweisen kann.
Die Hintergrundbilder werden hier festgelegt:
Als hover-Button benutzen wir das weiße Bild, als normalen Button das blaue Bild. Durch "text-indent:-999em;" sind die Link-Texte nicht mehr sichtbar.
Das Ergebnis: Startseite mit 2 Links
Soo fertig mit meinem ersten Tutorial, ich hoffe es ist verständlich, sonst fragt gerne nach dann helfe ich euch oder schreibe noch ein paar Teile vlt. um.
Ich habe die HTML-Datei und das Stylesheet, das Template für die Buttons und verschiedene Buttons als Archiv gezippt, könnt ihr euch hier runterladen und anschauen.
Gruß,
Malte
:Wie solls Aussehen?
Beginnen wir mit dem Entwurf, da gerade GAIA08 released wurde und ich die Suite nutze, möchte ich etwas passendes dazu erstellen. Letztendlich habe ich mich entschlossen mit meinem aktuellen Wallpaper zu arbeiten: Distance and time by imrik.
Die Seite soll extrem simpel aufgebaut sein, und meine paar Links sollen so einfach zu erreichen sein wie möglich. Ich brauche also nur den Hintergrund und die Buttons für die Links.
Mein Entwurf (verkleinert dargestellt):
Die Grafiken:
Fangen wir mit dem Hintergrund an, ihr ladet euch das Wallpaper herunter und öffnet es in Photoshop. (Alle Grafiken verkleinert dargestellt!)
Das gesamte Wallpaper ist für unser Vorhaben zu groß, wir möchten nur den Vogel benutzen. Also schneiden wir das Bild zurecht (Taste: C).
Da ich wirklich nur den Vogel benutzen möchte, fülle ich die Bereiche außerhalb des Vogels alle mit der selben Farbe.
Dazu nehme ich zuerst die Pipette und wähle die Farbe aus die ich benutzen möchte (Taste: I)
Jetzt nehme ich das Füllwerkzeug (Taste: G), stelle die Toleranz auf 50% und klicke irgendwo außerhalb des Vogels. Als Ergebnis erhalten wir den Vogel auf gleichfarbigem Hintergrund.
Dieses Bild wird jetzt abgespeichert, über "Für Web und Geräte speichern" als PNG -> bg.png
Der Hintergrund ist fertig, kommen wir zu den Buttons.
Erstellt ein neues transparentes Bild mit den Abmessungen 228px*34px. Über die Taste: U wählen wir das "Abgerundetes-Rechteck-Werkzeug" an und stellen den Radius auf 15px. Als Farbe wählen wir den hellsten Blauton, den der Vogel zu bieten hat (#c5ecf1). Wir erzeugen das Rechteck über die ganze Fläche.
Jetzt kommt der Text hinzu. Ich verwende die Schriftart "advent", die ihr euch hier runterladen könnt.
Erstellt eine neue Textebene (Taste: T), Textausrichtung sollte zentriert sein, schreibt etwas, z.B. "deskmodder" und zentriert den Text im Bild. Als Textfarbe verwenden wir die dunkelste Farbe, die der Vogel zu bieten hat (#205259). Schriftgröße ist 22px.
Und schon haben wir den ersten Button, wir speichern ihn über "Für Web und Geräte speichern" als PNG -> dm.png.
Als nächstes duplizieren wir die Hintergrundebene, blenden das Original aus und stellen die Farbe der neuen Ebene auf Weiß (#ffffff).
Diesen zweiten Button speichern wir wieder als PNG -> dmho.png
Jetzt könnt ihr euch weitere Buttons mit Hilfe dieses Templates machen, speichert immer eine Grafik mit blauem und eine mit weißem Hintergrund.
Die Webseite:
Jetzt kommt der einfachste Teil des ganzen, wir coden uns die passende Webseite.
Dazu erstellen wir im Ordner mit den Grafiken eine Datei index.htm und eine Datei style.css.
Beginnen wir mit dem HTML.
Jede HTML-Datei besteht aus eine Kopf und einem Körper (head und body).
Den folgenden Code kopiert ihr einfach in eure index.htm. Hier wird lediglich die Sprache festgelegt ( (X)HTML ), die Webseite bekommt einen Namen und die HTML-Seite wird mit der style.css verknüpft.
Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Startseite</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>Wir erstellen nun einen Bereich, hier content genannt, in dem wir eine Liste erzeugen, in die wir unsere Links packen. Jedem Link weisen wir eine eigene Klasse zu, um ihm später das entsprechende Bild zuordnen zu können.
Code: Alles auswählen
<body>
<div id="content">
<ul>
<li><a href="http://www.deskmodder.de/phpBB3/index.php" class="dm">deskmodder.de</a></li>
</ul>
</div>
</body>
</html>Code: Alles auswählen
<li><a href="http://www.deskmodder.de/phpBB3/index.php" class="dm">deskmodder.de</a></li>
<li><a href="http://google.de/" class="go">google.de</a></li>Code: Alles auswählen
html, body {
font-family: 'advent',Verdana,Arial;
background: #b1dee4 repeat fixed center top;
margin:0px;
padding:0px;
}
#content {
width: 724px;
height:673px;
margin: 20px 100px;
background: #b1dee4 url(bg.png) no-repeat scroll 50%;
}
ul{
list-style-type:none;
padding-top:30px;
padding-left:40px;
margin:0px;
}
li{
width:228px;
height:34px;
margin: 4px 0;
}
a.dm{background: url(dm.png) no-repeat scroll 0%;}
a.dm:hover{background: url(dmho.png) no-repeat scroll 0%;}
a.go{background: url(go.png) no-repeat scroll 0%;}
a.go:hover{background: url(goho.png) no-repeat scroll 0%;}
a img{border: none;}
a{
display:block;
text-indent:-999em;
width:228px;
height:34px!important;
}
Die Hintergrundbilder werden hier festgelegt:
Code: Alles auswählen
a.dm{background: url(dm.png) no-repeat scroll 0%;}
a.dm:hover{background: url(dmho.png) no-repeat scroll 0%;}Das Ergebnis: Startseite mit 2 Links
Soo fertig mit meinem ersten Tutorial, ich hoffe es ist verständlich, sonst fragt gerne nach dann helfe ich euch oder schreibe noch ein paar Teile vlt. um.
Ich habe die HTML-Datei und das Stylesheet, das Template für die Buttons und verschiedene Buttons als Archiv gezippt, könnt ihr euch hier runterladen und anschauen.
Gruß,
Malte
?
