Dreamweaver - ein Workshop

Homepage-Gestaltung: ein Workshop
(19.2.- 21.2.2001)
Workshop in Zell am See

Verwendete Programme: Macromedia Dreamweaver & HOT POTATOES

Kritische Analyse von Homepages: LAYOUT - Ableitung von Konsequenzen für eigene Homepage
Struktur von HTML-Seiten: Quellstruktur
Grundüberlegungen - vor dem eigentlichen Start
Dreamweaver - einfache Seitengestaltung
Anspruchvolle Seitengestaltung: Tabellen + FRAMES
Links von einem Frame zum anderen + LINKS ins WWW hinaus...

Einbindung von Real Player, von fertigen Java-Scripts; Java-Applets, Buttons, Counter, Gästebuch, Gifanimationen
Meta-Names einfügen - Definition /Sinn?
Vorstellung v. brauchbaren Utlities: mit meinem PC
Wo kann ich meine Homepage speichern (GRATIS auch im WEB)
Wie übertrage ich meine Homepage ins WEB
Wie werbe ich für meine Homepage?
Zugriffsanalyse - wie kann ich feststellen, woher meine Besucher kommen, wann sie kommen?
Präsentation

Die Übungen & die Aufgaben

Adressen - Analyse

Kriterien für Screen-Design:
Schriftarten, Hintergrund, Seitengestaltung-Aufteilung, Navigation, Struktur,
besondere Elemente, Links-Arten - autodidaktische Urteile

Welche der folgenden Seiten ist am professionellsten, was fällt auf (Reihung anfertigen)?

http://www.steinzeichen.de

http://www.sibelnefa.de/

http://www.t-online.de/

http://www.kracher.net

http://www.poeckl.com

http://www.pc-prof.net

Ziel: Beurteilungskriterien verbalisieren - Vgl. mit anderen Medien - Regeln ableiten

Quellcode - Erkennen von Grundsätzen

Analyse des Quellcodes einer beliebigen Seite, danach erstellen wir vorerst ohne Dreamweaver eine Seite einfache und erkennen das Grundgerüst
1. Anlaufstelle im Internet ist Stefan Münz: http://www.teamone.de/selfhtml/
Gleiche Seite erstellen wir mit Word und speichern diese im HTML-Format ab
Zuletzt gestalten wir dies Seite mit Dreamweaver

Struktur einer HTML-Seite

<html>
<head>
<title>Aller Anfang ist schwer!</title>
</head>
<body>
Das soll also die 1. Seite sein - der Quellcode schaut wohl "spanisch" aus!
</body>
</html>

Ziel: Erkennen von Unterschieden im Quellcode

Meine Homepage - meine Motivitation, Ziele und Erfahrungen

Url: http://members.yline.com/~pcko/

Inhalt für Workshop - mein Vorschlag:

Gestaltung von 5- 10 Seiten - z.B. Vorstellung (inhaltl. Logik wünschenswert): Entwurf auf einem Blatt Papier Erkennen Sie meine Fremdanbieter - jene Seiten, welche auf einem anderen Server liegen?
Suchen Sie jene URLs, wo man fremde Dienstleistungen in Anspruch nehmen kann!

Die Lösung sollten Sie finden!

Einfache Seitengestaltung mit Dreamweaver

Vorbemerkung:

Es gibt auch andere HTML-Editoren, z.B.:

"MS-Frontpage 2000" - EDU-Select für Lehrer
"Adobe GoLive 5.0" (http://www.adobe.de/products/golive/main.html)
"Macomedia Dreamweaver 4.0" (http://www.macromedia.com/software/studio/ )

Wir arbeiten heute mit Dreamweaver von Macromedia, dem professionellsten Programm - aber gewöhnungsbedürftige Bedienung..

Dreamwever ist ein mächtiges Programm, und innerhalb von 2 Tagen kann man nicht alle Möglichkeiten realisieren.

Sitegestaltung mit Dreamweaver - der Start

Erstellung eines Webs - das Verzeichnis auf der Hard-Disk

Schwerpunkte der 1. Übungsphase: Verzeichnis festlegen, wo alle Files gespeichert werden.

Meiner Meinung nach die wichtigsten Features für die Übungen:

Sitemanger
Objektpalette
Eigenschaftsinspektor
Frames
Hilfe mit F1

Zwecks Übersichtlichkeit zunächst nur Objektpalette und Eigenschaftsinspektor einblenden!-Namen der HTM-Files

1. Übungsphase

Text - Formatierung /Typografie (Serifenschrift, Groteskschrif): Eigenschaftsinspektor
Vergleichen Sie Fließtext geschrieben mit - Times, Garamond, Georgia mit Fließtext Arial, Verdana, Helvetica
Bild (*GIF, *.JPG) - Objektpalette - Rollover-Bild / HOT Spots definieren (Bild einfügen u. Möglichkeiten testen)
Hintergrund (*.GIF oder *.JPG oder *.PNG)
Ton (*.WAV, *.MID): Download einer Anleitung oder Einfügen > Medien > Plug-In // Objektpalette: Spezial - Plugin einfügen
Links: _self, _top, _blank, _parent, _standard (Unterschiede erkennen)
Seiteneigenschaften - rechte Maustaste
Rolle der Pipette bei Farbauswahl - so leicht realisierbar gleichen Farbton zu finden
E-MAIL-Adresse - Objektpalette
Textmarke einfügen: Objektpalette - unsichtbare Elemente
Datei zum Downloaden einbinden - mit Winzip packen

Anspruchsvolle Seitengestaltung

2. Übungsphase:

Das Element	Die Verwendung
Tabelle	für Listen, für Spalten-Text, Rahmen für Bilder
Frame	Navigation - klare Struktur

Tabellen:
-Formatierung - Möglichkeiten: Objektpalette

Flash-Schaltflächen:
-Flash-Buttons erzeugen: einfügen-Objektpalette

Frames: Fenster - Frames > einfügen
-Theorie für Erstellung, Seitenzuordnung
-Framerahmen ein- und ausblenden, Breite definieren
-Link von einem Frame zum anderen
-LINK auch nach außen realisieren in WWW
-LINK mit Verwendung von Ankerpunkten

Wichtig: Wenn man Änderungen bei Frameset vornimmt - betrifft z.B. Größenänderung des Frames!
> Datei - Framset speichern!

Vorher im Frameinspektor Frame-Set markieren durch Anklicken des Randes an oberer Kante z.B.!
Attribute für Framseiten legt man fest, indem man im Frameinspektor in den entsprechenden Frame klickt!
> Datei - Frame speichern / alle Frame speichern

Naviagation:
-Navigationsleiste einfügen - Objektpalette (meine fertigen Elemente verwenden) - realiserung in Frames
-Pulldownmenü einfügen - Objektpalette - Formulare - Sprungmenü einfügen

LAYER:
-Möglichkeiten erforchen - Einsetzbarkeit überprüfen (Objektpalette - Ebnen zeichnen)

Vertiefung über weitere Möglichkeiten - zwecks Vollständigkeit (Ebenen, Zeitleisten, CSS,...

Wechseln Sie nun zur FRAME-Version!
Was ändert sich?

Material aus dem WWW (Downloads)

Adressen:
URL: HTML-Design

Java Appletts & Java-Scripts einbauen - URL: http://fips.myserver.at/

Schwerpunkte dieser Übung:
Einbindung von Material aus dem WWW/ Unterschiede zw. Javascript u. Java Applets erkennen

Meta-Names

Definition:
URL: http://www.csll.de/profitips.htm

Schwerpunkt dieser Übung:
-Einfügen von sinnvollen Meta-Names in Startseite der eigenen Homepage

-Analyse von Meta-Names; URL: http://www.siteowner.com , http://www.northernwebs.com

Utilities, die Arbeit erleichtern bzw. notwendig sind

Irfanview - kostenlose Alternative zu teuren Grafikprogrammen - sehr klein und fein!

Gimp eine Altenative zu Photoshop - wuchtig

Winzip: zum Packen und Entpacken URL: http://www.winzip.com

WsFtp: zum Übertragen der HTML-Files auf den Server; URL: http://www.wsftp.com/

1st Cool Button: erstellt 3-dimensionale Java-Buttons; URL: http://www.formulagraphics.com/buttons

Visual Applet Configurator:
MEGA, Erstellung von Java-Applets ist damit kinderleicht, große Vielfalt für unterschiedliche Zwecke, Ergebnis kann sofort überprüft werden, Hilfe ist hervorragend;
URL: http://www.demicron.se

Ulead Cool 3D: Backgrounds, Gif-Animationen, 3-D-Schriftzüge
URL: http://www.ulead.com/cool3d/runme.htm

GIF-Animation (freie Software)
http://softer.de/Grafikbearbeitung/Gifanimation/

WebZip:
ermöglicht das Downloaden ganzer Homepages aus dem Internet, auch einzelner Seiten, auch nur Text oder Bilder; URL: http://www.spidersoft.com/webzip/home.htm

XARA Webstyle:
colle Buttons, Bullets, Trennlinien, 3-D-Schriftzüge, Hintergründe, fetzige Überschriften; URL: http://www.xara.com

LinkBot:
stellt fest, ob Links der Homepage ins Nirwana gehen: URL: http://tetranetsoftware.com/

Netmechanic:
überprüft Links der Homepage und analysiert auch, ob eine korrekte HTML-Syntax vorliegt und ob Scriptbefehle o.k. sind: http://www.netmechanic.com/

Linkexchange:
überprüft Links der Homepage und analysiert auch, ob eine korrekte HTML-Syntax vorliegt und ob Scriptbefehle o.k. sind: http://www.linkexchange.com

AddWEB:
einfaches Registrieren bei bis zu 400 Suchmaschinen; URL: http://www.cyberspacehq.com/addweb/home.htm

Real Player:
um Ton und Videos aus dem Internet zu empfangen; URL: http://www.real.com

Online Counter:
führt Buch über die Telefongebühren, die beim Surfen anfallen, jedes Monat weiß man, wieviel Geld man versurft hat;
Url: http://www.swr3.de/Fun/Downloads/Onlinecounter/

Alles Gratis

Es ist unfassbar, was im Internet noch alles kostenlos angeboten wird, auch für die Homepage:
Zähler, Gratis-Webspace, kostenlose E-Mail-Adressen, Internetzugänge etc.

Schwerpunkte dieser Übung:
-Überzeugen Sie sich selbst!
-Die besten Adressen - URL: gratis.htm

Export und Import

Export: Home-Page beim Provider speichern - mittels FTP
(FTP auch realiserbar mit Browser - nur Download/ kein Upload normal!)

-mit WsFtp Import /Export (wie findet man solche Programme?)
-mit Cute Import /Export
-mit Frontpage
-WebZip (http://www.spidersoft.com/webzip/home.htm)

Schwerpunkte dieser Übung:
-Importe durchführen mit einem FTP-Programm

Werbung - Traffic ankurbeln

Viele Besucher täglich - das ist der Traum!
Guter Inhalt reicht nicht aus, wenn niemand von der Existenz einer Homepage etwas weiß.Wie realisieren?

Mundproppaganda - Zielgruppe z.B. Schüler
Eintragung in Gästebücher
Eintragung in Suchmaschinen
Verwendung von Software (ADDWEB)
Verwendung von Angeboten im Internet: Seiten, die Ihre Homepage analysieren und auf Fehler hinweisen, ermöglichen oft Eintragung in mehrere Suchmaschinen
URL: http://www.siteowner.com , http://www.northernwebs.com

Schwerpunkte dieser Übung:
-obige Realisierungsmöglichkeiten überprüfen

Zugriffe auf Homepage analysieren

Ein weiterer Traum - wieviele Besucher habe ich täglich (Zähler), woher kommen meine Besucher, wann kommen sie, wer steckt dahinter....?

3 heiße URLS:

http://de.nedstat.net/ (Deutsch)

http://www.showstat.com/ (Englisch)

http://www.fxweb.com/tracker/ (Englisch)

Schwerpunkte dieser Übung:

-Netstat-Analyse meiner Homepage - was kann man ableiten?
URL: http://members.yline.com/~pcko/

Ergebisse

Ein Gefühl, tatsächlich etwas gelernt zu haben, hat man meistens dann, wenn ein Ergebnis vorliegt.

Schwerpunkte dieser Übung:

-Präsentation
-Klärung offener Probleme