Hilfen zur Erstellung einer Homepage

Transkript

1 Hilfen zur Erstellung einer Homepage Teil 1 - Vorüberlegungen Teil 2 Planung der Struktur Teil 3 Codierung in HTML Teil 4 Upload und Test Teil 5 Weitere Pflege Teil 6 Anhang: Allg. Webseiten-Tipps, Literatur und Links Teil 1 - Vorüberlegungen Vor der Erstellung einer Homepage sollte man sich über folgende Fragestellungen im Klaren sein bzw. sie in der Gruppe kritisch behandeln: A. Sinn und Zweck B. Botschaft C. Adressaten D. Wirkung E. Recht F. Verantwortung 8 Was bietet eine Homepage, das andere Kommunikationsformen nicht oder weniger gut bieten? 8 Warum wollen wir eigentlich einen Internetauftritt? 8 Was ist unsere Botschaft oder unser Anliegen? 8 Welchen Service, welchen Nutzen bieten wir? 8 Wen wollen wir erreichen? An wen speziell richtet sich unser Angebot? 8 Wie können wir zufällige Surfer dazu bewegen, sich unsere Site näher anzuschauen? 8 Was bietet unsere Site, damit sich das Verweilen und Wiederkommen lohnt? 8 Womit machen wir neugierig? 8 Was ist auf Homepages erlaubt, was nicht? 8 Wer bestimmt oder entscheidet, was auf die Homepage kommt? 8 Wer zeichnet verantwortlich für die Inhalte und Korrektheit der Homepage? (Impressum) 8 Wer ist künftig für die Aufrechterhaltung und Pflege der Homepage zuständig? Thema Leitfragen Methodenvorschlag Gespräch Sammeln mit Zettelmethode oder Mindmap Gespräch Ideen sammeln im Brainstorming oder beim Absurfen anderer Sites Recherche Urheberrecht etc. Notizen Skriptum-HP-neu.doc Folkhard Leuschner ( Seite 1 von 5

2 Teil 2 Planung der Struktur Wenn man sich mit den Grundfragen beschäftigt hat, kann man sich detaillierter mit der Planung der konkreten Struktur der Homepage befassen. Eine Hilfe dabei sollen die folgenden Leitfragen bieten. Thema Leitfragen Methodenvorschlag/Tipps 8 In welche Kapitel oder Hauptteile lässt sich die Website gliedern? 8 Welches sind Haupt-, welches Unterseiten? 8 Wie sind sie miteinander verbunden? A. 8 Wie wähle ich die Dateinamen für Gliederung jede Seite, um sie eindeutig zu max. 8 Zeichen identifizieren? 8 Welche Ordner wähle ich, um wiederholende Grafiken aufzunehmen, und wie sollen sie heißen? B. Inhalte C. Benutzer D. Gestaltung 8 Welche Informationen sollen auf die Hauptseite? 8 Welche Informationen gehören auf die Unter-Seiten? 8 Wie kann ich die Texte auf das absolut Notwendigste reduzieren? 8 Welche Bilder oder Grafiken unterstützen unsere Aussage? 8 Haben wir ein Logo oder Erkennungszeichen? 8 Welche Suchbegriffe sollten im Metabereich auftauchen? 8 Wie regeln wir die Navigation für den Benutzer? (Wie findet er sich in der Struktur der HP zurecht, welche Hilfen hat er?) 8 Wie sollen Text und Bilder auf der Seite angeordnet werden? 8 Welche wiederkehrenden Elemente sorgen für ein einheitliches Erscheinungsbild? 8 Welche Textfarbe und -größe und welchen Hintergrund bekommt die ganze Site? 8 Für welche Bildschirmauflösung optimieren wir das Erscheinungsbild? Planen Sie die Site in Form eines Flussdiagramms (Kästchen und Pfeile) Planen Sie die Texte jeder Seite mit einem Textverarbeitungsprogramm so, dass der Inhalt auf eine halbe A4-Seite passt. Bilder als jpeg oder gif vorbereiten (nur Kopien!), ggf. Thumbnails Logo ggf. einscannen oder erstellen 'Suchmaschinenfutter' Gleichbleibende Navigationsleiste oben und unten auf jeder Seite sog. blinde Tabellen als Hilfe Gestaltung eigener ICONS mit Paint kann später mit Hilfe von CSS einfach geändert werden Rücksicht auf ältere Grafikkarten: 640x480? 800x600?...? Skriptum-HP-neu.doc Folkhard Leuschner ( Seite 2 von 5

3 Teil 3 Codierung der Homepage in HTML Nun geht es an die eigentliche Erstellung der Homepage, der Codierung in der Hypertext- Auszeichnungs-Sprache (HyperTextMarkupLanguage HTML). Meine Empfehlung lautet für den Anfang zunächst, einfache HTML-Befehle von Grund auf zu lernen und zu verwenden. Gegenüber grafisch orientierten Programmen wie FrontPage oder Dreamweaver, bei denen die Code-Erstellung quasi im Hintergrund abläuft, hat dies mehrere Vorteile: Zwar ist es zu Beginn etwas mühsamer, wir erkennen aber rasch, dass der Code kein Hexenwerk ist. Wir können auch Analogieschlüsse aus dem Code anderer Sites ziehen und interessante Lösungen 'abschauen'. Zudem können wir besser kontrollieren, dass der Code unabhängig von bestimmten Browsern ist. Also: 8 Einen einfachen, aber komfortablen HTML-Editor verwenden (Proton), 8 WYSIWYG (FrontPageExpress) nur zum Lernen, nicht zum Erstellen 8 Keine Frames und kein Java-Skript verwenden Folgende Tabelle könnte eine Leitlinie der notwendigsten Tags sein, die es zu erarbeiten gilt. Mein Vorschlag lautet: Erstellen Sie für jeden der Stichpunkte eigene Notizen als Referenz, indem Sie SelfHTML (oder Literatur) und FrontPageExpress konsultieren und das Ganze mit dem Editor Proton ausprobieren. Thema Stichpunkte Notiz / Bsp. / Aufgabe HTML-Editor Grundgerüst und index.html Text Listen 8 Proton (Freeware) 8 FrontPage-Express 8 Internet 8 Grundgerüst jeder HTML-Datei: head, body 8 Angaben im META-Bereich (wichtig für Suchmaschinen) 8 Umlaute und Sonderzeichen 8 Umbrüche: Zeilenumbruch, Absatz 8 Ausrichtung: links, mittig, rechts 8 Schrift (Größe, Farbe, Typ) 8 Überschriften: 4 Größen 8 Text formatieren (hervorheben) 8 Nummerierte Listen 8 Aufzählungslisten Funktion ausprobieren: Mehrere Dateien gleichzeitig öffnen etc. Zum Lernen: z. B. Tabelle anlegen, dann Ansicht HTML Einfach aufgebaute Sites im WWW suchen und Quelltext analysieren SGML-konformes Grundgeruest.htm einmal erstellen (aus SelfHTML holen) Farbtabelle Festlegung mit CSS Skriptum-HP-neu.doc Folkhard Leuschner ( Seite 3 von 5

4 Thema Stichpunkte Notiz / Bsp. / Aufgabe Hyperlinks (Verweise) Tabellen Grafiken Trennlinien Cascading Style Sheets (CSS) = Zentrale Formatvorlagen 8 Link innerhalb einer Datei: Zielpunkt (Anker) setzen, Sprungmarke setzen 8 Link innerhalb des WWW 8 Download-Verweis 8 Grafik als Verweis automatischer Rahmen weg: border=0 8 -Verweis 8 Grundaufbau; Titelzeile; normale Zeile 8 Größe festlegen 8 Rahmen 8 Gitternetzlinien Blinde Tabellen als Gestaltungsmittel 8 Zellen gestalten: Hintergrund 8 Grafik einbinden; Größe angeben; Alternativer Text 8 Rahmen um Grafik 8 Grafikformate für Websites; Erstellung von Icons 8 Grafiken platzieren 8 Fläche gliedern 8 Vorteile von CSS 8 Aufbau einer *.css- Datei (Bearbeitung mit Editor) 8 Hintergrund definieren 8 Überschriften und Absatztexte definieren 8 Farben von Links definieren: aktiv, besucht,... Skriptum-HP-neu.doc Folkhard Leuschner ( Seite 4 von 5

5 Teil 4 Upload und Test der Homepage 8 Test mit verschiedenen Browsern und Auflösungen 8 Daten zusammensuchen, die notwendig für Upload sind (Anmeldename, PW etc.) 8 FTP-Programm (ws-ftp) installieren; Profil einrichten 8 Upload auf den Server des Providers; Online testen 8 HP im Internet bekannt machen Teil 5 Weitere Pflege der Homepage Konzept für weitere Pflege: Wer übernimmt die Pflege? Welche Inhalte müssen regelmäßig überprüft/aktualisiert werden? Wer ist verantwortlich und überprüft den Pflegeerfolg? Notizen Teil 6 Anhang: Allgemeine Webseiten-Tipps, Literatur und Links Links zum Thema Webseitenerstellung Einführungen: SelfHTML, das Standardwerk für alle Webmaster; mit Referenz, vielen Beispielen, Tools und kostenlosen Layouts ourworld.compuserve.com/homepages/birgit_ Einführung in die Gestaltung von HTML-Seiten. Bachmann/1htmkurs.htm also nicht ganz taufrisch) gut strukturierte, umfassende Einführung (1996, HTML-Wörterbuch: ca. 20 übersichtliche Kapitelchen, etwas schwer zu lesen; downloadbar Weiterführende Informationen: Das Dr. Web Onlinemagazin bietet allen ml Webworkern zahlreiche Tipps & Tricks rund um HTML, Grafiken, Flash u.v.m... (für Fortgeschrittene) GoldHTML: Die Regeln für schlechtes HTML im WWW. Amüsante Negativliste. Quelle u. a.: Literatur Hess, Uwe; Karl, Günther: HTML 4, bhv, Bonn, 2. Aufl., Stand dieses Skriptums: Skriptum-HP-neu.doc Folkhard Leuschner ( Seite 5 von 5