Praktikumsbericht Olga Syasina Sommersemester 2007 Projektseminar Seminarleiter: Herr Moser.

Praktikumsbericht

Olga SyasinaSommersemester 2007ProjektseminarSeminarleiter: Herr Moser

30.05.2007 Praktikumsbericht 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


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


Endergebnis


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>


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;}


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


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


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


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


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%;


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).


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;}


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;}


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


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)


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


Danke für Ihre Aufmerksamkeit!

Praktikumsbericht Olga Syasina Sommersemester 2007 Projektseminar Seminarleiter: Herr Moser.

Documents

Transcript of Praktikumsbericht Olga Syasina Sommersemester 2007 Projektseminar Seminarleiter: Herr Moser.