E-učilnice: Oblikovanje

Spodaj opisanim trikom je skupno to, da pomagajo obogatiti besedila s preprostimi kodami. Ni potrebno znati kodirati, da te kode uporabljamo. Samo kliknemo na ikono <>, na želeno mesto vnesemo kode in shrnimo. Tako preprosto dodamo besedilu vodoravno črto, barvne oznake ali barvno polje, gumbe in podobno. Barvne kode ne delujejo v vseh temah enako, zato je potrebno njihovo delovanje preveriti.

Kako oblikujemo vodoravno črto?

Odpremo urejanje HTML (klik na ikono <>) in na mesto, kjer želimo imeti črto, vpišemo <hr>. To lahko naredimo povsod, kjer urejevalnik omogoča rejanje HTML (stran, forum, oznako, navodila ...) Nastane črta kot ta spodaj. Najpogosteje jo uporabimo za ločevanje vsebin na straneh ali v oznakah.

Kako oblikujemo barvne oznake v besedilu?

Odpremo urejanje HTML in vnesemo kode. Npr. oznako

Informacije

smo oblikovali s kodo <p><span class="label label-info">Informacije</span></p>. Naj vas ne moti, da vsesene kode ne boste videli v okencu za oblikovanje besedila. Oznaka bo vidna, ko besedilo shranite.

Oznaka je lahko tudi v drugih barvah, vendar so te odvisne od nastavitev teme, ki jo uporabljate v svojem predmetu. Najbolje bo, da poskusite in potem vidite, kaj deluje. V teh nastavitvah teme Fordson, kot vidite, namesto rdeče ali orančne brarve za opozorila, ima oznaka temno modro ozadje, Default in Danger sta oba siva, Success pa zelen.

Default - oblikovali smo jo s kodo <p><span class="label label-default">Default</span></p>

Success - oblikovali smo jo s kodo <p><span class="label label-success">Success</span></p>

Warning - oblikovali smo jo s kodo <p><span class="label label-warning">Warning</span></p>

Danger - oblikovali smo jo s kodo <p><span class="label label-danger">Danger</span></p>

Kako dodamo barvno ozadje besedilu?

Obarvana polja so primerna npr. za novice ali vsebine, ki jih želimo še posebej izpostaviti. Priporočljivo je, da je njihova uporaba le občasna in da upošteva simbolni pomen barv. Tako naj bi bilo npr. rdeče polje uporabljeno le za resna opozorila.

Kako dodamo gumbe?

S preprosto kodo lahko oblikujemo tudi gumbe, ki popeljejo obiskovalce naprej.

Gumb Oddaja nalog smo obilkovali s kodo <button>Oddaja nalog</button>, seveda mu je potrebno dodati še povezavo. (Označimo gumb in mu po običajni poti dodamo povezavo.)