HTML II - 6. lekce
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

HTML II - 6. lekceHTML II - 6. lekce

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno

HTML II - 6. lekce

Google       Google       30. 9. 2006       19 567×

V této lekci se podíváme na rámce.

Reklama
Reklama
V této lekci se vám pokusím vysvětlit, jak a proč používat rámy. Nyní je už tato funkce možná překonaná a z mnoha ohlasů je neprofesionální, ale pokud se ví, jak mají být rámce používány a jak to udělat, aby to vypadalo hezky, dá se tím udělat i velice pěkná stránka.

K čemu jsou rámce dobré?

Rámce se používájí, když chcete udělat jednu část stránky statickou (pořád stejnou) a druhou část dynamickou (měnící se). Pokud děláme rámcovanou stránku (celou stránku rozdělujeme třeba na 2 rámce), tak vše napíšeme do tagu <HEAD> a </HEAD> a tag <BODY> tam bude jen k tomu, co se má vypsat, když prohlížeč neumí rámce. V případě použití vloženého rámce, se vše zapisuje tak, jak má. Možná si řeknete: „To musí být strašně obtížné“. Ale naopak. Tato zdánlivě náročná část si vyžádá jen několik minut psaní kódu.

Nyní se podíváme, jak bude vypadat syntaxe.

<frameset>
<frame>
<frame>
</frameset>

Toto je taková hodně ořezaná syntaxe rámcované stránky. Teď si rozebereme parametry, jejich obvyklé hodnoty a k jakému tagu je přiřadíme.

Tag frameset musí obsahovat minimálně jeden parametr navíc. Máme na výběr ze dvou parametrů. Můžeme použít parametr cols – použijeme, pokud chceme stránku rozdělovat na sloupce; parametr rows – při rozdělování stránky na řádky. Tomuto parametru musíme přiřadit nějakou hodnotu. Bude to číslo, a to buď v pixelech (jednotka px) nebo v procentech (jednotka %). Jednotlivé velikosti rámů oddělíme čárkou.

<frameset rows="25%, 50%, 25%">

Takto docílíme toho, že stránka se rozdělí na tři části: První bude vysoká 25 % požadované stránky, druhá 50 % požadované stránky a třetí opět 25 % stránky. Dohromady 100 %, akorát se nám to tam vejde. Pokud chceme použít pixely, postupujeme následovně:

<frameset rows="25px, 50px, 25px">

Tím se stránka rozdělí na 25, 50 a 25 pixelů. Rozdíl je v tom, že při použití procent na vyšším rozlišení vyjdou rámce akorát na celou stránku a při nižším také, ale při použití pixelů to na jednom rozlišení vychází přesně a na nižším třeba kousek přebývá.

Jak rámce používat a jak do nich odkazovat?

Nyní jsme si vysvětlili, jak nadefinujeme počet rámců a jejich velikost. Nyní každému rámu nastavíme

  • jak se má jmenovat (důležité pro otevření stránky v rámu)
  • jaký soubor se v něm má otevřít po otevření stránky
  • vypnutí možnosti přenastavení velikosti

Jedna z nejdůležitějších nastavení rámce je jeho jméno. Jméno využijeme, když budeme chtít stránku otevřít v určitém rámci. Uvedu příklad:

Na rámec s nastavením

<frame name="super_ramec">

do něj odkážeme odkazem

<a href="soubor.html" target="super_ramec">Odkaz zde</a>

Při nastavování vlastností rámců postupujeme podle toho, jak jsme zadali hodnotu u cols/rows. Jednoduše řešeno, první tag frame bude nastavení toho, co je v cols/rows napsáno jako první. Celá syntaxe by ve výsledku mohla vypadat třeba takto:

<frameset rows="25%, 49%, 26%">
<frame name="horni" src="horni_ramec.html"> (nastavení rámce co měří, 25%)
<frame name="prostredni" src="stredni_ramec.html"> (nastavení rámce, co měří 49%)
<frame name="dolni" src="dolni_ramec.html"> (nastavení rámce, co měří 26%)
</frameset>

Jak vydíte, u tagu frame jsem použil nový parametr src. Tím se určuje, co se zobrazí v rámci hned po načtení stránky jako takové. Pokud není stránka nastavena v src nalezena, vyhodí to v rámci chybu 404 (nenalezeno).

Jak zrušit zvětšovnání:
Pokud nastavíte rámcovanou stránku tak, jak jsem před chvílí napsal, uživatel si bude moci za dělící čáru mezi rámci prostě chytnout a rozšířít ji tak, jak potřebuje. To se dá jednoduše vypnout přidáním parametru noresize k tagu frame.

Pokud při definici velikosti rámců použijeme znak *, znamená to zbytek stránky oproti ostatním hodnotám.

Pokud někde místo frame dáte frameset, můžete třeba zkombinovat rows a cols, čímž vám vznikne třeba stránka 4 rámů ve tvaru čtverce.

Rámce vložené

Pokud máme stránku, kde chceme mít stejné okolí a měnit pouze jedno místo nebo plochu, můžeme tak učinit pomocí vložených rámcu. Tento tag je PÁROVÝ. Syntaxe tagu:

<iframe name="jmeno_ramce" width="500" height="500"></iframe>

Přičemž name je jméno rámce a ostatní parametry by neměly být ničím neznámým.

Shrnutí

Na závěr dnešní lekce si shrneme, jak vypadá kompletní syntaxe rámců, vložených (inline) rámců a jak do nich odkazujeme.

Rámce:

<html>
<head>
<frameset cols="25%, *">
<frame name="levy" src="leva_strana.html" noresize>
<frame name="hlavni" src="hlavni_strana.html" noresize>
</head>
</html>

A pokud chceme, aby se stránka zobrazila v hlavním rámci, do levého umístíme kód:

<a href="sranka.html" target="hlavni">Odkaz</a>

Rámec vložený:

<iframe name="iframe" width="500" height="500"></iframe>

Odkážeme stejným způsobem, jen pozor, aby se hodnoty parametrů name a target při odkazování do rámců shodovaly!

Domácí úkol

Udělejte mi stránku, ktérá bude rozdělena na rámce do sloupce, přičemž jeden bude mít velikost 45 %, druhý 25 % a třetí 40 %. Jak jednoduché že?

Příště

Příště se podíváme na DOCTYPE.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
0 hlasů
Google
(fotka) Radek BoudaRadek Bouda studuje na Fakultě aplikovaných věd Západočeské univerzity v Plzni. Programuje v jazyce Java a zajímá se platformu .NET. Kromě programování má rád také cyklistiku, volejbal, skauting a pohyb venku obecně.
Web     Twitter     Facebook    

Nové články

Obrázek ke článku GoPay uvede automatické čtení údajů z dokladů, použije řešení studenta, který s ním uspěl v IT SPY

GoPay uvede automatické čtení údajů z dokladů, použije řešení studenta, který s ním uspěl v IT SPY

Vymyslet aplikaci, která pohodlně vyčte data z identifikačních dokladů, aby je jejich držitel nemusel složitě přepisovat. To byl jeden z prvních úkolů Miroslava Bartyzala, když nastoupil jako juniorský Java programátor do GoPay. Bartyzal nakonec projektu, který mu zabral více než 2200 hodin, věnoval svou diplomovou práci na Přírodovědecké fakultě Jihočeské univerzity.

Reklama
Reklama
Obrázek ke článku Studium MBA zvýší manažerům v IT hodnotu na trhu práce

Studium MBA zvýší manažerům v IT hodnotu na trhu práce

Investice do kvalitního vzdělání se vyplatí, a to jak v osobní, tak v profesionální rovině. Prestižní titul MBA otevře absolventům vysokoškolského studia cestu k mnoha atraktivním pracovním pozicím a potažmo i vyšším příjmům. Zvlášť, pokud dovedou nastudovanou teorii převést přímo do praxe a využít ji při komunikaci i řešení problémů.

Obrázek ke článku Co nám přinese technologický rok 2019? Podle Cisco bude směr určovat těchto 6 trendů

Co nám přinese technologický rok 2019? Podle Cisco bude směr určovat těchto 6 trendů

Kam se bude ubírat technologický vývoj? Společnost Cisco představila 6 trendů, které budou v příštím roce měnit svět a podobu moderních firem. Ty se v roce 2018 podle očekávání zaměřily na lepší využití dat, kterých dnes shromažďují velké objemy. Pro mnohé byla prioritou optimalizace a správa multicloudových prostředí, stejně jako snaha integrovat zabezpečení již na základní úrovni infrastruktury. Žádný z těchto trendů v příštím roce nejspíš nepomine. Přibudou ale další.

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