Kapitel 7

Die Seitenstruktur

Eigentlich wollen Sie auf Ihren Webseiten Informationen wiedergeben. Dies geschieht in Textform und eventuell mit Hilfe von Bildern. Wie einen normalen Text in einer Textverarbeitung, sollten Sie aber auch Ihre Seiten strukturieren. Das können Sie mit verschieden gewichteten Überschriften machen oder aber Sie benutzen Aufzählungen bzw. Nummerierungen. Weiterhin besteht die Möglichkeit, Tabellen zur Eingabe der Informationen zu nutzen.

Ein Hilfsmittel, dass Sie vielleicht schon aus der Textverarbeitung kennen, sind die Formatvorlagen. Hier sind Formatierungen wie Schriftart, -schnitt und –grad sowie weitere Zeichen- und Absatzformatierungen schon zusammengefasst und unter einem Namen gespeichert. Anstatt einem Wort oder Absatz nun fünf oder sechs verschiedene Formate zuzuweisen, weisen Sie einfach die Formatvorlage zu und die Arbeit ist in einem Schritt getan.

Überschriften

Wie Sie sicherlich in den bereits gelesenen Kapiteln gesehen haben, wird der Text mit Hilfe von Überschriften gegliedert. Die Überschriften sind in der Regel grösser und anders formatiert als der restliche Text. Auch werden sie oft eingerückt, um die verschiedenen Ebenen besser darstellen zu können.

Sie finden die Formatvorlagen in der Formatsymbolleiste und wählen sie durch öffnen des Listenfeldes aus . Für die Überschriften stehen Ihnen folgende Formatvorlagen zur Verfügung.

Listen

Listen sind Aufzählungen, die entweder mit einem Aufzählungszeichen vor den einzelnen Punkten versehen werden oder durchnummeriert sind. Um eine Liste zu erstellen, markieren Sie die gewünschten Absätze und weisen ihnen ein Listenformat zu oder aber Sie wählen zuerst das gewünschte Format und erstellen die Liste dann Punkt für Punkt. Jedes Mal wenn Sie die Enter-Taste betätigen, wird automatisch ein neuer Listenpunkt generiert. Wenn Sie mit der Liste fertig sind, drücken Sie zweimal die Enter-Taste. Normalerweise wird, wenn Sie die Enter-Taste gedrückt haben, ein neuer Absatz mit einem Abstand zum vorherigen begonnen. Dieser Abstand wird bei Listen nicht mit eingefügt.

Nummerierung

Auf der Seite «angebot.htm» haben Sie die einzelnen Punkte in Absätzen untereinander eingegeben. Um aus diesen Absätzen nun eine durchnummerierte Liste zu erstellen, markieren Sie die entsprechenden Absätze und klicken anschliessend auf das Symbol oder wählen Sie die passende Formatvorlage aus. Die Liste wurde erstellt. Klicken Sie einmal auf das Symbol oder wählen Sie den Befehl aus dem Menu BEARBEITEN. Sie können natürlich auch das Tastaturkürzel Strg+z nutzen. Da die Absätze noch markiert sind, gehen Sie jetzt in das Menu FORMAT►NUMMERIERUNG UND AUFZÄHLUNGEN. Es öffnet sich ein neues Dialogfenster in dem Sie individuelle Einstellungen für Ihre Listen vornehmen können. Öffnen Sie das Register «Nummerierung». Wählen Sie die Art der Nummerierung aus und wenn es eine fortgesetzte Liste ist, können Sie auch den Startwert verändern. Ein Klick auf schliesst das Fenster und Sie sehen Ihre Liste am Bildschirm.

Sie können die Aktion ebenfalls wieder rückgängig machen.

Einfache Aufzählungen

Eine weitere Möglichkeit, Listen zu erstellen, bieten Ihnen die Aufzählungszeichen. Mit Zahlen können Sie eine Rangliste darstellen, bei den Aufzählungen sind die einzelnen Punkte nur durch ein vorangestelltes Symbol gekennzeichnet.

Der Text sollte noch markiert sein, ansonsten markieren Sie ihn nochmals. Schnell lässt sich die Liste wieder mit einer Formatvorlage oder aber durch Klick auf das Symbol erstellen. Es geht natürlich auch wieder über das Menu. Hier öffnen Sie dann das Register «Einfache Aufzählung». Wählen Sie eine Form aus und klicken auf .

Grafische Aufzählungen

Etwas mehr Arbeit machen diese Aufzählungen. Dafür wirken diese Listen auch nicht so nüchtern und lassen anspruchsvollere Gestaltungen zu.

Machen Sie die letzte Aktion wieder einmal rückgängig und gehen wieder in das Menu FORMAT►NUMMERIERUNG UND AUFZÄHLUNGEN. Dort öffnen Sie diesmal das Register «Grafische Aufzählungszeichen». Sie können nun, wenn Sie eine Designvorlage verwendet haben, die dort hinterlegten Aufzählungszeichen verwenden. Falls Sie andere Zeichen bevorzugen oder keine Vorlage verwendet haben, klicken Sie auf die zweite Option und danach auf . Es öffnet sich das Dialogfenster, was Sie bereits aus Kapitel 6 kennen. Klicken Sie dort auf und es öffnet sich das Fenster zum Einfügen von ClipArts. Dort gibt es eine Kategorie für Webaufzählungen. Wählen Sie eine aus und klicken in diesem und dem nächsten Fenster auf um sie zu schliessen. Sie hätten natürlich auch eine eigene Grafik einfügen können, bedenken Sie aber, dass umfangreiche Grafiken auch die Ladezeit Ihrer Seiten verlängern und nicht jeder Surfer besitzt einen schnellen Internetzugang.

Listen mit Unterpunkten

Manchmal benötigen Sie eine Liste mit Unterpunkten, wobei dann eine Gewichtung der einzelnen Punkte vorgenommen werden kann. Die Punkte müssen in verschiedenen Ebenen dargestellt werden. Das erreichen Sie, in dem Sie die entsprechenden Punkte einrücken.

Geben Sie den zusätzlichen Text (oder Ihren eigenen) wie abgebildet ein. Markieren Sie alle Aufzählungspunkte und klicken zweimal auf das Symbol um die Liste aufzuheben und danach mit den Standardzeichen wieder zu formatieren. Nun markieren Sie die ersten der drei neu eingefügten Unterpunkte und klicken zweimal auf das Symbol .

Wiederholen Sie den Vorgang für die restlichen neu eingefügten Punkte. Die Liste sollte mittlerweile folgendermassen aussehen. Die Punkte lassen sich auch weiter untergliedern. Markieren Sie bei den ‚Festplatten’ die Aufzählungen unter den Kapazitätsangaben und rücken diese nochmals ein, jeweils wieder durch zweimaliges Klicken auf . Um Einrückungen zu verändern, klicken Sie auf das Symbol . Dies bewirkt das genaue Gegenteil der bisherigen Aktionen.

Sie können die mehrstufigen Listen auch bei Nummerierungen anwenden. Den einzelnen Ebenen lassen sich dann auch noch verschiedene Formate zuweisen.

Wenn Sie sich entschieden haben, speichern Sie die Seite und betrachten sie wieder einmal im Browser.

Tabellen

Mit den Listen und Überschriften reihen Sie Informationen untereinander auf. Wenn Sie allerdings Gegenüberstellungen oder Beschreibungen zu Abbildungen einfügen möchten, lässt sich dies mit Hilfe der Tabellen erledigen. Eine Tabelle besteht aus einzelnen Zellen, die in Spalten und Zeilen geordnet sind. Jede Zelle kann Text, Bilder oder andere Elemente und sogar ganze Tabellen beinhalten. Im letzten Fall spricht man dann von einer verschachtelten Tabelle.

Für die Arbeit mit Tabellen stellt Ihnen FrontPage eine eigene Symbolleiste zur Seite um die Befehle schnell ausführen zu können. Die Befehle finden Sie natürlich auch in den Menus.

Tabellen einfügen

Bevor Sie eine Tabelle einfügen, sollten Sie sich Gedanken machen, aus wie vielen Spalten und Zeilen sie bestehen soll. Es lassen sich aber auch später noch Zeilen bzw. Spalten hinzufügen. Am besten blenden Sie auch die Symbolleiste «Tabellen» ein, um die Arbeit zu vereinfachen.

Öffnen Sie zunächst eine neue Standardseite und gehen dann in das Menu TABELLE►EINFÜGEN►TABELLE. Es öffnet sich ein Dialogfenster, in dem Sie die Grundeinstellungen für die neue Tabelle vornehmen können.

Zunächst legen Sie die Zahl der Zeilen und Spalten, die Sie benötigen, fest. Im Layout können Sie die Ausrichtung des Textes, wie z.B. zentriert oder rechtsbündig angeben. Da eine Tabelle und auch die einzelnen Zellen von Rahmen umgeben sind, lässt sich auch die Stärke des Rahmens einstellen. Wenn Sie die Tabelle nur zur genauen Platzierung von Text auf einer Seite benötigen, setzen Sie die Breite auf 0 Pixel. Dann zeigen die Browser keine Rahmen an. Der Abstand zwischen Rahmen und Text wird im nächsten Feld ausgewählt. Sie können auch noch den Abstand der Zellen zueinander bzw. zum äusseren Rahmen der Tabelle im letzten Feld eingeben. Ändern Sie in diesem Beispiel jedoch nur die Zahl der Spalten und Zeilen und klicken auf . Die Tabelle wurde eingefügt. Geben Sie jetzt den Text wie abgebildet ein. Setzen Sie die Einfügemarke unter die Tabelle und drücken einmal die Enter-Taste um einen Abstand zwischen dieser und der jetzt eingefügten Tabelle zu erhalten. Gehen Sie wieder in das Menu TABELLE►EINFÜGEN►Tabelle und entfernen diesmal das Häkchen vor Klicken Sie wieder auf und geben den Text wie abgebildet ein.

Bei der ersten Tabelle wurde eine

feste Breite von 100% angegeben. Dies bedeutet, egal wie breit das Fenster des Browsers ist, die Tabelle wird immer grösstmöglich angezeigt und die Spalten sind alle gleich breit. Wenn der Text dann nicht in eine Zelle passt, wird die Zeile zweizeilig.

In der zweiten Tabelle richtet sich die Breite der Tabelle nach dem Zellinhalt. Wenn Sie an dieser Stelle zweizeilig schreiben möchten, müssen Sie einen manuellen Zeilenumbruch mit der Tastenkombination Umschalt+Enter-Taste einfügen. Sehen Sie sich die Seite einmal in der Vorschau von FrontPage an und ändern Sie die Grösse des Fensters um die Unterschiede zu sehen. Schliessen Sie die neue Seite durch Klick auf und beantworten Sie das erscheinende Dialogfenster durch Klick auf.

Eine schnellere Möglichkeit, eine Tabelle einzufügen, finden Sie in der Standardsymbolleiste hinter dem Symbol . Öffnen Sie wieder eine neue leere Standardseite und klicken Sie jetzt auf das Symbol. Wenn Sie mit der Maus über die Kästchen ziehen, werden diese blau. So können Sie schnell die Grösse Ihrer Tabelle festlegen (klicken und ziehen vergrössert das Anzeigefenster noch).

Text in Tabellen einfügen

Fügen Sie eine Tabelle mit vier Zeilen und fünf Spalten ein und geben Sie den Text wie abgebildet ein. Je nachdem, was Sie im Dialogfenster aus Abbildung 7.12 zuletzt für die Breite ausgewählt haben, wird die neue Tabelle entsprechend mit fester Breite oder aber ohne eingefügt. Wenn Sie häufig mit unterschiedlichen Varianten arbeiten, kann der Weg über das Menu dann schon praktischer sein. Um von einer Zelle zur nächsten zu wechseln, benutzen Sie die Tab-Taste und die Umschalt+Tab-Taste um zur vorherigen Zelle zu gelangen. Am Ende einer Zeile springen Sie automatisch in die erste Zelle der nächsten Zeile. Wenn Sie sich in der letzten Zelle unten rechts befinden und dann die Tab-Taste drücken, wird eine neue Zeile eingefügt. Speichern Sie die Seite unter dem Namen «sopo.htm» mit dem Titel «Sonder- und Restposten».

Text formatieren

Um den Text zu formatieren, stehen Ihnen die bereits bekannten Zeichen- und Absatzformate zur Verfügung. Innerhalb von Tabellen gibt es aber noch weitere Formatierungsmöglichkeiten. Mit den Symbolen , und können Sie den Text in der Zelle oben, vertikal zentriert oder unten ausrichten. Zusätzlich zu den Farben für den Text wählen Sie mit Hilfe des Symbols eine Farbe für den Zellhintergrund aus. Die Auswahl gilt jedoch nur, wie bei den Ausrichtungen, nur für die aktuell markierte Zelle. Eine Zelle markieren Sie, in dem Sie die Alt-Taste gedrückt halten, wenn Sie in die Zelle klicken. Weitere Zellen können dann markieren, in dem Sie die Strg-Taste gedrückt halten und in die entsprechenden Zellen klicken. Ganze Spalten und Zeilen werden markiert, wenn man den Mauszeiger über bzw. vor die Spalte oder Zeile bewegt und klickt, wenn sich der Mauszeiger in einen kleinen schwarzen Pfeil verwandelt.

Grafiken in Tabellen

Wie bereits erwähnt, ist es auch möglich, Bilder oder Grafiken in eine Tabellenzelle einzufügen. Setzen Sie dazu die Einfügemarke in die Zelle und wählen aus dem Menu EINFÜGEN►BILD►CLIPART. Möchten Sie lieber ein eigenes abgespeichertes Bild benutzen, nehmen Sie den Befehl EINFÜGEN►BILD►AUS DATEI.

Spalten oder Zeilen einfügen

Wenn Sie im nachhinein feststellen, dass Sie zu wenig Spalten oder Zeilen zu beginn angegeben haben, ist das nicht weiter schlimm. Sie müssen die Tabelle nicht neu erstellen. Wie Sie am Ende der Tabelle eine weitere Zeile einfügen, wissen Sie ja bereits. Soll allerdings eine Spalte oder Zeile innerhalb der Tabelle eingefügt werden, so markieren Sie die Spalte bzw. Zeile vor der die neue erscheinen soll und klicken auf das Symbol für die Zeile bzw. für die Spalte. Es reicht auch, wenn die Einfügemarke in der richtigen Zelle blinkt, dann können Sie sich das Markieren sparen. Nehmen Sie den Befehl TABELLE►EINFÜGEN►ZEILEN ODER SPALTEN dann können Sie auch noch wählen, ob vor oder hinter bzw. rechts oder links neben der Markierung eingefügt wird. Analog funktioniert das Ganze auch mit einzelnen Zellen.

Tabellen formatieren

Bisher haben Sie Inhalte in die Tabelle eingegeben und diese Inhalte formatiert. Es ist selbstverständlich auch möglich, die Tabelle an sich zu formatieren und das Aussehen Ihren Wünschen nach anzupassen. Die passenden Einstellungen finden Sie in den Tabelleneigenschaften. Klicken Sie in die Tabelle und gehen dann in das Menu TABELLE►EIGENSCHAFTEN►TABELLE oder klicken Sie rechts in die Tabelle und wählen aus dem Kontextmenu TABELLENEIGENSCHAFTEN.

Den Bereich für das Layout kennen ja bereits. Neu ist dort der Punkt für den Textfluss. Legen Sie hier fest, ob Text links oder rechts neben der Tabelle erscheinen soll. Standardmässig wird dort kein Text eingefügt.

Darunter sehen Sie die Einstellungen für die Rahmen. Stellen Sie die Breite ein und wählen Sie die passenden Farben aus. Als letztes können Sie der gesamten Tabelle einen farbigen Hintergrund oder aber auch eine Grafik zuweisen. Mit den obigen Einstellungen sieht die Tabelle dann so aus.

Zellen formatieren

So wie Sie die Tabelle formatiert haben, lassen sich auch einzelne Zellen formatieren. Klicken Sie recht in die gewünschte Zelle oder nehmen den Befehl aus dem Menu TABELLE►EIGENSCHAFTEN►ZELLE um das Dialogfenster zu öffnen.

Im Grossen und Ganzen finden Sie hier dieselben Befehle wie bei den Tabelleneigenschaften. Bei der Zeilenerstreckung geben Sie an, über wie viele Zeilen sich die Zelle ausweiten soll. Das gleiche gilt für die Spaltenerstreckung.

Wenn die Zelle eine Überschrift enthält, kann diese durch einen Klick fett formatiert werden und wenn Sie möchten, dass die Browser keinen Umbruch in den Zellen vornehmen, wenn das Fenster zu klein ist, lässt sich das ebenfalls verhindern. Probieren Sie ruhig die einzelnen Optionen aus und klicken nach jeder Änderung einmal auf um das Ergebnis zu begutachten. Am Ende können Sie die Aktionen ja wieder rückgängig machen.

Beschriftungen

Eine Tabelle für eine genauere Beschreibung beschriftet werden. Standardmässig wird eine solche Beschriftung über der Tabelle eingefügt. Sie können die Aktion über das Menu TABELLE►EINFÜGEN►BESCHRIFTUNG durchführen (denken Sie daran, die Einfügemarke muss sich in der Tabelle befinden). Wenn Sie den Befehl gewählt haben, erscheint die Einfügemarke zentriert über der Tabelle und Sie können den Text eingeben. Um die Beschriftung unter die Tabelle zu setzen, klicken Sie mit der rechten Maustaste in die Beschriftung und nehmen den Befehl BESCHRIFTUNGSEIGENSCHAFTEN aus dem Kontextmenu oder Sie klicken in die Beschriftung und gehen über das Menu TABELLE►EIGENSCHAFTEN►BESCHRIFTUNG.

Zellen verbinden

Falls Sie mehrere Artikel eines Herstellers anbieten, müssen Sie dessen Namen nicht immer wieder ausschreiben. Sie können mehrere Zellen zu einer einzigen verbinden und dann in dieser grossen Zelle den Namen eintragen.

Fügen Sie in Ihrer Tabelle drei neu Zeilen ein und markieren die vier Zellen wie abgebildet. Jetzt klicken Sie auf das Symbol und die vier Zellen werden zu einer zusammengefügt und der Text wird mittig in der Zelle ausgerichtet. Den Befehl finden Sie auch im Menu TABELLE►ZELLEN VERBINDEN oder im Kontextmenu.

Zellen teilen

Falls Sie die Markierung der Zelle aufgehoben haben, markieren Sie sie nochmals und klicken jetzt auf das Symbol oder gehen über das Menu TABELLE►ZELLEN TEILEN bzw. Kontextmenu. Es erscheint ein Dialogfenster, in dem Sie die passenden Einstellungen vornehmen und mit einem Klick auf übernehmen. Sie haben jetzt aus einer Zelle wieder vier gemacht.

Zeilen und Spalten löschen

Markieren Sie die drei leeren Zeilen und klicken dann auf das Symbol oder benutzen Sie den Befehl aus dem Menu TABELLE►ZELLEN LÖSCHEN bzw. aus dem Kontextmenu. Die Zellen werden entfernt.

Tabellen zeichnen

Vielleicht möchten Sie sich Ihre Tabelle ja manuell gestalten. Sie haben natürlich die Möglichkeit, eine Tabelle wie bisher beschrieben, einzufügen und anschliessend können Sie dann verschiedene Zellen verbinden und andere wieder teilen. FrontPage bietet Ihnen aber mit einem Werkzeug an, die Tabelle zu zeichnen. In diesem Fall zeichnen Sie zunächst den Rahmen der Tabelle und danach die einzelnen Linien, die dann die Tabelle in Spalten und Zeilen aufteilt.

Klicken Sie in der Tabellensymbolleiste auf . Ihr Mauszeiger verwandelt sich daraufhin in einen Bleistift. Die neue Tabelle soll unter der anderen entstehen. Führen Sie den Mauszeiger an den linken Seitenrand und ziehen dann mit gedrückter linker Mauszeiger den Rahmen auf. Wenn Sie mit der Grösse zufrieden sind, lassen Sie die Maustaste los. Die Grösse der Tabelle oder der Zellen können Sie bei jeder Tabelle immer noch verändern. Führen Sie den Mauszeiger auf den Rand bis er sich in einen kleinen schwarzen Doppelpfeil verwandelt . Mit gedrückter Maustaste können Sie jetzt die Höhe oder Breite verändern. Das gilt dann allerdings für die komplette Spalte oder Zeile.

Nachdem Sie nun den Tabellenrahmen erstellt haben, müssen Sie noch die Aufteilung in Zellen vornehmen. Klicken Sie in die Tabelle und halten die Maustaste gedrückt. Ziehen Sie jetzt den Mauszeiger nach links oder rechts bzw. oben oder unten. Sie müssen nicht direkt am Rand beginnen, die Linie wird automatisch erzeugt. Teilen Sie die Tabelle einmal wie in der Abbildung auf. Die senkrechten Linien werden immer passend zu den bereits eingefügten ausgerichtet. Durch erneuten Klick auf das Symbol oder durch Drücken der Esc-Taste schalten Sie das Werkzeug wieder aus.

Haben Sie eine falsche Linie eingefügt, benutzen Sie das Radiergummi . Mit diesem Werkzeug entfernen Sie die Rahmenlinien innerhalb der Tabelle. Haben Sie das Werkzeug ausgewählt, auch das erkennen Sie wieder am Mauszeiger, klicken Sie in die Zelle, von der Sie eine Linie entfernen möchten und bewegen die Maus dann dorthin. Sobald die gewünschte Linie rot eingefärbt wird, können Sie die Maustaste loslassen und die Linie ist weg.

Gleichmässig verteilen

Machen Sie sich nicht die Mühe, alle Spalten und Zeilen schon beim Zeichnen gleichmässig auszurichten. Markieren Sie über das Menu TABELLE►MARKIEREN►TABELLE (oder Doppelklick vor die Tabelle, wenn der Mauszeiger nach rechts ‚kippt’) und klicken Sie dann auf das Symbol um allen Zeilen die gleiche Höhe bzw. um allen Spalten die gleiche Breite zuzuweisen. Diese Befehle finden Sie auch wieder im Menu TABELLE, doch dürfen Sie dann nicht die gesamte Tabelle, sondern nur eine Spalte oder Zeile markieren.

Tabelle löschen

Wenn Sie mit Ihrem Werk absolut nicht zufrieden sind, löschen Sie einfach die gesamte Tabelle. Markieren Sie die gesamte Tabelle und drücken dann die Entf-Taste, gehen in das Menu BEARBEITEN►LÖSCHEN. Diese Aktion können Sie dann jetzt auch durchführen.

Selbermachen 7.1

¨Öffnen Sie die Seite «service.htm» und formatieren Sie den Inhalt wie abgebildet

¨Nutzen Sie die Formatvorlagen, Aufzählungen und Absatzformatierungen

¨Speichern Sie die Seite mit den Änderungen

Selbermachen 7.2

¨Öffnen Sie eine neue leere Standardseite

¨Erstellen Sie eine Tabelle und geben den Text ein

¨Formatieren Sie die Tabelle nach Ihren Wünschen

¨Speichern Sie die Seite unter dem Namen «repo.htm» mit dem Titel «Restposten Software»

Selbermachen 7.3

¨Öffnen Sie eine neue leere Seite

¨Zeichnen Sie eine Tabelle die dem abgebildeten Layout entspricht

¨Geben Sie den Text entsprechend in die Zellen ein

¨Vergessen Sie die Grafik in der Zelle nicht

¨Formatieren Sie den Text und blenden Sie die Rahmenlinien aus

¨Speichern Sie die Seite unter dem Namen «wir.htm». Da Ihr Web diese Seite bereits beinhaltet, müssen Sie das Dialogfenster zum Überschreiben der Datei mit Klick auf

¨Sehen Sie sich das Ergebnis in den verschiedenen Browsern an

Tabellen begegnen Ihnen im Internet sehr oft. Entweder um Informationen geordnet aufzulisten oder aber, wie in der letzten Übung gezeigt, einfach nur, um den Text an bestimmten Stellen der Seite wiederzugeben.

Über die Strukturierung von Webseiten haben Sie nun genug erfahren. Von der Sache her ist eine solche Gliederung ja eigentlich selbstverständlich, Sie wissen nun allerdings auch, wie Sie es praktisch umsetzen können.

In der Hoffnung, Ihnen geholfen zu haben, verabschiedet sich nun

Kapitel 7