Kompozer Kurzanleitung

Transkript

1 Kompozer Kurzanleitung Für Kompozer Version

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: Eine Ausführliche Anleitung zur Erstellung von Internetseiten mit dem Kompozer findest Du unter 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 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 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

4 Die wichtigsten Symbole der Format-Symbolleisten Hervorhebung Stark hervorheben Nummerierung Aufzählung Einzug Einzug Definitions- Definitions- vergrößern verkleinern ausdruck beschreibung Text bzw. Hintergrundfarbe Farbe für Texthervorhebung Schrift vergrößern Fett Kursiv Unterstreichung Schrift verkleinern Linksbündig Zentriert Rechtsbündig Blocksatz Anhand der angezeigten Buttons kannst Du Deinen Text beliebig formatieren 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 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

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. 5

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ß 6

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. 7

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 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. 8

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: 9

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 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

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: 11

12 In der Menü-Spalte sollen sich die internen Links Deiner Website befinden. Füge dafür ein: Link1 Link2 Link3 Link 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. 12

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 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

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 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

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) 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 findest Du einen ColorSchemeDesigner, mit dessen Hilfe Du leicht ein Farbschema erstellen kannst. 15

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 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

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 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 Startseite Link 2 Link 2a Link 2b Link 2c Link 3 Link 3a 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

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 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

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. 19