Obrázky a design stránky – HTML / XHTML – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Obrázky a design stránky – HTML / XHTML – Fórum – Programujte.comObrázky a design stránky – HTML / XHTML – Fórum – Programujte.com

 

spartan130
Newbie
3. 7. 2008   #1
-
0
-

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.

Nahlásit jako SPAM
IP: 81.25.21.–
selkir0
Stálý člen
3. 7. 2008   #2
-
0
-

To 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.

Nahlásit jako SPAM
IP: 78.108.102.–
"Je lépe mlčet a být považován za blázna, než promluvit a odstranit tak všechny pochyby." [br] Abraham Lincoln [br] [br]"I cesta na stovky mil začíná prvním krokem"
spartan130
Newbie
7. 7. 2008   #3
-
0
-

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ě..

Nahlásit jako SPAM
IP: 81.25.21.–
Ruda0
Newbie
7. 7. 2008   #4
-
0
-
Nahlásit jako SPAM
IP: 88.103.125.–
Earl Cash0
Věrný člen
7. 7. 2008   #5
-
0
-

jakpsatweb.cz www.jakpsatweb.cz.....tam najdes uzitecne informace....a to cemu nebudes rozumet, pak dohledas pomoci google.....

Nahlásit jako SPAM
IP: 193.85.184.–
Oh my goodness, shut me down! Machines making machines. How perverse. (C-3PO)
Earl Cash0
Věrný člen
7. 7. 2008   #6
-
0
-

To Ruda : tak jsi byl rychlejsi ;)

Nahlásit jako SPAM
IP: 193.85.184.–
Oh my goodness, shut me down! Machines making machines. How perverse. (C-3PO)
selkir0
Stálý člen
7. 7. 2008   #7
-
0
-

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í.

Nahlásit jako SPAM
IP: 78.108.102.–
"Je lépe mlčet a být považován za blázna, než promluvit a odstranit tak všechny pochyby." [br] Abraham Lincoln [br] [br]"I cesta na stovky mil začíná prvním krokem"
selkir0
Stálý člen
7. 7. 2008   #8
-
0
-

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š.

Nahlásit jako SPAM
IP: 78.108.102.–
"Je lépe mlčet a být považován za blázna, než promluvit a odstranit tak všechny pochyby." [br] Abraham Lincoln [br] [br]"I cesta na stovky mil začíná prvním krokem"
spartan130
Newbie
7. 7. 2008   #9
-
0
-

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ší?

Nahlásit jako SPAM
IP: 81.25.21.–
selkir0
Stálý člen
7. 7. 2008   #10
-
0
-

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

Nahlásit jako SPAM
IP: 78.108.102.–
"Je lépe mlčet a být považován za blázna, než promluvit a odstranit tak všechny pochyby." [br] Abraham Lincoln [br] [br]"I cesta na stovky mil začíná prvním krokem"
selkir0
Stálý člen
7. 7. 2008   #11
-
0
-

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ů.

Nahlásit jako SPAM
IP: 78.108.102.–
"Je lépe mlčet a být považován za blázna, než promluvit a odstranit tak všechny pochyby." [br] Abraham Lincoln [br] [br]"I cesta na stovky mil začíná prvním krokem"
selkir0
Stálý člen
7. 7. 2008   #12
-
0
-

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:

Nahlásit jako SPAM
IP: 78.108.102.–
"Je lépe mlčet a být považován za blázna, než promluvit a odstranit tak všechny pochyby." [br] Abraham Lincoln [br] [br]"I cesta na stovky mil začíná prvním krokem"
spartan130
Newbie
7. 7. 2008   #13
-
0
-

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..

Nahlásit jako SPAM
IP: 81.25.21.–
selkir0
Stálý člen
7. 7. 2008   #14
-
0
-

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ý.

Nahlásit jako SPAM
IP: 78.108.102.–
"Je lépe mlčet a být považován za blázna, než promluvit a odstranit tak všechny pochyby." [br] Abraham Lincoln [br] [br]"I cesta na stovky mil začíná prvním krokem"
netman920
Super člen
7. 7. 2008   #15
-
0
-

co 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 ??

Nahlásit jako SPAM
IP: 195.91.54.–
selkir0
Stálý člen
7. 7. 2008   #16
-
0
-

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.

Nahlásit jako SPAM
IP: 78.108.102.–
"Je lépe mlčet a být považován za blázna, než promluvit a odstranit tak všechny pochyby." [br] Abraham Lincoln [br] [br]"I cesta na stovky mil začíná prvním krokem"
netman920
Super člen
7. 7. 2008   #17
-
0
-

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

Nahlásit jako SPAM
IP: 195.91.54.–
selkir0
Stálý člen
7. 7. 2008   #18
-
0
-

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ý?!

Nahlásit jako SPAM
IP: 78.108.102.–
"Je lépe mlčet a být považován za blázna, než promluvit a odstranit tak všechny pochyby." [br] Abraham Lincoln [br] [br]"I cesta na stovky mil začíná prvním krokem"
selkir0
Stálý člen
7. 7. 2008   #19
-
0
-

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.

Nahlásit jako SPAM
IP: 78.108.102.–
"Je lépe mlčet a být považován za blázna, než promluvit a odstranit tak všechny pochyby." [br] Abraham Lincoln [br] [br]"I cesta na stovky mil začíná prvním krokem"
netman920
Super člen
7. 7. 2008   #20
-
0
-

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

Nahlásit jako SPAM
IP: 195.91.54.–
selkir0
Stálý člen
7. 7. 2008   #21
-
0
-

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.

Nahlásit jako SPAM
IP: 78.108.102.–
"Je lépe mlčet a být považován za blázna, než promluvit a odstranit tak všechny pochyby." [br] Abraham Lincoln [br] [br]"I cesta na stovky mil začíná prvním krokem"
netman920
Super člen
7. 7. 2008   #22
-
0
-

no hej ale ja som sa pôvodne pytal ze ako
pomocou div-ov a span-ov?
a ako stym "obtékanim"?

Nahlásit jako SPAM
IP: 195.91.54.–
selkir0
Stálý člen
8. 7. 2008   #23
-
0
-

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).

Poslední 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).

citace z jakpsatweb.cz

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>

Nahlásit jako SPAM
IP: 78.108.102.–
"Je lépe mlčet a být považován za blázna, než promluvit a odstranit tak všechny pochyby." [br] Abraham Lincoln [br] [br]"I cesta na stovky mil začíná prvním krokem"
spartan130
Newbie
9. 7. 2008   #24
-
0
-

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?

Nahlásit jako SPAM
IP: 81.25.21.–
selkir0
Stálý člen
10. 7. 2008   #25
-
0
-

To spartan13 : podle mě je to přednačtení vcelku dost elegantní řešení tvého problému

Nahlásit jako SPAM
IP: 78.108.102.–
"Je lépe mlčet a být považován za blázna, než promluvit a odstranit tak všechny pochyby." [br] Abraham Lincoln [br] [br]"I cesta na stovky mil začíná prvním krokem"
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žit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 12 hostů

Podobná vlákna

How To Design Any Logo? — založil RockMilli

Design editor — založil Elited

Design třídy... — založil oxidián

Design CMS — založil Zelenáč

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032024 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý