Autor Zpráva
carlj
Profil *
Zdravím,
dělám web a potřebuji prosím Vás poradit jak docílit tohoto rozvržení stránky http://testwebsite.borec.cz/design-webu.jpg

Zdrojový kód:
<html> 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">

<title>Levná kanalizace - David Vaněček, kanalizace pro dům, pro komunikace, záchody, potřeby pro instalatéry</title>

<meta name="description" content="Nabízíme prodej kompletního značkového sortimentu venkovní (KG) a vnitřní (HT) kanalizace včetně odtokových kanalizačních šachet, domovních i venkovních vpustí, geigerů, odvodňovacích žlabů, drenážních trubek, WC kombi (zejm. JIKA), špičkových závěsných WC modulů Grohe, FRIAFIX a FRIASET včetně korpusů, příslušenství a ovládacích tlačítek, dále umyvadel, sifonů, připojovacích a náhradních dílů k toaletám, atd. V tomto oboru nabízíme skutečně bezkonkurenční ceny.">

<meta name="keywords" content="Levná kanalizace, kanalizace, David Vaněček, Vaněček, instalaterské potřeby, instalaterský sortiment, instalatéry, potřeby pro instalatéry, levně, výhodně" />

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

<style>

body {background-image: url(pozadi.jpg); background-attachment:fixed; text-align: center} 

#all {

  width: 913px;  

  margin: 0 auto;

  text-align: left;

}

#menu{

  background: white;

  width: 870px;

  height: 126px;

  margin: 0px auto;

  padding: 0px;

  list-style-type: none; 

}

#menu li{

  float: left;

}

#menu li a#kontakt_neaktivni{

  display: block;

  width: 102px;

  height: 126px;

  background: url('tlacitko_kontakt_neaktivni.jpg') no-repeat;

  padding: 0px 0px 0px 0px;

  margin-top: 15px;

  text-align: center;

  text-decoration: none;

  color: white;

}

#menu li a#cenik_neaktivni{

  display: block;

  width: 102px;

  height: 126px;

  background: url('tlacitko_cenik_neaktivni.jpg') no-repeat;

  padding: 0px 0px 0px 0px;

  margin-top: 15px;

  text-align: center;

  text-decoration: none;

  color: white;

}

#menu li a#sortiment_neaktivni{

  display: block;

  width: 102px;

  height: 126px;

  background: url('tlacitko_sortiment_neaktivni.jpg') no-repeat;

  padding: 0px 0px 0px 0px;

  margin-top: 15px;

  text-align: center;

  text-decoration: none;

  color: white;

}

#menu li a#o_firme_neaktivni{

  display: block;

  width: 98px; 

  height: 126px; 

  background: url('tlacitko_o_firme_pro_hs.jpg') no-repeat;

  padding: 0px 0px 0px 0px; 

  margin-top: 15px;

  text-align: center;

  Text-decoration: none;

  color: white;

} 

#menu li a#uvod_aktivni{

  display: block;

  width: 107px;

  height: 126px;

  background: url('tlacitko_hlavni_strana.jpg') no-repeat;

  margin-left: 130px;

  padding: 0px 0px 0px 0px;

  margin-top: 15px;

  text-align: center;

  text-decoration: none;

  color: white;

}

#menu li a#logo{

  display: block;

  width: 220px;

  height: 126px;

  background: url('logo.jpg') no-repeat;

  padding: 0px 0px 0px 0px;

  margin-top: 15px;

  text-align: center;

  text-decoration: none;

  color: white;

}

#hlavni{

  margin-top: 40px;

  display: block;

  background: url('body.jpg') no-repeat;

  text-align: left;

  height: 957px;

  padding: 0px 0px 0px 0px;

  list-style-type: none;

  font-family: Arial, sans-serif, Verdana, Tahoma;

  font-size: 14px;

}

#banners{

  display: block;

  text-align: left;

  height: 957px;

  padding: 0px 0px 0px 0px;

  list-style-type: none;

  font-family: Arial, sans-serif, Verdana, Tahoma;

  font-size: 14px;

}

#bottom{

  font-size: 10px;

  font-family: Arial;

  Text-decoration: none;

}

</style> 

</head> 
<body><!--WZ-REKLAMA-1.0IZ--><div align="center"><table width="496" border="0"
cellspacing="0" cellpadding="0"><tr><td><a href="http://www.webzdarma.cz/"><img
src="http://i.wz.cz/banner/nudle03.gif" width="28" height="60" 
style="margin: 0; padding: 0; border-width: 0" alt="WebZdarma.cz" /></a></td><td> 
<script type='text/javascript'><!--//<![CDATA[
   var m3_u = (location.protocol=='https:'?'https':'http')+'://ad.wz.cz/openx/www/delivery/ajs.php';
   var m3_r = Math.floor(Math.random()*99999999999);
   if (!document.MAX_used) document.MAX_used = ',';
   document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
   document.write ("?zoneid=26");
   document.write ('&amp;cb=' + m3_r);
   if (document.MAX_used != ',') document.write ("&amp;exclude=" + document.MAX_used);
   document.write (document.charset ? '&amp;charset='+document.charset : (document.characterSet ? '&amp;charset='+document.characterSet : ''));
   document.write ("&amp;loc=" + escape(window.location));
   if (document.referrer) document.write ("&amp;referer=" + escape(document.referrer));
   if (document.context) document.write ("&context=" + escape(document.context));
   if (document.nnn_fo) document.write ("&amp;nnn_fo=1");
   document.write ("'><\/scr"+"ipt>");
//]]>--></script><noscript><div><a href='http://ad.wz.cz/openx/www/delivery/ck.php?n=a5977468&amp;cb=123'><img src='http://ad.wz.cz/openx/www/delivery/avw.php?zoneid=33&amp;cb=123&amp;n=a5977468' style='margin: 0; padding: 0; border-width: 0' alt='' /></a></div></noscript> 
</td></tr></table></div> 
<!--WZ-REKLAMA-1.0IK--> 

<div id="all">

<div id="top"><a href="index.html"></a></div>

<div id="hlavni">
<ul id="menu">
<li><a href="index.html" id="logo"></a>
<li><a href="index.html" id="uvod_aktivni"></a>

<li><a href="ofirme.html" id="o_firme_neaktivni"></a>

<li><a href="sortiment.html" id="sortiment_neaktivni"></a>

<li><a href="cenik.html" id="cenik_neaktivni"></a>

<li><a href="kontakt.html" id="kontakt_neaktivni"></a>

</ul>

 
<p style="color: red; text-align: center; margin top: 50px"><strong>Nově také ohřívače, koupelnový nábytek, doplňky, baterie, fasádní barvy a omítky<br />

+ kompletní zateplovací systémy, atd.</strong></p>
<h2 style="text-align: center"><strong>Sháníte cokoli ohledně VODY – TOPENÍ – PLYNU?</strong></h2>

<h2 style="text-align: center"><strong>Napište <a href="mailto:levnakanalizace@seznam.cz">EMAIL</a> s poptávkou!</strong></h2>

<h4 style="text-align: center"><strong>Nízké ceny nejsou pouze na internetu...</strong></h4></div>

</div>

<div id="bottom">

</div> 
</div>
<script type="text/javascript">

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

</script>

<script type="text/javascript">

try {

var pageTracker = _gat._getTracker("UA-16139242-1");

pageTracker._trackPageview();

} catch(err) {}</script>

 
</body>



ještě odkaz na stránku http://testwebsite.borec.cz/

Moderátor Petr ZZZ: Nahradil jsem na dvou místech řetězec mmm řetězcem nnn.
Sir Tom
Profil
carlj:
Můžeš použít tabulky se 2 buňkami (nejsnadnější, ale nedoporučeno) nebo CSS pozicování.
jenikkozak
Profil
carlj:
Tabulka má jiný význam, s pozicováním narazíš, nebudeš-li znát rozměry jednotlivých prvků. Radím použít spíše obtékání.

Mimochodem zápis „padding: 0px 0px 0px 0px;“ je shodný s tímto: „padding: 0“. Proč nadpisy a odstavce mají inline styly? Hlavně však nechápu, proč do nadpisů dáváš texty, které evidentně nadpisem nejsou.
Nedaly by se styly položek menu napsat nějak lépe? Symbolicky místo „první položka menu nemá mít padding, druhá položka menu nemá mít padding...“ napsat „žádná položka menu nemá mít padding“, rozepisovat můžeš vlastnosti, které mají u každé položky jinou hodnotu.
Sir Tom
Profil
jenikkozak:
s pozicováním narazíš, nebudeš-li znát rozměry jednotlivých prvků
Samozřejmě, předpokládám ale, že carlj zná šířku a výšku - vycházím z kódu a z přiloženého odkazu.

jenikkozak:
tabulka má jiný význam
Proč? Toto nechápu.
Taurus
Profil
Sir Tom:
Tabulka je pro tabulková data.
pcmanik
Profil
Taurus:
To nieje padny argument, da sa vyuzit aj na design webu, resp. ked si spominam par rokov do zadu vacsina webov mala tabulkovy design.
Taurus
Profil
Nebudu o tom polemizovat, když tě pádný argument nezajímá. Související důvody použití jsou popsány v mnoha vláknech na diskuzi. Drž se tedy svého starého...
carlj
Profil *
Do tabulky bych to klidně rozvrhnul, ale plánuji pracovat na SEO a nerad bych, aby to tabulkové rozvžení jakkoliv negativně ovlivnilo, ale jestli s tim máte zkušenosti a víte, že to SEO negativně neovlivní tak proč ne...
Sir Tom
Profil
carlj:
SEO to jistě ovlivní, ale nevím jak moc - přeci jen tabulkový layout není "standardní" nástroj. Na rozmístění elementů na stránce se používají jiné metody. Hlavně to CSS. Doporučuji si přečíst článek a poté i reakce: www.jakpsatweb.cz/clanky/skutecne-vyhody-css-layoutu.html SEO se také dívá na obsah webu - děláte-li stránky o kanalizaci, tak (dle mého skromného soudu) je internetová konkurence veliká. Pro SEO by to chtělo si opravdu vytipovat a zjistit, jaký obsah dát na stránky (Stačí se zaměřit jenom na menší region nebo to má být celorepublikové? Jaké služby na webu nabízím? Co můžu nabídnout oproti ostatním a co potenciální zákazník nejčastěji a jak hledá?, ...) Také je důležité si určit, kam stránky dát? Pouze fulltext (zdarma) nebo třeba i firmy.cz, najisto.centrum.cz (placená místa kategoriích)...
Ale zpátky k dotazu - přikláním se k použití CSS layoutu - dá se to "považovat" jako známka kvality a dobré práce...
Petr ZZZ
Profil
Sir Tom:
SEO to jistě ovlivní
Dovolím si oponovat. SEO je optimalizace pro vyhledávače a ty se nezajímají o kód, ale o to, co je na stránce vidět. Protože bez pohledu do zdrojového kódu nelze poznat, zda je nebo není použit tabulkový layout, nemůže se tento dost dobře odrazit na SEO.

Teoreticky by se sice dalo uvažovat o situaci, kdy pomocí CSS dostanu relevantní texty v kódu více nahoru, než kdybych použil tabulkový layout, takže by tabulkový layout mohl zapříčinit méně vhodný úryvek ("snippet"), který zobrazí vyhledávač ve výsledcích vyhledávání, ale i o tento aspekt se lze postarat - např. vhodným textem v description, případně i v titulku a v nadpisech. Navíc se jako snippet beztak zobrazuje především text okolo hledaného slova.

Další teoretická nevýhoda by mohlo být pomalejší zobrazování, ale pokud do sebe není nějak mimořádně hulvátsky zanořeno množství tabulek, pochybuji, že to má dnes ještě praktický význam. Jak použitím tabulek, tak použitím obtékání či pozicování lze psát kód slušný i škaredý. Významnějšími brzdami načítání stránek bývají různé objemné externí knihovny (navíc často používané na efekty pochybné hodnoty).

Všeobecně je lepší používat tabulky na tabulková data a ne na design, ale neřekl bych, že to má nějaký vliv na SEO.
Sir Tom
Profil
Petr ZZZ:
Patrně máte pravdu, nejsem SEO odborník, ale řekl bych, že např. takový Google přiděluje stránkám hodnocení (to, jak je nakonec bude řadit ve výsledku vyhledávání) dle pozice hledaného textu. Např. text v <h1> má jistě větší váhu než v <h6>. Možná se mýlím (do Googlu nevidím), ale nelze vyloučit, že text v <td> bude mít stejnou nebo vyšší váhu jako stejný text někde v <div> (nebo v nových tagech html5 typu <article>).
Bylo by zajímavé udělat zbrusu nové, ale obsahově stejné stránky - jedny v table layout a druhé v css layout - a porovnávat, která z nich bude ve výsledcích na lepší pozici. Toť pouze můj subjektivní názor...
Petr ZZZ
Profil
Sir Tom:
Bylo by zajímavé udělat zbrusu nové, ale obsahově stejné stránky...

Budou-li obě verze stejné (nemluvím o kódu, ale o výsledném zobrazení obsahu), budou stránky duplicitní a potom se můžou propadnout obě. Nebo vyhledávač duplicitu neobjeví hned, ale těžko se bude kontrolovat, zda na jednu ze stránek někdo bez našeho vědomí neodkazuje a tím neovlivňuje její umístění. Vybere-li vyhledávač jednu z nich a druhou potlačí, může to vůbec mít více různých příčin (např. stáří - sotva se podaří zařídit, aby byly obě stránky stejně staré). Pochybuji, že lze takovým pokusem testovat vliv tabulek na SEO.
Bubák
Profil
Sir Tom:
Možná se mýlím (do Googlu nevidím), ale nelze vyloučit, že text v <td> bude mít stejnou nebo vyšší váhu jako stejný text někde v <div> (nebo v nových tagech html5 typu <article>).
Možná se mýlím (do Googlu nevidím), ale nelze vyloučit, že text v <td> bude mít stejnou nebo nižší váhu jako stejný text někde v <div> (nebo v nových tagech html5 typu <article>)

Bylo by zajímavé udělat zbrusu nové, ale obsahově stejné stránky - jedny v table layout a druhé v css layout - a porovnávat, která z nich bude ve výsledcích na lepší pozici.
V tomto případě se google rozhodne podle toho, kterou stránku "uzná" jako originál, a kterou jako kopii, layout na to nebude mít vliv. Podobné experimenty se dělají jinak.

Koukám, že Petr ZZZ napsal svými slovy v podstatě to samé.

Tabulkový layout jde udělat i bez tabulek využitím CSS, ale starší verze IE tohle neumí, takže čas beztabulkového tabulkového (sic!) layoutu pravděpodobně teprve přijde.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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

0