Metodika tvorby stránek s využitím technologie XHTML/CSS

Transkript

1 Vysoká škola ekonomická v Praze FAKULTA INFORMATIKY A STATISTIKY Obor: Podnikové informační systémy Metodika tvorby stránek s využitím technologie XHTML/CSS BAKALÁŘSKÁ PRÁCE Vedoucí práce: Mgr. Karel Mašek Autor: Petr Borák Praha, 2009

2 Prohlašuji, že jsem absolventskou práci na téma Metodika tvorby stránek s využitím technologie XHTML/CSS zpracoval samostatně a použil pouze zdrojů, které cituji a uvádím v seznamu použité literatury. V Praze dnhe

3 Obsah 1. HTML - zevrubně Historie Organizace zabývající se standardy na Webu The World Wide Web Consortium The Internet Egineering Task Force 6 2. XML (Extensible Markup Language) Proč je užitečné rozumět XML? Anatomie jednoduchého XML dokumentu PROLOG Deklarace XML Prázdný řádek KOŘENOVÝ ELEMENT Tvorba platného XML dokumentu pomocí deklarace typu dokumentu NÁZEV KOŘENOVÉHO ELEMENTU DEFINICE TYPU DOKUMENTU Deklarace typu elementu Deklarace atributu ENTITY ELEMENTY Gramatika elementů Gramatika elementů XML XHTML DTD pro XHTML Tvorba minimálního XHTML dokumentu Rozdíly v syntaxi mezi HTML a XHTML CSS Kontextuální selektory Kaskáda Propojení CSS s dokumentem INLINE STYLY EXTERNÍ STYLY Hacky a filtry 33 3

4 5. 1. Internet Explorer a kaskádové styly TAN HACK MODIFIKOVANÝ BOX MODEL HACK HACK POMOCÍ KOMENTÁŘE A ZPĚTNÉHO LOMÍTKA OWEN HACK HOLLY HACK CLEARFIX Pozicování FIXED ABSOLUTE RELATIVE STATIC INHERIT Floating Tvorba komponent stránky Navigační struktura stránky a tvorba menu Hlavní menu (první varianta) Hlavní menu druhá varianta Vedlejší menu Pravý layout formulář, aktuality PRAVÝ LAYOUT TVORBA STRUKTURY Navigační prvky v horní části lišty Slideshow Seznam použitých zdrojů Přílohy 73 4

5 Shrnutí obsahu práce V práci se nejdříve zabývám principy jednotlivých technologií, na nichž je postaven značkovací jazyk XHTML, což je nezbytný základ pro následný návrh metodiky. U čtenáře předpokládám znalost HTML, kaskádových stylů a objektového Javascriptu. Jednotlivé technologie rozebírám jen do míry potřebné pro kapitoly, které obsahují popis metodiky tvorby dílčích funkčních prvků stránek. Poté, co jsou probrány nezbytné základy, navrhuji, popisuji a následně analyzuji metodiku tvorby stránky, na kterou je aplikován design. Po jednotlivých fázích probírám tvorbu HTML 4.01 template. Závěrem práce je zhotovení validní HTML/CSS šablony. Summary First, I study the principles of each technology the XHTML markup language is based on, which is a nescessary base for the consecutive projecting of the method. I assume, that a reader disposes of a basic knowledge of both HTML and CSS. Each technology is being explored only as much as the level of chapters about the methods planning require. Furthermore I design and describe a method of processing an HTML/CSS template. 5

6 HTML - zevrubně Historie Hypertext Markup Language vznikl v roce 1991 v laboratořích CERN jako výsledek projektu, jehož cílem bylo usnadnit sdílení dokumentů na akademické půdě. U jeho zrodu stál Tim Berners-Lee. Základem byl SGML (Standard Generalized Markup Language). Pracovní skupina kolem Tima Berners-Leeho umožnila skrze Web, jazyk HTML a prohlížeč, přístup ke sdílení dokumentů široké skupině uživatelů; a to i mimo akademickou půdu. Uživatelé totiž díky HTML již nebyli nuceni sdílet mezi sebou data jako kolekci víceméně nezávislých souborů. Jazyk HTML dokázal z této kolekce vytvořit jednotný celek. Nicméně situace na Webu se během let výrazně změnila a hlavní příčina rychlého rozšíření HTML se postupně začala stávat jeho slabinou. Byl stále více kladen důraz na dynamiku stránek a jejich vizuální podobu. Počátek tohoto trendu souvisí s neustále se rozšiřujícím okruhem uživatelů. Ještě v polovině devadesátých let se tvůrci stránek s výše zmíněným trendem vypořádávali víceméně oklikou. Vznikaly různá řešení, která měla za účel dodat stránce vedle informační také vizuální hodnotu. Důsledkem pak bylo, že tagy HTML byly využívány mimo svůj sémantický a obsahový rámec, což v mnoha případech vyústilo ve velmi špatně čitelné kódy, kdy často i celá stránka byla nadefinována jako jedna složitě strukturovaná tabulka. Časem, s rostoucí složitostí internetových aplikací, začala vedle nutnosti líbivého designu vyvstávat také potřeba obsahově a sémanticky validních dat. Odpovědí na vylíčený stav věcí jsou standardy konsorcia W3C, které se vydaly cestou oddělení obsahu od formy. 6

7 Vznikly CSS (Cascading Style Sheets), jejichž úlohou je dodat jednotlivým elementům na stránce vizuální podobu podle potřeb tvůrce a uvolnit sémantický potenciál HTML k čistě obsahovým účelům Organizace zabývající se standardy na Webu. Tak jako spousta jiných populárních technologií i HTML měl zpočátku podobu neformální specifikace. Tento stav byl přijatelný v době, kdy byl jazyk využíván úzkou skupinou uživatelů. S jejich přibývajícím počtem začalo být zřejmé, že je potřeba přistoupit k více formálním prostředkům. Vyvstala potřeba standardizace The World Wide Web Consortium Tato organizace vznikla s prvotním cílem stanovit standardy pro jazyk HTML a později také pro jazyk XHTML. Mimoto je v oblasti jejího záběru také standardizace jakékoli technologie, která se vztahuje k Webu. Pro účely této práce jsou podstatné zejména standardy pro značkovací jazyk XML a Kaskádové styly (CSS) The Internet Egineering Task Force IETF se zabývá všemi oblastmi souvisejícími s Internetem. Web je jen malou součástí v jejím celkovém záběru. IETF vydává veškeré své definice Internetových technologií jako dokumenty v jednotné podobě, které se nazývají Request for comments (RFC). 7

8 2. XML (Extensible Markup Language) XML je podmnožina SGML (Standard Generalized Markup Language)... Jeho cílem je umožnit použití SGML k odesílání, přijímání a zpracování dat na webu. (1) Proč je užitečné rozumět XML? Důvod je prostý. XHTML je HTML definované pomocí značkovacího jazyka XML. V čem je ale jazyk XHTML tak převratný oproti předchozím verzím HTML? Pro odpověď na tuto otázku je třeba jít až ke kořenům obou značkovacích jazyků. HTML se od XHTML na první pohled liší pouze v nepatrných detailech. Rozdíl mezi těmito jazyky je v jejich podstatě. HTML je založeno na značkovacím jazyku SGML. Problém je ovšem v tom, že samotný značkovací jazyk SGML je velmi rozsáhlý a propletený někdy až filozofickými pravidly a úvahami, což z něj dělá prakticky samostatnou vědní disciplinu. A to bylo v přímém rozporu se záměry tvůrců HTML. Důsledkem výše zmíněného je situace, kdy HTML odpovídá jen určitým, ale zdaleka ne všem, standardům vše pojímajícího SGML. W3C tedy definovalo nový, jednodušší a více flexibilní značkovací metajazyk XML. Pomocí XML byl definován XHTML. Rozdíl mezi HTML verze 4.01 a XHTML verze 1.1 je tedy ten, že HTML je postaven na SGML, přičemž v mnoha případech nesplňuje jeho standardy, zatímco XHTML je definován v metajazyku XML a naopak všem jeho standardům plně vyhovuje. Základem značkovacího jazyka XHTML je definice typu dokumentu zhotovená v XML. To přináší mimo jiné možnost tvorby vlastních elementů (samozřejmě při znalosti základů XML). Je pravda, že ve většině případů se zcela obejdeme s elementy a atributy, které známe již z HTML, ovšem nesmíme zapomínat, že i u XHTML se předpokládá neustálý a kontinuální vývoj. Tak se může časem stávat, 8

9 že postupy, na které jsme zvyklí při znalosti starší verze jazyka, nebudou v souladu s požadavky verze současné. Kouzlo XHTML je pak v tom, že si vytvoříme vlastní (rozšířené) DTD. 1 Pro tvorbu vlastního značkovacího jazyka pomocí XML máme následující možnosti: Vytvoření správně strukturovaného dokumentu Definování platného XML dokumentu Pomocí Definice typu dokumentu (Document Type Definition DTD) Pomocí schémat XML. Pro potřeby této práce je podstatné definování platného XML dokumentu pomocí definice typu dokumentu Anatomie jednoduchého XML dokumentu Jednoduchý element dokumentu XML může mít například následující podobu: <?xml version= 1.0?> <ELEMENT>... </ELEMENT> Každý XML dokument se skládá vždy ze dvou následujících částí: prologu, kořenového elementu. 1 Například pokud se budete zabývat otevřením stránky v novém okně. To bylo v HTML verze 4.0 možno vyřešit pomocí jednoduchého zápisu vlastnosti _blank v elemntu <a>. V XHTML tato vlastnost není definována. Rozšíření DTD je pak vedle použití Javascriptu jendou z možností řešení tohoto problému. 9

10 PROLOG Do prologu v jeho nejjednodušší podobě v optimálním případě patří: Deklarace xml prázdný řádek Prolog může dále obsahovat nepovinné komentáře, které zvyšují čitelnost dokumentu. Do prologu se také vkládá DTD Deklarace XML Obsahuje číslo verze XML a označení typu dokumentu. Přesto, že je nepovinná, je vhodné ji používat. Musí se vyskytovat vždy na prvním řádku dokumentu XML. Může mít následující podobu: <?xml version= 1.0?> Prázdný řádek Musí se vyskytovat vždy za prologem. Odděluje prolog od zbytku dokumentu KOŘENOVÝ ELEMENT Následuje za prologem. Je to hlavní element, který obsahuje všechny ostatní elementy v dokumentu XML. Zapisuje se v následující struktuře: <ELEMENT>...</ELEMENT> 10

11 2. 3. Tvorba platného XML dokumentu pomocí deklarace typu dokumentu Deklarace typu dokumentu patří k nejzákladnějším způsobům tvorby platného XML dokumentu. Umísťuje se do prologu hned za deklaraci XML. Obsahuje následující prvky: Název kořenového elementu Definici typu dokumentu Jednoduché schéma deklarace typu dokumentu může mít například následující podobu: <!DOCTYPE nazev_korenoveho_elementu DTD> NÁZEV KOŘENOVÉHO ELEMENTU Název zde uvedeného kořenového elementu musí vždy odpovídat názvu kořenového elementu v dokumentu DEFINICE TYPU DOKUMENTU DTD neboli definice typu dokumentu obsahuje deklarace definující jednotlivé elementy, jejich atributy a dále entity dokumentu. Veškeré deklarace elementů a atributů jsou tedy součástí Definice typu dokumentu. Zde je ukázka definice typu dokumentu s deklarací jediného elementu s názvem ZNACKA : [ <!ELEMENT ZNACKA ANY> ] 11

12 V DTD můžeme deklarovat následující druhy obsahu dokumentu XML: Deklarace typu elementu Deklarace seznamu atributů Deklarace entit Komentáře Instrukce zpracování Deklarace notace Reference na parametrické entity Deklarace typu elementu Obecně určují deklarace všech typů elementů obsažených v DTD a jejich obsah. Součástí každé deklarace je název typu elementu a určení jeho přípustného obsahu. Jednoduchá deklarace typu elementu s názvem PRVEK a jakýmkoli přípustným obsahem by vypadala následovně: <!ELEMENT PRVEK Any> Poslední parametr s názvem Any se nazývá specifikace obsahu. Element může obsahovat následující typy specifikace obsahu: elementy takto deklarovaný element může obsahovat jen zadané typy elementů. Na pozici klíčového slova se nachází název jiného elementu deklarovaného v DTD. 12

13 Smíšený obsah Může obsahovat kombinaci textových řetězců a definovaných elementů potomků. Přípustné hodnoty v obsahu elementu se uvádí na místě specifikace obsahu elementu v závorce a jsou odděleny znakem. Na konci celého modelu se nachází znak *. Zde je ukázka možné podoby deklarace elementu se smíšených obsahem, který má název SMISENY a může obsahovat na jiném místě deklarovaný element POLOZKA v kombinaci s textovými řetězci: <!ELEMENT SMISENY (#PCDATA POLOZKA)*> jakýkoli obsah klíčové slovo ANY, element může obsahovat jakýkoli počet elementů jakéhokoli typu a v jakémkoli pořadí. Obsah typu EMPTY klíčové slovo EMPTY, element musí být prázdný. Rozdíl mezi specifikací obsahu typu smíšený a element je ten, že smíšený obsah může vždy obsahovat znaková data, která se případně mohou v libovolném pořadí kombinovat s elementy potomků. Specifikace typu element naopak neobsahuje nikdy textový řetězec jako přímého potomka a jednotlivé definované elementy potomků mohou mít stanovené pevné pořadí a počet výskytů v mateřském elementu Deklarace atributu DTD musí obsahovat deklaraci všech atributů jednotlivých elementů nebo entit, které budou použity v dokumentu XML. Obecný formát deklarace atributu je: <!ATLIST Název DefiniceAtributu> Zde je výpis prvků obsažených ve výše uvedené deklaraci typu atributu s popisem jejich funkce: název název typu elementu, kterému náleží deklarované atributy. 13

14 Definice Atributu Samotný popis atributu, který nám udává název atributu, typ hodnoty atributu, výchozí hodnotu atributu, oznámení, zda je atribut povinný či ne. Následující element má název SATRIBUTEM, může mít jakýkoli obsah a je pro něj v seznamu atributů definován atribut s názvem Atribut, který nabývá textových hodnot a v případě jeho neuvedení, nabude implicitní hodnoty IHod. [ <!ELEMENT SATRIBUTEM ANY> <!ATLIST SATRIBUTEM Atribut Cdata IHod > ] ENTITY Entity hrají v dokumentech XML důležitou roli. Díky nim je možno tvořit rozsáhlé, přehledné a kompaktní DTD. Entita je pro lexikální analyzátor XML sekvence znaků, která je přeložena a nahrazena řetězcem. Entity mohou mít spoustu různých vlastností a dají se klasifikovat podle různých hledisek. Z hlediska místa jejich využití se entity dělí na: obecné a parametrické. 14

15 Obecné entity obsahují data, která se využívají uvnitř kořenového elementu v dokumentu XML. Zatímco parametrické entity jsou určeny k využití přímo v DTD. Lexikální analyzátor XML je pozná podle způsobu jejich zápisu. Před zápisem názvu parametrické entity se uvádí znak %. Obecná entita, která má následující podobu: <!ENTITY nazeventity obsah entity > by mohla být například uvedena v dokumentu XML na tomto místě:... <element> obsah textového elementu &nazeventity </ element>... Samozřejmě za podmínky, že obsah entity vyhovuje specifikaci obsahu v DTD pro element <element>. V tomto případě by se zástupný znak &nazeventity nahradil obsahem této entity tak, jak je to nadefinované v DTD. Entita v podobě <!ENTITY nazeventity SYSTEM externi.xml > by se nahradila obsahem dokumentu externi.xml. V tomto případě jde o externí entitu. Klíčové slovo SYSTEM je vyžadováno a musí být následováno systémovým identifikátorem, který popisuji o pár řádků níže. Externí entita může mít ještě jednu lehce odlišnější podobu, kdy se na místě klíčového slova SYSTEM vyskytuje PUBLIC. V takto definované externí entitě je PUBLIC následováno formálním názvem dokumentu. U externí entity se uvádí adresa v podobě cesty k souboru, ve kterém je uložena. Cesta k souboru se popisuje tzv. systémovým identifikátorem a může mít podo- 15

16 bu buď relativní cesty k dokumentu (v tomto případě se XML chová stejným způsobem, jaký známe z HTML), nebo může být uvedena v absolutní podobě pomocí URI (Uniform Resource Indicator). Nejčastěji používanou formou URI je URL (Uniform Resource Locator). Samotný jazyk XML již implicitně obsahuje pět nejčastěji se vyskytujících obecných entit. Těmi jsou: & & &apos; " > > < < ELEMENTY Elementem v DTD rozumíme definici značky v dokumentu XML, kterou poté můžeme používat podle definovaných pravidel. Tato pravidla jsou všechna obsažena právě v DTD. Jak již bylo řečeno dříve, vždy existuje jeden kořenový element, který obsahuje všechny ostatní elementy dokumentu(8). Proto, abychom byli schopni správně pracovat s deklaracemi elementů, je třeba si ještě trochu rozšířit obzory. Pro rekapitulaci opakuji, že elementy tvoříme v DTD pomocí deklarace typu elementu. Tato obsahuje vždy název elementu a specifikaci typu obsahu. Typ obsahu může nabývat různých podob a tyto podoby se mohou mezi sebou vzájemně proplétat. XML má přesně stanovená pravidla pro zápis specifikace obsahu, má svou gramatiku. Ta má své pevné základy v počítačové vědě. 16

17 Gramatika elementů V počítačových gramatikách se ve skutečnosti pro definici způsobů uspořádání jednotlivých elementů jazyka používají jen čtyři typy pravidel: je to sekvence, volba, seskupení a opakování. Sekvenční pravidla definují přesné pořadí (posloupnost neboli sekvenci), v nichž se musí jednotlivé elementy v jazyce zapisovat. Jenže například určité pravidlo gramatiky říká, že za elementem A následuje element B a za ním element C, pak musíme v dokumentu zapisovat elementy, A,B a C přesně v tomto pořadí. Chybějící element (zapíšeme například A a C, ale ne B), element navíc (A, B, E a teprve potom C), nebo nesprávné pořadí elementů (C, A, B) znamená porušení pravidla a výsledek nevyhovuje definované gramatice. V řadě gramatik, jazyk XML nevyjímaje, se sekvence definují jednoduše zápisem odpovídajících elementů v tom pořadí, v jakém se mají objevit, oddělují se přitom čárkami. Naše jednoduchá sekvence by se tudíž v definici DTD zapsala jako A, B, C. Pravidlo volby představuje v gramatice jistou flexibilitu, protože autor definice DTD si může vybrat jeden element z určité skupiny platných elementů. Pravidlo s volbou může například stanovit, že si můžeme vybrat libovolný z elementů D, E nebo F; libovolný z těchto tří elementů gramatickému pravidlu vyhoví. Podobně jako v řadě jiných gramatik se přitom v XML zapisují pravidla voleb jako seznam příslušných platných voleb oddělených znakem svislé čáry ( ). Naše jednoduché pravidlo zapíšeme tudíž v DTD jako D E F. Jestliže znak svislé čáry přečteme jako slovíčko nebo, bude význam pravidel s volbou zřejmý. U pravidla seskupení se dvě nebo více pravidel slučuje do jediného pravidla; tím se vytváří bohatší a užitečnější jazyk. V pravidle seskupení můžeme například 17

18 uvést sekvenci elementů, za níž následuje volba a další sekvence. Skupiny vyznačíme v pravidle DTD uzavřením do závorek. Dokument ::= A, B, C, (D E F), G Tento zápis znamená, že dokument musí začínat elementy A, B a C, po nichž následuje jeden libovolně vybraný element ze skupiny D,E nebo F a nakonec element G. Opakování vyjadřuje zápis jednoho nebo více elementů opakovaně. V jazyce XML se, opět podobně jako v řadě jiných jazyků, vyjadřuje opakování pomocí speciální znakové přípony, kterou zapíšeme na konec elementu či skupiny v pravidle. Bez speciálního znaku se element musí v pravidle vyskytnout právě jednou. Možnými speciálními znaky jsou znaménko plus (+), které znamená, že se element do dokumentu zapisuje jednou nebo vícekrát, dále hvězdička (*) pro zápis elementu nula nebo vícekrát a konečně znak otazník (?), jež vyjadřuje element, zapisovaný nula nebo jedenkrát. Následující pravidlo: Dokument ::= A, B?, C*, (D E F)+, G* Tak vytváří z elementů A až G neomezené množství správných (správně vytvořených) dokumentů. Podle uvedeného pravidla musí každý dokument začínat elementem A, za nímž následuje nepovinný element B, dále nula nebo více výskytů elementu C, poté alespoň jeden (ale klidně i více) výskytů libovolného z elementů D,E nebo F a nakonec nula nebo více elementů G. Výše popsanému pravidlu tak vyhovují všechny následující dokumenty (a samozřejmě mnoho dalších): ABCDG ACCCFFGGG 18

19 ACDFDFGG Všechny příklady si můžete ručně projít a ověřit si, že jsou vzhledem k pravidlu opakování zapsány skutečně správně. Nyní si jistě dokážete představit, že specifikovat gramatiku celého jazyka v jediném pravidle by bylo více než obtížné, i když to v žádném případě není nemožné. Výsledkem takovéhoto pracného snažení by ale naneštěstí byla téměř nečitelná sekvence prakticky nesrozumitelných pravidel. Tuto situaci naštěstí zjednodušuje skutečnost, že položky v pravidle mohou být samy o sobě pravidly, která obsahují další elementy a pravidla. V těchto případech se položkám gramatiky, které ve skutečnosti tvoří pravidla, říká neterminály (netermninální neboli nekoncové symboly), zatímco položky, které jsou přímo elementy jazyka, se nazývají terminály (terminální neboli koncové symboly). Veškeré neterminály se přitom musí nakonec odvolávat na nějaké pravidlo, které z nich vytvoří sekvenci terminálů,jinak gramatika nemůže vytvořit platný dokument. Naši jednoduchou gramatiku můžeme tak například vyjádřit pomocí následujících dvou pravidel: Dokument ::= A, B?, C*, VOLBY+, G* Volby::= D E F V tomto případě jsou výrazy Dokument a Volby neterminály, zatímco symboly A, B, C, D, E, F a G jsou terminály. Jazyk XML (a ostatně ani většina ostatních gramatik) neobsahuje žádný požadavek, který by nějak diktoval nebo naopak omezoval počet neterminálů v gramatice. Většina gramatik používá proto neterminály kdekoli, kde je to vhodné pro lepší srozumitelnost pravidel a pro snazší práci s nimi. 19

20 Gramatika elementů XML Pravidla pro definici obsahu elementu jsou stejná jako gramatická pravidla, o nichž jsme právě hovořili. To znamená, že pro definici přípustného obsahu elementu lze použít sekvence, volby, skupiny i opakování. Neterminály v pravidlech musí tvořit jména ostatních elementů definovaných v dané DTD. Celý mechanismus si ukážeme na několika příkladech. Uvažujme deklaraci značky <html>, kterou jsme si vypůjčili z definice DTD jazyka HTML: <!ELEMENT html (head, body)> Tento zápis definuje element se jménem html, jehož obsah tvoří element head a za ním element body. Všimněte si, že jména elementů nezapisujeme v definici DTD do jinak obvyklých úhlových závorek; tuto notaci používáme až při vlastním zápisu elementů v dokumentu. V definici DTD jazyka HTML najdeme například takovouto deklaraci značky <head>: <!ELEMENT head (%head.misc;, ((title, %head.misc;, (base, %head.misc;)?) (base, %head.misc;, (title, %head.misc;))))> Nejprve si všimneme parametrické entity se jménem head.misc, která se v této deklaraci vyskytuje hned několikrát. Podívejme se na ni zblízka: <!ENTITY % head.misc (script style meta link object)* > Entita head.misc definuje skupinu elementů, z nichž si můžeme jeden vybrat. Hvězdička na konci celého zápisu ale naznačuje, že můžeme zapsat nula nebo více těchto elementů. V konečném důsledku tak kdekoli, kde se objeví zápis 20

21 %head.misc:,můžeme zapsat nula nebo více elementů script, style, meta, link nebo object, a to v libovolném pořadí. Nyní se vrátíme k deklaraci elementu head. Zde vidíme, že můžeme začít libovolných počtem různých elementů záhlaví head. Dále si musíme vybrat: buďto skupinu složenou z elementu title, nepovinných různých položek z nepovinného elementu base opět různými položkami, nebo skupinu vytvořenou z elementu base, různých položek, elementu, title a opět nějakých různých položek. Proč musí mít ale značka <head> takovéto složité pravidlo? Copak by nestačilo napsat jednoduše: <!ENTITY head (script style meta link object base title)*> Standard jazyka HTML vyžaduje, aby každá značka <head> obsahovala právě jednu značku <title>. Standard povoluje také jen jednu značku <base>, je-li vůbec uvedena. Jinak již standard povoluje libovolný počet ostatních elementů záhlaví head, a to v libovolném pořadí. Stručně řečeno, deklarace elementu head, i když je na první pohled dosti komplikovaná, pro procesor jazyka XML znamená, že se v elementu head musí objevit právě jeden element title, a také jen jeden element base, pokud je vůbec definován. A dále se zde může objevit libovolný počet ostatních elementů záhlaví head, a to v jakémkoli pořadí. 3. XHTML XHMTL existuje celkem ve třech verzích a 1.1. XHTML verze 1.0 je méně striktní a je tudíž více podobný jazyku HTML verze Dále budu při používání termínu XHTML mít na mysli vždy XHTML verze 1.0. (pokud neuvedu jinak). 21

22 O verzi XHTML 1.1. a jejích charakteristických rysech se zmíním o něco později. Existuje ještě verze jazyka XHTML 2.0., ale tou se zabývat nebudu vůbec DTD pro XHTML Pro XHTML existují celkem tři DTD. Každá z těchto tří verzí koresponduje s jednou verzí DTD pro HTML Technicky tvoří stěžejní rozdíl mezi nimi právě fakt, že HTML je postaven na SGML. První verze DTD pro XHTML nese název strict a je opravdu striktní.. Není v ní možno používat spoustu tagů, na které jsme z běžného HTML zvyklí, nicméně které mají spíše charakter formátovací, než obsahový. Většina takových tagů (mezi nimi například tag <font> nebo různé atributy tabulek) není podporována a jejich funkce jsou nahrazeny využitím kaskádových stylů. Druhá verze DTD pro XHTML nese název transitional a je více benevolentní vůči nevítaným tagům. Tyto tagy jsou stále podporovány většinou prohlížečů a tak se dá říct, že transitional XHTML je více realistická odnož idealistické strict verze. Třetí verze má zcela stejné vlastnosti jako verze transitional. Navíc ale povoluje použití rámců Tvorba minimálního XHTML dokumentu Aby prohlížeče mohli správně interpretovat náš budoucí dokument, je třeba jim nejprve oznámit, ve které verzi jazyka XML je definováno DTD. Toto oznámení tvoří první řádek dokumentu XHTML.(10) <?xml version= 1.0 encoding= UTF-8?> Oznámíme tak prohlížeči, že DTD je definováno pomocí XML verze 1.0. a používáme znakovou sadu Unicode. 22

23 Nyní, protože budeme pro tvorbu stránky využívat značkovací jazyk vytvořený v XML, vložíme do prologu dokumentu externí deklaraci typu dokumentu typu PUBLIC. Zde je ukázka všech třech dříve zmíněných typů deklarací: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN TR/xhtml1/DTD/xhtml1-strict.dtd > <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd > <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd > Po deklaraci typu dokumentu se dostáváme k samotnému XHTML, který, jak lze vyčíst výše z DTD, začíná kořenovým elementem (elementy v XHTML se nazývají tagy) <html>. Základní kostra XHTML dokumentu vypadá následovně: <?xml version= 1.0 encoding= UTF-8?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd > <html xmlns= xml:lang= en lang= en > <head> <title> Tag title je povinný </title> </head> <body>... zde svaly dokumentu... </body> </html> Ještě se pozastavím nad atributy tagu <html>. Atribut xmlns určuje hlavní jazykový prostor dokumentu. XML nám umožňuje používat v dokumentu více jazykových prostorů současně. Hlavní jazykový prostor definujeme tedy právě pomocí atributu xmlns, jehož hodnotou je cesta k definici jazykového prostoru. Pokud je potřeba použít pro některou část dokumentu jiný jazykový prostor, než 23

24 ten, který je nadefinován jako hlavní, můžeme tento prostor přiřadit tagu, který ji v dokumentu obklopuje: <div xmlns= > matematický vzorec </div> Tato metoda by už na první pohled byla při výskytu většího množství elementů velmi zdlouhavá. XHTML nám tedy umožňuje nadefinovat atribut v rámci tagu <html>, který bude fungovat jako zástupce jazykového prostoru uvnitř dokumentu XHTML. <html xmlns= xmlns:jjp= w3.org/1998/math/mathml > Zde je pomocí atributů tagu <html> na prvním řádku označen hlavní jazykový prostor dokumentu. Na druhém řádku se pak do proměnné s názvem JJP ukládá jiný jazykový prostor, který bude možné použít jako atribut kdekoli uvnitř dokumentu XHTML. Nyní má zápis </JJP:div> matematický vzorec </div> stejný efekt, jako zápis tagu <div> z předchozího příkladu. Další atribut uvedený v tagu <html> byl lang. Zde zapsaná hodnota EN uvádí, že jazykem dokumentu XHTML je angličtina Rozdíly v syntaxi mezi HTML a XHTML Rozdíl v podstatě obou jazyků jsem již nastínil v předchozím výkladu. Prakticky se při práci s XHTML téměř obejdeme už se základní znalostí HTML. Existuje ale pár oblastí, ve nichž se práce s XHTML liší. Celkově se dá říct, že XHTML vyžaduje větší pozornost a preciznost při značkování obsahu dokumentu. V HTML se vyskytuje skupina tagů, které nevyžadují ukončení náležícím kon- 24

25 covým tagem. Jedná se zejména o tagy, kde jejich ukončení vyplývalo z kontextu a prohlížeče mají tudíž možnost si jejich ukončení vždy domyslet. Pro XHTML je tohle problém. Všechny takto dříve zapisované tagy musí být v XHTML ukončeny náležitými koncovými tagy správně vloženými do struktury dokumentu. Dále je v XHTML upraven způsob zápisu tagu bez obsahu (například <img>). Jak již bylo zmíněno dříve, v XHTML musí ke každému tagu existovat jeho zakončení. Formu zápisu prázdných tagů s ukončení je možné zkrátit alternativním zápisem <img /><br /> Seznam všech prázdných tagů a jejich zápis v XHTML je uveden jako příloha č Další odlišností je požadavek uvozovek pro všechny hodnoty v XHTML (Ano, i pro hodnoty numerické). Striktnější přístup XHTML se promítá i do formy tzv. atributů bez hodnoty. V XHTML mají tyto atributy následující podobu: Checked = checked Odlišnost XHTML a HTML vede dále k tomu, že XML parsery zcela ignorují veškeré komentáře označené <! zde komentar--> To mimo jiné znemožňuje dříve používanou metodu, pomocí niž se předcházelo komplikacím v potenciálně konfliktních částech kódu. 25

26 Pro vkládání zápisu tak, aby jej XML sice vnímalo, ale jen jako textová data se doporučuje použít sekci CDATA. Ta vypadá následovně: <![CDATA[...obsah...]]> Stále nám ale zůstává problém s tím, že pokud se v sekci CDATA bude vyskytovat kaskádový styl, případně nějaký skript důležitý pro funkci stránky, XML browsery se zachovají přesně opačně než by bylo potřeba - Vypíší obsah sekce CDATA, ale nebudou se zamýšlet nad jeho úlohou. HTML browser nám sice vyjde vstříc a obsah interpretuje správně, ovšem stále se jedná jen o polovičaté řešení. Pro ošetření této skutečnosti se doporučuje používat jen externích skriptů. XHTML je tzv. case-sensitive. Všechny tagy známé z HTML je nutno zapisovat malými písmeny. Zde je třeba být na pozoru i v souvislosti se zápisem kaskádových stylů. <p> je něco jiného než <P>. Poslední rozdíl není přímo součástí DTD XHTML, ale vychází z XHTML standardu (tudíž při jeho nedodržení by náš dokument nebyl validní). Jedná se o pravidlo nutnosti dodržení správného zanořování elementů a dále o pravidlo, které pro některé tagy určité elementy jako zanořené zakazuje. Ve zkratce, je třeba se mít na pozoru před následujícím zápisem: <div><span>...obsah...</ div></ span> Zde je seznam elementů a pro ně zakázaných vnoření: Tag <form> nesmí obsahovat jiný tag <form>. Tag <a> nesmí obsahovat jiný tag <a>. 26

27 Tag <button> nesmí obsahovat tagy <input>, <select>, <textarea>, <label>, <button>, <form>, <fieldset>, <iframe>, nebo <isindex>. Tag <pre>nesmí obsahovat tagy <img>, <object>, <big>, <small>, <sub>, nebo <sup>. Tag <label> nesmí obsahovat jiný tag <label>. 4. CSS Kaskádové styly jsou mocným způsobem jak ovlivnit vzhled presentace dokumentu nebo kolekce dokumentů. CSS samo o sobě bez dokumentu nějakého druhu je v zásadě nepoužitelné, protože by nemělo žádný obsah k prezentaci. Samozřejmě, pojem dokument je velmi obecná definice. Například Mozilla a k ní přidružené browsery používají CSS k definici vzhledu browseru samotného. Ale stále platí, že bez existence tlačítek, adresových řádků, dialogových boxů, oken a podobně by nebylo CSS potřeba.(8) Kaskádový styl má většinou podobu seznamu CSS pravidel, každé z nichž definuje podobu skupiny elementů, které jsou označeny selektorem. Pomocí stylů můžeme ovlivnit velikost textu v odstavcích, tloušťku ohraničení kolem obrázku, pozici nadpisu, barvu a vzhled pozadí atd. Pomocí CSS můžeme na XHTML dokument aplikovat vzhled, který byl do nedávna výsadou spíše sázecích programů. Pro pochopení toho, jak je pravidlo CSS zapisováno, se podívejme na jeho jednoduchou ukázku. Napřiklad zde je ukázka pravidla, které přiřadí červenou barvu veškerému textu ve všech odstavcích dokumentu. P {color: red; Takže pokud se bude v markupu vyskytovat tento zápis: <p>tento text je velmi důležitý</p> bude se zobrazovat červeně. CSS sestává ze dvou částí: 27

28 selektoru, který uvádí, jaké tagy pravidlo upravuje a vlastnosti, která deklaruje, jak bude vzhled tagu pravidlem ovlivněn. V předchozí ukázce je p selektor, color vlastnost a red hodnota vlastnosti. CSS pravidla lze rozšiřovat celkem třemi způsoby: více deklaracemi jako součást jednoho pravidla p {color: red; font-size: 15px sloučením více selektorů s jedním pravidlem h2, h3, h4 {color: red; font-size: 15px určením více pravidel pro jeden selektor. h2, h3, h4 {color: red; font-size: 15px h2 {text-transformation: capitalize Kontextuální selektory Pokud jako selektor použijeme jen název tagu, znamená to, že všechny tagy daného názvu budou mít vzhled definovaný v pravidle CSS. Pokud ovšem chceme být více konkrétní a ovlivnit jen určitou část tagů daného názvu, nezbývá nám než použít kontextuální selektory. Zápis div p {color: red by přiřadil červenou barvu jen těm tagům p, které se nacházejí uvnitř tagů div. Tag, který je nejblíže k definici pravidla, je tag, který chceme ovlivnit. Tagy nacházející se před ním jsou tagy, jejichž musí být potomkem, aby na něj bylo aplikováno pravidlo. 28

29 4. 2. Kaskáda Pravidla kaskády určují, jakým způsobem se prohlížeč rozhoduje při určovaní toho, která pravidla CSS ovlivní ten který konkrétní prvek uvnitř dokumentu. Na začátku veškerého rozhodování klientské aplikace (browseru) je určení původu pravidla. Původ pravidla, tedy to, kým je pravidlo definováno, ovlivňuje výši jeho významu při zobrazování dokumentu. Zdroje CSS pravidla mohou být celkem tři: prohlížeč uživatel a autor. V situaci, kdy je uživatelský agent postaven před rozhodnutí o hodnotě a významu CSS pravidla z těchto tří zdrojů, musí rozhodnout, který stylesheet by měl být presentován uživateli. V takovém případě pak přiřazuje jednotlivým zdrojům pravidel určitý stupeň důležitosti (jinými slovy: každý zdroj má pro něj jinou váhu). Váha jednotlivých zdrojů stylů odpovídá pořadí, ve kterém jsou výše uvedeny s tím, že nejvýznamnější jsou styly autora. Podle specifikace CSS je definováno pravidlo!important, které tvoří rovnováhu mezi styly autora a uživatele. (10) Přítomnost pravidla!important v CSS uživatele má vždy větší váhu než přítomnost tohoto pravidla v CSS autora. Bereme-li v potaz pravidlo!important, pak by předchozí zápis váhy jednotlivých stylů podle jejich původu seřazený od nejméně významného po nejvíce 29

30 významné vypadal následovně: browser uživatel autor autor s pravidlem!important uživatel s pravidlem!important. Pokud by se například sešlo CSS prohlížeče: p { color: #45ff55; font-size: 10px; margin: 5px; s CSS uživatele: p { color: #554566!important; a dále s CSS autora: p { color: #123456; font-size: 1.2em; line-height: 1.6em; padding: 10px;, 30

31 výsledná podoba dokumentu by odpovídala následujícímu zápisu: p { color: #554566;/* uživatelovo pravidlo!important přepisuje!important prohlížeče*/ font-size: 1.2em; /* autor přepisuje pravidlo prohlížeče */ line-height: 1.6em; /* jen autor */ margin: 5px; /* jen prohlížeč */ padding: 10px; /* jen autor */ Každému selektoru je přiřazeno ohodnocení konkrétnosti, což je vlastně další způsob pro určení významnosti pravidla v kaskádě. Čím vyšší míra specifikace, tím větší je váha pravidla. Výpočet míry specifikace stojí na posouzení čtyř nezávislých vlastností formy selektoru: 1) použití HTML atributu style ve funkci selektoru, 2) počet id identifikátorů v selektoru 3) množství dalších atributů ([href] atd.) a pseudotříd obsažených v selektoru. 4) Množství elementů a pseudoelementů. Tabulka pro výpočet váhy pravidla je umístěna v příloze pod názvem 8.4. Výpočet míry specifikace pravidla CSS. 31

32 4. 3. Propojení CSS s dokumentem Jsou celkem tři cesty jak připojit CSS k vaší webové stránce: inline, embeded a linked. Linked označuje připojení externího CSS souboru k domumentu XHT- ML. Inline označuje zapisování stylů přímo do dokumentu v jeho jednotlivých tazích. Emeded je styl tehdy, když jej definujeme v hlavičce stránky (tedy v sekci <head>). Jediný způsob, který dává opravdu smysl při vývoji stránek je navázání stránek na externí soubor. Style sheet může být napojen více než jeden dokument INLINE STYLY Styly inline (také známé jako lokální styly) jsou přidávány přímo do tagů použitím XHTML atributu style tímto způsobem: <p style= font-size: 20px; font-weight: bold; font-style: italic; color: red > Kobyla má malý bok </p> což by vypadalo takhle: Kobyla má malý bok Rozsah vkládaných stylů je hodně omezen. Vkládaný styl ovlivňuje pouze tag, ve kterém je definován. Používání vkládaných tagů se v principu velmi málo liší od způsobu definování vzhledu dokumentu přiřazováním presentačního významu přímo tagům, který se používal v dobách minulých. Vkládání inline stylů do celého dokumentu zhoršuje čitelnost kódu. Obecně se dá říci, že je lepší se inline stylům vyhýbat. 32

33 Používání inline stylů je nicméně dobrou metodou jak si vyzkoušet funkčnost stylu před tím, než jej vložíme do externího.css dokumentu STYLY V HLAVIČCE XHTML DOKUMENTU CSS je možné umístit do hlavičky dokumentu. Takovému stylu se říká přiložený styl nebo také styl stránky, protože jsou součástí stránky. Tento styl má následující podobu: <head> <title>přikládaný styl a akci </head> <meta http equiv= Content-type content= text/html; charset=iso /> <meta http equiv= Content-Language content= en-us /> <style type= text/css > h1 {font size: 16px; p {color: blue; </style> </head> Tag style oznamuje browseru, že bude následovat jiný než HTML kód. Atribut tagu oznamuje, že tímto jiným kódem bude CSS. Působnost přiložených stylů je limitována na stránku, která vložený styl obsahuje. Tento druh se tedy hodí především pro jednoduché jednostránkové dokumenty. Ještě je třeba poznamenat, že ani v tomhle případě se nejedná o úplné oddělení obsahu od stylů zobrazení, protože styl je stále součástí dokumentu, ke kterému se vztahuje. Přiložené styly přebíjí styly externí, ale jsou slabší než styly vkládané. 33

34 EXTERNÍ STYLY Jde o vkládání stylů do externího dokumentu (tzv. style sheetu), který je propojen s jednou nebo více stránkami, takže tento styl má globální rozsah. Styly definované v tomto souboru mohou ovlivňovat každou stránku a nejen tu, ve které by se v případě alternativního zápisu objevovali. Tato metoda je z celkových tří jediná, která opravdu plně respektuje oddělení obsahu a formy. Styl je možno připojit k libovolnému počtu stránek použitím zápisu v sekci <head>stránky. <link href= style_sheet.css media= screen rel= stylesheet type= text/css /> Vlastnost atributu media screen zde nám říká, že styl je navržen pro zobrazení na monitoru, dalšími volbami jsou all, projection, handheld, print a aural. Browser načítá link z tagu <style> jen tehdy, je-li hodnotou atributu media buď all nebo screen. Pomocí hodnoty print je možno navrhnout alternativní styl pro tisk. Pokud chceme tedy nabídnout alternativní styl pro tisk mohl by jeho zápis vypada následovně: <link href= style_sheet_print.css media= print rel= stylesheet type= text/css /> 5. Hacky a filtry Ačkoli se v návrhu CSS zejména v jeho počátcích občasně vyskytla i nějáká chyba, hlavním problémem současnosti je bezesporu nekonzistentní nebo velmi slabá implementace ze strany některých prohlížečů. Co se týče chyb v implementaci CSS, je třeba věnovat samostatnou kapitolu zejémena Internet Exploreru. O to 34

35 více, že tento prohlížeč je mezi uživateli nejpreferovanějším produktem svého druhu. Ovšem Internet Explorer v tom není sám. I ostatní prohlížeče mají problému s přesnou a úplnou implementací. Dá se říci, že každý prohlížeč vyžaduje v určitém případě zvláštní ošetření stylu CSS tak, aby bylo dosaženo kýžené vizuální podoby. A tak není hlavní náplní designera stránek pochopení principů CSS. To je jen začátek. Implementace na jednotlivé prohlížeče vyžaduje další podobně obsáhlé kvantum vědomostí a ještě o trochu více zkušeností. Nepřesnosti v implementaci CSS jsou rozličné tak, jako samotné prohlížeče a jejich tvůrci. Například nejvíce v implementaci CSS pohořel Netscape ve všech čtyřkových verzích. Důvod je nasnadě: v době dokončení návrhu CSS byl tento prohlížeč ve finální fázi vývoje. Důsledkem čehož stačili jeho tvůrci implementovat jen některé body návrhu CSS a to ještě z velké části neúplně. Dalším příkladem z historie může být také rozdílná implementace prohlížeče Internet Explorer verze 5 na PC a Mac, což zkomplikovalo život zejména webovým grafikům, kteří pracovali na platformě Mac. Zde byla totiž implementace o dost rozsáhlejší než u verze 5 pro PC. Co šlo na Macu snadno, se stejně snadno rozpadlo na PC. Důsledkem čehož se prohlížeč Internet Explorer v praktické rovině mohl pochlubit jen takovou podporou, do jaké míry ji nabízel pro PC. Výsledkem předchozího bylo pak jen to, že stránky nebylo možno tvořit na platformě Mac nebo aspoň ne s dostatečnou jistotou. Náhoda, která hrála jednoznačně do karet MicroSoftu. Webdesigneři se tedy museli vydat různými oklikami a nacházet při cestě za kýženým výsledkem i vedlejší uličky. Jmenovitě vznikla řada hacků a filtrů. CSS hackem se obecně nazývá postup, kdy se vykoná určitá modifikace HTML kódu, nebo stylopisu tak, aby se obešel problém s implementací CSS v určitém 35

36 konkrétním prohlížeči. Spousta CSS hacku se pak chová jako nějáký filtr, kdy vlastně ukrývá určitou část stylopisu problematickému prohlížeči Internet Explorer a kaskádové styly Obecně se dá říci, že prohlížeč Internet Explorer udělal na cestě k dokonalé implementaci docela obstojný pokrok. Zejména ve své sedmičkové verzi, ve které již třeba odpadá nutnost z hlediska sémantiky absurdních náhrad pro chybějící podporu vlastnosti min-width. Nicméně zejména ve svých starších verzích je implementace velmi rozličná a dochází i k případům, kdy se podpora s novější verzí ztrácí či je podpora zásadně odlišná v rámci jedné verze pod různými operačními systémy. V případě verze 5 došlo k celkovému přetvoření architektury prohlížeče pro platformu Mac. Prohlížeč Internet Explorer pod operačním systémem MacOS nabídl ve své době nejplepší podopru DOM a CSS. Problémem Internet Exploreru pod operačním systémem MacOS se stalo (pominu-li problém zmiňovaný výše v této kapitole) spíše nepochopení principů některých doporučení tvůrců CSS. Samořejmě se téměř okamžitě objevili různá řešení pro každý jednotlivý problém. Výčet problémů a jejich hacků si ponechám až na šestkovou verzi. Zde mi šlo spíše o historický nástin. S šestou verzí Inernet Exploreru se víceméně vyřešily inkonzistence v implementaci mezi verzí pro operační systém MacOS a OS pro platformu PC. Nejviditelnější chybou, se kterou se setká téměř každý kdo se pokusí nastylovat nějaký HTML dokument je rozdílný (nestandardní) přístup k BOX modelu, jinými 36

37 slovy k výpočtu rozměrů blokového prvku. Podle specifikace CSS každý blokový element sestává ze čtyřech částí. Obsah Padding Ohraničení Margin Padding je prostor bezprostředně kolem obsahu, na který dále navazuje ohraničení. Kolem ohraničení je pak definován další prostor v podobě marginu. Box model se podle standardů chová tak, že hodnota vlastnosti width se aplikuje na část OBSAH. Pokud elementu definujeme margin bude mít celkový Box rozměr: Width + margin Takový prostor bude také zabírat v kompozici. Pokud definujeme prvku dále také hodnotu vlastnosti padding, zjistíme celkovou velikost boxu a tedy i prostor vyhraněný v kompozici pro prvek následujícím způsobem: Width + margin + padding Prakticky to bude znamenat, že pokud si definuejeme div se stylem: Width: 100px; Padding: 5px; Margin: 5px; Border: 1px solid red; 37

38 Bude mít prvek celkovou šířku 110px. Prostor pro text uvnitř prvku bude 100 pixelů, červená linka se objeví 5 pixelů od textu a sousední prvky se od něj budou držet ve vzdálenosti 5 pixelů. V prohlížeči Internet Explorer ve všech jeho verzích je přístup poněkud odlišný. Padding i ohraničení je zde chápáno jako součást obsahu. Vlastnost width se přiřazuje standrardně k obsahu, ale padding i ohraničení se pak umísťuji dovnitř obsahové části. Tzn. Neovlivňují celkové rozměry prvku. Pouze margin se počítá vně obsahové části boxu. Dříve zmíněný vzorový element bude mít tedy v Internet Exploreru konečný rozměr strany 110 pixelů. Bude-li jeho obsahem text, bude mít tento text o šest pixelů z každé strany méně prostoru. Tuto situaci kdy základní stavební kámen kaskádových stylů nicméně nelze řešit paušálně. V praxi totiž dochází i k situacím, kdy prvek nemám definovánu jenu z částí box modelu. Je tedy nutno přistupovat ke každému blokovému prvku individuálně TAN HACK Výše vylíčený problém v implementaci CSS je natolik závažný, že vedl webové grafiky k hledání cest, jak se s ním co neúčelněji vyrovnat. Vznikl tak postup nazývaný Tan Hack. Je to vůbec první hack pro CSS. Tan Hack využívá schopnosti Internet Exploreru přečíst zápis: *html.boxmodel {zapis hodnot vlastnosti CSS; Ostatní prohlížeče tento zápis ignorují. Řešním problému s rozdílnou implementací box modelu je pak přepočet velikosti boxu pro prohlížeč Internet Explorer a zápis těchto hodnot pomocí Tan hacku. Internet explorer dá tomuto zápisu vždy přednost. Tan hack se samozřejmě využívá při nejrůznějších problémech s implementací. 38

39 Nicméně právě box model byl údajně podnětem pro jeho vznik. Pro dosažení potřebné velikosti boxu stejně jako by tomu mělo být v případě standardního chování prohlížeče se pak provádí přepočet rozměrů podle následujícího vzorce: Původní šířka + padding-left + padding-right + border-left + border-right MODIFIKOVANÝ BOX MODEL HACK Tento model je kombinací dvou hacku (jedním z nich je Tan hack) a využívá pro hlubší ošetření problematiky box modelu v prohlížeči Internet Explorer. Existují totiž situace, kdy Internet Explorer přistupuje k výpočtu box modelu správně. A to v tzv. standard módu ve verzi 6 na PC, či na platformě Mac od verze 5. Nicméně Tan hack funguje pro všechny verze Internet Exploreru a nezávisle na platformě. Pro zajištění toho, že v případě správné interpretace box modelu nebude Tan hack použit, je nutno zapsat rozměry blokového prvku následeujícím způsobem: *html.boxmodelhack { width: 10px; height: 10px; w\idth: originální šířka; w\idth: originální výška; Zpětné lomítko znemožňuje čtení pro verze 5 na Windows, ale vlastnost bude naopak přečtena ve verzích Internet Explorer verze 5 na platformě MacOS. To že bude preferována právě druhá zadaná hodnota vlastností je zajištěno tím, že je druhá a prohlížeč ji tedy bere jako aktuální. 39

40 HACK POMOCÍ KOMENTÁŘE A ZPĚTNÉHO LOMÍTKA Stylopis uvnitř tohoto hacku bude ignorován jen v Internet Exploreru běžícím na platformě MacOS. Hack má následující podobu: /* začátek hacku \*/ * html.boxmodel { width: 230px; height: 230px; /* konec hacku*/ OWEN HACK Tento hack slouží k odříznutí všech prohlížečů Internet explorer krom verze 5 na MacOS. Využívá toho, že IE nechápe pseudoelement :first-child. V kombinací s definicí CSS, že neinterpretovatelný zápis se ignoruje ze z tohoto faktu stává hack. Zápis je tedy následující: Head:first-child+body.hacknutyElement { Pro vysvětlení dodávám, že zápis by se dal v češtině vyjádřit jako element, který se vyskytuje v prvku body, který musí být bezprostředním sousedem prvku head, přičemž prvek head musí být prvním potomkem v v svém mateřském prvku HOLLY HACK Tento hack je odpovědí na tzv. Peekaboo bug v prohlížeči Internet Explorer. Pokud máme uvnitř container divu blokový prvek s hodnotou vlastnosti float nastaveou na left a pod tímto prvkem se dále vyskytuje prvek s vlasnotí clear nastavenou na both, dochází u prohlížeče Internet Explorer verze 6 k tomu, 40

41 že text, který teče nalevo od prvního zmiňovaného prvku se vůbec nezobrazí. Pokud ovšem změníme velikost okna prohlížeče a poté jej opět nastavíme do full-screen módu, text se najednou zobrazí. Proto název Peekaboo. K Peekaboo bugu dochází jen v případě, že se druhý zmiňovaný prvek dotýká svou horní hranou prvku prvního. S Peekaboo bugem je ještě spojen další jev, tzv. three pixel gap. První zmiňovaný prvek s vlastností float není ve svém mateřském prvku umístěn zcela nalevo, nybrž je od něj odsazen o tři pixely. Obě tyto chyby (bugy) se odstraní tak, že se mateřškému prvku (v tomto případě tedy containeru) nastaví velmi malá (jednoprocentní) hodnota vlastnosti height (tedy výška). Toto nastavení donutí prohlížeč Internet Explorer verze 6 správně zobrazit celý lay-out. Zde se zmíním ještě o tom, že v případě, že blokový prvek (dále container) obsahuje jen floatované descendery je při nenastavování výšky containeru standardní výškou takového prvku výška minimální. Prohlížeč Internet Explorer nicméně v takovém případě roztahuje výšku containeru tak, obsáhla všechny své potomky. V případě Holly hacku se to projeví tak, že výška containeru bude v Internet Exploreru stále taková, aby obsáhl všechny své potomky. Zároveň ale Internet Explorer správně tyto potomky vykreslí a nedojde tak k Peekaboo bugu CLEARFIX Zde nejde ani tak o pravý hack jako spíše o prostředek k ošetření již dříve zmiňovaného chování containeru obsahujícího jen floatované prvky. Pokud chceme z nějakého důvodu, aby se i při standardním chování roztáhla výška takového containeru na výšku celého svého obsahu, můžeme použít různých metod. Tou nejpoužívanější z nich je právě clearfix. 41

42 Containeru přiřadíme třídu s následujícím stylopisem:.clearfix:after { content:. ; display: invisible; clear: both; Výsledkem pak bude to, že se na úplném konci containeru vygeneruje tečka, která díky hodnotě hidden u vlastnosti display ovšem nebude viditelná. Hodnota invisible se chová tak, že prvek s takto nastavenou vlasností není sice viditelný, ale i přesto je součástí dokumentu. A to je přesně to, co je v tomto případě třeba Pozicování CSS skýtá několik způsobů, jak určit pozici prvku v ploše strany. Každý z těchto způsobů má své opodstatnění a využití v různých situacích a při různých koncepcích lay-outu stránky. Způsob pozicování se určuje pomocí vlastnosti position, která může nabývat následujících hodnot: Fixed Relative Absolute Inherit Static Tyto způsoby jsou také z drtivé většiny správně implementované nejoblíbenějšími prohlížeči. Vyjímku tvoří Internet Explorer do verze 6 (včetně), který nepodporuje hodnotu fixed. 42

43 FIXED Prvek s hodnotou fixed vlastnosti position je zcela vyjmut z toku dokumentu a vztahuje svou pozici na rozměry viditelné plochy v prohlížeči. Takto pozicovaný prvek se bude stále držet na stále stejné pozici i například při scrollování stránky, či při změně velikosti okna. Hodnota fixed není implementována v prohlížeči Internet Explorer do verze 6. Takto pozicovaný prvek se ve starších verzích Internet Exploreru chová stejně absolutně pozicovaný prvek. Praktické využití této hodnoty je především v oblasti tvorby navigační struktury stránky, kdy je možno nastavit menu, pevnou pozici dejme tomu vlevo od hlavního containeru. Takto pozicované menu by se pak drželo na stále stejném místě i při skrolování stránky. Toto řešení se využívá poměrně často. Aby fungovalo i v Internet Exploreru zhotovuje se většinou pomocí rámců simulovaných divy s hodnotou vlastnosti overflow nastavenou na scroll ABSOLUTE Absolutně pozicovaný prvek je zcela vyjmut z toku dokumentu a svou pozici vztahuje buďto k prvku body nebo k nejbližsímu relativně, absolutně či fixně pozicovanému ancestoru RELATIVE Pozice pro relativně pozicovaný prvek se určuje tak, že se prvek nejprve normálně zařadí do toku dokumentu tak, jako byl byl měl hodnotu static vlastnosti position a poté se posune na základě hodnot vlasností top,bottom, left či right o zadanou vzdálenost ze vztyčné pozice. Ostatní obsah dokumentu se chová tak, jako by se relativně pozicovaný prvek nacházel stále na své původní pozici (tak- 43

44 ové pozici, na které by vyskytoval v případě, že byl statický) STATIC Statický pozicovaný prvek je běžným způsobem zařazen do toku dokumentu. Nelze u něj nastavovat hodnoty vlastností top, bottom, left či right. Tato hodnota je implitně nastavená u každého blokového prvku INHERIT Prvek zdědí hodnotu vlastnosti position po svém ancestoru. Implicitně není hodnota vlastnosti position dědičná a je nastavena na static u každého blokového prvku Floating Chování elementu, který má vlastnost float nastavenu na některou volitelných hodnot vyjma none (ta je nastavena elementu implicitně), je zcela vyjmut z toku dokumentu, ale přesto ovlivňuje ostatní prvky ve stejném ancestoru. Floatovaný prvek se snaží dostat se k okraji svého containeru, je umísťuje se za jemu předcházející in-line i blokové prvky. Pokud narazí na jiný floatovaný prvek, nepřekrývá se s ním, nýbrž respektuje jeho pozici a umisťuje se za něj co nejdále na své cestě k pravému (resp. levému) okraji svého ancestora. Floating se využívá často v kombinaci s marginem. 6. Tvorba komponent stránky U stránek se složitější strukturou je jedním z nejdůležitějších prvků pro orientaci ve spleti dokumentů menu. Menu disponuje interaktivním obsahem, tedy tak- 44

45 ovým obsahem, který má odezvu na určité chování návštěvníka. Menu poskytuje návštěvníkovi prostředky k orientaci v obsahu stránky a umožňuje jeho komunikaci s prezentovaným subjektem, či komunikaci návštěvníků mezi sebou. Z čistě technického pohledu by nám mohlo třídění uživatelů stránky připadat jako zavádějící a neodborné. Vždyť přeci dokumentu je jedno, kdo zrovna kliká myší. Nicméně při návrhu komponent uživatelského rozhraní a navigační struktury stránky je vždy třeba se nejprve zamyslet nad tím, komu má navigační struktura sloužit. Jedině tak je možné dosáhnout uživatelsky přívětivého řešení Navigační struktura stránky a tvorba menu Velkou část uživatelského rozhraní (u menších projektů často i jedinou) tvoří bezesporu navigační struktura stránky. Princip navigace mezi jednotlivými dokumenty, které tvoří stránku jako celek je vždy postaven na využití hypertextových odkazů přehledně seřazených v rámci většího celku. Než se pustím do popisu technických možností, budu se chvíli zabývat způsobem rozdělení struktury UI stránky. U stránek menšího rozsahu je problém vyřešen už samotnou jejich podstatou. Například stránky obsahující jednoduchou prezentaci menší firmy, (každý si určitě sám vybaví nějaký konkrétní příklad) mají většinou tak jednoduchou strukturu, že je možno celý jejich obsah shrnout do 5 až 10 významově velmi jasných bodů. Zde máme tedy vystaráno navigační struktura je vyřešena při prvním kontaktu se zadavatelem a navigačním prostředkem bude jednoduché menu. V tomto případě je tedy tvorba menu opravdu jen technického rázu. Menu obsahuje linky na všechny strany v prezentaci objektu. Při větších projektech je většinou třeba navrhnout úvodní stranu rozsáhlého celku, který sestává z velkého množství prvků. V této situaci úvodní strana slouží spíše jako rozcestník, za kterým se skrývá velmi složitá struktura, na kterou nem- 45

46 áme vliv (není součástí zakázky, pobočky organizace mají vlastní prezentace atd.). Obecně se pak na takových stránkách vyskytuje více navigačních prvků a dokonce i více menu roztříděných podle různých hledisek. V kapitole Základní layout stránky byla stránce instituce přisouzena celkem tři menu. Nyní je ten správný čas pro ospravedlnění tohoto rozhodnutí. Instituce je středně velkého rozsahu a na jejím serveru se nachází intranetové aplikace sloužící jejím členům, kterých je několik set. Na jejich stránkách rovněž publikuje několik desítek jejich zaměstnanců. Dalšími návštěvníky jsou zákazníci, kteří hledají relevantní informace v závislosti na tom, jaký je účel jejich návštěvy. Stránka má tedy velmi široký záběr a ještě širší spektrum návštěvníků. Jako nejvhodnější se v takovém případě jeví větší počet menu třídících její obsah podle různých hledisek v kombinaci se jednoduchým vyhledávácím formulářem. Hlediska byla zvolena následující: Hlavní a nejvýraznější menu s umístěním na nejlépe viditelném místě. První vedlejší menu odkazy tříděny z hlediska role návštěvníka. Druhé vedlejší menu odkazy tříděny z hlediska funkčních rolí stránky. 7. Hlavní menu (první varianta) Kód pro hlavní menu by měl mít za účelem dobré čitelnosti podobu seznamu. V optimálním případě by vypadal obsah označkovaný v HTML jako netříděný vkládaný seznam například s touto strukturou: <ul id= menu > <h2><a href= # >položka</h2> <ul> <li><a href= # > položka </a>,</li> 46

47 <li><a href= # > položka </a>,</li> <li><a href= # > položka </a>,</li> <li><a href= # > položka </a>,</li> </ul> a zápis by byl upraven do podoby vhodné pro naše menu, které bude zabírat hlavní část prostoru na stránce. Již předem upozorňuji, že jsem se vydal jinou cestou a tento příklad uvádím jako dobrou ukázku možností, které CSS skýtá při tvorbě menu pomocí seznamů. Zbavili bychom se paddingu a marginu * { padding: 0; margin: 0; zbavili bychom seznamy jejich defaultních odrážek, nastavili bychom velikost písma položek seznamu a upravili podobu nadpisu druhé úrovně: ul { list-style: none; li { font-size: 11px; h2 { font-weight: normal; font-size: 21px;. 47

48 Pro úpravu reakce odkazů na události myši bychom využili tzv. selektory pseudotříd a pseudoelementů. Tyto selektory nám umožňují přiřadit styl prvkům, které v dokumentu vlastně nejsou. Tedy aspoň nejsou nikde přímo zapsány, nebo třídám, které jsou definovány jako stavy dokumentu nebo prvku. Tyto selektory aplikují styly na části dokumentu nikoli prostřednictvím struktury. Nelze je vyčíst v kódu. Nejčastěji se jako selektory využívají pseudotřídy :link přiřazuje odkazu styl, pokud se v jeho atributu nachází URL, která ještě nebyla navštívena. :visited přiřazuje odkazu styl, pokud URL v jeho atributu již byla navštívena. a :hover přiřazuje styl odkazu tehdy, pokud u něj dojde k události přejetí myší. První dvě pseudotřídy se nazývají linkové pseudotřídy. Hover v posledním bodě je dynamická pseudotřída. Zápis a:link, a:visited { color: #225566; a:hover, a:active { color: #ff4a00; v prvním případě přiřadí definovanou barevnost (vybral jsem náhodně) všem odkazům v dokumentu definovaným tagem <a> a ve druhém kroku pomocí dynamických pseudotříd definuje jejich vzhled při přejetí myší a v situaci, kdy se 48

49 nacházíme na stejné adrese, na kterou prvek odkazuje. Zbavili bychom se implicitního podtržení odkazů a { text-decoration: none; a nastavili bychom šířku, boxu menu. Výšku bychom nedefinovali a nechli proměnlivou v závislosti na obsahu. Menu má být vizuálně ve středu kompozice. Toho bychom docílili kombinací floatu doleva a paddingu zprava. Nakonec bychom pomocí marginu nastavili odstup od zbytku obsahu napravo od menu. #menu { width: 248px; float: left; padding: 6px 2px 0 0; margin-right: 2px; Jak je vidět v zápisu na straně 28, je každá skupina v menu uvedena nadpisem <h2>. Hranice našeho nadpisu jsou nastaveny již pomocí boxu menu, v němž bude uzavřen, takže je nyní není třeba explicitně zapisovat. Co elemnet h2 ale určitě potřebuje, odstup nalevo a nahoře. Nastavili bychom tedy padding. Padding musí být nastaven tak, abychom mohli později nalevo od našeho nadpisu vkládat odrážku. Vlastnosti background-image, background-repeat a background-position mohou zkombinovány do jednoho zápisu jako vlastnost background. Tímto způsobem bychom tedy určili, aby se před každým nadpisem uvádějícím sk- 49

50 upiny odkazů objevila odrážka, kterou máme připravenu jako bitmapu. Jen pro úplnost do vlastnosti background mohou být také zkomprimovány vlastnosti background-position a background-attachement. Nakonec, abychom si pojistili, že podtahy písmen (třeba u j) nebudou zasahovat do řádku pod sebou, nastavili bychom pro nadpis line-height a kód pro nadpisy v menu by vypadal ve výsledku takto: #menu h2 { padding: 7px px; letter-spacing: 1px; line-height: 22px; background: url(images/pointer.gif) no-repeat 9px 14px; Stylování sekce pod každým nadpisem bychom u seznamu začali vertikálním srovnáním paddingu, který je u h2. Jako další v řadě bychom upravili vzhled elementu li, který označuje jednotlivé položky v seznamu. Změnili bychom jeho defaultní zobrazení block na inline. Pro nastavení výšku seznamu bychom přidali elementu ul vlastnost height (ul je defaultně blokový) a line-height elementu li. Dále bychom jednotlivé sekce tvořené elementy ul oddělili linkou, čímž bychom dostali naše menu do konečné podoby: #prinav ul { padding: 0 0 7px 20px; height: 26px; border-bottom: 1px solid #eee; 50

51 #prinav li { display: inline; line-height: 13px; Jedná se o pěkný způsob jak dosáhnout zajímavého vzhledu a přitom nechat sémantiku zcela zachovanou Hlavní menu druhá varianta Toto řešení má jedinou maličkou slabinu Internet explorer 6.01., který se vzhledem inline zachází poněkud macešsky. Problém u něj nastane právě v okamžiku, kdy se poslední znak elementu li narazí na okraj boxu menu. Místo, aby došlo k přetečení, stane se z elementu hybrid, který se zachová tak, že se roztáhne (lineheight nelineheight) směrem dolů do dalších řádku toku textu při zachování šířky (ta nemá kam, ale stejně bych se nedivil). Od řešení líbivého, sémanticky správného a XHTML 1.0. validního jsem přistoupil k řešení á la IE: <div id= menu00 > <h2><a href= # >Položka jedna</h2> <div class= polozky > <a href= # >Ententýky dva</a>, <a href= # >Špalíky a destička</a>, <a href= # >Metoda dadaistického</a>, <a href= # >Psaní mě docela</a>, <a href= # >odkaz</a>, <a href= # >Je krásný když</a>, <a href= # >Se IE chová podle standardů</a>, 51

52 </div> </div> Vedlejší menu Předchozí způsob je tedy vhodný jen tehdy, zachováme-li hodnotu vlastnosti display u elementu li na block. Druhé menu v pořadí mi to umožnilo. Položky v něm nepřetékají: <div id= menu2 > <ul> <li><a href= # >ZAMĚSTNANCI</a></li> <li><a href= # >ČLENOVÉ PŘEDSTAVENSTVA</a></li> <li><a href= # >DRŽITELÉ ZAM. AKCIÍ</a></li> <li><a href= # >DRŽITELÉ OPRAVDOVÝCH AKCIÍ</a></li> </ul> </div> Nastavil jsem rozměry a pozadí. Pro pozadí jsem zvolil tenký proužek opakující se po ose x. Upravil jsem tok textu, který musí být pro IE nastaveno na center, kvůli zobrazení celého layoutu ve středu prohlížeče. U standardních prohlížečů je možno stejného efektu dosáhnout pomocí nastaveni marginu z obou stran jako auto při nedefinování width. Tehdy se prohlížeč snaží podle pravidel z obou stran o co největší margin, což skončí kompromisem a tedy zobrazením prvku ve středu prescendera (mateřského prvku). Při snaze o středový layout je pak prescenderem prvek body. Vzhled tohoto menu je horizontálně zcela rovnoměrný, čili všechny pixely na stejné horizontální úrovni mají vždy stejnou barevnost. Pro tvorbu pozadí nám 52

53 tedy stačí jeden jednopixelový vertikální proužek. Na levé straně prvku je nastaveno jednopixelové ohraničení o barevné hodnotě #ffffff tedy bílá barva. Vlastnost text-align je dědičná. Textové prvky v menu budou mít zarovnání nalevo. Nastavil jsem ji tedy už zde. div#menu2 { width: 636px; height: 101px; background: url(../img/menu2_strip.gif) repeat-x; overflow: hidden; border-left: 1px solid white; text-align: left; Dále jsem nastyloval prvky seznamu stejným způsobem jako v předchozím řešení, ale bez změny display u prvku li na in-line. Jednotlivé seznamy mají nastaveny float nalevo díky čemuž se postupně naskládají jeden vedle druhého. Součástí grafiky menu je také panýlek, který má čistě vizuální funkci vhodným způsobem zespodu uzavírá slideshow vyskytující se nad ním. Je nutné dostatečně odsadit textovou část menu, aby do tohoto grafického prvku nezasahovala. Pro seznam jsem tedy nastavil padding. Margin zleva dává vzájemný odstup jednotlivým seznamům. div#menu2 { width: 636px; height: 101px; background: url(../img/menu2_strip.gif) repeat-x; overflow: hidden; margin-top: 0px; div#menu2 ul { 53

54 float: left; padding: 19px px; /*border: 1px solid white;*/ margin-left: 17px; Součástí položek v seznamech li bude odrážka. Padding zleva zajišťuje odstup textu od odrážky. Odrážka je k jednotlivým prvkům li totiž umístěna jako obrázek pozadí. Pro uvedení obrázku pozadí do správné pozice je nastavena hodnota position ve vlastnoti background. Odrážku li prohlížeče defaultně zobrazují s grafickým motivem. To je pro nás nežádoucí. List-style: none zamezí tomuto zobrazení. Položka seznamu li je defaultně blokový prvek, není tedy nutné nastavovat display. div#menu2 ul li { padding-left: 14px; background: url(../img/button_menu2.gif) no-repeat 3px 7px; list-style: none; Položky jsou uzavřeny v tagu <a>, přes který nastavíme jejich vzhled. Písmo vzhledem k marginální úloze druhého menu má menší velikost, nicméně pro zdůraznění je použit tučný řez. div#menu2 ul a { text-decoration: none; font-family: Arial, Verdana, Helvetica; font-weight: bold; font-size: 11px; color: white; 54

55 Pro nastavení vzhledu odkazu v jednotlivých stavech je možno v CSS využít dynamických pseudotříd. Poukud je nad odkazem kurzor myši nebo je jeho URL umístěna v paměti browseru jako již navštívená, má oranžovou barvu. div#menu2 ul a:hover, a:active { color: #dc4e01; Na tomto místě bylo třeba kvůli jiné interpretaci paddingu v IE změnit šírku prvku. IE zachází s paddingem nestandardně. Správně by měl být padding brán jako součást prvku a přičítat se k jeho rozměrům jako hodnota navíc. Explorer toto nedodržuje, hodnotu paddingu vkládá dovnitř prvku při zachování jeho rozměrů. Pro ošetření bugů v MS Internet Exploreru stačí před selektor prvku vložit zápis *html. Internet IE tento zápis chápe jako zatímco ostatní prohlížeče berou zápis, který vlastně označujeme všechny prvky, které mají potomky html jako nelogický a chybný a tudíž jej ignorují. *html div#menu2 ul { width: 211px; padding-top: 21px; Další ošetření pro IE pak vychází z předchozího zásahu. Bylo nutno také odpovídajícím způsobem zarovnat grafickou odrážku. *html div#menu2 ul li { background-position: 2px 7px; 55

56 7. 3. Pravý layout formulář, aktuality Nadcházející prvek v podobě panelu umístěného napravo od hlavního layoutu byl co do komplexnosti nejrozsáhlejší. Celý pravý layout je umístěn v jediném boxu, který má v rámci hlavního divu, jež nese celou kompozici ve středu prohlížeče, nastaven margin, který ho vytlačuje vedle levé, širší, kompozice. U IE bylo nutno ošetřit problém, kdy box nesoucí pravý layout reagoval na vlastnost float:left z hlavního menu umístěného v levém layoutu. Jako správný div (s vlastností display: block) se tedy pravý layout umístil levým horním rohem k boxu nesoucímu v levém layoutu hlavní menu. V boxu navright jsem umísťoval obrázky pomocí značk img (tedy přímo do toku dokumentu), jelikož jsem přesvědčen, že takové věci jako ikony RSS, jazykové verze atd. jsou součástí obsahu. Barevnost a členění jsou díky rozmanitosti této čáti stránky rozloženy vhodným způsobem skrze vlastnost background do všech jejich descenderů PRAVÝ LAYOUT TVORBA STRUKTURY Jelikož i samotné HTML této části stránky je dost spletité, věnuji zde pár řádků zápisu struktury pravého layoutu. Kostra lišty na pravé straně je navržena v souladu s pravidlem dodržení oddělení obsahu a formy. Zápis se snaží o přehledné rozčlenění jednotlivých obsahových částí. Členění je realizováno cestou jedinečných identifikátorů přiřazených jednotlivým značkám <div>. Lišta ze sémantického hlediska sestává z následujících částí: Navigační prvky v horní části lišty 56

57 Aktuality RSS Intranet. Následuje zápis lišty v její nejjednodušší možné podobě: <div id= navright > <div id= topnr > </div> <div id= aktualne > </div> <div id= RSS > </div> <div id= intranet ></div> </div> Prvním krokem bylo nastavení pevných rozměrů tohoto prvku. Panel má po celé své ploše stálou barevnost, je tedy vhodné ji nastavit pomocí stylů. Součástí grafického návrhu byla i jednopixelová linka kolem celé plochy panelu, kterou jsem poté ve stránce definoval také pomocí kaskádových stylů. #navright { text-align: left; width: 182px; height: 591px; background: #b5b9c5; display: block; margin: 0; border: 1px solid #999999; border-top: none; 57

58 border-right: 1px solid white; padding: 0; MS Internet Explorer se způsobem zhotovení stránky nesouhlasil a dal to náležitě najevo. Jeho pozornost tentokrát upoutaly plovoucí prvky hlavního menu v levém boxu. Nejjednodušší řešení bylo udělat z něj také plovoucí prvek. Zvolil jsem tok k pravé straně mateřského prvku pro případ, že by se v následujících verzích MSIE něco změnilo Navigační prvky v horní části lišty CSS pro první div s identifikátorem topnr nastavuje potřebnou šířku a výšku prvku. Jedná se o čistě grafický záměr a hodnoty zde tedy vycházejí z grafického návrhu. Opět bylo nutno ošetřit zápis CSS pro Internet Explorer (díky již dříve zmiňovanému nestandardnímu nakládání tohoto prohlížeče s paddingem). V grafickém návrhu se pod touto části lišty nachází pruh s přechodem do ztracena směrem napravo. Pro úsporu několika bitů by v ideálním případě bylo možno zvolit formát obrazu png se zachováním průhlednosti. Ovšem starší verze Internet Exploreru průhlednost v tomto formátu souboru ingorují. Nejúspornějším řešením se v tomto případě tedy jeví použití pruhu s přechodem do barevnosti pozadí ve formátu gif. Součástí grafického návrhu je bílá linka po pravé straně o šířce jeden pixel následována dále nalevo další jednopixelovou linkou, která je již součástí stylu hlavního bloku div. I tuto linku jsem se z důvodu snahy o co nejmenší velikost výsledného souboru rozhodl zanést do stylu. Tentokrát se již ovšem bude linka vyskytovat na více blocích div. Konkrétně na blocích s identifikátory #topnr, #aktualne, #RSS, #intranet. Tyto bloky jsou již jmenovitě zmíněny dříve v této 58

59 kapitole jako součást kostry pravé lišty. Je příhodné u této linky použít metody seskupeného zápisu, kterou CSS nabízí. V souboru navigace_right.css tedy přibyly následující dva řádky: #topnr, #aktualne, #RSS, #intranet { border-left: 1px solid white; Následuje výpis CSS pro horní část pravé lišty. #topnr { width: 181px; height: 43px; background: #b5b9c5 url(../img/navtr.gif) no-repeat 0px bottom; Uvnitř horní části pravé lišty, v bloku topnr se budou nacházet dva další bloky. Jeden s ikonami pro ovládání funkčních vlastností stránky a jeden pro ikony s tlačítky pro volbu jazyka. Oba tyto bloky budou obsahovat tlačítka (ve formě odkazů s obrázky). Obrázky jsou v tomto případě opět zařazeny do toku dokumentu, jelikož mají sémantický význam. Zde je výpis obsahu bloku s ikonami: <div id= icons > <a href= # > <img src= img/envelope.gif > </a> <a href= # > <img src= img/printer.gif > </a> 59

60 <a href= # > <img src= img/abc.gif > </a> <a href= # > <img src= img/info.gif > </a> <a href= # > <img src= img/faq.gif > </a> </div> Pro úpravu bloku s ikonami jsem zvolil šířku 90 pixelů a výšku 21 pixelů. Nastavil jsem vlastnost float nalevo. Odsazení od horního a levého okraje mateřského prvku bylo docíleno pomocí marginu 9 pixelů shora a zleva. #topnr div#icons { width: 90px; height: 21px; display: block; float: left; margin: 9px 0 0 5px; Vedle tlačítek pro ovládání funkčních vlastností stránky jsou umístěny tlačítka pro volbu jazykové verze. Tato tlačítka mají opět podobu odkazů s obrázky zanesenými přímo do toku dokumentu. A to ze stejného důvodu jako v předchozím případě. 60

61 Zde je ukázka zápisu bloku s tlačítky pro jazykovou volbu: <div id= flags > <a href= # > <img src= img/cz.gif > </a> <a href= # > <img src= img/en.gif > </a> </div> Opět vyvstala nutnost ošetřit rozdílný přístup k paddingu prohlížeče Internet Explorer. *html body #topnr div#icons { margin: 8px 0 0 3px; U obou typů tlačítek bylo dále nutné odstranit jednotlivými prohlížeči implicitně přiřazované vlastnosti. A sice dekorativní prvky u odkazů. Samotné podtržení je výsledkem vlastnosti text-decoration. Ovšem tato vlastnost se nevztahuje na obrázky uvnitř odkazů. Obtažení obrázku uvnitř odkazů, které se vyskytuje téměř u všech typů prohlížečů je výsledkem vlastnosti border. Nežádoucích dekorativních prvků se tedy zbavíme následujícím způsobem: #topnr div#icons a { text-decoration: none; #topnr div#icons a img { border: none; 61

62 Tlačítka pro jazykovou volbu plují také nalevo, což v tomto případě vede k tomu, že se zařadí hned vedle tlačítek pro ovládání funkčních vlastností stránky. Odsazení od horního okraje mateřského prvku by mělo být stejné jako u sousedních tlačítek a je tedy zajištěno stejnou hodnotou marginu. Margin zleva zde zajišťuje odsazení od levého sousedního bloku a projeví se mezerou mezi bloky o velikosti 30 pixelů. Tento fakt zmiňuji nikoli zbytečně, nýbrž proto, abych zdůraznil rozdílný výsledek aplikace marginu v případě dvou floatů oproti případu, kdy se vyskytuje vedle prvku s vlastností float:left prvek blokový. Výsledek ve druhém případě by mohl být za předpokladu dostatečné šířky mateřského prvku a určité kombinace marginu s velikostí jednotlivých bloků zcela odlišný. Zde je stylopis tlačítek pro jazykovou volbu následovaný již několikrát zmíněným ošetřením pro IE. #flags { height: 20px; width: 36px; margin: 8px px; float: left; *html body #flags { margin: 8px px; Další úprava panelu využívá metod a způsobů z předchozí části práce. Nebudu se o nich tedy již dále rozepisovat. Zbytek CSS je součástí přílohy. Blok obsahující horní část pravé lišty je následován blokem s aktualitami, který se vizuálně vyskytuje uvnitř lišty pod ním. Pro umístění pod sebou není nutno vynakládat žádnou námahu. Prvek div je totiž implicitně blokový a tudíž si vyhrazuje nárok na celou šířku mateřského prvku (lze si představit jako zalomení 62

63 konce řádku ve Wordu, ovšem v tomto případě provedeno implicitně samotným prohlížečem.). Rozměry následujícího bloku jsou v obou dimenzích elastické. Nejsou tedy nastavovány hodnoty vlastnosti width ani height. Výška bloku se přizpůsobí obsahu a šířka je ohraničena šířkou mateřského prvku. Blok se tedy bude chovat tak, že v závislosti na množství obsahu poroste nejdříve do šířky a poté, co narazí pravým okrajem na mateřský prvek, začne díky přetečení textu na další řádek růst do výšky. Zde je vhodná doba zmínit, že u prvků, jež mají implicitně nastavenou vlastnost display na block, pokud nemají autorským stylopisem nastavenou šířku, roztáhne prohlížeč Internet Explorer tento blok na celou šířku mateřského prvku, zatímco ostatní prohlížeče se snaží v souladu se standardy zachovat minimální nutnou šířku takového bloku. Blok se sděleními dále obsahuje následující další bloky: Nadpis uvozující začátek bloku Další bloky se samotným obsahem sdělení Nadpis je umístěn v souladu s požadavky na sémantiku mezi tagy <h2></h2>. Další bloky se samotným obsahem sdělení pojímají následující prvky: Nadpis uvozující začátek sdělení Samotné sdělení Nadpis uvozující začátek sdělení obsahuje datum a identifikaci autora příspěvku. V zápisu obsahu bloku s aktualitami toto členění již nijak nerozlišuji. Je to proto, že ze sémantického hlediska zde nevystává nijak zvlášť naléhavá nutnost toto provést. V podobných případech, kdy vidíme možnost další členění kódu směrem dovnitř, ale nevyskytuje se žádná větší nutnost takto činit, je dobré zamyslet dále a uvažovat o technické stránce problematiky. Je téměř jisté že 63

64 články budou publikovány přes administrační rozhraní, které bude generovat potřebný obsah včetně HTML pomocí nějakého jazyka pro práci s obsahem HTML dokumentu na serveru (např. PHP). Ani zde v tomto případě není nutnost odlišovat tyto části v obsahu nadpisu uvozujícího začátek příspěvku. Samotný obsah sdělení je dále umístěn mezi tagy <a></a>. Tedy bude plnit zároveň úlohu odkazu. To z toho důvodu, že v layoutu není z důvodu úspory prostoru pro více než jedno sdělení zobrazován celý článek, nybrž jen jeho začátek v rozsahu určitého množství slov. Po kliknutí na obsah sdělení se zobrazí stránka obsahující celé sdělení. Operace související se zajištěním této funkční vlastnosti je již prací programátora. Zde je ukázka bloku se sděleními v pravé liště dokumentu v jeho nejzákladnější podobě: <div id= aktualne > <h2> SDĚLENÍ </h2> <div class= article > <h3> datum vygenerovaný na serveru a nadpis zadaný autorem příspěvku</h3> <a href= # > Obsah sdělení</a> </div> </div> Výšku ani šířku tedy nebylo pro tento blok nutno nastavovat, takže zbývá jen nastavit obrázek pozadí, který je stejně jako v předchozím případě pruh s přechodem umístění na spodní straně bloku. Zde je CSS pro blok se sděleními v pravé liště: #aktualne { background: #b5b9c5 url(../img/navtr.gif) no-repeat left bottom; 64

65 Pro prvky uvnitř výše zmíněného bloku je nutno nastavit vhodné formátování. Pro nadpis jsem zvolil tučný řez, velikost 12 bodů a odstín stejný jako pozadí ovšem tmavší. Odsadil jsem jej od horního a levého okraje mateřského prvku (tentokrát pomocí paddingu). Pro samotné články byla z pochopitelných důvodů vytvořena třída. Prvky jsem taktéž zformátoval pomocí paddingu. Články již mají pevně stanovené rozměry..article { width: 174px; height: 75px; padding: 5px 0 5px 8px; *html body div.article { /*oprava pro explorer*/ width: 180px; height: 85px; Vlastnosti a formát písma je nutno ošetřit dalším zápisem. To z toho důvodu, že články se nevyskytují přímo v div.article nýbrž jsou dále uzavřeny mezi tagy <a></a>. div.article a { text-decoration: none; font: normal 10px Arial, Helvetica, Verdana; color: #1a4887; div.article a:hover { color: #dc4e01; 65

66 To samé platí i pro nadpisy uvozující začátky článků. div.article h3 { font: bold 11px Arial, Helvetica; color: #1a4887; Bezprostředně pod příspěvky následuje menší sekce s RSS ikonou a odkazem. Vlastnosti této sekce jsou stejné jako vlastnosti předchozích prvků zmíněných v základní kostře pravé lišty v nejjednodušší podobě. Nicméně i tak obsahově střídmá část jako tato si může vyžádat docela rozsáhlý stylopis. Samotný hlavní blok pojímající ostatní prvky obsahuje nastavení vzhledu textu, již několikrát zmiňovaný pruh s přechodem jako vlastnost background. Má také nastaveno relativní pozicování. To proto, že uvnitř prvku se vyskytuje ikona, jejíž umístění je ošetřeno pomocí absolutního pozicování. Absolutně pozicovaný prvek je zcela vyjmut z toku dokumentu (dokument se chová, jako by v místě, kde by se měl zmiňovaný absolutně pozicovaný prvek vyskytovat v případě hodnoty vlastnosti position:static, žádný prvek nebyl) a počítá svou pozici podle zadaných hodnot vlastností top, bottom, left či right vzhledem k prvnímu relativně, nebo absolutně pozicovanému prescenderu (ne nutně přímo mateřskému prvku, ale třeba i mateřskému prvku mateřského prvku). Relativně pozicovaný prvek na zadané hodnoty left, right, bottom či top reaguje tak, že se posune na základě těchto hodnot ze své výchozí pozice v toku dokumentu, přičemž ostatní prvky v dokumentu se chovají tak, jakoby tento relativně pozicovaný prvek byl stále na své původní pozici. Pokud tedy nastavíme prvku relativní pozicování a zanecháme všechny hodnoty vlastností top,left,right či bottom na nule, zajistíme tím, že jeho absolutně pozicovaní potomci budou svou polohu zadanou pomocí hodnot vlastností top, left, right či 66

67 bottom odvozovat od souřadnic relativně pozicovaného prescendera. Zde je CSS pro RSS. #RSS { width: 173px; height: 38px; padding: 18px 0 0 8px; background: #b5b9c5 url(../img/navtr.gif) no-repeat left bottom; font: bold 12px Arial, Verdana, Helvetica; position: relative; color: #df5c15; *html body #RSS { width: 181px; padding: 8px 0 0 8px; #RSS a { text-decoration: none; color: #df5c15; #RSS a:hover, a:link { color: white; #RSS a img { position: absolute; top: 3px; margin-right: 2px; 67

68 border: none; Poslední částí je blok s identifikátorem #intranet. Tento blok obsahuje následující descendery: Nadpis uvozující začátek sekce intranet Formulář Prvek formuláře typu <input> Prvek formuláře <select> Prvek formuláře typu <input> s hodnotou atributu type = text Základní kostra bloku intranet v nejjednodušší podobě vypadá následnovně: <div id= intranet > <h2>intranet</h2> <form method= post action= # > <input id= 01 type= text value= Jméno > <input type= text value= Příjmení > <select value= role > <option> první role </option> <option> druhá role </option> <input type= submit value= > </select> </form> </div> 68

69 Vlastnosti bloku, který obsahuje funkční prvky pro přístup do intranetu jsou nastaveny více méně stejným způsobem jako vlastnosti předchozích bloků. V rychlosti: Nastavení hodnot vlastností width a height tak, aby blok pasoval do mateřského prvku s identifikátorem #navright Nastavení vlastností pozadí s obrázkem v pozadí Definování spodní jednopixelové linky. Nastavení hodnoty vlastnosti poisition na relative #intranet { width: 181px; height: 211px; background: #c1c8d9 url(../img/intranet_bottom.gif) no-repeat left bottom; border-bottom: 1px solid white; position: relative; Stylopis pro blok s funkčními prvky pro přístup do intranetu je v některých bodech mírně odlišný. To z toho důvodu, že se tento blok vyskytuje vespod svého prescendera. Obrázkem v pozadí tentokrát není jen několikrát již používaný pruh přechodem do barvy pozadí, ale také pod pruhem se vyskytující prostor, který se sice na první pohled jeví jako jednobarevný, ale skutečnost je taková, že tento prostor obsahuje mírný měkký odlesk v rozích. Někdo by mohl namítat, že takové výstřelky jsou jen zbytečnými přenosovými daty navíc, ale zkušený webdesigner ví, že vhodná a citlivá kombinace právě takových prvků je to, co dělá stránku esteticky zajímavou. 69

70 Není to ovšem jeden samoúčelně použitý prvek, jehož přítomnost vlastně návštěvník většinou ani nepojme plným svým vědomím, nýbrž vhodná kombinace těchto dekorativních prvků, která tvoří ucelený a esteticky příjemný celek. Při používání takových dekorací je ovšem na druhé straně opravdu nutné neustále počítat, kolik přenosových dat navíc tato krása stojí. Relativní pozicování bloku s identifikátorem #intranet slouží opět pro vztyčení souřadnic pro absolutně pozicovaného potomka. Dále jsem zformátoval nadpis uvozující začátek bloku. Zvolil jsem velikost fontu 17 pixelů, normální řez a rodinu písma Arial, případně Verdanu či Helveticu. Tento zápis, kdy volím fonty Arial, Verdanu a Helveticu jsem již několikrát použil v předchozích částech. Snahou je tedy očividně udržení layout Arialu. Pokud Arial není k dispozici na PC z něhož je stránka prohlížena, volím na druhém místě střídavě Verdanu či Helveticu podle míry důležitosti prvku. #intranet h2 { font: normal 17px Arial, Verdana, Helvetica; color: #1a4887; padding: 10px 0 0 8px; Samotný formulář s funkčními prvky je odsazen 15 pixelů od nadpisu vyskytujícího se bezprostředně nad ním a 8 pixelů od levého okraje mateřškého prvku. #intranet form { padding: 15px 0 0 8px; Všem prvků typu input ve formuláři jsem nastavil shodné vnější odsazení zespoda a shodnou barvu textu. 70

71 #intranet form input { margin-bottom: 1px; color:#415da3; Pro úpravu jednotlivých prvků typu input jsem využil další schopnosti kaskádových stylů, a sice selektorů atributů, které skýtají možnost selekce prvků podle atributů, které obsahují. Dále je možné takový výběr více specifikovat kombinací více atributů v rámci jednoho selektoru, či dokonce definováním konkrétní hodnoty atributu, či obojího. Podobu tlačítka pro odeslání požadavku z formuláře jsem upravil pomocí obrázku pozadí. Dá se říct, že jsem si v grafickém programu Adobe Photohop CS3 vytvořil zcela novou podobu tlačítka, která lépe zapadá do celkového vzhledu dokumentu. Tlačítko je absolutně pozicované a vztahuje své souřadnice k nejbližšímu relativně pozicovanému prescenderu, tedy k bloku s identifikárorem #intranet. #intranet form input[type= submit ] { background: url(../img/submit_button.gif) no-repeat left bottom; height: 20px; width: 54px; border: none; display: block; position: absolute; top: 133px; left: 100px; Slideshow 71

72 Jako hlavní grafický prvek je na stránkách jednoduchá slideshow zhotovená pomocí knihovny Javascriptu JQuery. Její zápis v podobě jednotlivých obrázků v tagu IMG s identifikátorem id je jednoduchý a není třeba jej rozvádět. 72

73 8. Seznam použitých zdrojů 1. COOPER, Donald R. a SCHINDLER, Pamela S. Business Research Methods. 7. ed. Boston : McGraw-Hill, s. ISBN A. Powell, Webdesign kompletní průvodce, Brno: Computer Press, Kevin Yank, Cameron Adams, Javascript, Brno: Zonner Press, rastislav Škutléty, Programujeme internetové aplikace, Brno: Computer Press, Mariance Hauser, Tobias Hause, Christian Wenz, HTML a CSS velká kniha řešení, Brno 2006, Computer Press, 6. Eric O Meier, CSS kompletní průvodce, Brno:Zonner Press, Petr Staníček a kolektiv, CSS hotová řešení, Brno: Computer Press, CSS: The Definitive Guide, 3rd Edition, Eric Meyer, O Reilly, 2006, ISBN-10: , stran: HTML & XHTML: The Definitive Guide, 6th Edition, Bill Kennedy, Chuck Musciano, O Reilly, 2006, Print ISBN-10: , Pages: Michael J. Young, XML kro za krokem, Brno: 2008, Computer Press 11. The Art And Science Of CSS, Collyngwood: 2007, SitePoint Pty. Ltd. 12. Visual QuickPro Guide - DHTML and CSS Advanced, Jason Cranford Teague, USA: Peachpit Press, More Eric Meyer on CSS, Eric Meyer, USA : New Riders Publishing,

74 9. Přílohy Printscreen lay-outu v grafickém programu Adobe Photoshop 74