KEN, DTP, 07/ Produktion

Transkript

1 KEN, DTP, 07/08 32 Produktion Siteverwaltung «Online» Siteverwaltung «Lokal» Sitestruktur Sämtliche Dateien einer (html, jpg, css), die am Ende der Produktion ins Internet gestellt werden, müssen in einem Ordner abgelegt werden (Stammordner). Ansonsten ist es möglich, dass die Verlinkung der Seiten nicht funktioniert. Terminologie Es ist wichtig, dass bei der Bennenung der Dateien nur internationale Zeichen verwendet werden. Die folgenden Regeln sind zu beachten: kurze, prägnante Begriffe alles Kleinbuchstaben (a,b,c,d, ) keine Sonderzeichen ($, &, %) keine Umlaute (ä, ö, ü) keine Abstände zwischen den Buchstaben Material Sonstige «nicht internetkonforme» Dateien (z.b. Word, Photoshop (.psd)) werden in einem separaten Ordner (Material) abgelegt.

2 KEN, DTP, 07/08 33 Entwurf Designentwurf in Photoshop Bild Bild Bild Einteilung des Layouts in einen Bild- und einen bereich Der «Bildbereich» wird in PS in einzelne Bilder zerlegt. Der bereich wird direkt in DW gelayoutet. Zerlegung der Bilder in Einzelbilder 4. Bilder speichern: Datei > Für Web und Geräte speichern Bilder können in verschiedenen Dateiformaten gespeicher t werden: Fotografien immer im Format JPEG speichern (voller Farbumfang) Grafiken immer im Format GIF speichern (256 Farben)

3 KEN, DTP, 07/08 34 Umsetzung Ansicht: Quellcode, Ansicht: Entwurf Umsetzung des Designentwurfs in Dreamweaver Neue Datei: Datei > Neu (Einfache Seite, HTML, Enwurfsansicht) Datei speichern: Datei > Speichern («index.html», in Stammordner) Seiteneigenschaften Seiteneigenschaften festlegen: Modifizieren > Seiteneigenschaften Seiteneigenschaften: Hintergrundfarbe, Hintergrundbild, Rand, Verknüpfungen (Linkfarben), Elemente (Tabellen, Bilder) einfügen Tabelle Bild Tabelle Bild 4. schreiben 4. Mit Cursor ins Dokument klicken und gewünschten schreiben

4 KEN, DTP, 07/08 35 Layout Damit die einzelnen Elemente einer Internetseite (, Bild) positioniert werden können, braucht es eine geeignete Tabellenstruktur. Um die nötigen Abstände zu erreichen, benötigen komplexe Layouts ineinander verschachtelte Tabellen. Spalte Zeile Zelle Tabelle D (1/3) Tabelle C (2/1) Tabelle E (1/1) Zellauffüllung Zellraum Rahmen Aufbau einer Tabelle Tabelle B (4/1) Tabelle A (2/2) Verschachtelung der Tabellen in Klammern: Anzahl (Zeilen / Spalten) Tabelle Tabelle einfügen: Einfügen > Tabelle Tabelle formatieren: Eigenschafteninspektor Tabellen immer numerisch über den Eigenschafteninspektor formatieren! Dialogfenster: «Tabelle» Eigenschaften: Grösse, Farbe, Ausrichtung Bilder In gewünschte Tabellenzelle klicken Bilder einfügen: Einfügen > Bild schreiben In gewünschte Tabellenzelle klicken und schreiben

5 KEN, DTP, 07/08 36 Verlinkung Unten sind die verschiedenen Verlinkungsarten beschrieben relativer Hyperlinkink: inerhalb einer Site (xyz.html) absoluter Hyperlink: auf externe Site (http//: Ankerpunkt: innerhalb einer Page (#xyz) Ankerpunkt: Benennen, Link auf Ankerpunkt 4. Image-Map: Link von Bildteil (xyz.html) Eigenschaften «Bild» Link: Imagemap 5.

6 KEN, DTP, 07/08 37 Neue CSS-Regeln erstellen Einfügemarke setzen: Mit dem Cursor in die Datei klicken Neue CSS-Regel definieren: > CSS-Stile > Neue CSS-Regel (z.bsp. «Klasse», Selektor:.titel) Stylesheet speichern unter: «name.css» im CSS-Ordner im Stammordner Dialogfeld: Neue CSS-Regel CSS-Stileigenschaften definieren CSS-Regel-Definition: im Dialogfeld «CSS-Regel-Definition» Stileigenschaften festlegen. Dialogfeld: CSS-Regel-Definition 4. Weitere CSS-Stileigenschaften definieren Mit rechter Maustaste ins Bedienfeld CSS-Stile klicken: «Neu» Lauftext, Tabelle, Bildlegende, Link, Klassenstile anwenden 4. Stil auf ein Wort anwenden: Wort auswählen 4. Stil auf einen Absatz anwenden: in den gewünschten Absatz klicken 4. Klassenstil anwenden: im Bedienfeld «CSS-Stile» (Modus «Alle») mit rechter Maustaste auf den Namen des gewünschten Stils klicken, und im Kontextmenü die Option «Anwenden» oder «Übernehmen» wählen. Bedienfeld: CSS-Stile

7 KEN, DTP, 07/08 38 Rollover Beim Rollover-Effekt ändert sich das Aussehens eines Bildes, wenn mit dem Cursor darübergefahren wird. Er wird vor allem im Navigationsbereich angewendet. Wenn die Rubrikenbegriffe der Navigation in einer bestimmten Schrift dargestellt werden sollen, muss die Verlinkung über eingefügte Bilder erfolgen. Die Designmöglichkeiten werden dadurch grösser. Zusätzlich können sogenannte Rollover- Effekte eingesetzt werden (vgl. CSS-Formatierung Selektor Typ: Erweitert). Zwei Rollover-Bilder herstellen: identische Breiten und Höhen, unterschiedliches Aussehen Photoshop ebenen mit zwei verschiedenen Farben (schwarz, weiss) Datei speichern: Datei > Für Web und Geräte speichern (logo_hover.jpg) ebene (Logo hover) ausblenden 4. Datei speichern: Datei > Für Web und Geräte speichern (logo_normal.jpg) ebene Ein- und Ausblenden Dreamweaver 5. In gewünschte Tabellenzelle klicken 6. Rolloverbilder einfügen: Einfügen > Grafikobjekte > Rollover-Bild Dialogfeld «Rollover-Bild einfügen»: Orignialbild und Rollover-Bild über «Durchsuchen» wählen Rollover-Effekt in Browser testen 7. Datei speichern und in Browser öffnen, mit Cursor über Bild «Logo» fahren.

8 KEN, DTP, 07/08 39 Vervielfältigung Wenn alle Designelemente definiert sind, kann die Seite vervielfältigt werden. Checkliste Layout (Tabellen) Bilder, Rolloverbilder (CSS-Formatierungen) Navigation (Verlinkung) Vorgehen Datei unter verschiedenen Namen speichern: Datei > Datei Speichern unter «eins.html», «zwei.html», «drei.html» Gespeicherte Dateien öffnen und Seiteninhalte verändern: Datei > Öffnen, Inhalt verändern Dateien speichern: Datei > Speichern Auf diese Vorgehensweise ist gewährleistet, dass alle Seiten der das gleiche Layout trotz unterschiedlicher Inhalte haben.