EditoriEditor ili uređivač je program koji se koristi za unošenje opisnog jezika kao što su HTML i CSS. Jedan od najpopularnijih editor programa ne samo za WEB dizajn već i za programiranje i razvoj web

aplikacija, jeste Notepad++.  N++ je besplatan softver otvorenog koda sa brojnim mogućnostima. Neke od mogućnosti koje sa sobom donosi ova aplikacija, su:

Označivanje sintakse

Tabovi (možete uređivati više fajlova prelaskom sa jednog tab prozora na drugi)

Automatsko pisanje koda (kada započnete pisanje nekog html elementa, program će vam predložiti već ispisani kod )

Program je dostupan na više jezika

N++ je odličan program pre svega jer je besplatan, takođe sam kod je lepo prikazan i grupisan tako da se lako možete snaći i u dužem kodu.

Programi za grafikuGrafika u web dizajnu je jedan od najvažnijih elemenata. Programa ove namene postoji mnogo, mi ćemo ovde govoriti o jednom besplatnom programu ( GIMP ) i o programu koji se plaća ali i koji se

najviše koristi i koji je verovatno svima poznat (Photoshop).

Photoshop je proizvod firme Adobe koji nije besplatan. Mogućnosti ovog softvera su ogromne pa je tako primena ovog softvera u svetu web dizajna ogromna. Od logotip-a do celog dizajna sajta ,

sve se može postići ovim softverom.

GIMP za razliku od Photoshop-a je besplatan softver otvorenog koda.  Ovaj program ne nudi ništa skromnije mogućnosti od Photoshopa naprotiv ima dosta dobrih stvari koje pruža ova besplatna

alternativa. Od retuširanja , do izrade logotip-a pa sve do čitanje PSD fajlova – ovaj program je odličan za početnike i oni koji planiraju da počnu sa dizajnom.

BrauzeriI na kraju ali ne i najmanje važni jesu brauzeri. Brauzeri se koriste  za pregled koda, izgleda i testiranje samog dizajna i funkcionalnosti web sajta. Odabir brauzera najviše zavisi od ličnog odabira.

Brauzer koji ja često koristim jeste dobro poznati Firefox. Ovaj brauzer sa sobom donosi veliki broj mogućnosti za proveru same stranice, kao što su debugger ili inspect element funkcija koja vam

omogućuje da detaljno , lako i brzo pogledate kod bilo kog elementa na stranici. Pored mogućnosti koje su ugrađene u sam brauzer, moguće je instalirati i dodatke (ovo je moguće i na ostalim

brauzerima) koji omogućuju dizajneru da lako pronađe greške na stranici i ispravi ih.

Pored Firefox-a tu su i Chrome, Safari, Opera…

Ako tek počinjete sa dizajnom preporučujem vam da odaberete za početak besplatan softver. Na internetu možete naći veliki broj tutorijala koji su odlično napisani. Svaki softver nudi različite

mogućnosti, pa tako kasnije možete isprobati svaki softver i odabrati onaj koji najviše odgovara vašim potrebama i u kojem se najbolje snalazite.

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 STRANICITo 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 STRANICEKreirajte 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 STRANICIAko ž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 STRANICITekstovi 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 STRANICEIako 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.