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¹. Č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?

1. Koda ni HighTech, a za primer bo OK.