Weebly

Srednja strukovna škola Vinkovci
Weebly
Izrada web stranice u Weeblyju - tutorijal
Marija Zovko, mag. educ. math. et inf.
2015.
Sadržaj
1.
Uvod ................................................................................................................................................ 3
2. Registracija ......................................................................................................................................4
3. Postavljanje stranice .......................................................................................................................8
4. Odabir teme (dizajna) .................................................................................................................... 11
5. Domena i naziv stranice ................................................................................................................ 13
6. Izbornici......................................................................................................................................... 15
6.1 Horizontalni izbornik ................................................................................................................. 15
6.2 Lijevi izbornik ............................................................................................................................ 28
2
1. Uvod
Zašto izrada Web stranice?
U izradi....
3
2. Registracija
Prvi korak:
U vaš Internet preglednik (koji god koristite: Mozilla, Opera, Google Chrome, Internet
Explorer) ukucajte slijedeću web adresu:
education.weebly.com
Otvorit će vam se slijedeće:
Ovo je početna stranica na kojoj će te se registrirati.
Ukucajte vaše podatke ovdje:
Korisničko ime
Lozinka
E-mail
Korisničko ime sami izaberete.
Lozinka po izboru, ali više od 6
znakova.
Možete koristiti vaš školski
e -mail ili bilo koji drugi
koji često koristite.
Za kraj, stisnite kvadratić da
vam se pojavi kvačica te
SIGN UP.
4
Nakon što se ulogirali, pojavit će vam se slijedeći prozor:
Ispunite okvir sa svojim podatcima(ime i prezime, Srednja strukovna škola Vinkovci i
izaberite Croatia) i kliknite SUBMIT:
5
Nakon toga, pojavit će se slijedeći okvir:
Stisnite x, odnosno izađite iz okvira, pa će Weebly sučelje izgledati ovako:
6
Nakon što se jednom registrirate, dalje ćete se sa svojim korisničkim imenom ili e-mailom i
lozinkom logirati gore u desnom kutu.
Nakon što ukucate podatke, stisnete Log in.
7
Naš je primarni cilj napraviti Web stranicu vašeg aktiva ili vašu osobnu stranicu, pa ćemo se
u ovom tutorijalu držati toga, a kasnije ću objasniti kako napraviti razred i dodavati
učenike, kako obrisati račun, i ostale općenite stvari.
3. Postavljanje stranice
Krenimo!
Za početak ćemo stisnuti
Add Site, odnosno Dodaj
stranicu.
(Možete dodati do 10
stranica u besplatnoj verziji
koju ćemo mi koristiti.)
8
Kada stisnete Add Site, pojavit će se slijedeće:
Možete napraviti stranicu, možete napraviti blog, možete napraviti online trgovinu.
Mi želimo stranicu, pa ćemo stisnuti Site:
9
Nakon što ste stisnuli Site, otvorit će vam se ovakav prozor (ne moraju biti ovakve slike):
10
4. Odabir teme (dizajna)
Možete izabrati dizajn koji vam se sviđa, imate puno izbora.
Ja sam ovdje izabrala
kategoriju Fun, pa mi
je izbacilo ovako.
Dakle, možete odmah
na početku, izabrati
kategoriju ili boje
koje želite na stranici.
Za svoj aktiv, Matematika i fizika, ja sam se za početak odlučila za ovaj dizajn.
Svoj dizajn izaberete tako, da nakon što nađete ono što vam se sviđa, samo kliknete
Choose (pojavit će vam se alatna traka kada mišem dodjete na temu)!
11
Ponudit će vam se i boje, pa odmah
možete izabrati i vidjeti kako bi vaša
tema izgledala s nekom od ponuđenih
boja. (Ja sam se odlučila za zelenu.)
Nakon što ste se odlučili
za temu i boju,
kliknite Choose (Izaberi).
12
5. Domena i naziv stranice
Nakon što ste odabrali temu, slijedi odabir domene.
Otvorit će vam se ovakav prozor:
Vaš zadatak sada je izabrati ime za svoju stranicu. Nas zanima samo prvi odabir jer je taj
besplatan.
Možete sami izabrati
ime svoje stranice,
ali vaša domena će
biti weebly.com.
Za aktiv matematike
i fizike, naziv je:
aktivmatematikeifizi
ke.weebly.com.
Ako radite svoju
osobnu stranicu,
možete staviti i svoje
ime i prezime.
13
Ovdje pišete naziv svoje stranice!
Ako je naziv
slobodan, pojavit
će vam se zelena
kvačica, ako nije
crvenit će se, pa
ćete morati smisliti
novi naziv!
Kada ste odabrali ime, stisnite Continue (Nastavi).
14
6. Izbornici
Nakon što ste stisnuli Continue, pojavilo vam se slijedeće:
Ovo je editor u kojem ćete uređivati vašu stranicu.
Imamo dva izbornika. Prvi je horizontalno postavljen na vrhu stranice, a drugi izbornik se
nalazi s lijeve strane stranice.
6.1 Horizontalni izbornik
Prvo ćemo reći nešto o horizontalnom izborniku.
15
Imate sljedeće: BUILD, DESIGN, PAGES, STORE, SETTINGS. Nakon settings, imate upitnik
(to vam je kao pomoć, ali za svaku nejasnoću meni se obratite), zatim imate sliku monitora
i mobitela. Tu možete vidjeti kako bi vaša stranica izgledala na kompjuteru ili na mobitelu.
U ovom se izborniku nalazi najvažnija tipka: PUBLISH. S tom tipkom objavljujete vašu
stranicu. Nakon svake izmjene na stranici, potrebno je stisnuti PUBLISH.
Sada ću ukratko nešto napisati o svakoj tipki u izborniku:
1. BUILD
Kada stsinete BUILD (graditi) uvijek se vratite na vaš weebly editor, odnosno na
mjesto gdje uređujete svoju stranicu:
2. DESIGN
Kada stisnete DESIGN (dizajn) pojavit će vam se izbornik preko kojeg možete mjenjati
svoj početni dizajn (temu), boje, fontove.
Social icons i
Phone number
isključite, tako
da stisnete
ovo plavo gdje
piše ON.
16
3. PAGES
Pages ili stranice su nama najbitnije. Tu definiramo naš izbornik koji ćemo imati na
stranici i podizbornike.
Kada stisnete Pages, pojavit će vam se slijedeće: Edit Page (Sredi stranicu)
Svaka stranica treba imati Početnu stranicu ili Naslovnicu. Samo ćemo izmijeniti ovu
Home ( što je početna na engleskom) u Početnu.
17
Ovdje nazivate svoje stranice!
Ovdje birate izgled svoje stranice! Svaka
Početna neka ima Landing page.
Ovdje postavljate vidljivost svoje
stranice. Public je da svi mogu vidjeti.
Ako imate neke materijale ili
vijesti koje želite podijeliti samo s
određenim učenicima, možete na
stranicu staviti lozinku tako da stranici
mogu pristupiti samo oni s lozinkom!
Kada stisnemo Advanced Settings, pojavit će vam se izbornik kao što vidite dolje na slici.
Ispunite ga za svaku stranicu posebno.
18
Ovo je bitno, tu napišite sve
riječi s kojima bi se vaša
stranica mogla povezati jer
će tako vašu stranicu
učenici, ali i profesori moći
lakše naći.
U desnom kutu dolje, možete redom: Obrisati vašu stranicu, Kopirati vašu stranicu i Spremiti i
sređivati.
19
No, mi ne želimo samo Početnu stranicu, nego želimo još neke stranice.
U ponuđenom dizajnu imam još About i Contact. To ću preimenovati tako da stisnem About,
pa mi se ponovno otvori izbornik Edit Page.
Sve mijenjam i ispunjavam kako je objašnjeno u primjeru za Početnu stranicu:
20
Stranicu sam nazvala O nama, izabrala sam Short Header ( na stranici će biti kratka slika
odmah gore na početku, kasnije ćemo vidjeti na primjeru što to znači.) Ispunila sam Advanced
Settings.
Još ćemo dodati slijedeće stranice. Postojeću Contact izmijenit ćemo u nastava i ostavit ćemo
Short Header, ispunit ćemo sve kao u prethodnim stranicama.
Još u glavnom izborniku želim imati: Natjecanja, Učeničke radove, Skupovi.
Kako više nemam postojećih stranica, moram dodati nove.
21
To radim na slijedeći način:
S lijeve strane stisnem + Add (Dodaj),
Kada stisnem +Add, pojavi mi se:
Izaberete Standard Page i na taj
način dodate novu stranicu!
Nakon što ste stisnuli Standard Page, s lijeve strane pojavit će vam se New Page
Dalje tu New Page imenujte kako
želite, ja ću Natjecanja i dalje
ispun javate ostalo kao i kod
prethodnih stranica!
22
Na taj isti način dodajem i ostale stranice:
23
Ovo stranice što smi sada definirali, na našoj stranici su onaj izbornik iz kojeg mi biramo što
ćemo. Pogledajte: (Provjeriti možete tako, da stisnete tipku BUILD u gornjem izborniku.)
No, mi želimo i za svaku tu stranicu definirati podstranice, odnosno padajuće izbornike.
Dodajemo nove stranice na prethodno opisani način, kad smo ih nadodali, stisnemo ih i malo
uvučemo u desno, i na taj način ćemo dobiti padajući izbornik.
Vratimo se tipkom PAGES na dodavanje stranica.
Svaka nova stranica koju
dodate nalazit će se na
zadnjem mjestu.
Ja sada želim Mariju Gerovac
pomaknuti do Adriane
Đuraković. To ću napraviti
tako da mišem stisnem Mariju
Gerovac i prenesem ju do
Adriane Đuraković i malo
uvučem desno.
24
Nakon što sam nadodala sve stranice što sam mislila, to izgleda ovako:
25
Odnosno, na završnoj stranici, ako stisemo BUILD dobijemo:
Na ovaj način smo definirali sve stranice koje želimo na našoj stranici.
Naravno, uvijek možemo dodavati nove stranice, brisati stare, mijenjati...
Prije objavljivanja stranice treba urediti sadržaj, dodati slike, datoteke, prezentacije, to ćemo
naučiti u slijedećem poglavlju.
4. STORE
Store (trgovina): vezano za on-line trgovinu, stoga ovaj dio nećemo obraditi.
5. SETTINGS
Ako stisnete settings (Postavke) , možete mijenjati osnovne postavke stranice, web
adresu stranice, naslov stranice, možete napraviti lozinku kako biste zaštitili svoju
stranicu, možete ju povezati s Facebookom...
26
Prošli smo ukratko sve stavke horizontalnog gornjeg izbornika. Sada ćemo proučiti lijevi
izbornik.
27
6.2 Lijevi izbornik
S lijeve strane imate izbornik pomoću kojeg uređujete stranicu. To radite tako da ono što
vam treba, stisnete i prebacite na vašu stranicu (drag and drop sistem – kad stisneš:
povuci i pusti.)
Izbornik je podijeljen na pet dijelova. Sad ćemo opisati što se nalazi u kojem, a da je nama
potrebno:
1. BASIC (Osnovno)
Naslov!
Kada želite dodati
naslov na vašu
stranicu samo
stisnete i prebacite
ovaj kvadratić.
Slika!
Ako želite dodati
sliku, samo
stisnete i prebacite
ovaj kvadratić.
Slideshow slika!
Ako želite dodati
slideshow slika, samo
stisnete i prebacite
ovaj kvadratić.
Obrazac za kontakt!
Ako želite da vam netko
komentira stranicu,
ili odgovari na neko
pitanje, postavite
ovaj obrazac.
Tekst!
Ako želite ubaciti bilo
kakav tekst, samo
stisnete ovaj kvadratić i
ubacite ga na stranicu.
Možete slobodno
kopirati tekst iz Worda.
Galerija slika!
Ako želite dodati galeriju
slika, samo stisnete i
prebacite ovaj kvadratić.
Karta!
Ako želite dodati kartu
do škole ili nekog mjesta
po vašem izboru,
prenesete ovaj kvadratić.
Obrazac za zadaću!
Ukoliko želite zadati
učenicima zadaću te da
vam pošalju riješeno na
mail, to možete
napraviti putem
ovog obrasca!
28
2. STRUCTURE (Struktura)
Ako želite razdijeliti,
odvojiti tekst od slike,
naslov od teksta ili
tekst od teksta, to
možete napraviti
tako da ubacite
divider.
Dugme!
Ako želite negdje
ubaciti dugme (koje
možete povezati
linkom da vas odvede
na drugu stranicu ili
dokument, prenesete
ovaj kvadratić.)
Ako želite razdijeliti ili
odvojiti tekst od
teksta, sliku od
teksta, a između
želite prazan prostor,
ubacite spacer.
Spada u pro verziju,
nije besplatno.
3. MEDIA
Spada u pro verziju,
nije besplatno.
Dokument!
Ako želite ubaciti neki
dokument, ubacujete
ga preko ovog
kvadratića!
Flash!
Ako želite ubaciti .swf
format, ubacujete ga
preko ovog
kvadratića!
Spada u pro verziju,
nije besplatno.
Youtube!
Preko ovog kvadratića
možete ubaciti video s
youtube-a!
File!
Preko ovog kvadratića,
možete staviti svoju
prezentaciju ili bilo
kakav dokument kojei se
može skinuti onda!
29
4. COMMERCE
Vezano za trgovinu i reklame, nama nije potrebno.
5. MORE (Više)
Ako želite odvojiti neki
tekst, dodati citat, to
možete s ovim
kvadratićem!
S ovim kvadratićem
možete postaviti ankete!
Ako želite dodati
poveznice na neke od
društvenih mreža, to
možete napraviti preko
Social Iconsa!
Ako želite dodati neki
upitnik, to možete preko
SURVEY-ja!
Ovaj kvadratić je za
dodavanje foruma!
30

Download Report