|
Kalendereintrag gestaltenVersion vom 11:52, 31. Aug 2011; view current revision
Nächstältere Version→ | ←Nächstjüngere Version
Möglichkeiten und EinschränkungenIm Gegensatz zu den meisten anderen Eingabefeldern in der fotocommunity können im User-Kalender für den Langtext eines Termineintrags HTML-Codes verwendet werden. Damit hat man weitreichende Gestaltungsmöglichkeiten, wie etwa zuätzliche Bilder, Logos, eigene Hintergründe oder Veränderung der Textmerkmale. Als Einschränkung gilt, dass man einige Formatierungen selbst durchführen muss, die ansonsten durch den fotocommunity-Server übernommen werden, etwa aktive http-Links. An dieser Stelle kann nun nicht ein ausführlicher Kurs in Web-Design gemacht werden, aber die wichtigsten Möglichkeiten sollen kurz vorgestellt werden. Wenn man selbst irgendwo eine passende Gestaltung sieht, lässt 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 natürlich auch immer einfach mal den Autor eines Kalendereintrags anschreiben und nachfragen. TextformatierungenFür die Textgestaltung gibt es sehr viele Möglichkeiten, sei es Schriftgröße, 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;"> Großer und fetter Text in anderen Farben</span> wird zu Großer und fetter Text in anderen Farben Hier werden beim durch das span-Element eingeschlossenen Text für den Hintergrund (background) und den Vordergrund (color) bestimmte Farben eingestellt, die Schriftgröße (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 für die Farben kann man meist mit den Bildbearbeitungsprogrammen ermitteln. Die gesamten Möglichkeiten schlägt man am besten in einer Referenz nach. Weitere FormatierungenHTML bietet eine Vielzahl von Elementen zur Textgestaltung. Nützlich für Kalendereinträge können einfache Hervorhebungen (<em>...</em>, ungeordnete Listen (<ul>...</ul> mit <li>...</li>, die mit dem Punkt vorneweg) oder gerahmte Kästen (<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 LinksHttp-Links werden im Langtext nicht automatisch in aktive Links (Links, die beim Anklicken auf die entsprechende Webseite führen) umgewandelt. Das lässt 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 BildeinbindenFahre mit dem Mauszeiger auf das Bild, dass Du im Kalender einbinden willst. Klicke auf die rechte Maustaste und wähle 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 großen 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 Bildgröße im Kalender. Will man es größer oder kleiner haben, passt man die Prozentangaben entsprechend an. Bilder einbindenDie 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 Möglichkeit. Das Bild erscheint damit in der Größe, in der es vorliegt. Zu große Bilder sollte man für den Termintipp natürlich nicht verwenden. Über dieses sogenannte IMG-Tag kann man dann noch bestimmen, wie groß das Bild tatsächlich ausgegeben wird, oder etwa an welcher Stelle es erscheinen soll. Dieses Feintuning lässt 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 Maßen in Pixeln. Außerdem wird ein dünner roter durchgezogener Rahmen drumherum gezeichnet. Diese Verkleinerung durch den Browser ist nicht unbedingt zu empfehlen, da dabei auf die Qualität keinen Einfluss genommen werden muss und der Betrachter eine große 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 lässt 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 endgültig 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 früher oder später ändern und muss dann entsprechend nachgezogen werden. Natürlich 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 nötig. Bilder zum AnklickenSo wie oben beschrieben dienen die Bilder einfach nur der Gestaltung. Ein Klick auf das Bild macht nichts besonders, außer vielleicht alleine das Bild im Browser anzuzeigen. Soll das Bild zu einer Web-Adresse, etwa mit einer detaillierteren Terminbeschreibung führen, müssen die beiden vorgenannten Methoden miteinander kombiniert werden. Beispiel: <a href="http://www.einserver.de/" title="Einserver als Anbieter für 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, zusätzlich zum Bild auch einen Textlink anzugeben, da nicht jeder damit rechnet, dass sich hinter einem Bild ein Link verbirgt. Beispiele in der fotocommunity
Weblinks
|
|||
|
||||
