Jak na layout?

27. 2. 2008 17:49:45

Ahojky.. můžete mi prosím ve zkratce objasnit rozdíl mezi tabulkovým a beztabulkovým layoutem na jednoduchém příkladu? Jak vlastně takový layout (šablonu stránky) sestavujete graficky? Celé to namalujete tam nebo při té grafické tvorbě se vracíte pořad na prohlížeč? Snad porozumíte.. díky

27. 2. 2008 17:49:45

https://webtrh.cz/diskuse/jak-na-layout#reply47174

David Čermák

(7 hodnocení)

27. 2. 2008 17:52:46

Tabulky se v prohlížečích obecně zobrazují pomaleji nebo chceš-li prohlížeč čeká, než stáhne obsah všech tabulek. Dnes je od tabulek odstupováno.

Grafika webu se kreslí např.: ve Photoshopu a pak se rozřeže na jednotlivé elementy a ty se nakódují :)

27. 2. 2008 17:52:46

https://webtrh.cz/diskuse/jak-na-layout#reply47173

medvidekh

27. 2. 2008 18:00:08

Takže když sestavuju tabulku a chci do grafického návrhu přidat tlačítko.. mám jej namalovat, nebo odskočit na explorer a oscreenovat a pak vložit do toho návrhu? Jak se jinak dělá ten beztabulkový layout? Nějak nechápu..

27. 2. 2008 18:00:08

https://webtrh.cz/diskuse/jak-na-layout#reply47172

David Čermák

(7 hodnocení)

27. 2. 2008 18:13:21

Grafika se kreslí většinou celá, nicméně zrovna tlačítka, tedy pokud je neděláš přes CSS se můžou dělat samostatně v graf. editoru. Do prohlížeče vůbec nelezeš, to až když to nakóduješ.

Pokud chceš web bez tabulek, můžeš použít kaskádové styly CSS. V nich se zadává kromě jiného právě poloha jednotlivých prvků na stránce.

Doporučoval bych nastudovat jakpsatweb.cz ;)

27. 2. 2008 18:13:21

https://webtrh.cz/diskuse/jak-na-layout#reply47171

Miloslav Heřmánek

(10 hodnocení)

27. 2. 2008 18:14:52

Tabulka:

hlavicka
levy sloupec	content
paticka

Beztabulkový layout:

hlavicka

sloupek

content

paticka

Píšu to z hlavy a je to hrozně zjednodušené, tak mě prosím nekamenujte, že tam jsou chyby - je to jen ilustrace rozdílu mezi tabulkou a beztabulkou ;)

Photoshop (resp. ImageReady) na Tebe po rozřezání obrázku vyplivne i tabulku i divy (podle volby). Je ale to dost nepoužitelné (jde-li Ti o rychlost zobrazení) protože (alespoň já to neumím zařídit) za Tebe neudělá to, že by např. na plochách s přechodem zopakoval jen úzký proužek na celou šířku (resp. výšku) prvku, neumí (nebo já to neumím) jiné rollovery než JS (přitom css jsou rychlejší a nezávislé na nastavení browseru), atp. Prostě stejně pak musíš jít a ten kód přepsat.

27. 2. 2008 18:14:52

https://webtrh.cz/diskuse/jak-na-layout#reply47170

medvidekh

27. 2. 2008 18:15:55

ok.. díky moc

27. 2. 2008 18:15:55

https://webtrh.cz/diskuse/jak-na-layout#reply47169

David Čermák

(7 hodnocení)

27. 2. 2008 18:16:58

Napsal hermanek;37333
Tabulka:

hlavicka

levy sloupec content

paticka

Beztabulkový layout:
hlavicka

sloupek
content

paticka

Píšu to z hlavy a je to hrozně zjednodušené, tak mě prosím nekamenujte, že tam jsou chyby - je to jen ilustrace rozdílu mezi tabulkou a beztabulkou ;)

Photoshop (resp. ImageReady) na Tebe po rozřezání obrázku vyplivne i tabulku i divy (podle volby). Je ale to dost nepoužitelné (jde-li Ti o rychlost zobrazení) protože (alespoň já to neumím zařídit) za Tebe neudělá to, že by např. na plochách s přechodem zopakoval jen úzký proužek na celou šířku (resp. výšku) prvku, neumí (nebo já to neumím) jiné rollovery než JS (přitom css jsou rychlejší a nezávislé na nastavení browseru), atp. Prostě stejně pak musíš jít a ten kód přepsat.

Jenom taková poznámka, podle mě je vždy lepší psát styly do samostatného souboru .css

27. 2. 2008 18:16:58

https://webtrh.cz/diskuse/jak-na-layout#reply47168

Miloslav Heřmánek

(10 hodnocení)

27. 2. 2008 18:25:38

Davidkojot: To je jasné ;) chtěl jsem jen, aby bylo z té ukázky zřejmo, jak se to v zásadě liší .... každému jedinečnému divu přiřadit ID, opakujícím se stejnými vlastnostmi class .... atd. ;-) Ono je toho moc, co by se mělo k tomu napsat - tak jako tak rada kolegovi medvídkovih prostudovat to na webu, kde se o tom píše podrobněji je nenahraditelná:

http://www.jakpsatweb.cz/tabulky-design.html

http://www.jakpsatweb.cz/css/css-design-position.html

27. 2. 2008 18:25:38

https://webtrh.cz/diskuse/jak-na-layout#reply47167

David Čermák

(7 hodnocení)

27. 2. 2008 18:30:57

Napsal hermanek;37340
Davidkojot: To je jasné ;) chtěl jsem jen, aby bylo z té ukázky zřejmo, jak se to v zásadě liší .... každému jedinečnému divu přiřadit ID, opakujícím se stejnými vlastnostmi class .... atd. ;-) Ono je toho moc, co by se mělo k tomu napsat - tak jako tak rada kolegovi medvídkovih prostudovat to na webu, kde se o tom píše podrobněji je nenahraditelná:
http://www.jakpsatweb.cz/tabulky-design.html
http://www.jakpsatweb.cz/css/css-design-position.html

Je to tak, jen jsem se chtěl vyhnout tomu, aby se naučil psát styly přímo do kódu. Jinak pochopitelně jako ukázka je to přesné.

Snad bych jen dodal, že jsou případy, kdy jsou tabulky nenahraditelné, tedy lépe řečeno jsou nejlepší volbou. Styly rozhodně nejsou vhodné na všechno ;)

27. 2. 2008 18:30:57

https://webtrh.cz/diskuse/jak-na-layout#reply47166

David Kohout

(38 hodnocení)

27. 2. 2008 19:51:26

davidkojot: Nenahraditelné jsou jen při tvorbě klasické tabulky:)

27. 2. 2008 19:51:26

https://webtrh.cz/diskuse/jak-na-layout#reply47165

David Čermák

(7 hodnocení)

27. 2. 2008 19:57:41

Napsal kohout;37364
davidkojot: Nenahraditelné jsou jen při tvorbě klasické tabulky:)

Ten byl dobrej :D

27. 2. 2008 19:57:41

https://webtrh.cz/diskuse/jak-na-layout#reply47164

Webtrh obecný účet

(1 hodnocení)

27. 2. 2008 20:14:41

Prošel jsem si i ty odkazy, co jste tam dali a mám ještě další dotaz. Při použití position:absolute se často stane, že se ta stránka rozhodí nebo podsunuje pod jiný objekt. Tento problém nastává v jiných prohlížečích (např.) anebo když stránku posílám mailem.. Vám se to ještě nestalo? Proto se snažím tomuto vyvarovat.. ale pokud je prozměnu toto moderní.. tak bych se chtěl spíš naučit toto bezchybně aplikovat..

27. 2. 2008 20:14:41

https://webtrh.cz/diskuse/jak-na-layout#reply47163

Webtrh obecný účet

(1 hodnocení)

27. 2. 2008 20:18:27

anebo jak beztabulkový layout s užitím position:absolute centrovat na střed, když jsou různé typy monitorů?

27. 2. 2008 20:18:27

https://webtrh.cz/diskuse/jak-na-layout#reply47162

David Čermák

(7 hodnocení)

27. 2. 2008 20:22:28