Post on 12-Jul-2019
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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">
Integrovaná střední škola polygrafická, Brno, Šmahova 110
5
<!-- Creation date: 27.11.2008 --> <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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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>
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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>
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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,
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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Ů
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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>.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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é
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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í
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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ů.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 .
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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"
/>.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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:
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
36
11. lekce
VYTVOŘENÍ ŠABLONY STYLŮ PRO TISK
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 .
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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ší.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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ů.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
49
- → Soubor → Uložit vše.
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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ě
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
- → 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.
VYTVOŘENÍ EXTERNÍHO ODKAZU
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
- → Soubor →Uložit.
Výsledek si opět můžeme vyzkoušet v prohlížeči.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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,
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
zdezelezny@seznam.cz, 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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
60
odkazů
složku Práce č.2-Příjmení zazipujte a pošlete jako přílohu k emailu
na adresu zdezelezny@seznam.cz, 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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
- → Soubor → Uložit.
POUŽITÍ PANELU VLASTNOSTI U OBRÁZKŮ
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
- Otevřeme z HDD → Soubor → Otevřít → Lekce → Lekce 04 →naxos-příjmení.html.
- 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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
- → Soubor → Uložit vše.
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
- Soubor → Uložit.
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 elaine@mojeadresa.cz
- → Soubor → Uložit.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
- → Soubor → Uložit.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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,
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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í:
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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í.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 - .
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
- Soubor → Uložit.
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
- → Soubor → Uložit.
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
v panelu Vlastnosti.
- 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,
- Stejným způsobem jako v předešlém případě vyjmeme do schránky text v příslušné oblasti a
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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í
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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,
- v zobrazeném dialogu vybereme Typ selektoru: ID( ), napíšeme do pole Název selektoru:
#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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
- → Soubor → Uložit vše.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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í.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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Ů
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
čá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, 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
poloha vybereme volbu Před položkou formuláře → OK.
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í.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
poloha vybereme volbu Před položkou formuláře → OK.
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
103
text: „Stručně popište, kam byste chtěli jet a na jak dlouho.“
→ Soubor → Uložit.
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.
→ Soubor → Uložit.
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
→ Soubor → Uložit.
TVORBA SEZNAMŮ
Jedná e o roletkové seznamy, které umožňují více voleb, podobně jako sada zaškrtávacích polí.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
105
TESTOVÁ ČÁST
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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,
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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,
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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í
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Moderní webové stránky používají ke stylování a tvorbě layoutů kaskádové styly (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í,…
JavaScript přidává funkci interaktivity.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
112
ZMĚNA BARVY POZADÍ
K úpravě vlastností pomocí CSS můžeme použít jakékoliv značky HTML, např. <body>(tělo).
- 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í
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
113
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ánky, obrázky na pozadí se umísťují pomocí
CSS stylů.
- 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.
- 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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
- 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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
115
- 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
.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í
Integrovaná střední škola polygrafická, Brno, Šmahova 110
116
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 .
V okně Definice pravidla vybereme kategorii Typ a po otevření palety barev vybereme modrou
→OK→ Uložit .
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
- 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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
118
- 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 záhlaví je použit i v zápatí
- →Soubor→Uložit
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" />.
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ů:
3. Selektor následníka
4. Vlastní selektor (třída)
Integrovaná střední škola polygrafická, Brno, Šmahova 110
119
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 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
- 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.
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
122
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
- 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.
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
123
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.
- 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 .
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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 .
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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).
- → 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 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ů.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
126
Test č. 5 Úpravy CSS stylů
Úkoly:
1. Otevřete z DW/lekce 02/onas-příjmení.html.
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).
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í
Integrovaná střední škola polygrafická, Brno, Šmahova 110
127
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ů.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
128
- 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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
129
Test č. 6 ÚPRAVA TEXTU- PANEL VLASTNOSTI
Úkoly:
1. Otevřete z DW/lekce 02/onas-příjmení.html.
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.
- 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 .
Integrovaná střední škola polygrafická, Brno, Šmahova 110
130
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
.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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
131
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 .
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, …).
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
133
- 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"
Integrovaná střední škola polygrafická, Brno, Šmahova 110
134
/>.
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ů:
5. Selektor následníka
6. 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)
Integrovaná střední škola polygrafická, Brno, Šmahova 110
135
- 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
- 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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
137
- 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
- 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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
138
- 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
vybereme Umisťování a roletce Overflow (přetečení) vybereme hodnotu auto (automaticky)
→OK.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
139
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.
Čá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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
140
- 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.
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.
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
141
- 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
- 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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
142
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
vybereme Umisťování a roletce Overflow (přetečení) vybereme hodnotu auto (automaticky)
→OK.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
143
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.
Čá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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
144
- 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.
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ž
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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ě.
- → Soubor → Uložit.
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“.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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í.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
- → 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.
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 ,
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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ě
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.
- → Soubor → Ulož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.
- Otevřeme z HDD → Soubor → Otevřít → Lekce → Lekce 04 →naxos-příjmení.html.
V dokumentovém okně vybereme obrázek Portara
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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,
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
164
kontakt.html
- → Soubor → Uložit.
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
- Soubor → Uložit.
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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“.
- 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
v panelu Vlastnosti.
- 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,
Integrovaná střední škola polygrafická, Brno, Šmahova 110
170
- 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 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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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,
- 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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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,
- v zobrazeném dialogu vybereme Typ selektoru: ID( ), napíšeme do pole Název selektoru:
#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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
- → Soubor → Uložit vše.
Test č. 18
Tvorba formulářů
Úkoly:
- Otevřete stránku Kontakt-příjmení.html.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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.
→ Soubor → Uložit.
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
čá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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
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.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
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
čá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, 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
poloha vybereme volbu Před položkou formuláře → OK.
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
Integrovaná střední škola polygrafická, Brno, Šmahova 110
181
i tři pole uzavřeli do sady polí.
Integrovaná střední škola polygrafická, Brno, Šmahova 110
182
Integrovaná střední škola polygrafická, Brno, Šmahova 110
183