Rozřezání designu a vytvoření HTML + CSS

Co chceš na tomhle řezat? Z grafiky tam máš akorát nadpis, oldážky menu a těch 8 ikonek dole.
Všechno ostatní už je jen barva na pozadí (background-color) a napozicování bloků (buď position, nebo float).

Pokud by byl grafický návrh složitější (například zaoblené rámečky, barevné přechody, textury a jánevímcoještě), pak by opět stačilo tyto grafické prvky vyjmout z psd a uložit jako jednotlivé soubory (png/gif/jpg), které se v CSS zapisují jako obrázek na pozadí (backgound-image).

Základ je sémanticky správně strukturovaný HTML dokument: http://www.semantika.name/
Vzhled pak (pokud moc nerozumíš CSS) zkus podle praktických návodů – vyber si nějaký layout na http://interval.cz/hotova-reseni/

shaman171:
„tak ohledně té sématiky, tomu docela rozumím a toho se budu při vytváření kódu řídit, mě teďka jde o to jak (jakou metodu) použít při převodu tohohle designu stránek do THML podoby...“
nerozumíš. Nemáš totiž ani základ HTML - soudím dle toho, co píšeš.

K původnímu dotazu: Co je na pozadí jednobarevné, je zbytečné tvořit obrázkem. Rovnou ti řeknu, čeho se vyvaruj - mohlo by tě lákat zadat blokům v pravé části výšku, to nedělej. Zároveň si dej pozor na to, jaký font použiješ - nedělej menu obrázkové, resp. měj pod ním alternativní textový obsah.

Pokud si nejsi s HTML, případně CSS jistý (nevěnuješ se mu), tohle není žádný obtížný design, možná by se tu našlo dost lidí, co by ti to zadarmo či malý pár korun (a za chvíli) nakódovalo. Zkus o tom popřemýšlet - s vidinou správného zobrazení webu ve většině prohlížečů. Pokud to chceš zkusit sám, ptej se pak na konkrétní věci - základ k tomuto ti řekl Miloš.

Ve Photoshopu je na to skvělý nástroj Řezy (Slices). Rozřeže to stránku na obdélníkové oblasti, které se při publikaci dají Uložit pro web (Alt+Shift+Ctrl+S) jako samostatné jpg/png/gif soubory. Tady máš náhled - udělal jsem nějaké smysluplné řezy tvého návrhu ;) - http://obrazky.milichovsky.com/nechat/macha/hotel-macha-rezy.png .

Další krok, to jest HTML šablona a CSS definice vzhledu je na tobě. On to sice Photoshop umí nějak do šablony poskládat sám, ale tomu bych nevěřil...

kelvin:
„On to sice Photoshop umí nějak do šablony poskládat sám“
umí, ale kód je pak neskutečná prasárna. Je to jen slepení obdélníků k sobě, což se za správnou cestu považovat nedá.

Panther - však jo, napsal jsem to samé jinými slovy ;). U CSS je dle mě nejlepší cestou všechno hezky natlapkat sám ručně...

shaman171:
1) „kelvin: moc děkuju za ty řezy pokusím se to tak nějak udělat“
2) panther: „On to sice Photoshop umí nějak do šablony poskládat sám … ale kód je pak neskutečná prasárna. Je to jen slepení obdélníků k sobě, což se za správnou cestu považovat nedá.“

Jak ostatně píše panther:
„tohle není žádný obtížný design, možná by se tu našlo dost lidí, co by ti to zadarmo či malý pár korun (a za chvíli) nakódovalo.“
Tak mi to nedalo a nakódoval jsem ti to.
Podívat se na to můžeš na stránce http://mfp.php5.cz/ukazky/hotel_macha/ a stáhnout (zazipované) si to můžeš komplet z http://mfp.php5.cz/stahuj/hotel_macha.zip
V IE 6 je to mírně nakřáplé (to už se mi s ohledem na hodinu nechtělo), ale jinak to šlape v IE 8, FF i Opeře.

Kdyby byl nějaký problém, budu na příjmu v pátek tak od 21. hodiny, případně přes víkend.
Ale i tak je tu dost lidí, kteří by ti mohli poradit, pokud něčemu neporozumíš.

Miloš:
„Tak mi to nedalo a nakódoval jsem ti to.“
snad jen to menu by šlo udělat lépe, aby neproblikával hover (normální a hover stav sloučit do jednoho obrázku).

panther:
Nebo dát ještě obrázky na pozadí jednotlivým <li> jako nadřazeným elementům.
To víš, že kdybych to dělal pro sebe nebo za peníze, že bych na to taky myslel. A vezmi v úvahu, že jsem to dělal v noci a nepiplal se s tím v řádu dní, jakož že jsem veškeré obrázky musel vyříznout z původního JPG…

shaman171:
„co si o tom myslíte“
nezapomněl jsi nám dát odkaz?

1) Je velká hloupost „zmenšovat“ obrázek prohlížečem (uložený je velký, ale v HTML má menší width/height), protože se načítají zbytečná data.
2) Obrázek z původních 1000×676px zmenšit na 520×300px znamená deformaci, protože správný poměr při dané šířce = výšku 352px
3) Pro animaci fotek je vhodnější javascript a JPG
4) Na stránky je vhodné nedávat poukud možno žádnou animaci, protože jenom odvádí pozornost.

K bodu 4 – ač to tak nevypadá, nejsem vysloveně absolutním odpůrcem animací na webu.
Především – mohou upozornit na průběh (odesílání e-mailu, načítání fotky…) a tam mohou být zcela na svém místě. Proti takovému určení animace neřeknu ani fofel.
Oproti tomu takové animace, které na sebe permanentně strhávají pozornost, považuji za odpudihodné a jejich odpudihodnost překračují snad jen zvuky.
Přesto – pokud je třeba na něco upozornit (a to animace opravdu umí), nejsem vysloveně absolutném odpůrcem – stačí, když animace 2× 3× proběhne a zastaví se. Pak mi to nijak extrémně nevadí a jsem ochotný se s takovou animací smířit. Permanentní animace (ve většině případů jde o reklamu) však nemilosrdně blokuji.

Jo a ještě doplňuji:
úplně jsem přehlédnul, že mi PSPad při vkládání obrázkového nadpisu vložil nevhodný ALT a zbytečný TITLE. Proto si ještě v nadpisu oprav tohle: