1. Installation unter Windows
  2. Installation unter Linux
  3. Erweiterungen KompoZer alle BS
  4. Weitere Programme
  5. Erweiterungen FireFox
  6. FTP-Programme


Programmübersicht


Programm
 Eigenschaften
 Windows
 Linux
KompoZer
 Das Programm
 Download*
 Download*
Sprachpaket
 Manche Linux-Distriebutionen installieren nur die englische Version. Hier muss das Sprachpaket nachinstalliert werden
Download
Lorem Ipsum
 KompoZer-Erweiterung für die Darstellung von Beispieltext
 Download*
Wörterbuch
 KompoZer-Erweiterung für die Rechtschreibprüfung
 Download*
FireFox 8.0
 Browser
 Download*
 Repo*
Opera
 Internet Browser
 Download
 Repo*
Safari
 Internet Browser
 Downlaod
 Repo*
Webdeveloper
 FireFox Erweiterung zur Unterstützung für Webseitenentwicklung
 Download*
NetRenderer
 FireFox Erweiterung zur Darstellung der Webseite im Internet Explorer
 Download*
FireFTP
 Firefox Erweiterung zum Übertragen der Webseite auf einen Server
 Download*
FileZilla
 FTP-Programm zum Übertragen der Webseite auf einen Server
 Download*
 Repo*
Notepad++
 Leistungsfähiger Texteditor zur Darstellung des Quellcodes
 Download*
7zip
 Open Source Packprogramm
 Download 32
Download 64

!Alle Programme sind auf dem neuesten Stand zum Zeitpunkt der Veröffentlichung dieser Kurs-CD. Bitte schau immer, ob es bereits eine aktuellere Version des Programms bzw. Addons gibt. Klicke dazu auf den Namen in der 1. Spalte um zur jeweiligen Projektseite zu gelangen. Alle Programme und Addons sind kostenlos auf den jeweiligen Projektseiten herunterzuladen.

Linux-Anwender sollten die entsprechenden Programme über die Paketverwaltung (Synaptik, Yast...) installieren.

zur Auswahlliste

1 Installation unter Windows

Klicke auf den Link zum KompoZer für Windows. Es öffnet sich das Installationsfenster.

Solltest du keine Berechtigungen haben ein Programm zu installieren, wende dich an den Administrator deines Systems.

Folge den Installationsanweisungen des Setup-Prgramms. Installiere KompoZer auf Laufwerk C:


Schritt1: Lege den Speicherort für KompoZer fest:

1

Schritt 2: Verknüpfung zum Programme-Menü

2

Schritt 3: Symbole und Shortcuts erstellen

3

Schritt 4: Installation durchführen

4

Schritt 5: Installation abschließen und KompoZer starten

5

Schritt 6: KompoZer öffnet sich

6

zur Auswahlliste

2 Installation für Linux

Auf Ubuntu / Gnome

Lade das Programm auf deinen Rechner.

Kopiere das Zip-Paket in einen Ordner deiner Wahl. Ob nun auf opt oder im home-Verzeichnis ist relativ egal. Entpacke das Zip-Archiv.

Über Menü System - Einstellungen - Hauptmenü legst du fest, welche Programme über das Menü Anwendungen erreichbar sein sollen.

linux5

Wähle das Menü Software-Entwicklung.

In der Mitte werden dir sämtliche Programme gezeigt, die du aus dem System heraus hinzufügen kannst. Um einen neuen Eintrag zu generieren, klicke auf den Button Neuer Eintrag.

Fülle den Assistenten aus:

linux6

Der Name ist der Name des Programms: KompoZer

Der Befehl ist die Startdatei, mit der das Programm ausgeführt werden soll:
Klicke auf Durchsuchen und navigiere in deinen KompoZer-Ordner.
Wähle die Datei kompozer (ohne Formatendung).
Bestätige mit OK.

Klicke nun auf das Sprungfeder-Bild.
Navigiere in den KompoZer-Ordner - Icons.
Wähle dort das Icon mozicon256.png aus.
Bestätige den Assistenten mit Schließen.

Über Anwendungen - Software-Entwicklung gelangst du nun zum KompoZer-Startbutton:

linux8


Alle Linux-Distriebutionen

Sollte es bei deiner Linuxdistriebution nicht möglich sein auf die oben beschriebene Weise den Starter in das Startmenü zu bekommen, reicht auch ein einfacher Starter auf dem Desktop.

Klicke hierzu mit rechter Maustaste auf den Desktop - Starter erstellen.

linux1

Fülle den Assistenten wie oben beschrieben aus.
Klicke anschließend auf die Sprungfeder und wähle aus dem Ordner Icons das Icon mozicon256.png aus.

linux3

Bestätige den Assistenten mit OK.

Mit einem Doppelklick auf den Starter öffnet sich das Programm:

linux4

zur Auswahlliste

3 Installation der Addons für KompoZer

Wähle Menü Extras - Addons:

Wähle das entsprechende Addon von der CD. Du findest alle Programme und Addons im Ordner "Programme".

Klicke das Addon Lorem Ipsum-20091017 an . Der Assistent möchte, dass du 5 Sekunden wartest bevor das Addon wirklich installiert wird. Warte diesen kurzen Moment, dann wird der Button "Installieren" für dich anklickbar.

10

Ist Lorem Ipsum installiert, kannst du gleich das nächste Addon auf die gleiche Weise installieren. Suche das deutsche Wörterbuch myspell aus dem Programmordner.

12

Nachdem du nun beide Addons installiert hast, bestätigst du den Assistenten mit "KompoZer neustarten".

Nach dem Neustart brauchst du nur noch die Shortcuts in die Symbolleiste einfügen um die Addons auch nutzen zu können.

Klicke mit der Rechten Maustaste auf die Symbolleiste. Wähle: Symbolleiste anpassen.

Es öffnet sich der folgende Assistent.

13

Gleichzeitig wird in der Symbolleiste eine weiße Fläche angezeigt. Per Drag & Drop ziehst du nun die beiden Symbole für Lorem Ipsum und die Rechtschreibprüfung in die weiße Fläche und bestätitgst den Assistenten mit "Fertig".


14

Klicke auf fertig um den Assistenten wieder zu schließen.

Anschließend kannst du über die eingefügten Symbole die Addons nutzen.

15
zur Auswahlliste

4 Installation der weiteren Programme

Linux-Anwender verwenden immer die Pakete aus den Distributionsquellen. Bitte installiere nichts neben deiner Distribution.


Installiere nun die weiteren Programme:

1. Firefox
Es gibt viele Programme, mit denen du dir das Internet anschauen kannst. z.B. Opera, Safari, Firefox, Internet Explorer... . Jeder Browser hat seine Eigenarten und zeigt Webseiten unteschiedlich an. Aus diesem Grund ist es wichtig sich die Webseiten, die du bastelst in sehr vielen Browsern anzuschauen, so dass du Darstellungsfehler sofort bemerkst und ändern kannst. Der Internetexplorer und Firefox sind weltweit am weitesten verbreitet gefolgt von Safari und Opera.
2. Notepad++
Du wirst im Kurs nicht drumzu kommen dir auch den ein oder anderen Quelltext anzuschauen. Aus diesem Grund brauchst du einen geeigneten Texteditor. Windows liefert einen Texteditor mit, der jedoch auf keinen Fall für das Arbeiten an Webseiten ausreicht. Es gibt viele andere Texteditoren die du verwenden kannst. Notepad++ ist ein guter Texteditor der nicht mit unnötigem Schnickschnack überladen ist.

Auf Linux-Systemen gibt es viele gute Editoren. Als Linuxer hast du bestimmt bereits einen Lieblingseditor, den du auch für andere Dinge verwendest. Wenn nicht, empfehle ich gedit oder bluefish.
3. FileZilla
Filezilla ist ein FTP-Programm. Mit einem FTP-Programm lädst du deine erstellten Seiten auf den Internetserver, so dass deine Seite im Ineternet gelesen werden kann. Auch bei den FTP-Programmen gibt es eine große Auswahl. FileZilla ist ein schnelles und übersichtliches FTP-Programm, mit dem du deine Webseite einfach pflegen kannst.
Alternativ zu FileZilla gibt es noch die Erweiterung FireFTP für den FireFox. Du brauchst nicht beide Programme. Wenn der Firefox dein Standardbrowser ist, bietet es sich an hier den FireFTP zu verwenden.
4. 7zip
7zip ist ein Packprogramm mit dem du eigene Archive erstellen und wieder entpacken kannst. Es gibt noch viele anderen Komprimierungsprogramm wie z.B. Winzip oder Winrar... . 7zip ist ein OpenSource Programm und darf kostenlos privat wie auch kommerziell genutzt werden.

!Hast du bereits das ein oder andere Programm auf deinem Rechner installiert, brauchst du es natürlich nicht neu zu installieren. Achte nur immer darauf, dass du die aktuellste Version verwendest.

zur Auswahlliste


5 Installation Firefox Addons

Installiere den Firefox mit einem Doppelklick auf den Link in der Programmtabelle. Folge den Installationsanweisungen des Assistenten.

ff1

Zum Installieren der Addons gehst du so vor wie zuvor schon beim KompoZer.

Klicke auf Menü Extras - Addons.

Es öffnet sich ein neues Browserfenster. Klicke auf das kleine Symbol wähle Add-on aus Datei installieren.

ff4

Wähle eine Erweiterung nach der anderen aus und installiere sie. Erst wenn alle Erweiterungen:

installiert sind, starte den Firefox neu.

Über das Menü Extras findest du nun sämtliche installierte Addons.

Den NetRenderer findest du über den Menüpunkt Darstellen als... Hier hast du nun die Auswahl der verschiedenen Internetexplorer.

ff9

Das Menü vom Webdeveloper findest du unter der Symbolleiste im Firefox. Du kannst sie aber auch über das Menü Extras - Webdeveloper öffnen.

zur Auswahlliste

6. FTP-Programme

Ein FTP-Programm benötigst du, um deine Homepage auf deinen Webspace (Speicherplatz auf einem Internet-Server) laden zu können. (FTP= File Trasport Protocol).

In der Tabelle findest du zwei Programme, die beide zur OpenSoruce Familie gehören.

Der FireFTP ist eine Erweiterung für den Firefox. Wie du eine Erweiterung für den Firefox installieren kannst, habe ich bereits unter Punkt 5 beschrieben.

Einrichten des Online-Zugangs im FireFTP

Starte im Firefox über Menü Extras - FireFTP das Programm

Firefox fügt einen neuen Reiter ein um das Programm anzuzeigen.

Das Fenster ist in 4 Spalten geteilt. Die erste linke Spalte zeigt den Inhalt deiner Festplatte an. Klickst du auf einen Ordner, wird in der zweiten Spalte der Inhalt des Ordners angezeigt.

Die dritte und vierte Spalte zeigen an, welche Ordner und Dateien sich auf dem Server befinden. Da wir noch keinen Zugang (Account) angelegt haben, sind diese beiden Spalten leer.

ftp1

Um diesen Zugang jetzt anzulegen, benötigst du die Zugangsdaten, die dir dein Anbieter für deinen Webspace zur Verfügung gestellt hat. Du benötigst folgende Informationen:

  1. Deine Domain (deine Internetadresse die dir dein Anbieter mitgeteilt hat)
  2. Dein Benutzername
  3. Das Passwort

Öffne das Menü Create an Account. Es öffnet sich ein kleiner Assistent, wo du deine Zugangsdaten eingibst.

Account Name:
ist frei wählbar. Unter diesem Namen wird der Zugang gespeichert.
Host:
ist der Domainname, deines Anbieters. Achtung, manchmal kommt hier auch deine Domain hinein. Da musst du ausprobieren, wie dein Anbieter das eingestellt hat.
Login:
ist der Benutzername für den Zugang (Account)
Passwort:
ist der Passwortschutz des Accounts

ftp2

Wechsele in das Register Connection.

Lege einen Ordner für dein Web auf deiner Festplatte an.

Local:
füge hier den Pfad zu deinem Web-Ordner hinzu.
Remote:
hier gehört einfach nur ein / rein, was zum Wurzelverzeichnis auf dem Webspace führt.

ftp3

Bestätige den Assistenten mit OK.

Klicke nun neben das Feld mit dem Namen deines Webs Connect .

Das Fenster öffnet nun den Ordner auf deiner Festplatte in Spalte 2 und den Inhalt deines Servers in Spalte 3 und 4.

Erschreck nicht, wenn da schon Ordner und index Dateien auf dem Server liegen. Die Index.html ist die Seite, auf der einem Besucher deiner Domain angezeigt wird, das dort eine Webpresenz entsteht. Diese index.html wirst du für deine eigene Startseite in den nächsten Lektionen ersetzen.

Wird dir statt dieser Ansicht eine Fehlermeldung angezeigt, musst du noch einmal zurück in die Einstellungen. Schließe die Fehlermeldung und öffne den Assistenten erneut über Edit. Prüfe den Benutzernamen und das Passwort. Die Groß- und Kleinschreibung des Passwortes wird berücksichtigt.


ftp4

Hat alles geklappt? Super, dann kannst du jetzt den FireFTP schließen und zur nächsten Lektions weitergehen.

Viel Spaß!