Das Homepage-Handbuch speziell für blutige Anfänger

Webdesign - Wir erstellen eine Beispielhomepage

Wir erstellen das Layout basierend auf Tabellen

2.1. Start mit einer leeren Seite

Bitte legen Sie einen Ordner für die Übungshomepage an. Dieser Ordner ist fortan gemeint, wenn ich vom "Homepageordner" spreche. Sodann starten Sie Namo WebEditor respektive Ihren Webseiteneditor und schließen dann alle evtl. darin geöffneten Webseiten. Dann erstellen Sie eine neue, leere Seite. Namo Anwender drücken zu diesem Zwecke die Tastenkombination [Strg]+[N], wodurch sofort eine leere Seite erscheint. Nicht-Namo-Anwender begeben sich bitte in den HTML-Quelltext und geben das folgende ein, damit wir auf den selben Nenner kommen:

<html>
<head>
<title>Kein Titel</title>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="white">

</body>
</html>

Speichern Sie diese leere Seite unter dem Namen "vorlage.htm". Wir werden daraus nun eine Beispielseite und eine Vorlage für alle weiteren Seiten bauen.

2.2. Die Tabellen für das Layout einfügen

Bearbeiten Sie die leere Seite (vorlage.htm) in Ihrem Webseiteneditor. Fügen Sie direkt untereinander drei Tabellen ein. Jede Tabelle besteht nur aus einer Zelle. Die Tabellenbreite soll 750 Pixel betragen, entsprechend der Breite unseres geplanten Layous.

Namo-Anwender gehen bitte so vor:
- Öffnen Sie die leere Seite (vorlage.htm).
- Namo 8: Wählen Sie aus dem Ribbon-Menü: Einfügen - Tabelle - Neue Tabelle
- Namo 6/2006: Wählen Sie bitte aus dem Menü: Tabelle - Neue Tabelle
- Im Dialog "Tabelleneigenschaften" geben Sie bitte die Werte laut folgener Abbildung ein:
Layouttabelle erzeugen mit Namo WebEditor

Die Abstände "Zellenfüllabstand" und "Zellenabstand" sorgen normalerweise dafür, dass es zwischen den Zelleninhalten und dem Zellenrand sowie auch zwischen den einzelnen Zellen der Tabelle einen Abstand gibt. Wir setzen diese Werte aber auf Null. Die Rahmenstärke belassen wir vorerst auf 1. Wir werden später für jede Tabelle einzeln entscheiden, ob wir diese Parameter abändern müssen.

Von der Sorte fügen wir 3 Stück direkt untereinander ein. Mit Namo WebEditor muss man dafür die Schreibmarke in die Zeile unter der letzten Tabelle bringen und dann die Einfügeprozedur wiederholen. Alternativ dazu können Sie die Tabelle auswählen, in die Zwischenablage kopieren und dann in der nächsten Zeile einfügen. Zum Schluss speichern Sie die Seite wieder unter dem Namen "vorlage.htm". So in etwa müsste das in Namo WebEditor aussehen:

Nicht-Anwender von Namo WebEditor schauen sich bitte die Beispielseite an: Beispielseite 1 Tabellen-Layout und verwenden ggf. deren HTML-Quelltext (Rechtsklick - Quelltext anzeigen).

2.3. Grundinhalte machen das Layout sichtbar

Der Seitenkopf

Die oberste Zelle soll den Seitenkopf enthalten wie folgt:

Zum Vergleich schauen Sie sich bitte das Beispiel an: (Beispielseite 2) Laden Sie das Bild (banner.gif) herunter und speichern Sie es in Ihr Homepageverzeichnis. Dann öffnen Sie die Seite "vorlage.htm" in Ihrem Web-Editor.

Doch bevor wir das Bild einbauen, bearbeiten wir noch etwas die Tabelle. Mit dem Tabellenrahmen würde der Seitenkopf jetzt nämlich nicht so gut aussehen, deshalb entfernen wir ihn, indem wir dessen Breite von 1 auf 0 setzen. Mit Namo WebEditor geht das wie folgt: Bringen Sie die Schreibmarke in die Tabellenzelle und dann führen Sie einen Rechtsklick aus und wählen aus dem Kontextmenü: "Tabelleneigenschaften". Dort setzen Sie die Rahmenstärke auf 0.

Jetzt können wir das Banner in die Tabellenzelle einfügen. Falls Sie nicht mehr genau wissen, wie man ein Bild einfügt, dann lesen Sie bitte noch einmal nach
im Kapitel: "Grundelemente einer Webseite - Bilder"

Die Navigationsleiste

In der zweiten Tabellenzelle soll sich die Navigationsleiste befinden. Um das Handbuch universell zu halten, verwende ich nicht die automatischen Navigationsleisten von Namo WebEditor. Da wir bei einer Änderung der Navigation diese nicht von Hand auf allen Seiten ergänzen wollen, erstellen wir sie auf einer eigenen HTML-Seite und binden Sie mittels Inline-Frame auf allen Seiten ein, etwa so:

Um die Navigation auf einer Extraseite zu erstellen, gehen Sie wieder vor wie bei der ersten Seite. Beginnen Sie mit einer leeren Seite. Namo-Anwender drücken also wieder [Strg]+[N]. Schreiben die abgebildete Textzeile, etwa wie folgt:

Sehen Sie dazu auch die Beispielseite "navigation.htm"

Das ist alles fürs erste. Speichern Sie diese Seite unter dem Namen "navigation.htm" in Ihrem Homepageordner.

Nun können wir die Navigationsleiste in die Homepage einbauen. Öffnen Sie wieder die Seite "vorlage.htm". Fügen Sie unter dem Banner in die zweite Tabellenzelle ein Inline-Frame ein. Lesen Sie ggf. im Kapitel Spezielle Website-Elemente - Frames nach, wie das geht. Geben Sie dem Inline-Frame folgende Eigenschaften und Maße:

So wie Beispielseite 3 - Seite mit Navigation sollte das dann aussehen.

Ein Textmuster für unsere Vorlage

In der dritten Tabellenzelle sollen sich die Inhalte der Seite befinden. Wenn wir die Vorlage später verwenden, dann fügen wir die entsprechenden Inhalte ein. Daher muss unsere Vorlage hier nicht viel enthalten. Wir erstellen aber einen kleinen Mustertext als Anhaltspunkt. Innerhalb dieser Tabellenzelle können Sie weitere Tabellen anlegen, um wie im Beispiel gezeigt ein Bild neben dem Text anzuzeigen oder um sonstige Unterteilungen vorzunehmen. Belassen Sie diese Einteilung in der Vorlage, dann können Sie es auf allen Seiten genau so machen, wodurch die Homepage insgesamt einheitlich bleibt. Schauen Sie sich einfach mal die Beispielseite 4 an.

Die Fußzeile

In der vierten und letzen Tabellenzelle bringen wir noch eine Fußzeile unter. So eine Abschlusszeile rundet das Bild der Homepage ab und kann praktische Informationen für den Leser enthalten. Es hat sich eingebürgert, dass man hier einen Copyrightvermerk unterbringt oder ein Kurzimpressum bzw. den Link zum Impressum. Aber Achtung: Das Impressum bzw. der Link zum Impressum muss laut Telemediengesetz ohne langes Scrollen erreichbar sein. Daher reicht ein Link ganz weit unten in der Fußzeile nicht aus. Wir kompensieren das aber durch den Link "Kontakt" in der Navigationszeile.

Aber halt! Wo ist denn die vierte Tabellenzelle? Die haben wir ja noch gar nicht angelegt! - Keine Panik. Wir arbeiten ja noch am Layout. Und da kann man natürlich jederzeit noch etwas hinzufügen. Fügen Sie also einfach noch eine Tabelle ein. Wir erinnern uns an die Tabelleneigenschaften:
Layouttabelle erzeugen mit Namo WebEditor
Wenn die Tabelle fertig ist, dann fügen Sie hier wieder ein Iframe ein, genau wie schon bei der Navigationszeile. Zuvor müssen wir natürlich auch erst wieder eine kleine HTML-Seite erstellen. Zu diesem Zwecke verwenden wir aber die bereits vorhandene Seite für die Navigationszeile als Muster. Öffnen Sie also die Datei "navigation.htm" und speichern Sie sie unter dem Namen "fusszeile.htm". Dann verändern Sie die Textzeile entsprechend dem folgenden Beispiel und speichern Sie wieder ab:

Schließen sie dann die Datei "fusszeile.htm" im Editor und bearbeiten Sie nun wieder die Vorlage. Fügen Sie jetzt ein Iframe in die neue Tabellenzelle ein. Als Quelle wählen Sie die Datei "fusszeile.htm". Abschließend sollte es dann etwa so aussehen wie auf der Beispielseite: Beispiel 5.

Lesen Sie weiter >>> Farben für die Webseite

Seitenanfang || www.BuntesWeb.de - Startseite | Stichwortverzeichnis | Impressum

Copyright by Jörg Wischnewski - Logos, Warenzeichen, Schutzmarken etc. stehen im jeweiligen Recht und Eigentum der eingetragenen Inhaber, auch wenn dies nicht ausdrücklich einzeln angegeben ist.