Arbeiten mit MS Expression Web 4

Text einfügen und formatieren

Neben der gewöhnlichen Texterstellung ist natürlich auch die Umsetzung von kopierten Texten aus der Zwischenablage von Interesse. Dies funktioniert auf den ersten Blick tadellos, allerdings offenbart der Quelltext einige Seltsamkeiten. Sobald es über das Einfügen von Fließtext hinaus geht generiert MS Expression Web CSS-Klassen, wo auch HTML-Code möglich wäre.

Beispiel: Einfügen von ungeordneten Listen <ul>

Statt eines einfach <ul> und <li> taucht hier ein recht komplexer Quelltext auf, in den diverse "Styles" eingearbeitet wurden. Der Weg zu einem einigermaßen sauberen Quelltext erfordert leider einen der folgenden Workarounds:

1. Kopieren ins Codefenster

Kopieren Sie die Liste aus der Textverarbeitung nicht in das Fenster der Design-Vorschau, sondern vielmehr im Codefenster an die Stelle im Quelltext, wo die Liste später auftauchen soll:

Anschließend markieren Sie die Liste direkt im Quelltext und formatieren diese über die entsprechende Schaltfläche des Programms als "Liste".

Dies hat zur Folge, dass die Liste im Quelltext sauber angelegt wird:

Wechseln Sie nun in das Fenster der Design-Vorschau und orientieren Sie sich an den bereits vorhandenen "bullets". Durch simples Einfügen von Umbrüchen an den entsprechenden Stellen lässt sich die Liste nun leicht "nachbauen". (Geeignetes Markieren der bereits vorhandenen bullets und ggf. vorhandener Leerstellen führt zu einem raschen "Zurechtrücken" des Listenformats.)

Hier der Quelltext der fertigen Liste:

Dieses Verfahren funktioniert analog natürlich auch mit geordneten Listen ( <ol> ).

Alternativ bietet Expression Web 4 unter dem Menüpunkt Edit >> Paste Text... verschiedene Optionen zum Einfügen von Texten aus der Zwischenablage an. Ein Nacharbeiten ähnlich dem oben beschriebenen Verfahren wird allerdings meist unumgänglich sein.

2. Suchen und Ersetzen

Markieren Sie im Quellcode-Fenster die Teile der Auszeichnungen, die Sie nicht wünschen, und lassen Sie MSEW danach suchen und durch einen leeren String ersetzen. In fast allen Fällen liegen diese Stil-Einfügungen in lediglich drei bis vier unterschiedlichen Varianten vor, so dass man schnell zu sauberem Quelltext kommt.

Dieses Verfahren macht (auch im DreamWeaver) dann Sinn, wenn man Seiten aus einem Officeprogramm heraus als HTML gespeichert hat und diese im Anschluss in einem HTML-Editor nachbearbeitet.

3. Tidy

Wer sich die Arbeit, den HTML-Code zu reinigen, nicht selbst machen will, greift auf ein Skript bzw. ein Programm wie HTMLTidy zurück. HTMLTidy erzeugt aus dem HTML-Code von Office-Programmen schlanken und sauberen HTML Code. Außerdem repariert es Fehler im Code.

Liegt nur eine einzelne Seite ohne vertrauliche Informationen vor, kann man HTMLTidy auch im Browser aufrufen. Webseiten, die diese Dienstleistung anbieten, gibt es viele - hier sei nur als Beispiel die Folgende angeführt: http://infohound.net/tidy/

Wer lieber mit einer grafischen Oberfläche arbeitet, was bei einzelnen Seiten ein noch gangbarer Weg ist, kann auch JTidy nutzen, das unter allen Betriebssystemen unter Java läuft: http://sourceforge.net/projects/jtidy/

Gehen Sie wie folgt vor: Exportieren Sie aus Ihrer Textverarbeitung das Dokument als HTML Seite. Rufen Sie dann Tidy auf. Bearbeiten Sie die nun gereinigte Seite erst jetzt mit MSEW weiter.

Formatieren von Text

Das schnelle Formatieren von Text geschieht am einfachsten über die "common"-Menüleiste. Zunächst wie gewohnt den gewünschten Abschnitt markieren und dann die passende Formatvorlage auswählen:

Vorsicht ist hier allerdings beim Unterstreichen geboten. Auch hier fügt MS Expression Web statt eines einfachen <u> -Tags einen CSS-Style ein, der ggf. erst mühsam wieder entfernt und ersetzt werden muss.

Hinweis: Unterstrichener Text sollte auf Internetseiten vermieden werden, weil dieser vom Betrachter für einen Link gehalten werden könnte.

Es bietet sich an solchen Stellen daher an, mit dem "Quick-Tag-Editor" zu arbeiten, der über einen einfachen Rechtsklick über dem zuvor markierten Bereich aufgerufen werden kann.

Markiert man einen Bereich, kann man mit Hilfe des Quick Tag Editors auch Tags um einzelne Wörter legen und so z.B. <code> Wort </code> einfügen. Hierzu wählt man im Fensterchen des Quick Tag Editors "Wrap Tag" aus (ist meist schon vorausgewählt).

Selbst festgelegte Attribute liegen ab der ersten Nutzung für weitere Einfügungen bereit und können auch mit der Maus oder dem Cursor ausgewählt werden.

Shortcuts

Viele PC-Nutzer wissen die Möglichkeiten der Tastaturkürzel ("shortcuts") sehr zu schätzen, da sie umständliche Klickerei mit der Maus vermeiden lassen (auch wenn dies im Fall von Unterstreichungen leider auch keinen sauberen Code liefert).

Unter Help >> Keyboard Shortcuts öffnet sich die umfangreiche MS Expression Web-Hilfe mit einer Übersicht über viele hilfreiche Tastaturkürzel.

Einfügen von Links

Das Einfügen von Links geht im MSEW leicht von der Hand: Textteil markieren, auf das entsprechende Icon (im Panel oben rechts) klicken, URL mit Strg+V einfügen und Zielframe in einem kleinen Dialogfenster festlegen.

Man muss man beim Einfügen von Icons aus einem zetralen /pix Ordner aufpassen. Der Default des Programms ist, dass Bilder mit relativen Pfaden eingefügt werden. Im Attribute-Panel lässt sich dies schnell ändern. Außerdem steht ein Bereich Snippets (Code-Schnipsel) zur Verfügung, der einem nach Definition diverser HTML-Bausteine viel Arbeit abnehmen kann.

Setzt man die Maus in einen Link im Editorfenster können die Eigenschaften (_blank etc) desselben auch im Attribute-Panel auf der linken Seite schnell geändert werden. Dabei stellt MSEW die üblichen Attribute von sich aus zur Verfügung.

Bilder

Bilder lassen sich durch Ziehen und Ablegen in ein Dokument bringen. Auch relative und absolute Pfade bei Bildern (weiter.gif etc) sind einfach - siehe oben bei Links: über das Attribute-Panel - zuweisbar.

Beim Umgang mit Bildern zeigen sich erst dann Probleme beim Einfügen, wenn man gewohnte DreamWeaver-Routinen direkt in MSEW anwendet: Setzt man die Ausrichtung von Bildern im Einfügedialog auf "rechts" oder "links", dann fügt MSEW einen CSS Stil hierfür ein, statt das Bild mit Hilfe von HTML auszurichten. Das sieht dann so aus:

<img alt="logo" height="50" longdesc="logo" src="../werkstattlogo.jpg" width="50" class="auto-style1" />

Klickt man das Bild an, kann man im Attribute Panel auf der linken Seite die Ausrichtung des Bildes im HTML Code mit Hilfe von align bestimmen.

<img alt="logo" height="50" longdesc="logo" src="../werkstattlogo.jpg" width="50" align="left" class="auto-style1" />

Tabellen

Zur Erinnerung: Tabellen als Gestaltungselemente zu nutzen ist keine gute Idee - auch wenn dies hin und wieder nötig scheint, um den zu publizierenden Materialien und deren Layoutbesonderheiten zu entsprechen.

Das Einfügen von kopierten Tabellen über die Zwischenablage funktioniert im Prinzip sehr gut, allerdings muss man auch hier aufpassen, dass keine überflüssigen "Styles" verteilt werden. Im Zweifelsfall im Codefenster auf den <table> -Tag klicken. Damit wird die gesamte Tabelle markiert und sowohl die Attribute (Fenster links unten), als auch die vorhandenen CSS-Styles (Fenster rechts unten) lassen sich einstellen, modifizieren oder - im Fall der Styles - per Rechtsklick löschen ( Delete ).

Beispiel: nach Klick auf den table-Tag im Quelltext lassen sich links unten die Attribute "border", "cellpadding", "frame", "rules" und "width" einstellen. Das Resultat ist eine übersichtliche Tabelle, welche sehr nah am Aussehen des Originals aus der Textverarbeitung ist.

Stilfragen

Sollten Stile schon zugewiesen worden sein (das ist bei diesem Programm sehr wahrscheinlich) hilft ein Klick auf den Schalter " Clear Styles " im Panel " Apply Styles " auf der rechten Seite des Fensters. Dieser Klick löscht alle Stilzuweisungen und als Resultat erhält man puren HTML Code. Pur in dem Sinne, wie MS pur versteht.

zurück: Grundlegende Einstellungen

weiter: Arbeitserleichterungen durch Snippets