Externes Stylesheet erstellen
In dem externen Stylesheet werden alle Schriftarten, Farben, Schriftgrößen (also letztendlich alle Designelemente) festgelegt.
Ganz am Anfang der Lektion haben wir im Kopf der Datei das externe Stylesheet verknüpft, und zwar durch diese Zeile:
<link rel="stylesheet" type="text/css" media="screen, projection" href="stylesheet.css">
Zur Erstellung von Stylesheets können Sie das kostenlose Programm Topstyle Lite nutzen, hier können Sie das Programm kostenlos downloaden: download.chip.eu/de/download_de_919202.html
Alternativ können Sie eine Stylesheet-Datei auch mit dem Windows Editor erstellen. Hierbei ist es wichtig, dass Sie die Datei mit der Dateiendung .css speichern, der komplette Dateiname ist also stylesheet.css. Speichern Sie die Datei in dem gleichen Verzeichnis, in dem Sie bereits Ihre index.html gespeichert haben.
Wie funktioniert nun ein Stylesheet?
Sie definieren in dem Stylesheet ein Element, z.B. das "body" Element. Dann weisen Sie diesem Element in geschweiften Klammern eine oder mehrere Deklarationen zu.
So sieht das dann aus:
body {font-family: Arial, Helvetica, sans-serif;
background-color: #ffffff;}
Hier wurde das Element body wie folgt definiert: Innerhalb dieses Elementes sind die Schriftartenfamilien (font-family) mit Arial, Helvetica oder sans-serif definiert und die Hintergrund-Farbe (background-color) wurde mit weiß (weiß Hex-Code= #ffffff ) definiert.
Es gibt unzählige Deklarationen, eine gute Einführung in CSS finden Sie hier:
http://de.selfhtml.org/css/intro.htm
Wir verwenden ein externes Stylesheet, alternativ können Sie auch die Stylesheet-Angaben direkt im HTML-Code oder im Header eingeben. Die Unterschiede zwischen beiden Möglichkeiten werden bei Selfhtml genau erklärt:
Formate zentral für eine HTML-Datei definieren (so kann man es auch machen)
Formate zentral in separater CSS-Datei definieren(so machen wir es hier in unserer Beispiel-Lektion)
Wir haben jetzt ein einfaches Stylesheet für die Muster-Homepage erstellt, bestehend aus folgenden Inhalten:
body {font-family: Arial, Helvetica, sans-serif; background-color: #ffffff;}
a {color: #00008B; font-weight: bold;}
a:visited {color: #3366CC; font-weight: bold;}
a:active {color: #ff0000;}
a:hover {color: #ffffff; background-color: #00008B; font-weight: bold;}
#rahmen {border: solid #000000 1px; padding: 15px;}
#header {background-image: url(bg1.gif); padding-top: 5px; border: dotted #cccccc 1px; text-align: center;}
#navigation li {display: inline; padding: 10px;}
#footer {text-align: right; font-size: small;}
Sie erinnern sich, wie die Homepage ohne Stylesheet aussah? Hier nochmals der Screenshot:
Nachdem nun das Stylesheet gespeichert ist, sieht die Homepage so aus:
Sieht doch schon viel ansprechender aus, oder?
Sie sollten mit dem Stylesheet experimentieren, es gibt sehr viele Möglichkeiten der Darstellung.
Die Container werden im Stylesheet übrigens immer durch eine Raute (#) gekennzeichnet.
Nachdem Sie jetzt eine fertige Homepage mit Design und Inhalt haben, fertigen wir uns noch fix ein Favicon an - klicken Sie hier für den nächsten Teil der Lektion
| Twittern |
Weitere interessante Rubriken / Webseiten zu diesem Themenbereich:
- Generatoren - mit den Online-Generatoren in unserer Generator-Sammlung können Sie sich viele nützliche Dinge für Webmaster online erstellen lassen
- Homepage-FAQS - die häufigsten Fragen rund um die eigene Homepage mit den dazugehörigen Antworten
- Homepage-Forum - Hilfe bei Fragen rund um die eigene Homepage
- Top-Links - die besten Links für Webmaster
Newsbox
Nachfolgend die 5 neuesten Nachrichten, Links und Tools für Webmaster:Werbeheini.name - schalten Sie kostenlos einen Zeitbanner
www.werbeheini.name - hier können Sie einen Zeitbanner schalten, dass heißt Ihr Banner wird für gewisse Zeit angezeigt (z.B. bis der nächste User sein Banner einstellt). Die Schaltung ist laut Anbieter kostenlos, zudem ist unter www.werbeheini.name/download.php das Script auch zum Download und Eigennutzung erhältlich. Desweiteren gibt es noch einige Webmastertools bei Werbeheini.name.
Geschrieben am 28 Jan 2012 von Karl Oltmanns
Google Gadget Fish für Ihre Webseite
Google Gadget Fish - hier findet sich ein sehr schönes Google-Gadget. Sie können online Fische füttern (einfach mit der Maus aufs Wasser klicken) - schon schwimmt etwas Fischfutter auf dem Wasser und die Fische kommen herbei, um sich die Leckerlies zu schnappen.
Geschrieben am 28 Jan 2012 von Karl Oltmanns
ms5.eu - kostenloser und werbefreier Webspace
www.ms5.eu - kostenloser Webspace mit folgenden Features nach Angaben auf der Webseite (ohne Gewähr auf Verfügbarkeit): 5 GB Webspace, PHP5, 5x MySQL5, 5x FTP, unlimitierter Traffic, unbegrenzte Dateigrößen, eigene Domains aufschaltbar, 128 MB Prozessspeicher, 60 Sekunden Skriptlaufzeit, 128 MB max. Upload-Size (PHP), PHPMyAdmin vorinstalliert, werbefreier Webspace
Geschrieben am 28 Jan 2012 von Karl Oltmanns
Gute Keywords finden ohne Keyword-Tool
Arno Ashoff beschreibt in seinem Blog, wie man gute Keywords findet, ohne eines der klassischen Keyword-Tools zu nutzen. Hier geht es zu seinem Blogbeitrag: www.website-seo-check.com/keywords/gute-keywords-finden-ohne-keyword-tool-2.html
Geschrieben am 28 Jan 2012 von Karl Oltmanns
ReinHTML Dialog Designer
Eine ganz andere Art, Webformulare für den Kontakt mit Ihren Webseiten-Besuchern zu erstellen bietet der ReinHTML Dialog Designer an. Das Tool befindet sich aktuell im Beta-Stadium und kann kostenlos getestet werden. Ziel ist es, reine HTML & CSS Kontaktformulare ohne die Nutzung von Javascript zu erstellen. Die Formulare können online im Desinger erstellt und dann in die eigene Webseite im Quellcode eingebaut werden. Hier geht es zu der Webseite des Projektes ReinHTML Dialog Designer: www.reinhtml.eu
Geschrieben am 28 Jan 2012 von Karl Oltmanns
Mehr Nachrichten in unserer Rubrik "Updates und News für Webmaster"
Feedback und Informationen zu meine-erste-homepage.com:
meine-erste-homepage.com ist bei 1&1 Webhosting gehostet.
Aber dank euch fummel ich mich Stück für Stück in unsere Naturfreundehaus- Seite ein und hab die (simplen) Dinge zumindest schon euch im Griff! VIELEN DANK