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

19
Fritz-Schumacher Schule Bildende Kunst - Balfanz 1 Kompozer Kurzanleitung Für Kompozer Version 0.7.10

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

Page 1: Kompozer - fss-hh.de · Fritz-Schumacher Schule Bildende Kunst - Balfanz 1 Kompozer Kurzanleitung Für Kompozer Version 0.7.10

Fritz-Schumacher Schule Bildende Kunst - Balfanz

1

Kompozer

Kurzanleitung Für Kompozer Version 0.7.10

Page 2: Kompozer - fss-hh.de · 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

Page 3: Kompozer - fss-hh.de · Fritz-Schumacher Schule Bildende Kunst - Balfanz 1 Kompozer Kurzanleitung Für Kompozer Version 0.7.10

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.

Page 4: Kompozer - fss-hh.de · Fritz-Schumacher Schule Bildende Kunst - Balfanz 1 Kompozer Kurzanleitung Für Kompozer Version 0.7.10

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.

Page 5: Kompozer - fss-hh.de · Fritz-Schumacher Schule Bildende Kunst - Balfanz 1 Kompozer Kurzanleitung Für Kompozer Version 0.7.10

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.

Page 6: Kompozer - fss-hh.de · Fritz-Schumacher Schule Bildende Kunst - Balfanz 1 Kompozer Kurzanleitung Für Kompozer Version 0.7.10

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ß

Page 7: Kompozer - fss-hh.de · Fritz-Schumacher Schule Bildende Kunst - Balfanz 1 Kompozer Kurzanleitung Für Kompozer Version 0.7.10

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.

Page 8: Kompozer - fss-hh.de · Fritz-Schumacher Schule Bildende Kunst - Balfanz 1 Kompozer Kurzanleitung Für Kompozer Version 0.7.10

Fritz-Schumacher Schule Bildende Kunst - Balfanz

8

5. Layout gestalten mit Hilfe von Stylesheets (CSS)

Dieses Kapitel beschreibt die Arbeitsschritte, mit denen Du ein Seitenlayout mit zwei Spalten

(Menu und Content), Kopf (Header) und Fuß (Footer) gestalten kannst (s.o. Grundform 4.).

Der gesamte im Browserfenster angezeigte Bereich Deiner Seite nennt sich Body. Im Body

befindet sich Dein Layout. Die einzelnen Bereiche Deines Layouts (Header, Content etc.)

werden mit Hilfe sogenannter Container eingerichtet. Container begrenzen einen bestimmten

Bereich Deiner Seite und gestalten somit das Layout.

5.1. Container erstellen

Starte zuerst den Kompozer und speichere die Seite in einem neuen Ordner unter dem

Namen index. Die Index-Datei bezeichnet in der Regel die Startseite eines Webauftritts.

Klicke mit Deinem Cursor auf den Editierbereich und füge folgende fünf Zeilen ein:

Header

Menu

Content

Footer

Führe für jede Zeile folgende Schritte aus: in die Zeile klicken und

Generic container (div) in der linken Drop-Down-Liste der Formatierungs-

Symbolleiste I auswählen. Damit hast Du für jede Zeile einen Container

erstellt.

Um die Container sichtbar zu machen, klicke in der Menüleiste auf

Bereichskonturen. Die Container werden nun durch gestrichelte Linien

sichtbar.

Page 9: Kompozer - fss-hh.de · Fritz-Schumacher Schule Bildende Kunst - Balfanz 1 Kompozer Kurzanleitung Für Kompozer Version 0.7.10

Fritz-Schumacher Schule Bildende Kunst - Balfanz

9

5.2. Die Seitenbreite definieren.

Deine Seite sollte eine Breite von 800px (800 Pixel) nicht überschreiten, damit Benutzer

Deiner Seite mit kleiner Bildschirmauflösung den Inhalt Deines Fensters vollständig

angezeigt bekommen. Klicke hierfür einst in den Container Menu und anschließend in der

Statuszeile über die rechten Maustaste auf <body> Inline-Styles und Box Eigenschaften.

Es öffnet sich das Fenster Box-Eigenschaften. In diesem kannst Du die Eigenschaften eines

Containers oder in diesem Fall der Seite einstellen. Um die Breite Deines Layouts zu

bestimmen, trage bei Breite den Wert 800px ein. Wenn Du möchtest, dass der Inhalt Deiner

Website in der Mitte des Browserfensters angezeigt wird, trage bei Raender Rechts und

Links den Wert auto ein. Klicke anschließend auf OK.

Klicke anschließend auf OK. Deine Seite sollte jetzt so aussehen:

Page 10: Kompozer - fss-hh.de · Fritz-Schumacher Schule Bildende Kunst - Balfanz 1 Kompozer Kurzanleitung Für Kompozer Version 0.7.10

Fritz-Schumacher Schule Bildende Kunst - Balfanz

10

5.3. Containereigenschaften bestimmen

Jetzt wird das Format und die Ausrichtung der Container im Layout bestimmt. Klicke in den

Container Menu. In der Statuszeile erscheint jetzt das Zeichen <div>. Dort mit der rechten

Maustaste klicken und auf Inline-Styles und Box-Eigenschaften gehen.

Das Fenster Box-Eigenschaften öffnet sich. Im oberen Bereich des Fensters Box-

Eigenschaften ist erst einmal nur die Funktion Puffer wichtig. Sie bestimmt die Ausrichtung

des Container. Stelle hier links ein. Außerdem kannst Du die Breite des Menu-Containers

bestimmen. Trage hierfür bei Breite den Wert 150px ein. Klicke anschließend auf OK.

5.4. Einen Style festlegen

Um die Eigenschaften des Containers später einfach zu verändern, lege einen Style fest.

Klicke hierfür wieder in der Statusleiste über die rechten Maustaste auf <div> und Inline-Style

und anschließend auf Extrahieren und allgemeinen Style anlegen.

Page 11: Kompozer - fss-hh.de · Fritz-Schumacher Schule Bildende Kunst - Balfanz 1 Kompozer Kurzanleitung Für Kompozer Version 0.7.10

Fritz-Schumacher Schule Bildende Kunst - Balfanz

11

In dem sich öffnenden Fenster Create Genetic style klicke auf this element only und Trage

als Namen für den Style Menu ein. Klicke anschließend auf OK.

In der Statusleiste erscheint jetzt <div id=„Menu“>.

Bestimme nun auf gleichem Wege (5.3. bis 5.4.) die Breite der restlichen Container und lege

für jeden Container einen Style fest: Bestimme für den Content im Puffer den Wert Rechts

sowie bei Breite den Wert 650px fest. Gehe anschließend wieder auf Extrahieren und

allgemeinen Style anlegen und benenne den Style mit der Bezeichnung Content. Für den

Header und den Footer reichen die Bestimmung der Breite mit 800px. Der Style wird

anschließend mit Header bzw. mit Footer benannt.

Damit das Layout noch mehr Form annimmt, füge nun einen Text in den Content Container

ein. Wenn Du den Text aus einer anderen Datei kopierst, achte darauf, dass der Text nicht

formatiert ist, zum Beispiel mit besonderen Schriftarten, Fett- oder Kursivschrift. Füge den

Text am besten erst in das Programm Texteditor ein und kopiere ihn dann von hier aus in

den Content Container. Dein Layout nimmt nun Gestalt an:

Page 12: Kompozer - fss-hh.de · Fritz-Schumacher Schule Bildende Kunst - Balfanz 1 Kompozer Kurzanleitung Für Kompozer Version 0.7.10

Fritz-Schumacher Schule Bildende Kunst - Balfanz

12

In der Menü-Spalte sollen sich die internen Links Deiner Website befinden. Füge dafür ein:

Link1

Link2

Link3

Link4

5.5. Formatierung von Farbe und Text mit Hilfe der Styles

Deine Seite hat jetzt ein definiertes Layout. Weil Du für jeden Container

einen Style eingerichtet hast, kannst Du sehr leicht die Farben und den Text

Diner Seite formatieren und verändern. Klicke hierfür in der Bearbeitungs-

Symbolleiste auf den Button KaZcadeS. Das Fenster CSS Stylesheets öffnet sich.

Im linken Bereich Sheets und Regeln werden die von Dir angelegten Styles angezeigt. Auf

der rechten Seite stehen Dir mehrere Karteikarten für die Formatierung zur Verfügung:

Allgemein, Text, Hintergrund, Begrenzungen, Box, Listen und Töne.

Page 13: Kompozer - fss-hh.de · Fritz-Schumacher Schule Bildende Kunst - Balfanz 1 Kompozer Kurzanleitung Für Kompozer Version 0.7.10

Fritz-Schumacher Schule Bildende Kunst - Balfanz

13

Möchtest Du die Schrift des Contents formatieren klicke links auf Content und anschließend

auf die Karteikarte Text. Jetzt kannst Du allgemeine Regeln für den Text in diesem Container

festlegen. Natürlich kannst Du auch im Editierbereich den Text formatieren, wie es in der

Anleitung Grundlagen 1 beschrieben wurde.

In der Karteikarte Hintergrund legst Du fest, welche Hintergrundfarbe oder welche

Hintergrundgrafik der Container besitzen soll. Klicke links auf Menu und bestimme in der

Karteikarte Hintergrund die Hintergrundfarbe. Klicke hierfür auf den Button zur Farbauswahl.

Wähle in dem Fenster Block Background Color durch Anklicken eine Farbe aus und klicke

auf OK. Das Ergebnis sieht wie folgt aus:

Klicke wieder auf KaZcadeS in der Bearbeitungs-Symbolleiste. Mit der Karteikarte

Begrenzung kannst Du Ränder in Farbe, Dicke und Stil bestimmen, die den Container

umgeben sollen. Die Karteikarte Box ist Dir bereits aus Box-Eigenschaften bekannt. Von

größerer Bedeutung sind hier die Einstellungen Breite und Höhe des Containers. Willst Du

diese Werte verändern, musst Du darauf achten, dass die Container in ihren Werten

zusammenpassen, das heißt – in diesem Fall - der Container Menu und Content gemeinsam

den Wert 800px ergeben.

Die Werte im Feld Raender bestimmen den Abstand des Containers zum benachbarten

Container oder zum Rand des Browserfensters. Das Feld Abstaende bestimmt den Abstand

des Textes oder der Grafik innerhalb eines Containers zum Rand des Containers.

5.6. Einen Container innerhalb eines Containers einrichten

Möchtest Du die Links in der Menüleiste als Button farblich hervorheben, kannst Du sie als

eigene Container einrichten. Klicke hierfür im Editierbereich auf Link1. Wähle wie zu Beginn

Page 14: Kompozer - fss-hh.de · Fritz-Schumacher Schule Bildende Kunst - Balfanz 1 Kompozer Kurzanleitung Für Kompozer Version 0.7.10

Fritz-Schumacher Schule Bildende Kunst - Balfanz

14

dieser Anleitung beschrieben Generic container (div) in der linken Drop-Down-Liste der

Formatierungs-Symbolleiste I aus. Ein eigener Container entsteht.

Diesen Container kannst Du wie oben beschrieben wieder für sich

formatieren (Beispiel dunkelgrauer Hintergrund und weißer Text)

und für ihn einen eigenen Style mit dem Namen Link anlegen.

Es erscheint in der Statusleiste folgende Anzeige:

Du kannst jetzt einfach den neu angelegten Link-Style auf die anderen Links übertragen.

Klicke hierfür im Menu Container auf Link2 und erstelle wieder mit Generic container (div) in

der Drop-Down-Liste einen Container. Gehe danach mit der rechten Maustaste in der

Statusleiste auf <div> und wähle Link aus. Damit wird der neue Container mit dem Style Link

formatiert.

5.7. Allgemeine Formatierung im <body> Element

Um die Hintergrundfarbe des Bodys oder allgemeine Textformatierungen für Deine Website

zu festzulegen, gehe mit der rechten Maustaste in der Statusleiste auf <body>, Inline-Styles

und dann auf den gewünschten Formatierungsbereich.

Page 15: Kompozer - fss-hh.de · Fritz-Schumacher Schule Bildende Kunst - Balfanz 1 Kompozer Kurzanleitung Für Kompozer Version 0.7.10

Fritz-Schumacher Schule Bildende Kunst - Balfanz

15

Grundlagen 3 6. Farbgestaltung

Die Farbgestaltung Deiner Website ist in vielerlei Hinsicht von Bedeutung: Eine durchdachte

Farbgestaltung verleiht Deiner Website ein professionelles Aussehen. Eine harmonische

Farbgestaltung wirkt angenehm auf die Wahrnehmung des Benutzers. Die Farben weisen

durch ihre Symbolkraft auf den Inhalt Deiner Website hin (z.B. Blau = Wassersport oder Grün

= Ökologie).

6.1. Ein Farbschema erstellen

Für eine gelungene Farbgestaltung muss im Vorwege ein Farbschema erstellt werden. Das

Farbschema bildet die Farben ab, die Du für Deine Website verwendest. Es wird dabei

immer von einer Grundfarbe ausgegangen, die das Erscheinungsbild der Website prägt. Die

Grundfarbe sollte nicht zu grell und nicht zu hell (Pastellfarben) sein. Wenn Du der

Grundfarbe schrittweise ihren Weißanteil erhöhst (Helligkeit), erhältst weitere Farben für

Dein Schema.

Um Elemente Deiner Website hervorzuheben, kannst Du dem Farbschema eine oder mehr

Kontrastfarben (z.B. Komplementärfarben) zufügen. Auf der Seite

http://colorschemedesigner.com/ findest Du einen ColorSchemeDesigner, mit dessen Hilfe

Du leicht ein Farbschema erstellen kannst.

Page 16: Kompozer - fss-hh.de · Fritz-Schumacher Schule Bildende Kunst - Balfanz 1 Kompozer Kurzanleitung Für Kompozer Version 0.7.10

Fritz-Schumacher Schule Bildende Kunst - Balfanz

16

6.2. Übertragung des Farbschemas auf Deine Website

Hast Du Dir ein Farbschema erstellt, klicke im ColorSchemeDesigner auf Scheme Info. Hier

wird nun die Nummer (Hexadezimalcode) der jeweiligen Farben angezeigt. Diesen

Hexadezimalcode kannst Du nun für die Farbgestaltung Deiner Website verwenden. Um

einem Container eine der ausgewählten Farben als Hintergrundfarbe zuzuweisen, öffne im

Kompozer das Fenster Block Background Color (siehe Kapitel 5.5.). Trage in dem Feld Hex

nach dem # Zeichen den Hexadezimalcode Deiner Farbe ein und klicke auf OK.

Verfahre mit den anderen Containern und Farben in gleicher Weise.

6.3. Schriftenlesbarkeit

Bei der Farbgestaltung spielt die Lesbarkeit des Textes auf Deiner Website ein große Rolle.

Der Text sollte immer in einem starken Hell-Dunkel-Kontrast zum Hintergrund stehen. Gut

liest sich schwarze oder dunkel Schrift auf weißem Hintergrund oder weiße Schrift auf

dunklem Hintergrund. Nähern sich die Helligkeitswerte an, wird der Text unleserlich.

Dieser Text lässt sich gut lesen.

Dieser Text lässt sich gut lesen.

Dieser Text lässt sich nicht gut lesen.

Page 17: Kompozer - fss-hh.de · Fritz-Schumacher Schule Bildende Kunst - Balfanz 1 Kompozer Kurzanleitung Für Kompozer Version 0.7.10

Fritz-Schumacher Schule Bildende Kunst - Balfanz

17

Grundlagen 4 7. Hyperlinks

Mit Hilfe von Hyperlinks (Links) kann innerhalb oder außerhalb von Websites navigiert

werden. Es unterscheiden sich interne und externe Links. Interne Links verbinden Seiten

innerhalb Deiner Website. Externe Links verweisen auf fremde Websites.

7.1. Link-Struktur

Bevor Du einen Link auf Deiner Seite einrichtest, solltest Du die Link-Struktur Deiner Website

festgelegt haben. Die Link-Struktur legt fest, welche Seiten Deine Website überhaupt

beinhaltet und welche Seiten miteinander verlinkt sind. Für den Benutzer Deiner Website

sollte die Navigation überschaubar sein und er sollte gut durch die Seite geführt werden

(Benutzerführung). Er sollte immer wissen, wo er ist, wie er zurück und wie er zu seinem Ziel

kommt.

Eine gute Benutzerführung erreichst Du in erster Linie durch eine geringe Linktiefe. Die

geringste Tiefe ist gegeben, wenn alle Seiten von der Startseite erreichbar sind. Maximal

sollte eine Ebene tiefer verlinkt werden, wie in der Grafik verdeutlicht wird.

Es ist darauf zu achten, dass es auf jeder Ebene einen Link zurück zur nächst höheren

Ebene (zum Beispiel von Link 1c zu Link 1) und von jeder Ebene zur Startseite (zum Beispiel

von Link 1c zur Startseite) gibt.

Startseite

Link 1

Link 2

Link 3

Link 1a

Link 1b

Link 1c

Link 2a

Link 2b

Link 2c

Link 3a

Link 3b

Link 3c

Page 18: Kompozer - fss-hh.de · Fritz-Schumacher Schule Bildende Kunst - Balfanz 1 Kompozer Kurzanleitung Für Kompozer Version 0.7.10

Fritz-Schumacher Schule Bildende Kunst - Balfanz

18

Für eine gute Benutzerführung ist weiterhin der Linktext wichtig. Der Linktext ist der Text, auf

den der Benutzer klicken muss, um zur nächsten Seite zu kommen. Für eine bessere

Übersicht über die Navigation sollte der Linktext aus nur einem Wort bestehen. Damit das

Ziel des Links aber eindeutig ist, muss der Linktext genau beschreiben, was den Benutzer

auf der nächsten Seite erwartet.

7.2. Links einrichten

Um einen Link zu setzten, markiere den Text, der als Linktext verwendet werden soll und

anschließend auf die Link-Taste.

Das Link-Eigenschaften-Fenster öffnet sich. Klicke auf den Öffnen-Button und wähle die

Datei, auf die der Link verweisen soll. Diese Datei muss von Dir im Vorwege erstellt worden

sein. Hierfür kannst Du die bestehende Datei im Explorer kopieren und unter einem anderen

Namen speichern. Anschließend kannst Du die Inhalte der Datei verändern.

Möchtest Du eine fremde Website verlinken, gebe in dem Bereich Link-Adresse die URL der

Website an.

Der Link erscheint jetzt in einer anderen Farbe und ist unterstrichen. Die farbliche Gestaltung

der Links kannst Du selbst bestimmen, in dem Du in der Menuzeile unter Format

Seitenfarben und -hintergrund... anklickst. In dem sich öffnenden Fenster lassen sich nun die

Farbe des normalen Textes, des Link-Textes, des aktiven Links und der besuchten Links

einstellen. Weiterhin kannst Du die Hintergrundfarbe Deiner Seite festlegen oder ein

Hintergrundbild einrichten.

Möchtest Du einen Link auf eine Grafik setzen, klicke auf die Grafik und auf den Link-Button.

Wähle anschließend die verlinkte Datei aus.

Page 19: Kompozer - fss-hh.de · Fritz-Schumacher Schule Bildende Kunst - Balfanz 1 Kompozer Kurzanleitung Für Kompozer Version 0.7.10

Fritz-Schumacher Schule Bildende Kunst - Balfanz

19

Mit einem Klick der rechten Maustaste auf einen eingerichteten Linktext und anschließend

auf Link-Eigenschaften lassen sich die Eigenschaften des ausgewählten Links bestimmen.

Du hast unter Ziel die Möglichkeit auszuwählen, ob sich Die verlinkte Seite im aktuellen

Browserfenster oder in einem neuen Fenster öffnen soll.