Farben und Rahmen: Unterschied zwischen den Versionen
Aus DMUW-Wiki
(table+) |
|||
Zeile 79: | Zeile 79: | ||
|<div style="border:2px solid dimgray;background:skyblue">Box mit farbigem Hintergrund und Rahmen <br> für mehrzeiligen Text</div> | |<div style="border:2px solid dimgray;background:skyblue">Box mit farbigem Hintergrund und Rahmen <br> für mehrzeiligen Text</div> | ||
|} | |} | ||
+ | <br><br> | ||
+ | |||
+ | * Da ihr auch eure Skizzen hochladen sollt, an dieser Stelle noch eine kurze Anleitung, wie man ein Bild einbinden kann: | ||
+ | {|class="wikitable" | ||
+ | ! width="33%"; style="background-color:#00bfff" | Das was es bewirken soll | ||
+ | ! width="33%"; style="background-color:#00bfff" | Das was du eingibst | ||
+ | ! width="33%"; style="background-color:#00bfff" | Und was dabei heraus kommt | ||
+ | |- | ||
+ | | ein Bild in Originalgröße einfügen | ||
+ | | <tt><nowiki>[[Bild:bildbeispiel1.png]]</nowiki></tt> | ||
+ | |[[Bild: bildbeispiel1.png ]] | ||
+ | |- | ||
+ | |ein Bild auf eine bestimmte Größe skalieren | ||
+ | | | ||
+ | <tt><nowiki>[[Bild:bildbeispiel1.png | 50px]]</nowiki></tt> | ||
+ | |||
+ | <tt><nowiki>[[Bild:bildbeispiel1.png | 100px]]</nowiki></tt> | ||
+ | |||
+ | <tt><nowiki>[[Bild:bildbeispiel1.png | 150px]]</nowiki></tt> | ||
+ | |||
+ | <tt><nowiki>[[Bild:bildbeispiel1.png | 200px]]</nowiki></tt> | ||
+ | | | ||
+ | [[Bild: bildbeispiel1.png | 50px ]] | ||
+ | |||
+ | [[Bild: bildbeispiel1.png | 100px]] | ||
+ | |||
+ | [[Bild: bildbeispiel1.png | 150px]] | ||
+ | |||
+ | [[Bild:bildbeispiel1.png|200px]] | ||
+ | |- | ||
+ | |ein Bild rechtsbündig einfügen | ||
+ | |<tt><nowiki>[[Bild:bildbeispiel1.png | right]]</nowiki></tt> | ||
+ | |[[Bild:bildbeispiel1.png|right]] | ||
+ | |- | ||
+ | |ein Bild zentriert einfügen | ||
+ | |<tt><nowiki>[[Bild:bildbeispiel1.png |center]]</nowiki></tt> | ||
+ | |[[Bild:bildbeispiel1.png|center]] | ||
+ | |} | ||
+ | <br> | ||
+ | * Wichtig ist hier, dass ihr den '''exakten Namen des Bildes''' angebt, sonst funktioniert es nicht. |
Aktuelle Version vom 10. Oktober 2010, 15:46 Uhr
Hier bekommt ihr noch ein paar Tipps, wie ihr eure Seite mit Farben und Rahmen gestalten könnt.
- Generell gibt es zwei Möglichkeiten im WIKI eine Farbe anzugeben
- Durch den Farbnamen, der immer in Englisch angegeben wird
- Durch den Hexadezimalcode
- Hier ein paar Beispiele:
Eingabe mit Farbnamen | Eingabe mit Hexadezimalcode | Das was dabei heraus kommt |
---|---|---|
<span style="color: red">roter Text</span> | <span style="color: #FF0000">roter Text</span> | roter Text |
<span style="color: green>grüner Text</span> | <span style="color: #00FF00">grüner Text</span> | grüner Text |
<span style="color: blue>blauer Text</span> | <span style="color: #0000FF>blauer Text</span> | blauer Text |
<span style="color: orange>oranger Text</span> | <span style="color: #FFA500>oranger Text</span> | oranger Text |
- Für die ganz bunten unter euch ist hier noch eine kleine Farbauswahl:
#FFDAB9 |
#1E90FF |
#87CEFF |
#7FFF00 |
#006400 |
#FFF68F |
#FFD700 |
#FF8C69 |
#FF4500 |
#FF6EB4 |
#FF1493 |
#FF83FA |
#9B30FF |
#DCDCDC |
#808080 |
#696969 |
- Natürlich hast du auch die Möglichkeit, deinen Text einzurahmen oder farbig zu hinterlegen:
Das was du eingibst | Und was dabei heraus kommt |
---|---|
<span style="border:2px dimgray;">Rahmen um einzelne Worte oder einzeiligen Text</span> | Rahmen um einzelne Worte oder einzeiligen Text |
<div style="border:2px solid dimgray;">Rahmen um einen mehrzeiligen Text </div> | Rahmen um einen
mehrzeiligen Text |
<span style="background:skyblue">Farbiger Hintergrund für einzelne Worte oder einzeiligen Text</span> | Farbiger Hintergrund für einzelne Worte oder einzeiligen Text |
<div style="background:skyblue">Farbiger Hintergrund für mehrzeiligen Text</div> | Farbiger Hintergrund für
einen mehrzeiligen Text |
<span style="border:2px solid dimgray;background:skyblue">Box mit farbigem Hintergrund und Rahmen für einzeiligen Text</span> | Box mit farbigem Hintergrund und Rahmen für einzeiligen Text |
<div style="border:2px solid dimgray;background:skyblue">Box mit farbigem Hintergrund und Rahmen für mehrzeiligen Text</div> | Box mit farbigem Hintergrund und Rahmen
für mehrzeiligen Text |
- Da ihr auch eure Skizzen hochladen sollt, an dieser Stelle noch eine kurze Anleitung, wie man ein Bild einbinden kann:
- Wichtig ist hier, dass ihr den exakten Namen des Bildes angebt, sonst funktioniert es nicht.