Volite web dizajn?

Zašto ne podijelite svoje znanje s cijelim svijetom? Svatko može pisati za Kroativ i na taj način se promovirati.

Pomoć potrebitima

http://www.hck.hr

Hrvatski Crveni križ

u službi humanosti od 1878.

Tutorial za uređivanje besplatne web stranice

Autor/ica Mankis studio

Akademska slikarica potkovana sa znanjem web programskih jezika kao što su Actionscript 2 i 3, PHP, MySql, CSS, JavaScript i dr. Obožava raditi inovativne, originalne i umjetničke projekte. Vlasnica je Mankis web dizajn studia.

Oglas

Najbolje stvari su besplatne…

Besplatna Flash web stranica Mankis studia

Besplatna Flash web stranica Mankis studia

pa tako i besplatni web je bolji od jeftinog. Zašto to tvrdimo? Kada imamo želju testirati nove tehnologije ili nova znanja koja smo usvojili često to radimo sa velikim guštom i kreativnošću na projektu gdje nema naručitelja koji bi ograničavao naše ideje i podcjenjivao naš rad nudeći za njega sitnu lovu.

Ovaj naš mali besplatni web je bio jedna proba kako flint particle system funkcionira kao sastavni dio web stranice. Sada nam je žao da propadne jedna tako lijepa web stranica i zbog toga je želimo darovati.

Dar uključuje:

swf, slike u jpg i png formatu, tekstove stranice u xml formatu, html, css, swfobject.js i zvuk.mp3

Znači bez problema možete promijeniti zvuk, logo, pozadinu, nazive u meniju, tekstove sa slikama na stranici i novosti.

Evo i našeg malog tutorijala kako to učiniti:

1. Zvuk na stranici

To je najlakše, uzmete svoj zvuk (mora biti mp3), preimenujete ga u zvuk.mp3 i prekopirate preko našeg.
Mi smo naš zvuk skinuli sa stranice www.flashkit.com pa i tu možete potražiti među besplatnim zvukovima onaj koji se vama više sviđa.

2. Logo na stranici


Slike se nalaze u folderu img
. Uzmite svoj logo (mora biti png, po mogućnosti transparentni) i nazovite ga logo-firme.png te prekopirajte preko našeg.

Logo možete kreirati i uz pomoć Adobe Photoshopa. Kliknete pod File -> New i upišete pod Width 201 pixels i pod Height 101 pixels. Dva puta brzo kliknite na Layer koji se zove Background i kliknite OK kako bi ste ga otključali. Sada možete izbrisati bijelu površinu kako bi imali transparentnu pozadinu. Napišite svoj naziv i snimite ga sa “Save for web” kao PNG-24. Ne zaboravite označiti kvačicom kućicu kraj Transparency!

3. Pozadina stranice

Kreirajte svoju pozadinu i snimite je u folder img. Pozadinu također možete kreirati u Adobe Photoshop-u samo nije potrebno otključavati background i brisati pozadinu jer ovdje ne trebamo transparenciju.

Naziv pozadine, dimenzije, kao i ekstenzija (jpg, gif, png) mogu biti različiti od postojeće. Samo u tom slučaju treba otvoriti fajl stil.css (ako nemate Dreamweaver ili nešto slično možete i u Notepadu) i pod body gdje piše background:url(img/mustrica-gordana.jpg) dodati novu pozadinu. Znači umjesto mustrica-gordana.jpg upišete vaš-naziv.jpg.

4. Izbornik na stranici

Ako želite promijeniti nazive u izborniku (početna, o nama, portfolio, novosti, kontakt) u folderu xml naći ćete menu.xml fajl. Možete ga otvoriti i u Notepadu ako nemate ništa drugo. Tu samo zamijenite nazive. Kada snimate datoteku u Notepadu pripazite da je Encoding namješten na UTF-8 zbog hrvatskih znakova. Molim vas neka nazivi budu kratki jer nije predviđeno za dugačke nazive.

5. Tekstovi na stranici

Tekstovi se nalaze u xml fajlovima: novosti.xml, menu1txt.xml, menu2txt.xml, menu3txt.xml, menu4txt.xml, menu5txt.xml u folderu xml. Također ako nemate npr. Dreamweaver možete ih otvoriti u Notepadu.

Kada ih otvorite vidjet ćete kako smo mi unijeli tekst, linkove i slike (slike smo preuzeli sa stock exchange stranice www.sxc.hu) te možete primjenjivati isti princip. Netko tko ima veće znanje HTML-a može se još dodatno poigrati sa bold i italic tagom, listom, bojom i veličinom fonta. Npr. ako želite unutar teksta dodati riječ koja je u plavoj boji veličine 16px onda to napravite ovako:

<font size="16px" color="#66FFCC">vaš tekst</font>

6. Optimizacija stranice

Iako je Google počeo čitati Flash stranice još uvijek je dobro stranicu dodatno optimizirati uz pomoć HTML-a u pozadini. To možete tako da otvorite index.html u Notepadu, Dreamweaveru ili nekom svom programu za kreiranje web stranica.

Unutar title taga unesite svoj naziv i ključne riječi

<title>Ime firme :: Usluga 1 | ključna riječ 1 </title>.

Unutar content div taga unesite svoj naziv i tekstove. Link na autora, Mankis studio, mora ostati.

<div  id="content" >	  
	  <h1>IME FIRME</h1>
              <p>Vaš tekst, slike i linkovi</p>
 
	  <a href="http://www.mankis.hr" target="_blank" title="web stranicu izradio">Mankis web dizajn studio</a>
</div>

Ova besplatna web stranica koju je izradio Mankis web dizajn studio dana je na korištenje pod licencom Creative Commons Attribution-Share Alike 3.0 Croatia License.

Mankis studio ne preuzima odgovornost za eventualnu štetu nastalu korištenjem ovog djela te se ne smatra dužnim vršiti ažuriranje stranice ili popravke mogućih bugova.

Preuzmite besplatnu web stranicu

Preuzmite besplatnu web stranicu - Besplatna Flash web stranica Mankis dizajn studia

Pogledajte kako izgleda online

Označeno s: , ,
Za ovaj članak možete glasati na CroPortalu i tako pomoći u njegovoj promociji. Ako članak još nije objavljen vi možete biti prvi!
Stavovi i mišljenja izrečena u ovome članku i/ili komentarima odnose se samo na autora/icu članka i/ili komentara, a ne i cijele Kroativ mreže. Zabranjeno je neovlašteno prenošenje članaka u cjelosti bez prethodnog dogovora ili bez istaknutog povratnog linka na www.kroativ.net stranicu te imena autora.
Oglas

3 komentara

  • kolateral kaže:

    Ovo što ste učinili je pravo “remek-djelo” unutar segmenta dobrotvornog rada!
    Hvala Vam na Daru i želim vam svaki uspjeh u daljem radu.

  • Dragan kaže:

    Lep projekat. Sve pohvale.
    Ja sam nov u IT-ju uopste, icim punom parom, naravno web dizajn mi je prioritet.
    Tako da kad porestem moci cu i ja da se pohvalim ovakvim projektom 🙂
    Hvala na poklonu, puno uspeha u daljem razvoju i usavrsavanju.

  • Bubica kaže:

    Jako jednostavno i precizno objasnjeno. Jednostavno super!

Trackbacks & Pingbacks

Ostavite komentar

Autori s više od 10 komentara nemaju tag nofollow na svojim linkovima! Zabranjeno je vrijeđanje, omalovažavanje ili na bilo koji drugi način ometanje normalnog toka komentara. Također je zabranjeno oglašavanje u komentarima i sve druge vrste spam-a.

(*) polja su obavezna

XHTML: Možete koristiti: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">