Kliknite tukaj, da si ogledate profil, kot ga vidijo drugi

Preprost meni
Avtor: filius | Objavljeno: dne 29. marec 2010, 12:03
  Naredili bomo preprost meni za spletno stran, katerega koncept nam privzeto že ponuja sam program.
 
 
1
  
 

Odpremo Adobe Dreamweaver, ustvarimo nov HTML dokument in ga nato še shranimo.
 
 
2
  
 

V oknu Layout kliknemo na Spry Menu Bar (glej sliko).
 
 
3
  
 

Odpre se nam okno v katerem lahko izberemo kakšno postavitev hočemo vodoravno ali navpično.

Jaz sem izbral  vodoravno (horizontal) ter kliknemo OK.
 
 
4
  
 

Naredi se nam meni, vendar ga mi seveda želimo urediti za naše potrebe.

Zato kliknimo na modro okence kakor kaže na sliki.

S tem se nam je v oknu Properties odprla nastavitev za meni.
 
 
 
 
 
5
  
 

1. stolpec:

V njem lahko nastavimo več ali manj gumbov s + in - nad stolpcem. 
Ko kliknemo na enega od gumbov lahko na desni strani v polju Text nastavimo ime gumba, v polju Link pa pot do te datoteke. 
 
2. stolpec:
V njem naredimo podgumb izbranemu gumbu v prvem okencu.
 
3. stolpec:
Lahko naredimo še podgumb gumbov iz 2. stolpca.
 
Ko smo zadovoljni s postavitvijo lahko zamenjamo še ozadje gumbom.
 
 
6
  
 

V oknu CSS najdemo SpryMenuBarHorizontal.css ter kliknemo na plus.
 
 
7
  
 

Nato poiščemo ul.MenuBarHorizontal a ter dvo kliknemo nanj.

Odpre se nam okno z nastavitvami za gumbe.

 
 
8
  
 

V kategoriji Type lahko nastavimo barvo, velikost, za pisavo v gumbih.
 
 
9
  
 

Najbolj pomembna kategorija za izgled je Background.

V njen nastavimo barvo ozadja ali pa sliko ozadja za gumbe.

Kliknemo na Apply in nato na OK.
 
Jaz osebno sem izbral črno ozadje in pa belo barvo pisave.
 
Odpremo še css:
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible

v katerem ponovimo koraka 7 in 8. (ta css nam določa barva gumba ko gremo nanj z miško.)
 
 
10
  
 

Dokument še enkrat shranimo, pri tem pa se nam odpre okno, na katerem nam piše da meni rabi nekatere datoteke ki so se sami shranili in jih moramo naložiti na strežnik če želimo, da nam bo meni pravilno deloval.

Nato še kliknemo na OK.
 
 
11
  
 

Pritisnemo F12 in si pogledamo kaj smo ustvarili.

Upam, da vam je lekcija razumljiva, če pa ne, pa postavite vprašanja na forumu.
 
 
Komentiraj
  
 
 
 
 
30.3.2010, 7:05
Meni je bil zelo všeč in sem si naredil oranžno modrega. Sedaj ga moram le še vključiti v spletno stran.

Lep pozdrav drobilc
 
 
 
 
30.3.2010, 20:49
Me veseli, da ti je lekcija všeč.
 
 
 
 
1.4.2010, 21:06
Zakon, prosim čim več takilih stvari. Vedno pridejo prav

Lp
 
 
 
 
3.4.2010, 13:33
Mene pa zanima, kako najenostavneje zdaj to skopiram na ostale strani, da ni samo na index strani in pa da so kasnejši popravki tudi nato vidni na ostalih straneh, pa da to ni preko frama.

hvala
 
 
 
 
3.4.2010, 13:44
Jaz ponavadi naredim tako, da najprej naredim stran index.html, potem shranim pod ime kontakt.html in samo uredim stran, da gor piše kontaktni naslov...

Če imaš pa že narejeno pa označi, Ctrl + C, pojdi na stran kamor bi kopiral in klikneš Ctrl + V.

spremenil: Dixo (3.4.2010 ob 13.48.29)
 
 
 
 
3.4.2010, 13:48
Če boš sam meni kopiral se bojim, da ne bo delovalo. Nisem čisto siguren, vendar raje naredi index.html do konca potem pa koperaj dokument ga preimenuj in ga uredi.
 
 
 
 
3.4.2010, 20:41
Saj tako sem delala do sedaj, samo "problem" se pojavi, ko moraš že na obstoječi strani potem dodati kaj in potem moraš kopirat in popravljat na vseh podstraneh.
 
 
 
 
3.4.2010, 21:03
Ena možnost je, da uporabiš iframe. Druga možnost je uporaba phpja ...
 
 
 
 
5.4.2010, 14:44
Hvala za odgovore, je že kakšna tema o ifram-ih?
 
 
 
 
5.4.2010, 14:46
Lekcija, ki prikazuje uporabo iframe:

http://www.zmaga.com/program_ucenje.php?....
 
 
 
 
5.4.2010, 14:48
To pa pomeni da imaš stran znotraj svoje strani.
 
 
 
 
23.5.2010, 10:45
a dela tudi v .php?

spremenil: podtalje (23.5.2010 ob 11.52.23)
 
 
 
 
23.5.2010, 11:53
Ker je koda sestavljena iz HTML in Javascript, bo delalo tudi v spletnih aplikacijah, napisanih v PHP.
 
 
 
 
21.4.2011, 15:28
Pozdravljeni

Sem naredil vertikalni meni z leve strani in sem uporabljal Spry Collapsible Panel in naredil kategorije in podkategorije, se mi zdi da vredu dela, vendar so mi podkategorije odprte, če kliknem na kategoriju se zapre, se pravi vsako posebej kategoriju klikam, zapiram in odpiram, edino je to ko recimo index.html odprem za predogled so kategorije odprte. Kako in ali lahko naredim da ko se odpre index.html so kategorije zaprte? Upam da me boste razumeli.

Hvala
 
 
 
 
22.4.2011, 19:24
Nobeden?
 
 
 
 
18.6.2011, 18:22
živjo!

nareedil sem ta meni horizontalno in mi je uspel. vendar je poravnan na levo stran in ga nemorem dobiti na sredino, da bo takoj pod naslovno sliko. Kako naj to nardim?
 
 
 
 
18.6.2011, 20:02
Najbolje da celotno kodo daš med <center> in </center>.
 
 
 
 
19.6.2011, 2:38
<center> značke bi se jaz izogibal, ker jo bodo v prihodnosti opustili.

Namesto tega bi raje dal:
<div align="center">
</div>
 
 
 
 
9.11.2011, 16:20
jaz imam pa problem da, ko grem z miško žez gumb, se mi ne odpre podkategorij.
 
 
 
 
8.12.2011, 10:51
Pozdrav!

Imam spletno stran narejeno z okvirji (frames). V zgornjem okvirju (top frame) imam kazalo. Želim narediti spustni menu. Vendar se spustni menu ne vidi, ker gre pod glavni okvir (main frame). kako narediti, da gre spustni menu čez glavni okvir (se vidi)?

Hvala za ogovore.

Dejan
 
Prijava in registracija
 
 
 
Zmaga.com ponuja brezplačno in razumljivo učenje računalniških programov, vas na enkraten način spozna z različnimi svetovnimi jeziki, s podrobno obrazloženimi recepti prikaže čare kulinarike in vam prežene strahove pred domačimi opravili.
 
 
Poleg tega lahko prebirate poučne članke, ki so namenjene širjenju naše splošne razgledanosti ter preverite svoje znanje z priljubljenim in enostavnim sistemom za preverjanje znanja. Če med vsebinami, ki se dodajajo vsak dan, ne najdete želenega znanja, je za vaša vprašanja na voljo dobro obiskan forum, kjer lahko tudi aktivno sodelujete. V primeru, da bi radi svoje praktično znanje delili z ostalimi, pa to lahko storite preko preprostega vmesnika za dodajanje vsebin. Zmagajte z znanjem z Zmaga.com!
  
Zmaga.com na Facebooku | Pošljite nam e-pošto | Informacije o Zmaga.com