[Tutorial] einfache Firefox Startseite
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.
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.
- Striker612
- ★ Ehrenmitglied ★
- Beiträge: 445
- Registriert: 17.07.2007, 12:21
[Tutorial] einfache Firefox Startseite
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
-
Tante Google
- moinmoin
- ★ Team Admin ★
- Beiträge: 60138
- Registriert: 14.11.2003, 11:12
- Hat sich bedankt: 136 Mal
- Danke erhalten: 620 Mal
- Gender:
Re: [Tutorial] einfache Firefox Startseite
Tutorial im Wiki https://www.deskmodder.de/wiki/index.ph ... Startseite
Tutorialorden verliehen. Danke Striker
Tutorialorden verliehen. Danke Striker
Re: [Tutorial] einfache Firefox Startseite
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
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
Re: [Tutorial] einfache Firefox Startseite
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 ?
///edit:
Natürlich klappts, habe es gerade mit deinem Template getestet, danke
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 ?
///edit:
Natürlich klappts, habe es gerade mit deinem Template getestet, danke
- Striker612
- ★ Ehrenmitglied ★
- Beiträge: 445
- Registriert: 17.07.2007, 12:21
Re: [Tutorial] einfache Firefox Startseite
Natürlich, die Seite sollte in allen gängingen Browsern vernünftig dargestellt werden ^^
//edit: alles klar
//edit: alles klar
Re: [Tutorial] einfache Firefox Startseite
Hey,
klasse tut....wusste zwar schon alles aber du hast mich auf n schöne Idee gebracht Danke!
klasse tut....wusste zwar schon alles aber du hast mich auf n schöne Idee gebracht Danke!
Re: [Tutorial] einfache Firefox Startseite
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
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.
L_
OL
This is Schäuble. Copy Schäuble into your signature to help him on his way to Überwachungsstaat.
- Striker612
- ★ Ehrenmitglied ★
- Beiträge: 445
- Registriert: 17.07.2007, 12:21
Re: [Tutorial] einfache Firefox Startseite
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:
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>