Webdesign im Tourismus

Präsentation zum Thema: "Webdesign im Tourismus"—  Präsentation transkript:

1 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 Webdesign im Tourismus Informationsmanagement im Tourismus

2 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. Webdesign im Tourismus Informationsmanagement im Tourismus

3 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= Tourismuszentrale </a> Das Protokoll muss angegeben werden. Es kann mit einem Unterordner verknüfpft werden <a href= Region Cuxland </a> Webdesign im Tourismus Informationsmanagement im Tourismus

4 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 Webdesign im Tourismus Informationsmanagement im Tourismus

5 3.4 Hyperlinks (Webauftritt, innerhalb Webseite, Grafik)
Hyperlinks auf 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 "> 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? Webdesign im Tourismus Informationsmanagement im Tourismus

6 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=" Hyperlinktext</a> <a href="dokument.pdf"> Hyperlinktext</a> URL Aufbau Hyperlink auf Ordner " mit / am Ende beschleunigt Aufruf A11: Setzen Sie zwei Karten auf wegweiser.html, um die Anreise mit dem PKW und der Bahn darzustellen. Webdesign im Tourismus Informationsmanagement im Tourismus

7 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> Webdesign im Tourismus Informationsmanagement im Tourismus

8 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> Webdesign im Tourismus Informationsmanagement im Tourismus

9 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 ein und versehen Sie diese mit einem -Hyperlink Öffnen Sie die Webseite restaurant/speisekarte.html und fügen Sie am Ende der Seite mithilfe der Grafik oben.jpg von einen internen Hyperlink auf den Anfang der Webseite. Webdesign im Tourismus Informationsmanagement im Tourismus

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

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

12 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! Webdesign im Tourismus Informationsmanagement im Tourismus

13 5.3. Die Benutzeroberfläche
Webdesign im Tourismus Informationsmanagement im Tourismus

14 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) Webdesign im Tourismus Informationsmanagement im Tourismus

15 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 Webdesign im Tourismus Informationsmanagement im Tourismus

16 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 Webdesign im Tourismus Informationsmanagement im Tourismus

17 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. Webdesign im Tourismus Informationsmanagement im Tourismus

18 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). Webdesign im Tourismus Informationsmanagement im Tourismus

19 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 Webdesign im Tourismus Informationsmanagement im Tourismus

20 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: Webdesign im Tourismus Informationsmanagement im Tourismus

21 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. Webdesign im Tourismus Informationsmanagement im Tourismus

22 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. Webdesign im Tourismus Informationsmanagement im Tourismus

23 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. Webdesign im Tourismus Informationsmanagement im Tourismus

24 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 Webdesign im Tourismus Informationsmanagement im Tourismus

25 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 Webdesign im Tourismus Informationsmanagement im Tourismus