Vejít do
Všechna počítačová tajemství pro začátečníky i profesionály
  • Windows 10
  • Sdělení
  • Prohlížeče
  • antivirus
  • Kancelář
  • Video
  • Zesilovač do auta - ekonomické možnosti pro vytváření zvuku v kabině Jak sestavit obvod zesilovače zvuku
  • Vysoce kvalitní zesilovač bez zpětné vazby: Dvoustupňový tranzistorový zesilovač End Millennium
  • Streams World Of Tanks Aces gg l první tank
  • Nejlepší střední tanky ve World of Tanks
  • Elektronika krok za krokem ke stažení fb2
  • Výroba sedla v Minecraftu 1
    • Všechna počítačová tajemství pro začátečníky i profesionály / Kancelář / Jak vložit iframe do HTML: příklad použití. Jak vytvořit stránku s rámečky Vytváření rámců pro webové stránky v html

    Jak vložit iframe do HTML: příklad použití. Jak vytvořit stránku s rámečky Vytváření rámců pro webové stránky v html

    Jak vložit iframe do HTML: příklad použití. Jak vytvořit stránku s rámečky Vytváření rámců pro webové stránky v html

    Dobrý den všem! Andrey Bernatsky je s vámi.

    Než přejdu přímo k článku, rád bych vám dal odkaz na video verzi tohoto tématu:

    V této epizodě budeme mluvit o rámce v HTML. Rámečky v podstatě jsou velmi podobné tabulkám, ale na rozdíl od tabulek je každý rámec nezávislý a každý z nich může mít samostatnou webovou stránku s vlastní adresou.

    Na obrázku vidíme celkem běžnou strukturu webu. Může být prezentován ve formě tabulky, nebo to vše lze provést pomocí rámů. V horním rámu můžete načíst stránku s logem a menu, v levém rámu můžete načíst stránku s navigací na webu, ve středním rámu bude stránka s hlavním obsahem webu, v pravém rámu můžete načíst stránku s reklamními bannery a ve spodním rámu můžete načíst stránku s kontaktními informacemi. Zde je to, co jsou rámy v kostce.

    Nyní se podívejme, jak se to všechno dá udělat.

    Zvláštností dokumentu obsahujícího rámce je, že neobsahuje kontejner TĚLO. Místo toho se používá kontejner FRAMESET. Obecná syntaxe rámců je následující:

    XHTML

    … ….

    …

    ….

    V kontejneru …. značky jsou umístěny , které definují obsah rámců.

    Na štítku jsou dva parametry:

    řádky = číslo– počet linií (vodorovné prahy).

    cols = číslo– počet sloupků (svislých parapetů).

    Obecně řečeno, hodnoty parametrů rows a cols nejsou specifikovány přesně čísly, ale výpisem čísel oddělených čárkami. Kolik čísel bude, bude tolik řádků nebo sloupců a čísla určují velikost rámce. Hlavní věc je, že součet těchto čísel je po celé šířce obrazovky.

    Podívejme se na to na příkladu a vše bude jasné. Nyní vytvoříme rámcový dokument takto:

    Kód, který nám bude tuto strukturu rámce definovat, bude vypadat takto:

    XHTML

    První řádek výše uvedeného kódu otevírá kontejner sady rámců, parametr cols označuje, že budou tři vnořené rámce. První bude mít šířku 30 % celé šířky obrazovky. Třetí bude mít také 30 % celé šířky obrazovky. A druhý snímek zabere veškerý zbývající prostor. Ano symbol "*" (hvězdička) znamená zabírat veškerý zbývající prostor na obrazovce.

    Mimochodem, podívejme se, jak lze nastavit rámce v parametrech cols a rows:

    Velikost nastavíte pouhým zadáním čísla. Toto číslo určí velikost snímku v pixelech.

    Šířku můžete nastavit v procentech. Navíc, pokud součet procent všech sloupců přesáhne 100 %, pak se všechny snímky proporcionálně sníží tak, aby se celkový součet rovnal 100 %. Situace bude podobná: pokud je součet procent všech sloupců menší než 100 %, pak se všechny snímky úměrně zvětší tak, aby se celkový součet rovnal 100 %.

    Velikost rámečku můžete nastavit pomocí symbolu “*” (hvězda). To znamená, že rám musí zabírat veškerý zbývající prostor. Pokud je uvedeno např , tedy dvě hvězdičky, pak bude veškerý zbývající prostor rovnoměrně rozdělen mezi tyto dva snímky (v tomto případě 40 %).

    Možnosti nastavení velikostí rámců v HTML můžete kombinovat. Například:

    XHTML

    Tento kód znamená, že první snímek bude mít velikost 70 pixelů, třetí bude mít 40 % šířky obrazovky a druhý zabere zbývající místo.

    Úplně jsme přišli na první řádek kódu. Pokračuj.

    Následují značky . Od oddělené čárkami v parametru sloupceštítek sada rámů pokud jsou zadána tři čísla (to znamená, že budou tři snímky), pak značky musí být také tři. Hodnota parametru src je adresa webové stránky, která bude načtena do tohoto rámce. Adresa, jak je vidět z příkladu, může být absolutní a relativní.

    A poslední řádek uzavře kontejner .

    Pokud nahradíme parametr cols řádky v prvním řádku kódu, získáme stejný dokument rámce sestávající ze tří rámců. Pouze rozdělení na snímky bude vertikální.

    XHTML

    Možnosti řádky A sloupce nelze použít současně. To vede k chybám a nesprávnému zobrazení obsahu.

    Každý má nyní otázku, jak vytvořit takovou strukturu, o které jsem mluvil na samém začátku článku. K tomu se vrátíme o něco později, ale nyní se vraťme k tomu, co se nyní děje v našem prohlížeči.

    V prohlížeči vidíme tři stránky, z nichž každá je ve svém vlastním rámci.

    Pohybem kurzoru myši na okraje rámečků zároveň můžeme měnit velikost rámečků a jsou vidět i okraje mezi rámečky. To není vždy nutné, vlastně to není nutné vůbec. A to vše lze ovládat díky parametrům tagů rám A sada rámů.

    Možnosti značek rám A sada rámů:

    src="url"– požadovaný parametr. Určuje adresu stránky, která se zobrazí uvnitř rámce. Použito pouze na rám.

    noresize– zruší možnost změny velikosti. Používané pouze pro rám.

    scrolling="yes/no/auto"– určuje přítomnost posuvníků. Hodnota yes – indikuje přítomnost posuvníků. Hodnota no znamená, že nebudou existovat žádné posuvníky. Když je nastaveno na auto, prohlížeč sám určí, zda budou posuvníky. Používané pouze pro rám.

    name="název-rámce"– název rámu. Tento parametr se používá pro interakci mezi snímky. Více si o tom povíme o něco později. Používané pouze pro rám.

    hranice=číslo– tloušťka okrajů mezi rámy. Pokud má hodnotu 0, pak se hranice mezi snímky nezobrazí. Používá se pouze pro sadu rámů.

    framespace = "číslo"– vzdálenost mezi rámy. Používá se pouze pro sadu rámů.

    Pomocí těchto parametrů můžete získat stránku, na které se nezobrazují okraje mezi snímky, neexistuje způsob, jak změnit velikost snímků a u posledních dvou snímků je posouvání zakázáno. Kód takové stránky vypadá takto:

    XHTML

    Existuje několik dalších možností, ale ty jasně nefungují, takže si myslím, že má smysl je ve vydání ani nezmiňovat.

    S parametry je to snad vše. Podívali jsme se na příklad, jak je používat.

    Nyní vytvoříme strukturu rámu, o které jsem mluvil na samém začátku vydání.

    K tomu vytvoříme strukturu tří vertikálně rozdělených rámů.

    XHTML

    V souladu s tím místo značky , musíme vložit další nádobu .. se třemi sloupci a do každého napište adresu stránky. Vidíte, nic složitého, jen místo toho používáme značku vložte novou nádobu, kterou potřebujeme .. .

    XHTML

    "../lekce3/Bez názvu-1.html" />

    Poté vložíme náš třetí rámeček s kontaktními informacemi a zavřeme hlavní kontejner

    XHTML

    Úplný kód pro tuto stránku je níže:

    XHTML

    "../lekce3/Bez názvu-1.html" />

    Adresy pro rámečky jsem samozřejmě převzal z předchozích čísel newsletteru a žádné menu, logo, navigaci atd. jsme zde neviděli. Ale dostali jsme strukturu, kterou jsme potřebovali. Ale pokud vytvoříte skutečné stránky, které potřebujete, můžete získat krásnou strukturu.

    Co jsme nakonec dostali. Zda je to pohodlné nebo nepohodlné, je na vás, abyste se rozhodli, ale s rámovou strukturou zůstanou všechny naše rámy vždy na stránce. Bez ohledu na velikost obsahu vždy uvidíme logo a menu webu, spodní část webu s kontaktními informacemi, navigační blok a bannery. To je obecně podstata a význam rámců.

    Existuje možnost interakce mezi snímky. Můžete to udělat tak, že kliknutím na odkaz v jednom rámci se informace zobrazí v jiném. Nyní uvidíme, jak se to dělá.

    Vytvoříme rámeček takto:

    Naše odkazy budou umístěny v levém rámu. A vpravo jsou stránky, na které tyto odkazy vedou.

    Vytvoříme rámeček takto:

    XHTML

    Určitě jste nejednou slyšeli o takovém konceptu, jako jsou rámy. Můžete si o nich přečíst v jakékoli html učebnici a také ve zdrojích o tvorbě webových stránek. Po prostudování mnoha příkladů a popisů jsem se rozhodl říci vše o rámech vlastními slovy a velmi jednoduchým způsobem. Klady, zápory a budoucnost rámů budou diskutovány úplně dole na této stránce. Takže, co jsou rámce v html?

    Co jsou rámce v html

    Rám(anglický rámeček) - nějaká připojitelná nezávislá oblast na webové stránce.

    Nebojte se, že to zní trochu zmateně. Okamžitě uveďme nejjednodušší příklad a pak bude vše jasné.

    Otevřete nápovědu v libovolném programu (může to být poznámkový blok, nějaký program, prohlížeč atd.). Téměř vždy uvidíte nápovědu skládající se ze dvou částí (navigace vlevo, obsah vpravo). Levá a pravá část jsou jen samostatné rámečky. Níže je snímek obrazovky převzatý z nápovědy nejběžnějšího poznámkového bloku Windows:

    Obr 1. Použití rámečků s nápovědou k poznámkovému bloku jako příklad

    To, co vidíte, je webová stránka sestávající ze dvou samostatných nezávislých rámců. Zde je příklad html kódu pro takový rámec z nápovědy.

    Příklad s rámečky č. 1 (provádí nápovědu)

    Ve výše uvedeném rámci bude výše diskutovaná nápověda vypadat takto:


    Obr. 2. Rámec pro použití rámců například č. 1

    Rozdělení stránky na oblasti pomocí rámců je velmi podobné rozložení tabulky HTML (viz značka HTML tabulky). Příklad kódu pro takovou stránku může vypadat takto:

    <span>Příklad č. 1 html stránky s rámečky</span>
    Vysvětlení například č. 1

    Jak můžete vidět z výše uvedeného kódu, stránka vytvořená z rámců je velmi podobná běžné html stránce: je zde úvodní html značka, sekce , titul , ale je tu jeden velký rozdíl. Pravděpodobně jste si všimli, že chybí značka body, která je zodpovědná za tělo stránky. Místo toho se vloží značka <frameset>, který je zodpovědný za tělo stránky. Tato značka má dva atributy cols="25%,75%" , což znamená rozdělení celého těla stránky na dvě oblasti vertikálně v poměru 1:3. První oblast bude zabírat 25% šířky celé obrazovky (bude obsahovat první rámeček menu.html), druhá oblast zabere 75% šířky celé obrazovky (bude obsahovat druhý obsah. html rámec).</p> <p>Poslední zcela volitelný tag je <noframes>. Je potřeba pro prohlížeče, které nepodporují rámce. Pokud prohlížeč nepodporuje rámce, doporučujeme o tom uživatele zdvořile informovat prostřednictvím této značky.</p> <p>Mimochodem, vezměte na vědomí, že pro značku <frame>není potřeba uzavírací značka.</p> <p>Doufám, že nyní máte představu o rámech. Pro pochopení složitějších příkladů si zkusme vytvořit jednoduchou html stránku sestávající ze 4 rámců. Toto bude příklad č. 2.</p> <h2>Příklad se 4 snímky #2</h2> <p>Framework například 2:</p> <p><img src='https://i0.wp.com/zarabotat-na-sajte.ru/uroki-html/img/primer2-frame-karkas.jpg' width="100%" loading=lazy loading=lazy><br>Obr. 3. Rámec pro použití rámců například č. 2</p> <p>Kód původní HTML stránky s rámcem bude následující:</p> <blockquote><html > <head > <title ><span>Příklad č. 2 html stránky s rámečky</span> <span>Váš prohlížeč nepodporuje zobrazování rámců</span>

    Kód souboru Top.html

    <span>Soubor top.html – záhlaví webu</span>

    Příklad č. 2

    A tady by mohlo být logo a další :)

    Kód souboru Menu.html

    <span>Soubor menu.html - nabídka webu</span>

    Kód souboru Content.html

    <span>Soubor content.html – obsah webu</span>

    Domovská stránka

    Obsah webu. Soubor content.html je nyní otevřen
    Toto je počáteční stav našeho rámu. Nazvěme tento soubor "Hlavní stránka"

    Kód souboru about-site.html

    <span>Soubor about-site.html – Stránka o webu</span>

    O webu

    Stránka o webu. Soubor about-site.html je nyní otevřen

    Kód souboru about-autor.html

    <span>Soubor about-autor.html - o autorovi</span>

    o autorovi

    O stránce autora. Soubor about-autor.html je nyní otevřený

    Kód souboru zápatí.html

    <span>Soubor footer.html – o webu</span> Zápatí webu. Soubor footer.html je nyní otevřený
    Vysvětlení například č. 2

    Zpočátku je celá stránka rozdělena do tří oblastí horizontálně v poměru 3:14:3. Za to může atribut rows="15%,70%,15%". Prvním snímkem v našem příkladu je záhlaví (nazvali jsme ho top.html), je mu přiděleno 15 % výškového prostoru. Následuje velký rám zabírající 70 % výšky. Rozdělíme ho na dvě části pomocí cols="25%,75%" v poměru 1:3. Vlevo bude rámeček menu.html , vpravo content.html . Druhý rámec jsme konkrétně pojmenovali name="main", abychom mohli přepínat stránky. Všimněte si, že v souboru menu.html má každý odkaz připojený atribut target="main", který umožňuje načtení položek do oblasti zvané main po kliknutí na odkaz. Ve spodní části webu je poslední snímek footer.html.

    Pokud implementujete příklad č. 2, měli byste získat následující HTML stránku v původním stavu:


    Obr 4. Příklad č. 2 - výchozí stav

    Když přejdete na stránku o webu, stránka bude vypadat takto:


    Obr 5. Příklad č. 2 - druhý stav


    Obr 6. Příklad č. 2 - třetí stav

    Štítek

    Nepovinné atributy této značky jsou width="width" a height="height" a povinný atribut je src="adresa rámce" .

    Atributy a vlastnosti značek

    1. COLS atribut = "Parametry"
    Nastavuje počet vertikálních rozdělení stránky.

    2. Atribut ROWS="Parametry".
    Nastavuje počet vodorovných rozdělení stránky.

    Nyní se podívejme, jak můžete nastavit parametry rozdělení.

    a) Pomocí čísla, které bude odpovídat počtu pixelů. Například cols = "100,100,300" nastaví stránku tak, aby byla rozdělena do tří oblastí, z nichž každá bude mít šířku 100 pixelů, 100 pixelů a 300 pixelů.

    b) Pomocí procent z celkové šířky/výšky. Ve výše diskutovaných příkladech jsme použili procentuální dělení, takže se zdá zbytečné uvádět příklad.

    c) Pomocí * (hvězdička). Například cols = "2*,3*,100" nastaví první dvě oblasti na poměr 2:3 a třetí oblast na šířku 100 pixelů.

    Všechny tři způsoby lze kombinovat. Například cols="2*,100,15%,4*" .

    3. Atribut Frameborder="(ano|ne)".
    Určuje, zda má rámeček ohraničení. Pokud je odpověď ano, platí další čtvrtý atribut ohraničení.

    4. Atribut border="parameter"
    Hranice v pixelech určuje tloušťku ohraničení oblasti snímku. Například frameborder = "2" určuje oblast s vybraným obrysem 2 pixelů.

    5. atribut bordercolor="color".
    Určuje barvu ohraničení, pokud existuje. Barvu lze zadat buď slovy, nebo kódem (viz html paleta barev).

    Poznámka: Vezměte prosím na vědomí, že značka potřebují uzavírací značku .

    Atributy a vlastnosti značek

    1. Atribut src="adresa prvku"
    Zde musí být jako parametr uvedena úplná adresa URL adresy prvku. Tento atribut je povinný. Už je vám povědomý, protože... byl přítomen v příkladech 1 a 2.

    2. Atribut marginwidth="číslo"
    Nastaví šířku odsazení uvnitř rámečku od okrajů v pixelech. Například marginwidth="10" nastaví okraj obsahu vlevo a vpravo od okraje rámečku.

    3. Atribut marginhight="číslo"
    Podobný druhému, jen s tím rozdílem, že nastavuje výškové odsazení.

    4. Atribut Scrolling="(yes|no|auto)".
    Nastavuje schopnost posouvat rámeček, pokud se nevejde do oblasti, která je mu přidělena. Výchozí hodnota je auto (znamená v případě potřeby vytvořit rolování).

    5. Atribut Noresize
    Pokud je tento atribut nastaven, uživatel nesmí sám měnit hranice rámce. Ve výchozím nastavení není tento atribut nastaven a uživatel si může hranice měnit, jak chce.

    5. Atribut name="title"
    Tento atribut lze použít k pojmenování rámce. To je nezbytné, aby k tomuto rámci měly přístup další rámce. Příklad č. 2 se zabývá právě takovým případem.

    Poznámka:
    Název nesmí začínat podtržítkem „_“.

    6. Atributy frameborder, border a bordercolor
    Tyto tři atributy jsou stejné jako sada rámců (viz atributy sady rámců výše).

    Výhody a nevýhody rámů

    Výhody rámů

    • Schopnost zobrazit několik stránek nezávisle v jednom okně (příklad 1 a 2 výše);
    • Schopnost přepínat obsah stránky bez opětovného načítání stránky (změní se pouze jedna oblast obrazovky);
    • Schopnost flexibilně budovat strukturu webu (záhlaví, menu, zápatí atd. – všechny statické informace jsou uloženy odděleně v souborech, což umožňuje rychle upravovat část webu);
    • Uživatel může změnit velikost výřezu sám, pokud není nastavena možnost noresize;

    Nevýhody rámů

    • Vyhledávače indexované stránky špatně indexují, protože nejsou schopny interpretovat načtené soubory v rámcích. Vyhledávač rozlišuje stránky podle jejich adresy (URL) a u rámců se i přes různé stavy adresa stránky nemění. To je v rozporu s pravidly vyhledávače, což znamená, že není skutečností, že vyhledávač bude schopen stránky indexovat.
    • Je nemožné vytvořit záložku stránky v rámcích, protože Adresa URL stránky bude stejná. Takto můžete pouze zachovat původní stav rámu.
    • Ne všechny prohlížeče podporují rámce.

    Budoucnost rámů:
    Mnoho webmasterů již dávno začalo rámy opouštět. Důvodem jsou potíže s propagací ve vyhledávačích. Nyní všichni přecházejí na Ajax jako na dynamičtější a modernější způsob zobrazování informací na jedné stránce webu.

    Vážení čtenáři, podívali jsme se na značky HTML dokumentů související s rámečky. Navzdory pochybné budoucnosti této oblasti by měl každý webmaster vědět o rámech.

    Začněme strukturou rámu. Jaká je její podstata? Máme možnost organizovat speciální oblasti typu okna v dokumentu, který načítáme do prohlížeče. Do těchto oblastí můžete nahrát další jednotlivé dokumenty (webové stránky).

    Proč je to nutné? Protože se dokumenty načítají do vlastních samostatných oblastí, chovají se nezávisle. To znamená, že můžete něco udělat v jednom dokumentu, zatímco ostatní dokumenty zůstanou nezměněny.

    Kde takové rámové konstrukce najdete? Toto jsou soubory nápovědy (s příponou .chm).

    Zde je jednoduchý příklad dokumentu s rámečky:

    Příklady rámů Prohlížíte si tuto stránku pomocí prohlížeče, který nepodporuje rámce.

    Živel sada rámů. Jeho úkolem je pokrýt pozorovací plochu a rozdělit ji na samostatné oblasti. Tito. instruovat prohlížeč, v jakém poměru a jak (horizontálně nebo vertikálně) tyto oblasti rozdělujeme.

    Živel rám– popisuje každou takovou jednotlivou oblast. Jediný štítek. Zaujímá rozměry uvedené v sadě rámců.

    Živel noframes- zobrazí se, pokud prohlížeč nepodporuje rámy.

    Všimněte si, že zde není žádný prvek těla. Místo toho je použit prvek frameset. To je jeden z důvodů, proč se rámce na webech již nepoužívají.

    Atributy prvků sady rámců

    • cols - vertikální rozdělení stránky do oblastí zobrazení.
    • řádky - horizontální rozdělení stránky do oblastí zobrazení.

    rámový prvek

    Tento prvek popisuje jednu oblast okna. Můžete do něj načíst libovolný dokument pomocí atributu src. Příklady:

    Atribut rolování- rolování (ve výchozím nastavení automatické). Pokud dokument přesahuje zobrazovanou oblast tohoto rámečku, dojde k rolování. Pokud se dokument zcela vejde do rámečku, nedochází k posouvání. Posouvání lze zakázat, ale je lepší ho nechat na auto.

    Jediný atribut noresize- zakazuje změnu velikosti rámce v prohlížeči. Ve výchozím nastavení je to povoleno.

    Atribut rámová hranice– snímek po snímku. Hodnota '1' - kreslit, hodnota '0' - nekreslit. Pouze tyto dvě hodnoty jsou platné. Ve výchozím nastavení je rámeček nakreslen.

    Atribut šířka okraje– označuje vzdálenost, o kterou bude obsah v daném snímku horizontálně ustupovat od snímků tohoto snímku.

    Atribut výška okraje– svislé odsazení od obsahu k okrajům rámečku.

    Vložený prvek iframe

    Živel iframe(„řádkové okno“). Tento prvek je spárovaný (existuje otevírací a uzavírací značka). Tento prvek slouží ke stejnému účelu – k uspořádání prvku okna v dokumentu.

    Jak se liší od starých rámů? Je soběstačný a nepotřebuje žádné další nádoby. A může se objevit v jakýchkoli dokumentech, tedy tam, kde je prvek těla.

    Prvek iframe je vložený prvek s vyměnitelným obsahem. Tito. vytvoří se oblast čárového typu s libovolnými abstraktními rozměry a do této oblasti se načte obsah nějakého externího dokumentu (souboru html).

    Iframe má stejné atributy jako obrázky (protože jsou stejného typu): name, width, height, src, frameborder, scrolling, hspace, vspace, marginwidth, marginheight.

    Rámce jsou prvky HTML, které umožňují rozdělit okno webového prohlížeče na několik nezávislých oken, z nichž každé může načíst samostatný dokument HTML. Každé takové okno (rám) může mít své posuvníky a fungovat nezávisle na ostatních nezávislých oknech nebo naopak ovládat jejich obsah. Lze je použít k uspořádání nabídky, která je neustále umístěna v jednom okně, zatímco informace samotné jsou umístěny v jiném okně. Uživatelé mohou k nabídce přistupovat kdykoli a nemusí se vracet na předchozí stránku, aby vybrali jinou položku nabídky. Použití rámců vám umožňuje „připnout“ obrázky nebo jiné prvky statického rozhraní do okna prohlížeče, zatímco se zbytek stránky posouvá v rámci.
    Je však třeba poznamenat, že rámce jsou dnes považovány za zastaralý nástroj a stránky s rámečky jsou nyní považovány za nedůstojné, protože profesionální webmasteři rámce ve svých projektech nikdy nepoužívají. Rámy mají řadu notoricky známých problémů. Matou vyhledávače například proto, že stránky obsahující obsah neodkazují na jiné dokumenty. Pokud chcete získat návštěvníky z vyhledávačů, zapomeňte na rámečky. Uživatel nemůže umístit stránku, která se mu líbí, do sekce záložek prohlížeče, protože rámce skrývají adresu stránky, na které se nachází, a vždy zobrazují pouze adresu webu. Z tohoto důvodu způsobují prohlížečům problémy při sledování historie a také nejsou příliš přizpůsobivé různým velikostem obrazovky a mobilním zařízením.
    Navzdory skutečnosti, že projekty s rámečky jsou na World Wide Web stále vzácnější, učení HTML by bylo neúplné, pokud by se téma rámců nezabývalo. Rámy spolu se svými nevýhodami mají také některé výhody, které nám nedovolují tuto technologii zavrhnout jako neperspektivní.

    Vytváření rámců

    Struktura dokumentu HTML s rámečky je vzhledově velmi podobná formátu běžného dokumentu HTML. Stejně jako v běžném HTML dokumentu je veškerý kód umístěn mezi párové značky A a v kontejneru jsou umístěny hlavičky. Hlavní rozdíl mezi dokumentem s rámečky a běžným HTML dokumentem je ten, že dokument s rámečky místo tagu je použita spárovaná značka (z anglického frame set - sada rámů).
    Následující příklad ukazuje strukturu HTML dokumentu s rámečky:

    Příklad: Struktura dokumentu HTML s rámečky

    • Zkus to sám "
    frame_top
    frame_left frame_right



    Dokument s rámečky

    Ve výše uvedeném příkladu stránka obsahuje tři oblasti, z nichž každá je zpočátku načtena s dokumenty HTML frame_top.html, frame_left.html a frame_right.html. Kromě dokumentů HTML může rám obsahovat také grafiku. Chcete-li to provést, musíte v atributu zadat adresu odpovídajícího obrázku src, Například src="obrazek.gif". Vezměte prosím na vědomí, že prvek používá se bez uzavíracího štítku.
    Uvnitř nádoby může obsahovat pouze značky nebo jinou sadu rámečků pokrytých štítky A .
    Štítek má následující atributy:

    • řádky— popisuje, jak rozdělit stránku na řádky:
    • sloupce— popisuje, jak je stránka rozdělena do sloupců:
    Oblasti vyplývající z tohoto rozdělení stránky budou rámy. Absence těchto atributů definuje jeden rámec, který zabere celé okno prohlížeče.

    V hodnotě atributu řádky A sloupce Je nutné uvést nikoli počet řádků nebo sloupců, ale šířku a výšku rámečků. Všechny hodnoty v seznamu jsou odděleny čárkami. Rozměry lze zadat v absolutních jednotkách (pixelech) nebo procentech:

    • cols="20%, 80%"— okno prohlížeče je pomocí atributu rozděleno do dvou sloupců sloupce, levý sloupec zabírá 20 % a pravý 80 % okna prohlížeče.
    • rows="100, *" Okno prohlížeče je pomocí atributu rozděleno na dvě horizontální okna řádky, horní okno zabírá 100 pixelů a spodní okno zabírá zbývající prostor určený symbolem hvězdičky.

    Jak je vidět z tohoto příkladu, kontejner s atributem řádky nejprve vytvoří dva vodorovné snímky a nahradí druhý snímek jiným který pomocí atributu rozdělí spodní vodorovný rámeček na dva sloupce sloupce, levý sloupec zabírá 20 % a pravý 80 % okna prohlížeče.
    Pokud prohlížeč nepodporuje rámce, v okně se zobrazí text umístěný mezi značkami </b> A <b> . Vše mezi značkami </b> A <b> , je ignorován prohlížeči, které podporují rámce. Vývojář tedy potřebuje napsat kód, který duplikuje obsah rámců jinými prostředky, a umístit tento kód do kontejneru </b>, pak všichni uživatelé uvidí jeho webovou stránku. <br>Jak již bylo uvedeno, nepárová značka se používá k vložení samostatného rámce do dokumentu <b><frame> </b>. Atribut <b>src</b> určuje dokument, který má být zobrazen uvnitř tohoto rámce, například: <frame src="frame_top.html">. Pokud atribut <b>src</b> chybí, zobrazí se prázdný rámeček.</p> <h2>Ohraničení nebo mezera mezi snímky</h2> <p>Ve výchozím nastavení prohlížeč zobrazuje mezi rámečky šedý, obvykle 3D čárový okraj, který mohou návštěvníci použít k úpravě velikosti rámečku. <br>S okrajem rámu lze manipulovat jako s jakýmkoli jiným prvkem rámu. K tomu slouží několik atributů prvků <b><frameset> </b>, což vám umožní přizpůsobit okraje rámečků. Tloušťka hraniční čáry je určena atributem <b>okraj</b>. Výchozí hodnota tloušťky okraje je pět. <br>Chcete-li skrýt ohraničení rámečku, musíte buď nastavit hodnotu šířky ohraničení na nulu, nebo nastavit hodnotu „no“ nebo „0“ atributu <b>rámová hranice</b>. Atribut <b>rámová hranice</b> může mít pouze dva protichůdné významy. Pokud je hodnota atributu <b>rámová hranice</b> se rovná „ano“ nebo „1“, zobrazí se rámeček rámečku, a pokud „0“ nebo „ne“, pak ne. Vezměte prosím na vědomí, že hodnoty atributů <b>rámová hranice</b> se liší pro různé prohlížeče. K vyřešení tohoto problému použijte atribut dvakrát <b>rámová hranice</b> a u některých prohlížečů je také nutné přidat atribut <b>framespace</b> s hodnotou "0":</p><p> <frameset frameborder="0" framespacing="0" frameborder="no" border="0"> </p><p>V následujícím příkladu odstraníme hranici mezi snímky:</p> <h3>Příklad: Odstranění ohraničení mezi snímky</h3> <ul><li>Zkus to sám "</li> </ul><table><tr><td style="width: 10px;background-color:green;color: white;">frame_left</td> <td style="width: 90%;background-color:lime;color: white;">frame_right</td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Rámy bez okrajů</title> </head> <frameset cols="100,*" frameborder="0" framespacing="0" frameborder="no" border="0"> <frame src="frame_left.html" name=" frame_left" > <frame src="frame_right.html" name="frame_right" > </frameset> </html></p> <p>Pokud odstraníte ohraničení mezi rámečky, návštěvníci nebudou moci změnit velikost rámce v prohlížeči. Můžete také zabránit změně velikosti rámečku zachováním okrajů pomocí atributu <b>noresize</b>:</p><p> <frame src="frame_left.html" noresize> </p><p>Použití atributu <b>bordercolor</b> Barvu okraje rámečku můžete změnit, stačí zadat kód nebo odpovídající vyhrazený název barvy. <br>Níže je uveden příklad stránky HTML, která obsahuje výše popsané ovládací atributy rámečku: barva rámečku je červená, velikost horního rámečku nelze změnit:</p> <h3>Příklad: Frame Border Control</h3> <ul><li>Zkus to sám "</li> </ul><table style="border-collapse:collapse;"><tr><td style="border-bottom: 4px solid red;background-color:blue;color: white;" colspan="2">frame_top</td> </tr><tr><td style="border-right: 4px solid red;width: 20%;background-color:green;color: white;">frame_left</td> <td style="width: 80%;background-color:lime;color: white;">frame_right</td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Správa hranic rámců</title> </head> <frameset rows="150, *" border="10" bordercolor="red" frameborder="1" frameborder="yes"> <frame src="frame_top.html" noresize> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html"> </frameset> </frameset> </html></p> <p>Pokud chcete stránku zobrazenou uvnitř rámečku umístit blíže k jejím okrajům, nebo ji naopak posunout dále, změňte atributy <b>výška okraje</b> A <b>šířka okraje</b>štítek <b><frame> </b>. Atribut <b>výška okraje</b> definuje odsazení mezi obsahem rámečku a jeho horním a spodním okrajem. Syntax:</p><p> <frame marginheight="число"> </p><p>Atribut <b>šířka okraje</b> definuje odsazení mezi obsahem rámečku a jeho pravým a levým okrajem. Syntax:</p><p> <frame marginwidth="число"> </p><p>Tento řádek html například umístí zobrazenou stránku blízko okraje rámce:</p> <p>Pokud stránka zobrazuje posuvník, který nechcete, můžete problém vyřešit zadáním atributu <b>rolování</b>="ne" ve značce <b><frame> </b>. Mějte ale na paměti, že pokud rámeček není dostatečně velký na to, aby zobrazil celý obsah stránky, pak návštěvník nebude mít žádnou možnost posouvat zobrazenou stránku.</p> <h2>Odkazy uvnitř rámečků</h2> <p>Následování odkazu v běžném HTML dokumentu se provádí následovně: klikněte na odkaz a aktuální dokument je nahrazen novým v aktuálním nebo v novém okně prohlížeče. Při použití rámců se schéma načítání dokumentů HTML liší od běžného a hlavním rozdílem je možnost načíst dokument HTML do jednoho rámce z jiného rámce. <br>Chcete-li načíst dokument do určitého rámce, použijte atribut <b>cílová</b>štítek <b><a> </b>. Jako hodnota atributu <b>cílová</b> je použit název rámce, do kterého bude načten dokument určený atributem <b>název</b>štítek <b><frame> </b>. Za zmínku také stojí, že název rámce musí začínat buď číslicí, nebo latinským písmenem. Následující jména se používají jako vyhrazená jména:</p> <p>U externích odkazů byste měli nastavit atribut target buď na _top nebo _blank, abyste zajistili, že se projekty třetích stran nezobrazí ve vašich rámcích, ale vyplní celé okno prohlížeče.</p> <p>Následující příklad ukazuje dokument HTML, ve kterém pravý rámec načte stránku z odkazu umístěného v horním rámci. Odkaz na dokument, který se otevře v pravém rámu:</p><p> <a href="http://www.google.com" target="frame_right">Google</a> </p><p>Pravý rám je pojmenován <i>frame_right</i>:</p><p> <frame src="frame_right.html" name="frame_right"> </p><p>Chcete-li načíst dokument do určeného rámce, použijte konstrukci <i>target="frame_right"</i>, jak ukazuje příklad:</p> <h3>Příklad: Odkaz na jiný snímek</h3> <ul><li>Zkus to sám "</li> </ul><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Odkaz na jiný rámeček</title> </head> <frameset rows="100, *"> <frame src="frame_topic.html"> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html" name="frame_right"> </frameset> <noframes> <p>Váš prohlížeč nezobrazuje rámce</p>

    Plovoucí rámy

    Živel

    Před použitím rámců v praxi by nebylo na škodu zjistit, co to je, a také výhody použití rámců k uspořádání informací na webových stránkách ve srovnání se stejnými tabulkami.

    Všechny příklady výše v knize se zabývaly zarovnáním textu, grafiky, tabulek a dalšího obsahu v dokumentech HTML v okně prohlížeče. Mohl však zobrazit obsah pouze jednoho dokumentu. Použití rámců umožňuje rozdělit okno prohlížeče na několik částí, ve kterých lze zobrazovat různé HTML dokumenty. Například, jak je znázorněno na Obr. 8.1.

    Rýže. 8.1. Tři dokumenty v jednom okně


    V tomto případě je obsah každého dokumentu zarovnán vzhledem k jeho vlastnímu oknu – rámu. Nyní si představte, že levý horní rám obsahuje odkazy na zdroje webu, levý dolní obsahuje nějakou reklamu nebo jiné informace a velký pravý rámeček obsahuje text. Řekněme, že při procházení webu se změní pouze text zobrazený v pravém rámu. V tomto případě použití rámů umožňuje následující.

    Posouvat obsah některých snímků bez ohledu na obsah ostatních.

    Procházejte mezi stránkami webu a načtěte obsah pouze do pravého rámce. To šetří čas uživatele, protože statický obsah webu je stažen ze serveru pouze jednou.

    Nyní, když jste se s rámečky seznámili, můžete se podívat na to, jak se webové stránky vytvářejí a konfigurují pomocí rámců.

    8.2. Vytvoření sady rámců

    Dokonce i nejjednodušší místo zobrazené na Obr. 8.1, sestává ze čtyř HTML dokumentů. Obsah tří z nich se zobrazí v okně prohlížeče. Čtvrtý dokument, který je potřeba otevřít prohlížečem, obsahuje popisy rámců, na které je okno rozděleno, a také pokyny pro prohlížeč, odkud do vytvořených rámců načítat stránky. Obsah HTML dokumentu je uveden v příkladu 8.1.

    Příklad 8.1. Soubor s popisem rámečku

    Webové stránky s rámečky

    Zde můžete vidět dva nové HTML prvky: FRAMESET a FRAME. První z nich se používá k rozdělení okna prohlížeče nebo okna rodičovského rámce do samostatných rámců. Element FRAMESET je určen párovými tagy A. Při rozdělování okna na rámečky se používají následující atributy prvku FRAMESET:

    Cols – seznam hodnot šířky pro vytvořené snímky (lze použít jak absolutní hodnoty v pixelech a procentech, tak i proporcionální, viz příklad 8.1);

    Řádky – seznam hodnot výšky pro vytvořené snímky (hodnoty jsou podobné hodnotám atributu cols).

    Můžete nastavit hodnoty pouze jednoho z atributů. Pokud je navíc nastaven pouze atribut col, pak vytvořené rámce zaberou celou výšku okna prohlížeče. Pokud je nastaven pouze atribut rows, pak vytvořené rámce zaberou celou šířku okna prohlížeče. Pokud jsou nastaveny oba atributy, rámečky se vytvářejí zleva doprava a shora dolů.

    Mezi tagy A musí obsahovat buď popisy každého rámce pomocí elementu HTML FRAME, nebo definice vnořených rámců. Podívejme se nejprve na popis rámců pomocí prvku FRAME. Tento HTML element je specifikován pomocí jediné značky . Níže jsou uvedeny jeho nejčastěji používané atributy:

    Název – určuje název rámce, který umožňuje jeho použití jako cílového rámce v hypertextových odkazech;

    Src – URI dokumentu, jehož obsah je zobrazen v okně rámce;

    Noresize – booleovský atribut, který blokuje možnost změny velikosti okna rámce;

    Posouvání – umožňuje zobrazit nebo skrýt posuvníky v okně rámečku, může nabývat hodnot ano (zobrazit posuvníky), ne (nezobrazovat posuvníky) nebo auto (výchozí: zobrazit posuvníky pouze v případě, že se obsah nezobrazí pasují do rámu okna);

    Frameborder – udává, zda má prohlížeč zobrazovat rám okna, může nabývat hodnot 1 (rámeček je zobrazen jako na obr. 8.1, standardně použit) nebo 0 (rámec není zobrazen);

    Výška okraje – nastavuje svislou vzdálenost mezi okraji a obsahem rámečku.

    Koncept vnořených rámců byl zmíněn dříve. Nyní je čas podívat se na vnoření rámů podrobně. V HTML mohou být rámce vnořeny do sebe libovolněkrát. To se používá, když potřebujete rozdělit okno prohlížeče, například jako na Obr. 8.1. Pozorně si prostudujte následující pasáž.

    Tím se vytvoří vnější sada dvou rámců, které zabírají celou výšku okna prohlížeče. Tím se vytvoří další sada rámců v levém rámci vnější sady. Nutno podotknout, že blok … podobně jako jeden prvek FRAME (popisuje obsah jednoho snímku z vnější sady). Při analýze výše uvedeného fragmentu můžeme jasně říci, že levý rámec vnější sady je rozdělen a obsah dokumentu page3.html je načten do pravého rámce.

    V dokumentu frameset je ještě jeden pozoruhodný rozdíl – nemá tělo (prvek BODY). Takový dokument nesmí obsahovat jiný obsah než definici sady rámců.

    8.3. Nové možnosti hypertextových odkazů

    Téměř na začátku této kapitoly bylo řečeno, že pomocí rámců můžete uspořádat navigaci na webu tak, že se ze serveru stahují pouze potřebné informace a všechny statické části (například seznam odkazy na web, název webu atd.) podléhají změnám nebo se ze serveru restartují. Této možnosti je dosaženo určením cílového rámce pro hypertextové odkazy, na který je třeba po kliknutí změnit pouze obsah jednoho z rámců.

    Cílový rámec jednotlivých hypertextových odkazů

    Atribut target se používá k určení cílového rámce každého hypertextového odkazu, tj. rámce, ve kterém se zobrazí obsah dokumentu HTML otevřeného odkazem. Hodnota tohoto atributu může být buď název požadovaného rámce (hodnota atributu názvu tohoto rámce) nebo jedna z následujících předdefinovaných řetězcových hodnot:

    Prázdný – otevře dokument v novém okně;

    Self – otevře dokument ve stejném okně, kde je umístěn hypertextový odkaz;

    Rodič – otevřete dokument v okně nadřazeného rámce (stejně jako _self, pokud rámec, ve kterém je umístěn hypertextový odkaz, nemá nadřazeného);

    Nahoře – nahradí obsah okna prohlížeče obsahem otevíraného dokumentu a zahodí všechny dříve vytvořené rámce.

    Atribut target je podporován pro všechny prvky HTML, které umožňují vytvářet hypertextové odkazy: A, LINK, AREA.

    Nyní, abychom upevnili získané znalosti, přepracujeme dokument z příkladu 7.11 předchozí kapitoly, přičemž odkazy, název a text webu umístíme do samostatných rámců.

    Dokument popisující sadu rámců se bude jmenovat index.html. Jeho obsah je uveden v příkladu 8.2.

    Příklad 8.2. Soubor popisu sady rámců

    Nové webové stránky s rámečky

    marginheight = 0 frameborder = 0>

    Ve výše uvedeném příkladu je název přiřazen pouze jednomu snímku (pravému dolnímu). V tomto rámci se zobrazí obsah dokumentů.

    Soubor links.html obsahuje dokument s hypertextovými odkazy na ukázkové soubory (obsahuje také odkaz na úvodní stránku). Předpokládá se, že soubory s příklady jsou umístěny ve složce Příklady. Níže je obsah souboru links.html (všimněte si hodnoty cílového atributu hypertextových odkazů) (Příklad 8.3).

    Příklad 8.3. Soubor s hypertextovými odkazy

    Text kapitoly

    Příklad 7.1

    Příklad 7.2

    Příklad 7.3

    Příklad 7.4

    Příklad 7.5

    Příklad 7.6

    Příklad 7.7

    Příklad 7.8

    Příklad 7.9

    Příklad 7.10

    Soubor title.html obsahuje název webu (spolu s hypotetickým logem), který se zobrazí v odpovídajícím rámci (příklad 8.4).

    Příklad 8.4. Soubor pro rámec se záhlavím webu

    Titulek webové stránky

    7. Tabulky

    Jak můžete vidět z textu HTML dokumentu (viz příklad 8.4), abychom dosáhli přijatelného umístění obrázku loga, museli jsme se uchýlit k použití tabulky.

    V uvažovaném příkladu webu je použit jiný soubor - start.html. Tento soubor obsahuje úvodní stránku webu. Obsah tohoto souboru může být jakýkoli. Při psaní příkladu byla část textu kapitoly umístěna do souboru start.html. 7. Z důvodu úspory místa v knize není uveden obsah tohoto souboru.

    Po vytvoření všech souborů webu můžete obdivovat výsledek (obr. 8.2).


    Rýže. 8.2. Web vytvořený pomocí rámců

    Výchozí cílový rámec

    Nakonec se podívejme, jak můžete snížit množství textu v dokumentu HTML při použití stejného rámce jako cílového rámce pro mnoho hypertextových odkazů. Podívejte se znovu na text v příkladu 8.3. Každý hypertextový odkaz v tomto příkladu má stejnou hodnotu cílového atributu. Abyste jej nemuseli zadávat mnohokrát, můžete přiřadit výchozí cílový rámec.

    Výchozí cílový rámec HTML je nastaven na prvek BASE (jediná značka ). Cílový atribut tohoto prvku je nastaven na název výchozího rámce. Pokud je použit element BASE, musí být umístěn v HEAD dokumentu HTML.

    Díky tomu lze příklad 8.3 přepsat následovně (příklad 8.5).

    Příklad 8.5. Použití výchozího cílového rámce

    Text kapitoly

    Příklad 7.1

    Příklad 7.2

    Příklad 7.3

    Příklad 7.4

    Příklad 7.5

    Příklad 7.6

    Příklad 7.7

    Příklad 7.8

    Příklad 7.9

    Příklad 7.10

    8.4. prvek NOFRAMES

    Rámy jsou velmi atraktivním prostředkem pro navrhování webových stránek, jak by mělo být zřejmé z příkladů uvedených výše. Rámce v HTML se však neobjevily okamžitě a dlouhou dobu nebyly standardizovány, takže zpracování a prezentace dokumentů s rámečky v různých prohlížečích se stále mohou výrazně lišit. Navíc poměrně velký počet uživatelů může mít stále starší verze prohlížečů, které rámce vůbec nepodporují.

    Pokud je důležité, aby uživatel při prohlížení webu, který používá rámce, viděl alespoň něco, měli byste použít HTML element NOFRAMES. Tento prvek je určen párovými značkami A. Je umístěn v jednom souboru s popisem sady rámců.

    Mezi tagy prvku NOFRAMES je umístěn HTML text, který prohlížeč zobrazí, pokud nepodporuje rámce (nebo pokud uživatel v prohlížeči zakázal podporu rámců). Pokud je prohlížeč schopen zobrazit rámečky, pak je text mezi značkami prvků NOFRAMES ignorován. Text mezi značkami A může být naformátován úplně stejně, jako kdyby byl mezi tagy A.

    Je zřejmé, že pomocí prvku NOFRAMES lze vytvořit mnohem více přenosných stránek, zejména pokud je dbáno na to, aby nedošlo ke ztrátě důležitých informací, když nelze snímky zobrazit. Pro dříve diskutovaný web můžete vytvořit verzi, která nepoužívá rámce (vyrobené například pouze pomocí tabulek), a dovnitř prvku NOFRAMES můžete umístit informační zprávu a odkaz na tuto verzi webu (příklad 8.6 ).

    Příklad 8.6. Pomocí prvku NOFRAMES

    Nové webové stránky s rámečky

    marginheight = 0 frameborder = 0>

    Pozornost! Váš prohlížeč nepodporuje rámy. Chcete-li otevřít verzi webu, která nepoužívá rámce, klikněte

    tady.

    8.5. Plovoucí rámy

    Kromě běžných snímků, o kterých jsme hovořili dříve, umožňuje HTML použití takzvaných plovoucích snímků. Plovoucí rámce vypadají úplně stejně jako vložené HTML dokumenty: prohlížeč je zobrazuje v okně umístěném přímo v textu (obrázek 8.3).


    Rýže. 8.3. Vzhled plovoucího rámu


    Chcete-li vytvořit plovoucí rámce, použijte prvek HTML IFRAME (nastavený pomocí párových značek ). Plovoucí rámec se konfiguruje pomocí následujících atributů:

    Src – URI dokumentu HTML zobrazeného v okně rámce;

    Frameborder – režim zobrazení ohraničení rámečku, může nabývat hodnot 0 (nezobrazovat ohraničení) nebo 1 (zobrazit ohraničení);

    Posouvání – režim zobrazení posuvníků obsahu rámečku, může nabývat hodnot no (nezobrazovat posuvníky), ano (zobrazovat posuvníky) nebo auto (ve výchozím nastavení se posuvníky zobrazovat pouze v případě, že se obsah nevejde);

    Marginwidth – nastavuje horizontální vzdálenost mezi rámečky a jeho obsahem (v pixelech);

    Výška okraje – nastavuje svislou vzdálenost mezi okraji a obsahem rámečku;

    Zarovnat – nastavuje polohu plovoucího rámečku v textu, může nabývat hodnot vlevo, vpravo a na střed;

    Šířka – nastavuje šířku okna plovoucího rámce, hodnota může být absolutní (v pixelech) nebo procenta;

    Výška – nastavuje výšku okna s plovoucím rámem.

    Text mezi značkami zobrazí prohlížeč pouze v případě, že není možné zobrazit samotný plovoucí rámec.

    Jako příklad použití prvku IFRAME je níže uveden text HTML dokumentu, jehož podoba je na Obr. 8.3 (příklad 8.7).

    Příklad 8.7. Plovoucí rámový dokument

    Příklad stránky s plovoucím rámečkem

    Plovoucí rám vypadá takto: