startseitekatalogpraxiswerkzeugeressourcenmagazingrammiweb

(Stand: 25.11.24, Adresse: http://www.grammiweb.de/anleitungen/ka_templates.shtml)

 

Homepagevorlagen anpassen

Die Grammiweb-Homepagevorlagen bieten Ihnen komplett vorgefertigte Webseiten, die Sie einfach und unkompliziert an Ihre eigenen Bedürfnisse und Anforderungen anpassen können.

In dieser Kurzanleitung zeigen wir Ihnen die dafür notwendigen Schritte.

Was Sie benötigen

Zur Erstellung Ihrer eigenen, professionellen Homepage benötigen Sie:

• Grammiweb-Homepagevorlage
  Für diesen Workshop verwenden wir die Vorlage "012", welche Sie im Templatebereich des Grammiwebs finden können.

• HTML-Editor (alternativ einen ASCII-Texteditor)
  Wir empfehlen den mit dem Microsoft Internet Explorer mitgelieferten HTML-Editor "Frontpage Express", da dieser sich durch einfache Bedienung und (relative) Codesicherheit auszeichnet (sicher, die alten Webdesign-Hasen werden jetzt die Hände über dem Kopf zusammenschlagen, aber gerade für Anfänger empfiehlt sich dieser Editor auf jeden Fall).

• Grafikprogramm
  Für das Anpassen der Menübuttons und das Einfügen eines Logos benötigen Sie ein Grafikprogramm, welches Grafiken im GIF-Format einlesen kann, diese in Echtfarb-Formate konvertieren und anschließend wieder als GIF-Datei speichern kann. In diesem Workshop verwenden wir das Programm "Picture Publisher" der Firma Micrografx. Alternativ können auch Programme wie PaintShop-Pro oder ähnliche verwendet werden.

• Entpacker, ZIP-Format geeignet (zum Beispiel WinZIP)

Die benötigten Programme können Sie, falls nicht schon vorhanden, entweder aus dem Internet downloaden (wobei die über 20 MB umfassende MS Internet Explorer-Datei sich hierfür wahrscheinlich nicht gerade eignet) oder auf vielen Heft-CDs einschlägiger Computermagazine finden.

Vorbereitungen

Nachdem Sie die Vorlage "012" (oder eine der anderen Vorlagen) heruntergeladen haben, legen Sie ein neues Verzeichnis mit beliebigem Namen an. In dieses Verzeichnis entpacken Sie bitte die in der ZIP-Datei befindlichen Einzeldateien. Neben den mit der Homepagevorlage gelieferten Dateien sollten Sie auch alle zusätzlichen Files, die Sie für Ihre Homepage verwenden wollen (Grafiken, Musikstücke, ...), in diesem Verzeichnis ablegen.

Inhalte definieren

Machen Sie sich, bevor Sie die einzelnen Seiten Ihrer neuen Homepage ausfüllen, Gedanken über deren Inhalt. Was soll alles auf Ihrer Website zu finden sein? Jede Vorlage bringt bereits bis zu 5 Seiten mit sich, und Sie können die Anzahl der einzelnen Unterseiten bei beinahe allen Homepagevorlagen schnell und unkompliziert erweitern. Falls Ihnen die Ideen ausgehen, können Sie einfach im Magazinbereich des Grammiwebs nachschauen - dort haben wir einige Möglichkeiten für Homepageinhalte gesammelt.

Die Startseite

Die Besucher Ihrer zukünftigen Homepage werden auf der so genannten Startseite in Empfang genommen. Wir empfehlen Ihnen also, auf dieser Seite Grundsätzliches zu Ihrer Website und den darauf zu findenden Inhalten zu veröffentlichen. Im Grammiweb können Sie viele Informationen zum Gestalten einer Startseite finden.

In allen Vorlagen lautet der Dateiname der Startseite "start.htm". Laden Sie diese Seite einfach in Ihren HTML-Editor und ändern Sie sie nach Ihren Vorstellungen. Mit einem WYSIWYG-Editor ("What You See Is What You Get", "Was Sie sehen ist das, was Sie bekommen") funktioniert das so einfach wie das Schreiben mit einer Textverarbeitung, für codeorientierte Editoren (wie beispielsweise Phase 5 von Ulli Meybohm, den Sie bei unseren Webressourcen finden können) benötigen Sie grundlegende Kenntnisse der Seitenbeschreibungssprache HTML. Diese können Sie mit unserem Workshop "Homepage-Erstellung" erlangen, oder Sie laden sich einfach Stefan Münz´ Onlinereferenzwerk "SelfHTML" herunter, das auf einfache und verständliche Weise an HTML heranführt.

Im Anschluss an das Gestalten der Startseite sollten Sie dieser noch einen aussagekräftigen Titel geben - bei Frontpage Express drücken Sie hierzu einfach im Editorfenster die rechte Maustaste und wählen im daraufhin erscheinenden Kontextmenü den Eintrag "Seiteneigenschaften". Im Feld "Titel" wählen Sie nun eine angemessene Beschreibung für die gerade gestaltete Seite. Mit anschließendem Betätigen des "OK"-Buttons ist die Startseite nun fertig.

Die Unterseiten

Jede Vorlage hat bereits 5 vorkonfigurierte, leere Unterseiten, deren Dateinamen von "seite1.htm" bis "seite5.htm" bereits vorgegeben sind und nicht geändert werden sollten. Jede einzelne Seite können Sie Ihrem Geschmack und Ihren Bedürfnissen entsprechend abändern. Gehen Sie hierbei wie unter dem Punkt "Die Startseite" beschrieben vor.

Sollten die fünf mitgelieferten Seiten nicht ausreichen oder benötigen Sie weniger, beachten Sie bitte unsere FAQs.

Grafiken vorbereiten

Zur Vorbereitung der Grafiken sollte diese in einem geeigneten Grafikprogramm in ein Echtfarb- oder auch RGB-Format konvertiert werden. Beim Micrografx Picture Publisher können Sie dies bewerkstelligen, indem Sie den Eintrag "Effekte" in der Menüzeile mit der linken Maustaste anklicken. Wählen Sie im anschließend erscheinenden Menü den Eintrag "Konvertieren in ..." und dort "RGB-Farben".

Dieses etwas umständliche Vorgehen ist nötig, da die mitgelieferten Grafiken bereits datenreduziert vorhanden sind, d. h., die Farbpalette der Grafiken wurde auf ein Minimum optimiert. Wird nun Text eingefügt, kann dieser zum einen nur auf in der Grafikfarbpalette mitgelieferte Farben zugreifen, zum anderen ist ein Anti Aliasing, also das "Begradigen" der Letterränder unmöglich.  

Dieses Konvertieren ist nur für die wirklich benötigten Dateien, also das Logo ("logo.gif") sowie die Schaltflächen ("button1.gif" bis "button5.gif" nötig.

Logo einfügen

Das Template "012" verfügt ebenso wie viele andere Seitenvorlagen über einen vorreservierten Platz für ein Logo und/oder einen Titel. Die dafür benötigte Datei trägt den Namen "logo.gif" (bei der Vorlage "011" heißt diese Datei "logo.jpg"). Nach entsprechender Vorbereitung (siehe Punkt 3.1) können Sie diese Grafik Ihren Vorstellungen entsprechend umgestalten, wobei das Grundlayout eingehalten werden sollte.  

Menübuttons anpassen

Allen Vorlagen liegen 5 Grafiken bei, deren Bezeichnungen mit "button1.gif" beginnend bis "button5.gif" durchnummeriert sind. Diese Buttons bilden auf der fertigen Homepage die Verbindung zu den einzelnen Unterseiten, die ebenfalls von "seite1.htm" bis "seite5.htm" durchnummeriert sind.

Diese 5 Grafiken können Sie jetzt, den Unterseiten entsprechend, beschriften, wobei die Datei "button1.gif" auf die Seite "seite1.htm" verweisen wird, die Datei "button2.gif" auf die Seite "seite2.htm" und so weiter.

Abschlussarbeiten

Nach dem Anpassen aller Grafiken speichern Sie diese wieder im GIF-Format in dem Verzeichnis ab, in dem auch der Rest Ihrer Homepage gespeichert ist. Hierbei können Sie die bereits vorhandenen Dateien einfach überschreiben, sie liegen ja jetzt in der gewünschten Form vor.

Feinschliff: Die MetaDaten

Die Startdatei Ihrer neuen Homepage, die Datei "index.htm", enthält im Kopfbereich bereits vorbereitete MetaDaten-Einträge. Diese werden benötigt, wenn Suchmaschinen Ihre Seiten mit Robotern, Programmen, die die zur Indizierung Ihrer Homepage benötigten Daten extrahieren, besuchen. Mehr hierzu finden Sie im Grammiweb.

Um nun bestmögliche Platzierungen bei Suchanfragen zu gewährleisten, sollte Sie diese MetaDaten komplettieren. Wechseln Sie dazu einfach in die HTML-Ansicht Ihres Editors (bei Frontpage Express zu erreichen über Ansicht-HTML). Nach kurzer Zeit erscheint die HTML-Ansicht Ihrer Homepage. Diese wird wie folgt dargestellt:

Ändern Sie nun die fettgedruckten Angaben entsprechend ab. In allen Feldern stehen Ihnen 64 Zeichen für Beschreibungen zur Verfügung. Einzige Ausnahmen bilden hier die Zeilen "keywords" und "description", die Ihnen Platz für 256 Zeichen geben.

Feinschliff: Der Titel

Nun benötigt Ihre Website noch einen aussagekräftigen Titel, der in der Titelzeile eines Browsers angezeigt wird. Dieser Titel wird auch später als Eintrag in die Bookmarks eingefügt, wenn Ihre Besucher Ihre Site als Lesezeichen speichern.

Den Titel können Sie, wenn noch der HTML-Code der Datei "index.htm" angezeigt wird (siehe Punkt 4.1), ändern, indem Sie ihn in der 3. Zeile eingeben. Diese Zeile sieht wie folgt aus:

<title>Ihr Homepagetitel</title>

Den fettgedruckten Titel können Sie ganz nach Belieben abändern.

Wenn Sie es ein wenig bequemer haben wollen, wechseln Sie einfach in den WYSIWYG-Modus Ihres Editors und ändern Sie dort den Eintrag. Bei Frontpage Express drücken Sie hierzu einfach im Editorfenster die rechte Maustaste und wählen im daraufhin erscheinenden Kontextmenü den Eintrag "Seiteneigenschaften". Im Feld "Titel" wählen Sie nun eine angemessene Beschreibung für die gerade gestaltete Seite.

Feinschliff: Alternativtexte für die Grafikbuttons

In allen Vorlagen werden den einzelnen Menüschaltflächen alternative Texte zugewiesen, damit der Sinn dieser Verknüpfungen auch angezeigt werden kann, wenn die Grafiken noch nicht geladen sind.

Diese Verweise können Sie in der Datei "menue.htm" finden. Verwenden Sie Frontpage Express, laden Sie diese Datei einfach in den Editor und klicken Sie mit der linken Maustaste einmal auf einen Button, so dass dieser markiert wird. Anschließend drücken Sie die rechte Maustaste, und im daraufhin erscheinenden Kontextmenü wählen Sie den Eintrag "Bildeigenschaften". In dem nun angezeigten neuen Fenster ändern Sie den Eintrag "Ihr Link", den Sie im Feld "Text" finden, in eine aussagekräftige Beschreibung der Verknüpfung um, auf die sich dieser Button bezieht (also beispielsweise "Links", "Gästebuch", ...).

Abschlussprüfung

Überprüfen Sie nochmals die Funktion aller einzelnen Seiten Ihrer Website - sind die Verknüpfungen alle richtig eingegeben, erscheint ein Titel, wird der Text richtig angezeigt, ... Eine komplette Checkliste können Sie bei den Übersichten des Grammiwebs finden.

Ihre Homepage ist nun zur Veröffentlichung bereit und kann ins Internet geladen werden. Wie Sie Daten online verfügbar machen können, wird Ihnen Ihr Webspaceprovider sicher gerne mitteilen.

Herzlichen Glückwunsch! Mit Ihren Ideen und den kostenlosen Grammiweb-Homepagevorlagen haben Sie eine eigene Präsenz im Internet geschaffen, die den Vergleich mit anderen sicherlich nicht scheuen muss. Wir freuen uns immer, wenn unsere Vorlagen Anklang finden, und natürlich sehen wir immer gerne, wenn wir Ihnen und auch vielen anderen zu einer eigenen, persönlichen und individuellen Website verholfen haben. Mailen Sie uns Ihre Internetadresse doch einfach mittels unseres: Kontaktformulars. Natürlich können Sie uns in Ihrer Email an uns auch von Ihren eigenen Erfahrungen beim Anpassen der von Ihnen gewählten Homepagevorlage schreiben, sicherlich sind diese Erfahrungen auch für andere Nutzer interessant.

Häufig gestellte Fragen (FAQ)

Wie können Seiten hinzugefügt werden?

Durch einfaches Kopieren eines leeren Buttons und einer leeren Seite. Benennen Sie den neuen Button einfach mit "button6.gif" und die Seite mit "seite6.htm". In den meisten Vorlagen wird die Navigation in der Datei "menue.htm" geregelt, die alle Buttons und deren Verknüpfungen vereint. Kopieren Sie einfach den letzten Eintrag und fügen Sie ihn anschließend neu ein:

<a href="seite5.htm"><img src="button5.jpg"></a>

Den neuen Eintrag müssen Sie nur noch auf die entsprechenden Buttons und Seiten ausrichten:

<a href="seite6.htm"><img src="button6.jpg"></a>

(Die beiden Beispiele dienen nur der Erklärung. In den Vorlagen sind die Grafiken natürlich noch mit den erforderlichen Angaben zu Breite, Höhe und Rahmen sowie mit alternativen Texten belegt.)

Wie kann man Seiten weglassen?

Natürlich müssen Sie nicht alle 5 Seiten verwenden. Wenn Sie weniger brauchen, entfernen Sie einfach aus der Datei "menue.htm" deren Einträge. Löschen Sie anschließend die überflüssigen Buttons und Seiten, um nicht unnötiges Material auf Ihren Webspeicherplatz zu laden. Sollten Sie also beispielsweise Seite 5 nicht mehr benötigen, entfernen Sie zuerst aus der Datei "menue.htm" den Eintrag

<a href="seite5.htm"><img src="button5.jpg"></a>

Anschließend löschen Sie einfach die Dateien "seite5.htm" und "button5.jpg" (möglicherweise kann die Grafikdatei auch die Endung ".gif" verwenden).

Was ist mit dem Werbehinweis?

Alle kostenlosen Homepagevorlagen verfügen über einen dezenten Werbehinweis, der den interessierten Besucher auf die Homepage des Grammiwebs führt. Hinweise zur Entfernung dieses Hinweises finden Sie auf unserer Informationsseite.

Zurück zum Inhaltsverzeichnis

[an error occurred while processing this directive] [an error occurred while processing this directive]