Vytváříme webové stránky – Rámy a vkládání objektů (část 6.)

Jak název napovídá, v tomto dílu budeme probírat rámy (frames) a vkládání objektů.

Rámy

O rámech už asi opravdu velmi stručně. Již by se neměly objevit, pokud používáte standard xhtml 1.0 strict nebo xhtml 1.0. Pomocí rámů lze udělat rozvržení (layout) stránky, tak, že v každém rámu zobrazíme odlišnou html stránku. Rozměry a odkazy na tyto stránky si navolíme v hlavním html souboru. Zde je příklad takového souboru, kde by měla být nahoře lišta a pod ní potom dvě stránky, vlevo menu a vpravo obsah dokumentu. Poznámka: Všechny html stránky jsou v tomto případě uloženy ve stejné složce (viz. třetí díl, relativní adresování).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
 
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  <title>Titulek</title>
</head>
 
<frameset rows="40,*" border="0" frameborder="yes">
<frame src="lista.html" name="lista" scrolling="no" marginheight="3" noresize="noresize" />
  <frameset cols="85,*" border="0 frameborder="no"> 
  <frame src="menu.html" name="menu" scrolling="no" marginwidth="5" noresize="noresize" />  
  <frame src="obsah.html" name="obsah" scrolling="auto" />  
</frameset>  
</frameset>
 
<noframes>
<body>
Váš prohlížeč bohužel nepodporuje rámce.<br />
Sem by šlo vložit i alternativní rozvržení bez rámců.
</body>
</noframes>
 
</html>

Stručné vysvětlení příkladu: Frameset určuje definování rámu, rows znamená řádky, cols sloupce. Hvězdička znamená zbytek stránky. Šířka se dá zadávat i procentuálně. Definice rámů se dají vnořovat trochu obdobně jako tabulky. Border je tloušťka okraje mezi rámy, frameborder yes/no znamená vykreslit či nevykreslit okraj.

Frame pak už určuje ten daný rám. Src udává relativní cestu k souboru. Jen pokud byste měli spuštěný příklad a chtěli otevřít stránku např. z menu.html, tak, aby se otevřela ve stránce pojmenované (name) obsah namísto v menu, pak do odkazu v menu uveďte také target=“obsah“. Scrolling yes/no/auto nastavuje, jestli se má či nemá zobrazit posuvná (rolovací) lišta. A nakonec marginwidth a marginheight určují, kolik vynechat pixelů ve vertikálním a horizontálním směru (prázdný rámeček). Noresize pak říká, že zadaná velikost by se neměla dát měnit myší, ani nijak jinak.

Kromě toho, že rámce nejsou podporovány novými standardy a některými staršími prohlížeči, existují další důvody, proč je nepoužívat. Například při tisku můžete tisknout jen vybraný rám, vyhledávací roboti vidí jen hlavní stránku (a na té nic krom definice rámů není) a našly by se i další důvody. Proto nejen u tabulek, ale i u rámců radím je nepoužívat. Vlastně se je ani moc neučit, stačí zmínka, že něco takového existuje, resp. existovalo.

Vnořené rámy (plovoucí)

Mohou se občas hodit. Od obyčejných rámů se liší hlavně tím, že se velikost dá nastavit, nevnucuje nám roztahování na celou stránku.

1
2
<iframe src="dalsi.html" align="left" frameborder="0" width="70%" height="350" hspace="20" vspace="15" 
scrolling="no" noresize="norezise">Tento prohlížeč bohužel nepodporuje vnořené rámce.</iframe>

Význam parametrů src a name, scrolling, frameborder a noresize je stejný jako u obyčejných rámů, width a height stejný jako u obrázků. Align slouží pro obtékání (další možné hodnoty u obrázků) prvku vůči textu.

Dále se v iframe dá nastavit atribut hspace a vspace udávající vnější horizontální a vetikální okraj (prázdný rámeček vně). Některé atributy by se daly nahradit kaskádovým stylem (width a height určitě).
Jako poslední věc o iframe bych uvedl fakt, že správně by se jejich rozměry neměly udávat v procentech. Nicméně u width to funguje, ale u height ne. Zatím se mi nepodařilo přesvěčit iframe, aby se roztahoval ve svislém směru automaticky se změnou velikosti okna prohlížeče. Možná by na to pomohl AJAXový skript.

Vkládání objektů

Má se tím na mysli vkládání nějakých plošných objektů, nejčastěji videí, zvuků nebo Java appletů. Existuje několik tagů pro vložení takového prvku, například object nebo applet, oba jsou párové. Pro vložení konkrétního prvku bych viděl neschůdnější řešení uvést vždy příklad a potom případně dovysvětlit jeho některé části. Něco bude možná zřejmé na první pohled.

1
2
3
4
5
6
7
8
9
10
11
<embed src="animace.swf" type="application/x-shockwave-flash" width="200" height="100">
 
<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="200" height="100">
<param name="movie" value="animace.swf">
<param name="quality" value="high">
<embed src="animace.swf" type="application/x-shockwave-flash" name="objekt1" width="200" height="100">
Něco je špatně. Možná nemáte nainstalovaný a povolený Adobe Flash Player.
</object>
 
<embed src="zvuk.mid" autostart="false" width="200" height="32">
<noembed>Doplněk pro přehrávání není nainstalován.</noembed></embed>

Na začátku jsou dva příklady, jak vložit pomocí tagu object na stránku Flashovou animaci SWF. Druhý příklad je o něco vyšperkovanější. Myslím, že již nemusím vysvětlovat funkci src, width, height, name a border.

S tagem applet se pracuje podobně jako s tagem objekt. Také se dají nastavit speciální parametry pomocí tagů param jako u object.

Na stránky můžete umístit několik typů zvukových souborů. Například wav, mid, au. Ale nemusí to zdaleka fungovat vždy. Taky je si je někdy dobré uvědomit, že člověk většinou stránky prohlíží a čte, nikoliv poslouchá.

Posledně jsem sliboval, že uvedu pouze krátkou zmínku o rámech a objektech a nakonec z toho vyšel celkem dlouhý článek. Přístě si probereme formuláře.

O Petr Fořt

Student ČVUT FJFI KSE ASI (Softwarové inženýrství v ekonomii). Zajímám se o počítače (programování, diagnostika chyb hw), hudbu. Mám rád grilování, táboráky, hraní na kytaru a srandu v dobré společnosti.