Navodila za sestavljanje lepljenih strani

Zasnova spletnih strani omogoča hkrati njihov enoten izgled in enostavno urejanje. Vsaka stran je vertikalno razdeljena na dva dela, ki se med seboj barvno ločita. Leva stran je namenjena logotipu (logo), povezavi za preklop med jeziki (prikaže se le če smo postavili strani v večih jezikih), glavnemu meniju (meni), in kratkim aktualnim novicam (spotlight). V glavnem meniju se naslov trenutno prikazane strani barvno loči od ostalih povezav.

Desna stran je namenjena vsebini. Nad vsebino je izpisana pozicija trenutno prikazane strani, torej pot iz osnovne do trenutno prikazane strani (path), ki hkrati omogoča enostaven prehod na nivoje višje v hierarhiji strani. Desno zgoraj se izpiše datum zadnje spremembe trenutno prikazane strani. Desno spodaj se nahajajo podatki o instituciji (footer), povezava za podporo ([support]) in gumb za pripravo tiskalniku prijazne strani.

Princip delovanja spletnih strani

Spletne strani delujejo na principu dedovanja in lepljenja posameznih elementov v celoto.

Lepljenje

Vsaka stran se zlepi in sledečih elementov, katerih pozicija je v naprej določena:

• logo (levo zgoraj)
• meni (levo na sredini)
• spotlight (levo spodaj)
• path (desno zgoraj)
• vsebina (desno na sredini)
• footer (desno spodaj)

Posamezni elementi (z izjemo vsebine) se nahajajo v HMTL datotekah z vnaprej določenimi imeni:

• logo: logo.html
• meni: links.html
• spotlight: spotlight.html
• path: path.html
• footer: footer.html

Imena datotek z vsebino so poljubna, z izjemo datoteke default.html, ki se prikaže ob zahtevi brez eksplicitno podanega imena datoteke (npr. http://cfgbc.mf.uni-lj.si).

Vsaki strani se avtomatsko določi stil, in sicer preko CSS datoteke s sledečim imenom:

• styles.css

Dedovanje

Princip dedovanja se uporabi v primeru, ko se v trenutni mapi kake od zgoraj naštetih datotek ni mogoče najti. V tem primeru se za sestavljanje spletne strani uporabi istoimenska datoteka na nivoju višje v hierarhiji strani. Na primer, če v mapi "\people\username" datoteka logo.html ne obstaja, se pri lepljenju uporabi datoteka logo.html iz mape "\people" (če obstaja, sicer pa logo.html iz mape "\"). Na ta način so posamezni elementi strani, ki se zlepijo z vsebino, vedno prisotni, tudi če se ne nahajajo v trenutni mapi. Enak princip velja tudi za spotlight.html, footer.html in styles.css.

Meni se sestavi iz datotek links.html, ki se nahajajo v trenutni mapi in višje v hierarhiji strani. Pri tem se uporabi le določeno število nivojev v hierarhiji (npr. 2 ali 3). V primeru večjega števila nivojev se v prvi vrstici menija pojavi povezava "..", ki omogoča prehod na nivo višje, ki v meniju ni prikazan. Hierarhija strani je prikazana z zamikom desno - povezave na strani, ki se nahajajo na istem nivoju, so prikazane z enakim zamikom. Povezava na trenutno prikazano stran in povezave na poti do te strani so prikazane z drugačnim stilom kot preostale povezave v meniju.

Desno zgoraj prikazana pot (path) se sestavi iz vsebine datotek path.html, ki se nahajajo na poti od osnovne do trenuto prikazane strani, na konec pa se dodajo povezave iz menija, ki vodijo iz osnovne do trenutno prikazane strani. V večini primerov datoteke path.html ne potrebujemo, prav nam pride v primeru, ko določene strani niso dosegljive preko glavnega menija; s pomočjo ustrezne datoteke path.html jih lahko uvrstimo v hierarhijo strani. Na primer, pri dostopu do strani "/people/username/publications.html" se pot sestavi iz:

• datoteke \path.html,
• datoteke \people\path.html (če obstaja),
• datoteke \people\username\path.html (če obstaja),
• in iz povezav iz menija, ki vodijo iz osnovne do trenutno prikazane strani (če obstajajo).

Pazi: pri dedovanju ne gre za dedovanje po mapah na disku, temveč po URLju. V primeru virtualnih map se hierarhija map na disku razlikuje od zgradbe URL naslova.

Vsebina posebnih datotek

logo.html

Datoteka vsebuje povezavo na logotip: <img src="myPhoto.jpg">

V gornjem primeru se mora datoteka myPhoto.jpg nahajati v isti mapi kot datoteka. logo.html. Priporočena širina logotipa je 230px.

links.html

Datoteka vsebuje povezavo na posamezne strani, posamezne povezave ločimo z oznako za skok v novo vrstico <br>:

<a href="profession.html">Professional Experience</a>
<br>
<a href="publications.html">Publications</a>
<br>
<a href="teaching.html">Teaching and Mentorship</a>
<br>
<a href="grants.html">Grants and Fellowships</a>
<br>
<a href="personal.html">Personal Pages</a>
<br>
<a href="personal.html">Personal Pages 2</a>

Povezava na našo privzeto stran (default.html) v meniju ni potrebna, saj se (če je naša stran dosegljiva preko menija) pojavi v meni na nivoju višje.

spotlight.html

Datoteka naj vsebuje samo tekst, v katerem lahko uporabimo tudi HTML povezave, npr. <a href="http://www.google.com">Google</a>.

Če želimo doseči, da se spotlight na naših straneh ne prikaže, moramo v svoji mapi pripraviti prazno datoteko spotlight.html.

path.html

S to datoteko lahko strani v določeni mapi vključimo v hierarhijo tudi v primeru, ko te strani niso dosegljive preko menija. Tak primer predstavljajo strani za podporo uporabnikom. V takem primeru naj datoteka path.html vsebuje povezavo na našo začetno stran, npr. <a href="/support">Support</a>, ime povezave pa naj bo skupno vsem stranem, ki se nahajajo v naši mapi.

footer.html

Datoteka vsebuje ime institucije in je načeloma ne spreminjamo.

styles.css

Datoteka vsebuje:

• stile za posamezne HTML elemente, kot npr.:

  H1
  {
      font-size: 15px;
      color: #003070;
      text-transform: uppercase;
  }
  

• stile za izvedbo lepljenja, kot npr.:

  .table_outer
  {
      width: 1000px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 0px;
      margin-bottom: 0px;
      border-collapse: collapse;
      border: none;
  }
  

• in stile po meri, kot npr.:

  .important_text{
      color: red;
      font-weight: bold;
  }
  

Postavitev osebnih spletnih strani

Za postavitev začetne spletne strani v svojo mapo ("/people/username") shranimo HTML datoteko z imenom default.html.

Če želimo k tej strani dodati novo stran, v tej mapi kreiramo dve novi datoteki:

• datoteko z vsebino nove strani (npr. publications.html)
• datoteko za meni, ki bo povezavala obe strani, s sledečo vsebino:

  <a href="default.html">Home</a>
  <br>
  <a href="publications.html">Publications</a>

Na podoben način lahko dodamo poljubno število podstrani. Priporočeno je, da kreiramo tudi datoteko s povezavo na svojo začetno stran. Poimenujemo jo path.html, vanjo vpišemo <a href="default.html">Ime Priimek</a> in jo shranimo v svojo mapo.

Za končen izgled osebnih strani v svojo mapo shranimo še datoteke logo.html s povezavo na svojo sliko (slika naj bo širine največ 230px) in datoteko spotlight.html, ki je lahko tudi prazna (v tem primeru se spotlight ne bo prikazal).

V svoji mapi lahko kreiramo podmape, vsaka od njih lahko vsebuje tudi posebne datoteke, s čimer dosežemo, da se posamezne strani prikažejo z različnimi meniji, logotipi, ...

Postavitev večjezičnih strani

Spletne strani lahko postavimo v več jezikih. Trenutno sta podprta slovenski in angleški jezik. Slednje lahko na željo razširimo na poljubno število jezikov.

Dvojezične strani postavimo na sledeč način. Imena posebnih datotek spremenimo tako, da jim na konec dodamo okrajšavo za jezik. Za slovenski jezik je uporabljena okrajšava "slo", za angleškega pa "eng". Kreirati moramo torej datoteke s sledečimi imeni:

• logo: logoslo.html, logoeng.html
• meni: linksslo.html, linkseng.html
• spotlight: spotlightslo.html, spotlighteng.html
• path: pathslo.html, patheng.html
• footer: footerslo.html, footereng.html
• styles: stylesslo.html, styleseng.html

V vsako od datotek vpišemo vsebino v ustreznem jeziku. Na podoben način shranimo datoteke z vsebino. Npr. namesto default.html uporabimo datoteki defaultslo.html z vsebino v slovenščini in defaulteng.html za vsebino v angleščini.

Pri tem moramo paziti, da povezave v linksslo.html kažejo na strani s slovensko vsebino (torej na datoteke XXXslo.html, povezave v linkseng.html pa na strani z angleško vsebino (torej na datoteke XXXeng.html). Podobno velja za datoteki pathslo.html in patheng.html.

Ni potrebno, da podvojimo datoteke za vse zgoraj naštete elemente. Na primer, ponavadi bomo za slovenske in angleške strani uporabili isti logotip. Namesto dveh datotek (logoslo.html in logoeng.html) lahko kreiramo samo eno in jo poimenujemo logo.html. Le-ta bo skupna tako slovenskim kot angleškim stranem.

V HTML datoteke z vsebino (torej v vse HTML datoteke z izjemo posebnih datotek) v glavo (torej med oznaki <head> in </head>) dodamo vrstico s sledečo vsebino: <meta name="language" content="XXX"/>, kjer XXX zamenjamo z ustrezno okrajšavo za jezik, v katerem je napisana vsebina datoteke. Na ta način določimo, s katerimi izmed posebnih datotek se bo naša stran zlepila. Na primer, če v defaulteng.html dodamo <meta name="language" content="eng"/>, se bo pri dostopu do te strani prikazal meni v angleškem jeziku (naložil se bo torej iz datoteke linkseng.html). Če slednja datoteka ne obstaja, se bo meni naložil iz datoteke links.html, oz. iz ustrezne datoteke na nivoju višje v hierarhiji strani (glej princip dedovanja).

Na koncu moramo zagotoviti še mehanizem iskanja začetne strani. To storimo tako, da v svojo mapo ("/people/username") shranimo datoteko default.asp s sledečo vsebino: <%Response.Redirect("defaulteng.html")%>. V tem primeru bo naša začetna stran prikazana v angleškem jeziku. Privzeta nastavitev je, da se začetna stran prikaže v angleškem jeziku.