Kompozer - fss-hh.de .Fritz-Schumacher Schule Bildende Kunst - Balfanz 1 Kompozer Kurzanleitung...

download Kompozer - fss-hh.de .Fritz-Schumacher Schule Bildende Kunst - Balfanz 1 Kompozer Kurzanleitung F¼r

of 19

  • date post

    20-Aug-2019
  • Category

    Documents

  • view

    213
  • download

    0

Embed Size (px)

Transcript of Kompozer - fss-hh.de .Fritz-Schumacher Schule Bildende Kunst - Balfanz 1 Kompozer Kurzanleitung...

  • 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