Tutorial za uređivanje besplatne web stranice

Najbolje stvari su besplatne…

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

[download id=”1″]

Pogledajte kako izgleda online