Anleitung zum Erstellen einer homepage für Gruppen von ai

Glückwunsch. Die erste Hürde ist genommen. Wenn ihr es noch nicht gemacht habt, könnt ihr euch mal durch die (fast fertigen) Seiten klicken, um einen ersten Eindruck davon zu bekommen, was noch zu tun ist. Los geht es immer mit der Datei "index.html", die Startseite, die in der Vorlage  anders aufgebaut ist als die anderen. Lasst euch durch den simplen Balken oben nicht stören. Der wird später bearbeitet.

Hier gehts zur "Tour".

Dies ist eine Anleitung für ("blutige") Anfänger. Je nach den Kenntnissen können daher bestimmte Punkte übersprungen werden.
  1. Der Anfang
    1. Erster Schritt
    2. Das Programm NVU
    3. Das Arbeiten mit Tabellen
    4. Praktisches Beispiel 1
    5. Praktisches Beispiel 2
    6. Der Banner
    7. Einen Link setzen
    8. Dateien hochladen

Der Anfang

Es geht im Wesentlichen um zwei Dinge, die vielleicht neu sind:
a) das Erstellen von Links (Verweisen) und
b) das Hochladen von Dateien (natürlich auch das Herunterladen)

Die anderen Dinge dürften allen Personen, die auf dem Computer etwas geschrieben haben, wissen. Eine Ausnahme könnte das Arbeiten mit Tabellen sein, deswegen wird auch dies erläutert. 

Wir brauchen ein Programm zum Bearbeiten von Internetseiten, ohne dass wir uns um den Quelltext (im Format html) kümmern müssen und wir brauchen ein Programm für den Datentransfer. Es gibt sehr viele kostenlose Pogramme im Netz und wer mit FrontPage (von windoofs) oder dem openoffice vertraut ist, kann diese Programme gerne nutzen. Hier werde ich die Weiterentwicklung von Netscape-Mozilla, das Programm "New View" (NVU) als Grundlage nehmen, um die Schritte zu beschreiben.

Für den Datentransfer wird ein ftp-client benötigt. Zum Erklären habe ich PSFtp Free als Beispiel genommen.

Erster Schritt

Sofern keine anderen Programm vorhanden sind, NVU und PSFtp Free herunterladen und installieren.
a) homepage von NVU
b) zum download von PSFtp Free bei freenet.de

Das Programm NVU

Da wir als Erstes mit dem Erstellen (bzw. Bearbeiten) von Seiten fürs Internet beschäftigen wollen, rufen wir NVU auf. Ein Blick auf die "Maske" sagt uns, dass der Aufbau an die Struktur bekannter Programme (wie word oder openoffice) angepasst und auch genau so einfach zu bedienen ist. Nur werden die Dateien hier nicht mit der Endung .doc, .rtf oder .sdw sondern als .html (oder .htm) abgespeichert.

Auch für dieses Programm finden sich viele Hilfe-Seiten, Kurse, Tutorials und Foren im Internet. Wer sich erst einmal Grundlagen aneignen möchte, kann das z.B. über eine Seite bei PC Welt machen. Ich werde nur die absolut notwendigen Schritte erklären, die für das Erstellen einer Webseite notwendig sind (ohne selbst alle Möglichkeiten des Programms zu kennen und genutzt zu haben).

Werfen wir mal einen Blick auf das Programm (nicht anklicken, dies ist ein Bild)

bild01

Geöffnet ist "index.html" (und 2 weitere; clever wer die Zeile dafür entdeckt). Allerdings sollten wir nicht mit der Datei index.html beginnen, da sie etwas komplizierter ist (3 Spalten anstelle von 2 Spalten). Zum Üben wird es am Besten sein, die Datei "model.html" zu laden und nach ersten Veränderungen als Datei mit neuem Namen, z.B. temp.html abzuspeichern. Das geht genau wie auch anderswo (erneut: bitte nicht klicken). Das Ergebnis solltet ihr euch dann in dem von euch verwendeten Browser einmal anschauen.

bild02

und anschließend

bild03

Hinweis: Falls eine Datei bearbeitet wird, die den gleichen Namen beibehält, reicht es aus, auf das Symbol für "Speichern" (Befehlszeile 2) zu klicken. Das sollte häufiger gemacht werden, weil das Programm bei langer Arbeitsdauer und großen Dateien leider absturzgefährdet ist.

Achtung: Wenn wir eine neue Datei erstellen, wird in NVU nur xhtml oder "alle Dateien" angeboten. Deshalb sollten die Dateien mit den Endungen also nicht als "beispiel" sondern als "beispiel.html" abgespeichert werden.

Das Arbeiten mit Tabellen

Die vorhandenen Tabellen können mit Inhalt gefüllt werden. Sie werden aber nur selten exakt den Wünschen entsprechen. Selbst die Tabelle, in der die Navigation untergebracht ist, wird wahrscheinlich bearbeitet werden müssen. Zeilen (in der Navigation Kategorien und Unterpunkte), die nicht gebraucht werden, können gelöscht werden (dann verschwindet auch der Inhalt).

bild04

Zur Erklärung:
Unter "Tabelle" bietet sich sowohl die Alternative "einfügen" als auch "löschen" an. Die Person, die die deutsche Maske erstellte, hat für Zeile "Reihe" (row) genommen. Wir können also eine Tabelle komplett löschen oder einfügen, oder aber lediglich Reihen oder Spalten einfügen oder löschen.

Sollten einmal die Relationen verrutschen (je nach den Sachen, die in bestimmte Zellen "gepackt" werden, nehmen sie mehr oder weniger Platz in Anspruch), dann können
a) die Spalten an der markierten Stelle in der Leiste über der geöffneten Datei
b) die Zeilen an der markierten Stelle neben der geöffneten Datei
variiert werden.

Achtung: Wenn Text aus anderen Dateien übernommen wird, werden auch die Formatierungen übernommen. Das ist ganz nett, wenn ich z.B. einen Text mit Fußnoten habe. Dann wird die sonst sehr aufwendige "Navigation in der Datei" (bei Fußnoten z.B.) automatisch eingefügt. Einige Dinge aber versteht NVU nicht richtig. Deshalb sollte die Textdateien mit den verständlichen Zeichen formatiert werden, bevor kopiert wird. Im Einzelnen geht es um
  • In der Datei darf  automatische Silbentrennung nicht aktiviert sein (notfalls ganze Datei markieren und automatische Slibentrennung deaktivieren
  • Es dürfen keine typgrafischen (schräge) Anführungszeichen und Apostrophs verwendet werden. Wie das geht, sagt euch die Hilfe eurer Programme
Auch wenn ich nur eine Überschrift kopiere, bleibt sie als Überschrift markiert und benötigt (z.B. in einer Zelle) Platz darüber und darunter. Wenn dadurch die Zellenhöhe z.B. "verrutscht" muss die entsprechende Textstelle markiert werden und eine Auswahl wie hier

bild05

getroffen werden. Ich würde empfehlen, "normaler Text" zu wählen, um danach in der obersten Befehlszeile "Format" und "Schriftart" sowie "Schriftgrad" zu bestimmen. Textpassagen lassen sich auch in der Befehlszeile 3 mit dem kleinen "A" (verkleinern), mit dem großen "A" (vergrößern) und mit B (Fettschrift), I (kursiv) und U (unterstreichen) stilistisch bearbeiten.

Wichtig: In der Grundeinstellung von NVU wird es den Besuchern der Internetseiten erlaubt, andere Schriften für die Darstellung zu wählen. Das bedeutet, dass Seiten, von denen wir annehmen, dass wir ihnen das Schriftbild (-art, font) "arial" verpasst haben, bei Leuten, die in ihrem Browser als Standardschrift "times new romans" eingestellt haben, nicht "arial" sondern "times new romans" sehen. Wer das ändern möchte, geht unter Extras-Einstellungen-Schriftarten und entfernt das Häkchen in dem Kontrollkästchen.

Dies erst einmal alles, was zu NVU beachtet werden sollte. Ansonsten gibt es auch in diesem Programm die Taste F1 um Hilfe aufzurufen.

Praktisches Beispiel 1

Es ist sinnvoll, sich am Anfang die Struktur der Webseite zu überlegen, d.h. welche Kategorien in der Navigation (rechts) gebraucht werden und welche nicht. Als Nachteil zu den fertigen Skripten (in php) müssen bei einem Wechsel der Navigation oder auch Änderungen am Aussehens (Layout) jedes Mal alle Seiten entsprechend bearbeitet werden.

Nehmen wir also an, es handelt sich um eine Gruppe, die die Seite vorwiegend für Mitgliederwerbung, Spenden und Mitteilungen an die Mitglieder verwenden will. In einem solchen Fall wird vielleicht die Rubrik "Dokumente" mit den diversen Unterrubriken nicht gebraucht. Dann könnten wir durch Überschreiben und Löschen von der Form links

bild09 zur Form rechts gelangen.

Wenn wir die Dateinamen beibehalten, würde nun
dokus.html = schwerpunkte
presse.html = fall 1
ua.html = fall 2
themen.html = fall 3
aktiv.html = treffen
sein.

Die Datei artikel.html könnte gelöscht werden.
bild10

Falls wir den Dateien neue Namen geben, muss natürlich in allen Dateien die Navigation ersetzt werden, d.h. wir müssen zu der neuen Datei an den jeweiligen Stellen "links" setzen (siehe unten).

Praktisches Beispiel 2

Wir haben uns entschieden, auf der Startseite auf eine Kampagne von ai aufmerksam zu machen. Die Webpräsenz der Sektion bietet dazu viele Möglichkeiten. Ich habe als Beispiel "ai in Bewegung" genommen. Es war im Oktober 2007 auf der Seite der Sektion in der rechten Spalte unter der Navigation. Wir aber wolllen es als Blickfang in die linke Spalte tun, wo momentan "Platz für Bild" steht.

Selbst wenn es möglich wäre, sollten wir nun nicht einfach von der Seite "kopieren", sondern zuerst klicken wir rechts auf die Grafik und speichern mit "Grafik speichern unter" das Bild auf die Festplatte und zwar genau in dem Ordner, in dem auch alle anderen Dateien sind.

Jetzt gehen wir in die Zelle wo "Platz für Bild" steht und klicken sodann auf Grafik (Befehlsleiste 2 in NVU). Dann wird ein Fenster geöffnet

bild11

Erklärung
: Durch einen Klick auf "Durchsuchen" haben wir das korrekte Bild gefunden. Dann haben wir einen Alternativtext eingetragen. Nun schauen wir noch, ob das Bild für unsere Spalte geeignet ist. Unsere Spalte ist 156 pixel breit, die Grafik nur 150. Sie passt also gut in die Spalte, bzw. könnten wir die Grafik breiter oder die Spalte enger machen. Das sieht dann so aus:

bild12

Jetzt müssen wir noch einen "Link" unter die Grafik setzen, aber das wird weiter unten erklärt.

Der Banner

Bei uns hat der Banner (auch bekannt als "header") den Namen "header.gif" und muss nicht nur für die Seite "index.html" bearbeitet werden. Wer sich auskennt, fügt in einem Bildbearbeitungsprogramm wie "xnview" (ebenfalls freeware) den gewünschten Text hinzu. Wem das böhmische Dörfer sind, hat mit einem kostenlosen Banner Generator nur wenig Chancen (ich bin den links auf dieser Seite gefolgt und kann wenig Positives vermelden). In diesem Fall sollte besser Fremdhilfe in Anspruch genommen werden (im Bekanntenkreis kennt sich doch jemand mit Bildbearbeitung aus, oder?).

Einen Link setzen

Diese Funktion könnte aus anderen Programmen bekannt sein. Ein bestimmter Teil des Textes wird markiert (oder eine Grafik wird angeklickt) und dann "Hyperlink setzen" gewählt. In NVU geht das so:

a) ich markiere einen Text, den ich zum Link (Verweis) machen will
oder ich klicke auf eine Grafik
b) dann auf das Symbol "Link" in der Befehlszeile 2 klicken
c) es öffnet sich folgendes Fenster

bild06

wenn ich auf eine Seite meiner Homepage verlinken will, klicke ich auf "durchsuchen" und wähle die Datei, die mit diesem "Verweis" aufgerufen werden soll.

Wichtig: Die Datei sollte im gleichen oder in einem Unterzeichnis zu dieser Datei liegen, um "relative links" setzen zu können. Dabei muss darauf geachtet werden, dass die "url relativ zur Seitenadresse" eingerichtet ist. Das sieht mensch in NVU leider erst, nachdem der link gesetzt wurde.  Ansonsten müssen "absolute links" gesetzt werden, wie http://www.meine.homepage.de/beispiel.html anstelle von beispiel.html.

bild07

Ich kann natürlich auch eine komplette Internetadresse (url) in das Feld eingeben (hinein kopieren), nur sollte dann entschieden werden, ob das "Ziel" im gleichen oder einem andern Fenster geöffnet wird.

Hinweis: Jede/r erfahrene Internetbenutzer/in kann durch rechten Mausklick selber entscheiden, ob ein Link im gleichen oder einem separatem Fenster (Tag) geöffnet wird. Mit einem entsprechendem Hinweis ist deshalb dieser Schritt evtl. überflüssig.

Wenn ich dem Besucher die Entscheidung abnehmen möchte, klicke ich zuerst auf "mehr Eigenschaften" und dann auf "Ziel". Die angebotene Option sieht so aus:

bild08

Bitte nicht daran stören, dass die Person, die das Programm ins Deutsche übersetzt hat, ein -t in Fenster vergessen hat. Wenn ich einen externen Link aus der Adresszeile kopiere, sieht das Fenster für einen Link unter einer Grafik so aus (Beispiel für die index.html Datei mit der Kampagne "ai in Bewegung"):

bild13

Ich habe hier "Rand verwenden" angeklickt. Das ist natürlich Geschmackssache.

Dateien hochladen

Langsam aber sicher füllen sich die Seiten der homepage, aber momentan nur auf der Festplatte. Natürlich kann und sollte ab und zu im Browser geschaut werden, ob sich alles so verhält, wie es geplant war. Es lohnt sich immer, das Funktionieren von links erst auf dem PC zu überprüfen, bevor die Dateien ins Internet geschickt werden. Aber sobald wir eine Webpräsenz und die Zugangsdaten haben, sollte mindestens ein Satz wie "Baustelle von soundso" dastehen.

Erst einmal aber müssen wir das Programm (ftp-client im Beispiel PSFtp Free) einrichten. Ihr solltet euch am Anfang ruhig die Zeit nehmen, das zu lesen, was die Person, die das Programm entwickelte, geschrieben hat. Dennoch braucht es nur wenig Schritte bis die Einstellungen vorgenommen sind.

Im Programm auf Verbindungsmanager klicken. Danach auf "neue Seite" klicken. Es öffnet sich folgendes Fenster:

bild14

Einige Daten, wie den ftp-Server und das Start-Verzeichnis (meistens Adresse ohne "www") solltet ihr haben. Den Benutzernamen und das Kennwort werdet ihr beim Einrichten der homepage erhalten haben. Bitte alles sorgältig eintragen und dann noch das Startverzeichnis lokal auswählen. Als Letztes der Verbindung einen Namen wie "ai" geben und dann auf "Verbinden" klicken.

Wenn alles richtig war, sollten nun 2 Fenster nebeneinander stehen: links - die Festplatte; rechts - das Internet (das am Anfang noch leer ist). Auf dem folgenden Bild (Türkei Koordinationsgruppe) ist sowohl links als auch rechts schon Einiges vorhanden.

bild15

Das Stammverzeichnis (lokal) heißt ai-ko und im Internet eben ai-tr.de (ausgeschrieben, versteht sich). Daneben (wo Name, Größe etc. steht) sind jeweils die Unterverzeichnisse und die vorhandenen Dateien aufgelistet. Jeweils von dort kann hochgeladen werden (von links nach rechts) oder heruntergeladen werden (von rechts nach links) wenn eine oder mehrere Dateien (auch ganze Verzeichnise) markiert und mit der rechten Maustaste angeklickt werden.

Obacht: Es wird jedes Mal gewarnt, wenn eine Datei gleichen Namens schon vorhanden ist. Das Programm schaltet sich nach einer gewissen Zeit von allein ab. Solltet ihr jedoch einen Fehler entdeckt, ihn auf der Festplatte korrigiert und (ohne PSFtp Free) zu schließen erneut hochladen wollen, dann muss erst das Symbol neben dem Ordnersymbol angeklickt werden (im Bild nur auf der Internetseite sichtbar). Die Seite kann aber auch durch einen Klick auf Ftp-Server und "Seite aktualisieren" erneut geladen werden.

Nach Einrichten des Programms ist eine erneute Eingabe von Zugangsdaten nicht mehr notwendig. Je nachdem, wie ihr die Verbindung genannt habt, wird nun dieser Name mit einem Herz versehen rechts oben auftauchen. Also: beim nächsten Öffnen des Programms einfach auf das Herzchen klicken und schon seid ihr mit dem Internet verbunden.

Zu guter Letzt: Meine Überlegungen zu html versus php findet ihr in meinem privaten Wiki, ebenso wie ein paar Tipps beim Erstellen von Webseiten. Ich habe versucht, die Anleitung zwar ausführlich, anschaulich und präzise zu formulieren. Wenn es Schwierigkeiten gibt, könnt ihr in meinem Wiki beim "user" wikisysop (bin ich als administrator) eine Nachricht auf meiner Seite "discussion" hinterlegen oder eine e-mail schreiben. Das geht aber nur, wenn ihr angemeldet seid. Dann den links "special pages"-"users list" folgen.

Wenn ihr mit den Seiten fertig seid, könnt ihr den Ordner "bilder" und die liesmich.html Seite löschen. Anders ausgedrückt, sie haben auf euren Seiten im Internet eigentlich nichts verloren. Die anderen Grafiken wie der "header" oder das "logo" müssen aber mit hochgeladen werden. Wenn ihr das "Muster" weitergeben wollt, gerne. Dazu würde es reichen, auf die zip-Datei zu verweisen.

Eine Kleinigkeit:
Etwas ist mir erst später aufgefallen. Wenn mensch in NVO oder OpenOffice Tabellen in einer html-Seite anlegt, wird immer eine Kopfzeile mit abgespeichert. Diese Kopfzeile dient dazu der Tabelle einen Namen zu geben (z.B. Übersicht 2006). Wenn ihr in diesen Kopfzeilen, die normalerweise nicht sichtbar sind und auch keinen Platz einnehmen, gerne mit Text füllen wollt, seht euch die Datei model01.html einmal an. Die kann für einen solchen Fall als Musterdatei genutzt werden.

Hamburg, Mitte Oktober 2007