|
|||||||||||||||||||||||||||||||||||||||||||||||||
Menu
Distributions (131)
bootable [55]
commercial [7] no-commercial [42] unclassified [20] [7]
Software (10844)
|
HTML (17) - rámy 2Minule jsme si ukázali základy a teorii, kterou budete potřebovat při práci s rámy. Tentokrát se podíváme na celou věc hlavně z praktické stránky, ukážeme si, několik příkladů, jak na stránce můžeme definovat rámy.
Jednoduchou stránku s částí pro svislé menu a s částí pro hlavní informace jsme se naučili vytvořit už minule. Dnes si ukážeme další možnosti, jak rozdělit stránku pomocí rámů. Dělení stránky na sloupce Vám už jistě nedělá problémy. V případě, že chcete stránku rozdělit horizontálně, není na tom nic těžkého. Stačí nahradit atribut cols="" v elementu <frameset> za atribut rows="". Dále je práce s tímto atributem stejná jako s cols="", všechny parametry uvedené jako hodnoty mají stejný význam. Jediný rozdíl je v tom, že definujete, jak budou na stránce rozmístěny řádky a ne sloupce. :) Uděláme si stránku, kterou rozdělíme na malou horní lištu (20 pixelů), spodní lištu (5% z výšky stránky) a hlavní okno, které bude zabírat zbytek stránky.
<frameset rows="20, *, 5%">
<frame src="horni_linka.html"> <frame src="hlavni.html"> <frame src="dolni_linka.html"> </frameset> <noframes> Váš prohlížeč bohužel nepodporuje rámce. </noframes> Oba dva způsoby můžeme samozřejmě zkombinovat - můžeme použít oba atributy najednou. Vytvoříme si stránku, která bude obsahovat rámce pro horní lištu (5% z vyšky stránky) a část pro hlavní obsah. A to celé připravíme ve dvou jazycích, takže stránku ještě rozdělíme napůl a v jedné části zobrazíme třeba české informace a ve druhé anglické.
<frameset rows="5%, *" cols="50%, 50%">
<frame src="horni_linka_cz.html"> <frame src="horni_linka_en.html"> <frame src="hlavni_cz.html"> <frame src="hlavni_en.html"> </frameset> <noframes> Váš prohlížeč bohužel nepodporuje rámce. </noframes> Dělat na stránce jakousi mříž může být sice někdy zajímavé, ale asi to není vaše nejvyšší meta, kterou byste chtěli s HTML pokořit. "Vysoké" nároky máte zcela právem, protože nemusíte dělit rámy v celé šířce stránky, ale můžet rozdělit jen v oblasti jednoho rámu. Klasickým příkladem je stránka, která má na svém vrcholu lištu (výška 50 pixelů) přes celou šíři stránky a pod ní je rozdělena na dva sloupce - na menu (šířka 220 pixelů) a na hlavní rám.
<frameset rows="50, *">
<frame src="horni_lista.html"> <frameset cols="220, *"> <frame src="horni_linka_en.html"> <frame src="hlavni_cz.html"> </frameset> </frameset> <noframes> Váš prohlížeč bohužel nepodporuje rámce. </noframes> Velice podobně uděláme rozložení rámů pokud chceme na stránce vytvořit jeden sloupec vlevo (vysoký 100% a široký 20%) a pravou část rozdělit na dva řádky (horní 40%, dolní 60% výšky).
<frameset cols="20%, *">
<frame src="leva_lista_s_menu.html"> <frameset rows="40%, 60%"> <frame src="prava_horni.html"> <frame src="prava_dolni.html"> </frameset> </frameset> <noframes> Váš prohlížeč bohužel nepodporuje rámce. </noframes> Nyní už znáte všechny obvyklé kombinace, jak se dají rámy různě spojovat a je už jen na vaší fantazii, jak složité stránky budete tvořit. Ale znovu připomínám, že v současnosti se vývoj webu pohybuje jiným směrem než k rámům. Je to z několika důvodů: pro uživatele je například obtížnější zjistit si url, na které se právě nachází, potom nemůže kolegovi poslat přesnou adresu vaší skvělé webové aplikace, kterou by ve firmě tak rádi využívali... :) Je dobré vědět, jak se s rámy pracuje, ale jejich využití v praxi pro Vás bude asi až krajní možností. Dnešní díl byl téměř čistě praktický, takže příště si povíme, jak uživateli usnadnit orientaci na stránkách s rámy a sobě ulehčit práci při jejich psaní a dokončíme popis atributů spojených s rámy.
Related article
HTML (1) HTML (2) - odstavec a nadpisy HTML (3) - styly písma HTML (4) - odkazy HTML (5) - obrázky HTML (6) - obrázky 2 HTML (7) - seznamy HTML (8) - tabulky HTML (9) - tabulky 2 HTML (10) - tabulky 3 HTML (11) - formuláře HTML (12) - formuláře 2 HTML (13) - formuláře 3 HTML (14) - formuláře 4 HTML (15) - formuláře 5 HTML (16) - rámy HTML (18) - rámy 3 HTML (19) - metadata HTML (20) - dokončujeme Webové Standardy 1 - Historie, problém a řešení HTML (21) - Přecházíme na XHTML Dynamické načítání dat z databáze pomocí jQuery a PHP Programujeme chat s dynamickým načítáním HTML 5 I. - Úvod do HTML 5 HTML 5 II. - Ako začať s tvorbou HTML 5 dokumentu Previous Show category (serial) Next
|
Szukanie oprogramowania
|
|||||||||||||||||||||||||||||||||||||||||||||||
©Pavel Kysilka - 2003-2024 | maillinuxsoft.cz | Design: www.megadesign.cz |