Kantonsschule Enge Bildnerische Gestaltung / DTP Webdesign, Photoshop - Dreamweaver
Prüfung

Fotoshop - Dreamweaver
H3a, Prüfung, Freitag, 26. Nov. 2004

Die Prüfung besteht im Entwerfen und Anlegen einer Website mit einer einzelnen HTML-Datei.
Die Webseite wird entworfen im Fotoshop und die einzelnen Bildteile werden für den Dreamweaver exportiert und hier in einem Tabellenlayout verwendet.

Vorbereitung
(Windows Explorer)
Site definieren
(Dreamweaver)

  1. Lege in deinem Stammverzeichnis H:/ ein Verzeichnis an mit dem Namen "webpruefung_vorname_nachname"
  2. Lege in diesem Verzeichnis ein weiteres an mit dem Namen "bilder"
  3. Starte den Dreamweaver und definiere eine neue Site (im Sitemanager) für dieses Verzeichnis (webpruefung_vorname_nachname), nenne die Site "webpruefung"
  4. Speichere eine Dreamweaverdatei in diesem Verzeichnis mit dem Namen "vorname_nachname.htm", dies ist die Prüfungsdatei.

Photoshop 1

 

 

Neue Datei

  • 1000 Pixel breit
  • 650 Pixel hoch
  • Auflösung 72 Pixel/Zoll

Photoshop 2

 

Ziehe Hilfslinien von oben auf:

  • 100, 400 Pixel

von links auf:

  • 200, 800 Pixel

Photoshop 3

 

Mache mit dem Spray (Pinsel, oben auf sprenkeln gestellt) oder mit dem Farbverlaufswerkzeug einen Farbverlauf von links oben nach rechts unten von einer dunklen Farbe zu weiss.

Photoshop 4

schreibe deinen Namen oder deine Initialen und benutze den Text als Logo, Position links oben im Bereich von etwa 200 x 100 Pixeln
Mache einen Schatten dazu (Ebenen - Effekte)

Photoshop 5 Mache ein rechteckiges, einfarbiges Feld (in einer neuen Ebene) in der Grösse einer möglichen Navigation am linken Rand unterhalb des Logos (200 Pixel breit x 300 Pixel hoch)
schreibe mind. einen Link (z.B. Bilder) über dieses Feld als Button und wähle eine sinnvolle Schriftgrösse, so dass etwa 5 - 8 Links (Buttons) untereinander Platz hätten

Photoshop 6

  1. Fotoshopdatei speichern als "vorlage-vorname-nachname.psd" (in den Ordner Bilder der Prüfungswebsite)
  2. Mit dem Rechteckauswahlwerkzeug Logobereich markieren
  3. Datei - freistellen
  4. für Web speichern als logo-1.jpg (in den Bilderordner der Prüfungssite!!!)
  5. Schriftfarbe des Logo ändern
  6. für Web speichern als logo-2.jpg
  7. im Protokoll soviel Schritte zurück bis die ganze Datei wieder sichtbar ist.
  8. nacheinander die weiteren 5 Bereiche markieren, jeweils freistellen und für Web speichern (Dazwischen immer wieder mit dem Protokoll zur ganzen Datei zurückgehen)
    Die einzelnen Bereiche sollen folgende Namen haben:
    logo-1, logo-2.jpg, jpg, oben-mitte.jpg, oben-rechts.jpg, navigation_1.jpg, mitte.jpg, mitte-rechts.jpg, unten-links.jpg, unten-mitte.jpg, unten-rechts.jpg

Dreamweaver 1

wechsle zum Dreamweaver und öffne die Dreamweaverdatei

Dreamweaver 2

Seiteneigenschaften bestimmen

  1. Modifizieren - Seiteneigenschaften
  2. Seitentitel (z.B. Begrüssung) (erscheint in der blauen Browserleiste)
  3. Seitenränder oben und links auf 0 stellen

Dreamweaver 4

  1. Tabelle einfügen (Zeilen und Spalten wie im Layout vorgesehen)
  2. Zellauffüllung 0 und Zellenabstand 0
  3. 1000 Pixel breit
  4. Rahmen 0

 

Dreamweaver 5

  1. Zellenmasse nach den einzufügenden Bildgrössen bestimmen
  2. in allen Zellen Ausrichtung auf links und oben bestimmen
  3. nun werden alle zerschnittenen Teile des Layouts in die entsprechenden Zellen eingefügt:
    logo-1, jpg, jpg, oben-mitte.jpg, oben-rechts.jpg, mitte-links.jpg, mitte.jpg, mitte-rechts.jpg, unten-links.jpg, unten-mitte.jpg, unten-rechts.jpg

Dreamweaver 6

Rollover bestimmen

  1. Logo anklicken und im Eigenschaftsfenser Link angeben (Hyperlink): http://www.ken.ch
  2. eindeutigen Bildnamen geben im Eigenschaftsfenster links oben
  3. Verhaltensfenster öffnen
  4. auf + im Verhaltensfenster
  5. Bild austauschen wählen
  6. Quelle einstellen auf: logo-2.jpg
  7. auf dem Navigationsbild einen Hotspot über dem Link erstellen (blaues Rechteck im Eigenschftsfester)
  8. Hyperlink auf die Prüfungsdatei: vorname_nachname.htm

Website testen (F12)

Nun alles speichern
Das ganze Websiteverzeichnis der Prüfung zippen und in den Ordner Transfer:/leimbach/H3a/pruefung/... kopieren.
v.G.