Utisci korisnika

Pre svega želim da vam se zahvalim na veoma brzom i profesionalnom pristupu. Jovan Knežević - Hong Kong

Veoma sam zahvalna na Vašem brzom odgovoru i želela bih da Vam se zahvalim na pažnji koju ste pokazali. Radica Nedelčev - Beograd


Kompletna lista utisaka

Testiranje online

Arhitektura računara

Za one koji žele da znaju više.

Windows OS

Ovo bi svakako trebalo da probate.

Odnosi s javnošću

Koliko znate PR?

Pogledajte još neke od testova

Newsletter

Ukoliko želite da Vas redovno obaveštavamo o novostima sa Link eLearning sajta prijavite se na našu newsletter listu.

Ime:

Prezime:

Email:


Anketa

Arhiva anketa

BAZA ZNANJA


Kurs: Core Web Application Technologies

Modul: Kontrolisanje izgleda veb aplikacije

Autor: Goran Aritonović

Naziv jedinice: Primena stilova i tema


Materijali vezani uz ovu lekciju:

- Test primena stilova i tema
- Primena stilova i tema (PDF dokument)



Cascading Style Sheets (CSS)

CSS je skup specifikacija (pravila) koje omogućavaju kontrolu nad prikazom elemenata veb strane. Najjednostavniji način je ubacivanje pravila za prikaz unutar glavnog dela strane (zaglavlja) tj. tzv. ubacivanje Stylesheet-a. Pravilo unutar stila je instrukacija za pozicioniranje ili formatiranje. U primeru unutar zaglavlja strane ubačen je css što je specificirano Tag-om <style type="text/css">. Unutar stila definisan je stil za zaglavlje h1 i stil za paragraf.

<head runat="server">
  <title>Ubaceni Cascading Style Sheet (CSS)</title>
 <style type="text/css">
    h1
    {
    color:blue; font-size:40px; font-family:verdana
    }
    p
    {
    color:white; background:green; font-family:helvetica;
    text-indent:2cm
    }
</style>
</head>


Dodavanje CSS stilova na veb stranu

Postoji tri osnovna načina dodavanja stilova veb strani: ubacivanje Style Sheet-a (formatiranje na nivou strane) tj. <style></style> elementa unutar zaglavlja veb strane kao u primeru, dodavanje linka na eksterni Style Sheet tzv. globalno formatiranje i dodavanje Inline stilova tj. formatiranje za konkretan HTML element.


Dodavanje linka na eksterni CSS fajl

U okviru  zaglavlja dodaje se link na eksterni fajl koji ima ekstenziju css. CSS fajl se može kreirati grafički u Visual Web Designer-u. Desni klik na ikonicu veb sajta u Solution Explorer-u pa se odabere opcija Add New Item. Od ponuđenih templejta odabere se Stylesheet. Klikom na ikonicu Build Style... mogu se podesiti osobine stila. Kao svojstvo Style Sheet veb strane (document elementa) odabere se kreirani css fajl čime se automatski kreira referenca na taj fajl odnosno kreira se <link…> Tag kao u primeru.

<head runat="server">
    <title>Linked Cascading Style Sheet (CSS)</title>
    <link href="stilovi.css" rel="stylesheet" type="text/css" />
</head>

Na gornjoj slici prikazan je prozor VS2008 okruženje u kome je kao templejt odabran StyleSheet. Odabirom ovakvog šablona kreira se css fajl sa definisanim Body Tag-om, za koji treba definisati formatiranje. Editor za kreiranje css fajla prikazan je na donjoj slici.

Dodavanje css fajla u VS2008 projekat:

 


Editor za kreiranje CSS fajla:

 


Dodavanje Inline stilova

Inline stil je stil koji se primenjuje na određeni HTML element odnosno na određenu kontrolu. Ukoliko postoji definisano više stilova u veb sajtu tada najveći prioritet ima Inline, zatim formatiranje na nivou strane i na kraju dolazi globalno formatiranje. Na slajdu je prikazan Inline stil primenjen na paragraf.

<p style="background-color: #ffff66; font-style: italic; color: blue;">
         Ovo je zuti paragraf
<p>


Korišćenje klasa stilova

Klase stilova omogućavaju da se primeni isto formatiranje na različite HTML elemente. Klasa stila kreira se unutar eksternog css fajla ili unutar ubačenog stila. Naziv klase treba da počinje sa tačkom. Stil koji je definisan klasom, implementira se za određeni HTML element primenom atributa CssClass.

.mojaKlasa
{
    color: white;
    font-family: Georgia;
    background-color: Lime;
}

<asp:Label id="Label1" style="Z-INDEX: 101; LEFT: 30px; POSITION: absolute; TOP: 66px" runat="server“ Width="67px" CssClass=" mojaKlasa ">Proba
</asp:Label>
<asp:TextBox id="TextBox1" style="Z-INDEX: 102; LEFT: 28px; POSITION: absolute; TOP: 132px" runat="server“CssClass=" mojaKlasa ">Proba
</asp:TextBox>


Kreiranje klasa stilova

Klase stilova unutar eksternog css fajla mogu se kreirati grafički primenom StyleBuilder-a. Definiše se naziv klase stila i klikne unutar vitičastih zagrada gde se definiše stil, a zatim se klikne na ikonicu Build Style.. Otvara Style Builder u kome se mogu definisati karakteristike stila, vrsta i veličina fonta, orjentacija teksta, boja pozadine i sl. U primeru na slajdu definisane su dve klase stilova critical i normal između Tag-ova <style> i </style> unutar glavne sekcije HTML dokumenta. Stilovi su zatim primenjeni na paragrafe.

<style type="text/css">
        .critical {color:red; font-size:18pt; font-weight:bold}
        .normal {color:black; font-size:12 pt}
</style>

<p class="critical"> This is red, 18 point, bold face </p>
<p class="normal"> This is black 12 point text </p>


Teme

Omogućavaju da se na jednostavan način definiše izgled kontrola i stranica na veb sajtu. Smešta se u App_Themes folderu koji se nalazi unutar Root direktorijuma aplikacije. Pojam teme je blisko povezan sa pojmom teme u Windows XP okruženju. Tema se primenjuje podešavanjem odgovarajućeg svojstva. Tema se sastoji od: CSS fajlova, Skin fajlova koji sadrže definicije kontrola koje se mogu naći na veb strani i slika.

Pridruživanje teme veb strani

Postavlja se Theme svojstvo odgovarajućeg document objekta na odgovarajuću temu čime se dodaje odgovarajući atribut Page direktivi:

<%@ Page Language="C#" Theme="ExampleTheme" %>.


Definisanje teme za sve strane veb sajta može se izvršiti u fajlu web.config:

<system.web>
<pages theme="ExampleTheme"/>
</system.web>


Onemogućavanje teme za kontrolu vrši se postavljanjem svojstva EnableTheming na vrednost false.


Imenovani skinovi unutar teme

Skin fajl sadrži definicije kontrola koje se mogu naći u veb sajtu i na koje je primenjeno odgovarajuće formatiranje. Kada se doda kontrola na veb stranu koja implementira temu, ona će preuzeti formatiranje iz skin fajla. Moguće je kreirati više definicija jedne kontrole unutar skin fajla. U primeru na slajdu unutar skin fajla dva puta je definisana labela, podrazumevana labela ne sadrži SkinID atribut. Druga Labela ima SkinID atribut postavljen na vrednost "Blue".

<asp:label runat="server" font-bold="true" forecolor="orange" />
<asp:label runat="server" SkinID="Blue" font-bold="true"  forecolor="blue" />


Kada se instancira nova kontrola, ukoliko se ne naznači, koristi se podrazumevani skin. U protivnom, potrebno je naznačiti o kom se skinu radi.

<asp:Label ID="Label2" runat="server" Text="Hello 2"
 SkinID="Blue" /><br />


Tema može sadržati više skin fajlova. Ne sme se ponoviti definicija iste kontrole unutar dva skin fajla, oni se moraju razlikovati bar po SkinID atributu.


Dodavanje CSS fajlova i slika u temu

Tema može sadržati jedan ili više css fajlova koji se referenciraju korišćenjem link elementa.

<link href="App_Themes/MojaTema/StyleSheet.css" rel="stylesheet"  type="text/css" />


Unutar skin fajla može se definisati <asp:Image …> Tag.

<asp:Image SkinID="Warning" ImageUrl="Images/Warning.gif"  runat="server"/>


Može se definisati i poseban skin fajl koji će sadržati definiciju ovog elementa. Uobičajeno je da se slike smeštaju u poseban folder.

<asp:Image ID="Image1" SkinID="Warning" runat="server" />


Smatrate da je ova lekcija korisna?  Preporučite je. Broj preporuka:0


Molimo Vas unesite svoje podatke i dobićete pristup besplatnim lekcijama.

Ime: 
Prezime: 
Email: