Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Praktikumsbericht Olga Syasina Sommersemester 2007 Projektseminar Seminarleiter: Herr Moser.

Ähnliche Präsentationen


Präsentation zum Thema: "Praktikumsbericht Olga Syasina Sommersemester 2007 Projektseminar Seminarleiter: Herr Moser."—  Präsentation transkript:

1 Praktikumsbericht Olga Syasina Sommersemester 2007 Projektseminar Seminarleiter: Herr Moser

2 Praktikumsbericht 2 Wo, wann, was? bei Engling IT Beratung - Planung - Support Hausackerstr Essen vom bis zum im Bereich Webdesign Programmierung in XHTML und CSS Programmierung in PHP und Anbindung der Seite an MySQL-Datenbank Photo- und Grafikbearbeitung mit Photoshop

3 Praktikumsbericht 3 Erste Woche Idee: Theaterportal für Schüler mit Suchemöglichkeiten Umsetzung: mit Server Verbindung herstellen Bilder suchen Inspiration suchen Testentwürfe machen XHTML von CSS trennen

4 Praktikumsbericht 4 Endergebnis

5 Praktikumsbericht 5 XHTML XHTML 1.0 Strict

6 Praktikumsbericht 6 CSS body {padding:0 2% 0 2%; margin:0; font-size:medium; background-color:#E16464; font-family:Tahoma,Geneva,Arial;} p {margin:0; padding:0;} #ueberschrift {padding:0; margin:0;} #links {width:20%; float:left; font-size:100%; overflow:hidden;} #links ul {margin:1em 0 0 0; padding:0;} #links li {background-image:url(images/liste.gif); background-repeat:no-repeat; padding: px; background-color:#E6E6E6; margin:1px; width: 9em;} #links a:link {color:black; text-decoration:none;} #links a:visited {color: maroon; text-decoration:none;} #links a:focus {color:red; background-color:white;} #links a:hover {color:red; text-decoration:none; background-color:white; } #links a:active {color:red; background-color:white;}

7 Praktikumsbericht 7 CSS Fortsetzung #rechts {float:right; width:80%; overflow:hidden;}.eintrag {background-color:maroon; color:#E6E6E6; padding:0; margin:0 0 2% 0;}.eintrag td {padding: 0.5em;} td.bild {vertical-align:top;}.eintrag p.bold{font-weight:bold;}.eintrag a:link {color:#E6E6E6; text-decoration:underline;}.eintrag a:visited {color: #E6E6E6; text-decoration:underline;}.eintrag a:focus {color:red; background-color:white;}.eintrag a:hover {color:red; text-decoration:none; background-color:white;}.eintrag a:active {color:red; background-color:white;} Sowohl XHTML-Seiten als auch CSS-Datei sind valide

8 Praktikumsbericht 8 Zweite Woche Unterseiten für index- Seite mit XHTML: klassenspiel.html links.html kontakt.html impressum.html faq.html agbs.html gaestebuch.html (durch den externen Link) Unterseiten mit PHP: index.php anmelden.php login.php Geplant: ausblick.php reuckblick.php detailsuche.php fotogalerie.php forum.php

9 Praktikumsbericht 9 Dritte (die schönste!) Woche Idee: automatisch-generierte Homepage-Seite für jedes Klassenspiel Umsetzung: Eine flexible XHTML- Struktur erstellen Mehrere unterschiedliche CSS-Designs für die immer gleich bleibende HTML-Struktur entwerfen

10 Praktikumsbericht 10 Bildersuche und Bilderbearbeitung Bildersuche Bilderbearbeitung Runde Kanten werden mit Hintergrundbildern gemacht Hintergrundbilder sind nicht skalierbar PNG speichert Verläufe (IE-Problem) JPG speichert Transparenz nur mit dem Hilntergrund GIF speichert Transparenz ohne Verlauf

11 Praktikumsbericht 11

12 Praktikumsbericht 12 Schrift und alternative Schriftangabe Sichere Web-Schriften sind folgende: Arial Times New Roman Georgia Trebuchet MC Verdana Comic Sans Courier New Vera Sans Alternative Schrift angeben: font-family: Verdana, sans-serif; font-family: Verdana, Arial, Helvetica; Schriftgröße in Prozent oder em angeben: font-size: 0.95em; font-size: 90%;

13 Praktikumsbericht 13 Bugs und Tricks Box-Modell-Fehler im IE - falsche Berechnung von width (Breite), padding (Innenabstand), border-width (Rahmenstärke), und margin (Außenabstand).

14 Praktikumsbericht 14 Bugs und Tricks * {margin:0; padding:0;} body {background-image:url(images/theater.jpg); background-position: 90px 0;} #inhalt {min-height:50px; height:auto !important; height: 50px;} hr {width:75%; height:1px; color:red; background-color:red; border:0; text-align:center; margin: 0.5em auto 0.5em auto; clear:both;}

15 Praktikumsbericht 15 Bugs und Tricks body {background: url('images/buddha.jpg') no-repeat top left fixed;} #vorankuendigung {background: transparent url('images/violett.gif') repeat; width: 75%; margin: 0 auto;} hr {display:none;} p {line-height:1.5em; letter-spacing:3px; font-variant:small-caps;}

16 Praktikumsbericht 16 Vierte Woche Arbeit an Kundenprojekten Bildbearbeitung Bilder komprimieren Bilder abschneiden Helligkeit oder Kontrast ändern Text hinzufügen im anderen Format speichern

17 Praktikumsbericht 17 Linkssammlung (CSS-Beschreibung) (CSS-Beispiele) (margin-padding-Problem) (CSS- Voreinstellungen in Browsern) (CSS-hr-Problem) (flexibles Layout) (Gästebuch per Link) (ähnliche Schrift-Suche)

18 Praktikumsbericht 18 Bücher und meine Webseiten Bücher: Bulletproof Web Design von Dan Cederholm Zen und die Kunst des CSS-Designs von Dave Shea und Molly E. Holzschlag Meine Webseiten: bzw

19 Praktikumsbericht 19 Danke für Ihre Aufmerksamkeit!


Herunterladen ppt "Praktikumsbericht Olga Syasina Sommersemester 2007 Projektseminar Seminarleiter: Herr Moser."

Ähnliche Präsentationen


Google-Anzeigen