Fritz-Schumacher Schule Bildende Kunst - Balfanz

1

Kompozer

Kurzanleitung Für Kompozer Version 0.7.10

Fritz-Schumacher Schule Bildende Kunst - Balfanz

2

Grundlagen 1 1. Download

Das Programm Kompozer ist ein Freewareprogramm und damit frei von Lizenzen. Es kann

auf der Website von Kompozer heruntergeladen werden: http://kompozer.sourceforge.net/

Eine Ausführliche Anleitung zur Erstellung von Internetseiten mit dem Kompozer findest Du

unter http://kompozer-web.de/download/kompozer-anleitung.pdf

2. Übersicht

Installiere das Programm auf Deinem Computer. Öffne anschließend das Programm. Die

Oberfläche des Programms setzt sich aus verschiedenen Bereichen zusammen:

a. Menüleiste

b. Bearbeitungs-Symbolleiste

c. Formatierungs-Symbolleiste I

d. Formatierungs-Symbolleiste II

e. Statuszeile

f. Editiermodus-Symbolleiste

g. Editierbereich

h. Seitenregister

i. Site-Manager

Fritz-Schumacher Schule Bildende Kunst - Balfanz

3

3. Eine Internetseite gestalten

3.1. Öffnen und Speichern einer Internetseite

Wird der Kompozer gestartet, erscheint im Editierbereich automatisch eine unbearbeitete

Seitenvorlage. Möchtest Du nachträglich eine neue Seite erstellen, kannst Du durch Klicken

des Neu-Buttons eine neue Seite öffnen.

Um eine bereits bearbeitete Seite zu öffnen, klicke den Öffnen-Button.

Vor dem Bearbeiten einer neuen Seite solltest Du die Seite, das heißt die Datei, speichern:

Klicke auf den Speichern-Button. Du wirst jetzt nach einem Titel für Deine Seite gefragt.

Dieser Titel erscheint später im oberen Bereich Deines Browser-Fensters. Er muss nicht

dem Namen Deiner Datei entsprechen. Anschließend wirst Du nach dem Dateinamen

gefragt. Achte hierbei darauf, dass Du keine Leerzeichen, Sonderzeichen und keine

Großbuchstaben verwendest. Speicher die Datei in einem Ordner, den Du ausschließlich für

Dein Webdesignprojekt verwendest. Denke daran, regelmäßi während des Editierens Deine

Seite zu speichern.

Jetzt kannst Du mit dem Editieren, das heißt mit dem Gestalten Deiner Internetseite

beginnen.

3.2. Einfügen von Text

Beginne mit der Eingabe eines Textes. Klicke hierfür mit Deinem Cursor auf den

Editierbereich. Du kannst den Text direkt in den Editierbereich eintippen oder aber einen

Text aus einer vorhandenen Dateie (doc., txt. etc.) mit den Tastenkombinationen Strg-C

(Kopieren) und Strg-V (Einfügen) in Deine Seite hineinkopieren.

Den eingegebenen Text kannst Du mit Hilfe der Formatierungs-Symbolleiste I und II beliebig

editieren. Es ist sinnvoll, Deinen Text in der Dropdown-Liste der Formatierungs-Symbolleiste

II mit variable Breite und einer der Schriftarten Helvetica, Arial oder Times oder Courier zu

formatieren. Wenn Du eine andere Schriftart auswählst, kann es sein, dass ein Browser

Deiner Seite nicht mit der richtigen Schriftart abbildet, weil die Schriftart nicht auf dem

Computer vorhanden ist.

Fritz-Schumacher Schule Bildende Kunst - Balfanz

4

Die wichtigsten Symbole der Format-Symbolleisten

Hervorhebung

Stark

hervorheben

Nummerierung

Aufzählung

Einzug

vergrößern

Einzug

verkleinern Definitions-

ausdruck

Definitions-

beschreibung

Text bzw.

Hintergrund-

farbe

Farbe für

Texthervor-

hebung

Schrift

vergrößern

Schrift verkleinern

Fett

Kursiv

Unterstreichung

Linksbündig

Zentriert

Rechtsbündig

Blocksatz

Anhand der angezeigten Buttons kannst Du Deinen Text beliebig formatieren.

3.3. Einfügen von Grafiken

Du kannst Deinem Text Grafiken, das heißt, Bilder zufügen. Setze den Cursor durch klicken auf die

Position, an der Deine Grafik eingefügt werden soll. Klicke anschließend auf den Grafik-Button. Wähle

die entsprechende Grafik aus. Diese sollte sich in dem Ordner befinden, in dem Du Deine

Internetseite gespeichert hast. Gebe anschließend einen Alternativtext ein. Ist Deine Grafik eingefügt,

kannst Du durch Doppelklick auf die Grafik das Fenster Grafik-Eigenschaften öffnen und unter

anderem die Größe und die Ausrichtung zum Text verändern.

Die Größe der Grafik kannst Du einfach verändern, in dem Du einmal auf die Grafik klickst und

anschließend mit Hilfe der Handles (kleine Quadrate am Rand der Grafik) die Grafik größer oder

kleiner ziehst. Verkleinerst Du eine Grafik, bleibt die Datenmenge der Grafik erhalten, allerdings wird

sie nur kleiner abgebildet. Geschieht dies, kann es sein, dass das Laden der Seite auf Grund der

großen Datenmenge länger dauert, als notwendig. Auf diese Weise würdest Du Bandbreite

verschwenden. Um dies zu vermeiden, kannst Du Deine Grafik in dem Programm Paint.Net auf das

richtige Format einstellen.

3.4. Richtige Größe von Grafiken in Paint.Net vorbereiten

Starte Paint.Net und öffne die Grafik: klicke in der Menüleiste auf Datei/Öffnen. Stelle die Größe der

Grafik ein, in dem Du in der Menüleiste auf Bild/Größe klickst. Stelle die Auflösung auf 72 pixel/in

(dpi). Anschließend bestimme die Breite und Höhe des Bildes.

Fritz-Schumacher Schule Bildende Kunst - Balfanz

5

3.5. HTML, Vorschau und Ansicht im Browser

Damit jeder Internet -Browser Deine Seite richtig anzeigen kann, wird Deine Seite in einem HTML-

Code geschrieben. Diese Programmiersprache ist universell und kann von jedem Browser gelesen

werden. Dennoch können unterschiedliche Browser (Firefox, Explorer, Netscape etc.) Deine Seite

unterschiedlich darstellen. Diese Unterschiede sind in der Regel jedoch gering. Wenn Du mit dem

Kompozer Internetseiten erstellst, brauchst Du keine HTML-Kenntnisse. Möchtest Du dennoch mit

HTML-Programmierung arbeiten, kannst Du mit dem Button Quelltext in der Editiermodus-

Symbolleiste den HTML-Code aufrufen und bearbeiten. Aber Vorsicht! Du solltest genau wissen, was

Du tust, wenn Du den Code veränderst. Ansonsten kann der Browser Deinen Code vielleicht nicht

mehr lesen und Deine Seite nicht mehr oder zumindest falsch abbilden.

Möchtest Du eine Vorschau Deiner Internetseite anschauen, klicke auf den Button Vorschau in der

Editiermodus-Symbolleiste. Die Vorschau wird sich im momentanen Zustand Deiner Internetseite noch

nicht von der Normalansicht unterscheiden.

Willst Du überprüfen, ob Dein Browser Deine Seite richtig anzeigen kann, öffne die Datei über den

Browser. Meist reicht ein Doppelklick auf die Datei. Verkleinere das Fenster Deines Browsers in

verschiedene Formate. Du wirst sehen, dass sich der Text der Größe des Fensters anpasst.

Fritz-Schumacher Schule Bildende Kunst - Balfanz

6

Grundlagen 2 4. Das Seitenlayout

Ein Layout ist ein Entwurf und vermittelt im Webdesign den gestalterischen Aufbau einer

Internetseite. Es lassen sich vier Grundformen des Seitenlayouts unterscheiden:

1. Layout mit zwei Spalten

2. Layout mit drei Spalten

3. Layout mit Spalten und Kopf

4. Layout mit Spalten, Kopf und Fuß

Fritz-Schumacher Schule Bildende Kunst - Balfanz

7

Das Layout bestimmt also, in welche Bereiche die Seite unterteilt wird. Dabei besitzt jeder

Bereich eine bestimmte Funktion:

Auf der linken Seite des Seitenkopfes (Header) befindet sich meist das Logo, das dem Benutzer

anzeigt, auf welcher Seite er sich befindet. Am unteren Rand des Seitenkopfes können Navigations-

Buttons eingerichtet sein, mit deren Hilfe durch die Internetseite manövriert werden kann.

In der linken

Spalte befindet sich

meist die

Navigationsleiste

(Menu/Navigation).

Über Buttons wird

von hier aus

innerhalb der Seite

manövriert.

Der Content ist der Hauptbereich

der Internetseite und beinhaltet

die Informationen, die dem Benutzer

vermittelt werden sollen.

Die Fußzeile (Footer) umfasst in der Regel Informationen über Name und Kontaktdaten des

Seitenanbieters.

Neben diesen Möglichkeiten des Layouts fallen Dir vielleicht noch weitere Layouts ein, mit

denen Du Deine Seite gestalten willst. Es ist aber immer zu bedenken, ob das Layout seine

Funktionen erfüllt: Ist die Seite logisch aufgebaut, übersichtlich, leicht zu bedienen,

ästhetisch etc.?

Bevor Du damit beginnst, Deine Seite mit Inhalt zu füllen und Header, Menu, Content und

Footer einzurichten, solltest Du Dir genau überlegt haben, wie das Layout der Seite

aussehen soll. Hierzu reicht eventuell eine einfache Handskizze.

Fritz-Schumacher Schule