FA-Homepage erstellen

Ein Klick auf dieses Symbol lädt eine druckbare PDF-Datei in den Dowwnload-Bereich.

Homepage-Programm starten

Die Feierabend-Homepage wird mittels eines Programms erstellt. Um das aufzurufen, klick hier.
Ganz praktisch: Speichere die Adresse als Favorit.

Feierabend-Homepage erstellen

Bitte beachten:Die FA-Homepage unterstützt weder CSS noch Javascript. Damit erübrigen sich auch die meisten "Baukästen", weil diese oft CSS einsetzen. Auch URLs, die Aktionen ausführen, funktionieren nicht.

Wähle ein Kapitel

• Homepage-Programm starten


• Einsteiger-Homepage erstellen


• Homepage für Fortgeschrittene erstellen


• Homepage-Eigenschaften festlegen


• Seiten erstellen


• Menü-Leiste erstellen


• Emailform erstellen


• HTML


• Das Meisterstück: Mit Tabellen auf Ordner zugreifen

Wie man sieht, gibt es zwei Arten Homepages, die für Einsteiger und die für Fortgeschrittene. Doch schwieriges ist die Fortgeschrittenen-Homepage auch nicht.
Wie das Bild schon andeutet, bietet die Einsteiger-Seite nur eine einzige Seite, während die Fortgeschrittenen-Abteilung davon bis zu 10 haben kann. Doch die Gestaltung der Seiten selbst ist in beiden Fällen gleich einfach oder schwierig, je nachdem, was man mit der Seite machen will.
Der einzige Unterschied: Weil auch von den bis zu 10 Seiten immer nur eine angezeigt werden kann, hat die Fortgeschrittenen-Homepage auf der linken Seite eine Menü-Leiste, die immer sichtbar ist. Diese Menü-Leiste kann einfach aus Texten bestehen oder aus so genannten „Buttons“. Letztere sind kleine Grafiken, die man mit einem Grafikprogramm erstellen muss.

Auch wichtig: Ein Gästebuch und ein Kontaktformular gibt es nur Fortgeschrittenen-Homepage.
Weil das auch oft gefragt wird: Solange man die Homepage erstellt oder ändert, muss man online sein. Es empfiehlt sich aber, längere Texte in zum Beispiel Word vorab zu schreiben (inkl. Rechtschreibprüfung) und dann einfach über die Zwischenablage in die Homepage zu kopieren.
Inzwischen gibt es über 5000 Feierabend-Homepages. Daraus 3 Beispiele:

Eine Einsteiger-Homepage

Eine Fortgeschrittenen-Homepage mit einer Text-Menü-Leiste

Eine Seite mit Grafiken in der Menü-Leiste

Einsteigen-Homepage erstellen

Gibt es schon Deine Homepage oder auch nur die ersten Anfänge davon, erscheinen nach dem Klick auf "Homepage für Einsteiger erstellen/bearbeiten" diese Zeilen:

Sie haben bereits zu einem früheren Zeitpunkt eine Homepage erstellt.
Sie können jetzt diese Homepage ansehen, sie ändern oder sie löschen.

Zur Homepage
Homepage löschen
Homepage bearbeiten

Gibt es die Homepage noch nicht, landet man direkt im Editor, den wir nun der Reihe nach betrachten, siehe folgendes Bild.

Zuerst wählt man eine Hintergrundfarbe oder ein Hintergrundbild. Dazu muss man in einen der kleinen Kreise klicken. Die Hintergrundbilder sind praktisch Muster. Um das zu verdeutlichen, habe ich auch ein Muster gewählt.
Danach folgt der Titel der Seite, hier „ Peter's Heimseite“. Zusätzlich habe im Aufklappmenü als Textfarbe Blau gewählt. Pflicht ist der Titel nicht, das Feld kann auch leer bleiben.
Klickt man auf unter "Wählen Sie hier bitte Bild 1:" auf die darunter liegende Schaltfläche "Datei auswählen", öffnet der übliche Datei-Dialog, beispielsweise dieser:<

Hier muss man sich wie üblich zum Ordner des Bildes durchhangeln, das Bild auswählen und dann auf "Öffnen" klicken.
Die Bilder können so groß sein, dass sie die ganze Seite belegen, aber dann bleibt kein Platz mehr für den Text. In diesem Beispiel sind die Bilder 530 Pixel breit.
Achtung: Die Bilder dürfen nicht größer als 1,4 MB (1496 KB) sein. In diesem Fall wird das Bild zwar erst hochgeladen, was recht lange dauert, aber dann abgewiesen. Auch wichtig: Nur Bilder vom Typ JPG oder GIF sind erlaubt.
Lädt man ein anders Bild, ersetzt es das vorhandene. Will man hingegen gar kein Bild mehr haben, dann lädt man keines und klickt auf in das Kästchen vor „Bisheriges Bild löschen“.
In das Feld unter "Geben Sie hier bitte den Text 1 ein:" geben sie den Text ein, der neben Bild 1 stehen soll. Das erste Textfeld wird i.d.R. immer ausgefüllt, während das zweite Textfeld durchaus leer sein kann und auch die Bilder sind nur Kür.
Nun, wir haben 2 Bilder und 2 Texte und müssen die jetzt nur noch zuordnen. Rolle etwas nach unten, damit es so aussieht:

Unten im Bild gibt es die 5 Layouts, also Kombinationen von Bild 1 mit Text 1 bzw. Bild 2 mit Text 2. Wir haben das 4. Layout gewählt, also
Text 1, Bild 1
Bild 2, Text 2

Blieben noch die Schaltflächen zu erklären. „Vorschau“ zeigt in etwa an, wie die Seite aussehen wird. Mit der Browser-Taste <-- kommt man zurück, ohne die Änderungen zu übernehmen. „Seite generieren“ erzeugt die Seite bzw. übernimmt alle Änderungen, während „Zurücksetzen“ die Seite in den Startzustand versetzt.

Homepage für Fortgeschrittene erstellen

Nach dem Klick auf Homepage für Fortgeschrittene erstellen/bearbeiten erscheint das folgende Bild:

Homepage-Eigenschaften festlegen

Seiten erstellen

Prinzipiell werden die Seiten so erstellt, wie bei der Homepage für Einsteiger auch, nur dass es ein paar mehr Seiten sind. Wie viele es sein sollen musst du unter "Homepage-Eigenschaften" festlegen.
Währe zuerst "Seite 1 erstellen" und wenn dieses fertig ist Seite 2 etc.

Nach der Eingabe musst du nach untern rollen und auf die Schaltfläche "Seite 1 generieren" klicken.
Beachte, dass nun die Anzeige wechselt von "Seite 1 erstellen" in "Seite 1 bearbeiten".
Das Ganze wiederholen wir nun für die folgenden Seiten mit diesen Texten:

Seite 2: Meine Familie
Seite 3: Unsere Freunde
Seite 4: Meine Hobbies
Seite 5: Unser Garten

Wir beginnen mit einer Menü-Leiste auf Textbasis. Dafür klicke in der Hauptauswahl auf "Menu mit Text erstellen", woraufhin das folgende Bild öffnet, allerdings noch nicht ausgefüllt:

Menüleiste erstellen

Das obige "Über mich" wurde im folgenden Bild eingefügt.

Wie Ihr seht, habe ich als Menüs die Überschriften der Seiten angegeben. Dss muss nicht sein, aber ein gewisser Zusammenhang sollte schon bestehen.
Neben den eigenen Menüs muss man noch die Titel für Mail und das Gästebuch vergeben. Ich habe sie halt einfach so genannt.
Wichtig ist nun, dass man zum Schluss nach unten rollt und die Schaltfläche "Menu generieren" klickt.
Danach seid Ihr wieder in der Hauptauswahl. Hier klickt Ihr "Homepage generieren", damit das Menü eingebunden wird. Außerdem zeigt dieser Klick gleich, wie die Homepage aussieht.
Und dabei zeigt sich zweierlei. Die Menüs sind zu schmal und über der Email steht "{{txt}}"
Das mit der Menübreite ist schnell erlegt. Klicke auf "Homepage-Eigenschaften festlegen", stelle die Menübreite auf 200, klicke auf "Eigenschaften übernehmen" und dann auf "Homepage generieren".
Das folgende Bild zeigt links die Textversion und rechts die Lösung mit Grafiken.

Menüs mit Buttons

Nun zu einer Menü-Leiste auf Buttons-Basis. Dafür klicke in der Hauptauswahl auf "Menu mit Buttons erstellen". Sinngemäß das folgende Bild öffnet:

Die Grafiken müssen auf der Festplatte als jpg oder gif gespeichert sein.
Nach dem Klick auf "Durchsuchen" oder "Datei auswählen"(je nach Browser) öffnet der übliche Dateidialog, über den man sich zur jeweiligen Grafik durchhangeln kann.

Emailform erstellen

Um die Email einzustellen, klicke auf in der Hauptauswahl auf "Emailform erstellen" und das folgende Bild öffnet:

HTML

HTML ist die Abkürzung von Hyper Text Mark-up Language (Hypertext-Markierungs-Sprache) und ist der Code, in dem fast alle Webseiten geschrieben sind. Auch wenn er einen komplizierten Namen hat, ist der Code selbst eigentlich ganz einfach. Bevor du HTML lernen kannst, musst du etwas Wichtiges wissen.
Alle Befehle werden in dreieckigen Klammern geschrieben < >. Das nennt man „Tags“. Wenn du etwas zwischen diese Klammern schreibst, bedeutet das, du möchtest einen Befehl beginnen. Wenn du einen Befehl beenden möchtest, < /befehl >. Das heißt, du fügst ein / nach dem ersten < hinzu.
Achtung: Um die HHTM-Befehle nicht auszuführen, wurde nach der < eine Leerstelle gesetzt. Die muss also in der Praxis entfallen.
< b>Ein Wort< /b> würde Ein Wort fett geschrieben auf deiner Seite anzeigen. Nachdem das Tag beendet wurde, wird der Rest nach 'Ein Wort' nicht mehr fett geschrieben.
Es gibt einige Ausnahmen für Tags, die nicht beendet werden müssen, doch dazu kommen wir später. Das Konzept der Tags ist bei HTML am schwersten zu verstehen. Wenn du erst verstanden hast, dass jeder Befehl zwischen < und > stehen muss, dann bist du schon auf dem besten Weg, Webseiten zu meistern.
Mehr dazu findet Ihr im HTML-Kurs in der Mitgliedergruppe "Computer und Internet" oder klicke einfach hier.

Das Meisterstück: Mit Tabellen auf Ordner zugreifen

Ab dem 14.10.2014 wechsle ich von Kabel Deutschland zur Telekom schlicht weil ich nicht gerne für 100 MBit/s bezahle um dann zu den Spitzenzeiten nur 10 zu bekomme.
Damit entfällt auch die preiswerte Homepage für 1 Euro/Monat und die 4,95 der Telekom erschienen mir zu teuer.
Als erstes habe ich die HP in einer Cloud, hier Dropbox, gespiegelt. Das funktioniert meistens recht gut, schaue selbst, Klick hier
Das sieht erst einmal so aus wie im folgenden Bild:

......

Als kostenlose Ersatzlösung fiel mir die Feierabend-Homepage ein. Nette Idee aber gar nicht so einfach zu lösen weil das Original sehr stark CSS einsetzt, was die FA-HP gar nicht mag genauso wenig wie JavaScript.
Wie das mit der Feierabend-Homepage aussieht zeigt das folgende Bild:

Das Bild auf der Startseite ist rund 800 x 100 Pixel groß. Das Bild habe ich auf Seite 7 hoch geladen, seinen Link kopiert, das Bild gelöscht und Seite 7 über die Eigenschaften wieder abgeschaltet. Merke: Ein Bild wird nicht gelöscht, es wird nur nicht mehr angezeigt.

Ein Klick auf "Zur Kontaktaufnahme hie klicken" startet das E-Mail-Programm des Anwenders, was dann so aussehen kann:

Der Code dafür sieht so aus:

Zugriff auf Ordner
Das folgende Bild zeigt die Aufgabe. Sichtbar ist eine Tabelle mit 4 Spalten, 2 davon tun etwa, nämlich Dateien herunter zu laden.

Wirksam ist der Klick auf die Disketten-Symbole. Dazu wird ein Link mit "img src" kombiniert. Anstatt
<a href="http://www.xyz.html>Klick hier</a>

schreibt man anstatt "Klick hier" die Image-Adresse, also
<a href="http://www.xyz.html><i<mg src=bildurl.jpg></a>

In der klassischen HTML-Lösung hat man die Daten in einem Ordner, hier hat er den Namen "AS-Studio"gefolgt vom Namen einer Datei. Das sieht dann für einen Tabellenzeile so aus:

Den Ordner kann ich auch in Drobbox anlegen, doch nun brauche ich für jede Datei den öffentlichen Link womit das nun so aussieht:

Sieht aufwendig aus, doch so schlimm war es nicht. Da nämlich die öffentlichen Links in einem Dropbox-Ordner alle mit dem gleichen Text beginnen, konnte ich das per globalem Suchen/ersetzen erledigen.
Im nächsten Fall (Workshop Cocoa) ist die Geschichte etwas einfacher, weil die Tabelle nur 2 Spalten hat.
Noch einfacher ist der Menüpunk "Meine Kolumnen". Die stehen im Ordner "kol" als PDFs und werden klassisch so referenziert:

In der folgenden Lösung für die FA-HP gibt es neben öffenlichen Links noch eine Neuerung.
Während in der klassischen Lösung das Einrücken mittels "padding left" erledigt wurde, klappt genau das in einer FA-HP nicht.
Die Lösung sind die vielen <ul>, die jeder ein kleines Stück einrücken, natürlich zum Schluss gefolgt von vielen </ul>

Eine Liste von Links
Bliebe noch zu klären, wie die folgende Liste entstanden ist:

Die Tabelle wurde in Excel angelegt. Dazu wurden die Links der Qjelle kopiert, also eine Gruppe auswählen und dann mit Strg+C kopieren.
Diese Gruppe wurde dann in der Tabelle auf der richtigen Stelle eingefügt.

Dann wurde die Tabelle als HTML gespeichert. Öffnet man sie mit einem Editor, z.B. dem Notepad von Windows wird die Tabelle als HTML-Code dargestellt. Genau der wird kopiert in der FA-HP eingefügt.

Vorher solltest du noch zweierlei tun. Excel setzt die Links normgerecht in Anführungen, aber die mag die FA-HP nicht. Also müssen die entfernt werden, geht mit globalem Suchen/Ersetzen recht flott.
Die Zwischenüberschriften kann man in Excel zwar tippen, doch das Hervorheben per big- und Bold-Tag muss hier erfolgen.
Dann wird der Qelltext in die FA-HP kopiert.
Dann stehen dort zwar allerhand CSS-Befehle, aber die meisten davon ignoriert die FA-HP einfach, wenn nicht kann man sie einfach löschen.