Responsive Webseiten-Vorlage

Menü≡

Startseite > Wie fange ich an?

Wie fange ich an?

Wie ein Profi.

A. Die erforderlichen Programme installieren

Sie entwickeln und testen Ihre Website mit Hilfe meiner Webseiten-Vorlage zuhause auf Ihrem eigenen Rechner. Wenn alles fertig ist, laden Sie alle Elemente Ihrer Website mit einem FTP-Programm auf den Server Ihres Webhosters hoch. Für die einzelnen Arbeitsschritte benötigen Sie einige Programme. Sie müssen sich also zuerst die erforderliche Arbeitsumgebung herrichten. Das kostet nur etwas Zeit, aber kein Geld, denn alle benötigten Progamme sind kostenlos. Wenn Sie das eine oder andere Programm schon kennen, umso besser.

Ein UTF-8-fähiger Quelltext-Editor zum Editieren

Die Mindest-Anforderung an den Quelltext-Editor ist: Er muß Dateien in der Zeichenkodierung UTF-8 ohne BOM speichern können. Kann er das nicht, ist er ungeeignet. Deshalb kommt der HTML-Editor Phase 5 leider nicht in Betracht, auch wenn er an Schulen und anderen Bildungseinrichtungen oft verwendet wird.

Sie tun sich mit der Arbeit wesentlich leichter, wenn Ihr Editor zusätzlich noch folgende Voraussetzungen erfüllt:

  • Dateimanager und/oder Projektverwaltung eingebaut oder als Erweiterung
  • Speichern und Öffnen verschiedener Programm-Sitzungen
  • dateiübergreifendes Suchen und Ersetzen
  • spaltenweises Kopieren und zeilenübergreifendes Ändern
  • Synchron-Bearbeitung gleicher Begriffe im markierten Bereich
  • Textbaustein-Funktion (auch für Code-Schnippsel geeignet)
  • farbige Syntax-Hervorhebung zumindest für HTML, CSS und PHP
  • Auto-Vervollständigung von HTML-Elementen und CSS-Eigenschaften
  • Klammerpaar-Hervorhebung für CSS, Javascript und PHP
  • Bearbeitung mehrerer geöffneter Dateien in Registern (Tabs)
  • Code-Faltung: Code-Blöcke können auf- oder zugeklappt werden
  • umfangreiche Zeichenkodierungs-Funktionen

Es gibt viele kostenlos nutzbare Programme, die mit einer solchen Funktionsvielfalt aufwarten. Ich nenne hier vier Programme:

  • Notepad++ von Don Ho, nur für Windows, Download-Größe: 5,2 MB (Version 8.4.2 für Windows, 64-bit, zip-Datei). Viele Sprachpakete enthalten, auch Deutsch . Das Programm ist klein und schnell. Lesen Sie hier meinen Notepad++-Testbericht.
  • SynWrite von Alexey Torgashin, nur für Windows, Download-Größe: 13,9 MB (letzte Version 6.41.2780 vom 29.03.2021). Ein Sprachpaket auf Deutsch ist verfügbar. SynWrite enthält viele Funktionen, die sonst nur in kostenpflichtigen Programmen wie SublimeText enthalten sind. Das Programm wird leider nicht mehr weiter entwickelt. Der Nachfolger ist CudaText vom gleichen Entwickler. Lesen Sie hier meinen SynWrite-Testbericht.
  • CudaText von Alexey Torgashin, für Windows, Linux und MacOS, Download-Größe: 14,6 MB (Version 1.166.5.0 für Windows, 64-bit). Die Lexer sind bei SynWrite und CudaText die gleichen. Lexer sind Regelsammlungen, die festlegen, wie Sprachelemente angezeigt (zB farbige Syntax-Hervorhebung) und wie HTML-Elemente und CSS-Eigenschaften auto-vervollständigt werden.
  • Visual Studio Code aus dem Haus Microsoft, für Windows ab Version 8, Linux und MacOS, Download-Größe: 112,4 MB (Version 1.69.1 für Windows, 64-bit, zip-Datei). Ein Sprachpaket auf Deutsch ist verfügbar. Manche Leute flippen geradezu aus vor Begeisterung. Aber wirklich lightweight (Microsoft-Werbung)? Das Programm belegt immerhin fast 500 MB auf der Festplatte.

Ich selbst hatte eine Zeit lang Notepad++ genutzt, bin dann aber auf SynWrite umgestiegen, mit dem ich seit Jahren sehr zufrieden bin.

Ein Bildbearbeitungsprogramm für einfache Aufgaben

Wenn Sie auf Ihrer Website Bilder anzeigen wollen, fallen oft einfache Bildbearbeitungs-Aufgaben an:

  • aus einem vorhandenen Bild einen Ausschnitt erstellen
  • die originale Kamera-Auflösung des Bildes webseitengerecht verringern
  • Helligkeit, Kontrast, Gamma, Farbbalance des Bildes verändern
  • die eingebetteten EXIF-, IPTC- und XMP-Daten sowie das Miniaturbild entfernen
  • das bearbeitete Bild mit höherer Kompression (verringerter Bildqualität) speichern, um Übertragungsgröße und Ladezeit zu verringern

Falls Sie schon stolzer Besitzer eines Bildbearbeitungsprogramms sind, umso besser. Falls nicht, empfehle ich Ihnen die folgenden kostenlos nutzbaren Programme:

  • XnView Classic von Pierre-E Gougelet, für Windows, Linux und MacOS, Download-Größe: 25,8 MB (erweiterte Version 2.51.0 für Windows, zip-Datei) oder 4,6 MB (minimale Version 2.51.0 für Windows, zip-Datei), kostenlos für privaten Gebrauch, Preis für geschäftliche Nutzung: 29,- €, Sprache wählbar: auch Deutsch . XnView enthält übrigens eine ganz hervorragende Stapelverarbeitung. Ich selbst nutze XnView schon seit über 20 Jahren.
  • IrfanView von Irfan Skiljan, nur für Windows, Download-Größe: 3,4 MB (Version 4.6, 64-bit, zip-Datei), kostenlos für privaten Gebrauch, Preis für geschäftliche Nutzung: auf Anfrage, Sprache wählbar: auch Deutsch . Der Funktionsumfang von IrfanView ist geringer als der von XnView. Eine Sammlung aller Plugins kann gesondert runtergeladen werden (23,8 MB).
Ein lokaler Apache-Webserver mit PHP-Parser zum Testen

Mit der Webseiten-Vorlage erstellen Sie PHP-Seiten, die HTML-Code und Einschübe mit PHP-Code enthalten. Außerdem werden PHP-Scripte mitgeliefert, zB das Suchmaschinen-Script zur Durchsuchung der eigenen Webseiten. PHP-Code muß zur Ausführung geparst (interpretiert) werden. Hierzu ist ein Webserver auf Ihrem heimischen Rechner erforderlich. Ein solcher lokaler Webserver ist ein Software-Programm, das Sie (wie andere Programme auch) auf Ihrem Rechner installieren. Die enthaltenen MySQL-/MariaDB-Datenbank-Module benötigen Sie zur Nutzung der Webseiten-Vorlage nicht. Folgende zwei Apache-Webserver kann ich Ihnen empfehlen:

  • UwAmp von Guillaume Le Coz, für Windows ab Version XP aufwärts, Download-Größe: 77 MB (Version 3.1.0 vom 28.06.2018, zip-Datei), kostenlos für private und geschäftliche Nutzung, Sprachen der Benutzeroberfläche: Französisch oder Englisch. Großer Vorteil von UwAmp: Zwischen allen lokal vorhandenen PHP-Versionen kann über das Programmfenster schnell gewechselt werden.

    Kleiner Wermutstropfen: die neueste PHP-Version im UwAmp-Downloadpaket ist die (nicht mehr aktuelle) 7.0.3. Wer mit der letzten PHP-Version 7.4.x oder einer aktuellen Version 8.1.x testen will, muß sich diese PHP-Versionen gesondert von php.net runterladen.

    Einen UwAmp-Testbericht mit Installations- und Bedienungsanleitung finden Sie auf meinem Blog.
  • Xampp von apachefriends.org, für Windows ab Version Vista aufwärts, Linux und MacOS, Download-Größe: 164 MB (Version 8.1.6 mit PHP 8.1.6, 64-bit, installer.exe), kostenlos für private und geschäftliche Nutzung, Sprache wählbar: auch Deutsch . Großer Vorteil von Xampp: Nach den 5 Minuten für Download und Entpacken der Installationsdatei ist alles erledigt: keine händische Nacharbeit erforderlich. Wer im Laufwerk-Wurzelverzeichnis (zB C:/xampp oder E:/xampp) installiert, erspart sich zudem jegliche Konfiguration.

    Ungünstig: Wer seine Seiten unter mehreren PHP-Versionen testen will, benötigt für jede PHP-Version eine eigene Xampp-Installation in einem gesonderten Verzeichnis.
  • nicht von mir getestet, deshalb ohne Empfehlung: Wamp, UniformServer, EasyPHP (alle drei nur für Windows)
Ein FTP-Programm zum Hochladen auf den Prod-Server

Wenn Ihre Webseiten fertig sind, laden Sie alle Elemente (PHP-Seiten, Bilder, die CSS-Datei ...) mit einem FTP-Programm auf den Server Ihres Webhosters hoch. Manche Dateimanager (zB der FreeCommander) haben von Haus aus eine eingebaute FTP-Funktion. Für einige Quelltext-Editoren gibt es FTP-Erweiterungen (zB SynFTP für den Editor SynWrite). Als gesonderte Programme kommen für Sie in Betracht:

  • WS-FTP LE (Limited Edition), für Windows ab Version 95 aufwärts, Download-Größe: 1,9 MB (Version LE 6, wsftp6.exe), kostenlos für private Nutzung, Sprache der Benutzeroberfläche: Englisch. WS-FTP LE ist die abgespeckte Version von WS-FTP PRO der Firma Ipswitch, reicht aber für die tägliche Arbeit völlig aus. Die Programmoberfläche mit der klassischen 2-Fenster-Ansicht wirkt spartanisch. Ich selbst nutze ältere Versionen von WS-FTP LE schon seit über 20 Jahren. Tipp eines alten Hasen: Wenn der Webhoster die Anzeige versteckter Dateien wie zB der .htaccess unterdrückt, kann man die Anzeige erzwingen: in das leere weiße Feld in der Schaltflächenleiste seitlich rechts eintragen: -la (Minuszeichen, kleines L, kleines A). In neueren Versionen befindet sich diese Schaltflächenleiste rechts oben.
  • FileZilla für Windows, Linux und MacOS, Download-Größe: 16,1 MB (Windows-Version 3.60.1 vom 01.06.2022, 64-bit, zip-Datei), kostenlos für private und geschäftliche Nutzung, Sprache wählbar: auch Deutsch . FileZilla ist quellprogrammoffen und unter der GNU GPL-Lizenz veröffentlicht. Die Programmoberfläche wirkt etwas überladen und unübersichtlich.

B. Die Webseiten-Vorlage runterladen und entpacken

Als nächstes laden Sie die Webseiten-Vorlage als zip-Archiv oder als 7zip-Archiv von meiner Download-Seite auf Ihren heimischen Rechner runter und entpacken das runtergeladene Archiv ins Ziel-Verzeichnis. Ich empfehle Ihnen sogar zwei Ziel-Verzeichnisse: eines, zB vorlage, als Sicherung für die Original-Vorlage, und ein zweites, zB webseiten, in dem Sie Ihre Webseiten erstellen und ablegen.

Falls Sie noch kein Programm zum Packen und Entpacken von Archiven haben, meine klare Empfehlung: Nehmen Sie 7-Zip von Igor Pavlov, für Windows ab Version XP aufwärts, Linux und MacOS, Download-Größe: 1,5 MB (Version 22.01 für Windows, 64-bit, exe-Datei), kostenlos für private und geschäftliche Nutzung, Sprache wählbar: auch Deutsch . Die Installation ist blitzschnell erledigt.

Ziel-Verzeichnisse, wenn Sie als lokalen Webserver UwAmp nutzen: Legen Sie im Verzeichnis [Pfad]/uwamp/www/ die Verzeichnisse vorlage und webseiten neu an. Nach dem (zweifachen) Entpacken befinden sich die Elemente der Vorlage jeweils in den Verzeichnissen
[Pfad]/uwamp/www/vorlage/... und [Pfad]/uwamp/www/webseiten/...

Ziel-Verzeichnisse, wenn Sie als lokalen Webserver Xampp nutzen: Legen Sie im Verzeichnis [Pfad]/xampp/htdocs/ die Verzeichnisse vorlage und webseiten neu an. Nach dem (zweifachen) Entpacken befinden sich die Elemente der Vorlage jeweils in den Verzeichnissen
[Pfad]/xampp/htdocs/vorlage/... und [Pfad]/xampp/htdocs/webseiten/...

Glückwunsch: den ersten Schritt haben Sie geschafft :-) Starten Sie jetzt Ihren lokalen Webserver und rufen Sie die Vorlage aus dem Verzeichnis webseiten auf: Wenn Sie UwAmp nutzen, klicken Sie im Programmfenster auf die Schaltfläche Browser www und wählen dann das Verzeichnis webseiten (oder geben Sie alternativ in die Browser-Adreßzeile http://localhost/webseiten/ ein). Wenn Sie Xampp nutzen, geben Sie in die Browser-Adreßzeile http://localhost/webseiten/ ein.

C. Ein Farbschema (Design) wählen

Die Webseiten-Vorlage wird mit vier Farbschemata (Designs) ausgeliefert: Rhodos (blau, türkis), Waldeslust (Grüntöne), Sahara (beige, braun) und Merlot (weinrot, beige). Für diese Website habe ich das Farbschema Rhodos verwendet. Einen ersten Eindruck von den anderen Farbschemata vermitteln Ihnen die Bildschirm-Schnappschüsse auf der Seite Eine Vorlage: vier Designs. Wie Sie das Farbschema wechseln, habe ich auf der Seite Tipps und Hinweise beschrieben. Oder Sie lassen Ihrer Kreativität freien Lauf und erstellen Ihr eigenes Farbschema.

Sie können das Farbschema auch erst zu einem späteren Zeitpunkt festlegen oder das gewählte Farbschema erneut wechseln.

D. Kopfzeile: Bild oder Farbverlauf wählen

Die vier Farbschemata enthalten je ein Standard-Kopfzeilenbild (header-Bild). Insgesamt sind in der Webseiten-Vorlage 16 Kopfzeilen-Bilder verfügbar, zwischen denen Sie wählen können. Natürlich können Sie bei Bedarf Ihr eigenes Kopfzeilen-Bild erstellen und einbinden. Alternativ ist es möglich, statt eines Bildes in der Kopfzeile einen Farbverlauf anzuzeigen. Auf der Seite Kopfzeilen-Bilder oder Farbverlauf steht, wie Sie ein Kopfzeilen-Bild oder einen Farbverlauf anzeigen, wie Sie ein Kopfzeilen-Bild wechseln und wie Sie Ihr eigenes Kopfzeilen-Bild erstellen und einbinden. Sie finden dort auch Hinweise zur Einbindung Ihres Logos.

Sie können sich auch noch später entscheiden, ob Sie in der Kopfzeile ein Bild oder einen Farbverlauf anzeigen oder das gewählte Kopfzeilen-Bild wechseln wollen.

E. Favicons erstellen und einbinden

Favicons sollten Sie unbedingt nutzen: Es sind kleine Symbole, die im Browser an verschiedenen Stellen angezeigt werden und Ihre Besucher an Ihre Website erinnern. Wie Sie Favicons erstellen und generieren, habe ich hier ausführlich dargestellt. Es reicht aber aus, wenn Sie sich um das Thema Favicons erst später kümmern.

F. Lernen Sie das PHP-/HTML-Seitengerüst kennen

Vielleicht waren Sie ja schon so wißbegierig (Männer) oder neugierig (Frauen ;-), um einen Blick auf das PHP-/HTML-Seitengerüst zu werfen. Wenn nicht, sollten Sie das jetzt nachholen. Dieses PHP-/HTML-Template ist für alle Seiten gleich.

G. Die PHP-Include-Elemente mit Inhalten versorgen

Die Inhalte der PHP-Include-Elemente wirken sich auf alle Seiten aus, in denen diese Elemente eingebunden sind. Der große Vorteil für Sie ist die zentrale Wartbarkeit: Eine Änderung müssen Sie nicht auf allen Ihren 50 oder 100 Seiten durchführen, sondern nur ein einziges Mal. Umso wichtiger ist, die PHP-Include-Elemente zu pflegen und aktuell zu halten.

Während Sie diesen Abschnitt lesen, laden Sie am Besten das jeweilige PHP-Include-Element aus dem Verzeichnis /x-includes in Ihren Editor.

PHP-Include-Element meta.inc

Das PHP-Include-Element meta.inc enthält diejenigen meta-, link- und script-Elemente innerhalb des HTML-Elements head, die für alle Ihre Seiten gleich sind.

Im meta-Element author können Sie Ihren Namen eintragen.

Im mit Favicon-Elemente gekennzeichneten Bereich ersetzen Sie die vorhandenen Elemente (die dienen nur als Beispiel) durch diejenigen Favicon-Elemente, die der Real Favicon Generator für Sie erstellt hat. Weitere Hinweise hierzu finden Sie auf der Seite Favicons erstellen und generieren.

Die übrigen meta-, link- und script-Elemente lassen Sie unverändert.

PHP-Include-Element kopf.inc

Das PHP-Include-Element kopf.inc enthält Angaben zur Kopfzeile (HTML-Element header). Das betrifft die beiden möglichen Varianten Kopfzeilen-Bild (header-Bild) und Kopfzeilen-Farbverlauf.

HTML-Element img: Falls Ihr Logo nicht logo.gif heißt, tragen Sie hier den richtigen Dateinamen ein. Und im alt-Attribut vermerken Sie einen passenden Text, zB Logo von Max Mustermann.

In das HTML-Element h1 (Überschrift 1. Ordnung) tragen Sie Ihre Hauptüberschrift ein.

PHP-Include-Element menue.inc

Im PHP-Include-Element menue.inc legen Sie Ihre seiteninternen Links fest. Ändern Sie einfach die vorhandenen (Beispiel-) Links entsprechend ab und fügen durch Kopieren und Ändern weitere Links hinzu. Tragen Sie ins href-Attribut als Adresse der Startseite nicht etwa ./index.php ein, sondern einfach ./ (wie im Beispiel). Ich empfehle Ihnen, alle Ihre PHP-Seiten ins Wurzelverzeichnis zu legen, die Adreß-Angabe im href-Attribut erfolgt dann nach diesem Schema: ./eine-seite.php.

Für den Fall, daß Sie zwei Menü-Ebenen verwenden wollen: Im mitgelieferten PHP-Include-Element menue.inc gibt es Beispiel-Links, die Sie abändern können. Was Sie zur zweiten Menü-Ebene noch wissen sollten, habe ich auf der Tipps-Seite beschrieben.

Falls Sie Hunderte von Seiten haben und aus Gründen der Übersichtlichkeit Unterverzeichnisse verwenden wollen, erfolgt die Adreß-Angabe im href-Attribut nach folgendem Schema: ./verzeichnis/andere-seite.php. Auf solchen Seiten müßten Sie aber zusätzliche Anpassungen vornehmen, zB die Pfade zu den PHP-Include-Elementen ändern.

Es gibt eine zweite Möglichkeit, die Übersicht zu behalten, wenn Sie Dutzende oder gar Hunderte von Seiten haben: Stellen Sie den Namen der PHP-Seiten am Anfang eine vierstellige Nummer voran (Beispiel: die Seite eine-seite.php benennen Sie um in 6012-eine-seite.php). Auf diese Weise wäre es möglich, durch eine entsprechende Nummerierung dafür zu sorgen, daß logisch zusammen gehörende PHP-Seiten im Dateimanager bzw. im FTP-Programm auch zusammen angezeigt werden, obwohl die eine vielleicht mit a anfängt und die andere mit z. Als Beispiel habe ich im Download-Paket den Seitennamen solche Nummern vorangestellt. Einziger Nachteil: Die Seitennamen werden etwas länger.

PHP-Include-Element fuss.inc

Im PHP-Include-Element fuss.inc tragen Sie alle Angaben ein, die in Ihrer Fußzeile (HTML-Element footer) angezeigt werden sollen. Links zu Ihren Kontaktdaten und zur Datenschutzerklärung sollten auf keinen Fall fehlen.

Hinweis: Im Gegensatz zu den anderen PHP-Include-Elementen wird das PHP-Include-Element fuss.inc nicht mit der PHP-Funktion readfile() eingebunden, sondern mit der PHP-Funktion include(), weil hier PHP-Code (die Ausgabe des aktuellen Jahres) enthalten ist.

Was für die Abschnitte C., D. und E. gilt, gilt auch für die vorstehenden PHP-Include-Elemente: die Erledigung ist nicht abhängig von anderen Maßnahmen. Sie können sich auch erst später drum kümmern oder die einmal durchgeführten Einträge wieder ändern.

Dann gibt es noch das PHP-Include-Element pfoben.inc, das den Pfeil-nach-oben-Link am Fensterrand rechts unten anzeigt. Hier sollten Sie möglichst nichts ändern. Für das Aussehen sind ohnehin die Regeln hinter dem Selektor div#pfoben in der Stylesheet-Datei regeln.css zuständig. Außerdem wird die Javascript-Funktion beimScrollen() aus der Scriptdatei /y-code/scripte.js verwendet.

H. Seiten erstellen und Inhalte verfassen

Wenn Sie eine neue Seite erstellen wollen, kopieren Sie am Besten eine ähnliche Musterseite, benennen sie um und tragen in Ihrem Editor anstelle des vorhandenen Inhalts Ihren eigenen Inhalt ein. Beispiele: Wenn Sie eine Seite mit Fließtext-Absätzen erstellen wollen, verwenden Sie als Kopier-Quelle die Überschriften und Fließtext-Musterseite. Wenn Sie eine Bildergalerie-Seite erstellen wollen, verwenden Sie als Kopier-Quelle eine der beiden Bildergalerie-Musterseiten.

Wenn Sie eine schon erstellte Seite um andere Elemente erweitern wollen, kopieren Sie in Ihrem Editor einen Quelltext-Ausschnitt aus einer Musterseite, die ein solches anderes Element enthält. Beispiele: Wenn Sie in eine Seite mit Fließtext-Absätzen zusätzlich eine Tabelle einfügen wollen, kopieren Sie aus einer der Datentabellen-Musterseiten den Quelltext der gewünschten Tabelle, fügen ihn in Ihre Fließtext-Seite ein und ändern/ergänzen die Tabellen-Inhalte. Wenn Sie eine erstellte Seite um ein Bild im Großformat ergänzen wollen, kopieren Sie aus einer der Einzelbilder-Musterseiten den entsprechenden Quelltext, fügen ihn in Ihre vorhandene Seite ein und ändern den Bilddatei-Namen und die Bildbeschreibung.

Manchmal geht's noch einfacher: In vielen Fällen zeige ich Quellcode-Schnippsel im Browser an. Die können Sie dann von dort kopieren und über die Zwischenablage in Ihrem Editor an die gewünschte Stelle einfügen. Beispiele sind die im Browser angezeigten Quellcode-Schnippsel auf den Aufzählungslisten-Musterseiten und der Quellcode für den Zitatblock nach Forumsart.

Zur Fertigstellung einer Seite prüfen Sie anhand der gelb unterlegten Stellen im PHP-/HTML-Seitengerüst, ob Sie alle erforderlichen Elemente richtig versorgt haben (auch den Titel und die Meta-Elemente?).

I. Webhosting-Paket bestellen

Falls Sie noch kein Webhosting-Paket haben, wird es jetzt Zeit, einen passenden Webhoster auszusuchen. Ein billiger Anbieter muß nicht unbedingt schlecht sein, und der teuerste ist nicht automatisch der beste. Kriterien sind die benötigten technischen Merkmale (zB Wechsel der PHP-Version, PHP-Einstellungen, Verfügbarkeit der Apache-Module mod_rewrite, mod_headers und mod_expires, Nutzung der Datei .htaccess, kostenlose SSL-Zertifikate ...), die Schnelligkeit, geringe Ausfallzeiten und nicht zuletzt die Qualität (Erreichbarkeit, fachliche Kompetenz, kurze Antwortzeiten) der Hotline. Ich selbst bin zufriedener Kunde bei Dogado-Webhosting (nicht der billigste, aber gut).

Es gibt Webhoster-Vergleichsportale, zB WebhosterWissen, auf denen man sich informieren kann. Aber (a) nicht alle Vergleichsportale sind immer aktuell, und (b) weiß man als Nutzer nicht, ob sie objektiv sind oder vielleicht eine Vorauswahl über Aufnahmegebühren treffen.

J. FTP-Zugang einrichten

Als nächstes richten Sie in Ihrem FTP-Programm den FTP-Zugang ein, um die Dateien Ihrer Website auf den Prod-Server hochladen zu können. Die FTP-Zugangsdaten finden Sie bei Ihrem Webhoster.

K. Datei .htaccess : Regeln festlegen

In der Datei .htaccess im Wurzelverzeichnis können Sie Direktiven (Regeln) festlegen, nach denen Ihre Website funktionieren soll. Hinweise zur Datei .htaccess finden Sie auf meiner Seite .htaccess-Regeln. Ab Version 1.2 enthält das Download-Paket eine Datei /extras/.htaccess.txt mit einigen Regel-Vorschlägen als Anregung.

L. Aufräumen, Dateien auf den Prod-Server hochladen

Räumen Sie zuerst auf, bevor Sie die benötigten Dateien auf den Prod-Server bei Ihrem Webhoster hochladen. Manchmal sammeln sich im lokalen Testverzeichnis mehrere ältere Versionen der gleichen Datei an. Eine bewährte Methode ist es, fix und fertig getestete Dateien aus dem Testverzeichnis in ein gesondertes FTP-Verzeichnis zu kopieren. Dieses FTP-Verzeichnis sollte immer den Inhalten auf dem Prod-Server entsprechen. Veraltete Versionen und neuere Test-Versionen sind dort also fehl am Platz.

Wichtig ist auch, die CSS-Datei regeln.css aufzuräumen, um die benötigte Übertragungsgröße möglichst gering zu halten. Wenn Sie sich für ein Farbschema (Design) entschieden haben, löschen Sie vor dem Hochladen die CSS-Variablen der drei nicht benötigten Farbschemata. Löschkandidaten sind auch CSS-Klassen der Vorlage, die Sie gar nicht verwenden. Wenn Sie zB nur die Tabelle der Klasse tab4 nutzen, können Sie die Regeln für die drei anderen Klassen (tab1, tab2 und tab3) löschen, um die Ladezeit für Ihre Besucher zu verringern.

Das Hochladen der Dateien auf Ihren Produktiv-Server ist schnell erledigt. Ich empfehle aus Sicherheitsgründen, Ihre .htaccess-Datei nach dem Hochladen mit den Rechten 444 auszustatten (nur Leserechte) und damit vor unberechtigtem Zugriff zu schützen. Falls Sie eine geänderte Version hochladen wollen, müßten Sie sich zuvor eigenes Schreibrecht (Rechte 644) einräumen. Als Nutzer des FTP-Programms WS-FTP LE rufen Sie zur Änderung der Rechte die Option chmod im Kontextmenü der Datei auf.

Ich rate Ihnen, vor allem bei geschäftlichen Projekten, nach dem Hochladen aus den Inhalten des FTP-Verzeichnisses eine Sicherungskopie, etwa als gepacktes Archiv, anzulegen und im Namen auch das Hochlade-Datum zu vermerken.

M. Testen und für eingehenden Link sorgen

Zum Testen Ihrer neuen Website nehmen Sie sich bitte viel Zeit. Je schneller eventuelle Fehler behoben werden, umso besser. Ist die eindeutige Erreichbarkeit Ihrer Inhalte gewährleistet? Wird mit dem richtigen HTTP-Statuscode (301, nicht 302) zur kanonischen URL weitergeleitet? Wie sehen Ihre Seiten auf dem Smartphone aus? Funktionieren alle internen und ausgehenden Links? Sind vielleicht Rechtschreib- oder Tippfehler vorhanden? Lassen Sie einen Bekannten einen Blick drauf werfen, denn vier Augen sehen mehr als zwei.

Falls Ihr Internet-Auftritt völlig neu ist, sorgen Sie für einen eingehenden Link, damit Suchmaschinen auf Ihre Website aufmerksam werden und sie in ihren Index aufnehmen. Als Selbständiger oder Freiberufler fragen Sie Ihren Berufsverband, ob er auf seiner Website einen Link zu Ihnen setzt. Wenn Sie Ihr Hobby zum Thema Ihrer Website gemacht haben, schreiben Sie in einem entsprechenden Forum einen Beitrag und verlinken dort Ihre Website. Als Nutzer meiner Webseiten-Vorlage erhalten Sie auch auf meiner Showcase-Seite einen Link.

Und wann höre ich auf?

Gar nicht ;-) Eine gute Website will ständig gepflegt werden.

« vorige Seite
nächste Seite »
 
⇧