Dies ist eine Bezahl-Funktion
Bezahlende User knnen schon ab 4 € im Monat alle Funktionen der fotocommunity nutzen.
  • In allen Foren lesen und schreiben
  • Aktbilder hochladen und anschauen
  • Am Galerie-Voting teilnehmen
  • Bis zu 30 Fotos / Woche hochladen
> Jetzt Bezahl-Mitglied werden
 
ad ad ad
 
 
 
spacer.gif

Kalendereintrag gestalten

Inhaltsverzeichnis

Mglichkeiten und Einschrnkungen

Im Gegensatz zu den meisten anderen Eingabefeldern in der fotocommunity knnen im User-Kalender fr den Langtext eines Termineintrags HTML-Codes verwendet werden. Damit hat man weitreichende Gestaltungsmglichkeiten, wie etwa zutzliche Bilder, Logos, eigene Hintergrnde oder Vernderung der Textmerkmale. Als Einschrnkung gilt, dass man einige Formatierungen selbst durchfhren muss, die ansonsten durch den fotocommunity-Server bernommen werden, etwa aktive http-Links.

An dieser Stelle kann nun nicht ein ausfhrlicher Kurs in Web-Design gemacht werden, aber die wichtigsten Mglichkeiten sollen kurz vorgestellt werden. Wenn man selbst irgendwo eine passende Gestaltung sieht, lsst sich der Quelltext (HTML-Code) ja meistens mithilfe des Browsers direkt anschauen, so dass man sieht, wie man das eine oder andere selbst analog einsetzen kann. Dabei kann man natrlich auch immer einfach mal den Autor eines Kalendereintrags anschreiben und nachfragen.

Textformatierungen

Fr die Textgestaltung gibt es sehr viele Mglichkeiten, sei es Schriftgre, Schriftart, Font-Gewicht, Buchstabenabstand, Farben etc. Empfehlenswert ist, hier nicht zu dick aufzutragen und nicht zu viele verschiedene Gestaltungsmittel zu mixen.

Beispiel:

<span style="background: #FFEFD5 none; color: #2F4F4F;
 font-size: x-large; font-weight: bold;">
 Groer und fetter Text in anderen Farben</span>

wird zu

Groer und fetter Text in anderen Farben

Hier werden beim durch das span-Element eingeschlossenen Text fr den Hintergrund (background) und den Vordergrund (color) bestimmte Farben eingestellt, die Schriftgre (font-size) auf besonders gro und das Schriftgewicht (font-weight) auf fett gestellt. Das style-Attribut nutzt dabei die Layout-Definitionen, die auch in den CSS-Dateien verwendet werden.

Die Codes fr die Farben kann man meist mit den Bildbearbeitungsprogrammen ermitteln. Die gesamten Mglichkeiten schlgt man am besten in einer Referenz nach.

Weitere Formatierungen

HTML bietet eine Vielzahl von Elementen zur Textgestaltung. Ntzlich fr Kalendereintrge knnen einfache Hervorhebungen (<em>...</em>, ungeordnete Listen (<ul>...</ul> mit <li>...</li>, die mit dem Punkt vorneweg) oder gerahmte Ksten (<div style="border: 1px solid green">...</div>) sein. Vielleicht schaust du einfach mal in eine HTML-Anleitung. Diese Sachen sind eigentlich nicht allzu schwer zu beherrschen.

Aktive Links

Http-Links werden im Langtext nicht automatisch in aktive Links (Links, die beim Anklicken auf die entsprechende Webseite fhren) umgewandelt. Das lsst sich aber recht leicht selbst bewerkstelligen.

Beispiel:

<a href="http://www.einserver.de/">
Einserver als Anbieter</a>

Die Link-URL muss im href-Attribut angegeben werden. In der zweiten Zeile wird der Text angegeben, der als aktiver Link erscheint.

Kurzanleitung zum Bildeinbinden

Fahre mit dem Mauszeiger auf das Bild, dass Du im Kalender einbinden willst. Klicke auf die rechte Maustaste und whle im auftauchenden Men: Linkadresse kopieren/Grafikadresse kopieren/Bildadresse kopieren - je nach Brwoser. Im Internet Explorer im auftauchenden Men auf "Eigenschaften" klicken und dann im erscheinenden Eigenschaftenfeld die Adresse (URL) kopieren.

Die Bildadresse eines groen Bildes auf der fotocommunity sieht immer so aus: http://cdn.fotocommunity.com/images/Portraitfotografie/Portraitfotografie-Maenner/Heute-a12345.jpg

Diese komplette Adresse setzt man jetzt zwischen: <img style="width:50%" src=" Jetzt hier die Bildadresse "/> Dann erscheint das Bild in 50% der orignalen Bildgre im Kalender. Will man es grer oder kleiner haben, passt man die Prozentangaben entsprechend an.

Bilder einbinden

Die Bilddatei muss bereits im Internet hochgeladen und ihre Netzadresse muss bekannt sein.

Beispiel:

Dies ist ein Text, der vor dem Bild erscheint.
<img src="http://www.einserver.de/einverzeichnis/einbild.jpg" />
Und die brige Textbeschreibung folgt dann hinter dem Bild.

Das ist die einfachste Mglichkeit. Das Bild erscheint damit in der Gre, in der es vorliegt. Zu groe Bilder sollte man fr den Termintipp natrlich nicht verwenden. ber dieses sogenannte IMG-Tag kann man dann noch bestimmen, wie gro das Bild tatschlich ausgegeben wird, oder etwa an welcher Stelle es erscheinen soll. Dieses Feintuning lsst sich ebenfalls ber das style-Attribut steuern, das bei allen HTML-Tags eingesetzt werden kann.

Beispiel:

<img style="height:100px; width:150px; border: 1px solid red"
     src="http://www.einserver.de/einverzeichnis/einbild.jpg" 
 />

Das Bild erscheint ggf. verkleinert mit den angebenen Maen in Pixeln. Auerdem wird ein dnner roter durchgezogener Rahmen drumherum gezeichnet. Diese Verkleinerung durch den Browser ist nicht unbedingt zu empfehlen, da dabei auf die Qualitt keinen Einfluss genommen werden muss und der Betrachter eine groe Bilddatei mit entsprechender Wartezeit laden muss.

Beispiel:

<img style="width:80%"
     src="http://www.einserver.de/einverzeichnis/einbild.jpg"
 />

Das Bild wird der Breite des Browserfensters angepasst.

Die Bildadresse eines Bildes lsst sich mit dem Browser ermitteln, so auch von den Miniaturbildern, die in der fotocommunity genutzt werden.

Beispiel:

<img src="http://db5.fotocommunity.de/37/.thumbs/thumb_1234567.jpg" />

Achtung: auf dem fotocommunity-Server werden die Miniaturen nicht immer gleich endgltig abgelegt. Wenn die Adresse einer Miniatur so aussieht

http://db3.fotocommunity.de/ram/new/thumb_1234567.jpg

kannst du zwar das Bild verlinken, die Adresse wird sich aber frher oder spter ndern und muss dann entsprechend nachgezogen werden.

Natrlich muss bei den Bildern auf das Urheberrecht geachtet werden, also Bilder von der eigenen homepage oder dem eigenen fotocommunity sind meist ok, bei anderen sind Absprachen ntig.

Bilder zum Anklicken

So wie oben beschrieben dienen die Bilder einfach nur der Gestaltung. Ein Klick auf das Bild macht nichts besonders, auer vielleicht alleine das Bild im Browser anzuzeigen. Soll das Bild zu einer Web-Adresse, etwa mit einer detaillierteren Terminbeschreibung fhren, mssen die beiden vorgenannten Methoden miteinander kombiniert werden.

Beispiel:

<a href="http://www.einserver.de/" 
   title="Einserver als Anbieter fr Kurs XYZ">
   <img src="http://www.einserver.de/einverzeichnis/einbild.jpg" />
 </a>

Hier wird also kein Text als Link angegeben, sondern ein Bild. Meist empfiehlt es sich allerdings, zustzlich zum Bild auch einen Textlink anzugeben, da nicht jeder damit rechnet, dass sich hinter einem Bild ein Link verbirgt.

Beispiele in der fotocommunity

Weblinks

  • selfhtml.org (http://de.selfhtml.org/) als Referenz mit vielen Beispielen zum Nachschlagen und Lernen von HTML, inklusive CSS.
  • css4you.de (http://www.css4you.de/) als deutsche CSS-Referenz fr das style-Attribute
  • CSS-Referenz bei w3schools.com (http://www.w3schools.com/css/css_reference.asp) (englischsprachig)
  • TripleColors (http://www.tntluoma.com/sidebars/triplecolors/) als sidebar mit Farbcodes fr HTML-Elemente.


  Der Textinhalt dieser Seite steht unter der Creative Commons License. Alle Fotos und Grafiken sind urheberrechtlich geschtzt, wenn nicht anders angegeben. Der Text spiegelt nicht unbedingt die Meinung der fotocommunity wider.