logo
27.02.2008 17:49
1
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

Co se právě děje na Webtrhu?

27.02.2008 17:52
2
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.02.2008 18:00
3
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.02.2008 18:13
4
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.02.2008 18:14
5
Tabulka:
<table width="800">
<tr><td colspan="2">hlavicka</td></tr>
<tr><td width="180">levy sloupec</td><td>content</td></tr>
<tr><td colspan="2">paticka</td></tr>
</table>

Beztabulkový layout:
<div style="width:800px;">hlavicka</div>
<div style="width:180px; float:left">sloupek</div><div style="margin-left:180px;">content</div>
<div style="800px;">paticka</div>

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.02.2008 18:15
6
ok.. díky moc
27.02.2008 18:16
7
Původně odeslal hermanek
Tabulka:
<table width="800">
<tr><td colspan="2">hlavicka</td></tr>
<tr><td width="180">levy sloupec</td><td>content</td></tr>
<tr><td colspan="2">paticka</td></tr>
</table>

Beztabulkový layout:
<div style="width:800px;">hlavicka</div>
<div style="width:180px; float:left">sloupek</div><div style="margin-left:180px;">content</div>
<div style="800px;">paticka</div>

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.02.2008 18:25
8
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.02.2008 18:30
9
Původně odeslal hermanek
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.02.2008 19:51
10
davidkojot: Nenahraditelné jsou jen při tvorbě klasické tabulky:)
27.02.2008 19:57
11
Původně odeslal kohout
davidkojot: Nenahraditelné jsou jen při tvorbě klasické tabulky:)
Ten byl dobrej :D
27.02.2008 20:14
12
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.02.2008 20:18
13
anebo jak beztabulkový layout s užitím position:absolute centrovat na střed, když jsou různé typy monitorů?
27.02.2008 20:22
14
Původně odeslal Unregistered
anebo jak beztabulkový layout s užitím position:absolute centrovat na střed, když jsou různé typy monitorů?

hledej na diskuse.jakpsatweb.cz :)
28.02.2008 08:30
15
Původně odeslal Unregistered
anebo jak beztabulkový layout s užitím position:absolute centrovat na střed, když jsou různé typy monitorů?
Použivej radši position: relative

PHP kód:
<style>
#container {
  
positionrelative;
  
width760px;
  
top0px;
  
left50%;
  
margin-left: -380px;
}
</
style>

<
div id="container">
...
</
div
28.02.2008 09:06
16
Stránka vycentruješ takhle:

Kód:
<style>
body{
  margin: auto; 
  text-align: center; /* Pro IE */
}
#container {
  width: 760px;
  text-align: left;
}
</style>
<body>
<div id="container">
...
</div>
</body>
Používat v tomto případě předchozí možnosti je imho blbost.
28.02.2008 11:19
17
Původně odeslal Martin
Stránka vycentruješ takhle:

Kód:
<style>
body{
  margin: auto; 
  text-align: center; /* Pro IE */
}
#container {
  width: 760px;
  text-align: left;
}
</style>
<body>
<div id="container">
...
</div>
</body>
Používat v tomto případě předchozí možnosti je imho blbost.
Takhle to nepojede ve FireFoxu...
28.02.2008 11:26
18
Jasně, omlouvám se - margin: auto; má být u #container.
28.02.2008 12:07
19
Mám pocit, že neregistrovaný myslel horizontálně!
28.02.2008 20:01
20
Asi to je barbarske reseni, ale me to funguje ve vsech prohlizecich :)
Proste vsechno co chci mit na stredu uzavru do <center></center> a je to.

Priklad:

<center>
<div id="content">
....................
....................
....................
....................
</div>
</center>
28.02.2008 20:22
21
Původně odeslal Scorpius
Asi to je barbarske reseni, ale me to funguje ve vsech prohlizecich :)
Proste vsechno co chci mit na stredu uzavru do <center></center> a je to.

Priklad:

<center>
<div id="content">
....................
....................
....................
....................
</div>
</center>
Hmmmmmmmmm, velice zajímavé řešení, ale takto radši ne :nono:
28.02.2008 23:33
22
Pořád se mi plete vertikála s horizontálou, ale neva. Dokonce ty tabulky dneska řešili na sitepointu, jakožto velkou věc budoucnosti. Jestli jí vytvoříte pomocí html nebo css to už je celkem putna, alespoň pro screen readery.
02.03.2008 02:03
23
Původně odeslal medvidekh
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
Tabulky mají sloužit pouze pro "tabulkové údaje". Ale troufám si říct, že na nich skoro každý začínal. Čili na pochopení pro úplné začátečníky (nekamenujte mě) doporučuji vyzkoušet nejdřív table-layout a zjistit, že si rozdělíš stránku na bloky (buňky jako ve Wordu) a do nich rozdělíš obsah, každá buňka může mít jiné pozadí, barvu...a poskládáš si jednoduchý web se "styly" v kódu (uvidíš, jak se každá buňka široká, vysoká, jakou má barvu ohraničení atp.) - něco podobného by šlo při troše zručnosti i ve Wordu :o)

Sám zjistíš (kromě jiného), že je to dost krkolomné a omezené řešení a plynule předeš k "beztabulkovému layoutu".

Jinak grafiku můžeš sestavit pro "tabulkový i beztabulkový layout", to je úplně jedno :o)
02.03.2008 04:21
24
Původně odeslal Dreamweb4u
Čili na pochopení pro úplné začátečníky (nekamenujte mě) doporučuji vyzkoušet nejdřív table-layout [...]
Musím nesouhlasit!

Když jsem se začal učit CSS, tak největší problém jsem měl právě s odnaučením „tabulkového myšlení“. Neměl jsem problém se syntaxí ale s tím, že jsem si stránku stále představoval jako buňky tabulky. A to je velmi omezující.

Troufám si tvrdit, že i spousta samotných grafických návrhů bývá poznamenána právě tabulkovým myšlením.
02.03.2008 12:28
25
Původně odeslal tracy
Musím nesouhlasit!
Když jsem se začal učit CSS, tak největší problém jsem měl právě s odnaučením „tabulkového myšlení“. Neměl jsem problém se syntaxí ale s tím, že jsem si stránku stále představoval jako buňky tabulky. A to je velmi omezující.
Troufám si tvrdit, že i spousta samotných grafických návrhů bývá poznamenána právě tabulkovým myšlením.
To záleží na tom, jak člověk ulpí na určitém přístupu, já to psal hodně
obecně a asi jsem vycházel ze svého postupu, kdy jsem se všechno učil
sám bez správného sledu. Mnoho známých mělo naprosto stejné začátky,
kdy tabulkový layout byl prostě intuitivním začátkem.

Vžijte se do role úplného začítečníka, který nemá doma knihu "jak na CSS", nebo "pokročilé techniky pro webové designéry",
nechodí na kurzy a nemá mu to kdo ve škole vysvětlit.

Původně odeslal tracy
Neměl jsem problém se syntaxí ale s tím, že jsem si stránku stále představoval jako buňky tabulky. A to je velmi omezující.
To je přesně ono, to co jsem napsal. Určitě existuje cesta, jak se tomu
vyhnout, ale myslím, že úplný začátečník, který se tím nechce dlouhodobě
zabývat, jí hledat nebude.

Původně odeslal tracy
Troufám si tvrdit, že i spousta samotných grafických návrhů bývá poznamenána právě tabulkovým myšlením.
Tak to musím souhlasit.
02.03.2008 13:06
26
Než Word, který generuje opravdu nepřehledný a překomplikovaný kód, doporučoval bych (ač je sám nepoužívám) pro začátky nějaký kvalitnější a přitom zadarmový vizuální (Wysiwyg) editor - tuším, že docela použitelný (a nyní již i v češtině) je NVU, kdysi jsem začínal (a dlouho se mi líbil) na HTML editoru (umí zpětnou editaci tagů) a myslím i trochu CSS - důležité je, aby měl vestavěné zobrazení stránky vestavěné přímo v editoru (jasně že to doopravdy nestačí), což oba uvedené mají.

Taky bych se klonil k tomu začít na tabulkách ale co nejrychleji přejít na čisté CSS (tabulky si taky myslím, že jsou hlavně pro tabulky ;-) ) A pro opakovaný obsah (menu apod.) bych pro začátek doporučil Iframe (než Medvídku zjistíš, že úplně nejjednodušší je include v PHP).
Oddělování obsahu do formy (designu, uspořádání stránky) je trend, který rozhodně má jediný budoucnost.

Mluvím z pozice právě toho, který si html ošahával úplně od nuly bez jakékoli vnější pomoci a dobře si pamatuji, jak kdekterá samozřejmost mi připadala záhadná.
02.03.2008 16:25
27
Snaž se oddělit obsah od formy. Nejdřív si promysli co na stránce bude, vytvoř si v html kostru s nadpisy různých úrovní, navigací atd. Mrkni se na ty různý wysiwygy co ti tu doporučují a zase se na nš rychle vykašli. Napsal jsem ti v rychlosti primitivní wysiwyg, který by ti mohl pomoci. Jsou tam dvě textarey do té první vložíš css a do té druhé html a spustíš, pak si s tím můžeš hrát. Můžeš třeba vlevo
zkoušet http://www.csszengarden.com/001/001.css nebo http://www.csszengarden.com/208/208.css (url je vždy ve tvaru 001/001) atd. je tam těch stylů stovky, do pravého okna si dej část zdrojového kódu odsud http://www.csszengarden.com/ myslím celé body včetně tagu body. No a tak dva týdny si s tím hraj a uvidíš. Editor je v příloze.

Přiložené soubory
wysiwyg.zip
(2,8 KB, 22 zobrazení)
02.03.2008 18:43
28
Zkoušel jsem několik Wysiwyg editorů a NVU se mi jeví jako jeden z nejlepších zadarmo. Jediné, co mi na něm vadilo, byly ty mezery v kódu, které nechává. Možná se to stalo jen mně, ale to bylo šílené. Z 150 "řádků" jich máte najednou 500 :banghead:

Původně odeslal hermanek
Než Word, který generuje opravdu nepřehledný a překomplikovaný kód, doporučoval bych (ač je sám nepoužívám) pro začátky nějaký kvalitnější a přitom zadarmový vizuální (Wysiwyg) editor - tuším, že docela použitelný (a nyní již i v češtině) je NVU, kdysi jsem začínal (a dlouho se mi líbil) na HTML editoru (umí zpětnou editaci tagů) a myslím i trochu CSS
02.03.2008 19:36
29
Původně odeslal Dreamweb4u
Zkoušel jsem několik Wysiwyg editorů a NVU se mi jeví jako jeden z nejlepších zadarmo. Jediné, co mi na něm vadilo, byly ty mezery v kódu, které nechává. Možná se to stalo jen mně, ale to bylo šílené. Z 150 "řádků" jich máte najednou 500 :banghead:
Nvu má novou verzi- Kompozer, který mnohé problémy odstaraňuje ;)
07.03.2008 01:56
30
a znate nekdo nejaky tutorialy (s pouzitim dreamweaveru, photoshopu a imageready), kde se užívá CSS pozicování, ne tabulek?
Nebo to s těmito nástorji nejde a musí se to dělat jinak? potom jak, nějaký návody tutoriály?
Díky.