informaČnÍ a komunikaČnÍ technologie -adobe … · integrovaná střední škola polygrafická,...

Název projektu: Zlepšení podmínek pro využívání ICT ve výuce

Registrační číslo projektu: CZ.1.07/1.1.02/01.0135

INFORMAČNÍ A KOMUNIKAČNÍ TECHNOLOGIE

-ADOBE DREAMWEAVER-

Zpracoval: Ing. Zdeněk Železný

Integrovaná střední škola polygrafická, Brno, Šmahova 110

2

Obsah:

1. lekce Tvorba www stránek – úvod………………………..……………………….…… 4

2. lekce Členění a formátování dokumentu……………………………………………….. 6

3. lekce Úvod do Dreamweaveru CS4……………..………………………………….…... 12

4. lekce Vkládání textů a obrázků……………………………………….………………… 15

5. lekce Kaskádové styly CSS……………………………………………………..……… 18

6. lekce Úprava textu – panel vlastností……………………. …………………………… 21

7. lekce Externí šablona CSS……………………………………………….…………….. 23

8. lekce Změny pravidel a pořadí……………….………………………………………… 26

9. lekce Nastavení vlastních tří……………………………………………………………. 29

10. lekce Životopis – samostatná práce……….…………………………………………… 32

11. lekce Vytvoření šablony stylů pro tisk…………………………………………………. 36

12. lekce Import textu, tvorba nadpisů……….…………………..…………………………. 39

13. lekce Tvorba seznamů a blokových citací …………………………..………………… 41

14. lekce Tvorba tabulek…………………..………………………………………………... 44

15. lekce Popisky sady Spry………………..………………………………………………..49

16. lekce Tvorba navigace…………………..……………………………………………… 52

17. lekce Tvorba interních a externích odkazů……...……………………………………… 55

18. lekce Odkazy – samostatná práce č. 2……...……………………………………………

19. lekce .…………………………………………………………………………………….57

20. lekce Vkládání a použití obrázků…………..…………………………..……………….. 60

21. lekce Práce s obrázky ve Photoshopu……………………...…………………………… 63

22. lekce Adobe Bridže………………………………...…………………………………… 66

23. lekce Pruh nabídek Spray…………………………...………………………………….. 69

24. lekce Spry panel se záložkami………………………………. ………………………… 72

25. lekce Úprava stylu nabídek a záložky Spry…………………..………………………… 74

26. lekce Chování Spry efektů………………………………….. …………………….…… 77

27. lekce Import dat XML……………………………………… ……………………….… 80

28. lekce Tvorba Spry skládaček……………...……….…………………………………… 83

29. lekce Layout stránky………………………………...………………………………….. 85


3

30. lekce Obal stránky………………………………….……………………………………88

31. lekce Oblasti s obsahem………………………….. ………….………………………… 91

32. lekce Vkládání výplní……………………………. ………………………………….… 94

33. lekce Tvorba formulářů……………………………………….………………………… 97

34. lekce Ovládací prvky Spry………………………………………....…………………… 99

35. lekce Textové oblasti……………………………………………….…………………… 102

Testová část

Test č. 1 Úvod do Adobe DW CS4………………………………………………………… 106

Test č. 2 Úpravy pomocí kaskádových stylů……………………………………………….. 111

Test č. 3 Externí šablona CSS……………………………………………………………… 117

Test č. 4 Nastavení pravidla pro vlastní třídu……………………………..……………….. 121

Test č. 5 Úpravy CSS stylů………………………. ………………………………………. 126

Test č. 6 Úprava textu – panel vlastnosti…………………….……………………………. 129

Test č. 7 Externí šablona CSS………………………………………………. ……..……… 132

Test č. 8 Nastavení vlastních tříd………………...………………………………………….136

Test č. 9 Nastavení vlastních tříd …………………………………………………………. 140

Test č. 10 Import textu, nadpisy, seznamy………………………………………………….. 144

Test č. 11 Práce s tabulkou….………………………………………………………………. 150

Test č. 12 Navigace v rámci webu…………………………………………………………. 155

Test č. 13 Práce s obrázky………..………………………………………………………… 159

Test č. 14 Nabídky Spry……………………. ……………………………………………… 162

Test č. 15 Chování pomocí Spry efektů…... ………………………………………………. 164

Test č. 16 Spry skládačky……………………. …………………………………………….. 167

Test č. 17 Layout stránky……………………………. …………………………………….. 170

Test č. 18 Tvorba formulářů……………………. ………………………………………….. 176


4

1. lekce TVORBA WWW STRÁNEK-ÚVOD

WWW - World Wide Web Klient (browser, prohlížeč) je program, který komunikuje s uživatelem, na základě pokynů uživatele se obrací na jednotlivé servery, získává od nich data a zobrazuje je.Př. Microsoft Internet Explorer, Netscape Navigator, Mozilla, Server je program, který přijímá a obsluhuje požadavky klientů. Př. Apache, Microsoft Internet Information Server, Zope WWW - historie CERN – výzkumné centrum fyziky – 1991 byl vytvořen web pro přenos informací a značkovací jazyk HTML 1.0.Novější verze HTML 4.0 slouží jako základna pro XHTML. Konsorcium World Wide Web pokračuje ve vývoji,změny je možné sledovat na adrese:http://www.w3.org/MarkUp/Na návrhy konsorcia W3C se v současné době nahlíží jako na standardy.Prohlížeče: Mosaic, Netscape Navigator, InternetExplorer, Opera, Mozilla Chrome Standardy pro Web HTTP – HyperText Transport Protocol určuje pravidla komunikace mezi klientem a serverem. HTML – HyperText Markup Language je jazyk,kterým se zapisují WWW stránky. Interpretaci stránky zajišťuje klient. XHTML – eXtensible HyperText Markup Languageje jazyk, který vznikl přizpůsobením HTML pravidlům XML. CSS – Cascading Style Sheets (kaskádové styly)slouží k popisu výsledného vzhledu stránky. (X)HTML editory WYSIWYG (What You See Is What You Get) editory Př: Adobe Dreamweaver CS4, MSFrontPage Textové editory Př: AceHTML, Poznámkový blok z MS Windows Konvertory z jiných datových formátů Př: aplikace MS Office Validátory jsou kontrolní nástroje, provádí kontrolu aupozorňují na chybná nebo problematická místa On-line služba: http://validator.w3.org/checklink Jazyk (X)HTML je značkovací jazyk. K dokumentu se přidávají značky(tagy), které upravují vzhled dokumentu, zvýrazňujípotřebné údaje, formátují dokument, určují povahu obsahuprvku. Tyto značky umí číst a zpracovat program prohlížeč.<html xmlns="http://www.w3.org/TR/xhtml1">

5

 <head> <meta http-equiv="Content-Type" content="text/html;charset=windows-1250„ /> <title>Jméno</title> </head> <body> <h1>Ukázka</h1>Tento text se zobrazí <b>tučně</b> a tento <I>kurzívou</I>. </body> </html> Charakteristiky dokumentu •Obsah •Struktura •Styl Obsah tvoří informace, kterou má dokument sdělit. Struktura – rozdělení dokumentu na odstavce, stránky, sloupce… Styl představuje způsob, jakým je dokument zobrazen. Při nezměněné struktuře a obsahu můžeme měnit styl. Struktura WWW stránky <html> <head> <title>Jméno</title> </head> <body> <h1>Ukázka</h1>Tento text se zobrazí. </body> </html> Tagy (značky) <html> </html> určují začátek a konec dokumentu <head> </head> určují začátek a konec hlavičky hlavička se nezobrazuje, obsahuje další informace pro prohlížeč <body> </body> určuje tělo dokumentu, co je zde, to se zobrazuje WWW stránky Zásadně se odděluje obsah dokumentu – tvoří se v HTML od jeho vzhledu (formátu) – tvoří se pomocí CSS Rozdělení stránek: •Statické stránky •Dynamické stránky – obsahují programy – scripty, applety.


6

Tyto programy můžou běžet na lokálním počítači – programy v jazyce JavaScript, Visual Basic Script, nebo na serveru, kde jsou stránky uložené – programy v jazyce PHP, ASP, Pearl, Java

2. lekce ČLENĚNÍ A FORMÁTOVÁNÍ DOKUMENTU

Příkazy v části head

•< title>.. </title> titulek stránky, nutný příkaz v XHTML

•<meta>.. </meta> informace o stránce, autorovi

Členění dokumentu – prvky stránky

•body

•blokové prvky: h1…h6 – nadpisy

p – odstavec oddělený řádkou

div – obdélníkový blok

ol, ul – seznamy

img - obrázek

•řádkové prvky: span – úsek textu

em – kurzíva, zvýrazněný text

strong – tučně

a - odkaz

Blokové prvky

text můžeme členit do odstavců – bloků pomocí tzv.blokových prvků

<p> </p> odstavec - paragraph

<div></div> oddíl textu - division, který se používá pro definici stylu

<h1></h1> nadpisy (6 úrovní) - headings

<blockquote></blockquote> užívá se pro citovaný text


7

<pre></pre> předformátovaný text

<br /> zalomení řádku

<hr /> vodorovná čára

Příklad

Rozměry a vzdálenosti

Jednotky relativní

1em velikost právě používaného prvku

1ex velikost x-výšky použitého písma

1px(pixel) 1 bod obrazovky

doporučuje se vycházet z rozlišení 96dpi

Jednotky absolutní

1mm, 1cm, 1in (palec-25,4mm)

pt typografický bod (1/72 palce)

pc typografická jednotka (1pc=12pt)

Některé vlastnosti dovolují použít procenta.

</head>

<body style="background-color:gray">

<div style="color:red;font-size:18px;font-family:verdana">

Tento text je červený, má velikost 16 bodů a je napsaný fontem

Verdana.</div>

<p style="background-color:blue; color:yellow; margin:16pt">

Tento text je napsaný žlutě na modrém pozadí s 16 bodovým okrajem.</p>

<div>

Tento text je napsaný implicitním stylem. Protože nemá nastavenou barvu

pozadí, má barvu prvku "body".</div>


8

</body >

</html>

Tento text je červený, má velikost 16 bodů a je napsaný fontem Verdana.

Tento text je napsaný žlutě na modrém pozadí s 16 bodovým okrajem.

Tento text je napsaný implicitním stylem. Protože nemá nastavenou barvu pozadí, má barvu

prvku "body".

Formátování bloků

obsah

okraj-margin

rámeček-border

padding-odstup od rámečku

Příklad:

<p style="margin:100px; border:1px solid black;padding:50px; background-

color:#338601">

Blokové vlastnosti

Rámeček – border: síla, typ čáry, barva

<p style="border:1px solid red">

<p style="border-bottom-color:#367851">

Výška – height a šířka – width obsahu bloku


9

<p style="width:50%;height:300px">

Odstup od rámečku – padding

<p style="padding:10px 10% 0 2mm">

<p style="padding:100px">

Okraje – margin

<p style="margin:100px">

Styl pozadí – background nebo background-color

<p style="background-color:#338601">

<p style="background:url(obrazek.jpg)">

Více o stylu pozadí

Pozadí má stránka, odstavec, tabulka,

zobrazuje se pod celou plochou objektu.

•background-color nastavuje barvu pozadí

•background-image nastavuje obrázek na pozadí

•background-repeat určuje, jak se obrázek opakuje

•background-position definuje pozici obrázku na pozadí

Úprava textu

Stylové prvky typu inline:

<big></big> zobrazí text v písmu větším než je základní

<b></b> zobrazí text tučně

<i></i> zobrazí text v kurzívě

<u></u> zobrazí text podtržený

<strike></strike> zobrazí text přeškrtnutý

<sub></sub> zobrazí text jako dolní index

<sup></sup> zobrazí text jako horní index


10

Formátování textu: text-align

•zarovnání textu

•povolené hodnoty:

–left (vlevo)

–right (vpravo)

–center (na střed)

–justify (do bloku)

•Příklad:

h1{text-size: xx-large; text-align: center}

Seznamy

•s odrážkami

•číslované

<ol> číslovaný seznam

<li>Základy</li>

<li>Text a písmo</li>

</ol><ul> seznam s odrážkami

<li>Základy</li>

<li>Text a písmo</li>

</ul>


11

Vkládání obrázku a videa

<img src="obrazek.jpg" alt="" width="300"height="377"/>

atribut src udává adresu obrázku

atribut alt zobrazí popisný text

atributy width a height udávají velikost obrázku

<img dynsrc="video.avi" loop="infinite" start="mouseover"/>

atribut dynsrc udává adresu videa

atribut loop udává počet opakování

atribut start udává událost, která video spustí

Styly stránky

•Dokument XHTML by měl obsahovat pouze logicky rozčleněné informace (nadpisy,odstavce,

bloky,...)•Neměl by obsahovat žádné informace týkající se vzhledu!!! Ani rozvržení stránky

pomocí tabulek!•Vzhled dokumentu by se měl ovlivňovat jen pomocí tzv. STYLŮ, které by měly

být uloženy

JEN V SAMOSTATNÉM SOUBORU!

Kaskádové definice stylů

- deklarace pravidel pro zobrazení

•obsah a struktura stránky– soubor .html

•vzhled stránky – soubor .css

•výhody

–paměťově úsporné – kratší přístup

–jeden obsah – různé zobrazení

–stejný vzhled pro několik stránek, vytváří designer

•nevýhody


12

–různá podpora u prohlížečů

–vzhled závisí do jisté míry od prohlížeče

3. lekce

ÚVOD DO ADOBE DREAMWEAVERU CS4

POUŽITÍ UVÍTACÍ OBRAZOVKY

Otevřeme si program Adobe Dreamweaver CS4,→Start→všechny programy→Adobe

Design Premium CS4→ Adobe Dreamweaver CS4, můžeme si pro usnadnění jej vložit do

nabídky Start.

Uvítací obrazovka umožňuje rychlý přístup k naposledy otevřeným stránkám, jednoduchou

tvorbu různých typů webových stránek a přímý přístup k tématům nápovědy. Uvítací obrazovka

se zobrazuje ve chvíli, kdy spustíme program DW, nebo v okamžiku, kdy není otevřen žádný

dokument.


13

Uvítací obrazovka se objeví při otevření programu DW.

- ve sloupci Vytvořit nový klepneme na HTML, tím se nám otevře nová prázdná stránka.

- pokud jsme na této stránce neudělali změny, stránku zavřeme →Soubor → Zavřít

pokud nebudeme chtít uvítací obrazovku již nadále používat, můžeme její otevírání zrušit

zatržením volby „Příště nezobrazovat“ v levém spodním rohu okna. Opětovné zobrazování

uvítací obrazovky můžeme vyvolat ve Volbách v kategorii Všeobecné

ROZVRŽENÍ STRÁNKY (LAYOUT)

Adobe Dreamweaver CS4 nabízí k použití 32 různých rozvržení, profesionálně vytvořených

pomocí stylů CSS, což nám usnadňuje práci, protože byly testovány ve všech hlavních

prohlížečích a vyhovují webovým standardům. Při tvorbě většího počtu webových stránek pro

jednu osobu či událost, by měly mít všechny stránky stejný layout, aby v nich dokázal návštěvník

dobře a rychle orientovat.

- zvolíme ze Souboru→ Nový, v dialogovém okně Nový dokument v prvním sloupci vybereme

„Prázdná stránka, ve sloupci Typ stránky vybereme HTML, ten se běžně používá při tvorbě

webových stránek.

Ve třetím sloupci máme na výběr z různých typů layoutů 1 až 3 sloupcové, s pevnou nebo

s proměnnou šířkou založenou na procentech nebo jednotce em, s nebo bez záhlaví či zápatí

- ve sloupci „Rozvržení“ zvolíme 2 sloupce pevné, postranní sloupec vlevo, záhlaví, zápatí.

V posledním sloupci dole volíme „Typ dokumentu“ XHTML 1.0 Transitional, což je přechodový

jazyk mezi HTML a novějším XHTML,


14

Nová webová stránka se zobrazí jako dokument s výplňovým textem, který tam pouze pro lepší

orientaci na stránce a představivost vložili tvůrci layoutu.(rozvržení stránky). Do tohoto okna

budeme vkládat svůj vlastní obsah (text i obrázky) a upravovat vzhled stránky


15

Nově vytvořenou stánku je vhodné ihned uložit→Soubor→Uložit, zobrazí se dialog uložit jako,

najdeme složku C→Dreamweaver kurz→soubor→lekce→lekce 01.

do pole Název napíšeme Umbria-příjmení.html a→ uložit.

ZOBRAZENÍ DOKUMENTU

DW nám nabízí 4 základní možnosti zobrazení:

- Kód- zobrazuje se pouze zdrojový kód stránky.

- Návrh- zobrazuje se pouze webová stránka tak, jak budou vypadat. vytvářené stránky.

- Rozdělit- kombinuje jak zdrojový kód, tak i návrh, tvůrce www stránky tak má možnost

kontroly.

- Živé zobrazení- vykresluje stránku v prohlížeči Dreamweaveru.

První tři zobrazení jsou úzce propojená, jakákoliv provedená změna se zobrazí ve všech

pohledech.

4. lekce

VKLÁDÁNÍ TEXTU A OBRÁZKŮ

ZMĚNA TITULKU STRÁNKY

Titulek webové stránky se zobrazuje v titulkovém panelu okna prohlížeče a je klíčovým prvkem

používaným vyhledavači k indexování webových stránek, proto je nutné, abychom změnili

výchozí název dokumentu „Bez názvu“ (untitled).

V nástrojové liště dokumentu v poli „Název“ vyberte Dokument bez názvu a napište Prohlídka

měst v Umbrii →enter

ZMĚNA NADPISŮ


16

Výplňové texty a nadpisy nám pomáhají vizuálně vyplnit layout tak, aby vypadal podobně jako

s konečným obsahem umístěným do stránky, můžeme je jednoduše změnit.

- Vyberte výplňový text Záhlaví (poklepáním myší), poté napište text „Prohlédněte si s námi

Umbrii“.

Dvouklikem vyznačíme slovo, trojklikem celý odstavec nebo nadpis, tažením myší při stisknutém

levém tlačítku libovolný text.

Stejným způsobem přepíšeme nadpis v pravém hlavním odstavci „Hlavní obsah“na text „ Vy se

bavte. My obstaráme vše ostatní.“všimneme si, že ve zdrojovém kódu jsme pouze nahradili text,

ale formátovací značka,párový tag <h1>,která označuje nadpis, zůstala u obou nadpisů

zachována.

VKLÁDÁNÍ TEXTU

DW poskytuje možnost vkládání textu kopírovaného z jiných zdrojů (MS Office, OpenOffice,

poznámkový blok, atd) a ponechává tolik z původního formátování, kolik požadujeme. V praxi si

totiž zákazník dodává svoje texty po obsahové a jazykové korektuře a tvůrce webových stránek je

pouze vkládá do dohodnutého layoutu.

- vybereme výplňový text v pravém sloupci bez nadpisu až po zápatí, ale bez něj.

- klávesou Delete jej vymažeme.

- Z nabídkového řádku otevřeme→Soubor→otevřít→místní disk C→DW kurz→obsah→

→lekce→lekce 01→dovolená.rtf. C (celý text vybereme a zkopírujeme do schránky (CTRL+C).

- V DW umístíme kurzor pod nadpis v pravém sloupci a vložíme sem zkopírovaný text

(CTRL+V). Celý text se okamžitě zformátuje jako odstavce se značkou <p>( jedná se o párový

tag).

- Ukazatelem myši vybereme výplňový text Zápatí a přepíšeme jej „Prohlídka měst v Umbrii“

- zalomíme řádek →Shift+Enter. Poté napíšeme text Kontaktujte nás Ve zdrojovém kódu byl

tento povel zapsán jako nepárový tag <br>.


17

VKLÁDÁNÍ OBRÁZKŮ

Vkládání obrázků je velmi přímočaré, podobně jako text, které také dodává zadavatel

stránky.Jakmile umístíme obrázek do stránky, můžeme jeho vlastnosti upravovat buď pomocí

panelů Styly CSS nebo Vlastnosti.

- vybereme veškerý obsah levého sloupce (sidecar 1) včetně nadpisu a vymažeme jej (Delete)

- V selektoru značek ( lišta pod dokumentovým oknem)vybereme značku <h3> a vymažeme ji.

Tvůrce layoutu do tohoto sloupce totiž vložil nadpis, a pokud

ho nebudeme potřebovat, musíme odstranit i značku pro nadpis.

- Z nabídky Vložit vybereme →Obraz a dialogovém okně Vyberte zdroj obrazu označíme

souborový systém, v oblasti hledání vybereme →místní disk C→DW kurz →obsah→lekce

→obrázky→ Zahrada.jpg →OK .V dialogovém okně Atributy tagu obrazu pro usnadnění

přístupu do kolonky Alternativní text napíšeme Zahrada→OK. Tento text se bude zobrazovat

v případě, že se obrázek nezobrazí, např. některá mobilní zařízení, a pomůže pochopit obsah

stránky.

- ukazatel myši vložíme na začátek odstavce pravého sloupce (hlavní obsah, mainContent), před

větu Přijeďte si… a stejným způsobem jako v předešlém případě vložíme obrázek „Italské horské


18

město“ se stejným alternativním textem.

- Z nabídkového řádku →Okno otevřeme panel→Vlastnosti.

Z roletky Třída vybereme fltrt nebo fltlft (float right nebo left, zarovnej vpravo,

vlevo).Ponecháme obrázek vpravo a text jej bude obtékat vlevo.→Uložit.

Stránka nyní obsahuje jak text, tak i obrázky vložené do layoutu CSS, stránka vypadá dobře

a se bude zobrazovat ve všech prohlížečích.

5. lekce KASKÁDOVÉ STYLY CSS

Moderní webové stránky používají ke stylování a tvorbě layoutů kaskádové styly (CSS).

Webová stránka je složená z HTML (zdrojový kód),CSS a JavaScriptu, pomocí kterých ji

budujeme.

HTML je obsah- materiál vkládáme na vytvářenou webovou stránku v okně Návrh.

CSS zajišťuje vzhled a rozvržení stránky, tj. kam se jednotlivé elementy umístí, použití barev

textu, tabulek, okrajů, rámečků, pozadí,…

JavaScript přidává funkci interaktivity.

ZMĚNA BARVY POZADÍ

K úpravě vlastností pomocí CSS můžeme použít jakékoliv značky HTML, např. <body> (tělo),

<p> (odstavec), <h1> (nadpis), atd.

- otevřeme panel CSS styly →Okno →CSS styly→Vše.rozbalíme<styly> pomocí tlačítky + ,

abychom nějaké styly viděli, musíme mít otevřený dokument v dokumentovém okně.

Nyní najdeme pravidla stylů v hlavičce dokumentu, pomocí ostrých závorek <styly> DW

ukazuje, že jde o vnitřní(interní) pravidla.

- vybereme selektor body klepneme na ikonu upravit styl (ikona tužky na panelu vpravo dole).

V dialogovém okně Definice pravidla CSS pro body vybereme kategorii Pozadí a po rozbalení


19

tlačítka s paletou barev vybereme pomocí kapátka bílou barvu. DW automaticky vloží do

zdrojového kódu hexadecimální hodnotu bílé barvy #FFF do pole Background color (barva

pozadí) → OK.

Stisknutím F4 skryjeme všechny panely a získáme náhled přes celou obrazovku, pozadí

stránky se změnilo ze šedé na bílou barvu, barvy ostatních pozadí se nezměnily.Pomocí tlačítka

F4 můžeme opět obnovit zobrazení panelů.

Podobně jako značce <body> můžeme přidělit vlastnosti i jiným elementům.Vlastnosti můžeme

měnit i tak, že v selektoru značek vybereme požadovaný element, např.< div#sidebar 1> (divize),

poté pomocí ikony →Upravit styl vyvoláme dialogové okno pro definování pravidla a provedeme

požadovanou změnu.

stránku uložíme →Soubor→Uložit.

VKLÁDÁNÍ GRAFICKÉHO POZADÍ.

Zatímco obrázky do popředí se vkládají přímo do stránkypomocí nabídky Vložit, obrázky na

pozadí se umísťují pomocí CSS stylů.


20

- Ukazatel myši vložíme do textu v záhlaví „ Prohlédněte si s … “.

- V selektoru značek vybereme element <div#header> (záhlaví), tuto část označujeme element

div s identifikátorem #header . V dokumentovém okně se kolem vybraného elementu zobrazí

modrá čára.

- otevřeme panel styly CSS → Okno →Styly CSS→Současný , tím se přepneme do režimu

zobrazujícího vlastnosti současně vybraného elementu (záhlaví).

- Ve spodní části okna vybereme ikonu → Upravit styl a v dialogovém okně „ Definice pravidla

pro .twoColFixLtHdr #header h“- vybereme kategorii Pozadí → Procházet vedle Background-

image.

- V zobrazeném dialogu najdeme v Oblasti hledání →místní disk C→DW kurz →soubory →lekce

→obrázky →záhlaví-oblaka.jpg →OK.

- Z roletky Background- repeat (opakování) vybereme no repeat→OK→Soubor →Uložit .

PRÁCE V ZOBRAZENÍ KÓD, NÁVRH A ROZDĚLENÍ

V nástrojové liště můžeme přepínat mez zobrazením Kód- zobrazuje se pouze zdrojový kód

stránky, Návrh, zobrazuje se pouze grafický vzhled stránky a Rozdělení, ve kterém vidíme jak

zdrojový kód, tak i grafický návrh. Pokud vybereme lib.text v jednom zobrazení, je vybrán i ve

druhém, toho můžeme využívat při kontrole zapisování tagů, který provádí automaticky DW.


21

6. lekce

ÚPRAVA TEXTU- PANEL VLASTNOSTI

ÚPRAVA TEXTŮ, PÍSMA A BAREV

Kaskádové styly nám umožňují kromě změny vzhledu elementu také změnu vzhledu pouze pro

značku <tag> na určitém místě ve stránce.

- Umístíme kurzor myši do textu nadpisu v záhlaví.

- V selektoru značek vybereme tag <h1>

- Vpanelu Styly CSS → současný →Upravit styl.

V dialogovém okně Definice pravidla pro … vybereme Kategorii Typ a v roletce Font-family

(písmo) vybereme skupinu Georgia, Times … Výběr fontu se provádí po skupinách, protože ne

na všech počítačích musí být nainstalované stejné fonty písma.

- na ikoně Color (barva) zvolíme kapátkem bílou barvu.→ OK →Soubor →Uložit .

ZMĚNA VELIKOSTI TEXTU

Kromě změny typu písma a barvy můžeme také změnit velikost textu.

- Ukazatel myši umístíme do odstavce textu hlavního obsahu (mainContent).

- V selektoru značek vybereme <div#mainContent>

- V panelu Styly CSS→Vše v části Všechna pravidla vybereme selektor


22

.twoColFixLtHdr#mainContent,klepneme na ikonu →Upravit styl.

V dialogovém okně Definice pravidla CSS pro .twoColFixLtHdr#mainContent vybereme

Kategorii Typ, velikost textu je nastavena na 100%.V poli Font-size napíšeme 90 a jako jednotku

zvolíme % ze seznamu voleb, →OK→Soubor→Uložit.

Toto je jeden ze způsobů, jak můžeme změnit velikost textu.

POUŽÍVÁNÍ PANELU VLASTNOSTI

Panel otevřeme z nabídkového řádku →Okno→ Vlastnosti , nachází se v dolní části, pod

selektorem značek. Volby v panelu se mění podle aktuálního výběru, pokud vybereme obrázek je

v panelu možno upravovat šířku či výšku obrázku a odkazy na nástroje, pomocí nichž jej můžeme

upravovat. Pokud je vybrán text, je panel rozdělen do dvou částí

HTML - v něm můžeme upravovat vlastnosti pomocí zdrojového kódu.

CSS - v nich můžeme upravovat vlastnosti pomocí kaskádových stylů.

- Otevřeme panel Vlastnosti z nabídkového řádku →Okno→ Vlastnosti .

- V okně dokumentu v hlavním obsahu označte větu Po dva týdnysi budete… .

- vybereme tlačítko HTML, klepneme na tlačítko I , tím změníme text na zvýrazněný, některé

prohlížeče jej zobrazují kurzívou.Ve zdrojovém kódu i v selektoru značek je zapsán tag <em>

- V panelu vlastnosti přepneme na tlačítko CSS,

- Z nabídky Odkazované vybereme <Nové pravidlo CSS> a Upravit pravidlo

V otevřeném dialogovém okně vybereme Typ selektoru z roletky Složený prvek … a pomocí

tlačítka méně specifické jako Název selektoru vybereme #mainContent p em → OK .


23

V okně Definice pravidla… vybereme kategorii Typ a po otevření palety barev vybereme modrou

→OK→ Uložit .

Pravidla stylů nyní obsahují nové pravidlo, které můžeme použít na jakýkoliv další text uvnitř

elementu div#mainContent , když vybraný text zvýrazníme kurzivou, automaticky na něj bude

použito obarvení dle definovaného pravidla.

Tímto jsme vytvořili svou první webovou stránku.Na konci práce s novou stránkou si ji vždy

prohlídneme v prohlížeči, v praxi máme nainstalováno více prohlížečů, ve všech

nejpoužívanějších bychom měli zkontrolovat, jak se stránka zobrazuje.

- → Soubor →náhled v prohlížeči.- (Mozilla, Explorer, Google Chrome, Opera, …).

7. lekce

EXTERNÍ ŠABLONA CSS

PRÁCE S KASKÁDOVÝMI STYLY

Většina stylů CSS je uložena v externí šabloně stylů, potom mohou být všechny vytvářené

stránky propojeny s touto šablonou. Tímto způsobem je umožněna jednoduchá změna stylů na

všech webových stránkách, propojených s externí šablonou. Navíc to umožňuje vypracovat více

externích šablon tím je možno si vybírat různý vzhled pro stejný obsah. Tento způsob práce vede

ke specializaci grafiků, někteří se věnují pouze vytváření těchto externích šablon a tvůrci www


24

stránek si mohou kupovat.

PROPOJENÍ EXTERNÍ ŠABLONY STYLŮ CSS V ADOBE DW CS4

- v panelu soubory otevřete DW kurz→ lekce 02→ onasstart.html (na stránce je vložen základní

obsah, tj. obrázky, odstavce textu, nadpisy, ale chybí layout a styly.

- uložte stránku jako onas-příjmení. html do DW kurz→ lekce 02

- stránku onasstart.html zavřete beze změny

- z nabídkového řádku otevřete Okno→styly CSS→vše→připojit seznam stylů (ikona řetězu)

- v dialogovém okně „Připojit externí šablonu stylů“→ Procházet→vyberte DW kurz→ lekce

02→mojestyly.css v okně Média vyberte obrazovku (screen). Moderní CSS styly umožňují

použití stylů v závislosti na typu média.

V přepínači Přidat jako vyberte Odkaz →OK

Vytvářená stránka se změnila, byl použit layout z 1.lekce,stránka je rozdělena na 2 pevné

odstavce, obrázek pozadí v záhlaví je použit i v zápatí

- Soubor→Uložit vše.

Tímto způsobem jsme propojili tuto stránku s mojestyly.css , ve zdrojovém kódu v hlavičce

stránky na řádku 7: <link href="mojestyly.css" rel="stylesheet" type="text/css" media="screen"

/>.


25

VYTVOŘENÍ NOVÉHO PRAVIDLA CSS

Pravidlo se skládá ze 2 částí:

Selektor např. h1

Deklarace vlastností např. color: red; fontsize:36 px;

v DW se vytváří styly v rozhraní s roletkami a volbami, HTML kód za nás zapisuje DW, pravidla

vytváříme pro 2 typy selektorů:

1. Selektor následníka

2. Vlastní selektor (třída)

1. DEFINICE STYLŮ PRO SELEKTOR NÁSLEDNÍKA.

Takto definovaná pravidla pomocí speciálních značek se automaticky ihned použijí, kdykoliv

takovou značku (tag) na stránce použijeme.

- v nabídkovém řádku otevřeme →Okno→Styly CSS→vše, rozbalíme + mojestyly.css(screen)

kurzor vložíme do textu „Seznamte se s našimi zaměstnanci“ a v selektoru Značek (tagů)

vybereme <h1>.

DW vloží do pole Název selektoru nejdříve takový selektor, který se váže k aktuální pozici

kurzoru v textu.

- vybereme →nové pravidlo CSS (ikona + v pravé dolní části panelu styly CSS)

- V dialogové okně Nové pravidlo CSS klikneme 2x na méně specifické, tím se vytvoří nový

selektor #mainContent h1, to bude selektor následníka →OK

- symbol # před názvem selektoru znamená, že jde o identifikátor a definované pravidlo ovlivní

pouze ty značky <h1> ,které jsou vnořeny (jsou následníky) identifikátoru #mainContent


26

- v dialogovém okně „Definice pravidla CSS pro #mainContent h1“ vybereme v Kategorii Typ,

v roletce Font-family zvolíme Georgia, Times New Roman,… a jako Color (barva) označíme

štětečkem modrou barvu hexadecimální č.#06F →OK→soubor →Uložit vše.

Tímto způsobem uložíme nejen změny ve zdrojovém kódu webové stránky, ale i změny v CSS

stylech v souboru mojestyly.css.

8. lekce

ZMĚNY PRAVIDEL A POŘADÍ

Všechna námi nově vytvořená nebo přejatá pravidla, která jsou umístěna v externí šabloně

mojestylycss si můžeme prohlédnout v panelu →Styly CSS→Vše rozbalit <styly>→+ Zde se také

objeví i nově vytvořené pravidla v panelu Vlastnosti, podle jména, které jsme jim

přidělili(.jméno,..).

- Abychom uviděli všechny vlastnosti vybraného pravidla vybereme v panelu Vlastnosti

CSS→současný při označení jména v dokumentovém okně se ve Stylech CSS se objeví vlastnosti

pravidlapro .jméno. Abychom je všechny uviděli, musíme zvětšit okno Panelu Styly CSS, za

spodní okraj je můžeme roztáhnout. Pokud potřebujeme změnit toto pravidlo, můžeme to provést

v panelu →Styly CSS→Upravit styl.Tím vyvoláme dokumentové okno „Definice pravidla pro

…“ a vněm můžeme provést požadovanou změnu.Stejného efektu dosáhneme dvojklikem na


27

příslušnou vlastnost.

Tímto způsobem jsme v předchozí práci změnili typ písma a barvu textu pro značku <h1> uvnitř

elementu s identifikátorem # mainContent. Jakmile do tohoto elementu na jiné místo vložíme

novou značku <h1>, bude na text v této značce použito stejné pravidlo, .Adobe Dreamweaver

CS4 rozděluje vlastnosti kaskádových stylů do 8 kategorií:Typ, Pozadí, Blok, Rámeček, Okraj,

Seznam, Umísťování, Rozšíření.

Nyní vytvoříme nové pravidlo pro text pod obrázkem New Yorku v levém sloupci, v

elementu #sidebar1 p.

- umístíme kurzor do textu „Výhled z našich kanceláří v New Yorku“, v selektoru značek

vybereme odstavec <p> v panelu →Styly CSS→Nové pravidlo → v dialogovém okně „Nové

pravidlo“vybereme Složený prvek (na základě výběru) a v položce Název selektoru ubereme

specifikaci až na #sidebar1 p→OK

V dialogovém okně „ Definice pravidla CSS pro # sidebar1 p v mojestyly“ vybereme

Kategorii Typ,v poli Font-size napíšeme 80 a v roletce vybereme jednotky % a v roletce

Font.style vybereme Italic (kurzíva)

!! Jiný způsob změny font-style je z panelu Vlastnosti→přepinač I (kurzíva), používá se pro

vložení významového důrazu, DW vloží párovou značku <em> text </em>!! Podobně je to

s přepínačem „B“ (tučně) pro HTML kód tag <strong>tučně </strong>, v pravidlech CSS


28

můžeme vytvořit novou třídu, které přidělíme vlastnost ve Font- weight →bold a HTML kódu se

to projeví tagem <span class="název třídy">.

- v Kategorii Rámeček zrušíme v poli Margin (vnější okraj) stejné pro všechny a v poli Top

(nahoře) napíšeme 0 →OK→soubor → uložit vše

ZMĚNA POŘADÍ VLOŽENÝCH PRAVIDEL

Pro snadnější hledání jednotlivých pravidel v šabloně stylů je výhodné je po vytvoření přesunout

tak, jak to odpovídá jejich důležitost, nebo sdružovat více podobných pravidel, máme však

možnost je přesouvat do jiného umístění.

- otevřeme panel Styly CSS→Vše→rozbalit všechna pravidla + a myší přetáhneme # mainContenz

h1 do pozice pod .twoColFixLtHdr #mainContent

- myší přetáhneme #sidebar1 p do pozice pod .twoColFixLtHdr #sidebar1

- →Soubor→uložit vše ,tím uložíme provedené změny jak souboru HTML, tak i v souboru CSS.


29

9. lekce NASTAVENÍ VLASTNÍCH TŘÍD

2. NASTAVENÍ VLASTNÍCH TŘÍD

Na rozdíl od selektoru následníka, který se pro zadaný tag (značku) a identifikátor používá

automaticky, se pravidlo nastavené pro třídu a jméno selektoru používá pouze tam, kde jej

potřebujeme.

- v panelu Styly CSS →Nové pravidlo CSS

- v dialogovém okně „Nové pravidlo CSS“ vybereme Typ selektoru v roletce Třída, v poli Název

selektoru napíšeme.jméno.V okně Definice pravidla nastavíme mojestyly.cz→OK

- v dialogovém okně „Definice pravidla CSS pro .jméno v mojestyly“ zvolíme Kategorii Typ,

v roletce Font-variant vybereme small-caps.(kapitálky)→OK→soubor→uložit vše

POUŽITÍ STYLŮ

Jednou z možností, jak použít styly na značce je využít panel Vlastnosti

- v pravém odstavci vybereme tažením myší slovo Elaine, tím se zvýrazní jméno a oblast nad

slovem


30

- otevřeme z nabídkového řádku →Okno →Vlastnosti, v levé části zkontrolujeme, zda máme

stisknuté tlačítko Css.

Seznam odkazované v panelu Vlastnosti zobrazuje všechny třídy CSS, které jsou dostupné

v dokumentu,vyberte→.jméno

Vybraný text se formátuje kapitálkami a indikátor v selektoru značek obsahuje název

třídy: <span.jméno>.Třída se přidala do textu pomocí tagu (značky) <span>

Pro dokončení stránky zopakujte postup s výběrem jména každé osoby na vytvářené stránce a

použijte opět třídu .jméno ., prohlédneme si stránku v živém zobrazení nebo v prohlížeči,potom

zvolíme →soubor→uložit.

POUŽITÍ VLASTNÍCH TŘÍD NA ČÁSTI STRÁNKY

V DW můžeme vkládat části stránky nebo značky <div> do dokumentu, abychom vytvořili

oblasti layoutu nebo organizovali části stránky, značce ,<div> můžeme přiřadit identifikátor nebo

třídu.

- myší vybereme fotografii ELAINE a oba odstavce textu.

- z nabídkového řádku →vložit→vybereme→rozvržení→Vložit tag Div

- V otevřeném dialogovém okně v roletce Vložit je zvoleno Uzavřít u výběru , do pole třída

napíšeme .profil stiskneme tlačítko →Nové pravidlo

V dialogovém okně Nové pravidlo CSS bude vybrán Typ selektoru Třída a do pole selektoru

napíšeme .profil .V roletce Definice pravidla vybereme mojestyly.css →OK

V dialogovém okně Definice pravidla CSS pro profil v mojestyly.css vybereme Kategorii

Rámeček a v roletce.Clear (zrušení obtékání) zvolíme right (doprava), ze seznamu kategorie


31

vybereme Umisťování a roletce Overflow (přetečení) vybereme hodnotu auto (automaticky)

→OK.

DW nás vrátí do dialogu Vložit tag Div →OK

V okně dokumentu se nyní zobrazuje tečkovaná čára obklopující část stránky, která

obsahuje vybraný obrázek a text. Čára ukazuje na přítomnost značky <div>.Dokud neprovedeme

na stránce další změny, jiné změny na stránce neuvidíme.

Další postup přidávání podobných značek <div> s přiřazenou třídou .profil se bude u ostatních

jedinců na stránce trochu lišit, protože třída .profil nyní existuje v souboru mojestyly.css.

- v dokumentu vybereme obrázek Lindy a dva odstavce textu, které ji popisují.

- v panelu Vložit vybereme v kategorii Rozvržení položku Vložit tag Div, tím se nám znovu

otevře dialogové okno Vložit tag Div, v roletce vložit vybereme volbu Uzavřít u výběru ,v roletce

třída vybereme .profil. Třída se potom použije na novou značku <div> →OK.


32

Část stránky věnovaná Lindě se umístí do své značky <div> , kolem níž se objeví v okně

dokumentu tečkovaná čára.

-zopakujeme kroky i pro ostatní osoby, Jason, Lin, Charlie →OK

Tímto způsobem jsme vytvořili oddělené části layoutu, které obsahují jednotlivé profily, a

přidělili jsme jim třídu CSS, která nám umožní jim dále s tímto profilem pracovat.

PLOVOUCÍ UMÍSTĚNÍ OBRÁZKŮ

Nyní máme vytvořenou třídu nazvanou .profil , která nastavuje vlastnosti clear a owerflow

elementům div, které jsme přidali do stránky.

- vybereme myší ELAINE, v selektoru značek musíme mít vybráno <img> , v panelu vlastnosti

zvolíme ve třídě . fltrt, tím se obrázek zobrazí vpravo a text se zalomí vlevo, u dalších obrázků

budeme střídavě volit třídu .fltlft a fltrt, tím budou obrázky střídavě zarovnány vpravo a

vlevo.nakonec → Soubor→ Uložit vše.

10. lekce

ŽIVOTOPIS-SAMOSTATNÁ PRÁCE

DOMÁCÍ ÚKOL-ZADÁNÍ:

Připravte si jako domácí úkol do samostatného souboru svoje dvě portrétní fotografie (velikost

max 60 kB) a ve vámi používaném textovém souboru dva odstavce, první s názvem „osobní

životopis a druhý bude mít název profesní životopis, oba by měli mít délku maximálně 400 znaků

včetně mezer.Všechny soubory uložte do složky s názvem „ Práce č.1-životopis“. Tuto složku si

uložte na vlastní USB-flash disk nebo si ji můžete poslat emailem.


33

POPIS ÚKOLU:

Vaším úkolem bude vytvořit pomocí programu Adobe Dreamweaver CS4 jednu kompletní www-

stránku s názvem“Vaše příjmení-životopis“, do zadaného rozvržení vložíte vlastní fotografie,

nadpisy a odstavce zadaného nebo vámi předem připraveného textu, který máte uložený na USB-

flash disku. Potom podle jednotlivých bodů zadání budete postupně vkládat nebo upravovat

jednotlivá pravidla kaskádových stylů tak, aby vámi vytvořená www-stránka se svým stylem co

nejvíce podobala vzorové stránce.

VLASTNÍ ZADÁNÍ:

-Vytvořte nový dokument, typ stránky: prázdná stránku, HTML, jako rozvržení (layout) zvolte:


34

dva pevné sloupce, všechny šířky v obrazových bodech, postraní sloupec vlevo, záhlaví a zápatí.

Jako typ dokumentu zvolte:XHTML 1.0 Transitional, rozvržení CSS: přidat do záhlaví.

- Nahraďte nadpis v záhlaví vaším jménem a příjmením

-.Upravte pravidlo CSS stylů pro „.twoColFixLtHdr #header h1“:

Typ: font-family: Georgia, Times New Roman, Times, serif

font-size: 36 px

color: #900

Pozadí: background-image: C/Dreamweaver kurz/lekce/obrázky/záhlaví-oblaka.jpg.

- Přepište text nadpisu <h1> v #mainContent h1 na „Osobní životopis“ a změňte na nadpis <h2>.

- Vložte nové pravidlo do CSS stylů pro #mainContant h2:

Font-family Verdana, Geneva, sains-serif…

Textdekoration Underline

Color #009

- Přžepište text druhého nadpisu <h2> v #mainContent h2na „Profesní životopis“

- Vložte do #sidebar 1 předem připravený vlastní obrázek, jeho velikost by neměla přesahovat 60

kB.

- pod obrázek vložte do odstavce <p> rok pořízení fotografie.

- upravte pravidlo pro #sidebar 1p:

Font-style italic

Font-variant small-caps


35

Color #039

- Přepište text v zápatí stránky na : V Brně 10.3.2010 a řádek zalomte pomocí příkazu <br> před

datem. Zápatí můžete rozšířit pomocí zalomení řádku podle velikosti fotografie.

- Upravte pravidlo CSS pro .twoColFixLtHdr # footer p:

Typ: font-family Georgia,“Times New Roman“, Times, serif

font-style italic

font-size 36 px

font-weight bolder

color # FC0

Pozadí: background-image obrázek č.2

Background-repeat repeat

Background-attachment sroll

Background-position (x) left

Background- position(y) top

- Upravte pravidlo CSS pro body:

Pozadí: background-color #F9


36

11. lekce

VYTVOŘENÍ ŠABLONY STYLŮ PRO TISK


Soubory CSS mohou také poskytovat styly pro jiná média, např. pro tisk, vytvořené

mojestyly.css byly navrženy pro zobrazení stránky na obrazovce PC. Tiskové styly často vylaďují

barevnou kombinaci, aby se stránka lépe vytiskla, skrývají nepotřebné části stránky, vylaďují

velikosti či layout, aby více odpovídal použitému médiu, tedy papíru.

Jedné stránce můžeme přiřadit více šablon, jakmile se stránka vykreslí pro tisk, bude tiskové

zařízení hledat tiskovou šablonu stylů, a pravidla v ní se vezmou v potaz. Pokud ji nenajde,

tiskárna rozliší mezi pravidly pro obrazovku a pravidly pro všechny typy médií.

Výchozím zobrazovacím médiem v DW je obrazovka, umožňuje však vykreslení i v jiných

stylech.

- otevřeme z nabídky → Zobrazení →Panely nástrojů→Styl vykreslení, panel se objeví vlevo

nad dokumentovým oknem.

PŘEVEDENÍ STÁVAJÍCÍ ŠABLONY STYLŮ NA TISKOVOU

Nejvýhodnější je nevytvářet zcela novou tiskovou šablonu, ale vytvořit ji převedením již

vytvořené šablony (mojestyly.css), přejmenováním a úpravou pravidel.

- z nabídky otevřeme → Soubor → Otevřít →DW kurz →Lekce → Lekce 02 → mojestyly.css .

- →soubor →Uložit jako napíšeme příjmení-tisk.css →Uložit.


37

- Otevřeme panel → Styly CSS → Připojit seznam stylů. Z nabídky Procházet vybereme

→příjmení-tisk.css →,.přidat jako odkaz a v roletce média vybereme tisk → OK .

Tím se připojí nová položka – příjmení-tisk.css k šabloně mojestyly.css, a my můžeme

některá pravidla upravovat nebo zcela odstranit.

- zavřeme soubor příjmení-tisk.css a dokument příjmení-onas.html→ soubor →Uložit.

SKRYTÍ NEPOTŘEBNÝCH ČÁSTÍ STRÁNKY

- otevřeme v panelu nástrojů →Styl vykreslení → Vykreslit zobrazení při tisku

- ukazatel myši vložíme do textu zápatí, v panelu Styly CSS → zvolte Vše a rozbalíme + ,

vybereme selektor twoColFixLtHdr #footer →Upravit styl .

V dialogovém okně „Definice pravidla“ zvolíme Blok, z roletky Display → none (žádné) → OK.

Tím se zápatí stránky skryje, pokud budeme stránku prohlížet v zobrazení pro tisk.

ZAJIŠTĚNÍ SPRÁVNÝCH BAREV PRO TISK

Je potřeba zajistit, aby byl text nadpisu <h1> v záhlaví vidět, i když se nebudou tisknout

obrázky v záhlaví. Proto musíme změnit barvu nadpisu v záhlaví z bílé na světle šedou.

- v panelu Styly CSS označíme Vše a vybereme „.twoColFixLtHdr #header h1“

- → Upravit styl , v zobrazeném dialogu vybereme kategorii Typ a v ní color a pomocí kapátka

zvolíme světlešedou barvu # CCC.→OK .


38

Text „Cestovní kancelář Tam a zpět“ bude vidět i v případě tisku, a to ať bude mít uživatel

nastavenou volbu tisk obrázků na pozadí, nebo ne, protože se nadpis vytiskne světle šedě na

tmavém pozadí (nebo na žádném).

- → Soubor → Uložit vše.

ODSTRANĚNÍ NECHTĚNÝCH STYLŮ

Nyní je v připojené šabloně tisk-ze.css mnoho stylů shodných s šablonou mojestyly-ze.css,

abychom snížili velikost souboru, je nutné pouze ta pravidla, která jsou nová nebo změněná

oproti těm v mojestyly.css.

- v panelu Styly CSS → Vše → Tisk- ze.css označíme myší např. #sidebar 1p a potom jej pomocí

ikony odpadkového koše vymažeme.

Jiný způsob vymazání nepotřebných pravidel:

- → Soubor →Otevřít → tisk-ze.css a zde vybereme myší příslušné pravidlo a ručně jej smazat

(Delete).

- Tímto způsobem vybereme a smažeme všechny styly mimo těch se selektory „twoColFixLtHdr

# header h1“ a „twoColFixLtHdr # footer“, jakmile vymazání dokončíme, zbudou nám

v šabloně pouze dvě pravidla.

- → Soubor →Uložit vše. Potom postup uložení opět zopakujeme.


39

Tím je tisková šablona připravena k použití, ke zjištění rozdílů ve formátování na obrazovce

a při tisku použijeme panel nástrojů Styl vykreslování. Tiskárna čte obě šablony stylů.

12. lekce IMPORT TEXTU, TVORBA NADPISŮ

IMPORT TEXTU

-→ Soubor → Otevřít →C →DW kurz→soubor →Lekce→Lekce 03 →santorini-start, tím

si otevřeme počáteční dokument v DW, ve kterém bude vytvářet text, odrážkové , číslované

seznamy a tabulky.

- Zvolíme →Soubor → Uložit jako a uložíme soubor pod názvem santorini-příjmení.html,

původní soubor Santorini-start zavřeme beze změny!

V dokumentovém okně uvidíme webovou stránku cestovní kanceláře Tam a zpět, obrázky již

byly na stránku vloženy a nyní budeme pracovat s textem.

- →Soubor → Otevřít → C →DW kurz→soubor →Lekce→Lekce 03 → santorini.txt, tím tento

dokument otevřeme. V tomto dokumentu můžeme jeho obsah upravovat, kopírovat a vkládat ho

přímo do vytvářených webových stránek.

- Vyberte všechen text od „vítejte v ráji … až po výlety loděmi a další.“ → CTRL + C , tím ho

zkopírujeme do schránky.Vrátíme se na webovou stránku Santorini- příjmení.html a kurzorem

myši označíme frázi „sem patří text“ , která je umístěna hned za prvním obrázkem.

- →CTRL + V, tím vložíme text ze schránky na vybrané místo. Vložený text se naformátuje jako

odstavce pomocí tagů <p>. Odstavce dostaly přidělený styl s typem písma, které je v již připojené

externí šabloně stylů.

Dokončíme kopírování textu z poznámkového bloku.

- otevřeme santorini.txt, označíme text, který začíná „Dolores a Tom a zkopírujeme jej do

schránky, poznámkový blok beze změny zavřeme (na záložce santorini.txt klepneme na symbol


40

x) a vrátíme se na webovou stránku, označíme text „sem patří text“ pod fotografií budovy a

vložíme text ze schránky.

→ Soubor →Uložit.

VYTVOŘENÍ NADPISŮ

Text by se měl na webové stránce formátovat tak, aby dával smysl, byl přehledný a celkově

srozumitelný. Nadpisy slouží k organizaci stránky do smysluplných částí a zároveň slouží jako

titulek stránky HTML, stejně jako v knize.

Nadpisy se v HTML dokumentech vytváří pomocí značek (tagů) <h1>, … <h6>, seřazeno od

největšího k nejmenšímu. Libovolné zobrazovací zařízení (PC,mobil,čtečka Braillova písma,…)

interpretuje text formátovaný pomocí značek pro nadpis jako nadpis. Tento koncept bývá

nazýván často jako sémantický kód, značky jazyka HTML vytváří sémantický kontext obsahu

stránky: nadpisy, odstavce, seznamy, blokové citace, tabulky, obrázky, atd.

- z nabídkového řádku otevřeme panel Vlastnosti →Okno →Vlastnosti ,v něm stiskneme tlačítko

HTML.

Protože externí šablona stylů mojestyly.css již byla k této stránce již připojena, byly textu již styly

v podobě color,font-family,font-size,atd. pomocí definice příslušného pravidla přiděleny.

Všechny pravidla si můžeme prohlédnout v panelu vlastnosti, jakmile vybereme část s textem.

- Umístíme kurzor do textu „Co říkají naši zákazníci“, v panelu Vlastnosti zapneme tlačítko

HTML v roletce Formát se objeví Nadpis 2, podobně i v selektoru značek <h2>.

- umístíme kurzor do slova „ Místa“ a v panelu Vlastnosti vybereme v roletce Formát Nadpis 3,

Slovo Místa se nyní naformátuje jako nadpis třetí úrovně (tag <h3>), Tím jsme přidělili frázi

význam a logické místo v organizaci stránky vzhledem k dalšímu obsahu, který následuje za

nadpisem.

Stejným způsobem naformátujeme slovo „Pláže“ jako nadpis 3. úrovně.

- → Soubor → Uložit.


41

13. lekce TVORBA SEZNAMŮ A BLOKOVÝCH CITACÍ

VYTVOŘENÍ SEZNAMŮ

Seznam používáme jako část textu, kde je obsah sdělení oddělen do jednotlivých řádků,

které mohou být označeny odrážkami nebo čísly (odrážkový nebo číslovaný seznam, v Adobe

Dreamweaveru jsou ikony pro tvorbu seznamů ale označeny jako neuspořádaný a uspořádaný

seznam). Na webových stránkách se používají pro snadnější orientaci na stránce a k rychlejšímu

čtení, mohou uživatelům pomáhat při hledání rychlých odpovědí. V HTML kódu je:

- odrážkový seznam označen značkou (tagem) <ul>

- číslované seznam značkou (tagem) <ol>

o jednotlivé významové řádky jsou označeny značkou (tagem) <li> v obou druzích

seznamů.

Všechny tagy jsou párové,to znamená, že jsou na začátku i konci seznamu i řádků (</li>).

- vybereme ve vloženém textu nedokončené věty (v HTML kódu jsou označeny jako samostatné

odstavce <p> a </p> od „Úžasné bílé zdi“ až po „Noční život, který si nemůžeme nechat ujít“.

- Otevřeme panel vlastnosti z nabídkového řádku →Okno →Vlastnosti v panelu vlastnosti

vybereme Neuspořádaný (odrážkový) seznam a klepneme na něj myší.


42

- stejné kroky zopakujeme u textových odstavců za nadpisem Pláže.

Pokud bychom chtěli vytvořit uspořádaný (číslovaný) seznam, klepneme na vedlejší tlačítko

vpravo, na kterém jsou číslice.

- →Soubor → Uložit.

VYTVOŘENÍ BLOKOVÝCH CITACÍ

V jazyce HTML jde blok citovaného textu

- umístíme kurzor do odstavce, který začíná „Milujeme Santorini více než …

- v panelu Vlastnosti klepneme na tlačítko s názvem „Odsazení textu“,je určeno k vytvoření

blokových citací.

Bublinová nápověda se nazývá „Odsazení textu“, ve skutečnosti v HTML jazyce tímto způsobem

vytváříme blokovou citaci a předcházejícím tlačítkem „Odsazení textu doleva“ ji odstraňujeme.

- zopakujeme předcházející krok také u dalších odstavců, začínajících slovy: Jídlo na střeše … a


43

„Celá moje rodina …

- Nyní budeme vytvořeným blokovým citacím přidělovat styly pomocí CSS.

- →Styly CSS →Nové pravidlo

- v dialogovém okně Nové pravidlo zvolíme v části Typ selektoru volbu „ Tag (předefinuje

element HTML)“,v poli Název selektoru vybereme pomocí roletky Blockquote a v roletce

Definice pravidla zapíšeme nové pravidlo do mojestyly.css.→OK .

- v otevřeném dialogovém okně Definice pravidla pro blockquote v mojestyly. css vybereme

Kategorii Rámeček, v části Padding (vnitřní okraj) zatrhneme volbu Stejné pro všechny a do

roletky Right a Left (vpravo, vlevo) zapíšeme číslo 4 s jednotkou px .Potom vybereme Kategorii

Okraj a v části Style vybereme z roletky solid (nepřerušovaný), Width (šířka)- thin (tenký) a

v části Color- tmavě modrou #00C.→OK.

Tímto krokem orámujeme pomocí stylů blokové citace tenkou, modrou, nepřerušovanou linkou,

protože to máme uloženo jako nové pravidlo Blockquote v kaskádových stylech, bude tento styl

použit automaticky na všechny blokové citace na všech www-stránkách, ke kterým budeme mít

připojené mojestyly.css.


44

- →Soubor →Uložit vše, tím uložíme změny jak do HTML dokumentu, tak i do příjmení-

mojestyly.css .

Výsledek si prohlédnout v živém zobrazení (potom ho nesmíme zapomenout vypnout) nebo

v prohlížeči.


45

14. lekce TVORBA TABULEK

TVORBA TABULEK

Původně se layout webových stránek tvořil pomocí tabulek namísto stylů CSS, které přišly

později, v současnosti se tabulky používají především pro zobrazování řádků a sloupců dat.

- otevřeme rozpracovaný soubor santorini-příjmení.html ze složky lekce 03.

- ve spodní části stránky označíme a smažeme text „sem patří tabulka, kurzor ponecháme na

místě.

- v panelu Vložit rozbalíme záložku Rozvržení klepneme na ikonu Tabulka.

- v dialogovém okně Tabulka napíšeme do pole Řádků 6 a do Pole Sloupců 3, přednastavené

hodnoty ve všech ostatních polích vymažeme, vzhled tabulky budeme přidělovat pomocí stylů

CSS, díky čemuž bude tabulka přístupná a použitelná na více zobrazovacích zařízeních.

- v části Záhlaví vybereme Nahoru, tím se nadpisy umístí nad každý sloupec a do pole Titulek

napíšeme Hotely na Santorini →OK.


46

Tabulka se zobrazí ve zmáčknuté podobě, protože zatím nemá žádný obsah a nemá nastavený

žádný rozměr. Pomocí panelu vlastnosti můžeme tabulce přidělit identifikátor, tím můžeme

přidělit každému elementu (i tabulce) individuální styl.

- v panelu vlastnosti v poli tabulka napíšeme hotely

- nyní napíšeme do první buňky v tabulce místo, do druhé hotel a do třetí hodnocení.

Tímto způsobem můžeme vyplnit všechny buňky tabulky, pro zrychlení práce ale zkopírujeme

hotový obsah z textového editoru.

- → Soubor → Otevřít → lekce 02 → tabulka.html , tím se otevře již vytvořená tabulka v DW,

umístíme kurzor dovnitř tabulky, v selektoru značek vybereme tag <table#hotely> pomocí

CTRL+C ji zkopírujeme do schránky, potom beze změny zavřeme soubor - tabulka.html,

označíme stejným způsobem rozdělanou tabulku v souboru santorini-příjmení.html a vložíme ji

na místo původní tabulky.

- → Soubor → Uložit . pokud máme vybranou tabulku, můžeme provádět jednoduše a rychle

změny typu přidání,odebrání,sloučení či rozdělení řádků a sloupců, ostatní změny je vhodnější

provádět pomocí CSS stylů.


47

STYLOVÁNÍ TABULKY POMOCÍ CSS STYLŮ

- Umístíme kurzor kamkoliv do tabulky, v selektoru značek vybereme <table#hotely> .

- Otevřeme panel stylů z nabídkového řádku → Okno → Styly CSS → Nové pravidlo CSS .

- V dialogovém okně vyberte Typ selektoru, v názvu selektoru se automaticky objeví slovo table

a nové pravidlo bude definováno v mojestyly.css → OK. Tímto krokem přidáme selektor table do

souboru mojestyly.css a dále budeme definovat pravidlo pro tento nový selektor.

- Zvolte kategorii Rámeček a v poli Width (šířka) napíšeme 475 px a v části Padding (vnitřní

okraj) do pole Top(nahoře) číslo 4 px, hodnota se automaticky doplní do všech dalších polí

- Vybereme Kategorii Okraj a ve style zvolíme solid (nepřerušovaný),widht (šířka) thin (tenký)

color: #00C. →OK.

- → Soubor → Uložit vše.Stránku si prohlédneme v prohlížeči. Vrátíme se do DW a vytvoříme

nové pravidlo.


48

- → Okno → Styly CSS → Nové pravidlo CSS. V dialogovém okně Nové pravidlo CSS

vybereme Typ selektoru Složený prvek (na základě výběru), do názvu selektoru napíšeme th,td a

pravidlo bude definováno v mojestyly.css. → OK.

V okně Definice pravidla pro th, td v mojestyly.css zvolíme Kategorii Okraj a ve style zvolíme

solid (nepřerušovaný), widht (šířka) thin (tenký), color: #00C. →OK.→ Soubor →Uložit vše.

Nyní musíme ještě zrušit mezeru mezi rámečky buněk tabulky, což musíme přidat ručně

pomocí stylů CSS.

- otevřeme →Panel styly, → Vše a v části Všechna pravidla mojestyly.css označíme table.

Klepneme na Přidat vlastnost a do okénka vepíšeme Border-collapse, tabulátorem se přesuneme

do sousedního okna a sem vepíšeme collapse →enter.


49


Výsledek si prohlédneme prohlížeči nebo v živém zobrazení, tabulka je nyní přehlednější.

15. lekce

POPISKY SADY SPRY

POPISKY SADY SPRY

Adobe Dreamweaver Cs4 obsahuje ovládací prvek sady Spry, pomocí kterého vkládáme,

kontrolujeme umístění a stylujeme tzv. bublinovou nápovědu. V HTML dokumentu se bublinová

nápověda vytváří použitím parametru title ve značce <acronym>, ale ovládací prvek Popisek

sady Spry používá JavaScript a CSS.

- Otevřeme soubor santorini-příjmení.html, ve zobrazené tabulce vybereme slovo Oia pod

nápisem Místo.

- Otevřeme z nabídky → Okno →Vložit, tím se nám otevře panel nástrojů, který je umístěn pod

nabídkovým řádkem.


50

- v této nabídce vybereme kategorii → Spry a v ní ikonu →Popisek sady vSpry.

- v okně dokumentu se posuneme až pod tabulku, kde se nám objeví v azurovém obdélníku

popisek sady Spry: sprytooltip1.

- pod tímto popiskem vymažeme text Zde umístěte popisek a napište Oia se čte jako Eea.

- → Soubor →Uložit.

Pokud je to první nápovědná bublina, kterou jsme do www stránek vložili, zobrazí se nám

dialogové okno Zkopírovat závislé soubory, v něm bude upozornění na to, že se k naší stránce

připojí dva soubory.

Každý ovládací prvek knihovny Spry, který použijeme, vkládá soubory CSS a JavaScriptu do

složky nazvané SpryAssets v rámci kořenové složky našeho webového místa. Pokud bychom

vytvářené stránky publikovali na internetu, museli bychom tam i tuto složku s těmito závislými

soubory nahrát.

- zvolíme → OK.

Tímto způsobem jsme přidali do kaskádových stylů CSS nový styl SpryTooltip.css. Nyní

můžeme v panelu vlastnosti, ten otevřeme z nabídky →Okno → Vlastnosti, poklepáme na

bublinovou nápovědu „Popisek sady Spry: sprytooltip1“, měnit takové vlastnosti, jako posun

umístění, časová prodleva, efekty a akce myši.


51

My budeme ale upravovat vlastnosti bublinové nápovědy pomocí kaskádových stylů CSS.

- → Okno → Styly CSS → Vše, ve spodní části Všech pravidel rozbalíme pomocí tlačítka + nově

připojený soubor stylů SpryTooltip.css ,

Zvolíme selektor .tooltipContent a zvolíme ikonu Upravit styl

V zobrazeném dialogovém okně zvolíme Kategorii Typ, v něm vybereme štětečkem bílou barvu

#FFF, v Kategorii pozadí do pole Background-color (barva pozadí) vybereme štětečkem barvu

#O36.

- → OK→ Soubor → Uložit vše.

V živém zobrazení potom vyzkoušíme nápovědnou bublinu, aby se zobrazila, musíme se

myší přiblížit ke slovu Oia.

HLEDÁNÍ A NAHRAZOVÁNÍ TEXTU

DW dokáže na vytvářených stránkách najít a nahradit text, tímto způsobem můžeme

najednou nahradit prázdné mezery, tvrdá zalomení řádků, běžné mezery a jiné textové elementy.

- v dokumentovém okně pod nápisem <h3> Místa v předposlední odrážce vybereme slovo

nakupující.

- z nabídkového řádku zvolíme → Upravit → Hledat a nahradit a v otevřeném dialogovém okně


52

se v kolonce Hledat objeví nakupující, do kolonky nahradit napíšeme zákazníky a stiskneme

tlačítko Nahradit.

DW nahradí první výskyt nalezené fráze a vyhledá další výskyt, v našem případě nám

oznámí, kolik slov se v prohledávaném dokumentu vyskytuje.

- jakmile je nahrazení provedeno, dialogové okno zavřeme, → soubor →Uložit vše.

16. lekce

TVORBA NAVIGACE

ODKAZY NA STRÁNKY V RÁMCI JEDNOHO WEBU

Odkazy jsou základními elementy webových stránek a Dreamweaver nám usnadňuje práci

s nimi.Webové hypertextové odkazy (hyperlinky) umožňují uživatelům se pohybovat z jednoho

místa webu na další, tzn propojují podle předem zvoleného schématu webové stránky, umožňují

přecházet na stránky jiného webu či odesílat e-mailové zprávy.

- Z nabídkového řádku otevřeme → Soubor → otevřít →DW-kurz →lekce 05 → onas-

start.html.

- → Soubor → Uložit jako → onas-příjmení.html.

- původní soubor onas-start.html zavřeme beze změny.

V zápatí otevřené stránky vybereme text Kontaktujte nás.


53

Otevřeme panel Vlastnosti → okno v nabídkovém řádku → Vlastnosti → stiskneme tlačítko

HTML.

- V pravo od pole Odkaz stiskneme tlačítko vyhledat soubor a v otevřeném dialogovém okně

Vyberte soubor v oblasti hledání najděte Lekce 05 a v ní vyberte soubor kontakt.html,

přesvědčíme se, že máme v roletce Relativně k vybranou volbu Dokument → OK a klepneme

kamkoliv do dokumentového okna, abychom zrušili výběr textu odkazu.

Výchozí formátováním hypertextových odkazů je modrá barva textu a modré podtržení, v našem

případě je ovšem modrý text na modrém pozadí špatně čitelný, to však můžeme změnit pomocí

nového pravidla v kaskádových stylech.

-→ kurzor umístíme do hypertextového odkazu a v selektoru značek vybereme <a> , → Okno →

Styly CSS → vše klepneme na ikonu Nové pravidlo CSS, v otevřeném dialogovém okně Nové

pravidlo CSS vybereme Typ selektoru Složený prvek (na základě výběru) a v názvu selektoru

pomocí tlačítka Méně specifické vybereme #footer p a → OK.

V zobrazeném dialogovém okně Definice pravidla pro #footer p a v mojestyly.css vybereme

kategorii Typ a v roletce Barvy vybereme pomocí kapátka barvu žlutou #FFF →OK.


54

Text odkazu bude teď žlutý se žlutým podtržením na modrém pozadí, jeho čitelnost bude

vyšší. Jakékoliv značce <a> zobrazené v zápatí dokumentu bude pomocí kaskádových stylů CSS

přiděleno nově vytvořené pravidlo se žlutou barvou textu i podtržením.

Nyní si vyzkoušíme vybrat cíl vytvářeného hypertextového odkazu metodou vizuálního výběru.

- → soubor → Otevřít →lekce 05 →Santorini-start.html

- Otevřený soubor uložíme se svým příjmením → Soubor → Uložit jako →

Santorini.příjmení.html a původní soubor beze změny zavřeme.

- V zápatí stránky opět vybereme text Kontaktujte nás, otevřeme panel Vlastnosti a otevřeme

-→ Okno → Soubory a v nich najdeme a rozbalíme lekci 05.

- V panelu Vlastnosti stiskneme tlačítko HTML, chytneme a přetáhneme ikonu Ukázat na

soubor (je vpravo od pole Odkaz) na složku Kontakt.html v lekci 05.

Tím vytvoříme odkaz i z této stránky na stránku Kontakt.html, a protože je i tato stránka

propojena s mojestyly.css, bude hypertextový odkaz rovněž napsán žlutým písmem i podtržením.

- → Soubor → Uložit vše, nyní si můžeme fungování hypertextového odkazu vyzkoušet

v náhledu v prohlížeči.


55

17. lekce TVORBA INTERNÍCH A EXTERNÍCH ODKAZŮ

TVORBA ODKAZŮ V RÁMCI JEDNÉ STRÁNKY

Při použití hypertextového odkazu nám náš prohlížeč zobrazí webovou stránku odshora dolů. Je-

li stránka příliš dlouhá a není-li nutné ji celou prohlížet, můžeme pomocí hypertextových odkazů

odkázat na vybraný element a prohlížeč nám nastaví stránku na tento element.

- → Soubor → Otevřít →Dreamweaver kurz → lekce 03 →Santorini-příjmení.html.

- Do postranního sloupce ####sidebar 1 za text slunečnému počasí vložíme pomocí klávesy Enter

text "Prohlédněte si doporučované hotely".

Vybereme slova "doporučované hotely" , otevřeme panel vlastnosti (→ Okno → Vlastnosti) a do

pole Odkaz napíšeme ####hotely a stiskneme klávesu Enter.

Tím jsme právě vytvořili hypertextový odkaz na místo na stránce, kde je umístěna tabulka s

identifikátorem ####hotely. Znak #### značí, že odkaz směřuje na element s vypsaným identifikátorem

v rámci aktuální stránky. Pokud bychom chtěli odkaz na danou tabulku směřovat z jiné webové

stránky v rámci stejného webového místa, musel by odkaz obsahovat jak název souboru, tak i

identifikátor (santorini-příjmení.html####hotely)\

Pro možnost návratu na začátek stránky použijeme podobný odkaz, jako identifikátor můžeme

použít element záhlaví.

- → Pod tabulku napíšeme slovo Nahoru, označíme jej a v panelu Vlastnosti do pole Odkaz

napíšeme ####header a stiskneme klávesu Enter. Tím jsme vytvořili odkaz na začátek stránky.


Nyní si můžeme prohlédnout stránku v prohlížeči a vyzkoušet fungovámí hypertextových odkazů

jak na stránce santorini- příjmení.html, tak na stránce onas-příjmení.html.

VYTVOŘENÍ EXTERNÍHO ODKAZU


56

Předcházející stránky byly provázány pomocí hypertextových odkazů se stránkami stejného

webového místa. Můžeme ovšem aktuální stránku provázat pomocí odkazů i se stránkami jiných

webů, musíme však znát plnou webovou adresu nebo adresu URL. Odkazovat můžeme také na

obrázek, nejenom na text.

- Soubor →Otevřít → onas-příjmení.html, v postranním odstavci vybereme obrázek New Yorku.

Otevřeme panel Vlastnosti a stiskneme tlačítko HTML a do pole Odkaz napíšeme úplnou

webovou adresu http://mapy.google.cz/ a stiskneme klávesu Enter. Příliš dlouhou nebo

komplexní adresu můžeme najít na cílové stránce ve svém prohlížeči a zkopírovat adresu URL

přes schránku do pole Odkaz v panelu Vlastnosti.

→ Soubor → Uložit a v živém zobrazení si prohlédneme výsledek, nebo pomocí náhledu v

prohlížeči vyzkoušíme fungování hypertextového odkazu. Ukazatel myši se při najetí na obrázek

přemění na ruku, čímž signalizuje, že obrázek je odkazem. Pokud na tento obrázek klepneme,

prohlížeč přejde na stránku služby Mapy Google, samozřejmě pokud jsme připojeni k internetu.

Nyní vytvoříme stejný odkaz z textu.

Ukazatel myši vložíme na konec úvodního odstavce v maincontent za text zde je cestovní

kancelář, napíšeme sem text Naše kancelář se nachází v New Yorku. Vybereme slova se nachází,

v panelu Vlastnost do pole Odkaz napíšeme http://mapy.google.cz a stiskneme ENTER.


Výsledek si opět můžeme vyzkoušet v prohlížeči.


57

18.-19. lekce ODKAZY-SAMOSTATNÁ PRÁCE Č.2

V této práci budete vytvářet jednotlivé wwwstránky (celkem 10), pomocí kaskádových

stylůCSS jim dáte požadovaný vzhled, pro zjednodušení práce s více stránkami vytvoříte a

připojíte k vytvářeným wwwstránkám externí šablonu kaskádových stylů CSS, vše uložíte do

nově vytvořené složky označené vaším jménem a hlavním cílem této práce bude propojení

vytvořených wwwstránek pomocí hypertextových odkazů tak, aby bylo možno v internetovém

prohlížeči se postupně přepínat mezi jednotlivými stránkami, vždy s možností návratu.

- V Adobe Dreamweaveru CS4 vytvořte nový soubor: → Nový → 1 pevný sloupec, záhlaví,

zápatí,→OK,

- Do nadpisu v záhlaví napište text PRÁCE č 2- ODKAZY,

- Soubor Uložte jako „Hlavní stránka“ do nově vytvořené složky s názvem Práce č.2-Příjmení

do složky s názvem vaše příjmení,tuto složku vytvořte a umístěte ji na plochu počítače.

- Vytvořte nové pravidlo pro #header h1: Typ: color # C00, Pozadí background-color: # F90,

Pro napsání znaku # se přepněte pomocí klávesy shift + alt do anglické klávesnice a použijte

shift+3.

- Do zápatí napište Příjmení a Jméno,

- vytvořte nové pravidlo pro # footer p, Typ: Font-family: Palatino Linotype, color- # C00,

font-size – 36 px, font-weight- bold Pozadí: background-color: # F90,

- V hlavním obsahu mainContent přepište nadpis h1 na Hlavní stránka, zbytek textu vymažte

včetně podnadpisu (ne zápatí).

- Vložte tabulku: 3 řádky a 3 sloupce, šířka tabulky 150 obrazových bodů, tlouštka okraje 6 obr.

Bodů, mezery mezi buňkami 6obr. bodů, záhlaví- žádné, vloženou tabulku vypište dle vzoru:

1 2 3

1a 2a 3a

1b 2b 3b


58

- upravte pravidlo pro element # mainContent:

- zvolte Pozadí- Backgroundcolor- # FF8

- Otevřete soubor mojestyly.css v lekci 02, ihned je uložte jako styly-příjmení.css do složky Práce

č.2-Příjmení ve složce na ploše s vaším příjmením.

- K Hlavní stránce stránce připojte nově uložené styly-příjmení.css, jako medium vyberte screen,

→ OK.

- Otevřete z nabídkového řádku→Okno Ve stylech CSS rozbalíme styly-příjmení css, v nich

smažeme všechna pravidla s výjimkou pravidla pro body,

- upravte pravidlo pro body ve stylech-příjmení: Pozadí: background-color- # FF9,

- vložte nové pravidlo pro element # mainContent table tr td v styly-příjmení.css:

- Typ: Font-size: 24 px, Font-weight: bolder, Color: #600, Pozadí: background-color: # 6FF-

- → Uložit vše, tímto krokem máme vytvořenou první stránku ze zadané úlohy. V dalších krocích

budete zjednodušeným způsobem vytvářet všechny další stránky, které budete ukládat do vaší

složky Práce č.2-příjmení . ve složce na ploše s vaším příjmením.

- V otevřené Hlavní stránce přepíšeme nadpis h1 Hlavní stránka textem 1. Stránka, vložíme

kurzor pod tabulku, napíšeme slovo ZPĚT,

- upravíme pravidlo styly v .oneColFixCtrHdr #mainContent, Pozadí: Background-color:

zvolíme nějakou vhodnou světlou barvu (každou nově vytvářenou stránku odlišíme jinou barvou

pozadí v elementu mainContent) a stránku uložíme jako str 1.html do složky Práce č.2-Příjmení

ve složce na ploše s vaším příjmením

- stejným způsobem postupně vytvořte a uložte stránky označené jako 1a str., 1b str., 2.str.,2a str.,

2b str., 3.str., 3a str., 3b str. Všechny ukládané stránky musí mít při ukládání příponu .html, jinak

se nebudou korektně zobrazovat v Adobe Dreanweaveru CS4 jako Html dokument!!!

Nyní máte vytvořené a uložené všechny stránky, se kterými budete pracovat(jsou odlišeny

nadpisem h1(stránka č.1 …) a barvou pozadí v elementu #mainContent), vaším úkolem bude nyní

propojit všechny tyto stránky pomocí hypertextových odkazů tak, abychom se:

- z hlavní stránky mohli pomocí odkazu přepnout do libovolné stránky 1.stránka, 2. Stránka a 3.

stránka,


59

- dále vytvořte hypertextové odkazy pro přepínání mezi stránkami v jednotlivých sloupcích

(1,str.,-1a str.-1b str.,tam i zpět),podobně propojíme i buňky ve sloupci 2 a 3,

- pro návrat na Hlavní stránku použijte hypertextový odkaz vytvořený na text ZPĚT, který je

umístěn pod tabulkou.

- Po vytvoření jednotlivých hypertextových odkazů musíte každou stránku uložit. Kontrolu

funkčnosti jednotlivých odkazů provádějte průběžně v náhledu v prohlížeči.

- na závěr práce složku Práce č.2-Příjmení zazipujte a pošlete jako přílohu k emailu na adresu

[email protected], Jako předmět zprávy napište: Třída, Příjmení, Práce č.2.

HODNOTÍCÍ TABULKA

Ty práce Poč.bodů

- Vytvořte nové pravidlo pro #header h1: Typ: color # C00, Pozadí

background-color: # F90,

3

- vytvořte nové pravidlo pro # footer p, Typ: Font-family: Palatino

Linotype, color- # C00, font-size – 36 px, font-weight- bold Pozadí:

background-color: # F90,

4

- upravte pravidlo pro element # mainContent, Pozadí-

Backgroundcolor- # FF8

3

- upravte pravidlo pro body ve stylech-příjmení: Pozadí:

background-color- # FF9,

1

- K Hlavní stránce stránce připojte nově uložené styly-příjmení.css,

jako medium vyberte screen, OK.

1

- vložte nové pravidlo pro element # mainContent table tr td v styly-

příjmení.css: Typ: Font-size: 24, Font-weight: bolder, Color: #600,

Pozadí: background-color: # 6FF

5

- upravte pravidlo styly v .oneColFixCtrHdr #mainContent, Pozadí:

Background-color:

3

Propojení jednotlivých buněk tabulky pomocí hypertextových 5


60

odkazů

složku Práce č.2-Příjmení zazipujte a pošlete jako přílohu k emailu

na adresu [email protected], Jako předmět zprávy napište:

Třída, Příjmení, Práce č.2.

1

CELKEM 26

PŘEPOČET BODŮ NA ZNÁMKY

Známka Body

1 Min 24

2 21-23

3 18-20

4 15-17

5 Méně než 15

20. lekce VKLÁDÁNÍ A POUŽITÍ OBRÁZKŮ

VKLÁDÁNÍ A POUŽITÍ OBRÁZKŮ

Obrázky představují klíčovou komponentu každé webové stránky, zvyšují její přehlednost,

přitažlivost a na první pohled by měly návštěvníka zaujmout. Ke vkládání obrázků můžeme

používat panel vložit, výplňový prostor pro obrázky, panel datové zdroje, vkládání kopírováním

z Photoshopu či Adobe Bridge.

Otevřeme → Soubor →Otevřít → DW-kurz → lekce → lekce 04 → naxos-start.html.

Otevřený soubor uložíme pod svým jménem do lekce 04 → Soubor → Uložit jako → naxos-

přímení.html. Původní soubor naxos-start.html zavřeme beze změny, tím zůstane původní

soubor zachován.


61

Vybereme výplňový prostor obrázku „portara (200x200)“ Klávesou Delete ji odstraníme,

- → Okno → Vložit → Běžné → Obraz (pokud tuto ikonu na panelu nevidíme, otevřeme ji

klepnutím na šipku směřující dolu hned vedle ikony Obrazy).

V zobrazeném dialogovém okně vybereme oblast hledání → lekce → obrázky →naxos-portara

→ OK.

V dialogu Atributy pro usnadnění přístupu napíšeme do pole Alternativní text výraz Portara na

ostrově Naxos → OK.

K otevření dialogu pro vložení obrázku můžeme také použít poklepání na obrázek výplňového

prostoru a tím ho vyměnit za vybranou grafiku, alternativní text musíme však napsat manuálně

v panelu Vlastnosti.

Alternativní technikou vložení obrázku do stránky je použití panelu Datové zdroje.

- → vymažeme právě vložený obrázek naxos-portara.html.

-V nabídkovém řádku zvolíme → Okno → Datové zdroje

V zobrazeném dialogovém okně klepneme na ikonu Obrazy, najdeme obrázek naxos-

portara.html → Vložit.


POUŽITÍ PANELU VLASTNOSTI U OBRÁZKŮ


62

Pro webové stránky je nejvýhodnější, je-li v rovnováze velikost použité grafiky, jejich

kvalita velikost souboru. Proto se musí často optimalizovat grafika, kterou budeme umísťovat na

webovou stránku. K tomu účelu obsahuje Adobe Dreamweaver grafický nástroj, který dokáže

zajistit nejvyšší možnou kvalitu při zachování malé velikosti souboru.

- Otevřeme z HDD → Soubor → Otevřít → Lekce → Lekce 04 →naxos-příjmení.html.

V dokumentovém okně vybereme obrázek Portara

- Otevřeme panel vlastnosti → Okno → Vlastnosti, pokud máme vybraný obrázek, v panelu

Vlastnosti se nám zobrazí řada možností pro úpravu obrázku:

Do okna šířka a výška přímo zapisujeme hodnotu v obrazových bodech, pod alternativním textem

je tlačítko (Úprava) pro úpravu obrázku ve Photoshopu nebo Fireworksu, vedle je tlačítko

(Upravit nastaveni náhledu) pro úpravu obrázku přímo v Dreamweaveru → Upravit nastaveni

náhledu

V otevřeném dialogovém okně zkontrolujeme, zda máme ve Formátu nastavenou volbu JPEG,

vybereme v dolní části 2 okna náhledu, označíme spodní náhled., v pravé horní části okna

rozbalíme roletku Kvalita a pomocí jezdce snížíme kvalitu na 20.Nyní můžeme porovnat vizuálně

snížení kvality obrázků změnu velikosti souboru, snížení kvality obrazu není kompenzováno


63

úsporou velikosti (6,37:1,37 kB), proto označíme horní náhled a v roletce Uložená nastavení

vybereme JPEG-lepší kvalita →OK.

- →Soubor →Uložit.

21. lekce

PRÁCE S OBRÁZKY VE PHOTOSHOPU

KOPÍROVÁNÍ A VKLÁDÁNÍ OBRÁZKŮ Z PHOTOSHOPU

Většina webových designérů používá běžně ve své práci s grafikou Photoshop, proto i DW

CS4 umožňuje velmi jednoduše zkopírovat ve Photoshopu jakoukoliv část grafiky, kterou zrovna

potřebujeme, a následně ji vložit do rozvržení stránky na vybrané místo v Dreamweaveru. Ten

také pomocí Náhledu stránky umožňuje převést soubor do požadovaného formátu.


- ukazatel myši umístíme do odstavce za text „Hory skrývají zlatavá údolí, kde uvidíte pole a

plodiny promíchané s malými kostelíky a impozantními kostely.“

- Otevřeme Photoshop → Start → Všechny programy → Adobe Design Premium CS4 → Adobe

Photoshop CS4, po otevření zvolíme → Soubor → Otevřít a ve stejnojmenném dialogu →

zvolíme → DW kurz → Lekce → Obrázky → PSD → naxos-obrazky.psd → OK.

Otevřený soubor obsahuje vrstvy, v každé z nich najdeme obrázek.

- z nabídkového řádku zvolte → Okno → Vrstvy, tím zobrazíme panel Vrstvy a v něm vybereme

vrstvu šťastná rodina.


64

V paletě Nástroje (vertikální panel vlevo vedle dokumentového okna) zvolíme nástroj

Obdélníkový výběr a tažením myší při stisknutém levém tlačítku provedeme výběr okolo obrázku

s rodinou. Pokud bychom chtěli do výběru zahrnout obrázky ve více vrstvách, zvolíme příkaz →

Úpravy → Kopírovat sloučené.

- zvolíme → Úpravy → Kopírovat, zavřeme Photoshop bez ukládání obrázku a vrátíme se do

Dreamweaveru v něm zvolíme → Upravit → Vložit, tím se zobrazí dialog Náhled obrazu.

Provedeme kontrolu, zda v roletce Uložená nastavení je vybraná volba JPEG-lepší kvalita →

OK.

V zobrazeném dialogovém okně Uložit zobrazený obraz najdeme složku obrazky a do pole Název

souboru napíšeme stastna-rodina.jpg a stiskneme tlačítko → OK. Tím vložíme zkopírovaný

obrázek do dokumentu. → Soubor → Uložit.

POUŽITÍ OBRÁZKŮ NA POZADÍ

Kromě obrázků na popředí mohou webové stránky obsahovat i obrázky na pozadí, ty

vkládáme pomocí CSS stylů.

- →Okno → Styly CSS → Vše

V seznamu mojestyly.css vybereme .twoColFixLtHdr #container → zvolíme ikonu Upravit


65

V dialogovém okně Definice pravidla … vybereme kategorii Typ → Background-image →

Procházet → obrázek cara.gif a v roletce Background-repeat zvolíme repeat-y (opakovat po ose

y).Tím se obrázek zopakuje po ose y odshora dolů přes celou výšku elementu.


POUŽITÍ VÝPLŇOVÉHO PROSTORU PRO OBRÁZKY

Výplňový prostor pro obrázky používají vývojáři webových stránek v případech, kdy ještě

nejsou k dispozici finální obrázky, umožňuje to představit grafickou podobu vytvářených

budoucích www-stránek, zejména při komunikaci grafika se zadavatelem stránek ( většinou to

jsou laici). Výplňový prostor se nejčastěji zobrazuje jako obyčejný šedý čtyřúhelník s titulkem

(název budoucího obrázku) v příslušných rozměrech. Tyto výplně jsou určeny pouze pro návrh,

jakmile stránku zobrazíme v prohlížeči, výplňový prostor se buď vůbec nezobrazí, nebo se místo

zobrazí jako chybějící obrázek (Internet Explorer)

Postup při vkládání výplňového prostoru:

- Ukazatel myši vložíme tam, kam chceme umístit budoucí obrázek.

- Otevřeme panel Vložit → okno →Vložit, panel se otevře pod nabídkovým řádkem, v něm

vybereme nabídku →Obrazy: vyhrazené místo pro obraz.


66

- v dialogovém okně Vyhrazené místo pro obraz vyplníme pole název a zadáme šířku a výšku

prostoru v obrazových bodech → OK. Jakmile je výplň vložená, můžeme ji v zobrazení Návrh

kdykoliv změnit

22. lekce ADOBE BRIDGE

ZPŘÍSTUPNĚNÍ ADOBE BRIDGE

Adobe Bridge CS4 poskytuje mostové propojení (proto název Bridge) mezi aplikacemi

Adobe Creativ Suite, včetne Dreamweaveru, pomocí této aplikace můžeme rychle procházet

složkami obrázků a jinými zdrojovými soubory. Je plně integrovaný v Dreamweaveru, můžeme

z něj přetahovat obrázky rovnou do DW, aniž bychom museli Bridge opustit jako např.

Photoshop.

V souboru naxos-příjmení.html umístíme myší kurzor na začátek oblasti pod nadpis Hlavní

řecký ostrov.

- v nabídkovém řádku zvolíme → Soubor → Procházet nástrojem Bridge, po jeho spuštění

klepneme na záložku → Složky → obrazky→ Zdroje Bridge. Pro lepší práci můžeme přepnout

Bridge do kompaktního režimu a vněm zvolíme Kompaktní okno vždy nahoře. Tímto krokem

zmenšíme okno na asi ¼ velikosti, můžeme ho odsunout mimo dokumentové okno

Dreamweaveru a bude stále nahoře.


67

- Nyní myší,při stisknutém levém tlačítku, přetáhneme obrázek dívka-na-plazi.jpg z Bridge do

Dreamweaveru a umístíme jej pod hlavní nadpis v mainContent. V zobrazeném dialogu vepíšeme

alternativní text Jak chytnout trochu barvy →OK.

- Soubor → Uložit.

POUŽITÍ INTELIGENTNÍCH OBJEKTŮ PHOTOSHOPU

Na rozdíl od ostatních obrázků jsou inteligentní objekty propojené se souborem Photoshopu

(PSD), což znamená, že jakákoliv změna ve zdrojovém souboru v Photoshopu je souborem

Dreamweaveru rozpoznán a nabídne nám aktualizaci webového obrázku. Jeden soubor PSD

můžeme umístit na více stránek jako inteligentní objekt Photoshopu a všechny změny zdrojového

souboru se potom projeví na všech stránkách.

- v souboru naxos-příjmení.html poklepejte na výplň pro obrázek kostela. V zobrazeném dialogu

najdeme soubor → obrazky → PSD → naxos-kostel.psd → OK.

- v zobrazeném dialogovém okně Náhled obrazu vybereme z roletky Formát volbu JPEG

v Uložená nastavení vybereme JPEG lepší kvalita → OK.


68

V otevřeném dialogovém okně Uložit webový obraz najdeme složku obrazky, do pole Název

souboru napíšeme naxos-kostel.jpg → Uložit, tento obrázek však již byl uložený do složky,

klepněme na Ano, abychom jej nahradili tím, který chceme uložit nyní. Teď by se měl zobrazit

dialog pro napsání alternativního textu Kostel na ostrově Naxos, pokud se dialog nezobrazí,

napíšeme frázi do pole Alternativní text v panelu Vlastnosti.

Nyní se zobrazí obrázek na vyhrazeném místě, jeho velikost je ale větší, můžeme ji však upravit

přetažením myší za levý spodní roh obrázku při současném stisknutém tlačítku shift, kontrolu

velikosti obrazu provedeme v panelu Vlastnosti, kde také můžeme napsat přesnou hodnotu šířky

a výšky obrázku.


69

V levém horním rohu obrazu je jednak kruhová zelená značka pro inteligentní objekt, po

zmenšení obrazu se objeví žlutý výstražný trojúhelník, který označuje, že rozměry webového

obrazu jsou odlišné od vybrané výšky a šířky HTML

-→ pravým tlačítkem myši klepneme na obrázek a z místní nabídky vybereme Aktualizovat

z originálu, aktualizovaný obrázek se převzorkuje podle aktuálního použití, zdrojový obrázek ve

Photoshopu zůstane v původním stavu, aby mohl být použit jinde na stránkách v jiných

rozměrech. Pokud se soubor PSD změní, všechny podoby inteligentního objektu se mu okamžitě

přizpůsobí.

Abychom mohli použít stejný soubor na jiných stránkách, vložíme obrázek na tuto stránku

stejným postupem ještě jednou


23. lekce PRUH NABÍDEK SPRAY

UPRAVENÍ ODKAZU NA E-MAILOVOU ADRESU

Dalším používaným typem odkazu je odkaz na e-mail, jakmile na něj uživatel klepne, zobrazí se

okno s novou a vyplněnou e-mailovou adresou, to je výhodné, pokud požadujeme rychlou

zpětnou vazbu.

Kurzor umístíme na konec textu v odstavci o Elaine, stiskem klávesy enter vytvoříme nový

odstavec a napíšeme sem text Napište Elaine.

- vybereme napsaný text.

-→ Otevřeme panel vložit → Okno → Vložit a klepneme na ikonu E-mailový odkaz,

v zobrazeném stejnojmeném dialogu napíšeme [email protected]



70

Funkce textového odkazu je závislá na existenci e-mailového klienta nainstalovaného

v počítači uživatele,např.Out look, odkaz nebude fungovat, pokud uživatel k posílání e-mailů

používá službu na internetu(např. seznam).

VKLÁDÁNÍ PRUHU NABÍDEK SPRY

Webové stránky potřebují interní navigaci, většina současných stránek používá navigaci,

která je založena na seznamech stylovaných pomocí kaskádových stylů CSS. S pomocí

JavaScriptu se může seznam stát vodorovnou nebo svislou navigací s podnabídkami

v rozbalujících se nabídkách. Ovládací pruh nabídek je jednoduchý a silný nástroj, který je určen

pro vkládání seznamů- kódu HTML a také odkazů, všech pravidel CSS, která zajistí, že se

zobrazí jako pruh nabídek, a JavaScriptu, který zajistí vysunování podnabídek. Ovládací prvek

pruh nabídek Spray má výhodu v tom, že jej tvoří pouze seznamy v HTML, takže i když uživatel

nemá povolený JavaScript nebo CSS, navigační nabídka je stále funkční jako soubor navigačních

odkazů.

- Otevřeme soubor onas-příjmení.html,

- v postranním panelu umístíme kurzor vlevo od obrázku New Yorku a stiskem Enter vytvoříme

prázdný řádek před obrázkem,

- otevřeme panel Vložit z nabídky Okno, klepneme na ikonu Spray pruh nabídek

- ve stejnojmenném dialogu vybereme volbu Svisle → OK a nad obrázkem se zobrazí navigační

nabídka, → Soubor → Uložit.


71

- K vytvoření odkazů použijeme panel Vlastností, ten otevřeme klepnutím na azurový pruh panel

nabídek spray: menuBar1.

- Vybereme položku 1 v levém seznamu (hlavní nabídky), v poli Text napíšeme Úvodem, v poli

Odkaz napíšeme index.html a v prostředním sloupci (druhá úroveň nabidky) vymažeme pomocí

tlačítka – všechny tři podnabídky Položka 1.1 až 1.3.

- Vybereme položku 2 a do pole Text napíšeme Itálie, v poli Odkaz ponecháme znak mřížky a do

nabídky druhé úrovně pomocí tlačítka + přidáme další položku, do pole text napíšeme Umbria a

do pole odkaz přepíšeme znak mřížky textem Umbria.html.

- Vybereme Položku 3, do pole text napíšeme Řecko, vybereme položku 3.1 do pole text

nepíšeme Santorini a do odkazu santorini-příjmení.html,

- vybereme položku 3.2, napíšeme Naxos a do odkazu naxos-příjmení.html,

- do položky 4 napíšeme O nás a do odkazu onas-příjmení.html, vytvoříme tlačítkem +

podnabídku 4.1, vybereme ji, do pole text napíšeme Kontaktujte nás a do Odkazu napíšeme

kontakt.html



72

24. lekce SPRY PANEL SE ZÁLOŽKAMI

VKLÁDÁNÍ SPRY PANELU SE ZÁLOŽKAMI

Tento panel se používá jako náhrada za navigaci na dlouhých stránkách, pomocí Spry panelu

se záložkami nahradíme posouvání na dlouhých webových stránkách tím, že potřebné části

stránek zkrátíme do panelu se záložkami (v záložkách ponecháme pouze název), zájemce si na

webové stránce otevírá klikáním pouze ty záložky, které si chce aktuálně prohlédnout, všechny

ostatní jsou schovány v záložkách.

- Otevřeme soubor onas-příjmení.html ze souboru → Nabídka → Otevřít → Dreamweaver kurz

CS4 → lekce 05.

V tomto souboru je dlouhá webová stránka, na které jsou postupně zobrazeny informace o

jednotlivých zaměstnancích, při prohlížení této stránky se zájemce musí přesouvat po webové

stránce pomocí rolovacího kolečka, aby si našel informace o hledaném zaměstnanci. Místo tohoto

pracného a zdlouhavého postupu nám Adobe Dreamweaver nabízí k použití Panel se záložkami,

který nám poskytne informace o jednotlivých zaměstnancích skrytých v záložkách s jejich jmény.

Při otevření této webové stránky si jejich tvůrce může zvolit, která záložka se bude zobrazovat na

stránce jako výchozí.

- Vložíme kurzor za úvodní odstavec a stiskem klávesy Enter vložíme nový odstavec.

- Na toto místo vložíme Spry panel se záložkami z panelu Vložit,

- z nabídkového řádku → Okno → Vložit → kategorie Spry → ikona Spry panel se záložkami.


73

Panel se zobrazí na stránce na určeném místě, nebudeme si všímat, že nám dočasně vytláčí

zbývající obsah stránky doprava. Panel má dvě části:pojmenovanou záložku a obsahovou oblast

pro každou záložku. Do obsahové části můžeme vkládat jakýkoliv text, grafiku, tabulky,

formuláře, seznamy, dokonce filmy ve Flashi. K jeho naplnění budeme používat panel Vlastnosti,

pokud se neotevře automaticky, otevřeme si ho z nabídky → Okno → panel Vlastnosti.

V prvním okně je název panelu (TabbedPanels1), ve druhém okně jsou názvy záložek a

pomocí tlačítek + a – můžeme měnit počet záložek, pomocí šipek nahoru či dolů můžeme měnit

pořadí záložek. Ve třetím okně můžeme nastavit výchozí stránku.

- V panelu Vlastnosti přidáme 3 nové záložky(3 x klepneme na ikonu +), v okně dokumentu

Dreamweaver zobrazuje ikonu oka, ta umožňuje vybrat aktuálně skrytý obsah panelu a zpřístupní

ho k úpravám.

- Vybereme text záložka 1 a napíšeme název Elaine, vložíme kurzor kamkoliv do profilu Elaine,

v selektoru značek klepneme na element <div.profil>, tím vybereme celý obsah textu o Elaine i

s obrázkem, → Upravit → vyjmout, vybereme text Obsah 1 a nahradíme ho obsahem schránky

→ Upravit → Vložit.


74

- Stejným způsobem naplníme záložky 2-5 obsahem textu pro jednotlivé zaměstnance cestovní

kanceláře.Na konci práce si můžeme pomocí ikon s okem prohlédnout všechny vytvořené

záložky a provedeme jejich kontrolu a konečnou úpravu.

- zvolíme → Soubor → Uložit.

Poté si vyzkoušíme funkčnost jednotlivých záložek pomocí náhledu v prohlížeči.

25. lekce ÚPRAVA STYLU NABÍDEK A ZÁLOŽEK SPRY

ÚPRAVA VZHLEDU PRUHU NABÍDEK A ZÁLOŽEK SPRAY

Ovládací prvek Pruh nabídek Spry nám umožňuje vytvořit celkem rychle a jednoduše

profesionálně vypadající webové stránky, jejich vzájemné propojení i interní navigaci. Jejich

vzhled můžeme snadno upravit s využitím JavaScriptu a kaskádových stylů CSS. Vložením

Pruhu nabídek Spry se automaticky připojil k naší stránce soubor s kaskádovými styly

SpryMenuBarVertical.css, pomocí tohoto souboru budeme stylovat vloženou nabídku ve formě

neuspořádaného seznamu.

- Z nabídkového řádku otevřeme soubor → Otevřít → onas-příjmení.html.

- Z nabídkového řádku otevřeme soubor → Okno zaškrtneme položku Styly, v seznamu stylů

zabalíme pomocí tlačítka – soubory mojestyly-příjmení.css a tisk-příjmení.css. Nyní rozbalíme

tlačítkem + soubor

SpryMenuBarVertical.css,


75

- V horní části okna vybereme tlačítkem Vše všechna pravidla, ta se nám zobrazí jednotlivě pod

sebou.

- Vybereme ze seznamu selektor ul.MenuBarVertical a, pravidlo s tímto selektorem ovlivňuje

barvu a pozadí odkazů, teedy značek <a>. Pokud je to nutné, můžeme zachycení a tažením myší

prodloužit jak okno Všechna pravidla, tak okno Vlastnosti.

- V okně Vlastnosti vybereme background-color (barva pozadí) a kapátkem označíme světle

žlutou barvu

#FF0, klepneme na paletu barev u vlastnosti color (barva písma) a vybereme kapátkem tmavě

modrou barvu #00C → Enter.

- Nyní vybereme selektor ul. MenuBarVertical ul li. Pravidlo s tímto selektorem ovlivňuje šířku

podnabídek. Jelikož má postranní panel pevnou šířku, můžu být šířka navigační nabídky také

omezená, u vlastnosti width (šířka) zapíšeme 200 a zvolíme jednotku px.

- Nyní vybereme selektor ul. MenuBarVertical li, Pravidlo s tímto selektorem kontroluje hlavní

seznam navigace a budeme ho upravovat pomocí ikony → Upravit styl.Objeví se dialogové okno

Definice pravidla pro ul. MenuBarVertical li v SpryMenuBarVertical li.css.

- Vybereme Kategorii Rámeček a do pole width (šířka ) napíšeme 200 a jako jednotku zvolíme

px.

- V kategorii Okraj zrušíme u všech tří vlastností volbu Stejné pro všechny a do části Style (styl)

vybereme z roletky slovo solid (plný) do polí Right (vpravo) a Bottom (spodní). Do části Width

(šířka) do stejných polí napíšeme 1 px a v části Color (barva) vybereme do stejných polí barvu

tmavě modrou #00C.


76

- → OK → Uložit vše, musíme uložit jak dokument HTML, tak kaskádové styly.

Podobně bychom upravovali i horizontální nabídku, rozdíl by byl v šířce nabídkových oken,

při větším počtu by šířka oken byla menší, z tohoto důvodu je vhodnější používat vertikální

nabídku odkazů.

Stejným způsobem můžeme upravovat vzhled Spry panelu se záložkami,.po vložení Spry

panelu se záložkami se nám automaticky vloží do okna Styly soubor stylů SpryTabbedPanels.css,

v Okně Styly si ho rozbalíme a můžeme upravovat jednotlivá pravidla, jedná se o selektor

- TabbedPanels Tab- zde můžeme měnit barvu pozadí záložek,jejich okrajů i stylu písma.

- TabbedPanels TabHover -mění barvu záložka při výběru myší.

- TabbedPanels TabSelekted a- mění barvu neaktivní záložky.

- Po ukončení úprav musíme uložit jak dokument Html, tak i změny v kaskádových stylech

- → Uložit vše


77

26. lekce CHOVÁNÍ SPRY EFEKTŮ

CHOVÁNÍ V DREAMWEAVERU

Chování DW je kódem JavaScriptu, který vykonává nějakou akci, např. otevření okna

prohlížeče, kterou spouští nějaká událost, např. klepnutí myší. Použití chování je proces o třech

krocích:

1. Vybereme element na stránce, který má spouštět chování.

2. Vybereme, jaké chování se má použít.

3. Určíme nastavení nebo parametry takového chování.

DW nabízí více jak 30 druhů chování, která jsou všechna dostupná z části Chování, v nabídce

Okno.

- → Okno → Chování → Inspektor tagů → ikonou + rozbalíme seznam dostupných chování

k určité části okna

Některé funkcionality pro použití v DW obsahují:


78

• Otevření a zavření okna

• Změnu zdroje obrázku a zpětnou změnu pro efekt

• Mizení a objevování obrázku nebo části stránky

• Zvětšování či třesení grafiky

• Zobrazení vyskakujícího okna s upozorňovací hláškou

• Změna textu nebo jiného obsahu HTML v určené oblasti

• Objevování nebo skrytí části stránky

• Volání uživatelské funkce JavaScriptu

Ne všechna chování jsou dostupná veškerý čas, běžná chování jsou dostupná pouze v přítomnosti

určitého elementu na stránce, např. obrázek,…

POUŽITÍ CHOVÁNÍ SPRY EFEKTŮ

Pomocí nich můžeme vytvářet vizuální efekty na stránce, jako je zvýraznění elementů, jejich

zatřesením, přechodem obrázků v druhý obraz. Tyto efekty slouží k upoutání pozornosti nebo ke

zvýraznění potřebného elementu, jsou velmi výrazné a proto se musí používat opatrně.

- → Soubor → Otevřít → na disku najdeme cestu do kurzu DW a otevřeme →Lekce 06 a v ní

soubor nasiklienti-start.html.

- soubor uložíme → Soubor → Uložit jako → název souboru zvolíme nasiklienti-prijmeni.html,

a původní soubor nasiklienti-start.html beze změny zavřeme.

- V main Content ( hlavním obsahu) označíme nadpis h1 Naši podnikoví klienti.

- Z nabídkového řádku otevřeme → Okno → Chování, klepnutím na ikonu + rozbalíme kartu

Chování a v ní vybereme → Efekty a v rozbalené podnabídce vybereme → Zvýraznění.


79

- V zobrazeném dialogovém okně ponecháme jako cílový element současný výběr, v poli Trvání

efektu napíšeme 1500 ms, v poli počáteční barva pomocí kapátka vybereme zelenou barvu

#00FF33, do pole Konečná barva vybereme červenou barvu #ff0000 a v poli barva po efektu

žlutou #FFFF66,zaškrtneme pole přepnout efekt, to nám umožní měnit barvy oběma směry →

OK.

- V panelu Chování klepneme na pole On clik, tím ho aktivujeme a v seznamu vybereme

onMouseOver.

Pokud bychom chtěli měnit parametry efektu Zvýraznění, poklepeme na jeho název v pravém

sloupci, tím se nám otevře příslušné dialogové okno. Smazat nepotřebný efekt můžeme po jeho

označení v panelu chování pomocí ikony se znakem minus - .


80

- Označíme nadpis h1 v záhlaví dokumentu, v panelu chování přidáme chování → vybereme

Efekty a podnabídce vybereme efekt → Zatřást, v dialogu ponecháme Současný výběr. V levém

poli panelu Chování ponecháme spouštěč onClick.

- Označíme obrázek v sidebar 1, , v panelu chování přidáme chování → vybereme Efekty a

podnabídce vybereme efekt → Zaměnit obraz, v dialogu klikneme na procházet a najdeme v DW

obrázky santorini-zapadslunce.jpg, ponecháme nabízená zaškrtnutí. → OK.


Provedené změny si prohlédneme jako náhled v prohlížeči.

27. lekce

IMPORT DAT XML

IMPORT DAT XML POMOCÍ SPRY

XML ( Extensible Markup Language) je standardizovanou specifikací pro ukládání dat

v textovém formátu, jedná se o značkovací jazyk, který používá podobně jako HTML stejnou

metodu označování textu pomocí značek. XML je oproti HTML může značky pojmenovat podle

sebe, např. na základě dat, jež označují. Každý soubor jazyka XML může obsahovat vícenásobné

záznamy dat.

- → Soubor → Otevřeme → DW → Lekce → lekce 06 → nasiklienti-příjmení.html,

- Ukazatel myši umístíme pod odstavec textu v elementu div s identifikátorem mainContant

(hlavní obsah), tím jsme určili místo , kam vložíme sadu dat.

- Z nabídky → Okno → otevřeme panel Vložit a v něm klepneme na kategorii Spry a v ní

vybereme Sada dat Spry.

- V zobrazeném dialogovém okně Sada dat Spry vybereme z roletky datový typ XML a v okně

pro zadání datového souboru klepneme na Procházet, vybereme z lekce 06 soubor klienti.xml →

OK, tím se vrátíme do úvodního okna, v poli element řádku zvolíme „klient“ → další a tím se


81

posuneme do druhého kroku.

- Na obrazovce Nastavit možnosti dat budeme postupně vybírat jednotlivé sloupce a nastavíme

datový typ. Pro všechny sloupce kromě čtvrtého (s názvem činnost) ponecháme v poli Text název

Řetězec, ve čtvrtém sloupci zvolíme pomocí roletky datový typ html, protože tento sloupec

obsahuje značky HTML.

Potom klepneme na tlačítko Další a tím se přesuneme do posledního kroku.

- Na obrazovce Vyberte možnosti vložení vybereme možnost Vložit tabulku klepneme na tlačítko

Nastavení, tím se nám objeví dialogové okno Datová sada Spry- vložit tabulku.

- V dialogu máme možnosti pracovat s navrženými sloupci, pomocí tlačítka + a – můžeme

sloupce přidávat nebo odstraňovat, měnit pořadí sloupců či aktualizovat detaily oblastí v případě

stisknutí řádku tabulky


82

- Klepneme na tlačítko → OK, čímž souhlasíme s výchozím nastavením a vrátíme se do dialogu

Vyberte možnosti vložení a potvrdíme ukončení vkládání datové sady Spry tlačítkem Hotovo.


Dreamweaver potřebuje přidat dva soubory JavaScriptu, které umožní správné fungování

sadě dat Spry, tyto soubory jsou nachystány ve složce SpryAssets a jsme vyzváni k jejich

zkopírování.

Nyní uvidíme v zobrazení Návrh tabulku s výplňovým textem pro sadu dat, vlastní data jsou

uložena v souboru XML a zobrazí se pouze v živém zobrazení nebo při náhledu v prohlížeči.

- → Soubor → náhled v prohlížeči.

Kromě tabulky a výplňového prostoru Dreamweaver vložil také řádky s důležitým kódem,

ten si můžeme prohlédnout v zobrazení kód, v hlavičce dokumentu (</head>). Zde najdeme

odkazy na soubory JavaScriptu a funkce, jejímž účelem je ovládání sady dat Spry ( var ds1 = new

Spry.Data.XMLDataset("Klienti.xml", "klienti/klienti");ds1.setColumnType("činnost" "html");…

Sady dat Spry nám umožňují importovat zdrojové materiály ve formátu XML nebo HTML

a jejich dynamické zobrazování na webových stránkách s pomocí tabulkek nebo obalových

elementů, kontejnerů, ty mohou obsahovat detailní rozvržení a vyhledávací sekce, to nám dává

různé možnosti, jak pracovat se sadami dat Spry.


83

28. lekce TVORBA SPRY SKLÁDAČEK

VYTVÁŘENÍ SPRY SKLÁDAČEK

Spry skládačka je podobná Spry panelu se záložkami, zejména pro podobnou organizaci

obsahu do celistvého vícepanelového zobrazení, jednotlivé záložky jsou naskládány na sobě spíše

než vedle sebe, takže při klepnutí na jednu z nich se panel i s celým obsahem plynule otevře a

obsah se zobrazí v požadované záložce. Pokud je obsah uvnitř panelu větší nebo širší než panel

sám, automaticky se zobrazí horizontální nebo vertikální postníky.

- Otevřeme →Soubor → Dreamweaver → Lekce → Lekce 06 → Santorini-start.html,

- Zvolíme →Soubor → Uložit jako → Santorini-příjmení.html, původní soubor Santorini-

start.html zavřeme beze změny.

- Ukazatel myši umístíme na konec řádku Ráj u moře v hlavním obsahu (mainContent), tím

vytvoříme bod , kam budeme vkládat Spry skládačky.

Z nabídkového řádku otevřeme nabídku → Okno → Vložit a tomto panelu klepneme na ikonu

Spry skládačka.Dreamweaver vloží na vyznačené místo do stránky ovládací prvek Spry

skládačka.

Výchozím prvkem je dvoupanelová skládačka s rozbaleným horním panelem. Modrá záložka

s označením lze přímo měnit v zobrazení Návrh.

- Zvolíme → Soubor → Uložit vše, pokud je to požadováno, odsouhlasíme přijetí závislých

souborů, které Dreamweaver přidá do složky SpryAssets.

- Vybereme výplňovou frázi Popisek 1 a přepíšeme jej textem Vítejte na Santorini.


84

- Vybereme fotografii páru na střeše a veškerý text, který popisuje vesnice a pláže až k „Co říkají

naši zákazníci.

- V HTML kódu se můžeme přesvědčit, že jsme při označování nic nevynechali → Kód, od

značky <p> před obrázkem až po uzavírací značku</ul> za druhým vybraným seznamem, potom

se vrátíme zpět do zobrazení Návrh.

- Z nabídkového řádku zvolíme → Upravit → Vyjmout, tím zkopírujeme vybraný obsah do

schránky.

- Vrátíme se do skládačky, vybereme text Obsah 1 a pomocí lokální nabídky vyvolané pravým

tlačítkem myši → Vložit jej nahradíme obsahem schránky. V Návrhovém zobrazení uvidíme

pouze část vloženého obsahu, protože se v tomto zobrazení nezobrazuje posuvník. Abychom

uviděli celý obsah, klepneme na panel pravým tlačítkem myši a v lokální nabídce označíme

v položce Zobrazení elementu položku Plné. Pro práci na jiných panelech je ovšem výhodnější

obsah opět skrýt opačným postupem.

- Ukazatelem myši posuneme v šedé oblasti s názvem Popisek 2 až se objeví ikona oka, klepneme

na ni, tím se nám otevře panel 2.

- Vybereme Popisek 2 a přepíšeme jej textem „Co říkají naši zákazníci“.

- Stejným způsobem jako v předešlém případě vyjmeme do schránky text v příslušné oblasti a

vložíme jej do panelu v oblasti Obsah 2.

- Pro naplnění třetího panelu skládačky musíme nejdříve přidat další panel, vytvoříme jej


- Vybereme skládačku Spry: Accordion 1, otevřeme panel Vlastnosti a vněm pomocí tlačítka +

nebo – můžeme přidávat nebo mazat panely, šipkami přesouváme vybraný panel na požadovanou

pozici.

- Tlačítkem + přidáme třetí panel.

- Přepíšeme Popisek 3 textem Doporučené hotely,



85

vložíme jej do panelu v oblasti Obsah 3

- → Soubor → Uložit, kontrolu funkčnosti provedeme v živém zobrazení či v náhledu

v prohlížeči.

Na závěr můžeme provést úpravy Spry skládaček pomocí kaskádových stylů CSS, vyladíme

pomocí šablony stylů SpryAccordion.css,

29. lekce LAYOUT STRÁNKY

TVORBA LAYOUTU STRÁNKY

V současnosti se při vytváření layoutu webových stránek (rozvržení objektů na stránce)přešlo na

stylování pomocí kaskádových stylů CSS, na rozdíl od tabulkového rozvržení, které je datově

náročnější, hůře se udržují a dodržují standardy. Tvorba layoutů založená na stylech CSS se

skládá ze dvou hlavních komponent:

sada značek <div> - ty vytváří strukturu stránky.

sada pravidel CSS - pomocí nich se definují rozměry a formátují klíčové elementy

stránky.

- Zvolíme → Soubor → Nový v otevřeném dialogu zvolíme → Prázdná stránka → Typ stránky

:HTML → Rozvržení: žádný. Při této volbě nejsou v náhledu k dispozici žádné předvolby

layoutu. (K podobnému výsledku můžeme dojít rychleji při zobrazení uvítací obrazovky a

klepnutí na HTML ve sloupci Vytvořit nový).

- Zvolíme →Soubor → Uložit v zobrazeném dialogovém okně Uložit najdeme Lekce 07 a do

názvu napíšeme Layout-příjmení.html → Ok.

- Zvolíme z nabídkového řádku → Okno → Styly CSS , ve stejnojmenném panelu se přepneme,

pokud je to nutné do režimu →Vše.

- Klepneme na ikonu → Nové pravidlo, jako Typ selektoru zvolíme z roletky Tag (předefinuje


86

element HTML), do Názvu selektoru napíšeme nebo z roletky vybereme Body, v kolonce

Definice pravidla ponecháme Pouze v tomto dokumentu.

- Zobrazí se nám dialogové okno Definice pravidla CSS pro body, zvolíme Kategorii → Pozadí a

v Background-color pomocí kapátka vybereme světle růžovou barvu #FCF, přepneme do

Kategorie Blok a v seznamu pole Text-align (zarovnání textu)zvolíme center. Rozpracovaný

layout se zarovná na střed okna prohlížeče, zatímco text zůstane zarovnaný doleva, tato akce je

nutná pro starší prohlížeče (IE 5.x,aby se vše správně vykreslilo), v dalších krocích přepíšeme

zarovnání textu vlevo.

- Zvolíme Kategorii → Rámeček v části Padding ( vnitřní okraj) napíšeme v poli Top (horní) 0, to

stejné provedeme v poli Margin ( vnější okraj) →OK.

- Zvolíme → Soubor → Uložit. Zvolené vlastnosti pro body si můžeme prohlédnout v panelu


87

vlastnosti po klepnutí na body.

- samostatně změňte barvu pozadí na bílou.

DEFINICE VNĚJŠÍHO OBALU

- V panelu Styly CSS zvolíme ikonu→ Nové pravidlo, v zobrazeném dialogovém okně v poli

Název selektoru vybereme ID (použito pro jeden element HTML) do pole Název selektoru

napíšeme #obal a v roletce Definice pravidla musí být Pouze pro tento dokument →OK.

- V zobrazeném dialogu vybereme Kategorii Blok, v roletce Text-align vybereme left

(zarovnání textu doleva) → v kategorii Rámeček → do pole Width napíšeme hodnotu 760 px,

v části Margin (vnější okraj) zrušíme zatržení Stejné pro všechny a do pole Top napíšeme 0 a do

polí Right a Left zvolíme Auto →OK.Layout má pevnou šířku 760 px takže funguje i při

rozlišení 800x600 px,40 px navíc se používá pro zobrazení okrajů okna včetně postníků.Levé a

pravé okraje jsou nastaveny na Auto, aby se celý obsah stránky zarovnal na střed okna


88

prohlížeče,Zbývajících 40 px se rozdělí rovným dílem mezi levý a pravý vnitřní okraj a tím se

layout zarovná na střed.

30. lekce

OBAL STRÁNKY

OBAL A PRIMÁRNÍ ČÁSTI STRÁNKY

Nyní jsme přidělili značce <div> s identifikátorem #obal styly.DW nám umožní přímé přidání

značky <div> a přidělení identifikátoru.

- Otevřeme z nabídkového řádku nabídku → Okno → Vložit. V zobrazeném panelu Vložit

vybereme →

kategorii Rozvržení a v ní klepneme na ikonu Vložit tag Div.

- V zobrazeném dialogovém okně vybereme v roletce V místě textového kurzoru a v roletce

Identifikátor vybereme Obal →OK.

DW přidá do stránky novou značku <div> s výplní pro obsah, která obsahuje text „sem patří

iobsah pro id obal“.

Značka <div> s identifikátorem #obal slouží jako obalový element (kontejner) pro další značky

<div>, jejím účelem je omezení šířky layoutu. Nyní budeme přidávat další hlavní části layoutu,

ten je primárně tvořen ze tří částí, záhlaví

obsah

zápatí


89

Každá z těchto částí vyžaduje pravidlo CSS a značku <div>.

- Zvolíme z nabídkového řádku →Okno →Styly CSS → Vše → klepneme na ikonu Nové

pravidlo,

- v zobrazeném dialogu vybereme Typ selektoru: ID( ), napíšeme do pole Název selektoru:

#záhlaví a v poli Definice pravidla ponecháme: Pouze v tomto dokumentu → OK.

- V zobrazeném dialogu vybereme Kategorii:Rámeček a v ní Margin (vnější okraj), zrušíme

zatržení : Stejné pro všechny a do polí Top a Bottom napíšeme 12 px → OK.

Nyní budeme stejným způsobem definovat další pravidla CSS pro#obsah a #záhlaví.

- klepneme na ikonu Nové pravidlo,


#obsah a v poli Definice pravidla ponecháme: Pouze v tomto dokumentu → OK.

- V zobrazeném dialogu vybereme Kategorii:Rámeček a v Padding (vnitřní) a Margin (vnější

okraj), zrušíme zatržení : Stejné pro všechny a do polí Top napíšeme 0 px → OK.

Tímto bude obsah zobrazen hned pod záhlavím bez jakéhokoli okraje.

Třetí pravidlo můžeme vytvořit duplikováním pravidla pro záhlaví:

- v panelu Styly CSS označíme #zápatí, → kliknutím pravým tlačítkem vyvoláme lokální nabídku

a v ní vybereme Duplikovat, v zobrazeném okně v poli Název selektoru přepíšeme #zápatí →

OK.


90

Nyní má pravidlo #záhlaví a #zápatí stejné vlastnosti, jejich změnu či přidání můžeme

provést v panelu Styly CSS.

- v panelu Styly CSS → Všechna pravidla označíme #zápatí → klepneme na Přidat vlastnost a

z roletky vybereme do prvního pole Clear a do druhého pole Both. Tato vlastnost způsobí, že se

blok #zápatí zarovná až pod elementy v plovoucím umístění v části #obsah.

Nyní máme definovaná potřebná pravidla pro hlavní části layoutu a můžeme je postupně

přidat do stránky.

- Označíme text Sem patří obsah id „obal“, vymažeme ho.

- V panelu Vložit (otevřeme ho z nabídky → Okno) zvolíme Kategorii →Rozvržení v něm

klepneme na ikonu → Vložit tag Div.

- V zobrazené nabídce vybereme Vložit: Za začátek tagu a roletky vybereme <div id=“obal“> a

z roletky Identifikátor: záhlaví →OK. Tím jsme vložili značku <div> s identifikátorem # zápatí

do nadřazeného elementu s id #obal

Podobným způsobem vložíme dovnitř elementu #obal další značky (#obsah a #zápatí), abychom

tyto značky správně seřadili, použijeme Vložit: Za tag. Výplňový text nám ulehčuje orientaci na

stránce.

- V nástrojovém panelu Dokument napíšeme do pole Titul: Layout → Enter.



91

31. lekce OBLASTI S OBSAHEM

VKLÁDÁNÍ OBLASTÍ S OBSAHEM

Vytvořený základní layout je příliš obyčejný a jednoduchý, sofistikovanější rozvržení

obsahují navíc oblasti sousedící se značkami <div>, které tvoří jeho součást a jsou do nich

vnořené.

- - klepneme na ikonu Nové pravidlo,

- v zobrazeném dialogu vybereme Typ selektoru: ID(použito pouze …), napíšeme do pole Název

selektoru: #logo a v poli Definice pravidla ponecháme: Pouze v tomto dokumentu → OK.

Plánované logo bude zobrazeno jako obrázek na pozadí se šířkou 760 px a výškou 71 px,

kterou musíme specifikovat.

- - V zobrazeném dialogu vybereme Kategorii:Rámeček, do pole Height (výška) napíšeme 71 px,

v části Padding (vnitřní okraj) zrušíme zatržení : Stejné pro všechny a do pole Bottom napíšeme

12 px → OK.

Nyní jsme vytvořili selektor identifikátoru #logo pro značku <div>, kterou nyní umístíme

do značky <div> s identifikátorem #záhlaví.

- V panelu Vložit klepneme na ikonu Vložit tag Div, v zobrazeném dialogu vybereme z roletky


92

Vložit volbu Za začátek tagu a z rolrtky vpravo vybereme značku <div id =“zahlavi“>. Z roletky

Identifikátor vybereme logo → OK.

Protože jsme do elementu <div> s identifikátorem #záhlaví začali vkládat obsah, můžeme

výplňový text pomocí klávesy Delete vymazat.

Duplikací pravidla pro #logo vytvoříme další element a potom jej vložíme do záhlaví stránky.

- V panelu Styly CSS → Vše → pravým tlačítkem myši klepneme na selektor #logo, tím

vyvoláme lokální nabídku, v ní zvolíme Duplikovat, jakmile se zobrazí dialog, napíšeme do pole

Název selektoru #navigace → OK.

- V panelu Styly CSS vybereme selektor #navigace změníme v části Vlastnosti hodnotu Height ze

71 na 28, potom označíme vlastnost padding-bottom a odstraníme ji pomocí ikony koše v pravém

spodním rohu.

- V panelu Vložit → klepneme na ikonu Vložit tag Div a v zobrazeném dialogu vybereme Vložit:

Za tag, z roletky v pravo vybereme značku <div id=“logo“> a z roletky Identifikátor: navigace →

OK

- V panelu Styly CSS → Vše → pravým tlačítkem myši klepneme na selektor #navigace, tím

vyvoláme lokální nabídku, v ní zvolíme Duplikovat, jakmile se zobrazí dialog, napíšeme do pole

Název selektoru #banner → OK.

- V panelu Styly CSS v části Všechna pravidla vybereme selektor #banner a v části Vlastnosti

změníme hodnotu vlastnosti height z 28 na200.


93

- V panelu Vložit klepneme na ikonu Vložit tag Div a zobrazeném dialogu vybereme : Za tag,

<div id=“záhlaví“> a z roletky Identifikátor vybereme : banner → OK.

Dalším krokem je rozdělení oblasti s obsahem do dvou sloupců, proto musíme nejdříve

definovat styl pro každý sloupec.

- V panelu Styly CSS zvolíme → Nové pravidlo, v dialogu do pole Název selektoru napíšeme

#sloupec-levý, v poli Typ selektoru musí být: ID (…) → OK.

-V zobrazeném dialogu v kategorii: Rámeček napíšeme do pole Width (šířka) 365 px, z roletky

Float (plovoucí umístění) vybereme left (doleva) → OK.

Druhý sloupec můžeme jednoduše vytvořit duplikováním levého sloupce.

- - V panelu Styly CSS → Vše → pravým tlačítkem myši klepneme na selektor #sloupec-levý,

tím vyvoláme lokální nabídku, v ní zvolíme Duplikovat, jakmile se zobrazí dialog, napíšeme do

pole Název selektoru #sloupec-pravý → OK.

- - V panelu Styly CSS v části Všechna pravidla vybereme selektor #sloupec-pravý a v části


94

Vlastnosti změníme hodnotu vlastnosti float na right→ Enter.

- V panelu Vložit klepneme na ikonu Vložit tag Div, v zobrazeném dialogu vybereme: Za začátek

tagu, značku <div id=“obsah“> a z roletky Identifikátor: sloupec-levý → OK.

-- V panelu Vložit klepneme na ikonu Vložit tag Div, v zobrazeném dialogu vybereme: Za tag,

značku <div id=“sloupec-levý“> a z roletky Identifikátor: sloupec-pravý → OK.

- Vybereme výplňový text Sem patří obsah pro id „obsah“ a klávesou Delete jej vymažeme.

-→ Soubor → Uložit.

32. lekce

VKLÁDÁNÍ VÝPLNÍ

VKLÁDÁNÍ VÝPLNÍ

V minulé lekci vytvořený layout webové stránky je pro většinu málo přehledný, trvalo by

dlouho, než bychom vysvětlili, co jsme zamýšleli udělat. Proto je vhodné do připraveného obsahu

přidat více vizuálních výplní, v praxi rozlišujeme dva druhy výplní:

výplň pro obrázek

výplňový text

- Otevřeme → Soubor → Otevřít → Lekce 07 → Layout–příjmení.html.

Nejdříve budeme přidávat grafické výplně:

- Vybereme výplňový text Sem patří obsah pro id „logo“ a klávesou Delete ho vymažeme.

- Z nabídkového řádku otevřeme → Okno → Vložit v tomto panelu vybereme kategorii Běžné,

v ní klepneme na ikonu Obrazy. Z nabídky zvolíme Vyhrazené místo pro obraz.


95

- Zobrazí se dialogové okno a do pole Název napíšeme:Logo, do pole šířka: 760 výška: 71,

ostatní pole nebudeme vyplňovat → OK.

Stejný použijeme pro vytvoření výplní pro značky <div> s identifikátory #navigace a #banner.

- označíme výplňový text Sem patří obsah pro id „navigace“, vymažeme jej vložíme Vyhrazené

místo pro obraz, s názvem Navigace, šířka: 760 a výška:28 →OK.

- označíme výplňový text Sem patří obsah pro id „Banner“, vymažeme jej vložíme Vyhrazené

místo pro obraz, s názvem Banner, šířka: 760 a výška:200 →OK.

Nyní budeme přidávat základní výplňový text:

- Ukazatel myši vložíme do textu Sem patří obsah pro id „sloupec-levý, v selektoru značek

vybereme <div#sloupec-levý>, levou kurzorovou šipkou se posuneme na místo před značku <div

#sloupec-levý>, napíšeme text Hlavní nadpis, otevřeme z nabídkového řádku → Okno →

Vlastnosti.

- V panelu Vlastnosti značíme text Hlavní nadpis a v panelu Vlastnosti, v poli Formát vybereme

z roletky Nadpis 1.

- Vybereme výplňový text Sem patří obsah pro id „sloupec-levý a přepíšeme ho textem

Podnadpis.

- V roletce Formát v panelu Vlastnosti vybereme: Nadpis 2. Ukazatel myši umístíme ihned za

vložený text Podnadpis a stiskem klávesy Enter vytvoříme pod nadpisem prázdný odstavec.

Nyní bychom měli napsat několik odstavců výplňového textu, pro zrychlení práce máme již

potřebný výplňový text připraven v textovém souboru v lekci 07.

- Zvolíme →Soubor → Otevřít → najdeme Lekce 07 → soubor vyplnovy_text.html,

z nabídkového řádku zvolíme → Upravit → Kopírovat, soubor zavřeme, tím vrátíme do souboru


96

Layout-příjmení.html a vložíme jej pomocí CTRL + V na vyznačené místo.

Úplně stejný obsah včetně podnadpisu vložíme do pravého sloupce, můžeme to ale provést

pomocí příkazu Duplikovat.

- Ukazatel myši vložíme do levého sloupce, z nabídkového řádku zvolíme → Upravit → Vybrat

vše →, automaticky se vybere text pouze v levém sloupci. Vybraný text zkopírujeme CTRL+C.

- Nyní vybereme text Sem patří obsah pro id „sloupec-pravy“ a zkopírovaným textem jej stiskem

CTRL+V přepíšeme.

- Zvolíme → Soubor → Uložit.

Rozvržení stránky je nyní kompletní, je však žádoucí přesunout styly CSS z hlavičky

dokumentu do externí šablony, protože interní šablona platí pouze pro jednu stránku, externí

šablonu však lze propojit s více stránkami.

EXPORTOVÁNÍ STYLŮ

- → Styly CSS → vybereme styl pro body, pravým tlačítkem myši vyvoláme lokální nabídku a v

ní klepneme na příkaz Přemístit pravidla CSS.

V dialogu vybereme Nový seznam stylů → OK.

- V zobrazeném dialogu Uložit jako najdeme lekce 07, do pole název napíšeme příjmení.css →

OK.

DW přesunul vybrané styly z oblasti za značkou <head> do nově vytvořené externí šablony

a současně do aktuálního dokumentu vložil propojení s touto šablonou. Posledním krokem je

odstranění už nepotřebné značky <style>

- V panelu Styly CSS označíme <style>a pomocí ikony koše ji odstraníme.


97

Nyní máme připravený návrh layoutu webové stránky k použití, vytvořený návrh je

strukturovaný, přehledný a stylovaný pomocí externí šablony.

33. lekce

TVORBA FORMULÁŘŮ

Formuláře v papírové i elektronické podobě slouží pro sběr informací, v obou případech se

každá informace vkládá do své datové oblasti, aby ji bylo dobře rozumět. Formuláře jsou

strukturované, tištěné často používají k odlišení oddělené stránky nebo rámečky, webové

formuláře používají značku <form>. Výhodou online formulářů je možnost pracovat

s předvyplněnými poli, tím snižují pracnost a možnost chyb.

Elektronické formuláře používají tyto základní prvky:

• Textová pole- umožňují vkládat text a čísla, mají omezený počet znaků.

• Textové oblasti- umožňují vkládat text a čísla, používají se pro obsáhlý text.

• Přepínače- umožňují výběr jedné z více nabízených položek, výběrem jiné se

předcházející výběr zruší.

• Zaškrtávací pole- Výběr typu ano- ne, umožňují vybrat více položek současně.

• Seznamy- zobrazují pole ve formě roletek, mohou umožňovat výběr jedné nebo i více

položek.

• Skrytá pole- Slouží k uchovávání dat pro další zpracování formuláře ve formě, kterou

uživatel nevidí.

• Tlačítka- Potvrzují data ve formuláři nebo jej odesílají ke zpracování.


98

Po vyplnění se formuláře odesílají k dalšímu zpracování. Elektronické formuláře zahrnují značku

<form>, která obsahuje parametr „action“, jehož hodnota se provede po stisknutí potvrzovacího

tlačítka, může to být webová adresa jiné stránky, která formulář zpracuje.

PŘIDÁNÍ FORMULÁŘE DO STRÁNKY

→ Otevřeme z nabídkového řádku → Soubory → Otevřít → lekce 08 → kontakt- start.html.

→ Zvolíme Soubor uložit jako → do pole pro název napíšeme → kontakt-příjmení.html.

→ Původní soubor kontakt- start.html beze změny uzavřeme.

Nyní musíme přidat značku <form>, která bude obklopovat všechny ostatní prvky formuláře.

→ V elementu div s identifikátorem mainContent umístíme kurzor za otazník v nadpisu.

→ Otevřeme z nabídkového řádku → Okno → zde zaškrtneme →Vložit → v něm vybereme

kategorii → Formulář → klikneme na první ikonu s názvem Formulář. DW vloží do kódu

značku <form> na vybrané místo a v Návrhu jej vyznačí červenou přerušovanou čarou (pokud se

čára nezobrazí, zatrhneme v panelu → Dokumenty → Vizuální pomůcky → Neviditelné

elementy).

→ Otevřeme z nabídkového řádku → Okno → zatrhneme nabídku Vlastnosti a v tomto panelu

klepneme na ikonu složky vedle pole Akce. V zobrazeném dialogu najdeme v lekci 08 soubor

zpracovani_formulare.html → OK.

Pole akce uvádí cílovou stánku, která se zobrazí po potvrzení formuláře, v našem případě je akcí

pouze načtení děkující stránky.

→ Soubor → Uložit.

VKLÁDÁNÍ TEXTOVÝCH PRVKŮ


99

Textové prvky jsou základní formulářové prvky, používají značku <input>,sbírají data pomocí

krátkých frází: - textová pole

- textová pole Spry

- textové oblasti

Pro umožnění správného čtení jednotlivých formulářových prvků musíme nastavit v DW volbu,

která nám zajistí výstupní kód formuláře ve správném formátu.

Zvolíme z nabídkového řádku →Upravit → Předvolby → v zobrazeném dialogu zvolíme

Kategorii Usnadnění přístupu a v ní zatrhneme pole Objekty formuláře →OK.

34. lekce

OVLÁDACÍ PRVKY SPRY

TEXTOVÉ POLE SPRY

DW obsahuje také Spry objekty pro formuláře, které používají Ajax. Všechny ovládací prvky

Spry kombinují formuláře s JavaScriptem, to umožňuje validaci (ověření)vyplněných

formulářových polí, tj. , zda do formulářového prvku byla vložena odpovídající data, nebo zda

uživatel nezapomněl některé pole vyplnit.

Kurzor umístíme za textové pole Jméno, stiskem kláves Shift + Enter zalomíme řádek.

→ V panelu Vložit v kategorii Formulář klepneme na ikonu Ověření textového pole Spry.

V otevřeném dialogu do pole Identifikátor napíšeme email, do pole Popis napíšeme E-mail:, V

části styl vybereme volbu Přiložit tag popisu s použitím atributu for a v části poloha vybereme

volbu Před položkou formuláře → OK.

→ Soubor → Uložit. Pokud nás bude DW informovat o připojení externího JavaScriptu,

odsouhlasíme

jej → OK.


100

Pokud je to potřeba otevřeme panel Vlastnosti z nabídkového řádku Okno,.v něm budeme

upravovat ovládací prvek Spry.

→ Z roletky Typ vybereme volbu Emailová adresa, zatrhneme Ověřit při Onblur a volbu

Vyžadováno, což znamená, že před odesláním formuláře jej musí uživatel vyplnit.

SADA POLÍ.

První dvě textová pole uspořádáme do bloku s rámečkem s názvem (legenda)

→ klepneme vpravo od pole E-mail a stiskneme Enter,tím vytvoříme nový řádek.

→ Vybereme popisky Jméno a E-mail a textová pole.

→ V panelu Vložit klepneme na ikonu Sada polí → v zobrazeném dialogu do pole Popisy

napíšeme Vaše kontaktní informace → OK → Soubor → Uložit. Sada polí se projeví až při

živém zobrazení.

OVĚŘENÍ TEXTOVÉHO POLE

→ Klepneme za přidanou sadu polí, ale stále do červeného rámečku kolem formuláře→ Enter.

→ V panelu Vložit klepneme na ikonu Ověření textového pole Spry.

V otevřeném dialogu do pole Identifikátor napíšeme uzivjmeno, do pole Popis napíšeme

Uživ.jméno, V části styl vybereme volbu Přiložit tag popisu s použitím atributu for a v části

poloha vybereme volbu Před položkou formuláře → OK.

→ V panelu vlastnosti zatrhneme volbu Ověřit při OnBlur, volbu Vyžadováno a v poli Min.

Počet znaků napíšeme 6 → Soubor → Uložit.


101

POLE PRO HESLO

Kurzor umístíme za pole Uživ. Jméno, zalomíme řádek Shift + Enter, → v panelu Vložit

klepneme na ikonu Heslo ověření sady Spry.

V zobrazeném dialogu do pole Identifikátor napíšeme heslo, do pole Popis napíšeme Heslo, V



→ V panelu vlastnosti zatrhneme volbu Ověřit při OnBlur, volbu Vyžadováno, v poli Min. Počet

písmen napíšeme 8, v poli Min. počet čísel napíšeme 2.

Posuneme kurzor za pole pro heslo, zalomím řádek Shift + Enter, v panelu Vložit klepneme na

ikonu Potvrzení ověření sady Spry.

V zobrazeném dialogu do pole Identifikátor napíšeme potvrdheslo, do pole Popis napíšeme

Zopakujte heslo, V části styl vybereme volbu Přiložit tag popisu s použitím atributu for a v části


V panelu Vlastnosti zatrhneme volbu Vyžadováno, v roletce Ověřit platnost podle vybereme

volbu heslo ve formuláři form 1., zatrhneme volbu Ověřit OnBlur. Posuneme kurzor za pole pro

potvrzení hesla a stiskem klávesy Enter vytvoříme nový odstavec.

Nyní se vrátíme před pole pro uživatelské jméno, pokud je to třeba, vytvoříme stiskem Enter

prázdný odstavec a do něho napíšeme text: „Ke vstupu do online přehledu vašich rozpisů a plánů

cest si prosím vytvořte účet zadáním uživatelského jména a hesla. Uživ. jméno musí obsahovat

alespoň 6 znaků a heslo alespoň 8 znaků obsahujících minimálně 2 čísla.“

Napsaný text a všechny tři pole vybereme, v panelu Vložit klepneme na ikonu Sada polí,

v zobrazeném dialogu napíšeme Online nástroje → OK → Soubor → Uložit, tím jsme instrukce

i tři pole uzavřeli do sady polí.


102

35. lekce

TEXTOVÉ OBLASTI

TEXTOVÁ OBLAST

Tyto oblasti umožňují vložení většího množství textu, včetně zalamování řádků. Pokud

vložený text přesáhne fyzický prostor pro textovou oblast, automaticky se zobrazí posuvník.

Kurzor umístíme za poslední sadu polí, ale do formuláře, v panelu Vložit klepneme na ikonu

Sada polí a v zobrazeném dialogu napíšeme Vaše cesta →OK. V panelu Vložit klepneme na

ikonu Textová oblast.

V zobrazeném dialogu do pole Identifikátor napíšeme planovane, do pole Popis napíšeme

Cestovní plány, V části styl vybereme volbu Přiložit tag popisu s použitím atributu for a v části


Textová oblast se zobrazí hned za jejím popisem, klepneme za popis a stiskneme Shift + Enter,

tím zalomíme řádek.

Klepneme dovnitř prázdné oblasti a v panelu Vlastnosti do pole počáteční hodnota napíšeme


103

text: „Stručně popište, kam byste chtěli jet a na jak dlouho.“


PŘEPÍNAČE

Klepneme za textovou oblast, ale do sady polí, stiskem Enter se posuneme na další řádek a

napíšeme text: „Kolik vás bude cestovat?“, stiskneme Enter.

→ v panelu Vložit klepneme na ikonu Přepínač ověření sady Spry.

→ V zobrazeném dialogu přidáme tlačítkem + tři nové přepínače, přidáme popisky a hodnoty

těchto tlačítek.Hodnoty píšeme bez diakritiky.V části Rozvrhnout s použitím vyberte volbu

Zalomení řádku → OK.


ZAŠKRTÁVACÍ POLE

Umožňují zvolit více možností současně.

Klepneme za skupinu přepínačů, stiskem Enter vytvoříme prázdný řádek a napíšeme do něho

„Jaké služby chcete, abychom zařídili?“→ Enter.

→ V panelu Vložit klepneme na ikonu Skupina zaškrtávacích polí , v dialogu přidáme tlačítkem

+ jedno zaškrtávací pole , v poli popis přepíšeme zaškrtávací pole na Výlety, Doprava a Hotely,

do pole Hodnota postejné, ale malými písmeny a bez diakritiky→ OK


TVORBA SEZNAMŮ

Jedná e o roletkové seznamy, které umožňují více voleb, podobně jako sada zaškrtávacích polí.


104

Kurzor vložíme za popisek posledního zaškrtávajícího pole,Entrem vytvoříme prázdný řádek a

do něj napíšeme „Kdy chcete cesto vat?“

→ V panelu Vložit klepneme na ikonu Seznam/Nabídka.

V zobrazeném dialogu napíšeme do pole Identifikátor cas, pole popis necháme prázdné, v části

styl vybereme volbu Žádný tag popisu → OK.

→ Otevřeme panel Vlastnosti a v něm klepneme na tlačítko Hodnoty seznamu.

V zobrazeném dialogu ve sloupci Popis napíšeme Ihned → TAB →do sloupce Hodnota

napíšeme ihned→ TAB → V příštích dvou měsících →dvamesice →TAB → Někdy letos →

TAB →letos → OK

→ V panelu Vlastnosti vybereme v nabídce Na začátku vybrané volbu Ihned a jako Typ zvolíme

Nabídka. To nám neumožňuje vybrat více položek najednou.

→Soubor →Uložit.

POTVRZOVACÍ TLAČÍTKO

Toto tlačítko spouští akci navázanou na odeslání formuláře.

Klepneme kamkoliv do sady polí, v selektoru značek vybereme značku <fieldset> a posuneme se

kurzorovou šipkou doprava mimo vybranou sadu polí → Enter → v panelu Vlastnosti klepneme

na ikonu Tlačítko a v zobrazeném dialogu napíšeme do pole Identifikátor odeslat, v části Styl

vybereme volbu žádný tag popisu → OK.

V panelu Vlastnosti zatrhneme Akci Odeslat formulář → Soubor → Uložit.


105

TESTOVÁ ČÁST


106

Test č. 1

Úvod do Adobe DW CS 4 Úkoly:

1. Nastavte Layout nově vytvářené www stránky na 2 pevné sloupce, záhlaví a zápatí.

2. Zobrazení dokumentu nastavte tak, aby bylo vidět současně zdrojový kód www stránky

i její náhled.

3. Změňte nadpisy h1 v záhlaví (Prohlédněte si s námi Umbrii) i v hlavním sloupci („ Vy

se bavte. My obstaráme vše ostatní.).

4. Z textového dokumentu DW/lekce 1/dovolená.doc zkopírujte text pod nadpis

v hlavním sloupci.

5. Do levého sloupce místo textu vložte obrázek z DW/obrazky/zahrada.jpg.

6. Stránku uložte jako Umbria- Vaše příjmení do Lekce 01.

ROZVRŽENÍ STRÁNKY (LAYOUT)

Adobe Dreamweaver CS4 nabízí k použití 32 různých rozvržení, profesionálně vytvořených

pomocí stylů CSS, což nám usnadňuje práci, protože byly testovány ve všech hlavních

prohlížečích a vyhovují webovým standardům. Při tvorbě většího počtu webových stránek pro

jednu osobu či událost, by měly mít všechny stránky stejný layout, aby v nich dokázal návštěvník

dobře a rychle orientovat.

- zvolíme ze Souboru→ Nový, v dialogovém okně Nový dokument v prvním sloupci vybereme

„Prázdná stránka, ve sloupci Typ stránky vybereme HTML, ten se běžně používá při tvorbě

webových stránek.

Ve třetím sloupci máme na výběr z různých typů layoutů 1 až 3 sloupcové, s pevnou nebo

s proměnnou šířkou založenou na procentech nebo jednotce em, s nebo bez záhlaví či zápatí

- ve sloupci „Rozvržení“ zvolíme 2 sloupce pevné, postranní sloupec vlevo, záhlaví, zápatí.

V posledním sloupci dole volíme „Typ dokumentu“ XHTML 1.0 Transitional, což je

přechodový jazyk mezi HTML a novějším XHTML,


107

Nová webová stránka se zobrazí jako dokument s výplňovým textem, ten tam pro lepší orientaci a

představivost vložili tvůrci layoutu. Do tohoto okna budeme vkládat svůj vlastní obsah a

upravovat vzhled stránky

Nově vytvořenou stánku je vhodné ihned uložit→Soubor→Uložit, zobrazí se dialog uložit jako ,

najdeme složku C→Dreamweaver kurz→soubor→lekce→lekce 01


108

do pole Název napíšeme Umbria-příjmení.html a→ uložit.

ZOBRAZENÍ DOKUMENTU

DW nám nabízí 4 základní možnosti zobrazení:

- Kód- zobrazuje se pouze zdrojový kód stránky

- Návrh- zobrazuje se pouze webová stránka tak, jak bude vypadat. vytvářené stránky.

- Rozdělit- kombinuje jak zdrojový kód, tak i návrh, tvůrce www stránky tak má možnost

kontroly

- Živé zobrazení- vykresluje stránku v prohlížeči Dreamweaveru

První tři zobrazení jsou úzce propojená, jakákoliv provedená změna se zobrazí ve všech

pohledech.

ZMĚNA TITULKU STRÁNKY

Titulek webové stránky se zobrazuje v titulkovém panelu okna prohlížeče a je klíčovým prvkem

používaným vyhledavači k indexování webových stránek, proto je nutné, abychom změnili

výchozí název dokumentu „Bez názvu“ (untitled).

V nástrojové liště dokumentu v poli „Název“ vyberte Dokument bez názvu a napište Prohlídka

měst v Umbrii →enter

ZMĚNA NADPISŮ

Výplňové texty a nadpisy nám pomáhají vizuálně vyplnit layout tak, aby vypadal podobně jako

s konečným obsahem umístěným do stránky, můžeme je jednoduše změnit.

- Vyberte výplňový text Záhlaví (poklepáním myší), poté napište text „Prohlédněte si s námi

Umbrii“.

Dvouklikem vyznačíme slovo, trojklikem celý odstavec nebo nadpis, tažením myší při stisknutém

levém tlačítku libovolný text.

Stejným způsobem přepíšeme nadpis v pravém hlavním odstavci „Hlavní obsah“na text „ Vy se

bavte. My obstaráme vše ostatní.“všimneme si, že ve zdrojovém kódu jsme pouze nahradili text,


109

ale formátovací značka,párový tag <h1>,která označuje nadpis, zůstala u obou nadpisů

zachována.

VKLÁDÁNÍ TEXTU

DW poskytuje možnost vkládání textu kopírovaného z jiných zdrojů (MS Office, OpenOffice,

poznámkový blok, atd) a ponechává tolik z původního formátování, kolik požadujeme. V praxi si

totiž zákazník dodává svoje texty po obsahové a jazykové korektuře a tvůrce webových stránek je

pouze vkládá do dohodnutého layoutu.

- vybereme výplňový text v pravém sloupci bez nadpisu až po zápatí, ale bez něj.

- klávesou Delete jej vymažeme.

- Z nabídkového řádku otevřeme→Soubor→otevřít→místní disk C→DW kurz→obsah→

→lekce→lekce 01→dovolená.rtf. C (celý text vybereme a zkopírujeme do schránky (CTRL+C).

- V DW umístíme kurzor pod nadpis v pravém sloupci a vložíme sem zkopírovaný text

(CTRL+V). Celý text se okamžitě zformátuje jako odstavce se značkou <p>( jedná se o párový

tag).

- Ukazatelem myši vybereme výplňový text Zápatí a přepíšeme jej „Prohlídka měst v Umbrii“

- zalomíme řádek →Shift+Enter. Poté napíšeme text Kontaktujte nás Ve zdrojovém kódu byl

tento povel zapsán jako nepárový tag <br>.

VKLÁDÁNÍ OBRÁZKŮ

Vkládání obrázků je velmi přímočaré, podobně jako text, které také dodává zadavatel

stránky.Jakmile umístíme obrázek do stránky, můžeme jeho vlastnosti upravovat buď pomocí

panelů Styly CSS nebo Vlastnosti.

- vybereme veškerý obsah levého sloupce (sidebar 1) včetně nadpisu a vymažeme jej (Delete)

- V selektoru značek ( lišta pod dokumentovým oknem)vybereme značku <h3> a vymažeme ji.

Tvůrce layoutu do tohoto sloupce totiž vložil nadpis, a pokud

ho nebudeme potřebovat, musíme odstranit i značku pro nadpis.

- Z nabídky Vložit vybereme →Obraz a dialogovém okně Vyberte zdroj obrazu označíme

souborový systém, v oblasti hledání vybereme →místní disk C→DW kurz →obsah→lekce

→obrázky→ Zahrada.jpg →OK .V dialogovém okně Atributy tagu obrazu pro usnadnění


110

přístupu do kolonky Alternativní text napíšeme Zahrada→OK. Tento text se bude zobrazovat

v případě, že se obrázek nezobrazí, např. některá mobilní zařízení, a pomůže pochopit obsah

stránky.

- ukazatel myši vložíme na začátek odstavce pravého sloupce (hlavní obsah, mainContent), před

větu Přijeďte si… a stejným způsobem jako v předešlém případě vložíme obrázek „Italské

horské město“ se stejným alternativním textem.

- Z nabídkového řádku →Okno otevřeme panel→Vlastnosti.

Z roletky Třída vybereme fltrt nebo fltlft (float right nebo left, zarovnej vpravo,

vlevo).Ponecháme obrázek vpravo a text jej bude obtékat vlevo.→Uložit.

Stránka nyní obsahuje jak text, tak i obrázky vložené do layoutu CSS, stránka vypadá dobře

a se bude zobrazovat ve všech prohlížečích.


111

Test č. 2 Úpravy pomocí kaskádových stylů

Úkoly:

1. Otevřete vámi vytvořenou stránku Umbria-příjmení.html z lekce 01

2. Proveďte změnu barvy pozadí těla stránky (body) na bílou (# FFF)

3. Do záhlaví vložte pomocí nového pravidla CSS na pozadí obrázek z DW/obrazky/záhlaví-

oblaka.jpg.

4. Změňte v textu záhlaví font písma na Georgia a barvu písma na bílou.

5. V hlavním sloupci změňte velikost písma na 80%.

6. V hlavním sloupci změňte ve větě:“Po dva týdny si budete …“ řez písma na kurzívu a

barvu písma na modrou (# 00F).

7. Stránku uložte jako Umbria-příjmení.html do lekce 02.

VYBÍRÁNÍ A ÚPRAVA STYLŮ CSS


Webová stránka je složená z HTML,CSS a JavaScriptu pomocí kterých ji budujeme.

HTML je obsah- materiál vkládáme na webstránku v okně Návrh.

CSS zajišťuje vzhled a rozvržení stránky, tj. kde se jednotlivé elementy umístí,použití

barev,pozadí,…



112


K úpravě vlastností pomocí CSS můžeme použít jakékoliv značky HTML, např. <body>(tělo).





- vybereme selektor body klepneme na ikonu upravit styl ikona tužky na panelu vpravo dole.




pozadí) → OK.


stránky se změnilo ze šedé na bílou barvu, barvy ostatních pozadí se nezměnily. Pomocí tlačítka




113




stránku uložíme → Soubor→Uložit.


Zatímco obrázky do popředí se vkládají přímo do stránky, obrázky na pozadí se umísťují pomocí

CSS stylů.




modrá čára.


zobrazujícího vlastnosti současně vybraného elementu.


pro .twoColFixLtHdr #header h vybereme kategorii Pozadí → Procházet vedle Background-

image.

- V zobrazeném dialogu najdeme v Oblasti hledání →místní disk C→DW kurz →soubory

→lekce →obrázky →záhlaví-oblaka.jpg →OK.


114

- Z roletky Background- repeat vybereme no repeat→OK→Soubor →Uložit .

ÚPRAVA TEXTŮ,PÍSMA A BAREV

Kaskádové styly nám umožňují kromě změny vzhledu elementu také změnu vzhledu pouze

pro značku <tag> na určitém místě ve stránce.








115










zvolíme % ze seznamu voleb OK→Soubor→Uložit.








116






prohlížeče jej zobrazují kurzívou. Ve zdrojovém kódu i v selektoru značek je zapsán tag <em>





V okně Definice pravidla vybereme kategorii Typ a po otevření palety barev vybereme modrou

→OK→ Uložit .


117

Pravidla stylů nyní obsahují nové pravidlo, které můžeme použít na jakýkoliv další text

uvnitř elementu div#mainContent , když vybraný text zvýrazníne kurzivou, automaticky na něj

bude použito obarvení dle definovaného pravidla.

Tímto jsme vytvořili první webovou stránku.Na konci práce s novou stránkou si ji vždy

prohlídneme v prohlížeči, v praxi máme nainstalováno více prohlížečů, ve všech bychom měli

zkontrolovat, jak se stránka zobrazuje.

→ Soubor →náhled v prohlížeči.

Test č. 3

Externí šablona CSS

Úkoly:

1. Otevřete soubor DW/lekce 02/onas-start a uložte jej jako onas-Příjmení.html do lekce

02.

2. Připojte jako Odkaz externí šablonu kaskádových stylů z DW/lekce 02/mojestyly.css.

3. Textu v hlavním sloupci „Seznamte se s našimi zaměstnanci“ přidělte pomocí nového

pravidla font Georgia a modrou barvu # 06F.

4. Odstavec textu v levém sloupci pod obrázkem zmenšete na 80% velikost a přidělte mu

font-style: Italic.

5. Seřaďte pravidla CSS tak, aby byly pohromadě pravidla pro stejnou oblast stánky.

PROPOJENÍ EXTERNÍ ŠABLONY STYLŮ CSS V ADOBE DREAMWEAVER CS4




118









odstavce, obrázek záhlaví je použit i v zápatí

- →Soubor→Uložit


stránky na řádku 7: <link href="mojestyly.css" rel="stylesheet" type="text/css"

media="screen" />.



Selektor např. h1


v DW se vytváří styly v rozhraní s roletkami a volbami, Html kód za nás zapisuje DW, pravidla





119





kurzor vložíme do textu „Seznamte se s našimi zaměstnanci“ a v selektoru tagů vybereme <h1>


kurzoru v textu.








štětečkem modrou barvu hexadecimální č.#06F →OK.

Pokud potřebujeme změnit toto pravidlo, můžeme to provést v panelu →Styly

CSS→Upravit styl.

Tímto způsobem jsme změnili typ písma a barvu textu pro značku <h1> uvnitř elementu


120

s identifikátorem # mainContent. Jakmile do tohoto elementu vložíme novou značku <h1>, bude

na text v této značce použito stejné pravidlo.Adobe

DW CS4 rozděluje vlastnosti CSS do 8 kategorií:Typ,Pozadí,Blok,Rámeček

- umístíme kurzor do textu „Výhled z našich kanceláří v New Yorku“, v selektoru značek

vybereme odstavec <p> v panelu →Styly CSS→Nové pravidlo →ubereme specifikaci až na

#sidebar1 p→OK

V dialogovém okně „ Definice pravidla CSS pro # sidebar1 p v mojestyly“ vybereme

Kategorii Typ,v poli Font-size napíšeme 80 a v roletce vybereme jednotky % a v roletce

Font.style vybereme Italic

!! Jiný způsob změny font-style je z panelu Vlastnosti→přepinač I (kurzíva), používá se

pro vložení významového důrazu, DW vloží párovou značku <em> text </em>!- v Kategorii

Rámeček zrušíme v poli Margin (vnější okraj) stejné pro všechny a v poli Top napíšeme 0

→OK→soubor → uložit vše


121

ZMĚNA POŘADÍ VLOŽENÝCH PRAVIDEL

Pro snadnější hledání jednotlivých pravidel v šabloně stylů je výhodné je po vytvoření přesunout

tak, jak to odpovídá jejich důležitost, nebo sdružovat více podobných pravidel, máme však

možnost je přesouvat do jiného umístění.

- otevřeme panel Styly CSS→Vše→rozbalit všechna pravidla + a myší přetáhneme #

mainContenz h1 do pozice pod .twoColFixLtHdr #mainContent

- myší přetáhneme #sidebar1 p do pozice pod .twoColFixLtHdr #sidebar1

- Soubor,uložit vše ,tím uložíme provedené změny jak souboru HTML, tak i v souboru CSS.

Test č. 4 Nastavení pravidla pro vlastní třídu

Úkoly:

1. Otevřete z DW/lekce 02/onas-příjmení.html.

2. Vytvořte nové pravidlo pro třídu s názvem Jméno a přidělte mu pravidlo pro font-

variant: small-caps (kapitálky).

3. Pomocí nově vytvořené třídy zformátujte všechna křestní jména osob v hlavním sloupci

kapitálkami.

4. Otevřete šablonu mojestyly z DW/lekce 02, přejmenujte ji tisk-Příjmení.css a připojte ji

k vytvořené stránce.

5. Z připojené tiskové šablony vymažte všechny styly kromě těch se selektory #header h1 a

footer.

6. Změňte v tiskové šabloně barvu nadpisu h1 v záhlaví na šedou #CCC.

7. Upravte styl pro zápatí tak, aby bylo zápatí při tisku skryto ( v kategorii Blok zvolte

Display: none).

Soubor uložte jako onas-Příjmení.html





122

potřebujeme.






POUŽITÍ STYLŮ



slovem




v dokumentu.

Vybraný text se formátuje kapitálkami a indikátor v selektoru značek obsahuje název třídy:

<span.jméno>.Třída se přidala do textu pomocí tagu (značky) <span>


použijte opět třídu .jméno ., prohlédneme si stránku v živém zobrazení nebo v prohlížeči, potom



123


Soubory CSS mohou také poskytovat styly pro jiná média, např. pro tisk, vytvořené

mojestyly.css byly navrženy pro zobrazení stránky na obrazovce PC. Tiskové styly často vylaďují

barevnou kombinaci, aby se stránka lépe vytiskla, skrývají nepotřebné části stránky, vylaďují

velikosti či layout, aby více odpovídal použitému médiu, tedy papíru.

Jedné stránce můžeme přiřadit více šablon, jakmile se stránka vykreslí pro tisk, bude tiskové

zařízení hledat tiskovou šablonu stylů, a pravidla v ní se vezmou v potaz. Pokud ji nenajde,

tiskárna rozliší mezi pravidly pro obrazovku a pravidly pro všechny typy médií.

Výchozím zobrazovacím médiem v DW je obrazovka, umožňuje však vykreslení i v jiných

stylech.

- z nabídky → Zobrazení →Panely nástrojů→Styl vykreslení, panel se objeví vlevo nad

dokumentovým oknem.

PŘEVEDENÍ STÁVAJÍCÍ ŠABLONY STYLŮ NA TISKOVOU

Nejvýhodnější je nevytvářet zcela novou tiskovou šablonu, ale vytvořit ji převedením již

vytvořené šablony (mojestyly.css), přejmenováním šablony, úpravou stávajících pravidela

přidáním nových pravidel.

- z nabídky otevřeme → Soubor → Otevřít →DW kurz →Lekce → Lekce 02 → mojestyly.css .

- →soubor →Uložit jako napíšeme příjmení-tisk.css →Uložit.

- Otevřeme panel → Styly CSS → Připojit seznam stylů. Z nabídky Procházet vybereme

→příjmení-tisk.css →,.přidat jako odkaz a v roletce média vybereme tisk → OK .


124

Tím se připojí nová položka – příjmení-tisk.css k šabloně mojestyly.css, a my můžeme

některá pravidla upravovat nebo zcela odstranit.

- zavřeme soubor příjmení-tisk.css beze změny a dokument příjmení-onas.html→ soubor

→Uložit.

SKRYTÍ NEPOTŘEBNÝCH ČÁSTÍ STRÁNKY

- otevřeme v panelu nástrojů →Styl vykreslení → Vykreslit zobrazení při tisku

- ukazatel myši vložíme do textu zápatí, v panelu Styly CSS → zvolte Vše a rozbalíme + ,

vybereme selektor twoColFixLtHdr #footer →Upravit styl .

V dialogovém okně „Definice pravidla …“ zvolíme Blok, z roletky Display → none (žádné) →

OK.

Tím se zápatí stránky skryje, pokud budeme stránku prohlížet v zobrazení pro tisk.Obsahuje totiž

hypertextový odkaz, který slouží pro přepínání mezi stránkami v prohlížeči, což je při tisku

nepoužitelné

ZAJIŠTĚNÍ SPRÁVNÝCH BAREV PRO TISK

Je potřeba zajistit, aby byl text nadpisu <h1> v záhlaví vidět, i když se nebudou tisknout

obrázky v záhlaví, protože můžeme tisknout v některých případech stránku bez obrázků na

pozadí (vkládali jsme ja pomocí příkazu background-image. Proto musíme změnit barvu nadpisu

v záhlaví z bílé na světle šedou.

- v panelu Styly CSS označíme Vše a vybereme „.twoColFixLtHdr #header h1“

- → Upravit styl , v zobrazeném dialogu vybereme kategorii Typ a v ní color a pomocí kapátka

zvolíme světlešedou barvu # CCC.→OK .


125

Text „Cestovní kancelář Tam a zpět“ bude vidět i v případě tisku, a to ať bude mít uživatel

nastavenou volbu tisk obrázků na pozadí, nebo ne, protože se nadpis vytiskne světle šedě na

tmavém pozadí (nebo na žádném).


ODSTRANĚNÍ NECHTĚNÝCH STYLŮ

Nyní je v připojené šabloně tisk-ze.css mnoho stylů shodných s šablonou mojestyly-ze.css,

abychom snížili velikost souboru, je nutné pouze ta pravidla, která jsou nová nebo změněná

oproti těm v mojestyly.css.

- v panelu Styly CSS vybereme → Vše → Tisk- ze.css označíme myší např. #sidebar 1p a potom

jej pomocí ikony odpadkového koše vymažeme.

Jiný způsob vymazání nepotřebných pravidel:

- → Soubor →Otevřít → tisk-ze.css a zde vybereme myší příslušné pravidlo a ručně jej

smažeme (Delete).

- Tímto způsobem vybereme a smažeme všechny styly mimo těch se selektory „ twoColFixLtHdr

# header h1“ a „twoColFixLtHdr # footer“, jakmile vymazání dokončíme, zbudou nám

v šabloně pouze tato dvě pravidla.

- → Soubor →Uložit vše. Potom postup uložení opět zopakujeme.

Tím je tisková šablona připravena k použití, ke zjištění rozdílů ve formátování na obrazovce

a při tisku použijeme panel nástrojů Styl vykreslování. Tiskárna čte obě šablony stylů.


126

Test č. 5 Úpravy CSS stylů

Úkoly:


2. Upravte pravidlo CSS stylů pro Body, pozadí změňte na růžové

3. Vložte do záhlaví obrázek oblaka.jpg (grafické pozadí)

4. Do zápatí vložte stejný obrázek jako je v záhlaví

VYBÍRÁNÍ A ÚPRAVA STYLŮ CSS (kaskádové styly).


Webová stránka je složená z HTML (zdrojový kód),CSS a JavaScriptu, pomocí kterých ji

budujeme.

HTML je obsah- materiál vkládáme na vytvářenou webovou stránku v okně Návrh.

CSS zajišťuje vzhled a rozvržení stránky, tj. kam se jednotlivé elementy umístí, použití barev

textu, tabulek, okrajů, rámečků, pozadí,…



K úpravě vlastností pomocí CSS můžeme použít jakékoliv značky HTML, např. <body> (tělo),

<p> (odstavec), <h1> (nadpis), atd.





- vybereme selektor body klepneme na ikonu upravit styl (ikona tužky na panelu vpravo dole).



127



pozadí) → OK.


stránky se změnilo ze šedé na bílou barvu, barvy ostatních pozadí se nezměnily.Pomocí tlačítka






stránku uložíme →Soubor→Uložit.


Zatímco obrázky do popředí se vkládají přímo do stránkypomocí nabídky Vložit, obrázky na

pozadí se umísťují pomocí CSS stylů.


128




modrá čára.


zobrazujícího vlastnosti současně vybraného elementu (záhlaví).


pro .twoColFixLtHdr #header h“- vybereme kategorii Pozadí → Procházet vedle Background-

image.

- V zobrazeném dialogu najdeme v Oblasti hledání →místní disk C→DW kurz →soubory →lekce

→obrázky →záhlaví-oblaka.jpg →OK.

- Z roletky Background- repeat (opakování) vybereme no repeat→OK→Soubor →Uložit .

PRÁCE V ZOBRAZENÍ KÓD, NÁVRH A ROZDĚLENÍ

V nástrojové liště můžeme přepínat mez zobrazením Kód- zobrazuje se pouze zdrojový kód

stránky, Návrh, zobrazuje se pouze grafický vzhled stránky a Rozdělení, ve kterém vidíme jak

zdrojový kód, tak i grafický návrh. Pokud vybereme lib.text v jednom zobrazení, je vybrán i ve

druhém, toho můžeme využívat při kontrole zapisování tagů, který provádí automaticky DW.


129

Test č. 6 ÚPRAVA TEXTU- PANEL VLASTNOSTI

Úkoly:


2. Změňte v záhlaví font písma na Georgia…, a barvu písma na bílou.

3. V hlavním odstavci změňte velikost písma na 90%.

4. V hlavním obsahu označte větu Po dva týdny si budete… a vyberte kurzivu.

5. Přidejte pravidlo, které text v hl. odstavci napsaný kurzívou obarví modře.

ÚPRAVA TEXTŮ, PÍSMA A BAREV

Kaskádové styly nám umožňují kromě změny vzhledu elementu také změnu vzhledu pouze pro

značku <tag> na určitém místě ve stránce.









130









zvolíme % ze seznamu voleb, →OK→Soubor→Uložit.












prohlížeče jej zobrazují kurzívou.Ve zdrojovém kódu i v selektoru značek je zapsán tag <em>




131



V okně Definice pravidla… vybereme kategorii Typ a po otevření palety barev vybereme modrou

→OK→ Uložit .

Pravidla stylů nyní obsahují nové pravidlo, které můžeme použít na jakýkoliv další text uvnitř

elementu div#mainContent , když vybraný text zvýrazníme kurzivou, automaticky na něj bude

použito obarvení dle definovaného pravidla.

Tímto jsme vytvořili svou první webovou stránku.Na konci práce s novou stránkou si ji

vždy prohlídneme v prohlížeči, v praxi máme nainstalováno více prohlížečů, ve všech

nejpoužívanějších bychom měli zkontrolovat, jak se stránka zobrazuje.

- → Soubor →náhled v prohlížeči.- (Mozilla, Explorer, Google Chrome, Opera, …).


132

Test č. 7 EXTERNÍ ŠABLONA CSS

Úkoly:

1. DW kurz→ lekce 02→ onasstart.html.

2. Z lekce 2 připojte externí šablonu „Mojestyly.css“.

3. Změňte v hlavním sloupci v h1 v pravidle CSS velikost textu na 36 px a barvu na

modrou.

4. Z lekce 2 připojte externí šablonu tisk.css

PRÁCE S KASKÁDOVÝMI STYLY

Většina stylů CSS je uložena v externí šabloně stylů, potom mohou být všechny vytvářené

stránky propojeny s touto šablonou. Tímto způsobem je umožněna jednoduchá změna stylů na

všech webových stránkách, propojených s externí šablonou. Navíc to umožňuje vypracovat více

externích šablon tím je možno si vybírat různý vzhled pro stejný obsah. Tento způsob práce vede

ke specializaci grafiků, někteří se věnují pouze vytváření těchto externích šablon a tvůrci www

stránek si mohou kupovat.

PROPOJENÍ EXTERNÍ ŠABLONY STYLŮ CSS V ADOBE DW CS4


133











odstavce, obrázek pozadí v záhlaví je použit i v zápatí

- Soubor→Uložit vše.


stránky na řádku 7: <link href="mojestyly.css" rel="stylesheet" type="text/css" media="screen"


134

/>.



Selektor např. h1


v DW se vytváří styly v rozhraní s roletkami a volbami, HTML kód za nás zapisuje DW, pravidla








kurzor vložíme do textu „Seznamte se s našimi zaměstnanci“ a v selektoru Značek (tagů)

vybereme <h1>.


kurzoru v textu.



135







štětečkem modrou barvu hexadecimální č.#06F →OK→soubor →Uložit vše.

Tímto způsobem uložíme nejen změny ve zdrojovém kódu webové stránky, ale i změny v CSS

stylech v souboru mojestyly.css.


136

Test č. 8 NASTAVENÍ VLASTNÍCH TŘÍD

Úkoly

1. Otevřeme DW kurz/lekce03/onas.html.

2. Nastavíme nové pravidlo pro třídu .jméno, font-variant:small caps

3. V hlavním sloupci převedeme křestní jména na small caps.

4. Vytvoříme třídu Profil pro obrázek a oba odstavce textu.

5. Pomocí třídy FLTRT (FLTLFT) nechte obtékat obrázky střídavě zlevy a zprava.




potřebujeme.





137



POUŽITÍ STYLŮ



slovem













třídu.




138








→OK.


139




















140





Test č. 9 Nastavení vlastních tříd

Úkoly:

- Otevři soubor onas-příjmení.html.

- Přidej nové pravidlo CSS pro selektor Třída v mojestyly.css s názvem.Jméno

- Definuj nové pravidlo: pro font variant zvol small-caps.

- Označuj postupně jména pracovníků cestovou a z panelu Vlastnosti jim přiděl třídu

.Jméno.

- Vlož tag div z panelu Vložit pro část stránky (fotografie pracovníka + 2 příslušné odstavce

textu), označ ji jako třídu s názvem selektoru .Profil.

- Definuj pravidlo pro .Profil: v kategorii Umisťování vyber v kolonce Overflow Auto.

- stejně to proveď pro ostatní pracovníky.

- Jednotlivé fotografie nech pomocí třídy fltlft nebo fltrt obtékat střídavě textem zleva

nebo zprava.




potřebujeme.





141



POUŽITÍ STYLŮ



slovem













142


třídu.










→OK.


143




















144





Test č. 10 Import textu, nadpisy, seznamy

Úkoly:

- Otevři soubor santorini-start.html a ulož jej jako santorini-příjmení.html

- Najdi a okopíruj první část textu z santorini.txt v lekci 3.

- Vlož jej na místo „sem patří text“ v santorini-příjmení.

- To samé proveď s druhou částí textu.

- Převeďte slova „Místa“ a „Pláže“ v santorini-příjmení na nadpisy <h3>.

- Převeďte odstavce pod <h3> nadpisy „Místa“ a „Pláže“ na neuspořádaný (odrážkový

seznam).

- Odsaďte taxt odstavců co řekli jednotlivé osoby

IMPORT TEXTU

-→ Soubor → Otevřít →C →DW kurz→soubor →Lekce→Lekce 03 →santorini-start, tím

si otevřeme počáteční dokument v DW, ve kterém bude vytvářet text, odrážkové , číslované

seznamy a tabulky.

- Zvolíme →Soubor → Uložit jako a uložíme soubor pod názvem santorini-příjmení.html,

původní soubor Santorini-start zavřeme beze změny!

V dokumentovém okně uvidíme webovou stránku cestovní kanceláře Tam a zpět, obrázky již


145

byly na stránku vloženy a nyní budeme pracovat s textem.

- →Soubor → Otevřít → C →DW kurz→soubor →Lekce→Lekce 03 → santorini.txt, tím tento

dokument otevřeme. V tomto dokumentu můžeme jeho obsah upravovat, kopírovat a vkládat ho

přímo do vytvářených webových stránek.

- Vyberte všechen text od „vítejte v ráji … až po výlety loděmi a další.“ → CTRL + C , tím ho

zkopírujeme do schránky.Vrátíme se na webovou stránku Santorini- příjmení.html a kurzorem

myši označíme frázi „sem patří text“ , která je umístěna hned za prvním obrázkem.

- →CTRL + V, tím vložíme text ze schránky na vybrané místo. Vložený text se naformátuje jako

odstavce pomocí tagů <p>. Odstavce dostaly přidělený styl s typem písma, které je v již připojené

externí šabloně stylů.

Dokončíme kopírování textu z poznámkového bloku.

- otevřeme santorini.txt, označíme text, který začíná „Dolores a Tom a zkopírujeme jej do

schránky, poznámkový blok beze změny zavřeme (na záložce santorini.txt klepneme na symbol

x) a vrátíme se na webovou stránku, označíme text „sem patří text“ pod fotografií budovy a

vložíme text ze schránky.

→ Soubor →Uložit.

VYTVOŘENÍ NADPISŮ

Text by se měl na webové stránce formátovat tak, aby dával smysl, byl přehledný a celkově

srozumitelný. Nadpisy slouží k organizaci stránky do smysluplných částí a zároveň slouží jako

titulek stránky HTML, stejně jako v knize.

Nadpisy se v HTML dokumentech vytváří pomocí značek (tagů) <h1>, … <h6>, seřazeno od

největšího k nejmenšímu. Libovolné zobrazovací zařízení (PC,mobil,čtečka Braillova písma,…)

interpretuje text formátovaný pomocí značek pro nadpis jako nadpis. Tento koncept bývá

nazýván často jako sémantický kód, značky jazyka HTML vytváří sémantický kontext obsahu

stránky: nadpisy, odstavce, seznamy, blokové citace, tabulky, obrázky, atd.

- z nabídkového řádku otevřeme panel Vlastnosti →Okno →Vlastnosti ,v něm stiskneme tlačítko


146

HTML.

Protože externí šablona stylů mojestyly.css již byla k této stránce již připojena, byly textu již styly

v podobě color,font-family,font-size,atd. pomocí definice příslušného pravidla přiděleny.

Všechny pravidla si můžeme prohlédnout v panelu vlastnosti, jakmile vybereme část s textem.

- Umístíme kurzor do textu „Co říkají naši zákazníci“, v panelu Vlastnosti zapneme tlačítko

HTML v roletce Formát se objeví Nadpis 2, podobně i v selektoru značek <h2>.

- umístíme kurzor do slova „ Místa“ a v panelu Vlastnosti vybereme v roletce Formát Nadpis 3,

Slovo Místa se nyní naformátuje jako nadpis třetí úrovně (tag <h3>), Tím jsme přidělili frázi

význam a logické místo v organizaci stránky vzhledem k dalšímu obsahu, který následuje za

nadpisem.

Stejným způsobem naformátujeme slovo „Pláže“ jako nadpis 3. úrovně.


VYTVOŘENÍ SEZNAMŮ

Seznam používáme jako část textu, kde je obsah sdělení oddělen do jednotlivých řádků,

které mohou být označeny odrážkami nebo čísly (odrážkový nebo číslovaný seznam, v Adobe

Dreamweaveru jsou ikony pro tvorbu seznamů ale označeny jako neuspořádaný a uspořádaný

seznam). Na webových stránkách se používají pro snadnější orientaci na stránce a k rychlejšímu

čtení, mohou uživatelům pomáhat při hledání rychlých odpovědí. V HTML kódu je:

- odrážkový seznam označen značkou (tagem) <ul>

- číslované seznam značkou (tagem) <ol>

o jednotlivé významové řádky jsou označeny značkou (tagem) <li> v obou druzích

seznamů.

Všechny tagy jsou párové,to znamená, že jsou na začátku i konci seznamu i řádků (</li>).

- vybereme ve vloženém textu nedokončené věty (v HTML kódu jsou označeny jako samostatné

odstavce <p> a </p> od „Úžasné bílé zdi“ až po „Noční život, který si nemůžeme nechat ujít“.


147

- Otevřeme panel vlastnosti z nabídkového řádku →Okno →Vlastnosti v panelu vlastnosti

vybereme Neuspořádaný (odrážkový) seznam a klepneme na něj myší.

- stejné kroky zopakujeme u textových odstavců za nadpisem Pláže.

Pokud bychom chtěli vytvořit uspořádaný (číslovaný) seznam, klepneme na vedlejší tlačítko

vpravo, na kterém jsou číslice.

- →Soubor → Uložit.

VYTVOŘENÍ BLOKOVÝCH CITACÍ

V jazyce HTML jde blok citovaného textu

- umístíme kurzor do odstavce, který začíná „Milujeme Santorini více než …

- v panelu Vlastnosti klepneme na tlačítko s názvem „Odsazení textu“,je určeno k vytvoření

blokových citací.


148

Bublinová nápověda se nazývá „Odsazení textu“, ve skutečnosti v HTML jazyce tímto způsobem

vytváříme blokovou citaci a předcházejícím tlačítkem „Odsazení textu doleva“ ji odstraňujeme.

- zopakujeme předcházející krok také u dalších odstavců, začínajících slovy: Jídlo na střeše … a

„Celá moje rodina …

- Nyní budeme vytvořeným blokovým citacím přidělovat styly pomocí CSS.

- →Styly CSS →Nové pravidlo

- v dialogovém okně Nové pravidlo zvolíme v části Typ selektoru volbu „ Tag (předefinuje

element HTML)“,v poli Název selektoru vybereme pomocí roletky Blockquote a v roletce

Definice pravidla zapíšeme nové pravidlo do mojestyly.css.→OK .

- v otevřeném dialogovém okně Definice pravidla pro blockquote v mojestyly. css vybereme

Kategorii Rámeček, v části Padding (vnitřní okraj) zatrhneme volbu Stejné pro všechny a do

roletky Right a Left (vpravo, vlevo) zapíšeme číslo 4 s jednotkou px .Potom vybereme Kategorii

Okraj a v části Style vybereme z roletky solid (nepřerušovaný), Width (šířka)- thin (tenký) a

v části Color- tmavě modrou #00C.→OK.


149

Tímto krokem orámujeme pomocí stylů blokové citace tenkou, modrou, nepřerušovanou linkou,

protože to máme uloženo jako nové pravidlo Blockquote v kaskádových stylech, bude tento styl

použit automaticky na všechny blokové citace na všech www-stránkách, ke kterým budeme mít

připojené mojestyly.css.

- →Soubor →Uložit vše, tím uložíme změny jak do HTML dokumentu, tak i do příjmení-

mojestyly.css .

Výsledek si prohlédnout v živém zobrazení (potom ho nesmíme zapomenout vypnout) nebo

v prohlížeči.


150

Test č. 11 Práce s tabulkou

- Úkoly:

- -Otevřete Santorini-příjmení.html

- Vytvořte tabulku 3 sloupce 5 řádků

- Z textového souboru Tabuka.doc v lekci 02 překopírujte obsah tabulky

- Vložte popisku sady Spry pro popis místa Oia, číst se bude jako Ea.

- Nahraďte text nakupující slovem zákazníky na celé stránce

TVORBA TABULEK

Původně se layout webových stránek tvořil pomocí tabulek namísto stylů CSS, které přišly

později, v současnosti se tabulky používají především pro zobrazování řádků a sloupců dat.

- otevřeme rozpracovaný soubor santorini-příjmení.html ze složky lekce 03.

- ve spodní části stránky označíme a smažeme text „sem patří tabulka, kurzor ponecháme na

místě.

- v panelu Vložit rozbalíme záložku Rozvržení klepneme na ikonu Tabulka.

- v dialogovém okně Tabulka napíšeme do pole Řádků 6 a do Pole Sloupců 3, přednastavené

hodnoty ve všech ostatních polích vymažeme, vzhled tabulky budeme přidělovat pomocí stylů

CSS, díky čemuž bude tabulka přístupná a použitelná na více zobrazovacích zařízeních.

- v části Záhlaví vybereme Nahoru, tím se nadpisy umístí nad každý sloupec a do pole Titulek

napíšeme Hotely na Santorini →OK.


151

Tabulka se zobrazí ve zmáčknuté podobě, protože zatím nemá žádný obsah a nemá nastavený

žádný rozměr. Pomocí panelu vlastnosti můžeme tabulce přidělit identifikátor, tím můžeme

přidělit každému elementu (i tabulce) individuální styl.

- v panelu vlastnosti v poli tabulka napíšeme hotely

- nyní napíšeme do první buňky v tabulce místo, do druhé hotel a do třetí hodnocení.

Tímto způsobem můžeme vyplnit všechny buňky tabulky, pro zrychlení práce ale zkopírujeme

hotový obsah z textového editoru.

- → Soubor → Otevřít → lekce 02 → tabulka.html , tím se otevře již vytvořená tabulka v DW,

umístíme kurzor dovnitř tabulky, v selektoru značek vybereme tag <table#hotely> pomocí

CTRL+C ji zkopírujeme do schránky, potom beze změny zavřeme soubor - tabulka.html,

označíme stejným způsobem rozdělanou tabulku v souboru santorini-příjmení.html a vložíme ji

na místo původní tabulky.


152

- → Soubor → Uložit . pokud máme vybranou tabulku, můžeme provádět jednoduše a rychle

změny typu přidání,odebrání,sloučení či rozdělení řádků a sloupců, ostatní změny je vhodnější

provádět pomocí CSS stylů.

POPISKY SADY SPRY

Adobe Dreamweaver Cs4 obsahuje ovládací prvek sady Spry, pomocí kterého vkládáme,

kontrolujeme umístění a stylujeme tzv. bublinovou nápovědu. V HTML dokumentu se bublinová

nápověda vytváří použitím parametru title ve značce <acronym>, ale ovládací prvek Popisek

sady Spry používá JavaScript a CSS.

- Otevřeme soubor santorini-příjmení.html, ve zobrazené tabulce vybereme slovo Oia pod

nápisem Místo.

- Otevřeme z nabídky → Okno →Vložit, tím se nám otevře panel nástrojů, který je umístěn pod

nabídkovým řádkem.

- v této nabídce vybereme kategorii → Spry a v ní ikonu →Popisek sady vSpry.

- v okně dokumentu se posuneme až pod tabulku, kde se nám objeví v azurovém obdélníku


153

popisek sady Spry: sprytooltip1.

- pod tímto popiskem vymažeme text Zde umístěte popisek a napište Oia se čte jako Eea.


Pokud je to první nápovědná bublina, kterou jsme do www stránek vložili, zobrazí se nám

dialogové okno Zkopírovat závislé soubory, v něm bude upozornění na to, že se k naší stránce

připojí dva soubory.

Každý ovládací prvek knihovny Spry, který použijeme, vkládá soubory CSS a JavaScriptu do

složky nazvané SpryAssets v rámci kořenové složky našeho webového místa. Pokud bychom

vytvářené stránky publikovali na internetu, museli bychom tam i tuto složku s těmito závislými

soubory nahrát.

- zvolíme → OK.

Tímto způsobem jsme přidali do kaskádových stylů CSS nový styl SpryTooltip.css. Nyní

můžeme v panelu vlastnosti, ten otevřeme z nabídky →Okno → Vlastnosti, poklepáme na

bublinovou nápovědu „Popisek sady Spry: sprytooltip1“, měnit takové vlastnosti, jako posun

umístění, časová prodleva, efekty a akce myši.

My budeme ale upravovat vlastnosti bublinové nápovědy pomocí kaskádových stylů CSS.

- → Okno → Styly CSS → Vše, ve spodní části Všech pravidel rozbalíme pomocí tlačítka + nově

připojený soubor stylů SpryTooltip.css ,


154

Zvolíme selektor .tooltipContent a zvolíme ikonu Upravit styl

V zobrazeném dialogovém okně zvolíme Kategorii Typ, v něm vybereme štětečkem bílou barvu

#FFF, v Kategorii pozadí do pole Background-color (barva pozadí) vybereme štětečkem barvu

#O36.

- → OK→ Soubor → Uložit vše.

V živém zobrazení potom vyzkoušíme nápovědnou bublinu, aby se zobrazila, musíme se

myší přiblížit ke slovu Oia.

HLEDÁNÍ A NAHRAZOVÁNÍ TEXTU

DW dokáže na vytvářených stránkách najít a nahradit text, tímto způsobem můžeme

najednou nahradit prázdné mezery, tvrdá zalomení řádků, běžné mezery a jiné textové elementy.

- v dokumentovém okně pod nápisem <h3> Místa v předposlední odrážce vybereme slovo

nakupující.

- z nabídkového řádku zvolíme → Upravit → Hledat a nahradit a v otevřeném dialogovém okně

se v kolonce Hledat objeví nakupující, do kolonky nahradit napíšeme zákazníky a stiskneme

tlačítko Nahradit.

DW nahradí první výskyt nalezené fráze a vyhledá další výskyt, v našem případě nám

oznámí, kolik slov se v prohledávaném dokumentu vyskytuje.


155

- jakmile je nahrazení provedeno, dialogové okno zavřeme, → soubor →Uložit vše.

Test č. 12

Navigace v rámci webu

Úkoly:

- - otevřít →DW-kurz →lekce 05 → onas-příjmení.html.

- - Vložte hyperlink na stránku Kontakt.html, jako tlačítko zvolte text kontaktujte nás

v zápatí stránky.

- V kaskádových stylech změňte barvu písma hyperlinku na bílou (pouze pro haperlink

v zápatí)

- Otevřete soubor Santorini.html.

- Použijte slova Doporučované hotely pod obrázkem v sidecar 1 jako hyperlink, který

posune stránku na její konec.

- Pod tabulku vložte text Zpět a použijte jej jako hyperlink pro návrat na začátek stránky.

ODKAZY NA STRÁNKY V RÁMCI JEDNOHO WEBU

Odkazy jsou základními elementy webových stránek a Dreamweaver nám usnadňuje práci

s nimi.Webové hypertextové odkazy (hyperlinky) umožňují uživatelům se pohybovat z jednoho


156

místa webu na další, tzn propojují podle předem zvoleného schématu webové stránky, umožňují

přecházet na stránky jiného webu či odesílat e-mailové zprávy.

- Z nabídkového řádku otevřeme → Soubor → otevřít →DW-kurz →lekce 05 → onas-

start.html.

- → Soubor → Uložit jako → onas-příjmení.html.

- původní soubor onas-start.html zavřeme beze změny.

V zápatí otevřené stránky vybereme text Kontaktujte nás.

Otevřeme panel Vlastnosti → okno v nabídkovém řádku → Vlastnosti → stiskneme tlačítko

HTML.

- V pravo od pole Odkaz stiskneme tlačítko vyhledat soubor a v otevřeném dialogovém okně

Vyberte soubor v oblasti hledání najděte Lekce 05 a v ní vyberte soubor kontakt.html,

přesvědčíme se, že máme v roletce Relativně k vybranou volbu Dokument → OK a klepneme

kamkoliv do dokumentového okna, abychom zrušili výběr textu odkazu.

Výchozí formátováním hypertextových odkazů je modrá barva textu a modré podtržení, v našem


157

případě je ovšem modrý text na modrém pozadí špatně čitelný, to však můžeme změnit pomocí

nového pravidla v kaskádových stylech.

-→ kurzor umístíme do hypertextového odkazu a v selektoru značek vybereme <a> , → Okno →

Styly CSS → vše klepneme na ikonu Nové pravidlo CSS, v otevřeném dialogovém okně Nové

pravidlo CSS vybereme Typ selektoru Složený prvek (na základě výběru) a v názvu selektoru

pomocí tlačítka Méně specifické vybereme #footer p a → OK.

V zobrazeném dialogovém okně Definice pravidla pro #footer p a v mojestyly.css vybereme

kategorii Typ a v roletce Barvy vybereme pomocí kapátka barvu žlutou #FFF →OK.

Text odkazu bude teď žlutý se žlutým podtržením na modrém pozadí, jeho čitelnost bude

vyšší. Jakékoliv značce <a> zobrazené v zápatí dokumentu bude pomocí kaskádových stylů CSS

přiděleno nově vytvořené pravidlo se žlutou barvou textu i podtržením.

Nyní si vyzkoušíme vybrat cíl vytvářeného hypertextového odkazu metodou vizuálního výběru.

- → soubor → Otevřít →lekce 05 →Santorini-start.html

- Otevřený soubor uložíme se svým příjmením → Soubor → Uložit jako →

Santorini.příjmení.html a původní soubor beze změny zavřeme.

- V zápatí stránky opět vybereme text Kontaktujte nás, otevřeme panel Vlastnosti a otevřeme

-→ Okno → Soubory a v nich najdeme a rozbalíme lekci 05.

- V panelu Vlastnosti stiskneme tlačítko HTML, chytneme a přetáhneme ikonu Ukázat na

soubor (je vpravo od pole Odkaz) na složku Kontakt.html v lekci 05.


158

Tím vytvoříme odkaz i z této stránky na stránku Kontakt.html, a protože je i tato stránka

propojena s mojestyly.css, bude hypertextový odkaz rovněž napsán žlutým písmem i podtržením.

- → Soubor → Uložit vše, nyní si můžeme fungování hypertextového odkazu vyzkoušet

v náhledu v prohlížeči.

TVORBA ODKAZŮ V RÁMCI JEDNÉ STRÁNKY

Při použití hypertextového odkazu nám náš prohlížeč zobrazí webovou stránku odshora dolů. Je-li stránka příliš dlouhá a není-li nutné ji celou prohlížet, můžeme pomocí hypertextových

odkazů odkázat na vybraný element a prohlížeč nám nastaví stránku na tento element. - → Soubor → Otevřít →Dreamweaver kurz → lekce 03 →Santorini-příjmení.html.

- Do postranního sloupce ####sidebar 1 za text slunečnému počasí vložíme pomocí klávesy Enter text "Prohlédněte si doporučované hotely".

Vybereme slova "doporučované hotely" , otevřeme panel vlastnosti (→ Okno → Vlastnosti) a do pole Odkaz napíšeme ####hotely a stiskneme klávesu Enter.

Tím jsme právě vytvořili hypertextový odkaz na místo na stránce, kde je umístěna tabulka s identifikátorem ####hotely. Znak #### značí, že odkaz směřuje na element s vypsaným identifikátorem v rámci aktuální stránky. Pokud bychom chtěli odkaz na danou tabulku směřovat z jiné webové stránky v rámci stejného webového místa, musel by odkaz obsahovat jak název souboru, tak i

identifikátor (santorini-příjmení.html####hotely)\ Pro možnost návratu na začátek stránky použijeme podobný odkaz, jako identifikátor můžeme

použít element záhlaví. - → Pod tabulku napíšeme slovo Nahoru, označíme jej a v panelu Vlastnosti do pole Odkaz napíšeme ####header a stiskneme klávesu Enter. Tím jsme vytvořili odkaz na začátek stránky.

- → Soubor → Uložit. Nyní si můžeme prohlédnout stránku v prohlížeči a vyzkoušet fungovámí hypertextových odkazů

jak na stránce santorini- příjmení.html, tak na stránce onas-příjmení.html.


159

Test č. 13 Práce s obrázky

Úkoly:

- Otevřete soubor Naxos-příjmení.html.

- Na místo výplňového místa pro obraz vložte ze souboru obrázky/ naxos-portara.jpg,

jako alternativní text napište Brána na ostrově Naxos.

- V panelu vlastnosti upravte obrázek:- š 205,v270 px, formát Jpeg, uložení JPEG lepší

kvalita.

-

VKLÁDÁNÍ A POUŽITÍ OBRÁZKŮ

Obrázky představují klíčovou komponentu každé webové stránky, zvyšují její přehlednost,

přitažlivost a na první pohled by měly návštěvníka zaujmout. Ke vkládání obrázků můžeme

používat panel vložit, výplňový prostor pro obrázky, panel datové zdroje, vkládání kopírováním

z Photoshopu či Adobe Bridge.

Otevřeme → Soubor →Otevřít → DW-kurz → lekce → lekce 04 → naxos-start.html.

Otevřený soubor uložíme pod svým jménem do lekce 04 → Soubor → Uložit jako → naxos-

přímení.html. Původní soubor naxos-start.html zavřeme beze změny, tím zůstane původní

soubor zachován.

Vybereme výplňový prostor obrázku „portara (200x200)“ Klávesou Delete ji odstraníme,

- → Okno → Vložit → Běžné → Obraz (pokud tuto ikonu na panelu nevidíme, otevřeme ji

klepnutím na šipku směřující dolu hned vedle ikony Obrazy).

V zobrazeném dialogovém okně vybereme oblast hledání → lekce → obrázky →naxos-portara

→ OK.


160

V dialogu Atributy pro usnadnění přístupu napíšeme do pole Alternativní text výraz Portara na

ostrově Naxos → OK.

K otevření dialogu pro vložení obrázku můžeme také použít poklepání na obrázek výplňového

prostoru a tím ho vyměnit za vybranou grafiku, alternativní text musíme však napsat manuálně


Alternativní technikou vložení obrázku do stránky je použití panelu Datové zdroje.

- → vymažeme právě vložený obrázek naxos-portara.html.

-V nabídkovém řádku zvolíme → Okno → Datové zdroje

V zobrazeném dialogovém okně klepneme na ikonu Obrazy, najdeme obrázek naxos-

portara.html → Vložit.


POUŽITÍ PANELU VLASTNOSTI U OBRÁZKŮ

Pro webové stránky je nejvýhodnější, je-li v rovnováze velikost použité grafiky, jejich

kvalita velikost souboru. Proto se musí často optimalizovat grafika, kterou budeme umísťovat na

webovou stránku. K tomu účelu obsahuje Adobe Dreamweaver grafický nástroj, který dokáže

zajistit nejvyšší možnou kvalitu při zachování malé velikosti souboru.


V dokumentovém okně vybereme obrázek Portara


161

- Otevřeme panel vlastnosti → Okno → Vlastnosti, pokud máme vybraný obrázek, v panelu

Vlastnosti se nám zobrazí řada možností pro úpravu obrázku:

Do okna šířka a výška přímo zapisujeme hodnotu v obrazových bodech, pod alternativním textem

je tlačítko (Úprava) pro úpravu obrázku ve Photoshopu nebo Fireworksu, vedle je tlačítko

(Upravit nastaveni náhledu) pro úpravu obrázku přímo v Dreamweaveru → Upravit nastaveni

náhledu

V otevřeném dialogovém okně zkontrolujeme, zda máme ve Formátu nastavenou volbu JPEG,

vybereme v dolní části 2 okna náhledu, označíme spodní náhled., v pravé horní části okna

rozbalíme roletku Kvalita a pomocí jezdce snížíme kvalitu na 20.Nyní můžeme porovnat vizuálně

snížení kvality obrázků změnu velikosti souboru, snížení kvality obrazu není kompenzováno

úsporou velikosti (6,37:1,37 kB), proto označíme horní náhled a v roletce Uložená nastavení

vybereme JPEG-lepší kvalita →OK.

- →Soubor →Uložit.


162

Test č. 14 Nabídky Spry

Úkoly:

- Otevřete stránku onas-příjmení.html.

- Nad obrázek v sidecar 1 vložte Spry pruh nabídek, seřazení svislé.

- Položky 1-4 nazvěte : Úvodem Itálie, Řecko, O nás.

- Položka Řecko má podpoložky Santorini a Naxos

- Položka Itálie má podpoložky Umbria a Santorini

- Z koncových položek se bude odkazovat na příslušné stránky.

VKLÁDÁNÍ PRUHU NABÍDEK SPRY

Webové stránky potřebují interní navigaci, většina současných stránek používá navigaci,

která je založena na seznamech stylovaných pomocí kaskádových stylů CSS. S pomocí

JavaScriptu se může seznam stát vodorovnou nebo svislou navigací s podnabídkami

v rozbalujících se nabídkách. Ovládací pruh nabídek je jednoduchý a silný nástroj, který je určen

pro vkládání seznamů- kódu HTML a také odkazů, všech pravidel CSS, která zajistí, že se

zobrazí jako pruh nabídek, a JavaScriptu, který zajistí vysunování podnabídek. Ovládací prvek

pruh nabídek Spray má výhodu v tom, že jej tvoří pouze seznamy v HTML, takže i když uživatel

nemá povolený JavaScript nebo CSS, navigační nabídka je stále funkční jako soubor navigačních

odkazů.

- Otevřeme soubor onas-příjmení.html,

- v postranním panelu umístíme kurzor vlevo od obrázku New Yorku a stiskem Enter vytvoříme

prázdný řádek před obrázkem,


163

- otevřeme panel Vložit z nabídky Okno, klepneme na ikonu Spray pruh nabídek

- ve stejnojmenném dialogu vybereme volbu Svisle → OK a nad obrázkem se zobrazí navigační

nabídka, → Soubor → Uložit.

- K vytvoření odkazů použijeme panel Vlastností, ten otevřeme klepnutím na azurový pruh panel

nabídek spray: menuBar1.

- Vybereme položku 1 v levém seznamu (hlavní nabídky), v poli Text napíšeme Úvodem, v poli

Odkaz napíšeme index.html a v prostředním sloupci (druhá úroveň nabidky) vymažeme pomocí

tlačítka – všechny tři podnabídky Položka 1.1 až 1.3.

- Vybereme položku 2 a do pole Text napíšeme Itálie, v poli Odkaz ponecháme znak mřížky a do

nabídky druhé úrovně pomocí tlačítka + přidáme další položku, do pole text napíšeme Umbria a

do pole odkaz přepíšeme znak mřížky textem Umbria.html.

- Vybereme Položku 3, do pole text napíšeme Řecko, vybereme položku 3.1 do pole text

nepíšeme Santorini a do odkazu santorini-příjmení.html,

- vybereme položku 3.2, napíšeme Naxos a do odkazu naxos-příjmení.html,

- do položky 4 napíšeme O nás a do odkazu onas-příjmení.html, vytvoříme tlačítkem +

podnabídku 4.1, vybereme ji, do pole text napíšeme Kontaktujte nás a do Odkazu napíšeme


164

kontakt.html


Test č. 15

Chování pomocí Spry efektů

Úkoly:

- Otevřete soubor našiklienti-příjmení.html

- Zvýrazněte h1 nadpis Naši podnikoví … počáteční barvu zvolte červenou, konečnou

zelenou.

- Zaměňte obraz v sidebar 1 za západ slunce.jpg ze složky obrázky v DW.

- Přidejte efekt zatřesení h1 nadpisu v záhlaví stránky při přetažení myší.

CHOVÁNÍ V DREAMWEAVERU

Chování DW je kódem JavaScriptu, který vykonává nějakou akci, např. otevření okna

prohlížeče, kterou spouští nějaká událost, např. klepnutí myší. Použití chování je proces o třech

krocích:

1. Vybereme element na stránce, který má spouštět chování.

2. Vybereme, jaké chování se má použít.

3. Určíme nastavení nebo parametry takového chování.

DW nabízí více jak 30 druhů chování, která jsou všechna dostupná z části Chování, v nabídce

Okno.

- → Okno → Chování → Inspektor tagů → ikonou + rozbalíme seznam dostupných chování

k určité části okna


165

Některé funkcionality pro použití v DW obsahují:

• Otevření a zavření okna

• Změnu zdroje obrázku a zpětnou změnu pro efekt

• Mizení a objevování obrázku nebo části stránky

• Zvětšování či třesení grafiky

• Zobrazení vyskakujícího okna s upozorňovací hláškou

• Změna textu nebo jiného obsahu HTML v určené oblasti

• Objevování nebo skrytí části stránky

• Volání uživatelské funkce JavaScriptu

Ne všechna chování jsou dostupná veškerý čas, běžná chování jsou dostupná pouze v přítomnosti

určitého elementu na stránce, např. obrázek,…

POUŽITÍ CHOVÁNÍ SPRY EFEKTŮ

Pomocí nich můžeme vytvářet vizuální efekty na stránce, jako je zvýraznění elementů, jejich

zatřesením, přechodem obrázků v druhý obraz. Tyto efekty slouží k upoutání pozornosti nebo ke

zvýraznění potřebného elementu, jsou velmi výrazné a proto se musí používat opatrně.

- → Soubor → Otevřít → na disku najdeme cestu do kurzu DW a otevřeme →Lekce 06 a v ní

soubor nasiklienti-start.html.


166

- soubor uložíme → Soubor → Uložit jako → název souboru zvolíme nasiklienti-prijmeni.html,

a původní soubor nasiklienti-start.html beze změny zavřeme.

- V main Content ( hlavním obsahu) označíme nadpis h1 Naši podnikoví klienti.

- Z nabídkového řádku otevřeme → Okno → Chování, klepnutím na ikonu + rozbalíme kartu

Chování a v ní vybereme → Efekty a v rozbalené podnabídce vybereme → Zvýraznění.

- V zobrazeném dialogovém okně ponecháme jako cílový element současný výběr, v poli Trvání

efektu napíšeme 1500 ms, v poli počáteční barva pomocí kapátka vybereme zelenou barvu

#00FF33, do pole Konečná barva vybereme červenou barvu #ff0000 a v poli barva po efektu

žlutou #FFFF66,zaškrtneme pole přepnout efekt, to nám umožní měnit barvy oběma směry →

OK.

- V panelu Chování klepneme na pole On clik, tím ho aktivujeme a v seznamu vybereme


167

onMouseOver.

Pokud bychom chtěli měnit parametry efektu Zvýraznění, poklepeme na jeho název v pravém

sloupci, tím se nám otevře příslušné dialogové okno. Smazat nepotřebný efekt můžeme po jeho

označení v panelu chování pomocí ikony se znakem minus - .

- Označíme nadpis h1 v záhlaví dokumentu, v panelu chování přidáme chování → vybereme

Efekty a podnabídce vybereme efekt → Zatřást, v dialogu ponecháme Současný výběr. V levém

poli panelu Chování ponecháme spouštěč onClick.

- Označíme obrázek v sidebar 1, , v panelu chování přidáme chování → vybereme Efekty a

podnabídce vybereme efekt → Zaměnit obraz, v dialogu klikneme na procházet a najdeme v DW

obrázky santorini-zapadslunce.jpg, ponecháme nabízená zaškrtnutí. → OK.


Provedené změny si prohlédneme jako náhled v prohlížeči.

Test č. 16 Spry skládačky

Úkoly:

- Otevřete soubor Santorini-příjmení.html.

- Pod h1 nadpis v mainContentu vložte Spry skládačku.


168

- Popisek 1 nazvěte „Vítejte na Santorini“ Pop 2 „Co říkají naši zákazníci“, pop.3

„Doporučované hotely“.

- Do obsahu pro jednotlivé záložky vložte celé příslušné odstavce z dané stránky.

VYTVÁŘENÍ SPRY SKLÁDAČEK

Spry skládačka je podobná Spry panelu se záložkami, zejména pro podobnou organizaci

obsahu do celistvého vícepanelového zobrazení, jednotlivé záložky jsou naskládány na sobě spíše

než vedle sebe, takže při klepnutí na jednu z nich se panel i s celým obsahem plynule otevře a

obsah se zobrazí v požadované záložce. Pokud je obsah uvnitř panelu větší nebo širší než panel

sám, automaticky se zobrazí horizontální nebo vertikální postníky.

- Otevřeme →Soubor → Dreamweaver → Lekce → Lekce 06 → Santorini-start.html,

- Zvolíme →Soubor → Uložit jako → Santorini-příjmení.html, původní soubor Santorini-

start.html zavřeme beze změny.

- Ukazatel myši umístíme na konec řádku Ráj u moře v hlavním obsahu (mainContent), tím

vytvoříme bod , kam budeme vkládat Spry skládačky.

Z nabídkového řádku otevřeme nabídku → Okno → Vložit a tomto panelu klepneme na ikonu

Spry skládačka.Dreamweaver vloží na vyznačené místo do stránky ovládací prvek Spry

skládačka.

Výchozím prvkem je dvoupanelová skládačka s rozbaleným horním panelem. Modrá záložka

s označením lze přímo měnit v zobrazení Návrh.

- Zvolíme → Soubor → Uložit vše, pokud je to požadováno, odsouhlasíme přijetí závislých

souborů, které Dreamweaver přidá do složky SpryAssets.


169

- Vybereme výplňovou frázi Popisek 1 a přepíšeme jej textem Vítejte na Santorini.

- Vybereme fotografii páru na střeše a veškerý text, který popisuje vesnice a pláže až k „Co říkají

naši zákazníci.

- V HTML kódu se můžeme přesvědčit, že jsme při označování nic nevynechali → Kód, od

značky <p> před obrázkem až po uzavírací značku</ul> za druhým vybraným seznamem, potom

se vrátíme zpět do zobrazení Návrh.

- Z nabídkového řádku zvolíme → Upravit → Vyjmout, tím zkopírujeme vybraný obsah do

schránky.

- Vrátíme se do skládačky, vybereme text Obsah 1 a pomocí lokální nabídky vyvolané pravým

tlačítkem myši → Vložit jej nahradíme obsahem schránky. V Návrhovém zobrazení uvidíme

pouze část vloženého obsahu, protože se v tomto zobrazení nezobrazuje posuvník. Abychom

uviděli celý obsah, klepneme na panel pravým tlačítkem myši a v lokální nabídce označíme

v položce Zobrazení elementu položku Plné. Pro práci na jiných panelech je ovšem výhodnější

obsah opět skrýt opačným postupem.

- Ukazatelem myši posuneme v šedé oblasti s názvem Popisek 2 až se objeví ikona oka, klepneme

na ni, tím se nám otevře panel 2.

- Vybereme Popisek 2 a přepíšeme jej textem „Co říkají naši zákazníci“.


vložíme jej do panelu v oblasti Obsah 2.

- Pro naplnění třetího panelu skládačky musíme nejdříve přidat další panel, vytvoříme jej


- Vybereme skládačku Spry: Accordion 1, otevřeme panel Vlastnosti a vněm pomocí tlačítka +

nebo – můžeme přidávat nebo mazat panely, šipkami přesouváme vybraný panel na požadovanou

pozici.

- Tlačítkem + přidáme třetí panel.

- Přepíšeme Popisek 3 textem Doporučené hotely,


170


vložíme jej do panelu v oblasti Obsah 3

- → Soubor → Uložit, kontrolu funkčnosti provedeme v živém zobrazení či v náhledu

v prohlížeči.

Na závěr můžeme provést úpravy Spry skládaček pomocí kaskádových stylů CSS, vyladíme

pomocí šablony stylů SpryAccordion.css,

Test č. 17 Layout stránky

Úkoly:

- Otevřete Nový soubor a vyberte prázdnou stránku bez rozvržení.

- Uložte ji jako Layout-příjmení.html.

- Do CSS přidejte nové pravidlo pro Tag, název selektoru Body.

- Pozadí pro Body bude bílé a text bude vycentrován.

- Přidejte nové pravidlo pro ID s názvem Obal.

- text bude zarovnán vlevo a šířka rámečku je 760 px.

- Přidejte nová pravidla pro ID s názvy Záhlaví,Obsah a zápatí.

- Do Obalu postupně vložte Tagy div názvy záhlaví, obsah a zápatí ve správném pořadí.

TVORBA LAYOUTU STRÁNKY

V současnosti se při vytváření layoutu webových stránek (rozvržení objektů na stránce)přešlo na

stylování pomocí kaskádových stylů CSS, na rozdíl od tabulkového rozvržení, které je datově

náročnější, hůře se udržují a dodržují standardy. Tvorba layoutů založená na stylech CSS se

skládá ze dvou hlavních komponent:

sada značek <div> - ty vytváří strukturu stránky.

sada pravidel CSS - pomocí nich se definují rozměry a formátují klíčové elementy

stránky.


171

- Zvolíme → Soubor → Nový v otevřeném dialogu zvolíme → Prázdná stránka → Typ stránky

:HTML → Rozvržení: žádný. Při této volbě nejsou v náhledu k dispozici žádné předvolby

layoutu. (K podobnému výsledku můžeme dojít rychleji při zobrazení uvítací obrazovky a

klepnutí na HTML ve sloupci Vytvořit nový).

- Zvolíme →Soubor → Uložit v zobrazeném dialogovém okně Uložit najdeme Lekce 07 a do

názvu napíšeme Layout-příjmení.html → Ok.

- Zvolíme z nabídkového řádku → Okno → Styly CSS , ve stejnojmenném panelu se přepneme,

pokud je to nutné do režimu →Vše.

- Klepneme na ikonu → Nové pravidlo, jako Typ selektoru zvolíme z roletky Tag (předefinuje

element HTML), do Názvu selektoru napíšeme nebo z roletky vybereme Body, v kolonce

Definice pravidla ponecháme Pouze v tomto dokumentu.

- Zobrazí se nám dialogové okno Definice pravidla CSS pro body, zvolíme Kategorii → Pozadí a

v Background-color pomocí kapátka vybereme světle růžovou barvu #FCF, přepneme do

Kategorie Blok a v seznamu pole Text-align (zarovnání textu)zvolíme center. Rozpracovaný

layout se zarovná na střed okna prohlížeče, zatímco text zůstane zarovnaný doleva, tato akce je

nutná pro starší prohlížeče (IE 5.x,aby se vše správně vykreslilo), v dalších krocích přepíšeme

zarovnání textu vlevo.

- Zvolíme Kategorii → Rámeček v části Padding ( vnitřní okraj) napíšeme v poli Top (horní) 0, to


172

stejné provedeme v poli Margin ( vnější okraj) →OK.

- Zvolíme → Soubor → Uložit. Zvolené vlastnosti pro body si můžeme prohlédnout v panelu

vlastnosti po klepnutí na body.

- samostatně změňte barvu pozadí na bílou.

DEFINICE VNĚJŠÍHO OBALU

- V panelu Styly CSS zvolíme ikonu→ Nové pravidlo, v zobrazeném dialogovém okně v poli

Název selektoru vybereme ID (použito pro jeden element HTML) do pole Název selektoru

napíšeme #obal a v roletce Definice pravidla musí být Pouze pro tento dokument →OK.


173

- V zobrazeném dialogu vybereme Kategorii Blok, v roletce Text-align vybereme left

(zarovnání textu doleva) → v kategorii Rámeček → do pole Width napíšeme hodnotu

760 px, v části Margin (vnější okraj) zrušíme zatržení Stejné pro všechny a do pole Top

napíšeme 0 a do polí Right a Left zvolíme Auto →OK.Layout má pevnou šířku 760 px

takže funguje i při rozlišení 800x600 px,40 px navíc se používá pro zobrazení okrajů

okna včetně postníků.Levé a pravé okraje jsou nastaveny na Auto, aby se celý obsah

stránky zarovnal na střed okna prohlížeče,Zbývajících 40 px se rozdělí rovným dílem

mezi levý a pravý vnitřní okraj a tím se layout zarovná na střed.

OBAL A PRIMÁRNÍ ČÁSTI STRÁNKY

Nyní jsme přidělili značce <div> s identifikátorem #obal styly.DW nám umožní přímé přidání

značky <div> a přidělení identifikátoru.


174

- Otevřeme z nabídkového řádku nabídku → Okno → Vložit. V zobrazeném panelu Vložit

vybereme →

kategorii Rozvržení a v ní klepneme na ikonu Vložit tag Div.

- V zobrazeném dialogovém okně vybereme v roletce V místě textového kurzoru a v roletce

Identifikátor vybereme Obal →OK.

DW přidá do stránky novou značku <div> s výplní pro obsah, která obsahuje text „sem patří

iobsah pro id obal“.

Značka <div> s identifikátorem #obal slouží jako obalový element (kontejner) pro další značky

<div>, jejím účelem je omezení šířky layoutu. Nyní budeme přidávat další hlavní části layoutu,

ten je primárně tvořen ze tří částí, záhlaví

obsah

zápatí

Každá z těchto částí vyžaduje pravidlo CSS a značku <div>.

- Zvolíme z nabídkového řádku →Okno →Styly CSS → Vše → klepneme na ikonu Nové

pravidlo,


#záhlaví a v poli Definice pravidla ponecháme: Pouze v tomto dokumentu → OK.


175

- V zobrazeném dialogu vybereme Kategorii:Rámeček a v ní Margin (vnější okraj), zrušíme

zatržení : Stejné pro všechny a do polí Top a Bottom napíšeme 12 px → OK.

Nyní budeme stejným způsobem definovat další pravidla CSS pro#obsah a #záhlaví.

- klepneme na ikonu Nové pravidlo,


#obsah a v poli Definice pravidla ponecháme: Pouze v tomto dokumentu → OK.

- V zobrazeném dialogu vybereme Kategorii:Rámeček a v Padding (vnitřní) a Margin (vnější

okraj), zrušíme zatržení : Stejné pro všechny a do polí Top napíšeme 0 px → OK.

Tímto bude obsah zobrazen hned pod záhlavím bez jakéhokoli okraje.

Třetí pravidlo můžeme vytvořit duplikováním pravidla pro záhlaví:

- v panelu Styly CSS označíme #zápatí, → kliknutím pravým tlačítkem vyvoláme lokální nabídku

a v ní vybereme Duplikovat, v zobrazeném okně v poli Název selektoru přepíšeme #zápatí →

OK.

Nyní má pravidlo #záhlaví a #zápatí stejné vlastnosti, jejich změnu či přidání můžeme

provést v panelu Styly CSS.

- v panelu Styly CSS → Všechna pravidla označíme #zápatí → klepneme na Přidat vlastnost a

z roletky vybereme do prvního pole Clear a do druhého pole Both. Tato vlastnost způsobí, že se

blok #zápatí zarovná až pod elementy v plovoucím umístění v části #obsah.


176

Nyní máme definovaná potřebná pravidla pro hlavní části layoutu a můžeme je postupně

přidat do stránky.

- Označíme text Sem patří obsah id „obal“, vymažeme ho.

- V panelu Vložit (otevřeme ho z nabídky → Okno) zvolíme Kategorii →Rozvržení v něm

klepneme na ikonu → Vložit tag Div.

- V zobrazené nabídce vybereme Vložit: Za začátek tagu a roletky vybereme <div id=“obal“> a

z roletky Identifikátor: záhlaví →OK. Tím jsme vložili značku <div> s identifikátorem # zápatí

do nadřazeného elementu s id #obal

Podobným způsobem vložíme dovnitř elementu #obal další značky (#obsah a #zápatí), abychom

tyto značky správně seřadili, použijeme Vložit: Za tag. Výplňový text nám ulehčuje orientaci na

stránce.

- V nástrojovém panelu Dokument napíšeme do pole Titul: Layout → Enter.


Test č. 18

Tvorba formulářů

Úkoly:

- Otevřete stránku Kontakt-příjmení.html.


177

- Vložte do mainContentu Formulář.

- Vložte textové pole s názvem Jméno před položkou formuláře.

- Vložte textové pole Spry s ověřením s názvem Email před položkou formuláře.

- Uzavřete obě pole do sady polí s názvem Kontaktní údaje.

- Vložte textové pole Spry s ověřením s názvem Uživ.jméno, min 6 znaků.

- Vložte pole pro heslo, min.7 znaků, 2číslice.

- Vložte pole pro zopakování hesla.

- Předcházející pole vložte do sady polí s názvem Online informace.

PŘIDÁNÍ FORMULÁŘE DO STRÁNKY

→ Otevřeme z nabídkového řádku → Soubory → Otevřít → lekce 08 → kontakt- start.html.

→ Zvolíme Soubor uložit jako → do pole pro název napíšeme → kontakt-příjmení.html.

→ Původní soubor kontakt- start.html beze změny uzavřeme.

Nyní musíme přidat značku <form>, která bude obklopovat všechny ostatní prvky formuláře.

→ V elementu div s identifikátorem mainContent umístíme kurzor za otazník v nadpisu.

→ Otevřeme z nabídkového řádku → Okno → zde zaškrtneme →Vložit → v něm vybereme

kategorii → Formulář → klikneme na první ikonu s názvem Formulář. DW vloží do kódu

značku <form> na vybrané místo a v Návrhu jej vyznačí červenou přerušovanou čarou (pokud se

čára nezobrazí, zatrhneme v panelu → Dokumenty → Vizuální pomůcky → Neviditelné

elementy).

→ Otevřeme z nabídkového řádku → Okno → zatrhneme nabídku Vlastnosti a v tomto panelu

klepneme na ikonu složky vedle pole Akce. V zobrazeném dialogu najdeme v lekci 08 soubor

zpracovani_formulare.html → OK.


178

Pole akce uvádí cílovou stánku, která se zobrazí po potvrzení formuláře, v našem případě je akcí

pouze načtení děkující stránky.


VKLÁDÁNÍ TEXTOVÝCH PRVKŮ

Textové prvky jsou základní formulářové prvky, používají značku <input>,sbírají data pomocí

krátkých frází: - textová pole

- textová pole Spry

- textové oblasti

Pro umožnění správného čtení jednotlivých formulářových prvků musíme nastavit v DW volbu,

která nám zajistí výstupní kód formuláře ve správném formátu.

Zvolíme z nabídkového řádku →Upravit → Předvolby → v zobrazeném dialogu zvolíme

Kategorii Usnadnění přístupu a v ní zatrhneme pole Objekty formuláře →OK.

TEXTOVÉ POLE SPRY

DW obsahuje také Spry objekty pro formuláře, které používají Ajax. Všechny ovládací prvky

Spry kombinují formuláře s JavaScriptem, to umožňuje validaci (ověření)vyplněných

formulářových polí, tj. , zda do formulářového prvku byla vložena odpovídající data, nebo zda

uživatel nezapomněl některé pole vyplnit.

Kurzor umístíme za textové pole Jméno, stiskem kláves Shift + Enter zalomíme řádek.

→ V panelu Vložit v kategorii Formulář klepneme na ikonu Ověření textového pole Spry.

V otevřeném dialogu do pole Identifikátor napíšeme email, do pole Popis napíšeme E-mail:, V



→ Soubor → Uložit. Pokud nás bude DW informovat o připojení externího JavaScriptu,

odsouhlasíme


179

jej → OK.

Pokud je to potřeba otevřeme panel Vlastnosti z nabídkového řádku Okno,.v něm budeme

upravovat ovládací prvek Spry.

→ Z roletky Typ vybereme volbu Emailová adresa, zatrhneme Ověřit při Onblur a volbu

Vyžadováno, což znamená, že před odesláním formuláře jej musí uživatel vyplnit.

SADA POLÍ.

První dvě textová pole uspořádáme do bloku s rámečkem s názvem (legenda)

→ klepneme vpravo od pole E-mail a stiskneme Enter,tím vytvoříme nový řádek.

→ Vybereme popisky Jméno a E-mail a textová pole.

→ V panelu Vložit klepneme na ikonu Sada polí → v zobrazeném dialogu do pole Popisy

napíšeme Vaše kontaktní informace → OK → Soubor → Uložit. Sada polí se projeví až při

živém zobrazení.

OVĚŘENÍ TEXTOVÉHO POLE

→ Klepneme za přidanou sadu polí, ale stále do červeného rámečku kolem formuláře→ Enter.

→ V panelu Vložit klepneme na ikonu Ověření textového pole Spry.

V otevřeném dialogu do pole Identifikátor napíšeme uzivjmeno, do pole Popis napíšeme

Uživ.jméno, V části styl vybereme volbu Přiložit tag popisu s použitím atributu for a v části


→ V panelu vlastnosti zatrhneme volbu Ověřit při OnBlur, volbu Vyžadováno a v poli Min.


180

Počet znaků napíšeme 6 → Soubor → Uložit.

POLE PRO HESLO

Kurzor umístíme za pole Uživ. Jméno, zalomíme řádek Shift + Enter, → v panelu Vložit

klepneme na ikonu Heslo ověření sady Spry.

V zobrazeném dialogu do pole Identifikátor napíšeme heslo, do pole Popis napíšeme Heslo, V



→ V panelu vlastnosti zatrhneme volbu Ověřit při OnBlur, volbu Vyžadováno, v poli Min. Počet

písmen napíšeme 8, v poli Min. počet čísel napíšeme 2.

Posuneme kurzor za pole pro heslo, zalomím řádek Shift + Enter, v panelu Vložit klepneme na

ikonu Potvrzení ověření sady Spry.

V zobrazeném dialogu do pole Identifikátor napíšeme potvrdheslo, do pole Popis napíšeme

Zopakujte heslo, V části styl vybereme volbu Přiložit tag popisu s použitím atributu for a v části


V panelu Vlastnosti zatrhneme volbu Vyžadováno, v roletce Ověřit platnost podle vybereme

volbu heslo ve formuláři form 1., zatrhneme volbu Ověřit OnBlur. Posuneme kurzor za pole pro

potvrzení hesla a stiskem klávesy Enter vytvoříme nový odstavec.

Nyní se vrátíme před pole pro uživatelské jméno, pokud je to třeba, vytvoříme stiskem Enter

prázdný odstavec a do něho napíšeme text: „Ke vstupu do online přehledu vašich rozpisů a plánů

cest si prosím vytvořte účet zadáním uživatelského jména a hesla. Uživ. jméno musí obsahovat

alespoň 6 znaků a heslo alespoň 8 znaků obsahujících minimálně 2 čísla.“

Napsaný text a všechny tři pole vybereme, v panelu Vložit klepneme na ikonu Sada polí,

v zobrazeném dialogu napíšeme Online nástroje → OK → Soubor → Uložit, tím jsme instrukce


181

i tři pole uzavřeli do sady polí.


182


183

informaČnÍ a komunikaČnÍ technologie -adobe … · integrovaná střední škola polygrafická,...

Documents