TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Newbie
mám problém s designem stránek. V programování www stránek jsem začátečník. Takže jsem je dělal pomocí tabulek a design jsem zajišťoval vkládáním obrázků(jpg) do buněk tabulky. Jenže načítání stránky je pak pomalé a jednotlivé obrázky se průběžně načítají , zatímco u kvalitních stránek se zobrazí až po načtení a i to načtení je daleko rychlejší.
Děkuji za odpovědi.
Fórum › HTML / XHTML
Obrázky a design stránky
Nahlásit jako SPAM
IP: 81.25.21.–
Stálý členTo spartan13 : Hoj, tak to je jasné. Tabulky jsou dávno přežitá věc. A dnes se k designu stránek prakticky nepoužívají (nebo já sem se s tím už dlouho nesetkal).
Tak a teď k tvému problému.
1. Stránky se ti načítají pomalu, protože máš všechny obrázky přímo v HTML (alespoň to z textu vyplívá). Na tohle se používají kaskádový styly tzv. CSS. Ty se potom ukladají do samostatného souboru, ten se potom načte při prvním vstupu na tvoje stránky do cache paměti prohlížeče, to má tu výhodu, že když se někdo pohybuje ve stromu tvých stránek tak už se nemusej načítat.
Uvedu příklad:
v html máš třeba:
<div class="obrazek">jak se vede</>to class="obrazek" odkazuje už na styl CSS, takže v souboru s koncovkou .css budeš mít něco takovéhleho:
.obrazek{
background-image: url("obrazek.jpg")}to způsobí, že se na pozadí celého divu obrazek nahraje obrazek.jpg
2. K tomu načení do se dělá pomocí JavaScriptu.
Ještě bych měl dotaz když se nepoužívají tabulky, tak co se používá? (Nedávno jsem používal ještě rámce a bylo mi řečeno že se dávno nepoužívají že se dnes používají tabulky..)
spíše bych poprosil o nějaké odkazy, kde se mám naučit metody, které se dnes používají a ještě kde je dobře popsáno css+javascript. (učil jsem se z toho co je zde v sekci webdesign ale je toho tam celkem málo..)
ještě poznámka: vyhledávač umím používat :smile1: ale ty odkazy prosím kvůli tomu, jestli máte nějaké oblíbené stránky kde je ta problematika popsána kompletně..
To spartan13 :
TvorbaWebu http://www.tvorba-webu.cz/
Jak psat web http://www.jakpsatweb.cz/
Věrný člen
jakpsatweb.cz www.jakpsatweb.cz.....tam najdes uzitecne informace....a to cemu nebudes rozumet, pak dohledas pomoci google.....
To spartan13 : ještě je celkem dobrá http://tvorba-webu.zdarek.com/, ale jinak jakpsatweb.cz je taky dobrá. Ale čím víc zdrojů máš tak to máš snažší můžeš porovnávat. A navíc určitě někde bude něco co jinde není.
Ještě bych stručně naznačil jak na to aby se obrázky ukázali, až po jejich úplném načtení.
v html u obrázku:
<img src="obrazek.gif" onload="ukaz(this)">a pak někde soubor skript.js:
function ukaz()
{
...
};Napsání funkce už nechám na tebe, lepší je si to zkusit sám, než když to jen bezmyšlenkovitě opíšeš.
To selkir : takže css se zde nepoužije? Ale hlavně jsem se chtěl zeptat, když se tabulky už nepoužívají co se tedy používá?
javascript mi tedy zatím nic neříká, takže to budu muset dohnat ale jak jsem tak koukal, že se tam něco vypisuje apod. jakou má výhodu javascript proti php? Nebo spíše v čem se liší?
To spartan13 : Tak asi takhle.
Dnes se používají divy tzv. bloky a také spany. Rozdíl je v tom takovej, že do spanu nedáš žádnej blokovej tag, tak třeba <p>. Do divu samozřejmě ano.
Jak se to používá:
tak máš třeba html asi nějak tahkle:
<p>Ahoj jak se vede</p>
<img src="obr.gif">-tak výsledek tohodle kódu bude takový, že nejdřív bude text, a pak obrázek
ale když uděláš tohle:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styl.css" media="all" /> <!--odkaz na externí soubor styl.css -->
</head>
<body>
<p id="text">Ahoj jak se vede</>
<img id="obrazek" src="obr.gif">
</body>
</html>
a teď ještě soubor styl.css a v něm:
#text{
color: white;
position: absolute;
left: 150px;
top: 150px;
}
#obrazek{
positon: absolute;
left: 30px;
top: 30px;
}-tak tady bude nejdřív obrázek a pak někde uprostřed stránky text
To spartan13 : Tak a teď přímo k divům.
Tak do těch můžeš uzavřít prostě třeba ten text z předchozího příkladu společně s tím obrázkem:
<div class="hoj">
<p></p>
<img>
</div>A zase v externím souboru pomocí CSS nastavit vlastnosti pro celej div, tedy pro obrátzek a odstavec současně. A samozřejmě opět tág <p> a <img> můžou mít své vlastní styly, ale protože jsou uzavřené v divu, který má taky vlastní styl tak se přednostně budou řídit stylem divy a jejich vlastní styl bude jen rozšíření pro to co styl divu neurčuje.
Teď ještě krátce k tomu id a class. Oboje popisuje jistý tág, tak aby ho css poznalo, ale s tím rozdílem, že id se může v celém dokumentu vyskytovat pouze jednou, zato class může být použito třeba pro více divů.
To spartan13 : Na závěr krátce k JS a PHP. Tak v JS se píší hlavně události. Třeba když se načte okno tak se něco stane a tak. Zado v PHP se spíš píší větší věci jako třeba diskuzní fórum, kniha hostů a tak. A samozřejmě spousta věcí je společných třeba čas na stránkách, počet přístupů a tak.
Ale nejprv se nauč HTML a CSS a pak až to budeš ovládat a chápat tak teprve JS nebo PHP. :smile2:
děkuji za vyčerpávající informace :-)). Já jsem to udělal přesně naopak nejdříve jsem se naučil trochu html pak php (komunikaci s mysql dělal jsem i nějaké jednoduchá fóra..) a k css jsem se dostal až včera. Moc se mi nechtělo se učit ještě JS, protože se mi to zdálo nahraditelný php. A navíc php je podle mě důležitější, jinak se nedá komunikovat s DB..
To spartan13 : Tak to bych tak jednoznačně netvrdil. JS je taky nenahraditelný jinak by již nebylo. PHP není dělaný pro události. A navís na jednoduchým webu nebudu používat PHP když stačí JS. To je prostě zbytečný.
Super členco tak ako by ste riesili takyto problem:
-> vertikalne menu
-> stranka zarovnana na stred o velkosti 1000px -to je jednoduche pisem to len preto aby som vylucil moznost
pouzit absolutne pozicoivanie
-> a obsah aby sa zobrazoval tesne vedla menu (nie pod)
ja som to inak ako tabulkami vyriestit nevedel
ako teda na to pomocou span-ov a div-ov ??
To netman92 : určitě se to dá.
Tak proč když máš stránku zarovnanou na střed bys nemohl použít absolutní pozicování?
Jestli jsem to správně pochopil, tak asi nějak takhle:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<link rel="stylesheet" type="text/css" href="styl.css" media="all" />
<title></title>
</head>
<body>
<div id="stranka" align="center">
<div id="menu">
<ul>
<li>jak se vede</li>
</ul>
</div>
<div id="okoli">
test jak se vede
</div>
</div>
</body>
</html>a css:
#stranka{
height: 1000px;
}
#okoli{
position: absolute;
left: 590px;
top: 15px;}Jen bych chtěl zdůraznit, že neříkám, že css je jedinná možnost. To určitě ne, ale nedokážu si představit nějakej rozsáhlej web, třeba tenhle, jak je dělanej pomocí tabulky.
To selkir :
1)ked das do stranky <div id="stranka" align="center">
validator ti vyhodi chybu ..
2) ked das 2 divi tiez sa daju pod seba
3) nemozes pouzit abostne poz. lebo nevies ake rozlisenie ma dany klient a ked bude mat 800na 600 isto
sa mu to zobrazi iank ako na 1200x1600 :smile4:
Nejaky iny navrh
To netman92 : add 1) to je nesmysl mě ji nevyhodí, add 2) nevim co myslíš, add 3) to by se dalo uznat, ale pak by to znamenalo,že absolutní pozice je na nic. A to je přinejmenším divný?!
To netman92 : Teď mi tak napadlo, že kdybych to chtěl hodně řešit tak bych přes JS zjistil rozlišení a pak bych podle toho měnil pozice v css, ale docela otrava.
1) ked nas xhtml strict tak hej ...
2)2 divi napisane za sebou sa automaticky daju pod seba bez poziciovana
3)no asi to bude s poziciovanim bohuzial tak vyuzil som to iba ked som robil
nejaku mapu a na dane suradnice som pomocou js vkladal objekty lae boli to suradnice divu
nie celeho okna
To netman92 : Tak jasně xhtml chápu psal jsem to pro html, ty dva divy tak to je jasný, že se dají pod sebe, teď mě tak napadá, že by se to dalo celé řešit obtékáním.
Jinak s tím pozicováním, ono když chceš používat absolute tak se podle mě vyplatí si stanovit, že celá tvoje stránka bude jeden div, kterej bude mít daný rozměry. A pak je pozicování hračka.
To netman92 : no tak obtékání udělá to samé co position: absolute, taky vyjme objekt z toku dokumentu. Ale jako všechno to má svý mouchy, tak třeba problém s posouváním (ale dá se to řešit pomocí vlastnosti clear).
citace z jakpsatweb.czPoslední dobou se obtékání používá pro globální rozložení prvků stránky namísto tabulek. Přitom se vedle sebe dávají dva oddíly (nejčastěji tagy <div>), které mají nastavenu šířku a obtékání (float left nebo right).
a ukázka kódu od tamtéž:
<style>
#menu {width: 20%; float: left}
#hlavni {width: 78%; float: right}
</style>
...
<div id="menu">levé menu</div>
<div id="hlavni">hlavní obsah ...</div>To selkir :
Takže jsem se snad trochu prokousal nějakými základy css a javascriptu.
a udělal jsem to tak, že jsem obrázek přednačetl tímto způsobem:
obr1=new Image();
obr1.src="cesta";
jenže mi to přijde takové dost nešikovné.. máte někdo jiný nápad?
To spartan13 : podle mě je to přednačtení vcelku dost elegantní řešení tvého problému
Zjistit počet nových příspěvků
Přidej příspěvek
Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!
Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku
×Vložení zdrojáku
×Vložení obrázku
×Vložení videa
Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
Uživatelé prohlížející si toto vlákno
Uživatelé on-line: 0 registrovaných, 10 hostů
Podobná vlákna
Chci replacnout adresu stránky na které se právě nacházím, bez refre… — založil Elhomero
Design třídy... — založil oxidián
How To Design Any Logo? — založil RockMilli
Design editor — založil Elited
Design CMS — založil Zelenáč
Moderátoři diskuze
