 |
www.BuntesWeb.de - Computer & Internet
|
Seitenanfang
Der Seitenkopf
Hyperlinks |
||||
|
||||
Das Homepage-Handbuch speziell für blutige AnfängerGrundelemente einer Webseite - Der TextDer Text ist das wichtigste Element jeder Webseite. Er transportiert die Information. Der Leser möchte möglichst schnell an die gesuchte Information herankommen. Daher sollten vor allem längere Textpassagen gut strukturiert werden, indem man sie in Absätze aufteilt und sie ggf. mit treffenden Überschriften versieht. Weitere Textformatierungen sollten das Geschriebene entweder leichter lesbar oder einfach nur gefälliger fürs Auge machen. Leider wird hier aber oft genau das Gegenteil erzielt. AbsätzeAbsätze beim Schreiben haben ungefähr die selbe Bedeutung, wie Sprechpausen beim Reden. Sie zeigen dem Leser, wo ein Gedankengang abgeschlossen ist und geben ihm die Chance das gelesene zu verarbeiten, bevor er sich mit dem nächsten befasst. Hier ein Beispiel für einen Absatz, Der Textfluss wurde unterbrochen und der nächste Absatz beginnt in einer neuen Zeile. Außerdem sind die Absätze durch eine Leerzeile voneinander abgesetzt. So kann der Leser sehr leicht erkennen, wo die Absätze beginnen. Erkennt man schon am ersten Satz, worum es in dem Absatz geht, dann kann man sofort entscheiden, ob es Sinn macht, weiter zu lesen oder ob man gleich zum nächsten Absatz springt. Dies erleichtert die Suche nach etwas bestimmtem im Text. In der Grundeinstellung von Namo WebEditor erzeugt man Absätze, indem man die Eingabetaste drückt. Es entsteht der folgende HTML-Code: <p>Text...</p>. Bei manchen Editoren und in Namo WebEditor, wenn man es so einstellt, entstehen durch Druck auf die Eingabetaste lediglich ein manueller, 'weicher' Zeilenumbruch. Wenn Ihr Editor so eingestellt ist, dann müssen Sie ggf. die Umschalttaste zusamen mit der Eingabetaste drücken, um einen Absatz zu erzwingen. Manueller (weicher) ZeilenumbruchEin Zeilenumbruch bedeutet den Abbruch des fließenden Textes in der bisherigen Zeile und die Fortsetzung in der nächsten Zeile. Texte in HTML-Dokumenten werden normalerweise vom Webbrowser (und auch in Namo WebEditor) in Abhängigkeit von der Größe des Betrachterfensters automatisch umgebrochen. Dabei sollte man es nach Möglichkeit auch belassen. Aber manchmal ist es auch erforderlich, dass man einen Zeilenumbruch erzwingt. AbsatzformatierungenIn der Grundeinstellung wird der Text linksbündig ausgegeben und am rechten Rand automatisch umgebrochen. HTML gestattet aber noch ein paar weitere Möglichkeiten, den Text innerhalb eines Absatzes auszurichten. Zur Auswahl stehen die Ausrichtungen "Links", "Rechts", "Zentriert" und "Block". Im folgenden je ein Beispiel dafür: Dieser Absatz ist linksbündig. Dieser Absatz ist rechtsbündig ausgerichtet. Dieser Absatz ist zentriert. Und in diesem Absatz ist der Text mittels Blocksatz ausgerichtet. Das bedeutet, dass weder links noch rechts ein Rand entstehen soll. Dies wird erreicht, indem die Abstände zwischen den Worten vergrößert werden. Dadurch sieht der Text sehr aufgeräumt aus. So findet man das in allen Zeitungen und Zeitschriften. Auch ich habe mich auf dieser Homepage für diese Darstellungsweise entschieden. Absatz-Eigenschaften auswählen mit Namo WebEditorSie müssen den Absatz nicht markieren. Führen Sie einen Rechtsklick irgendwo in den gewünschten Absatz aus und aus dem Kontextmenü wählen Sie dann "Absatzeigenschaften". In Namo WebEditor bis Version 2006 finden Sie die Absatzformatierung auch im Menü [Format - Absatz]. Namo 8 bietet die grundlegenden Absatzformatierungen im Ribbon-Menü 'Start' in der Sektion 'Absatz' an. Es gibt neben diesen Grundformatierungen noch weitere Einstellungen, wie Einzüge und Absatzabstände, die Sie über die 'Rechtsklickmethode' angezeigt bekommen. Diese spreche ich in diesem Rahmen nicht näher an. Sie können aber gern damit experimentieren. Im HTML-Code sehen die Absatzausrichtungen so aus: ÜberschriftenUm es dem Leser noch angenehmer zu machen, verwendet man Überschriften. Daran erkennt man den Textinhalt, ohne alles lesen zu müssen und kann noch schneller und angenehmer nach der gewünschten Information suchen. Voraussetzung dafür sind natürlich treffende Überschriften mit genau zum Thema passenden Stichworten. Bei Überschriften gibt es ein hierarchisches System. Das beginnt mit der Seitenüberschrift,. Dann kann man auf einer Seite vielleicht mehrere Themen behandeln, die auch je eine Überschrift haben sollten. Schließlich kann es noch sein, dass einzelne Themenpunkte durch eine Überschrift markiert werden. Hat jeder Themenpunkt mehrere Absätze, so kann man diesen je eine Überschrift geben .... und so weiter. HTML sieht vor, dass Überschriften je nach Hierarchiestufe unterschiedlich groß erscheinen. Wie groß genau, das steuert der jeweilige Webbrowser. Mit HTML kann und soll man das kaum beeinflussen. Erfahrene Webdesigner verwenden CSS, um die Überschriften genau nach ihren Vorstellungen erscheinen zu lassen. Nach den Regeln guter HTML-Programmierung soll man sich streng an die Hierarchie halten. Also sollte man nicht z.B. Überschriftgröße 3 für die Seitenüberschrift verwenden und erst später im Text die Überschriftgröße 1 anwenden. Auch ist es nicht zweckmäßig, wenn man zu regen Gebrauch von Überschriften macht. Es ist längst nicht notwendig, alle Überschriftengrößen tatsächlich zu verwenden. Für das folgende Beispiel für die Abstufung von Überschriften mache ich eine Ausnahme von dieser Regel: Überschrift 1 - SeitenüberschriftÜberschrift 2 - ThemenüberschriftÜberschrift 3 - Einzelne ThemenpunkteÜberschrift 4 - Unter-ThemenpunkteÜberschrift 5 - AbsatzüberschriftenÜberschrift 6 - Markierung und sonstige Zwecke
Der HTML-Code für Überschriften lautet <h1>Text</h1>, <h2>Text</h2> u.s.w. bis <h6>Text</h6>. Das 'h' steht für das englische Wort für Überschrift:"Haeding". Der Webbrowser behandelt Überschriften wie Absätze - er erzeugt also eine Leerzeile zwischen der Überschrift und dem folgenden Text. Horizontale Trennlinie (Ruler)Um Abschnitte besonders deutlich voneinander zu trennen oder einfach weil es vielleicht hübscher ist (wenn man es nicht übertreibt), kann man eine horizontale Trennlinie einfügen. Zu diesem Zwecke kann man z.B ein Bild verwenden. Mit HTML kann man aber auch einfach eine solche Trennlinie erzeugen. In Namo WebEditor 2006 wählt man dazu aus dem Menü: [Einfügen - Horizontale Linie]. Bei Namo 8 befindet sich das entsprechende Symbol im Ribbon-Menü 'Einfügen' in Sektion 'Text'. Die Linie wird wie eine Überschrift, bzw. wie ein Absatz eingefügt und sieht aus wie folgt:
ZeichenformatierungenJaja, natürlich wird empfohlen, dass man sämtliche Formatierungen mittels CSS (Cascading Stylesheets) vornimmt. Für den Anfänger ist das aber eine zusätzliche Hürde und auch das Programm Namo Webditor verwendet sehr gern noch die alten HTML-Attribute. Und ich will Ihnen ja die Webseitenerstellung mit Hilfe dieses oder eines ähnlichen WYSIWYG Webseiten Editors näher bringen, ohne Sie (zu mindest für den Anfang) mit HTML-Code oder gar CSS zu bombardieren. Wir brauchen auch keine Angst vor dem altmodischen Kram haben, denn noch kommen selbst die modernsten Browser prima damit zurecht. Also: Sie können in Namo WebEditor einen beliebigen Ausschnitt aus Ihrem Text auswählen und mit wenigen Klicks dessen Eigenschaften festlegen. Ohne lange im Ribbon-Menü von Namo 8 oder in den Menüs von Namo 2006 suchen zu müssen, führen Sie einfach eine Rechtsklick auf den markierten Text aus und in dem dann erscheinenden Kontextmenü wählen Sie: "Schriftarteigenschaften". Oder noch einfacher: Drücken Sie die Tastenkombination [Strg]+[L]. Es erscheint ein Dialogfenster namens 'Schriftart'. Dort wählen Sie per Dropdownmenü oder durch Auswahl einer Option einen oder mehrere der angebotenen Formatierungen aus. Wenn Sie das erledigt haben, dann klicken Sie zum Abschluss den Button [ OK ]. Experimentieren Sie ruhig mal mit den diversen Schrifteigenschaften. Sie haben z.B. folgende Möglichkeiten:
Einige typische Fehler bei der SchriftgestaltungOft sieht man Webseiten im Zeitungsstil. Sehr professionell gemacht, aber die Schrift ist kaum lesbar, weil sie viel zu klein ist. So passt zwar viel Text in mehreren Spalten auf den Bildschirm, aber während die Auflösung eines Printmediums bei 200 bis 300 dpi liegt, stellen normale Bildschirme nur knapp 100 dpi dar. Buchstaben, die nur noch aus wenigen Bildpunkten bestehen wirken unscharf und viel zu klein. OK, es gibt auch extrem hoch auflösende Bildschirme. Man hält den Bildschirm aber nicht wie eine Zeitung vor die Nase, sondern sitzt einigermaßen entspannt mit einem Abstand von ein bis zwei Armlängen davor. Man sollte also im Vergleich zu einer Zeitung oder einer Zeitschrift wenigstens doppelt so große Buchstaben auf dem Bildschirm ausgeben. Natürlich könnte man den Lesern auch einen doppelt so großen Bildschirm empfehlen und den Sehbehinderten eine Lupe... Ein weiterer typischer Fehler ist die Wahl eines wunderschönen, aber leider auch sehr kontrastreichen und stark gemusterten Hintergrundbildes. Darauf verschwimmen die Buchstaben und das Lesen von längeren Textpassagen wird zur Qual. Zumindest für den Textbereich sollte man also einen weniger spektakulären Hintergrund wählen. Die Erfahrung hat außerdem gezeigt, dass Schwarze Schift auf hellem Untergrund weniger anstrengend ist als umgekehrt. Weitere Sünden sind:
Weblinks zum Thema SchriftenDamit haben wir das Grundelement 'Text' abgehandelt. |
||||
|
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.
|
Im Normalfalle ist die Linie immer eine ganze Zeile breit. Durch einen Doppelklick auf die Linie können Sie deren Eigenschaften aufrufen: Wie sie in der Abbildung links sehen, können Sie diverse Eigenschaften der Linie beeinflussen. Die Breite steht per Standard auf 100%. Sie können die Line aber beispielsweise auch 400 Pixel
breit machen. Alles andere probieren Sie am besten
selbst mal aus.