Tutorial zum erstellen einer Webseite 2. Teil das Aussehen mit CSS bestimmen Vorbereitungen: Die HTML Grundlage anpassen, Änderungen sind fett geschr...
Tutorial zum erstellen einer Webseite 2. Teil das Aussehen mit CSS bestimmen Vorbereitungen: Die HTML Grundlage anpassen, Änderungen sind fett geschrieben. Ab sofort werden wir mit zwei Dateien arbeiten, mehr dazu auf der zweiten Seite. Meine erste Webseite Hallo Welt Startseite Informationen Kontakt Impressum Hier haben wir den ersten Beispieltext Und ein Bild, dies ist ein Beispielbild, jeder kann sich sein eigenes suchen:-)
Durch diese Änderungen wird sich das Aussehen der Webseite noch nicht verändert haben. Damit nun das Aussehen gestaltet werden kann, brauchen wir eine zweite Datei, eine CSS Datei. Was ist CSS? CSS wurde entworfen, um Darstellungsvorgaben weitgehend von den Inhalten zu trennen. Wenn diese Trennung konsequent vollzogen wird, werden nur noch die inhaltliche Gliederung eines Dokumentes und die Bedeutung seiner Teile in HTML oder XML beschrieben, während mit CSS gesondert davon, vorzugsweise in separaten CSS-Dateien, die Darstellung der Inhalte festgelegt wird (z. B. Layout, Farben und Typografie)
Sascha von der Heide - Dipl. Multimedia Producer
Seite 1 von 11
Die CSS Datei anlegen Eine neue Datei im Editor anlegen und als stylesheet.css speichern. In diese Datei folgende Einträge erstellen: /* Container gestalten*/ #container { width: 90%; height: auto; margin: auto; border: 1px solid #000000; background-color: #b5b7b5; } So sollte die Seite nun aussehen.
Sascha von der Heide - Dipl. Multimedia Producer
Seite 2 von 11
Den Kopfbereich der Webseite erstellen: Index.htm Meine erste Webseite Hallo Welt Startseite Informationen Kontakt Impressum Hier haben wir den ersten Beispieltext Und ein Bild, dies ist ein Beispielbild, jeder kann sich sein eigenes suchen:-) stylesheet.css /* Kopfzeile gestalten */ #header { margin-top: 0px; width: 100%; height: 70px; border-bottom: 1px solid #000000; background-color: #ff0000; }
Sascha von der Heide - Dipl. Multimedia Producer
Seite 3 von 11
/* Überschriften gestalten */ h1 { font-size: 16px; font-weight: bold; margin-top: 0px; } Anschliessend sollte die Seite so aussehen
Sascha von der Heide - Dipl. Multimedia Producer
Seite 4 von 11
Den Text- und Navigationsbereich gestalten Index.htm Meine erste Webseite Hallo Welt Startseite Informationen Kontakt Impressum Hier haben wir den ersten Beispieltext Und ein Bild, dies ist ein Beispielbild, jeder kann sich sein eigenes suchen:-)
Sascha von der Heide - Dipl. Multimedia Producer
Seite 5 von 11
stylesheet.css /* Bereich für den Text gestalten */ #content { width: 75%; float: right; background-color: #000aff; } /* Navigation gestalten */ #mainnavi { width: 20%; min-width: 15%; float: left; background-color: #30f7c1; } Anschliessend sollte die Seite so aussehen
Sascha von der Heide - Dipl. Multimedia Producer
Seite 6 von 11
Navigation gestalten stylesheet.css /* Navigationspunkte gestalten */ #mainnavi a { text-decoration: none; font-size: 16px; font-weight: bold; } #mainnavi li { list-style-type: none; margin-left: -10px; margin-top: 5px; margin-bottom: 5px; } Anschliessend sollte die Seite so aussehen
Sascha von der Heide - Dipl. Multimedia Producer
Seite 7 von 11
Da der Content- und Navigationsbereich im CSS die Eigenschaft „float“ bekommen hat, müssen wir diese Eigenschaft wieder auflösen. Am einfachsten machen wir das mit einer Fusszeile, die fügen wir wie folgt ein. index.htm Meine erste Webseite Hallo Welt Startseite Informationen Kontakt Impressum Hier haben wir den ersten Beispieltext Und ein Bild, dies ist ein Beispielbild, jeder kann sich sein eigenes suchen:-) Diese Seite wurde von ... erstellt.
Sascha von der Heide - Dipl. Multimedia Producer
Seite 8 von 11
stylesheet.css /* Fusszeile gestalten */ #footer { clear: both; } Anschliessend sollte die Seite so aussehen
Sascha von der Heide - Dipl. Multimedia Producer
Seite 9 von 11
Kleinere Änderungen am Aussehen Text im Content- und Footerbereich soll einen Abstand zum Rand links und rechts erhalten /* Bereich für den Text gestalten */ #content { width: 75%; height: auto; float: right; background-color: #000aff; padding-left: 10px; padding-right: 10px; } /* Fusszeile gestalten */ #footer { clear: both; padding-left: 10px; padding-right: 10px; } Überschrift H1 zentrieren /* Überschriften gestalten */ h1 { font-size: 16px; font-weight: bold; margin-top: 0px; text-align: center; }
Sascha von der Heide - Dipl. Multimedia Producer
Seite 10 von 11
Anhang: Farbwerte bestimmen Farbtabelle im Internet http://www.farb-tabelle.de/de/farbtabelle.htm
