 |
www.BuntesWeb.de - Computer & Internet
|
Seitenanfang
Listen
HP-Spezialelemente |
|||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||
Das Homepage-Handbuch speziell für blutige AnfängerGrundelemente einer Webseite - ListenGrundsätzliches über TabellenWill man eine Auflistung hübsch untereinander schreiben bzw. Texte oder Daten in Zeilen und Spalten ordentlich aufgliedern, dann bedient man sich einer Tabelle. Schon bald haben findige Webdesigner herausgefunden, dass man auch Bilder und sonstige Objekte prima in Tabellen organisieren kann und so auch das ganze Seitenlayout mittels Tabellen in den Griff bekommen konnte. Heute ist diese Methode bei den Profis überholt, aber für Anfänger und nicht-Profis mit weniger aufwendigen und teuren HTML-Entwicklungsumgebungen sind Tabellen noch prima geeignet, um damit das Grundgerüst ihrer Webseiten zu erstellen. Namo WebEditor unterstützt auch noch nicht so gut CSS und verwendet ebenfalls Tabellen, wenn es um das Seitenlayout geht. Es gibt sogar eigens dafür eine Funktion (Layoutbox), die automatisch passende Tabellenzellen erstellt, während der Anwender nur noch die Position von Feldern bestimmt, in die er später seine Inhalte schreiben will. Auch sonst wird die Arbeit mit Tabellen von Namo WebEditor sehr gut unterstützt, weil sie einfach ein zentraler Bestandteil des Webdesigns waren und für uns auch noch sind. Die Grundform einer Tabelle
Wie man sieht, besteht eine Tabelle aus mehreren Tabellenzellen (mindestens aber aus einer)). Die Zellen sind organisiert in Zeilen und Spalten. So werden sie immer hübsch neben- und untereinander angeordnet. <table border="1"> Das Tag <table> leitet die Tabelle ein und enthält die Eigenschaften der Tabelle. Im obigen Beispiel erkennt man das typische Attribut 'border', welches die Rahmenbreite bestimmt. Das Tag <tr> steht für 'table row', damit beginnt eine Tabellenzeile. Auch die Zeile kann Eigenschaften haben. Es ist aber eher unüblich, diese zu verwenden. So enthält dieses Tag meist keine Attribute. Das Tag <td> steht dann für eine Tabellenzelle - 'table data'. Aus der Anzahl der Tabellenzellen pro Tabellenzeile ergibt sich die Anzahl der Spalten. Jede Zeile muss immer gleich viele Zellen haben. Wer den HTML-Code von Hand erstellt, muss selbst darauf achten. Namo WebEditor achtet darauf natürlich automatisch. Tabellenzellen haben wie schon gesagt gewisse Eigenschaften. Im obigen Beispiel wird die Zellenbreite mit dem Attribut 'width' auf 190 Pixel eingestellt. Tabellenzellen der selben Spalte müssen natürlich immer auch die gleiche Breite haben. Ein beliebter Flüchtigkeitsfehler, den auch Namo WebEditor nicht verhindern kann, wenn man explizit für jede Zelle eine andere Breite eingibt. Der Verwendungszweck einer TabelleGanz klar - Tabellen bringen Ordnung und Übersichtlichkeit. Mittels Tabellen lassen sich Worte und Nummern anordnen und zueinander in Bezug setzen. Aus den Bereichen Mathematik, Buchhaltung und Datenbanken kennt man die Vorzüge von Tabellen. Diese kann man also auch auf Webseiten darstellen. Aber die Tabellenzellen können nicht nur Daten fassen. Sie können beliebig groß sein und fassen auch ganze Textpassagen, sowie Bilder und sonstige Objekte einer Webseite. Außerdem lassen sich Tabellenzellen miteinander zu einer großen Zelle verbinden oder weitere Tabellen in Tabellenzellen einfügen. Man kann damit tricksen, um Texte und sonstige Objekte in bestimmter Weise anzuordnen. Man kann damit sogar das komplette Seitenlayout organisieren. Sicher - die HTML-Puristen und W3C-Jünger predigen das Ende des "Tabellenmisbrauchs". Schließlich gibt es dafür ja heute den DIV-Container und CSS. Wenn es aber nach einigen dieser Leute ginge, dann müsste man erst einen Webdesigner-Führerschein machen, bevor man eine Homepage veröffentlichen darf. Zum Glück ist das Internet aber noch offen für alle. Aber nicht alle können oder wollen sich eingehend befassen mit CSS, HTML, XHTML, XML und 'hast Du nicht gesehen'....Bei Verwendung von Tabellen braucht man keinen CSS-Kurs, um ein ordentliches Seitenlayout zu erzeugen. Und so lange das W3C die Tabelle nicht ganz abschafft, spricht nichts dagegen, die Eigenschaften von Tabellen für eigene Zwecke einzusetzen. Hierbei wird man von Namo WebEditor bestens unterstützt. Seitenlayout mittels TabellenIm Textbereich lässt sich damit bereits tricksen. So kann man z.B. Tabulatoren nachbilden oder Text in ganz bestimmter Weise einrücken Einfaches Beispiel: Ein Text soll rechts und Links einen Rand bekommen. Wir verwenden also eine Tabelle wie oben, aber die linke und die rechte Spalte sollen nur als Randbegrenzung dienen:
Der Text steht in der mittleren Spalte. Die anderen beiden Spalten sind nur Platzhalter. Somit gibt die Tabelle das Layout vor. Aber jeder sieht natürlich sofort, dass das mit einer Tabelle gemacht wurde. Wir müssen daher den Rahmen der Tabelle noch los werden. Aber das ist überhaupt kein Problem. Man kann die Breiten der Tabelle, der einzelnen Zellen und der Tabellenrahmen bestimmen. Setzen wir die Rahmenbreite einfach auf den Wert Null. Dann verschwindet er ganz:
So entsteht auch mehrspaltiger Text:Man muss nur wieder entsprechende Tabellenzellen entwerfen und den Text dann sehr geschickt darin verteilen. Schon sieht die Homepage aus wie eine Zeitungsseite. Besonders praktisch ist das aber nicht. Insbesondere sehr lange Textpassagen wären schwer zu lesen, weil man immer rauf und runter scrollen müsste. Für Sie habe ich die Ränder der Tabelle sichtbar gelassen. Damit Sie den Aufbau sehen:
Und so kann man ein paar Bilder (beinahe) ganz ungezwungen verteilen:
|
|||||||||||||||||||||||||||||||||||||||||||||||||||
|
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.
|
1. Bringen Sie die Schreibmarke an die Position, wo die Tabelle beginnen soll. Dann wählen Sie aus dem Menü: Tabelle (Bei Namo 8 befindet sich das Tabellen-Menü im Ribbonmenü 'Einfügen'. Wählen Sie 'Neue Tabelle.' - Es öffnet sich der Eingabedialog "Tabelleneigenschaften".