1 / 19

Praktikumsbericht

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

waite
Download Presentation

Praktikumsbericht

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Praktikumsbericht Olga Syasina Sommersemester 2007 Projektseminar Seminarleiter: Herr Moser

  2. 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 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 Praktikumsbericht

  4. Endergebnis Praktikumsbericht

  5. 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> 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: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;} 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 Praktikumsbericht

  8. 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 Zweite Woche 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 Praktikumsbericht

  10. Bildersuche und Bilderbearbeitung • Bildersuche • 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 Praktikumsbericht

  11. Praktikumsbericht

  12. 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%; Schrift und alternative Schriftangabe Praktikumsbericht

  13. 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). 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;} 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;} Praktikumsbericht

  16. 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 Praktikumsbericht

  17. 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) 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: • 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 Praktikumsbericht

  19. Danke für Ihre Aufmerksamkeit! Praktikumsbericht

More Related