Web 2.0 im Unterricht Web-Editoren Kapitel 16 Seite 1 Ein portabler Web-Editor http://www.nvu-composer.de Wer viel Zeit in eine Website investieren will ist gut beraten, eine professionelle Software für Webde- signer zu beschaffen. Diese Programme sind sehr leistungsfähig, haben einen grossen Funktionsum- fang, sind gut dokumentiert, aber in der Regel auch sehr teuer. Daneben gibt es unzählige Web-Editoren mit be- schränkten Anwendungsmöglichkeiten, die dafür sehr leicht zu bedienen und erst noch kostenlos sind. Eine Sonderstellung hat der portable NVU- KompoZer, der nicht installiert werden muss und problemlos auf einem Stick Platz hat. Sie können das Portable Programm auf der offiziel- len Homepage von NVU herunterladen. Eine etwas kompaktere Variante mit einer Beschreibung der Installation und der Erstellung einer ersten Websei- te habe ich auf der Website: http://huscholz.bplaced.net/start.html Nvu - ausgesprochen "N view" - ist eine Stand-Alone- Weiterentwicklung der Mozilla-Suite-Komponente Composer, basierend auf der Gecko-Engine von Mozilla. Ein komplettes Programm zur Erstellung und Verwaltung von Webseiten ist nun für Linux, Microsoft Windows und viele weitere Betriebssysteme verfügbar. Es kann mit Programmen wie FrontPage und Dreamweaver konkurrieren. Nvu macht das Verwalten einer Webseite zum Kinderspiel. Nun kann jeder Webseiten erstellen und verwalten, ohne technische Kenntnisse von HTML. Durch seine Verfügbarkeit für viele Plattformen müssen Sie sich selbst bei einem Wechsel Ihres Betriebssystems nicht umgewöhnen. Sie können weiterhin den gewohnten Komfort von Nvu nutzen. • WYSIWYG bearbeiten von Seiten, Webseitenerstellung so einfach wie das Schreiben eines Briefs in ihrer Text- verarbeitung. • Integriertes FTP-Dateimanagement. Loggen Sie sich auf Ihrer Webseite ein und navigieren durch Ihre Dateien, ändern Sie Ihre Webseiten direkt im Netz. • Zuverlässige HTML-Code-Erstellung, der von den heute beliebtesten Browsern korrekt interpretiert wird. • Zwischen der WYSIWYG-Ansicht und Code-Ansicht wechseln, ganz einfach mit Tabs. • Gleichzeitiges bearbeiten mehrerer Tabs macht das Ändern vieler Seiten zum Kinderspiel. • Leistungsfähige Unterstützung für Formulare, Tabellen und Vorlagen. • Das einfachste Programm zur Erstellung und Verwaltung von Webseiten. Plattformübergreifend. Web 2.0 im Unterricht Web-Editoren Kapitel 16 Seite 2 Anleitungen für den KompoZer Im Skript „Webseiten gestalten“ finden Sie alle erforderlichen Hinweise, wie bestehende Vorla- gen verändert und neue Webseiten mit dem KompoZer erstellt werden. Dabei beschränken sich diese Anleitungen auf die wenigen Funktio- nen, die dazu verwendet werden. Wer den gesamten Funktionsumfang von Kom- poZer nutzen will kann sich eine sehr umfassende Dokumentation herunterladen, die auf mehr als 150 Seiten das Erstellen einer kompletten Websi- te beschreibt. Im Internet gibt es viele Blogs und Foren, in wel- chen Erfahrungen ausgetauscht oder auf Erweite- rungen hingewiesen wird. http://www.juergen-klose.de/vhs/kompozer-anleitung.pdf Web 2.0 im Unterricht Web-Editoren Kapitel 16 Seite 3 Ein kleines Projekt Sie bearbeiten den Stoff zum „Goldenen Schnitt“ und möchten die Schülerinnen und Schüler mit einer vorbereiteten Internet-Recherche für das Thema motivieren. Sie haben bereits ein paar Bilder zusammengestellt und interessante Links zu ausgewählten Webseiten notiert, die Sie mit dem Smart-MindManager in einer Mind-Map zusammen fassen. Bevor Sie mit dem Erstellen der Webseite beginnen, sollten Sie eine gute Vorbereitung treffen. Erstellen Sie einen Ordner, der in der Folge alle Dateien ent- halten soll, die zur Webseite gehören. Das ist in der Regel ein Bilder-Ordner und die bereits bestehenden Dokumente wie PowerPoint-Präsentationen, PDF- Dateien, Mind-Maps oder Word-Dokumente. Machen Sie einen ersten Entwurf der Homepage und legen Sie die Anordnung der Bilder, Texte und Links fest. Überlegen Sie sich, wie sich alle diese Elemente mit einer Tabelle strukturieren lassen. Starten Sie den KompoZer und speichern Sie als Erstes die noch leere Webseite, damit die relativen Adressen für die Bilder und Dokumente festgelegt sind. Speichern Sie (die noch leere Webseite) unter dem Dateinamen index in das vorbereitete Verzeichnis. Web 2.0 im Unterricht Web-Editoren Kapitel 16 Seite 4 Die Seite strukturieren Bei reinen HTML-Seiten ist es zweckmässig, alle Texte und Bilder in eine Tabelle einzutra- gen. Legen Sie eine erste Tabelle für die grobe Aufteilung der Bildschirmanzeige an. In die einzelnen Zellen dieser Tabelle können dann weitere Tabellen eingefügt werden. Selbstver- ständlich können benachbarte Zellen auch zu einer Zelle vereint werden. Achten Sie bitte darauf, dass auch die inneren Tabellen die Struktur der äusseren Tabelle übernehmen, was bei zu komplexen Tabellen zu Problemen führen kann. In unserem Beispiel besteht die äussere Tabel- le aus 4 Zeilen und 2 Spalten. Die Breite der Spalten können Sie ganz oben (oberhalb der Tabelle) bereits provisorisch einstellen. Die vertikalen Abstände für die Zeilen lassen Sie am besten so stehen. Diese werden sich dann automatisch an die Inhalte anpassen. Texte einfügen In die Zellen der Tabelle können nun die Texte eingefügt werden. Für die Wahl der Schriftart steht ein Pulldown-Menü bereit. Für die Festle- gung der Schriftgrösse, der Schriftfarbe und des Schriftschnitts verwenden Sie am besten das Menü Format. Für die am häufigsten ver- wendeten Funktionen finden Sie die entspre- chenden Schaltflächen in der Symbolleiste. Bilder einfügen Setzen Sie den Cursor in die Zelle, welche das Bild aufnehmen soll. Dann klicken Sie auf das Symbol Grafik und suchen dann (Grafik- Eigenschaften) das gewünschte Bild. Markie- ren Sie unbedingt den Eintrag, dass das Bild eine relative Datei-Adresse hat. Wenn Sie keinen Alternativtext verwenden möchten, müssen Sie die entsprechende Option wählen. Im Register Grösse können Sie die Bildgrösse noch verändern und im Register Erschei- nungsbild unter anderem die Ausrichtung des Bildes festlegen. Mit OK wird das Bild in die ausgewählte Zelle eingefügt. Web 2.0 im Unterricht Web-Editoren Kapitel 16 Seite 5 Eine weitere Tabelle einfügen Damit die Aufteilung des Bildschirms weiter verfei- nert werden kann ist es vielleicht notwendig, weite- re Tabellen einzufügen. In diesem Fall klicken Sie mit der rechten Maustaste in die Zelle, die eine Tabelle aufnehmen soll. Im Kontextmenü wählen Sie danach Tabelle einfügen / Tabelle. Das weitere Vorgehen kenne Sie bereits. Die eingefügte Tabelle besteht nur gerade aus einer Zeile und zwei Spalten. In diese beiden Zel- len werden nun zwei benachbarte Bilder eingefügt. Im Register Grösse können die beiden Bilder auf die gleiche Höhe eingestellt werden. Schliesslich ändern wir noch die Textfarbe... Die Seite speichern Beim Erstellen einer Webseite muss man immer wieder mit Über- raschungen rechnen. Dabei ist es oft schwierig, eventuelle Fehler wieder rückgängig zu machen. Darum ist es ratsam, die Webseite immer wieder zu speichern. Bei sehr aufwendigen und komplexen Seiten sollte man sogar mehrere Varianten speichern, damit die Arbeit nicht verloren geht. Web 2.0 im Unterricht Web-Editoren Kapitel 16 Seite 6 Links einfügen Benutzerfreundlich sind Navigationen, bei denen die Besucher auf ein Symbol klicken können, das sie auf die gewünschte Internetseite führt. In die- sem Beispiel wird zuerst eine Tabelle eingefügt und dann die Pfeile als Schaltflächensymbole. Markieren Sie ein Pfeilsymbol und wählen Sie im Kontextmenü Link erstellen. Im Register Link müs- sen Sie dann nur noch die URL eintragen. So sieht die Webseite aus, wenn sie im Browser geöffnet wird. Web 2.0 im Unterricht Web-Editoren Kapitel 16 Seite 7 Eine Mind-Map verlinken Eine Mind-Map besteht immer aus einer HTML- Seite und einem Bild (GIF-Datei). Sorgen Sie dafür, dass sowohl das Bild wie auch die Seite mit dem Code im gleichen Verzeichnis sein müssen. Der Link erfolgt immer auf die HTML-Seite. Einen Hyperlink setzen Markieren Sie den Text und klicken Sie in der Sym- bolleiste auf den Button Link. Sie können auch festlegen, dass die angewählte Webseite in einem neuen Fenster angezeigt werden soll. Tabellenränder ausblenden Setzen Sie (im Kontext-Menü) alle Tabellenränder auf 0). So präsentiert sich die Webseite im Internet .