[Tutorial] einfache Firefox Startseite

Du hast ein Tutorial für uns? Dann stell es hier rein oder schreib es gleich ins Wiki.
Forumsregeln
Ihr habt Tutorials die wir noch nicht haben?
Ihr habt Ergänzungen für unser Wiki ?

Solltet ihr mit dem Wiki nicht klarkommen, dann schreibt eure Tutorials, Faqs oder Ergänzungen hier ins Forum. Wir werden sie dann ins Wiki mit eurem Namen übertragen.

Wir bedanken uns schon einmal. Denn mit jedem neuen Tutorial helft ihr anderen Usern.
Antworten

0
Keine Stimmen
 
Insgesamt abgegebene Stimmen: 0

Benutzeravatar
Striker612
★ Ehrenmitglied ★
Beiträge: 445
Registriert: 17.07.2007, 12:21

[Tutorial] einfache Firefox Startseite

Beitrag von Striker612 » 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):
Bild

Die Grafiken:
Fangen wir mit dem Hintergrund an, ihr ladet euch das Wallpaper herunter und öffnet es in Photoshop. (Alle Grafiken verkleinert dargestellt!)
Bild
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).
Bild
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)
Bild
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.
Bild
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.
Bild
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.
Bild
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).
Bild
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>
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.

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>
Um weiter Links hinzuzufügen, müsst ihr lediglich die neue Listenpunkte hinzufügen. z.B.

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

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

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

Tante Google

[Tutorial] einfache Firefox Startseite

Beitrag von Tante Google » 04.10.2008, 14:00


megg0rt
Poweruser
Poweruser
Beiträge: 614
Registriert: 03.01.2007, 16:58

Re: [Tutorial] einfache Firefox Startseite

Beitrag von megg0rt » 04.10.2008, 15:13

sehr schönes tut :)

Benutzeravatar
moinmoin
★ Team Admin ★
Beiträge: 59671
Registriert: 14.11.2003, 11:12
Hat sich bedankt: 127 Mal
Danke erhalten: 555 Mal
Gender:

Re: [Tutorial] einfache Firefox Startseite

Beitrag von moinmoin » 04.10.2008, 15:29

Tutorial im Wiki https://www.deskmodder.de/wiki/index.ph ... Startseite

Tutorialorden verliehen. Danke Striker

FrankaKo
Veteran
Veteran
Beiträge: 952
Registriert: 07.06.2006, 09:07

Re: [Tutorial] einfache Firefox Startseite

Beitrag von FrankaKo » 04.10.2008, 18:43

Wirklich schönes Tut. :smile:

:dankeschoen:

Benutzeravatar
Mav
Guru
Guru
Beiträge: 3176
Registriert: 28.10.2006, 15:42
Hat sich bedankt: 5 Mal
Gender:

Re: [Tutorial] einfache Firefox Startseite

Beitrag von Mav » 12.10.2008, 11:43

klasse Idee !
und ein sehr schönes Tut

da werd ich doch gleich mal was nachbauen

da ich allerdings so gut wie keine html-Kenntnisse habe, werde ich NVU als Editor benutzen
Bild

nolloo
Berater
Berater
Beiträge: 205
Registriert: 24.02.2008, 11:27

Re: [Tutorial] einfache Firefox Startseite

Beitrag von nolloo » 12.10.2008, 11:53

Sehr schön,

da ich aber null Kenntnisse von html und co. habe darf ich auch mal fragen ob es auch für andere Browser, wie im Safari klappen wird, oder :D?

///edit:
Natürlich klappts, habe es gerade mit deinem Template getestet, danke ;)

Benutzeravatar
Striker612
★ Ehrenmitglied ★
Beiträge: 445
Registriert: 17.07.2007, 12:21

Re: [Tutorial] einfache Firefox Startseite

Beitrag von Striker612 » 12.10.2008, 12:00

Natürlich, die Seite sollte in allen gängingen Browsern vernünftig dargestellt werden ^^

//edit: alles klar :D


:thx:

Benutzeravatar
koocho
Stammgast
Stammgast
Beiträge: 119
Registriert: 08.03.2008, 17:22
Gender:

Re: [Tutorial] einfache Firefox Startseite

Beitrag von koocho » 15.10.2008, 17:01

sehr schön - danke :daumen:
Bild

Odin
Stammgast
Stammgast
Beiträge: 114
Registriert: 19.06.2008, 14:39

Re: [Tutorial] einfache Firefox Startseite

Beitrag von Odin » 25.05.2009, 15:48

Hey,
klasse tut....wusste zwar schon alles aber du hast mich auf n schöne Idee gebracht Danke!

chhrille
Nachwuchs
Nachwuchs
Beiträge: 68
Registriert: 22.08.2008, 00:21

Re: [Tutorial] einfache Firefox Startseite

Beitrag von chhrille » 27.05.2009, 02:54

gibt es ne möglichkeit dieses suchfeld von den der google seite, auf die selbstgebaute startseite zu integrieren?
also anstatt zb den link zu google, einfach das suchfeld (ohne schnickschnack, wie zb. such auf deutsch, nur deutsche seiten usw usw.)
mfg ch
o
L_
OL

This is Schäuble. Copy Schäuble into your signature to help him on his way to Überwachungsstaat.

Benutzeravatar
Striker612
★ Ehrenmitglied ★
Beiträge: 445
Registriert: 17.07.2007, 12:21

Re: [Tutorial] einfache Firefox Startseite

Beitrag von Striker612 » 27.05.2009, 10:18

Hey,
klar ist das möglich.
Wenn du möchtest kann ich auch noch die grafische Anpassung posten, hier erstmal der Quellcode für das Suchfeld:

Code: Alles auswählen

<form method="get" action="http://www.google.com/search">
	<p>
 		<input type="text" name="q" size="34" maxlength="228" value="">
 		<input type=submit name="btnG" VALUE="Google Suche">
 	</p>
</form>

Antworten