Clubsite4Fun Administration: Farben und Schriftarten ändern Unser Fansite-Projekt macht Fortschritte: die Site präsentiert sich bereits mit neuer Kopfzeilengraphik und einem eigenen Logo. Irgendwie passt die Schrift des Logos aber nicht mehr mit der der Überschriften zusammen. Ein weiterer kleiner Dorn im Auge des Betrachters ist der cremefarbene (wie uncool!) Rahmen mit den runden Ecken um den Text. Wie immer hilft ein Blick in die CSS Datei der Applikation, und zum echten Lebensretter wird wer hätte das gedacht ausgerechnet Microsoft Paint. Voraussetzungen: Funktionsfähige Installation von Visual Web Developer Express. Erfolgte Installation einer Clubsite4Fun Webapplikation auf dem lokalen Rechner. Abgeschlossene Schritte des Tutorials: Logo ändern - 1/10 -
Voraussetzung Vorbereitungen der Videos Kopfzeilengraphik ändern und Logo ändern sind durchgeführt. Das nun folgende Beispiel baut auf diesen Videos auf. Schriftarten und deren Farben ändern 1. Rufen Sie die Website im Browser auf. Die Schriftart der Überschriften passt nicht mit der des neuen Logos zusammen. 2. Öffnen Sie in Visual Web Developer Express die Datei App_Themes/cooleBand/general.css. Lassen Sie das Browserfenster am besten geöffnet, damit das Ergebnis der in den folgenden Schritten beschriebenen Modifikationen jeweils sofort überprüft werden kann. 3. Falls das Fenster CSS-Gliederung nicht angezeigt wird, klicken Sie bitte im Hauptmenü auf Ansicht > Dokumentgliederung. Dieses Fenster erleichtert die Navigation in CSS-Dateien erheblich. - 2/10 -
4. Der Abschnitt /**************/ /* Typography */ /**************/ beinhaltet alle Stylesheet-Regeln, die die Schriften und deren Formatierung festlegen. Finden Sie das Element h1: Klicken Sie im Fenster CSS-Gliederung auf Elemente und wählen Sie dann h1 aus. Im CSS-Dokument wird daraufhin die zugehörige Regel h1 markiert. 5. Ersetzen Sie in Regel h1 die Deklaration font-family: Georgia, 'Times New Roman', Serif; durch die folgende: font-family: Verdana, Arial, Sans-Serif; 6. Um auch noch die Farbe des Textes zu ändern, stellen Sie in der Deklaration color: #FFF; den Wert des color Attributs auf - 3/10 -
color: #961800; um. 7. Wiederholen Sie Schritt 5 für die Elemente h2 und h3. Die Textfarbe bleibt hier unverändert. 8. Speichern Sie die CSS Datei und überprüfen Sie das Resultat im Browser. Die Änderungen wurden übernommen. Im nächsten Schritt sollen Schriftart und Farbe des Lauftextes angepasst werden. - 4/10 -
9. Finden Sie in Visual Web Developer Express in der noch geöffneten CSS Datei das Element body. Ändern Sie dort die Deklaration font-family wie in Schritt 5. 10. Finden Sie dann das Element p und ändern Sie dort die Deklaration color:#333; auf color:#666; 11. Speichern Sie die CSS Datei und betrachten Sie das Resultat im Browser. 12. Das Ergebnis ist zufrieden stellend, allerdings wirkt der cremefarbene Rand um den Text noch störend. Dieser wird mit den nun folgenden Schritten entfernt. #MainContent #CenterAndSideContent img: centercontent_bg.png img: maincontent_bg.png 13. Zunächst etwas Theorie: Der Gesamteindruck des Rahmens wird durch eine geschickte Kombination dreier einzelner Bildelemente erzeugt (Öffnen Sie zum besseren Verständnis die Datei Masterpage.master im Hauptverzeichnis der Installation): a. Der obere Teil ist ein Hintergrundbild ( centercontent_bg.png ), welches zum div Element mit der ID CenterAndSideContent gehört. b. Die linke und rechte Seite des Rahmens entstehen durch ein vertikal wiederholtes Hintergrundbild ( maincontent_bg.png ), das dem div Element mit der ID MainContent zugewiesen ist. - 5/10 -
#InnerFooter img: innerfooter_bg.gif c. Der untere Teil ist ein Hintergrundbild ( innerfooter_bg.png ), welches zum div Element mit der ID InnerFooter gehört. 14. Öffnen Sie die Datei General.css in Visual Web Developer Express. - 6/10 -
15. Selektieren Sie im Fenster CSS-Gliederung unter Element-IDs den Eintrag #MainContent. Die zugehörige Regel wird im CSS Editor angezeigt. 16. In der Stylesheet-Regel ist das Hintergrundbild festgelegt. Finden Sie das dort angegebene Bild und öffnen Sie es mit einem Doppelklick in Microsoft Paint. - 7/10 -
17. Klicken Sie zunächst in der Toolbox das Vergrößerungswerkzeug an und wählen Sie unten die 2-fache Vergrößerung aus. 18. Wählen Sie dann das Rechteckwerkzeug aus, aktivieren Sie die Einstellung nur Füllung, und stellen Sie in der Palette die Füllung auf Weiß ein. 19. Malen Sie mit der Maus ein weißes Rechteck über das cremefarbene Rahmenteil. Verfahren Sie ebenso mit dem Gegenstück auf der rechten Seite. 20. Speichern Sie die Änderungen ab und schließen Sie Paint. - 8/10 -
21. Gehen Sie zurück zum CSS-Dokument. Finden Sie dort den Eintrag #CenterAndSideContent, wie in Schritt 15 beschrieben. 22. Löschen Sie die Deklaration background:url( ). 23. Finden Sie das Element #InnerFooter und löschen Sie dort ebenso die Deklaration background:url( ). 24. Speichern Sie die CSS-Datei. 25. Überprüfen Sie das Resultat im Browser. - 9/10 -
26. Durch den fehlenden Rahmen sitzt das Logo nun etwas zu weit links auf der Seite. Dies wird nun korrigiert. 27. Machen Sie in der CSS-Datei den Eintrag #Vereinslogo ausfindig. Ändern Sie darin die Deklaration: left: 17px; auf left: 32px; 28. Speichern Sie die CSS-Datei und bewundern Sie das Resultat im Browser. - 10/10 -