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:
| Das was es bewirken soll | Das was du eingibst | Und was dabei heraus kommt |
|---|---|---|
| ein Bild in Originalgröße einfügen | [[Bild:bildbeispiel1.png]] | 
|
| ein Bild auf eine bestimmte Größe skalieren |
[[Bild:bildbeispiel1.png | 50px]] [[Bild:bildbeispiel1.png | 100px]] [[Bild:bildbeispiel1.png | 150px]] [[Bild:bildbeispiel1.png | 200px]] |
|
| ein Bild rechtsbündig einfügen | [[Bild:bildbeispiel1.png | right]] | |
| ein Bild zentriert einfügen | [[Bild:bildbeispiel1.png |center]] | |
- Wichtig ist hier, dass ihr den exakten Namen des Bildes angebt, sonst funktioniert es nicht.
