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

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

HTML II - 6. lekce

Google       Google       30. 9. 2006       18 781×

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 První český hackathon ve vlaku inspirovaly služby jako  Tinder, Airbnb nebo Uber

První český hackathon ve vlaku inspirovaly služby jako Tinder, Airbnb nebo Uber

Patnáct set kilometrů, cesta přes dva státy, šestnáct hodin programování a přísun
energy drinků, tak by se dal shrnout unikátní hackathon ve vlaku pořádaný Kiwi.com.
Z Prahy do Košic a zpět se svezlo celkem 13 týmů, každý s originálním nápadem. Hlavní
výhru, voucher na letenky v hodnotě 2 500 EUR, si v Praze převzal tým až z Ukrajiny.
Společně naprogramovali aplikaci Fly2event, která vytváří cestovatelské balíčky ušité
uživatelům na míru podle toho, co si „olajkovali“ na Facebooku. Projekt má i podle
organizátorů budoucnost a jeho tvůrci ho v současnosti už spouští na webové stránce
fly2event.com.

Reklama
Reklama
Obrázek ke článku Gamifikace nakupování dorazila i do České republiky

Gamifikace nakupování dorazila i do České republiky

Zákazníci zejména retailových společností jsou často znuděni klasickými věrnostními či motivačními programy. Většinou z toho důvodu, že jsou jeden jako druhý a nepřináší nic nového. Ale i v České republice se projevují zahraniční trendy, nedávno zde totiž vstoupila na trh a rychle se uchytila nová platforma kombinující to nejlepší z věrnostních a motivačních programů, která navíc využívá prvky gamifikace – Rondo.cz. Na hlavní milníky vývoje nálad a motivace zákazníků a nejnovější trendy se zaměřil Jan Hřebabecký, spoluzakladatel Rondo.cz

Obrázek ke článku NopCommerce – datová vrstva a přístup k datům – 2. díl

NopCommerce – datová vrstva a přístup k datům – 2. díl

V minulém článku jsme si představili platformu NopCommerce z globálního pohledu. V dnešním díle se již zaměříme na konkrétní část systému, a to datovou vrstvu. Představíme si základní stavební kameny systému v podobě doménových objektů. Ukážeme si, jakým způsobem rozšířit doménové objekty a jakým způsobem přistupuje NopCommerce k nastavení systému a modulů.

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