{"id":4907,"date":"2012-12-30T12:31:19","date_gmt":"2012-12-30T10:31:19","guid":{"rendered":"http:\/\/www.nerd-o-mania.de\/wordpress\/?p=4907"},"modified":"2017-03-15T23:14:37","modified_gmt":"2017-03-15T22:14:37","slug":"mehrspaltiges-zeitungslayout-in-wordpress-leicht-gemacht","status":"publish","type":"post","link":"https:\/\/www.nerd-o-mania.de\/wordpress\/2012\/12\/mehrspaltiges-zeitungslayout-in-wordpress-leicht-gemacht\/","title":{"rendered":"mehrspaltiges Zeitungslayout in WordPress leicht gemacht.."},"content":{"rendered":"

..oder: microsofts Live Writer \u2013 ideales Tool f\u00fcr Tabellenlayout..<\/span><\/p>\n

Bereits ein paarmal wurde ich gefragt, wie ich das mehrspaltige Layout bei meinen Artikeln realisiere. Deshalb habe ich mich entschlossen \u2013 quasi als versp\u00e4tetes Weihnachts-Geschenk ein Tutorial zu schreiben, in dem ich das ganz genau erkl\u00e4re.<\/p>\n

Ich benutze daf\u00fcr den in den \u2018Windows Live Essentials\u2019 enthaltenen Live Writer von microsoft, weil ich den perfekt geeignet finde, wenn es darum geht mehrere Blogs mit identischen Beitr\u00e4gen zu f\u00fcllen. Einmal geschrieben, kann der Beitrag auf allen m\u00f6glichen Blogplattformen ver\u00f6ffentlicht werden. Dazu werden die Beitr\u00e4ge lokal gespeichert. Er fungiert also quasi auch noch als Backup-Tool.<\/p>\n

Leider hat microsoft den Live Writer abgek\u00fcndigt. Interessenten sollten sich also sputen, den zu installieren, da bei den Live Tools die Installation \u00fcber einen Webinstaller durchgef\u00fchrt wird. Es wird also die Installationsdatei nicht lokal auf dem Rechner gespeichert.<\/p>\n

Doch beginnen wir mit dem Tutorial:<\/p>\n

1. Zuerst mal wird unter Datei der Punkt \u2018neuer Beitrag\u2019 ausgew\u00e4hlt, damit wir mit einem leeren Fenster beginnen k\u00f6nnen.<\/p>\n

2. Dann folgt die Blog\u00fcberschrift 1.<\/strong><\/span> (ich mache darunter noch eine Sub\u00fcberschrift 2.<\/strong><\/span> \u2013 also eine untergeordnete \u00dcberschrift, wegen der besseren Indizierung bei google) und\u00a0 \u00fcber die Men\u00fcleiste bei \u2018Einf\u00fcgen\u2019 wird eine Tabelle 3.<\/strong><\/span> mit folgenden Werten eingef\u00fcgt:<\/p>\n

\"tabelle_1.jpg\"<\/a>
\n<\/a><\/p>\n

3. Die Tabelle hat folgende Werte: 1 Zeile, 3 Spalten, Standardbreite. Hier kann man die voreingestellten 580 Pixel lassen \u2013 wir \u00e4ndern sowieso alles im n\u00e4chsten Schritt in Prozent.<\/p>\n

\"tabelle_2.jpg\"<\/a>
\n<\/a><\/p>\n

4. Standardm\u00e4\u00dfig hat eine Tabelle 580 Pixel Breite. Dies ist der Standardwert bei Blogs, aber je nach gew\u00e4hltem Layout oder Theme, kann die fixe Breite ein stylisches Desaster sein.<\/p>\n

\"tabelle_3.jpg\"<\/a>
\n<\/a><\/p>\n

Wir \u00e4ndern deshalb den Wert in Prozent. Dadurch wird der Blogbeitrag immer in komplett erlaubter Breite angezeigt.<\/p>\n

5.\u00a0 Dazu m\u00fcssen wir in den Quellcode, da uns die normale Benutzeroberfl\u00e4che nicht die Option gibt bei den Spalten mit Prozenten zu arbeiten. Hierzu klicken wir unten auf den Reiter \u2018Quellcode\u2019.<\/p>\n

\"tabelle_4.jpg\"<\/a>
\n<\/a><\/p>\n


6. Der Quelltext begr\u00fc\u00dft uns wie unten auf dem Screenshot. Die 580 Pixel hat Live Writer in 3 x 193 Pixel aufgeteilt. Das ist zwar nett, f\u00fcr unsere Zwecke aber ungeeignet.<\/p>\n

\"tabelle_5.jpg\"<\/a>
\n<\/a><\/p>\n


7. Wir \u00e4ndern die Werte in den Spalten wie folgt: Achtung! Hier ist darauf zu achten, dass zum einen das Prozentzeichen nicht vergessen wird \u2013 zum anderen, dass die Werte in den Spalten aufaddiert immer zusammen 100% ergeben.<\/p>\n

\"tabelle_6.jpg\"<\/a>
\n<\/a><\/p>\n


Mit diesem neugewonnen Wissen k\u00f6nnten wir jetzt auch ein 3spaltiges (eigentlich ist es ein 5spaltiges \u2013 aber Spalte 2 und 4 werden nur zur Trennung gebraucht, weshalb ich die nicht z\u00e4hle. genauso wie das 2spaltige Layout eigentlich ein 3spaltiges ist \u2013 wenn man die Anzahl der Tabellenspalten als Ma\u00dfstab nimmt) Layout erstellen. Der Quelltext s\u00e4he dann folgenderma\u00dfen aus:<\/p>\n

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

 <\/p>\n

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

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

\"Tabelle_7.jpg\"<\/a>
\nSo, das war\u2019s. Mein Tut zum Jahreswechsel\u2026<\/p>\n","protected":false},"excerpt":{"rendered":"

..oder: microsofts Live Writer \u2013 ideales Tool f\u00fcr Tabellenlayout.. Bereits ein paarmal wurde ich gefragt, wie ich das mehrspaltige Layout bei meinen Artikeln realisiere. Deshalb habe ich mich entschlossen \u2013 quasi als versp\u00e4tetes Weihnachts-Geschenk ein Tutorial zu schreiben, in dem ich das ganz genau erkl\u00e4re. Ich benutze daf\u00fcr den in den \u2018Windows Live Essentials\u2019 enthaltenen …<\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":"","jetpack_post_was_ever_published":false},"categories":[5],"tags":[319],"class_list":["post-4907","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-computer","tag-wordpress"],"jetpack_featured_media_url":"","jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/posts\/4907","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/comments?post=4907"}],"version-history":[{"count":0,"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/posts\/4907\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/media?parent=4907"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/categories?post=4907"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/tags?post=4907"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}