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. <html> <head> <title>meine erste Webseite</title> <link rel="stylesheet" a href="stylesheet.css" media="screen"> </head> <body> <div id="container"> <h1>hallo Welt</h1> <ul> <li><a href="index.htm">startseite</a></li> <li><a href="index.htm">informationen</a></li> <li><a href="index.htm">kontakt</a></li> <li><a href="index.htm">impressum</a></li> </ul> <p>hier haben wir den ersten Beispieltext</p> <p>und ein Bild, dies ist ein Beispielbild, jeder kann sich sein eigenes suchen:-)</p> <p><img src="flensburg.jpg" width="30%"></p> </body> </html> 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 <html> <head> <title>meine erste Webseite</title> <link rel="stylesheet" a href="stylesheet.css" media="screen"> </head> <body> <div id="container"> <div id="header"> <h1>hallo Welt</h1> <ul> <li><a href="index.htm">startseite</a></li> <li><a href="index.htm">informationen</a></li> <li><a href="index.htm">kontakt</a></li> <li><a href="index.htm">impressum</a></li> </ul> <p>hier haben wir den ersten Beispieltext</p> <p>und ein Bild, dies ist ein Beispielbild, jeder kann sich sein eigenes suchen:-)</p> <p><img src="flensburg.jpg" width="30%"></p> </body> </html> 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 <html> <head> <title>meine erste Webseite</title> <link rel="stylesheet" a href="stylesheet.css" media="screen"> </head> <body> <div id="container"> <div id="header"> <h1>hallo Welt</h1> <div id="mainnavi"> <ul> <li><a href="index.htm">startseite</a></li> <li><a href="index.htm">informationen</a></li> <li><a href="index.htm">kontakt</a></li> <li><a href="index.htm">impressum</a></li> </ul> <div id="content"> <p>hier haben wir den ersten Beispieltext</p> <p>und ein Bild, dies ist ein Beispielbild, jeder kann sich sein eigenes suchen:-)</p> <p><img src="flensburg.jpg" width="30%"></p> </body> </html> 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 <html> <head> <title>meine erste Webseite</title> <link rel="stylesheet" a href="stylesheet.css" media="screen"> </head> <body> <div id="container"> <div id="header"> <h1>hallo Welt</h1> <div id="mainnavi"> <ul> <li><a href="index.htm">startseite</a></li> <li><a href="index.htm">informationen</a></li> <li><a href="index.htm">kontakt</a></li> <li><a href="index.htm">impressum</a></li> </ul> <div id="content"> <p>hier haben wir den ersten Beispieltext</p> <p>und ein Bild, dies ist ein Beispielbild, jeder kann sich sein eigenes suchen:-)</p> <p><img src="flensburg.jpg" width="30%"></p> <div id="footer"> <p>diese Seite wurde von... erstellt.</p> </body> </html> 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 Umlaute in HTML schreiben groß klein Ä -> Ä Ü -> Ü Ö -> Ö ä -> ä ü -> ü ö -> ö Sascha von der Heide - Dipl. Multimedia Producer Seite 11 von 11