Hermann von Helmholtz-Zentrum für Kulturtechnik Übung: Multimedia-Anwendungen in den Wissenschaften. Tutorium. Mozilla Composer. Ein kurzer Überblick

Transkript

1 Tutorium Mozilla Composer Ein kurzer Überblick

2 Vorbereitung: Projektordner erstellen Für jede projektierte Website wird zuerst ein eigener Projektordner erstellt, der alle zu publizierenden Dateien aufnimmt. Dateien des Projekts können zur besseren Übersicht in Unterordner verteilt werden, kein Objekt der Website sollte sich jedoch außerhalb des Projektordners befinden. Beim Hochladen der Website auf den Webserver wird der gesamte Inhalt des Projektordners in das Serververzeichnis kopiert.

3 Composer starten Der Composer kann über Window -> Composer gestartet werden. Es öffnet sich ein neues, noch unbetiteltes Dokumenfenster. Die weiße Fläche zeigt das - noch leere - Dokument. Text kann, wie bei einer Textverarbeitung, hier eingegeben werden. Oben die Menüs des Composers, darunter die Symbolpaletten zum Anklicken, unten die Tabs ("Reiter") mit den verschiedenen Ansichten, in denen das HTML-Dokument bearbeitet werden kann.

4 Save and Browse Bearbeiten, sichern und in den Browser laden - dieser Rhythmus charakterisiert das Schreiben und Entwickeln von Webseiten 1. Bearbeiten, das heißt Text eingeben, formatieren, Seitenlayout und -farben gestalten, mit Hyperlinks andere Webdokumente verknüpfen, Bilder und andere Objekte einfügen. 2. Das Dokument regelmäßig sichern, vor allem vor dem Ansehen im Web-Browser! 3. Anschließend per Browse das aktuelle Dokument in den Web-Browser (Mozilla Navigator) laden und das Ergebnis überprüfen Die Ansicht in Mozilla Navigator (und anderen Browsern, wie z.b. dem Internet Explorer) ist in jedem Fall der internen Preview des Composers vorzuziehen. Nicht vergessen: Vor dem Laden in den Browser abspeichern!

5 Textimport

6 Text strukturieren Mit den Optionen in der unteren Symbolleiste lässt sich der eingefügte Text strukturieren und formatieren: - Absatzformate - Vorder/Hintergrundfarbe - Schrift kleiner/größer - Fett, Kursiv, Unterstrichen - Listen - Einrücken - Absatzausrichtung

7 Text strukturieren: Absätze und Überschriften Mit dem Absatzauswahl- Menü lassen sich Blockelemente (Absätze, Überschriften) erzeugen: 1. Einfügemarke in gewünschten Textteil bewegen 2. "Paragraph" für Absatz, "Heading 1-4" für Überschrift auswählen Durch einen Zeilenwechsel (<Enter>) lassen sich Absätze/Überschriften trennen. Bei einem bereits zugewiesenen Blockformat führt ein <Enter> zu einem manuellen Zeilenwechsel, zweimal <Enter> erzeugt ein neues Blockelement der gleichen Klasse. Die Leerzeilen zwischen Blockelementen fügt ein Browser bei der Anzeige automatisch ein.

8 Text strukturieren: Listen Nummerierte und nichtnummerierte Listen sind auch Blockelemente: 1. Gewünschten Textteil als "Body Text" markieren 2. Listenpunkte durch einmaliges <Enter> trennen 3. Das Symbol für "nummerierte" bzw. "nicht-nummerierte" Liste anklicken Über das Menü Format -> List Properties... lassen sich die Listenzeichen bzw. Zählzeichen näher bestimmen

9 Text formatieren Inline-Formatierungen wie Fett (Bold), Kursiv (Italics) und Unterstrichen (Underline): 1. Gewünschten Textteil auswählen 2. B, I oder U anklicken Das Menü Format -> Text Style bietet die komplette Auswahl an HTML-eigenen Stilen. Der untere Teil der Liste präsentiert die "semantischen" Stile, mit denen nicht eine bestimmte physische Auszeichnung zugewiesen wird, sondern die Bedeutung des Formatierten gesetzt wird.

10 Dokument sichern: Titel vergeben Das Dokument sollte regelmäßig gesichert werden. Beim ersten Sichern fordert Composer zur Eingabe des Seitentitels auf. Der Seitentitel beschreibt den Inhalt der Webseite. Er wird im Fensterbalken oben angezeigt. Beim Setzen eines Bookmarks (Lesezeichen, Favoriten) wird der Seitentitel als Verweistext verwendet. Suchmaschinen zeigen in ihren Ergebnislisten jeweils den Titel einer Webseite an

11 Dokument sichern Beim Sichern beachten: - Die Seite wird im Projektordner gesichert - Als Format ist "HTML Files" gewählt - Der Dateiname enthält keine Umlaute, Sonderzeichen, Interpunktionszeichen, Leerzeichen Es ist üblich, alle Buchstaben des Dateinamens klein zu schreiben

12 Dokumentansicht im Browser Nach dem Sichern kann man das Dokument durch Klicken auf "Browse" in den Web-Browser (Navigator) laden und überprüfen, ob die Darstellung den Erwartungen entspricht.

13 Arbeitsansichten der Composers Composer ermöglicht das Bearbeiten in unterschiedlichen Ansichten. Die Ansicht Normal zeigt eine WYSIWYG- Darstellung der Seite, zusätzlich werden weitere Merkmale, wie Anker, Tabellenbegrenzungen usw., angezeigt. WYSIWYG = What You See Is What You Get Darstellung eines Dokuments weitgehend entsprechend der Druck- bzw. Bildschirmausgabe.

14 Arbeitsansichten: HTML Tags HTML Tags zeigt eine strukturierte Ansicht des Dokuments mit den meisten HTML- Elementen. Einmal Klicken auf das Element-Symbol: Das gesamte Element wird ausgewählt Doppelklicken: Ein Eigenschaftsfenster zum Bearbeiten der Elementattribute öffnet sich.

15 Arbeitsansichten: <HTML> Source In <HTML> Source kann man direkt den Quelltext des Dokuments - was ansonsten ja Mozilla Composer übernimmt - bearbeiten. Im Browser (Navigator) kann durch den Menüpunkt View -> Page Source eine kolorierte Ansicht des Quelltexts jeder Webseite aufgerufen werden

16 Arbeitsansichten: Preview Preview entspricht im Großen und Ganzen der Darstellung der Webseite im Browser. Wer's aber genau wissen möchte, wird um das Laden der Seite per "Browse" im Navigator nicht herumkommen. Die fertige Webseite sollte auch in einem anderen Browser (Internet Explorer, Opera usw.) getestet werden.