Webdesign im Tourismus Übung Prof. Dr. Markus Landvogt Zur Vorlesung Informationsmanagement im Tourismus Webdesign im Tourismus 3 HTML - GRUNDLAGEN DER ERSTELLUNG VON WEBSEITEN 3.3 Relative und absolute Pfade 3.4 Hyperlinks 5 TYPO3 5.3. Die Benutzeroberfläche WWW.M3L.DE Webdesign im Tourismus Informationsmanagement im Tourismus

3.3 Relative und absolute Pfade Relative Pfade weisen den Weg relativ zum aktuellen Standort aus: Bsp.: <a href=wegweiser.html> Wegweiser </a> Für die Verknüpfung zu einer Datei im gleichen Ordner, reicht lediglich der Dateiname. Bsp.: <img scr=„..bilder/hotel.jpg“> Ausgangspunkt ist immer, wo sich die Datei mit Link befindet. ../../ geht zwei Ebenen höher usw. WWW.M3L.DE Webdesign im Tourismus Informationsmanagement im Tourismus

3.3 Relative und absolute Pfade weisen den Weg direkt zum Standort aus: Bsp.: <a href=H:/hotel/wegweiser.html> Wegweiser </a> Dies ist nicht zu empfehlen, da der Bezug zum jeweiligen Rechner hergestellt wird. Bsp.: <a href=http://www.unsere-nordseekueste.de/> Tourismuszentrale </a> Das Protokoll http:// muss angegeben werden. Es kann mit einem Unterordner verknüfpft werden <a href= http://www.unsere-nordseekueste.de/index.php?id=13> Region Cuxland </a> WWW.M3L.DE Webdesign im Tourismus Informationsmanagement im Tourismus

3.4 Hyperlinks (Webauftritt, innerhalb Webseite, Grafik) Generell für Link: <a href="Hyperlinks"> Hyperlinktext</a> Hyperlinktext Nicht aussagekräftig aussagekräftig zurück Zurück zur Startseite Weiter geht‘s hier Infos zu Öffnungszeiten WWW.M3L.DE Webdesign im Tourismus Informationsmanagement im Tourismus

3.4 Hyperlinks (Webauftritt, innerhalb Webseite, Grafik) Hyperlinks auf E-Mail Adressen <a href="mailto:Adresse"> Hyperlinktext</a> <a href="mailto:Adresse"> Nehmen Sie mit uns Kontakt auf</a> <a href="mailto:Adresse?subject=Betreff der E-Mail"> Text</a> <a href="mailto:Adresse?body=vorgegebener Text"> Text</a> <a href="mailto:Adresse?cc=Adresse"> Text</a> <a href="mailto:Adresse?subject=Kontaktaufnahme&body=Ich bitte um Kontaktaufnahme"> Text</a> Problem? WWW.M3L.DE Webdesign im Tourismus Informationsmanagement im Tourismus

3. Hyperlinks (Webauftritt, innerhalb Webseite, Grafik) Hyperlinks auf andere Dokumenttyp <a href="text.txt"> Hyperlinktext</a> <a href="grafik.jpg"> Hyperlinktext</a> <a href="video.avi"> Hyperlinktext</a> <a href="music.mp3"> Hyperlinktext</a> <a href="http://www.m3l.de/webd/Hotel04.zip"> Hyperlinktext</a> <a href="dokument.pdf"> Hyperlinktext</a> URL Aufbau http://www.domainname.de:portnummer/ordner/webseite.html?ParameterListe Hyperlink auf Ordner "http://www.m3l.de/web/" mit / am Ende beschleunigt Aufruf A11: Setzen Sie zwei Karten auf wegweiser.html, um die Anreise mit dem PKW und der Bahn darzustellen. WWW.M3L.DE Webdesign im Tourismus Informationsmanagement im Tourismus

3.4 Hyperlinks (Webauftritt, innerhalb Webseite, Grafik) Hyperlinks zur Navigation innerhalb einer Seite Hyperlinkziel definieren: Anker setzen In beliebigem Tag: <h1 id="ziel"> … </h1> In einem Anker: <a name="ziel"> Hyperlink setzen <a href="#ziel">Ziel </a> WWW.M3L.DE Webdesign im Tourismus Informationsmanagement im Tourismus

3.4 Hyperlinks (Webauftritt, innerhalb Webseite, Grafik) A12: Setzen Sie in wegweiser.html zwei Anker, pkw und bahn, zu den mit folgenden Hyperlinks navigiert werden kann. <a href="#pkw">Anreise mit PKW</a> <a href="#ablauf">Anreise mit der Bahn</a> Setze von index.html einen Link mit <a href="ueberuns.html#ablauf">Tagesablauf</a> WWW.M3L.DE Webdesign im Tourismus Informationsmanagement im Tourismus

3.4 Hyperlinks (Webauftritt, innerhalb Webseite, Grafik) Grafiken als Hyperlinks <a href="hyperlink"><img src="Grafikdatei"></a> A14: Fügen Sie unter dem Adressblock am Ende der Seite index.html die Grafik brief.gif von www.m3l.de/web/brief.gif ein und versehen Sie diese mit einem E-Mail-Hyperlink (info@hotelvallora.com). Öffnen Sie die Webseite restaurant/speisekarte.html und fügen Sie am Ende der Seite mithilfe der Grafik oben.jpg von www.m3l.de/web/oben.jpg einen internen Hyperlink auf den Anfang der Webseite. WWW.M3L.DE Webdesign im Tourismus Informationsmanagement im Tourismus

3.4 Hyperlinks (Webauftritt, innerhalb Webseite, Grafik) Speichern Sie die Seite speisekarte.html und öffnen Sie sie im Browser. Testen Sie den Anker-Hyperlink. WWW.M3L.DE Webdesign im Tourismus Informationsmanagement im Tourismus

5.3. Die Benutzeroberfläche Modulleiste Was soll getan werden? Navigationsansicht In welcher Webseite/Seite wird etwas unternommen? Datenansicht/Arbeitsbereich Hier wird gearbeitet. WWW.M3L.DE Webdesign im Tourismus Informationsmanagement im Tourismus

5.3. Die Benutzeroberfläche Die Arbeitsoberfläche von TYPO3 ist in drei Hauptbereiche unterteilt. Modulleiste (links): In der Modulleiste wählen Sie Ihr gewünschtes Arbeitsmodul: Was wollen Sie tun? Navigationsansicht (Mitte): In der Navigationsansicht wird die komplette Seitenstruktur baumartig visualisiert. In gewohnter Art und Weise können Sie durch die einzelnen Webseiten und Strukturen navigieren: Welche Webseite oder Datei wollen Sie bearbeiten? Detailansicht (rechts): Die Detailansicht (auch Datenansicht) stellt die eigentliche Arbeitsfläche für den Nutzer dar. In diesem Bereich werden die Details zu den in der Navigationsansicht ausgewählten Elemente angezeigt: Hier wird gearbeitet! WWW.M3L.DE Webdesign im Tourismus Informationsmanagement im Tourismus

5.3. Die Benutzeroberfläche WWW.M3L.DE Webdesign im Tourismus Informationsmanagement im Tourismus

5.3. Die Benutzeroberfläche TYPO3 beinhaltet verschiedene Module zur Verwaltung und Bearbeitung Ihrer Webseite. Folgende Modulbereiche sollten Ihnen als Redakteur zur Verfügung stehen: Web Datei (File) Benutzerwerkzeuge (User Tools) Administratorwerkzeuge (Admin Tools) Hilfe (Help) WWW.M3L.DE Webdesign im Tourismus Informationsmanagement im Tourismus

5.3. Die Benutzeroberfläche Benutzeroberfläche - Modul Web Bereich zur Pflege der Inhalte. Zu sämtlichen Modulen, die sich unterhalb von Web befinden, öffnen sich auf der rechten Seite zwei Bereiche. Im linken Bereich zeigt eine Baumdarstellung die angelegten Seiten, im rechten Bereich befindet sich die Detaildarstellung. Seite: Mit Hilfe dieses Moduls wird der strukturelle Aufbau sowie die Pflege der Internetpräsentation erledigt. Anzeigen: Hier können Sie sich die Seiten anzeigen lassen WWW.M3L.DE Webdesign im Tourismus Informationsmanagement im Tourismus

5.3. Die Benutzeroberfläche Benutzeroberfläche - Modul Web Liste: Im Modul Liste werden sämtliche Datenbank-Datensätze angezeigt, die sich auf einer bestimmten Seite befinden. Arbeitsumgebung: Die Arbeitsumgebungsübersicht zeigt Änderungen, die in einer Arbeitsumgebung vorgenommen wurden. Mit den entsprechenden Berechtigungen können Sie die Änderungen von hier aus veröffentlichen. Funktionen: Schnelles Erzeugen mehrerer neuer Seiten WWW.M3L.DE Webdesign im Tourismus Informationsmanagement im Tourismus

5.3. Die Benutzeroberfläche Benutzeroberfläche - Modul Datei Der Modulbereich Datei liefert Ihnen eine Übersicht über die von Ihnen verwendeten Ressourcen. Hier können Sie Ihre Dateien wie z.B. Bilder hochladen und organisieren. Dateiliste: Im Modul Dateiliste finden Sie ein kleines Online-FTP Programm, mit dem Sie direkt im Backend unkompliziert Dateien hochladen, bearbeiten und löschen können. Auch hier steht Ihnen wieder eine Baumdarstellung zur Verfügung, die in diesem Fall Verzeichnisse enthält. WWW.M3L.DE Webdesign im Tourismus Informationsmanagement im Tourismus

5.3. Die Benutzeroberfläche Benutzeroberfläche - Modul Benutzerwerkzeuge In diesem Modulbereich kann jeder Benutzer Einstellungen zu seinem Benutzer Account und seiner persönlichen Benutzeroberfläche machen. Einstellungen: Hier können Sie Einstellungen an der Ansicht Ihrer Benutzeroberfläche (z.B. Sprache, Bildschirmaufbau) sowie Sicherheitseinstellungen Ihres Accounts vornehmen(z.B. Passwort ändern). WWW.M3L.DE Webdesign im Tourismus Informationsmanagement im Tourismus

5.3. Die Benutzeroberfläche Benutzeroberfläche - Modul Hilfe Der Modulbereich Hilfe beinhaltet eine Sammlung nützlicher Tipps und kleiner Beispiele sowie Informationen über TYPO3. Über Module: Ein Überblick über alle für diese Seite vorhandenen Module mit kurzer Erklärung. Über TYPO3: Allgemeine Informationen zu TYPO3, Versionsinformationen und Lizenzbedingungen. Handbuch WWW.M3L.DE Webdesign im Tourismus Informationsmanagement im Tourismus

5.3. Die Benutzeroberfläche Die Navigationsansicht (Seitenbaum) Die Navigationsansicht für die Module Web (Seite, Anzeigen, Liste, Arbeitsumgebung). Sie stellt die Struktur Ihrer Webseite baumartig gemäß den Zugriffsberechtigungen des jeweiligen Benutzers dar. Einzelne Ebenen können Sie einblenden oder ausblenden. Nach Änderungen an der Seitenstruktur kann mit „Reload“ die Ansicht erneuert werden. Kontextmenü: In der Navigationsansicht ist ein Kontextmenü mit vielen nützlichen Befehlen verfügbar. Dieses wird durch einen Klick mit der linken Maustaste auf das jeweilige Symbol vor dem Text aufgerufen: WWW.M3L.DE Webdesign im Tourismus Informationsmanagement im Tourismus

5.3. Die Benutzeroberfläche Die Detailansicht (Datenansicht) Die Detailansicht ist die zentrale Arbeitsoberfläche. Sie erscheint in der rechten Spalte. Hier werden die einzelnen Bestandteile des von Ihnen ausgewählten Elements angezeigt. Die Bearbeitungsoptionen (und damit auch die Art der Darstellung in der Detailansicht) sind abhängig von dem jeweiligen Modul, mit dem Sie gerade arbeiten. Die Detailansicht bietet Ihnen ebenfalls die für die einzelnen Objekte spezifischen Kontextmenüs an. Als Beispiele werden drei Detailansichten dargestellt, mit denen Sie als Redakteur meist arbeiten werden. WWW.M3L.DE Webdesign im Tourismus Informationsmanagement im Tourismus

5.3. Die Benutzeroberfläche Die Detailansicht (Datenansicht) Detailansicht des Moduls „Seite“ Wählen Sie im Modulbereich Web das Modul Seite und klicken Sie dann in der Navigationsansicht auf die Startseite Ihres Arbeitsbereichs Sie erhalten nun die Detailansicht für das Modul Seite Ihres Arbeitsbereichs Da Sie das Modul Seite gewählt haben, werden die Inhaltselemente Ihrer Seite und Bearbeitungsmöglichkeiten zum Ändern, Löschen und Erstellen neuer Inhaltselemente angezeigt. WWW.M3L.DE Webdesign im Tourismus Informationsmanagement im Tourismus

5.3. Die Benutzeroberfläche Die Detailansicht (Datenansicht) Detailansicht des Moduls „Anzeigen“ Wählen Sie im Modulbereich Web das Modul Anzeigen aus und klicken Sie dann wie im vorigen Beispiel in der Navigationsansicht auf die Startseite Ihres Arbeitsbereichs. Sie erhalten nun die Detailansicht für das Modul Anzeigen der Homepage Ihres Arbeitsbereichs: Das Modul Anzeigen zeigt in der Detailansicht eine Vorschau auf Ihre Seite. WWW.M3L.DE Webdesign im Tourismus Informationsmanagement im Tourismus

5.3. Die Benutzeroberfläche Die Detailansicht (Datenansicht) Detailansicht des Moduls „Liste“ Wählen Sie im Modulbereich Web das Modul Liste und klicken Sie dann in der Navigationsansicht auf die Startseite Ihres Arbeitsbereichs Setzen Sie das Häkchen der Checkbox "Erweiterte Ansicht" (ganz unten), worauf in den Listen einige Buttons angezeigt werden, mit denen die Datensätze schnell und komfortabel verwaltet werden können. Sie erhalten nun die Listenansicht Ihres Arbeitsbereichs WWW.M3L.DE Webdesign im Tourismus Informationsmanagement im Tourismus

5.3. Die Benutzeroberfläche Aufgaben: Dozent: Ordner „Testbereich“ als zusätzlicher Ordner anlegen Administratoren: Unter Testbereich für jeden Redakteur einen Ordner mit Nachnamen des Studierenden anlegen WWW.M3L.DE Webdesign im Tourismus Informationsmanagement im Tourismus