CSS mit Frontpage

Mühsam, aber möglich

Der HTML-Editor des größten Software-Produzenten ist verwendbar, kann aber nicht als professionell bezeichnet werden. CSS wird ebenso wie die meisten anderen weltweiten Standards behandelt: Es ist zwar möglich, sie zu verwenden, aber das wird nach besten Kräften getarnt, versteckt und behindert.

Frontpage ist der Versuch, Webseiten mit den Mitteln der Textverarbeitung zu vergewaltigen. Alle speziellen Web-Kategorien werden in das Text-Schema gepresst - auch CSS.

CSS	Cascading Style Sheets
Philosophie	Eine Webseite ist keine Textseite
Stylesheet-Datei	Zentrale Regeln für alle Seiten eines Webs
<style>-Element	Zentrale Regeln für eine einzelne Webseite
HTML-Elemente	Anwendung auf Standard HTML-Elemente
class-Attribut	Anwendung eigener CSS-Klassen
style-Attribut	Individuelle CSS Regeln für einzelne Elemente
Fallen	Anstiftung zur Umgehung von CSS
Office	Erzeugung von Webseiten mit Office-(Text)-Programmen

Grundproblem - Die Hersteller-Philosophie
Pferdekutsche und Radio ... Der weltgrößte Software-Hersteller orientiert die Handhabung seines Web-Editors an den Office-Produkten aus dem gleichen Hause, insbesondere an der Textverarbeitung. Allerdings sollte das Internet mittlerweile als eigenständiges Medium bekannt sein, das natürlich mit seinen eigenen Methoden der Kommunikation arbeiten muss. Diese Tatsache wird in Frontpage konsequent ignoriert und verschleiert. Dazu werden sowohl die Methoden der Textverarbeitung vergewaltigt, als auch jene der Web-Produktion.	Die gleiche Fehl-Einschätzung tritt oft bei der Einführung einer neuen Technologie auf: • Die ersten Autos wurden als motorisierte Kopien von Pferde-Kutschen gebaut. • Die ersten Fernseh-Nachrichten wurden von den bisherigen Sprechern genauso verlesen wie vom Radio gewohnt, lediglich vor einer TV-Kamera. • Genauso ist der Versuch zu beurteilen, Webseiten im 21. Jahrhundert so herzustellen wie Textseiten.
Weltweite Standards Ein weiteres Problem ist das gestörte Verhältnis des quasi-monopolistischen Herstellers zu internationalen Standards: Sie werden nach Möglichkeit ignoriert und torpediert. Wenn das nicht mehr möglich ist, dann werden Standards in eigene Produkte integriert. Das erfolgt jedoch meist in verdeckter Form: An Stelle der (CSS)-Fachbegriffe werden kuriose Wort-Konstruktionen verwendet. CSS wird mit anderen Elementen vermischt und unter einer Müllhalde genau jener veralteter Auslauf-Elemente versteckt, die CSS überflüssig macht. Letzlich wurde ein Teil der CSS-Möglichkeiten schlicht weggelassen.	Es ist möglich, jedoch nicht einfach, mit Frontpage saubere Webseiten herzustellen, d.h. Dateien mit Quelltext nach HTML- und CSS-Standard, die keine sinnlosen, veralteten und überflüssigen Elemente enthalten. ● Standards sind im Sinne der AnwenderInnen - Sie machen Software vergleichbar, kompatibel und billig. ● Die Störung von Standards ist im Interesse großer Hersteller - Das verhindert Vergleichbarkeit und ermöglicht es, KundInnen zum Kauf schlechter und teurer Software zu nötigen.
Vorhanden ? Als Argument für die Verwendung von Frontpage wird meist angeführt, dass die Software "vorhanden" war - Man könnte damit fast eine Umschreibung für eine Raub-Kopie annehmen.	Das kann für verarmte Hobby-Web-DesignerInnen gelten. In jedem anderen Fall sollte man sich jedoch um gute professionelle Software bemühen. Das macht sich bezahlt !
Rezepte ohne Gewähr ! Achtung - Alle Angaben erfolgen ohne Gewähr ! - Sie befolgen die hier angeführten Tipps auf eigenes Risiko.	Je nach Frontpage-Version kann ihr Programm evtl. anders reagieren, bzw. können die Texte von Menüs, Fenstern und Buttons anders benannt sein.

Stylesheet-Datei für ein ganzes Web
Diese Art der CSS-Anwendung ist am wichtigsten: An einer einzigen zentralen Stelle wird die Formatierung für alle Seiten eines Webs festgelegt.	Unabhängig davon können alle Elemente aller Webseiten weiterhin individuell formatiert werden.
Stylesheet-Datei anlegen ► Neue CSS-Datei: Rechtsklicken sie in den Bereich der "Ordnerliste" und legen sie eine neue Datei an. Vergeben sie einen Namen *.css, z.B. meinweb.css ► Datei-Name: Verwenden sie für den Datei-Namen keine Großbuchstaben, Umlaute, Leerzeichen oder Sonderzeichen. Selbst wenn eine Datei Schädlich.Css am eigenen PC funktionieren sollte - Am Server ihres Web-Providers treten vermutlich Probleme auf - die sehr viel Arbeit nach sich ziehen ! ► Datei-Pfad: Stylesheet-Dateien legt man am besten in der obersten Verzeichnis-Ebene an, d.h. im gleichen Verzeichnis wie die Start-Seite index.htm Größere Webs enthalten meist ein eigenes Verzeichnis (Ordner) für allgemein verwendbare Dateien, z.B. mit dem Namen library In diesem Fall ist der beste Pfad library/meinweb.css	► Text löschen: Öffnen sie die Datei durch Doppelklick und löschen sie jeden allfällig eingetragenen Text, z.B. <html> . . . </html> ► CSS-Text: In diese Datei werden anschließend ihre CSS-Regeln eingetragen. Dazu wird nicht HTML-Quelltext verwendet, sondern CSS-Quelltext (Code). Sie können den CSS-Code manuell eintragen, oder dazu die Hilfe von Programmen (notfalls sogar Frontpage) verwenden. Die CSS-Regeln können zu jedem späteren Zeitpunkt geändert oder ergänzt werden.
HTML Standard-Elemente Mit diesen Regeln steuern sie die Formatierung von HTML Standard-Elementen wie z.B <body>, <table>, <image> usw. ► Öffnen sie die CSS Stylesheet-Datei (z.B. front.css ) Menü Format \| Formatvorlage ► Wählen sie die Liste der HTML-Tags ► Wählen sie ein HTML-Element aus, z.B. <body> ► Klicken sie Ändern	Das Fenster Formatvorlage wird geöffnet. ► Klicken sie Format und wählen sie aus den Menü-Punkten (Zeichen, Absatz, Rahmen, Position). Beliebige CSS-Elemente lassen sich miteinander kombinieren. - Dabei wird nicht zwischen Zeichen- und Absatz-Elementen unterschieden, wie das in allen Programmen dieses Herstellers gerne vorgeschrieben wird. ► Klicken sie OK ► In der Stylesheet-Datei ist der CSS-Code eingetragen. Sie können diesen Code beliebig manuell ändern. ► Wenn sie weitere Regeln definieren, dann finden sie die bereits festgelegten Regeln in der Liste der Benutzerdefinierten Formatvorlagen.
Beispiel: (eigene Formatierung des HTML <body>-Elements) body{font-family:serif; font-size:10pt; margin:0; padding:0; background-color:#EEF;}
Gravierende Frontpage-Probleme: Viele Standard HTML-Elemente sind in der Liste überhaupt nicht enthalten, z.B. <img /> <div></div> usw. Man muss diese und viele andere Elemente manuell neu anlegen. Viele CSS-Eigenschaften können nicht ausgewählt werden, z.B. die vertikale Ausrichtung vertical-align Man muss diese Eigenschaften manuell in den CSS-Quelltext einfügen.	Für die Eigenschaften sind in Frontpage keine Einheiten wählbar. CSS bietet viele Einheiten, wie z.B. px, mm, % usw. Meist werden die Eigenschaften von Frontpage ganz ohne Einheit eingetragen - Man überlässt dann jedem Browser die Interpretation . .
Eigene CSS-Klassen Es ist sehr empfehlenswert, eigene CSS-Klassen für alle wichtigen Elemente ihrer Webseiten anzulegen. Eine CSS-Klasse fasst beliebig viele Regeln untere einem (Klassen)-Namen zusammen. Die Regeln werden zentral festgelegt und auf allen Webseiten angewendet. Das macht ihre Webseiten wesentlich kleiner (schneller !) und übersichtlicher. Außerdem kann die Formatierung aller erfassten Elemente auf allen Webseiten bei Bedarf in wenigen Sekunden geändert werden. ► Öffnen sie die CSS Stylesheet-Datei (z.B. meinweb.css) ► Menü Format \| Formatvorlage ► Klicken sie Neu	Das Fenster Neue Formatvorlage wird geöffnet. ► Vergeben sie einen 'sprechenden' Namen, z.B. einleitung Verwenden sie dazu keine Großbuchstaben, Umlaute, Leerzeichen oder Sonderzeichen ! Vor den Namen wird automatisch ein . Punkt gesetzt. Das ist korrekt und entspricht den Regeln für eigene CSS-Klassen. ► Wählen sie als Formatvorlagen-Typ Zeichen oder Absatz. ► Klicken sie Format und wählen sie die gewünschte F ormatierung. ► Klicken sie OK ► In der Stylesheet-Datei ist der CSS-Code eingetragen. Sie können diesen Code später beliebig ändern.
Beispiel für die eigenen CSS-Klassen xzeichen und xabsatz: span.xzeichen{font-family:serif; text-align:center; width:20; margin:5;} .xabsatz {font-family:serif; text-align:center; width:20; margin:5;}
Das Beispiel zeigt je eine eigene CSS-Klasse, die mit Option Zeichen bzw. Absatz erstellt wurde. CSS unterscheidet nicht zwischen diesen beiden Möglichkeiten, und auch in Frontpage sind die Möglichkeiten zur Auswahl der Eigenschaften gleich. Hier wird leider auch sichtbar, dass viele Eigenschaften von Frontpage ohne Einheit verwendet werden.	Allgemein anwendbare CSS-Klassen müssen als Absatz-Formate angelegt werden. Im Kapitel Anwendung eigener CSS-Klassen wird gezeigt, wie man solche Klassen sinngemäß anwenden kann, obwohl Frontpage dabei versucht, einen neuen Absatz zu erzwingen.
Korrektur Meist ist es sinnvoll, den automatisch erzeugten CSS Quelltext in der Stylesheet-Datei manuell zu korrigieren. Kosmetik: Frontpage trägt normalerweise keinen Zeilen-Umbruch ein, d.h. geänderte und neue Klassen werden in eine einzige Zeile geschrieben. Andererseits werden viele unnötige Leerzeichen eingetragen. Es ist sinnvoll, diese 'Kleinigkeiten' zu korrigieren, denn nur eine gut lesbare CSS-Definition kann auch richtig eingesetzt werden.	Inhalt: Es ist empfehlenswert und oft unvermeidbar, fehlende Elemente, Eigenschaften und Einheiten manuell zu ergänzen. Eine ausgezeichnete Referenz in deutscher Sprache bietet SelfHTML. Die CSS-Regeln lassen sich zu jedem späteren Zeitpunkt ändern und wirken sofort nach dem Sichern auf alle Webseiten, welche dieses Definition verwenden.
Stylesheet anwenden ► Zuerst muss eine Stylesheet-Datei angelegt werden, erst danach kann sie von Webseiten verwendet werden. ► Menübefehl Format \| Links zu Stylesheet ► Fügen sie den Namen ihres Stylesheets (z.B. meinweb.css ) zur Liste hinzu. ► Wählen sie Alle Seiten und klicken sie OK	Auf allen vorhandenen Webseiten wird automatisch im <head>-Element ein <link>-Element zur Verknüpfung mit dem Stylesheet eingefügt, z.B. <link rel="stylesheet" type="text/css" href="front.css"> Der Pfad wird automatisch richtig eingetragen, d.h. unter Berücksichtigung der jeweiligen Verzeichnis-Ebene. ► Kontrollieren sie das <link>-Element zumindest in Stichproben. ► Sie können das <link>-Element manuell ändern oder löschen.
Upload Am besten werden Webseiten lokal (am eigenen PC) entwickelt und getestet. Erst danach werden sie ins Internet kopiert, d.h. zu einem Provider in den eigenen Webspace geladen. ♣ Tipp: Kontrollieren sie nochmals die Namen ihrer verzeichnisse (Ordner) und Dateien: Darin sollten keine Großbuchstaben, Leerzeichen, Sonderzeichen oder Umlaute enthalten sein !	Beim Upload müssen alle Dateien kopiert werden, das gilt natürlich auch für Stylesheets *.css Nach dem Upload sollten ihre Online-Webseiten die gewünschte Formatierung zeigen.

CSS Style-Element für eine Webseite
▲ Diese Art der CSS-Anwendung ist sinnvoll, wenn eine einzelne Webseite anders als alle anderen Seiten ihres Webs formatiert werden soll. ▲ Außerdem ist die Methode sinnvoll, wenn es auf der Webseite mehrere gleichartige Elemente gibt, die zwar gemeinsam formatiert werden sollen, aber auf anderen Webseiten nicht vorkommen.	Dazu wird im <head> der Webseite ein <style>-Element angelegt. Innerhalb dieses Elements wird nicht HTML-Code verwendet, sondern CSS-Code. Das <style>-Element wird erst nach dem <link>-Element (gemeinsames Stylesheet für alle Webseiten) eingefügt. Daher gelten zunächst die allgemeinen CSS-Regeln, außer wenn sie durch individuelle Regeln für diese Webseite überschrieben werden.
Style-Element anlegen ► Öffnen sie die Webseite (z.B. mit Doppelklick in die Ordner-Liste). ► Menü Format \| Formatvorlage Danach können sie sowohl die Formatierung von Standard HTML-Elementen ändern, als auch eigene CSS-Klassen anlegen.	In jedem´Fall wird im <head> der Webseite ein <style>-Element angelegt, welches alle von ihnen festgelegten CSS-Regeln enthält.
HTML Standard-Elemente CSS-Regeln für HTML-Elemente sind in einer zentralen Stylesheet-Datei besser aufgehoben. Auf einer einzelnen Webseite sind sie nur dann sinnvoll, wenn diese Webseite anders als alle anderen Seiten dieses Webs formatiert werden soll.	► Wählen sie die Liste der HTML-Tags ► Wählen sie ein HTML-Element aus, z.B. <body> ► Klicken sie Ändern Definieren sie alle gewünschten Regeln, so wie für ein Stylesheet beschrieben.
Eigene CSS-Klassen Eigene CSS-Klassen können auf (fast) alle Elemente der Webseite angewendet werden.	► Klicken sie Neu ► Vergeben sie einen sprechenden Namen. ► Klicken sie Format und wählen sie die gewünschte Formatierung. ► Klicken sie OK
Korrektur Alle für die Webseite festgelegten CSS-Regeln sind im <style>-Element enthalten. Sie gelten bis zum Ende der Webseite, außer wenn sie durch andere Maßnahmen überschrieben werden, z.B. durch style-Attribute.	Die CSS-Regeln können zu jedem Zeitpunkt geändert oder ergänzt werden.

CSS-Regeln für Standard HTML Elemente
Wenn sie CSS-Regeln für Standard HTML Elemente erstellt haben, dann werden sie auf alle vorkommenden Elemente der jeweiligen Art angewendet. Dazu ist keine weitere Maßnahme notwendig.	Wenn mehrere Regeln einander ergänzen, dann werden sie alle angewendet. Wenn mehrere Regeln einander widersprechen, dann gilt die jeweils letzte Regel.
Beispiel: Sie haben in einer zentralen Stylesheet-Datei festgelegt: tr{vertical-align:top;}	Diese Regel wirkt auf alle Tabellen-Reihen <tr> in allen Tabellen aller Webseiten. In allen Reihen beginnt der Text oben (nicht in der Mitte oder unten).
Beispiel: Sie haben in einer zentralen Stylesheet-Datei festgelegt: tr{vertical-align:top;} Sie haben in einem <style>-Element einer einzelnen Webseite festgelegt: tr{color:red;}	Die beiden Regeln ergänzen einander, d.h. in allen Tabellen-Reihen <tr> dieser einen Webseite beginnt der Text links oben in roter Schriftfarbe.
Beispiel: Sie haben in einer zentralen Stylesheet-Datei festgelegt: tr{vertical-align:top; color:red;} Sie haben in einem <style>-Element einer einzelnen Webseite festgelegt: tr{color:blue;}	Die beiden Regeln widersprechen einander teilweise. Normalerweise wird das <link>-Element zuerst verarbeitet. Es legt für Tabellen-Reihen rote Schriftfarbe fest. Das <style>-Element folgt danach und überschreibt daher die vorher angewendeten Regeln teilweise: Es ändert die Schriftfarbe aller Tabellen-Reihen <tr> dieser Webseite auf blau.
Beispiel: Sie haben folgende Regeln festgelegt (entweder in einem Stylesheet oder in einem <style>-Element): tr{vertical-align:top; color:red;} .test{color:blue; font-weight:bold;} Sie verwenden auf der Webseite diese Elemente <tr> . . </tr> <tr class="test"> . . </tr> <tr> . . </tr>	Die Regel für <tr>-Elemente wird auf alle Reihen angewendet. Nur auf die zweite Reihe wird zusätzlich die Klasse "test" angewendet. Dabei wird die allgemeine Regel teilweise ergänzt (fettgedruckt), teilweise überschrieben (Farbe blau). Beachten sie: Die Klasse "test" kann auf jedes HTML-Element angewendet werden, z.B. auch auf <div class="test"></div> <p class="test"></p>
Beispiel: Sie haben folgende Regeln festgelegt (entweder in einem Stylesheet oder in einem <style>-Element): tr{vertical-align:top; color:red;} .test{color:blue; font-weight:bold;} Sie verwenden auf der Webseite dieses Element <tr class="test" style="color:green;"> . . . </tr>	Dieses Beispiel arbeitet genauso wie das vorige, wird jedoch durch eine weitere - noch spätere und daher noch stärkere - Regel ergänzt: Die Schriftfarbe wird durch ein style-Attribut auf grün gesetzt. Diese Regel gilt allerdings nur für dieses eine Element, d.h. alle anderen <tr>-Elemente bleiben rot, alle anderen Elemente mit CSS-Klasse "test" bleiben blau.

Anwendung eigener CSS-Klassen
Wenn sie eigene CSS-Klassen verwenden wollen, dann müssen sie zuerst deren Namen und Regeln festlegen. Am besten ist es, Klassen festzulegen, die auf allen Seiten ihres Webs verwendet werden können. Diese Klassen werden in einem zentralen Stylesheet angelegt.	Wenn CSS-Klassen nur auf einer einzigen Webseite verwendet werden sollen, dann werden sie in einem <style>-Element dieser Seite festgelegt.
Anwendung: ► Markieren sie jenen Teil der Webseite, der formatiert werden soll - Ein Wort, ein Absatz, eine Grafik, eine Tabelle, etc. ► In der Symbolleiste Format befindet sich (normalerweise ganz links) eine Liste aller verfügbaren "Formate". ► Diese Liste beginnt mit den mehrheitlich auslaufenden vor-formatierten HTML-Elementen, z.B. ¶Adresse, ¶Aufzählung, ... ¶Überschrift 6 Danach enthält die Liste ihre selbst definierten CSS-Klassen.	▼ Ohne weitere Angaben wird eine CSS-Klasse von Frontpage auf einen ganzen Absatz angewendet - Auch dann, wenn nur ein Zeichen oder ein Wort markiert war. ▼ Wenn kein Absatz vorliegt, wird von Frontpage - meist unerwünscht - ein zusätzlicher Absatz erzeugt. ▼ Wenn sie das nicht wollen, muss das Ergebnis manuell im HTML-Quelltext korrigiert werden.
Normalerweise werden eigene CSS-Klassen in allgemeiner Form erstellt, z.B. .test{color:blue; font-weight:bold;} Der führende Punkt vor dem Namen gibt an, dass diese Klasse für alle HTML-Elemente verwendet werden kann, z.B. <div class="test">Zeile</div> <p class="test">Absatz</p> <span class="test">Wort</span> usw.	Wenn sie bei Erstellung einer CSS-Klasse ausdrücklich den Typ Zeichenformat angeben, dann wird diese Klasse so festgelegt: span.test{color:blue;} ▼ In diesem Fall kann ihre Klasse nur für <span>-Elemente verwendet werden. Diese Beschränkung ist nicht sinnvoll und wird besser entfernt: .test{color:blue;} Die bereinigte Version kann nicht nur auf <span>-Elemente sondern auf fast alle anderen Elemente angewendet werden.
Quelltext Wenn sie sich die Mühe machen, den HTML-Quelltext (Code) direkt zu bearbeiten, dann können sie eigene CSS-Klassen für (fast) jedes HTML-Element verwenden: Tragen sie manuell das class-Attribut mit dem Namen der gewünschten Klasse ein.	Beispiel: Ein beliebiges <div>-Element <div>Das ist ein Text</div> wird so geändert <div class="test">Das ist ein Text</div>
Mit Hilfe zusätzlicher <span>-Elemente im Quelltext können sie CSS-Klassen auf jedes beliebige Zeichen, Wort, Bild, ... anwenden. Ein <span>-Element hat keine Eigenschaften, es dient nur zur Aufnahme von Attributen (z.B. class ) für den damit eingegrenzten Bereich.	Beispiel: Das ist ein neuer Text wird so geändert: Das ist ein <span class="test">neuer</span> Text oder Das ist ein neuer <span class="test">T</span>ext
Das Beispiel rechts zeigt zunächst, wie eine allgemeine CSS-Klasse von Frontpage angewendet wurde: Nicht nur das markierte Wort anderer wird formatiert, sondern ein unerwünschter formatierter Absatz <p></p> erzeugt. Das Ergebnis kann manuell im Quelltext ausgebessert werden. Das ist für Amateur-Zwecke mühsam, für professionelle Arbeit aber untragbar.	Beispiel: Das ist ein anderer Text Nach Anwendung der Klasse .test auf das markierte Wort "anderer" hat Frontpage ungefragt einen Absatz erzeugt: <p>Das ist ein anderer Text</p> Manuelle Korrektur im Quelltext: Das ist ein <span class="test">anderer</span> Text

Anwendung von style-Attributen
Wenn ein einzelnes Element mit bestimmten Regeln formatiert werden soll, dann ist es nicht sinnvoll, dafür eine eigene CSS-Klase anzulegen. In diesem Fall werden die Regeln als Wert eines style-Attributs eingetragen.	Beispiel: Das ist <span style="color:#909; font-weight:bold;">violette</span> Schrift
Ich habe keine Möglichkeit gefunden, style-Attribute auf markierte Elemente (Zeichen, Worte, andere Objekte, ..) anzuwenden. Es scheint, als ob die manuelle Bearbeitung des Quelltextes die einzige Möglichkeit ist, diese Aufgabe in Frontpage zu lösen.	Diese Anwendung sollte allerdings nur in Ausnahme-Fällen vorkommen. Normalerweise sollten sie versuchen, für alle vorhersehbaren Anwendungen passende CSS-Klassen zentral zu definieren.

Fallen
Leider trifft man in Frontpage oft auf Punkte, um CSS zu umgehen. Das mag in seltenen Fällen sinnvoll sein, wenn es ausdrücklich gewünscht wird. Meist geschieht das jedoch ungewollt. - Man erzeugt veralteten, oft auch viel zu langen HTML-Quelltext, der darüber hinaus auch nur mühsam zu ändern ist.	Die Liste solcher Fallen in Frontpage ist lang und wird begünstigt, weil die Fachausdrücke der verwendeten Standards (HTML und CSS) konsequent verschwiegen oder durch kuriose Wort-Konstruktionen ersetzt werden.
Rechtsklick in eine Webseite Wenn sie eine Webseite in der Entwurfs-Ansicht öffnen und in die Seite rechts-klicken, sind die Eigenschaften Formatierung und Erweitert zugänglich. Damit wird schlechter HTML-Code erzeugt, z.B. <body topmargin="5" leftmargin="5" rightmargin="5" bottommargin="5" text="#000080" bgcolor="#FFFF00">	Besser ist es, das Format des <body>-Elements in einem zentralen Stylesheet oder zumindest in einem <style>-Element der Webseite festzulegen. Das ist übersichtlicher, und bietet weit mehr und genauere Möglichkeiten der Einstellung als die auslaufenden HTML-Attribute: body{background-color:#FF0; color:#000080; margin:5px;}
Symbolleiste Format \| Formatvorlage In dieser Auswahl-Liste werden (meist auslaufende) vor-formatierte HTML-Elemente und CSS-Klassen miteinander vermischt.	Details im Kapitel zur Anwendung von CSS-Klassen. ♣ Tipp: Verwenden sie keine vor-formatierten HTML-Elemente sondern nur CSS-Klassen.
Symbolleiste Format \| Schriftart, Schriftgrad, Schriftgröße, Schriftfarbe Diese Befehle erzeugen das auslaufende <font>-Element. Tipp: Verwenden sie kein <font>-Element sondern CSS-Klassen.	Verwenden sie zur Auswahl der Schrift-Familie keine namentlich angeführten Schriften, sondern die CSS Standard Schrift-Familien. Sie sind im Menü Format \| Formatvorlagen unter den Tarn-Namen Arial (sans-serif), Courier New (monospace) und Times New Roman (sans serif) verfügbar.
Symbolleiste Format \| Fett, Kursiv, Unterstrichen Diese Tasten erzeugen die auslaufenden HTML-Elemente <b> <i> <u>	Verwenden sie besser CSS. Definieren sie z.B. einmalig in einem zentralen StyleSheet: .b{font-weight:bold;} .bi{font-weight:bold; font-style:italic;} .i{font-style:italic;} .u{text-decoration:underline;} und verwenden sie diese Klassen so: <span class="b"> . . </span>
Symbolleiste Format \| Ausrichtung Diese Tasten erzeugen (unerwünschte) neue Absätze <p> Wenn sie eine Zeile ohne zusätzlichen Abstand (oben, unten) ausrichten wollen, dann verwenden sie besser das <div>-Element.	Verwenden sie besser CSS. Definieren sie z.B. einmalig in einem zentralen StyleSheet: .al{text-align:left;} .ac{text-align:center;} .ar{text-align:right;} .aj{text-align:justify;} und verwenden sie diese Klassen so: <div class="ac"> . . </div>
Symbolleiste Format \| Einzug Die Einzug-Tasten erzeugen das unflexible auslaufende <blockquote>-Element. Mit CSS können sie alle Ränder einzeln und in beliebigen Einheiten einstellen.	Verwenden sie besser CSS. Definieren sie z.B. einmalig in einem zentralen StyleSheet: .einzug{margin-left:1cm;} und verwenden sie diese Klassen so: <div class="einzug"> . . </div>
Menü Format Diejenigen Menü-Befehle, die äquivalent zu den Befehlen der Symbolleiste Format sind, weisen auch die gleichen Probleme auf.	Andere Befehle (z.B. Hintergrund-Farbe) verwenden CSS. Allerdings werden <span>-Elemente mit CSS-Regeln wahllos in auslaufende <font>-Elemente verschachtelt. Solche unsinnigen Konstruktionen werden besser manuell aufgelöst, d.h. in ein einziges <span> oder <div>-Element mit entsprechender CSS-Klasse.

Office
Die meisten (Office)-Programme des größten Software-Herstellers bieten die Möglichkeit, Dokumente als Webseiten zu speichern. Menü-Befehl: Datei \| Als Webseite speichern Je nach Version sind danach mehrere Optionen (rechts) verfügbar.	Optionen für den Dateityp: ● Webseite in einer Datei (.mht; .mhtml) ● Webseite (.htm; .html) ● Webseite, gefiltert (.htm; .html)
Alle 3 Versionen sind wenig empfehlenswert. ▼ Dateien .mht oder .mhtml sind nirgends üblich, daher nicht portabel und nur auf PC verwendbar, die ausschließlich (neuere) Software dieses Herstellers verwenden. ▼ Es wird eine Mischung aus HTML und XML-Code erzeugt. Das Ergebnis entspricht jedoch keinem der beiden Standards. ▼ Die geringsten Probleme ergibt derzeit die Option 'Webseite, gefiltert'.	▼ Der erzeugte Code ist meistens viel zu kompliziert, die Dateien werden unnötig groß. ▲ Die meisten Browser sind allerdings tolerant und zeigen auch fehlerhafte Webseiten .htm oder .html einigermaßen korrekt an.
Datei-Namen Achten sie auf kompatibel verwendbare Datei-Namen. Je nach Version neigen die Programme dazu, Datei-Namen aus den ersten Worten zusammenzusetzen.	• Entfernen sie aus Datei-Namen alle Sonderzeichen und Umlaute. • Ersetzen sie alle Leerzeichen durch _ underline-Zeichen. • Ersetzen sie alle Großbuchstaben durch die entsprechenden Kleinbuchstaben. • Die Webseite verursacht dann bei der Verwendung im lokalen Netzwerk oder im Internet weniger Probleme.
OpenOffice Das kostenfreie und auf allen Betriebssystemen einsetzbare OpenOffice bietet zwar viele Vorteile gegenüber der Office-Software des Marktführers, die Herstellung von Webseiten ist jedoch fast ebenso problematisch. • Verwenden sie Menübefehl Datei \| Speichern unter, danach Dateityp=HTML-Dokument .html • Der erzeugte Code ist normalerweise wesentlich kompakter als mit M$Office. • HTML-Elemente werden leider mit Großbuchstaben angelegt.	• Alternativ kann eine XHTML-Webseite erzeugt werden: Datei \| Exportieren, danach Dateiformat=XHTML Die erzeugte XHTML-Webseite kann jedoch nur mit modernen Browsern angesehen werden, da der M$IE Browser noch immer kein XHTML versteht. • Immerhin wird CSS in der XHTML-Variante sauber verwendet.
Alternativen: ● Office-Programme sind zur Herstellung von Webseiten schlecht geeignet. Man kann sie in Einzelfällen dazu benutzen, von einem regelmäßigen Einsatz wird jedoch dringend abgeraten. ● Web-Editor: Wenn das Ziel darin besteht, Webseiten herzustellen, und die Textverarbeitung keine Rolle spielt, dann sollte unbedingt ein Web-Editor Programm eingesetzt werden. Im Internet sind gute Web-Editoren für unterschiedliche Zielgruppen verfügbar, meist sogar kostenlos Frontpage ist für professionelle Ansprüche derzeit nicht geeignet.	PDF: Wenn möglichst genaue Abbilder von Textseiten im Internet verwendet oder per Mail vesendet werden sollen, dann ist dazu das PDF-Format ideal geeignet. OpenOffice bietet dazu den Befehl Datei \| Exportieren als PDF • CMS: Wenn das Ziel darin besteht, zahlreiche Webseiten mit vorwiegend Text-Inhalt herzustellen und zu verwalten, dann ist dazu ein Content Management System (CMS) ideal geeignet. CMS-Software gibt es kostenlos in ausgezeichneter Qualität im Internet. Zur Einrichtung eines CMS sind gute Fachkenntnisse erforderlich, zur Verwendung im lokalen Netzwerk oder im Internet genügen jedoch minimale PC-Kenntnisse.

Zum Inhaltsverzeichnis

> Entwicklung > CSS