Po uspešni izdelavi izgleda naše Wordpress srajčke, se lotimo lažjega programerskega dela. Stran je potrebno razrezati ter sestaviti v strukturo, ki nam omogoča dinamično dodajanje vsebine.
Potrebno znanje: (x)HTML, CSS. ÄŒe niste programerska duša in omenjenih kratic ne poznate, se lahko poslužite programov, ki vam olajšajo sestavljanje strukture:
Windows: Macromedia Dreamweaver, Microsoft Frontpage, Expression Web, CoffeeCup, ..
Mac Os X: iWeb, Coda, ..
Razrez oblike mora ustrezati stopnji dinamičnosti strani. V Photoshop-u ali drugemu ustreznemu programu dizajn razrežemo v manjše slike (jpg, png, gif), katere bomo uporabili ob sestavljanju strani, ki jo bomo kasneje povezali z Wordpress CMSjem.
Za začetek ustvarimo mape in datoteke, s katerimi bomo delali. Uporabljam kar “mc“, naj vas izgled ne prestraši.
Razrez je bil po nekaj minutnem “programiranju” narejen ((Koda ni HighTech, a za primer bo OK.)). ÄŒe boste pisali kodo “na roke”, potem proces vrjetno že posnate, za ostale pa bodo poskrbeli programi, ki vam bodo delo olajšali, podrobno razumevanje kode pa v tem primeru ni potrebno - stran sestavite kot lego kocke, ob koncu pa avtomatično “vn pade” potrebna datoteka. Priporočam le, da CSS ločite od HTML kode in si tako olajšate morebitno kasnejše popravljanje.
@ index.html (klik na sliko za razširitev)
@ wp_style.css (klik na sliko za razširitev)
Veljavnost HTML & CSS kode preverite z HTML in CSS “validatorjem”, kodo pa je priporočljivo prilagoditi, da se v vseh večjih brskalnikih (Internet Explorer 6/7, Firefox, Opera, Safari) prikaže enako - pomoč pri poenotenju.
Razrez si lahko ogledate na:
http://www.delavec.net/clanek-srajcka/index.html
Za lažje razumevanje članka, priporočam branje osnov (x)HTML in CSS:
* XHTML @ Wikipedia
* HTML Tutorial
* What is XHTML?
* How to Convert HTML to XHTML?
* Basics of XHTML
-
* CSS Tutorial
* Cascading Style Sheets @ Wikipedia
* What is CSS?
