načítání...
nákupní košík
Košík

je prázdný
a
b

Kniha: Microsoft Expression Web 2 -- Krok za krokem - Chris Leeds

Microsoft Expression Web 2 -- Krok za krokem
-14%
sleva

Kniha: Microsoft Expression Web 2 -- Krok za krokem
Autor:

Také chcete tvořit webové stránky v následovníkovi populárního FrontPage? S touto knihou už nebude tvorba a programování webů v grafickém rozhraní Expression Web zapovězena ani úplným ... (celý popis)
Titul doručujeme za 4 pracovní dny
Vaše cena s DPH:  397 Kč 341
+
-
rozbalKdy zboží dostanu
11,4
bo za nákup
rozbalVýhodné poštovné: 39Kč
rozbalOsobní odběr zdarma

hodnoceni - 0%hodnoceni - 0%hodnoceni - 0%hodnoceni - 0%hodnoceni - 0%   celkové hodnocení
0 hodnocení + 0 recenzí

Specifikace
Nakladatelství: » Computer press
Médium / forma: Tištěná kniha
Rok vydání: 2009-06-22
Počet stran: 336
Rozměr: 167 x 225 mm
Úprava: 333 stran : ilustrace
Vydání: Vyd. 1.
Název originálu: Microsoft Expression Web 2
Spolupracovali: překlad Ondřej Gibl
Vazba: brožovaná lepená
ISBN: 9788025126349
EAN: 9788025126349
Ukázka: » zobrazit ukázku
Popis

Také chcete tvořit webové stránky v následovníkovi populárního FrontPage? S touto knihou už nebude tvorba a programování webů v grafickém rozhraní Expression Web zapovězena ani úplným začátečníkům. Praktický výukový průvodce vás krok za krokem naučí využívat nástroje Expression Web 2 k tvorbě dynamických, na standardech založených webových stránek. Své vědomosti a dovednosti budete zdokonalovat postupně na praktických příkladech a bez zbytečné teorie. Pomocí výukových cvičení se snadno naučíte přesně to, co potřebujete. Mimo jiné se naučíte: - Tvořit stránky z připravených šablon nebo vytvářet šablony vlastní - Přidávat grafiku a animace z Photoshopu, Flashe nebo Silverlightu - Navrhnout vzhled a funkce stránek pomocí CSS - Použít ovládací prvky ASP.NET 2 bez nutnosti psát kód - Vylepšit vzhled stránek a optimalizovat je pro vyhledávače - Snadno převést stránky vytvořené v aplikaci FrontPage Na konci kapitol najdete shrnutí probrané látky, díky němuž si můžete ihned ověřit nabyté znalosti. Všechny zdrojové materiály pečlivě lokalizované do češtiny si čtenáři mohou stáhnout na adrese knihy.cpress.cz/k1699. O autorovi: Chris Leeds je digitálním fotografem a tvůrcem webů s titulem MVP (Microsoft most Valuable Professional) pro aplikaci FrontPage. Je autorem předchozího vydání knihy na verzi 1. A mimo jiné vyvinul program ContentSeed (www.ContentSeed.com), s nímž může uživatel vytvořit webové stránky přímo v internetovém prohlížeči. (krok za krokem)

Předmětná hesla
WWW design
HTML editory
Microsoft Expression Web 2
Web design -- Tvorba WWW stránek
Ðoković, Novak, 1987-
Kniha je zařazena v kategoriích
Recenze a komentáře k titulu
Zatím žádné recenze.


Ukázka / obsah
Přepis ukázky

Prezentace informací

na webové stránce

4

Kapitola 4

Prezentace informací na webové

stránce

V této kapitole se naučíte následující:

Správně používat tabulky

Používat seznamy pro seskupování informací

Používat významové (sémantické) značky

Používat styly pro nastavení prezentace obsahu stránek

Provádět kontrolu kaskádových stylů V základu slouží webové stránky pro zobrazování informací jejich návštěvníkům. Přestože se tento koncept jeví jako velmi jednoduchý, moderní web k němu přidává jistou mírukomlexnosti. Návrh stránky by měl brát v potaz také přístupnost z pohledu zařízení s omezenými možnostmi, vyhledávačů, nejlepších praktik a spravovatelnosti. Ačkoli detailní přehled týkající se témat přístupnosti a správné koncepce stránky z pohledu vyhledávačů spadá již za rámec této knihy, pomohou vám následující cvičení utvořit si dobré základní povědomí o těchto aspektech tvorby webů. V této kapitole se naučíte, jak efektivně používat ve vašich webových stránkách tabulky a také jak používat seznamy. Dozvíte se také, jak používat významové značky a konečně pak i jak používat šablony stylů pro konfiguraci prezentace obsahu vašich stránek a kontrolovatkomatibilitu těchto šablon stylů s moderními prohlížeči pomocí analytických funkcí aplikace Expression Web 2.

Důležité: Dříve než začnete používat soubory s příklady pro tuto kapitolu, ujistěte se, že

jste je uložili do požadovaného umístění ve vašem počítači. Více informací o souborech

s příklady najdete v části Stažení a použití souborů ke cvičením na straně 11.

Řešení problémů: Instrukce týkající se grafického vyobrazení a operačního systému v této

knize reflektují uživatelské rozhraní systému Windows Vista. Pokud je na počítačinainstalován systém Windows XP a máte potíže, přestože postupujete podle zde uvedených instrukcí ,

podívejte se prosím do části Informace pro čtenáře používající operační systém Windows XP,

na začátku této knihy.

Pro zlepšení čitelnosti obrázků v této knize byla aplikace Expression Web 2 nastavena tak,

aby používala barevné schéma systému Windows namísto výchozího barevného schématu

aplikace Expression Web 2. ■ ■ ■ ■ ■


84 Kapitola 4 – Prezentace informací na webové stránce

Správné používání tabulek

Již víte, že vývojáři webů dnes používají pro návrh stránek kaskádové styly. Podívejte se do

kterékoli ze šablon dodávaných společně s aplikací Expression Web 2 – nenajdete jedinou

šablonu, která by pro rozložení používala tabulky. V ne příliš vzdálené minulosti seelementy webových stránek často vkládaly do tabulky, popř. skupiny tabulek. Ačkoli tato metoda

poskytovala slušnou úroveň přesnosti, nikdy se nejednalo o zamýšlený účel značky <table>.

Zdrojové kódy stránek se díky tomuto těžkopádnému tabulkovému návrhu stávají složitější,

což pro čtečky obrazovky, popř. vyhledávače jistě není ideální, nemluvě o potřebě většího

množství času pro stažení delšího kódu stránky prohlížečem. Velkou otázkou se nyní zdá být,

zda je používání tabulek stále akceptovatelné. Odpověď je zcela jistě ano. Jak se zdá, tabulky

ztrácejí pro účely rozložení stránky na popularitě, ale stále zůstává pro jejich používání řada

dobrých důvodů. Asi nejvíce zřejmým důvodem je prezentace dat v čistě tabulkové podobě.

V tomto cvičení použijete správně vytvořenou a validní tabulkovou strukturu pro zobrazení

určitých tabulkových dat ve vaší webové stránce.

Použijte ukázkový web Kap4, který najdete mezi ukázkovými zdrojovými kódy ve složce

Weby.

Ujistěte se (dříve než zahájíte toto cvičení), že jste spustili aplikaci Expression Web 2.

Otevřete web Kap4 klepnutím na položku Open Site (Otevřít web) nabídky File (Soubor)

a následně zobrazte soubor contact.htm. 1. V nabídce View (Zobrazit) klepněte na položku Visual Aids (Vizuální pomoc) a následně

klepněte na položku Show (Ukázat). Ujistěte se, že položka Block Selection (Výběr bloku)

je jedinou vybranou vizuální pomocí.

Vizuální pomocníci vám mohou pomoci vidět nejrůznější elementy v tabulce. 2. V panelu Design (Návrh) nastavte textový kurzor na konec směrovacího čísla v adrese

a poté stiskněte klávesu Enter pro vytvoření nového odstavce.


85

Prezentace informací

na webové stránce

4

3. V nabídce Ta b l e (Tabulka) klepněte na položku Insert Table (Vložit tabulku). V dialogu

Insert Table (Vložit tabulku) nakonfigurujte tabulku tak, aby měla dva řádky a tři sloupce.

Ostatní nastavení ponechejte na výchozích hodnotách. 4. Stiskněte tlačítko OK pro vložení tabulky. V levém horní buňce tabulky zadejte text

Jméno. Do další buňky zadejte E-mail a do následující Te l e f o n. Klávesou Ta b přesuňte textový kurzor do první buňky dalšího řádku. V tomto, druhém, řádku zadejte nějaké

jméno, e-mailovou adresu a telefonní číslo. 5. V nabídce View (Zobrazit) klepněte na položku Visual Aids (Vizuální pomoc) a následně

klepněte na položky Visual Borders (Vizuální ohraničení) a Empty Containers (Prázdné

kontejnery).

Správné používání tabulek


86 Kapitola 4 – Prezentace informací na webové stránce

6. Pozadání telefonního čísla do poslední buňky stiskněte klávesu Ta b pro vytvoření nového,

třetího, řádku tabulky. Opět zadejte nějaké jméno, e-mailovou adresu a telefonní číslo do

buněk v tomto řádku. 7. Uložte stránku a zobrazte její náhled v prohlížeči, abyste se ujistili, že se stránka zobrazuje

tak, jak jste si to představovali.

Ujistěte se, že jste ponechali web Kap4 otevřený pro použití v dalším cvičení.

Zavřete stránku contact.htm.

Použití seznamu pro seskupení informací

Jednou z nezbytných značek pro rozvržení informací ve webové stránce je značka pro seznam.

Existují tři základní typy seznamů, jak ukazuje následující tabulka.

Typ seznamu Značka Popis

Číslovaný seznam <ol> Seznam s číslovanými prvky

Nečíslovaný seznam <ul> Seznam s nečíslovanými prvky (odrážkami)

Seznam definic <dl> Seznam s prvky představujícími termíny a jejich

definice (podobný typické struktuře slovníku)

V tomto cvičení se naučíte, jak všechny tyto tři typy seznamu vkládat do vašich stránek aspravovat v nich uvedené informace.


87

Prezentace informací

na webové stránce

4

Použijte ukázkový web Kap4, který jste upravovali v předchozím cvičení.

Otevřete web Kap4, není-li doposud otevřený, a zobrazte stránku about_me.htm. 1. V panelu Design (Návrh) nastavte textový kurzor ihned za nadpis Nadpis 2 a potéstiskněte klávesu Enter pro vytvoření nového odstavce. Zadejte text Výhody jako nadpisseznamu, který bude následovat. Stiskněte klávesu Enter pro vytvoření dalšího odstavce a poté

zadejte text První výhoda. V nástrojové liště klepněte na tlačítko Bullets (Odrážky).

V pohledu Split (Rozdělit) je nyní patrné, jak se element p, který původně uzavíral text

První výhoda, změnil na element ul, a samotný text je ještě uzavřen v elementu li.

Z odstavce se tak stal nečíslovaný seznam a z textu se stal prvek seznamu. 2. Znovu stiskněte klávesu Enter pro vytvoření nového prvku seznamu a zadejte text Druhá

výhoda. Stiskněte klávesu Enter ještě jednou pro přesun na další řádek, ale dříve nežzadáte cokoli dalšího, klepněte na tlačítko Increase Indent Position (Zvětšit odsazení).

V kódu stránky se uvnitř předchozího elementu li objeví element ul – právě jste vytvořili

seznamu v seznamu. 3. Zadejte do nově vytvořeného vnitřního seznamu postupně tři prvky. Po zadání každého

z nich vždy stiskněte klávesu Enter. 4. Poté co dosáhnete třetího prvku vnitřního seznamu a stisknete klávesu Enter, klepněte na

tlačítko Decrease Indent Position (Zmenšit odsazení).

V panelu s kódem je patrné, jak se element vnitřního seznamu i element položky tohoto

seznamu uzavřely a že nacházíte se zpátky v původním seznamu. 5. Přidejte další dva prvky, Třetí výhoda a Čtvrtá výhoda. Po zadání každého z nich vždy

stiskněte klávesu Enter. Poté co zadáte prvek s textem Čtvrtá výhoda, stiskněte dvakrát

klávesu Enter pro ukončení seznamu a vytvoření nového odstavce.

Použití seznamu pro seskupení informací


88 Kapitola 4 – Prezentace informací na webové stránce

6. Uložte vaši stránku a zobrazte její náhled v prohlížeči, abyste se ujistili, že se stránkazobrazuje podle vašich představ. Poté se přepněte zpět do aplikace Expression Web 2. 7. V panelu Design (Návrh) zadejte text Instrukce v odstavci následujícím ihned za vámi

právě vytvořeným nečíslovaným seznamem a stiskněte klávesu Enter pro vytvořenínového odstavce.

Nyní vytvoříme seznam instrukcí, protože ty už svou samotnou podstatou nabádají

k použití číslovaného seznamu. 8. Zadejte text První krok a poté stiskněte tlačítko Numbering (Číslování).


89

Prezentace informací

na webové stránce

4

V pohledu Split (Rozdělit) je patrné, jak se z elementu p, který předtím uzavíral text První

krok, stal element ol, a samotný text je obsahem elementu li. Z odstavce se tak stalčíslovaný seznam a z textu prvek tohoto seznamu.

9. Stiskněte klávesu Enter pro vytvoření nového prvku seznamu a zadejte text Druhý krok.

Poté stiskněte klávesu Enter ještě jednou pro vytvoření dalšího prvku seznamu, ale dříve

než cokoli zadáte, klepněte na tlačítko Increase Indent Position (Zvětšit odsazení).

V kódu stránky se uvnitř elementu li objeví element ol. Opět je zde seznam v seznamu. 10. Do seznamu přidejte tři prvky. Po zadání každého z nich stiskněte klávesu Enter. 11. Když dospějete k poslednímu prvku tohoto vnitřního seznamu a stisknete klávesu Enter,

klepněte na tlačítko Decrease Indent Position (Zmenšit odsazení). V liště pro rychlý

výběr značky následně klepněte na položku <ol> pro označení celého seznamu, na kterém

jste pracovali.

Jak je v panelu Design (Návrh) patrné, aplikace Expression Web 2 uzavřela vnitřní seznam

a jeho poslední prvek a navrátila vás do původního seznamu. 12. Zadejte další dva prvky: Třetí krok a Čtvrtý krok a po zadání každého z nich stiskněte

klávesu Enter. Po zadání prvku s textem Čtvrtý krok stiskněte klávesu Enter hned dvakrát

pro ukončení seznamu a vytvoření nového odstavce.

Použití seznamu pro seskupení informací


90 Kapitola 4 – Prezentace informací na webové stránce

13. Uložte stránku a zobrazte její náhled v prohlížeči, abyste se ujistili, že vypadá podle vašich

představ.


91

Prezentace informací

na webové stránce

4

Seznamy definic se nepoužívají tak často jako číslované a nečíslované seznamy, ale přesto

jsou užitečné pro seznamy termínů a jejich definic. 14. Přepněte se do aplikace Expression Web 2. V odstavci nacházejícím se pod předchozími

seznamy zadejte text Definice a stiskněte klávesu Enter pro vytvoření nového odstavce.

Následně zadejte text První termín. V nástrojové liště není pro seznamy definic žádné

tlačítko, a proto klepněte na značku odstavce v liště pro rychlý výběr značky příslušející odstavci s textem První termín pro označení celého odpovídajícího elementu. V běžné

nástrojové liště klepněte do nabídky s hodnotou Paragraph (Odstavec) a vyberte možnost

Defined Term <dt> (Definovaný termín).

Stejně jako v předchozích příkladech se seznamy došlo k nahrazení elementu p elementem

pro seznam, v tomto případě dl, a text První termín se stal prvkem tohoto seznamu a je

obsahem elementu dt. 15. Stiskněte klávesu Enter pro vytvoření nového řádku, který bude obsahem elementu dd,

a zadejte několik vět popisujících termín První termín. Znovu stiskněte klávesu Enter pro

vytvoření nového řádku.

K termínu První termín nyní můžete přiřadit další definici.

Použití seznamu pro seskupení informací


92 Kapitola 4 – Prezentace informací na webové stránce

Seznam definic pracuje trochu jinak než předchozí dva typy seznamů. Seznam definic

představuje jednoduchý způsob, jak k jednomu termínu přiřadit více definic. 16. Zadejte do tohoto řádku sekundární definici a ještě jednou stiskněte klávesu Enter.

V tomto okamžiku chceme na nově vzniklém řádku přidat další termín, nikoli definici. 17. V panelu Code (Kód) změňte značky <dd> a </dd> na <dt>, resp. </dt>. 18. Zadejte text Druhý termín.

Nový termín se zarovná pod ten předchozí.


93

Prezentace informací

na webové stránce

4

19. Stiskněte klávesu Enter pro vytvoření definice pro tento druhý termín. Tento proces si

několikrát zopakujte, abyste se s ním seznámili. Poté co dokončíte přidávání termínů

a jejich definic, stiskněte dvakrát klávesu Enter pro ukončení seznamu definic a vložení

nového odstavce.

20. Uložte stránku a zobrazte její náhled v prohlížeči, abyste se ujistili, že odpovídá vašim

představám.

Ujistěte se, že ponecháte web Kap4 otevřený pro další cvičení.

Použití seznamu pro seskupení informací


94 Kapitola 4 – Prezentace informací na webové stránce

Zavřete stránku about_me.htm.

Použití významových značek

Namísto uvažování o elementech jazyka HTML jako o způsobu, jak dát styl vašemu textu,přemýšlejte o těchto elementech jako o způsobu, jakým popsat význam uvedeného textu a použít

kaskádové styly pro nastavení způsobu jejich zobrazení.

Např. seznam seskupuje podobné elementy dohromady zcela jiným způsobem než několik po

sobě jdoucích odstavců. Element H1, signalizuje vyšší důležitost než stejná slova vyznačená

velkým písmem. Značky <em> (Emphasized - zdůrazněné) nebo <strong> (silný důraz) zase

podávají dodatečné informace o významu slova, zatímco značka <b> (bold - tučné) jednoduše

změní písmo, ale nijak nepřispívá k vnímané důležitosti slova.

V tomto cvičení se dozvíte, jak používat elementy jazyka HTML pro zdůraznění významu

textu a jak používat kaskádové styly pro modifikaci vzhledu elementů.

Použijte ukázkový web Kap4, který jste upravovali v předchozím cvičení.

Otevřete web Kap4, není-li doposud otevřený, a zobrazte stránku contact.htm. 1. V panelu Design (Návrh) se přesuňte níže k tabulce s informacemi o zaměstnancích. 2. Označte první řádek tabulky klepnutím na položku <tr> v liště pro rychlý výběr značky

(jedná se o řádek obsahující slova Jméno, E-mail a Te l e f o n). V panelu Code (Kód) změňte

každou ze značek jednotlivých buněk tohoto řádku tabulky tak, že nahradíte značky <td>

a </td> značkami <th>, resp. </th>. Následně stránku uložte.


95

Prezentace informací

na webové stránce

4

V panelu Design (Návrh) si můžete všimnout, jak se lehce změní vzhled textuobsaženého v modifikovaných buňkách. K této změně došlo, protože jste nahradili obecné buňky

tabulky buňkami záhlaví tabulky. Tato značka vyhledávačům a nevizuálním webovým

prohlížečům říká, že tato část tabulky je odlišná a jedná se o záhlaví sloupců tabulky. 3. Otevřete stránku about_me.htm. V panelu Design (Návrh) označte slovo Výhody, které

jste použili jako nadpis pro seznam výhod, a následně klepněte na tlačítko Bold (Tučné).

Kód stránky nyní obsahuje navíc značku <strong>. Tato značka je mnohem vhodnější

než zastaralá značka <b>, protože na rozdíl od ní nespecifikuje vzhled textu, nýbrž jeho

význam. 4. Opakujte třetí krok pro slovo Instrukce. 5. Označte nadpis posledního ze seznamů, Definice. Tentokrát namísto tlačítka Bold

(Tučné), které slovo vložilo mezi značky <strong> a </strong>, použijte tlačítko Italic

(Kurziva).

Použití významových značek


96 Kapitola 4 – Prezentace informací na webové stránce

6. Namísto zastaralé značky <i> pro kurzivu se slovo vloží mezi značky <em> a </em>. Tato

značka značí zdůrazněné (emphasized) slovo. Myšlenka je opět taková, že důraz něcozna

mená, zatímco kurziva pouze určuje typ písma.


97

Prezentace informací

na webové stránce

4

Ujistěte se, že jste ponechali web Kap4 otevřený pro další cvičení.

Zavřete stránky contact.htm a about_me.htm (poté co své změny uložíte). Smysl posunu od prezentačních značek (značky pro font, kurzivu, tučné písmo atd.) kvýznamovým značkám je zřejmý. Starý způsob pouze na text aplikoval určitou vizuální podobu, nový způsob naopak přidává určitou míru popisu, který pomáhá vyhledávačům a nevizuálním prohlížečům pochopit význam, který prezentační značky nemohou poskytnout.

Aplikace stylů na obsah stránek

V předchozích cvičeních jsme do stránky vložili několik seznamů a tabulek. Tyto prvky zcela

jistě slouží účelu, pro který byly vytvořeny – tj. obsahují informace, které obsahovat mají

a oddělují je od ostatních informací. Významově jsou seznamy a tabulky nadřazené používání

odstavců nebo jednoho odstavce se zalamováním řádků mezi relevantními bloky. Jejichjediným problémem je jejich vzhled.

Jedná se o další problém, ze kterého nás dostanou kaskádové styly. Nyní se naučíte, jak správně

pracovat s významovými značkami pro potřeby vyhledávačů a nevizuálních prohlížečů asoučasně na ně aplikovat styly, tak aby se jevily návštěvníkům stránek přitažlivě.

V tomto cvičení se naučíte aplikovat styly na obsah vašich webových stránek pomocí konceptu

tříd a přímého uvedení pravidel stylů v elementech jazyka HTML.

Použijte ukázkový web Kap4, který jste upravovali v předchozím cvičení.

Otevřete web Kap4, pokud již není otevřený, a zobrazte stránku contact.htm. 1. V nabídce View (Zobrazit) klepněte na položku Visual Aids (Visuální pomoc) a následně

klepněte na položku Margins and Padding (Vnější a vnitřní okraje). 2. V panelu Design (Návrh) se posuňte níže k tabulce s informacemi o zaměstnancích,klepněte kamkoli do horního řádku tabulky a následně označte celý řádek obsahující buňky

záhlaví tabulky (<th>) klepnutím na položku <tr> v liště pro rychlý výběr značky.

3. V panelu Apply Styles (Použít styly) klepněte na položku New Style (Nový styl). V dialogu

New Style (Nový styl) zadejte jako selektor pravidla stylu .zahlaviTabulky. Následně

zaškrtněte pole Apply new style to document selection (Aplikovat nový styl na výběr

v dokumentu).

4. Ve výběrovém poli Define in (Definovat v) vyberte možnost Existing style sheet

(Existující šablona stylu) a ve výběrovém poli URL vyberte možnost ../styles/style3.css.

5. V části Category (Kategorie) klepněte na položku Font (Písmo). Nastavte vlastnostfontfamily na hodnotu Courier New, Courier, monospace, vlastnost font-weight na bold

a vlastnost color na hodnotu #FFFFFF. V kategorii Block (Blok) nastavte vlastnosttextalign na hodnotu left a v kategorii Background (Pozadí)pak hodnotu background-color

na hodnotu #000000.

Aplikace stylů na obsah vašich stránek


98 Kapitola 4 – Prezentace informací na webové stránce

6. Stiskněte tlačítko OK pro zavření dialogu.

Tip: V dialogu Style Builder se kategorie, ve které provedete své nastavení hodnoty určité

vlastnosti, vyznačí tučným písmem.

Tímto jste modifikovali vzhled všech elementů th v daném řádku tabulky tím, že jste

element tr, který je obsahuje, přiřadili do třídy stylu (class=”zahlaviTabulky”).


99

Prezentace informací

na webové stránce

4

7. V ukázkovém webu otevřete soubor about_me.htm a v panelu Design (Návrh) označteelement ul nacházející se pod nadpisem Výho dy. 8. V panelu Apply Styles (Použít styly) klepněte na položku New Style (Nový styl). V dialogu

New Style (Nový styl) zadejte jako selektor pravidla stylu .seznamVyhod . Následně

zaškrtněte pole Apply new style to document selection (Aplikovat nový styl na výběr

v dokumentu). 9. Ve výběrovém poli Define in (Definovat v) vyberte možnost Existing style sheet

(Existující šablona stylu) a ve výběrovém poli URL vyberte možnost ../styles/style3.css.

10. V kategorii List (Seznam) nastavte vlastnost list-style-type na hodnotu square. Potéstiskněte tlačítko Apply (Použít).

Text uvedený v záhlaví dialogu se změní z New Style (Nový styl) na Modify Style (Upravit

styl).

Prvky vnějšího seznamu nyní mají čtvercovou odrážku namísto typické kulaté. Prvky

vnitřního seznamu stále mají kulaté odrážky.

Aplikace stylů na obsah vašich stránek


100 Kapitola 4 – Prezentace informací na webové stránce

11. V poli Selector (Selektor) změňte uvedený selektor z .seznamVyhod na .seznamVyhod li

a stiskněte tlačítko Apply (Použít).


101

Prezentace informací

na webové stránce

4

Prvky vnitřního seznamu mají nyní čtvercovou odrážku namísto kulaté. To proto, že jste

element ul v osmém kroku přiřadili do třídy seznamVyhod a nyní jste rozšířili rozsahelementů, na které se budou odpovídající deklarace vlastností aplikovat, o všechny elementy

li, které jsou následníky tohoto elementu. Výsledkem této procedury je identický vzhled

prvků jak vnějšího, tak vnitřního seznamu.

12. Stiskněte tlačítko OK pro zavření dialogu Modify Style (Upravit styl).

13. V panelu Design (Návrh) označte element ol následující za nadpisem Instrukce a vpanelu Apply Styles (Aplikovat styl) klepněte na položku New Style (Nový styl). V dialogu

New Style (Nový styl) zadejte jako selektor .seznamInstrukci. Následně zaškrtněte pole

Apply new style to document selection (Aplikovat nový styl na výběr v dokumentu ). 14. Ve výběrovém poli Define in (Definovat v) vyberte možnost Existing style sheet

(Existující šablona stylu) a ve výběrovém poli URL vyberte možnost ../styles/style3.css. 15. V kategorii List (Seznam) nastavte vlastnost list-style-type na hodnotu upper-roman.

Poté stiskněte tlačítko OK pro zavření dialogu New Style (Nový styl). 16. V panelu Apply Styles (Použít styly) klepněte pravým tlačítkem myši na položku .sezna-

mInstrukci a ze zobrazené kontextové nabídky vyberte možnost New Style Copy (Kopie

nového stylu), která zajistí zkopírování daného pravidla stylu. 17. Přiřaďte novému pravidlu stylu selektor .seznamInstrukci li li a v kategorii List nastavte

vlastnost list-style-type na hodnotu lower-alpha. Poté stiskněte tlačítko OK.

Jako odrážky ve vnitřním seznamu nyní slouží malá písmena, zatímco odrážkami ve

vnějším seznamu jsou římské číslice. Jediný kód, který se přidal do stránky, je přiřazení

elementu ol do odpovídající třídy (class=”seznamInstrukci”).

Aplikace stylů na obsah vašich stránek


102 Kapitola 4 – Prezentace informací na webové stránce

Dalším možným postupem je přímo asociovat styl s určitým elementem jazyka HTML,

např. p, h1 nebo ol. 18. V panelu Apply Styles (Použít styly) klepněte na položku New Style (Nový styl) a jako

selektor zadejte dt. V kategorii Font nastavte vlastnost font-family na hodnotu Courier

New, Courier, monospace, vlastnost font-weight na bold a vlastnost text-transform na

hodnotu uppercase. 19. Stiskněte tlačítko OK.


103

Prezentace informací

na webové stránce

4

Termíny v seznamu definic jsou nyní všechny zobrazeny velkým písmem a tučně.

20. V panelu Apply Styles (Použít styly) klepněte na položku New Style (Nový styl) a jako

selektor zadejte dd. V kategorii Font (Písmo) nastavte vlastnost font-family na hodnotu

Times New Roman, Times, serif, vlastnost font-size na small a vlastnost color nahodnotu #808080. Poté stiskněte tlačítko OK. Definice jsou nyní zobrazeny menším písmem a šedou barvou. Tyto efekty se aplikují na všechny termíny a jejich definice v každé webové stránce, která bude používat tuto šablonu stylů. Kód ve stránce se vůbec nezměnil. Tento styl se ve výchozím nastavení aplikuje na všechny terminy a definice bez nutnosti je jednotlivě přiřazovat do nějaké třídy nebo je jinak jednotlivě upravovat. Tato funkce představuje velkou výhodu, pokud byste si někdy přáli změnit vzhled určitých elementů HTML. Vše, co stačí udělat, je změnit daný záznam všabloně stylů a vzhled každé instance tohoto elementu v desítkách, stovkách, či dokonce tisících stránek se ihned změní.

Ujistěte se, že jste ponechali web Kap4 otevřený pro použití v dalším cvičení.

Zavřete stránky contact.htm a about_me.htm, poté co uložíte své změny.

Aplikace stylů na obsah vašich stránek


104 Kapitola 4 – Prezentace informací na webové stránce

Kaskádové styly

Při používání kaskádových stylů je k dispozici několik metod úpravy vzhledu elementů

stránky, včetně následujících:

• parametr id – na element se zadaným identifikátorem je možné se v šabloně stylů

odkazovat s využitím tohoto identifikátoru se symbolem # připojeným na jeho začátek.

Identifikátory jsou navrženy tak, aby se ve stránce používaly pouze jednou, a často se

s nimi proto setkáte u hlavních elementů stránky, jako jsou např. elementy div tvořící

základní struktury stránky.

• parametr class – na element patřící do zadané třídy je možné se v šabloně stylůodkazovat s využitím názvu této třídy doplněného o symbol tečky na začátku. Pokud je tozapotřebí, může do jedné třídy patřit více elementů stránky.

Můžete specifikovat styl také pro základní elementy jazyka HTML, jako jsou např. číslované

seznamy nebo odstavce. To se může mnohdy hodit, protože pravidlo stylu v šablonědefinujete pro daný element pouze jednou a pak již se na každý výskyt tohoto elementu ve stránce

aplikují zadané deklarace vlastností.

Jaké je přidaná hodnota všeho tohoto úsilí? Uvažte následující katastrofický scénář:nepoužili jste kaskádové styly pro nastavení vzhledu jednotlivých segmentů informací ve stránce.

Extenzivně tedy používáte značky <font> popisující vzhled každého řádku textu a uchýlili

jste se také k nastavení odsazení každého z odstavců zvlášť. Velikost stránky a jejího kódu je

mnohonásobně větší, než je nutné.

A nyní uvažte nejlepší scénář: vložili jste informace do významově validního elementu, který

sám o sobě přidává na významu obsaženého textu, a udělili jste mu vzhled, jaký si přejete,

pomocí pravidel stylů uložených v externím souboru šablony stylu. Zabránili jste vytváření

velkého množství kódu a dali jste textu dodatečný význam spadající za hranici toho, co je

možné vidět. Bonusem a odměnou za vaše snažení je pak externí šablona stylu, kterouprohlížeč stáhne pouze jednou, uloží do své mezipaměti a následně použije pro každou stránku,

která se na ni odkazuje. Kromě čistšího a uhlazenějšího kódu je tento také efektivnější. Ačkoli

tento malý příklad nemá tak dobrou vypovídající hodnotu, jako by měl velký web, faktem

zůstává, že tyto techniky mohou pomoci uspořit místo na serveru, snížit vašim návštěvníkům dobu potřebnou pro načtení stránky a přidat vyhledávatelnosti v obsahu.

Kontrola kaskádových stylů

V předchozích cvičeních jste použili některé z funkcí aplikace Expression Web 2, kteréusnadňují používání kaskádových stylů. Je proto vhodný čas podívat se na vaši šablonu stylů a ověřit

její kompatibilitu, abyste zajistili, že vše, co jste právě vytvořili, je validní a povede kesprávnému zobrazení v různých prohlížečích.

V tomto cvičení použijete funkce pro kontrolu kaskádových stylů aplikace Expression Web 2.

Výsledná hlášení budou užitečná jak pro správu komplexních šablon stylů, tak pro diagnostiku

a průzkum toho, jak se kaskádové styly používají a jak ovlivňují existující webové stránky.

Použijte ukázkový web Kap4, který jste upravovali v předchozím cvičení.


105

Prezentace informací

na webové stránce

4

Otevřete web Kap4, pokud již není otevřený.

1. V otevřeném webu Kap4 klepněte v nabídce Tools (Nástro

je) na položku CSS Reports (Kontrola CSS) pro zobra

zení stejnojmenného dialogu. Ujistěte se, že jste vybrali

možnost All Pages (Všechny stránky) a že jsou zaškrtnuta

všechna tři zaškrtávací pole, Unused Styles (Nepoužívané

styly), Undefined Classes (Nedefinované třídy) a Mis

matched Case (Neodpovídající velikost písmen), specifi

kující typ chyb, který se má vyhledávat. Poté stisknětetla

čítko Check (Zkontrolovat).

Tip: Při prvním použití funkce CSS Reports (Kontrola CSS) může aplikace Expression

Web 2 potřebovat nejdříve provést svou konfiguraci. V takovém případě se zobrazí dialog

Configuration a může být zapotřebí restart počítače, aby se změny projevily.

V dolní část pracovní plochy je nyní otevřený panel CSS Reports (Kontrola CSS), který

ukazuje tři nepoužívané styly.

2. Dvakrát klepněte na první z uvedených chyb v seznamu, týkající se elementu h5.

V pracovní ploše nad panelem CSS Reports (Kontrola CSS) se otevře inkriminovanášab

lona stylu s vyznačeným nepoužívaným stylem.

Kontrola kaskádových stylů


106 Kapitola 4 – Prezentace informací na webové stránce

3. Odstraňte vyznačený styl a uložte šablonu stylu. Klepněte na zelenou šipku v levém

horním rohu panelu CSS Reports (Kontrola CSS) pro zobrazení dialog CSS Reports

(Kontrola CSS). Znovu proveďte kontrolu stylů, ale tentokrát vyberte možnost Current

Page (Aktuální stránka).

Zobrazí se panel CSS Reports (Kontrola CSS) s dvěma chybovými záznamy. 4. Pomocí dvou modrých šipek na levé straně panelu CSS Reports (Kontrola CSS) projděte

jednotlivými chybami a opravte je, pokud si přejete. 5. Stiskněte znovu zelenou šipku pro zobrazení dialogu CSS Reports (Kontrola CSS).

V dialogovém okně přejděte na záložku Usage (Použití). Ujistěte se, že jste vybrali možnost All Pages (Všechny stránky) a jsou zaškrtnuty všechny tři zaškrtávací pole: Class

Selectors (Selektory tříd), ID Selectors (Selektory identifikátorů) a Element Selectors

(Selektory elementů). Poté stiskněte tlačítko Check.

V panelu CSS Reports (Kontrola CSS) se zobrazí seznam pravidel stylů používaných ve

webu.

Použitím stejného postupu jako v předchozích krocích můžete projít výsledky kontroly

užívání stylů a zobrazit požadovanou stránku a řádek, na kterém se použití vyskytuje.

Tento nástroj se může osvědčit jako velmi užitečný, pokud plánujete provádět ve stylech

webu nějaké změny.

6. V nabídce To o l s (Nástroje) klepněte na položku Compatibility Reports (Kontrolakompatibility) pro otevření dialog Compatibility Checker (Nástroj pro kontrolu kompatibility).

V dialogovém okně vyberte možnost All Pages (Všechny stránky) a zaškrtněte pole Run

Check based od Doctype declaration in page if available (Provést kontrolu na základě

deklarace DOCTYPE, je-li dostupná). Ve výběrových polích ponechejte výchozí Internet

Explorer 7 a CSS 2.1. Poté stiskněte tlačítko Check.


107

Prezentace informací

na webové stránce

4

V panelu, ve kterém jste dříve pracovali s nástrojem CSS Reports (Kontrola CSS), nynípřibyla další záložka. V tomto případě nebyly nalezeny žádné problémy s kompatibilitou. To

zcela jistě nebude platit pro všechny stránky, se kterými se setkáte, a proto stojí tato funkce

za zapamatování, obzvláště pokud se setkáte s problémy s kompatibilitou webu.

Zavřete všechny otevřené stránky, poté co je uložíte a zavřete ukázkový web Kap4. Pokud

nepokračujete rovnou do další kapitoly, ukončete aplikaci Expression Web 2. Přestože toto cvičení vycházelo ze šablony stylu, která neobsahovala mnoho chyb nebo problémů s kompatibilitou, je tento nástroj skvělým přírůstkem do sady nástrojů pro opravu existujících webů a může ušetřit hodiny testování metodou pokus-omyl, obzvláště v případě problémů s třídami nebo identifikátory, popř. kompatibilitou mezi prohlížeči.

Shrnutí

Ačkoli používání tabulek pro rozvržení se nadále už nepovažuje za dobrou praktiku,

mohou být tabulky stále velmi efektivním způsobem formátování dat přirozenětabulkového charakteru.

Seznamy jsou základním stavebním kamenem pro zobrazování informací na webových

stránkách.

Moderními značkami můžete nejenom označit určitý text, ale také jeho význam.

Použitím kaskádových stylů můžete získat výhody v podobě snazší údržby a současného

snížení celkového množství kódu ve stránce.

Pomocí nástrojů aplikace Expression Web 2 můžete přiřazovat pravidla stylů rodičovským i dceřiným elementům, a dokonce také nastavovat výchozí vzhled elementů jazyka

HTML.

Používání kaskádových stylů pro nastavení vzhledu elementů významně přispívá efektivitě

snahy o uniformitu webu a případné snadnosti změn vzhledu na globální úrovni. ■ ■ ■ ■ ■ ■

Shrnutí




       
Knihkupectví Knihy.ABZ.cz - online prodej | ABZ Knihy, a.s.
ABZ knihy, a.s.
 
 
 

Knihy.ABZ.cz - knihkupectví online -  © 2004-2018 - ABZ ABZ knihy, a.s. TOPlist