Webentwicklung mit Mozilla Composer I.

Transkript

1 Tutorium Webentwicklung mit Mozilla Composer I. Präsentation der Sitzung vom 12. Mai 2004 Martin Stricker

2 Programm Erstellen und Bearbeiten von Webseiten mit dem HTML-Editor Mozilla Composer Weitere Informationen: SELFHTML Mozilla Composer Kurzüberblick

3 Grundlagen Internet Ein Netz von Computernetzwerken: Viele miteinander verbundene Computer World Wide Web Eine Technik (eine Plattform, ein Dienst, ein Protokoll) zur Übermittlung und Darstellung von multimedialen Dokumenten

4 World Wide Web Ein Web-Browser (ein Web-Client) 1. lädt ein Dokument über das Internet anhand der Adresse, des URL, z.b: 2. stellt den Inhalt des geladenen Dokuments - unter Berücksichtigung der Formatanweisungen - dar. Mögliche Dokumentinhalte (Auswahl): Text Bilder, weitere Multimedia-Objekte ausführbarer Programmcode, z.b. Javascript

5 Webseiten (HTML-Dokumente) erstellen Editoren mit grafischer Benutzeroberfläche Mozilla Composer, Adobe GoLive, Macromedia Dreamweaver Browser-ähnliche Darstellung des Seiteninhalts (WYSIWYG = What You See Is What You Get) beim Bearbeiten Bearbeitung durch "Drag and Drop" Symbolleisten und Menüs erleichtern die Auswahl an Objekten und Formatierungsmöglichkeiten + Der Editor erstellt den Quelltext im Hintergrund Quelltext kann chaotisch aussehen (und zu fehlerhafter Darstellung führen), begrenzte Auswahl an Formatierungsmöglichkeiten, einheitliche Gestaltung einer ganzen Website schwierig

6 Webseiten (HTML-Dokumente) erstellen Quelltext-Bearbeitung viele Editoren, z.b. Phase 5, CreaText, Quanta... Direkte Eingabe des Quelltextes "Syntax Highlighting" - unterschiedliche Quelltextelemente werden farblich hervorgehoben Menüs und Symbolleisten fügen HTML- und CSS- Code automatisch ein + Umfassende Kontrolle über Struktur und Aussehen der Seiten, vereinheitlichte Seiten über CSS gut möglich Quelltextkenntnisse erforderlich, grosse Projekte müssen mit erheblichem Aufwand erstellt und gepflegt werden Für "höhere Ansprüche" an Design und Funktion sowie für "dynamische Skriptsprachen" (z.b. PHP) oder Javascript sind Quelltextkenntnisse unbedingt erforderlich

7 Fahrplan Mozilla Composer mit grafischer Oberfläche 12./19.5. Web-Entwicklung Composer erweitert + Quelltext ab HTML + CSS Composer / Quelltext-Editoren 2./9.6. Server + (S)FTP-Upload 26.5.

8 Projektordner Vor dem Beginn eines Webprojektes (einer Website) immer einen Projektordner erstellen! Der Projektordner enthält alle Dateien, die zur Website gehören: HTML- Dokumente, Bilder, CSS-Stylesheets usw.! Kein Dokument der Website darf sich außerhalb des Projektordners befinden, da nur der Inhalt dieses Ordners beim Publizieren auf den Server hochgeladen wird!

9 Titel eines HTML-Dokuments Der Seitentitel sollte immer eine treffende Beschreibung des Inhalts der Webseite darstellen. Der Seitentitel identifiziert ein Dokument in der Dachleiste des Dokumentfensters in den Ergebnislisten von Suchmaschinen, wie z.b. bei Google usw. in Verlaufslisten in den Lesezeichen (Bookmarks, Favoriten)

10 Elementstruktur eines HTML-Dokuments Der Inhalt eines HTML-Dokuments (einer Webseite) besteht aus einer Anzahl von Objekten (Elementen), die wiederum bestimmte Eigenschaften (Attribute) haben Beispiele für HTML-Elemente: H2 - Header 2 - Überschrift 2. Ordnung P - Paragraph - Textabsatz B - Body - Der gesamte Inhalt einer Webseite selbst ist ein Objekt Eigenschaften (Attribute) können z.b. sein: Ausrichtung, Schriftart, Schriftgröße, Schriftfarbe, Hintergrundfarbe, Abstände usw.

11 Elementhierachie eines HTML-Dokuments Die Objekte einer Webseite sind ineinander verschachtelt. Dabei "erben" die Elemente Eigenschaften von ihren "Elternelementen", in die sie eingebettet sind Beispiele: Das SPAN-Element ist in einen Textabsatz P eingebettet. Es hat die Eigenschaft "Text fett darstellen" und erbt ansonsten die Eigenschaften des Elternelements P (Schriftart, -größe usw.) Alle Elemente der Seite haben das Dokumentelement BODY als Elternelement