News gestalten

Eine News-Seite erstellen

Auf Beschreibung mit Baukasten-Extra "News" habe ich verzichtet. Das Extra lässt sich schwerer anpassen

• Live Demo hier : So kann es aussehen
• oder Beispielgrafik Rechts anklicken ->


• auf "Seiten" gehen
• neue Seite mit Titel "News" erstellen
• oben links im Editor auf "Quellcode" klicken
• nun ist die Seite in HTML-Code-Ansicht
• folgende Codes im Seiteninhalt einfügen

<style type="text/css">
<!--
.news { width:560px; margin:10px 0px 30px 0px; overflow:hidden; }
.newstitle { float:left; font-weight:bold; }
.newsdate { padding:2px 10px 2px 10px; float:right; font-family:verdana; font-size:10px; }
.newspic { width:250px; float:left; padding:5px; border:1px solid #c9c9c9; }
.newstext {width:290px; float:right; font-family:arial!important; }
-->
</style>

<div class="news">
<h3 class="newstitle"> Hier Überschrift 1</h3> 
<p class="newsdate"> Hier Datum</p>
<br style="clear:both;" />
<img class="newspic" src="HIER GRAFIKADRESSE 1" alt="Bildtitel 1" />
<p class="newstext"> Hier Dein News-Text 1 einfügen </p>
<br style="clear:both;" />
</div>
<hr>

<div class="news">
<h3 class="newstitle"> Hier Überschrift 2</h3> 
<p class="newsdate"> Hier Datum</p>
<br style="clear:both;" />
<img class="newspic" src="HIER GRAFIKADRESSE 2" alt="Bildtitel 2" />
<p class="newstext"> Hier Dein News-Text 2 einfügen </p>
<br style="clear:both;" />
</div>
<hr>

<div class="news">
<h3 class="newstitle"> Hier Überschrift 3</h3> 
<p class="newsdate"> Hier Datum</p>
<br style="clear:both;" />
<img class="newspic" src="HIER GRAFIKADRESSE 3" alt="Bildtitel 3" />
<p class="newstext"> Hier Dein News-Text 3 einfügen </p>
<br style="clear:both;" />
</div>
<hr>

<div class="news">
<h3 class="newstitle"> Hier Überschrift 4</h3> 
<p class="newsdate"> Hier Datum</p>
<br style="clear:both;" />
<img class="newspic" src="HIER GRAFIKADRESSE 4" alt="Bildtitel 4" />
<p class="newstext"> Hier Dein News-Text 4 einfügen </p>
<br style="clear:both;" />
</div>
<hr>

<div class="news">
<h3 class="newstitle"> Hier Überschrift 5</h3> 
<p class="newsdate"> Hier Datum</p>
<br style="clear:both;" />
<img class="newspic" src="HIER GRAFIKADRESSE 5" alt="Bildtitel 5" />
<p class="newstext"> Hier Dein News-Text 5 einfügen </p>
<br style="clear:both;" />
</div>
<hr>

• auf "Bilder" gehen
• suche das Hochgeladene Bild
• Bild mit der Maus anklicken
• das Bild wird nun vergrößert dargestellt
• mit Rechtsklick auf das Bild
• auswählen: "Grafikadresse kopieren"
• und nun im Code einfügen

Tipp für Deine News :

Das Textfeld neben dem Bild habe ich bewusst klein gehalten. Füge einen "weiterfrührenden Link" ein, wenn die News mehr Text benötigen. Erstelle eine neue Seite, wo die News ausführlicher beschrieben wird. Diese neue Seite kannst Du in der Navigation verstecken, so das sie nur von deinen News aus erreicht werden kann.

Gerade bei vielen News wird es der Besucher Dir danken, wenn er aus der kürzeren Übersicht heraus entscheiden kann, welche News ihn interessieren. Damit wird auch ein "endlos-scrollen" vermieden.

Wer auch auf anderen Seiten im Seiteninhalt gerne "Texte neben Bilder" platzieren möchte, sollte sich die Beschreibung Text neben Bild anschauen. Dazu benötigt Ihr keinen Code. Es geht mit dem Editor.