Sova v síti - 2/4 - vydáno 18.3.2002

Dobrý den, po dlouhé přestávce je zde vaše Sova v síti :-)

OBSAH

-- Obrázková galerie pomocí CSS
-- Zajímavé články jinde na webu
-- Novinky u Petra Kocny
-- Odpovídáme na dotazy čtenářů


Na úvod se opět musíme omluvit za dlouhou pauzu. Stále se nám
nedaří najít na Sovu tolik času, kolik bychom si přáli. Ze
stejného důvodu zde dnes opět nenajdete avizovaný článek "Proč
(ne)otevírat odkazy do nového okna", který uveřejníme v příštím
čísle.

Zároveň vyzýváme všechny čtenáře, kteří dobře ovládají HTML, CSS,
nebo jakoukoli jinou specializaci z oblasti tvorby webu, aby se
o své znalosti podělili s ostatními a zkusili pro Sovu něco
napsat. Podrobnější informace sdělíme na vyžádání na adrese
mailto:redakce@sovavsiti.cz.


OBRÁZKOVÁ GALERIE POMOCÍ CSS

Marek Prokop

Obrázková galerie, to jest stránka s mnoha malými náhledy
obrázků, které slouží jako odkaz na jejich plné verze, se obvykle
řeší tabulkou (značky <table>, <tr> a <td>). Z pohledu čístoty
jazyka HTML však toto řešení není správné. Jak ale tabulku
nahradit?

S kaskádovými styly (CSS) to jde překvapivě snadno. Dokonce
můžeme udělat i něco, co tabulka neumí -- galerii s plovoucí
šířkou. Tu vám ukážu v dnešním prvním příkladu. Jako druhý
příklad jsem pak připravil "klasickou" galerii s pevně daným
počtem obrázků na řádku, avšak opět bez pomoci tabulek.

+ Galerie s plovoucí šířkou

První příklad naleznete na stránce

http://www.sovavsiti.cz/samples/samp02041a.html

Pokud si příklad otevřete prohlížečem podporujícím CSS (tj.
IE 4+, Opera 5+, Mozilla/NN 6), uvidíte 10 malých obrázků.
Některé jsou orientovány na šířku, některé na výšku; pod každým
je textový titulek.

Důležité je, že stránka se roztahuje podle šířky okna prohlížeče,
takže při šířce 800 pixelů uvidíte 2 řady po 5 obrázcích, při
šířce 600 pixelů se vejdou na jeden řádek jen 4 obrázky (a řady
jsou tedy 3) a při šířce 1000 pixelů se do řady vejde obrázků 7.

Pokud byste se podívali některým starým prohlížečem bez podpory
CSS, viděli byste obrázky pod sebou, nikoli v řadách.

Zdrojový kód stránky je velmi jednoduchý. Každý obrázek je
uzavřen v prvku <div> takto:

<div class="thumbnail">
	<img src="obr1.jpg" alt="Obrázek 1" width="100" height="75" />
	<p>Titulek obrázku 1</p>
</div>

a tyto bloky jsou řazeny jeden za druhým.

V definici stylů jsou pak třídě "thumbnail" přiřazeny tyto
vlastnosti:

div.thumbnail {
	float: left;
	width: 120px;
	height: 180px;
	margin: 1em;
	text-align: center;
	font-size: 0.8em;
}

Podstatná je vlastnost "float: left", protože právě ta způsobuje,
že se obrázky řadí do řádků (dokud je v okně prohlížeče místo)
a ne pod sebe.

Vlastnosti "width" a "height" určují rozměry bloku obrázku včetně
jeho titulku. Pro všechny obrázky jsou stejné, neboť jinak by
náhledy v řádce nepěkně "skákaly". Důležité je správně dimenzovat
výšku ("height"), aby se do ní vešel i ten nejvyšší obrázek i se
svým titulkem.

Vlastnost "margin: 1em" zajišťuje odstup jednotlivých obrázků od
sebe, a to jak horizontálně, tak vertikálně. Vlastnost
"text-align: center" centruje obrázek i titulek v rámci bloku
(který je 120 pixelů široký -- "width: 120px") a vlastnost
"font-size: 0.8em" nastavuje velikost písma titulku na 80%
základní velikosti písma stránky.

Důležité je, že galerie musí být ukončena odstavcem (nebo jiným
prvkem) s vlastností "clear: both".

+ Galerie s pevnou šířkou

Galerie s pevnou šířkou dá v CSS, ku podivu, o něco víc práce.
Pevnou šířkou v tomto případě ale nemyslím šířku stránky (ta je
plovoucí jako v předešlém případě), ale počet obrázků na řádek.
V příkladu, který naleznete na adrese

http://www.sovavsiti.cz/samples/samp02041b.html

jsou na řádky vždy dva obrázky a každý je vodorvně vystředěn do
bloku, který zabírá 45% šířky okna prohlížeče.

Zdrojový kód stránky je tentokrát složitější. Každý řádek galerie
vypadá takto:

<div class="row">
	<div class="left">
		<img src="obr1.jpg" width="256" height="192" alt="Obr, 1" />
		<p>Titulek obrázku 1</p>
	</div>
	<div class="right">
		<img src="obr1.jpg" width="256" height="192" alt="Obr. 2" />
		<p>Titulek obrázku 2</p>
	</div>
</div>

Jak vidíte, jsou zde hned tři třídy -- "row", která vymezuje blok
řádku, "left" označující levý obrázek a "right" pro pravý
obrázek. Tyto třídy jsou definovány takto:

.row {
	clear: both;
	width: 90%;
	margin: 10px 4%;
}
.left {
	float: left;
	width: 49%;
	text-align: center;
}
.right {
	float: left;
	width: 49%;
	text-align: center;
}

Obrázky uvnitř bloků "left" a "right" mají navíc nastaveny okraje
takto:

.left img, .right img {
	margin: 10px auto;
}

Přeji vám hezké obrázky ve vaší galerii.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Doporučte sovu v síti vašim přátelům. Přepošlete jim toto číslo,
nebo použijte formulář na http://www.sovavsiti.cz/recommend.html
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


ZAJÍMAVÉ ČLÁNKY JINDE NA WEBU

Typografické minimum: základní pojmy
Martin Kopta pokračuje v seriálu o typografii na webu článkem
o základní terminologii typografie.
http://www.interval.cz/r-article.asp?id=938

Třísloupcový plovoucí CSS layout s relativním pozicováním
Miroslav Kučera sype z rukávu jeden CSS layout za druhým. Ten
zatím poslední naleznete popsaný na
http://www.interval.cz/r-article.asp?id=1022


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Starší čísla naleznete na http://www.sovavsiti.cz/archiv.html
Více odkazů pro webmastery na http://www.sovavsiti.cz/odkazy.html
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


NOVINKY U PETRA KOCNY K 13. 3. 2002
... v katalgu katalogů http://www.lf1.cuni.cz/~kocna/kam-www.htm
a vyhledávačů http://www.lf1.cuni.cz/~kocna/roboti.htm

Zařazeny další nové seznamy a stránky s odkazy, či výměnou
ikonek, ke dnešními dni je jich 192,

Internetový rozcestník, další portál + rozcestník, vznikl
v listopadu 2000, rozcestník má 18 kategorií a cca 1700 odkazů,
správce nabízí i výměnu ikonky (kontakt E-mailem), prohledávání
serveru není žádné. URL je http://www.hyperlink.cz/hamrimk,
nabízí sledování počtu kliknutí na odkaz, jednoduché vyhledávání
na jiných českých a světových vyhledavačích.

Nové centrum Alfa-elchron - staré stránky skončily, odkazy nutno
vložit znovu, k dispizici je 266 kategorii,
URL http://www.elchron.iol.cz/alfa.

Vlastnosti nové verze:
- plnohodnotné vyhledávání v zařazených odkazech
- možnost pridávání komentářů k zařazeným odkazům
- snadná editace již zařazených odkazů
- sledování počtu kliknutí na odkaz
- jednoduché vyhledávání na jiných českých a světových
vyhledavačích

Health.Cz, redakce nám i v březnu stále přeje veselé vánoce,
žádne odkazy zatím do databáze nezařadili.

Cz.Versions, stále v rekonstrukci, nyni již nefunguje na
stránkách nic.

Na WWW site - HTML Help (URL
http://www.lf1.cuni.cz/~kocna/htmlhelp.htm)
je zařazena nová rurika - tickery, je zde samostatný dokument
věnovaný tomuto tématu s ukázkou asi 25 českých i zahraničních
tickerů zobrazující aktuální novinky, titulky zpravodajství
z domova, zahraniči i odborně zaměřené.


ODPOVÍDÁME NA DOTAZY ČTENÁŘŮ

Dotaz:
Zatim jsem nikde nenarazil na navod, jak pouzit svuj font na
strankach.

Odpověď:
Obecne to nejde, pro MS IE však řešení existuje a naleznete ho
popsané na stránce http://www.microsoft.com/typography/

Dotaz:
Zajimalo by me zda je mozne obdrzet i starsi zpravy, kdyz jsem se
k odberu ezinu prihlasil prave dnes.

Odpověď:
To je poslední dobou velmi častý dotaz. Všechna čísla jsou
uložena v archivu a odkazy na ně, jako na soubory s příponou txt,
vedou ze stránky http://www.sovavsiti.cz/archiv.html. Stačí tedy
nejaký "stahovač" stránek a za chvíli je máte doma :-)

Dotaz:
Můj problém spočívá v tom, že bych chtěl dostat svoje stránky,
nebo aspoň odkaz na ně do vyhledávačů a to především českých,
něco jsem na netu našel, myslím tím software, ale je spíše
zaměřený na zahraniční vyhledavače a já bych byl vděčný za
nějakou pomoc v tomto směru, obzvlášť za nějaké to echo o českém
programu na české vyhledavače.

Odpověď:
Ten program se jmenuje internetový prohlížeč. Otevřete si jím
postupně všechny důležité katalogy (Seznam, Centrum, atd.)
a postupujete podle návodu, jak přidat odkaz, který je na nich
vždy uveřejněn. Hodně vám v tom pomůže stránka Petra Kocny, jejíž
adresu naleznete o něco výše.

Pokud hledáte nějaké automatizované řešení, musím vás zklamat.
Žádné opravdu dobré neexistuje.

Dotaz:
Na w3c jsem nenasel omezeni nazvu trid CSS, ale pri validaci mi
hlasi chybu, protoze mam tridu pojmenovanou abc_def.

Odpověď:
Špatně jste hledal. V názvu třídy mohou být jen písmena, číslice
a znak mínus (pomlčka). Název musí začínat písmenem.


A to je pro dnešek. Těšíme se na shledanou v pondělí 1.4.2002,
kdy v jubilejní, "výroční" Sově naleznete:

-- Proč (ne)otevírat odkazy do nového okna -- ačkoli je otevření
odkazu do nového okna někdy praktické, většinou z toho uživatel
velkou radost nemá. Čím se řídit, abyste mu práci s odkazy co
nejvíc usnadnili?

-- Odpovědi na vaše dotazy, zajímavé odkazy, novinky v katalogu
katalogů a vyhledávačů Petra Kocny, novinky na Slunečnici atd.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Nechcete, nebo naopak chcete dostávat Sovu v síti?
Odběr lze odhlásit odesláním zprávy na unsubscribe@sovavsiti.cz.
Přihlásit se lze odesláním zprávy na subscribe@sovavsiti.cz, nebo
formulářem na adrese http://www.sovavsiti.cz/.
Chcete nám cokoli sdělit? Uvítáme vaše náměty, připomínky,
kritiku, atd. na adrese mailto:redakce@sovavsiti.cz.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Není-li v konkrétním případě uvedeno jinak, je autorem všech
publikovaných článků Marek Prokop. Tento ezin, nebo jeho
libovolnou část můžete volně šířit dále, pokud současně uvedete
zdroj následujícím způsobem:
_________________________________________________________________
Sova v síti -- (c) 2001 Marek Prokop -- http://www.sovavsiti.cz/