glava
     

Cilji vaje:

  • pripraviti slog po meri,
  • ponovno določiti obstoječo značko HTML,
  • pripraviti napreden (Advanced) 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 povezan s predlogo, in ga shranimo z imenom datoteke razdalje.html v korenski imenik spletišča. Poimenujmo ga Razdalje med točkama. Vanj skopirajmo tekstovno vsebino datoteke razdalje.doc. Na označena mesta pa vstavimo slike po številčnih oznakah. Slike se nahajajo v gradivu med slikami v mapi vaja13. Tekst enačba1 in enačba2 pa nadomestimo s slikama enačb, ki se prav tako nahajata v mapi vaja13. Dokument je prikazan na sliki.

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 Adobe Dreamweaverju 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 Text>CSS Styles>New. oziroma v orodjarni CSS kliknemo gumb New CSS Rule.

s

s

s

V oknu New CSS Rule izberemo tip sloga Class, v polje Name vpišemo ime sloga .odstavek in potrdimo, da slog dodajamo temu dokumentu This document only, kot prikazuje slika.

Ko kreiramo nov slog po meri, moramo pred ime sloga dodati .. Če tega ne storimo, piko doda namesto nas Adobe Dreamweaver. Velja namreč dogovor, da se morajo vsa imena slogov po meri začeti s piko. Ko izberemo opcijo, da slog dodajamo dokumentu, se koda kaskadnega sloga doda v zaglavje.

s

Odpre se nam okno CSS Rule definition for .odstavek v katerem nastavimo oblikovne lastnosti. Okno je razdeljeno v več skupin, ki jih izberemo v levem delu okna, v desnem delu pa za posamezno skupino določamo lastnosti. Na voljo imamo skupine, ki jim določimo lastnosti:

  • Type (pisava) - izberemo družino pisav, velikost pisav, slog pisave, medvrstični razmik, polkrepko pisavo, tip črk, barvo pisave in dekoracijo,
  • Background (ozadje) - izberemo barvo ozadja, sliko za ozadje, položaj slike za ozadje, pomikanje slike za ozadje, začetni položaj slike,
  • Block (blok besedila) - določimo razmik med besedami in znaki, poravnavo, umikanje prve vrste, način prikaza beline v predmetu, prikaz bloka,
  • Box (nastavitve oblivanja za predmet) - določimo višino in širino predmeta, položaj in način prikaza predmetov glede na sosednje predmete,
  • Border (obrobe) - izberemo slog, debelino, barvo in položaj obrobe,
  • List (seznami) - nastavitev oblike vrstičnih seznamov, dodajanje slike za sezname, določimo umikanje in prelivanje vsebine seznama,
  • Positioning (nastavitve plasti) - tip, velikost, vidnost, položaj, obrezovanje plasti,
  • Extensions (dodatne nastavitve) - nastavljanje prelomov strani in vidnih efektov.

Našemu slogu .odstavek bomo določili lastnosti skupine Type in Block, kot kaže slika.

s

s

Določili bomo še dva sloga po meri:

  • .podpisSlika
  • .obrobaSlika

Za slog .podpisSlika nastavimo lastnosti skupin Type in Block, kot kaže slika.

s

s

Dodajmo pa še slog .obrobaSlika, s katerim bomo slikam določili obrobo. Nastaviti moramo lastnosti skupine Border, kot prikazuje slika.

s

 Izdelane sloge predmetom na spletni strani dodelimo tako,  da izberemo predmet in nato v spustnem seznamu Style v oknu z lastnostmi izberemo slog. Odstavkom na spletni strani razdalje.html dodelimo slog .odstavek, napisom pod slikami dodelimo slog .podpisSlika, slikam pa slog .obrobaSlika.

s

Prireditev novega sloga obstoječi znački HTML

Določili bomo nov slog znački naslova <H3>. Izberemo ukaz za kreiranje novega sloga v meniju ali v oknu CSS in izberemo možnost Tag (redefines the look of a specific tag). V meniju Tag: pa izberemo značko <H3>. Spremembo uveljavimo samo za ta dokument.

s

Znački <H3> v oknu CSS Rule definition for h3 določimo v skupini Type nove lastnosti, kot jih prikazuje slika.

s

 V dokumentu razdalje.html izberimo naslov Razdalja med točkama in mu v oknu z lastnostmi dodelimo oblikovanje Heading 3. Shranimo si dokument in si ga oglejmo v brskalniku. Adobe Dreamweaver nam je v zaglavje dodal kodo oblikovanja CSS.

s

s

Priprava slogov Advanced za izdelavo interaktivnih povezav

Uporaba slogov vrste Advanced (IDs, pseudo-class selectors) se pogosto uporablja za izdelavo interaktivnih povezav. S tem slogom ponovno določimo značko <A>, ki se uporablja v povezavah.

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. V oknu New CSS Rule izberemo vrsto sloga Advanced in v meniju Selector izberemo vrsto psevdorazreda. Ko meni razpremo, se nam pokažejo štiri možnosti:

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

s

Pri tem potrdimo tudi, da nastavitve sloga veljajo samo za ta dokument. Za običajno obliko povezave a:link določimo lastnosti skupini Type, da spremenimo barvo pisave v #999999 in pri izbiri Decoration potrdimo none, da se besedilo povezave ne bo podčrtavalo, kot prikazuje slika.

s

Priredimo tudi oblikovne lastnosti a:hover, ko se z miško zapeljemo nad povezavo. Zopet izdelamo nov slog tipa Advanced in v meniju Selector izberemo a:hover. V skupini Type določimo barvo pisave #0000FF in v izbirah Decoration potrdimo underline, da bo besedilo povezave, ko se nanj zapeljemo z miško, podčrtano, kot prikazuje slika.

s

Določimo še oblikovne lastnosti že obiskanih strani a:visited. Zopet izdelamo nov slog tipa Advanced in v meniju Selector izberemo a:visited. V skupini Type določimo barvo pisave #666666 in v izbirah Decoration potrdimo underline, da bo besedilo povezave podčrtano, kot prikazuje slika.

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, tudi tistih v meniju, ki so zaklenjene v predlogi. A oblika se je spremenila le na tej strani, na ostalih straneh je ostala nespremenjena.

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 ali pa tudi kar na vseh spletnih straneh. 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. Odprimo si datoteko index.html. Pobrišimo tekst Izhodišče in na njegovo mesto vstavimo tabelo s petimi vrsticami, ki ima en sam stolpec. Tabela naj bo širine 550 pik in jo poravnajmo na sredino strani.

s

Tretjo vrstico tabele z ukazom Table>Split Cell.  razdelimo tako, da bo imela dva stolpca.

s

V spletno stran index.html uvozimo že pripravljene sloge, ki se nahajajo v gradivu v mapi css v datoteki erid.css.  To storimo tako, da v oknu z lastnostmi v meniju izbire Style izberemo ukaz Attach Style Sheet. Še pred tem pa si datoteko erid.css iz gradiv prekopirajmo v naše spletišče in sicer v mapo css, ki jo kreirajmo v korenskem delu spletišča.

s

Odpre se nam okno Attach External Style Sheet v katerem bomo izbrali opcijo,  da sloge želimo le pripeti in ne uvoziti. V polju File/URL vpišemo pot in ime datoteke erid.css.

s

V kodi HTML je Adobe Dreamweaver ustvaril vrstico, s katero je sloge pripel k naši datoteki.

s

Poleg tega so se slogi uvozili tudi v knjižnico slogov, ki si jih lahko ogledamo v oknu z lastnostmi v meniju Style,

s

ali pa v orodjarni CSS.

s

Datoteko erid.css pa si lahko ogledamo tudi v Adobe Dreamweaverju.

s

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

  • tretji vrstici tabele dodelimo slog zgornji Rob,
  • četrti vrstici tabele dodelimo slog osrednjiDel,
  • peti vrstici tabele dodelimo slog spodnjiRob.

V tabelo vstavimo še nekaj slik:

  • v prvo vrstico vstavimo sliko dw_logo.jpg iz mape vaja13>okvirji,
  • v drugo vrstico vstavimo sliko razmik.gif iz mape vaja7 in ji nastavimo velikost 550 pik širine in 15 pik višine,
  • tudi v peto vrstico vstavimo sliko razmik.gif iz mape vaja7 in ji nastavimo velikost 550 pik širine in 3 pike višine,
  • v trejo vrstico v levo celico vstavimo sliko leviVogal_robZgoraj.gif, v desno vrstico pa sliko desniVogal_robZgoraj.gif in jo poravnajmo desno. Obe sliki se nahajata v mapi vaja13.

Naši domači strani manjka še besedilo, ki se nahaja med gradivom v datoteki index.doc. Skopirajmo si ga v četrto vrstico naše tabele in naslovni vrstici dodelimo slog naslov.

Datoteko index.html določimo kot domačo stran. To storimo tako, da jo v orodjarni spletišča desno kliknemo in v priročnem meniju izberemo ukaz Set as Home Page.

s

Shranimo si datoteko in si jo oglejmo v brskalniku.

Izdelali smo že kar nekaj datotek, ki niso povezane z menijem v predlogi. Zato odprimo predlogo predloga.dwt za urejanje in posodobimo povezave. V meniju popravimo tekst in dodajmo povezave:
.
Povezave

  1. z besedilom in slikami - ../povezane/povezave.html
  2. v sliki - ../povezane/zlozenke.html
  3. v strani - ../povezane/ure_p.html
  4. navigacijski gumbi - ../ure_soncne.html, stran naj se odpre na novi strani, Target _blank,

Večpredstavne strani

  1. animirani GIF, Flash - ../povezane/gif_flash.html
  2. foto album - ../foto/index.htm, stran naj se odpre na novi strani, Target _blank,
  3. pregledovalnik slik - ../fotografije.html

Oblikovane strani

  1. oblikovanje s CSS  - postavimo povezavo do strani razdalje.html
  2. oblikovanje povezav s CSS - postavimo povezavo do strani povezave_css.html v mapi povezane.

Shranimo predlogo in posodobimo strani povezane s predlogo. Preverimo delovanje povezav v brskalniku.

 

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