Mala škola web dizajna za totalne početnike – lekcija 4 – drugi dio (CSS)

Mala škola web dizajna za totalne početnike – lekcija 4 – drugi dio (CSS)

Ovo je drugi dio video tutoriala iz male škole web dizajna. U ovom djelu obrađujemo CSS i završavamo stranicu koju smo počeli raditi u prvom dijelu ovoga tutoriala. Ovaj video traje skoro 2 sata. Pogledajte kako će izgledati stranica koju ćete napraviti pomoću ovog tutoriala.

Kliknite na link ispod “Pročitajte ostatak ovog unosa” radi više informacija i materijala za download, koji će vam trebati da uspješno završite ovu lekciju.


Link na orginalnu stranicu sa koje možete skinuti .AVI

Linkovi i download potrebnih materijala

Ovdje pogledajte kako izgleda web stranica koju ćemo napraviti

Ovdje skinite materijale i gotovu web stranicu u .zip formatu.

Za sva pitanja koristite sustav komentiranja ispod.

Povezani članci

  • Pingback: ukusno.com

  • Stipe

    Ja sam pocetnik u web designu, mada sam dosta naucio u ova dva video tutorijala, svaka cast na trudu. Volio bih kad bi vi mogli napravit jedan video tutorijal KAKO NAPRAVIT WEB STRANICU U DREAMWEAVERU CS3. Unaprijed hvala.

  • Ivan

    Pozdrav Stipe,

    cijeli smisao ovih tutoriala je da bi ljudi naučili praviti web stranice bez Dreamweavera. Jednostavno, najbolji način izrade web stranica je ručno. Tako da ću te morat razočarat, nejvjerovatnije nikad neću napraviti takav tutorial.

  • http://Veoh.com-? Dach

    S obzirom da je Croatia blokirana na Veoh.com -u kako drugačije mogu doći do video tutoriala?
    Sve što sam u ovim uputama našao od velike je pomoći i koristi.
    Hvala!

  • Pingback: Vraćeni video tutoriali | Xtorials

  • Danijela

    Hi,
    Veoma interesantne lekcije, hvala za uloženi trud. Bile su mi od velike pomoći. Sve pohvale! Nadam se da će ih biti i dalje. Nešto zanimljivo vidjeh na jednom sajtu, a to je trag koji ostaje pomjeranjem pokazivača miša-recimo u vidu *-ica. Na koji način se to može uraditi?Unaprijed hvala.

  • Ivan

    Pozdrav Danijela,

    hvala na lijepim komentarima. Što se tiče traga koji ostaje iza pokazivača miša to zbilja neznam. Takvi efekti mi nikad nisu bili dovoljno zanimljivi da bi ih išao proučavati. Sorry.

    Pozdrav

  • http://jošnijegotova damir

    Pozdrav majstore,

    Hvala na nečemu vrlo interesntnom i jednostavnim rijećima objašnjenom.Sve prikazano je od velike pomoći,pogotovo pošto sam totalni početnik,a imam veliku želju da napravim sam svoj website.

    Imam pitanje: Saznaj više – kad kliknemo na njega,kako da se pokaze tekst koji treba biti ispod? Da li nešto slično kao kad klikneš na kontakt i dobiješ tablicu ?!

    Rekao si da sve što primjetimo da te obavjestimo : kad objašnjavaš i upisuješ podatke na pojedinim djelovima na videu se to ne vidi jer ti upisivanje ide ispod vidokruga .

    Pozdrav

  • mate

    da li bi mi mogli dati link za skinti ovaj video

  • Ivan

    @mate

    Ispod svakog videa imaš ovo napisano: “Link na orginalnu stranicu sa koje možete skinuti .AVI” e pa klikni na taj link, registriraj se na vimeo.com i skini video.

    Pozdrav

  • zeljko

    stari ima problema sa ovim reset.css(Valjda)@import url(“reset.css”);i nisu mi zelena slova od reset i nece da mi s pojavljiva zelena boja kod background:#596856 url(images/bg-body.jpg) repeat=x top left;}

  • Ivan

    @Zeljko,

    pa skini si gotove datoteke pa onda kopiraj kod. Ovaj tvoj gornji kod nevalja. @import url(“reset.css”) će ti biti zeleno ako koristiš Dreamweaver isto tako, ne koristš navodnike na “reset.css” nego neke druge znakove koji su slični navodnicima. U kodu background:#596856 url(images/bg-body.jpg) repeat=x top left;} repeat-x se piše ovako a ne repeat=x.

    Pozdrav

  • Micho Slavonski Brod

    Ivane, ovo je zaista genijalno sto si napravio. Zaista ti hvala puno. Imam jedan problem, ne mogu otvoriti drugi video od lekcije 4

  • Ivan

    Pozdrav Micho,

    zaista neznam u čem je problem. Kolko ja vidim sve radi ok. Pokušaj sada.

    Pozdrav

  • stelly

    hei..
    presuper je objašnjeno sve i sve sam razumjela samo me jedno muči. Rekao si da u Mozili Firefox moramo imati instalirano za mjerač stranice ( u px-ima) . Ne razumijem kako da to instaliram / podesim !? hvala
    stelly

  • Ivan

    Bok Stelly,

    nemoraš imati instaliran mjerač stranice. To je samo kao pomoćni alat, ništa previše bitno za izradu stranica. Ali ako ga baš želiš instalirati evo ti link: https://addons.mozilla.org/en-US/firefox/addon/539/ , odi na tu stranicu i samo klikni gumb “Add to Firefox” i to ti je to.

    Pozdrav

  • Valentino

    pozdrav !!

    evo sada je 07:10am, cilu vecer sam (od jucer popodne) ucio i radio slusajuci tutoriale od “Lynda XHTML and HTML”, pa “Total Training CSS And XHTML”, te YOUTube-a… gdje sam u ranim satima puka ko kokica od silnih informacija.

    Srecom isa sam proguglat za knjigom (hrvatskom) usvezi iste teme pa sam naisa (hvala ti boze) na tvoje tutoriale :)
    ___________________________________________________________________

    uglavnom pauzira sam ovi video da ti mogu odgovorit jer cu posli zaboravit :

    tjekom 1h:10min videa pitao si zasto u IE-u postoji rupa medu divovima od par pixela a dok u fox-u sve ide smoothly??
    =)

    uglavno tjekom citave veceri znam da sam procitao/cuja o bugu u IE na kodu FLOAT!!!
    Spominje se i njegovo ime … “3px jog”
    preporuca se da na izmjeni MARGIN-RIGHT: -3px; k tvom LEFT DIV-u
    neznam sto ce bit s ostalim browserima ali funkcionira !
    ___________________________________________________________________

    prijatelju neznas kako mi je bilo milina slusat tvoj hrvatski glas
    nakon cijelovecernjeg izlaganja HTML-a na engleskom

    aj idem pleyat nastavak tutoriala

    Viele Grüße

  • Keklja

    Pozz
    Tutorijali su ti ludilo no mene muče jedna stvar. Radio sam sve kao i ti i instalirao sam IE Tab. U IE mi stranica izgleda puno bolje (ne savršeno) a u Mozzili to nije nalik ničemu. Uopće nije kako bi trebalo da bude. Evo linkovi na slike pa baci pogled. IE-http://img443.imageshack.us/img443/8096/18252379.jpg
    MOZILLA-http://img811.imageshack.us/img811/1861/mozilla.jpg

  • Ivan

    Pozdrav Keklja,

    trebao bih vidjet kod da vidim što točno ne valja. Ovdje možeš skinuti već gotove datoteke za tu lekciju, pa si provjeri dali ti i tu prikaz u Mozzili ne štima. Pa si onda usporedi taj kod i tvoj kod.

    Pozdrav

  • Keklja

    sve popravljeno osim kad koristim ul i li naredbe. Dobivam one točke sa strane a u reset.css su mi postavke za ul stavljene na none pa me zanima kako da to maknem

  • Keklja

    Zbog čega mi je font drugačiji u kućici “Prednosti” od ostatka a koristio sam doslovno copy-paste kada sam uređivao tekst??
    HTTP://img137.imageshack.us/img137/6209/limeta.jpg

  • Ivan

    Hvala na informaciji Valentino. Sorry što ti prije nisam odobrio komentar, ali nažalost otišao mi je u spam, izgleda da se Akismet malo zbunio :) . Uglavnom, hvala na pohvalama i drago mi je da ti se sviđaju tutoriali.

    Uživaj

  • Pingback: Xtorials.com | Vraćeni video tutoriali

  • Quattro

    Svaka cast, prosto sam odusevljem. Samo tako nastavi uz tebe smo.

    Pozdrav!!!

  • Quattro

    Da li mozes da napises u kom tutorijalu si objasno kako se previ vodoravni menu.

    Hvala.