Kompozer - Fritz-Schumacher

Transcription

Fritz-Schumacher Schule
Bildende Kunst - Balfanz
Kompozer
Kurzanleitung
Für Kompozer Version 0.7.10
1
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
2
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.
3
Die wichtigsten Symbole der Format-Symbolleisten
Hervorhebung
Stark
Nummerierung
Aufzählung
hervorheben
Einzug
Einzug
Definitions-
Definitions-
vergrößern
verkleinern
ausdruck
beschreibung
Text bzw.
Farbe für
Schrift
Schrift verkleinern
Hintergrund-
Texthervor-
vergrößern
farbe
hebung
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.
4
3.5.
HTML, Vorschau und Ansicht im Browser
Damit jeder Internet -Browser Deine Seite richtig anzeigen kann, wird Deine Seite in einem HTMLCode 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 EditiermodusSymbolleiste 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.
5
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ß
6
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 NavigationsButtons 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
Der Content ist der Hauptbereich
der Internetseite und beinhaltet
die Informationen, die dem Benutzer
vermittelt werden sollen.
innerhalb der Seite
manövriert.
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.
7
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 FormatierungsSymbolleiste 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.
8
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:
9
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 BoxEigenschaften 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.
10
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:
11
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 BearbeitungsSymbolleiste 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.
12
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
13
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.
14
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.
15
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.
16
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.
Link 1a
Link 1
Link 1b
Link 1c
Link 2a
Startseite
Link 2
Link 2b
Link 2c
Link 3a
Link 3
Link 3b
Link 3c
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.
17
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.
18
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.
19

Kompozer - Fritz-Schumacher

Transcription

Similar documents

DVD Architect Pro 5.2 Kurzanleitung

DVD Architect Studio Kurzanleitung

Referat als - Verband deutscher Musikschulen

LEITZ ICON Der etikettenkönner

Andreas Bräsen Dipl. Ing. der Technischen Informatik (FH

1 Titel 2 Inhaltsverzeichnis

FLM - FL-Manager

Modul A

Acer s10 handheld Manual

SQL Cockpit - Anwenderdokumentation