glava
     

Cilji vaje:

  • pripraviti slog po meri,
  • ponovno določiti obstoječo značko HTML,
  • pripraviti slog za izdelavo interaktivnih povezav,
  • uporabiti zunanji seznam slogov in oblikovati predmete s slogi.

Oblikovanje spletnih strani s kaskadnimi slogi CSS

Cascading 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 meri

Izdelajmo 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.

s      s

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.

s

Izberemo imenovan slog in v polje vpišemo ime odstavek. S klikom na Ustvari pravilo sloga kreiramo novo pravilo sloga.

s

s

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:

  • Besedilo - izberemo družino pisav, velikost pisav, slog pisave, medvrstični razmik, polkrepko pisavo, tip črk, barvo pisave in dekoracijo.
  • Ozadje - izberemo barvo ozadja, sliko za ozadje, položaj slike za ozadje, pomikanje slike za ozadje, začetni položaj slike.
  • Okvirji - določimo razmik med besedami in znaki, poravnavo, umikanje prve vrste, način prikaza beline v predmetu, prikaz bloka.
  • Škatla - določimo višino in širino predmeta, položaj in način prikaza predmetov glede na sosednje predmete.
  • Seznami - nastavitev oblike vrstičnih seznamov, dodajanje slike za sezname, določimo umikanje in prelivanje vsebine seznama.
  • Slišno  - nastavljanje lastnosti govora.

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.

s

Določili bomo še dva sloga po meri: podpisSlika in obrobaSlika. Za slog podpisSlika nastavimo lastnosti skupine Besedilo:

s

Dodajmo pa še slog obrobaSlika s katerim bomo slikam določili obrobo. Nastaviti moramo lastnosti skupine Okvirji:

s

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.

s 

Slike in napise pod slikami poravnajmo na sredino.

s

Prireditev novega sloga obstoječi znački HTML

Določ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.

s

V rubriki Besedilo znački H3 priredimo lastnosti:

s

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.

s

s

Priprava slogov za izdelavo interaktivnih povezav

Odprimo 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:

  • a:link - običajna oblika povezave,
  • a:visited - obiskana povezava,
  • a:hover - z miško nad povezavo,
  • a:active - aktivna povezava.

s

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.

s

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.

s

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.

s

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.

s

s

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.

s

Uporaba zunanjih seznamov slogov in oblikovanje predmetov s slogi

V 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.

s                      s

V drugi in tretji vrstici spojimo celici v eno celico. To storimo ob izbrani vrstici tabele z menijskim ukazom Tabela>Združi izbrane celice.

s

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:

  • v tretjo vrstico vstavimo sliko razmik.gif iz mape vaja6>okvirji in ji nastavimo velikost 760 pik širine in 3 pike višine,
  • v prvo vrstico v levo celico vstavimo sliko leviVogal_robZgoraj.gif, v desno celico pa sliko desniVogal_robZgoraj.gif in jo poravnajmo desno. Obe sliki se nahajata v mapi vaja6>okvirji.

s

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

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.

s

Sedaj ko smo si sloge uvozili, pa jih lahko priredimo predmetom v spletni strani:

  • prvi vrstici tabele dodelimo slog zgornji Rob,
  • drugi vrstici tabele dodelimo slog osrednjiDel,
  • tretji vrstici tabele dodelimo slog spodnjiRob,
  • tekstu Izdelovanje spletnih strani s programom Nvu dodelimo slog naslov.

Sloge dodelimo v vrstici za oblikovanje, kjer označenemu predmetu v meniju priredimo slog.

s

Besedilo pod naslovom postavimo v neurejen seznam in strani dodajmo sliko za ozadje ozadje.gif, ki se nahaja med slikami v mapi vaja3.

s

Stran shranimo in si jo oglejmo tudi v brskalniku.

s

 

Navodila
Uvod v svetovni splet
Dreamweaver - 01 - Spoznavanje programa
Dreamweaver - 02 - Izdelava osnovne spletne strani z besedilom
Dreamweaver - 03 - Dodajanje slik
Dreamweaver - 04 - Tabele
Dreamweaver - 05 - Ogled in spreminjanje kode HTML
Dreamweaver - 06 - Definiranje spletišča
Dreamweaver - 07 - Postavitev strani
Dreamweaver - 08 - Priprava in uporaba predloge
Dreamweaver - 09 - Povezave
Dreamweaver - 10 - Izdelava slikovnih kart in navigacijskih vrstic
Dreamweaver - 11 - Dodajanje večpredstavnostnih datotek
Dreamweaver - 12 - Izdelava spletnega foto albuma
Dreamweaver - 13 - CSS
Dreamweaver - 14 - Prenos spletišča na strežnik
NVU - 01 - Spoznavanje programa
NVU - 02 - Izdelava osnovne spletne strani z besedilom
NVU - 03 - Dodajanje slik
NVU - 04 - Tabele
NVU - 05 - Povezave
NVU - 06 - CSS
NVU - 07 - Spletišče
NVU - 08 - Objava spletišča

Izhod

 

na vrh