Tinklalapių kūrimas: pirmieji žingsniai

Žmonės, kurie domisi interneto naujovėmis, lankomais tinklalapiais, portalais, anksčiau ar vėliau iškelia sau klausimą — kaip sukurti tinklalapį? Klausimas iš pirmo živlgsnio atrodo visiškai „nekaltas“ ir gana paprastas: be išvedžijimų, nesuprantamų žodžių ar mokslinių terminų. Tačiau asmenims, kuriems šis klausimas užduodamas (čia, manau, nereikia nė minėti, kad žmogus, kurio klausiama, išmano tinklalapių kūrimo subtilybes), visiškai nesuprantama, kaip galima užduoti tokį naivų klausimą?

Stebitės, kodėl tai naivus klausimas? Jeigu taip, tada pamąstykite, iš ko susideda tinklalapio kūrimo procesas. Deja, nemanykite, kad solidų, gerą tinklalapį galima sukurti per kelias valandas ar dienas. Reikia turėti aiškią internetinės svetainės plėtros viziją, patirties, įgūdžių, daug laiko, kolegų (partnerių) ar draugų, kurie padėtų kurti tinklalapį, motyvacijos ir, be abejo, reikia turėti tikslą.

Išvardijau nemažai reikalavimų (raktažodžių), pagal kuriuos turėtumėte orientuotis kurdami tinklalapį, tačiau vien mano tuščiažodžiavimas nepadės jums sužinoti apie interneto svetainių kūrimo aspektus, todėl šiame straipsnyje aptarsiu kiekvieną sritį atskirai, pasidalinsiu savo patirtimi ir nukreipsiu jus teisinga linkme.

Technikos apvalintų kampų elementams kurti

Naršydami įvairiuose tinklalapiuose tikriausiai pastebėjote, kad vis dažniau yra naudojami užapvalinti kampai (angl. rounded corners): juos galima pamatyti tinklalapio komentarų blokuose, viršutinėse/apatinėse (header/footer), turinio (content) blokuose bei kitose struktūros dalyse.

Apvalintų kampų elementus sukurti galima ne vienu, o keletu būdų. Elementų kampams apvalinti kartais naudojama JavaScript kalba, tačiau rimčiausia priežastis, kodėl šis būdas nelabai populiarus, — išjungtas JavaScript palaikymas kai kurių lankytojų naršyklėje. Taip pat galime sukurti apvalintus elementus panaudoję pakopinių stilių (CSS) savybes ir paveikslėlius. Dar kitas būdas — kuris yra ateities sprendimas — CSS3. Tai nauja pakopinių stilių specifikacija, kuri dar nėra užbaigta, tačiau kai kurios naršyklės jau palaiko keletą naujosios specifikacijos savybių.

Taigi, panagrinėsime dažniausiai taikomus sprendimus elementų kampų apvalinimui: pavyzdžius, pliusus ir minusus; palyginsime aptariamus sprendimus.

Formų stilizavimas

Pripažinkite — naršydami įvairiuose tinklalapiuose dažnai matote formas. Ir taip pat dažnai jas užpildote, siunčiate kažkokius duomenis į serverį. Jeigu patys kuriate tinklalapius, turbūt kartais galvoje pradeda suktis įvairios mintys ir mąstote, kaip sukurti tokius pat gražius formų laukelius, mygtukus, kuriuose pamatote tinklalapiuose.

Iš tikrųjų, formų stilizavimas su CSS nėra ypatingai sudėtingas, tačiau būtina atkreipti dėmesį į keletą niuansų. Straipsnyje stengsiuosi kuo plačiau apžvelgti įvairius stilizavimo būdus ir subtilybes bei, žinoma, pateiksiu pavyzdžių.

HTML pradžiamokslis

HTML pradžiamokslis arba mano pirmasis HTML puslapis. Šiame straipsnyje susipažinsime su pagrindinėmis HTML žymėmis. 

Dizaino integravimas į WordPress turinio valdymo sistemą

Po pirmosios video pamokos pavadinimu „Tinklalapio (web) dizaino kūrimas“ paskelbimo sulaukėme nemažai klausimų, susijusių su dizaino integravimu į kokią nors turinio valdymo sistemą. Vieni norėjo sužinoti, kaip integruoti sukoduotą dizainą į „PHP-Fusion“ valdymo sistemą, kiti — į „Joomla“, dar kitiems rūpėjo sužinoti, kokiu būdu integruoti dizainą į „WordPress“ turinio valdymo sistemą. Žmonės klausė tiek e-grafika.lt diskusijų forumuose, tiek per skype, kol galiausiai suvokėme, kad reikia būtinai paruošti video pamoką, kurioje būtų parodyta, kaip pritaikyti dizainą „WordPress“ valdymo sistemai. Be to, Edmundas pirmojoje video pamokoje užsiminė, kad galbūt ateityje svetainės lankytojai išvys video pamoką būtent šia tema. Na, pagaliau turite tokią galimybę!

Šios video pamokos pradžioje bus pirmiausia aptarta „WordPress“ šablonų (temų) struktūra, vėliau parodyta, kaip tinkamai paruošti reikiamus šablono ir stiliaus failus. Po to, žinoma, pamatysite visą sukoduoto dizaino integravimo eigą: dizaino viršus, apačia, šoninė dalis (angl. sidebar), įrašų blokas. Taip pat sužinosite, kaip stilizuoti (redaguoti) standartinę komentarų bei paieškos sritį. Galiausiai video pamokos apibendrinime bus apibendrintas visas darbas bei nurodyta, ką būtų galima tobulinti savo integruotame dizaine ateityje.

Šioje video pamokoje naudojamas dizainas, kuris buvo sukurtas pirmojoje video pamokoje. Visus dizaino failus galite parsisiųsti iš čia: http://www.e-grafika.lt/failai/dizainas.rar (spauskite dešinįjį pelės mygtuką ir pasirinkite „Save Link As...“ (Firefox), „Download Linked File As...“ (Safari) arba „Save Target As...“ (Internet Explorer)).

Dizainą, paruoštą „WordPress“ valdymo sistemai (kurtą šioje pamokoje), galite parsisiųsti iš čia: http://www.e-grafika.lt/failai/wordpress_dizainas.rar.

„WordPress“ dokumentacija: codex.wordpress.org.

Diskusijos apie video pamoką forumuose:http://www.e-grafika.lt/forumai/tema/23.

Naujienų nėra.

Freelanceswitch — viskas laisvai samdomiems darbuotojams

Freelanceswitch startavo 2007 metais ir per keletą savaičių surinko tūkstančius RSS prenumeratorių. Šiuo metu svetainę aktyviai stebi ir yra užsiprenumeravę jos turinį apie 26 tūkstančiai žmonių.

Freelanceswitch — tai didelis informacijos šaltinis laisvai samdomiems darbuotojams (angl. freelancer). Svetainėje gausu įvairių patarimų, resursų, netgi darbų pasiūlymų. Freelanceswitch padėjo daugeliui žmonių ir kas žino — galbūt padės ir jums?

COLOURlovers — spalvos, spalvos, spalvos!

COLOURlovers™ — tai vieta, kur aktyviai seka spalvų tendencijas. COLOURlovers suteikia žmonėms, naudojantiems spalvų derinius (nesvarbu, ar tai reklaminės antraštės, web dizainas, spauda), galimybę išvysti visapusišką spalvų pasaulį, lyginti spalvų paletes, skelbti naujienas ir komentarus bei skaityti straipsnius, susijusius su spalvų deriniais ir tendencijomis.

BrowserShots — peržvelk savo tinklalapį įvairiose naršyklėse

Turbūt žinote, kad kartais svetainės išvaizda skirtingose naršyklėse nėra identiška, nors naudojamas CSS kodas nesiskiria. Peržvelgti svetainę visose naršyklėse yra problematikška, todėl jūsų išsigelbėjimas — browsershots.org.

Archyvo įrašų nėra.