Praktikumsbericht Olga Syasina Sommersemester 2007 Projektseminar Seminarleiter: Herr Moser
Wo, wann, was? bei Engling IT Beratung - Planung - Support Hausackerstr. 76 45147 Essen www.engling-it.de vom 01.03.2007 bis zum 31.03.2007 im Bereich Webdesign Programmierung in XHTML und CSS Programmierung in PHP und Anbindung der Seite an MySQL-Datenbank Photo- und Grafikbearbeitung mit Photoshop 30.05.2007 Praktikumsbericht
Erste Woche Idee: Umsetzung: Theaterportal für Schüler mit Suchemöglichkeiten Umsetzung: mit Server Verbindung herstellen Bilder suchen Inspiration suchen Testentwürfe machen XHTML von CSS trennen 30.05.2007 Praktikumsbericht
Endergebnis 30.05.2007 Praktikumsbericht
XHTML XHTML 1.0 Strict <div id="ueberschrift"> <img src="images/ueberschrift_logo.jpg" alt="Ueberschrift" width="100%" /></div> <div id="links"><ul><li> <a href="index.html">---</a> </li></ul></div> <div id="rechts"> <p id="text"></p> <div class="eintrag"> <table><tr><td class="bild"> <img src="images/bild.jpg„ alt="Bild" /></td> <td><p class="bold"></p> <p>---</p></td></tr></table> </div></div> 30.05.2007 Praktikumsbericht
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:0 0 0 27px; 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;} 30.05.2007 Praktikumsbericht
CSS Fortsetzung Sowohl XHTML-Seiten als auch CSS-Datei sind valide #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; .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 30.05.2007 Praktikumsbericht
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 30.05.2007 Praktikumsbericht
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 30.05.2007 Praktikumsbericht
Bildersuche und Bilderbearbeitung www.istockphoto.com/index.php www.fotolia.de www.flickr.com 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 30.05.2007 Praktikumsbericht
30.05.2007 Praktikumsbericht
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%; 30.05.2007 Praktikumsbericht
Bugs und Tricks <?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> Box-Modell-Fehler im IE - falsche Berechnung von width (Breite), padding (Innenabstand), border-width (Rahmenstärke), und margin (Außenabstand). 30.05.2007 Praktikumsbericht
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;} 30.05.2007 Praktikumsbericht
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;} 30.05.2007 Praktikumsbericht
Vierte Woche Arbeit an Kundenprojekten Bildbearbeitung Bilder komprimieren Bilder abschneiden Helligkeit oder Kontrast ändern Text hinzufügen im anderen Format speichern www.swing-modelle.de 30.05.2007 Praktikumsbericht
Linkssammlung http://praktika.de http://www.praktikum-service.de http://www.css4you.de (CSS-Beschreibung) http://www.csszengarden.com/tr/deutsch (CSS-Beispiele) http://leftjustified.net/journal/2004/10/19/global-ws-reset/ (margin-padding-Problem) http://kronn.de/weblog/2004/10/30/css-reset/ (CSS-Voreinstellungen in Browsern) http://www.sovavsiti.cz/css/hr.html (CSS-hr-Problem) http://www.cssliquid.com/templates/ (flexibles Layout) http://www.multiguestbook.com/ (Gästebuch per Link) http://www.identifont.com/similar.html (ähnliche Schrift-Suche) http://www.4stats.de(Statistik) 30.05.2007 Praktikumsbericht
Bücher und meine Webseiten „Bulletproof Web Design“ von Dan Cederholm „Zen und die Kunst des CSS-Designs“ von Dave Shea und Molly E. Holzschlag Meine Webseiten: www.klassenspiele.info bzw. www.klassenspiele.info/vorschau http://www.klassenspiele.info/vorschau/auto-generiert/homepage_1.html http://www.klassenspiele.info/vorschau/auto-generiert/homepage_2.html http://www.klassenspiele.info/vorschau/auto-generiert/homepage_3.html http://www.klassenspiele.info/vorschau/auto-generiert/homepage_4.html http://www.klassenspiele.info/vorschau/auto-generiert/homepage_5.html http://www.klassenspiele.info/vorschau/auto-generiert/homepage_6.html http://www.klassenspiele.info/vorschau/auto-generiert/homepage_7.html 30.05.2007 Praktikumsbericht
Danke für Ihre Aufmerksamkeit! 30.05.2007 Praktikumsbericht