 |
||
|---|---|---|
|
Cilji vaje:
Oblikovanje spletnih strani s kaskadnimi slogi CSSCascading Style Sheets oziroma karajše CSS omogoča oblikovanje predmeta z lastnostjo ali s skupino lastnosti. Te oblikovne lastnosti imenujemo slog. Sloge uporabljamo za oblikovanje besedila, za postavitev predmetov, za izdelavo obrob in še veliko več. Prednost uporabe slogov je zmožnost takojšnjega posodabljanja vseh predmetov, ki so oblikovani z določenim slogom. To pomeni, da tudi izdelanemu spletišču lahko hitro spremenimo obliko in sicer tako, da spremenimo uporabljene sloge. Vse spremembe slogov pa se takoj prikažejo s posodobitvijo oblike v dokumentu. Poznamo tri različne vrste slogov: slog po meri, ponovna določitev obstoječe značke HTML in napredno za izdelavo interaktivnih povezav. Izdelava in uporaba sloga po meriIzdelajmo nov prazen dokument in ga shranimo z imenom datoteke razdalje.html. Poimenujmo ga Razdalje med točkama. Vanj skopirajmo tekstovno vsebino datoteke razdalje.doc, ki se nahaja med gradivi. Na označena mesta pa vstavimo slike po številčnih oznakah. Slike se nahajajo med slikami v mapi vaja6. Tekst enačba1 in enačba2 pa nadomestimo s slikama enačb, ki se prav tako nahajata v mapi vaja6.
Dokument bomo oblikovali s slogi, ki jih bomo v ta namen izdelali in jih dodali dokumentu. Slog po meri pripravimo tako, da izdelamo nov slog in mu v Nvu določimo lastnosti. Slogi se dodajo v knjižnico slogov CSS kjer so na voljo, da z njimi lahko oblikujemo predmete. Nov slog po meri dodamo z menijskim ukazom Orodja>Urejevalnik CSS. V oknu Slogovne predloge CSS izključimo način za izkušene. S klikom na Pravilo določimo novo pravilo sloga.
Izberemo imenovan slog in v polje vpišemo ime odstavek. S klikom na Ustvari pravilo sloga kreiramo novo pravilo sloga.
Novemu slogu odstavek nastavimo še oblikovne lastnosti. Okno Slogovne predloge CSS je razdeljeno v več skupin, ki jih izberemo v zavihkih, v desnem delu pa za posamezno skupino določamo lastnosti. Na voljo imamo skupine, ki jim določimo lastnosti:
Našemu slogu odstavek bomo določili lastnosti skupine Besedilo, vnaprej določen nabor družine pisav Arial, Helvetica, sans-serif, velikost pisave 12px, barvo #666666 in obojestransko poravnavo.
Določili bomo še dva sloga po meri: podpisSlika in obrobaSlika. Za slog podpisSlika nastavimo lastnosti skupine Besedilo:
Dodajmo pa še slog obrobaSlika s katerim bomo slikam določili obrobo. Nastaviti moramo lastnosti skupine Okvirji:
Izdelane sloge predmetom na spletni strani dodelimo tako, da izberemo predmet in nato v spustnem seznamu v orodni vrstici za oblikovanje izberemo slog. Odstavkom na spletni strani razdalje.html dodelimo slog odstavek, napisom pod slikami dodelimo slog podpisSlika, slikam pa slog obrobaSlika.
Slike in napise pod slikami poravnajmo na sredino.
Prireditev novega sloga obstoječi znački HTMLDoločili bomo nov slog znački naslova <H3>. Opremo Urejevalnik CSS v meniju Orodja. Izključimo način za izkušene in kliknemo na gumb Pravilo. Pri kreiranju novega pravila izberemo slog uporabljen na vseh elementih vrste in v polje vpišemo H3. S klikom na gumb Ustvari pravilo sloga kreiramo novo pravilo sloga značke H3.
V rubriki Besedilo znački H3 priredimo lastnosti:
V dokumentu razdalje.html izberimo naslov Razdalja med točkama in dodelimo oblikovanje Naslov 3. Shranimo dokument in si ga oglejmo v brskalniku. Nvu nam je v zaglavje dodal kodo oblikovanja CSS.
Priprava slogov za izdelavo interaktivnih povezavOdprimo si stran povezave.html, ki se nahaja v mapi povezane in jo z ukazom Save As. shranimo kot kopijo z imenom povezave_css.html. Spremenimo ime dokumenta v Oblikovanje interaktivnih povezav s slogi CSS. Slogovne lastnosti povezav določimo z izdelavo novega sloga. S tem slogom ponovno določimo značko <A>, ki se uporablja v povezavah. V oknu Slogovne predloge CSS izključimo Način za izkušene in s klikom na gumb Pravilo kreiramo novo pravilo sloga. Izberemo slog uporabljen na vseh elementih vrste in v polje vpišemo značko za povezavo in vrsto psevdorazreda, pri čemer lahko izbiramo med naslednjimi možnostmi:
Kreirajmo novo pravilo sloga za običajno obliko povezave a:link. Določimo lastnosti skupini Besedilo, in sicer spremenimo barvo pisave v #999999 in pri izbiri Okraski besedila potrdimo Brez, da se besedilo povezave ne bo podčrtavalo.
Priredimo tudi oblikovne lastnosti a:hover, ko se z miško zapeljemo nad povezavo. Določimo lastnosti skupini Besedilo, in sicer spremenimo barvo pisave v #0000FF in pri izbiri Okraski besedila potrdimo Podčrtano, da se bo besedilo povezave podčrtalo.
Določimo še oblikovne lastnosti že obiskanih strani a:visited. Zopet določimo lastnosti skupini Besedilo, in sicer spremenimo barvo pisave v #666666 in pri izbiri Okraski besedila potrdimo Podčrtano, da se bo besedilo povezave podčrtalo.
Priredimo še oblikovne lastnosti aktivnih strani a:active. Določimo lastnosti skupini Besedilo, in sicer spremenimo barvo pisave v #666666 in pri izbiri Okraski besedila potrdimo Podčrtano, da se bo besedilo povezave podčrtalo. Spremenimo še lastnost Debelina pisave v Krepko.
Da bi si učinke lahko ogledali moramo stran povezave_css.html shraniti in si jo ogledati v brskalniku. Vidimo, da se je spremenila oblika vseh povezav.
Uporaba zunanjih seznamov slogov in oblikovanje predmetov s slogiV primeru, da imamo sloge že pripravljene, jih lahko uvozimo v spletišče in uporabimo na spletni strani. V takem primeru se slogi ne shranijo v kodo zaglavja ampak so v zunanji besedilni datoteki, ki ima končnico .css. Ko spremenimo oziroma posodobimo slog v zunanjem slogovnem seznamu, bodo spremembe dejavne na vsaki strani, ki je povezana s tem slogovnim seznamom. Seveda si zunanjo datoteko s slogi lahko izdelamo tudi sami. Izdelali si bomo izhodiščno stran našega spletišča. To stran navadno imenujemo tudi domača stran. Kreirajmo si datoteko index.html. Poimenujmo jo Izdelovanje spletnih strani s programom Nvu in ji dodelimo kodiranje znakov Unicode (UTF-8). Vstavimo tabelo s tremi vrsticami, ki ima dva stolpca. Tabela naj bo širine 760 pik in jo poravnajmo na sredino strani. Razmik in odmik med celicami nastavimo na vrednost 0.
V drugi in tretji vrstici spojimo celici v eno celico. To storimo ob izbrani vrstici tabele z menijskim ukazom Tabela>Združi izbrane celice. Naši domači strani vstavimo besedilo, ki se nahaja med gradivom v datoteki index.doc. Skopirajmo si ga v drugo vrstico naše tabele. V tabelo vstavimo še nekaj slik:
S pomočjo kaskadnih slogov CSS bomo stran index.html še oblikovali. V spletno stran uvozimo že pripravljene sloge, ki se nahajajo v gradivu v mapi css v datoteki erid.css. Mapo css z datoteko erid.css si kopirajmo v mapo www, kjer imamo shranjene datoteke spletnih strani. Sloge v stran uvozimo z menijskim ukazom Orodja>Urejevalnik CSS. V oknu Slogovne predloge CSS kliknemo na gumb Element povezave. V polje URL z izbiranjem pokažemo na mesto datoteke erid.css, ki se nahaja v mapi css.
S klikom na gumb Ustvari slogovno predlogo sloge uvozimo. Stanje osvežimo s klikom na gumb Osveži. Uvožene sloge v področju Predloge in pravila s klikom na + razpremo. Ko si sedaj posamezni slog izberemo, se nam na desni v področju Pravilo sloga izpišejo vse lastnosti posameznega sloga.
Sedaj ko smo si sloge uvozili, pa jih lahko priredimo predmetom v spletni strani:
Sloge dodelimo v vrstici za oblikovanje, kjer označenemu predmetu v meniju priredimo slog.
Besedilo pod naslovom postavimo v neurejen seznam in strani dodajmo sliko za ozadje ozadje.gif, ki se nahaja med slikami v mapi vaja3.
Stran shranimo in si jo oglejmo tudi v brskalniku.
Navodila
|
||
| na vrh | ||
