Embed Size (px)
Citation preview
1
Informatika
VJEŽBA 2
HTML i WordPress Kreiranje web sjedišta
Što treba napraviti u vježbi?
Studenti vježbu trebaju napraviti na satu (uz pomoć asistenta ili demonstratora). Prije izrade vježbe potrebno je pročitati Upute za izradu web sjedišta u alatu WordPress dostupne na stranicama kolegija Informatika, koje obrađuju upotrebu alata WordPress. Svaki student treba napraviti web sjedište zamišljene tvrtke koja se bavi proizvodnjom i prodajom namještaja pod nazivom svoga imena i prezimena, npr. http://imeprezime.wordpress.com. Za izradu web sjedišta tvrtke koristi se CMS alat Wordpress i online besplatni hosting tvrtke Wordpress koji je raspoloživ na adresi http://www.wordpress.com. Web sjedište će nakon izrade biti odmah vidljivo online.
Cilj vježbe: izraditi jednostavno web sjedište koje će omogućiti tvrtki predstavljanje na webu, te komunikaciju s klijentima. Student će steći vještinu rukovanja alatom za upravljanje web sadržajem (CMS alatom), te rukovanja alatima za komunikaciju s klijentima putem web mjesta.
Po završenoj vježbi student treba pozvati asistenta ili demonstratora za pregled vježbe
Upute za izradu vježbe:
Prvi dio – HTML
1. Pomoću sistemske mape My Computer na disku D: otvorite mapu Informatika. Ukoliko ne postoji mapa Informatika, kreirajte je. U toj mapi kreirajte novu mapu pod nazivom M i broj Vašeg indeksa (npr. M12345) u koju ćete pohraniti sve datoteke vezane za ovu vježbu.
2. Pomoću gumba Start, All Programs, u programskoj grupi programskoj grupi Accessories pokrenite program-editor NotePad za pisanje jednostavnog teksta. Koristeći upute za HTML naredbe (Mesarić, Zekić-Sušac, Dukić, Alati za uredsko poslovanje, 2010.), napravite jednostavnu web stranicu upisom ovih osnovnih HTML naredbi (tagova) kojima ćete odrediti glavne dijelove stranice: početak i završetak (<html>...</html>), zaglavlje (<head>...</head>, tekst u naslovnoj traci prozora (<title>...</title>), tijelo (<body>...</body>):
Slika 1 Početak izrade web stranice putem html tagova
2
3. Pohranite datoteku pod nazivom „proba.html“ u svoju mapu na disku. Minimizirajte Notepad, s pomoću MyComputer mape pronađite u svojoj mapi datoteku „proba.html“ i dvaput kliknite na nju kako bi ste je pogledali s pomoću preglednika MS Internet Explorer (ili Mozilla Firefox).
4. Stranica još nije uređena, sav tekst je u jednom retku, jer nisu unesene naredbe za prijelom reda. Uočite u naslovnoj traci prozora naslov koji smo upisali pod tagom <title>.
5. Vratite se u Notepad, u datoteku proba.html. Dodajte html tagove koji će urediti stranicu (<br> za prijelom retka, <font...> naredbu za izbor vrste i veličine slova, <p> za novi odjeljak, te <a href...>naredbu za umetanje poveznice (linka):
6. Pohranite datoteku u NotePad-u, ponovo je otvorite u pregledniku (IE ili Mozilla), te
pogledajte kako sada izgleda. Trebali biste dobili izgled sličan ovome:
Slika 3 Izgled probne web stranice kreirane s pomoću NotePad editora
6. Izađite iz preglednika, te iz NotePad programa. Ostale HTML naredbe možete pogledati u Knjizi.
Slika 2 Uređivanje izgleda stranice s pomoću html tagova
3
Drugi dio – Izrada web sjedišta putem alata WordPress
Potrebno je izraditi jednostavno web sjedište koje se bavi proizvodnjom i prodajom namještaja putem alata Wordpress. Web sjedište mora sadržavati najmanje 5 stranica (Izbornika), nekoliko podstranica. Sadržaj na stranici mora biti smislen, sadržavati poveznice, multimedijske sadržaje, karte, komunikaciju s klijentima putem kontakt formi i društvenih mreža te widgete. Web sjedište izradit će se kroz nekoliko koraka, opisanih u daljem tekstu Vježbe 2.
Prije izrade web sjedišta potrebno se spojiti na Google tražilicu te pronaći nekoliko slika vezanih uz namještaj, spremiti ih u mapu Informatika (desni klik na željenu sliku, odabrati Spremi sliku kao te pohraniti je u kreiranu mapu Informatika).
1. Spojiti se na stranicu http://www.wordpress.com i otvoriti svoj vlastiti korisnički račun na Wordpress-u upisom e-mail adrese i lozinke. Za adresu bloga upisati svoje ime i prezime (spojeno npr. ivanivic).
2. Nakon registracije ulazi se u administratorsko sučelje kroz čiji će se Izbornik odrediti struktura i sadržaj web sjedišta
2.1. Odabir predloška (teme) web sjedišta
Kliknuti na opciju Appearance u administratorskom sučelju Odabrati opciju Themes, otvorit će se sučlje s velikim brojem raspoloživih tema
(odabirati teme koje su označene s oznakom Activate, teme koje su označene sa oznakom Purchase se naplaćuju)
Slika 4 Odabir predloška za web sjedište
U dobivenom sučelju raspoloživ je velik broj predložaka (tema)(odabirati teme koje su označene s oznakom Activate, teme koje su označene sa oznakom Purchase se naplaćuju) Na odabranom predlošku (temi) kliknuti na opciju Activate
4
2.2. Dodavanje stranica, izbornika i podizbornika na web sjedište Osim početne stranice koja je u predlošcima već postavljena potrebno je kreirati stranice O nama, Asortiman, Galerija, Kontakt koje ujedno predstavljaju Izbornik web sjedišta, te podstranice stranici Asortiman - Dnevni boravci, Blagovaonice (ili nazvati stranice i podstranice po vlastitom izboru) stranici Kontakt – podstranicu Gdje smo koje predstavljaju podizbornike. Stranicama se upravlja pomoću opcije Pages koja se nalazi na administratorskom sučelju Wordpress-a. Dodavanje nove stranice u Izbornik web sjedišta
Kliknuti na opciju Pages - Add New kako bi se dodala nova stranica O nama na web sjedište
Naziv stranice Objava stranice
Unos sadržaja Postavke hijerarhije i pozicije stranice
Upisati naziv stranice, sadržaj i odrediti hijerarhiju i poziciju stranice Na isti način kreirati preostale stranice.
Dodavanje podstranica, podizbornika
Kliknuti na opciju Pages - Add New kako bi se dodala podstranica (podizbornik) Dnevni Boravak stranici (izborniku) Asortiman na web sjedištu.
Slika 5 Dodavanje nove stranice na web sjedište
Slika 6 Dodavanje nove podstanica na web sjedište
5
U podstranicama od opcijom Parent odabrati će se stranica kojoj se želi dodati podstranica (podizbornik) u ovom primjeru stranica (izbornik) Asortiman.
Na isti način kreirati podstranicu (podizbornik) Gdje smo stranici(izborniku) Kontakt.
2.3. Objava postova (vijesti) Post predstavlja osnovni sadržaj bloga i postavlja se na početnu stranicu (Home page). Postovima(vijestima) se upravlja kroz administratorsko sučelje putem opcije Posts. Dodavanje novog posta (vijesti)
Kliknuti na opciju Posts - Add New
Naslov posta
Sadržaj posta Objava posta
Upisati naziv i sadržaj vijesti Nakon što su se unijeli svi željeni podaci kliknuti na gumb Publish Vijest je objavljena na početnoj stranici Na isti način dodati još 2 posta (vijesti)
2.4. Umetanje slika i poveznica (linkova) na druge stranice Dodavanje galerije slika Slike se mogu dodati u obliku galerije ili pojedinačno unutar neke stranice ili posta.
Na stranicu Galerija potrebno je dodati nekoliko slika proizvoda poduzeća Odabrati Pages – All Pages , kliknuti na stranicu Galerija U sučelju stranice Galerija, kliknuti na gumb Add Media Odabrati opciju Create Gallery, te kliknuti na opciju Upload files Učitati slike koje su pohranjene u mapi Informatika Klikom miša označiti slike koje se žele prikazati u galeriji Kliknuti na gumb Create a new gallery U otvorenom sučelje pod opcijem Type odabrati način prikaza galerije, za vježbu
odabrati opciju Slideshow.
Slika 7 Dodavanje novog posta (vijesti) na web sjedište
6
Slika 8 Dodavanje galerije slika na web sjedište
Kliknuti na gumb Insert gallery Nakon što je galerija učitana na stranicu, kliknuti na gumb Update.
Dodavanje slika unutar posta (vijesti)
Kliknuti na opciju Posts – All Posts Odabrati jedan od ranije napravljenih postova U sučelju posta kliknuti gumb Add Media Kliknuti na Upload Files kako bi se odabrala slika ili slike koje se žele učitati u post na
web sjedištu Nakon unosa slika potrebno je klikom miša označiti jednu sliku koju se želi unijeti u post.
Odabirom slike s desne strane pojavljuje se sučelje u koje se upisuje naziv slike, opis, određuje da li će slika biti postavljena centrirano, lijevo ili desno, te veličina slike
Kliknuti na gumb Insert into page kako bi se slika učitala u post. Nakon što je odabrana slika učitana u post, kliknuti na gumb Update.
Dodavanje poveznica Poveznica ili link označava vezu između dvije web stranice. Poveznicama se upravlja kroz administratorsko sučelje putem opcije Links. Na ranije kreirani post potrebno je dodati poveznicu putem kojom se povezuje na vanjski izvor.
Kliknuti na opciju Posts – All Posts Odabrati jedan od ranije napravljenih postova Označiti dio teksta unutar posta na koji se želi dodati poveznica
Slika 9 Dodavanje vanjske poveznice unutar posta
7
U izborniku posta kliknuti na gumb koji postaje vidljiv tek nakon što je označen dio teksta na koji se želi dodati poveznica.
U dobivenom prozoru kliknuti u tekst okvir URL i upisati web adresu stranice na koju se želi povezati, npr. http://www.efos.hr
Slika 10 Okvir za unos vanjske poveznice
Kliknuti na gumb Add Link Nakon povratka u sučelje posta kliknuti na gumb Update kako bi se pohranila promjenu.
2.5. Dodavanje Google maps-a
Na web sjedište potrebno je dodati poveznicu u obliku karte na stranicu Gdje smo.
Navigirati na stranicu http://maps.google.com/ U polje iznad karte unijeti željenu lokaciju Nakon odabira tražene lokaciju kliknuti na gumb Polje pod nazivom Paste HTML to embed in website (Zalijepite HTML da biste
ugradili u web lokaciju) označiti mišem i odabrati opciju Copy (Kopiraj) Vratiti se na Wordpress stranicu web sjedišta na koju se želi postaviti karta, stranicu
nazvanu Gdje smo U tekst okvir kliknuti desnom tipkom miša i odabrati opciju Paste (Zalijepi) Označiti mišem prethodno kopirani link te u izborniku stranice Gdje smo kliknuti na
2. Kliknuti na poveznicu 1. Označiti link
Slika 11 Dodavanje Google karte na web sjedište
8
Klikom na otvorit će se okvir
Slika 12 Okvir za unos vanjske poveznice
Kliknuti u polje URL desnim klikom miša i odabrati Paste (Zalijepi )kako bi kopirali link koji je preuzet (kopiran) sa Google maps-a
Kliknuti na gumb Add Link Nakon povratka na stranicu kliknuti na gumb Update
2.6. Dodavanje formi na web sjedište Na stranicu Kontakt potrebno je dodati formu (obrazac) pomoću kojeg korisnik stranice može postaviti upit ili ostaviti komentar.
Klikom na Pages- All Pages otvoriti stranicu Kontakt U izborniku stranice kliknuti na gumb Add a custom form
Slika 13 Dodavanje kontakt forme na web sjedište
Prikazat će se forma gotova forma koju je moguće je mijenjati na način da se označi željeno polje lijevim klikom miša te odabrati opciju Edit , te dodavati nova polja u obrascu klikom na Add a new field
Forma mora sadržavati polja – Ime, E-mail, Upit Klikom na Add this form to my post forma će se unijeti na stranicu Nakon povratka na stranicu Kontakt kliknuti na gumb Update
9
2.7. Dodavanje ankete na web sjedište Anketa se može dodati kroz administratorsko sučelje putem opcije Feedbacks .
Kliknuti na opciju Polls - Add New Klikom na gumb otvorit će se sljedeće sučelje Upisati pitanje ankete po vlastitom izboru, odgovore, te odabrati stil ankete
Pitanje ankete Upis odgovora Spremanje ankete Odabir stila ankete
Kliknuti na gumb Save Polls
2.8. Dodavanje widgeta na web sjedište Widgeti su nezavisni sadržajni blokovi koji se mogu postaviti u područja na stranici koja podržavaju widget dodatke. Na web sjedište poduzeća potrebno je postaviti anketu putem Text widgeta i jedan widget po izboru.
Kliknuti na opciju Appearance koja se nalazi u administratorskom sučelju Odabrati opciju Widget Izabrati dva widget-a koja se nalaze na srednjem dijelu stranice, označiti klikom miša i povlačiti do okvira Slidebar koji se nalazi najčešće na desnoj strani ili u podnožju stranice
Slika 14 Dodavanje widgeta na web sjedište
10
Dodavanje ankete putem Text widgeta
Kliknuti na opciju Feedback – Polls Označiti ranije kreiranu anketu i kliknuti na opciju Embed& Link (opcija se nalazi ispod
naziva ankete) U dobivenom sučelju označiti tekst koji se nalazi u okviru WordPress Shortcode, desni
klik miša i odabrati opciju Kopiraj (Copy) ili CTRL+C Kliknuti na opciju Appearance koja se nalazi u administratorskom sučelju Odabrati opciju Widget Izabrati widget pod nazivom Text koji se nalazi na srednjem dijelu stranice Prevući mišem widget Text do bočne trake (Slidebar) U dobiveno sučelje upisati naziv , te u tekst okvir kliknuti desnim klikom miša i odabrati
opciju Zalijepi(Paste). Kliknuti na gumb Save
Slika 15 Dodavanje ankete u putem Text widgeta
3. Pregled izgleda web sjedišta Nakon odabira teme, dodavanje stranica, widgeta, slika, poveznica i svih ostalih opcija izgled web sjedišta u svakom trenutku može se pregledati klikom na naziv web sjedišta koji se nalazi u gornjem lijevom uglu administratorskog sučelja.
Slika 16 Administratorsko sučelje Wordpress-a
11
Slika 17 Primjer izgleda polazne stranice web sjedišta nakon završene vježbe
4. Odjava iz alata WordPress Prije zatvaranja web preglednika i svakog završetka rada u Wordpress-u potrebno se odjaviti iz administratorskog sučelja.
Kliknuti na korisničko ime koje se nalazi u gornjem desnom uglu sučelja
Kliknuti na opciju Log out
Po završenoj vježbi student treba pozvati asistenta ili demonstratora za pregled vježbe.
