Antje Arnold für

DSCC-Berlin

Lehrgang KompoZer

Teil 1DSCC-Berlin

KompoZer ist die Verbesserung von NVU, eines WYSIWYG-Programms zum Erstellen einer Homepage. WYSIWYG heißt (What You See - Is What You Get = Was du siehst, ist, was du bekommst).Es basiert auf html (Hypertext Markup Language). Einige html-Grundkenntnisse sollten vorhanden sein.

Dieses Programm ist kostenlos aus dem Internet herunterzuladen von der Seite http://www.nvu-composer.de.

Eine ausführliche Anleitung von Carles Cooke steht im Internet in der dt. Übersetzung von Jürgen Klose unterwww.kompozer-web.de/download/kompozer-anleitung.pdf .

NVU bzw. der KompoZer lehnen sich in der Menüführung an den gewohnten Ansichten von Microsoft bzgl. Word oder dem IE (Internet Explorer) an.

Zusätzlich gibt es noch Leisten, wie die Statuszeile und die Editier-Symbol-leiste.

Die Seitenverwaltung schalte ich mit F9 ein bzw. aus.

Januar 2010 1 von 22

Antje Arnold für

DSCC-Berlin

Lehrgang KompoZer

Teil 1DSCC-Berlin

Hier die Normal und Quelltextansicht ohne Seitenverwaltung:

Januar 2010 2 von 22

Antje Arnold für

DSCC-Berlin

Lehrgang KompoZer

Teil 1DSCC-Berlin

Im Quelltext kann ich erkennen, dass KompoZer die html-Elemente, die Tags lila darstellt und die Standardwerte von sich aus eingetragen hat. Was fehlt ist der Titel im Kopf (head).

Der Titel ist nicht sichtbar auf meiner Seite aber notwendig, damit die Seite im Internet gefunden wird, notwendig für die Suchroboter z.B. von Google.

Als Titel wähle ich nicht z.B. den Namen „Homepage“, sondern einen Namen oder Wörter, die aussagekräftig speziell für meine Homepage sind.

Als Beispiel sehen wir uns den Titel unserer Homepage an: (wir rufen unsere Homepage www.dscc-berlin.de auf und dann unter Ansicht: Quellcode)

<title>Seniorenclub; Computerclub; Berlin-Lichtenberg</title>

1. Versuch1.Aufgabe:

- Erstelle eine neue Seite mit dem Kompozer - Gebe der Homepageseite einen Titel

1.Lösung für den Titel: Es gibt, wie immer, mehrere Möglichkeiten:

a.) In der Editier-Symbolleiste den Quelltext aufrufen und einfach zwischen den Tags

<title></title> den Titel einfügen, z.B. „Lehrgang KompoZer; Versuch1“

b.) In Normalansicht in der Menüleiste unter „Format“ finde ich „Seitentitel und -einstellungen“ ganz unten im sich öffnenden Register.In dem sich öffnendem Fenster „Seiteneigenschaften“ kann ich den Titel eintragen, wie z.B. „Lehrgang KompoZer; Versuch1“.Zwischen den Begriffen sollte ein Semikolon stehen.Zusätzlich könnte ich die Sprache „deutsch“ z.B. festlegen.Anschließend sehe ich mir den Quelltext noch einmal an.

Und: Das Speichern nicht vergessen! Wichtig!Das Zwischen-Speichern im KompoZer ist sehr wichtig!

Januar 2010 3 von 22

Antje Arnold für

DSCC-Berlin

Lehrgang KompoZer

Teil 1DSCC-Berlin

Januar 2010 4 von 22

Antje Arnold für

DSCC-Berlin

Lehrgang KompoZer

Teil 1DSCC-Berlin

1.Hausaufgabe:

Erstelle eine erste neue Seite mit der Software KompoZer und gebe ihr einen Titel und Namen.

Für den Namen mit der Dateierweiterung .html lege vorab ein Verzeichnis „Homepage“ z.B. in den „Eigenen Dateien“ an, in dem Du zukünftig alles weitere für diesen Homepagelehrgang speicherst.

Wichtig!Bitte benutze keinen USB-Stick! (bzw. nur zum Sichern der Daten)Der Browser, wie z.B. der InternetExplorer oder Firefox kann eine Homepageseite nicht vom Stick öffnen!

Das Ergebnis sollte im Quelltext ersichtlich sein:

Ergebnis steht zwischen den Tags <title>....</title>

2.Aufgabe:

Wir wollen

a.) die Überschrift als größte Überschrift 1 mit h1 festlegen und auch farblich abgrenzenb.) den Hintergund einfärben

Januar 2010 5 von 22

Antje Arnold für

DSCC-Berlin

Lehrgang KompoZer

Teil 1DSCC-Berlin

2.Lösung

Wie immer, gibt es auch hier verschiedene Möglichkeiten, sowohl unter „Format“ in der Menüleiste als auch in der Symbolleiste 1, die unter „Ansicht“ „Anzeigen/Verstecken“sichtbar gemacht werden kann (Häckchen setzen!)

Januar 2010 6 von 22

Antje Arnold für

DSCC-Berlin

Lehrgang KompoZer

Teil 1DSCC-Berlin

2.Hausaufgabe:

a.) Lege die Überschrift mit h1 fest und färbe sie ein.Probiere auch die anderen Überschriften! H1 ist die Größte, je größer die Zahl hinter dem H, desto kleiner die Überschrift!b.) Färbe den Hintergrund ein.

Das Ergebnis sollte wie im folgendem Bild aussehen:

(Die Farben und Schriftart wählt jeder selbst)

Und das Speichern zwischendurch nicht vergessen!

Januar 2010 7 von 22

Antje Arnold für

DSCC-Berlin

Lehrgang KompoZer

Teil 1DSCC-Berlin

Wenn ich mir die Symbolleiste 2 ansehe, kann ich erkennen, dass ich auch hierüber die Farben des Hintergrundes und auch die Schriftfarbe ändern kann, ich brauche nicht über „Format“ zu gehen – es gibt, wie immer, mehrere Möblichkeiten.

In dieser unteren Symbolleiste 2 kann ich zusätzlich die Schriftgröße, als auch Art, wie Fett oder Kursiv auch Unterstrichen geht, doch

Wichtig!Achtung: Der Unterstrich sollte dem Link in einer Homepage vorbehalten bleiben!

Des weiteren kann ich, wie bei Word z.B. den Text mittig, links oder rechts anordnen.

Auch kann ich hier einen Blocksatz oder Absatz formatieren, was natürlich auch über die Symbolleiste 2 geht.

Januar 2010 8 von 22

Antje Arnold für

DSCC-Berlin

Lehrgang KompoZer

Teil 1DSCC-Berlin

3.Aufgabe:

Das „Einfügen“ wird geübt.

a.) Ein Bild soll eingefügt werden.Wie realisiere ich das?

– Auf meiner Festplatte muss ein Bild in meinem angelegten Verzeichnis „Homepage“ vorhanden sein.Am Besten ich lege in einen Unterordner „Bilder“ gleich mehrere Bilder, die ich verwenden möchte.

– Wichtig!Wenn ich ein Bild einfügen möchte, sollte das Bild bereits die richtige Größe haben. In einem Bildbearbeitungsprogramm wie. z.B. dem kostenlosen „Gimp“ kann ich das Bild, aufgenommen von meiner Kamera, verkleinern in z.B. 700x550 px (Pixel) und mit einer Auflösung von 72 dpi (dots per inch = Punktdichte), damit die Ladezeit nicht zu lange dauert (nicht jeder hat dsl).(Sicher kann ich auch beim KompoZer das Bild kleiner oder größer ziehen, trotzdem wird es immer das Ausgangsbild als Speichergröße einspeichern, auch wenn es nicht so aussieht! - das macht jede Homepagesoftware!)

3.Lösung

Januar 2010 9 von 22

Antje Arnold für

DSCC-Berlin

Lehrgang KompoZer

Teil 1DSCC-Berlin

4. Aufgabe:

b.) Ein Link soll eingefügt werden.Wir benutzen z.B. das Bild, um einen Link zu setzen und auch Text für einen Link:

4. LösungWie immer gibt es mehrere Möglichkeiten.

Egal, wie ich den Link aufrufe, es erscheint das Fenster mit den Linkeigenschaften.Hier kann ich einen URL eingeben oder auch zu einer html-Seite im Verzeichnis, indem diese Seite liegt, eintragen und dorthin verlinken. Ich kann dem Link auch noch einen Namen geben.

Wir sehen uns im Quelltext an, wie der das html-Elemtent zum Verlinken aussieht.

Januar 2010 10 von 22

Antje Arnold für

DSCC-Berlin

Lehrgang KompoZer

Teil 1DSCC-Berlin

Januar 2010 11 von 22

Antje Arnold für

DSCC-Berlin

Lehrgang KompoZer

Teil 1DSCC-Berlin

Das html-Element zum Verlinken zum DSCC lautet:<a href=“http://www.dssc-berlin.de“>Link zum DSCC</a>

3.+ 4. Hausaufgabe:

3.) Füge in die Homepage – Seite ein Bild ein 4.) Verlinke das Bild zu Deiner Lieblingshomepage. Übe dies auch mit einem Textlink. Überprüfe das Verlinken im Quelltext.

Januar 2010 12 von 22

Antje Arnold für

DSCC-Berlin

Lehrgang KompoZer

Teil 1DSCC-Berlin

5. Aufgabe:

c.) Ich füge eine Tabelle ein. 5. Lösung

Es gibt wiederum mehrere Möglichkeiten, sowohl über das Icon „Tabelle“ als auch über die Menüleiste „ Einfügen“ und den Unterpunkt „Tabelle“.

Ich sollte zum Verständnis für die Sehschwachenvorlesesoftware in der ersten Zeile und Spalte jeweils die Überschriften festlegen. Ich übe dies. Desweiteren kann ich die einzelnen Zellen, Spalten oder Zeilen unterschiedlich einfärben. Das kann ich über das Icon „Tabelle“ mit dem Unterpunkt „Tabellen- oder Zellenhintergrundfarbe“ realisieren. Ebenso kann ich die Schriftfarbe verändern, dies aber über das Menü „Format“, Unterpunkt „Textfarbe“

Januar 2010 13 von 22

Antje Arnold für

DSCC-Berlin

Lehrgang KompoZer

Teil 1DSCC-Berlin

5. Hausaufgabe:

Eine Tabelle wird erstellt mit drei Spalten und 6 Zeilen mit Überschriften und Farbgebung!Ein Zelleninhalt wird mit einem Bild gefüllt, eine andere Zelle verlinkt z.B. zum DSCC.

Ergebnis in der Quelltextansicht.

Januar 2010 14 von 22

Antje Arnold für

DSCC-Berlin

Lehrgang KompoZer

Teil 1DSCC-Berlin

6. Aufgabe:

d.) Listen werden erstellt

6. Lösung

Wie immer gibt es auch diesmal verschiedene Möglichkeiten:

a – über die Symbolleiste 1

b- über die Menüleiste mit „Format“ → Liste hier kann ich die verschiedensten Listeneigenschaften auswählen

Januar 2010 15 von 22

Antje Arnold für

DSCC-Berlin

Lehrgang KompoZer

Teil 1DSCC-Berlin

6. Hausaufgabe: Erstellen Sie ein, zwei Listen und probieren Sie Varianten!

Januar 2010 16 von 22

Antje Arnold für

DSCC-Berlin

Lehrgang KompoZer

Teil 1DSCC-Berlin

7. Aufgabe:Seitenverwaltung einrichtena.) mehrere verschiedene neue Seiten einrichtenSeitenverwaltung entsprechend der Komposer-Anleitung von Cooke bzw. Klose (dt.) einrichten – Seite 99-102 b.) Zusammenführen der verschiedenen Seiten in eine Homepage und Buttons für meine Seiten auf der index-Seite anlegen.

Lösungen:7. a.) Seitenverwaltung oder Site-Manager

Die Seitenverwaltung wird mit [F9] ein- oder ausgeschaltet.

Über Seiten bearbeiten komme ich zu den Publizierungseinstellungen

Januar 2010 17 von 22

Antje Arnold für

DSCC-Berlin

Lehrgang KompoZer

Teil 1DSCC-Berlin

In diesem Fenster vergebe ich den Seiten-Namen wie z.B Versuch3 oder Versuch4. Das ist kein Dateiname und kein Festplatten-Verzeichnis, es ist das von der Seitenverwaltung verwaltete Projekt, Seite genannt. Bei der Login-Information → Durchsuchen durchsuche ich die Festplatte/n nach meinen Dateien.Die Serverinformation lasse ich frei (beim Publizieren über Kompozer – was ich nicht empfehle - legt dieser die Daten selbst an).

Benutzername und Passwort lasse ich ebenfalls frei, ist wiederum für das Hochladen auf den Server gedacht, was ich hie rnicht tue.

Wenn ich neue Seiten hinzufügen will, immer bei geöffneter Seitenverwaltung auf das gelbe runde Pfeilsymbol zum Aktualisieren klicken.

Achtung: Speichern nicht vergessen! Seiten in einem Ordner im gleichen Pfad speichern!

Januar 2010 18 von 22

Antje Arnold für

DSCC-Berlin

Lehrgang KompoZer

Teil 1DSCC-Berlin

7. b.) Erstellen einer Schaltfläche Beispiel:

Wie kann ich diese Seite z.B. realisieren? Wie immer gibt es mehrere MöglichkeitenIch rufe die Anleitung von KomoZer auf und dabei „Erstellen einer neuen Seite“

1. Hintergrund festlegen unter Format > Seitenfarben und Seitenhintergrund

2. DSCC-Logo einfügen unter Einfügen > Grafik > Durchsuchen im Verzeichnis (Achtung: Alternativtext nicht vergessen!)

3. Schrift DSCC Berlin eingeben, dabei Überschrift 1 z.B. wählen

4. Schaltflächen einfügen unter Einfügen > Formular > Formularfeld

Januar 2010 19 von 22

Antje Arnold für

DSCC-Berlin

Lehrgang KompoZer

Teil 1DSCC-Berlin

5. Hyperlink einfügen zur Schaltfläche „Zeitung“ durch rechte Maustaste >> Link erstellen und einfügen der URL von Zeitung also http://grauer-computer-freak.de6. Bild einfügen durch Einfügen > Bild (entspricht anderen Programmen, auch mit rechter Maustaste > Bildeigenschaften > Text z.B. mittig anordnen

7. Hausaufgabe:

a.) Mit der Seitenverwaltung die Seiten zusammenfügen b.) Die zusammengefügten Seiten auf der ersten bzw. index-Seite über Schaltflächen ordnen und verlinken.

Januar 2010 20 von 22

Antje Arnold für

DSCC-Berlin

Lehrgang KompoZer

Teil 1DSCC-Berlin

8. Aufgabe InhaltsverzeichnisWelche Möglichkeit gibt mir ein Inhaltsverzeichnis?Wie erhalte ich es?

Lösung:Das Inhaltsverzeichnis gilt nur für eine Seite.

Wenn ich viel Text habe, kann ich ihn mit Hilfe von Absätzen und deren Überschriften ordnen.

Die Überschriften müssen eindeutig mit Hilfe des des Untermenüserstellt werde mit

Überschriften Überschrift 1 bis Überschrift 6,

dann kann ich auch das Inhaltsverzeichnis automatisch anlegen lassen an der Stelle, da der Cursor steht.

Januar 2010 21 von 22

Antje Arnold für

DSCC-Berlin

Lehrgang KompoZer

Teil 1DSCC-Berlin

8. Hausaufgabe

Füllen Sie eine neue Seite im Kompozer mit langem Text und strukturieren Sie diese mit verschiedenen Überschriften.

Januar 2010 22 von 22