Embed Size (px)
Citation preview
04/11/23 Nr: 1
Kurs-Folien
www.staff.uni-mainz.de/slowi/html/html.ppt
A. Slowinski
Zum Ausdrucken Powerpoint öffnen, bei Drucken aufHandzettel und Folie an Seitengröße anpassen gehen,3 Folien
11. April 2023 2
Übung: Das Webverzeichnis als Laufwerk verbinden
Ihre Webseiten liegen unter \\uni-mainz.de\dfs\public\www-stud\benutzer bzwhttp://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" erreichbarAnm: für Mitarbeiter: \\uni-mainz.de\dfs\public\www-ma\benutzerShortcut auf dem Desktop: public_htmlInhaltliche Maßgabe: Projektziel (nichts kommerzielles, Testen und Ausprobieren ist OK)
11. April 2023 3
HTML und Tags
HTML ist eine "Auszeichnungssprache", ursprünglich sollte nur die Textlogik dargestellt werdenTextlayout ist nicht primärer Sinn, sondern Weitergabe von InformationMit "Tags" markierter Text:<h1>Gedicht</h1> wird zu einer max. großen Überschrift
11. April 2023 4
Wie sind Tags aufgebaut?
Elemente (Start und End-Tag)<element>inhalt</element><h1>Wie alles begann</h1>
AttributeDefinieren die Tags genauer:<element attribut="wert">inhalt</element><a href="brot.html">Brotrezept</a>
11. April 2023 5
Darstellung des Codes als WWW-Seite
WWW-Browser (Netscape, Internet Explorer) muß HTML-Code (auf seine Weise) interpretierenText-WWW-Browser wie Lynx unterscheiden sich stark in der Darstellung von den graphischen Browsern Zusätzlich kann jeder Benutzer seinen Browser individuell einstellen
11. April 2023 6
Layout-Unterschiede:IE/Mozilla
11. April 2023 7
Layout mit Text-WWW-Browser
Start – Programme – TeraTermPro – Host: alpha4
11. April 2023 8
Vom Benutzer verstellt
zdv uni slowi
Der Autor spricht zwar das letzte Wort, aber nicht in Fragen des Layouts!
11. April 2023 9
Werkzeuge zum Erstellen von WWW-Seite
Kein Spezialprogramm nötig!Herkömmlichen Editor
Notepad (Winx), Edit (DOS), SimpleText (Mac), vi (UNIX) ...
KonverterLatex2html, Word/Excel/Powerpoint-Export
HTML-Editoren, installiert im ZDVDreamweaver, Frontpage, Netscape Composer
Frei verfügbarer Editor: Phase V
11. April 2023 10
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-DateiProbleme gibt es bei manchen Formaten:Vorsicht bei TabulatorenFormatvorlagen verwendenblocksatz - geht verlorenzweispaltig - geht verloren?Fußnoten - gehen verloren
11. April 2023 11
Übung: erste HTML-Seite mit Dreamweaver
Öffnen: Start - Programme – DreamweaverNeu – erstellen - HTML"Teilen" anklickenIm oberen Fenster nach <body>Gedicht hier einfügen!</body>
Überschrift - <h1>Gedicht</h1>(kleines Gedicht tippen )Neue Zeile durch <br />Horizontale Trennlinie - <hr />
Seite speichern: Datei - Speichern im Webverzeichnis - gedicht.html
11. April 2023 12
Layout-Ansicht,Text ohne Tags eingeben
Text mit Tagseingeben
Eigenschaften per Klick ändern
11. April 2023 13
Übung: HTML-Tags (im oberen Fenster eingeben)
Formatieren Sie Ihr Gedicht:Stark: <strong>fett!</strong>Betont: <em>mit Emphase!</em>Kleine Überschrift: <h3>Text</h3>Ein Absatz: <p>lskjk</p>
11. April 2023 14
Übung: Listen
Legen Sie eine neue Webseite an: liste.htmlMachen Sie eine Liste Ihrer fünf liebsten:
Musiker als geordnete Liste: <ol><li>zb Bach</li><li> zb Prince </li></ol>Vorbilder als ungeordnete Liste: statt ol ul, also <ul><li>zb Merkel</li><li> zb Gandhi</li></ul>
11. April 2023 15
Ü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-ExplorerGehen Sie auf Extras – Ordneroptionen – AnsichtEntfernen Sie das Häkchen bei: Erweiterungen ... AusblendenJetzt können Sie überall im System die Endung Ihrer Dateien sehen!
11. April 2023 16
Dateinamen für Webseiten
Alles kleinschreiben!Verboten sind:
Umlaute: also NIE: übung.htm anlegen.Leerzeichen: also NIE: meine homepage.htmScharfes S: ß: also NIE:
Dateiendung immer: .html (.htm existiert zur Rückwärtskompatibilität mit DOS)
11. April 2023 17
Ä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 DreamweaverIm Browser: mit dem Knopf "Neu laden" geänderte Seite anschauen
11. April 2023 18
innen und außen bei WWW-Seiten
Außen:http://www.students.uni-mainz.de/ihrnamex/erste.html
Innen: file:///Webverzeichnis/erste.html
Dateizugriff
http
Web-Server:www.students.uni-mainz.de
11. April 2023 19
Übung: Seite von "innen" und "außen" im Browser
Jeweils in das Browser-Adressfenster tippen und aufrufen:Innen: Webverzeichnis\gedicht.htmlaußen: www.students.uni-mainz.de/user/gedicht.html(also für slowi: http://www.staff.uni-mainz.de/slowi/gedicht.html)
11. April 2023 20
Das wichtigste: Links sind Hyper!
Auch URL = Uniform Resource Locator genanntMacht das WWW erst stark (und unübersichtlich)Verbindungen von einer Textstelle zu einer anderenLernen wir verschiedene Links kennen und benutzen!
11. April 2023 21
Link-Adresse (=URL) zusammen?
Gateway://servername/Pfad/dateiGateway: 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!))
11. April 2023 22
Links im ...
gleichen Verzeichnis (relativ, nur Dateiname)<a href="zweite.html">klicktext</a>Unterverzeichnis = relativer Pfad: <a href="gif/blub.html">klicktext</a>Unterverzeichnis = absoluter Pfad: <a href="http://www.xyz.de/gif/blub.htm">klicktext</a>Auf einem anderer Server: <a href="http://www.sni.com/products">klicktext</a>Anker auf anderer Seite:<a href="zweite.html#unten">klicktext</a>
11. April 2023 23
Ü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: <a href="http://www.uni-mainz.de">Meine Universität</a>, <a href="mailto:[email protected]">Mail mir!</a>
11. April 2023 24
Übung: relativen Link setzen auf kurs.html
Neue Datei öffnen und abspeichern: kurs.htmlKurs.html soll eine Linkliste Deiner Übungen enthalten! (nächste Folie)<a href="gedicht.html">Gedicht</a>
11. April 2023 25
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?<a name="beliebigertext"></a>Wie linke ich auf den Anker?<a href="#beliebigertext">Klicktext</a>
11. April 2023 26
Ü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#achtSie 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
11. April 2023 27
Link auf Homepages setzen
Setze einen Link auf die Homepage von slowi:http://www.staff.uni-mainz.de/slowiSetze einen Link auf Deine eigene Homepage:http://www.students.uni-mainz.de/user Bemerke den Unterschied! (index of Seite)
11. April 2023 28
Testen von Webseiten
Bitte zum Testen ausschließlich über den Web-Browser zugreifen http://www.students.uni-mainz.de/username (beginnt unter dem Webverzeichnis)
11. April 2023 29
Struktur Deines Webbereichs
Webverzeichnisl\index.html = http://www.students.uni-mainz.de/deinbenutzername
index.htmlWillkommen!
Übungen zum Kurs
kurs.htmlGedichtLinks
HeaderDiashowFarben
Tabellen...
gedicht.html
links.html
header.html
dia1.html
11. April 2023 30
Übung: lege Deine eigene Homepage an
Lege im Webverzeichnis eine Datei an, deren Name index.html ist. Das wird Deine eigene Homepage/StartseiteSchreibe in sie hinein: "Willkommen - Übung zum HTML-Kurs" und lege darauf einen Link nach kurs.htmlProbier den Link auf Deine Homepage noch einmal aus. Was hat sich geändert?
11. April 2023 31
Ü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
11. April 2023 32
Übung: Anker setzen
Anker definieren: Maus bei "Vorwort zur 2. Auflage" positionierenEinfügen - benannter Ankerpunkt – zwei eingeben – OK So sieht der Code aus: <a name="zwei"></a>Bitte für jedes Vorwort einen Anker setzen
11. April 2023 33
Übung: Links setzen
Links.html öffnen und dort eine Liste anlegen mit (Klicktext ausdenken)Link auf 2. Auflage setzen:vorworte.html#zweiDas gleiche mit allen anderen Auflagenvorworten wiederholenAusprobieren!HTML-Tag: <a href="vorworte.html#zwei">vorwort 2</a>
11. April 2023 34
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 markieren2. Im Eigenschaften-Fenster bei Hyperlink: #zwei
eingeben3. Speichern und ausprobierenHTML-Code: <a href="#zwei">2.Auflage</a>
11. April 2023 35
HTML-Struktur: Head & Body
Head = das, was nicht in der Seite auftaucht (keywords, title usw)HTML-Tag: <head></head>Body = der eigentliche Seitentext. Generelle Einstellungen (Farben usw.) werden im Tag <body> gemacht
11. April 2023 36
Ü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)
11. April 2023 37
Ü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 <meta name="keywords" content=„Homepage,Mainz"> Beschreibung: "Homepage Germanistik" wird zu: <meta name="description" content=„Homepage Germanistik">
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“
11. April 2023 38
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:<meta http-equiv="Page-Enter" content="blendTrans(Duration=3)">
11. April 2023 39
Ü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<meta http-equiv="refresh" content="3; URL=dia2.html">Mit Dia2.html das selbe tun: einfügen – head ...
11. April 2023 40
Ü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: <p style="color="#0000FF">blau</p>RGB einfach mal ausprobieren: http://www.staff.uni-mainz.de/slowi/flash/rgb.html
11. April 2023 41
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
11. April 2023 42
Eigener Domainname
Um privat Webseiten zu betreiben, wenden Sie sich an einen ProviderDieser gibt Ihnen Speicherplatz und DomainnamenSie bekommen dort einen Benutzernamen, Passwort und einen Server genannt, auf den sie Ihre Webseiten kopieren
11. April 2023 43
Bilder auf HTML-Seiten
Bilder sind in HTML nur referenziert.Die Bilder bleiben in eigenen Dateien stehen.
<img src="kopf.gif">
11. April 2023 44
Web-Bild-dateiformate (im Browser anzeigbar)
Gif: Graphics Interchange Format (mit verlustfreier Komprimierung), aber nur 256 Farben, dafür transparent und interlacedJpg: Joint Photographic Experts Group: Komprimierung mit Verlusten, aber 16,7 Mio Farben darstellbarPng: Portable Network Graphic: verlustfrei, 16,7 Mio Farben, interlacing, Transparenz über Alpha-Kanal
11. April 2023 45
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)
11. April 2023 46
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
11. April 2023 47
Ü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/ oderhttp://www.geo.de (Fotogalerie)Ein Bild zu kopieren geht, indem man mit der rechten Maus auf das Bild klicktUnd mit "Bild speichern/ Save Image as" die Bilddatei unter dem Webverzeichnis abspeichert.
11. April 2023 48
Photoshop
Kurz-Anleitung: http://www.staff.uni-mainz.de/slowi/html/photoshop/Kurs im ZDVScript in der BeratungsstelleTutorien im Internet (bei Google nach Tutorial photoshop suchen)
11. April 2023 49
Ü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.
11. April 2023 50
Ü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.jpgDie sichtbaren Pixel und Treppen sind nur manchmal als künstlerische Verfremdung sinnvoll.
11. April 2023 51
Übung: Grafik einbinden (Dreamweaver)
Öffne eine neue Datei, speichere sie als bilderseite.html ab.Drücke auf Einfügen-BildWähle ein Bild aus der vorigen Übung ausSchreib im Eigenschaften-Fenster in das Fenster "Alt": Campus-BildSetz einen Link "Bilder einbinden" von kurs.html auf bilderseite.html.
11. April 2023 52
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 anklickbarRahmen 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
11. April 2023 53
Übung: Hintergrundbild (Dreamweaver)
Das Bild wird so oft wiederholt, dass der ganze Hintergrund ausgefüllt ist.Das Bild ist dabei Teil der Seiteneigenschaften <body background="bildgross.jpg">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?
11. April 2023 54
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.
11. April 2023 55
Übung: Kacheln erzeugen (Photoshop)
Neues Bild anlegen: kachel.jpg (200x200 pixel)Etwas mit dem Stift oder anderem Werkzeug zeichnenHaben Sie beim Zeichnen mehrere Ebenen erzeugt? Dann auf: Ebene – Auf Hintergrundebene reduzierenAuf "Filter – Sonstige Filter – Verschiebungseffekt" gehen, (jeweils 80 Pixel eingestellt lassen) Diese Schritte mehrmals wiederholenDatei – Für Web speichernDreamweaver: kachel.html anlegen, die kachel.jpg in den Seiten-Hintergrund laden
11. April 2023 56
Übung: Hintergrundbild erzeugen (Photoshop)
Nimm ein Bild und öffne es in PhotoshopBild aufhellen: Bild – Anpassen – Farbton / SättigungFarbton 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
11. April 2023 57
Fotogalerie mit Adobe Photoshop
Photoshop startenDatei – Automatisieren –Web Photo GalleryQuelle und Ziel wählenOk klicken, Fehlermeldung wegklicken, AbbrechenFertig!
11. April 2023 58
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)!
11. April 2023 59
Fotogalerie - Metaangaben
Optionen: bei Allgemein „Meta-Angaben“ und bei „Große Bilder" die Felder, die übernommen werden sollen, anklicken.
11. April 2023 60
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
SchlagschattenSich wiederholenden Fotos als Webseitenhintergrund
11. April 2023 61
"Clickable Maps, Hotspots"
HyperLinks funktionieren nicht nur bei markiertem Text, sondern auch bei markierten BildteilenDefinition von anklickbaren Kreisen, Rechtecken und Polygonen in den HTML-Editoren möglichFür Stadtpläne und Landkarten mit "heißen Stellen"Zusatzübung deutschland.gif im Download-Verzeichnis
11. April 2023 62
Funktion von Clickable Maps
www.berlin.de
www.frankfurt.de
www.nordsee.deVon der Grafik aus führen Verweise auf HTML-Dateien
HTML-Seiten
Anwählen "heißer"Bereiche
11. April 2023 63
Übung: Clickable Map in Dreamweaver
Datei – Neu – clickable-dream.html Aus dem Download-Verzeichnis: deutschland.gif"Einfügen – Bild" in clickable.html1. Auf das eingebundene Bild klicken2. Map-Bearbeitungswerkzeug verwenden im Eigenschaftenfenster (unten)3. Form aus dem Werkzeug auswählen4. Bereich markieren5. Link für den Bereich setzen
11. April 2023 64
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:
TabellenEbenenFrames
Templates zb unter: http://www.on-mouseover.de/templates/templates.html
11. April 2023 65
Text anordnen (Tabellen)
Tabellen und Anordnung von Text und Grafiken: <table> ... </table>Zeile definieren: <tr>Spalte definieren: <td>z.B.: <table><tr><td>1. Spalte</td><td>2. </td></tr>
<tr><td>1. Spalte, 2. Zeile</td><td>2.2</td></tr></table>Dreamweaver-Menü: Einfügen – TabelleACHTE IMMER darauf, in welcher Tabellenansicht Du Dich befindest, Layout oder Standard
11. April 2023 66
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 ZellenAbstand und AusrichtungAlle Eigenschaften edierbar mit rechter Mausklick auf die TabelleDie Markierung von Tabellen funktioniert besonders gut mittels des unteren linken Bildrands
11. April 2023 67
Ü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
11. April 2023 68
Übung: Inhalte von Zellen ausrichten
Die Inhalte sollen nach oben ausgerichtet sein. <td valign="top"> Im Eigenschaften-Fenster ändern Sie die vertikale Ausrichtung auf "oben“, indem Sie die Zelle anklicken und im Klappmenü „Vert“ auf „oben“ wechseln
11. April 2023 69
Ü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 einbindenAls tabelle-dream.html speichern
11. April 2023 70
Übung: Tabelle mit Layout: tabelle-layout.html
1. Fenster – Einfügen, oben in der Kartenreiterleiste2. 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 3 4 5
11. April 2023 71
Übung: Bilder in die Tabelle einfügen
Kopieren Sie ein beliebiges Bild aus den Campus-Impressionen unter: www.staff.uni-mainz.de/slowi/html/ einKlicken 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
11. April 2023 72
Ü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 ausSortieren Sie die Tabelle mit dem Menü Befehle – Tabelle sortieren nach der zweiten Spalte
11. April 2023 73
Eigenschaften von Ebenen
Über das Bereichs-Tag: <div></div>Die Eigenschaften erhält die div-Ebene durch Stylesheet-Eigenschaften: Hintergrundbild, Position, Größe, Überlappungen, SichtbarkeitDreamweaver kann nur mit absolut positionierten Ebenen umgehen (im Gegensatz zu %-Angaben)
11. April 2023 74
Übung: Layout mit Ebenen – relativ positioniert
Einfügen – Layoutobjekte – EbeneOrdnen Sie zwei Ebenen nebeneinander an.Ändern Sie die Eigenschaften im Css-Stile- FensterFä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)
11. April 2023 75
Übung: absolut positionierte Ebenen
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 noch sichtbar)
1
2
11. April 2023 76
Umwandeln von Ebenen in Tabellen
Speichern Sie die Ebenen-Seite als ebene.htmlTesten Sie: man kann <div>-Tags in Tabellen umwandeln: Modifizieren – Konvertieren – Ebene in Tabelle umwandeln.Funktioniert umso schlechter, je komplexer die Struktur ist.
11. April 2023 77
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 ausschaltenIn eine 4. Ebene schreiben Sie Ihre Navigation in eine Liste (Bild1-Bild3)Setzen Sie Hyperlinks zum Steuern der Ebenen auf: <a href=„#" >Bild 1</a>, 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.htmlEin Beispiel finden Sie im Download-Bereich unter ebenen-sichtbarkeit.html
11. April 2023 78
Was sind Frames?
Aufteilung des Browsers in mehrere Fenster, jedes Fenster enthält eine WWW-SeiteFür alle Hypertextlinks muß der Autor ein sich für Zielfenster ("target") entscheidenProbleme beim Anzeigen (noframes), Ausdrucken, mit der Sicherheit sind möglichEs wird immer die gleiche Adresse angezeigt (bei manchen Browsern Probleme bei Setzen von Lesezeichen)
11. April 2023 79
Frames
Frameset-Seite ist zusammengesetzt aus mehreren HTML-Dateien, den FramesDie Art der Zusammensetzung wird über die Frameset-Datei bestimmt. Sie bildet den Rahmen, in dem die anderen HTML-Dateien dargestellt werden.
11. April 2023 80
1 Frameset und 2 Frames
rechts.htmlname="mainFrame"
kurs-frame.htmlname="leftFrame"
frameset.html (das Frame-Set)<frameset cols="*,*"><frame src="kurs-frame.html" name="leftFrame"><frame src="rechts.html" name="mainFrame"> </frameset>
11. April 2023 81
Ü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 OKJetzt haben Sie eine Frameset-Seite mit 2 Frames angelegt, also insgesamt 3 Seiten!Zum Bearbeiten brauchen Sie das "Fenster –Frames"
11. April 2023 82
So soll ihr Bildschirm jetzt aussehen
Fenster – Andere – FramesFenster – Eigenschaften
3 Dateien inBearbeitung!Welche bearbeitet wird, sieht man zb hier.
Rahmen desFrame-Fensters
11. April 2023 83
Ü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.htmlKlicken 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).
11. April 2023 84
Ü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: <base target="mainFrame">
11. April 2023 85
Übung Sprungziele: Link-Ziele einzeln setzen
Öffnen eines Links in einem neuen Fenster mit dem Attribut target/Ziel beim Link: <a href=link.html target=_parent>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
11. April 2023 86
Eigenschaften von Frames ändern
Frame-Eigenschaften (Rand, Scrollbalken usw) können Sie über das Eigenschaften-Fenster ändernUm die Eigenschaften zu sehen, müssen Sie die Alt-Taste gedrückt halten und dann in den Rahmen hineinklicken oderIn das Fenster Frames klicken
11. April 2023 87
Organisieren vieler Seiten mit Sites:
viele Webseiten gleichzeitig bearbeitenMan kann Hyperlinks auf Gültigkeit prüfenkeine Zwischenstadien der eigenen Seiten sichtbar machen, sondern nur das EndproduktFrames vermeiden, aber trotzdem einheitliche Navigation verwendenBereiche vor unabsichtlichem Ändern schützenMan kann Vorlagen und Bibliotheksobjekte ändern und alle Dateien dieser Vorlage werden in einem Rutsch mitgeändert.
11. April 2023 88
Übung: Site-Definition I: Lokale Infos
Auf den Menüpunkt Site-Neue Site gehenSite-Name: frei vergebbar, zb vornameLokaler Stammordner: Verzeichnis, in dem Sie Ihre Webseiten vorbereiten(Andere Felder auf Standard stehen lassen)
11. April 2023 89
Ü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.
11. April 2023 90
Site Definition Alternative bei Provider
Normalerweise haben Sie bei einem Provider nicht die Möglichkeit, den Webbereich über „Datei speichern“ anzusprechenProvider bietet zb Zugang über FTP (File Transfer Protocol): Servername, Benutzername und Passwort müssen Sie konfigurierenVorsicht, bei FTP wird das Passwort im Klartext über die Leitung geschickt (unsicher)
11. April 2023 91
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.
11. April 2023 92
Ü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ählenSeite schon vorhanden: zuweisen mit: Modifizieren – Vorlagen –Vorlage auf Seite anwenden
11. April 2023 93
Programmieren im WWW
Wo ist die Intelligenz, d. h. das Programm, das die Dynamik erreicht?auf der Serverseite: CGI, php, SSIauf der Browserseite: JAVA, embedded Javascript/Jscript, Vbscript …
11. April 2023 94
Interaktivität: Serverseitig
WWW-ServerWWW-Browser
OK
Formular
http://host.de/script.pl?Feld=Inhalt&Feld2=Inhalt2
<form action="script.pl" method="POST">
Rückmeldung als HTML-Datei oder URL
Script.plFeld1 Inhalt1Feld2 Inhalt2... Verarbeitung
Ergebnis
method="GET"
stdin "Feld=Inhalt&Feld2=Inhalt2"
11. April 2023 95
Interaktivität: Browserseitig
WWW-ServerWWW-Browser
Javascript / Java Bytecode
HTML-Datei
Ausführung: unabhängig vom Browser
11. April 2023 96
Formulare im WWW
Ein Formular zu erzeugen, ist einfachhoher Arbeitsaufwand bei der Verarbeitung der Formulardaten!Frontpage-Formulare funktionieren nur mit einem Frontpage-Server
11. April 2023 97
Übung: im Dreamweaver Form anlegen
1xden Menüpunkt: Einfügen – Formular - Formular ausführen (es sollte nur EIN form-Tag geben = 1 rotes RechteckIn den Form-Bereich klicken (rotes Rechteck)Fenster – Einfügen öffnen, dort von "Allgemein" auf "Formular" schalten.
11. April 2023 98
Formularelemente
Neben ein- und mehrzeiligem Text (beides unter "Textfeld")<input type=text …<textarea …Radio Buttons (immer nur einer ist "an")<input type=radio …Checkbox (mehrere anklickbar)<input type=checkbox …Aufklappmenüs <select …><option…Wichtig: Der Abschickknopf! Submit<input type=submitVersteckte Felder:<input type=hidden
11. April 2023 99
Welches Element für welchen Zweck?
1. Wenige Worte:<input type=text …2. Mehrere Sätze: <textarea …3. Eine Antwort (zb ja/nein) <input
type=radio4. Mehrere Antworten möglich:<input
type=checkbox …5. Große Auswahl: <select><option…
1 2 34 5
11. April 2023 100
Efa
Das ZDV-Programm nimmt alle Formulareingaben entgegen
Daten als E-Mail verschicken oderIn eine Datei speichern
Konfiguration von Efa mit versteckten Feldern im Formular: <input type=„hidden“ name=„….“>
11. April 2023 101
Efa – ZDV-Programm zur Formularverarbeitung
Notwendige „hidden“ Felderablage=mailadresseinhalt=alle felder, die sie ausgeben wollen. Dabei muß jeweils der name des Feldes im value der Variable inhalt in %-Zeichen geklammert auftauchen. Zb:Name=personInhalt=„… %person% …“
11. April 2023 102
Ü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.
11. April 2023 103
Javascript
Das Script "verbirgt" sich in der HTML-DateiInterpretation der Daten beim Laden"Event"-gesteuerte Sprache: man kann Mausklicks und Eingaben abfangen und Aktionen des Programms daranhängen
11. April 2023 104
Übung: Rollover: Javascript verwenden
Der bekannte Effekt, dass sich beim herüberfahren mit der Maus etwas ändert.Lege mit Photoshop 2 Bilder anjavascript.html anlegenEinfügen – Grafikobjekte - RolloverbildOriginal und Rollover mit den beiden Bildern füllen, "wenn angeklickt" auf die eigene Homepageadresse setzen.
11. April 2023 105
Ü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 bewegenFenster – Andere - Zeitleiste: Auto-Wdhlg. einschalten.
11. April 2023 106
Übung: Vorlagen für animierte Gifs erstellen
Photoshop starten, Datei – Neu, OKTextwerkzeug auswählen (T), Farbe, Schrift wählen und schreiben, OKDatei – Als Web.. Speichern als ani3.gifLetztes Wort löschen. Datei – Als Web.. Speichern als ani2.gif ...Leichtere Methode: aus Flash heraus als animiertes Gif speichern.
11. April 2023 107
Ü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 – OptionenBild in neue Seite einbauen: animation.html
11. April 2023 108
Icon für die Webseite
Bei Lesezeichen und in der Adressanzeige ein Logo einbinden mit:<LINK REL="SHORTCUT ICON" HREF="http://www.staff.uni-mainz.de/slowi/slowi.ico"> 16x16 Pixel Bild, Transparenz erlaubtSpeichern zb als .GifIn IrfanView öffnen. Von dort gleich wieder als .ico speichern
11. April 2023 109
Übung: Transparente Gifs
Transparentes Gif erzeugenPer Javascript (Pfad aufzeichnen) in die Seite einbauen
