Zur Werkzeugleiste springen
Computer & mehrWordPress intern

mehrspaltiges Zeitungslayout in Wordpress leicht gemacht..

..oder: microsofts Live Writer – ideales Tool für Tabellenlayout..

Bereits ein paarmal wurde ich gefragt, wie ich das mehrspaltige Layout bei meinen Artikeln realisiere. Deshalb habe ich mich entschlossen – quasi als verspätetes Weihnachts-Geschenk ein Tutorial zu schreiben, in dem ich das ganz genau erkläre.

Ich benutze dafür den in den ‘Windows Live Essentials’ enthaltenen Live Writer von microsoft, weil ich den perfekt geeignet finde, wenn es darum geht mehrere Blogs mit identischen Beiträgen zu füllen. Einmal geschrieben, kann der Beitrag auf allen möglichen Blogplattformen veröffentlicht werden. Dazu werden die Beiträge lokal gespeichert. Er fungiert also quasi auch noch als Backup-Tool.

Leider hat microsoft den Live Writer abgekündigt. Interessenten sollten sich also sputen, den zu installieren, da bei den Live Tools die Installation über einen Webinstaller durchgeführt wird. Es wird also die Installationsdatei nicht lokal auf dem Rechner gespeichert.

Doch beginnen wir mit dem Tutorial:

1. Zuerst mal wird unter Datei der Punkt ‘neuer Beitrag’ ausgewählt, damit wir mit einem leeren Fenster beginnen können.

2. Dann folgt die Blogüberschrift 1. (ich mache darunter noch eine Subüberschrift 2. – also eine untergeordnete Überschrift, wegen der besseren Indizierung bei google) und  über die Menüleiste bei ‘Einfügen’ wird eine Tabelle 3. mit folgenden Werten eingefügt:

tabelle_1.jpg

3. Die Tabelle hat folgende Werte: 1 Zeile, 3 Spalten, Standardbreite. Hier kann man die voreingestellten 580 Pixel lassen – wir ändern sowieso alles im nächsten Schritt in Prozent.

tabelle_2.jpg

4. Standardmäßig hat eine Tabelle 580 Pixel Breite. Dies ist der Standardwert bei Blogs, aber je nach gewähltem Layout oder Theme, kann die fixe Breite ein stylisches Desaster sein.

tabelle_3.jpg

Wir ändern deshalb den Wert in Prozent. Dadurch wird der Blogbeitrag immer in komplett erlaubter Breite angezeigt.

5.  Dazu müssen wir in den Quellcode, da uns die normale Benutzeroberfläche nicht die Option gibt bei den Spalten mit Prozenten zu arbeiten. Hierzu klicken wir unten auf den Reiter ‘Quellcode’.

tabelle_4.jpg


6. Der Quelltext begrüßt uns wie unten auf dem Screenshot. Die 580 Pixel hat Live Writer in 3 x 193 Pixel aufgeteilt. Das ist zwar nett, für unsere Zwecke aber ungeeignet.

tabelle_5.jpg


7. Wir ändern die Werte in den Spalten wie folgt: Achtung! Hier ist darauf zu achten, dass zum einen das Prozentzeichen nicht vergessen wird – zum anderen, dass die Werte in den Spalten aufaddiert immer zusammen 100% ergeben.

tabelle_6.jpg


Mit diesem neugewonnen Wissen könnten wir jetzt auch ein 3spaltiges (eigentlich ist es ein 5spaltiges – aber Spalte 2 und 4 werden nur zur Trennung gebraucht, weshalb ich die nicht zähle. genauso wie das 2spaltige Layout eigentlich ein 3spaltiges ist – wenn man die Anzahl der Tabellenspalten als Maßstab nimmt) Layout erstellen. Der Quelltext sähe dann folgendermaßen aus:

<p>Subüberschrift</p>
<table cellspacing=“0″ cellpadding=“2″ width=“100%“ border=“0″>
<tbody>
<tr>
<td valign=“top“ width=“32%“>&nbsp;</td>
<td valign=“top“ width=“2%“>&nbsp;</td>
<td valign=“top“ width=“32%“>&nbsp;</td>
<td valign=“top“ width=“2%“>&nbsp;</td>
<td valign=“top“ width=“32%“>&nbsp;</td></tr></tbody></table>

 

Optisch kommt das dann schon sehr nah an eine Zeitung ran – das Problem sind die Grafiken. Die wirken dann doch sehr mickerig, wenn Sie mit unter 200 Pixeln Breite in eine Spalte gequetscht werden.

8. Damit zum Schluss der Text in den Spalten gut aussieht schalten wir noch den Blocksatz ein, und dann sind wir auch schon fertig..

Tabelle_7.jpg
So, das war’s. Mein Tut zum Jahreswechsel…

Schlagworte

Doctor Love

Peter (aka Doctor Love) hat schon mal das Attribut "bester Allround-Blogger" von einer bekannten Bloggerin verliehen bekommen - Inoffiziell versteht sich. Er ist in Netzwerken aktiv - schreibt aber hier über alle Themen, die grade aktuell sind (und dabei ist ihm kein Eisen zu heiß..)

verwandte Artikel

Geistesblitz da lassen..

Back to top button
Close
Close
%d Bloggern gefällt das: