Kompozer - fss-hh.de · PDF fileFritz-Schumacher Schule Bildende Kunst - Balfanz 1 Kompozer...
date post
20-Aug-2019Category
Documents
view
214download
0
Embed Size (px)
Transcript of Kompozer - fss-hh.de · PDF fileFritz-Schumacher Schule Bildende Kunst - Balfanz 1 Kompozer...
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