Rubriky

Vyhledávání v článcích
Co hledáte ?



Provozuje:
icok


ikonka partnera
ikonka partnera
Dnes má svátek Michaela je úterý 19.10.2021



Novinky





Magazín eKamarád vás vítá
Přinášíme vám zpravodajství ze světa dětí a mládeže. Chcete se i vy podělit s ostatními o své zkušenosti či nějak pobavit naše dětské čtenáře? Není nic jednoduššího. Přidejte se do naší kamarádské rodiny a napište nám na email redakce8(Z)ekamarad.cz
(Místo (Z) napište @).

Děláme stránky v HTML editoru - 10. část

V dnešní desáté lekci se budeme zabývat optimalizací stránek, tedy jak optimalizovat ve Front Page Expressu stránku pro určité rozlišení.

     Chceme-li optimalizovat stránky, je nejjednodušší k tomu použít tabulky. Při tom to, že jsem použili tabulku ani nemusí být vidět. Záleží na nás, jak se rozhodneme, co bude pro vzhled naší stránky lepší.

     Otázka je, pro jaké rozlišení optimalizovat? Dále se můžeme zeptat, proč vůbec optimalizovat? Je to nutné? Obecně bychom řekli, že nejvhodnější je optimalizovat pro rozlišení 600 x 800, protože je to asi nejběžnější. Menší používá už málokdo a při větším rozlišení optimalizace na menší nevadí. Optimalizujeme, pokud máme uspořádání stránky, které nechceme, aby se rozházelo, protože by mohlo negativně ovlivnit vzhled stránky. Například, máme-li v textu fotografie a tvořili jsme stránku v rozlišení 600 x 800. Při větším rozlišení se text roztáhne a fotografie jsou v něm umístěny jinde. Může dojít i k tomu, že tento posun rozhodí grafiku, zejména, zabírá-li fotografie na šířku více jak polovinu stránky. Při rozlišení 600 x 800 budou tyto fotografie pod sebou, jedna při levé straně, druhá při pravé. Podívá-li se ale na stránku někdo s vyšším rozlišením, roztáhne se text a druhá fotografie povyjede výše a tím pádem nebude pod první fotografií, ale částečně vedle ní. Pokud šíře obou fotografií je větší, než rozlišení daného prohlížeče, rozhodí to grafiku a umístí to dolů lištu pro horizontální pohyb, což není žádoucí. Samozřejmě, pokud nic takového na stránce nemáme a je např. celá centrovaná na střed, pak ji většinou není nutné optimalizovat.

     Uveďme si několik příkladů. Podívejme se např. na všem velmi dobře známou stránku http://seznam.cz. Máte-li vyšší rozlišení, vidíte, že Seznam máte na prostředku a vpravo i vlevo máte místo. Budete-li mít rozlišení, na které je optimalizován, budete jej mít přes celý monitor. Seznam je příkladem, kdy je k optimalizaci použita neviditelná tabulka.

     Podíváme-li se na http://www.atlas.cz, vidíme zde opět optimalizaci tabulkou. V horní části je to viditelné, ve spodní ne. Stejný pohled se nám naskytne na stránce http://www.centrum.cz. Jinak je ale např. řešena Caramba, která je také umístěna do tabulky, ale podíváte-li se na ní pod různými rozlišeními, nebo v ne zcela maximalizovaném okně prohlížeče, vidíte, že se velikostí přizpůsobuje. Máte ji tedy vždy přes celý monitor a pouze, klesne-li rozlišení pod určitou mez, objeví se vám dole lišta pro horizontální posun.

     Pomocí tabulky je optimalizovaný i eKamarád, dále např. Tisková agentura mladých eKamarád, ale i vstupní stránka Dětské seznamky. Hned druhá stránka alůe optimalizována není a roztáhne se vám přes celý monitor. Tato stránka se pružně přizpůsobí a její minimální šířka je dána bannerem. Ale další stránky už opět optimalizované jsou.

     Nyní se ale pojďme podívat na nějaké stránky, které jsou dělány v HTML editoru. Na 600 x 800 jsou např. optimalizovány stránky Virtuální svět a to jak na doméně ICOK tak na Junwebu. Optimalizovaný je třeba i Virtuální oddíl, na němž ti, kdo mají rozlišení 600 x 800 a nižší neuvidí obálky na pozadí. Stejně jsou optimalizované stránky Oblasti Praha SKSK ČR a ve výčtu stránek bychom mohli pokračovat.

     Naopak neoptomalizované stránky např. představují stránky SKSK ČR, které ale po vstupu z úvodní stránky dále také optimalizovány jsou. Další typickou neoptimalizovanou stránkou je třeba stránka Internetstudia pro děti a mládež, která je centrována na střed. Obdobně je dělaná stránka Fanklubu Majáků, ale také např. Tulácký Bratříček.

     Ale dost bylo teorie, zkusíme si jednu takovou optimalizovanou stránku vytvořit. Otevřete si v Front Page Expressu opět naši stránku index.htm. Z ní si uděláme odkaz na novou stránku, kterou vytvoříme jako optimalizovanou. Nazveme ji třeba "Nová stránka" a tento odkaz umístíme pod odkaz na Silvestr. Hyperetxtový odkaz nasměrujeme na soubor stranka.htm.

     Nyní vytvoříme novou stránku, což již umíte. Nezapomeňte ji hned uložit pod "Soubor" - "Uložit jako" a soubor pojmenovat stranka.htm. Vycentrujeme kurzor a založíme tabulku o třech řádcích a třech sloupcích. Protože jsme už několik tabulek dělali, zkusíme tentokrát udělat neviditelnou tabulku. Zvolíme tedy pozadí i ohraničení bílé, šířku tabulky zadáme 590 pixelů, a velikost okraje, výplň buňky i hustotu buněk nastavíme na nulu.

     V příští lekci se budeme zabývat bannery. Dnes už s tím ale budeme počítat a místo nahoře uprostřed si vyhradíme pro banner. Zadáme si tedy i rozměry sloupců. Levý necháme široký 130 pixelů, aby se do něj vešly čtvercové bannery, které mají rozměr 125 x 125 a doprava budeme dávat ikonky, kterým postačí šířka sloupce 100 pixelů.

     V levém sloupci tedy najedeme kurzorem do horní buňky (v 1. řádku), klineme pravým tlačítkem myši a zvolíme "Vlastnosti buňky". Nastavíme šířku 150 pixelů, jinak necháme nastavení tak, jak je. Stejným způsobem nastavíme pravou horní buňku na šířku 100 pixelů a prostřední horní buňku na zbytek, tj. 340 pixelů.

     Nyní máme tedy nastavené horizontální rozměry. Vertikální rozměry budou určeny množstvím textu, proto jsou nyní v tabulce minimální, protože je prázdná. Začneme tedy psát do prostřední buňky, kterou dnes zaplníme. Okrajové buňky si z velké část necháme na příště na bannery a počítadlo.

     Do prostřední buňky tedy umístíme kurzor, který vycentrujeme a uděláme nadpis "Moje stránka". Barvu písma dáme tmavě modrou, zvětšíme ji o tři a nastavíme tučné písmo. Potom odentrujeme, vycentrujeme doleva a vrátíme standartní velikost písma. Napíšeme tento text: "Toto je moje stránka, na které se učím optimalizovat pomocí tabulky. Tato tabulka by měla být neviditelná. Ve Front Page Expressu, v kterém stránku děláme, je vidět. Uvidíme, jak to bude vypadat v Internet Exploleru."

     Všimněte si, že optimalizace není moc dokonalá, alespoň zatím, kdy v krajních sloupcích nic není. Proto přidáme něco do spodních krajních sloupců. Do levého tučně napíšeme: "Poslední aktualizace 3. 1. 2003" a do pravého "Zpět", což trochu zvětšíme (2x), dáme do kurzívy a tučného písma a uděláme z toho hypertextový odkaz nasměrovaný na index.htm.

     Jak vidíte, když jsme zaplnili i krajní sloupce, už se to trochu formuje do správných poměrů. Ale nesmíme zapomínat, že v prohlížeči to zase bude vypadat trochu jinak. Pro dnešek toho již necháme a stránku nahrajeme. Nezapomeňte, že musíte nahrát nejenom stránku stranka.htm, ale i stránku index.htm, kde jsme přidávali odkaz na tuto podstránku. Dnešní lekci najdete na adrese http://www.html10.ekamarad.cz. Příště tuto stránku doděláme. A protože jsme zapomněli minule udělat na stránku silvestr.htm navigaci, pomocí které bychom se vrátili na stránku index.htm, dostanete to za domácí úkol. Umístěte ji dolů na střed pod animaci menším, ale tučným písmem oproti nadpisu.

     Až stránku nahrajete a podíváte se na ni v prohlížeči, tak zjistíte, že tabulka je opravdu neviditelná.

  • Autor: Fuček Miloslav, Pařízek Mirek
  • Datum publikace: 03.01.2003
  • Článek zařazen do: Internet
  • Počet komentářů ke článku: 0 přidat komentář
  • Článek si přečetlo 3069 čtenářů

    Sdílet na Facebooku

© Stránka vygenerována za 0.0034 sec. | Aktuálně máme v databázi 8131 článků
práva na články náleži jejich autorům, provozovatel magazínu nenese žádnou zodpovědnost za škody způsobené prohlížením těchto stránek.
Magazín provozuje ICOK (administrátor Miloslav Fuček)
http://icok.icok.cz | http://wwww.mfsoft.cz

Bazény na míru | Bennewitzovo kvarteto | Lady XL Fashion | Optika v Praze | Světové brýle.cz | Inspiro ERP systém | Bezpečnostní poradce | Fass-Hasicí technika | Dukla - Atletika | Dukla Praha