Autor Zpráva
shaman171
Profil
Ahoj,
vím, že se tu už určitě ptalo miliön lidí, ale nemůžu se toho dohledat (nevím co zadat do hledání, laici tomu říkají jakkoliv).
V podstatě jde o to, že mám hotový design pro web například tento
a řeším problém, jak to rozřezat (třebas v photoshopu) a poskládat pomocí HMTL a CSS ?
Nějak na to nemůžu přijít :-(
Moc děkuju :-)
Miloš
Profil
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).
shaman171
Profil
a to celé nějak pozicovat pomocí position nebo float rikas ? :-) mě (laika) napadlo tohle celé rozřezat a pka skládat nějak do divů, to je kravina ? Já se v tom moc neorientuju, nevím jak se to řeší... :-(
Miloš
Profil
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
Profil
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 HTML podoby... respektive aybch měl kó (srozumitelnej) do kterého už budu psát jen obsah stránek a stylovat si texty....
jaké značky a jaké prostředky k tomuhle použít ? :-)
panther
Profil
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š.
kelvin
Profil
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...
panther
Profil
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á.
kelvin
Profil
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
Profil
panther: Základy HTML mám ale v tom směru, že dokážu stylovat text zarovnávat atd podobně, ovšem ten úplný základ (rozložení objektů na stránce) jsme jaksi nějak přeskočil a vynechal, jsem zvyklej dělat v rámech...
od někojho jiného to moc dělat nechci, rád ybch to spíš udělal sám a naučil se to, abych to pak mohl používat i u dalších projektů

kelvin: moc děkuju za ty řezy pokusím se to tak nějak udělat, ale pak jsme ztracenej jak s tím dál pokračovat :-(
Miloš
Profil
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íš.
panther
Profil
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).
shaman171
Profil
Miloš: téda to je SUPER :-) moc moc děkuju :-) škoda že to neumím sám... ale pokusím se to nějak "pobrat" ten kó a následně zůročit... :-) moc děkuju!!
Miloš
Profil
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
Profil
Ahoj :-( nějak mi nic neříká ta vaše úprava menu co tu píšete, každopádně jsme se pokusil si s tím pohrát a doplnit si do toho vlastní obsah a chystám se to postupně rozšiřovat, zajímá mě sco si o tom myslíte (má to určitě hodně chyb... například obrovská datová velikost toho obrázku.... :-D s tím si ještě pohraju... )
panther
Profil
shaman171:
co si o tom myslíte
nezapomněl jsi nám dát odkaz?
shaman171
Profil
Jo zapomněl :-D ta skleróza :-D http://karelhynekmacha.cz/new/
Miloš
Profil
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.
shaman171
Profil
Miloš:
1) To máš pravdu, je to udělaný blbě, to předělám :-)
2) Teďka an to koukám... celé tohle oprvavím....
3) O této možnosti nevím, řešil jsem to mě jedinou známou cestou
4) vzhledem k tomuto bodu si rád nechám poradit! :-)
Miloš
Profil
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:
<img src="nadpis.png" alt="nadpis.png, 29kB" title="nadpis" height="66" width="267"> <!-- původní kód -->
<img src="nadpis.png" alt="Hotel K. H. Mácha" height="66" width="267"> <!-- takhle je to lepší -->
shaman171
Profil
Miloš:
Jo tak to ti docela rozumím, snažím se teďka stránky naplnit smysluplným obsahem. Už několik odkazů funguje, následně se zaměřím na tuhle animaci a na všechny obrázky v sekcích, v každé bude jiný, vztahující se k danému tématu.
EDIT:
Opraveno děkuji!
Stránky jsou naplněny, teďka jdu řešit obrázky. Jen mě trochu mrzí, že to počítadlo tam tolik nezapada :-(

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: