glava
     

Cilji vaje:

  • izdelati predlogo iz obstoječe spletne strani,
  • pripraviti novo območje za urejanje,
  • pripeti predlogo spletni strani,
  • spreminjati in urejati izvirno predlogo in posodabljati spletne strani,

Priprava in uporaba predloge

Adobe Dreamweaver nam omogoča uporabo predlog, s katerimi dosežemo dosledno in nadzorovano zgradbo spletnih strani. Izdelamo si izvorno datoteko, tako imenovano predlogo. To storimo lahko na novo ali pa uporabimo že obstoječo spletno stran. Preostale spletne strani pa gradimo iz te predloge na tak način, da ostanejo povezane s predlogo. Predloga vsebuje predmete, ki jih odpremo za  urejanje, preostali del predloge pa ostane zaklenjen. Ko posodobimo izvorno predlogo, se posodobijo vse spletne strani, pri katerih smo uporabili predlogo.

Priprava predloge

Da v Adobe Dreamweaverju lahko uporabimo predloge, moramo najprej kreirati spletišče. Adobe Dreamweaver v korenskem imeniku spletišča izdela novo mapo Templates (predloge), kjer hrani izvirne datoteke s predlogami. Koda predloge je shranjena v datoteki v mapi s predlogami. Ko v spletno stran vstavimo predlogo, Adobe Dreamweaver vstavi vanjo kopijo kode predloge.

Zgraditi želimo spletišče, kot ga prikazuje slika. Pri tem želimo, da je vsebina sivo obarvanih celic v vseh spletnih straneh enaka, vsebinski del posamezne spletne strani pa želimo poljubno spreminjati. Izdelali bomo torej predlogo, v kateri bomo določili v celici Vsebina spletne strani območje za spreminjanje.

s

Predlogo lahko izdelamo na dva načina:

  1. iz obstoječe spletne strani, tako da stran shranimo kot predlogo,
  2. izdelamo novo, ki jo odpremo za urejanje in ji dodajamo elemente, kot ostalim spletnim stranem.

Priprava predloge iz obstoječe spletne strani

Ko spletni strani pripnemo predlogo, Adobe Dreamweaver vstavi v spletno stran kopijo celotne vsebine predloge. Da bi spletno stran prikazali, ne potrebujemo več izvirne predloge.

Izdelati želimo predlogo iz datoteke predloga.html, ki smo jo izdelali v vaji 7. Zato datoteko odpremo in jo shranimo kot predlogo z menijskim ukazom File>Save as Template.. V polju Save as Template izberemo spletišče, v našem primeru e-Rid, v področju Save as: pa predlogo poimenujemo kar z imenom predloga. V polje Description lahko vpišemo tudi opis predloge.

s

Ko shranimo predlogo, nas Adobe Dreamweaver vpraša, če posodobi povezave. V našem primeru to ni pomembno, saj še nismo kreirali nobene spletne strani, ki je povezana s predlogo. Dreamweaver nam je izdelal datoteko predloge z imenom predloga.dwt in jo shranil v mapo Templates.

s

Določanje območja za urejanje v predlogi

V predlogi je privzeto, da so vsa območja predloge zaklenjena. Preden bomo predlogo uporabili za izdelavo spletne strani ji moramo določiti območje za urejanje. V našem primeru bo to območje celica Vsebina spletne strani. Ostala območja bomo pustili zaklenjena. Če jih bomo želeli kasneje spreminjati, bomo odprli predlogo v načinu urejanja in vstavili želene spremembe. Ob shranjevanju predloge bomo lahko posodobili tudi vse s predlogo povezane spletne strani.

Območje za urejanje v predlogo vstavimo v meniju Insert>Template Objects kjer izberemo opcijo Editable Region.

s

V oknu New Editable Region vpišemo ime območja za spreminjanje VsebinaStrani.

s

s

Besedilo VsebinaStrani v območju za spreminjanje odstranimo, saj se bo pojavilo na vsaki spletni strani, ki jo bomo zgradili iz predloge. Uredljivo območje je na pogled skromnih dimenzij,vendar se bo njegova velikost prilagodila količini vsebine, ki jo bomo vstavili.

Na predlogi seveda lahko ustvarimo tudi več območij za spreminjanje. A v našem primeru jih ne potrebujemo. Adobe Dreamweaver samodejno izdela uredljiva območja za naslov dokumenta (doctitle) in prazno uredljivo območje v zaglavju dokumenta (head), kamor vstavljamo kodo v JavaScriptu.

Izdelana predloga nam zaenkrat zadostuje. Vsebino ji bomo dodali kasneje, zato jo shranimo in zapremo. 

Pripenjanje predloge spletni strani

Novo spletno stran iz predloge kreiramo tako, da v meniju File izberemo ukaz New. V oknu New Document izberemo v levem delu Page from Template, in če jih imamo več izberemo pravo spletišče in predlogo. Z gumbom Create potrdimo odpiranje novega dokumenta, povezanega s predlogo.

s

Dokument ima rumeno obrobo in v desnem zgornjem kotu oznako povezave s predlogo. Ko se postavimo v dokument, ima kazalec razen v zelenem območju za spreminjanje oznako prečrtanega kroga, kar naznanja, da dokumenta ne moremo spreminjati.

Do sedaj smo v predhodnih vajah izdelali že kar nekaj dokumentov. Le ti pa med seboj niso povezani. Želimo pa zgraditi spletišče, ki bo v levem delu imelo meni, s katerim se bomo lahko sprehajali po posameznih spletnih straneh. Če hočemo že izdelane strani povezati v spletišče jim pripnimo predlogo.

Načeloma se vedno lotimo izdelave spletišča tako, da najprej kreiramo spletišče, ki bo skrbelo za povezanost datotek. V primeru, da v spletišču želimo uporabiti predlogo ali več predlog, zgradimo najprej te in nato posamezne strani spletišča gradimo iz izdelanih predlog. Ker pa mi v začetku dela z Adobe Dreamweaver še nismo imeli dovolj znanja, da bi lahko izdelali predloge, bomo sedaj ubrali drugačno pot. Ustvarili bomo nove dokumente povezane s predlogo, vsebino iz že izdelanih strani pa si bomo prekopirali v nove dokumente.

Da v spletišču ne bo prišlo do zmešnjave, si nove dokumente povezane s predlogo shranimo v novo mapo v našem spletišču. V orodjarni spletišča desno kliknimo na korenski imenik in v priročnem meniju izberimo opcijo New Folder in mapo poimenujmo povezane.

Odprt dokument sedaj z imenom prvi_p.html shranimo v mapo povezane. Poimenujmo ga Prvi dokument. Z dvoklikom na dokument prvi.html v orodjarni spletišča pa si odprimo še naš prvi dokument. Izberimo celotno vsebino dokumenta, kar najpreprosteje storimo s pritiskom tipkovne bližnjice Ctrl+A. Izbrano vsebino kopirajmo s pritiskom tipkovne bližnjice Ctrl+C v odložišče. S kazalnikom se postavimo v območje za urejanje v dokument prvi_p.html in s tipkovno bližnjico Ctrl+V prilepimo kopirano vsebino v nov dokument.

s

Shranimo dokument prvi_p.html in ga zaprimo. Prav tako zaprimo tudi dokument prvi.html.

Podobno bomo storili tudi z ostalimi dokumenti:

  • odprimo novo - s predlogo povezano - datoteko in jo shranimo v mapo povezane z imenom cas_p.html. Poimenujmo jo Prostor in čas. V območje za urejanje kopirajmo vsebino datoteke cas.html. Barva ozadja se ne kopira v nov dokument, ker se značka <BODY> nahaja v zaklenjenem delu kode. Dokument shranimo in zaprimo.

s

  • odprimo novo - s predlogo povezano - datoteko in jo shranimo z imenom merjenje_casa_p.html. Poimenujmo jo Merjenje časa. Dokument shranimo v korenski imenik spletišča in ne v mapo povezane. Ko bomo v območje za urejanje kopirali vsebino datoteke merjenje_casa.html, se bodo pravilno kopirale tudi slike. V primeru, da bi datoteko shranili v mapo povezane, pa Adobe Dreamweaver ne bi znal določiti poti slik. Če bi želeli vstavljene slike, bi morali vsaki sliki ponovno določiti izvor. Dokument shranimo in zaprimo. V orodjarni spletišča označimo dokument merjenje_casa_p.html in ga odvlecimo v mapo povezane. Pri premikanju dokumenta nas Adobe Dreamweaver v oknu Update Files vpraša, če naj osveži povezave do povezanih datotek. Z gumbom Update potrdimo osveževanje povezav, kar pomeni, da bo Adobe Dreamweaver sedaj sam pravilno nastavil povezave do slik.

s

s

  • odprimo novo s predlogo povezano datoteko in jo shranimo z imenom ure_p.html. Poimenujmo jo Ure. Dokument shranimo v korenski imenik spletišča. Vanj kopirajmo vsebino datoteke ure.html.  Dokument shranimo in ga premaknimo v mapo povezane.

s

  • odprimo novo s predlogo povezano datoteko in jo shranimo z imenom anekdota_p.html. Poimenujmo jo Anekdota. Dokument shranimo v korenski imenik spletišča. Vanj kopirajmo vsebino datoteke anekdota.html.  Dokument shranimo in ga premaknimo v mapo povezane. Postavljena slika za ozadje se ne kopira.

s

  • odprimo novo s predlogo povezano datoteko in jo shranimo v mapo povezane z imenom enote_p.html. Poimenujmo jo Osnovne fizikalne količine in enote. Vanj kopirajmo vsebino datoteke enote.html

s

  • odprimo novo s predlogo povezano datoteko in jo shranimo z imenom dolzina_p.html. Poimenujmo jo Dolžina. Dokument shranimo v korenski imenik spletišča. Vanj kopirajmo vsebino datoteke dolzina.html. Ob kopiranju nas Adobe Dreamweaver opozori, da slike v dokumentu nimajo nadomestnega besedila. Besedilo lahko v oknu Image Description (Alt Text) dodamo ali pa s klikom na Cancel potrdimo vstavljanje slik brez nadomestnega besedila.

s

  •  Dokument shranimo in ga premaknimo v mapo povezane.

s

  • odprimo novo s predlogo povezano datoteko in jo shranimo v mapo povezane z imenom predloga_p.html. Poimenujmo jo Predloga. Vanj kopirajmo vsebino datoteke predloga.html.  Tabelam nastavimo lastnost obrobe Border na 1 piko.

Spreminjanje in urejanje izvirne predloge in posodabljanje spletnih strani

Izdelane spletne strani smo povezali s predlogo. Predloga še nima vsebine in oblike. V naslednjih korakih bomo predlogi dodali grafične elemente in meni.

Poiščimo predlogo predloga.dwt v orodjarni spletišča v mapi Tempaltes. Z dvoklikom jo odprimo za urejanje.

s

V zgornji del predloge v obe celici vstavimo sliko za ozadje. Označimo obe celici in v oknu z lastnostmi kliknimo na mapo pri polju Bg. Med slikami poiščimo v mapi vaja8 sliko ozGlava.png.

s

Tudi v spodnjo celico v tabeli predloge vstavimo sliko za ozadje. Vstavili bomo sliko ozNoga.png, ki je v mapi vaja8 med slikami.

s

Sliko za ozadje postavimo tudi v telo dokumenta. V meniju Modify izberemo Page Properties., kjer v polje Background image: postavimo sliko ozStrani.png, ki se nahaja med slikami v mapi vaja8. Sliko z ukazom repeat razpostavimo po celotnem ozadju.

s

Tudi v celico menija dodajmo sliko za ozadje ozMeni.png.

s

V desno celico v glavi predloge bomo na sredino postavili sliko dwNaslov.png.

s

V nogo predloge dopišimo še tekst C Projekt e-RID (e-gradiva), izdelava spletnih strani in ga oblikujmo:

  1. nastavimo velikost pisave 10 pik,
  2. priredimo nabor znakov Arial, Helvetica, sans-serif,
  3. obarvajmo pisavo s sivo barvo #CCCCCC.

s

Vpišimo še meni, ki bo služil za povezavo do posameznih strani:

  1. Besedilne strani
  2. prvi dokument
  3. čas in prostor
  4. Strani s slikami
  5. merjenje časa
  6. ure
  7. anekdota
  8. dolžina
  9. Tabele
  10. enote
  11. predloga
  12. Povezave
  13. z besedilom
  14. s slikami
  15. v sliki
  16. v strani
  17. Večpredstavne strani
  18.  animirani GIF, Flash
  19. foto album
  20. Oblikovane strani
  21. CSS
  22. Obrazci
  23. e-mail
  24. test

s

Da bo meni preglednejši bomo pred alineje teksta vnesli sliko trik2.png, ki se nahaja med slikami v mapi vaja8, kot kaže slika. Tekstu menija priredimo nabor pisav Arial, Helvetica, sans-serif in  mu dodelimo velikost 12 pik.

s

Predlogo sedaj shranimo. Adobe Dreamweaver nas ob shranjevanju vpraša ali naj posodobi tudi strani, ki so povezane s predlogo. V oknu Update Template Files nam izpiše seznam povezanih datotek. S klikom na gumb  Update posodobimo datoteke.

s

V oknu Update Pages Adobe Dreamweaver obvesti, da je posodobil datoteke. Če s kljukico potrdimo polje Show log, nam izpiše tudi, katere datoteke so bile posodobljene. S Close zapremo okno.

s

S tem smo zaenkrat zaključili spreminjanje in oblikovanje predloge. Zato jo lahko zapremo. Preverimo, če so se datoteke, povezane s predlogo zares posodobile. Odprimo nekaj datotek, npr. anekdota_p.html, cas_p.html in enote_p.html. Odprte datoteke si oglejmo tudi v brskalniku.

s s

Opazimo, da naše spletišče počasi dobiva želeno obliko. Sedaj pa je napočil čas, da datoteke med seboj povežemo, kar se bomo naučili v naslednji vaji. Vajo 8 pa s tem zaključujemo.

 

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