Kurs-Folien
www.staff.uni-
mainz.de/slowi/html/html.ppt
A. Slowinski
Zum Ausdrucken Powerpoint öffnen, bei Drucken auf
Handzettel und Folie an Seitengröße anpassen gehen,
11/24/2011
3 Folien Nr: 1
Übung: Das Webverzeichnis
als Laufwerk verbinden
Ihre Webseiten liegen unter
\\uni-mainz.de\dfs\public\www-stud\benutzer bzw
http://www.students.uni-mainz.de/sorgh007
Im Dateiexplorer: Extras – Netzwerklaufwerk verbinden
– Laufwerksbuchstabe "Z" – Ordner: \\uni-
mainz.de\dfs\public\www-stud\benutzer, Haken an bei
"Verbindung bei Anmeldung wiederherstellen". Ab dann
ist ihr Weblaufwerk auch unter "Z" erreichbar
Anm: für Mitarbeiter:
\\uni-mainz.de\dfs\public\www-ma\benutzer
Shortcut auf dem Desktop: public_html
Inhaltliche Maßgabe: Projektziel (nichts kommerzielles,
Testen und Ausprobieren ist OK)
24. November 2011 2
HTML und Tags
HTML ist eine "Auszeichnungssprache",
ursprünglich sollte nur die Textlogik
dargestellt werden
Textlayout ist nicht primärer Sinn,
sondern Weitergabe von Information
Mit "Tags" markierter Text:
Gedicht wird zu einer max.
großen Überschrift
24. November 2011 3
Wie sind Tags aufgebaut?
Elemente (Start und End-Tag)
inhalt
Wie alles begann
Attribute
Definieren die Tags genauer:
inhalt
Brotrezept
24. November 2011 4
Darstellung des Codes als
WWW-Seite
WWW-Browser (Netscape, Internet Explorer)
muß HTML-Code (auf seine Weise)
interpretieren
Text-WWW-Browser wie Lynx unterscheiden
sich stark in der Darstellung von den
graphischen Browsern
Zusätzlich kann jeder Benutzer seinen Browser
individuell einstellen
24. November 2011 5
Layout-Unterschiede:
IE/Mozilla
24. November 2011 6
Layout mit Text-WWW-
Browser
Start – Programme – TeraTermPro – Host: alpha4
24. November 2011 7
Vom Benutzer verstellt
zdv uni slowi
Der Autor spricht zwar das letzte Wort,
aber nicht in Fragen des Layouts!
24. November 2011 8
Werkzeuge zum Erstellen
von WWW-Seite
Kein Spezialprogramm nötig!
Herkömmlichen Editor
Notepad (Winx), Edit (DOS), SimpleText (Mac), vi
(UNIX) ...
Konverter
Latex2html, Word/Excel/Powerpoint-Export
HTML-Editoren, installiert im ZDV
Dreamweaver, Frontpage, Netscape Composer
Frei verfügbarer Editor: Phase V
24. November 2011 9
WWW-Seiten mit Word
Office 2000 erstellen
Macht riesigen und unlesbaren Code! Legt beim
speichern als HTML alle notwendigen Infos zum
rekonstruieren der Word-Datei mit in die HTML-
Datei
Probleme gibt es bei manchen Formaten:
Vorsicht bei Tabulatoren
Formatvorlagen verwenden
blocksatz - geht verloren
zweispaltig - geht verloren?
Fußnoten - gehen verloren
24. November 2011 10
Übung: erste HTML-Seite
mit Dreamweaver
Öffnen: Start - Programme – Dreamweaver
Neu – erstellen - HTML
"Teilen" anklicken
Im oberen Fenster nach Gedicht hier
einfügen!
Überschrift - Gedicht
(kleines Gedicht tippen )
Neue Zeile durch
Horizontale Trennlinie -
Seite speichern: Datei - Speichern im
Webverzeichnis - gedicht.html
24. November 2011 11
Text mit Tags
eingeben
Layout-Ansicht,
Text ohne Tags eingeben
Eigenschaften per Klick ändern
24. November 2011 12
Übung: HTML-Tags (im
oberen Fenster eingeben)
Formatieren Sie Ihr Gedicht:
Stark: fett!
Betont: mit Emphase!
Kleine Überschrift: Text
Ein Absatz: lskjk
24. November 2011 13
Übung: Listen
Legen Sie eine neue Webseite an: liste.html
Machen Sie eine Liste Ihrer fünf liebsten:
Musiker als geordnete Liste: zb
Bach zb Prince
Vorbilder als ungeordnete Liste: statt ol ul, also
zb Merkel zb Gandhi
24. November 2011 14
Übung: Datei-Endungen
sichtbar machen. WICHTIG!
XP kann den vollständigen Dateinamen
verstecken. Dann wissen Sie nicht, wie Ihre
Dateien heißen. Schlecht. Also:
Öffnen Sie den Datei-Explorer
Gehen Sie auf Extras – Ordneroptionen –
Ansicht
Entfernen Sie das Häkchen bei: Erweiterungen
... Ausblenden
Jetzt können Sie überall im System die Endung
Ihrer Dateien sehen!
24. November 2011 15
Dateinamen für Webseiten
Alles kleinschreiben!
Verboten sind:
Umlaute: also NIE: übung.htm anlegen.
Leerzeichen: also NIE: meine homepage.htm
Scharfes S: ß: also NIE:
Dateiendung immer: .html (.htm existiert
zur Rückwärtskompatibilität mit DOS)
24. November 2011 16
Änderungen im Web
ansehen
Zum Anschauen die Webseite immer über
den Server aufrufen, nur dann sieht man
alle Fehler (also mit
www.students.uni-mainz.de/usr/nam.html
Ändern & Speichern im Dreamweaver
Im Browser: mit dem Knopf "Neu laden"
geänderte Seite anschauen
24. November 2011 17
innen und außen bei WWW-
Seiten
Innen: file:///Webverzeichnis/erste.html
Dateizugriff
Web-Server:
www.students.uni-mainz.de
http
Außen:
24. November 2011 18
http://www.students.uni-mainz.de/ihrnamex/erste.html
Übung: Seite von "innen"
und "außen" im Browser
Jeweils in das Browser-Adressfenster
tippen und aufrufen:
Innen: Webverzeichnis\gedicht.html
außen:
www.students.uni-mainz.de/user/gedicht.html
(also für slowi: http://www.staff.uni-
mainz.de/slowi/gedicht.html)
24. November 2011 19
Das wichtigste: Links sind
Hyper!
Auch URL = Uniform Resource Locator
genannt
Macht das WWW erst stark (und
unübersichtlich)
Verbindungen von einer Textstelle zu
einer anderen
Lernen wir verschiedene Links kennen
und benutzen!
24. November 2011 20
Link-Adresse (=URL)
zusammen?
Gateway://servername/Pfad/datei
Gateway: http,file,ftp, mailto...
Servername: Internetdomainname
(www.uni-mainz.de, home.netscape.com)
Pfad: Verzeichnis (/slowia000/ ...)
Datei: Name.ext (.htm, .html ...)
Groß/Kleinschreibung beachten! (.GIF nicht
gleich .gif!))
24. November 2011 21
Links im ...
gleichen Verzeichnis (relativ, nur Dateiname)
klicktext
Unterverzeichnis = relativer Pfad:
klicktext
Unterverzeichnis = absoluter Pfad:
klicktext
Auf einem anderer Server:
klicktext
Anker auf anderer Seite:
klicktext
24. November 2011 22
Übung: absolut Links
setzen im HTML-Fenster
Neue Datei öffnen ("Erstellen"
auswählen) speichern:
Webverzeichnis\links.html
Im HTML-Mode (oberes Fenster) Text und
Link schreiben: Meine Universität, Mail
mir!
24. November 2011 23
Übung: relativen Link
setzen auf kurs.html
Neue Datei öffnen und abspeichern: kurs.html
Kurs.html soll eine Linkliste Deiner Übungen
enthalten! (nächste Folie)
Gedicht
24. November 2011 24
Link auf einen Anker
setzen
Was ist ein Anker? Man kann Stellen auf
Webseiten definieren, die dann direkt
angezeigt werden und nicht vom Anfang.
(Praktisch, wenn die Seite länger ist)
Wie sieht ein Anker aus?
Wie linke ich auf den Anker?
Klicktext
24. November 2011 25
Übung: Link auf Anker
Machen Sie in links.html einen neuen Link auf
(Klicktext: Anker anspringen):
http://www.staff.uni-
mainz.de/slowi/html/vorworte.html#acht
Sie landen nicht oben auf der Vorworte-Seite,
sondern im Vorwort zur 8. Auflage.
Setzen Sie zum Vergleich einen weiteren Link
auf http://www.staff.uni-
mainz.de/slowi/html/vorworte.html
24. November 2011 26
Link auf Homepages
setzen
Setze einen Link auf die Homepage von
slowi:
http://www.staff.uni-mainz.de/slowi
Setze einen Link auf Deine eigene
Homepage:
http://www.students.uni-mainz.de/user
Bemerke den Unterschied! (index of Seite)
24. November 2011 27
Testen von Webseiten
Bitte zum Testen ausschließlich über den
Web-Browser zugreifen
http://www.students.uni-
mainz.de/username (beginnt unter dem
Webverzeichnis)
24. November 2011 28
Struktur Deines Webbereichs
Webverzeichnisl\index.html =
http://www.students.uni-mainz.de/deinbenutzername
index.html
Willkommen!
kurs.html
Gedicht gedicht.html
Links
Header links.html
Diashow
Farben header.html
Tabellen dia1.html
Übungen zum Kurs
...
24. November 2011 29
Übung: lege Deine eigene
Homepage an
Lege im Webverzeichnis eine Datei an,
deren Name index.html ist. Das wird
Deine eigene Homepage/Startseite
Schreibe in sie hinein: "Willkommen -
Übung zum HTML-Kurs" und lege darauf
einen Link nach kurs.html
Probier den Link auf Deine Homepage
noch einmal aus. Was hat sich geändert?
24. November 2011 30
Übung: Anker setzen
(Vorarbeiten)
1. Übungsdatei kopieren: im Webbrowser
auf http://www.staff.uni-
mainz.de/slowi/html/vorworte.html
surfen, dann auf "Datei – Speichern" –
"Webverzeichnis"
2. Öffnen Sie vorworte.html im
Dreamweaver
24. November 2011 31
Übung: Anker setzen
Anker definieren: Maus bei "Vorwort zur
2. Auflage" positionieren
Einfügen - benannter Ankerpunkt – zwei
eingeben – OK
So sieht der Code aus:
Bitte für jedes Vorwort einen Anker setzen
24. November 2011 32
Übung: Links setzen
Links.html öffnen und dort eine Liste anlegen
mit (Klicktext ausdenken)
Link auf 2. Auflage setzen:
vorworte.html#zwei
Das gleiche mit allen anderen
Auflagenvorworten wiederholen
Ausprobieren!
HTML-Tag: vorwort 2
24. November 2011 33
ZusatzÜbung: Anker & link
in einer Seite
Vorworte.html öffnen (die Anker sollten aus
der vorigen Übung noch vorhanden sein)
Das Inhaltsverzeichnis mit Links versehen:
1. 2. Auflage markieren
2. Im Eigenschaften-Fenster bei Hyperlink: #zwei
eingeben
3. Speichern und ausprobieren
HTML-Code: 2.Auflage
24. November 2011 34
HTML-Struktur: Head &
Body
Head = das, was nicht in der Seite
auftaucht (keywords, title usw)
HTML-Tag:
Body = der eigentliche Seitentext.
Generelle Einstellungen (Farben usw.)
werden im Tag gemacht
24. November 2011 35
Übung: Header-Tags mit
Dreamweaver
Neue Datei header.html anlegen.
Auf Ansicht-Headinhalt klicken.
(Zusätzliche Leiste erscheint in der Mitte
mit Icons für jeden Header)
Am oberen Fensterrand den Titel der
Seite setzen "Das ist ein Titel-Header-
Tag"
Auf der Seite ist NIX zu sehen und auszu-
probieren! (nur eben der Titel)
24. November 2011 36
Übung: Suchmaschinen-
unterstützung
Zweck: Suchmaschinen werten diese Headertags oft mit
höherer Priorität aus.
Geh auf Einfügen - HTML– Head-Tags:
Schlüsselwörter: - Wert: Homepage, Mainz: wird zu
Beschreibung: "Homepage Germanistik" wird zu:
Test nicht möglich, da die Seite in der Suchmaschine
nicht gefunden wird.
DAMIT Sie gefunden wird, zb in yahoo: "Website
vorschlagen" oder bei Google im Verzeichnis unter „URL
anmelden“
24. November 2011 37
http-equiv-Meta-Tags
Webseiten werden per http übertragen
(Hypertext Transfer Protocol)
In diesem Protokoll kann man
Kopfinformationen mitgeben (Expire,
Content usw.)
Übergänge beim IE werden zb mit einem
nicht-standardisierten Übergang realisiert:
24. November 2011 38
Übung: DiaShow
automatisch weiterleiten
Dazu vorbereitend die Dateien dia1.html –
dia3.html kopieren
www.staff.uni-mainz.de/slowi/html/
Von der dia1.html auf dia2, von der auf dia3,
von der auf die dia1"springen"!
Dazu bitte in Dia1.html auf den Menüpunkt:
Einfügen – HTML - Head-Tags – Aktualisieren: 3
Sekunden , Aktion: gehe zu = dia2.html
Mit Dia2.html das selbe tun: einfügen – head ...
24. November 2011 39
Übung: Farben in HTML
Wählen Sie 2 Farben, die Sie in Ihren Seiten
verwenden werden!
RGB-Konzept (Rot-Grün-Blau), Mischung per
Wert von 00 (=keine Farbe), FF (= Maximum)
Referenz für WWW-Farben mit browser – safe –
colors: ohne dithern (mischen)
z.B blauer Text:
blau
RGB einfach mal ausprobieren:
http://www.staff.uni-mainz.de/slowi/flash/rgb.html
24. November 2011 40
Farben & Layout
In HTML wird NUR die Struktur eines
Dokuments festgelegt (Listen, Überschriften,
Absätze usw.)
Jegliches Layout (Farben, Einrückungen,
Position usw.) sollte NICHT per HTML, sondern
per Cascading Style Sheets (CSS) definiert
werden.
Folien zu CSS:
www.staff.uni-mainz.de/slowi/html/css.ppt
24. November 2011 41
Eigener Domainname
Um privat Webseiten zu betreiben,
wenden Sie sich an einen Provider
Dieser gibt Ihnen Speicherplatz und
Domainnamen
Sie bekommen dort einen
Benutzernamen, Passwort und einen
Server genannt, auf den sie Ihre
Webseiten kopieren
24. November 2011 42
Bilder auf HTML-Seiten
Bilder sind in HTML nur referenziert.
Die Bilder bleiben
in eigenen Dateien
stehen.
24. November 2011 43
Web-Bild-dateiformate (im
Browser anzeigbar)
Gif: Graphics Interchange Format (mit
verlustfreier Komprimierung), aber nur 256
Farben, dafür transparent und interlaced
Jpg: Joint Photographic Experts Group:
Komprimierung mit Verlusten, aber 16,7 Mio
Farben darstellbar
Png: Portable Network Graphic: verlustfrei,
16,7 Mio Farben, interlacing, Transparenz
über Alpha-Kanal
24. November 2011 44
Andere Bildformate
.cdr (Corel), .tif (häufiges Scanformat),
.psd (Photoshop) müssen alle in ein Web-
Browser-anzeigformat konvertiert (nicht
umbenannt) werden!
.swf: Shockwave Flash über ein Plugin
(Zusatzprogramm ansehbar, Interaktion,
timelines uam benutzbar)
24. November 2011 45
Bilder einbinden: welches
Format/Größe?
Formate: gif für Logos (wenig Farben), jpg für
Fotos (viele Farben, mit hoher Kompression)
Bei großen Bildern: thumbnail (kleine
Ersatzdarstellung) (Münz-Referenz)
Pixel-Größe (width="123" height="123") und
alternative Text (alt="Blume") immer angeben
(Münz-Referenz)
Title="text" angezeigt beim drüberfahren mit
der Maus
24. November 2011 46
Übung: Grafiken aus dem
Web kopieren
Copyright beachten! Scannt lieber eigene Bilder!
Probier es aus mit den Campus-Impressionen
unter:
http://www.staff.uni-mainz.de/slowi/ oder
http://www.geo.de (Fotogalerie)
Ein Bild zu kopieren geht, indem man mit der
rechten Maus auf das Bild klickt
Und mit "Bild speichern/ Save Image as" die
Bilddatei unter dem Webverzeichnis abspeichert.
24. November 2011 47
Photoshop
Kurz-Anleitung: http://www.staff.uni-
mainz.de/slowi/html/photoshop/
Kurs im ZDV
Script in der Beratungsstelle
Tutorien im Internet (bei Google nach
Tutorial photoshop suchen)
24. November 2011 48
Übung: Bildgröße
verringern
Öffne das (min. 1000 Pixel breite) Bild aus der
vorigen Übung in Photoshop (Start –
Programme – Photoshop) mit "Datei – Öffnen"
Verkleinere es mit "Datei – Für Web speichern"
Dort ganz rechts ist Bildgröße wählbar, setze es
auf 300 Pixel Breite. Auf "Anwenden" klicken.
Achtung: das Dateiformat stellt man oben rechts
ein. NICHT im Speichern-Fenster!
Im Webverzeichnis als bildklein.jpg abspeichern.
24. November 2011 49
Übung: Bildgröße
vergrößern
Sie sollen sehen, dass sie Bilder nicht
verbessern, wenn sie sie vergrößern.
Bildklein.jpg testweise vergrößern um das
2fache.
Nennt dieses Bild bildgross.jpg
Die sichtbaren Pixel und Treppen sind nur
manchmal als künstlerische Verfremdung
sinnvoll.
24. November 2011 50
Übung: Grafik einbinden
(Dreamweaver)
Öffne eine neue Datei, speichere sie als
bilderseite.html ab.
Drücke auf Einfügen-Bild
Wähle ein Bild aus der vorigen Übung aus
Schreib im Eigenschaften-Fenster in das
Fenster "Alt": Campus-Bild
Setz einen Link "Bilder einbinden" von
kurs.html auf bilderseite.html.
24. November 2011 51
Eigenschaften eines Bildes
in HTML ändern
B und H (Breite/Höhe) NICHT ändern! Dadurch
wird nur die Darstellung, nicht die Bild-Datei
selbst geändert.
Hyperlink macht das Bild anklickbar
Rahmen sagt, wie dick um das Bild in der Farbe
eines Links ein Rahmen angezeigt werden soll.
Was bei Bildern im Web zu beachten ist:
http://www.zdv.uni-mainz.de/508.html
24. November 2011 52
Übung: Hintergrundbild
(Dreamweaver)
Das Bild wird so oft wiederholt, dass der ganze
Hintergrund ausgefüllt ist.
Das Bild ist dabei Teil der Seiteneigenschaften
Füg ein Bild in den Hintergrund mit "Modifizieren
– Seiteneigenschaften", nimm das bildgross.jpg
als Hintergrundbild.
Bitte speichern als hintergrund.html
Rhetorische Frage: Ist das ein "gutes"
Hintergrundbild?
24. November 2011 53
Probleme bei
Hintergrundbildern
Kaum ein Bild ist dafür geeignet:
entweder es ist zu klein, zu bunt, der
Kacheleffekt ist unschön, oder vereint alle
diese Nachteile.
Wir lernen im Folgenden, wie man die
Kacheln "saumlos", also ohne Rand
erzeugt und die Bilder in Helligkeit und
Kontrast verändert.
24. November 2011 54
Übung: Kacheln erzeugen
(Photoshop)
Neues Bild anlegen: kachel.jpg (200x200 pixel)
Etwas mit dem Stift oder anderem Werkzeug zeichnen
Haben Sie beim Zeichnen mehrere Ebenen erzeugt?
Dann auf: Ebene – Auf Hintergrundebene reduzieren
Auf "Filter – Sonstige Filter – Verschiebungseffekt"
gehen, (jeweils 80 Pixel eingestellt lassen)
Diese Schritte mehrmals wiederholen
Datei – Für Web speichern
Dreamweaver: kachel.html anlegen, die kachel.jpg in
den Seiten-Hintergrund laden
24. November 2011 55
Übung: Hintergrundbild erzeugen
(Photoshop)
Nimm ein Bild und öffne es in Photoshop
Bild aufhellen: Bild – Anpassen – Farbton /
Sättigung
Farbton wählen, Sättigung verringern, Helligkeit
erhöhen.
Datei – Für Web speichern.
Von Gif auf jpg umstellen.
In Dreamweaver wasserzeichen.html anlegen
und das Bild als Hintergrund einbinden mit
Modifizieren – Seiteneigenschaften
24. November 2011 56
Fotogalerie mit Adobe
Photoshop
Photoshop starten
Datei – Automatisieren –Web Photo
Gallery
Quelle und Ziel wählen
Ok klicken, Fehlermeldung wegklicken,
Abbrechen
Fertig!
24. November 2011 57
Fotogalerie Feineinstellungen
Daten wie Titel, Beschreibung und mehr sind
Metadaten. U.a. in psd und jpg-Dateien
speicherbar.
Diese Beschreibungen tragen Sie im Photoshop
bei "Datei - Dateiinformation" ein.
Nicht jedes Galerie-Template zeigt
Beschreibungen an (auf Texte in der Voransicht
achten)!
24. November 2011 58
Fotogalerie - Metaangaben
Optionen: bei Allgemein „Meta-Angaben“
und bei „Große Bilder" die Felder, die
übernommen werden sollen, anklicken.
24. November 2011 59
Zusatz-übungen:
Bildbearbeitung
http://www.staff.uni-
mainz.de/slowi/html/photoshop/
Enthält eine Anleitung zu Photoshop,
Außerdem gibt es unten auf der Seite
Übungen zu
Schlagschatten
Sich wiederholenden Fotos als
Webseitenhintergrund
24. November 2011 60
"Clickable Maps, Hotspots"
HyperLinks funktionieren nicht nur bei
markiertem Text, sondern auch bei markierten
Bildteilen
Definition von anklickbaren Kreisen, Rechtecken
und Polygonen in den HTML-Editoren möglich
Für Stadtpläne und Landkarten mit "heißen
Stellen"
Zusatzübung deutschland.gif im Download-
Verzeichnis
24. November 2011 61
Funktion von Clickable
Maps www.nordsee.de
Von der Grafik aus führen
Verweise auf HTML-Dateien
Anwählen "heißer"
Bereiche
www.berlin.de
www.frankfurt.de
HTML-Seiten
24. November 2011 62
Übung: Clickable Map in
Dreamweaver
Datei – Neu – clickable-dream.html
Aus dem Download-Verzeichnis: deutschland.gif
"Einfügen – Bild" in clickable.html
1. Auf das eingebundene Bild klicken
2. Map-Bearbeitungswerkzeug verwenden im
Eigenschaftenfenster (unten)
3. Form aus dem Werkzeug auswählen
4. Bereich markieren
5. Link für den Bereich setzen
24. November 2011 63
Zwischenstand
Struktur (Überschrift, Absatz, Liste, Links)
Layout (Farben, Abstände, Schriftart- und
größe, Hinterlegung mit Bildern)
Was fehlt: möglichst freie Anordnung der
Elemente. Methoden dafür sind:
Tabellen
Ebenen
Frames
Templates zb unter: http://www.on-
mouseover.de/templates/templates.html
24. November 2011 64
Text anordnen (Tabellen)
Tabellen und Anordnung von Text und Grafiken:
...
Zeile definieren:
Spalte definieren:
z.B.: 1. Spalte2.
1. Spalte, 2. Zeile
2.2
Dreamweaver-Menü: Einfügen – Tabelle
ACHTE IMMER darauf, in welcher
Tabellenansicht Du Dich befindest, Layout oder 65
24. November 2011
Eigenschaften von
Tabellen und deren Zellen
Größe: vorzugsweise relativ (Prozent) oder
absolut (Pixel). Achtung: Möglichst nicht breiter
als 640 Pixel (für alte Bildschirme)!
Rahmenbreite und Farben der Zellen
Abstand und Ausrichtung
Alle Eigenschaften edierbar mit rechter
Mausklick auf die Tabelle
Die Markierung von Tabellen funktioniert
besonders gut mittels des unteren linken
Bildrands
24. November 2011 66
Übung: Tabelle – tabelle-
simpel.html
Mit dem Menü: Einfügen – Tabelle, in dem
Fenster stellen Sie alle Tab. Eigenschaften
ein.
Legen Sie eine Tabelle mit 1 Zeile und 2
Spalten mit einem 20 Pixel breiten
Rahmen, die immer 100% gross ist.
In die linke Zelle fügen Sie ein Bild ein, in
die rechte einen begleitenden Text
24. November 2011 67
Übung: Inhalte von Zellen
ausrichten
Die Inhalte sollen nach oben ausgerichtet
sein.
Im Eigenschaften-Fenster ändern Sie die
vertikale Ausrichtung auf "oben“, indem
Sie die Zelle anklicken und im Klappmenü
„Vert“ auf „oben“ wechseln
24. November 2011 68
Übung: Tabellendaten
importieren
Dreamweaver kann csv-Dateien in HTML-
Tabellen direkt umwandeln
www.staff.uni-mainz.de/slowi/html/studi.txt im
Webverzeichnis speichern
Einfügen – Tabellenobjekte - Tabellendaten –
studi.txt auswählen und einbinden
Als tabelle-dream.html speichern
24. November 2011 69
Übung: Tabelle mit Layout:
tabelle-layout.html
1. Fenster – Einfügen, oben in der Kartenreiterleiste
2. wechsele im Fenster von „Allgemein“ auf "Layout"
3. Wechsele von „Standard“ auf „Layout“
4. Zieh eine große Tabelle auf. (Maus links oben
drücken und festhalten, zieh nach rechts unten)
5. Füg Zellen ein, indem Du auf das Icon
"LayoutZelle zeichnen" klickst und die Zelle mit
der Maus aufziehst
1
2 24. November 2011 3 4 5 70
Übung: Bilder in die
Tabelle einfügen
Kopieren Sie ein beliebiges Bild aus den
Campus-Impressionen unter:
www.staff.uni-mainz.de/slowi/html/ ein
Klicken Sie eine Zelle an und öffnen das
Menü "Einfügen - Bild". Wählen Sie die
Bilddatei aus.
Fügen dann einen Begleittext in die zweite
Zelle ein
24. November 2011 71
Übung: Tabelle auto-
formatieren und sortieren
Markieren Sie die Tabelle in tabelle-
dream.html (am Rand anklicken)
Öffnen Sie das Menü Befehle – Tabelle
formatieren und wähl ein Design aus
Sortieren Sie die Tabelle mit dem Menü
Befehle – Tabelle sortieren nach der
zweiten Spalte
24. November 2011 72
Eigenschaften von Ebenen
Über das Bereichs-Tag:
Die Eigenschaften erhält die div-Ebene
durch Stylesheet-Eigenschaften:
Hintergrundbild, Position, Größe,
Überlappungen, Sichtbarkeit
Dreamweaver kann nur mit absolut
positionierten Ebenen umgehen (im
Gegensatz zu %-Angaben)
24. November 2011 73
Übung: Layout mit Ebenen –
relativ positioniert
Einfügen – Layoutobjekte – Ebene
Ordnen Sie zwei Ebenen nebeneinander an.
Ändern Sie die Eigenschaften im Css-Stile-
Fenster
Färben Sie den Hintergrund (background-color)
Ersetzen Sie B(reite) durch 50%, entfernen Sie
die H(öhe) (dann wird die Färbung auch bei
längerem Inhalt übernommen)
24. November 2011 74
Übung: absolut positionierte
Ebenen
1
1. Wechseln Sie auf "Fenster –
Überlappend"
2. Jetzt können Sie unten rechts am
Fenster die Fenstergröße wählen
3. Legen Sie zwei Ebenen an:
Eine auf 800x600 oben rechts (gerade
noch sichtbar bei alten Notebooks)
Eine auf 1024x768 unten rechts
(auf durchschnittlichen Monitoren 2
noch sichtbar)
24. November 2011 75
Umwandeln von Ebenen in
Tabellen
Speichern Sie die Ebenen-Seite als
ebene.html
Testen Sie: man kann -Tags in
Tabellen umwandeln: Modifizieren –
Konvertieren – Ebene in Tabelle
umwandeln.
Funktioniert umso schlechter, je
komplexer die Struktur ist.
24. November 2011 76
Zusatz-Übung: Ebenen per
Javascript beeinflussen
Per Javascript-Links kann man Ebenen aus- und einblenden (Diashow etc.)
Legen Sie 3 Ebenen an, in die sie Bilder oder Texte einfügen.
Damit die Ebenen sich überlappen, müssen Sie den Haken bei Modifizieren
– Anordnen – E.-überlapp. verhindern ausschalten
In eine 4. Ebene schreiben Sie Ihre Navigation in eine Liste (Bild1-Bild3)
Setzen Sie Hyperlinks zum Steuern der Ebenen auf:
Bild 1, Markieren Sie den Link
Öffnen Sie das Fenster – Verhalten, klicken Sie aufs + und wählen Sie
"Ebene ein-/ausblenden"
Im erscheinenden Fenster blenden Sie die jeweilige Ebene ein, die anderen
beiden aus.
Speichern Sie die Übung als ebenen-sichtbarkeit.html
Ein Beispiel finden Sie im Download-Bereich unter ebenen-sichtbarkeit.html
24. November 2011 77
Was sind Frames?
Aufteilung des Browsers in mehrere Fenster,
jedes Fenster enthält eine WWW-Seite
Für alle Hypertextlinks muß der Autor ein sich
für Zielfenster ("target") entscheiden
Probleme beim Anzeigen (noframes),
Ausdrucken, mit der Sicherheit sind möglich
Es wird immer die gleiche Adresse angezeigt
(bei manchen Browsern Probleme bei Setzen
von Lesezeichen)
24. November 2011 78
Frames
Frameset-Seite ist zusammengesetzt aus
mehreren HTML-Dateien, den Frames
Die Art der Zusammensetzung wird über
die Frameset-Datei bestimmt. Sie bildet
den Rahmen, in dem die anderen HTML-
Dateien dargestellt werden.
24. November 2011 79
1 Frameset und 2 Frames
frameset.html (das Frame-Set)
kurs-frame.html rechts.html
name="leftFrame" name="mainFrame"
24. November 2011 80
Übung: Frames –
Vorbereitungen.
Speichern Sie kurs.html unter neuem Namen ab: kurs-frame.html und
schliessen sie die Datei. Sie sollten jetzt nur noch ein leeres neues
Dokument geöffnet haben.
Legen Sie das Frameset und die Dateien an, indem Sie auf
"Datei – Neu – Frameset" gehen. Wählen Sie "Links fest"
aus.
Bestätigen Sie das Attribute-Fenster mit OK
Jetzt haben Sie eine Frameset-Seite mit
2 Frames angelegt, also insgesamt 3 Seiten!
Zum Bearbeiten brauchen Sie das "Fenster –Frames"
24. November 2011 81
3 Dateien in
Bearbeitung!
Welche bearbeitet
wird, sieht man zb
hier.
So soll ihr Bildschirm jetzt
aussehen
Fenster – Andere – Frames
Fenster – Eigenschaften
Rahmen des
Frame-Fensters
24. November 2011 82
Übung: Frames –
Frameseiten definieren
Sie müssen nun jede der 3 Seiten speichern.
Die Frameset-Seite (in der das Frame-Gerüst definiert ist), speichern Sie
mit Datei – Frameset speichern – frameset.html (das ist die Datei, die sie
im Webbrowser betrachten) (Wenn Sie den Menüpunkt „Frameset“ nicht
sehen, dann haben Sie kein Frameset geöffnet!)
Um den rechten Frame zu speichern, klicken Sie in den rechten Frame
(Layoutansicht) hinein und wählen sie Datei – Frame speichern.
Dateiname: rechts.html
Klicken sie den linken Frame an (er soll eine Liste aller Übungen enthalten)
und wählen Sie Datei – öffnen in Frame – und wählen dann die Datei kurs-
frame.html aus.
Datei – Alles speichern, dann die Seite im Browser testen! Klicken Sie
auf einen der Links.
Im Frames-Fenster auf den Rahmen klicken, in linker Spalte auf 30%
gehen (anstatt 80 Pixel).
24. November 2011 83
Übung: Sprungziele in
Frames – 1er für alle
Jedes Framefenster ist wie ein eigener kleiner
Browser: klickt man einen link an, wird die Seite
im gleichen Frame dargestellt!
Definieren Sie einen Standard-Ziel-Frame
(base target)
Fügen Sie in den Header von kurs-frame.html
ein:
24. November 2011 84
Übung Sprungziele: Link-
Ziele einzeln setzen
Öffnen eines Links in einem neuen Fenster mit
dem Attribut target/Ziel beim Link:
Dabei sollte das Frameset geöffnet sein (dann
kann man den Zielframe auswählen):
mainFrame: Inhalt wird im rechten Frame angezeigt
_blank : ein neues Fenster geht auf
_parent: das aktuelle Frameset wird beendet
24. November 2011 85
Eigenschaften von Frames
ändern
Frame-Eigenschaften (Rand, Scrollbalken
usw) können Sie über das Eigenschaften-
Fenster ändern
Um die Eigenschaften zu sehen, müssen
Sie die Alt-Taste gedrückt halten und
dann in den Rahmen hineinklicken oder
In das Fenster Frames klicken
24. November 2011 86
Organisieren vieler Seiten mit
Sites:
viele Webseiten gleichzeitig bearbeiten
Man kann Hyperlinks auf Gültigkeit prüfen
keine Zwischenstadien der eigenen Seiten
sichtbar machen, sondern nur das Endprodukt
Frames vermeiden, aber trotzdem einheitliche
Navigation verwenden
Bereiche vor unabsichtlichem Ändern schützen
Man kann Vorlagen und Bibliotheksobjekte
ändern und alle Dateien dieser Vorlage werden
in einem Rutsch mitgeändert.
24. November 2011 87
Übung: Site-Definition I:
Lokale Infos
Auf den Menüpunkt Site-Neue Site gehen
Site-Name: frei vergebbar, zb vorname
Lokaler Stammordner: Verzeichnis, in dem
Sie Ihre Webseiten vorbereiten
(Andere Felder auf Standard stehen
lassen)
24. November 2011 88
Übung: Site Definition II –
Remote Information
Angaben zum Server (Name, wie erreicht
man ihn usw.)
Für uns im einfachsten Fall auf „Kein“
stehen lassen.
24. November 2011 89
Site Definition Alternative bei
Provider
Normalerweise haben Sie bei einem Provider
nicht die Möglichkeit, den Webbereich über
„Datei speichern“ anzusprechen
Provider bietet zb Zugang über FTP (File
Transfer Protocol): Servername, Benutzername
und Passwort müssen Sie konfigurieren
Vorsicht, bei FTP wird das Passwort im Klartext
über die Leitung geschickt (unsicher)
24. November 2011 90
Sites und Vorlagen
Innerhalb der Site-Definition kann man
Webseiten definieren, an denen nur der
Inhalt, nicht aber die Navigation oder das
Kontaktfeld änderbar sind.
Die Navigation soll in eine Tabellenzelle nach
links (verwenden Sie dafür ihre kurs.html)
Nach rechts soll der jeweilige Inhalt der
Übung.
24. November 2011 91
Übung: Vorlage anlegen
Erstellen Sie ein Grundgerüst (Navigationslinks oben,
Copyright und Kontakt unten, Farben und Schriften)
Kopieren Sie dazu zb aus der kurs.html alle Links in die
linke Spalte einer Tabelle.
Menüpunkt Datei – Als Vorlage speichern wählen.
Fügen Sie mit dem Menüpunkt Einfügen–
Vorlagenobjekte – Bearbeitbarer Bereich einen
Platzhalter zum Eingeben ein.
Jetzt gibt es 2 Möglichkeiten:
Neue Seite: Datei – Neu – Vorlage – Vorlage auswählen
Seite schon vorhanden: zuweisen mit: Modifizieren – Vorlagen –
Vorlage auf Seite anwenden
24. November 2011 92
Programmieren im WWW
Wo ist die Intelligenz, d. h. das
Programm, das die Dynamik erreicht?
auf der Serverseite: CGI, php, SSI
auf der Browserseite: JAVA, embedded
Javascript/Jscript, Vbscript …
24. November 2011 93
Interaktivität: Serverseitig
WWW-Browser WWW-Server
stdin "Feld=Inhalt&Feld2=Inhalt2"
Formular
Ergebnis
Feld1 Inhalt1
Feld2 Inhalt2
Rückmeldung als HTML-Datei ... Verarbeitung
oder URL
OK
method="GET"
http://host.de/script.pl?Feld=Inhalt&Feld2=Inhalt2
24. November 2011 94
Interaktivität:
Browserseitig
WWW-Browser WWW-Server
HTML-Datei
Javascript /
Java
Bytecode
Ausführung:
unabhängig
vom Browser
24. November 2011 95
Formulare im WWW
Ein Formular zu erzeugen, ist einfach
hoher Arbeitsaufwand bei der
Verarbeitung der Formulardaten!
Frontpage-Formulare funktionieren nur
mit einem Frontpage-Server
24. November 2011 96
Übung: im Dreamweaver
Form anlegen
1xden Menüpunkt: Einfügen – Formular -
Formular ausführen (es sollte nur EIN
form-Tag geben = 1 rotes Rechteck
In den Form-Bereich klicken (rotes
Rechteck)
Fenster – Einfügen öffnen, dort von
"Allgemein" auf "Formular" schalten.
24. November 2011 97
Formularelemente
Neben ein- und mehrzeiligem Text (beides unter
"Textfeld")
24. November 2011 100
Efa – ZDV-Programm zur
Formularverarbeitung
Notwendige „hidden“ Felder
ablage=mailadresse
inhalt=alle felder, die sie ausgeben
wollen. Dabei muß jeweils der name des
Feldes im value der Variable inhalt in %-
Zeichen geklammert auftauchen. Zb:
Name=person
Inhalt=„… %person% …“
24. November 2011 101
Übung: Kontaktformular
Kopieren Sie sich das Beispielformular von
der Materialienwebseite.
Ändern Sie die E-Mailadresse auf Ihre
Studentenadresse.
Probieren Sie das Formular aus.
Fügen Sie ein Textfeld und ein Klappmenü
hinzu.
24. November 2011 102
Javascript
Das Script "verbirgt" sich in der HTML-
Datei
Interpretation der Daten beim Laden
"Event"-gesteuerte Sprache: man kann
Mausklicks und Eingaben abfangen und
Aktionen des Programms daranhängen
24. November 2011 103
Übung: Rollover:
Javascript verwenden
Der bekannte Effekt, dass sich beim
herüberfahren mit der Maus etwas ändert.
Lege mit Photoshop 2 Bilder an
javascript.html anlegen
Einfügen – Grafikobjekte - Rolloverbild
Original und Rollover mit den beiden
Bildern füllen, "wenn angeklickt" auf die
eigene Homepageadresse setzen.
24. November 2011 104
Übung: Schiebebilder:
Javascript
Schiebebild.html anlegen.
Ebene anlegen (mit Einfügen –
Layoutobjekte - Ebene) Wenn das nicht
anwählbar ist: auf der Karte Layout auf
Standardansicht gehen)
Etwas in die Ebene einfügen, Ebene
markieren (Anfasspunkte müssen sichtbar
sein)
Modifizieren > Zeitleiste > Pfad der Ebene
aufzeichnen.
Jetzt die Ebene anfassen und bewegen
Fenster – Andere - Zeitleiste: Auto-Wdhlg.
einschalten.
24. November 2011 105
Übung: Vorlagen für
animierte Gifs erstellen
Photoshop starten, Datei – Neu, OK
Textwerkzeug auswählen (T), Farbe,
Schrift wählen und schreiben, OK
Datei – Als Web.. Speichern als ani3.gif
Letztes Wort löschen. Datei – Als Web..
Speichern als ani2.gif ...
Leichtere Methode: aus Flash heraus als
animiertes Gif speichern.
24. November 2011 106
Übung: Teilbilder
zusammenfassen
In Animation Shop 2 die erzeugten Bilder laden
mit Datei - Animationswizard. Speichern als
Type Animierte Gifs!
Testen mit Animation - Test. Zu schnell?
Unter Auswahl – Optionen – Verweilzeit
anpassen (Haken ankreuzen bei: Auf gesamte
Animation anwenden)
Nicht Wiederholen? Animation – Optionen
Bild in neue Seite einbauen: animation.html
24. November 2011 107
Icon für die Webseite
Bei Lesezeichen und in der Adressanzeige ein
Logo einbinden mit:
16x16 Pixel Bild, Transparenz erlaubt
Speichern zb als .Gif
In IrfanView öffnen. Von dort gleich wieder als
.ico speichern
24. November 2011 108
Übung: Transparente Gifs
Transparentes Gif erzeugen
Per Javascript (Pfad aufzeichnen) in die
Seite einbauen
24. November 2011 109