Einfache Firefox Startseite

Aus Deskmodder Wiki
Version vom 1. Januar 2015, 12:58 Uhr von Gumfuzi (Diskussion | Beiträge)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)


Vorwort

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 soll's 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):

Mockup.jpg

Die Grafiken

Der Hintergrund

Fangen wir mit dem Hintergrund an, ihr ladet euch das Wallpaper Distance and Time by imrik herunter und öffnet es in Photoshop. (Alle Grafiken verkleinert dargestellt!)

Bg01.jpg

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).

Bg02.jpg

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)

Bg03.jpg

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.

Bg04.jpg

Dieses Bild wird jetzt abgespeichert, über "Für Web und Geräte speichern" als PNG -> bg.png


Die Buttons

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.

Bu01.jpg

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)

Bu02.jpg

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).

Bu03.jpg

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.


HMTL

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.

<!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>

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.

<body>
<div id="content">
	<ul>
		<li><a href="http://www.deskmodder.de/phpBB3/index.php" class="dm">deskmodder.de</a></li>
	</ul>
</div><!-- End Content -->
</body>
</html>

Um weiter Links hinzuzufügen, müsst ihr lediglich die neue Listenpunkte hinzufügen. z.B.

<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>

CSS

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):

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;
}	

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:

a.dm{background: url(dm.png) no-repeat scroll 0%;}
a.dm:hover{background: url(dmho.png) no-repeat scroll 0%;}

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

Das wars auch schon, jetzt haben wir unsere 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.


Gruß, Malte