Website: Make-up Studio Teresa - BWZ Rapperswil-Jona

Website: Make-up Studio Teresa
Suzana Dubravac, Marina Kuster
2009
BWZ Rapperswil
Zürcherstrasse 1
8640 Rapperswil-Jona

Inhaltsverzeichnis
Inhaltsverzeichnis .................................................................................................................... 2
Projektvorstellung .................................................................................................................... 3
Wozu diese Site und die Idee dahinter ................................................................................. 3
Teammitglieder ......................................................................................................................... 3
Mitwirkende Personen ............................................................................................................. 3
Pagedesign ............................................................................................................................... 4
Seitenaufteilung (Layout)........................................................................................................ 4
Schriftart ................................................................................................................................. 4
Schriftgrösse .......................................................................................................................... 4
Verwendete Farben ................................................................................................................ 5
Bilder ...................................................................................................................................... 5
Beispiele: ................................................................................................................................ 5
Ebenen ................................................................................................................................... 5
Ebenen ................................................................................................................................... 6
Tabelle ................................................................................................................................... 7
CSS ........................................................................................................................................ 7
Seitenstruktur ........................................................................................................................... 8
Sitemap .................................................................................................................................. 8
Anzahlt Seiten ........................................................................................................................ 8
Hierarchie Navigation ............................................................................................................. 8
Meta-Tags .............................................................................................................................. 9
Eingesetzte Techniken ........................................................................................................... 10
Software ............................................................................................................................... 10
Hosting .................................................................................................................................... 10
Account ................................................................................................................................ 10
Provider ................................................................................................................................ 10
Verzeichnisstruktur ............................................................................................................... 11
Review ..................................................................................................................................... 12
Was ist gut gelaufen ............................................................................................................. 12
Was musste geändert werden .............................................................................................. 12
Wo lagen die Probleme ........................................................................................................ 12
Diverses .................................................................................................................................. 12
Vertrag ................................................................................................................................. 12
Wie wird die Site weiter bearbeitet und aufs Internet gestellt .............................................. 12
Marina Kuster, Suzana Dubravac Seite 2 von 12

Projektvorstellung
Wozu diese Site und die Idee dahinter
Diese Site haben wir für Frau Dubravac Teresa erstellt. Die Site soll Werbung darstellen,
soll über das Make-up Studio informieren und neue Kunden anziehen.
Teammitglieder
Name:
Klasse:
Arbeitgeber:
E-Mail:
Suzana Dubravac
KB3
Otto Hofstetter AG
dsusi@hotmail.com
Name:
Klasse:
Arbeitgeber:
E-Mail:
Marina Kuster
KE3a
BR Bauhandel AG, Richner
marina.kuster@bluewin.ch
Mitwirkende Personen
Inhaberin des
Make-up Studios:
Lehrpersonen:
Teresa Dubravac
Pius Senn
Web Publishing
Foto
Markus auf der Maur
Projekt Management
Marina Kuster, Suzana Dubravac Seite 3 von 12

Pagedesign
Seitenaufteilung (Layout)
Wir haben die Seitenaufteilung so vorgenommen, damit man eine gute Übersicht über
die Website hat und sie darum auch dem meistverbreiteten Layout im World Wide Web
angepasst.
Damit die Website bei jedem Internetanbieter richtig dargestellt wird, beträgt die Gesamtbreite
960 Pixel und die Gesamthöhe 550 Pixel.
Auf der linken Seite befindet sich die vertikale Spry-Menüliste, in der wir auf die Dienstleistungen
des Make-up Studios hinweisen.
Daten die unabhängig von den Angeboten sind, sind am oberen Seitenrand verlinkt.
Home, um mit einem Klick wieder auf die Startseite zurück zu gelangen, Porträt und
Kontakt, um mehr über das Studio und die Inhaberin zu erfahren.
In der oberen rechten Ecke, befindet sich auf jeder Seite das selbstentworfene Logo
von Suzana Dubravac. Das Logo ist eine Eigenkreation und wurde im Word und Fireworks
gestaltet.
Schriftart
Um der Seite eine gewisse Leichtigkeit zu verleihen, haben wir uns für eine geschwungene
Schrift entschieden, die aber trotzdem noch gut leserlich ist. Tempus Sans ITC
war unserer Meinung nach die geeignetste Schriftart dafür. Die Schriftart haben wir auf
der ganzen Website beibehalten, damit es einheitlicher aussieht und für keine Verwirrung
sorgt. Uns war es wichtig, aufzufallen und Schwung in die Website zu bringen. Es
sollte keine Website mit einer ganz normalen Arial Schrift sein, sondern etwas Besonderes.
Die Schriftart ist einer der wichtigsten Elemente einer Website.
Schriftgrösse
Da alleine durch die Schriftart noch keine Struktur in einen Text gebracht werden kann,
müssen die Schriftgrössen variieren. Den Haupttitel, derjenige der auch auf dem Button
steht, haben wir mit der Schriftgrösse 30 Pixel am stärksten hervorgehoben. Die Untertitel,
die eine genauere Beschreibung der Textabschnitte zeigen, ist um 10 Pixel kleiner
nämlich 20 Pixel. Die restlichen Textpassagen sind mit der Schriftgrösse 18 Pixel noch
etwas kleiner. Bei allen drei Schriftgrössen haben wir darauf geachtet, dass sie nicht zu
auffällig sind und auch nicht zu klein auf dem Bildschirm erscheinen. Das Wichtigste ist
es, dass die Schrift immer noch leserlich und angenehm für die Leser ist.
Marina Kuster, Suzana Dubravac Seite 4 von 12

Verwendete Farben
Im Make-up Studio Teresa gehören Frauen wie auch Männer zu den täglichen Kunden.
Deshalb wollten wir die Website nicht zu feminin und natürlich auch nicht zu maskulin
gestalten. Aus diesem Grund wollten wir die Farben Pink und Blau nicht verwenden und
entschieden uns für den Mittelpunkt Violett.
Die Hintergrundfarbe ist in einem gemusterten Lila gestaltet um eine Lebendigkeit in die
Website zu bringen. Das Blumenmuster am oberen Seitenrand ist mit einem dunkleren
Violett hervorgehoben. Die grosszügigen Button sind in einem dunklen Violett dargestellt
und die Hyperlinks am oberen Seitenrand in einem etwas hellerem Violett. Die
Schriftfarben haben wir ebenfalls je nach Grösse um einen Ton verändert. Durch die
sorgfältige Planung der Farben ist eine gute Leserlichkeit garantiert.
Bilder
Damit sich die zukünftigen Kunden von Teresa Dubravac ein Bild des Studios machen
können, haben wir Bilder des Studios mit in die Website eingebunden. Es sind Bilder,
die die Kunden anziehen sollen um einen Termin zu vereinbaren. Es soll zeigen, dass
sie gut für Ihre Kunden sorgt und die Website auch kein Fake ist.
Auch Fotos der verschiedenen Angebote mit vorher- und nachher Vergleichen von Nagelmodellierungen
und Make-ups sind bei der richtigen Rubrik untergebracht. Selbstverständlich
sind die Fotos nur mit Einwilligung der Kunden auf der Website veröffentlicht
worden. Im Moment sind nicht viele Bilder auf der Seite, das wird sich aber mit der
Zeit ändern.
Beispiele:
Marina Kuster, Suzana Dubravac Seite 5 von 12

Ebenen
header
sidebar
main containt
footer
= container: 960 x 550 Pixel (Ganze Fläche unter den einzelnen Ebenen)
= header: 960 x 100 Pixel
= sidebar: 200 x 450 Pixel
= footer: 960 x 30 Pixel
= main containt: 740 x 450 Pixel
Marina Kuster, Suzana Dubravac Seite 6 von 12

Tabelle
Die Links am oberen Seitenrand (header) haben wir mit einer Tabelle erstellt. Zuerst
wollten wir ebenfalls eine Spry-Menüliste erstellen. Es wurde für uns aber zu kompliziert,
deshalb haben wir uns für eine Tabelle mit verlinkten Wörtern entschieden.
CSS
Ein Bild, wie die CSS Regel aufgeteilt sind:
das sind die CSS-Regeln
für die Navigation
Marina Kuster, Suzana Dubravac Seite 7 von 12

Seitenstruktur
Sitemap
Anzahlt Seiten
Es sind insgesamt 18 Webseiten.
Hierarchie Navigation
Die Angebote des Make-up Studios Teresa sind auf der linken Seite der vertikalen
Spry-Menüliste aufgelistet. Da in diesem Geschäft alle Angebote die gleiche Priorität
haben, gibt es keine bestimmte Hierarchie der Navigation. Nur der Button „Studio“
übernimmt eine führende Position der Navigation, weil die darunter aufgeführten Dienstleistungen
im Studio ausgeführt werden. Wir haben versucht die einzelnen Produkte
und Dienstleistungen klar einzuteilen. Das Studio bietet viele Möglichkeiten, Produkte
und Dienstleistungen an, so konnten wir unsere Navigation gut füllen.
Marina Kuster, Suzana Dubravac Seite 8 von 12

Meta-Tags
Die Meta-Tags stehen im Kopfbereich eines HTML-Dokuments, der wird gennant.
Das ist ein sogenanntes -Element. Die Meta-Tags werden beim Abrufen
der Website an den Browser geschickt, aber nicht selbst angezeigt. Diese Meta-Tags
sind nur im Quellcode der Seite sichtbar.
Die Meta-Tags haben wir auf dieser Website erstellt: www.homepagebuttons.de/tools/meta-tag-generator.html.
Dann haben wir die Tags in unsere Vorlage,
dort in die CSS-Regel hineinkopiert. (siehe unten)
Marina Kuster, Suzana Dubravac Seite 9 von 12

Eingesetzte Techniken
Software
Als HTML-Editor haben wir das Programm Dreamweaver CS3 von Adobe Systems
verwendet. Die Firma Adobe Systems hat unserer Schule mehrere Lizenzen für den
Dreamweaver CS3 kostenlos zur Verfügung gestellt.
Um einzelne Bildsegmente in unsere Website einzubinden und eigene Bilder wie Logos
zu kreieren, haben wir zusätzlich das Programm Fireworks zur Bildbearbeitung verwendet.
Zur Optimierung unserer Fotos auf der Website, verwendeten wir zusätzlich das
Bildbearbeitungsprogramm Picasa.
Hosting
Account
FTP-Server
Internetadresse
Benutzername
Passwort
www.bwzrapperswil.ch
www.bwzrapperswil.ch/2009/studio_teresa/
befindet sich auf unserem FTP-Zugangsblatt in einem Ordner
befindet sich auf unserem FTP-Zugangsblatt in einem Ordner
Provider
Der Provider unserer Website Make-up Studio Teresa ist das BWZ Rapperswil.
Marina Kuster, Suzana Dubravac Seite 10 von 12

Verzeichnisstruktur
wir haben alles was wir für die Homepage
benötigten in den Ordner
„Make-up Studio Teresa“ kopiert. Da
wir alles in diesen Ordner gelegt
haben, hatten wir eine gute Übersicht
über unsere Dateien und Bilder.
So haben wir auch immer alles
schnell und gut gefunden!
hier ist unser Ordner für die Bilder
das ist unsere Vorlage für alle
HTML-Seiten, die wir erstellen
das sind unsere HTML-Seiten
Marina Kuster, Suzana Dubravac Seite 11 von 12

Review
Was ist gut gelaufen
Die ganze Vorbereitung auf die Website ist uns gut gelungen. Das Layout haben wir
von Anfang an aufgezeichnet und gut durchstudiert. Ebenfalls die Bildbeschaffung und
Bildbearbeitung ist uns sehr gut gelungen. Auch das Eingeben der Texte und Bilder
brachte uns keine Probleme.
Mit dem Erstellen der Dokumentation über das Make-up Studio Teresa ist gut gelaufen.
Nicht zuletzt darum, dass wir zwei Jahre im Information Kommunikation und Administrations-Kurs
waren. Dazu kommt noch ein Jahr bei Herr Heimo Fannenböck im SIZ-Kurs,
den wir am Ende des Kurses mit einem Diplom abgeschlossen haben.
Was musste geändert werden
Einige Dinge mussten wir bei mehrmaligem Ausprobieren aber doch noch ändern. Die
Grösse des Logos mussten wir abändern, da es nicht mehr ganz in den header passte
sondern in den maincontaint ragte. Die Schriftart, Schriftgrösse und Schriftfarbe der Titel,
die die einzelnen Abschnitte näher beschrieben, haben wir zuerst manuell eingegeben,
anstatt sie in der Vorlage zu speichern.
Wo lagen die Probleme
Gegen den Schluss des Zeitraumes des Projektes, kamen wir immer mehr in Zeitdruck.
Da Frau Dubravac immer sehr beschäftigt war, hatte sie fast keine Zeit uns textliche
Informationen, wie auch Bildmaterialien zukommen zu lassen. Zudem wusste sie selbst
nicht genau, was sie eigentlich auf ihrer Website wollte. Sei es Text, Bilder oder das
gesamte Layout.
Diverses
Vertrag
Wir haben durch die BWZ Rapperswil einen Vertrag mit Adobe Systems abgeschlossen.
In diesem Vertrag haben wir uns verpflichtet, das uns zur Verfügung gestellte Programm
Dreamweaver CS3 nicht zu kopieren, oder für verbotene Zwecke einzusetzen.
Auf diesem Vertrag waren unsere Personalien, wie die Seriennummer des Programms,
um es zu installieren.
Wie wird die Site weiter bearbeitet und wird sie aufs Internet gestellt
Dies wird sicher geschehen, nur ist noch nicht klar, wer die Site weiter bearbeiten wird.
Marina Kuster, Suzana Dubravac Seite 12 von 12