Sova v síti - 2/2 - vydáno 21.1.2002

Dobrý den, je zde pondělí a s ním vaše Sova v síti :-)

OBSAH

-- Tisk WWW stránek pomocí CSS
-- Tabulky snadno a rychle
-- Odpovídáme na dotazy čtenářů


TISK WWW STRÁNEK POMOCÍ CSS

Marek Prokop

Nedávno jsme původní plovoucí šířku (width:100%) stránek Sovy
v síti změnili na pevnou šířku 760 pixelů. Slibovali jsme si od
toho, že se bude lépe číst v široce roztaženém okně prohlížeče.
Ale ouha. Krátce po změně nám čtenář Michal Zajíc napsal:

"ctu vas velmi rad a mate moc zajimave clanky. Docela mne ale
mrzi, ze ac jsem podle vasich navodu stvoril webove stranky,
nejdou mi tisknout. IE5.5 i Mozilla 0.9.6 netisknou nebo tisknou
spatne pokud je web stranka delsi nez jeden format tistene
strany. Jelikoz jsem si "sproste" opalil vase styly tak me
zajimalo jestli to dela i na Vasich strankach. Zkousel jsem tu
uvodni http://sovavsiti.cz a je tomu skutecne tak. ano IE ani
mozilla mi ji nevytiskne. Nevite cim to je?"

Pan Zajíc má pravdu. Stránky s pevnou, v pixlech definovanou
šířkou přesahující šířku tištitelné strany nejsou pro tisk právě
ideální. Co s tím, když k plovoucí šířce se nám vracet nechce?
Naštěstí nabízejí kaskádové styly elegantní řešení.


+ Druhy výstupních médií v CSS

Kaskádové styly byly velmi prozíravě navrženy tak, že lze
definovat různá pravidla pro různá výstupní média. Dle normy jsou
těmi výstupními médii:

aural -- hlasový výstup
braille -- výstup v braillově slepeckém písmu
embossed -- výstup pro braillovské tiskárny
handheld -- úzká obrazovka miniaturních zařízení
print -- tisk na počítačové tiskárně
projection -- prezentace určené k promítání
screen -- běžný počítačový monitor
tty -- textový terminál
tv -- televizní obrazovka

Kromě toho existuje univerzální médium "all", které zahrnuje
všechny ostatní.

Zatímco některá z výše uvedených médií vypadá dost exoticky
a jejich podpora v prohlížečích může být sporná, těmi podstatnými
a k řešení našeho problému plně použitelnými jsou média "screen"
a "print".


+ Vzorový příklad

Konkrétní, dále popsané řešení není v tomto okamžiku ještě na
stránkách Sovy v síti použito, místo toho jsme vám však
připravili vzorovou stránku se vzorovými stylesheety. Stránku
naleznete na adrese

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

Vzorové stylesheety jsou dva:

http://www.sovavsiti.cz/samples/samp0202a.css
je společným pro všechna média, tj. v hlavně obrazovku
a tiskárnu.

http://www.sovavsiti.cz/samples/samp0202p.css
slouží pouze pro tisk, neboli médium "print".


+ Struktura stránky

Popišme si nejprve krátce strukturu vzorové stránky. V podstatě
se jedná o zjednodušenou šablonu stránek Sovy v síti. Layout je
utvořen výhradně kaskádovými styly, na celé stránce není jediná
tabulka. Strukturu tvoří 5 základních prvků:

1) Záhlaví osahující logo, název a moto webu.

2) Levý sloupec, do kterého může být umístěno hlavní menu,
formulář pro vyhledávání, a pod.

3) Střední sloupec určený pro hlavní obsah stránky.

4) Pravý sloupec, který může obsahovat různé upoutávky, reklamy,
loga spřátelených serverů, atd.

5) Zápatí, obvykle obsahující údaje o autorských právech, kontakt
na webmastera, či dopl%nující odkazy.

Všech pět těchto prvků je vymezeno značkou <div>, vždy
jednoznačně identifikovanou atributem id. Celá stránka je navíc
zabalena do jednoho prvku <div id="page">, který slouží jako
jakási obálka. Svá jednoznačná id mají i logo a oba řádky
záhlaví.

Umístění všech prvků a jejich vlastnosti jsou plně řízeny CSS.
Samotná stránka je vytvořena podle normy XHTML Strict
a neobsahuje tedy žádnou prezentační značku či atribut. Toto
uspořádání umožňuje využít CSS na maximum a zároveň garantuje
plnou přístupnost obsahu stránky libovolným prohlížečem či jiným
zařízením.


+ Připojení stylesheetů ke stránce

Podíváte-li se do zdrojového kódu vzorové stránky, zjistíte, že
stylesheety jsou připojeny v hlavičce (HEAD) dokumentu takto:

<style media="all" type="text/css">
	@import "samp0202a.css";
</style>
<link href="samp0202p.css" media="print" rel="stylesheet"
type="text/css" />

Způsob připojení prvního stylesheetu již možná znáte ze starších
článků. Je použit proto, že ho znají pouze prohlížeče s dobrou
podporou CSS, jmenovitě MSIE 5+, Mozilla a Opera 5+. Tím jsou
starší prohlížeče od stylesheetu odstřiženi a nemohou tedy
zobrazení stránky ošklivě pokazit (což by jinak NN4, ale i IE4
s chutí udělali ;-)).

Podstatné je, že atribut media značky <style> má hodnotu "all".
Tento stylesheet se tedy použije pro všechna média -- obrazovku,
tiskárnu i další.

Naproti tomu druhý stylesheet, připojený značkou <link> má
atribut media nastaven na hodnotu "print". To znamená, že se
použije pouze při tisku na tiskárnu. Při tomto způsobu připojení
navíc platí, že z pravidel, která se v obou stylesheetech
překrývají, mají při tisku přednost pravidla z druhého z nich.


+ Rozdíly mezi stylesheety

Z pravidel CSS a způsobu připojení obou stylesheetů vyplývá, že
pro zobrazení na monitoru použije prohlížeč pouze stylesheet
samp0202a.css. Při tisku použije oba stylesheety, ale v případě
kolize pravidel upřednostní ta ze stylesheetu samp0202p.css.

Podívejme se tedy, jaká pravidla jsme ve stylesheetu pro tisk
změnili.

V prvé řadě bylo třeba změnit pevnou šířku stránky. Ta je
v základním stylesheetu určena šířkou obálky stránky #page
a středního sloupce #maincontent takto:

#page {width: 760px}
#maincontent {width: 450px}

Vs stylesheetu pro tisk jsou obě šířky změněny na plnou
tisknutelnou šířku stránky takto:

#page {width: 100%}
#maincontent {width: 100%}

Spolu se změnou šířky je vhodné i změnit způsob určení velikosti
písma. Zatímco v základním stylesheetu je velikost písma
definována v pixelech (px), pro tisk se lépe hodí typografické
body (pt). Zároveň jsme zaměnili i font z původní, ryze obrazovké
Verdany, na patkový a na papíře lépe čitelný Times. Třetí změna
spočívala ve zmenšení řádkování na 1, oproti původnímu, na
obrazovce čitelnějšímu řádkování 1,5.

Upravené pravidlo vypadá takto:

body {
  font: 12pt/1 "Times CE", Times, "Times New Roman", serif;
}

Další změny mají za úkol ukrýt to, co je pro vytisknutý examplář
stránky rušivé či zbytečné. Konkrétně se jedná o gradient na
levém okraji stránky tvořený obrázkem na pozadí, grafické logo
v záhlaví a oba krajní sloupce. Příslušná pravidla vypadají
takto:

#page {background: #ffffff none}
#toplogo {display: none}
#topmenu {display: none}
#sidebar {display: none}


+ Související odkazy

CSS nabízejí pro řízení tisku ještě další možnosti. Chcete-li se
dozvědět víc, doporučuji vám tyto články:

-- Použití CSS pro zalomení stránky na tiskárně
Dvoudílný článek Miroslava Kučery na Intervalu.cz.
http://interval.cz/r-article.asp?id=835
http://interval.cz/r-article.asp?id=836

-- Praktická příručka CSS, 5. díl - Média
ze seriálu o CSS, který z pera Petra Staníčka vychází na WebTipu.
http://www.webtip.cz/art/wt_p_html/wt_cssserial_005.html

-- Odlišné formátování tisku
na stránkách Jak psát web Dušana "Yuhů" Janovského.
http://dusan.pc-slany.cz/internet/css_print.htm


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


TABULKY SNADNO A RYCHLE

Marek Prokop

Jistě už jste někdy potřebovali převést do HTML tabulku např.
z Wordu, Excelu, či z nějaké databáze. Na konverzní funkce MS
Office se moc spolehát nedá a většinou tedy nezbývá než úmorná
ruční práce. To již však patří minulosti.

V první polovině ledna se objevil nový český program Jana
Stodůlky s jednoduchým názvem HTML Tabulka. Je určen pro všechna
32-bitová Windows (Windows 95/98/ME/NT/2000) a je zcela zdarma.

+ Instalace

Program jsem si stáhnul z jeho stránky na Slunečnici
http://www.slunecnice.cz/sw/HTMLTabulka ,
kde je uložen v 280 kB velikém zazipovaném archivu. Po rozbalení
získáte jediný EXE soubor veliký 559 kB a datovaný 11.1.2002.
Verze programu je označena 1.1. Žádná instalace se nekoná, vše je
ihned připraveno k práci.


+ Použití

Po spuštění se objeví malé okno s pěti záložkami a pár příkazy
hlavního menu. Aktivní je první záložka obsahující jedinou
velikou vstupní plochu pro zdrojovou tabulku.

Zdrojovou tabulku můžete zkopírovat do schránky Windows
prakticky v jakémkoli programu. Já jsem zkoušel Word, Excel
a export z databáze se sloupci oddělenými znakem Tabelátor.

Do programu HTML Tabulka obsah schránky zkopírujete příkazem
Vložit. Je-li třeba, můžete data v editační ploše dodatečně ručně
upravit, v mém případě to však bylo zbytečné.

Pokračoval jsem tedy příkazem "Konverze do buněk", který zobrazí
další záložku, "Buňky", a v ní přehlednou mřížky obsahující
vložená data. Zde lze tabulku "oříznout" na menší počet řádků
a/nebo sloupců, nastavit horizontální zarovnání jednotlivých
sloupců a určet počet řádků shora, které mají tvořit záhlaví
tabulky (značka <thead>, resp. <th>).

Příkazem "Buňky" lze nyní provést zrdcadlové převrácení (tj.
změnu pořadí) řádků nebo sloupců a velmi užitečná je možnost
vytvoření křížové tabulky (v programu označeno jako převrácení
šikmo), kdy se vzájemně zamění sloupce a řádky.

Na záložce "Parametry" je nyní vhodné nastavit, jak má výsledná
HTML tabulka vypadat. Nabízí se mnoho možností, např.:

-- CSS třídy pro formátování buněk záhlaví
-- CSS třídy pro formátování buněk sudých a lichých řádků
-- automaticky vložený text před/za obsah vybraných buňek
-- co vkládat do prázdných buněk
-- zda použít u všech buněk atribut valign="top"
-- odsazení zdrojového kódu tabulky
-- volitelné použití značek <thead> a <tbody>

Nakonec stačí provést příkaz "Výstup - table" a na čtvrté záložce
se díváte na hotovou tabulku v HTML. Tu již stačí zkopírovat do
schránky (příkaz "Kopírovat") a vlepit do požadovaného dokumentu
ve vašem editoru.


+ Hodnocení

Dle mého názoru se jedná o velmi zdařilý, byť jednoduchý program.
Mezi hlavní klady řadím:

-- Jediný malý výkonný soubor, bez nutnosti instalovat.

-- Velmi pohodlnou a rychlou práci s programem.

-- Pro většinu úkolů dostatečné možnosti parametrizace.

-- Skvělá možnost automatického provedení programu z příkazové
řádky.

Ačkoli klady jednoznačně převažují nad zápory, pár nedostatků
jsem také našel, zejména:

-- Hodnota "top" atributu valign se vkládá bez uvozovek a pro
XHTML se tedy ještě musí ručně upravit.

-- Příliš stručná nápověda.


+ Kde program získat

Program si můžete stáhnout na serveru Slunečnice
http://www.slunecnice.cz/sw/HTMLTabulka

nebo přímo na stránkách autora:
http://jnf.hyperlink.cz/

Autora Jana Stodůlku můžete kontaktovat na adrese
mailto:jnf@atlas.cz. Zde také uvítá vaše náměty na další
vylepšení programu.


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


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

Dotaz:
Len malá poznámka k článku o XHTML1.0: nebolo by vhodné už rovno
písať a aj sa venovať XHTML1.1? Tí, čo sa odvážia na XHTML1.0, by
možno rovno mohli skočiť na 1.1.

Odpověď:
XHTML 1.1 je dalším vývojovým stádiem HTML. Díky modularizaci
nabízí velmi zajímavé možnosti. Jeho použití v praxi je však
problematické. Vychází totiž z normy XHTML 1.0 Strict
a neobsahuje tedy žádné vypuštěné (deprecated) značky a atributy
přechodných norem HTML 4/XHTML 1.0 Transitional.

Podrobnější informace o XHTML 1.1 naleznete na
http://www.w3.org/TR/xhtml11/


A to je pro dnešek. Těšíme se na shledanou v pondělí 28.1.2002,
kdy v Sově naleznete:

-- Centrování v CSS -- lámete si hlavu, jak pomocí CSS
vycentrovat celou stránku, nebo některou její část? Zde naleznete
odpověď.

-- 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
vlkou 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/