Webdesign Fee Dürr

In meinem Artikel Wie kann ich meine Website selbst bearbeiten? beschrieb ich die Möglichkeit, eine einfache HTML-Website auch als Laie selbst mittels einem WYSIWYG-Editor wie z.B. KompoZer oder Webocton zu bearbeiten (und u.a. auch was WYSIWYG, CMS und FTP bedeutet und wozu man das braucht).

Hierzu folgt nun ein kleines Update:
Bei modernen Websites, die mit neueren Standards wie HTML5 und CSS3 geschrieben sind, ist z.B. der KompoZer unbrauchbar, da er diese Technik (noch?) nicht kann. Wenn Sie als Laie diesen Editor verwenden und feststellen, dass die Website in Ihrem Editor ganz und gar nicht wie die „echte“ Live-Website aussieht und nach dem Hochladen diese sogar völlig verschandelt, haben Sie es wahrscheinlich mit einer modern programmierten Website zu tun.
Und jetzt?

BlueGriffon

Auch unter den frei verfügbaren Editoren gibt es moderne Tools, die HTML5 und CSS3 (und einiges mehr) interpretieren können. BlueGriffon ist die meiner Meinung nach empfehlenswerteste Software, die Sie hier herunterladen können:
http://bluegriffon.org/pages/Download

Wählen Sie unter den verfügbaren Downloads die passende Version für Ihr Betriebssystem (Mac alias OS X, Windows oder Linux/Ubuntu).
Auf dem Mac öffnen Sie das dmg und ziehen das Programm per Drag & Drop in Ihren Programmordner.
Auf Windows öffnen Sie den heruntergeladenen Installer und gehen die Schritte durch.

Die BlueGriffon-Oberfläche ist zunächst in Englischer Sprache, wird aber bereits mit mehreren Sprachen, darunter auch Deutsch, installiert. Um diese Einzustellen, gehen Sie in der Menüzeile auf „Tools“ und dort auf „Preferences“ (siehe Screenshots). Hier können Sie unter dem Reiter „Advanced“ die Sprache auswählen. Klicken Sie dann auf den Button „Use language“ . Das Programmfenster schließt sich automatisch selbst und startet in der eingestellten Sprache neu.

Jetzt können Sie mit BlueGriffon Ihre Dateien bearbeiten. Zum Hochladen (und Herunterladen) benötigen sie jedoch ein zusätzliches FTP-Programm. BlueGriffon bietet dazu eine Schnittstelle zu FireFTP als AddOn an, hierzu gleich mehr.

(Auf dem Mac empfehle ich Ihnen Cyberduck – hier können Sie Dateien bequem mit dem Finder auf den Server ziehen oder von dort in den Finder herunter.)

FireFTP als AddOn für BlueGriffon

Laden Sie zunächst das benötigte AddOn hier herunter:
http://www.bluegriffon.com/index.php?pages/FireFTP

Öffnen Sie nun in BlueGriffon unter „Extras“ (auf Englisch „Tools“) den Punkt „Add-ons“ .
Sie sehen eine Lsite von Erweiterungen, darüber ein Suchfeld und einen Button mit Rädchen-Symbol links daneben. Falls Sie dieses Suchfeld nicht sehen, ziehen Sie mit der Maus das Fenster kleiner – danach können Sie weiter nach oben scrollen.
Klicken Sie auf den Button mit Rädchen und wählen Sie „Add-on aus Datei installieren“ .
Navigieren Sie nun zu Ihrem Downloads-Ordner, darin finden Sie eine Datei mit der Endung „xpi“, z.B. „fireftp-2.0.14-bluegriffon.xpi“ . Öffnen Sie diese Datei mit dem gerade offenen Installationsfenster.

Wenn Sie das AddOn erfolgreich installiert haben, sehen Sie unter dem Menüpunkt „Extras“ unten den zusätzlichen Punkt „FireFTP“ . Klicken Sie hierauf, um das FTP-Programm zu starten.

FTP-Verbindung mit FireFTP herstellen

Um sich mit dem Server Ihrer Website zu verbinden, benötigen Sie die FTP-Zugangsdaten Ihres Providers. Haben Sie diese zur Hand, klicken Sie im FireFTP-Fenster rechts neben „Ein Benutzerkonto einrichten“ auf „Bearbeiten“ . (Hier können Sie auch später Änderungen vornehmen, wenn z.B. etwas nicht klappt oder Ihr Provider die Zugangsdaten ändert.)

Geben sie in den Grundeinstellungen Ihre FTP-Zugangsdaten ein. Diese bestehen aus:
Host: auch FTP-Server genannt, kann auch eine IP (Zahlenfolge mit Punkten) sein.
Benutzername: auch FTP-User genannt
Passwort.

Unter dem Reiter „Verbindungen“ wählen Sie bitte den „Lokalen“ Ordner. Dies ist der Ordner auf Ihrem Computer, wo Sie lokal Ihre Website-Dateien speichern möchten (oder diese bereits gespeichert sind). „Aktueller Ordner“ bezieht sich auf den aktuell im lokalen FireFTP-Verzeichnis gewählten Ordner. Wenn Sie hier unsicher sind, lassen Sie zunächst frei, ich komme weiter unten darauf zurück.
Unter „Entfernt“ geben Sie den Ordner an, der von Ihrem Provider für das Hauptverzeichnis der Website vorgesehen ist. Dieser ist häufig soetwas wie „/public_html“, „/httpdocs“, „/htdocs“, „/web“ oder „/www“. Falls Sie diesen nicht wissen, lassen Sie hier frei bzw. einfach nur „/“.

Unter dem Reiter „Erweitert“ geben Sie bei „Host“ die URL Ihrer Website ein (mit http:// davor). Dies unterstützt Sie in der Verwendung von internen Links.
Klicken Sie nun „OK“ .

Sie sehen in ihrem FireFTP-Fenster nun eine linke und eine rechte (noch leere) Seite.

Auf der linken Seite wird die Ordner-Struktur Ihres Computers angezeigt. Wenn Sie bei den Einstellungen noch unsicher beim Setzen des „Lokalen Ordners“ waren, navigieren Sie nun mittels dieser Ordner-Struktur wie in Ihrem Windows Explorer zu dem Ordner, den Sie für Ihre Website-Dateien verwenden möchten (bzw. setzen Sie an geeigneter Stelle einen neuen Ordner). Wählen Sie diesen Ordner mit einem einfachen Mausklick aus. Falls Dateien darin sind, werden Ihnen diese daneben angezeigt.
Um den Lokalen Ordner nun zu setzen, klicken Sie oben wieder auf „Bearbeiten“ , wählen den Reiter „Verbindungen“ und klicken neben der Zeile „Lokal“ auf den Button „Aktueller Ordner“ . Und wieder „OK“ .

Wenn Sie Ihre FTP-Verbindungsdaten nun fertig eingetragen haben, klicken Sie oben auf „Verbinden“ . Jetzt verbindet sich Ihr Computer mit dem entfernten Webserver. Auf der rechten Seite des FireFTP-Fenster erscheinen nun die Dateien Ihrer Live-Website (wenn alles geklappt hat).
Achten Sie darauf, dass Sie lokal die gleiche Verzeichnisstruktur haben wie auf dem Live-Webserver. Wenn nun dort ein Ordner wie „httpdocs“ oder ähnliches (siehe oben) erscheint, ergänzen Sie den bei Ihren FTP-Einstellungen wie oben beschrieben.
Wenn die Struktur gleich ist, können Sie die Dateien und Ordner ganz einfach mit den grünen Pfeilen in der Mitte hoch- und runterladen. Wählen Sie zum Herunterladen die gewünschten Dateien auf der rechten Seite mit der Maus aus und klicken Sie auf den Pfeil von rechts nach links. Zum Hochladen wählen Sie die gewünschten Dateien auf der linken Seite und klicken auf den Pfeil von links nach rechts.

Die heruntergeladenen Dateien können Sie mit BlueGriffon bearbeiten. Gehen Sie dazu zum BlueGriffon-Fenster. Wählen Sie Datei -> Datei öffnen und navigieren zu der gewünschten Datei. Nehmen Sie Ihre Änderungen vor und speichern Sie mit dem Diskettensymbol.
Die bearbeitete Datei laden Sie nun im FireFTP-Fenster wie beschrieben hoch.

Ein User’s Manual für BlueGriffon ist auf Englisch hier verfügbar:
http://www.bluegriffon.com/index.php?pages/User-s-Manual

FireFTP listet ebenfalls auf Englisch hier ein paar Hilfethemen (Trouble Shooting):
http://fireftp.net/help.html

Falls Sie weitere Hilfe benötigen, stehe ich Ihnen gerne zu meinem üblichen Stundenhonorar zur Verfügung.

Viel Erfolg!