headermask image

Slicen in Photoshop

Slicen ist das zerschneiden einer Grafik für den späteren Einsatz als Webseite mit Buttons oder einzelnen Elementen
Slice

kann separat gespeichert werden
eigene Optimierungseinstellungen
separate Optionen, Funktionen, Datenformate

Slicename > Dateibezeichnung

Button (normal, over, gedrückt)
Referenzen

Spendiere mir einen Kaffee und halte mich weiter wach ! Danke für die Spende.

Aufbau einer Flashpräsentation

Elemente die immer sichtbar sind

Hintergrund
Verläufe
Rahmen (abgerundete Ecken)
dezentes Foto oder Muster
Logo, Hinweise, Impressum, Copyright
Schaltflächen, Effekte, Audio
Elemente und Inhalte, die in Zusammenhang mit ausgewählten Themen gezeigt werden
Texte, Bilder, Videos, Audio, Schaltflächen

Rahmen, Flächen, Elemente

Bühnenfarbe und Größe
alle Elemente im Flashfilm als Movieclip anlegen
Wiederverwendbarkeit
Zeitleiste des Movieclips nutzen (Steuerung, Animation)
Effekte zuweisen / Filter benutzen

Spendiere mir einen Kaffee und halte mich weiter [...]

Elemente in der Bibliothek (Vorlagen in DW / Musterseiten)

Hilfsmittel des Dreamweaver zur effektiveren Arbeit um wiederholende Inhalte bzw. Elemente, die in allen Seiten auftauchen effizent zu verwalten.
Abhilfe: Bibliothek

Element wird einmal angelegt
mehrfach nutzen
bei änderung werden alle eingesetzten Elemente aktualisiert

In Dreamweaver

im Dokument den Inhalt markieren
Elemente > Bibliothek (aufgeklapptes Buchsymbol)
markierten Inhalt in Bibliothek ziehen
Übernahme in Bibliothek / Namen zuweisen

Wenn ein Inhalt in der Bibliothek übernommen wurde

Inhalt [...]

Verlinkungen in Webseiten mittels Dreamweaver

Webseiten werden einzeln erstellt, wodurch eine inhaltliche Trennung erfolgt.

Seiten miteinander verbinden, sodass sie aufgerufen werden können
Struktur aufzeichnen
Seite / Inhalt muß vorhanden sein
Element anlegen, was angeklickt werden kann und den neuen Inhalt im Browser lädt
<a href=”http://24find.de”>hier klicken</a>

Varianten in Dreamweaver

1. Struktur der Verlinkung - Schema
Ansicht > Dateifenster > Sitemap
grafisches Verlinken
Link im Dokument übernimmt dann Dreamweaver

2. Site Navigation [...]

Flashinhalte in Dreamweaver

Flashinhalt einfügen

Einfügen > Symbolleiste > Menü
Einfügen > Menü

Flashfilm in SWF Form

Dialogfenster > Laufwerk/Ordner > Datei auswählen
nach dem einfügen wird ein grauer Platzhalter angezeigt, der durch das Flashsymbol gekennzeichnet ist
Eigenschaftenleiste lässt verschiedene Einstellungen zu ( Schleife, Autom.Start)

Einfügen eines Flashfilmes per Bedienfeld Elemente

Bedienfeld Elemente öffnen
Kategorie Flash auswählen
Flashfilm auswählen
Einfügen

Der Unterschied zwischen Flashfilm und Flashvideo

Flashfilm arbeitet Filmorientiert. Am Ende [...]

Bedienfeld Elemente in Dreamweaver

das Bedienfeld Elemente dient ausschliesslich zur Organisation und Verwaltung

Element Bilder
alle Bilder einer Seite oder eines Projekts

Element Favoriten
zusätzliches Organisationsprinzip
Ordner können neu definiert werden (Favoritenkoffer)
Bildverweis eintragen
dient zum effizenteren Arbeiten bei großen Projekten mit vielen Bildern.

Anwendung:

Elemente > Favoriten
- Koffersymbol im Bedienfeld anklicken
- Bezeichnung zuweisen
Elemente > Site
- Bild aus Liste > rechte Maustaste > zu Favoriten hinzufügen
- oder Optionsmenue [...]

Adobe Dreamweaver CS3

Programmphilosophie:

Layoutwerkzeug zur Erzeugung von Webseiten -> HTML
visuelles Arbeiten
Schreiben, Kopieren, Einfügen, Verschieben
Formatierung
Einfügen von Elemente
WYSIWYG - Vorschau ( what you see is what you get - was sie sehen ist was sie bekommen )
99% Anzeige Kompatibilität mit Browsern

Zusammen”bauen” von Webseiten

eingebettet werden können: Grafiken, Dateien, Videos, Flashfilme

es werden weiterhin immer mehr Funktionen eingebaut, die auch Elemente erzeugen oder [...]

Elemente eines Formulars in HTML

<input….> = Erfassen der Daten des Benutzers
<input type=”…”> = das Aussehen und Handhabung beeinflussbar
<input type=”text”> = Texteingabefeld, Feld zum erfassen von Inhalten
<input type=”text” name=”vorname”> = Bezeichnung zur Auswertung,
<input type=”text” size=”Zahlenwert”> = Breite des Formularfeldes, nicht Pixelzahl
<input type=”text” maxlength=”Zahlenwert”> = mögliche Anzahl von Zeichen in dem Formularfeld
<input type=”text” value=”ein Anfangswert”> = Vorgabewert im Formular, eine [...]

Formulare erstellen in HTML

Design im HTML festlegen > Formular im HTML nicht auswertbar (mit HTML)
Auswertung erfolgt mit Scriptsprache (Javascript, PHP, oä.)

Aufgabe: Interaktion mit Betrachter > Werte eintragen, Werte auswählen.

einzige Möglichkeit nur mit HTML ist die Übergabe an ein Emailprogramm
HTML Tags die das Aussehen des Formulares beeinflussen

Aufbau eines Formulars

Formular wird geöffnet und wieder geschlossen
<form>Formular in dem die Angaben und [...]