Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
1
Praktikumsbericht Olga Syasina Sommersemester 2007 Projektseminar
Seminarleiter: Herr Moser
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 Praktikumsbericht
3
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 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: 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;} Praktikumsbericht
7
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 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 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
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
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%; Praktikumsbericht
13
Bugs und Tricks <?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" 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 Praktikumsbericht
17
Linkssammlung http://praktika.de http://www.praktikum-service.de
(CSS-Beschreibung) (CSS-Beispiele) (margin-padding-Problem) (CSS-Voreinstellungen in Browsern) (CSS-hr-Problem) (flexibles Layout) (Gästebuch per Link) (ähnliche Schrift-Suche) Praktikumsbericht
18
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: bzw. Praktikumsbericht
19
Danke für Ihre Aufmerksamkeit!
Praktikumsbericht
Ähnliche Präsentationen
