Ar­bei­ten mit MS Ex­pres­si­on Web 4

Text ein­fü­gen und for­ma­tie­ren

Neben der ge­wöhn­li­chen Tex­ter­stel­lung ist na­tür­lich auch die Um­set­zung von ko­pier­ten Tex­ten aus der Zwi­schen­ab­la­ge von In­ter­es­se. Dies funk­tio­niert auf den ers­ten Blick ta­del­los, al­ler­dings of­fen­bart der Quell­text ei­ni­ge Selt­sam­kei­ten. So­bald es über das Ein­fü­gen von Fließ­text hin­aus geht ge­ne­riert MS Ex­pres­si­on Web CSS-Klas­sen, wo auch HTML-Code mög­lich wäre.

Bei­spiel: Ein­fü­gen von un­ge­ord­ne­ten Lis­ten <ul>

Statt eines ein­fach <ul> und <li> taucht hier ein recht kom­ple­xer Quell­text auf, in den di­ver­se "Sty­les" ein­ge­ar­bei­tet wur­den. Der Weg zu einem ei­ni­ger­ma­ßen sau­be­ren Quell­text er­for­dert lei­der einen der fol­gen­den Work­a­rounds:

1. Ko­pie­ren ins Code­fens­ter

Ko­pie­ren Sie die Liste aus der Text­ver­ar­bei­tung nicht in das Fens­ter der De­sign-Vor­schau, son­dern viel­mehr im Code­fens­ter an die Stel­le im Quell­text, wo die Liste spä­ter auf­tau­chen soll:

An­schlie­ßend mar­kie­ren Sie die Liste di­rekt im Quell­text und for­ma­tie­ren diese über die ent­spre­chen­de Schalt­flä­che des Pro­gramms als "Liste".

Dies hat zur Folge, dass die Liste im Quell­text sau­ber an­ge­legt wird:

Wech­seln Sie nun in das Fens­ter der De­sign-Vor­schau und ori­en­tie­ren Sie sich an den be­reits vor­han­de­nen "bul­lets". Durch sim­ples Ein­fü­gen von Um­brü­chen an den ent­spre­chen­den Stel­len lässt sich die Liste nun leicht "nach­bau­en". (Ge­eig­ne­tes Mar­kie­ren der be­reits vor­han­de­nen bul­lets und ggf. vor­han­de­ner Leer­stel­len führt zu einem ra­schen "Zu­recht­rü­cken" des Lis­ten­for­mats.)

Hier der Quell­text der fer­ti­gen Liste:

Die­ses Ver­fah­ren funk­tio­niert ana­log na­tür­lich auch mit ge­ord­ne­ten Lis­ten ( <ol> ).

Al­ter­na­tiv bie­tet Ex­pres­si­on Web 4 unter dem Me­nü­punkt Edit >> Paste Text... ver­schie­de­ne Op­tio­nen zum Ein­fü­gen von Tex­ten aus der Zwi­schen­ab­la­ge an. Ein Nach­ar­bei­ten ähn­lich dem oben be­schrie­be­nen Ver­fah­ren wird al­ler­dings meist un­um­gäng­lich sein.

2. Su­chen und Er­set­zen

Mar­kie­ren Sie im Quell­code-Fens­ter die Teile der Aus­zeich­nun­gen, die Sie nicht wün­schen, und las­sen Sie MSEW da­nach su­chen und durch einen lee­ren String er­set­zen. In fast allen Fäl­len lie­gen diese Stil-Ein­fü­gun­gen in le­dig­lich drei bis vier un­ter­schied­li­chen Va­ri­an­ten vor, so dass man schnell zu sau­be­rem Quell­text kommt.

Die­ses Ver­fah­ren macht (auch im Dream­Wea­ver) dann Sinn, wenn man Sei­ten aus einem Of­fice­pro­gramm her­aus als HTML ge­spei­chert hat und diese im An­schluss in einem HTML-Edi­tor nach­be­ar­bei­tet.

3. Tidy

Wer sich die Ar­beit, den HTML-Code zu rei­ni­gen, nicht selbst ma­chen will, greift auf ein Skript bzw. ein Pro­gramm wie HTML­Tidy zu­rück. HTML­Tidy er­zeugt aus dem HTML-Code von Of­fice-Pro­gram­men schlan­ken und sau­be­ren HTML Code. Au­ßer­dem re­pa­riert es Feh­ler im Code.

Liegt nur eine ein­zel­ne Seite ohne ver­trau­li­che In­for­ma­tio­nen vor, kann man HTML­Tidy auch im Brow­ser auf­ru­fen. Web­sei­ten, die diese Dienst­leis­tung an­bie­ten, gibt es viele - hier sei nur als Bei­spiel die Fol­gen­de an­ge­führt: http://​in­fo­hound.​net/​tidy/

Wer lie­ber mit einer gra­fi­schen Ober­flä­che ar­bei­tet, was bei ein­zel­nen Sei­ten ein noch gang­ba­rer Weg ist, kann auch JTidy nut­zen, das unter allen Be­triebs­sys­te­men unter Java läuft: http://​sourcef­or­ge.​net/​pro­jects/​jtidy/

Gehen Sie wie folgt vor: Ex­por­tie­ren Sie aus Ihrer Text­ver­ar­bei­tung das Do­ku­ment als HTML Seite. Rufen Sie dann Tidy auf. Be­ar­bei­ten Sie die nun ge­rei­nig­te Seite erst jetzt mit MSEW wei­ter.

For­ma­tie­ren von Text

Das schnel­le For­ma­tie­ren von Text ge­schieht am ein­fachs­ten über die "com­mon"-Me­nü­leis­te. Zu­nächst wie ge­wohnt den ge­wünsch­ten Ab­schnitt mar­kie­ren und dann die pas­sen­de For­mat­vor­la­ge aus­wäh­len:

Vor­sicht ist hier al­ler­dings beim Un­ter­strei­chen ge­bo­ten. Auch hier fügt MS Ex­pres­si­on Web statt eines ein­fa­chen <u> -Tags einen CSS-Style ein, der ggf. erst müh­sam wie­der ent­fernt und er­setzt wer­den muss.

Hin­weis: Un­ter­stri­che­ner Text soll­te auf In­ter­net­sei­ten ver­mie­den wer­den, weil die­ser vom Be­trach­ter für einen Link ge­hal­ten wer­den könn­te.

Es bie­tet sich an sol­chen Stel­len daher an, mit dem "Quick-Tag-Edi­tor" zu ar­bei­ten, der über einen ein­fa­chen Rechtsklick über dem zuvor mar­kier­ten Be­reich auf­ge­ru­fen wer­den kann.

Mar­kiert man einen Be­reich, kann man mit Hilfe des Quick Tag Edi­tors auch Tags um ein­zel­ne Wör­ter legen und so z.B. <code> Wort </code> ein­fü­gen. Hier­zu wählt man im Fens­ter­chen des Quick Tag Edi­tors "Wrap Tag" aus (ist meist schon vor­aus­ge­wählt).

Selbst fest­ge­leg­te At­tri­bu­te lie­gen ab der ers­ten Nut­zung für wei­te­re Ein­fü­gun­gen be­reit und kön­nen auch mit der Maus oder dem Cur­sor aus­ge­wählt wer­den.

Short­cuts

Viele PC-Nut­zer wis­sen die Mög­lich­kei­ten der Tas­ta­tur­kür­zel ("short­cuts") sehr zu schät­zen, da sie um­ständ­li­che Kli­cke­rei mit der Maus ver­mei­den las­sen (auch wenn dies im Fall von Un­ter­strei­chun­gen lei­der auch kei­nen sau­be­ren Code lie­fert).

Unter Help >> Keyboard Shortcuts öff­net sich die um­fang­rei­che MS Ex­pres­si­on Web-Hilfe mit einer Über­sicht über viele hilf­rei­che Tas­ta­tur­kür­zel.

Ein­fü­gen von Links

Das Ein­fü­gen von Links geht im MSEW leicht von der Hand: Text­teil mar­kie­ren, auf das ent­spre­chen­de Icon (im Panel oben rechts) kli­cken, URL mit Strg+V ein­fü­gen und Ziel­f­rame in einem klei­nen Dia­log­fens­ter fest­le­gen.

Man muss man beim Ein­fü­gen von Icons aus einem ze­tra­len /pix Ord­ner auf­pas­sen. Der De­fault des Pro­gramms ist, dass Bil­der mit re­la­ti­ven Pfa­den ein­ge­fügt wer­den. Im At­tri­bu­te-Panel lässt sich dies schnell än­dern. Au­ßer­dem steht ein Be­reich Snip­pets (Code-Schnip­sel) zur Ver­fü­gung, der einem nach De­fi­ni­ti­on di­ver­ser HTML-Bau­stei­ne viel Ar­beit ab­neh­men kann.

Setzt man die Maus in einen Link im Edi­tor­fens­ter kön­nen die Ei­gen­schaf­ten (_blank etc) des­sel­ben auch im At­tri­bu­te-Panel auf der lin­ken Seite schnell ge­än­dert wer­den. Dabei stellt MSEW die üb­li­chen At­tri­bu­te von sich aus zur Ver­fü­gung.

Bil­der

Bil­der las­sen sich durch Zie­hen und Ab­le­gen in ein Do­ku­ment brin­gen. Auch re­la­ti­ve und ab­so­lu­te Pfade bei Bil­dern (wei­ter.gif etc) sind ein­fach - siehe oben bei Links: über das At­tri­bu­te-Panel - zu­weis­bar.

Beim Um­gang mit Bil­dern zei­gen sich erst dann Pro­ble­me beim Ein­fü­gen, wenn man ge­wohn­te Dream­Wea­ver-Rou­ti­nen di­rekt in MSEW an­wen­det: Setzt man die Aus­rich­tung von Bil­dern im Ein­fü­ge­dia­log auf "rechts" oder "links", dann fügt MSEW einen CSS Stil hier­für ein, statt das Bild mit Hilfe von HTML aus­zu­rich­ten. 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 At­tri­bu­te Panel auf der lin­ken Seite die Aus­rich­tung des Bil­des im HTML Code mit Hilfe von align be­stim­men.

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

Ta­bel­len

Zur Er­in­ne­rung: Ta­bel­len als Ge­stal­tungs­ele­men­te zu nut­zen ist keine gute Idee - auch wenn dies hin und wie­der nötig scheint, um den zu pu­bli­zie­ren­den Ma­te­ria­li­en und deren Lay­out­be­son­der­hei­ten zu ent­spre­chen.

Das Ein­fü­gen von ko­pier­ten Ta­bel­len über die Zwi­schen­ab­la­ge funk­tio­niert im Prin­zip sehr gut, al­ler­dings muss man auch hier auf­pas­sen, dass keine über­flüs­si­gen "Sty­les" ver­teilt wer­den. Im Zwei­fels­fall im Code­fens­ter auf den <table> -Tag kli­cken. Damit wird die ge­sam­te Ta­bel­le mar­kiert und so­wohl die At­tri­bu­te (Fens­ter links unten), als auch die vor­han­de­nen CSS-Sty­les (Fens­ter rechts unten) las­sen sich ein­stel­len, mo­di­fi­zie­ren oder - im Fall der Sty­les - per Rechtsklick lö­schen ( Delete ).

Bei­spiel: nach Klick auf den table-Tag im Quell­text las­sen sich links unten die At­tri­bu­te "bor­der", "cell­pad­ding", "frame", "rules" und "width" ein­stel­len. Das Re­sul­tat ist eine über­sicht­li­che Ta­bel­le, wel­che sehr nah am Aus­se­hen des Ori­gi­nals aus der Text­ver­ar­bei­tung ist.

Stil­fra­gen

Soll­ten Stile schon zu­ge­wie­sen wor­den sein (das ist bei die­sem Pro­gramm sehr wahr­schein­lich) hilft ein Klick auf den Schal­ter " Clear Styles " im Panel " Apply Styles " auf der rech­ten Seite des Fens­ters. Die­ser Klick löscht alle Stil­zu­wei­sun­gen und als Re­sul­tat er­hält man puren HTML Code. Pur in dem Sinne, wie MS pur ver­steht.

zu­rück: Grund­le­gen­de Ein­stel­lun­gen

wei­ter: Ar­beits­er­leich­te­run­gen durch Snip­pets