Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

1/16/2014Nr: 1 Kurs-Folien www.staff.uni- mainz.de/slowi/htmlwww.staff.uni- mainz.de/slowi/html/html.ppt A. Slowinski Zum Ausdrucken Powerpoint öffnen,

Ähnliche Präsentationen


Präsentation zum Thema: "1/16/2014Nr: 1 Kurs-Folien www.staff.uni- mainz.de/slowi/htmlwww.staff.uni- mainz.de/slowi/html/html.ppt A. Slowinski Zum Ausdrucken Powerpoint öffnen,"—  Präsentation transkript:

1 1/16/2014Nr: 1 Kurs-Folien mainz.de/slowi/htmlwww.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, 3 Folien

2 16. Januar Übung: Das Webverzeichnis als Laufwerk verbinden Ihre Webseiten liegen unter \\uni-mainz.de\dfs\public\www-stud\benutzer bzw \\uni-mainz.de\dfs\public\www-stud\benutzer 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\\uni- mainz.de\dfs\public\www-stud\benutzer Anm: für Mitarbeiter: \\uni-mainz.de\dfs\public\www-ma\benutzer \\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)

3 16. Januar 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

4 16. Januar Wie sind Tags aufgebaut? Elemente (Start und End-Tag) inhalt Wie alles begann Attribute Definieren die Tags genauer: inhalt Brotrezept

5 16. Januar 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

6 16. Januar Layout-Unterschiede: IE/Mozilla

7 16. Januar Layout mit Text-WWW- Browser Start – Programme – TeraTermPro – Host: alpha4

8 16. Januar Vom Benutzer verstellt zdv uni slowi Der Autor spricht zwar das letzte Wort, aber nicht in Fragen des Layouts!

9 16. Januar 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 VPhase V

10 16. Januar 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

11 16. Januar Ü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

12 16. Januar Layout-Ansicht, Text ohne Tags eingeben Text mit Tags eingeben Eigenschaften per Klick ändern

13 16. Januar Übung: HTML-Tags (im oberen Fenster eingeben) Formatieren Sie Ihr Gedicht: Stark: fett! Betont: mit Emphase! Kleine Überschrift: Text Ein Absatz: lskjk

14 16. Januar Ü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

15 16. Januar Ü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!

16 16. Januar 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)

17 16. Januar Änderungen im Web ansehen Zum Anschauen die Webseite immer über den Server aufrufen, nur dann sieht man alle Fehler (also mit Ändern & Speichern im Dreamweaver Im Browser: mit dem Knopf "Neu laden" geänderte Seite anschauen

18 16. Januar innen und außen bei WWW- Seiten Außen: Innen: file:///Webverzeichnis/erste.html Dateizugriff http Web-Server:

19 16. Januar Übung: Seite von "innen" und "außen" im Browser Jeweils in das Browser-Adressfenster tippen und aufrufen: Innen: Webverzeichnis\gedicht.html außen: (also für slowi: mainz.de/slowi/gedicht.html)

20 16. Januar 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!

21 16. Januar 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!))

22 16. Januar 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

23 16. Januar Ü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 16. Januar Ü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

25 16. Januar 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

26 16. Januar Übung: Link auf Anker Machen Sie in links.html einen neuen Link auf (Klicktext: Anker anspringen): 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 mainz.de/slowi/html/vorworte.html

27 16. Januar Link auf Homepages setzen Setze einen Link auf die Homepage von slowi: Setze einen Link auf Deine eigene Homepage: Bemerke den Unterschied! (index of Seite)

28 16. Januar Testen von Webseiten Bitte zum Testen ausschließlich über den Web-Browser zugreifen mainz.de/username (beginnt unter dem Webverzeichnis)

29 16. Januar Struktur Deines Webbereichs Webverzeichnisl\index.html = index.html Willkommen! Übungen zum Kurs kurs.html Gedicht Links Header Diashow Farben Tabellen... gedicht.html links.html header.html dia1.html

30 16. Januar Ü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?

31 16. Januar Übung: Anker setzen (Vorarbeiten) 1.Übungsdatei kopieren: im Webbrowser auf mainz.de/slowi/html/vorworte.html surfen, dann auf "Datei – Speichern" – "Webverzeichnis"http://www.staff.uni- mainz.de/slowi/html/vorworte.html 2.Öffnen Sie vorworte.html im Dreamweaver

32 16. Januar Ü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

33 16. Januar Ü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

34 16. Januar 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

35 16. Januar 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

36 16. Januar Ü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)

37 16. Januar Ü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

38 16. Januar 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:

39 16. Januar Übung: DiaShow automatisch weiterleiten Dazu vorbereitend die Dateien dia1.html – dia3.html kopieren 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...

40 16. Januar Ü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:

41 16. Januar 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 CSSFolien zu CSS: mainz.de/slowi/html/css.ppt

42 16. Januar 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

43 16. Januar Bilder auf HTML-Seiten Bilder sind in HTML nur referenziert. Die Bilder bleiben in eigenen Dateien stehen.

44 16. Januar 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

45 16. Januar 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)

46 16. Januar 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)Münz-Referenz Pixel-Größe (width="123" height="123") und alternative Text (alt="Blume") immer angeben (Münz-Referenz)Münz-Referenz Title="text" angezeigt beim drüberfahren mit der Maus

47 16. Januar Übung: Grafiken aus dem Web kopieren Copyright beachten! Scannt lieber eigene Bilder! Probier es aus mit den Campus-Impressionen unter: oder (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.

48 16. Januar Photoshop Kurz-Anleitung: mainz.de/slowi/html/photoshop/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)

49 16. Januar Übung: Bildgröße verringern Öffne das (min 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.

50 16. Januar Ü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.

51 16. Januar Ü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.

52 16. Januar 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:

53 16. Januar Ü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?

54 16. Januar 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.

55 16. Januar Ü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

56 16. Januar Ü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

57 16. Januar Fotogalerie mit Adobe Photoshop Photoshop starten Datei – Automatisieren –Web Photo Gallery Quelle und Ziel wählen Ok klicken, Fehlermeldung wegklicken, Abbrechen Fertig!

58 16. Januar 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)!

59 16. Januar Fotogalerie - Metaangaben Optionen: bei Allgemein Meta-Angaben und bei Große Bilder" die Felder, die übernommen werden sollen, anklicken.

60 16. Januar Zusatz-übungen: Bildbearbeitung 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

61 16. Januar "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

62 16. Januar Funktion von Clickable Maps Von der Grafik aus führen Verweise auf HTML-Dateien HTML-Seiten Anwählen "heißer" Bereiche

63 16. Januar Übung: Clickable Map in Dreamweaver Datei – Neu – clickable-dream.html Aus dem Download-Verzeichnis: deutschland.gifdeutschland.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

64 16. Januar 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: mouseover.de/templates/templates.html

65 16. Januar Text anordnen (Tabellen) Tabellen und Anordnung von Text und Grafiken:... Zeile definieren: Spalte definieren: z.B.: 1. Spalte Spalte, 2. Zeile 2.2 Dreamweaver-Menü: Einfügen – Tabelle ACHTE IMMER darauf, in welcher Tabellenansicht Du Dich befindest, Layout oder Standard

66 16. Januar 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

67 16. Januar Ü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

68 16. Januar Ü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

69 16. Januar Übung: Tabellendaten importieren Dreamweaver kann csv-Dateien in HTML- Tabellen direkt umwandeln im Webverzeichnis speichern Einfügen – Tabellenobjekte - Tabellendaten – studi.txt auswählen und einbinden Als tabelle-dream.html speichern

70 16. Januar Ü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

71 16. Januar Übung: Bilder in die Tabelle einfügen Kopieren Sie ein beliebiges Bild aus den Campus-Impressionen unter: 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

72 16. Januar Ü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

73 16. Januar 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)

74 16. Januar Ü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)

75 16. Januar Ü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

76 16. Januar 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.

77 16. Januar 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

78 16. Januar 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öglichSicherheit Es wird immer die gleiche Adresse angezeigt (bei manchen Browsern Probleme bei Setzen von Lesezeichen)

79 16. Januar 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.

80 16. Januar Frameset und 2 Frames rechts.html name="mainFrame" kurs-frame.html name="leftFrame" frameset.html (das Frame-Set)

81 16. Januar Ü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"

82 16. Januar So soll ihr Bildschirm jetzt aussehen Fenster – Andere – Frames Fenster – Eigenschaften 3 Dateien in Bearbeitung! Welche bearbeitet wird, sieht man zb hier. Rahmen des Frame-Fensters

83 16. Januar Ü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).

84 16. Januar Ü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:

85 16. Januar Ü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

86 16. Januar 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

87 16. Januar 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.

88 16. Januar Ü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)

89 16. Januar Ü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.

90 16. Januar 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)

91 16. Januar 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.

92 16. Januar Ü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

93 16. Januar 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 …

94 16. Januar Interaktivität: Serverseitig WWW-Server WWW-Browser OK Formular Rückmeldung als HTML-Datei oder URL Script.pl Feld1 Inhalt1 Feld2 Inhalt2... Verarbeitung Ergebnis method="GET" stdin "Feld=Inhalt&Feld2=Inhalt2"

95 16. Januar Interaktivität: Browserseitig WWW-Server WWW-Browser Javascript / Java Bytecode HTML-Datei Ausführung: unabhängig vom Browser

96 16. Januar Formulare im WWW Ein Formular zu erzeugen, ist einfach hoher Arbeitsaufwand bei der Verarbeitung der Formulardaten! Frontpage-Formulare funktionieren nur mit einem Frontpage-Server

97 16. Januar Ü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.

98 16. Januar Formularelemente Neben ein- und mehrzeiligem Text (beides unter "Textfeld")

99 16. Januar Welches Element für welchen Zweck? 1.Wenige Worte:

100 16. Januar Efa Das ZDV-Programm nimmt alle Formulareingaben entgegen Daten als verschicken oder In eine Datei speichern Konfiguration von Efa mit versteckten Feldern im Formular:

101 16. Januar 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% …

102 16. Januar Übung: Kontaktformular Kopieren Sie sich das Beispielformular von der Materialienwebseite. Ändern Sie die adresse auf Ihre Studentenadresse. Probieren Sie das Formular aus. Fügen Sie ein Textfeld und ein Klappmenü hinzu.

103 16. Januar 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

104 16. Januar Ü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.

105 16. Januar Ü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.

106 16. Januar Ü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.

107 16. Januar Ü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

108 16. Januar 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

109 16. Januar Übung: Transparente Gifs Transparentes Gif erzeugen Per Javascript (Pfad aufzeichnen) in die Seite einbauen


Herunterladen ppt "1/16/2014Nr: 1 Kurs-Folien www.staff.uni- mainz.de/slowi/htmlwww.staff.uni- mainz.de/slowi/html/html.ppt A. Slowinski Zum Ausdrucken Powerpoint öffnen,"

Ähnliche Präsentationen


Google-Anzeigen