2000 Adobe Systems Incorporated. Všechna práva vyhrazena. Adobe GoLive 5.0 Příručka uživatele pro Windows a Macintosh Tato příručka, stejně jako v ní

Příručka uživatele

Příručka uživatele

© © 2000 Adobe Systems Incorporated. Všechna práva vyhrazena. Adobe® GoLive™ 5.0 Příručka uživatele pro Windows® a Macintosh Tato příručka, stejně jako v ní popisovaný software, je poskytována na základě licence a může být používána nebo kopírována pouze podle podmínek této licence. Obsah této příručky slouží pouze pro informaci, může se měnit bez upozornění a nelze ho vykládat jako závazek firmy Adobe Systems Incorporated. Adobe Systems Incorporated nepřebírá žádnou odpovědnost za chyby nebo nepřesnosti, které se v této příručce mohou objevit. S výjimkami povolenými v licenci nesmí být žádná část této příručky reprodukována, kopírována, ukládána ve vyhledávacím systému a přenášena v jakékoliv formě nebo jakýmikoliv prostředky, elektronickými, mechanickými, záznamovými nebo jinými bez předchozího písemného svolení firmy Adobe Systems Incorporated. Uvědomte si prosím, že existující umělecká díla nebo obrazy, které byste chtěli použít ve svých projektech mohou být chráněny copyrightem. Neautorizované včlenění takového materiálu do vaší nové práce může být porušením autorských práv vlastníka copyrightu. Opatřete si prosím povolení pro použití díla od vlastníka copyrightu. Všechny odkazy na názvy společností ve vzorových předlohách jsou pouze pro demonstrační účely a nejsou zamýšleny jako odkaz na jakoukoliv skutečnou organizaci. Adobe, logo Adobe, Acrobat, Acrobat Reader, Distiller, FrameMaker, GoLive, Illustrator, ImageReady, LiveMotion, Photoshop, PostScript a 360Code jsou buď registrované ochranné známky nebo ochranné známky Adobe Systems Incorporated ve Spojených státech anebo dalších státech. ActiveX, Microsoft, Windows a Windows NT jsou registrované ochranné známky nebo ochranné známky Microsoft Corporation ve Spojených státech anebo dalších zemích. Apple, AppleScript, ColorSync, Mac, Macintosh, Power Macintosh, QuickTime a TrueType jsou ochranné známky Apple Computer, Inc. registrované v USA a dalších zemích. QuickTime a logo QuickTime jsou ochranné známky, použité na základě licence. Pentium je registrovaná ochranná známka Intel Corporation. Java, Java Applet a JavaScript jsou registrované ochranné známky nebo ochranné známky Sun Microsystems, Inc. ve Spojených státech a dalších zemích. Flash je registrovaná ochranná známka nebo ochranná známka Macromedia, Inc. v USA anebo dalších zemích. Všechny ostatní ochranné známky jsou majetkem svých příslušných vlastníků. Obsahuje software Apple Information Access Toolkit. Tento software je částečně založen na práci Independent JPEG Group. Proximity/Franklin Database ©1994 Franklin Electronic Publishers, Inc., ©1990 Všechna práva vyhrazena. Proximity Technology, Inc. Proximity/Merriam-Webster Database ©1990 Merriam-Webster Inc., ©1990 Všechna práva vyhrazena. Proximity Technology, Inc. The Proximity/Collins Databases ©1990 William Collins Sons & Co. Ltd., ©1990 Všechna práva vyhrazena. Proximity Technology Inc. Proximity/ Munksgaard Database ©1990 Munksgaard International Publishers Ltd., ©1990 Všechna práva vyhrazena. Proximity Technology Inc. Proximity/Van Dale Databases ©1990, 1995 Van Dale Lexicografie bv., ©1990, 1996 Všechna práva vyhrazena. Proximity Technology Inc. Proximity/IDE Databases ©1990 IDE a.s., ©1990 Všechna práva vyhrazena. Proximity Technology Inc. Proximity/Hachette Database ©1992 Hachette, ©1992 Všechna práva vyhrazena. Proximity Technology Inc. Proximity/Bertelsmann Database ©1997 Bertelsmann Lexikon Verlag, ©1997 Všechna práva vyhrazena. Proximity Technology Inc. Proximity/Text & Satz Database ©1991 Text & Satz Datentechnik, ©1991 Všechna práva vyhrazena. Proximity Technology Inc. Obsahuje implementaci algoritmu LZW, použitou na základě licence podle US patentu 4 558 302. Adobe Systems Incorporated, 345 Park Avenue, San Jose, Kalifornie 95110, USA Překlad: Amos Software spol. s r.o., Praha 6, www.amsoft.cz Notice to U.S. government end users. The software and documentation are „commercial items,“ as that term is defined at 48 C.F.R. §2.101, consisting of „commercial computer software“ and „commercial computer software documentation,“ as such terms are used in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202, as applicable. Consistent with 48 C.F.R. §12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, the commercial computer software and commercial computer software documentation are being licensed to U.S. government end users (A) only as commercial items and (B) with only those rights as are granted to all other end users pursuant to the terms and conditions set forth in the Adobe standard commercial agreement for this software. Unpublished rights reserved under the copyright laws of the United States.

i

Obsah Úvod

Registrace

......................................... 1 ............................... 1

Instalace Adobe GoLive

Přehled Adobe GoLive

Jak se naučit Adobe GoLive

............................1

Používání webových zdrojů

.............................3

Další výukové zdroje

.................................. 6

Podpora zákazníků

................................... 6 ...................8

Použití nástrojů, palet a palety Inspector Pohled na okno dokumentu

. . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Vytvoření webového místa

. . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 . . . . . . . . . . . . . . . . . . . . . . . 13

Pohled na okno webového místa

Přidání webových stránek a dalších souborů k webovému místu

. . . . . . . . . . . . . . 16

Návrh stránky s mřížkou rozvržení a objekty

. . . . . . . . . . . . . . . 19

Návrh stránky s použitím plovoucích rámečků a animace Práce s automatickými objekty

. . . . . . . . . . . . . . . . . . . . . . . . . 27

Použití kaskádových seznamů stylů Použití komponent

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

Použití okna webového místa

. . . . . . . . . . . . . . . . . . . . . . . . . . 34

Nástroje a funkce pro zdrojový kód Automatické objekty

. . . . . . . . . . . . . . . . . . . . . . 28

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

Použití souborů předloh Vytváření rolloverů

. . . . . . . . . . . . . . . . . . . . . . 38

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

Návrh stránky ve Photoshopu

. . . . . . . . . . . . . . . . . . . . . . . . . . 41

Dokonalejší možnosti plovoucích rámečků Zvýšení produktivity

. . . . . . 22

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Přidávání barev a vazeb

Co je nového v Adobe GoLive 5.0

14

Návrh jednoduché stránky s textem a obrazy

. . . . . . . . . . . . . . . . 42

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Úpravy interaktivních filmů QuickTime

. . . . . . . . . . . . . . . . . . . 47

Zabudované sestavování grafů webového místa Lepší zobrazení okna místa

Nástroje pro lepší správu webového místa Přístup k serveru WebDAV

. . . . . . . . . . . . 49

. . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 . . . . . . . . . . . . . . . . 52

. . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

ii OBSAH

. . . . . . . . . . . . . . . . . . . . . . . 56

Dynamic Link (Dynamické vazby)

. . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

Použití SDK Adobe GoLive

Pohled na pracovní plochu

Kapitola 1 . . . . . . . . . . . . . . . . . . . . . . . . . 62

Používání pruhu nástrojů

. . . . . . . . . . . . . . . . . . . . . . 62

Používání okna dokumentu.

Použití okna místa a okna návrhu místa Používání palet

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 . . . . . . . . . . . . . . . . . . 70

Používání kontextových nabídek.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

Nastavení předvoleb

. . . . . . . . . . . . . . . . . . . . 72

Vytváření vazeb mezi soubory Přizpůsobení klávesových zkratek

. . . . . . . . . . . . . . . . . . 73 . . . . . . . . . . . . . 74

Práce s nelatinkovými soubory znaků

Základy webového místa

Kapitola 2 Vytvoření nového webového místa O oknech místa

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86

O záložkách obsahujících tabulky

. . . . . . . . . . . . . . . . . 87

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

O zobrazeních místa Zobrazení místa

. . . . . . . . . . . . . . . . 81

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

Práce s okny místa

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92

Vytváření hierarchie stránek

. . . . . . . . . . . . . . . . . . . . . . . 94

Použití inspektorů pro soubory a složky Otevírání souborů stránek

. . . . . . . . . . . 98

. . . . . . . . . . . . . . . . . . . . . . . 100

Odemknutí lokálně zamknutých souborů

Vytváření stránek

. . . . . . . . . . 64

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

Přepínání mezi okny

. . . . . . . . . . 101

Kapitola 3 Vytváření stránek

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

Ukládání stránek

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

Výběr velikosti okna

Výběr barev textu a pozadí

. . . . . . . . . . . . . . . . . . . . . 108

Použití obrazů pozadí

. . . . . . . . . . . . . . . . . . . . . . . . . . . 109

Určení okrajů stránky

. . . . . . . . . . . . . . . . . . . . . . . . . . . 109

Výběr voleb zobrazení

. . . . . . . . . . . . . . . . . . . . . . . . . . 109

Používání pravítek

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112

Přidávání tagů hlavičky

. . . . . . . . . . . . . . . . . . . . . . . . . . 112

iii

. . . . . . . . . . . . . . . . . . . . . . . . . . 117

Přidání skriptů hlavičky

Přidání přepínacích skriptů pro prohlížeče

Základy vytváření webových stránek

. . . . . . . . 118

Kapitola 4 O návrhu stránek Vytváření textu

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123

Formátování textu pomocí fyzických a strukturálních stylů . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Formátování odstavců

. . . . . . . . . . . . . . . . . . . . . . . . . . . 125

O velikostech písem na různých platformách Aplikování sad písem

. . . . . . . . . . . . . . . . . . . . . . . . . . . 129 . . . . . . . . . . . . . . . . . . . . . . . . 131

Kontrola pravopisu textu

. . . . . . . . . . . . . . . . . . . . . . . . . . 133

Jak přidat vymezovače

Používání mřížky rozvržení

. . . . . . . . . . . . . . . . . . . . . . . 134 . . . . . . . . . . . . . . . . . . . . 136

Používání textových rámečků Přidání vodorovných linek

. . . . . . . . . . . . . . . . . . . . . . . 137

Změna polohy, velikosti a seskupení objektů Zarovnání a rozmístění objektů

. . . . . . 138

. . . . . . . . . . . . . . . . . . 139

Práce s často používanými objekty Práce s barvami

. . . . . 128

. . . . . . . . . . . . . 129

Aplikování relativních velikostí písem

. . . . . . . . . . . . . . . 141

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142

Přidávání hypertextových vazeb

. . . . . . . . . . . . . . . . . . 145

Přidání údajů o datumu a čase

. . . . . . . . . . . . . . . . . . 148 . . . . . . . . . . . . . 148

Vytvoření rozbalovacích nabídek URL

Návrat k předešlému stavu a obnovení změn stránek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Prohlížení náhledu stránek

. . . . . . . . . . . . . . . . . . . . . . . 150

Zobrazení informací o dokumentu

Práce s tabulkami

. . . . . . . . . . . . . . . 152

Kapitola 5 Vytváření tabulek

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

Vložení textu do tabulky

. . . . . . . . . . . . . . . . . . . . . . . . 160

Převedení tabulky na mřížku rozvržení Vybírání v tabulkách

. . . . . . . . . . . 161

. . . . . . . . . . . . . . . . . . . . . . . . . . . . 161

Vyjmutí, kopírování a vkládání výběru tabulky Uspořádání obsahu tabulky

. . . . 164

. . . . . . . . . . . . . . . . . . . . . . 165

Formátování tabulek pomocí předdefinovaných stylů . . . . . . . . . . . . . . . . . . . . . . . . . . 167

iv OBSAH

Obrazy a návrh stránky

Kapitola 6 O automatických objektech

. . . . . . . . . . . . . . . . . . . . . . 173

Přidání automatického objektu na webovou stránku . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 . . . . . . . . . . . . . . . . . . . . . 174

Použití automatických vazeb

. . . . . . . . . . . 174

Změna velikosti automatických objektů Vytvoření vazby na soubory Photoshopu Zobrazení obrazů během optimalizace

. . . . . . . . . 175

. . . . . . . . . . . . 178

Nastavení voleb v dialogovém okně Save For Web

179

. . . 185

Práce s tabulkou barev v obrazech Photoshopu

Vytvoření obrazů Photoshopu s průhledností a s podkladem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 Náhled a ovládání rozkladu barev v obrazech Photoshopu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 Připojení informací o souboru k automatickým objektům Photoshopu

. . . . . . . . . . . 195

Vytvoření vazby na soubory Illustratoru

. . . . . . . . . . . 196

Vytvoření vazby na soubory LiveMotion

. . . . . . . . . . 197

Přidání obrazů ve webových formátech

. . . . . . . . . . . 198

. . . . . . . . . . . . . . . . . . . . . . . 199

Import obrazů pro náhled

. . . . . 199

Simulace hodnoty gama Windows v Mac OS

. . . . . . . . . . . . . . . . . . . . . . . . . 200

Úprava velikosti obrazu Další volby obrazů

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201

Nastavení předvoleb obrazu

. . . . . . . . . . . . . . . . . . . . . 202

Vytvoření obrazových map

. . . . . . . . . . . . . . . . . . . . . . 203

Obkreslované obrazy

. . . . . . . . . . . . . . . . . . . . . . . . . . . . 204

Práce se soubory Photoshopu s vrstvami O formátech souborů

Plovoucí rámečky

. . . . . . . . . 205

. . . . . . . . . . . . . . . . . . . . . . . . . . . 206

Kapitola 7 Co jsou plovoucí rámečky

. . . . . . . . . . . . . . . . . . . . . . . 211

Vytvoření plovoucích rámečků

. . . . . . . . . . . . . . . . . . . 212

Umísťování plovoucích rámečků

. . . . . . . . . . . . . . . . . . 215

Změna plovoucích rámečků na textové rámečky

. . 216

O animaci webové stránky s plovoucími rámečky

. 217

Vytváření objektů, které se budou animovat Animování plovoucích rámečků Ovládání více plovoucích rámečků

. . . . . . 219

. . . . . . . . . . . . . . . . . . 220 . . . . . . . . . . . . . . . 223

Použití pořadí překrývání k simulaci vzájemného pohybu . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 Nastavení viditelnosti plovoucích rámečků

. . . . . . . . 226

v

. . . . . . . . . . . . . . . . . . . . . . . . 227

Vkládání akcí do animací

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227

Vytváření více scén

Řízení přehrávání scén

Pokročilý návrh stránek

. . . . . . . . . . . . . . . . . . . . . . . . . . 228

Kapitola 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231

Používání rámců

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237

Používání předloh

Používání komponent GoLive

Přidávání interaktivity

. . . . . . . . . . . . . . . . . . . . 238

Kapitola 9 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

Vytváření rolloverů Používání JavaScriptu

. . . . . . . . . . . . . . . . . . . . . . . . . . . 245

Vytváření Java apletů

. . . . . . . . . . . . . . . . . . . . . . . . . . . 248

Přidávání zvuků a videoklipů

. . . . . . . . . . . . . . . . . . . . 249 . . . . . . . . . . . 257

Používání ovládacích prvků W3CObject Přidávání rolovacích rámečků

Vyhledávání

. . . . . . . . . . . . . . . . . . . . 258

Kapitola 10 Vyhledávání v dokumentu a ve webovém místě Vyhledávání elementů kódu HTML Hledání souborů

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274

Používání přehledů webového místa Nastavení předvoleb hledání

Používání kaskádových stylů

. . . . . . . . . . . . . 275

. . . . . . . . . . . . . . . . . . . . . 277

Kapitola 11 Navrhování stránek s kaskádovými styly

. . . . . . . . . . 281

Vytvoření tabulky stylů

. . . . . . . . . . . . . . . . . . . . . . . . . . 281

Určení vlastností stylu

. . . . . . . . . . . . . . . . . . . . . . . . . . . 285

Správa stylů

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293

Aplikování stylů a odkazování na tabulky stylů Export a import tabulek stylů

. . . . 294

. . . . . . . . . . . . . . . . . . . 298

Prohlížení stránek s kaskádovými styly

Vytváření formulářů

. . 261

. . . . . . . . . . . . . . . 270

. . . . . . . . . . . . 299

Kapitola 12 O formulářích

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303

Vytvoření formulářů

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303

Přidání elementů formuláře

. . . . . . . . . . . . . . . . . . . . . . 305

vi OBSAH

. . . . . . . . . . . . . . . . . . . . . 311

Řízení navigace ve formuláři

Vytvoření elementů formuláře, které jsou pouze pro čtení . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313 Vytvoření neaktivních elementů formuláře Přidání popisů

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314 . . . . . . . . . . . . . . . . . . . 315

Seskupení elementů formuláře

Použití akcí

Kapitola 13 Vytvoření akcí

Úpravy filmů QuickTime

. . . . . . . . 313

. . . . . . . . . . . . . . . . . . . . . 314

Použití univerzálních tlačítek

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319

Kapitola 14 O interaktivních nástrojích pro úpravy QuickTime Použití zobrazení Layout Editing (Úpravy rozvržení) Otevření filmů QuickTime

Dynamické vazby

330

. . . . . . . . . . . . . . . . . . . . . . . . 333

Kapitola 15 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337

Požadavky na server

Kompatibilní zdroje dynamického obsahu O bezpečnosti

. . . . . . . . . 337

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338

Odstraňování problémů

. . . . . . . . . . . . . . . . . . . . . . . . . 338

Rozhraní modulu Dynamic Link (Dynamické vazby)

338

Konfigurování nového webového místa

. . . . . . . . . . . 342

Přidání dynamického obsahu na stránky

. . . . . . . . . . 345

Vytvoření webového místa pro e-obchod

. . . . . . . . . 352

Vytvoření webového vstupního modulu databáze

Prohlížení webových míst

. 325

. 359

Kapitola 16 Co jsou režimy zobrazení Používání periferních panelů Ovládání zobrazení

. . . . . . . . . . . . . . . . . . . . . . . 363 . . . . . . . . . . . . . . . . . . . . . 363

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366

Používání palety View Controller (Správce zobrazení) 369

.

Používání palety In & Out Links (Vstupující a vystupující vazby) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372

Správa webových míst

Kapitola 17 Údržba webového místa a jeho zdrojů Zadávání názvů a cest souborů

. . . . . . . . . . . 377

. . . . . . . . . . . . . . . . . . 385

vii

Informace o stavu stránky

. . . . . . . . . . . . . . . . . . . . . . . 388 . . . . . . . . . . . . . . 392

Nastavení voleb pro webové místo

Efektivnější vytváření webového místa

Kapitola 18 . . . . . . . . . . . . . . 395

Používání vzorových webových míst O zdrojích webového místa

. . . . . . . . . . . . . . . . . . . . . 397

Práce se záložkami obsahujícími zdroje webového místa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398 Používání URL a e-mailových adres ve webovém místě . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399 . . . . . . . . . . . . . . . . 403

Používání barev webového místa

. . . . . . . . . . . . 405

Používání sad písem webového místa Používání vlastních výstřižků

. . . . . . . . . . . . . . . . . . . . . 406

Používání dodatků webového místa

. . . . . . . . . . . . . . 409

Úpravy vazeb a odkazů v rámci celého webového místa . . . . . . . . . . . . . . . . . . . . . . . . . 410 Aplikování stylů v rámci celého webového místa

Publikování webových míst

. . 411

Kapitola 19 Publikování webového místa

. . . . . . . . . . . . . . . . . . . . . 415

Příprava webového místa k publikování Připojení k webovému serveru

. . . . . . . . . . 415

. . . . . . . . . . . . . . . . . . . 420

Posílání webových míst na server a jejich stahování ze serveru . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423 Přenos souborů pomocí prohlížeče FTP Nastavení přístupu na Internet

. . . . . . . . . . . 427

. . . . . . . . . . . . . . . . . . . 427

Přizpůsobení webových míst speciálním podmínkám serveru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428

Návrhy webových míst

Kapitola 20 Co jsou návrhy webových míst

. . . . . . . . . . . . . . . . . . 435

Vytvoření návrhu webového místa Vývoj návrhu webového místa

. . . . . . . . . . . . . . . 436

. . . . . . . . . . . . . . . . . . . 439

Anotace návrhu webového místa

. . . . . . . . . . . . . . . . 445

Použití vyvinutého návrhu webového místa Zobrazení návrhu webového místa

Rejstřík

. . . . . . . 447

. . . . . . . . . . . . . . . 450

1

Úvod

V

ítá vás Adobe® GoLive™, kompletní řešení pro návrh HTML stránek a správu webového místa (site). Adobe GoLive dává uživatelům nebývalé tvůrčí možnosti ovládání a všestrannost při návrhu webových míst. Umožňuje grafikům a vydavatelům navrhovat a spravovat webová místa v profesionální kvalitě, s obsahem nejnovějších multimediálních funkcí, bez nutnosti jakéhokoliv programování HTML. Ale současně také obsahuje nástroje pro zdrojový kód HTML a JavaScript, které pomohou webovým grafikům a programátorům začlenit do webových stránek interaktivitu. Program Adobe GoLive, navržený s ohledem na budoucnost, podporuje kaskádové styly (CSS), dynamické HTML a QuickTime – tři osvědčené technologie, které dávají webovým návrhářům množství kreativních příležitostí a nástrojů. Obsahuje také obdobné pracovní prostředí jako ostatní aplikace od Adobe, jako je Adobe Photoshop®, Adobe Illustrator® a Adobe LiveMotion™.

Registrace Jsme si jisti, že přijdete na to, že software Adobe podstatně zvýší vaši produktivitu. Aby vám mohla společnost Adobe i nadále poskytovat software nejvyšší kvality, nabízet technickou podporu a informovat vás o novém vývoji softwaru GoLive, zaregistrujte si prosím svou aplikaci. Když aplikaci poprvé spustíte, budete vyzváni k online registraci. Můžete zvolit přímé odeslání formuláře nebo faxování vytištěné kopie. Můžete se také zaregistrovat vyplněním a odesláním registrační karty obsažené v krabici s programem.

Instalace Adobe GoLive GoLive musíte nainstalovat z CD Adobe GoLive na svůj pevný disk; program nemůžete spouštět z CD. Postupujte podle pokynů na obrazovce. Podrobnější informace najdete v souboru InstallReadMe na CD.

Jak se naučit Adobe GoLive Adobe nabízí řadu možností, jak se naučit GoLive, včetně tištěných příruček, nápovědy programu a tipů nástrojů. S použitím funkce Adobe Online se můžete snadno dostat ke spoustě průběžně aktualizovaných webových zdrojů pro výuku GoLive, od tipů a výukových lekcí po informace technické podpory. Program Adobe Acrobat® Reader™, obsažený na CD GoLive, umožňuje prohlížet soubory PDF. Acrobat Reader nebo Adobe Acrobat je nezbytný pro prohlížení některých dokumentů obsažených na tomto CD.

2 Úvod

Používání tištěné dokumentace S Adobe GoLive 5.0 se dodávají dvě tištěné příručky. Adobe GoLive 5.0 User guide (Příručka uživatele) Obsahuje informace o používání všech příkazů a funkcí

Adobe GoLive. Tato příručka předpokládá, že ovládáte svůj počítač a jeho konvence, včetně toho, jak používat myš a standardní nabídky a příkazy. Také předpokládá, že víte, jak otevírat, ukládat a zavírat soubory. Nápovědu pro tyto techniky najdete v dokumentaci pro Microsoft® Windows® nebo Mac OS. Adobe GoLive Quick Reference Card (Přehled příkazů a zkratek) Obsahuje informace o zkratkách Adobe

GoLive. Zkratky jsou také obsaženy v nápovědě programu.

Používání nápovědy programu Systém nápovědy založený na HTML obsahuje všechny informace z příručky Adobe GoLive 5.0 User Guide plus klávesové zkratky. Obsahuje také informace pro pokročilé uživatele o kaskádových stylech, používání a vytváření akcí, práci v HTML a jiných kódech, úpravách webových nastavení, WebDAV, používání AppleScriptu a pokročilejších úpravách filmů QuickTime. Podrobnější informace o používání nápovědy programu získáte klepnutím na tlačítko Help on Help (Nápověda k nápovědě) vedle záložky Content (Obsah). Aby se témata nápovědy správně zobrazila, musíte mít Netscape Communicator 4.0 (nebo novější) nebo Microsoft Internet Explorer 4.0 (nebo novější). Musíte mít také aktivní Javascript. Jak vyvolat nápovědu:

Zvolte Help > GoLive Help (Nápověda > Nápověda GoLive) nebo stiskněte F1 (Windows).

Používání tipů nástrojů Tipy nástrojů umožňují zobrazit názvy nástrojů nebo tlačítek a ovladačů v paletách. Jak identifikovat nástroj nebo ovládací prvek:

Umístěte ukazatel na nástroj nebo ovládací prvek a chvíli počkejte. Objeví se tip nástroje zobrazující název nástroje a jeho klávesovou zkratku (pokud existuje). Pokud se tip nástroje neobjeví, může být zobrazování tipů vypnuto v předvolbách.

ADOBE GOLIVE 5.0 3 Příručka uživatele

Jak zobrazovat tipy nástrojů:

1 Zvolte Edit > Preferences > General (Úpravy > Předvolby > Všeobecné). 2 Vyberte Show Tool Tips (Zobrazovat tipy nástrojů) a klepněte na OK.

Poznámka: Ve většině dialogových oken nejsou tipy nástrojů k dispozici.

Používání webových zdrojů Pokud máte připojení k Internetu a nainstalovaný prohlížeč Webu na svém počítači, můžete používat funkci Adobe Online k přístupu k dalším zdrojům pro výuku GoLive, umístěným na stránkách Adobe Systems na World Wide Webu. Informace jsou pouze v angličtině. Tyto zdroje se průběžně aktualizují a obsahují následující položky: How To’s and Backgrounders (Postupy a podrobná vysvětlení) Poskytuje přístup k postupům provádění úloh

v GoLive a k podrobným referenčním informacím o různých tématech. Tutorials and Techniques (Výukové lekce a techniky) Poskytují instrukce krok za krokem k používání funkcí Adobe GoLive 5.0 nebo nápovědu k provádění náročnějších technik. Tyto výukové lekce vám pomohou dostat se na vyšší úroveň znalostí než referenční informace z příručky uživatele a ukazují, jak používat GoLive s dalšími aplikacemi. Quicktips (Rychlé tipy) Poskytují krátké postupy šetřící čas, které vám pomohou používat GoLive efektivněji. Tipy mohou být zkratky pro používání nových funkcí nebo instrukce, jak používat existující funkce efektivněji. Troubleshooting (Odstraňování problémů) Poskytuje řešení problémů, které se mohou vyskytnout při

používání GoLive. Informace o odstraňování problémů, dostupné přes Adobe Online a na stránkách Adobe na Webu byste měli zkontrolovat dříve, než zavoláte technickou podporu. Jak se dostat na stránku Adobe pro vaši oblast:.

1 Otevřete americkou stránku Adobe na adrese www.adobe.com. 2 Z nabídky Adobe Sites zvolte svůj geografický region. Stránky Adobe jsou upravovány pro 20 různých geografických regionů.

O Adobe Online Adobe Online poskytuje přístup k nejnovějším výukovým lekcím, rychlým tipům a dalším materiálům na Webu pro GoLive a další produkty Adobe. Tyto informace jsou k dispozici pouze v angličtině. S použitím Adobe Online si můžete také stáhnout a prohlédnout platnou verzi dokumentu GoLive Top Issues (Nejčastější problémy s GoLive), který obsahuje nejnovější řešení technické podpory pro GoLive. Jsou zde také záložky, pomocí kterých se dostanete na pozoruhodné stránky, vztahující se k Adobe a GoLive.

4 Úvod

Používání Adobe Online Adobe Online se neustále mění, takže byste měli informace před použitím obnovit. Obnovení přes Adobe Online aktualizuje záložky a tlačítka, takže budete mít rychlý přístup k nejnovějšímu obsahu. Nastavením předvoleb můžete zvolit automatickou aktualizaci Adobe Online jednou denně, jednou za týden nebo jednou za měsíc. Když nastavíte propojení Adobe Online se svým prohlížečem Webu, Adobe vás buď může upozornit, kdykoliv jsou k dispozici nové informace pomocí funkce Downloadables (Ke stažení) nebo může automaticky stáhnout tyto informace na váš pevný disk. Pokud se rozhodnete nepoužít funkci automatického stažení, můžete přesto prohlížet a stahovat nové soubory, kdykoliv jsou k dispozici, s použitím příkazu Downloadables (Ke stažení) v nabídce Help (Nápověda). Jak použít Adobe Online:

1 V GoLive zvolte Help > Adobe Online (Nápověda > Adobe Online) nebo klepněte na ikonu nahoře v paletě nástrojů.

Poznámka: Musíte mít internetové připojení a nainstalovaný prohlížeč Webu. Adobe Online spustí prohlížeč s použitím vaší výchozí konfigurace Internetu. 2 Proveďte libovolný z následujících úkonů: • Klepnutím na Refresh (Obnovit) zajistěte, že máte nejnovější verzi okna Adobe Online a jeho tlačítek, a také

nejnovější záložky. Je důležité obnovit obrazovku, abyste mohli vybírat z platných dostupných voleb. • Klepněte na Preferences (Předvolby), chcete-li nastavit volby připojení. Předvolby General (Všeobecné)

ovlivňují způsob, jakým Adobe Online spolupracuje se všemi produkty Adobe, instalovanými na vašem počítači, a předvolby Application (Aplikace) ovlivňují způsob, jakým Adobe Online spolupracuje s GoLive. Chcete-li zobrazit vysvětlení pro každou z předvoleb, klepněte na Setup (Nastavit) a postupujte podle pokynů na obrazovce. S použitím Update Options (Volby aktualizace) můžete také nastavit automatické obnovování informací. Poznámka: Předvolby pro Adobe Online můžete také nastavit příkazem Edit > Preferences > Online Settings (Úpravy > Předvolby > Online nastavení). • Klepnutím na libovolné tlačítko v okně Adobe Online otevřete webovou stránku, na kterou tlačítko odkazuje. • Klepnutím na tlačítko záložky (

) zobrazíte webovou stránku, vztahující se k GoLive a Adobe. Tyto záložky se automaticky aktualizují, když se objeví nové webové stránky.

• Klepnutím na Close (Zavřít) se vrátíte do GoLive.


Přístup k Adobe Online z nabídky Help (Nápověda) Nabídka Help obsahuje volby pro prohlížení a stahování informací z webových stránek Adobe. Jak zobrazit aktualizované články nebo dokumenty:

Klepněte na Help (Nápověda) a vyberte téma, které chcete zobrazit. Jak zobrazit a stáhnout informace z webových stránek Adobe z nabídky Help (Nápověda):

1 V GoLive zvolte Help > Downloadables (Nápověda > Ke stažení). 2 Vyberte volbu zobrazení: • Vyberte Show Only New Files (Zobrazit pouze nové soubory), chcete-li zobrazit pouze soubory, které jsou

nové od vašeho posledního zobrazení dostupných souborů nebo od doby, kdy jste byli upozorněni na nové soubory. • Vyberte Show All Available Files (Zobrazit všechny dostupné soubory), chcete-li zobrazit všechny soubory na

webových stránkách Adobe, které jsou právě k dispozici pro stažení. 3 Vyberte volby stahování: • Vyberte Auto Install Downloaded Components (Automaticky instalovat stažené součásti), pokud chcete, aby

funkce Adobe Online spustila instalátor součásti (je-li k dispozici) ihned po dokončení stahování. Pak můžete soubory instalovat podle instrukcí na obrazovce. • Vyberte Download in Background (Stahovat v pozadí), chcete-li pokračovat v práci v GoLive a v dalších

aplikacích, zatímco se soubory budou stahovat. • Vyberte Notify When Download Complete (Upozornit po stažení), chcete-li zobrazit zprávu po načtení

souborů do vašeho počítače. 4 Chcete-li zobrazit seznam souborů, otevřete složku Downloadables (Ke stažení) a kteroukoliv jinou uvedenou složku. 5 Chcete-li zobrazit popis souboru, umístěte kurzor na název souboru a přečtěte si jeho popis v sekci Item Description (Popis položky). 6 Chcete-li zobrazit, kam se soubor nainstaluje, když ho stáhnete, vyberte soubor a podívejte se na jeho umístění v sekci Download Location (Cílová složka). Chcete-li toto umístění změnit, klepněte na tlačítko složky ( ). 7 Chcete-li stáhnout soubor, vyberte ho a klepněte na Download (Stáhnout). 8 Chcete-li zavřít dialogové okno Downloadables (Ke stažení), klepněte na Close (Zavřít).

6 Úvod

Další výukové zdroje K dispozici jsou i další výukové materiály, které se ale s aplikací nedodávají. Classroom in a Book Oficiální výuková série pro grafické a publikační programy Adobe. Publikace byla

vyvinuta odborníky v Adobe a publikována nakladatelstvím Adobe Press. Adobe GoLive Classroom in a Book obsahuje lekce o používání GoLive. Informace o zakoupení publikace Adobe GoLive Classroom in a Book najdete na Webu Adobe na adrese www.adobe.com nebo u svého dodavatele zahraniční odborné literatury. Certifikační program Adobe Nabízí uživatelům, školitelům a výukovým střediskům příležitost

demonstrovat znalosti produktů a propagovat softwarové zkušenosti získáním titulů Adobe Certified Expert, Adobe Certified Instructor nebo Adobe Authorized Learning Provider. Certifikace se provádějí pro několik různých zeměpisných oblastí. Podívejte se na stránku „Partnering with Adobe“ na Webu na adrese partners.adobe.com, kde se dozvíte, jak certifikaci získat.

Podpora zákazníků Když svůj produkt zaregistrujete, můžete mít nárok na technickou podporu až po 90 dní od svého prvního zavolání. Podmínky se liší podle země, ve které sídlíte. Další informace najdete na kartě o technické podpoře, dodávané s dokumentací GoLive.

Podpora zákazníků na Adobe Online Adobe Online poskytuje přístup k dokumentům FAQ (Frequently Asked Questions, Nejčastější dotazy) a informacím o odstraňování problémů, které nabízejí řešení běžných problémů.

Další zdroje podpory zákazníků Adobe Systems poskytuje několik způsobů automatizované technické podpory: • Podívejte se do souborů ReadMe (Čtěte), které se instalují s programem, a které obsahují informace, které

nebyly k dispozici při přípravě této příručky. • Projděte si rozsáhlé informace podpory zákazníků na stránkách Adobe na World Wide Webu

(www.adobe.com). Chcete-li se dostat na stránky Adobe z GoLive, zvolte Help > Adobe Online (Nápověda > Adobe Online) nebo klepněte na ikonu nahoře v paletě nástrojů. Viz „Používání webových zdrojů“ na straně 3. • Přečtěte si PDF soubor Top Issues (Nejčastější problémy), který je k dispozici v nabídce Help (Nápověda).

Přehled Adobe GoLive

Tento přehled je určen k tomu, aby vám poskytl všeobecný úvod do Adobe GoLive. Tímto přehledem můžete postupně procházet s dodanými soubory webového místa. Pokud jste zkušení uživatelé Adobe GoLive, projděte si rychle kapitoly tohoto přehledu a pak přejděte do kapitoly „Co je nového v Adobe GoLive 5.0“.

8 Přehled Adobe GoLive

[pracovní plocha]

Seznámení s pracovní plochou

Použití nástrojů, palet a palety Inspector Pracovní plocha Adobe GoLive zahrnuje kontextově závislý pruh nástrojů, paletu Inspector, několik palet, okno dokumentu a okno webového místa. Tato pracovní plocha soustřeďuje ve vizuálním uživatelském rozhraní všechny nástroje, které potřebujete pro návrh a správu webového místa. Nastavte svou pracovní plochu Dříve než začnete používat nástroje Adobe GoLive, nastavte svou pracovní plochu, jak je zde znázorněno.


Zobrazte palety Inspector a Objects Při prvním

spuštění Adobe GoLive se standardně zobrazí okno dokumentu bez názvu, paleta Inspector (Inspektor), paleta Objects (Objekty) a několik dalších palet. Chcete-li paletu Inspector nebo jinou paletu skrýt nebo zobrazit, zvolte je z nabídky Window (Okno). Kontextově závislá paleta Inspector zobrazuje specifické informace pro jakýkoliv objekt, který vyberete v okně dokumentu. Například, když vyberete v okně dokumentu ikonu stránky (vedle slov „Welcome to Adobe GoLive 5“ v titulu stránky nového dokumentu), objeví se ve spodní části palety Inspector slovo „Page“ a objeví se volby pro stránku. Když klepnete do těla dokumentu, objeví se ve spodní části palety Inspector slovo „Text“ a objeví se volby pro vazbu textu a použití seznamů stylů. Uspořádejte palety Palety lze zobrazit

samostatně nebo ve skupinách. Například standardně se v jedné skupině objeví paleta Objects a paleta Color (Barvy). Paletu Color můžete zobrazit samostatně tak, že přetáhnete její štítek kamkoli chcete na pracovní plochu nebo do jiné palety. Paletu můžete sbalit do záložky na pravé straně obrazovky tím, že klepnete na pruh titulu se stisknutou klávesou Ctrl. Klepnutím na záložku paletu znovu otevřete. Chcete-li vrátit všechny palety do jejich původních poloh, zvolte Window > Reset Palettes (Okno > Obnovit palety).


Některé palety mají rozbalovací nabídku s volbami, které se liší v závislosti na paletě. Nabídku palety zobrazíte klepnutím na trojúhelník v pravém horním rohu. Prohlédněte si paletu Objects Paleta Objects má

devět záložek obsahujících položky pro tvorbu webových stránek. Když pohybujete kurzorem myši přes každou záložku v paletě, objeví se pod ním název záložky. (Tyto názvy záložek jsou uvedeny také v rozbalovací nabídce palety). Když pohybujete kurzorem přes každou ikonu objektu uvnitř záložky, objeví se ve spodní části palety název objektu.

Chcete-li zobrazit záložku, zvolte název záložky z rozbalovací nabídky.

V Adobe GoLive obyčejně vytváříte stránky přetahováním objektů z palety Objects do okna dokumentu. To je jedna z funkcí, která může zvýšit vaši produktivitu, protože vytváření webové stránky přetahováním objektů je snadné (a rychlé). Prohlédněte si pruh nástrojů Podobně jako paleta

Inspector, je pruh nástrojů Adobe GoLive kontextově závislý; to znamená, že jeho tlačítka a funkce se mění v závislosti na tom, jaký objekt nebo zobrazení jste vybrali v okně dokumentu. Tři tlačítka zcela vpravo v pruhu nástrojů (Select Window (Vybrat okno), Show in Browser (Zobrazit v prohlížeči) a Adobe Online) zůstávají aktivní bez ohledu na to, co vyberete.


Pohled na okno dokumentu Okno dokumentu je místo, kde vytváříte webovou stránku. Adobe GoLive nabízí několik zobrazení dokumentu, umožňující snadný přístup k typu úprav, které chcete provádět. Nastavte okno dokumentu Pokud ještě nemáte stránku otevřenou, zvolte File > New (Soubor > Nový) nebo otevřete existující stránku. Okno dokumentu se chová podobně jako ostatní okna v programu. To znamená, můžete měnit jeho velikost, přemísťovat, sbalovat a rozbalovat ho. Klepnutím na šipku v pravém dolním rohu okna zvolte velikost okna v obrazových bodech nebo určete vlastní nastavení okna. Prozkoumejte záložky zobrazení Záložky v okně

dokumentu nabízejí jednotlivá zobrazení pro návrh rozvržení stránky, práci s rámci, úpravu zdrojového kódu, práci s přehledem zdrojového kódu a předběžný náhled rozvržení stránek a sad rámců, jak se objeví v prohlížeči Webu. Podívejte se na kontextovou nabídku

Klepnutím na záložku změňte zobrazení.

Adobe GoLive má kontextově závislé nabídky pro okna a objekty v oknech, umožňující snadný přístup k určitým příkazům. Kontextovou nabídku zobrazíte tak, že klepnete pravým tlačítkem myši (Windows) nebo klepnete se stisknutou klávesou Ctrl (Mac OS) kdekoli v okně webového místa.


[základy místa]

Základy webového místa

Vytvoření webového místa Když vytváříte webové místo s Adobe GoLive, ať je to jen několik stránek textu pro osobní webové místo nebo tisíce stránek s obrazy a JavaScripty pro webové místo společnosti, pracujete s webovým místem v okně místa. Můžete vytvořit prázdná místa a přidávat do nich soubory nebo vytvořit místa na základě existujících souborů tak, že je importujete ze složky nebo je zkopírujete ze vzorového místa. Adobe GoLive obsahuje vzorová webová místa, která můžete kopírovat a upravovat a tím vytvářet svá vlastní místa. Vytvořte své místo ze vzorového webového místa Mezi vzory

webových míst obsažených v Adobe GoLive 5.0 je vzor specificky určený pro tento přehled. Když vytvoříte nové místo za základě tohoto vzoru, můžete s ním experimentovat při procházení přehledem, aniž byste se museli obávat toho, že přepíšete původní místo. 1 Zvolte File > New Site > Copy from Template (Soubor > Nové místo > Kopírovat ze vzoru). 2 Ze seznamu vyberte vzor Site03 a jako název nového místa zadejte „Overview“. 3 Klepněte na Browse (Procházet), přejděte do složky, do které chcete místo uložit, a klepněte na OK. 4 Posuňte okno místa do levého dolního rohu obrazovky tak, abyste je mohli vidět současně s oknem

dokumentu nad ním. Můžete také vytvořit vlastní vzor místa a zařadit ho do seznamu vzorů míst v Adobe GoLive.


Pohled na okno webového místa Okno webového místa umožňuje spravovat fyzický obsah souborů a složek, které obsahuje webové místo. Můžete si ho představit jako oblast správy projektu, kde si ukládáte obrazy, soubory a složky a také informace, jako jsou například sady písem, vlastní barvy, předlohy a informace o serveru pro webové místo. Když je okno místa aktivní, nabízí pruh nástrojů funkce místa, které umožňují přidat novou složku, otevřít webovou stránku nebo automaticky aktualizovat místo tak, aby zahrnovalo nové vazby. Prohlédněte si záložky okna místa Při plném rozbalení má okno místa dva panely s deseti záložkami.

Chcete-li skrýt nebo zobrazit pravý panel, klepněte na dvojitou šipku (

) v dolní části okna.

Záložka Files (Soubory) v levém panelu je záložka, kde děláte většinu práce při vytváření místa. Zde přidáváte k místu soubory, otevíráte soubory a vybíráte soubory pro vazby. Dalších pět záložek v levém panelu (External (Vnější), Designs (Návrhy), Colors (Barvy), Fontsets (Sady písem) a Custom (Vlastní)) se používají k ukládání informací o místu, jako jsou URL pro vnější vazby, návrhy místa, barvy a písma používané na stránkách a výstřižky zdrojového kódu HTML pro místo. V pravém panelu jsou čtyři záložky (Extras (Dodatky), Errors (Chyby), FTP a WebDAV) pro ukládání odstraněných souborů a různých typů vzorových souborů, kontrolu chyb místa a posílání místa na servery FTP a WebDAV.

Klepnutím na dvojitou šipku rozbalíte okno místa do dvou panelů. Dalším klepnutím sbalíte okno místa do jednoho panelu.


Přidání webových stránek a dalších souborů k webovému místu Když je okno webového místa vybrané, můžete přetáhnout existující soubory nebo složky z pracovní plochy do záložky Files (Soubory) v okně místa nebo můžete do webového místa přidat nové složky a stránky. Přidejte novou složku a soubor Složky a prázdné stránky můžete vytvářet přímo v okně místa. 1 Klepněte uvnitř záložky Files v okně místa a pak klepněte na tlačítko New Folder (Nová složka) (

)

v pruhu nástrojů nebo zvolte Site > New > Folder (Místo > Nové > Složka). Na konec záložky Files se automaticky přidá nová nepojmenovaná složka. 2 Vyberte novou složku v okně místa a napište název „About“.

Většina webových serverů rozlišuje velikost písmen a omezuje znaky, které můžete použít v názvech souborů a složek. Používejte jednoduché konvence pojmenování bez speciálních znaků (a bez znaků s diakritikou). 3 S vybranou složkou zvolte Site > New > Page (Místo > Nové > Stránka). Do složky se automaticky

přidá nová, nepojmenovaná stránka.


Soubor můžete přejmenovat zadáním nového názvu v okně místa nebo s použitím palety File Inspector (Inspektor souboru). 4 Vyberte soubor untitled.html v okně místa a zvolte Window > Inspector (Okno > Inspektor). Zobrazí

se paleta File Inspector (Inspektor souboru). V záložce File (Soubor) palety File Inspector zadejte nový název souboru. 5 Zvolte File > Save (Soubor > Uložit), abyste svou stránku uložili. Změňte titul domovské stránky Stejným způsobem můžete měnit názvy souborů a tituly stránek u všech stránek ze vzorového místa Site03 – není třeba stránku otevírat. 1 V okně místa vyberte index.html. 2 V záložce Page (Stránka) palety File Inspector

změňte titul ze „Site03 Home Page“ na „Overview Home Page“. 3 Zvolte File > Save (Soubor > Uložit).


[návrh stránky]

Návrh webové stránky

Návrh jednoduché stránky s textem a obrazy Adobe GoLive umožňuje vytvářet jakékoliv druhy webových stránek, od velmi jednoduchých textových stránek po velmi složité stránky, které obsahují více objektů, animace a JavaScript. Chcete-li vytvořit nejjednodušší návrh stránky, můžete psát slova a přetáhnout obrazové soubory přímo do okna dokumentu. Přidejte text do nové stránky Nejjednodušším

způsobem, jak přidat text do stránky, je psát přímo do okna dokumentu. K formátování textu můžete použít pruh nástrojů. 1 Vytvořte novou stránku příkazem File > New

(Soubor > Nový), a pak klepněte do okna dokumentu a napište dva řádky textu. Za každým řádkem stiskněte Enter. 2 Klepněte na první řádek textu a z nabídky

Paragraph Format (Formát odstavce) v pruhu nástrojů zvolte Header 1 (Nadpis 1). 3 Klepněte na druhý řádek textu a zvolte Header 2 (Nadpis 2). 4 Prohlédněte si ostatní možnosti formátování v pruhu nástrojů tak, že vyberete nějaký text a klepnete

na tlačítko, například na tlačítko Italic (Kurzíva) (

).


Přetáhněte obraz na stránku Obraz můžete

přidat přímo do okna dokumentu. K experimentování použijte jeden z obrazů ze vzorového místa. 1 V záložce Files

(Soubory) v okně místa klepnutím na trojúhelník nebo na znak plus zobrazte obsah složky Images (Obrazy). 2 Přetáhněte soubor about_placeholder.jpg přímo do okna dokumentu nové stránky. Když uvolníte

tlačítko myši, objeví se obraz v místě kurzoru.


Použijte vyhrazený prostor pro obraz Obraz můžete

přidat na stránku také pomocí vyhrazeného prostoru pro obraz z palety Objects (Objekty). 1 Přetáhněte ikonu

Image (Obraz) z palety Objects do okna dokumentu, čímž přidáte vyhrazený prostor obrazu. 2 S vybraným vyhra-

zeným prostorem klepněte na tlačítko Namířit a vybrat ( ) pro Source (Zdroj) v paletě Image Inspector (Inspektor obrazu). 3 Táhněte čáru od

tlačítka Namířit a vybrat do složky Images (Obrazy) v záložce Files (Soubory) okna místa. Podržte ukazatel několik vteřin nad složkou Images, až se složka otevře, a vyberte obraz feature_placeholder.jpg. Když uvolníte tlačítko myši, obraz nahradí vyhrazený prostor v okně dokumentu. 4 Zvolte File > Save (Soubor > Uložit). Zobrazte náhled stránky V Adobe GoLive a ve webovém prohlížeči můžete svou práci předběžně zobrazit,

abyste viděli, jak bude na Webu vypadat. 1 Klepněte na záložku Layout Preview (Náhled rozvržení) v horní části okna dokumentu. 2 Klepněte na tlačítko Show in Browser (Zobrazit v prohlížeči) v pruhu nástrojů, aby se stránka otevřela

ve vašem oblíbeném prohlížeči. Pokud jste ještě nenastavili předvolby prohlížeče, budete muset určit prohlížeč. 3 Budete-li se chtít vrátit k práci na stránce, klepněte na záložku Layout Editor (Editor rozvržení) v okně

dokumentu.


Návrh stránky s mřížkou rozvržení a objekty Typickým způsobem, jak vytvářet webové stránky v Adobe GoLive, je použít objekty z palety Objects – často s tím, že začnete s mřížkou rozvržení, která vám pomůže s umístěním ostatních objektů na stránku. Textové rámečky, vyhrazené prostory pro obrazy, tabulky a dokonce i objekty filmů QuickTime se zanedlouho stanou vašimi nejběžnějšími objekty. Podívejte se na stránku s mřížkou rozvržení a dalšími objekty Hlavní stránka (index.html) pro webové místo

Overview používá několik typů objektů. Poklepejte na soubor index.html v okně webového místa, aby se otevřela stránka index.html. Stránka index.html se nachází v kořenové úrovni místa. Chcete-li zobrazit kořenovou úroveň složek a souborů v záložce Files (Soubory) okna místa, klepněte na ikonu ( ), ( ) v levém horním rohu okna.

A

C

D

B

A. Komponenta B. Textový rámeček C. Mřížka rozvržení D. Tabulka


Tato webová stránka obsahuje mřížku rozvržení, tabulky, obrazy, textový rámeček a komponentu. Všechny tyto objekty byly umístěny do okna dokumentu přetažením ikon z palety Objects. Mřížka rozvržení byla prvním objektem, který se přidal do okna dokumentu, a všechny ostatní objekty se umístily na ni. Vyberte objekty a zobrazte nastavení v paletě Inspector Při výběru každého objektu na stránce zobrazuje kontextově závislá paleta Inspector informace, vlastnosti a funkce specifické pro tento typ objektu. 1 Zvolte Window > Inspector (Okno > Inspektor), aby se otevřela paleta Inspector. 2 Klepněte na každý objekt na stránce a všimněte si, jak se mění název ve spodní části palety Inspector.

Obraz Identity Graphic a navigační pruh jsou komponenty, které odkazují na další zdrojové soubory HTML. Komponenty lze použít ve webovým místě opakovaně jako odkaz na stejný zdrojový soubor (viz „Použití komponent“ na straně 29). 3 Klepněte na komponentu a všimněte si URL k zdrojovému souboru v paletě Component Inspector

(Inspektor komponenty). Všechny komponenty se ukládají do datové složky webového místa a objevují se v záložce Extras (Dodatky) na pravé straně okna místa. Obraz a text na pravé straně stránky jsou v tabulce. 4 Klepněte na okraj tabulky, abyste zobrazili nastavení v paletě Table Inspector (Inspektor tabulky). 5 Klepněte mimo tabulku, abyste zobrazili nastavení mřížky rozvržení.


Obraz Index Headline a text v levém dolním rohu stránky byly umístěny jako jednotlivé objekty na mřížku rozvržení. Mřížka rozvržení umožňuje umísťovat obrazy a textové rámečky s přesností na jeden obrazový bod kamkoli na stránku, aniž byste potřebovali tabulky. Vybírání objektů Tabulky

Klepnutím na horní okraj vyberte celou tabulku.

Klepnutím se stisknutou klávesou Shift vyberte jednotlivou buňku.

Klepnutím do buňky vyberte, přidejte nebo odstraňte text.

Tažením pravé strany změňte velikost.

Klepnutím uvnitř vyberte obrazy.

Klepnutím uvnitř vyberte, přidejte nebo odstraňte text.

Tažením pravého dolního rohu změňte velikost.

Plovoucí rámečky

Klepnutím na okraj vyberte celý plovoucí rámeček.

Obrazy

Mřížka rozvržení

Klepnutím na okraj vyberte celou mřížku.


Klepnutím vyberte obraz.

Klepnutím uvnitř vyberte, přidejte nebo odstraňte text.


Textový rámeček

Klepnutím na okraj vyberte textový rámeček.



Návrh stránky s použitím plovoucích rámečků a animace Plovoucí rámečky umožňují manipulovat s objekty na stránce, a tím vytvářet dynamické efekty a zobrazení ve více vrstvách. Stránku můžete rozdělit do plovoucích rámečků, které budete formátovat jednotlivě, vyplníte je obsahem HTML a uložíte přes sebe. Vrstvení je klíčovou vlastností plovoucích rámečků. Mohou se překrývat nebo dokonce umísťovat přes sebe. Protože plovoucí rámečky jsou založeny na tagu DIV a jeho funkčnosti, mohou obsahovat jakýkoli jiný tag HTML jako obraz nebo jednoduchý text HTML s formátováním. Mají také stejný obraz pozadí a barevné vlastnosti jako stránka HTML. Jakýkoli objekt, který je obsažený v plovoucím rámečku, můžete animovat a pomocí akcí Adobe GoLive můžete plovoucí rámečky zobrazovat a skrývat. Podívejte se na některé plovoucí rámečky Stránka Contacts v místě Overview obsahuje tři animované

plovoucí rámečky.

Plovoucí rámečky jsou očíslovány, což určuje pořadí jejich překrývání.


1 Poklepejte na contacts.html ve složce Contacts v okně webového místa.

Stránka obsahuje obraz JPEG a tři plovoucí rámečky nad ním. Každý plovoucí rámeček obsahuje text: Contact 1, Contact 2 nebo Contact 3. 2 Klepněte na vnější okraje každého plovoucího rámečku, abyste zobrazili v paletě Floating Box

Inspector (Inspektor plovoucího rámečku) jeho vlastnosti. Chcete-li vytvořit plovoucí rámeček, přetáhněte ikonu Floating Box (Plovoucí rámeček) ze záložky Basic (Základní) v paletě Objects na libovolné místo v okně dokumentu nebo poklepejte na ikonu Floating Box, čímž ji vložíte do místa kurzoru na stránce. Polohu a velikost plovoucího rámečku můžete měnit nezávisle na jeho kotvě. Každý plovoucí rámeček má v pravém dolním rohu číslo. Adobe GoLive čísluje a ukládá plovoucí rámečky na sebe v pořadí, v jakém je přidáte na stránku, a vytváří pro každý z nich novou časovou stopu v editoru TimeLine (Časová osa) (pro animaci). Plovoucí rámečky mohou obsahovat text, obrazy, tabulky nebo libovolný objekt, který lze umístit na mřížku rozvržení. Chcete-li přidat text, pište přímo do plovoucího rámečku. Chcete-li přidat obraz, přetáhněte do plovoucího rámečku obrazový soubor nebo ikonu Image (Obraz) z palety Objects. Paleta Floating Box Inspector (Inspektor plovoucího rámečku) se používá k provedení několika úloh: •

Pojmenování plovoucího rámečku a usnadnění jeho identifikace.

•

Vyplnění pozadí barvou nebo obrazem.

•

Určení velikosti nebo polohy plovoucího rámečku v obrazových bodech.


Podívejte se, jak se plovoucí rámečky animují

Můžete nastavit, aby se průhledné obrazy GIF nebo jiné typy objektů pohybovaly podél lineární, zakřivené nebo náhodně se klikatící dráhy nebo aby objekty vypadaly, jako že se kolem sebe otáčejí. Každý objekt, který chcete animovat, musí být uzavřen v plovoucím rámečku. 1 Klepněte na záložku Preview (Náhled) v okně

dokumentu, aby se ve stránce Contact zobrazily animované plovoucí rámečky. Slova v každém plovoucím rámečku se pohybují vodorovně podél stopy ke konci, pak přeskočí zpět a začnou zase znovu. Protože část plovoucích rámečků je umístěna za okraji V paletě Inspector určíte tvar dráhy animace. stránky, vypadá to, jako by slova opouštěla stránku na jedné straně a vracela se zpět z druhé strany. 2 Klepněte na záložku Layout Editor (Editor rozvržení) v okně dokumentu Contacts.html a pak klepněte

na tlačítko TimeLine Editor (Editor časové osy) ( TimeLine Editor.

) v pravém horním rohu, aby se otevřelo okno

Všimněte si, že TimeLine Editor obsahuje pro každý plovoucí rámeček samostatnou stopu. 3 Klepněte na tlačítko Play (Spustit) (

) v dolní části okna a sledujte, jak se při pohybu plovoucích rámečků po stránce časový kurzor pohybuje po stopách.

Každá stopa má nejméně dva klíčové snímky ( ): jeden klíčový snímek, který označuje počáteční polohu plovoucího rámečku v okně dokumentu a druhý, který označuje koncovou polohu. Polohu můžete upravit výběrem klíčového snímku a přetažením plovoucího rámečku do požadované polohy. Chcete-li přidat nové klíčové snímky, klepněte do stopy se stisknutou klávesou Ctrl (Windows) nebo Apple (Mac OS). Rychlost (počet snímků za vteřinu) upravíte volbou čísla z rozbalovací nabídky ve spodní části editoru TimeLine. Paleta Floating Box Inspector (Inspektor plovoucího rámečku) se používá k provedení několika úloh animace: •

Určení tvaru dráhy objektu volbou lineárního, zakřiveného nebo náhodného typu animace.

•

Nahrání celé dráhy animace (místo vložení klíčových snímků po jednom) stisknutím tlačítka Record (Nahrát) a posouváním plovoucího rámečku po stránce.

•

Přiřazení různých hloubek vrstvení plovoucích rámečků před nebo za ostatní plovoucí rámečky.


Přidávání barev a vazeb Jakmile přidáte objekty do stránky, můžete k nim přidat barvy a navázat objekty k lokálním stránkám nebo externím URL. Přidejte barvy k objektům na stránce Barvy lze

aplikovat na většinu objektů na stránce HTML včetně tabulek, textu, plovoucích rámečků a pozadí stránky. 1 V hlavní stránce

index.html místa Přetáhněte barvy, které chcete uložit, do záložky barev. Overview klepněte na ikonu stránky ( ) v horní části okna dokumentu (vedle titulu stránky). Všimněte si bílé barvy pozadí určené v paletě Page Inspector (Inspektor stránky). Chcete-li barvu změnit, klepněte v barevném poli v paletě Page Inspector, čímž se otevře paleta Color (Barvy), a klepněte v paletě Color na novou barvu. Nová barva se objeví v barevném poli v paletě Page Inspector a v pozadí stránky. 2 Klepněte na okraj buňky tabulky, která obsahuje text. Všimněte si barvy pozadí v záložce Cell (Buňka)

v paletě Table Inspector (Inspektor tabulky). Chcete-li odstranit barvu z pozadí buňky, odznačte volbu Color (Barva). Nové barvy pro webové místo můžete uložit tím, že je přetáhnete z palety Color do záložky Colors v okně místa (kde můžete změnit jejich názvy a uspořádat je do složek). Tyto barvy se objeví také v seznamu Site Color List (Seznam barev místa) v paletě Color, takže je můžete snadno znovu použít pro jiné objekty. 3 Vyberte nějaký text na stránce. Text na hlavní stránce index.html místa Overview používá seznam stylů

k určení barvy nadpisů a hlavního textu. Když text vyberete a změníte jeho barvu, změníte barvu ze seznamu stylů pouze pro tento výběr. Chcete-li změnit barvu, přetáhněte novou barvu z palety Color na vybraný text. Abyste viděli změny, klepněte mimo text.


Přidejte hypertextové a obrazové vazby

Hypertextové nebo obrazové vazby mohou přenést návštěvníka na jiné místo na stejné stránce, na jinou stránku ve stejném webovém místě nebo do úplně jiného webového místa. 1 Poklepejte na soubor

about.html v okně místa, aby se otevřela stránka About pro místo Overview. 2 Vyberte slova „More

Information“ v levém dolním rohu stránky a klepněte na tlačítko New Link (Nová vazba) ( ) v pruhu nástrojů. 3 Táhněte čáru z tlačítka Namířit a vybrat (

) v záložce Link (Vazba) palety Text Inspector (Inspektor

textu) na stránku v okně místa. S obrazovými vazbami se zachází stejně. 4 Vyberte obraz v tabulce a klepněte na tlačítko New Link v pruhu nástrojů. 5 Klepněte na záložku Link v paletě Image Inspector (Inspektor obrazu) a táhněte čáru z tlačítka Namířit

a vybrat na stránku v okně místa. (Musíte táhnout ze záložky Link, ne ze záložky Basic v paletě Image Inspector.) 6 Vyzkoušejte vazby v zobrazení Preview (Náhled) a pak stránku uložte.


Práce s automatickými objekty Automatické objekty umožňují vytvářet grafické návrhy v Adobe Photoshopu, Adobe Illustratoru 9 nebo Adobe LiveMotion, importovat je jako webové obrazy do Adobe GoLive a udržovat vazbu k původnímu zdrojovému souboru. Když poklepete na automatický objekt na stránce, otevře se zdrojový soubor v původní aplikaci. Kdykoli uděláte změnu ve zdrojovém souboru, Adobe GoLive webový obraz automaticky aktualizuje a optimalizuje. Použijte automatický objekt Photoshopu Adobe

GoLive má pro automatické objekty Photoshopu vestavěné možnosti Save for Web (Uložit pro Web), takže nemusíte mít spuštěný Adobe Photoshop na stejném počítači. 1 Vytvořte novou

stránku. 2 V záložce Smart

(Automatické) v paletě Objects poklepejte na ikonu Smart Photoshop, abyste ji přidali na stránku. 3 V záložce Basic palety Smart Image Inspector (Inspektor automatického obrazu) táhněte čáru z tlačítka

Namířit a vybrat pro Source (Zdroj) (

) na soubor id_bar.psd ve složce Images v okně místa.

Pro soubory Photoshopu se otevře dialogové okno Save for Web (Uložit pro Web). 4 Z rozbalovací nabídky Settings (Nastavení) zvolte GIF Web Palette (GIF s webovou paletou) a klepněte

na OK. Uložte obraz GIF do složky Images webového místa. V rohu obrazu na stránce se objeví ikona Photoshopu, která označuje, že je to automatický objekt. Když na ni poklepete, otevře se zdrojový soubor ve Photoshopu. 5 Táhněte pravý dolní roh automatického objektu se stisknutou klávesou Shift, abyste jej zmenšili se

zachováním poměru stran. Adobe GoLive automaticky optimalizuje webový obraz na základě původního zdrojového souboru, aby se zajistilo, že webový obraz nezíská zbytečné artefakty ani neztratí kvalitu původního obrazu.


[produktivita]

Vyšší produktivita

Použití kaskádových seznamů stylů Kaskádové seznamy stylů umožňují jednou definovat atributy barvy, písma a stylu a aplikovat tyto definice na text kdekoli na stránce nebo v místě. Aktualizací seznamů stylů se aktualizuje vzhled textu na každé stránce s vazbou na seznam stylů. Existují dva druhy seznamů stylů: interní, které jsou specifické pro jednu stránku, a externí, kterou lze navázat k více stránkám. V Adobe GoLive můžete exportovat interní seznam stylů jako externí nebo importovat externí seznam stylů jako interní. Podívejte se na seznam stylů Místo Overview používá pro všechny stránky externí seznam stylů. 1 Otevřete soubor index.html a klepněte na tlačítko CSS (

) v pravém horním rohu okna dokumentu,

abyste viděli, jaké seznamy stylů tato stránka používá. 2

Poklepejte na soubor style_03.css v okně seznamu stylů, aby se otevřel externí seznam stylů.

3 Klepněte na tag (například na tag h1) v seznamu stylů a všimněte si jeho vlastností v paletě CSS Selector

Inspector (Inspektor selektoru CSS). Záložky Basics (Základní) a Font (Písmo) v paletě CSS Selector Inspector zobrazují pro vybraný tag barvu, písmo, velikost písma a další vlastnosti. Aplikujte seznam stylů na stránku Chcete-li vidět, jak seznam stylů změní vzhled stránky, vytvořte vazbu

k souboru style_03.css na existující stránce. 1 Otevřete stránku, kterou jste vytvořili dříve, nebo vytvořte novou stránku, která obsahuje text

formátovaný jako Head 1 a Head 2, a pak klepněte na tlačítko CSS (

) v okně dokumentu.

2 Klepněte pravým tlačítkem myši (Windows) nebo se stisknutou klávesou Ctrl (Mac OS) v okně Style

Sheet (Seznam stylů) a z kontextové nabídky zvolte Add Link to External CSS (Přidat vazbu na externí CSS). 3 V okně Style Sheet vyberte prázdný odkaz na soubor a táhněte čáru z tlačítka Namířit a vybrat (

) v paletě External Style Sheet Inspector (Inspektor externího seznamu stylů) na soubor style_03.css v okně místa.

Všimněte si, že soubor style_03.css se objeví v okně Style Sheet a na text v okně dokumentu se aplikují styly pro Header 1 a Header 2. Nyní bude jakýkoliv text, který přidáte na stránku, používat odpovídající styl ze seznamu stylů style_03.css.


Upravte seznam stylů Změny, které uděláte v externím seznamu stylů, se automaticky aktualizují na každé

stránce, která seznam stylů používá. 1 V okně seznamu stylů style_03.css klepněte na tag h2. 2 V paletě CSS Selector Inspector klepněte na záložku Font (Písmo) a vyberte jinou barvu. Všimněte si,

že nová barva se na stránce okamžitě aplikuje na text Header 2. 3 Zvolte File > Save (Soubor > Uložit), abyste seznam stylů uložili.

Nyní bude mít text Header 2 na každé stránce, která používá seznam stylů style_03.css, novou barvu. Prohlédněte si další volby dostupné v paletě CSS Selector Inspector a použijte pruh nástrojů k přidání nových tříd a tagů stylu.

Použití komponent Komponenty jsou dynamické vazby na soubory HTML. Komponenty na svých stránkách používáte, když chcete vytvořit více odkazů na stejné prvky v jednom zdrojovém souboru. Změny pak stačí udělat pouze jednou ve zdrojovém souboru a Adobe GoLive automaticky aktualizuje každou stránku, která komponentu používá. Komponenty usnadňují aktualizaci grafiky, vazeb v navigačních pruzích a další změny, které se vyskytnou v průběhu vývoje a údržby webového místa. Přidejte komponentu na stránku K přidání

komponent na svou stránku použijete paletu Objects. 1 Klepněte na záložku Site Extras (Dodatky

místa) v paletě Objects a z rozbalovací nabídky v dolní části palety zvolte Components (Komponenty). V paletě se objeví ikony, které představují všechny existující komponenty ve webovém místě. 2 Přetáhněte ikonu (například ikonu

navBar.html) do okna dokumentu. Komponenta navBar.html odkazuje na soubor HTML, který obsahuje navigační pruh s 5 tlačítky.


Upravte zdrojový soubor komponenty Chcete-li upravit obsažené prvky, můžete zdrojový soubor

komponenty otevřít jedním ze dvou způsobů: •

Poklepejte na komponentu v okně dokumentu.

•

Poklepejte na komponentu ve složce Components (Komponenty) v záložce Extras (Dodatky) v okně místa.

Když uděláte změnu ve zdrojovém souboru komponenty (například napíšete nový text pro jedno z navigačních tlačítek), Adobe GoLive aktualizuje místo a změna se objeví na každé stránce, která komponentu používá. Vytvořte komponentu Jako komponentu můžete uložit libovolný soubor HTML. 1 Umístěte objekty, které chcete uložit jako komponentu, na prázdnou stránku a pak klepněte na ikonu

Page (Stránka) v horní části okna dokumentu. 2 V záložce HTML palety Page Inspector (Inspektor stránky) klepněte na tlačítko Component

(Komponenta). 3 Zvolte File > Save As (Soubor > Uložit jako), pojmenujte komponentu s příponou názvu souboru

HTML, zvolte Component (Komponenta) z rozbalovací nabídky v pravém dolním rohu (Windows) nebo pravém horním rohu (Mac OS) a klepněte na Save (Uložit). (Poznámka: Aby se soubor uložil jako komponenta, musí být otevřené webové místo.) Nová komponenta se objeví v záložce Site Extras palety Objects a v podsložce Components (Komponenty) v záložce Extras okna místa.

Použití souborů předloh Někdy můžete chtít vytvořit několik stránek ve webovém místě s podobným rozvržením a návrhem stránky. Namísto vytváření každé stránky od samého začátku můžete vytvořit jednu stránku, uložit ji jako předlohu a pak použít předlohu jako šablonu pro všechny ostatní stránky. Vytvořte stránku na základě předlohy Stránku můžete vytvořit z předlohy jedním ze dvou způsobů: •

Poklepejte na soubor předlohy ve složce Stationeries (Předlohy) v záložce Extras okna místa a klepněte na Create (Vytvořit).

•

Přetáhněte ikonu předlohy ze záložky Site Extras (Dodatky místa) v paletě Objects do záložky Files (Soubory) nebo do záložky Navigation (Navigace) okna místa.


Soubor můžete přejmenovat a použít jej jako výchozí bod pro novou stránku ve webovém místě.

Vytvořte šablonu předlohy Poté, co navrhnete

stránku, kterou chcete použít jako šablonu, zvolte File > Save As (Soubor > Uložit jako) a pak zvolte Stationeries (Předlohy) z nabídky v pravém dolním rohu (Windows) nebo pravém horním rohu (Mac OS) v dialogovém okně a klepněte na Save (Uložit). (Poznámka: Aby se soubor uložil jako předloha, musí být otevřené webové místo.) Chcete-li předlohu upravit, poklepejte na soubor v záložce Extras okna místa a klepněte na Yes (Ano) nebo Modify (Upravit).


[interaktivita]

Interaktivní objekty

Vytváření rolloverů Rollovery jsou objekty, které mění svůj obsah, když přes ně přejedete kurzorem myši nebo na ně klepnete. Prohlédněte si některá tlačítka s rollovery Alternativní navigační pruh v místě Overview obsahuje tlačítka

s rollovery pro každou navigační vazbu. 1 Poklepejte na soubor alternate_Nav.html ve složce Components v okně místa, abyste otevřeli zdrojový

soubor komponenty. 2 Klepněte na záložku Layout Preview (Náhled rozvržení) v okně dokumentu a posuňte kurzor myši nad

každé tlačítko v navigačním pruhu. Všimněte si, jak se barva textu změní, když je myš nad tlačítkem. 3 Klepněte na tlačítko a všimněte si stavu textu poté, co na něj klepnete.

Každé tlačítko s rolloverem v tomto navigačním pruhu má tři grafiky představující různé stavy tlačítka: základní stav, stav při přejezdu kurzoru myši a stav při stisknutí nebo klepnutí. Vytvořte tlačítko s rolloverem K navázání obrazů k různým stavům tlačítka použijete paletu Objects a paletu Rollover Inspector (Inspektor rolloveru). 1 Klepněte na záložku Layout Editor (Editor rozvržení) v okně dokumentu. 2 Klepněte na záložku Smart (Automatické) (

) v paletě Objects a přetáhněte ikonu Rollover do okna

dokumentu. 3 Vyberte vyhrazený prostor objektu Rollover a pak v paletě Rollover Inspector (Inspektor rolloveru)

klepněte na ikonu Main (Základní). 4 Táhněte čáru z tlačítka Namířit a vybrat (

) na první obraz pro tlačítko (například na soubor btn_about_main.jpg ve složce Alternate Nav Buttons pro místo Overview).

Všimněte si, že v paletě Rollover Inspector nahradí ikonu Main (Základní) miniatura obrazu. 5 V paletě Rollover Inspector vyberte ikonu Over (Přes), klepněte na zaškrtávací pole pod ní a táhněte

čáru z tlačítka Namířit a vybrat (

) na druhý obraz (například na soubor btn_about_over.jpg).


6 V paletě Rollover Inspector vyberte ikonu Click (Klepnutí), klepněte na zaškrtávací pole a táhněte čáru

z tlačítka Namířit a vybrat (

) na třetí obraz (například na soubor btn_about_down.jpg).

7 Vyzkoušejte tlačítko s rolloverem v zobrazení Preview (Náhled) a pak stránku uložte. Vytvořte vazbu rolloveru na stránku Jakmile vytvoříte stavy rolloveru, můžete navázat tlačítko s rolloverem

na stránku. 1 Vyberte tlačítko s rolloverem v zobrazení Layout (Rozvržení). 2 V paletě Rollover Inspector vyberte ikonu Click (Klepnutí). 3 Vyberte zaškrtávací pole URL a táhněte čáru z tlačítka Namířit a vybrat (

na stránku v okně místa. Když nyní klepnete na tlačítko, objeví se v prohlížeči navázaná stránka.

) v paletě Rollover Inspector


[správa]

Správa webového místa

Použití okna webového místa Okno webového místa umožňuje přejmenovat, uspořádat nebo dočasně odstranit soubory ve webovém místě. Když uděláte změnu, Adobe GoLive vás upozorní na ostatní soubory, které jsou změnou ovlivněny, a aktualizuje je za vás. Přejmenujte a přesuňte soubor Když soubor přejmenujete nebo přesunete v okně místa, Adobe GoLive

zkontroluje odkazy v ostatních souborech a aktualizuje je za vás. 1 V záložce Files (Soubory) okna místa vyberte soubor a zadejte nový název souboru. Stiskněte Enter

nebo klepněte mimo soubor. Objeví se dialogové okno Rename File (Přejmenovat soubor), se seznamem složek a souborů ve webovém místě, které budou ovlivněny touto změnou názvu. 2 Klepněte na OK, čímž se aktualizují všechny ovlivněné soubory ve webovém místě.

Pokud přejmenujete nebo přesunete soubor na pracovní ploše a ne v okně webového místa, budete muset ručně aktualizovat vazby na každé stránce ovlivněné touto změnou. 3 Přetáhněte soubor do složky. 4 Klepněte na OK v dialogovém okně Move File (Přesunout soubor). Pokud jste vyzváni, klepněte na OK,

aby se aktualizovaly ostatní soubory, například komponenty. Odstraňte stránku z webového místa Okno webového místa má složku Site Trash (Koš místa) pro uchování odstraněných souborů, takže je můžete později, pokud budete chtít, vyhledat a přidat zpět do webového místa. 1 Vyberte soubor v záložce Files a klepněte na tlačítko Site Trash (Koš místa) (

) v pruhu nástrojů. Klepněte na Move (Přesunout), abyste potvrdili, že chcete soubor přesunout do koše.

2 Klepněte na záložku Extras (Dodatky) a otevřete složku Site Trash, abyste zobrazili odstraněný soubor.


3 Přetáhněte soubor zpět do záložky Files a klepněte na OK, abyste soubory aktualizovali.

Poznámka: Chcete-li odstranit soubory z webového místa úplně, vyberte soubory ve složce Site Trash a zvolte Edit > Clear (Úpravy > Odstranit). Použití okna místa k přejmenování a přemísťování souborů je příkladem toho, co můžete dělat s nástroji Adobe GoLive pro správu webového místa. Můžete také ukládat všechny druhy informací (jako například adresy URL, barvy, písma nebo výstřižky zdrojového kódu) a soubory šablon pro opakované použití, sledovat změny souboru ve webovém místě na webovém serveru, pracovat se serverem WebDAV a vytvářet kompletní návrhové modely, které lze použít jako základ webových míst. Informace o nejnovějších možnostech viz kapitola „Co je nového v Adobe GoLive 5.0“.

Co je nového v Adobe GoLive 5.0

Adobe GoLive 5.0 nabízí nové funkce, jako jsou například 360Code™ 7zlepšující řízení zdrojového kódu, vazby automatických objektů k souborům Photoshopu, Illustratoru a LiveMotion zefektivňující pracovní postupy, nástroje pro úpravy QuickTime s podporou pro streaming filmů, nové nástroje pro návrh místa a přehledy místa, dokonalejší rozhraní zvyšující efektivitu a produktivitu a rozšiřitelnost skriptu s použitím SDK (Software Development Kit). Vyzkoušejte vzrušující nové funkce v Adobe GoLive 5.0 a sledujte, jak snadné je navrhovat, implementovat a spravovat tvůrčí a propracovaná webová místa. Od nejjednoduššího jednostránkového návrhu po nejsložitější místa pro e-obchod nabízí Adobe GoLive ovládání a flexibilitu, které k tvorbě požadovaného webového místa potřebujete.

38 Co je nového v Adobe GoLive 5.0

[zdrojový kód]

Řízení a úpravy kódu

Nástroje a funkce pro zdrojový kód Adobe GoLive 5.0 nabízí lepší ovládání zdrojového kódu HTML svými vestavěnými funkcemi řízení kódu a dokonalejším rozhraním pro zdrojový kód. Nové funkce umožňují beze změny začlenit do webových stránek JavaScript a libovolný uživatelský jazyk tagů, současně zobrazovat zdrojový kód i rozvržení stránky, snadněji vybírat elementy a atributy a vyhledávat tagy HTML a elementy HTML pomocí syntaktických pravidel HTML. 360Code Když chcete zahrnout JavaScript nebo jiný zdrojový kód do webových stránek (například

FileMaker, XML, ASP nebo ColdFusion), nemusíte se již obávat toho, jak se začlení a jak bude fungovat s webovým místem. Adobe GoLive nabízí 360Code, umožňující přesun libovolné stránky HTML a JavaScriptu mezi vizuálním prostředím Adobe GoLive a libovolným textovým editorem HTML bez jakéhokoliv vlivu na obsah a strukturu zdrojového kódu dokumentu HTML. Bez ohledu na to, jaký editor HTML nebo program použijete, když importujete stránky do GoLive, zdrojový kód zůstane stejný. Současné zobrazení rozvržení a zdroje Nyní

můžete zobrazit webovou stránku v zobrazení Layout (Rozvržení) a upravovat její kód v nové paletě Source Code (Zdrojový kód). Zobrazení Layout je WYSIWYG okno dokumentu, kde navrhujete a vytváříte webové stránky vizuálně přidáním mřížky rozvržení, tabulek, obrazů a textu. Paleta Source Code (dostupná z nabídky Window) zobrazuje zdrojový kód HTML a zvýrazňuje všechny elementy, které vyberete v zobrazení Layout. Na obrazovce můžete mít obě zobrazení současně a když uděláte změnu v jednom zobrazení, změny se okamžitě odrazí ve druhém. Zobrazení Layout (Rozvržení) a paleta Source Code (Zdrojový kód) jsou zobrazeny na obrazovce současně.


Paleta Markup Tree (HTML strom) Nová paleta Markup Tree je navigační nástroj HTML, který ukazuje hierarchickou polohu vybraného objektu ve stromové struktuře elementů HTML. Paleta Markup Tree by mohla například ukazovat, že vybraný obraz je obsažen uvnitř elementu Paragraph, elementu Body a elementu HTML. Klepnutím na libovolný z těchto elementů v paletě se zobrazí nová hierarchie založená na elementu, na který klepnete, a vybere se každý objekt (včetně textu) na stránce uvnitř tohoto elementu. Tlačítka Předcházející a Následující umožňují přecházet v historii výběrů zpět a dopředu. Paletu Markup Tree použijte při práci v zobrazení Layout spolu s novou paletou Source Code k rychlému a přesnému výběru požadovaných elementů. Vyhledejte elementy HTML Záložka Element v dialogovém okně Find (Hledat) je důmyslný vyhledávací nástroj, který umožňuje hledat a nahrazovat tagy a atributy. Obvyklá záložka Find and Replace (Hledat a nahradit) hledá na textovém základě, zatímco záložka Element vyhledává na základě HTML s použitím syntaktických pravidel. Záložka Element je více než vyhledávací nástroj – je to také nástroj pro úpravy HTML, protože s ním můžete přidávat nové elementy HTML, a také elementy nahrazovat a odstraňovat. To lze provést řadou akcí s elementy, které jsou dostupné v dialogovém okně Find.

Další informace o úpravách kódu HTML v Adobe GoLive, včetně použití palety Source Code viz příslušná témata v nápovědě programu. Odborníci na HTML mohou také upravovat databázi Web Settings (Nastavení Webu). Další informace o Web Settings a XML viz „Web Settings“ a „Web Technology Support“ v nápovědě programu.


[vylepšení]

Začlenění grafiky

Automatické objekty Adobe GoLive umožňuje importovat do dokumentu HTML soubory ve vlastním formátu Photoshopu, Illustratoru 9 a LiveMotion jako automatické objekty. Když poklepete na automatický objekt v okně dokumentu, otevře se zdrojový soubor ve Photoshopu, Illustratoru nebo LiveMotion podle typu souboru. Pokud provedete změny ve zdrojovém souboru, Adobe GoLive automaticky aktualizuje obraz na webové stránce. Pro automatické objekty Photoshopu má Adobe GoLive zabudovanou funkci Save For Web (Uložit pro Web), takže není třeba spouštět Photoshop, kdykoli změníte velikost objektu nebo webová nastavení. Pro automatické objekty Illustratoru a LiveMotion spustí GoLive při aktualizaci a nové optimalizaci webového obrazu aplikaci na pozadí. Import souborů Photoshopu, Illustratoru nebo LiveMotion Import libovolného z těchto souborů je v GoLive

snadný. Jednoduše přetáhnete ikonu automatického objektu ze záložky Smart (Automatické) palety Objects do okna dokumentu. Pak vytvoříte vazbu automatického objektu na zdrojový soubor a určíte cílové místo pro webovou kopii souboru. Automatické objekty LiveMotion se vždy ukládají jako obrazy SWF (ve formátu filmu Flash). Podle typu automatického objektu Photoshopu nebo Illustratoru a zvoleného formátu webového obrazu nabízí GoLive pro webový obraz různá optimalizační nastavení. Chcete-li změnit zdrojový obraz, jednoduše poklepejte na automatický objekt v okně dokumentu. Zdrojový soubor se otevře v příslušném programu (Photoshop, Illustrator nebo LiveMotion). Pokud změníte velikost objektu v GoLive, webový obraz se automaticky znovu optimalizuje a uloží.


[návrh stránky]

Obrazy, vrstvy a plovoucí rámečky

Návrh stránky ve Photoshopu Prostředí pro návrh stránky Adobe GoLive nabízí novátorské a jedinečné způsoby importu a použití vrstev obrazu a obkreslovaných obrazů Photoshopu. Nyní můžete pracovat na grafickém návrhu v Adobe Photoshopu a snadno převést své návrhy do formátu webové stránky v GoLive. Import vrstev jako HTML Na webovou stránku můžete importovat vrstvy ze souboru Photoshopu jako samostatné obrazy. Když zvolíte File > Import Photoshop as HTML (Soubor > Importovat Photoshop jako HTML), GoLive zobrazí každou vrstvu Photoshopu v samostatném dialogovém okně Save for Web (Uložit pro Web). Můžete změnit nastavení optimalizace pro každou vrstvu a pak uložit každou vrstvu samostatně. Každá vrstva se zobrazí na webové stránce jako samostatný plovoucí rámeček. Pak můžete pracovat s plovoucími rámečky obvyklými způsoby nebo můžete převést plovoucí rámečky na mřížku rozvržení a textové rámečky.

Paleta Vrstvy Photoshopu

Paleta Floating Boxes (Plovoucí rámečky) v GoLive


Obkreslování obrazů Adobe GoLive 5.0

umožňuje importovat obkreslované obrazy, které můžete použít k předběžnému návrhu rozvržení webových stránek. Pro obkreslované obrazy lze použít běžné formáty obrazů, včetně PSD (Photoshop), JPEG, GIF, PNG a BMP, abychom vyjmenovali alespoň některé. Jakmile importujete obkreslovaný obraz, můžete kdykoli nastavit jeho krytí, polohu, zarovnávat ho a upravit ho nebo změnit jeho zdrojový soubor. Můžete vyřezávat požadované části obrazu a použít funkci Save for Web k optimalizaci a uložení výřezů obrazu ve webových formátech. Vyříznuté obrazy se objeví na webové stránce v plovoucích rámečcích. Můžete také měnit pořadí vrstvení výřezů a animovat plovoucí rámečky. Importujte tolik obkreslovaných obrazů, kolik chcete, abyste mohli pokračovat v navrhování své stránky.

Dokonalejší možnosti plovoucích rámečků Když importujete z Adobe Photoshopu vrstvy obrazů a obkreslované obrazy, stanou se z nich na webové stránce samostatné plovoucí rámečky. Nyní můžete pro každý plovoucí rámeček určit mřížku rozvržení, která vám pomůže při nastavování polohy obrazu. A pokud nechcete, aby byl obraz v plovoucím rámečku, můžete převést plovoucí rámeček na nové stránce na mřížku rozvržení. Plovoucí rámečky lze vybírat, zarovnávat a zvětšovat nebo zmenšovat jednotlivě nebo ve skupinách. Definujte mřížku pro nastavení polohy Pomocí palety Floating Boxes (Plovoucí rámečky) můžete nastavit neviditelnou mřížku, která vám pomůže při nastavení polohy plovoucího rámečku na stránce. Můžete nastavit, aby se plovoucí rámeček při přesouvání přitahoval na mřížku ve svislém nebo vodorovném směru. Můžete nastavit, aby se mřížka objevila, když budete plovoucím rámečkem pohybovat, a zmizela, když uvolníte tlačítko myši. Další volby umožňují měnit vzdálenost mezi linkami mřížky a zabránit tomu, aby plovoucí rámeček překrýval ostatní. Převeďte plovoucí rámeček na mřížku Při převodu plovoucího rámečku na předvolenou mřížku rozvržení

se elementy uvnitř plovoucího rámečku umístí v novém dokumentu na mřížku rozvržení. Elementy jsou na nové stránce ve stejné poloze jako plovoucí rámeček na původní stránce a mřížka, velikost a barva pozadí původního plovoucího rámečku se zachová.


[produktivita]

Produktivita a efektivita

Zvýšení produktivity Adobe GoLive 5.0 nabízí množství nových a vylepšených funkcí, které vám pomohou zvýšit produktivitu při návrhu, rozvržení a vytváření webových stránek. Zdokonalený návrh a manipulace s tabulkami, lepší paleta barev, nové volby kaskádových stylů a zarovnávání a transformace objektů jsou jen některé ze způsobů, kterými můžete zvýšit svou produktivitu. Dokonalejší návrh a manipulace s tabulkami Tabulky se nyní navrhují a upravují snadněji než dříve. Nová

paleta Table (Tabulka) obsahuje sadu stylů tabulek. Okamžitě můžete změnit vzhled tabulky aplikováním jednoho z přednastavených návrhů tabulky nebo vytvořte své vlastní styly tabulek a přidejte je do palety Table. Obrazy pozadí lze snadno aplikovat buď na celou tabulku nebo na vybrané buňky. Záložka Select (Výběr) palety Table umožňuje snadno vybírat v tabulce jednotlivé buňky, řádky, sloupce nebo bloky sousedních buněk. Můžete uspořádat obsah vybraných buněk nebo tabulky svisle nebo vodorovně uspořádáním sloupců a řádků.

A

B

C

A. Vytvořte tabulku s písmy a barvami, které chcete uložit. B. Uložte tabulku do záložky Style tlačítkem Capture. C. Určete počet opakujících se buněk ve vzoru.


Zdokonalení kaskádových stylů Manipulaci se

seznamy kaskádových stylů vylepšuje několik nových funkcí: •

Vložení stylu přetažením stylu z jedné sady do druhé

•

Aplikování stylu jeho přetažením z okna Style Sheet (Seznam stylů) a umístěním na vybraný element na stránce HTML

•

Import seznamů stylů původně definovaných jako externí styly a jejich převedení do interních stylů nebo export interních seznamů stylů jako externí styly.

K rychlému importu nebo exportu seznamů stylů použijte kontextovou nabídku.

Vylepšení palety Color (Barvy) Použití barev je

snadnější než dříve – pouze klepněte na libovolné barevné pole v GoLive, které dočasně vytvoří živé spojení s paletou Color. Paleta Color se přesune dopředu a každé nastavení se okamžitě použije pro vybrané barevné pole – již není třeba žádné přetahování barev z panelu náhledu. Paleta Color obsahuje volby, které umožňují určit, jaký barevný prostor se v paletě zobrazí. Paleta History (Historie) Při tvorbě webové stránky

– přidávání objektů, jako jsou například mřížky rozvržení, tabulky a obrazy – uchovává paleta History průběžně seznam funkcí použitých v platném zobrazení úprav. Pokaždé, když dokument změníte, přidá se do palety History nový stav dokumentu. Změny udělané v platném zobrazení úprav můžete vrátit zpět tím, že postupujete v historii úprav směrem zpět. GoLive umožňuje nastavit počet kroků (neboli stavů historie), o které se můžete vrátit zpět. Paleta History (Historie): návrat k předchozímu stavu.


Paleta Align (Zarovnání) Kromě tlačítek zarovnání v pruhu nástrojů vám nová paleta Align umožňuje zarovnat nebo rovnoměrně rozmístit následující položky: •

Objekty na mřížce rozvržení.

•

Aktivní oblasti obrazové mapy.

•

Plovoucí rámečky.

•

Stopy v zobrazení Layout (Rozvržení) v prohlížeči QuickTime Movie Viewer (Prohlížeč filmů QuickTime).

•

Položky v okně návrhu webového místa.

Vyberte jednu nebo více těchto položek a použijte volby v paletě Align k jejich zarovnání doleva, doprava, nahoru, dolů nebo na střed nebo k rovnoměrnému rozmístění objektů nebo jejich mezer vzhledem k jejich svislé nebo vodorovné ose.

Použijte paletu Transform (Transformace) k vytvoření objektů se stejnou velikostí. Použijte paletu Align (Zarovnat) k zarovnání jejich horních okrajů a k jejich rovnoměrnému rozmístění.

Paleta Transform (Transformace) S paletou Transform můžete umístit objekt nebo skupinu objektů, měnit

proporcionálně velikost objektů, seskupovat objekty a rozdělovat skupiny objektů a měnit jejich uspořádání ve vrstvách. Když použijete k nastavení hodnot šířky a výšky volbu Size (Velikost), můžete měnit velikost objektu nebo skupiny objektů proporcionálně. Volba Z-Order (Pořadí Z) umožňuje přemísťovat aktivní oblasti obrazové mapy před nebo za ostatní aktivní oblasti v obrazových mapách nebo měnit pořadí stop v prohlížeči filmů QuickTime Movie Viewer.


Uložte si text nebo výstřižky kódu HTML Při vytváření webové stránky typicky několikrát opakovaně

vytváříte a měníte návrh. Abyste neztratili cenný text nebo kód HTML, můžete přetáhnout část, kterou chcete uložit, do záložky Custom (Vlastní) v okně webového místa. Výstřižek můžete pojmenovat stejně, jako libovolný soubor. Tyto výstřižky jsou specifické pro webové místo a ukládají se do souboru místa.

Přetáhněte výstřižek kódu do záložky Custom.

Uživatelské klávesové zkratky Adobe GoLive 5.0 nabízí dvě sady klávesových zkratek. Můžete upravovat

kteroukoliv z těchto sad nebo si můžete vytvořit vlastní sadu klávesových zkratek na základě jedné z těchto sad. Kontextové nabídky Klepnutím pravým tlačítkem myši (Windows) nebo klepnutím se stisknutou klávesou

Ctrl (Mac OS) kdekoli v okně nebo na vybrané položce zobrazí GoLive kontextovou nabídku, která uvádí seznam voleb podle toho, kde klepnete. Je to další způsob rychlého přístupu k funkcím GoLive.


[interaktivita]

Interaktivní filmy

Úpravy interaktivních filmů QuickTime Další vzrušující novou funkcí v Adobe GoLive 5.0 je schopnost vytvářet interaktivní filmy pomocí zdokonalených nástrojů pro úpravy filmů QuickTime. Nyní můžete přidávat soubory SWF (formát filmu Flash) do samostatné stopy SWF v novém okně Timeline (Časová osa), což umožňuje přidávat do filmů QuickTime interaktivní funkce. Okno Timeline poskytuje nové nástroje, které umožňují vytvářet například složky skupin, dovolující uspořádat stopy. Movie Viewer (Prohlížeč filmů) nyní obsahuje záložky Preview (Náhled) a Layout (Rozvržení), takže můžete upravovat rozvržení svých filmů. Importujte sprity ze souborů Photoshopu Můžete importovat vrstvy Photoshopu jako jednotlivé sprity pro

vytváření vícestavových tlačítek. Jednoduše vytvoříte soubor Photoshopu s vrstvami tak, aby každé tlačítko mělo svůj vlastní stav v samostatné vrstvě. (Aby to fungovalo, musíte mít nainstalovaný QuickTime 4.0.) GoLive automaticky převede vrstvy Photoshopu na chování spritů v QuickTime. Sprity vytvoříte stejně jako jakýkoli jiný sprite a každá vrstva se importuje se svým názvem vrstvy ve Photoshopu. Ke stopě spritů můžete přidat více než jeden sprite, vytvořit rollovery a sekundární rollovery a nastavit spouštěcí akce a změny kurzoru.

A B

C

A. Použijte vrstvy Photoshopu pro tři stavy tlačítka. B. Importujte každou vrstvu jako sprite. C. Aplikujte akce na každý stav v rolloveru spritu.


Interaktivní streaming Tím, že přidáte k filmu streaming stopy, můžete přes externí streaming server QuickTime dodat streaming obsah. Strana serveru obsahuje média, které mohou být streamovaná (video, audio, MIDI a text), a klientská strana obsahuje média, která nepodporují streaming (například sprity nebo filmy SWF), a streaming stopu, která ukazuje na URL filmu na straně serveru. Při přehrávání klientského filmu naváže počítač uživatele síťové spojení na uvedený server a přehrává streamovaný obsah hned, jak se přijme. Polohu streaming stopy lze nastavit vzhledem k času a prostoru klientského filmu stejně, jako u každé jiné stopy. Vytvořte pohyblivý, navázaný text Adobe GoLive obsahuje nástroje pro úpravy QuickTime, umožňující vytvořit pohyblivý text nebo vazbu textu na vnější adresu URL. Můžete také upravit atributy písma, jako jsou styl, velikost a barva. V paletě Movie Inspector (Inspektor filmu) můžete snadno k textu přidat pohyb a připojit vazbu URL. V paletách Text Track Inspector (Inspektor stopy textu) a Text Sample Inspector (Inspektor vzorku textu) zadáte polohu textu, posunete polohu textu a nastavíte souřadnice pro pohyblivý text. Interaktivní stopy SWF Přidáním stopy SWF do

okna Timeline budete moci k filmu QuickTime připojit popisky a tlačítka. Adobe LiveMotion je přirozeným doplňkem k Adobe GoLive, protože LiveMotion umožňuje vytvořit tlačítko s popiskem, animovat tlačítko a potom exportovat práci do SWF, standardního formátu pro webové animace. Pak můžete importovat soubor Adobe LiveMotion SWF jako stopu SWF do Adobe GoLive a použít tlačítka s filmem QuickTime. (Poznámka: QuickTime 4.0 podporuje formát souboru Flash 3 (SWF).)


[nástroje místa]

Návrh a správa webového místa

Zabudované sestavování grafů webového místa Klíčem k úspěšnému webovému místu je úspěšný návrh. Na Internetu dnes existuje nespočetně mnoho webových míst, která obsahují krásnou grafiku, neomezeně produktů a nezbytné služby, přesto je obtížné se v nich pohybovat. Návrh rozložení a plánování organizace vašeho místa je velmi důležité pro logickou, uživatelsky příjemnou navigaci webovým místem. Navrhujte webové místo vizuálně Adobe GoLive 5.0 poskytuje nástroj pro sestavení schématu místa (z nabídky Design (Návrh)), který vám umožní vizuálně rozvrhnout své místo stránku po stránce. Je to v podstatě stará metoda připíchnutí fyzických stránek na stěnu, ale dělá se to v Adobe GoLive a stránky jsou „živé“. To znamená, že rozvrhujete skutečné, prázdné stránky, které pak můžete otevřít a pracovat v nich. Při rozvrhování svého návrhu můžete dokonce vytvořit i obsah.

Můžete vytvořit návrhy pro celá nová webová místa nebo navrhnout nové části a ukotvit je do existujících míst. K přidávání obecných stránek, vytvoření sekcí návrhu pro vztahy rodič-potomek, umístění stránek do návrhových skupin, aby se s nimi mohlo pracovat samostatně, a k přidávání anotačních poznámek kamkoli v návrhu místa se používá záložka Site (Webové místo) v paletě Objects. Paleta Link Inspector (Inspektor vazby) umožňuje barevně kódovat a uspořádat čekající vazby podle typu, jako jsou například hypervazby, rodič nebo potomek. Když jste s návrhem spokojeni, zvolte Design > Design Staging > Submit Design (Návrh > Realizace návrhu > Odeslat návrh) a všechny stránky, které jste vytvořili, se přesunou ze stádia návrhu do cílových složek, které jste určili. Návrhy lze pojmenovat a uložit s webovým místem v záložce Designs (Návrhy) okna místa.


A

B

C D

A. Obecná stránka B. Návrhová skupina C. Sekce návrhu D. Anotace návrhu


Lepší zobrazení okna místa Adobe GoLive 5.0 nabízí více způsobů, jak zobrazit webová místa a návrhy místa, a umožňuje prozkoumat jejich strukturu a stav z každého možného úhlu. Paleta View Controller (Správce zobrazení) umožňuje řídit, jak se v okně zobrazí webová místa a návrhy. Vícenásobné panely pro vícenásobná zobrazení Volby v paletě View Controller umožňují přidávat do záložky Navigation (Navigace), Links (Vazby) a Design (Návrh) v okně webového místa a návrhu místa více panelů zobrazení. Každý panel zobrazuje různé informace o webovém místě nebo návrhu. Například minipanel ukazuje místo v miniatuře, takže můžete vidět celé místo, aniž byste museli okno rolovat. Kolem části místa, která je vidět také v hlavním okně, se objeví červený rámeček. Další panely ukazují multimediální soubory, na které jsou odkazy ve vybraných stránkách v hlavním okně, soubory s čekajícími vazbami na stránky a pracovní soubory, které nejsou navázané na stránky v hierarchii webového místa.

Zobrazte návrh webového místa ve více panelech.


Nástroje pro lepší správu webového místa Kromě nových funkcí pro návrh webového místa poskytuje Adobe GoLive možnost vytvářet podrobné přehledy místa. Podrobné informace, které můžete získat z těchto přehledů, jsou nástrojem pro správu místa, který pomáhá zvýšit produktivitu a efektivitu, takže vaše místo může fungovat bez problémů. Vytvořte podrobné přehledy místa Z nabídky Site (Místo) se můžete dostat k záložce Site Reports (Přehledy

místa), což je záložka v okně Find (Hledat). Záložka Site Reports nabízí nejméně pět různých kategorií, podle kterých můžete vytvářet přehledy místa: •

File Info (Informace o souboru), například velikost souboru, datum vytvoření a datum úpravy.

•

Errors (Chyby), například nesprávné tituly na stránkách, chybějící atributy HTML pro obrazy a výstrahy nebo chyby v prohlížeči.

•

Site Objects (Objekty místa), například kde je použita komponenta, která písma a barvy jsou použity a komponenty, které obsahují adresy URL.

•

Links (Vazby), například stránky s vnějšími vazbami, stránky s vazbami na soubory, které mají specifické přípony a stránky s vazbami, které obsahují určité protokoly.

•

Miscellaneous (Různé), například položky, které jsou v dosahu určitého počtu klepnutí od určeného souboru nebo složky.

•

Kromě toho můžete vyhledávat podle určeného kritéria, vytvářet a načítat dotazy a ukládat dotazy pro budoucí přehledy.

Výkaz stavu sítě Adobe GoLive 5.0 zahrnuje funkci zobrazení Network Status (Stav sítě), v němž se plně zaznamenají připojení na webové servery, takže jakékoliv problémy připojení lze analyzovat a rychle vyřešit. Vylepšený soubor webového místa Adobe GoLive nyní ukládá změny webového místa efektivněji.

Metainformace pro soubor místa byly rozděleny do samostatných bloků prostoru na disku (které vytvářejí větší soubor), takže nyní Adobe GoLive již nemusí pokaždé zapisovat celý soubor, když se místo uloží, ale pouze když se změní blok metainformací. Pro velká webová místa se vytvářejí dočasné bloky pro uchování a nové načtení bloků metainformací. Adobe GoLive vytvoří záložní soubor webového místa, aby se zabránilo ztrátě jakýchkoli bloků informací v případě zhroucení systému, a uvědomí vás v případech, kdy byste měli použít záložní soubor místo původního souboru místa. Soubory místa jsou nyní přenositelné mezi platformami.


[WebDAV]

Podpora pracovní skupiny

Přístup k serveru WebDAV WebDAV (Web Distributed Authoring and Versioning) umožňuje získat přístup k serveru WebDAV, zobrazovat náhled a sestavovat stránky a webová místa předtím, než je pošlete na webový server, a zamykat a odemykat soubory, abyste zamezili souběžné práci na dokumentu. S podporou WebDAV vám Adobe GoLive umožní vyvíjet webové místo ve vzájemné spolupráci. Adobe GoLive umožňuje spravovat soubory a složky na serveru WebDAV stejným způsobem, jakým je spravujete na své pracovní ploše, včetně kopírování, odstraňování, přejmenování a přemísťování webových stránek. Servery WebDAV, ke kterým se můžete připojit, zahrnují Microsoft IIS 5 (obsažený ve Windows 2000), Apache (s modulem mod_dav) a Novell NetWare 5.1. Posílání souborů na server a stahování souborů ze serveru GoLive poskytuje několik způsobů, jak posílat soubory na server WebDAV a stahovat soubory ze serveru WebDAV: nabídku Site (Místo), tlačítka v pruhu nástrojů, okno WebDAV Browser (Prohlížeč WebDAV) a záložku WebDAV v okně webového místa. Ať použijete kteroukoli metodu, pracujete pomocí okna WebDAV Browser, které je vaším oknem k serveru WebDAV.

Konkrétnější informace o správě webových míst pomocí WebDAV viz příslušná témata v nápovědě GoLive.


Zamkněte a odemkněte soubory na serveru

Adobe GoLive podporuje dva druhy zámků pro úpravy v pracovních skupinách: výhradní a sdílený. Výhradní zámek brání komukoli jinému pracovat na stejném dokumentu. Ostatní uživatelé mohou zamknutý soubor číst, ale nemohou ho upravovat. Sdílený zámek umožňuje uživateli aktivně sdílet dokument s ostatními uživateli, kteří také mají na stejném souboru sdílený zámek. Uživatelé bez sdíleného zámku mohou soubor pouze číst. Záložka WebDAV v okně místa poskytuje možnosti zamykání a odemykání souborů. Soubory V záložce WebDAV se zobrazí výhradní a sdílené zamknutí. a složky můžete také kopírovat, přejmenovat, odstraňovat a uspořádat. Typ úlohy, kterou chcete provést, můžete zvolit z kontextové nabídky klepnutím pravým tlačítkem myši (Windows) nebo klepnutím se stisknutou klávesou Ctrl (Mac OS) na soubor v záložce WebDAV. Existuje také paleta WebDAV Inspector, která poskytuje všeobecné informace o souboru, jako je název, URL, data vytvoření a úpravy, informace ze strany serveru a informace o zamknutí. Synchronizujte soubory nebo celá webová místa Jednou z nejdůležitějších úloh při přípravě webového místa je konečná etapa zajištění toho, aby všechny soubory ve webovém místě byly aktuální a nenastaly žádné konflikty verzí. Adobe GoLive poskytuje funkci, která umožňuje synchronizovat jak webové místo na lokální platformě tak webové místo na serveru WebDAV a to v obou směrech. Pokud se při synchronizaci vyskytne konflikt, například když se stejný soubor změnil v lokálním místě i ve vzdáleném místě, se můžete rozhodnout, kterou synchronizační akci chcete provést, aby se konflikt vyřešil. Pro každý soubor jsou zabudované synchronizační akce: poslání na server, stažení, přeskočení a odstranění. Můžete synchronizovat celé webové místo nebo jen vybrané soubory.


Synchronizujte lokální a vzdálená místa před jejich vystavením na živý server.

Volba Workgroup Support (Podpora pracovních skupin) Adobe GoLive nabízí volbu Workgroup Support, která, když je vybraná, automaticky zpracovává zamykání, odemykání a synchronizaci souborů při odhlášení a přihlášení souborů na serveru WebDAV. Když soubor odhlásíte, Adobe GoLive ho před stažením souboru zamkne na serveru WebDAV. Pokud již soubor odhlásil jiný uživatel, zobrazí Adobe GoLive chybovou zprávu. Pokud datum úpravy na vašem počítači a na serveru nesouhlasí, Adobe GoLive buď soubory synchronizuje nebo zobrazí zprávu, abyste je synchronizovali ručně, podle toho, který soubor má novější datum.


[e-obchod]

Vazby na databáze

Dynamic Link (Dynamické vazby) Adobe GoLive Dynamic Link je modul, který poskytuje jednoduchý způsob vizuálního návrhu a přidání dynamického obsahu z databáze a funkce e-obchodu k webovému místu, aniž byste potřebovali samostatnou aplikaci nebo zprostředkující programové prostředky na serveru. Nemusíte psát kód nebo skript; jednoduše použijete nástroje vizuálního rozhraní modulu k implementaci funkcí, které potřebujete, jako je například přidání obsahu databází do webového místa, kontrola dynamických argumentů URL a zajištění patřičné kompatibility se serverem pro e-obchod. Adobe GoLive 5.0 rozšiřuje Dynamic Link přidáním několika nových možností. Možnosti návrhu Paleta Dynamic Link (Dynamická vazba) v Adobe GoLive umožňuje modelovat webové stránky pro dynamický obsah pomocí navržené šablony, která obsahuje písma, styly a vyhrazená místa pro objekty. Pak vytvoříte vazby modelu stránky na dynamický obsah, který je uložen v online databázi. Dynamic Link nabízí funkce, jako je možnost pracovat online nebo lokálně, přidávat dynamický obsah do webové stránky, aniž byste museli napsat jedinou řádku kódu nebo skriptu, formátovat obsah jako peněžní částku, datum, čas a nebo podle jiných kritérií, vytvořit a řídit dynamické tabulky (například nastavit počet záznamů na stránce), které se rozrůstají nebo zmenšují, aby bylo možné zobrazit více položek, a kontrovat dynamické vazby na stránkách a zjistit neplatné vazby.

Paleta Dynamic Link (Dynamická vazba)


Programovací vlastnosti Nemusíte znát složité programovací jazyky, jako je C++, abyste vytáhli dynamický obsah z databáze a umístili ho na webové stránky. Vše se dělá automaticky s modulem Dynamic Link v Adobe GoLive. Zde je několik programovacích vlastností: •

Skriptovací jazyk generovaný modulem Dynamic Link je VBScript.

•

Dynamic Link lze použít s existujícími webovými stránkami – není třeba začínat znovu.

•

Automatické přidávání databází s obsahem do webového místa.

•

Snadná kontrola dynamických argumentů URL, aby se zajistilo, že do webových stránek se předají správné informace.

Funkce e-obchodu a funkce na straně serveru Jednou z mnoha funkcí, které nabízí modul Dynamic Link, je

schopnost vytvořit prototyp úplného webového databázového systému a zobrazit jeho náhled, abyste viděli, jak se bude jevit uživatelům Webu. Zde jsou jen některé nabízené možnosti e-obchodu a na straně serveru: •

Návrh, prototyp a implementace online obchodu nebo systému s nákupním košíkem, ve kterém online zákazníci mohou snadno přidávat položky do svých nákupních košíků.

•

Návrh a implementace stránky pro potvrzení objednávky.

•

Návrh a vytvoření webového vstupního modulu (například formuláře pro stránku potvrzení obsahu nákopního košíku), který je dynamicky navázaný na pole ve zdrojové databázi obsahu.

•

Automatické připojení všech stránek k hotovým stránkám Action (Akce), které obsahují nezbytný kód a mechanizmus, zajišťující kompatibilitu se serverem pro e-obchod.

Nové funkce verze 5.0 Adobe GoLive 5.0 přidává několik nových funkcí modulu Dynamic Link. •

Volbu pro zobrazení určeného počtu databázových záznamů na jednu stránku v dynamické tabulce.

•

Navigační tlačítka pro následující, předcházející, první a poslední stránku.

•

Možnost použít Link to Details (Vazba na detaily) s navigačními tlačítky na cílové stránce.

•

Dva způsoby nastavení formulářových akcí: výběrem tagu FORM v paletě Form Inspector (Inspektor formuláře) a určením cílové stránky akce nebo klepnutím pravým tlačítkem myši (Windows) nebo se stisknutou klávesou Ctrl (Mac OS) na tlačítko formuláře a volbou stránky akce z kontextové nabídky.

•

Možnost vypnout automatické začlenění URLArgs( ) do odesílaných formulářů.

•

Možnost určit vlastní klíčová pole pro předávání informací mezi stránkami (místo automatického zpracování všech polí jako klíčových).

•

Automatické zobrazení dialogového okna pro heslo u heslem chráněných databází.


[rozšiřitelnost]

SDK (Software Development Kit)

Použití SDK Adobe GoLive Sada pro vývoj softwaru Adobe GoLive 5.0 SDK (Software Development Kit) umožňuje vývojářům obohatit a přizpůsobit rozhraní Adobe GoLive, přidávat nové tagy a zdrojový kód pro nativní vizuální úpravy v Adobe GoLive, vytvářet složité nové funkce na úrovni stránky a místa, přizpůsobit volby prostřednictvím JavaScriptu a XML, umožňuje flexibilitu pro vývojáře v C a tvoří pevné základy rozšiřitelnosti pro budoucí vývoj v Adobe GoLive. Funkce rozhraní a jádra Adobe GoLive SDK poskytuje flexibilitu a přizpůsobitelnost bez jakékoli potřeby

programování v C. SDK umožňuje přidávat funkce rozhraní, včetně následujících funkcí: •

Uživatelské nabídky, příkazy a dialogová okna.

•

Plovoucí palety a záložky v paletě Objects.

•

Uživatelské palety Inspector pro objekty a tagy.

Navíc vám funkčnost zdrojového kódu umožňuje přidávat nové tagy, které lze rozeznávat, kontrolovat a upravovat v zobrazení Layout (Rozvržení). Funkce jádra vám dávají následující možnosti: •

Používat velkou knihovnu podprogramů JavaScriptu (včetně nových funkcí specifických pro Adobe GoLive, například změny absolutních vazeb na relativní vazby).

•

Volat externí knihovny C na obou platformách (to znamená sdílené knihovny na Mac OS a DLL na Windows).

Adobe GoLive také zahrnuje aplikaci pro ladění JavaScriptu (debugger). Úplné informace najdete v dokumentaci k SDK. Informace o tom, jak vytvářet stránky automaticky pomocí AppleScriptu, viz „Automating Operations Using AppleScript“ v nápovědě GoLive.

1

61

Kapitola 1: Pohled na pracovní plochu

P

racovní plocha Adobe GoLive obsahuje nahoře nabídky příkazů a pruh nástrojů, okno dokumentu, jedno nebo více oken webových míst a různé typy palet pro přidávání textu a objektů na webové stránky.

A

D

B

E

C

F

A. Kontextově závislý pruh nástrojů obsahuje tlačítka a rozbalovací nabídky, které ovlivňují současný výběr. B. Okno dokumentu obsahuje několik prostředí pro úpravy a návrh stránek. C. Záložka Files (Soubory) okna webového místa umožňuje správu stránek, obrazů a dalších souborů pro webové místo. D. Paleta Objects obsahuje kompletní katalog stavebních bloků stránek. E. Kontextově závislá paleta Inspector umožňuje nastavovat atributy textu a objektů. F. Paleta Color (Barvy) obsahuje řadu palet pro obarvení textu a objektů.

62 KAPITOLA 1 Pohled na pracovní plochu

Používání pruhu nástrojů Při prvním spuštění Adobe GoLive se pod nabídkami příkazů v horní části obrazovky objeví kontextově závislý pruh nástrojů. Pruh nástrojů obsahuje tlačítka a rozbalovací nabídky, které se mění podle toho, co jste vybrali v pracovní ploše. Pruh nástrojů můžete použít k úpravám vybraného textu a vybraných objektů v okně dokumentu, jako je například volba formátu odstavce pro vybraný text nebo změna velikosti textového rámečku. Pruh nástrojů můžete také použít k provádění obecných úloh, které budou mít vliv na váš dokument nebo webové místo, jako je například zapnutí výstrah vazeb nebo prohlížení dokumentu přímo v prohlížeči Webu. Jak zobrazit nebo skrýt pruh nástrojů:

Zvolte Window > Toolbar (Okno > Pruh nástrojů). Pruh nástrojů můžete také skrýt klepnutím na zavírací tlačítko v jeho pravém horním (Windows) nebo levém horním (Mac OS) rohu. Jak posunout pruh nástrojů:

Přetáhněte pruh nástrojů za titulní pruh (Windows) nebo levý dolní roh (Mac OS).

Používání okna dokumentu Při prvním spuštění Adobe GoLive se na obrazovce objeví okno nepojmenovaného dokumentu. Okno dokumentu se používá k vytvoření nové webové stránky. Okno dokumentu má různá editační prostředí, takže můžete svou stránku navrhovat tak, jak to vyhovuje vašim konkrétním potřebám, ať už dáváte přednost práci s paletami nebo s textovým editorem HTML. Standardně se okno dokumentu objeví v zobrazení Layout (Rozvržení). Můžete změnit zobrazení dokumentu, chcete-li pracovat v jiném editačním prostředí nebo chcete-li okamžitě zobrazovat náhled své práce, aniž byste museli spouštět prohlížeč Webu. A

B

C

D

E

F

A. Klepnutím se zobrazí nebo skryje panel hlavičky okna dokumentu. B.Klepnutím se otevře editor JavaScriptu. C.Klepnutím se otevře editor TimeLine (Časová osa). D.Klepnutím se vytvoří nebo zobrazí seznam stylů. E.Klepnutím se zobrazí nebo skryjí pravítka. F. Pomocí rozbalovací nabídky se nastaví velikost okna dokumentu.


Jak otevřít okno nového dokumentu:

Zvolte File > New (Soubor > Nový). Jak změnit zobrazení dokumentu:

Klepněte v okně dokumentu na jednu z následujících záložek: • Záložka Layout Editor (Editor rozvržení) (

) zobrazí dokument v zobrazení Layout (Rozvržení), které použijete, chcete-li do stránky přidat text a objekty a nastavit jejich atributy pomocí různých palet.

• Záložka Frame Editor (Editor rámců) (

) zobrazí dokument v zobrazení Frames (Rámce), které se používá, chcete-li rozdělit stránku na sadu rámců tak, a v každém rámci zobrazit jiný dokument.

• Záložka HTML Source Editor (Editor zdroje HTML) (

) zobrazí dokument v zobrazení Source (Zdroj). Zobrazení Source se používá, chcete-li navrhovat stránku pomocí textového editoru HTML.

• Záložka HTML Outline Editor (Editor osnovy HTML) (

) zobrazí dokument v zobrazení Outline (Osnova). Zobrazení Outline se používá, chcete-li zobrazit strukturu stránky v hierarchickém formátu a nastavit atributy stránky pomocí tohoto formátu.

• V Mac OS záložka Frame Preview (Náhled rámců) (

) zobrazí dokument v zobrazení Frame Preview. Zobrazení Frame Preview se používá, když chcete zobrazit náhled stránek, které jste vytvořili v zobrazení Frames.

• Záložka Layout Preview (Náhled rozvržení) (

) zobrazí dokument v zobrazení Preview (Náhled). Ve Windows se Preview používá k zobrazení náhledu všech stránek, které jste vytvořili. V Mac OS se používá k zobrazení náhledu stránek, které jste vytvořili v zobrazení Layout, Source nebo Outline.

• V systémech s nainstalovaným modulem WebObjects záložka Editor WebObjects (

) zobrazí dokument v zobrazení WebObjects. Zobrazení WebObjects se používá k úpravě deklaračních souborů pro dynamické stránky, které se použijí se serverem WebObjects. Další informace najdete v příručce Using WebObjects.

Jak změnit velikost okna dokumentu:

Proveďte jeden z následujících úkonů: • Táhněte pravý dolní roh okna dokumentu (Windows) nebo táhněte zvětšovací pole v pravém dolním

rohu okna dokumentu (Mac OS). • Zvolte velikost okna z rozbalovací nabídky Window Size (Velikost okna) v pravém dolním rohu okna

dokumentu. Další informace o nastavení velikosti dokumentu viz „Výběr velikosti okna“ na straně 107. Jak sbalit okno dokumentu na záložku na dolním okraji obrazovky (Mac OS):

V Mac OS podržte Ctrl a klepněte na titulní pruh okna dokumentu nebo přetáhněte titulní pruh na dolní okraj obrazovky. Chcete-li okno dokumentu rozbalit, klepněte na záložku dole na obrazovce.


Jak zavřít okno dokumentu:

Zvolte File > Close (Soubor > Zavřít) nebo klepněte na zavírací tlačítko v pravém horním (Windows) nebo levém horním (Mac OS) rohu okna dokumentu.

Použití okna místa a okna návrhu místa Když vytvoříte nové webové místo, vytvoří Adobe GoLive soubor s příponou .site, ve kterém se uchovávají informace o struktuře místa. Když tento soubor otevřete, objeví se na obrazovce primární okno místa. Toto okno místa obsahuje mnoho záložek, které můžete použít ke správě zdrojů pro webové místo, včetně souborů, adres elektronické pošty, adres URL, uživatelské palety barev a uživatelských sad písem.

Klepnutím na dvojitou šipku pod posuvníkem se otevře pravý panel primárního okna místa.

Sekundární okno místa můžete zobrazit příkazem Design > Navigation View (Návrh > Zobrazení navigace) nebo Design > Links View (Návrh > Zobrazení vazeb). Toto okno webového místa obsahuje dvě záložky, které můžete použít k zobrazení grafických reprezentací svého místa. Chcete-li změnit uspořádání své pracovní plochy, můžete přesouvat záložky mezi okny místa nebo můžete záložku přesunout mimo okno místa tak, aby se objevila v novém, samostatném okně místa. Další informace o používání oken místa viz „O oknech místa“ na straně 85. Okno návrhu webového místa můžete také zobrazit tak, že zvolíte Design > New Site Design (Návrh > Nový návrh místa). Okno návrhu místa obsahuje tři záložky, které můžete použít k vytvoření návrhu webového místa pro účely prezentace předtím, než místo skutečně vytvoříte. Pro místo můžete vytvořit více návrhů použitím více oken návrhu místa. Další informace o používání oken návrhu místa viz„Okna návrhů webových míst“ na straně 436. Jak změnit velikost okna místa nebo okna návrhu místa:

Táhněte pravý dolní roh okna (Windows) nebo táhněte zvětšovací pole v pravém dolním rohu okna (Mac OS).


Jak zavřít okno místa nebo okno návrhu místa:

Proveďte jeden z následujících úkonů: • Vyberte požadované okno a zvolte File > Close (Soubor > Zavřít). • Klepněte na zavírací tlačítko v pravém horním (Windows) nebo v levém horním (Mac OS) rohu okna. • Chcete-li zavřít okno místa obsahující záložku Navigation (Navigace) nebo záložku Links (Vazby),

zvolte Design > Navigation View nebo Design > Links View.

Přepínání mezi okny S Adobe GoLive můžete mít na své pracovní ploše otevřeno několik oken dokumentu, místa a návrhu místa. Chcete-li přepínat mezi otevřenými okny, můžete v Adobe GoLive volit z několika možností. Jak přepnout do otevřeného okna dokumentu, místa nebo návrhu místa:

Proveďte jeden z následujících úkonů: • Klepnutím vyberte požadované okno. • Zvolte požadované okno z nabídky Window (Okno). (Z nabídky Window nemůžete přepnout do

otevřeného sekundárního okna místa.) • Chcete-li přepínat mezi předním oknem dokumentu a primárním oknem místa, klepněte na tlačítko

Select Window (Vybrat okno) (

) v pruhu nástrojů.

• Klepněte na šipku u tlačítka Select Window v pruhu nástrojů, aby se zobrazila rozbalovací nabídka, a

zvolte požadované okno. (Z rozbalovací nabídky nemůžete přepnout do otevřeného okna návrhu místa.)

A

BC

A. Klepnutím se vrátíte do okna dokumentu. B. Klepnutím se vrátíte do primárního okna místa. C. Klepnutím zobrazíte seznam otevřených oken dokumentu a místa.

Používání palet Adobe GoLive obsahuje několik palet, které můžete použít k provedení různých úloh, včetně přidání objektů do webových stránek, nastavení atributů pro tyto objekty a vybarvení objektů. Když poprvé spustíte Adobe GoLive, zobrazí se standardně několik palet v několika skupinách. Při práci můžete zvolit


skrytí nebo zobrazení palet. Můžete také přesouvat palety mezi skupinami, přesouvat palety do jejich vlastních oken nebo měnit velikost palet, abyste lépe využili svou pracovní plochu. Jak zobrazit paletu a všechny palety v její skupině:

Zvolte název palety z nabídky Window (Okno). Jak skrýt paletu a všechny palety v její skupině:

Proveďte jeden z následujících úkonů: • Klepněte na zavírací tlačítko v pravém horním (Windows) nebo levém horním (Mac OS) rohu okna

skupiny. • Je-li třeba, přesuňte paletu ve skupině dopředu klepnutím na její název ve skupině nebo tak, že zvolíte

její název z nabídky Window. (Zaškrtnutí u názvu palety v nabídce Window označuje, že paleta je ve své skupině vpředu.) Pak zvolte název palety z nabídky Window. Jak přesunout paletu ve skupině dopředu:

Proveďte jeden z následujících úkonů: • Klepněte na název palety ve skupině. • Zvolte název palety z nabídky Window. Jak přesunout záložku (nebo tlačítko) v paletě dopředu:

Proveďte jeden z následujících úkonů: • Klepněte na požadovanou záložku (nebo tlačítko) v paletě. • V paletě Objects (Objekty) nebo Color (Barvy) klepněte na trojúhelník v pravém horním rohu palety,

aby se zobrazila nabídka palety, a zvolte požadovanou záložku nebo tlačítko. Jak přemístit paletu mezi skupinami:

Přetáhněte název palety ze skupiny do jiné skupiny. Jak přesunout paletu tak, aby se objevila ve svém vlastním okně:

Přetáhněte název palety ze skupiny na pracovní plochu. Jak přesunout skupinu palet:

Přetáhněte její titulní pruh. Jak změnit velikost palety:

Přetáhněte pravý dolní roh palety (Windows) nebo přetáhněte zvětšovací pole v pravém dolním rohu palety (Mac OS).


Jak sbalit skupinu palet do záložky vpravo na obrazovce:

Podržte Ctrl a klepněte na titulní pruh okna skupiny. Chcete-li rozbalit okno skupiny, klepněte na záložku vpravo na obrazovce. Jak zobrazit všechny palety a vrátit palety do jejich výchozích velikostí a umístění ve skupinách:

Zvolte Window > Reset Palettes (Okno > Obnovit palety).

Používání palety Objects Paleta Objects umožňuje snadno a rychle přidávat do webových stránek různé objekty, včetně plovoucích rámečků, tabulek, obrazů, tlačítek rolloverů, prvků formulářů a dalších. Paleta Objects obsahuje několik záložek, které se liší podle toho, které moduly jste instalovali nebo aktivovali v dialogovém okně Modules Preferences (Předvolby modulů). Každá záložka obsahuje skupinu příbuzných ikon, které reprezentují tagy HTML, strukturní elementy stránky nebo obecné objekty místa. Tyto ikony se používají k přidávání objektů do stránek. Jak zobrazit paletu Objects a všechny palety v její skupině:

Zvolte Window > Objects (Okno > Objekty). Jak zobrazit nebo skrýt záložky v paletě Objects:

Klepněte na trojúhelník v pravém horním rohu palety Objects, aby se zobrazila nabídka palety Objects, a zvolte Show Tabs (Zobrazit záložky). Jak zobrazit ikony pro určitou záložku v paletě Objects:

Klepněte na trojúhelník v pravém horním rohu palety Objects, aby se zobrazila nabídka palety Objects, a zvolte požadovanou záložku. Nebo klepněte na jednu z následujících záložek v paletě Objects: • Záložka Basic (Základní) (

) zobrazí ikony, které reprezentují tagy HTML, které můžete přidat

k sekci těla stránky. • Záložka Smart (Automatické) (

) zobrazí ikony, které reprezentují tagy HTML, kód JavaScriptu a Smart Objects (Automatické objekty), které můžete přidat k sekci hlavičky nebo těla stránky.

• Záložka Forms (Formuláře) (

) zobrazí ikony, které reprezentují tagy formuláře HTML, které

můžete přidat k sekci těla stránky. • Záložka Head (Hlavička) (

) zobrazí ikony, které reprezentují tagy hlavičky HTML, které můžete

přidat k sekci hlavičky stránky. • Záložka Frames (Rámce) (

) zobrazí ikony, které reprezentují tagy rámců HTML, které můžete přidat do zobrazení Frames okna dokumentu.

• Záložka Site (Místo) (

) zobrazí ikony, které reprezentují obecné objekty místa, které můžete přidat do okna webového místa nebo návrhu místa.


• Záložka Site Extras (Dodatky místa) (

) zobrazí ikony, které reprezentují stránky předloh, komponenty nebo uživatelské fragmenty kódu.

• Záložka QuickTime (

) zobrazí ikony, které reprezentují elementy, které můžete přidat do editoru TimeLine (Časová osa) pro úpravu filmů QuickTime.

• Záložka WebObjects (

) zobrazí ikony, které reprezentují specifické tagy HTML pro WebObjects, které můžete přidat do sekce těla stránky. Poznámka: Modul WebObjects se standardně s Adobe GoLive neinstaluje. Proto se záložka WebObjects v paletě Objects standardně neobjevuje.

• Záložka Custom (Vlastní) (

) zobrazí ikony, které reprezentují uživatelské objekty, které můžete

přidat do sekce těla stránky. Jak zobrazit název ikony v paletě Objects (Objekty):

Umístěte kurzor nad ikonu. Název ikony se objeví dole v paletě Objects. Jak přidat objekt z palety Objects na stránku:

Přetáhněte ikonu z palety Objects do okna dokumentu nebo poklepejte na ikonu v paletě Objects.

Používání palety Color (Barvy) Paleta Color umožňuje snadno a rychle vybarvit text a objekty na webových stránkách. Paleta Color ve skutečnosti obsahuje několik samostatných palet, které můžete použít k vyhledání barvy, která vyhovuje vašim požadavkům. Podobně jako záložky v paletě Objects, obsahuje paleta Color tlačítka, na která klepnete, chcete-li zobrazit jednotlivé požadované palety. Paleta Color má také nabídku palety, kterou můžete použít k zobrazení nebo skrytí tlačítek a k výběru voleb zobrazení hodnot barev v procentech nebo v číselném rozsahu do 256. Pokyny k používání palety Color viz „Práce s barvami“ na straně 142. Jak zobrazit paletu Color a všechny palety v její skupině:

Proveďte jeden z následujících úkonů: • Zvolte Window > Color (Okno > Barvy). • Klepněte na libovolné barevné pole v paletě Inspector. Jak zobrazit nebo skrýt tlačítka v paletě Color:

Klepněte na trojúhelník v pravém horním rohu palety Color, aby se zobrazila nabídka palety Color, a zvolte Show Buttons (Zobrazit tlačítka).


Jak zobrazit hodnoty barev v paletě Color v procentech nebo v číselném rozsahu do 256:

Klepněte na trojúhelník v pravém horním rohu palety Color, aby se zobrazila nabídka palety Color, a zvolte Percent Values (Hodnoty v procentech). (Zaškrtnutí u volby Percent Values označuje, že hodnoty barev jsou zobrazeny v procentech.)

Používání palety Inspector Kontextově závislá paleta Inspector umožňuje nastavit atributy pro text a objekty v okně dokumentu, stejně jako pro soubory a ostatní elementy v okně místa. Obsah palety Inspector se mění podle toho, co jste vybrali v pracovní ploše. Inspector může obsahovat záložky, textová pole, tlačítka Enter, tlačítka Namířit a vybrat, tlačítka Browse (Procházet), rozbalovací nabídky, zaškrtávací volby, přepínače a pole barev.

A

B

C

D

E

F

A. Zaškrtávací pole B. Rozbalovací nabídka C. Pole barvy D. Přepínač E. Tlačítko Namířit a vybrat F.Textové pole

Když vytvoříte výběr v okně dokumentu nebo v okně místa, název palety Inspector se změní a objeví se dole v paletě Inspector. Například, když vyberete v okně dokumentu vyhrazenou oblast pro obraz, objeví se dole v paletě Inspector slovo Image (Obraz), které označuje, že se paleta Inspector změnila na Image Inspector (Inspektor obrazu). Jak zobrazit paletu Inspector a všechny palety v její skupině:

Zvolte Window > Inspector (Okno > Inspektor).


Jak použít paletu Inspector k nastavení atributů pro výběr v okně dokumentu nebo v okně místa:

1 Vytvořte výběr v okně dokumentu nebo v okně místa. 2 V paletě Inspector proveďte libovolný z následujících úkonů: • Pomocí textového pole zadejte informace, například titul, rozměr nebo cestu souboru, použitého jako

cíl vazby. Text zadáte do textového pole tak, že klepnete do textového pole a napíšete požadovaný text. Standardně se text použije, jakmile textové pole přestane být aktivní pro vstup (to nastane například když klepnete mimo něj). Poznámka: Pokud nechcete, aby se text použil hned, když textové pole přestane být aktivní pro vstup, můžete nastavit volbu, aby se v paletě Inspector zobrazilo vpravo od každého textového pole tlačítko Enter ( ). Je-li zobrazené tlačítko Enter, musíte klepnout na toto tlačítko nebo stisknout Enter na klávesnici, aby se text použil. Chcete-li zobrazit tlačítka Enter, zvolte Edit > Preferences (Úpravy > Předvolby), klepněte na symbol u General (Všeobecné), aby se rozvinul seznam, a klepněte na User Interface (Uživatelské rozhraní), vypněte Direct Input for Textfields (Přímý vstup pro textová pole) a klepněte na OK. • Pomocí tlačítka Namířit a vybrat (

) nebo tlačítka Browse (Procházet) vyberte soubor, který se použije jako cíl vazby. Hypertextovou vazbu můžete například vytvořit tak, že vyberete text v okně dokumentu, klepnete na tlačítko New Link (Nová vazba) v pruhu nástrojů a pak vyberete soubor pomocí tlačítka Namířit a vybrat nebo tlačítka Browse v paletě Inspector. Další informace o vybírání souboru, který se použije jako cíl vazby viz „Vytváření vazeb mezi soubory“ na straně 72.

• Pomocí rozbalovací nabídky zvolte sadu voleb. Chcete-li zobrazit sadu voleb, klepněte na rozbalovací

nabídku. Volbu vyberete tak, že táhnete na požadovanou volbu a uvolníte tlačítko myši. • Pomocí zaškrtávacího pole vyberte nebo vypněte volbu klepnutím uvnitř pole. Zaškrtnutí v poli

označuje, že je volba vybraná. • Pomocí přepínače vyberte jednu ze skupiny voleb klepnutím uvnitř přepínače. Černý kroužek

v přepínači označuje, že je volba vybraná. • Pomocí pole barvy vybarvíte současný výběr. Klepnutím uvnitř barevného pole ho vyberte, a pak

vyberte barvu v paletě Color (Barvy). Adobe GoLive automaticky aplikuje barvu do barevného pole v paletě Inspector, aktivuje volbu barvy pro barevné pole a aplikuje barvu na současný výběr v pracovní ploše. Pokyny o používání palety Color viz „Práce s barvami“ na straně 142.

Používání kontextových nabídek Kromě nabídek, které se objevují v horní části obrazovky, obsahuje Adobe GoLive řadu kontextových nabídek. Tyto nabídky zobrazují příkazy, které se vztahují k aktivnímu oknu nebo výběru. Kontextové nabídky můžete použít jako rychlý způsob výběru běžně používaných příkazů.


Jak zobrazit kontextové nabídky:

1 Umístěte ukazatel na aktivní okno nebo výběr. 2 Proveďte jeden z následujících úkonů: • Ve Windows klepněte pravým tlačítkem myši. • V Mac OS stiskněte Ctrl a podržte tlačítko myši.

Klepnutím pravým tlačítkem (Windows) nebo klepnutím se stisknutou klávesou Ctrl (Mac OS) vyvoláte kontextové nabídky.

Nastavení předvoleb Četná nastavení programu jsou uložena v souboru předvoleb Adobe GoLive, který je umístěn v adresáři GoLive (Windows) nebo ve složce Předvolby (Preferences) v systémové složce (Mac OS). Nastavení uložená v tomto souboru zahrnují volby zobrazení, volby pro import obrazů, volby pro aktivaci modulů, volby pro výběr standardních prohlížečů webu, které můžete spustit z Adobe GoLive, volby kontroly pravopisu a další. Většina těchto voleb se nastavuje v dialogovém okně Preferences (Předvolby). Jak nastavit volby v dialogovém okně Preferences (Předvolby):

1 Zvolte Edit > Preferences (Úpravy > Předvolby). 2 Klepnutím vyberte ikonu nebo název v levém panelu dialogového okna Preferences. Je-li třeba, klepněte nejdříve na symbol u ikony, aby se pod ikonou zobrazil seznam názvů. 3 Vyberte volby v pravém panelu dialogového okna Preferences. Vysvětlení k jednotlivým volbám předvoleb nebo sadě voleb najdete pomocí rejstříku. 4 Klepněte na OK.

Správa modulů nastavením předvoleb Dialogové okno Modules Preferences (Předvolby modulů) umožňuje zefektivnit Adobe GoLive tak, aby se zkrátila doba jeho spouštění, zlepšila se jeho odezva a snížily se celkové požadavky na paměť. Pokud


například nevytváříte dynamické webové stránky pomocí vývojového prostředí WebObjects, můžete zvolit deaktivaci modulu WebObjects. Vypnutím nepoužívaných modulů můžete snížit paměťové požadavky programu na minimálních doporučených 24 MB. S výjimkou správce modulů Modules Manager lze moduly aktivovat nebo deaktivovat. Chcete-li získat konkrétní informace o každém modulu, zvolte Edit > Preferences, klepněte na ikonu Modules v levém panelu dialogového okna Preferences, klepnutím vyberte modul a klepněte na symbol vedle Show Item Information (Zobrazit informace o položce). Jak aktivovat nebo deaktivovat moduly programu:

1 Zvolte Edit > Preferences (Úpravy > Předvolby). 2 Klepněte na ikonu Modules v levém panelu dialogového okna Preferences. Moduly programu, které jsou právě nainstalované, jsou zaškrtnuté. 3 Klepnutím vyberte nebo odznačte moduly, čímž je aktivujete nebo deaktivujete. 4 Klepněte na OK. 5 Ukončete a znovu spusťte Adobe GoLive.

Vytváření vazeb mezi soubory Při návrhu webových stránek můžete vytvářet vazby, abyste ke stránkám mohli přidat obrazy a jiná média, navigační vazby a další. V Adobe GoLive můžete vytvořit vazby pomocí palety Inspector nebo pomocí klávesových zkratek. Když použijete k vytvoření vazby paletu Inspector, můžete určit soubor, který se použije jako cíl vazby, pomocí adresy URL nebo textového pole Source (Zdroj), tlačítka Namířit a vybrat nebo tlačítka Browse (Procházet). Jak vytvořit vazbu pomocí palety Inspector nebo klávesové zkratky:

1 Vytvořte zdroj pro vazbu v okně dokumentu. Pokud přidáváte navigační vazbu, přidejte text nebo objekt, z kterého můžete vytvořit vazbu, do okna dokumentu. Pokud přidáváte ke stránce obraz nebo jiné médium, přidejte do okna dokumentu vyhrazený prostor. 2 Vyberte zdroj vazby. Text vyberte tažením. Chcete-li vybrat objekt nebo vyhrazený prostor, klepněte na něj. 3 Zvolte Window > Inspector a klepněte na příslušnou záložku v paletě Inspector pro vytvoření vazby. 4 Klepněte na tlačítko New Link (Nová vazba) (

) v paletě Inspector nebo v paletě nástrojů.

5 Vyberte soubor, který se použije jako cíl vazby jedním z následujících úkonů: • Táhněte z tlačítka Namířit a vybrat (

ploše.

) v paletě Inspector na soubor v okně místa nebo na pracovní


Když se vazba úspěšně vytvoří, spojovací čára bliká a cesta k souboru se v paletě Inspector objeví v textovém poli URL nebo Source (Zdroj). Pokud přímka odskočí, uvolnili jste tlačítko myši příliš brzy nebo se vazba nemohla vytvořit.

Táhněte z tlačítka Namířit a vybrat v paletě Inspector na soubor v okně místa. • Klepněte na tlačítko Browse (

) v paletě Inspector. V dialogovém okně Open (Otevřít) vyberte soubor a klepněte na Open (Otevřít).

• V textovém poli URL nebo Source v paletě Inspector zadejte adresu URL souboru. • Táhněte se stisknutou klávesou Alt (Windows) nebo Apple (Mac OS) ze zdroje vazby k souboru

v okně místa nebo na pracovní ploše. Když se soubor zvýrazní, uvolněte tlačítko myši.

Přizpůsobení klávesových zkratek Adobe GoLive umožňuje zvolit jednu ze dvou různých sad klávesových zkratek: standardní sadu zahrnutou v předchozích verzích Adobe GoLive a běžnou sadu typicky zahrnutou ve většině produktů Adobe. Můžete si také vytvořit svou vlastní sadu klávesových zkratek tím, že upravíte kopii jedné z těchto sad. Jak zvolit sadu klávesových zkratek:

1 Zvolte Edit > Keyboard Shortcuts (Úpravy > Klávesové zkratky). 2 Proveďte jeden z následujících úkonů: • Chcete-li zvolit existující sadu klávesových zkratek, zvolte volbu z rozbalovací nabídky Selected Set

(Vybraná sada). Zvolte My Settings (Má nastavení), chcete-li upravit standardní sadu zahrnutou v předchozích verzích Adobe GoLive. (Zvolíte-li GoLive Standard Set (Standardní sada GoLive) nebo Adobe Common Set (Společná sada Adobe), nebudete moci sadu upravit ani odstranit.) • Chcete-li vytvořit novou sadu, klepněte na New Set (Nová sada). V dialogovém okně New Set zadejte

název nové sady, zvolte existující sadu, kterou chcete použít jako základ své nové sady, a klepněte na OK.


V dialogovém okně Keyboard Shortcuts je seznam nabídek a příkazů Adobe GoLive v jednom sloupci a klávesové zkratky pro tyto příkazy v druhém sloupci. 3 Chcete-li změnit klávesovou zkratku v upravitelné sadě, klepněte na symbol vedle názvu nabídky, aby se vypsaly příkazy nabídky. Je-li třeba, klepněte na symbol vedle názvu podnabídky, aby se vypsaly její příkazy. Klepnutím vyberte příkaz. Do volby Press New Shortcut (Stisknout novou klávesovou zkratku) zadejte novou klávesovou zkratku pro vybraný příkaz. Je-li klávesová zkratka, kterou zadáte, již přiřazena jinému příkazu, objeví se název příkazu ve volbě Currently Assigned To (Již přiřazeno k). Chcete-li změnit přiřazení klávesové zkratky k vybranému příkazu, klepněte na Replace (Nahradit). 4 Chcete-li odstranit vybranou sadu klávesových zkratek, klepněte na Delete Set (Odstranit sadu). 5 Klepněte na OK.

Práce s nelatinkovými soubory znaků Zda budete mít možnost přepínat mezi latinkovými a ne latinkovými sadami znaků závisí na vašem operačním systému. V starších verzích Windows než 2000 nemůžete přímo vytvářet nelatinkové (dvoubytové) webové stránky pomocí latinkového (jednobytového) operačního systému. Můžete ale importovat dvoubytové soubory HTML, vytvořené v jiném operačním systému. Pak můžete zobrazit zdrojový kód HTML v Adobe GoLive, přestože se dvoubytový text v zobrazení Layout (Rozvržení) nebo Preview (Náhled) nezobrazí správně. Microsoft Internet Explorer 4.0 a novější mohou zobrazit dvoubytové skripty, takže můžete zobrazit náhled dvoubytových souborů pomocí příkazu Show in Browser (Zobrazit v prohlížeči) v Adobe GoLive. Operační systém Windows 2000 s Microsoft Internet Explorerem 6.0 umožňuje zobrazovat a vytvářet dvoubytový obsah, aniž byste museli mít úplný operační systém s příslušným skriptem. Uživatelskou instalací nainstalujte jazykovou sadu (Language Pack) pro skript, který potřebujete. Další informace najdete v dokumentaci ke svému systému. Operační systémy Mac OS 8.5 a novější obsahují jako volitelnou instalaci Multilingual Internet Access. Tento software umožňuje Adobe GoLive zobrazit dvoubytová písma i bez příslušného operačního systému. Musíte instalovat příslušnou jazykovou sadu Language Kit. V Mac OS 9.0 a novějším můžete uživatelskou instalací nainstalovat jazykovou sadu podle svého výběru. S nainstalovanou příslušnou sadou můžete vytvářet a upravovat nelatinkový text. Další informace najdete v dokumentaci ke svému systému.

Používání dvoubytového textu v Adobe GoLive (pouze Windows 2000 a Mac OS) Když nainstalujete anglickou verzi Adobe GoLive, nastaví se každá stránka, kterou vytvoříte, do západního kódování (Latin 1) ve Windows a západního kódování GL v Mac OS. Pokud bude text na vaší stránce vytvořen s použitím libovolného západního jazyka, jako je například americká nebo britská


angličtina, němčina, francouzština, španělština nebo švédština, nemusíte tento výběr měnit. Můžete psát text přímo do okna dokumentu. Ale pokud chcete vytvořit obsah v jazyce s jiným skriptem, potřebujete příslušné systémové prostředky a písma. Musí být nainstalovaný a aktivní modul Encodings (Kódování). Musíte také změnit nastavení předvolby General Encodings (Všeobecné kódování) na kódování, které chcete použít, aby se v podnabídce File > Document Encoding (Soubor > Kódování dokumentu) objevilo dvoubytové kódování. Podporovaná kódování dokumentu jsou určena systémovým softwarem.

Nastavení předvoleb jazyka a písem Nastavení předvoleb Encodings (Kódování) a Fonts (Písma) umožňuje vybrat výchozí skript jazyka, přizpůsobit podnabídku Document Encoding (Kódování dokumentu) a nastavit výchozí písma. Jak aktivovat kódování:

1 Zvolte Edit > Preferences (Úpravy > Předvolby) a klepněte na ikonu Modules v levém panelu dialogového okna Preferences. Zkontrolujte, zda je vybraný modul Encodings (Kódování). Pokud není vybraný, musíte ho vybrat a spustit znovu Adobe GoLive, aby se inicializoval. 2 Zvolte Edit > Preferences a klepněte na ikonu Encodings (Kódování). 3 Vyberte požadovanou volbu kódování. Kódování, která nejsou aktivována a podporována systémovým softwarem, se v podnabídce File > Document Encoding neobjeví. 4 Chcete-li nastavit volbu kódování jako výchozí, vyberte název volby a pak vyberte Default Encoding (Výchozí kódování) nebo jednoduše poklepejte na název volby. Název výchozího výběru se objeví tučným písmem a podtržený. 5 Vyberte Use Charset Info (Použít informace o znakové sadě), chcete-li zahrnout kódování a informace o znakové sadě do atributu Content (Obsah) tagu Meta. Když je tato volba vybraná, Adobe GoLive se snaží rozeznat kódování na základě použitých znaků. Vypněte tuto volbu, pokud chcete odstranit informace o jazyku z hlavičky stránky HTML. 6 Textové pole Scanning Limit Characters (Počet testovaných znaků) určuje počet bytů, který má Adobe GoLive prohledávat, když zjišťuje informace o kódování a o znakové sadě při otvírání souboru. Vypnutím volby Use Charset Info (Použít informace sady znaků) se tato volba automaticky vypne. Jak vybrat výchozí písma a systém kódování:

1 Zvolte Edit > Preferences (Úpravy > Předvolby) a klepněte na ikonu Fonts (Písma) v levém panelu dialogového okna Preferences. 2 Rozbalte kódování, které chcete použít. 3 Pro každou volbu zvolte písmo a velikost z rozbalovacích nabídek Font (Písmo) a Size (Velikost).


Chcete-li zobrazit náhled výběru, klepněte na trojúhelník Font Sample (Vzorek písma) (Mac OS).

A

B

A. Klepnutím na tuto ikonu se zobrazí písma pro systém kódování. B. Klepnutím na tento trojúhelník se zobrazí a skryje vzorek písma (Mac OS).

4 Klepněte na OK a restartujte Adobe GoLive.

Poznámka: V nabídce Font (Písmo) se objeví pouze instalovaná dvoubytová písma. Informace o instalování písem najdete v dokumentaci ke svému operačnímu systému. Jak vytvořit stránky ve dvoubytovém jazyku:

1 Pokud vytváříte text v nezápadním jazyku, zkontrolujte, že jste nainstalovali příslušný software pro dvoubytový skript a písma. 2 Otevřete nové okno dokumentu. 3 Zvolte File > Document Encoding (Soubor > Kódování dokumentu) a zvolte příslušnou volbu

kódování jazyka. Zkontrolujte, že je ekvivalentní vnitřnímu kódování operačního systému – například japonskému (Shift JIS) – aby se tato meta informace mohla přidat do sekce hlavičky. 4 Pokračujte v návrhu své stránky v Adobe GoLive.


Použití textových souborů obsahujících různé skripty a kódování Před importem cizojazyčných souborů nebo textových souborů z jiných platforem musíte vědět, s jakým kódováním byly napsány. Pokud byl text uložen v kódování, které váš operační systém nepodporuje, nezobrazí se správně. Kód HTML je ale přesto platný. Chcete-li vložit cizí skript, musíte zobrazit svůj dokument v Adobe GoLive v zobrazení Source (Zdroj) a vložit do něj dvoubytový text. Jak importovat textové soubory s cizím kódováním:

1 Otevřete nové okno dokumentu. 2 Zvolte File > Document Encoding (Soubor > Kódování dokumentu) a zvolte kódování jazyka použité při vytváření souboru, který chcete importovat.

Tím se vloží do hlavičky informace o kódování. 3 Zkopírujte text ze souboru, který chcete importovat. 4 Vraťte se do Adobe GoLive a zobrazte svůj dokument Adobe GoLive v zobrazení Source (Zdroj). 5 Vložte zkopírovaný text mezi tagy a . Zkontrolujte, že nepřepisujete žádný z tagů HTML.

Pokud váš text obsahuje znaky, které se používají v syntaxi HTML jako jsou „<“, „>“ a „&“, musíte použít příslušnou notaci HTML pro speciální znaky, jako například „<“, „>“ a „&“; jinak je Adobe GoLive při čtení textového souboru interpretuje jako tagy HTML. Nyní máte HTML soubor Adobe GoLive se správným kódováním v hlavičce a text, který chcete použít. 6 Zvolte File > Save As (Soubor > Uložit jako), a uložte stránku s příponou .html za názvem souboru. 7 Pokračujte ve vytváření rozvržení své stránky.

Text se nebude zobrazovat správně bez nezbytného operačního systému a písem. Chcete-li zobrazit náhled stránky, musíte použít prohlížeč Webu se správným kódováním, běžícím na nezbytném operačním systému. Poznámka: Přepnutím kódování při zobrazení Source (Zdroj) v okně dokumentu se pro platnou stránku změní informace o znakové sadě, ne informace o kódování.


2

81

Kapitola 2: Základy webového místa

P

roces vytváření webového místa začíná vytvořením dokumentu místa a jeho zobrazením v okně místa.

Vytvoření nového webového místa Proces vytváření místa na Webu začíná vytvořením místa – to znamená vytvořením dokumentu místa (souboru místa), který řídí jeho obsah, a dvou složek, ve kterých bude tento obsah uložený. Pokud pojmenujete své místo MeMisto, bude název dokumentu místa MeMisto.site. Ať už místo vytváříte ve Windows nebo v Mac OS, lze dokument místa, který vytvoříte, otevřít a používat na obou platformách. Pokud jste k vytvoření webového místa použili předchozí verzi Adobe GoLive, nemusíte jej v Adobe GoLive 5.0 znovu vytvářet. Dokument místa se pouhým otevřením automaticky aktualizuje na místo Adobe GoLive 5.0, a vytvoří se dokument místa 5.0. (Dřívější dokument místa se zálohuje. Pokud chcete archivovat celé předchozí místo a ne jen dokument místa, zkopírujte místo, archivujte jeho kopii a pak otevřete dokument místa originálu.)

O složkách místa Dvě složky místa jsou jeho kořenová složka a datová složka. Jestliže pojmenujete své místo MeMisto, kořenová a datová složka se pojmenují MeMisto a MeMisto.data. Po vybudování webového místa bude MeMisto obsahovat stránky a média, které se posílají na server při publikování místa. MeMisto.data bude obsahovat pomocný materiál, potřebný k vytvoření a udržování místa. Nebude se posílat na server. Při vytváření nového místa máte možnost vytvořit třetí „zastřešující“ složku, která bude obsahovat kořenovou a datovou složku a dokument místa.

A B C D

A. Zastřešující složka B. Kořenová složka C. Složka místa D. Dokument místa

82 KAPITOLA 2 Základy webového místa

Doporučuje se používat zastřešující složku. Pokud pojmenujete místo MeMisto a vytvoříte zastřešující složku, měli byste ji pojmenovat nějak jinak, například Slozka MeMisto, abyste ji odlišili od kořenové složky MeMisto, kterou bude obsahovat.

Vytvoření prázdného webového místa Když vytvoříte prázdné místo, obsahuje kořenová složka pouze obecnou domovskou stránku a datová složka obsahuje pouze prázdné podsložky pro data. Jak vytvořit prázdné webové místo:

1 Zvolte File > New Site > Blank (Soubor > Nové místo > Prázdné). 2 Napište název webového místa. 3 Klepněte na Browse (Procházet), najděte složku, která bude obsahovat místo, a klepnutím na OK

složku vyberte. Vybraná složka bude obsahovat buď dokument místa a dvě složky místa nebo jednu zastřešující složku, která je obsahuje. Jestliže pojmenujete místo MeMisto, zastřešující složka se automaticky pojmenuje MeMisto Folder. 4 Pokud chcete vytvořit zastřešující složku, vyberte Create Folder (Vytvořit složku). 5 Klepněte na OK.

Dokument místa pro nové místo se automaticky otevře v okně místa.

Vytvoření webového místa ze vzorového místa Když vytvoříte webové místo s názvem MeMisto kopírováním vzorového místa, zkopírujete jeho kořenovou a datovou složku. Informace o obsahu těchto složek viz „O vzorových webových místech“ na straně 395. Jak vytvořit webové místo kopírováním vzorového místa:

1 Zvolte File > New Site > Copy from Template (Soubor > Nové místo > Kopírovat ze vzoru). 2 Vyberte vzorové místo ze seznamu. Můžete použít miniatury rozvržení a struktury, které obsahuje každý vzor v seznamu, aby vám pomohly při výběru. 3 Napište název nového webového místa. 4 Klepněte na Browse (Procházet), najděte složku, která bude obsahovat místo, a klepnutím na OK ji vyberte. Vzorové místo, které se bude kopírovat do složky, již má zastřešující složku; nemusíte ji vytvářet. 5 Klepněte na OK.

Nové místo se automaticky otevře v okně místa. Další informace viz „Používání vzorových webových míst“ na straně 395.


Vytvoření webového místa importováním Webové místo Adobe GoLive můžete vytvořit importováním existujícího místa. Místo může být umístěné buď v lokální složce nebo ve složce na serveru FTP. V obou případech vytváří proces importu nový dokument místa a novou datovou složku místa. Při lokálním importu se kořenová složka importovaného místa použije beze změn jako kořenová složka nového místa. Při importu ze serveru FTP se stáhne kořenová složka místa, a stane se z ní kořenová složka nového místa. V obou případech se vazby na importovaných stránkách zachovají beze změn, a vybuduje se logická struktura (navigační hierarchie) místa. Další informace viz „O zobrazení navigace“ na straně 91. Když importujete ze serveru FTP, můžete zkopírovat importované soubory do zastřešující složky místa. Když ale importujete z lokální složky, zůstávají importované soubory ve složce. Chcete-li importovat místo tak, aby mělo zastřešující složku, musíte před jeho importováním vytvořit sadu složek pro místo. Jak vytvořit sadu složek pro místo importované z lokální složky:

1 Vytvořte zastřešující složku. Pokud se vaše nové místo bude jmenovat MeMisto, pojmenujte složku Slozka MeMisto. 2 Zkopírujte importovanou složku do zastřešující složky. (Budete místo složky importovat její kopii.) 3 Je-li třeba, přejmenujte zkopírovanou složku tak, že jí dáte název nového místa, které vytváříte. Jak importovat místo z lokální složky:

1 V Adobe GoLive zvolte File > New Site > Import from Folder (Soubor > Nové místo > Import ze složky). 2 Proveďte jeden z následujících úkonů: • Klepněte na horní tlačítko Browse, přejděte do kořenové složky (ne do zastřešující složky, pokud jste

ji vytvořili) a klepnutím na OK složku vyberte. Tím se pravděpodobně v textových polích zobrazí cesty jak do složky tak do domovské stránky, kterou obsahuje. • Klepněte na dolní tlačítko Browse, najděte domovskou stránku v kořenové složce a klepnutím na OK

stránku vyberte. Tím se pravděpodobně v textových polích zobrazí cesty jak do domovské stránky tak do složky, která ji obsahuje. Tento krok můžete provést také tak, že přetáhnete kořenovou složku nebo domovskou stránku do příslušného textového pole. 3 Pokud se cesta k domovské stránce neobjeví, proveďte jeden z následujících úkonů: • Klepněte na dolní tlačítko Browse, vyhledejte domovskou stránku a klepnutím na OK stránku vyberte. • Vyberte Create Generic Home Page (Vytvořit obecnou domovskou stránku).

4 Klepněte na Import. 5 Je-li třeba, najděte složku pro dokument místa – zastřešující složku, pokud jste ji vytvořili. 6 Klepnutím na Save (Uložit) dokument místa uložte.


Dokument místa pro nové místo se automaticky otevře v okně místa. Pokud místo obsahuje nějaké sirotky, přerušené vazby nebo chybějící položky, budete na to upozorněni indikátory chyb, které se objeví v okně. Další informace viz „Kontrola stránek s chybami ve webovém místě“ na straně 418. Jak importovat místo ze serveru FTP:

1 Zvolte File > New Site > Import from FTP Server (Soubor > Nové místo > Import ze serveru FTP). 2 Určete adresu serveru FTP. Pokud jste nastavili adresu v předvolbách FTP, můžete ji zvolit z rozbalovací nabídky. (Informace o předvolbách FTP viz „Nastavení přístupu na FTP server“ na straně 421) 3 Napište cestu do adresáře (je-li třeba) a jméno uživatele. 4 Pokud je textové pole Password (Heslo) prázdné, proveďte jeden z následujících úkonů: • Ve Windows napište heslo. • V Mac OS napište heslo, pokud není v Adobe GoLive zapnuto použití Keychain (Sady klíčů) nebo

Keychain nemá heslo. (Informace o Keychain viz „Nastavení přístupu na FTP server“ na straně 421.) 5 Pokud napíšete heslo, vyberte Save (Uložit), chcete-li heslo uložit pro budoucí použití z vytvářeného místa. (Uživatelé Mac OS Keychain: Nevybírejte Save. Zadané heslo se přidá do Keychain automaticky.) 6 Musíte-li určit číslo portu nebo použití pasivního režimu, klepněte na Advanced (Rozšířené), uveďte číslo nebo vyberte Use Passive Mode (Použít pasivní režim) a klepněte na OK. Informace o portech FTP a pasivním režimu viz „Nastavení přístupu na FTP server“ na straně 421. 7 Klepnutím na Browse spusťte připojení k serveru. 8 Najděte domovskou stránku a klepnutím na OK ji vyberte. 9 Klepněte na Import. 10 Napište název webového místa. 11 Proveďte jeden z následujících úkonů: • Ve Windows klepněte na Browse (Procházet), přejděte do složky, která bude obsahovat místo,

a klepnutím na OK složku vyberte. • V Mac OS vyberte složku, která bude obsahovat místo.

Vybraná složka bude obsahovat buď dokument místa a dvě složky místa nebo jednu zastřešující složku, která je bude obsahovat. Jestliže pojmenujete místo MeMisto, zastřešující složka se automaticky pojmenuje MeMisto Folder. 12 Chcete-li vytvořit zastřešující složku, vyberte Create Folder (Vytvořit složku). 13 Klepněte na OK.

Dokument místa pro nové místo se automaticky otevře v okně místa. Pokud místo obsahuje nějaké sirotky, přerušené vazby nebo chybějící položky, budete na to upozorněni indikátory chyb, které se objeví v okně. Další informace viz „Kontrola stránek s chybami ve webovém místě“ na straně 418.


O oknech místa Když otevřete dokument místa (soubor *.site) poprvé, zobrazí se jeho obsah v záložkách primárního okna místa. Okno má deset záložek ve dvou panelech, šest záložek v levém panelu a čtyři v pravém panelu.

C A

B

Primární okno místa se zobrazením pravého panelu A. O jednu úroveň výše B. Zobrazit/skrýt pravý panel C. Nabídka panelu

Zpočátku se zobrazí pouze levý panel. Záložky můžete zobrazit v sekundárním okně místa tím, že z nabídky Design (Návrh) zvolíte příkaz Navigation View (Zobrazení navigace) nebo Links View (Zobrazení vazeb). Tyto příkazy odpovídají záložkám Navigation (Navigace) a Links (Vazby), jedenácté a dvanácté záložce okna místa. S výjimkou záložek Files (Soubory) a Extras (Dodatky) v primárním okně místa se záložky okna místa chovají jako palety. Každou záložku můžete přetáhnout ven z obou oken, do druhého okna nebo ji osamostatnit. Pokud ji vytáhnete ven, objeví se nové sekundární okno místa, které ji bude obsahovat. Když se sekundární okno místa vyprázdní, zmizí. Každé uspořádání záložek a oken místa, které pro místo vytvoříte, se při dalším otevření dokumentu místa zachová. Můžete mít současně otevřeno více dokumentů místa než jeden. V tom případě vám Adobe GoLive nedovolí přetahovat záložky z okna jednoho místa do okna pro jiné místo. Prvních deset záložek okna místa jsou tabulky s řádky souborů nebo jiných objektů a sloupci s informacemi o objektech. Další dvě jsou grafická zobrazení místa. Oba panely okna místa mají v pravém horním rohu nabídku. Obě záložky zobrazení mají podobné nabídky.


Práce s okny místa Okna místa Adobe GoLive můžete libovolně upravovat, můžete v nich uspořádat okna a záložky tak, aby vyhovovaly vašemu způsobu vytváření místa. Jak otevřít dokument místa (soubor *.site) v primárním okně místa:

Proveďte jeden z následujících úkonů: • Zvolte File > Open (Soubor > Otevřít), najděte dokument, vyberte ho a klepněte na Open (Otevřít).

Tím se otevře dokument místa. • Poklepejte na soubor na pracovní ploše svého systému. Tím se spustí Adobe GoLive s otevřeným

dokumentem místa. Poznámka: Otevřením dokumentu místa se automaticky vytvoří záloha dokumentu. Tato záloha se vymaže, když dokument uložíte a zavřete. V předvolbách Site (Místo) můžete tuto funkci vypnout. Jak otevřít místo, jehož dokument místa byl otevřený při zhroucení:

Otevřete normální soubor místa, ne záložní soubor. Je-li nutné použít zálohu, bude vás o tom Adobe GoLive při otevírání normálního souboru informovat. Jak zobrazit nebo skrýt pravý panel primárního okna místa:

Klepněte na ikonu (

) v posuvníku dole v okně.

Jak otevřít grafické zobrazení místa v sekundárním okně místa:

1 Klepněte na okno místa, zobrazující dokument místa. 2 Proveďte jeden z následujících úkonů: • Klepněte na tlačítko Navigation View (Zobrazení navigace) (


• Zvolte Design > Navigation View (Návrh > Zobrazení navigace) nebo Design > Links View (Návrh >

Zobrazení vazeb). • Z nabídky jednoho z panelů okna místa zvolte Navigation (Navigace) nebo Links (Vazby). Jak zobrazit obsah záložky v okně místa:

Proveďte jeden z následujících úkonů: • Klepněte na záložku, čímž ji přesunete dopředu. • Zvolte Site > View (Místo > Zobrazit) a vyberte záložku z podnabídky View. Pokud byla záložka

zavřená, zobrazí se v novém sekundárním okně místa.


Jak přesunout záložku do okna nebo do panelu okna místa nebo z okna nebo z panelu okna místa:

Přetáhněte záložku do okna nebo panelu nebo z okna nebo panelu. Záložku můžete přetáhnout do obou panelů primárního okna místa, buď z jiného okna místa nebo z jiného panelu primárního okna místa. Pokud přesunete dvě záložky do dvou samostatných oken, můžete je někdy použít společně. Například, pokud jsou záložky Navigation (Navigace) a Links (Vazby) v samostatných oknech, můžete použít zobrazení navigace jako klíč k zobrazení vazeb tím, že vyberete stránku v jednom zobrazení, abyste ji lokalizovali v druhém. Jak obnovit původní uspořádání primárního okna místa:

Z nabídky jednoho z panelů okna zvolte Default Configuration (Výchozí uspořádání). Tím se obnoví původních deset záložek v původních polohách a odstraní se všechny další záložky. Jak pracovat se záložkami, obsahujícími tabulky:

Proveďte libovolný z následujících úkonů: • Chcete-li změnit pořadí uspořádání sloupce, podle kterého je tabulka právě uspořádána, klepněte na

záhlaví sloupce. V Mac OS můžete klepnout také na ikonu (

) nad posuvníkem.

• Chcete-li uspořádat tabulku podle jiného sloupce, klepněte na záhlaví tohoto sloupce. • Chcete-li zobrazit nebo skrýt sloupec, zvolte sloupec z kontextové nabídky pro řádek záhlaví sloupců

v panelu obsahujícím tento sloupec. (Nebo použijte nabídku Show Columns (Zobrazit sloupce) v paletě View Controller (Správce zobrazení). Další informace viz „Používání palety View Controller (Správce zobrazení)“ na straně 369. Chcete-li zobrazit kontextovou nabídku, klepněte pravým tlačítkem myši (Windows) nebo se stisknutou klávesou Ctrl (Mac OS) na kontext. Ve výše uvedeném postupu je kontextem řádek záhlaví sloupců. • Chcete-li změnit rozměr sloupce v záložce, táhněte pravý okraj záhlaví sloupce doleva nebo doprava. • Chcete-li změnit polohu sloupce v záložce, táhněte záhlaví sloupce doleva nebo doprava se stisknutou

klávesou Ctrl (Windows) nebo Apple (Mac OS). (Polohu krajního levého sloupce v záložce nemůžete změnit.) • Chcete-li přejít ve složce nebo skupině, jejichž obsah je uvedený v záložce, o jednu úroveň výše,

klepněte na ikonu (

) v horní části záložky.

• Chcete-li zobrazit nebo skrýt kotvy ve stránce, klepněte na ikonu ( ) nebo ( ) vlevo od stránky.

O záložkách obsahujících tabulky Okno místa obsahuje deset záložek, ve kterých je seznam prostředků místa v tabulkovém formátu. Informace o správě těchto prostředků viz „Správa webových míst“ na straně 377.


Záložka Files (Soubory) Pokud pojmenujete své místo MeMisto, obsahuje záložka Files seznam souborů stránek a médií ve složce MeMisto. Pokud stránka obsahuje kotvy, jsou v záložce uvedeny pod stránkou. Pokud jste importovali místo, které má své stránky a média seskupené ve složkách, zachová se v záložce tato struktura složek. Záložku Files můžete použít tak, jako byste použili Windows Explorer nebo Mac OS Finder, jak k vyhledání souborů ve webovém místě tak k provedení základních operací správy souborů. Soubory můžete přetáhnout do jiných složek v záložce a do dalších záložek, kopírovat soubory do schránky, mazat soubory, kontrolovat pravopis v souborech a otevírat soubory v příslušných oknech. Soubory HTML se otevírají v oknech dokumentů Adobe GoLive. Pro každý soubor uvádí záložka ve sloupcích detaily, jako je název, velikost a datum úpravy. • Ve sloupci Status (Stav) označuje zaškrtnutí (

), že tento soubor je bez chyb – byly nalezeny všechny soubory, na které jsou v něm odkazy. Informace o významu ostatních stavových ikon viz „Kontrola stránek s chybami ve webovém místě“ na straně 418. Ve sloupci Filename Status (Stav názvu souboru) označuje symbol „chyby“ ( ), že název souboru porušuje některé omezení pro název souboru. Další informace viz „O názvech souborů“ na straně 99. Sloupec Filename Status je normálně skrytý. • Ve sloupci Locked (Zamknuto) označuje zámek ( ) zamknutý soubor v Mac OS nebo soubor pouze

pro čtení ve Windows. Další informace viz „Odemknutí lokálně zamknutých souborů“ na straně 101. Tužka ( ) označuje zamknutý soubor pracovní skupiny. Informace najdete v „Enhancing WebDAV with Workgroup Support“ v nápovědě programu. • Ve sloupci Used (Použito) označuje číslo počet vazeb na soubor z jiných souborů ve webovém místě.

Vazby mohou být hypervazby nebo odkazy. Informace o hypervazbách a odkazech viz „O vazbách v zobrazeních vazeb“ na straně 91.

Záložky Designs (Návrhy) a Extras (Dodatky) Pokud pojmenujete své místo MeMisto, uvádí záložky Designs a Extras soubory ve složce MeMisto.data. V záložce Designs je seznam prototypových návrhů, které jste vytvořili pro místo. Jako alternativu vytváření vlastního místa po stránkách můžete vytvořit jeden nebo více prototypů místa a pak převést požadovaný prototyp do vlastního místa. Další informace viz „Návrhy webových míst“ na straně 435. Extras obsahuje čtyři složky: • Složka Components (Komponenty) obsahuje soubory komponent GoLive – zdrojové soubory

komponent stránek, které se aktualizují, když upravíte zdrojový soubor. Soubor komponenty můžete otevřít v okně dokumentu tím, že na něj poklepete. Další informace viz „Používání komponent GoLive“ na straně 238. Složka Designs (Návrhy) obsahuje návrhy místa – pracovní prototypy místa nebo podstromu místa. Další informace viz Kapitola 20, „Návrhy webových míst“.


• Složka Stationery (Předlohy) obsahuje soubory předlohy – stránky HTML použitelné jako šablony.

Soubor předlohy můžete otevřít v okně dokumentu tím, že na něj poklepete. Další informace viz „Používání předloh“ na straně 237. • Složka Site Trash (Koš místa) obsahuje soubory vymazané v Adobe GoLive, ale nevymazané na vašem

pevném disku – to znamená nepřesunuté do koše (Recycle Bin ve Windows a Trash v Mac OS).

Záložky External (Vnější), Colors (Barvy), Fontsets (Sady písem) a Custom (Vlastní) Pokud pojmenujete své místo MeMisto, budou záložky External, Colors, Fontsets a Custom obsahovat položky, uložené v souboru MeMisto.site. V každé záložce mohou být položky uvedené samostatně nebo sdružené do skupin. (Skupina je typ složky uložené v souboru místa, ne uvnitř jiné složky.) External obsahuje seznam adres URL a e-mailů, použitelných na stránkách místa. Namířením a výběrem vložíte jednu z uvedených URL nebo adres na stránku v okně dokumentu. Další informace viz „Používání URL a e-mailových adres ve webovém místě“ na straně 399. Colors obsahuje seznam barev, použitelných na stránkách místa. Barvu můžete přetáhnout ze záložky na vybraný text nebo vybraný objekt na stránce v okně dokumentu. Další informace viz „Používání barev webového místa“ na straně 403. Fontsets obsahuje seznam sad písem, použitelných na stránkách místa. Uvedené sady písem se objevují v nabídce v okně dokumentu nebo můžete sadu písem přetáhnout na vybraný text na stránce v okně. Další informace viz „Používání sad písem webového místa“ na straně 405. Custom obsahuje seznam uživatelských výstřižků HTML a médií, použitelných na stránkách místa. Výstřižek můžete přetáhnout ze záložky do požadované polohy na stránce v okně dokumentu. Další informace viz „Používání vlastních výstřižků“ na straně 406.

Záložky Errors (Chyby), FTP a WebDAV Záložky Errors, FTP a WebDAV obsahují seznam souborů, které nejsou uložené v místě. Errors obsahuje seznam chybějících nebo osiřelých souborů – souborů, na které je odkaz ve vazbě, a které nelze najít nebo které se nacházejí mimo lokální kořenovou složku. Informace o záložce Errors viz „Kontrola chybějících nebo osiřelých souborů ve webovém místě“ na straně 418. FTP a WebDAV se používají k posílání místa na webový server a k synchronizaci lokálního a publikovaného místa. Obvyklou metodou připojení k serveru je FTP. Připojení WebDAV používá zamykání souborů, aby se usnadnila spolupráce při vývoji místa. Informace o záložce FTP viz „O klientech FTP“ na straně 420. Informace o záložce WebDAV viz „Using WebDAV“ v nápovědě programu.


O zobrazeních místa K vizuálnímu znázornění vztahů mezi stránkami, které tvoří webové místo, se používá grafické zobrazení okna místa. Můžete použít dvě zobrazení: zobrazení sítě skutečných vazeb (zobrazení vazeb) a zobrazení stromové hierarchie stránek, která tvoří základ sítě vazeb (zobrazení navigace). V obou zobrazeních je střední panel a (volitelné) okrajové panely, které umožňují detailnější zobrazení: panoramatický panel, panel čekajících vazeb, referenční panel a pracovní panel. Další informace viz „Používání periferních panelů“ na straně 363. Obě zobrazení souvisejí se záložkou Files (Soubory). Stránky zobrazené v zobrazení jsou uvedeny v záložce Files a výběrem stránky v zobrazení se stránka vybere v záložce Files.

O zobrazeních vazeb Když otevřete zobrazení vazeb místa, zobrazí se soubor domovské stránky místa (index.html). Pokud místo obsahuje stránky spojené hypervazbami s domovskou stránkou, stránky spojené hypervazbami k těmto stránkám a tak dále, můžete je zobrazit rozbalením zobrazení, nejdříve z domovské stránky a pak z ostatních stránek, které se zobrazí. Každým rozbalením se zobrazí soubory, navázané na rozbalovaný soubor. Rozbalením jedním směrem se zobrazí vstupní vazby – vazby se zdroji v jiných souborech a s cílem v rozbalovaném souboru. Rozbalením opačným směrem se zobrazí výstupní vazby – vazby na jiné soubory se zdrojem v rozbalovaném souboru. Jednotlivý soubor se může v zobrazení objevit několikrát – například jako vstupní vazba vlevo od rozbaleného souboru a jako výstupní vazba vpravo od něho.

A

B

C

D

A.Vstupní vazba B. Domovská stránka C. Výstupní vazba D. Nerozbalený soubor

Můžete také zobrazit pouze vstupní vazby, pouze výstupní vazby, žádné vazby nebo pouze cesty vazeb, které právě zkoumáte. Další informace viz „Možnosti změny zobrazení vazeb“ na straně 370.


O zobrazení navigace U nově importovaného místa ukazuje zobrazení navigace strukturu místa jako stromovou hierarchii vycházející z domovské stránky. U nového prázdného místa ukazuje zobrazení navigace jednu domovskou stránku a vy vytváříte strukturu místa tím, že k domovské stránce přidáváte prázdné stránky ve stejném hierarchickém uspořádání. Tato metoda se používá také k přidávání stránek a dílčích struktur k importovanému místu. V obou případech se hierarchie sestavuje z logických párových vztahů mezi stránkami, ve kterých je stránka buď dcera, rodič, předcházející sourozenec nebo následující sourozenec. Typický vztah rodič – dcera je mezi domovskou stránkou a stránkami, na které jsou z ní vazby.

A

B

A. Domovská stránka B. Dcery domovské stránky

Typický sourozenecký vztah je mezi první (předcházející) a druhou (následující) stránkou v posloupnosti stránek, napodobující knihu. Když máte vytvořenou strukturou, můžete vyplňovat prázdné stránky obsahem a vytvářet mezi nimi hypervazby, které odrážejí tuto strukturu. Nebo můžete hierarchii přestavět s jinými nastaveními, chcete-li vytvořit jinou strukturu před tím, než vytvoříte hypervazby odrážející strukturu. Další informace viz „Přestavění hierarchie“ na straně 98.

O vazbách v zobrazeních vazeb Soubory zobrazené v zobrazeních místa Adobe GoLive jsou svázané čtyřmi způsoby: • Hypervazby jsou „skoky“ nebo „větvení“ na stránky HTML, které vedou na jiné stránky HTML nebo

dokumenty. Skládají se z adresy (URL) druhé stránky a příkazu k zobrazení stránky, když se na hypervazbu klepne. Hypervazby se zobrazují ve středním panelu zobrazení vazeb.


Logické vazby jsou rodinné vztahy mezi páry stránek (rodič-dcera, sourozenec-sourozenec). Jako celek vytvářejí tyto rodinné vztahy hierarchickou strukturu místa. Místo budujete vytvářením vztahů a pak jejich použitím jako vodítka k svázání stránek místa hypervazbami. Logické vazby se zobrazují ve středním panelu zobrazení navigace. • Čekající vazby připomínají, že dvojice stránek, obvykle logicky svázaných, by měly být spojeny hypervazbami. Podobně jako hypervazby, jsou i čekající vazby směrové. Například čekající vazba rodičdcera může být buď od rodiče k dceři nebo od rodiče k dceři a zpět. Pokud vytvoříte hypervazbu mezi stránkami, aby se dokončila čekající vazba, čekající vazba se vyřeší. Nevyřešené čekající vazby nemají ekvivalentní hypervazby. V zobrazeních navigace se všechny stránky, které jsou cílem nevyřešených čekajících vazeb pro stránku vybranou ve středním panelu, objeví v panelu čekajících vazeb.

Čekající vazby stránky můžete také zobrazit v paletě Page Inspector (Inspektor stránky) pro stránku. Paletu Page Inspector pro stránku zobrazíte tak, že zobrazíte paletu Inspector, zobrazíte stránku v okně dokumentu a klepnete na ikonu Page (Stránka) ( ) v levém horním rohu okna. Čekající vazby se zobrazí v záložce Pending (Čekající). V záložce jsou uvedeny všechny stránky, které jsou cílem čekajících vazeb stránky, a nevyřešené vazby jsou zaškrtnuté. • Odkazy jsou zdrojové vazby – adresy souborů médií na stránkách HTML, které způsobí, že se soubor

média vloží do stránky HTML, obvykle jako obraz. V zobrazeních navigace a zobrazeních vazeb se všechny soubory, na které je odkaz na stránce vybrané ve středním panelu, objeví v panelu odkazů.

Zobrazení místa Tato dvě zobrazení místa můžete přesouvat do několika výhodných uspořádání oken a měnit zobrazení v těchto oknech mnoha způsoby, které vám pomohou při prohlížení místa.

Rozbalení a sbalení zobrazení Když rozbalíte nebo sbalíte soubor v jednom ze zobrazení místa, zobrazíte nebo skryjete s ním svázané soubory. Tato funkce funguje v podstatě stejně jako rozbalování a sbalování složek v Průzkumníku ve Windows nebo ve Finderu v Mac OS. Když soubor rozbalíte, zůstane rozbalený, dokud jej explicitně nesbalíte. Pokud například sbalíte soubor, který je na začátku dlouhé cesty souborů, celá cesta zmizí. A pokud pak stejný soubor rozbalíte, objeví se znovu celá cesta, nejen soubory navázané přímo na rozbalený soubor. Soubory rozbalujete ze souboru domovské stránky, abyste viděli celé místo. Protože většina míst obsahuje mnoho souborů, které nelze zobrazit najednou, a rolování zobrazení může být těžkopádné, musíte někdy soubory sbalit, abyste mohli zobrazit jinou část místa. Existuje ale několik přesnějších technik přesouvání a omezení zobrazení. Další informace viz „Prohlížení webových míst“ na straně 363. Jak zcela rozbalit zobrazení místa:

Klepněte na tlačítko Unfold All (Rozbalit vše) (



Jak postupně rozbalovat zobrazení místa:

1 Proveďte jeden z následujících úkonů: • V zobrazení navigace klepněte na tlačítko rozbalení (

) vedle stránky, chcete-li zobrazit její

dceřinnou stránku nebo stránky. • V zobrazení vazeb klepněte na tlačítko rozbalení (

) vedle stránky, chcete-li zobrazit její vstupní nebo výstupní vazby. Směr tlačítka od stránky určuje, zda jsou vazby vstupní nebo výstupní. Další informace viz „O orientaci a směru“ na straně 93.

2 Pokračujte dalšími klepnutími na tlačítka rozbalení, abyste zobrazení rozbalili tak, jak chcete. Jak postupně sbalovat zobrazení místa:

1 Proveďte jeden z následujících úkonů: • V zobrazení navigace klepněte na tlačítko sbalení (

) vedle stránky, chcete-li skrýt její dceřinnou

stránku nebo stránky. • V zobrazení vazeb klepněte na tlačítko sbalení (

) vedle stránky, chcete-li skrýt její vstupní nebo

výstupní vazby. 2 Pokračujte dalšími klepnutími na tlačítka sbalení, dokud se zobrazení nesbalí tak, jak chcete. Jak získat předběžné informace o rozbalení:

Před klepnutím zastavte kurzor nad tlačítkem rozbalení. V tipu nástroje se uvede počet dcer, vstupních vazeb nebo výstupních vazeb, které bude rozbalení obsahovat.

O orientaci a směru Zobrazení navigace i zobrazení vazeb se mohou objevit v orientaci na šířku i na výšku.

Zobrazení navigace v orientaci na šířku a na výšku


Obě zobrazení používají čtyři směry k označení typů vazeb. Například v zobrazení navigace na šířku je rodičovská stránka nad dceřinnou stránkou. V orientaci na šířku používá zobrazení navigace čtyři směry následujícím způsobem: Nahoře je rodičovská stránka, dole je dceřinná stránka, vlevo je předcházející stránka a vpravo následující stránka. V orientaci na výšku je rodičovská stránka vlevo a předcházející stránka nahoře. V orientaci na výšku používá zobrazení vazeb dva směry následujícím způsobem: Vlevo je vstupní vazba a vpravo je výstupní vazba. V orientaci na šířku je vstupní vazba nahoře.

Změna orientace zobrazení Při prvním zobrazení místa má jeho zobrazení navigace orientaci na šířku a jeho zobrazení vazeb má orientaci na výšku. Jak změnit orientaci zobrazení:

Klepněte na tlačítko Toggle Orientation (Obrátit orientaci) (


Poznámka: Orientaci můžete změnit také pomocí palety View Controller (Správce zobrazení). Další informace viz „Používání palety View Controller (Správce zobrazení)“ na straně 369.

Vytváření hierarchie stránek Pokud začnete s prázdným místem, je vhodné začít vytvářet místo v zobrazení navigace. Začnete vytvořením jeho struktury, uspořádáním prázdných stránek v hierarchii nevyřešených čekajících vazeb počínaje vazbami z domovské stránky a do domovské stránky. V pozdější fázi tvorby místa, když stránky mají obsah, můžete vyřešit tyto čekající vazby vytvořením hypervazeb, které jim odpovídají. Tento strukturální přístup je také výhodný při přidávání nových skupin stránek do rozvinutých míst. Prostě jen ukotvíte strukturu prázdných stránek do stránky „odskoku“ – jiné stránky místa, než je domovská stránka.

Přidání prázdných stránek a čekajících vazeb do hierarchie Obecné stránky, které přidáváte do zobrazení navigace, jsou prázdné stránky HTML. Objevují se v zobrazení s výstražnou ikonou prázdné stránky ( ). Tyto stránky mají název untitled.html nebo untitledn.html. Informace o přejmenování stránek viz „Pojmenování souborů a složek“ na straně 99. Poznámka: Obecné stránky jsou prázdné, ale obsahují základní tagy HTML potřebné k vytvoření stránky HTML. Přidané stránky jsou buď stránky s nevyřešenými čekajícími vazbami nebo pracovní stránky. Pracovní stránka nemá žádné čekající vazby jakéhokoli druhu. Pracovní stránky přidáváte do navigační hierarchie proto, aby se v pozdějším kroku snáze zapojily do hierarchie. Další informace viz „Změny uspořádání částí hierarchie“ na straně 97.


Jak přidat jednu prázdnou stránku s čekajícími vazbami:

1 Otevřete zobrazení navigace místa. 2 Vyberte stránku v zobrazení. 3 Proveďte jeden z následujících úkonů: • Klepněte na tlačítko Nová rodičovská stránka (

) v pruhu nástrojů nebo zvolte Design > New Parent Page (Návrh > Nová rodičovská stránka), chcete-li vložit stránku mezi vybranou stránku a její dřívější rodičovskou stránku. Nová stránka je dcerou dřívější rodičovské stránky a rodič vybrané stránky. Tyto tři stránky jsou spojeny vazbami „k dceři a zpět“ – čekajícími vazbami od rodičovských stránek k dceřinným stránkám a od dceřinných stránek k rodičovským stránkám.

• Klepněte na tlačítko Nová dceřinná stránka (

) v pruhu nástrojů nebo zvolte Design > New Page (Návrh > Nová stránka), chcete-li vložit dceřinnou stránku s vazbami „k dceři a zpět“ od vybrané stránky.

• Klepněte na tlačítko Nová následující stránka (

) v pruhu nástrojů nebo zvolte Design > New Next Page (Návrh > Nová následující stránka), chcete-li vložit následující sourozeneckou stránku s vazbami „k sousedním sourozencům“ od vybrané stránky – s čekající vazbou od vybrané stránky k nové sourozenecké stránce a čekající vazbou od nové sourozenecké stránky k vybrané stránce.

• Klepněte na tlačítko Nová předcházející stránka (

) v pruhu nástrojů nebo zvolte Design > New Previous Page (Návrh > Nová předcházející stránka), chcete-li vložit předcházející sourozeneckou stránku s vazbami „k sousedním sourozencům“ od vybrané stránky – s čekající vazbou od vybrané stránky k nové sourozenecké stránce a čekající vazbou od nové sourozenecké stránky k vybrané stránce. Poznámka: Pokud je vybraná stránka domovská stránka, je jedinou dostupnou volbou tlačítko Nová dceřinná stránka ( ) nebo Design > New Page.

Jak přidat skupinu dceřinných stránek s čekajícími vazbami:

1 Otevřete zobrazení navigace místa. 2 Vyberte stránku v zobrazení. 3 Zvolte Design > New Pages (Návrh > Nové stránky). 4 Zadejte počet stránek, které chcete vytvořit. 5 Chcete-li pojmenovat stránky nějak jinak než untitledn.html, zadejte název souboru. 6 Chcete-li použít stránku předlohy, zvolte ji z nabídky. (Další informace viz „Používání předloh“ na

straně 237.) 7 Z nabídky Parent (Rodič) zvolte jednu z následujících voleb vytvoření čekajících vazeb: • Zvolte To Each Child (Ke každé dceři), chcete-li vytvořit vazby z rodičovské stránky na každou

vytvářenou dceřinnou stránku. • Zvolte To Child and Back (K dceři a zpět), chcete-li vytvořit obousměrné vazby mezi rodičovskou

stránkou a každou vytvářenou dceřinnou stránkou.


• Zvolte To First Child Only (Pouze k první dceři), chcete-li vytvořit vazbu z rodičovské stránky pouze

na první vytvářenou dceřinnou stránku. • Zvolte None (Žádná), nechcete-li vytvořit žádné vazby na vytvářené dceřinné stránky.

8 Z nabídky Sibling (Sourozenec) zvolte jednu z následujících voleb vytvoření čekajících vazeb: • Zvolte To Next Sibling (K následujícímu sourozenci), chcete-li vytvořit vazby předcházející-násle-

dující mezi všemi dceřinnými stránkami, které vytváříte. (Vazba předcházející-následující se vytvoří také mezi prvním sourozencem, kterého vytvoříte, a posledním z jeho již případně vytvořených sourozenců.) Zvolte To Adjacent Sibling (K sousednímu sourozenci), chcete-li vytvořit obousměrné vazby mezi všemi dceřinnými stránkami, které vytváříte. (Obousměrná vazba se vytvoří také mezi prvním sourozencem, kterého vytvoříte, a posledním z jeho již případně vytvořených sourozenců.) • Zvolte None (Žádná), nechcete-li vytvořit žádné sourozenecké vazby v žádném směru od žádné

z dceřinných stránek, které vytváříte. 9 Klepněte na Create (Vytvořit). Tím se vytvoří nové stránky a nové nevyřešené čekající vazby. Čekající vazbu mezi dvěma stránkami vyřešíte přidáním hypervazby ze zdrojové stránky na odpovídající cílovou stránku. Jak přidat prázdnou pracovní stránku:

Vyberte složku v záložce Files (Soubory) a zvolte Site > New > Page (Místo > Nové > Stránka). Pracovní stránky se zobrazí také v pracovním panelu zobrazení navigace webového místa. Další informace viz „Používání periferních panelů“ na straně 363. Jak přidat čekající vazbu z jedné stránky na druhou:

1 Přesuňte kurzor na zdrojovou stránku. 2 Podržte Ctrl-Shift (Windows) nebo Apple (Mac OS). Kurzor se změní na ikonu namířit a vybrat

(

).

3 Táhněte na cílovou stránku. Vytvoří se nová čekající vazba.

Zdrojovou a cílovou stránkou mohou být libovolné dvě stránky. Nemusí mít rodinný vztah. Jak odstranit stránku ze zobrazení navigace:

1 Vyberte stránku. (Pokud má vybraná stránka potomky, přesunou se po odstranění vybrané stránky do pracovního panelu. Další informace viz „Používání periferních panelů“ na straně 363.) 2 Proveďte jeden z následujících úkonů: • Chcete-li stránku odstranit, klepněte na tlačítko Odstranit vybranou položku (

) v pruhu nástrojů, zvolte Edit > Delete (Úpravy > Odstranit) nebo stiskněte klávesu Delete nebo Smazat.

• Chcete-li přemístit stránku do pracovního panelu aniž byste ji odstranili, zvolte Design > Move to

Scratch (Návrh > Přesunout do pracovního).


Změny uspořádání částí hierarchie Přesunout stránku z jedné polohy v zobrazení navigace do jiné je snadné. Přetáhnete stránku na jinou – její cílovou stránku – a umístíte ji tak, aby se stala rodičem, dcerou nebo sourozencem cílové stránky. Pokud má přemísťovaná stránka dcery nebo potomky, přemístí se automaticky se stránkou. A poloha samotné stránky v rodině – její čekající vazby k rodiči a sourozencům – se aktualizuje. Díky této funkci můžete dělat podstatné změny struktury místa přemístěním několika stránek. Můžete také přetáhnout stránky z pracovního panelu do určité polohy v hierarchii nebo přetáhnout stránky z hierarchie do pracovního panelu. Jak přesunout stránku s čekajícími vazbami a její potomky do jiné polohy v místě:

Jedním z následujících způsobů přetáhněte stránku na její cílovou stránku: • Při orientaci na výšku přetáhněte stránku nad cílovou stránku, aby se přetahovaná stránka stala jejím

rodičem, pod cílovou stránku, aby se stránka stala jejím potomkem, do levé části, aby se stala předcházejícím sourozencem, a do pravé části, aby se stala jejím následujícím sourozencem. V horní, dolní, levé nebo pravé části cílové stránky se objeví čára, která ukazuje, kam stránku pustíte. • Při orientaci na výšku přetáhněte stránku vlevo od cílové stránky, aby se přetahovaná stránka stala

jejím rodičem, vpravo od cílové stránky, aby se stránka stala jejím potomkem, pod ní, aby se stala následujícím sourozencem, a nad ní, aby se stala jejím předcházejícím sourozencem. V levé, pravé, dolní nebo horní části cílové stránky se objeví čára, která ukazuje, kam stránku pustíte.

A

B

C

D

Přesunutí stránky k novému rodiči (vlevo); její výsledná poloha vedle nového sourozence (vpravo). Jak přesunout pracovní stránku do určité polohy v hierarchii:

1 Otevřete pracovní panel. (Další informace viz „Používání periferních panelů“ na straně 363.) 2 Přetáhněte stránku z panelu do určité polohy stejně jako stránku v hierarchii.


Přestavění hierarchie Když importujete místo, vytvoříte automaticky jeho hierarchickou strukturu. Tato počáteční struktura je založena jak na uspořádání existujících hypervazeb na stránkách místa tak na hierarchii podsložek kořenové složky. Obsahuje také čekající vazby i skutečné hypervazby; to znamená, že obsahuje záznam o každém vztahu rodič-potomek nebo sourozenec-sourozenec, který je potencionálně v hierarchii. Když ve vašem místě provedete změny mimo Adobe GoLive nebo pokud chcete založit jeho navigační strukturu na jiných principech, měli byste tuto hierarchii přestavět. Například, pokud vytvoříte ve svém místě všechny hypervazby, které jsou třeba, budete možná chtít z hierarchie odstranit čekající vazby. Nebo když hierarchie podsložek kořenové složky nemá žádnou souvislost s navigační logikou místa, budete možná chtít založit strukturu zcela na hypervazbách. Jak přestavět logickou strukturu místa:

1 Otevřete místo v jeho okně místa. 2 Klepněte na tlačítko Zobrazení navigace (

) v pruhu nástrojů nebo zvolte Design > Navigation View (Návrh > Zobrazení navigace). Informace o tomto zobrazení viz „O zobrazení navigace“ na straně 91. 3 Zvolte Design > Rebuild Hierarchy (Návrh > Přestavět hierarchii). 4 Vyberte volby podle potřeby: • Links (Vazby) extrapoluje hierarchii z uspořádání hypervazeb na stránkách místa. • Folder Hierarchy (Hierarchie složek) založí hierarchii na hierarchii podsložek kořenové složky.

Volbu Folder Hierarchy použijte, pokud skutečná hierarchie složek byla navržena tak, aby odpovídala hierarchii stránek místa. • Vypněte volbu Add Pending Links (Přidat čekající vazby), pokud jsou hypervazby místa funkční

a kompletní. Nechte tuto volbu vybranou, pokud budete hierarchii používat k tomu, aby vás vedla při přidávání hypervazeb do místa. Další informace viz „Přidání prázdných stránek a čekajících vazeb do hierarchie“ na straně 94. 5 Klepněte na OK.

Použití inspektorů pro soubory a složky Paleta File Inspector (Inspektor souboru) pro každý soubor má záložku File (Soubor) se základními informacemi o souboru a záložku Content (Obsah) s miniaturou souboru. Pro soubory HTML má File Inspector další záložky Page (Stránka) a Style (Styl). Pro soubory, které porušují pravidla pro název souboru, má další záložku Filename Constraints (Omezení názvu souboru). Folder Inspector (Inspektor složky) obsahuje základní informace o složce.


Palety File Inspector a Folder Inspector můžete použít také k přejmenování souborů a složek, ke změně jejich „publikačního“ stavu a ke změně jejich označení visačkami. V paletě File Inspector můžete také změnit titul stránky HTML nebo přidat, odstranit a změnit styly, spojené se souborem. Informace o publikačním stavu viz „Publikování webového místa“ na straně 415. O označování visačkami viz „Používání stavových visaček“ na straně 388. O stylech viz „Používání kaskádových stylů“ na straně 281. Jak zobrazit informace o souboru nebo složce:

1 Zobrazte paletu Inspector. 2 Proveďte jeden z následujících úkonů: • Klepněte na soubor v záložce Files (Soubory) nebo Extras (Dodatky) primárního okna místa nebo

v jednom ze zobrazení okna místa. • Klepněte na složku v záložce Files nebo Extras.

3 Pokud jste klepnuli na soubor, klepněte v paletě File Inspector na příslušný štítek File (Soubor), Page (Stránka), Content (Obsah) nebo Style (Styl).

O názvech souborů Adobe GoLive se dodává se souborem pravidel pro názvy souborů, které zajišťují kompatibilitu na různých platformách. Pokud název souboru poruší jedno z těchto pravidel, označí se tuto skutečnost v okně místa a v paletě File Inspector. Kromě toho se v paletě File Inspector uvede porušené pravidlo. Pravidla pro názvy souborů můžete prohlížet, upravovat, odstraňovat a přidávat. Další informace viz „Změny omezení pro názvy souborů“ na straně 385.

Pojmenování souborů a složek Když v Adobe GoLive vytvoříte nový prázdný soubor, automaticky se pojmenuje. Pokud víte, co bude obsahem souboru, budete jej pravděpodobně chtít přejmenovat. Když přejmenujete soubor, na který se odkazují jiné soubory, můžete současně aktualizovat nový název v ostatních souborech. Informace o aktualizaci celé adresy URL, na kterou je odkaz, viz „Úpravy vazeb a odkazů v rámci celého webového místa“ na straně 410. Jak soubor přejmenovat:

Zadejte nový název do záložky File v paletě File Inspector. Jak aktualizovat soubory, odkazující se na soubor, který přejmenujete:

1 Přejmenujte soubor. 2 Pokud některý soubor v seznamu aktualizovaných souborů nechcete aktualizovat, odznačte ho. 3 Klepněte na OK.


Jak zkontrolovat porušení omezení pro názvy souborů:

Proveďte jeden z následujících úkonů: • Zobrazte soubor v záložce Files (Soubory) primárního okna místa a zkontrolujte sloupec Filename

Constraint (Omezení názvu souboru). • Při kontrole souboru se podívejte na záložku Filename Constraint v paletě File Inspector. Pokud

záložka chybí, je název souboru v pořádku. • Vyhledejte skupinu Filename Warnings (Výstrahy pro název souboru) v záložce Errors (Chyby)

v okně místa. Pokud tam je, bude obsahovat seznam všech souborů s chybami v názvu. Jak přejmenovat složku:

Napište nový název do palety Folder Inspector (Inspektor složky).

Změna titulu stránek HTML Když vytvoříte novou prázdnou stránku (nový dokument), automaticky dostane titul – „Welcome to Adobe GoLive“, pokud jste nevytvořili uživatelský nový dokument s jiným titulem. Pokud víte, jaký obsah bude stránka mít, budete pravděpodobně chtít změnit její titul. V zobrazeních místa můžete stránky HTML zobrazit buď podle titulu nebo podle názvu souboru. Další informace viz „Změna způsobu zobrazení“ na straně 370. Informací o vytvoření nového uživatelského dokumentu viz „Nastavení předvoleb“ na straně 71. Jak změnit titul stránky HTML:

1 Klepněte na záložku Page (Stránka) v paletě File Inspector (Inspektor souboru). 2 Zadejte nový titul stránky. 3 Stiskněte Return (Mac OS) nebo Enter (Windows).

Otevírání souborů stránek Stránky HTML pro webové místo navrhujete a vyvíjíte v oknech dokumentů Adobe GoLive, a stránky otevíráte ze záložky File (Soubory) primárního okna místa nebo zobrazení místa. Najednou můžete mít otevřených několik oken dokumentu, a přitom také sledovat celkové zobrazení místa, obshující okno místa a zobrazení místa. Chcete-li získat informace o práci v oknech dokumentů, začněte s „Vytváření stránek“ na straně 105 a „Základy vytváření webových stránek“ na straně 123. Informace o otevírání jiných typů souborů viz „The File Mappings tab“ v nápovědě programu.


Jak otevřít soubor HTML v okně dokumentu:

Proveďte jeden z následujících úkonů: • Poklepejte na soubor v primárním okně místa nebo v jednom ze zobrazení místa. • Vyberte soubor v primárním okně místa a klepněte na tlačítko Otevřít (


• Vyberte soubor v primárním okně místa a zvolte Site > Explorer > Launch File (Místo > Průzkumník

> Spustit soubor) (Windows) nebo Site > Finder > Launch File (Místo > Finder > Spustit soubor) (Mac OS). Jak otevřít soubor HTML v okně dokumentu se zobrazením určité záložky:

1 Vyberte soubor v primárním okně místa nebo v jednom ze zobrazení místa. 2 Zobrazte jeho kontextovou nabídku. 3 Zvolte položku z podnabídky Open in Mode (Otevřít v režimu). V podnabídce jsou všechny záložky v okně dokumentu.

Odemknutí lokálně zamknutých souborů Lokálně zamknuté soubory jsou soubory zamknuté v Mac OS nebo které dostaly atribut Read Only (Pouze pro čtení) ve Windows. Tyto soubory můžete odemknout v Adobe GoLive nebo můžete přejít na plochu systému a odemknout je tam. Pokud importujete místo se zamknutými soubory, budete je muset odemknout dříve, než je začnete upravovat. Lokální zamknutí platí pouze pro platformu, kde je aplikované. Například, pokud vytvoříte místo v Mac OS a zamknete jeho soubory HTML, soubory nebudou zamknuté, když pošlete místo na server UNIX nebo Windows. Jak odemknout zamknuté soubory nebo soubory pouze pro čtení:

1 Vyberte soubor v primárním okně místa.

Poznámka: Tímto způsobem můžete uvolnit soubor pouze tehdy, je-li ve sloupci Locked (Zamknuto) v záložce Files zobrazený zámek ( ). Zámek označuje, že soubor byl zamknutý v Mac OS nebo byl vytvořený pouze pro čtení ve Windows. 2 Klepněte na tlačítko ( ) v pruhu nástrojů. (Tlačítko je označené Show Properties (Zobrazit vlastnosti) ve Windows a Show Information (Zobrazit informace) ve Finderu v Mac OS.). 3 Proveďte jeden z následujících úkonů: • Ve Windows odznačte Read-only (Pouze pro čtení) a klepněte na OK. • V Mac OS soubor odemkněte a zavřete okno Get Info (Informace).

4 Klepněte na tlačítko Update (Aktualizovat) (


3

105

Kapitola 3: Vytváření stránek dobe GoLive poskytuje několik možností vytvoření webových stránek před tím, než k nim přidáte obsah, jako je text a obrázky. Když stránku vytvoříte, můžete vybrat velikost okna dokumentu, vybrat barvy textu a barvu pozadí, použít obraz pozadí, určit okraje stránky, nastavit volby prohlížení, přidat informace pomocí tagů hlavičky a přidat skripty do sekce hlavičky, například skript přepnutí podle prohlížeče, který zobrazí alternativní stránku pro webové prohlížeče verze 3.0. Adobe GoLive usnadňuje nastavení těchto voleb pomocí okna dokumentu a různých palet.

A

Vytváření stránek Když spustíte Adobe GoLive, otevře program standardně novou webovou stránku. Novou stránku můžete také vytvořit pomocí nabídky File (Soubor). Po vytvoření nové stránky je důležité změnit titul stránky. Titul stránky se při zobrazení stránky objeví v titulním pruhu prohlížeče Webu. Používají jej rovněž vyhledávací nástroje Internetu k indexování stránky. Před vytvořením stránky byste si měli promyslet obsah a vzhled stránky. Pokud chcete na stránku přidávat obrazy nebo média, měli byste začít vytvořením webového místa v Adobe GoLive a přidat potřebné soubory do okna místa. Okno místa usnadňuje sledování prostředků bez ohledu na to, jak vaše místo narůstá. Informace o vytvoření místa v Adobe GoLive viz „Vytvoření nového webového místa“ na straně 81. Jak vytvořit novou stránku:

Zvolte File > New (Soubor > Nový). Jak změnit titul stránky:

Proveďte jeden z následujících úkonů: • Vyberte výchozí titul stránky Welcome to Adobe GoLive 5 vedle ikony stránka (

) v levém horním

rohu okna dokumentu a zadejte nový titul. • Zvolte Window > Inspector (Okno > Inspektor). Klepněte na ikonu stránky (

) v levém horním rohu okna dokumentu. V paletě Page Inspector klepněte na záložku Page (Stránka). Do pole Title (Titul) zadejte nový titul stránky. Pokud chcete, aby se na všech stránkách objevoval stejný titul, můžete vytvořit stránku s požadovaným titulem a nastavit ve všeobecných předvolbách, aby Adobe GoLive vytvářel nové dokumenty pomocí této stránky jako šablony.

106 KAPITOLA 3 Vytváření stránek

Jak nastavit všeobecné předvolby pro spouštění Adobe GoLive a otevírání oken nových dokumentů:

1 Zvolte Edit > Preferences (Úpravy > Předvolby). 2 Klepněte na ikonu General (Všeobecné) v levém panelu dialogového okna Preferences (Předvolby). 3 Chcete-li upravit chování Adobe GoLive při jeho spuštění, zvolte v pravém panelu dialogového okna Preferences z rozbalovací nabídky At Launch (Při spuštění) jednu z následujících voleb: • Create New Document (Vytvořit nový dokument), chcete-li, aby Adobe GoLive vytvořil a otevřel

nový dokument. • Show Open Dialog (Zobrazit dialog Otevřít), chcete-li, aby vám Adobe GoLive nabídl výběr

existujícího souboru. • Do Nothing (Nedělat nic), chcete-li, aby se Adobe GoLive spustil, bez vytvoření nového dokumentu

nebo výběru existujícího souboru. 4 Chcete-li zvolit standardní zobrazení oken dokumentu, které otevřete v Adobe GoLive, zvolte volbu z rozbalovací nabídky Default Section (Výchozí sekce) (Windows) nebo Default Mode (Výchozí režim) (Mac OS). Informace o různých zobrazeních dokumentu viz „Používání okna dokumentu“ na straně 62. 5 Chcete-li vybrat soubor, který se má použít jako šablona pro nové dokumenty, které vytváříte v Adobe GoLive, vyberte New Document (Nový dokument). Pak klepněte na tlačítko Select (Vybrat) a vyberte soubor, který chcete použít jako šablonu.

Pokud také zvolíte Create New Document z rozbalovací nabídky At Launch, vytvoří Adobe GoLive při spuštění aplikace nový dokument na základě vybraného souboru. 6 Chcete-li přidat ke každému souboru, který vytvoříte nebo uložíte, tag metainformace <meta name="generator" content="Adobe GoLive 5">, vyberte Write "Generator Adobe GoLive" (Zapsat "Generator Adobe GoLive"). 7 Klepněte na OK.

Ukládání stránek Pomocí dialogového okna Save (Uložit) můžete uložit svou webovou stránku přímo do složky, ve které jsou uloženy stránky a média pro vaše webové místo. Můžete také určit název souboru pro vaši stránku. Jak uložit stránku:

1 Zvolte File > Save (Soubor > Uložit). 2 Vyberte složku pro soubor.


Máte-li otevřené okno místa, objeví se v dialogovém okně Save (Uložit) rozbalovací nabídka. Tuto nabídku můžete použít k rychlému výběru kořenové složky, ve které jsou uloženy stránky a média pro webové místo nebo jedné z jejích podsložek.

3 Pojmenujte stránku s použitím příslušných konvencí pro názvy souborů. Zkontrolujte, že jste k názvu přidali příponu .htm nebo .html, která zajistí, že Adobe GoLive a webové prohlížeče rozeznají soubor jako webovou stránku. Další informace o konvencích pro názvy souborů viz „O názvech souborů“ na straně 99. 4 Klepněte na Save (Uložit).

Výběr velikosti okna Když máte otevřenou webovou stránku, můžete vybrat velikost okna dokumentu. Velikost okna platí pouze v Adobe GoLive, ne ve webových prohlížečích. Může vám ale pomoci při omezení návrhu stránky tak, aby se vešla do požadovaného rozměru okna. Přestože mnoho monitorů má viditelnou plochu zobrazení větší než 640 obrazových bodů, budete možná chtít nastavit velikost okna na 580 obrazových bodů nebo méně, abyste se přizpůsobili uživatelům s 14 palcovými monitory nebo uživatelům, kteří nemají rádi, když jim prohlížeč zaplní celou obrazovku. Jak vybrat velikost okna dokumentu:

1 Zvolte velikost z rozbalovací nabídky v pravém dolním rohu okna dokumentu.

2 Chcete-li, aby tato velikost byla výchozí velikostí oken dokumentu, zvolte Window Settings (Nastavení okna) z rozbalovací nabídky. Vyberte HTML Windows (Okna HTML). (Máte-li otevřeno okno místa, můžete také vybrat Site Windows (Okna místa), chcete-li nastavit, aby standardní velikost pro okna místa byla stejná jako velikost otevřeného okna místa.) Klepněte na OK.


Výběr barev textu a pozadí Můžete vybrat barvy pro text, který se objeví na webové stránce, včetně základního textu a vazeb. Můžete také vybrat barvu pozadí, aby vaši stránku vizuálně vylepšila. Vybrané barvy nahradí standardní barvy, používané většinou webových prohlížečů. Jako alternativu k výběru barvy pozadí budete možná chtít použít obraz pozadí. Další informace o obrazech pozadí viz „Použití obrazů pozadí“ na straně 109. Jak vybrat barvu textu nebo pozadí:

1 Zvolte Window > Inspector (Okno > Inspektor). 2 Klepněte na ikonu stránky (

) v levém horním rohu okna dokumentu.

3 V paletě Page Inspector (Inspektor stránky) klepněte na záložku Page (Stránka) a vyberte jednu z následujících voleb: • Text, chcete-li vybrat barvu pro základní text. • Link (Vazba), chcete-li vybrat barvu pro text standardní vazby. • Active Link (Aktivní vazba), chcete-li vybrat barvu pro aktivní vazby. Vybraná barva se přechodně

objeví, když uživatel na vazbu klepne. • Visited Link (Navštívená vazba), chcete-li vybrat barvu pro navštívené vazby. • Background Color (Barva pozadí), chcete-li vybrat barvu pozadí.

4 Klepněte uvnitř požadovaného pole barvy v paletě Page Inspector, abyste jej vybrali. 5 Vyberte barvu v paletě Color (Barvy). Pokyny o používání palety Color viz „Práce s barvami“ na

straně 142. Adobe GoLive automaticky aplikuje barvu do pole barvy v paletě Page Inspector a použije tuto barvu pro text nebo pozadí stránky.

A

B

A. Klepnutím uvnitř pole barvy jej vyberte. B. Vyberte barvu v paletě Color.


Použití obrazů pozadí Svou webovou stránku můžete vizuálně vylepšit tím, že v ní použijete obraz pozadí. Při volbě obrazu pozadí si uvědomte, že Adobe GoLive a webové prohlížeče zpracovávají obraz jako dlaždici, jejímž opakováním stránku pokryjí. Jak použít obraz pozadí:



3 V paletě Page Inspector klepněte na záložku Page (Stránka). 4 V sekci Background (Pozadí) vyberte Image (Obraz). Pak vyberte soubor obrazu tlačítkem Namířit a vybrat ( ) nebo tlačítkem Browse (Procházet).

Určení okrajů stránky Obsah webové stránky můžete posunout určením okraje stránky. Pomocí palety Page Inspector můžete určit šířku okraje (mezery mezi obsahem stránky a levým okrajem okna prohlížeče) a výšku okraje (mezery mezi obsahem stránky a horním okrajem okna prohlížeče). Adobe GoLive automaticky přidá do zdrojového kódu stránky atributy, které jsou nutné k tomu, aby se okraje objevily jak v Netscape Navigatoru tak i v Microsoft Internet Exploreru. Jak určit okraje stránky:



3 V paletě Page Inspector klepněte na záložku Page (Stránka). 4 Do polí Margin Width (Šířka okraje) a Margin Height (Výška okraje) zadejte hodnoty v obrazových bodech. (Pokud nezadáte hodnoty, použije prohlížeč automaticky šířku i výšku 8 obrazových bodů.)

Výběr voleb zobrazení Volby zobrazení webové stránky můžete vybrat pomocí palety View Controller (Správce zobrazení) a předvoleb General User Interface (Obecné uživatelské rozhraní). Volby, které vyberete v paletě View Controller, se aplikují pouze na otevřenou stránku. Předvolby General User Interface se použijí pro každou stránku, kterou otevřete, dokud je nezměníte. Jak vybrat volby zobrazení pomocí palety View Controller:

1 Zvolte Window > View Controller (Okna > Správce zobrazení).


2 Vyberte Invisible Items (Neviditelné položky), chcete-li zobrazit přerušené vazby, ikony označující poznámky nebo formuláře a další neviditelné položky. (Výběr této volby je ekvivalentní volbě Edit > Show Invisible Items (Úpravy > Zobrazit neviditelné položky).) 3 Vyberte Link Warnings (Výstrahy pro vazby), chcete-li zvýraznit text nebo orámovat obrazy, obsahující přerušené vazby. (Výběr této volby je ekvivalentní klepnutí na tlačítko výstrahy vazeb ( ) v pruhu nástrojů nebo volbě Edit > Show Link Warnings (Úpravy > Zobrazit výstrahy pro vazby).) 4 Vyberte Images (Obrazy), chcete-li v zobrazení Layout (Rozvržení) zobrazovat obrazy. 5 S vybranou volbou Images vyberte Low Source (Zdroj s nízkým rozlišením), chcete-li v zobrazení Layout zobrazovat obrazy s nízkým rozlišením. 6 S vybranou položkou Images vyberte Background (Pozadí), chcete-li v zobrazení Layout zobrazovat obrazy pozadí. 7 Zvolte volbu z rozbalovací nabídky Root CSS (Kořen CSS), aby se zobrazoval simulovaný náhled stránky ve webovém prohlížeči pro Windows nebo Mac OS. 8 Vyberte Allow Overlapping Paragraphs (Povolit překrývání odstavců), chcete-li zobrazit náhled toho, jak budou elementy se zápornými hodnotami okrajů přesahovat do sousedních elementů. Tato volba ovlivní pouze prvky na stránce, na které je aplikované formátování CSS. Výběr této volby umožňuje, aby Adobe GoLive poskytoval přesnější náhled stylů CSS. 9 Chcete-li určit, která písma se v Adobe GoLive zobrazí, zvolte z nabídky Fonts (Písma) jednu z následujících voleb (nebo kteroukoli jinou dostupnou volbu): • All (Všechna), chcete-li zobrazovat všechna písma. • Ignore Web Fonts (Ignorovat webová písma), chcete-li zobrazit všechna písma kromě standardních

webových písem. Tato volba je výhodná, protože vás upozorní na jakýkoli text, který je formátován s použitím nestandardních webových písem, nebo na písma, která uživatelé nemusejí mít na svých počítačích. Je-li třeba, můžete pak text přeformátovat s použitím standardních webových písem. • Times only (Pouze Times), chcete-li simulovat, jak se bude stránka zobrazovat, je-li k dispozici pouze

písmo Times. 10 Chcete-li zobrazit náhled vybraných barev pro vazby, zvolte některou volbu z nabídky Links (Vazby). Zvolte Normal (Normální), chcete-li zobrazit náhled vybraných barev pro standardní text vazeb. Zvolte Active (Aktivní), chcete-li zobrazit náhled vybraných barev pro přechodné zobrazení, když uživatel klepne na vazbu. 11 Zvolte volbu z nabídky Mark Style (Označit styl), chcete-li zvýraznit elementy na stránce, formátované s určitou třídou nebo identifikátorem. 12 Zvolte volbu z nabídky Mark Element (Označit element), chcete-li zvýraznit elementy na stránce, formátované určitým tagem. 13 Klepněte na tlačítko Hide (Skrýt), chcete-li odstranit zvýraznění elementů na stránce, formátované určitou třídou, identifikátorem nebo tagem.


Jak vybrat volby zobrazení pomocí předvoleb General User Interface (Obecné uživatelské rozhraní):

1 Zvolte Edit > Preferences (Úpravy > Předvolby). 2 Klepněte na symbol vedle General (Všeobecné), čímž rozbalíte seznam, a klepněte na User Interface

(Uživatelské rozhraní). 3 V Mac OS vyberte Appearance Theme Savvy a User Navigation Services (S podporou témat vzhledu a Uživatelské služby navigace), chcete-li použít tyto funkce zobrazení Mac OS 8.5 a novějších. Výběrem Appearance Theme Savvy umožníte Adobe GoLive podporovat Appearance Manager (Správce vzhledu). Výběrem Navigation Services povolíte používání navigačních služeb v dialogových oknech Open (Otevřít) a Save (Uložit). Další informace o těchto funkcích viz dokumentace Mac OS. 4 Vyberte Launch Other Programs to Edit Media Files (Spustit jiné programy k úpravě souborů médií), chcete-li spustit zvolenou aplikaci pro úpravy při poklepání na objekt na stránce, který je svázaný se souborem média, nebo při poklepání na soubor média v záložce Files (Soubory) v okně místa. 5 Vyberte Direct Input for Textfields (Přímý vstup pro textová pole), chcete-li aby Adobe GoLive použil hodnotu, kterou zadáte do textového pole, jakmile textové pole přestane být aktivní pro vstup (například když klepnete mimo textové pole). Vypněte tuto volbu, chcete-li aby Adobe GoLive zobrazoval tlačítko Enter ( ) za každým textovým polem. Když se zobrazí tlačítko Enter, musíte na něj klepnout nebo stisknout klávesu Enter na klávesnici, aby se hodnota v textovém poli použila. 6 Chcete-li vybrat uživatelskou barvu, která se použije pro zvýraznění elementů na stránce, formátovaných určitou třídou, identifikátorem nebo tagem, klepněte na pole barvy Styles (Styly). V dialogovém okně Color (Barva) vyberte barvu a klepněte na OK.

Pomocí palety View Controller (Správce zobrazení) můžete zvýraznit elementy na stránce, formátované určitou třídou, identifikátorem nebo tagem tím, že vyberete volbu z nabídky Mark Style (Označit styl) nebo Mark Element (Označit element) 7 Chcete-li vybrat uživatelskou barvu, která se použije pro zobrazení přerušených vazeb, klepněte na pole barvy Link Warnings (Výstrahy pro vazby). V dialogovém okně Color (Barva) vyberte barvu a klepněte na OK.

Chcete-li zobrazit přerušené vazby, můžete provést jeden z následujících úkonů: vyberte Link Warnings v paletě View Controller (Správce zobrazení), klepněte na tlačítko Link Warnings ( ) v pruhu nástrojů nebo zvolte Edit > Show Link Warnings. 8 Zvolte volbu z nabídky Frame Border (Okraj rámce), chcete-li vybrat tloušťku okraje, která se použije při zobrazení přerušených vazeb nebo při zvýraznění elementů na stránce, formátovaných určitou třídou, identifikátorem nebo tagem. 9 Zvolte volby zobrazení táhel pro změny velikosti, která se objevují na vybraných objektech: • Chcete-li vybrat uživatelskou barvu pro táhla, klepněte na barevné pole. V dialogovém okně Color

(Barva) vyberte barvu a klepněte na OK. • Chcete-li vybrat velikost táhel pro změnu velikosti, zvolte volbu z nabídky.

10 Klepněte na OK.


Používání pravítek Můžete zobrazit vodorovná a svislá pravítka, která pomáhají přesně umísťovat objekty a měnit jejich velikost. Když umístíte objekt, označují bílé plochy na pravítkách platnou polohu a velikost vybraného objektu. Když pohnete ukazatelem v okně dokumentu, posunou se čáry v pravítkách tak, aby označovaly aktuální polohu ukazatele. Jak zapnout a vypnout pravítka:

Klepněte na ikonu pravítek (

) nad svislým posuvníkem v okně dokumentu.

B

A

A. Bílá oblast na obou pravítkách označuje polohu a velikost vybraného objektu. B. Klepnutím na ikonu pravítek pravítka zapnete a vypnete.

Přidávání tagů hlavičky Stránka HTML se skládá ze dvou hlavních částí: hlavičky a těla. Zobrazení Layout (Rozvržení) Adobe GoLive odráží tuto strukturu tím, že má panel pro hlavičku jako součást okna dokumentu. Panel hlavičky můžete použít k uložení informací o webové stránce, včetně titulu a klíčových slov stránky. Panel hlavičky každé stránky již obsahuje tag Title (Titul), který můžete upravit přímo úpravou titulu stránky v levém horním rohu okna dokumentu. V Adobe GoLive se ke stránce snadno přidávají další tagy hlavičky pomocí záložky Head (Hlavička) v paletě Objects (Objekty). Jak přidat tag hlavičky:

1 Klepnutím na trojúhelník ( ) vedle ikony stránky ( otevřete panel hlavičky.

A B

A. Zavřený panel sekce hlavičky B. Otevřený panel sekce hlavičky

) v levém horním rohu okna dokumentu


2 Zvolte Window > Objects (Okno > Objekty). 3 V paletě Objects klepněte na záložku Head (Hlavička) (

).

4 Přetáhněte požadovanou ikonu z palety Objects do panelu sekce hlavičky.

Je-li panel hlavičky zavřený, můžete přetáhnout ikonu přímo na trojúhelník. Když se panel hlavičky otevře, přetáhněte ikonu do něj.

Přidávání tagů Base (Základ) Tag Base můžete použít k určení původního umístění své webové stránky, zvaného také základní adresa URL. Základní adresu URL používají webové prohlížeče k nalezení relativních vazeb na stránce. V případě, že se vaše stránka přesune ze svého původního umístění jinam, může prohlížeč pomocí základní adresy URL správně zjistit polohu relativních vazeb stránky. Poznámka: Nedoporučujeme používání tagu Base, protože je zastaralý. Jak přidat tag Base:

1 Přetáhněte ikonu Base ze záložky Head v paletě Objects do panelu sekce hlavičky v okně dokumentu. 2 Zvolte Window > Inspector (Okno > Inspektor). 3 V paletě Base Inspector (Inspektor základu) vyberte Base. Pak pomocí tlačítka Namířit a vybrat ( nebo tlačítka Browse (Procházet) vyberte soubor, který se použije jako základní adresa URL.

)

4 Vyberte Write Base Always Absolute (Zapsat základ vždy jako absolutní), abyste zajistili, že všechny odkazy se zapíší zpět od kořene místa. 5 Chcete-li vybrat cílový rámec v sadě rámců, zvolte hodnotu z rozbalovací nabídky Target (Cíl).

Přidání tagů Comment (Poznámka) Tag Comment (Poznámka) můžete použít, chcete-li ke své webové stránce přidat skryté poznámky, jako jsou například publikační informace pro budoucí potřebu. Abyste mohli poznámky zobrazit, musíte použít Adobe GoLive nebo jiný editor webových stránek. Jak přidat tag Comment (Poznámka):

1 Přetáhněte ikonu Comment ze záložky Head (Hlavička) v paletě Objects do panelu sekce hlavičky v okně dokumentu.


2 Zvolte Window > Inspector (Okno > Inspektor). 3 V paletě Comment Inspector (Inspektor poznámky) klepněte uvnitř rolovacího textového pole a zadejte své poznámky.

Přidání tagů IsIndex Tag IsIndex můžete použít jako informaci pro webové prohlížeče, že pro webovou stránku může použít hledání klíčových slov, a také jako příkaz pro prohlížeče, aby při zobrazení stránky zobrazily textové pole pro vyhledávání klíčových slov. Poznámka: Nedoporučujeme používání tagu IsIndex, protože je zastaralý. Jak přidat tag IsIndex:

1 Přetáhněte ikonu IsIndex ze záložky Head palety Objects do panelu hlavičky v okně dokumentu. 2 Zvolte Window > Inspector (Okno > Inspektor). 3 V paletě IsIndex Inspector (Inspektor IsIndex) zadejte do pole Prompt (Výzva) řetězec, který chcete, aby prohlížeče zobrazily s textovým polem pro vyhledávání.

Přidání tagů Keywords (Klíčová slova) Tag Keywords můžete použít k určení klíčových slov pro webovou stránku. Internetové vyhledávací nástroje používají informace v tagu Keywords při konstrukci svých indexů. Jak přidat tag Keywords:

1 Přetáhněte ikonu Keywords ze záložky Head palety Objects do panelu hlavičky v okně dokumentu. 2 Zvolte Window > Inspector (Okno > Inspektor) a v paletě Keywords Inspector (Inspektor klíčových slov) zvolte jednu z následujících voleb: • Chcete-li přidat klíčové slovo, zadejte klíčové slovo do textového pole pod rolovacím textovým polem.

Pak klepněte na Add (Přidat) nebo stiskněte Enter. • Chcete-li upravit klíčové slovo, vyberte existující klíčové slovo v rolovacím textovém poli, upravte

klíčové slovo v textovém poli pod rolovacím textovým polem a klepnutím na Update (Aktualizovat) své úpravy aplikujte. • Chcete-li klíčové slovo odstranit, vyberte existující klíčové slovo v rolovacím textovém poli a klepněte

na Delete (Odstranit). • Chcete-li změnit pořadí klíčových slov, vyberte existující klíčové slovo v rolovacím textovém poli.

Chcete-li posunout slovo v seznamu klíčových slov nahoru, klepněte na šipku nahoru. Chcete-li posunout slovo v seznamu klíčových slov dolů, klepněte na šipku dolů. 3 Vyberte v dokumentu slovo, které chcete použít jako klíčové slovo. Zvolte Special > Add Keywords (Speciální > Přidat klíčová slova). Tento příkaz umožňuje přidat klíčové slovo do prvního tagu Keywords v panelu hlavičky v okně dokumentu.


Přidání tagů Link (Vazba) Tag Link můžete použít k definování vztahů mezi současnou webovou stránkou a dalšími stránkami ve vašem webovém místě nebo na Internetu. Informace v tomto tagu můžete použít k sledování vazeb mezi stránkami ve velkém místě. Poznámka: Pokud spravujete stránky ve webovém místě pomocí okna webového místa v Adobe GoLive, nemusíte tag Link používat. Jak přidat tag Link:

1 Přetáhněte ikonu Link ze záložky Head palety Objects do panelu hlavičky v okně dokumentu. 2 Zvolte Window > Inspector (Okno > Inspektor). 3 V paletě Link Inspector (Inspektor vazby) vyberte stránku, na kterou jsou odkazy z aktuální stránky, pomocí tlačítka Namířit a vybrat ( ) nebo tlačítka Browse (Procházet). 4 Do pole Title (Titul) zadejte titul stránky, na kterou odkaz vede. 5 Do pole Name (Název) zadejte název vazby nebo kotvy pro stránku, na kterou odkaz vede. 6 Do pole URN napište číslo URN (Uniform Resource Number) stránky, na kterou odkaz vede.

Poznámka: Většina webových prohlížečů URN nepoužívá ani nepodporuje. 7 Do pole Methods (Metody) zadejte seznam metod HTTP podporovaných stránkou, na kterou odkaz vede.

Poznámka: Většina webových prohlížečů atribut Methods nepoužívá ani nepodporuje. 8 Do pole REL zadejte popis vztahu mezi současnou stránkou a zdrojovou nebo cílovou adresou URL. Pokud například současná stránka má odkaz na domovskou stránku, zadejte „follows“ (následuje). 9 Do pole REV zadejte popis vztahu mezi zdrojovou nebo cílovou adresou URL a současnou stránkou. Pokud je například na současné stránce odkaz na domovskou stránku je, zadejte „precedes“ (předchází).


Přidání tagů Meta Tag Meta můžete použít k vložení informací o webové stránce, jako je například popis obsahu stránky, do její sekce hlavičky. Do každé stránky Adobe GoLive automaticky vkládá pomocí tagů Meta následující informace: formát souboru (například text/HTML), použitá znaková sada (například ISO8859-1) a tvůrce souboru (například Adobe GoLive). Jak přidat tag Meta:

1 Přetáhněte ikonu Meta ze záložky Head palety Objects do panelu hlavičky v okně dokumentu. 2 Zvolte Window > Inspector (Okno > Inspektor). 3 Z rozbalovací nabídky v paletě Meta Inspector zvolte jednu z následujících voleb: • HTTP-Equivalent (Ekvivalent HTTP), chcete-li simulovat informace hlavičky, které doprovází

stránku, když ji do prohlížeče posílá server HTTP. • Name (Název), chcete-li definovat tag Meta, který není HTTP.

4 Do textového pole pod rozbalovací nabídkou zadejte titul Meta tagu, například „description“ (popis). 5 Do rolovacího textového pole Content (Obsah) zadejte obsah tagu, například popis obsahu stránky.

Přidání tagů Refresh (Obnovení) Tag Refresh můžete použít jako pokyn pro prohlížeč webu, aby po určené době obnovil obsah webové stránky nebo ji nahradil jinou stránkou. Tento tag budete možná chtít použít, pokud stránka obsahuje živý materiál nebo pokud je to součást prezentace, kterou předvádíte divákům. Prezentaci snímků můžete snadno vytvořit tak, že přidáte tag Refresh ke každé stránce, která je součástí prezentace. Můžete například k první stránce prezentace přidat Tag Refresh, který nahradí první stránku druhou stránkou a tak dále. Jak přidat tag Refresh:

1 Přetáhněte ikonu Refresh ze záložky Head v paletě Objects do panelu sekce hlavičky v okně

dokumentu. 2 Zvolte Window > Inspector (Okno > Inspektor). 3 V paletě Refresh Inspector (Inspektor obnovení) zadejte do pole Delay (Zpoždění) hodnotu v sekundách, kterou určíte interval před tím, než se stránka obnoví nebo nahradí jinou stránkou. 4 Proveďte jeden z následujících úkonů: • Vyberte Target This Document (Cílem je tento dokument), chcete-li obnovit současnou stránku. • Vyberte Target URL (Cílem je URL), chcete-li nahradit stránku jinou stránkou. Pak vyberte

nahrazující stránku pomocí tlačítka Namířit a vybrat (

) nebo tlačítka Browse (Procházet).


Přidání počátečních a koncových tagů pro neznámé elementy Do hlavičky své webové stránky můžete přidat počáteční a koncové tagy pro neznámé elementy, abyste zajistili kompatibilitu s budoucími verzemi HTML a prohlížeči Webu, které tyto verze podporují. Jak přidat počáteční a koncový tag pro neznámý element:

1 Přetáhněte ikonu Tag ze záložky Head palety Objects do panelu hlavičky v okně dokumentu. 2 Zvolte Window > Inspector (Okno > Inspektor). 3 V paletě Tag Inspector (Inspektor tagu) klepněte na záložku Tag. 4 Do pole Tagname (Název tagu) zadejte název nového tagu. 5 Klepnutím na New (Nový) přidejte nový atribut. 6 Zadejte název nového atributu do levého textového pole pod rolovacím seznamem. 7 Zadejte hodnotu nového atributu do pravého textového pole pod rolovacím seznamem. 8 Chcete-li atribut odstranit, vyberte požadovaný atribut v rolovacím seznamu a klepněte na Delete (Odstranit).

Přidání skriptů hlavičky Tag Script (Skript) můžete použít k přidání JavaScriptu do hlavičky webové stránky. Skript v hlavičce se provádí, zatímco viditelné tělo stránky se ještě načítá. Informace o JavaScriptu a editoru JavaScriptu viz „Používání JavaScriptu“ na straně 245. Jak přidat skript hlavičky:

1 Klepnutím na trojúhelník ( ) vedle ikony stránky ( otevřete panel sekce hlavičky v okně dokumentu.


2 Zvolte Window > Objects (Okno > Objekty). 3 V paletě Objects klepněte na záložku Head (Hlavička) (

).

4 Přetáhněte ikonu Script z palety Objects do panelu sekce hlavičky v okně dokumentu. 5 Zvolte Window > Inspector (Okno > Inspektor). 6 V paletě Head Script Inspector (Inspektor skriptu hlavičky) zadejte název skriptu do pole Name (Název).


7 Z rozbalovací nabídky Language (Jazyk) vyberte prohlížeč. V textovém poli pod rozbalovací nabídkou se objeví dialekt JavaScriptu pro prohlížeč.

Vyberte z rozbalovací nabídky Language.

8 Vyberte Source (Zdroj). Pak vyberte soubor skriptu pomocí tlačítka Namířit a vybrat ( tlačítka Browse (Procházet).

) nebo

9 Klepnutím na Edit (Úpravy) otevřete editor JavaScriptu a upravte soubor skriptu.

Přidání přepínacích skriptů pro prohlížeče Do sekce hlavičky webové stránky můžete přidat přepínací skript pro prohlížeče, který zjistí webový prohlížeč načítající stránku a automaticky přesměruje uživatele na alternativní stránku podle jeho prohlížeče. Tuto funkci můžete například použít, aby se prohlížeče verze 3.0 přepnuly na jinou stránku, pokud současná stránka obsahuje funkce (jako jsou akce, animace a kaskádové styly), které umí interpretovat pouze prohlížeče verze 4.0 a vyšší. Poznámka: Prohlížeče verze 2.0 a Microsoft Internet Explorer 3.01 pro Mac OS přepínací skript pro prohlížeče ignorují. Jak přidat přepínací skript pro prohlížeče:

1 Klepnutím na trojúhelník ( ) vedle ikony stránky (


otevřete panel sekce hlavičky v okně dokumentu. 2 Zvolte Window > Objects (Okno > Objekty). 3 V paletě Objects klepněte na záložku Smart (Automatické) (

).

4 Přetáhněte ikonu Browser Switch (Přepínač prohlížeče) z palety Objects do panelu sekce hlavičky.


5 Zvolte Window > Inspector (Okno > Inspektor). 6 V paletě Browser Switch Inspector (Inspektor přepínače prohlížeče) vyberte prohlížeče, které podporují funkce ve stránce: • Vyberte Auto (Automaticky), chcete-li aby kompatibilitu prohlížeče určil program Adobe GoLive.

Pokud například stránka obsahuje funkce, které mohou interpretovat pouze prohlížeče verze 4.0 a vyšší, nastaví Adobe GoLive skript tak, aby přesměroval požadavky z prohlížečů verze 3.0. • Pokud jsou ve Windows i v Mac OS podporované stejné prohlížeče, vypněte volbu Auto, zvolte All

(Všechny) z nabídky Platform (Platforma) a vyberte podporované prohlížeče. • Pokud jsou ve Windows a v Mac OS podporované různé prohlížeče, zvolte Windows z nabídky

Platform a vyberte podporované prohlížeče pro Windows. Pak z nabídky Platform zvolte Mac OS a vyberte podporované prohlížeče pro Mac OS. Poznámka: V paletě Browser Switch Inspector můžete vybrat pro Netscape nebo Explorer symbol nekonečno, který označuje, že podporované verze prohlížeče jsou vyšší než verze 5.0. 7 Pomocí tlačítka Namířit a vybrat (

) nebo tlačítka Browse (Procházet) vyberte alternativní stránku.

V alternativní stránce zkontrolujte, že jste do ní zahrnuli zprávu o nekompatibilitě prohlížeče, například „Chcete-li zobrazit původní stránku, stáhněte si prosím novější prohlížeč“. 8 Když skončíte, zkuste si prohlédnout svou stránku nekompatibilním prohlížečem a zkontrolujte, zda se požadavek správně přesměroval.

4

123

Kapitola 4: Základy vytváření webových stránek řidávání obsahu do webových stránek usnadňují výkonné nástroje v Adobe GoLive. Můžete zvolit jeden z mnoha nástrojů pro rozvržení stránky, které umožňují přesně umístit text a objekty na stránku, včetně jedinečné mřížky rozvržení, tabulek a plovoucích rámečků. Když máte text a objekty na stránce, můžete text formátovat a kontrolovat pravopis, měnit velikost a vzájemné uspořádání objektů, vybarvit text a objekty s použitím plného rozsahu bezpečných webových barev a vytvářet hypertextové vazby na jiné stránky ve vašem webovém místě nebo na Internetu. Paleta historie vám umožní vrátit se zpět k nedávným stavům návrhu stránky, takže změny můžete bezpečně a rychle vzít zpět. Několik různých zobrazení v okně dokumentu umožňují bezproblémově přecházet z práce na rozvržení stránky k náhledu stránky.

P

O návrhu stránek Adobe GoLive má řadu základních nástrojů pro uspořádání webových stránek, včetně prázdné stránky, mřížky rozvržení s textovými rámečky, tabulek a plovoucích rámečků. Důležité je vybrat nástroj, který chcete použít dříve, než začnete stránku navrhovat. Na prázdnou stránku můžete přímo přidávat text i objekty a pak upravovat jejich umístění pomocí voleb zarovnání. Použijete-li k vytvoření stránky mřížku rozvržení a textové rámečky, můžete text i objekty umísťovat s přesností 1 obrazového bodu. Pomocí tabulek lze ovlivňovat, jak se na stránce bude zalamovat text, nebo prezentovat data z tabulkového procesoru, nebo jiné údaje v řádcích a sloupcích. Plovoucí rámečky umožňují překrývání objektů na stránce ve vrstvách a vytváření animací s pomoci editoru s časovou osou Adobe GoLive Timeline Editor. Adobe GoLive obsahuje také vyspělé nástroje pro vytváření stránek, včetně rámců, předloh a komponent. Rámce umožňují rozdělit stránku na více panelů (rámců) a v každém panelu zobrazit jiný dokument. S použitím předlohy můžete navrhnout stránku, uložit ji jako předlohu a vytvořit novou plně upravitelnou stránku založenou na předloze. Komponenty umožňují vytvořit na stránce nějaký prvek, který se na webových stránkách často používá, jako například navigační pruh, uložit ho jako komponentu a pak tento prvek rychle přidávat na stránky. Pokud chcete aktualizovat všechny výskyty komponenty, stačí pak upravit jen jeden zdrojový soubor. Informace o používání rámců viz „Používání rámců“ na straně 231. Informace o používání předloh viz „Používání předloh“ na straně 237. Informace o používání komponent viz „Používání komponent GoLive“ na straně 238.

Vytváření textu Práce s textem v Adobe GoLive může být podobná jako práce s textem v nejrozšířenějších textových editorech. Můžete přímo psát do okna dokumentu, zkopírovat text v jiné aplikaci a vložit ho do dokumentu v Adobe GoLive, importovat text z jiné aplikace do tabulky a využívat tradiční formátování, kontrolu pravopisu a vyhledávací nástroje.

124 KAPITOLA 4 Základy vytváření webových stránek

Text můžete na stránku přidat i pomocí textových rámečků v mřížce rozvržení a pomocí plovoucích rámečků. Pomocí textových rámečků můžete text jednoduše uspořádat na stránce přesunutím nebo zarovnáním rámečků. Plovoucí rámeček s textem můžete překrýt přes další text nebo objekty na stránce a vytvořit animaci textu. Další informace o používání textových rámečků viz „Používání textových rámečků“ na straně 136. Další informace o používání plovoucích rámečků viz „Vytvoření plovoucích rámečků“ na straně 212. Jak přidat text přímo na stránku, do textového rámečku, buňky tabulky nebo do plovoucího rámečku:

Proveďte jeden z následujících úkonů: • Klepněte uvnitř okna dokumentu, textového rámečku, buňky tabulky nebo plovoucího rámečku,

abyste tam umístili kurzor. Pak zapište požadovaný text. • Vyberte text v libovolné aplikaci a zkopírujte ho. Pak ho vložte do okna dokumentu Adobe GoLive,

textového rámečku, buňky tabulky nebo do plovoucího rámečku.

Formátování textu pomocí fyzických a strukturálních stylů Adobe GoLive poskytuje řadu možností formátování textu, včetně použití fyzických a strukturálních stylů. Pomocí fyzických stylů můžete zvýraznit text formátováním na tučný řez, kurzívu, neproporcionální písmo nebo jiný běžný styl znaků. Pomocí strukturálních stylů je možné text klasifikovat jako citaci, proměnnou, vstup z klávesnice nebo jiný typ. Text, na který je aplikován strukturální styl je formátován s využitím konvencí kaskádových stylů nebo webového prohlížeče. Jak aplikovat fyzický styl:

1 Tažením vyberte text, který chcete formátovat. 2 Proveďte jeden z následujících úkonů: • Zvolte styl z nabídky Type > Style (Text > Styl). Zvolte Plain Text (Normální text), čímž z vybraného

textu odstraníte všechny fyzické styly. Zvolte Blink (Blikat), aby vybraný text blikal. Pro náhled textu formátovaného s blikajícím stylem je nutné použít Netscape Navigator. • Klepnutím na tlačítko Bold (Tučné) (

(

), Italic (Kurzíva) ( ) v pruhu nástrojů aplikujte daný styl na vybraný text.

) nebo Teletype (Neproporcionální)

Poznámka: Starší prohlížeče nemusí podporovat jiné fyzické styly než základní sadu, jako je normální písmo, tučný řez a kurzíva. Jak aplikovat strukturální styl:

1 Tažením vyberte text, který chcete formátovat. 2 Zvolte styl z nabídky Type > Structure (Text > Struktura): • Plain Structure (Normální struktura) odstraní z vybraného textu všechny strukturální styly. • Emphasis (Zvýraznění) změní vybraný text na kurzívu.


• Strong (Zdůraznění) změní vybraný text na tučný řez. • Quotation (Citace) označí vybraný text jako obsah, převzatý z jiného zdroje. Většina prohlížečů

zobrazuje citáty menším písmem a kurzívou. • Sample (Vzorek) označí vybraný text jako obsah, převzatý z jiného zdroje, použitý jako vzorek

k demonstrování určitých vlastností. Většina prohlížečů zobrazuje vzorky neproporcionálním písmem. • Definition (Definice) označí vybraný text jako definici. Většina prohlížečů zobrazuje definice jako

obyčejný text. • Variable (Proměnná) označí vybraný text jako název proměnné v rámci bloku kódu počítačového

programu. Většina prohlížečů zobrazuje proměnné pomocí kurzívy. • Code (Kód) označí vybraný text jako kód počítačového programu. Většina prohlížečů zobrazí kód

neproporcionálním písmem. • Keybord (Z klávesnice) označí vybraný text jako text, který má být zadán z klávesnice. Většina

prohlížečů zobrazí text z klávesnice neproporcionálním písmem.

Formátování odstavců Adobe GoLive poskytuje řadu možností pro formátování odstavců. Pomocí stylů odstavců můžete rychle formátovat odstavce jako nadpisy a podnadpisy. Klepnutím na jedno z několika tlačítek v pruhu nástrojů můžete zarovnat odstavce, odsadit odstavce nebo vytvořit číslovaný nebo nečíslovaný seznam z řady odstavců. V odstavcích můžete též řídit tok textu potlačením zalamování textu, aby text zůstal na stejném řádku, nebo přidat ukončení řádku a tím určit obtékání textu kolem sousedního objektu. Jak aplikovat styl odstavce:

1 Klepněte kdekoli v odstavci, který chcete formátovat. 2 Zvolte formát z nabídky Type > Header (Text > Nadpis) nebo z rozbalovací nabídky Paragraph Format (Formát odstavce) v pruhu nástrojů: • Header 1 až Header 6 (Nadpis 1 až Nadpis 6) aplikuje na odstavec jednu z šesti hierarchických úrovní

nadpisu. • Address (Adresa) aplikuje na odstavec výchozí styl HTML pro autorovu e-mailovou adresu. • Preformatted (Předformátovaný) aplikuje na odstavec výchozí styl HTML pro kód. • None (Žádný) obnoví odstavec do výchozího formátu, vybraného v předvolbách prohlížeče. Jak odstavec zarovnat nebo odsadit:

1 Klepněte kdekoli v odstavci, který chcete zarovnat nebo odsadit.


2 Proveďte jeden z následujících úkonů: • Zvolte typ zarovnání z nabídky Type > Alignment (Text > Zarovnání). Zvolte Default Alignment

(Výchozí zarovnání), chcete-li odstranit veškeré stávající zarovnání odstavce. Zvolte Increase block indent (Zvětšit odsazení bloku) nebo Decrease block indent (Zmenšit odsazení bloku), chcete-li po krocích zvětšit nebo zmenšit mezeru mezi odstavcem a pravým nebo levým okrajem. • Klepnutím na tlačítka Align Left (Zarovnat doleva) (

nebo Align Right (Zarovnat doprava) (

), Align Center (Zarovnat na střed) ( ) ) v pruhu nástrojů aplikujte na odstavec příslušné zarovnání.

Neodsazený odstavec

Odstavec odsazený jako blok Jak formátovat nehierarchický seznam:

1 Tažením vyberte více odstavců, které chcete formátovat jako nehierarchický seznam. 2 Zvolte typ seznamu z nabídky Type > List (Text > Seznam): • Default Numbered List (Výchozí číslovaný seznam) vytvoří seznam číslovaný arabskými číslicemi. • Default Unnumbered List (Výchozí nečíslovaný seznam) vytvoří seznam s typografickými tečkami. • Term (Termín) zarovná odstavce k levému okraji. • Definition (Definice) odstavce odsadí.

Můžete také klepnutím na tlačítko Číslovaný seznam ( ) nebo Nečíslovaný seznam ( nástrojů rychle vytvořit standardní číslovaný nebo nečíslovaný seznam.

A

B

C

D

Tlačítka v pruhu nástrojů: A. Číslovaný seznam B. Nečíslovaný seznam C. Zvýšit úroveň v seznamu D. Snížit úroveň v seznamu

) v pruhu


Jak formátovat položku v hierarchickém seznamu

1 Klepněte kdekoli v odstavci, který chcete formátovat jako část hierarchického seznamu. 2 Proveďte jeden z následujících úkonů: • Zvolte volbu úrovně v seznamu z nabídky Type > List (Text > Seznam). Volbu Increase List Level

(Zvýšit úroveň v seznamu) nebo Decrease List Level (Snížit úroveň v seznamu) použijte k posunutí odstavce o jednu úroveň níž nebo výš v hierarchii a přiřaďte odstavci jiný počáteční znak. Když zvolíte Decrease List Level u odstavce, který je na první úrovni v hierarchii, Adobe GoLive obnoví odstavec na normální styl. • Klepnutím na tlačítko Zvýšit úroveň v seznamu (

) nebo Snížit úroveň v seznamu ( nástrojů aplikujte požadovanou volbu úrovně odstavce v seznamu.

) v pruhu

Jak potlačit zalomení textu:

1 Vyberte slova v odstavci, která chcete zachovat na stejném řádku. 2 Zvolte Type > Nobreak (Text > Bez rozdělení). Jak vložit vynucené ukončení řádku:

1 Proveďte jeden z následujících úkonů: • Klepněte v odstavci na místo, kde chcete řádek zalomit, a stiskněte Shift+Enter. • Zvolte Window > Objects (Okno > Objekty). V paletě Objects klepněte na záložku Basic (Základní)

( ). Přetáhněte ikonu Line Break (Zalomení řádku) z palety Objects do místa v odstavci, kde chcete řádek zalomit. 2 Chcete-li nastavit zalamování textu kolem sousedního objektu, zvolte Window > Inspector (Okno > Inspektor). V paletě Line Break Inspector (Inspektor zalamování řádku) vyberte Clear (Odsunout) a zvolte volbu z rozbalovací nabídky: • All (Vše) přesune řádek po zalomení pod spodní okraj doprava nebo doleva zarovnaného objektu,

který zasahuje do původního řádku. • Left (Vlevo) nebo Right (Vpravo) přesune řádek po zalomení pod spodní okraj doleva nebo doprava

zarovnaného objektu. Poznámka: Plovoucí objekt musí být zarovnaný doleva nebo doprava, aby atribut Clear v toku textu HTML fungoval podle očekávání.


O velikostech písem na různých platformách Adobe GoLive umožňuje aplikovat na text na webových stránkách relativní velikost písma. Text formátovaný s relativní velikostí písma se zobrazí ve velikosti vztažené k velikosti nastavené v předvolbách prohlížeče. Většina uživatelů má své prohlížeče nastavené tak, aby zobrazovaly text velikosti 12 bodů. Aplikováním relativní velikosti písma můžete zajistit zobrazení textu ve velikosti, která je stejná, menší nebo větší než velikost, nastavená v předvolbách prohlížeče. Další informace o aplikování relativních velikostí písem viz „Aplikování relativních velikostí písem“ na straně 129. Kromě toho, že velikost písma je relativní vůči předvolbám prohlížeče, jsou písma ve Windows zhruba o jeden stupeň větší než v Mac OS kvůli rozdílu mezi rozlišením v obrazových bodech. Před publikováním stránky na Webu byste ji měli prohlédnout s různými velikostmi písma. Většina prohlížečů umožňuje snadno měnit velikost písma při prohlížení stránek. Abyste měli jistotu, že vaše stránky se mohou přizpůsobit celé řadě velikostí písem, měli byste se při návrhu svých stránek řídit následujícími pravidly: • Výchozí velikost písma pro zobrazování textu v Adobe GoLive nastavte na 10 bodů. To omezí

pravděpodobnost použití menší velikosti písma při prohlížení vašich stránek , než jakou jste použili pro vytvoření těchto stránek. Abyste nastavili výchozí velikost písma v Adobe GoLive, zvolte Edit > Preferences (Úpravy > Předvolby), klepněte na ikonu Encodings (Kódování) v levém panelu dialogového okna Preferences, klepnutím vyberte výchozí kódování, a klepněte na OK. Pak zvolte Edit > Preferences, klepněte na ikonu Fonts v levém panelu dialogového okna Preferences, klepněte na symbol vlevo od Western, aby se seznam rozbalil, vyberte Proportional Font under Western (Proporcionální písmo pro západní kódování), zvolte velikost z rozbalovací nabídky Size (Velikost), a klepněte na OK. • Nevytvářejte nadpisy formátováním textu pomocí stylu odstavce (jako je Header 1 nebo Header 2)

a relativní velikosti písma. Relativní velikost písma může způsobit zalomení nadpisu a tak nepříznivě ovlivnit rozvržení stránky. • Uvědomte si, že textový rámeček se nezmenší, když se text zobrazí s menší velikostí písma než jakou

jste použili při návrhu stránky. Výsledkem může být vznik nového prázdného prostoru mezi textem v rámečku a objekty pod rámečkem. • Uvědomte si, že textový rámeček zvětší svou velikost, aby se do něho vešel text, který se zobrazí s větší

velikostí písma než jakou jste použili při návrhu stránky. Když se rámeček zvětší, posunou se objekty pod rámečkem na stránce směrem dolů. • Abyste měli pod kontrolou velikost prostoru, který se objeví mezi textem a obrázkem, umístěte text

i obrázek dovnitř textového rámečku. (Abyste mohli ještě lépe ovlivnit umístění obrázku, můžete do rámečku přidat mřížku rozvržení a pak obrázek přidat do mřížky.) Když se text zobrazí menším nebo větším písmem než jaké jste použili při návrhu stránky, obrázek se podle změny velikosti textu posune nahoru nebo dolů. • Abyste mohli nastavit zarovnání textu a obrázků na stránce bez ohledu na velikost zobrazeného písma,

můžete použít tabulku. Umístěte text do jedné buňky tabulky a obrázek do druhé buňky. Tabulku můžete použít samostatně nebo na mřížce rozvržení.


• Při specifikování velikosti písma pro styl v seznamu kaskádových stylů použijte obrazové body, aby

prohlížeče ve Windows a Mac OS zobrazovaly velikost písma co nejshodněji. Pokud pro určení velikosti písma pro styl použijete záložku Fonts (Písma) v paletě CSS Selector Inspector, zvolte Pixel (Obrazové body) z rozbalovací nabídky Size (Velikost).

Aplikování relativních velikostí písem Na text na webové stránce můžete aplikovat relativní velikost písma, a tím nastavit velikost textu ve vztahu k velikosti nastavené v předvolbách webového prohlížeče. Další informace o relativních velikostech písma viz „O velikostech písem na různých platformách“ na straně 128. Jak na text aplikovat relativní velikost písma:

1 Tažením vyberte text, který chcete formátovat. 2 Vyberte relativní velikost písma z nabídky Type > Size (Text > Velikost) nebo z rozbalovací nabídky Font Size (Velikost písma) v pruhu nástrojů. • Když volíte mezi velikostmi 1 až 7, zvolte velikost 1, aby prohlížeč zobrazil text písmem o dva stupně

menším než je velikost nastavená v předvolbách prohlížeče, velikost 2, aby prohlížeč zobrazil text písmem o jeden stupeň menším, velikost 3, aby prohlížeč zobrazil text písmem stejné velikosti, velikost 4, aby prohlížeč zobrazil text písmem o jeden stupeň větším, a tak dále. • Když volíte mezi velikostmi +1 až +7, zvolte velikost +1, aby prohlížeč zobrazil text písmem o jeden

stupeň větším než je velikost okolního textu, velikost +2, aby prohlížeč zobrazil text písmem o dva stupně větším, a tak dále. • Když volíte mezi velikostmi -1 až -7, zvolte velikost -1, aby prohlížeč zobrazil text písmem o jeden

stupeň menším než je velikost okolního textu, velikost -2, aby prohlížeč zobrazil text písmem o dva stupně menším, a tak dále.

Aplikování sad písem Na text na webové stránce můžete aplikovat sadu písem. Sada písem obsahuje seznam s jedním nebo více písmy. Když uživatelův webový prohlížeč zobrazuje text formátovaný se sadou písem, pokusí se zobrazit text písmem, které je v sadě na prvním místě, potom písmem na druhém místě v sadě, a tak dále. Pokud není žádné z písem ze sady nainstalované na počítači uživatele, zobrazí prohlížeč text s využitím svého výchozího písma. Nabídka Type > Font (Text > Písmo) uvádí všechny sady písem, které jsou právě k dispozici. Globální sady písem se objevují v nabídce standardně, zatímco sady písem, které jsou použité na jednotlivých stránkách nebo které jsou uložené v okně webového místa, se objeví jen když jsou otevřená okna, na kterých jsou použité. Jak aplikovat na text sadu písem:

1 Tažením vyberte text, který chcete formátovat.


2 Zvolte sadu písem z nabídky Type > Font.

V nabídce Type > Font jsou pod prvním oddělovačem uvedeny globální sady písem a sady písem z otevřených stránek. Pod druhým oddělovačem jsou uvedeny sady písem z otevřených oken webových míst. Jak přidat nebo upravit sadu písem:

1 Zvolte Type > Font > Edit Font Sets (Text > Písmo > Upravit sady písem). 2 Proveďte jeden z následujících úkonů: • Pokud chcete přidat sadu globálních písem, kterou lze použít na jakékoli stránce, zvolte Default Font

Sets (Výchozí sady písem) v rozbalovací nabídce v levém horním rohu dialogového okna Font Sets (Windows) nebo klepněte na ikonu Default (Výchozí) v levém panelu dialogového okna Font Set Editor (Editor sady písem) (Mac OS). • Pokud chcete přidat sadu písem jen pro použití na platné stránce, zvolte Page Font Sets (Sady písem

stránky) z rozbalovací nabídky v levém horním rohu dialogového okna Font Sets (Windows) nebo klepněte na ikonu Page (Stránka) v levém panelu dialogového okna Font Set Editor (Mac OS).

3 Klepněte na New (Nový) pod seznamem Font Sets, abyste přidali novou sadu písem do seznamu. 4 Jednim z následujících úkonů přidejte nové písmo k sadě písem, kterou jste právě vytvořili: • Pokud víte, že písmo není instalované ve vašem systému, zadejte název písma do seznamu Font Names

(Názvy písem). • Pokud je písmo instalované ve vašem systému, klepněte na New pod seznamem Font Names a zvolte

písmo z rozbalovací nabídky pod seznamem. Adobe GoLive pojmenuje sadu písem a použije k tomu název prvního písma v sadě. Pokud chcete změnit název sady písem, musíte nejdřív přidat písmo do záložky Fontsets okna webového místa a pak změnit název písma pomocí palety Font Set Inspector (Inspektor sady písem). Další informace o použití palety Font Set Inspector viz „Používání sad písem webového místa“ na straně 405. 5 Další písmo přidejte do sady písem klepnutím na New pod seznamem Font Names. Pak zadejte název písma do seznamu Font Names nebo zvolte písmo z rozbalovací nabídky pod seznamem. Tento krok opakujte, až do sady písem přidáte všechna požadovaná písma.


6 Pokud chcete změnit název písma v sadě písem, vyberte v seznamu Font Names písmo, které chcete upravit. Pak upravte název písma, nebo zvolte nové písmo z rozbalovací nabídky pod seznamem.

Pokud změníte první písmo v sadě písem, přejmenuje se sada písem odpovídajícím způsobem v seznamu Font Sets. 7 Pokud chcete ze sady písem jedno písmo odstranit, vyberte písmo, které chcete odstranit v seznamu

Font Names a klepněte na Delete (Odstranit). 8 Klepněte na OK.

Kontrola pravopisu textu Kontrola pravopisu používaná v Adobe GoLive je obdobná jako kontrola pravopisu používaná v textových editorech. Adobe GoLive zkontroluje každou webovou stránku, najde podezřelá slova a navrhne možné záměny. Můžete přijmout návrh, ignorovat ho nebo vložit slovo do svého osobního slovníku jako nové slovo. Adobe GoLive navíc při kontrole pravopisu na každé stránce automaticky ignoruje HTML. Umožňuje také snadno zkontrolovat pravopis na jedné stránce nebo v celém webovém místě. Jak kontrolovat pravopis na stránce nebo ve webovém místě:

1 Proveďte jeden z následujících úkonů: • Pokud kontrolujete pravopis na jedné stránce, vyberte okno dokumentu, a klepněte na záložku Layout

Editor (Editor rozvržení) nebo na záložku HTML Source Editor (Zdrojový editor HTML). • Pokud kontrolujete pravopis na všech stránkách webového místa, vyberte okno webového místa.

2 Zvolte Edit > Spellchecking (Úpravy > Kontrola pravopisu) (Windows) nebo Edit > Check Spelling (Úpravy > Kontrola pravopisu) (Mac OS). 3 Zvolte sadu pravidel kontroly pravopisu z rozbalovací nabídky Language (Jazyk). 4 Pokud kontrolujete pravopis na jedné stránce, vyberte From Top (Odshora), aby se kontroloval pravopis na stránce od jejího začátku. Jinak Adobe GoLive začne kontrolu pravopisu stránky v místě textového kurzoru. 5 Klepněte na symbol vlevo od More Options (Více voleb) a vyberte požadované volby kontroly pravopisu. 6 Klepnutím na Start spusťte kontrolu pravopisu na platné stránce nebo na první stránce webového místa.

Adobe GoLive zobrazí první podezřelé slovo, spolu s popisem problému a s návrhy jeho náhrad. Pokud kontrolujete pravopis ve webovém místě, otevře se první stránka ve webovém místě, která obsahuje podezřelé slovo. 7 Abyste změnili podezřelé slovo, proveďte jeden z následujících úkonů: • Pokud jste spokojeni s prvním návrhem, klepněte na Change (Zaměnit).


• Pokud nejste spokojeni s prvním návrhem, klepněte na další návrh v okně se seznamem Suggestions

(Návrhy), nebo podezřelé slovo upravte. Potom klepněte na Change. 8 Pokud chcete podezřelé slovo akceptovat, proveďte jeden z následujících úkonů: • Klepněte na Ignore (Ignorovat), abyste akceptovali jeden výskyt slova. Při příštím výskytu slova vás

Adobe GoLive vyzve ke změně znovu. • Klepněte na Ignore All (Ignorovat vše), abyste akceptovali podezřelé slovo až do zavření programu.

Adobe GoLive bude ignorovat všechny výskyty slova až do zavření programu. • Klepněte na Learn (Přidat), abyste problematické slovo přidali do svého osobního slovníku. Adobe

GoLive toto slovo příště rozpozná jako správné. Svůj osobní slovník můžete upravovat v předvolbách Spell Checker. 9 Chcete-li podezřelé slovo ze stránky vymazat, klepněte na Delete (Odstranit). 10 Pokud kontrolujete pravopis ve webovém místě, klepněte na Next File (Další soubor), abyste

ukončili kontrolu pravopisu současné stránky a začali kontrolu pravopisu další stránky webového místa. 11 Kontrolu pravopisu můžete kdykoli ukončit klepnutím na Stop. 12 Klepnutím na zavírací tlačítko zavřete okno Check Spelling (Kontrola pravopisu).

Úpravy osobních slovníků Když Adobe GoLive zpochybní slovo během kontroly pravopisu, můžete sporné slovo přidat do svého osobního slovníku, aby Adobe GoLive rozpoznával toto slovo v budoucnu jako správné. Předvolby Spell Checker můžete použít k přidání slov do svého osobního slovníku i předem, a také k úpravě a odstranění slov ze slovníku. Navíc předvolby Spell Checker umožňují vytvořit osobní slovník pro každý jazyk, který máte instalovaný. (Pokud chcete používat další jazyky, musíte je instalovat pomocí uživatelské instalace na CD Adobe GoLive.).


Jak upravit osobní slovník:

1 Zvolte Edit > Preferences (Úpravy > Předvolby). 2 Klepněte na Spell Checker (Kontrola pravopisu) v levém panelu dialogového okna Preferences

(Předvolby). 3 Zvolte sadu pravidel pravopisu z rozbalovací nabídky Personal Dictionary (Osobní slovník) v dialogovém okně Spell Checker Preferences (Předvolby kontroly pravopisu). 4 Když chcete upravit slovo v osobním slovníku, vyberte požadované slovo klepnutím. V textovém poli pod rolovacím oknem zadejte nové slovo a stiskněte Enter. 5 Abyste přidali nové slovo do osobního slovníku, klepněte na New, zadejte nové slovo v textovém poli pod rolovacím oknem a stiskněte Enter. 6 Abyste odstranili slovo z osobního slovníku, vyberte požadované slovo klepnutím, a klepněte na Delete (Odstranit). 7 Klepněte na OK.

Jak přidat vymezovače K vytvoření mezery mezi textem a objekty na webové stránce můžete použít vymezovače (spacers). Vymezovače jsou užitečné, když vytváříte svou stránku bez použití mřížky rozvržení, tabulek, nebo plovoucích rámečků. Když používáte jen prázdnou stránku, mohou vám vymezovače poskytnout větší kontrolu nad rozvržením stránky. Důležité: Vymezovače jsou založeny na specifickém tagu Netscape, který rozpoznává Netscape Navigator 3.0 a novější. Microsoft Internet Explorer je ignoruje.

Vodorovné vymezovače použité k umístění textu. Jak vložit vymezovač:

1 Zvolte Window > Objects (Okno > Objekty). 2 V paletě Objects klepněte na záložku Basic (Základní) (

).

3 Přetáhněte ikonu Horizontal Spacer (Vodorovný vymezovač) z palety Objects do požadovaného místa v okně dokumentu. 4 Zvolte Window > Inspector (Okno > Inspektor). 5 V paletě Spacer Inspector (Inspektor vymezovače) zvolte typ vymezovače: • Horizontal (Vodorovný) vytvoří vymezovač, u kterého může být změněna vodorovná velikost. • Vertical (Svislý) vytvoří vymezovač, u kterého může být změněna svislá velikost.


• Block (Blok) vytvoří vymezovač, u kterého může být změněna vodorovná i svislá velikost.

6 Abyste změnili velikost vymezovače, proveďte jeden z následujících úkonů: • Zadejte požadovanou velikost pro Width (Šířku) nebo Height (Výšku) v paletě Spacer Inspector

(Inspektor vymezovače) a stiskněte Enter. • Vyberte vymezovač a táhněte za jeho táhla.

Tažením táhla změňte velikost vymezovače

7 Pokud jste vložili blokový vymezovač, vyberte ho a zvolte volbu z rozbalovací nabídky Alignment (Zarovnání), abyste vymezovač zarovnali s okolním textem.

Používání mřížky rozvržení Když přidáte text a objekty přímo na webovou stránku, rozvržení stránky se nově zalamuje podle nastavení webových prohlížečů návštěvníků vaší stránky. Abyste měli jistotu, že vaše stránka vypadá podle vašeho záměru, můžete text a objekty umístit na mřížku rozvržení. Když přidáte mřížku rozvržení na stránku, Adobe GoLive ve skutečnosti generuje tabulky ve zdrojovém kódu HTML stránky. Tyto tabulky využívá k umístění textu a objektů na stránku s přesností 1 obrazového bodu. Důležité: Pokud při návrhu stránky použijete mřížku rozvržení, musí prohlížeč návštěvníka stránky podporovat tabulky, aby se stránka zobrazila správně. Většina prohlížečů v současnosti podporuje tabulky. Zastaralé prohlížeče, například Netscape Navigator 2.0, mají problémy se správným zobrazením některých tabulek. Jak vložit mřížku rozvržení:


).

3 Přetáhněte ikonu mřížky rozvržení z palety Objects do okna dokumentu nebo poklepejte na ikonu v paletě Objects.

Poznámka: Adobe GoLive vkládá tag <SPACER> do tabulky HTML, která tvoří mřížku rozvržení. Tento tag řeší chybu prohlížečů Netscape, která způsobuje zaokrouhlení šířky tabulky. Microsoft Internet Explorer tento tag ignoruje. Výsledkem je správné zobrazení vašeho kódu HTML ve všech prohlížečích. 4 Zvolte Window > Inspector (Okno > Inspektor). 5 Abyste změnili velikost mřížky rozvržení, proveďte jeden z následujících úkonů: • Klepněte na okraj mřížky aby se zobrazila táhla pro změnu velikosti a táhněte za tato táhla. Nová šířka

a výška mřížky se zobrazí v paletě Layout Grid Inspector (Inspektor mřížky rozvržení).


Abyste změnili velikost mřížky rozvržení, vyberte táhlo a táhněte požadovaným směrem. • V paletě Layout Grid Inspector (Inspektor mřížky rozvržení) zadejte požadované rozměry pro Width

(Šířku) a Height (Výšku). • Pokud dokončíte umísťování objektů na mřížku, klepněte na Optimize (Optimalizovat) v paletě

Layout Grid Inspector (Inspektor mřížky rozvržení), aby se automaticky zredukovala velikost mřížky na minimální rozměry. Abyste omezili na minimum rolování stránky v prohlížečích návštěvníků, měla by být výsledná šířka mřížky rozvržení větší než 580 obrazových bodů, což je šířka standardního 14-palcového monitoru. 6 Pokud chcete dále přizpůsobit mřížku rozvržení, proveďte libovolné z následujících úkonů v paletě Layout Grid Inspector (Inspektor mřížky rozvržení): • Abyste změnili mezery mezi vodorovnými nebo svislými linkami mřížky, zadejte hodnoty

v obrazových bodech pro Horizontal (Vodorovně) nebo Vertical (Svisle). • Aby se objekty přitahovaly na vodorovné nebo svislé linky mřížky, vyberte Snap (Přitahovat) pro

Horizontal (Vodorovně) nebo Vertical (Svisle). Tuto volbu nevybírejte, pokud chcete umístit objekty na mřížce libovolně vodorovně nebo svisle. Abyste přesunuli vybraný objekt po krocích, odpovídajících mezerám mezi linkami mřížky, vyberte Snap pro Horizontal a Vertical v paletě Layout Grid Inspector a stiskněte klávesy se šipkami. Abyste přesunuli vybraný objekt na mřížce o jeden obrazový bod, nevyberte Snap pro Horizontal a Vertical a stiskněte klávesy se šipkami. • Aby se zobrazily vodorovné nebo svislé linky mřížky, vyberte Visible (Viditelné) pro Horizontal nebo

Vertical. Tuto volbu nevybírejte, pokud chcete vodorovné nebo svislé linky mřížky skrýt. Pokud chcete zrychlit zobrazení, když prohlížíte rozvržení stránky v zobrazení Layout (Rozvržení), skryjte linky mřížky. Mřížka je stále aktivní i když jsou její linky skryté. • Chcete-li nastavit umístění mřížky vzhledem k oknu dokumentu, zvolte zarovnání z rozbalovací

nabídky Align (Zarovnat) v paletě Layout Grid Inspector (Inspektor mřížky rozvržení). Zvolte Default (Výchozí), aby byla k zarovnání mřížky použita nastavení okolního kontejneru HTML. Poznámka: Pokud chcete vystředit mřížku vzhledem k oknu dokumentu, vyberte mřížku a klepněte na tlačítko Align Center (Zarovnat na střed) ( ) v pruhu nástrojů.


• Pokud chcete na mřížku aplikovat barvu pozadí, vyberte Background Color (Barva pozadí). Chcete-li

vybrat barvu, klepněte uvnitř barevného pole pro Background Color. Potom vyberte barvu v paletě Color (Barvy). Pokyny o používání palety Color viz „Práce s barvami“ na straně 142.

Používání textových rámečků Když používáte mřížku rozvržení, můžete text na mřížku umístit pomocí textových rámečků. Textové rámečky umožňují snadno uspořádat umístění textu na stránku posouváním nebo zarovnáváním rámečků. Když zadáváte text do textového rámečku, rámeček standardně roste, aby se přizpůsobil textu podle potřeby. To může způsobit, že objekty pod rámečkem se posunou na stránce směrem dolů. Abyste ochránili rozvržení stránky během své práce s Adobe GoLive, můžete zamknout rozměry textového rámečku, takže nebude automaticky přizpůsobovat svou velikost podle svého obsahu. Když jsou rozměry rámečku uzamčené, obsah v rámci rámečku přeteče. Musíte pak zvětšit velikost rámečku, abyste zobrazili celý jeho obsah. Chcete-li změnit velikost zamknutého rámečku, můžete ho vybrat a táhnout jeho táhla stejně, jak byste to udělali s rámečkem, který není zamknutý. Poznámka: Zamknutí rozměrů textového rámečku na stránce nemá vliv na to, jak se stránka zobrazí ve webovém prohlížeči. V prohlížeči textový rámeček automaticky přizpůsobí svou velikost podle svého obsahu. Jak přidat textový rámeček do mřížky rozvržení:

1 Přidejte na stránku mřížku rozvržení podle popisu v „Používání mřížky rozvržení“ na straně 134. 2 Pokud je to nutné, zvolte Window > Objects (Okno > Objekty) a klepněte na záložku Basic (Základní) ( ) v paletě Objects. 3 Přetáhněte ikonu Layout Text Box (Textový rámeček) z palety Objects do mřížky rozvržení na stránce, nebo vyberte mřížku a poklepejte na ikonu textového rámečku v paletě Objects. 4 Abyste přemístili textový rámeček v mřížce rozvržení, vyberte rámeček a přetáhněte ho. Chcete-li změnit velikost rámečku, vyberte ho a táhněte za jeho táhla. Další informace o přemísťování a změně velikosti objektů viz „Změna polohy, velikosti a seskupení objektů“ na straně 138. 5 Přidejte text do textového rámečku podle popisu ve „Vytváření textu“ na straně 123. 6 Chcete-li textový rámeček více přizpůsobit, zvolte Window > Inspector (Okno > Inspektor)

a proveďte kterýkoli z následujících úkonů v paletě Layout Text Box Inspector (Inspektor textového rámečku): • Abyste do rámečku aplikovali barvu pozadí, vyberte Color (Barvy). Klepnutím uvnitř barevného pole

ho vyberte. Pak vyberte barvu v paletě Color (Barvy). Pokyny k používání palety Color viz „Práce s barvami“ na straně 142. Poznámka: Když aplikujete barvu pozadí do textového rámečku a prohlížíte rámeček v náhledu v Adobe GoLive nebo v Netscape Navigatoru, zobrazí se barva jen v rámečku, který obsahuje text nebo jiný obsah. Abyste vyřešili tento problém, můžete do prázdného rámečku přidat nerozdělitelnou mezeru. Nerozdělitelnou mezeru přidáte klepnutím uvnitř rámečku a stisknutím kláves Shift+mezerník (Windows) nebo Alt+mezerník (Mac OS).


• Chcete-li zamknout rozměry rámečku, vyberte Allow Content Overflow (Povolit přetékání obsahu).

Tuto volbu vypněte pokud chcete, aby se rámeček zvětšoval tak, aby se podle potřeby přizpůsobil textu.

Přidání vodorovných linek Na webovou stránku můžete přidat vodorovné čáry, zvané také linky, abyste vizuálně oddělili obsah na stránce. Například můžete chtít umístit vodorovnou linku mezi nadpis a obsah stránky. Jak přidat vodorovnou linku:


).

3 Přetáhněte ikonu čáry z palety Objects do okna dokumentu nebo poklepejte na ikonu v paletě Objects. 4 Zvolte Window > Inspector (Okno > Inspektor). 5 Pokud chcete změnit styl linky, klepněte na tlačítko pro Style (Styl) v paletě Line Inspector (Inspektor linky): levé tlačítko aplikuje plný styl, pravé tlačítko aplikuje trojrozměrný styl. 6 Pokud chcete nastavit šířku linky, zvolte rozměr pro šířku z rozbalovací nabídky Width (Šířka) v paletě Line Inspector (Inspektor linky). Zvolte Full (Plná), abyste nastavili šířku linky na šířku textového rámečku nebo okna dokumentu. Zvolte Percent (Procenta), abyste nastavili šířku linky v poměru k textovému rámečku nebo oknu dokumentu. Pokud zvolíte Percent (Procenta) nebo Pixels (Obrazové body), zadejte požadovaný rozměr pro Width (Šířku). 7 Pokud chcete nastavit výšku linky, proveďte jeden z následujících úkonů: • Vyberte linku a táhněte její táhla tak, abyste nastavili její výšku podle potřeby. Nová výška linky se

zobrazí v paletě Line Inspector (Inspektor linky). • V paletě Line Inspector zadejte požadovaný rozměr v obrazových bodech pro Height (Výšku).

Změna velikosti linky tažením táhla

8 Pokud chcete zarovnat linku vzhledem k textovému rámečku, mřížce rozvržení nebo oknu dokumentu, klepněte na tlačítko pro Alignment (Zarovnání) v paletě Line Inspector (Inspektor linky): levé tlačítko aplikuje zarovnání doleva, střední tlačítko aplikuje zarovnání na střed, pravé tlačítko aplikuje zarovnání vpravo. (Tlačítka jsou ztlumená pokud má linka plnou šířku.)


Změna polohy, velikosti a seskupení objektů Adobe GoLive poskytuje řadu způsobů, jak přesně umístit objekty na webové stránce a upravit jejich velikost tak, aby odpovídaly požadavkům návrhu stránky. Tažením můžete objekty přemístit i změnit jejich velikost. Pomocí pruhu nástrojů můžete objekty přemístit, změnit jejich velikost a seskupit je. Paleta Transform (Transformace) poskytuje všechny tyto volby a navíc umožňuje měnit pořadí překrývání aktivních míst v obrazových mapách nebo stop v prohlížeči filmů QuickTime, které se vzájemně překrývají. Musíte nejdříve umístit nějaké objekty na mřížku rozvržení a pak je můžete přemísťovat tažením, zadáním hodnot v pruhu nástrojů, nebo pomocí palety Transform. Seskupovat můžete jen objekty, které jsou umístěny na mřížce rozvržení. Výhodou seskupení objektů je to, že s nimi potom můžete pohybovat po mřížce rozvržení jako s jedním celkem, což vám zaručí, že mezery mezi nimi se nezmění. Jak objekt přemístit:

1 Klepnutím vyberte objekt, který chcete přemístit. 2 Proveďte jeden z následujících úkonů: • Přetáhněte objekt do požadované polohy. • V pruhu nástrojů zadejte hodnoty v obrazových bodech pro Horizontal Position (Vodorovná poloha)

a Vertical Position (Svislá poloha). • Zvolte Window > Transform (Okno > Transformace). V paletě Transform (Transformace) v sekci

Position (Poloha) zadejte v levém textovém poli hodnotu vodorovného umístění v obrazových bodech. V pravém textovém poli zadejte hodnotu svislého umístění v obrazových bodech. Jak změnit velikost objektu:

1 Klepnutím vyberte objekt, u kterého chcete změnit velikost. 2 Proveďte jeden z následujících úkonů: • Táhněte jedno z táhel objektu.

Poznámka: Chcete-li změnit velikost objektu proporcionálně, táhněte se stisknutou klávesou Shift za jedno z rohových táhel objektu. Chcete-li zobrazovat náhled v průběhu změny velikosti, podržte Ctrl a táhněte jedno z táhel objektu. Chcete-li zobrazovat náhled v průběhu změny velikosti a měnit velikost objektu proporcionálně, podržte Ctrl a Shift a táhněte za jedno z rohových táhel objektu.

Změna velikosti bez náhledu a s náhledem


• V pruhu nástrojů zadejte hodnoty v obrazových bodech pro Width (Šířku) a Height (Výšku). • Zvolte Window > Transform (Okno > Transformace). V paletě Transform vyberte Constrain

Proportions (Zachovat proporce), pokud chcete změnit velikost objektu proporcionálně. Pod Size (Velikost) zadejte hodnotu v obrazových bodech v levém textovém poli pro šířku nebo v pravém textovém poli pro výšku. Jak objekty seskupit:

1 Vyberte na mřížce rozvržení objekty, které chcete seskupit. Klepnutím vyberte první objekt a potom klepnutím se stisknutou klávesou Shift vyberte každý další objekt. (Plovoucí rámečky nemůžete seskupovat.) 2 Proveďte jeden z následujících úkonů: • Klepněte na tlačítko Group (Seskupit) v pruhu nástrojů. • Zvolte Window > Transform (Okno > Transformace). V paletě Transform (Transformace), pod

Grouping (Seskupení) klepněte vlevo na tlačítko Group (Seskupit) (

).

Jak rozdělit seskupené objekty:

1 Klepnutím vyberte skupinu objektů, kterou chcete rozdělit. 2 Proveďte jeden z následujících úkonů: • Klepněte na tlačítko Ungroup (Rozdělit skupinu) v pruhu nástrojů. • Zvolte Window > Transform (Okno > Transformace). V paletě Transform (Transformace), pod

Grouping (Seskupení) klepněte vpravo na tlačítko Ungroup (Rozdělit skupinu) (

).

Jak změnit pořadí překrývání objektů:

1 Vyberte objekt, pro který chcete změnit pořadí překrývání. (Můžete změnit pořadí překrývání aktivních míst v obrazových mapách nebo stop v prohlížeči filmů QuickTime, které se vzájemně překrývají. Pořadí překrývání plovoucích rámečků ale nemůžete změnit.) 2 Zvolte Window > Transform (Okno > Transformace). 3 V paletě Transform (Transformace) pod Z-Order (Z-pořadí) klepněte na tlačítko Bring to Front

(Zcela dopředu) ( ), abyste posunuli vybraný objekt dopředu, nebo klepněte na tlačítko Bring to Back (Zcela dozadu) ( ), abyste posunuli vybraný objekt dozadu.

Zarovnání a rozmístění objektů Adobe GoLive umožňuje snadno přesně uspořádat objekty na webové stránce. Můžete použít pruh nástrojů nebo paletu Align (Zarovnání) pro zarovnání objektů vzhledem k jejich rodiči, jako je například okno dokumentu nebo mřížka rozvržení. Navíc můžete paletu Align použít jak pro zarovnání, tak pro rozmístění objektů podle jejich vzájemných vztahů. Nejdřív musíte umístit nějaké objekty na mřížku rozvržení a pak je můžete vůči sobě zarovnat nebo rozmístit pomocí palety Align (Zarovnání).


Jak zarovnat objekt nebo skupinu objektů vůči jejich rodiči:

1 Vyberte objekt nebo skupinu objektů, které chcete zarovnat. 2 Proveďte jeden z následujících úkonů: • V pruhu nástrojů klepněte na tlačítko vodorovného zarovnání: Align Left (Zarovnat doleva) (

), Align Center (Zarovnat na střed) ( ) nebo Align Right (Zarovnat doprava) ( ). Nebo klepněte na tlačítko svislého zarovnání: Align Bottom (Zarovnat dolů) ( ), Align Center (Zarovnat na střed) ( ) nebo Align Top (Zarovnat nahoru) ( ).

• Zvolte Window > Align (Okno > Zarovnání). V paletě Align (Zarovnání) pod Align to Parent

(Zarovnat na rodiče) klepněte na tlačítko vodorovného nebo svislého zarovnání. (Tlačítka v paletě Align jsou stejná jako v pruhu nástrojů.) Poznámka: Protože Adobe GoLive neposune vybraný objekt pokud je v cestě jiný objekt, jsou různá tlačítka pro zarovnání ztlumená (neaktivní) v závislosti na vybraných objektech. Jak zarovnat objekty vzhledem k sobě navzájem:

1 Vyberte objekty, které chcete vzájemně zarovnat. (Klepnutím vyberte první objekt a potom klepnutím se stisknutou klávesou Shift vyberte každý další objekt.) 2 Zvolte Window > Align (Okno > Zarovnání). 3 V paletě Align (Zarovnání) pod Align Objects (Zarovnat objekty) klepněte na tlačítko pro vodorovné zarovnání, abyste objekty zarovnali vodorovně: • Align Left (Zarovnat doleva) (

) zarovná objekty podle levého svislého okraje objektu nejvíce

vlevo. • Align Center (Zarovnat na střed) ( • Align Right (Zarovnat doprava) (

) zarovná objekty podle jejich svislé střední osy. ) zarovná objekty podle pravého svislého okraje objektu nejvíce

vpravo. 4 V paletě Align (Zarovnání) pod Align Objects (Zarovnat objekty) klepněte na tlačítko pro svislé zarovnání, abyste objekty zarovnali svisle: • Align Top (Zarovnat nahoru) (

) zarovná objekty podle horního vodorovného okraje nejvyššího

objektu. • Align Center (Zarovnat na střed) ( • Align Bottom (Zarovnat dolů) (

) zarovná objekty podle jejich vodorovné střední osy. ) zarovná objekty podle dolního vodorovného okraje nejnižšího

objektu. Jak vůči sobě rozmístit objekty:

1 Vyberte tři nebo více objektů, které chcete vůči sobě rozmístit. (Klepnutím vyberte první objekt a potom klepnutím se stisknutou klávesou Shift vyberte každý další objekt.) 2 Zvolte Window > Align (Okno > Zarovnání).


3 V paletě Align (Zarovnání) pod Distribute Objects (Rozmístit objekty) klepněte na tlačítko pro vodorovné rozmístění, abyste rozmístili objekty vodorovně: • Relative to Left Edges (Podle levých okrajů) (

) rozmístí objekty vzhledem k jejich levým svislým

okrajům. • Relative to Vertical Centers (Podle svislých středů) (

) rozmístí objekty vzhledem k jejich svislým

středním osám. • Relative to Right Edges (Podle pravých okrajů) (

) rozmístí objekty vzhledem k jejich pravým

svislým okrajům. 4 V paletě Align (Zarovnání) pod Distribute Objects (Rozmístit objekty) klepněte na tlačítko pro svislé rozmístění, abyste objekty rozmístili svisle: • Relative to Tops (Podle horních okrajů) (

) rozmístí objekty vzhledem k jejich horním

vodorovným okrajům. • Relative to Horizontal Centers (Podle vodorovných středů) (

) rozmístí objekty vzhledem k jejich

vodorovným středním osám. • Relative to Bottoms (Podle dolních okrajů) (

) rozmístí objekty vzhledem k jejich dolním

vodorovným okrajům. 5 V paletě Align (Zarovnání) pod Distribute Spacing (Rozmístit mezery) klepněte na tlačítko, abyste rozmístili objekty tak, že budou mít mezi sebou rovnoměrné vzdálenosti: • Distribute Spacing Horizontally (Rozmístit vodorovné mezery) (

) rozmístí objekty vodorovně

tak, že jejich levé a pravé svislé okraje budou mít stejné vzdálenosti. • Distribute Spacing Vertically (Rozmístit svislé mezery) (

) rozmístí objekty svisle tak, že jejich

horní a dolní vodorovné okraje budou mít stejné vzdálenosti.

Práce s často používanými objekty Adobe GoLive vám usnadní umísťování často používaných objektů ve vašem webovém místě. Po vytvoření objektů, který chcete opakovaně používat, můžete objekty přetáhnout do záložky Custom (Vlastní) v paletě Objects (Objekty). Chcete-li umístit objekty znovu na stejnou webovou stránku nebo na jinou stránku, můžete přetáhnout miniatury objektů z palety Objects do okna dokumentu. Příklady objektů, které můžete přetáhnout do záložky Custom v paletě Objects jsou textové rámečky, tabulky a obrazy. Když použijete záložku Custom (Vlastní) v paletě Objects (Objekty) k umístění často používaných objektů, můžete také snadno upravovat objekty na kterékoli stránce bez ovlivnění objektů na jiných stránkách. Pokud chcete upravovat objekty jen jednou a nechat pak Adobe GoLive automaticky aktualizovat všechny výskyty objektů ve webovém místě, měli byste raději použít komponenty. Další informace o komponentách viz „Používání komponent GoLive“ na straně 238.


Jak ukládat a umísťovat často používané objekty:

1 Zvolte Window > Objects (Okno > Objekty). 2 V paletě Objects klepněte na záložku Custom (Vlastní) (

).

3 V okně dokumentu vyberte klepnutím objekty, které chcete uložit. (Abyste vybrali více objektů, vyberte klepnutím první objekt a potom klepnutím se stisknutou klávesou Shift vyberte každý další objekt.) 4 Přetáhněte vybrané objekty z okna dokumentu do palety Objects (Objekty). 5 Chcete-li vybrané objekty pojmenovat, poklepejte na miniaturu objektu v paletě Objects. V paletě

Item Editor (Editor položek) zadejte název a klepněte na OK. Názvy objektů se objeví v paletě Objects. 6 Abyste umístili vybrané objekty do stejného nebo jiného dokumentu, přetáhněte miniaturu objektu

z palety Objects do okna dokumentu. 7 Abyste odstranili objekty ze záložky Custom (Vlastní), vyberte miniaturu objektu a stiskněte Delete (Smazat).

Práce s barvami Text a objekty můžete na svých webových stránkách obarvit pomocí palety Color (Barvy). Paleta Color ve skutečnosti obsahuje několik samostatných palet, včetně barev RGB, CMYK a bezpečných webových barev, které se zobrazí správně v každém webovém prohlížeči. Nejdříve zvolte barvu z palety Color (Barvy) a potom aplikujte barvu na text a objekty na své stránce. Aby bylo snadnější použít stejnou barvu, která je již na stránce použita, můžete také nabrat barvu z oblasti pod ukazatelem nebo dokonce z obrazu na stránce. Dále pokud používáte Adobe GoLive pro Mac OS, můžete nastavit volby a předvolby, které umožní vám a návštěvníkům vašich stránek zobrazovat obrazy JPEG bez jakýchkoliv artefaktů. Jak otevřít paletu Color (Barvy):

Proveďte jeden z následujících úkonů: • Zvolte Window > Color (Okno > Barvy). • Klepněte na pole Text Color (Barva textu) v pruhu nástrojů. • Klepněte na libovolné barevné pole v paletě Inspector. Jak zvolit barvu z palety Color (Barvy):

1 Otevřete paletu Color. 2 Klepněte na trojúhelník v pravém horním rohu palety Color, aby se zobrazila nabídka palety Color a zvolte požadované tlačítko. Nebo klepněte na jedno z následujících tlačítek v paletě Color:


• Gray Slider (Jezdec stupňů šedi) (

), pokud chcete použít jeden jezdec k nastavení procent černé a vytvoření požadovaného odstínu šedé.

• RGB Sliders (Jezdce RGB) (

), pokud chcete použít tři jezdce k nastavení procent červené, zelené

a modré součásti spektra. • CMYK Sliders (Jezdce CMYK) (

), pokud chcete použít čtyři jezdce k nastavení procent azurové, purpurové, žluté a černé součásti spektra.

• HSB Wheel (Kolo HSB) (

), pokud chcete získat přístup k celému spektru barev, podporovanému vaším zobrazovacím hardwarem. Abyste vybrali barvu, klepněte na místo v barevném kole a potom nastavte jas pomocí jezdce jasu.

• HSV Picker (Výběr HSV) (

), pokud chcete nezávisle nastavit odstín, sytost a hodnotu (jas) barvy. Odstín nastavte na vnějším kruhu, sytost na vodorovné ose čtverce a hodnotu na svislé ose čtverce.

• Palettes (Palety) (

) zobrazí různé pevné barevné prostory s maximálně 256 barvami. Chcete-li vybrat barvu, zvolte sadu barev z rozbalovací nabídky a klepněte na vzorek. Rozbalovací nabídka vám umožní omezit rozsah barev, převzít současné barvy pracovní plochy nebo vytvořit uživatelskou paletu barev zkopírováním barev z objektů na pracovní ploše nebo v okně dokumentu.

• Web Color List (Seznam webových barev) (

) zobrazí 216 bezpečných webových barev pro všechny platformy. Omezením počtu barev na 216 můžete zajistit, že vaše stránka bude vypadat dobře, když bude zobrazena v systémech nastavených na zobrazení 256 barev, jako jsou například standardní PC. Textové pole Value (Hodnota) zobrazuje hexadecimální hodnoty červené, zelené a modré, posílané do prohlížeče. Abyste vybrali barvu, klepněte na vzorek nebo posuňte seznam a klepněte na barvu v seznamu.

• Web Name List (Seznam webových názvů) (

) zobrazí barvy, které může prohlížeč vyvolat. Tyto barvy neobsahují všechny bezpečné webové barvy pro všechny platformy. Textová pole Name (Název) a Value (Hodnota) zobrazují čistě textový název a řídicí kód HTML, posílaný do prohlížeče. Abyste vybrali barvu, klepněte na barvu v seznamu.

• PMColorPickerModule (Modul výběru barvy PM) (

) zobrazí barvy, které jste nashromáždili v záložce Colors (Barvy) okna webového místa. (Další informace o záložce Colors okna webového místa viz „Záložky External (Vnější), Colors (Barvy), Fontsets (Sady písem) a Custom (Vlastní)“ na straně 89.) Barvy jsou k dispozici jen pokud je otevřené okno webového místa. Abyste vybrali barvu, klepněte na barvu v seznamu. 3 Aby se hodnoty barev v paletě Color (Barvy) zobrazovaly v procentech, zvolte Percent Values (Hodnoty v procentech) z nabídky palety Color. Tuto volbu vypněte, pokud chcete aby se hodnoty barev zobrazovaly s použitím rozsahu do 256. 4 Vyberte barvu z libovolné palety podle vašeho výběru. Jak obarvit text nebo objekt:

1 V okně dokumentu vyberte text nebo objekt, který chcete obarvit.


2 Pokud vybarvujete vybraný text v okně dokumentu, klepněte na pole Text Color (Barva textu) v pruhu nástrojů, abyste jej vybrali. Jinak klepněte na barevné pole v paletě Inspector, abyste jej vybrali. 3 V paletě Color (Barvy) vyberte barvu z libovolné palety podle vašeho výběru.

Adobe GoLive automaticky aplikuje barvu na pole Text Color (Barva textu) v pruhu nástrojů nebo na barevné pole v paletě Inspector, aktivuje volbu barvy pro barevné pole v paletě Inspector pokud je to potřeba, a aplikuje barvu na platný výběr v pracovní ploše. Abyste obarvili vybraný text nebo objekt, můžete také přetáhnout barvu z panelu náhledu palety Color na vybraný text v okně dokumentu, na pole Text Color (Barva textu) v pruhu nástrojů, nebo na barevné pole v paletě Inspector (Inspektor). Jak navzorkovat barvu z oblasti pod ukazatelem:

1 Zvolte Window > Color (Okno > Barvy). 2 V paletě Color (Barvy) klepněte na tlačítko Palettes (Palety) ( ) nebo Web Color List (Seznam webových barev) ( ). 3 Přesuňte kurzor na kterýkoli vzorek v paletě Color, aby se kurzor změnil na kapátko. Potom táhněte na barvu v okně dokumentu, kterou chcete navzorkovat. Navzorkovaná barva se zobrazí v panelu náhledu palety Color. 4 Abyste obarvili text nebo objekt pomocí navzorkované barvy, vyberte text nebo objekt, který chcete

obarvit. Pak přetáhněte barvu z panelu náhledu palety Color (Barvy) na vybraný text v okně dokumentu, do pole Text Color (Barva textu) v pruhu nástrojů, nebo do barevného pole v paletě Inspector.

Používání ColorSync 2.5 (Mac OS) Adobe GoLive podporuje technologii správy barev ColorSync™ 2.5 od firmy Apple Computer. ColorSync 2.5 slaďuje barevné prostory obrazů JPEG a počítačových monitorů, a umožňuje tak vám i návštěvníkům vašich stránek prohlížet obrazy JPEG bez jakýchkoli artefaktů (rušivých obrazových bodů). Při použití ColorSync se obrazy JPEG zobrazují pomocí barevných profilů kompatibilních s ICC, které jsou buď vloženy v samotném obrazu nebo jsou zahrnuté jako samostatné soubory. Jak zvolit volby ColorSync:

1 Pro obrazy proveďte jeden z následujících úkonů: • Pokud chcete nastavit volby pro jednotlivý obraz JPEG, vyberte obraz v okně dokumentu. Zvolte

Window > Inspector (Okno > Inspektor). V paletě Image Inspector (Inspektor obrazu) klepněte na záložku Link (Vazba). • Pokud chcete nastavit volby pro všechny obrazy JPEG v platném dokumentu, klepněte na ikonu Page

(Stránka) ( ) v levém horním rohu okna dokumentu. Zvolte Window > Inspector (Okno > Inspektor). V paletě Page Inspector (Inspektor stránky) klepněte na záložku ColorSync.


2 Profily vyberte jedním z následujících úkonů v paletě Image Inspector nebo Page Inspector: • Klepněte na Default (Výchozí), pokud chcete pro platný obraz použít standardní profil RGB

zabudovaný v Adobe GoLive. • Klepněte na Profile (Profil). Vyberte požadovaný profil pomocí tlačítka Namířit a vybrat (

) nebo

tlačítka Browse (Procházet). Poznámka: Odkazy na externí barevné profily nejsou monitorovány zabudovaným analyzátorem vazeb Adobe GoLive. Po přesunutí místa na server FTP vašeho poskytovatele internetového připojení zkontrolujte, že samostatný barevný profil ICC byl také přesunut. • Klepnutím na None (Žádný) vypněte podporu ColorSync pro vybraný obraz.

Textové pole Embedded (Vložený) zobrazí název vloženého barevného profilu ve vybraném obraze JPEG. Vkládání barevných profilů do obrazů JPEG je funkce podporovaná nejnovějšími verzemi populárních obrazových aplikací, jako je například Adobe Photoshop. Poznámka: V současné době podporuje vložené barevné profily v obrazech JPEG pouze Microsoft Internet Explorer verze 4.01 a novější. Jak nastavit předvolby ColorSync:

1 Zvolte Edit > Preferences (Úpravy > Předvolby). 2 Klepněte na ikonu ColorSync v levém panelu dialogového okna Preferences (Předvolby). 3 Vyberte libovolné z následujících voleb: • Display Images with ColorSync (Zobrazovat obrazy pomocí ColorSync), abyste v Adobe GoLive

aktivovali podporu ColorSync. • Use Default RGB Profile if Not Specified (Použít výchozí profil RGB pokud není určen), chcete-li

použít zabudovaný výchozí barevný profil, když je ColorSync aktivovaný, ale pro obraz není určený žádný profil. 4 Klepněte na OK.

Přidávání hypertextových vazeb Poté co na svou webovou stránku přidáte obsah, musíte návštěvníkům stránky poskytnout možnost přesunout se z této stránky do dalších míst ve vašem webovém místě. S Adobe GoLive můžete snadno vytvářet vazby, které začínají z textu na vaší stránce a pošlou uživatele na další stránky vašeho webového místa, do jiných míst na stejné stránce jako je vazba (nazývaných kotvy), na jiné stránky na Internetu nebo ne-webové zdroje jako například servery FTP, diskusní skupiny (newsgroups) a e-mailové adresy.


Jako alternativu k vytvoření hypertextové vazby můžete vytvořit vazby, které začínají z obrazů nebo částí obrazů (nazývaných obrazové mapy). Další informace o vytváření vazeb z obrazů viz „Další volby obrazů“ na straně 201 a „Vytvoření obrazových map“ na straně 203. Můžete také vytvořit dynamické akce, které jsou spouštěné akcí myši nebo vytvořit vazby, který jsou spouštěné jinými akcemi než klepnutím myší. Informace o vytváření dynamických akcí nebo vazeb používajících akce viz „Vytvoření akcí“ na straně 319. Jak vytvořit hypertextovou vazbu:

1 Vyberte text, který chcete použít jako počátek vazby. 2 Proveďte jeden z následujících úkonů: • Zvolte Window > Inspector (Okno > Inspektor). V paletě Text Inspector (Inspektor textu) klepněte

na záložku Link (Vazba). Klepněte na tlačítko New Link (Nová vazba) ( ) v pruhu nástrojů. Abyste určili cíl vazby, vyberte soubor tlačítkem Namířit a vybrat ( ) nebo tlačítkem Browse (Procházet). V textovém poli URL můžete také zadat URL nebo e-mailovou adresu. Přitom musíte v textovém poli URL přidat „http://“ na začátek URL a „mailto:“ na začátek e-mailové adresy. • Podržte Ctrl (Windows) nebo Apple (Mac OS) a táhněte z vybraného textu k požadovanému cílovému

místu vazby uvnitř okna webového místa. Cílovým místem vazby může být soubor HTML v záložce Files (Soubory) okna webového místa, nebo URL nebo e-mailová adresa v záložce Externals (Vnější zdroje) okna webového místa. Další informace o ukládání URL a e-mailových adres v záložce Externals okna webového místa viz „Používání URL a e-mailových adres ve webovém místě“ na straně 399.

Vyberte text, který chcete navázat. Pak podržte Ctrl (Windows) nebo Apple (Mac OS) a táhněte k cílovému místu vazby.


• V Mac OS otevřete stránku, na kterou má vést vazba z vybraného textu. Přetáhněte ikonu Page

(Stránka) (

) z okna dokumentu cílového místa vazby na vybraný text.

3 Pokud jste to již neudělali, zvolte Window > Inspector (Okno > Inspektor) a klepněte na záložku Link (Vazba) v paletě Text Inspector (Inspektor textu). 4 Pokud chcete, aby se cílové místo vazby zobrazilo v rámci nebo v novém okně webového prohlížeče, zvolte volbu z rozbalovací nabídky Target (Cíl) v paletě Text Inspector. 5 Do pole Title (Titul) zadejte popis vazby pro svou vlastní potřebu. Jak odstranit hypertextovou vazbu:

Vyberte text, který je počátkem vazby. Potom klepněte na tlačítko Remove Link (Odstranit vazbu) ( ) v pruhu nástrojů.

Používání kotev Kotva je určité místo na webové stránce, které slouží jako cíl vazby. Adobe GoLive poskytuje dva způsoby jak vytvořit kotvu. Můžete začít určením počátku vazby a potom určit umístění kotvy. Nebo můžete začít určením umístění kotvy a potom určit počátek vazby. V obou případech byste měli při vytváření kotvy postupovat podle těchto pravidel: • Kotvy byste neměli umísťovat přímo na mřížku rozvržení. Místo toho umístěte kotvy do toku textu

HTML, textového rámečku nebo buňky tabulky. Když přidáváte kotvu do textového rámečku nebo buňky tabulky, zajistěte, aby rámeček nebo buňka měl další obsah, jinak Netscape Navigator kotvu nepoužije. Abyste tento problém obešli, můžete do prázdného rámečku nebo buňky přidat nerozdělitelnou mezeru. Abyste přidali nerozdělitelnou mezeru, klepněte uvnitř rámečku nebo buňky, a stiskněte Shift+mezerník (Windows) nebo Alt+mezerník (Mac OS). • Kotvy byste měli umísťovat blízko levého okraje stránky, aby kotvy fungovaly shodně ve všech

prohlížečích. • V náhledu oken dokumentů v Adobe GoLive nebudete moci zobrazit náhled určitých kombinací

vazeb a kotev. • Vazby na kotvy byste měli důkladně otestovat před publikováním svého webového místa. Kotvy

nefungují vždy stejným způsobem v Netscape Navigatoru a v Microsoft Internet Exploreru. Jak vytvořit kotvu a vazbu na ní:

Proveďte jeden z následujících úkonů: • Zvolte File > Save (Soubor > Uložit), abyste svou stránku uložili. Vyberte text, který chcete použít jako

počátek vazby. Klepněte na tlačítko New Link (Nová vazba) ( ) v pruhu nástrojů. Zvolte Window > Inspector (Okno > Inspektor). V paletě Text Inspector (Inspektor textu) klepněte na záložku Link (Vazba). Táhněte z tlačítka Namířit a vybrat ( ) v paletě Text Inspector (Inspektor textu) do místa na stránce, kde chcete mít kotvu. Adobe GoLive vytvoří kotvu v místě, kde uvolníte tlačítko myši.


• Zvolte Window > Objects (Okno > Objekty). V paletě Objects klepněte na záložku Basic (Základní)

( ). Přetáhněte ikonu Anchor (Kotva) z palety Objects do místa na stránce, kde chcete mít kotvu. Zvolte Window > Inspector (Okno > Inspektor). V paletě Anchor Inspector (Inspektor kotvy) zadejte jednoznačný název kotvy. V okně dokumentu vyberte text, který chcete použít jako počátek vazby. Klepněte na tlačítko New Link (Nová vazba) v pruhu nástrojů. V paletě Text Inspector (Inspektor textu) klepněte na záložku Link (Vazba). Táhněte z tlačítka Namířit a vybrat v paletě Text Inspector (Inspektor textu) na kotvu na stránce.

Přidání údajů o datumu a čase Na svou webovou stránku můžete přidat údaje o datumu a čase, aby návštěvníci stránky viděli, kdy jste stránku naposledy aktualizovali. V Adobe GoLive můžete přidat datum a čas pomocí ikony Modified Date (Datum úpravy) v paletě Objects (Objekty). Nejdříve použijte ikonu k přidání údaje o datumu, a potom použijte ikonu k přidání údaje o čase. Adobe GoLive načte platné datum a čas z vestavěných hodin reálného času ve vašem počítači, a výsledek zapíše do uživatelského tagu. Potom dynamicky aktualizuje informace o datumu a čase, kdykoli stránku uložíte. Jak vložit údaje o datumu a čase:

1 Pokud chcete mít před datovým nebo časovým údajem popisný text (například „Naposledy upraveno:“), zadejte text do okna dokumentu. 2 Zvolte Window > Objects (Okno > Objekty). 3 V paletě Objects klepněte na záložku Smart (Automatické) (

).

4 Přetáhněte ikonu Modified Date (Datum úpravy) z palety Objects (Objekty) do okna dokumentu

nebo poklepejte na ikonu v paletě Objects. 5 Zvolte Window > Inspector (Okno > Inspektor). 6 V paletě Modified Date Inspector (Inspektor data úpravy) zvolte zemi z nabídky Format, abyste zobrazili datum a čas ve formátu pro určitou zemi. 7 Vyberte formát pro údaje o datu nebo čase, které jste přidali na svou stránku. 8 Zvolte File > Save (Soubor > Uložit). Údaj o datu nebo čase zobrazí přesné datum nebo čas, kdy jste použili příkaz Save (Uložit).

Vytvoření rozbalovacích nabídek URL Na svou webovou stránku můžete přidat rozbalovací nabídku URL, abyste návštěvníkům poskytli nabídku vazeb na jiné stránky v rámci vašeho vlastního webového místa nebo na Internetu. V Adobe GoLive použijte ikonu rozbalovací nabídky URL v paletě Objects (Objekty), abyste přidali rozbalovací nabídku URL, a potom určete položky nabídky pomocí palety URL Pop-up Inspector (Inspektor nabídky URL).


Jak vložit rozbalovací nabídku URL:

1 Zvolte Window > Objects (Okno > Objekty). 2 V paletě Objects klepněte na záložku Smart (Automatické) (

).

3 Přetáhněte ikonu URL Popup (Nabídka URL) z palety Objects do okna dokumentu. 4 Zvolte Window > Inspector (Okno > Inspektor). 5 Abyste vytvořili novou položku nabídky, klepněte na New (Nová) v paletě URL Popup Inspector (Inspektor nabídky URL). Zadejte název položky nabídky v textovém poli Label (Název). Určete URL pro položku nabídky výběrem souboru tlačítkem Namířit a vybrat ( ) nebo tlačítkem Browse (Procházet). Aby se URL objevilo v určeném rámci, zvolte rámec z rozbalovací nabídky Target (Cíl). 6 Chcete-li duplikovat položku nabídky, vyberte položku v rolovacím okně v paletě URL Popup Inspector (Inspektor nabídky URL) a klepněte na Duplicate (Duplikovat). 7 Chcete-li položku z nabídky odstranit, vyberte položku v rolovacím okně v paletě URL Popup Inspector a klepněte na Delete (Odstranit). 8 Chcete-li změnit umístění položky nabídky v rozbalovací nabídce, vyberte položku v rolovacím okně v paletě URL Popup Inspector. Klepněte na tlačítko se šipkou nahoru nebo dolů vedle vodorovného posuvníku, abyste položku přesunuli do požadované polohy. 9 Abyste ověřili, že vazby v rozbalovací nabídce URL pracují správně, zobrazte náhled stránky ve webovém prohlížeči.

Návrat k předešlému stavu a obnovení změn stránek Když navrhujete svou webovou stránku, můžete použít paletu History (Historie) k návratu k předešlému stavu stránky. Paleta History zaznamenává změny, které provedete na stránce v zobrazení Layout (Rozvržení) nebo Source (Zdroj). Pokaždé, když na stránce provedete změnu, přidá se nový stav stránky do palety History. K předchozímu stavu stránky se můžete vrátit výběrem kteréhokoli stavu v paletě History. Pokud jste se vrátili k předchozímu stavu stránky, můžete obnovit změny, které jste udělali oproti tomuto stavu tak, že v paletě History zvolíte novější stav. Paleta History (Historie) uvádí seznam až 20 stavů stránky v zobrazení Layout (Rozvržení) nebo Source (Zdroj). Obsah palety History (Historie) se vymaže, když přepnete ze zobrazení Layout (Rozvržení) nebo Source (Zdroj) do jiného zobrazení stejného dokumentu. Obsah se ale upraví, když přepnete mezi otevřenými dokumenty, které jsou ve stejném zobrazení, buď Layout nebo Source. Jako alternativu k použití palety History můžete změnu, kterou jste provedli na stránce, zrušit volbou Edit > Undo (Úpravy > Zpět). Abyste obnovili změnu, kterou jste udělali na stránce před volbou příkazu Undo, můžete zvolit Edit > Redo (Úpravy > Znovu). Adobe GoLive umožňuje zrušit a obnovit více změn pomocí nabídky Edit (Úpravy). Kdykoli se můžete také vrátit k naposledy uloženému stavu stránky volbou File > Revert to Saved (Soubor > Obnovit uložený).


Jak se vrátit k předchozímu stavu dokumentu:

1 Zvolte Window > History (Okno > Historie).

V paletě History je seznam předchozích stavů dokumentu, nejstarší stav je v seznamu nahoře a nejnovější stav dole. 2 V paletě History klepněte na ten stav dokumentu, ke kterému se chcete vrátit. 3 Abyste obnovili změny, které jste udělali od tohoto stavu dokumentu, zvolte novější stav v paletě

History. (Novější stavy dokumentu jsou ztlumené.) V Mac OS stiskněte Shift+Apple+Z, abyste postupně obnovili změny, které jste udělali od stavu dokumentu. Chcete-li odstranit všechny změny dokumentu uvedené v paletě History (Historie), stiskněte Alt+Apple+Z a potom klepněte na Discard (Zahodit).

Prohlížení náhledu stránek Přímo v Adobe GoLive můžete prohlížet náhled webových stránek a testovat vazby. Můžete zobrazit náhled filmů QuickTime, animovaných souborů GIF nebo jakýchkoli jiných položek médií zásuvných modulů, které Adobe GoLive podporuje. Náhled aproximuje to, jak bude stránka vypadat, až bude nakonec publikována na Webu. Kromě prohlížení náhledu stránky v Adobe GoLive, byste měli vždy prohlédnout náhled stránky s použitím různých prohlížečů, verzí prohlížečů a platforem. Prohlížeče musíte použít k určení potenciálních rozdílů mezi prohlížeči a k prohlížení náhledu JavaScriptu, DHTML, animací Macromedia Shockwave nebo dalších položek, pro které Adobe GoLive neposkytuje standardní podporu. Pokud je to požadováno, můžete spustit prohlížeč z Adobe GoLive tak, že nejdříve přidáte prohlížeče do nabídky Show in Browser (Zobrazit v prohlížeči). Poznámka: Pokud používáte Adobe GoLive pro Windows, musíte instalovat Microsoft Internet Explorer před tím, než můžete prohlížet náhled stránek v Adobe GoLive. Jak prohlížet náhled stránky pomocí Adobe GoLive:

1 Zkontrolujte, že je aktivován modul Preview Mode (Režim náhledu) v okně předvoleb Preferences Modules (Předvolby Moduly).

Abyste aktivovali modul Preview Mode, zvolte Edit > Preferences (Úpravy > Předvolby), klepněte na Modules v levém panelu dialogového okna Preferences, vyberte Preview Mode a klepněte na OK. 2 Klepněte na záložku Layout Preview (Náhled rozvržení) v okně dokumentu.

Chcete-li zkontrolovat rozvržení stránky, posouvejte zobrazení okna dokumentu. Abyste otestovali své vazby, klepněte na všechny aktivní body na stránce. (V Mac OS otevře Adobe GoLive každou volanou stránku v jejím vlastním okně.)


Náhled své stránky můžete také prohlížet v zobrazení Layout (Rozvržení) nebo Layout Preview (Náhled rozvržení) pomocí palety View Controller (Správce zobrazení). Zvolte Window > View Controller (Okno > Správce zobrazení). V paletě View Controller zvolte volbu z rozbalovací nabídky Root CSS, aby se zobrazil simulovaný náhled stránky ve webovém prohlížeči pro Windows nebo Mac OS. Další informace o používání palety View Controller viz „Výběr voleb zobrazení“ na straně 109. Jak přidat prohlížeče do nabídky Show in Browser (Zobrazit v prohlížeči):

1 Zkontrolujte, že je každý prohlížeč instalovaný na vašem pevném disku, a že všechny zásuvné moduly, které jsou potřeba pro prohlížení náhledu, jsou umístěny ve složce Plug-ins prohlížeče (nebo v jakémkoli jiném místě, které prohlížeč používá pro doplňky pro multimédia). 2 Zvolte Edit > Preferences (Úpravy > Předvolby) a klepněte na ikonu Browsers (Prohlížeče) v levém panelu dialogového okna Preferences. 3 Proveďte jeden z následujících úkonů: • Chcete-li přidat všechny prohlížeče na vašem pevném disku do seznamu prohlížečů, klepněte na Find

All (Najít všechny). • Chcete-li přidat jeden prohlížeč, klepněte na Add (Přidat). Potom vyberte prohlížeč a klepněte na

Open (Otevřít) (Windows) nebo klepněte na Add a potom klepněte na Done (Hotovo) (Mac OS). 4 V rolovacím okně vyberte jeden nebo víc prohlížečů, které chcete spouštět, když klepnete na tlačítko Show in Browser (Zobrazit v prohlížeči) ( ) v pruhu nástrojů nebo zvolíte Special > Show in Default Browser (Speciální > Zobrazit ve výchozím prohlížeči).

Poznámka: Většina prohlížečů umožňuje otevřít najednou pouze jednu verzi. Můžete například najednou otevřít Netscape Navigator a Microsoft Internet Explorer, ale ne Netscape Navigator 3.0 a 4.0. Když jsou v předvolbách Browsers (Prohlížeče) vybrány dva nebo více typů prohlížečů, jako například Navigator a Internet Explorer, zobrazí se v pruhu nástrojů obecná ikona prohlížeče. Když je vybraný jen jeden typ prohlížeče, například Navigator 3.0 a 4.0, zobrazí se v pruhu nástrojů ikona programu tohoto prohlížeče. 5 Chcete-li odstranit prohlížeč z rolovacího okna, vyberte ho a klepněte na Remove (Odstranit). 6 Klepněte na OK. Jak zobrazit náhled stránky v prohlížeči:

1 Přidejte prohlížeče do nabídky Show in Browser (Zobrazit v prohlížeči). 2 Proveďte jeden z následujících úkonů: • Chcete-li zobrazit náhled stránky v prohlížeči nebo v prohlížečích, které jste vybrali v předvolbách

Browsers (Prohlížeče), klepněte na tlačítko Show in Browser (Zobrazit v prohlížeči) ( ) v pruhu nástrojů, nebo zvolte Special > Show in Default Browser (Speciální > Zobrazit ve výchozím prohlížeči).


• Chcete-li zobrazit náhled stránky v jednom prohlížeči, klepněte na trojúhelník v pravém dolním rohu

tlačítka Show in Browser v pruhu nástrojů, a potom zvolte požadovaný prohlížeč z rozbalovací nabídky. Nebo zvolte prohlížeč z nabídky Special > Show in Browser (Speciální > Zobrazit v prohlížeči).

Tlačítko a rozbalovací nabídka Show in Browser (Zobrazit v prohlížeči)

Zobrazení informací o dokumentu Dialogové okno Document Statistics (Statistika dokumentu) programu Adobe GoLive můžete použít k zobrazení všeobecných informací o webové stránce, včetně její velikosti v bytech, počtu slov, počtu znaků a přibližného času potřebného k jejímu stažení. Uvědomte si, že do velikosti v bytech se nezahrnují média jako například QuickTime nebo zvuky (protože mohou být nastaveny tak, že se začnou přehrávat dříve, než jsou plně stažené). Navíc jsou uvedené doby stahování jen hrubé odhady, založené na příznivých okolnostech. Vnější vlivy, jako například silná zátěž sítě a přetížení webového serveru, mohou podstatně změnit skutečný čas, potřebný pro stažení stránky. Jak zobrazit informace pro současnou stránku:

Zvolte Special > Dokument Statistics (Speciální > Statistika dokumentu). Když skončíte s prohlížením informací o dokumentu, klepněte na OK.

5

155

Kapitola 5: Práce s tabulkami řidání tabulek do webových stránek a jejich formátování podle požadovaného vzhledu je s Adobe GoLive snadné. Můžete rychle přidat tabulku na stránku a nastavit její formátovací volby, jako je například počet řádků a sloupců tabulky. Chcete-li přidat do tabulky obsah, můžete psát přímo do libovolné buňky tabulky nebo importovat data z textového souboru. Aby se text objevil v požadovaném pořadí, můžete s použitím palety Table (Tabulka) uspořádat obsah tabulky číselně a abecedně. Chcete-li na tabulku aplikovat styl, můžete aplikovat obraz pozadí na tabulku nebo jednu z jejích buněk, a zvolit jeden z několika předdefinovaných stylů tabulky v paletě Table. Můžete dokonce vytvořit vlastní styl tabulky, uložit ho a znovu použít, abyste aplikovali shodný styl na tabulky v celém webovém místě.

P

Vytváření tabulek K uspořádání textu a objektů na stránce nebo k prezentaci údajů tabulkového kalkulátoru nebo jiných informací v řádcích a sloupcích můžete použít tabulku. Do buněk tabulky můžete vložit text a téměř libovolný objekt, počínaje obrazem přes jinou tabulku až po film QuickTime. Na rozdíl od textu přímo na stránce, který se zalamuje podle nastavené velikosti okna prohlížeče, je zalomení textu v buňce tabulky dáno nastavenou šířkou buňky. Tabulku lze podobně jako většinu dalších objektů v Adobe GoLive umístit přímo do okna dokumentu nebo pro přesnější umístění na stránce využít mřížku rozvržení. Poznámka: Rozmístění textu a objektů pomocí tabulek může být značně zdlouhavé. Ke snadnějšímu umístění textu a objektů můžete použít mřížku rozvržení. Další informace o používání mřížky rozvržení viz „Používání mřížky rozvržení“ na straně 134. Jak vytvořit tabulku:


).

3 Přetáhněte ikonu tabulky z palety Objects do okna dokumentu nebo poklepejte na ikonu v paletě Objects. 4 Zvolte Window > Inspector (Okno > Inspektor). 5 V paletě Table Inspector klepněte na záložku Table. 6 Změnu počtu řádků nebo sloupců tabulky proveďte jedním z následujících úkonů: • Zadejte požadovaný počet řádků (Rows) nebo sloupců (Columns) v paletě Table Inspector. • Klepnutím do buňky se stisknutou klávesou Shift vyberte buňku. Pak klepněte na jedno

z následujících tlačítek v záložce Cell (Buňka) v paletě Table Inspector: tlačítko Add Row (Přidat řádek) ( ) přidá nad buňku prázdný řádek, tlačítko Add Column (Přidat sloupec) ( ) přidá vlevo od buňky prázdný sloupec, tlačítko Delete Row (Odstranit řádek) ( ) odstraní řádek obsahující buňku nebo tlačítko Delete Column (Odstranit sloupec) ( ) odstraní sloupec obsahující buňku.

156 KAPITOLA 5 Práce s tabulkami

• Klepnutím do buňky se stisknutou klávesou Shift vyberte buňku. Pak proveďte jeden z následujících

úkonů: stisknutím * přidejte nad buňku prázdný řádek, stisknutím + přidejte vlevo od buňky prázdný sloupec, stisknutím Shift+Delete odstraňte řádek obsahující buňku nebo stisknutím Delete odstraňte sloupec obsahující buňku. 7 Velikost tabulky změňte jedním z následujících úkonů: • Tabulku vyberte klepnutím na horní nebo levý okraj. V záložce Table v paletě Table Inspector zvolte

z rozbalovací nabídky položku pro šířku (Width) nebo výšku (Height) tabulky a zadejte požadovaný rozměr. Automatické nastavení optimální šířky nebo výšky proveďte volbou Auto. • Podržte Alt a klepněte na pravý nebo dolní okraj tabulky. Pak táhněte požadovaným směrem.

(Klepnutí s klávesou Alt nastaví jednotky pro šířku a výšku z Auto na Pixel (Obrazový bod), takže lze šířku nebo výšku změnit). 8 Velikosti řádku nebo sloupce tabulky změňte jedním z následujících úkonů: • Podržte Alt a klepněte na pravý nebo dolní okraj buňky v řádku nebo sloupci, jehož velikost chcete

změnit. Pak táhněte požadovaným směrem. • Vyberte buňku v řádku nebo sloupci, jehož velikost chcete změnit. (Buňku vyberte klepnutím se

stisknutou klávesou Shift uvnitř buňky.) V záložce Cell (Buňka) v paletě Table Inspector zvolte z rozbalovací nabídky volbu pro Width (Šířka) nebo Height (Výška) a zadejte požadovaný rozměr.

Jak přizpůsobit vzhled tabulky:

Poznámka: Kromě nastavení voleb v paletě Table Inspector můžete vzhled tabulky přizpůsobit aplikováním předdefinovaných stylů tabulky. Další informace o aplikování předdefinovaných stylů tabulky viz „Formátování tabulek pomocí předdefinovaných stylů“ na straně 167. 1 Vyberte tabulku klepnutím na její horní nebo levý okraj. 2 Zvolte Window > Inspector (Okno > Inspektor).


3 V paletě Table Inspector klepněte na záložku Table. 4 V paletě Table Inspector zadejte požadovanou šířku okraje (Border).

Pokud nastavíte šířku okraje 0, budou okraje v zobrazení Layout (Rozvržení) v Adobe GoLive ztlumené a v prohlížeči skryté. Chcete-li skrýt ztlumené okraje v zobrazení Layout, zvolte Edit > Hide Invisible Items (Úpravy > Skrýt neviditelné položky). 5 Chcete-li změnit svislé a vodorovné okraje uvnitř buněk tabulky, zadejte hodnotu pro Cell Pad (Odsazení v buňce). 6 Pokud chcete změnit mezery mezi buňkami tabulky, zadejte hodnotu pro Cell Space (Mezery buněk).

A

C

E

F B D

A. Okraj o šířce jednoho obr. bodu B. Okraj o šířce 15 obr. bodů C. Odsazení v buňce 0 obr. bodů D. Odsazení v buňce 10 obr. bodů E. Mezery buněk 2 obr. body F. Mezery buněk 5 obr. bodů

7 Abyste do tabulky aplikovali barvu pozadí, vyberte Color (Barvy). Klepnutím uvnitř barevného pole ho vyberte. Pak vyberte barvu v paletě Color (Barvy). Pokyny k používání palety Color viz „Práce s barvami“ na straně 142.

Poznámka: Pokud v tabulce použijete barvu pozadí a tabulku zobrazíte v náhledu v Adobe GoLive nebo v Netscape Navigatoru, barva se objeví pouze v buňkách tabulky, které obsahují text nebo jiný obsah. Tento problém můžete vyřešit tak, že do každé prázdné buňky tabulky vložíte nerozdělitelnou mezeru. Nerozdělitelnou mezeru vložte klepnutím do buňky a stisknutím Shift+mezerník (Windows) nebo Alt+mezerník (Mac OS). 8 Abyste zarovnali tabulku vzhledem k velikosti okna dokumentu, zvolte položku z rozbalovací nabídky Alignment (Zarovnání). (Nabídku Alignment nemůžete použít k zarovnání tabulky v mřížce rozvržení). Zvolte Default (Výchozí), aby se tabulka zarovnala automaticky tak, že její zarovnání odpovídá zarovnání okolního textu. 9 Pokud chcete přidat tabulce nadpis, zvolte Caption (Titulek) a z rozbalovací nabídky zvolte umístění titulku. 10 Pokud chcete jako pozadí tabulky použít obraz, zvolte BgImage (Obraz pozadí). Pak vyberte soubor obrazu tlačítkem Namířit a vybrat ( ) nebo tlačítkem Browse (Procházet).


Jak přizpůsobit řádek:

1 Vyberte řádek klepnutím na jeho levý okraj se stisknutou klávesou Shift.

Chcete-li upravit větší počet řádků, vyberte požadované řádky a pak zvolte z dostupných voleb v záložce Row (Řádek) v paletě Table Inspector. 2 Zvolte Window > Inspector (Okno > Inspektor). 3 V paletě Table Inspector klepněte na záložku Row. 4 Abyste svisle zarovnali text ve všech buňkách řádku, vyberte volbu z rozbalovací nabídky Vertical Alignment (Svislé zarovnání) v paletě Table Inspector. Chcete-li text svisle zarovnat podle předvoleb prohlížeče, vyberte Default (Výchozí). (V Adobe GoLive způsobí volba Default svislé zarovnání textu na střed). 5 Abyste vodorovně zarovnali text ve všech buňkách řádku, vyberte volbu z rozbalovací nabídky Horizontal Alignment (Vodorovné zarovnání). Chcete-li text vodorovně zarovnat podle předvoleb prohlížeče, vyberte Default (Výchozí). (V Adobe GoLive způsobí volba Default zarovnání textu na levý okraj buňky). 6 Chcete-li změnit výšku řádku, vyberte volbu z rozbalovací nabídky Height (Výška). Pak zadejte požadovaný rozměr. Zvolte Auto, chcete-li automaticky nastavit optimální výšku. 7 Chcete-li do řádku aplikovat barvu pozadí, vyberte Color (Barvy). Klepnutím uvnitř barevného pole ho vyberte. Pak vyberte barvu v paletě Color (Barvy). Pokyny k používání palety Color viz „Práce s barvami“ na straně 142. Jak přizpůsobit buňku:

1 Klepnutím do buňky se stisknutou klávesou Shift buňku vyberte.

Chcete-li přizpůsobit více buněk, vyberte požadované buňky a pak zvolte z dostupných voleb v záložce Cell (Buňka) v paletě Table Inspector. Chcete-li k výběru přidat buňky, podržte Shift a klepněte do každé další buňky. Další informace o vybírání více buněk viz „Vybírání v tabulkách“ na straně 161. 2 Zvolte Window > Inspector (Okno > Inspektor). 3 V paletě Table Inspector klepněte na záložku Cell (Buňka). 4 Chcete-li svisle zarovnat text v buňce, zvolte volbu z nabídky Vertical Alignment (Svislé zarovnání)

v paletě Table Inspector. Chcete-li text svisle zarovnat podle předvoleb prohlížeče, vyberte Default (Výchozí). (V Adobe GoLive způsobí volba Default svislé zarovnání textu na střed). 5 Chcete-li vodorovně zarovnat text v buňce, zvolte volbu z nabídky Horizontal Alignment (Vodorovné zarovnání). Chcete-li text vodorovně zarovnat podle předvoleb prohlížeče, vyberte Default (Výchozí). (V Adobe GoLive způsobí volba Default zarovnání textu na levý okraj buňky). 6 Chcete-li rozšířit buňku o jeden nebo více řádků směrem dolů, proveďte jeden z následujících úkonů:


• Zadejte požadovaný počet řádků pro Row Span (Rozsah řádků).

Buňka přes tři řádky • Stisknutím kláves Shift+šipka dolů rozšíříte buňku o jeden řádek směrem dolů. (Stisknutím kláves

Shift+šipka nahoru zúžíte buňku o jeden řádek směrem nahoru). 7 Chcete-li rozšířit buňku o jeden nebo více sloupců doprava, proveďte jeden z následujících úkonů: • Zadejte požadovaný počet sloupců pro Column Span (Rozsah sloupců). • Stisknutím kláves Shift+šipka doprava rozšíříte buňku o jeden sloupec směrem doprava.

(Stisknutím kláves Shift+šipka doleva zúžíte buňku o jeden sloupec směrem doleva). 8 Chcete-li upravit výšku nebo šířku buňky, zvolte volbu z nabídky Width (Šířka) nebo Height (Výška) a zadejte požadovaný rozměr. Zvolte Auto, chcete-li automaticky nastavit optimální šířku nebo výšku.

Když upravíte výšku nebo šířku buňky, Adobe GoLive automaticky nastaví šířku nebo výšku celého řádku nebo sloupce obsahujícího buňku. 9 Chcete-li buňku formátovat jako dílčí nadpis, vyberte Header Style (Styl nadpisu). 10 Chcete-li potlačit automatické zalamování textu v buňce, vyberte No Text Wrap (Bez zalamování). 11 Pokud chcete jako pozadí buňky použít obraz, vyberte BgImage (Obraz pozadí). Pak vyberte soubor obrazu tlačítkem Namířit a vybrat ( ) nebo tlačítkem Browse (Procházet). 12 Chcete-li přidat nad buňku prázdný řádek, klepněte na tlačítko Add Row (Přidat řádek) ( 13 Chcete-li přidat vlevo od buňky prázdný sloupec, klepněte na tlačítko Add Column (Přidat sloupec) ( ). 14 Chcete-li odstranit řádek nebo sloupec obsahující buňku, klepněte na tlačítko Delete Row (Odstranit řádek) ( ) nebo Delete Column (Odstranit sloupec) ( ).

).


Vložení textu do tabulky Adobe GoLive disponuje řadou možností pro vkládání textu do tabulek. Můžete přidat text zápisem do buňky, vložit textu zkopírovaný z jiné aplikace, přesunout text mezi buňkami přetažením nebo importovat data do tabulky z textového souboru. Když importujete data do tabulky, musíte zformátovat data v textovém souboru způsobem, který Adobe GoLive vyžaduje. U tabulek s jedinou buňkou stačí formátovat text podle požadovaného zobrazení v tabulce. Pro tabulky s více buňkami byste měli formátovat data tak, aby každý řádek textu představoval řádek tabulky a obsahoval oddělovače pro rozdělení údajů do sloupců (tabulátory, čárky, mezery nebo středníky). Většina tabulkových editorů může exportovat data do textového souboru v jednom z těchto formátů. Informace najdete v dokumentaci k tabulkovému procesoru. Jak zapsat text do buňky:

1 Klepnutím dovnitř buňky vložte do buňky kurzor. 2 Zapište požadovaný text. Jak zkopírovat text z jiné aplikace a vložit ho do buňky:

1 Vyberte text v libovolné aplikaci a zkopírujte ho. 2 Klepnutím dovnitř buňky vložte do buňky kurzor. 3 Zvolte Edit > Paste (Úpravy > Vložit), abyste text vložili do buňky. Jak přesunout text mezi buňkami:

1 Tažením vyberte text, který chcete přesunout. 2 Přetáhněte vybraný text do cílové buňky. Jak importovat do tabulky data z textového souboru:

1 Vytvořte textový soubor obsahující data, která chcete importovat do tabulky v Adobe GoLive. 2 V Adobe GoLive přidejte tabulku do okna dokumentu.

Nemusíte do tabulky přidávat řádky a sloupce pro importovaná data. Během importu dat do tabulky přidá Adobe GoLive podle potřeby další řádky a sloupce . 3 Zvolte Window > Inspector (Okno > Inspektor). 4 V paletě Table Inspector klepněte na záložku Table. 5 Klepněte na Browse (Procházet) vedle Import Tab-Text (Import textu s oddělovači). 6 Vyberte textový soubor, z nabídky Col. Separator (Oddělovač sloupců) vyberte oddělovač sloupců použitý v textovém souboru a klepněte na Open (Otevřít). 7 V případě potřeby upravte vzhled tabulky, její řádky nebo sloupce. Další informace viz „Vytváření

tabulek“ na straně 155.


Převedení tabulky na mřížku rozvržení Po vytvoření tabulky a jejím naplnění obsahem se můžete rozhodnout, že dáte přednost uspořádání stránky pomocí mřížky rozvržení místo tabulky. V zobrazení Layout (Rozvržení) Adobe GoLive lze tabulku snadno převést na mřížku rozvržení. Každá buňka tabulky obsahující text nebo objekt se převede na textový rámeček se stejným obsahem jako buňka. Jak převést tabulku na mřížku rozvržení s textovými rámečky:

1 Vyberte tabulku klepnutím na její horní nebo levý okraj. 2 Zvolte Window > Inspector (Okno > Inspektor). 3 V paletě Table Inspector klepněte na záložku Table. 4 Klepnutím na tlačítko Convert (Převést) převeďte tabulku na mřížku rozvržení s textovými rámečky. 5 V případě potřeby upravte vzhled mřížky rozvržení a textových rámečků. Pokyny viz „Používání

mřížky rozvržení“ na straně 134 a „Používání textových rámečků“ na straně 136.

Vybírání v tabulkách Adobe GoLive disponuje řadou možností pro vytváření výběru v tabulkách. Po provedení výběru můžete na celou tabulku, na řádek, na sloupec nebo na jednotlivé buňky aplikovat volby formátování. Výběr můžete vytvořit přímo v okně dokumentu nebo v náhledu tabulky, který se objeví v záložce Select (Výběr) v paletě Table. Při použití kterékoli metody se výběr aktivuje jak v okně dokumentu, tak v paletě Table, která pro označení výběru používá modré čáry. Na výběr můžete aplikovat volby formátování, mezi které patří sada písem, relativní velikost písma, fyzické styly, strukturální styly a dostupné volby v paletě Table Inspector, například vodorovné zarovnání, barva pozadí nebo obraz pozadí. Jak vytvořit výběr v tabulce v okně dokumentu:

Proveďte jeden z následujících úkonů: • Tabulku vyberte klepnutím na její horní nebo levý okraj. • Chcete-li vybrat řádek, podržte Shift a klepněte na jeho levý okraj. Chcete-li k výběru přidat další

řádky, podržte Shift a klepněte na levý okraj každého dalšího řádku. • Chcete-li vybrat sloupec, podržte Shift a klepněte na jeho horní okraj. Chcete-li k výběru přidat další

sloupce, podržte Shift a klepněte na horní okraj každého dalšího sloupce. • Chcete-li výběr v řádku invertovat, podržte Shift a klepněte na levý okraj řádku. (Adobe GoLive zruší

výběr dříve aktivních buněk v řádku a vybere dříve neaktivní buňky).


• Chcete-li výběr ve sloupci invertovat, podržte Shift a klepněte na horní okraj sloupce. (Adobe GoLive

zruší výběr dříve aktivních buněk ve sloupci a vybere dříve neaktivní buňky).

Klepnutím na horní okraj sloupce s klávesou Shift se výběr invertuje. • Klepnutím do buňky s klávesou Shift vyberte buňku. Chcete-li k výběru přidat buňky, podržte Shift

a klepněte dovnitř každé další buňky. Buňku můžete také vybrat klepnutím na její spodní nebo pravý okraj. Chcete-li k výběru přidat buňky, podržte Shift a klepněte na spodní nebo pravý okraj dalších buněk. Když je kurzor umístěný uvnitř buňky, můžete buňku vybrat stisknutím Ctrl+Enter. Nebo můžete do vybrané buňky vložit kurzor stisknutím klávesy Enter. • Chcete-li vybrat sousední buňky v tabulce, podržte Shift a táhněte přes požadované buňky. • Chcete-li vybrat všechny buňky v tabulce, podržte Shift a klepnutím do kterékoliv buňky ji vyberte,

a pak zvolte Edit > Select All (Úpravy > Vybrat vše). Poznámka: V závislosti na výběru Adobe GoLive některé volby v paletě Table Inspector deaktivuje. Chcete-li například rozšířit buňku o jeden nebo více řádků směrem dolů, musíte vybrat jednu buňku a pak v paletě Table Inspector zadat požadovaný počet řádků Row Span v záložce Cell. Pokud vyberete více než jednu buňku, volba Row Span nebude k dispozici. Jak vytvořit výběr v tabulce pomocí záložky Select v paletě Table Inspector:

1 Vyberte tabulku klepnutím na její horní nebo levý okraj. 2 Zvolte Window > Table (Okno > Tabulka). 3 V paletě Table klepněte na záložku Select (Výběr) a pak proveďte jeden z následujících úkonů: • Řádek vyberte klepnutím na jeho levý okraj. Chcete-li k výběru přidat další řádky, podržte Shift

a klepněte na levý okraj každého dalšího řádku. (Řádek spolu se sousedními řádky můžete také vybrat tažením).


• Sloupec vyberte klepnutím na jeho horní okraj. Chcete-li k výběru přidat další sloupce, podržte Shift

a klepněte na horní okraj každého dalšího sloupce. (Sloupec spolu se sousedními sloupci můžete také vybrat tažením).

• Chcete-li výběr v řádku invertovat, podržte Shift a klepněte na levý okraj řádku. (Adobe GoLive zruší

výběr dříve aktivních buněk v řádku a vybere dříve neaktivní buňky). • Chcete-li výběr ve sloupci invertovat, podržte Shift a klepněte na horní okraj sloupce. (Adobe GoLive

zruší výběr dříve aktivních buněk ve sloupci a vybere dříve neaktivní buňky). • Buňku vyberte klepnutím dovnitř buňky. Chcete-li k výběru přidat buňky, podržte Shift a klepněte

dovnitř každé další buňky. • Chcete-li vybrat sousední buňky, podržte Shift a táhněte přes požadované buňky. • Chcete-li vybrat všechny buňky v tabulce, vyberte všechny buňky tažením nebo podržte Shift,

klepnutím do kterékoliv buňky ji vyberte, a pak zvolte Edit > Select All (Úpravy > Vybrat vše).

Vytváření výběrů ve vnořených tabulkách Umístěním tabulky do buňky jiné tabulky můžete vytvořit vnořenou tabulku. Pak můžete do buňky vnořené tabulky umístit další tabulku a tak dále. S rostoucí hloubkou vnoření může být obtížnější vybrat vnořenou tabulku nebo buňky ve vnořených tabulkách. Adobe GoLive ale obsahuje několik klávesových zkratek pro vytváření výběrů při práci s vnořenými tabulkami. Jak vytvořit výběr ve vnořené tabulce:

1 Klepněte do buňky v nejhlouběji vnořené tabulce. 2 Stisknutím Ctrl+Enter vyberte buňku. 3 Dalším stisknutím Ctrl+Enter vyberte nejhlouběji vnořenou tabulku. 4 Dalším stisknutím Ctrl+Enter vyberte buňku, která obsahuje nehlouběji vnořenou tabulku. 5 Opakovaným stisknutím Ctrl+Enter vyberte další rodičovskou tabulku a buňku, až vyberete vnější tabulku.


Vyjmutí, kopírování a vkládání výběru tabulky Pokud výběr v tabulce obsahuje jednu buňku nebo blok sousedících buněk, Adobe GoLive umožňuje jeho vyjmutí, kopírování a vkládání pomocí nabídky Edit (Úpravy). Vyjmutím výběru můžete z tabulky odstranit jednu nebo několik buněk. Zkopírováním a vložením výběru můžete nahradit obsah podobného bloku buněk v tabulce, umístit výběr do buňky jako vnořenou tabulku a vložit výběr jako novou tabulku dovnitř textového rámečku nebo plovoucího rámečku. Pokud kopírováním a vložením chcete nahradit obsah podobného bloku buněk, musí se velikost cílového výběru shodovat s vkládaným výběrem. Pokud například kopírujete výběr čtyř buněk z řádku, můžete výběrem nahradit obsah pouze jiných čtyř buněk v řádku (cílový výběr). Jak vyjmout výběr z tabulky:

1 Vyberte jednu buňku nebo blok sousedících buněk podle popisu v „Vybírání v tabulkách“ na

straně 161. 2 Zvolte Edit > Cut (Úpravy > Vyjmout). Jak zkopírovat a vložit výběr v tabulce:

1 Vyberte jednu buňku nebo blok sousedících buněk podle popisu v „Vybírání v tabulkách“ na

straně 161. 2 Chcete-li výběr zkopírovat, zvolte Edit > Copy (Úpravy > Kopírovat). 3 Proveďte jeden z následujících úkonů: • Chcete-li nahradit obsah podobného bloku buněk v tabulce, vyberte blok buněk, které chcete nahradit

a zvolte Edit > Paste (Úpravy > Vložit). • Chcete-li výběr umístit do buňky jako vnořenou tabulku, klepněte uvnitř buňky, do které chcete vložit

výběr a zvolte Edit > Paste (Úpravy > Vložit). Poznámka: Výběr můžete umístit jako vnořenou tabulku pouze tehdy, jestliže obsahuje více než jednu buňku. Pokud je vybraná pouze jedna buňka, Adobe GoLive pouze nahradí obsah buňky, do které jste klepnuli.

A

B C

A. Vyberte a zkopírujte buňky. B. Klepněte uvnitř jiné buňky. C. Vložte výběr buněk jako vnořenou tabulku.


• Chcete-li výběr umístit jako novou tabulku do textového rámečku nebo do plovoucího rámečku,

klepněte do rámečku, do kterého chcete výběr umístit a zvolte Edit > Paste (Úpravy > Vložit).

Uspořádání obsahu tabulky S použitím záložky Select (Výběr) palety Table můžete seřadit řádky tabulky tak, aby se obsah jednoho nebo více sloupců uspořádal v číselném a abecedním pořadí, nebo můžete seřadit sloupce tabulky tak, aby se obsah jednoho nebo více řádků uspořádal v číselném a abecedním pořadí. Uspořádat můžete celou tabulku, určité řádky, určité sloupce nebo určité buňky. Pokud například řadíte v tabulce řádky a nejvyšší řádek obsahuje záhlaví sloupců, můžete seřadit všechny řádky tabulky s výjimkou prvního řádku. Primárním kritériem řazení v Adobe GoLive je číselné pořadí, sekundárním kritériem pořadí abecední. Při uspořádání se rozlišuje velikost znaků. Ve výchozím nastavení řadí Adobe GoLive ve vzestupném pořadí. V případě potřeby můžete určit seřazení v sestupném pořadí. Jak uspořádat obsah tabulky:

1 Vyberte tabulku klepnutím na její horní nebo levý okraj. 2 Zvolte Window > Table (Okno > Tabulka). 3 V paletě Table klepněte na záložku Select (Výběr). 4 Oblast tabulky, kterou chcete uspořádat, určete výběrem v tabulce v okně dokumentu nebo v záložce Select v paletě Table Inspector. Pokud chcete uspořádat celou tabulku, vyberte tabulku. Chcete-li uspořádat určité řádky, sloupce nebo buňky v tabulce, vyberte pouze požadovanou oblast tabulky. Další informace viz „Vybírání v tabulkách“ na straně 161. 5 V paletě Table zvolte z nabídky Sort (Seřadit), zda chcete seřadit řádky nebo sloupce tabulky. Zvolte Rows (Řádky), chcete-li seřadit obsah jednoho nebo více sloupců v číselném a abecedním pořadí. Zvolte Columns (Sloupce), chcete-li seřadit obsah jednoho nebo více řádků v číselném a abecedním pořadí.


6 V levé nabídce nad nabídkou Sort proveďte jeden z následujících úkonů: • Pokud jste v bodu 5 zvolili Rows (Řádky), zvolte primární sloupec tabulky, jehož obsah chcete

uspořádat v číselném a abecedním pořadí. První sloupec tabulky vyberte volbou 1, druhý sloupec vyberte volbou 2 a tak dále.

• Pokud jste v bodě 5 vybrali Columns (Sloupce), zvolte primární řádek tabulky, jehož obsah chcete

uspořádat v číselném a abecedním pořadí. První řádek tabulky vyberte volbou 1, druhý řádek volbou 2 a tak dále. Standardně se zvolený primární sloupec nebo řádek seřadí ve vzestupném pořadí, jak indikuje tlačítko vzestupného pořadí ( ) vedle levé nabídky. Pokud chcete uspořádat primární sloupec nebo řádek v sestupném pořadí, klepněte na tlačítko vzestupného pořadí, které se změní na tlačítko sestupného pořadí ( ). 7 V prostřední nabídce nad nabídkou Sort proveďte jeden z následujících úkonů: • Pokud nechcete určit sekundární sloupec nebo řádek pro řazení, zvolte None (Žádný). • Pokud jste v bodu 5 vybrali Rows (Řádky), zvolte sekundární sloupec tabulky, jehož obsah chcete

uspořádat v číselném a abecedním pořadí. • Pokud jste v bodu 5 vybrali Columns (Sloupce), zvolte sekundární řádek tabulky, jehož obsah chcete

uspořádat v číselném a abecedním pořadí. Standardně se zvolený sekundární sloupec nebo řádek seřadí ve vzestupném pořadí, jak indikuje tlačítko vzestupného pořadí vedle prostřední nabídky. Pokud chcete uspořádat sekundární sloupec nebo řádek v sestupném pořadí, klepněte na tlačítko vzestupného pořadí. 8 V pravé nabídce nad nabídkou Sort proveďte jeden z následujících úkonů: • Pokud nechcete určit terciální sloupec nebo řádek pro řazení, zvolte None (Žádný). • Pokud jste v bodu 5 vybrali Rows (Řádky), zvolte terciální sloupec tabulky, jehož obsah chcete

uspořádat v číselném a abecedním pořadí.


• Pokud jste v bodu 5 vybrali Column (Sloupce), zvolte terciální řádek tabulky, jehož obsah chcete

uspořádat v číselném a abecedním pořadí. Standardně se zvolený terciální sloupec nebo řádek seřadí ve vzestupném pořadí, jak indikuje tlačítko vzestupného pořadí vedle pravé nabídky. Pokud chcete uspořádat terciální sloupec nebo řádek v sestupném pořadí, klepněte na tlačítko vzestupného pořadí. 9 Klepnutím na Sort (Seřadit) uspořádejte tabulku podle zadaných kritérií.

Formátování tabulek pomocí předdefinovaných stylů Adobe GoLive obsahuje řadu předdefinovaných stylů, které můžete použít k rychlému formátování tabulky. V záložce Style palety Table můžete zobrazit náhled různých stylů, a také přizpůsobit každý styl tím, že určíte, které řádky a sloupce obsahují styly, které se budou v tabulce opakovat. Pokud budete chtít zobrazit vzhled tabulky s použitím předdefinovaného stylu, můžete styl snadno aplikovat a později odstranit, pokud vám nebude vyhovovat. Kromě používání předdefinovaných stylů obsažených v Adobe GoLive můžete také vytvářet vlastní styly tabulek, které můžete uložit a aplikovat na další tabulky na webových stránkách. Tím můžete zajistit jednotný vzhled celého webového místa. Jak na tabulku aplikovat předdefinovaný styl:

1 Vyberte tabulku klepnutím na její horní nebo levý okraj. 2 Zvolte Window > Table (Okno > Tabulka). 3 V paletě Table klepněte na záložku Style (Styl). 4 Zvolte předdefinovaný styl z nabídky v levém horním rohu v záložce Style.

V záložce Style se zobrazí náhled stylu. Řádky a sloupce obsahující styly, které se budou v průběhu tabulky opakovat, jsou označeny modrými hranatými závorkami. Pokud například modrá hranatá závorka označuje druhý a třetí řádek, bude styl prvního řádku použit pouze v prvním řádku, zatímco styly druhého a třetího řádku se budou opakovat pro všechny ostatní řádky tabulky. Chcete-li výběr stylu z palety Table zrušit, klepněte na trojúhelník v pravém horním rohu palety Table a ze zobrazené nabídky palety Table zvolte Undo Select TableStyle (Zpět výběr stylu tabulky). Pokud chcete styl znovu vybrat, zvolte Redo Select TableStyle (Znovu výběr stylu tabulky) z nabídky palety Table. 5 Chcete-li změnit řádky nebo sloupce obsahující styl, který se bude v tabulce opakovat, upravte velikost modrých hranatých závorek tak, aby označovaly požadované řádky či sloupce. Změnu velikosti proveďte přetažením některého z okrajů modré hranaté závorky. Oblast, ve které je možné měnit velikost závorek, je označena modrými linkami na obou okrajích závorek.

Poznámka: U některých stylů nemusí být možné změnit řádky nebo sloupce obsahující styl, který se bude v tabulce opakovat. Pokud je například styl všech sloupců stejný a modré hranaté závorky označují druhý sloupec, nelze styl upravit změnou velikosti závorek.


6 Klepnutím na Apply (Aplikovat) aplikujte styl na tabulku.

Jak odstranit předdefinovaný styl z tabulky:

1 Vyberte tabulku klepnutím na její horní nebo levý okraj. 2 Zvolte Window > Table (Okno > Tabulka). 3 V paletě Table klepněte na záložku Style (Styl). 4 Klepnutím na Clear (Odstranit) odstraňte předdefinovaný styl z tabulky. Jak přidat vlastní styl do záložky Style palety Table:

1 Vytvořte tabulku a upravte její vzhled podle popisu v „Vytváření tabulek“ na straně 155.

Poznámka: Při vytváření tabulky, kterou chcete použít pro vytvoření vlastního stylu tabulky, záleží na tom, zda zadáte nebo nezadáte nulovou hodnotu pro Border (Okraj), Cell Pad (Odsazení v buňce) nebo Cell Space (Mezery buněk) v záložce Table palety Table Inspector. Pokud v těchto polích zadáte nulové hodnoty, nebude mít tabulka, formátovaná vytvořeným stylem, okraje, odsazení nebo mezery. Pokud necháte tato textová pole prázdná, zachová se v tabulce, formátované vytvořeným stylem, předchozí nastavení okrajů, odsazení nebo mezer. 2 Vyberte tabulku klepnutím na její horní nebo levý okraj. 3 Zvolte Window > Table (Okno > Tabulka). 4 V paletě Table klepněte na záložku Style (Styl). 5 Klepnutím na New (Nový) vytvořte nový styl tabulky. 6 Do textového pole nad tlačítkem New zadejte název nového stylu tabulky. 7 Klepnutím na Capture (Převzít) převezmete styl vybrané tabulky v okně dokumentu a uložíte ho jako nový styl tabulky. 8 Chcete-li aplikovat nový styl na jinou tabulku, vyberte požadovanou tabulku v okně dokumentu, zvolte nový styl tabulky z nabídky v levém horním rohu záložky Style a klepněte na Apply (Aplikovat).


Jak odstranit styl ze záložky Style palety Table:

1 Zvolte Window > Table (Okno > Tabulka). 2 V paletě Table klepněte na záložku Style (Styl). 3 Zvolte předdefinovaný styl z nabídky v levém horním rohu v záložce Style. 4 Klepnutím na Delete (Odstranit) odstraňte styl z nabídky.

6

173

Kapitola 6: Obrazy a návrh stránky dobe GoLive nabízí velké množství voleb a nástrojů pro kombinování obrazů a textů na webové stránce. Adobe GoLive dokonce umožňuje snadno a inteligentně přidávat do webových stránek obrazy ve vlastních formátech Adobe Photoshopu, Illustratoru a LiveMotion. Adobe GoLive umí automaticky převádět zdrojové soubory z těchto programů do jednoho z formátů podporovaných současnými webovými prohlížeči, optimalizovat obrazy a udržovat automatické vazby mezi kopií pro Web a zdrojovým souborem, umožňující snadné úpravy a automatickou aktualizaci.

A

O automatických objektech Automatické objekty (Smart Objects) nabízejí podstatně efektivnější způsob přidávání obrazů do webových stránek než tradiční pracovní postup. Vícenásobné využití stejných obrazů pro použití v různých médiích, jako je například tisk, CD-ROM a online, je nyní snadnější a praktičtější. Automatické objekty umožňují návrhářům, aby se soustředili na rozvržení a návrh a ne na mechaniku převádění souborů mezi formáty. Automatické objekty odstraňují pracný proces údržby a úpravy zdrojových souborů v jednom formátu, sledování umístění, kde se zdrojový soubor pro optimalizované obrazy nachází, jejich převádění do webového formátu v samostatném programu, importování převedených souborů do Adobe GoLive a poté udržování synchronizace obou skupin souborů. Adobe GoLive umožňuje importovat soubory Photoshopu (PSD, BMP, PICT pouze v Mac OS, PCX, Pixar, Amiga IFF, TIFF a TARGA), Illustratoru a LiveMotion, aniž byste se museli zabývat touto akrobacií. Adobe GoLive vytvoří kopii zdrojového souboru ve webovém formátu a udržuje vazbu na zdrojový soubor. Formát zdrojového souboru se nemění, ale nastavení webového formátu, určená v Adobe GoLive, se uloží se zdrojovým souborem. Tomuto objektu s vazbou na zdroj se říká automatický objekt (Smart Object). Když poklepete na automatický objekt v okně dokumentu, otevře se zdrojový soubor ve Photoshopu, Illustratoru nebo LiveMotion, podle typu souboru. Když provedete změny ve zdrojovém obraze nebo změníte velikost automatického objektu v Adobe GoLive, Adobe GoLive automaticky aktualizuje kopii ve webovém formátu, když se vrátíte na webovou stránku obsahující obraz, s použitím stejných nastavení webového formátu, která jste určili, když jste vytvořili automatický objekt. Další informace o webových formátech viz „O formátech souborů“ na straně 206.

Přidání automatického objektu na webovou stránku Automatické objekty poskytují snadný způsob, jak začlenit obrazy Adobe Photoshopu, Illustratoru a LiveMotion do webových stránek. Obecný postup pro libovolný druh automatického objektu je podobný: přetáhněte ikonu automatického objektu (Smart Object) ze záložky Smart (Automatické) palety Objects (Objekty) na webovou stránku a nastavte zdrojový soubor automatického objektu. Jak přidat automatický objekt na webovou stránku:

1 Klepněte na záložku Smart Object (Automatický objekt) palety Objects.

174 KAPITOLA 6 Obrazy a návrh stránky

2 Přetáhněte ikonu automatického objektu pro typ objektu, který vytváříte (Adobe Photoshop, Illustrator nebo LiveMotion) ze záložky Smart (Automatické) palety Objects na webovou stránku. 3 Vyberte vyhrazený prostor pro automatický objekt a klepněte na tlačítko Browse (Procházet) ( ) vedle textového pole Source (Zdroj) v paletě Smart Image Inspector (Inspektor automatického obrazu). 4 Vyberte požadovaný obrazový soubor a klepněte na Open (Otevřít).

Instrukce o dalším postupu viz „Vytvoření vazby na soubory Photoshopu“ na straně 175, „Vytvoření vazby na soubory Illustratoru“ na straně 196 a „Vytvoření vazby na soubory LiveMotion“ na straně 197. Poznámka: Záložka Smart v paletě Objects zobrazuje ikony automatických objektů pouze pro programy, které máte instalované na svém počítači.

Použití automatických vazeb Grafické soubory importované do Adobe GoLive jako automatické objekty z Adobe Photoshopu, Illustratoru nebo LiveMotion mají automatickou vazbu (Smart Link), která umožňuje otevřít originální zdrojový soubor v jeho původní aplikaci, provést úpravy a pak automaticky aktualizovat kopii ve webovém formátu tak, aby odrážela provedené úpravy. Jak otevřít automatický objekt v jeho původní aplikaci:

Poklepejte na automatický objekt. Automatický objekt se otevře v původní aplikaci, a můžete upravovat obraz a uložit své úpravy do souboru. Když se vrátíte na webovou stránku v Adobe GoLive, která obsahuje kopii ve webovém formátu, Adobe GoLive aktualizuje kopii tak, aby odrážela úpravy.

Poznámka: Pokud se aplikace automatického objektu neotevře, zkuste následující postup. Zvolte Edit > Preferences (Úpravy > Předvolby), rozbalte ikonu předvoleb General (Všeobecné) v levém panelu a zvolte User Interface (Uživatelské rozhraní). Zkontrolujte, že je zapnutá volba Launch other applications to edit media files (Spouštět jiné aplikace pro úpravy souborů médií), zobrazená v pravém panelu.

Změna velikosti automatických objektů Velikost automatického objektu můžete v Adobe GoLive ručně změnit tak, že ho vyberete a táhnete za jedno z jeho táhel. Když uvolníte tlačítko myši, Adobe GoLive znovu generuje kopii ve webovém formátu s použitím naposledy aplikovaných nastavení optimalizace bez změny zdrojového souboru. Protože formáty Flash a SVG jsou vektorové, není nutná aktualizace objektů LiveMotion (vždy vytvářených ve formátu Flash) nebo automatických objektů Illustratoru ve formátu SVG nebo Flash.


Když změníte velikost obrazu, zobrazí Adobe GoLive v obraze výstražnou ikonu, upozorňující, že obraz může mít zbytečně velkou velikost souboru a nezobrazuje se v optimálním rozlišení. Velikost obrazu můžete snadno změnit na velikost původního zdrojového souboru klepnutím na tlačítko Auto-resize to original (Automaticky obnovit původní velikost) vpravo od hodnot nastavení velikosti v záložce Basic (Základní) v paletě Smart Object Inspector (Inspektor automatického objektu).

Vytvoření vazby na soubory Photoshopu Adobe GoLive umožňuje vytvořit na webové stránce vazbu na soubory Adobe Photoshopu. Soubory PSD musí být 8-bitové obrazy RGB a mohou obsahovat řezy (jakékoli připojené interaktivity, jako jsou rollovery nebo obrazové mapy a animace snímků se ignorují). Postupy pro vytváření vazeb na jednoduché obrazy Photoshopu a na obrazy s řezy se poněkud liší, jak je uvedeno v této části. Poznámka: Obrazy s přidanou interaktivitou nebo s animacemi snímků musí být řádně exportovány z Adobe ImageReady. Podrobnosti o exportu obrazů do optimálního formátu pro Adobe GoLive viz Příručka uživatele Adobe ImageReady. Adobe GoLive také podporuje formáty BMP, PICT (pouze v Mac OS), PCX, Pixar, Amiga IFF, TIFF a TARGA. Adobe GoLive vytvoří kopii zdrojového souboru ve webovém formátu a udržuje vazbu, zvanou automatická vazba (Smart Link), mezi oběma soubory. Pokud později změníte zdrojový obraz nebo velikost automatického objektu Photoshopu, Adobe GoLive automaticky aktualizuje kopii ve webovém formátu, když se vrátíte na stránku obsahující obraz. Můžete také poklepat na automatický objekt Photoshopu v okně dokumentu, čímž se otevře původní zdrojový obraz v Adobe Photoshopu. Poznámka: Soubory Photoshopu s vrstvami, importované jako automatické objekty, se v průběhu optimalizace a konverze převedou do jedné vrstvy. Pokud chcete zachovat vrstvy jako samostatné obrazy viz „Práce se soubory Photoshopu s vrstvami“ na straně 205. Adobe GoLive umožňuje rozsáhlou kontrolu optimalizace obrazů, navázaných jako automatické objekty Photoshopu v dialogovém okně Save For Web (Uložit pro Web), které se automaticky objeví, když poprvé vytvoříte automatický objekt Photoshopu. Dialog umožňuje zobrazit náhled optimalizovaného obrazu v různých webových formátech souboru a s různými atributy souboru. Můžete zobrazit náhled více verzí obrazu současně a modifikovat nastavení optimalizace s náhledem v obrazu, abyste vybrali nejlepší kombinaci nastavení pro své potřeby. Místo nastavování jednotlivých voleb můžete také použít předdefinovaná nastavení. Jak přidat jednoduchý automatický objekt Photoshopu:

1 Přetáhněte ikonu Smart Photoshop ze záložky Smart (Automatické) (

) palety Objects do okna

dokumentu nebo poklepejte na ikonu v paletě. 2 Vyberte vyhrazený prostor pro automatický objekt Photoshopu a klepněte na tlačítko Browse (Procházet) ( ) vedle textového pole Source (Zdroj) v paletě Smart Image Inspector.

Poznámka: Obraz můžete také vybrat tažením z tlačítka Namířit a vybrat ( ) na soubor obrazu v okně místa nebo přetažením obrazu z okna místa, z Finderu (Mac OS) nebo z pracovní plochy .


3 Vyberte požadovaný soubor Photoshopu a klepněte na Open (Otevřít). 4 V dialogovém okně Save For Web klepnutím na záložku nad obrazem vyberte zobrazení: • Originál, chcete-li zobrazit obraz bez optimalizace. • Optimalizovaný, chcete-li zobrazit obraz s aplikovanými současnými nastaveními optimalizace. • 2-Up (2 najednou), chcete-li zobrazit dvě verze obrazu vedle sebe. • 4-Up (4 najednou), chcete-li zobrazit čtyři verze obrazu vedle sebe.

Poznámka: Další podrobnosti o zobrazení viz „Zobrazení obrazů během optimalizace“ na straně 178. 5 Vyberte předdefinované optimalizační nastavení z nabídky Settings (Nastavení) nebo si vytvořte

vlastní nastavení pomocí dostupných nabídek a klepněte na OK.

6 Uložte kopii zdrojového souboru ve webovém formátu někam do složky místa (například do složky Images ve složce místa) a klepněte na Save (Uložit). Pokud neuložíte obraz do složky místa, vazba nebude platná.

Když je automatický objekt navázaný na zdrojový obraz, který obsahuje řezy, Adobe GoLive musí uložit každý řez jako samostatný obraz spolu s určitým kódem HTML. Nejdříve vás vyzve k určení místa, kde se automaticky vytvoří složka .data pro obrazy a HTML. Složka obsahuje řezy ve webovém formátu a také kód HTML, exportovaný s řezy. Jakákoli interaktivita připojená k řezům v původnímu souboru se ignoruje. Pro obrazy, které obsahují animace snímků nebo objekty interaktivních řezů s JavaScripty, exportujte nejdříve soubor z ImageReady do webového formátu přijatelného pro Adobe GoLive a pak importujte exportovaný soubor do Adobe GoLive.


Jak přidat automatický objekt Photoshopu s řezy:

1 Přetáhněte ikonu Smart Photoshop ze záložky Smart (Automatické) ( ) palety Objects do okna dokumentu nebo poklepejte na ikonu v paletě. 2 Vyberte vyhrazený prostor pro automatický objekt Photoshopu a klepněte na tlačítko Browse (Procházet) ( ) vedle textového pole Source (Zdroj) v paletě Smart Image Inspector (Inspektor automatického obrazu).

Poznámka: Obraz můžete také vybrat tažením z tlačítka Namířit a vybrat ( ) na soubor obrazu v okně místa nebo přetažením obrazu z okna místa, z Finderu (Mac OS) nebo z pracovní plochy. 3 Vyberte požadovaný soubor Photoshopu a klepněte na Open (Otevřít). 4 V následujícím dialogu vyberte cílové místo, kam chcete uložit výsledná data, a klepněte na Save (Uložit). 5 V dialogovém okně Save For Web klepnutím na záložku nad obrazem vyberte zobrazení: • Originál, chcete-li zobrazit obraz bez optimalizace. • Optimalizovaný, chcete-li zobrazit obraz s aplikovanými současnými nastaveními optimalizace. • 2-Up (2 najednou), chcete-li zobrazit dvě verze obrazu vedle sebe. • 4-Up (4 najednou), chcete-li zobrazit čtyři verze obrazu vedle sebe.

Poznámka: Podrobnosti o zobrazení viz „Zobrazení obrazů během optimalizace“ na straně 178. 6 Vyberte předdefinované nastavení optimalizace z nabídky Settings (Nastavení) nebo vytvořte vlastní nastavení pomocí dostupných nabídek a klepněte na OK. Pro každý řez můžete definovat jiné nastavení. Pokud obraz obsahuje automatické řezy, použije se jedno nastavení pro všechny automatické řezy.

Změna nastavení optimalizace Adobe GoLive umožňuje kdykoli změnit nastavení optimalizace u existujících automatických objektů Photoshopu, které již máte na své webové stránce. Jak změnit nastavení optimalizace pro automatický objekt Photoshopu:

1 Vyberte automatický objekt Photoshopu na webové stránce. 2 Klepněte na tlačítko Settings (Nastavení) v paletě Smart Object Inspector (Inspektor automatického objektu). (Pokud není paleta Smart Object Inspector viditelná, zvolte Window > Inspector (Okno > Inspektor).) 3 Vyberte předdefinované optimalizační nastavení z nabídky Settings (Nastavení) nebo si vytvořte vlastní nastavení pomocí dostupných nabídek a klepněte na OK. 4 Klepněte na Save (Uložit).

Poznámka: Další informace o všech volbách optimalizace, které jsou dostupné v dialogovém okně Save For Web viz „Nastavení voleb v dialogovém okně Save For Web“ na straně 179.


Zobrazení obrazů během optimalizace Volby zobrazení v Adobe GoLive umožňují snadno přepínat mezi optimalizovanou a původní (neoptimalizovanou) verzí obrazu a zobrazovat až čtyři verze optimalizovaného obrazu současně. Adobe GoLive poskytuje úplnou kontrolu nad optimalizací obrazů Photoshopu v newebových formátech, které importujete pomocí záložky Smart (Automatické) palety Objects. Když vložíte automatický objekt Photoshop a vyberete soubor, Adobe GoLive zobrazí dialogové okno Save For Web (Uložit pro Web). V zobrazení 2-Up (2 najednou) a 4-Up (4 najednou) se pod každým optimalizovaným obrazem standardně objeví anotační plocha ukazující jeho optimalizační nastavení. Jak vybrat zobrazení při optimalizaci obrazů:

1 Importujte automatický objekt Photoshopu. (Další detaily viz „Vytvoření vazby na soubory

Photoshopu“ na straně 175.) 2 V dialogovém okně Save For Web klepnutím na záložku nad obrazem vyberte zobrazení: • Originál, chcete-li zobrazit obraz bez optimalizace. • Optimalizovaný, chcete-li zobrazit obraz s aplikovanými současnými nastaveními optimalizace. • 2-Up (2 najednou), chcete-li zobrazit dvě verze obrazu vedle sebe. • 4-Up (4 najednou), chcete-li zobrazit čtyři verze obrazu vedle sebe.

Poznámka: Když vyberete zobrazení 2-Up (2 najednou) nebo 4-Up (4 najednou), Adobe GoLive určí rozvržení obrazů v závislosti na poměru stran (poměr šířky k výšce) obrazu a na tom, zda jsou zobrazeny anotace nebo pravítka. Obrazy se mohou objevit ve svislém uspořádání, vodorovném uspořádání nebo v uspořádání 2 x 2 (dvě řady a dva sloupce). Uspořádání 2 x 2 je k dispozici pouze pro zobrazení 4-Up (4 najednou). Zobrazení 2-Up (2 najednou) standardně zobrazuje původní obraz a optimalizovaný obraz se současnými nastaveními optimalizace a zobrazení 4-Up (4 najednou) původní obraz, optimalizovaný obraz se současnými nastaveními a dvě menší verze obrazu nižší kvality, vytvořené modifikací současného nastavení optimalizace. V zobrazení 2-Up (2 najednou) nebo 4-Up (4 najednou) můžete vybrat verzi obrazu, na kterou se aplikují nová nastavení optimalizace. Zobrazení 2-Up a 4-Up můžete automaticky znovu generovat – vytvořit nové optimalizované verze obrazu na základě vybrané verze. Optimalizovanou verzi můžete také obnovit na původní verzi obrazu. Jak znovu generovat optimalizované verze obrazu v zobrazení 2-Up nebo 4-Up:

1 V zobrazení 2-Up nebo 4-Up vyberte optimalizovanou verzi obrazu. 2 V panelu Optimize (Optimalizovat) v dialogovém okně Save For Web vyberte Repopulate Views (Znovu generovat zobrazení) z nabídky Settings (Nastavení).


Adobe GoLive vytvoří menší optimalizované verze obrazu na základě nastavení optimalizace vybrané verze. Vybraná verze a původní verze, jsou-li zobrazeny, se během nového vytváření zobrazení nemění. Proto příkaz Repopulate Views funguje v zobrazení 2-Up pouze v případě, že není zobrazena původní verze obrazu.

Příkaz Repopulate Views (Znovu generovat zobrazení) v Adobe GoLive Jak obnovit optimalizovanou verzi obrazu na původní verzi:

1 V zobrazení 2-Up (2 najednou) nebo 4-Up (4 najednou) vyberte optimalizovanou verzi obrazu. 2 V panelu Optimize (Optimalizovat) v dialogovém okně Save For Web zvolte Original (Originál) z nabídky Settings.

Nastavení voleb v dialogovém okně Save For Web Panel Optimize v dialogovém okně Save For Web (Uložit pro Web) se používá k výběru formátu komprese souboru a dalších nastavení optimalizace pro automatický obraz Photoshopu. Obraz můžete také optimalizovat na určenou velikost souboru s použitím současných nastavení optimalizace nebo automaticky generovat soubor GIF nebo JPEG. Jak zobrazit dialogové okno Save For Web (Uložit pro Web):

Vytvořte automatický objekt Photoshopu a vytvořte jeho vazbu na zdrojový soubor Photoshopu, podle popisu v „Vytvoření vazby na soubory Photoshopu“ na straně 175. Když vyberete zdrojový soubor, automaticky se objeví dialogové okno Save For Web. Můžete také vybrat existující automatický objekt Photoshopu, který již má vazbu na zdrojový soubor, a klepnout na Settings (Nastavení) v paletě Smart Object Inspector (Inspektor automatického objektu). Poznámka: Standardně Adobe GoLive automaticky regeneruje optimalizovaný obraz, když klepnete na záložku Optimized (Optimalizovaný), 2-Up (2 najednou) nebo 4-Up (4 najednou) nad dokumentem (pokud jste obraz od poslední optimalizace upravili), když změníte nastavení optimalizace při zobrazeném optimalizovaném obraze nebo když upravíte originální obraz.

Použití pojmenovaných nastavení optimalizace Nastavení optimalizace můžete uložit jako pojmenovaný soubor a toto nastavení použít při práci na jiných obrazech. Nastavení, která uložíte, se objeví v nabídce Optimize (Optimalizovat) v panelu Settings (Nastavení) v dialogovém okně Save For Web. Adobe GoLive také obsahuje několik předdefinovaných pojmenovaných nastavení.


Když upravíte nastavení optimalizace tak, že již nesouhlasí s pojmenovanou sadou, zobrazí se v nabídce Settings termín „Unnamed“ (Bez názvu).

Jak uložit nastavení optimalizace:

1 S vybranými požadovanými nastaveními v panelu Optimize v dialogovém okně Save For Web zvolte

Save Settings (Uložit nastavení) z nabídky Optimize v panelu Settings. 2 Pojmenujte nastavení a zvolte místo, kam se uloží. Standardně se pojmenovaná nastavení ukládají do složky Optimize ve složce Settings ve složce aplikace Adobe GoLive. 3 Klepněte na Save (Uložit). Jak aplikovat pojmenovaná nastavení optimalizace na obraz:

Se zobrazeným optimalizovaným obrazem vyberte pojmenovanou sadu nastavení optimalizace z nabídky Optimize v panelu Settings. Jak upravit pojmenovanou sadu nastavení optimalizace:

1 Z nabídky Settings (Nastavení) vyberte pojmenovanou sadu nastavení. 2 Upravte nastavení v panelu Optimize v dialogovém okně Save For Web.

(V nabídce Settings (Nastavení) se zobrazí termín „Unnamed“ (Bez názvu), protože nastavení již neodpovídají pojmenované sadě.) 3 Z nabídky Optimize v panelu Settings zvolte Save Settings (Uložit nastavení) a uložte nastavení s názvem původního souboru. 4 Klepněte na Save (Uložit) a pak klepněte na Replace (Nahradit). Jak odstranit pojmenovaná nastavení optimalizace:

1 V panelu Optimize v dialogovém okně Save For Web vyberte pojmenovanou sadu nastavení optimalizace z rozbalovací nabídky Settings (Nastavení). 2 Z nabídky Optimize v panelu Settings zvolte Delete Settings (Odstranit nastavení).


Aplikování nastavení optimalizace. Chcete-li optimalizovat soubor pro Web, importujete automatický objekt Photoshopu a zvolíte formát a volby pro formát v dialogovém okně Save For Web (Uložit pro Web). Obraz můžete také optimalizovat tak, aby měl nastavenou velikost. Tato možnost umožňuje rychle dosáhnout požadované velikosti souboru bez nutnosti zkoušet různá nastavení optimalizace. Jak optimalizovat obraz jako JPEG:

1 Z nabídky Settings (Nastavení) formátů souborů v dialogovém okně Save For Web zvolte nastavení JPEG.

A B C D E

F G H I J

A. Nabídka Settings (Nastavení) B. Formát souboru C. Nabídka Quality (Kvalita) D. Pole Progressive (Progresivní) E. Pole ICC Profile (Profil ICC) F. Nabídka Optimize (Optimalizace) G. Pole Optimized (Optimalizovaný) H. Jezdec Quality (Kvalita) I. Jezdec Blur (Rozostření) J. Barva Matte (Podklad)

2 Zvolte volbu pro určení kvality obrazu: • Táhněte rozbalovacím jezdcem Quality (Kvalita). • Do pole Quality (Kvalita) zadejte hodnotu. • Vyberte volbu z nabídky Quality (Kvalita).

Nastavení vyšší kvality zachová více informací o barvách, ale vytvoří soubor větší velikosti. Zobrazte JPEG s různým nastavením kvality a určete nejlepší vyvážení kvality a velikosti souboru. 3 Chcete-li vytvořit zdokonalený JPEG s poněkud menší velikostí souboru, vyberte volbu Optimized (Optimalizovaný).

Poznámka: Formát Optimized JPEG se doporučuje pro maximální kompresi souboru. Některé starší prohlížeče ale tuto možnost nepodporují. 4 Vyberte volbu Progressive (Progresivní), chcete-li vytvořit obraz, který se zobrazuje ve webovém prohlížeči postupně. Obraz se bude zobrazovat jako řada překrytí, což umožní uživatelům vidět před úplným načtením verzi obrazu s nízkým rozlišením. Volba Progresivní vyžaduje použití formátu Optimized JPEG. Výběrem volby Progressive se automaticky vybere Optimized.

Progresivní JPEG vyžaduje pro zobrazení více paměti RAM a některé prohlížeče ho nepodporují.


5 Chcete-li aplikovat na obraz rozostření, aby se vyhladily hrubé okraje, zadejte hodnotu volby Blur (Rozostření) nebo táhněte rozbalovacím jezdcem.

Tato volba rozostří artefakty vzorků vytvořených podél ostrých okrajů v obraze a vytvoří soubor menší velikosti, ale může také potlačit detaily. Doporučuje se nastavení na 0,1 až 0,5. Volba Blur aplikuje stejný efekt jako filtr Gaussovské rozostření ve Photoshopu. 6 Chcete-li zachovat v souboru ICC profil obrazu, vyberte ICC Profile (Profil ICC).

Poznámka: Některé prohlížeče používají profily ICC pro korekce barev. Volba ICC Profile zachová profily ICC vložené Photoshopem. 7 Pokud původní obraz obsahuje průhlednost, vyberte barvu Matte (Podklad), abyste simulovali efekt průhlednosti pozadí. Viz „Vytvoření obrazů Photoshopu s průhledností a s podkladem“ na straně 189. 8 Klepněte na OK a uložte soubor s příponou .jpg. Jak optimalizovat obraz jako GIF nebo PNG-8:

1 Otevřete původní soubor a pak zvolte libovolný formát GIF nebo PNG-8 z nabídky formátů souboru Settings (Nastavení) v dialogovém okně Save For Web (Uložit pro Web).

A B C D E F

G H I J K L

A. Nabídka Settings (Nastavení) B. Formát souboru C. Nabídka Color Palette (Paleta barev) D. Nabídka algoritmu rozkladu barev E. Pole Transparency (Průhlednost) F. Pole Interlaced (Prokládaný) G. Nabídka Optimize (Optimalizace) H. Jezdec Lossy (Ztráta) I. Počet barev J. Jezdec Dither (Rozklad barev) K. Barva Matte (Podklad) L. Jezdec Web Snap (Přitahování na webové)

2 Pouze pro formát GIF: Táhněte jezdcem Lossy (Ztráta) nebo zadejte hodnotu, abyste umožnili odstranit při procesu komprese z obrazu obrazové body (a snížit tak velikost souboru).

Často můžete použít hodnotu ztráty 5% – 10% a někdy až 50% bez zhoršení obrazu. S použitím volby Lossy lze velikost souboru často snížit o 5% – 40%. Viz „Zobrazení náhledu a ovládání rozkladu barev v aplikaci“ na straně 193. Poznámka: Volbu Lossy nemůžete použít s volbou Interlaced (Prokládaný) nebo s algoritmy Noise Dither (Šumový rozklad) nebo Pattern Dither (Rozklad na vzorky). 3 Vyberte paletu barev podle popisu ve „Výběr tabulky barev“ na straně 184.


4 Chcete-li zvolit určitý počet barev, vyberte číslo z nabídky Colors (Barvy), zadejte hodnotu do číselného pole nebo změňte počet barev pomocí šipek.

Tato volba určuje maximální počet barev. Jestliže obraz obsahuje méně barev než je specifikované číslo, bude paleta barev obsahovat pouze počet barev v obraze. 5 Vyberte Interlaced (Prokládaný), chcete-li vytvořit obraz, který zobrazuje v prohlížeči během načítání

celého obrazového souboru verzi s nízkým rozlišením. Prokládání může dobu přenosu zdánlivě zkrátit a ujišťuje uživatele, že přenos probíhá. Prokládáním se ale také zvětšuje velikost souboru. 6 Vyberte volbu Dither (Rozklad barev) a míru rozkladu. Informace o rozkladu barev viz „Náhled

a ovládání rozkladu barev v obrazech Photoshopu“ na straně 192. 7 Pokud obraz obsahuje průhlednost, zvolte volbu pro zachování nebo vyplnění průhledných obrazových bodů: • Vyberte Transparency (Průhlednost) (výchozí nastavení), chcete-li zachovat plně průhledné obrazové

body jako průhledné. (Částečně průhledné obrazové body se vyplní barvou podkladu (Matte) nebo se převedou na zcela průhledné nebo zcela neprůhledné body podle volby Matte (Podklad).) • Odznačte Transparency, chcete-li vyplnit plně i částečně průhledné obrazové body barvou podkladu.

Poznámka: Abyste mohli v optimalizovaném obraze vytvořit průhlednost, musí původní obraz obsahovat průhledné obrazové body. Průhlednost v dokumentu můžete snadno vytvořit pomocí nástroje kouzelná guma ( ). Ve Photoshopu můžete také použít nástroj mazání pozadí ( ). Další informace o nastavení průhlednosti a barvy podkladu viz „Vytvoření obrazů Photoshopu s průhledností a s podkladem“ na straně 189. 8 Chcete-li automaticky posunout barvy na nejbližší ekvivalenty ve webové paletě (a zabránit rozkladu barev v prohlížeči), táhněte jezdcem Web Snap (Přitahování na webové) nebo zadáním hodnoty určete úroveň tolerance pro posunované barvy. S vyšší hodnotou se posune více barev. Viz „Náhled a ovládání rozkladu barev v obrazech Photoshopu“ na straně 192. 9 Klepněte na OK a uložte soubor s příponou .gif nebo .png. Jak optimalizovat obraz jako PNG-24:

1 Otevřete původní soubor a pak zvolte PNG-24 z nabídky formátů souborů Settings (Nastavení) v dialogovém okně Save For Web (Uložit pro Web).

A B C

D E F

A. Nabídka Settings (Nastavení) B. Formát souboru C. Pole Transparency (Průhlednost) D. Nabídka Optimize (Optimalizace) E. Pole Interlaced (Prokládaný) F. Barva Matte (Podklad)


2 Vyberte Interlaced (Prokládaný), chcete-li vytvořit obraz, který zobrazuje v prohlížeči během načítání celého obrazového souboru verzi s malým rozlišením. Prokládání může dobu přenosu zdánlivě zkrátit a ujišťuje uživatele, že přenos probíhá. 3 Pokud obraz obsahuje průhlednost, zvolte volbu zachování nebo vyplnění průhledných obrazových bodů: • Vyberte Transparency (Průhlednost) (výchozí nastavení), chcete-li zachovat plně průhledné obrazové

body jako průhledné. Tato volba je ztlumená, pokud obraz neobsahuje průhlednost. • Odznačte Transparency, chcete-li vyplnit průhledné body barvou podkladu (Matte).

4 Klepněte na OK a uložte soubor s příponou .png. Jak optimalizovat soubor na určitou velikost souboru:

1 V panelu Optimize (Optimalizovat) v dialogovém okně Save For Web (Uložit pro Web) vyberte Optimize to File Size (Optimalizovat na velikost souboru) z nabídky v panelu Optimize. 2 Nastavte volbu Start With (Začít s): • Current Settings (Současné nastavení), chcete-li použít současné nastavení optimalizace. • Auto Select GIF/JPEG (Automaticky vybrat GIF/JPEG), chcete-li automaticky generovat GIF nebo

JPEG. (Adobe GoLive vybere formát GIF nebo JPEG na základě analýzy barev v obrazu.) 3 Zadejte hodnotu velikosti souboru. 4 Klepněte na OK.

Výběr tabulky barev Oba formáty GIF i PNG-8 umožňují určit tabulku barev pro obraz v panelu Settings v dialogovém okně Save For Web (Uložit pro Web). Tato tabulka barev se objeví v panelu Color Table (Tabulka barev), když je tento obraz vybraný, a vy můžete tyto barvy měnit. Tabulka barev pro 8-bitový obraz obsahuje maximálně 256 barev. Perceptual (Perceptuální) Vytváří tabulku barev tak, že preferuje barvy, na které je lidské oko citlivější. Selective (Selektivní) Vytváří tabulku barev podobnou tabulce Perceptual, ale upřednostňuje velké

plochy barev a zachování webových barev. Tato tabulka barev obvykle vytváří obrazy s nejlepším zachováním barev. Selective je výchozí volba. Adaptive (Adaptivní) Vytváří upravenou tabulku barev vzorkováním barev ze spektra barev, které se v obraze objevují nejčastěji. Například obraz obsahující pouze zelenou a modrou vytvoří tabulku barev zejména ze zelených a modrých. Ve většině obrazů jsou barvy soustředěny v určitých oblastech spektra. Web (Webová) Používá standardní tabulku barev s 216 barvami, které jsou společné pro 8-bitové palety

(256 barev) Windows a Mac OS. Tato volba zajišťuje, že žádný prohlížeč nebude při zobrazení obrazu pomocí 8-bitových barev aplikovat na barvy rozklad. (Tato paleta se také nazývá paleta bezpečných webových barev.)


Použití webové palety může vytvořit větší soubory a doporučuje se pouze tehdy, když má zabránění rozkladu barev v prohlížeči vysokou prioritu. Viz „Náhled a ovládání rozkladu barev v obrazech Photoshopu“ na straně 192. Custom (Jiná) Zachová platnou perceptuální, selektivní nebo adaptivní tabulku barev jako pevnou

paletu, která se změnami obrazu neaktualizuje. Mac OS Použije standardní 8-bitovou (256 barev) tabulku barev systému Mac OS, která je založena na rovnoměrném vzorkování RGB barev. Windows Použije standardní 8-bitovou (256 barev) tabulku barev systému Windows, která je založena na rovnoměrném vzorkování RGB barev.

V nabídce se objeví i další tabulky barev, pokud jste je předtím uložili. Viz „Načítání a ukládání tabulek barev“ na straně 189.

Práce s tabulkou barev v obrazech Photoshopu Tabulka barev zobrazuje všechny barvy v obraze GIF nebo PNG-8. K práci s tabulkou barev se používá panel Color Table (Tabulka barev) v dialogovém okně Save For Web (Uložit pro Web). V tabulce barev můžete přidávat a odstraňovat barvy, posouvat vybrané barvy na bezpečné webové barvy a zamykat vybrané barvy, aby se zabránilo jejich vypuštění z palety. Tabulka barev také zobrazuje barvy pro původní obrazy, které používají indexované barvy.

A B C D

E

F

G

H

A. Bezpečná webová barva nebo barva posunutá na webovou B. Zamknutá barva C. Vybraná barva D. Upravená barva E. Tlačítko Posun na webovou F. Tlačítko Zamknout barvu G. Tlačítko Nová barva H. Tlačítko Koš

Poznámka: Pokud má obraz méně barev než je celkový počet určený v paletě barev, odstraní se nepoužité barvy z tabulky barev, aby se zmenšila velikost souboru.


Uspořádání tabulky barev Barvy v tabulce barev můžete uspořádat podle odstínu, jasu nebo výskytu, což usnadňuje zobrazení rozsahu barev obrazu a nalezení konkrétních barev. Jak uspořádat tabulku barev:

Zvolte pořadí uspořádání z nabídky v panelu Color Table (Tabulka barev): • Sort by Hue (Uspořádat podle odstínu). Neutrálním barvám se přiřadí odstín 0 a umístí se k červené. • Sort by Luminance (Uspořádat podle jasu) neboli podle světlosti barvy. • Sort by Popularity (Uspořádat podle výskytu) neboli podle četnosti výskytu barvy v obraze. • Unsorted (Neuspořádat). Obnoví původní pořadí barev.

Přidávání nových barev Můžete přidat barvy, které byly vynechány při sestavení tabulky barev. Pokud již tabulka barev obsahuje maximální počet barev (256 nebo 255 s průhledností), nemůžete novou barvu přidat. Jak přidat novou barvu:

1 V dialogovém okně Save For Web (Uložit pro Web) vyberte nástroj kapátko (

).

2 Klepněte na barvu v obraze.

Barva se objeví v poli vzorku barvy kapátka v dialogovém okně Save For Web. 3 Přidejte novou barvu: • Klepněte na tlačítko Nová barva (

) v panelu Color Table v dialogovém okně Save For Web.

• Z nabídky panelu Color Table vyberte New Color (Nová barva). Chcete-li zobrazit nabídku, klepněte

na trojúhelník v pravém horním rohu panelu Color Table. Nová barva se objeví v panelu Color Table. V pravém dolním rohu se objeví bílý čtvereček s tmavým středem, který ukazuje, že barva je zamknutá. Viz „Zamykání barev“ na straně 187.

Vybírání barev Chcete-li barvy změnit, vyberte barvu přímo v obraze nebo v panelu Color Table. Jak vybrat barvu z původního nebo optimalizovaného obrazu:

1 V dialogovém okně Save For Web (Uložit pro Web) vyberte nástroj kapátko (

).

2 Klepněte na barvu v obraze. Okolo barvy v panelu Color Table se objeví bílý okraj. Jak vybrat barvu přímo v panelu Color Table:

Klepněte na barvu v panelu Color Table.


Chcete-li vybrat skupinu sousedících barev, podržte Shift a klepněte na jinou barvu. Vyberou se všechny barvy v řádcích mezi první a druhou vybranou barvou. Chcete-li vybrat skupinu nesousedících barev, podržte Ctrl (Windows) nebo Apple (Mac OS) a klepněte na každou z barev, které chcete vybrat. Jak vybrat všechny barvy:

Z nabídky v panelu Color Table zvolte Select All Colors (Vybrat všechny barvy). Jak vybrat v obraze všechny bezpečné webové barvy:

Z nabídky v panelu Color Table zvolte Select All Web Safe Colors (Vybrat všechny webové barvy). Poznámka: Abyste mohli vybrat bezpečné webové barvy, musí optimalizovaný obraz obsahovat nejméně jednu bezpečnou webovou barvu. Jak vybrat v obraze všechny barvy, které nejsou bezpečné webové:

Z nabídky v panelu Color Table zvolte Select All Non-Web Safe Colors (Vybrat všechny ne-webové barvy). Poznámka: Abyste mohli vybrat ne-webové barvy, musí optimalizovaný obraz obsahovat nejméně jednu barvu, která není bezpečná webová. Jak odznačit všechny barvy:

Z nabídky v panelu Color Table zvolte Deselect All Colors (Odznačit všechny barvy).

Úpravy barev Vybranou barvu v panelu Color Table můžete změnit na libovolnou jinou barevnou hodnotu RGB. Při novém generování optimalizovaného obrazu se vybraná barva všude v obraze změní na novou barvu. Jak upravit barvu:

1 Poklepejte na barvu v panelu Color Table, aby se zobrazilo standardní okno pro výběr barvy. 2 Vyberte barvu a klepněte na OK.

Ve středu každé upravené barvy se objeví malé znaménko plus.

Zamykání barev Vybrané barvy v panelu Color Table můžete zamknout, abyste zabránili jejich vypuštění, když se snižuje počet barev, a aby se zabránilo jejich rozkladu v aplikaci. Informace o tom, jak zabránit rozkladu barev v prohlížeči viz „Zobrazení náhledu rozkladu barev prohlížeče“ na straně 193. Poznámka: Zamknutí barev nezabrání jejich rozkladu v prohlížeči.


Jak zamknout barvu:

1 Se zobrazeným obrazem GIF nebo PNG-8 vyberte v panelu Color Table jednu nebo více barev, podle popisu v „Vybírání barev“ na straně 186. 2 Zamkněte barvu: • Klepněte na tlačítko Zamknout (

).

• Z nabídky v panelu Color Table zvolte Lock/Unlock Selected Colors (Zamknout/odemknout vybrané

barvy). V pravém dolním rohu každé zamknuté barvy se objeví bílý čtvereček s červeným středem. Poznámka: Pokud vybrané barvy zahrnují jak zamknuté tak odemknuté barvy, zamknou se všechny barvy. Jak odemknout barvu:

1 Klepnutím na zamknutou barvu ji vyberte. 2 Odemkněte barvu: • Klepněte na tlačítko Zamknout (

).

• Z nabídky v panelu Color Table zvolte Lock/Unlock Selected Colors (Zamknout/odemknout vybrané

barvy). Bílý čtvereček ze vzorku barvy zmizí.

Odstranění barev z tabulky barev Vybrané barvy můžete z tabulky barev odstranit, aby se snížila velikost obrazového souboru. Po odstranění barvy se plochy optimalizovaného obrazu, které tuto barvu předtím obsahovaly, znovu překreslí s použitím nejbližší barvy zůstávající v paletě. Po odstranění barvy se typ palety barev automaticky změní na Custom (Jiná). Je to proto, že palety Adaptivní, Perceptuální a Selektivní by automaticky přidaly vymazanou barvu zpět do palety, když se obraz znovu optimalizuje. (Paleta Custom (Jiná) se při nové optimalizaci obrazu nezmění.) Jak odstranit vybrané barvy:

1 Se zobrazeným obrazem GIF nebo PNG-8 vyberte v panelu Color Table jednu nebo více barev, podle popisu v „Vybírání barev“ na straně 186. 2 Odstraňte barvu: • Klepněte na tlačítko Koš. • Z nabídky v panelu Color Table zvolte Delete Color (Odstranit barvu).

Odstraněním barvy se změní typ palety barev na Custom (Jiná), aby se zabránilo přidání barvy zpět do palety, pokud se obraz znovu optimalizuje. Chcete-li se vrátit k paletě Adaptivní, Perceptuální nebo Selektivní, vyberte paletu z nabídky palety barev. (Viz „Výběr tabulky barev“ na straně 184.)


Načítání a ukládání tabulek barev Tabulky barev z optimalizovaných obrazů můžete uložit, abyste je mohli použít pro jiné obrazy a můžete načíst tabulky barev vytvořené v jiných aplikacích. Když načtete do obrazu novou tabulku barev, barvy v optimalizovaném obraze se změní tak, aby odpovídaly barvám v nové tabulce barev. Jak uložit tabulku barev:

1 Se zobrazeným obrazem GIF nebo PNG-8 vyberte Save Color Table (Uložit tabulku barev) z nabídky v panelu Color Table. 2 Pojmenujte tabulku barev a zvolte místo, kam se uloží. Standardně dostane soubor tabulky barev příponu .act (jako Adobe Color Table).

Jestliže chcete mít k tabulce barev přístup, když vybíráte volby optimalizace pro obraz GIF nebo PNG, uložte tabulku barev do složky Color Tables ve složce Settings ve složce Adobe GoLive. 3 Klepněte na Save (Uložit). Jak načíst tabulku barev:

1 Se zobrazeným obrazem GIF nebo PNG-8 vyberte Load Color Table (Načíst tabulku barev) z nabídky panelu Color Table. 2 Najděte soubor, obsahující tabulku barev, kterou chcete načíst – buď soubor tabulky barev Adobe (.act) nebo soubor GIF (abyste načetli vloženou tabulku barev souboru). 3 Klepněte na Otevřít.

Vytvoření obrazů Photoshopu s průhledností a s podkladem Průhlednost umožňuje vložit na webovou stránku s pozadím nepravidelný grafický objekt. Průhledné pozadí, podporované formáty GIF a PNG, zachová v obraze průhledné obrazové body. Tyto body v prohlížeči splynou s pozadím webové stránky. Vytváření podkladu pozadí, podporované formáty GIF, PNG a JPEG, simuluje průhlednost vyplněním nebo prolnutím průhledných obrazových bodů s barvou podkladu, kterou zvolíte tak, aby se shodovala s pozadím webové stránky, na niž se obraz umístí. Podklad pozadí bude fungovat pouze pokud pozadí webové stránky bude plná barva, kterou budete dopředu znát. Abyste mohli vytvořit průhledné pozadí nebo podklad pozadí v optimalizovaném obraze, musí původní obraz obsahovat průhledné obrazové body. Jak vytvořit průhledné pozadí v obraze GIF nebo PNG:

V panelu Optimize (Optimalizovat) v dialogovém okně Save For Web (Uložit pro Web) vyberte Transparency (Průhlednost). Tato volba je standardně vybraná.


Zcela průhledné obrazové body v obraze se zachovají jako průhledné. Pokud je obraz vyhlazený, můžete vytvořit podklad pro částečně průhledné obrazové body, aby se prolnuly s barvou pozadí webové stránky. Můžete také vytvořit průhlednost s ostrými okraji, aby se zabránilo haló efektu, který vzniká, když se vytvoří podklad vyhlazeného obrazu v barvě, která se liší od původní barvy pozadí obrazu. Jestliže obraz obsahuje průhlednost alfa, můžete vytvořit víceúrovňovou průhlednost a zachovat až 256 úrovní průhlednosti (pouze ve formátu PNG-24).

Vytváření podkladu pozadí v obrazech GIF a PNG Když znáte barvu pozadí webové stránky, na které se obraz zobrazí, můžete použít funkci vytvoření podkladu, aby se průhledné obrazové body vyplnily nebo prolnuly s barvou podkladu, která se shoduje s pozadím webové stránky. Pozadí webové stránky musí být plná barva, ne vzorek. Podklad pozadí obrazů GIF a PNG můžete vytvořit dvěma způsoby. Můžete zvolit zachování plně průhledných obrazových bodů jako průhledných a použít podklad pouze pro částečně průhledné body, jako jsou body na vyhlazeném okraji. Když obraz umístíte na webovou stránku, zobrazí se přes průhledné body pozadí Webu a okraje obrazu se prolnou s pozadím. To zabrání haló efektu, který vzniká, když se vyhlazený obraz vloží na jinou barvu pozadí než měl obraz. Tato volba zabraňuje také vzniku zubatých okrajů, které vznikají v souboru GIF při použití průhlednosti s ostrými okraji. Můžete také odznačit Transparency (Průhlednost), aby se všechny průhledné obrazové body vyplnily barvou podkladu. Plně průhledné obrazové body se vyplní barvou podkladu a částečně průhledné body se s barvou podkladu smíchají.

GIF s vybranou volbou Transparency u barvy podkladu (Matte) a s nevybranou volbou Transparency. Jak vytvořit obraz GIF nebo PNG s podkladem pozadí:

1 Importujte automatický obraz Photoshopu, který obsahuje průhlednost, nebo vyberte automatický objekt Photoshopu, který již je na webové stránce, a klepněte na Settings (Nastavení) v paletě Smart Image Inspector (Inspektor automatického obrazu). 2 V panelu Optimize (Optimalizovat) v dialogovém okně Save For Web (Uložit pro Web) vyberte

z nabídky formátu GIF, PNG-8 nebo PNG-24. 3 Zvolte, zda zachovat průhlednost: • Vyberte Transparency (Průhlednost), chcete-li zachovat plně průhledné obrazové body průhledné. • Odznačte Transparency, chcete-li vyplnit plně průhledné obrazové body barvou podkladu.


4 Vyberte barvu z rozbalovací nabídky Matte (Podklad).

Vyberte None (Žádná), Eyedropper Color (Barva kapátka; použije se barva z pole vzorku kapátka), White (Bílá), Black (Černá) nebo Other (Jiná; použije se okno pro výběr barvy).

Vytvoření průhlednosti s ostrými okraji v obrazech GIF a PNG-8 Když použijete podklad pozadí u obrazů, které obsahují vyhlazení, může vzniknout haló efekt, když se barva podkladu liší od původní barvy pozadí obrazu. Vyhlazení vytvoří částečně průhledné obrazové body okolo okrajů obrazu, ve kterých se smíchá obraz s původní barvou pozadí. Když pracujete se soubory GIF nebo PNG-8, můžete vytvořit průhlednost s ostrými okraji, kdy jsou všechny obrazové body, které jsou více než z 50% průhledné v původním obraze, plně průhledné v optimalizovaném obraze, a všechny body, které jsou více než z 50% neprůhledné v originále, jsou v optimalizovaném obraze plně neprůhledné. Průhlednost s ostrými okraji zabraňuje haló efektu, ale může způsobit zubaté okraje v obraze. Abyste zabránili zubatým okrajům, použijte pro obraz podklad pozadí. Viz „Vytváření podkladu pozadí v obrazech GIF a PNG“ na straně 190. Jak vytvořit průhlednost s ostrými okraji v obraze GIF nebo PNG-8:

1 Importujte automatický obraz Photoshopu, který obsahuje průhlednost, nebo vyberte automatický objekt Photoshopu, který již je na webové stránce, a klepněte na Settings (Nastavení) v paletě Smart Image Inspector (Inspektor automatického obrazu). 2 V panelu Optimize (Optimalizovat) v dialogovém okně Save For Web (Uložit pro Web) vyberte

z nabídky formátů GIF nebo PNG-8. 3 Vyberte Transparency (Průhlednost). 4 Z nabídky Matte (Podklad) vyberte None (Žádný), čímž se všechny obrazové body s průhledností větší než 50% stanou plně průhlednými a všechny s průhledností 50% nebo menší plně neprůhlednými.

Vytvoření podkladu pozadí v obrazech JPEG Když vytváříte JPEG z původního obrazu, který obsahuje průhlednost ve vrstvě, musíte použít barvu podkladu. Protože formát JPEG nepodporuje průhlednost, je prolnutí s barvou podkladu jediným způsobem, jak vytvořit v JPEG dojem průhlednosti pozadí. Plně průhledné obrazové body se vyplní barvou podkladu a částečně průhledné body se s barvou podkladu smíchají. Když JPEG vložíte na webovou stránku s pozadím, které souhlasí s barvou podkladu, obraz zdánlivě splyne s pozadím stránky. Jak vytvořit obraz JPEG s podkladem pozadí:

1 Importujte automatický obraz Photoshopu, který obsahuje průhlednost, nebo vyberte automatický objekt Photoshopu, který již je na webové stránce, a klepněte na Settings (Nastavení) v paletě Smart Image Inspector (Inspektor automatického obrazu). 2 V panelu Optimize v dialogovém okně Save For Web vyberte z nabídky formátů JPEG.


3 Vyberte barvu z rozbalovací nabídky Matte (Podklad).

Vyberte None (Žádná), Eyedropper Color (Barva kapátka; použije se barva z pole vzorku kapátka), White (Bílá), Black (Černá) nebo Other (Jiná; použije se okno pro výběr barvy).

Zachování víceúrovňové průhlednosti v obrazech PNG-24 Když vytváříte obraz PNG-24, můžete zachovat proměnlivou průhlednost, například ve vyhlazeném obraze na průhledné vrstvě, pomocí funkce zvané průhlednost alfa (alpha transparency). Průhlednost alfa zachová v obraze PNG až 256 úrovní průhlednosti. Když se PNG zobrazí v prohlížeči pomocí zásuvného modulu, který podporuje průhlednost alfa, zobrazí se PNG s víceúrovňovou průhledností a okraje obrazu se prolnou s libovolným pozadím Webu. Jak vytvořit proměnlivou průhlednost v obrazu PNG-24:

1 Importujte automatický obraz Photoshopu, který obsahuje průhlednost, nebo vyberte automatický objekt Photoshopu, který již je na webové stránce, a klepněte na Settings v paletě Smart Image Inspector. 2 V panelu Optimize v dialogovém okně Save For Web vyberte z nabídky formátů PNG-24. 3 Vyberte Transparency (Průhlednost). 4 Z nabídky Matte (Podklad) vyberte None (Žádná).

Náhled a ovládání rozkladu barev v obrazech Photoshopu Většina obrazů zobrazených na Webu je vytvořena s použitím 24-bitového barevného zobrazení (režim miliónů barev), ale mnoho prohlížečů se používá na počítačích s pouze 8-bitovým zobrazením (režim 256 barev), takže obraz na Webu často obsahuje barvy, které nejsou pro mnoho webových prohlížečů dostupné. Počítače používají k simulaci barev, které nejsou k dispozici v systému barevného zobrazení techniku zvanou rozklad barev (dithering). Rozklad barev vytváří sousední obrazové body s různými barvami tak, aby vytvářely dojem třetí barvy. Například červená barva a žlutá barva se mohou smíchat v mozaikovém vzoru tak, aby vytvořily iluzi oranžové barvy, která se v paletě barev nevyskytuje. Když optimalizujete obrazy, pamatujte, že může dojít ke dvěma druhům rozkladu barev: • Rozklad barev v aplikaci se vyskytuje v obrazech GIF a PNG-8, když se Adobe GoLive pokouší

simulovat barvy, které se vyskytují v původním obraze, ale ne v paletě barev optimalizovaného obrazu. Rozklad barev v aplikaci, který Adobe GoLive použije, můžete řídit tak, že vyberete vzorek rozkladu barev a rozsah barev, které se mají rozkládat. • Rozklad v prohlížeči nastává, když se webový prohlížeč používající 8-bitové barevné zobrazení (režim

256 barev) pokouší simulovat barvy, které se objevují v optimalizovaném obraze, ale ne v paletě barev používané prohlížečem. Rozklad v prohlížeči může nastat u obrazů GIF, PNG nebo JPEG a může k němu dojít i u obrazů GIF nebo PNG-8, na které byl aplikován rozklad v aplikaci. Míru rozkladu v prohlížeči můžete ovládat posunutím vybraných barev v obraze na bezpečné webové barvy. Volby v panelu Color Table (Barevná tabulka) umožňují při volbě barvy specifikovat bezpečné webové barvy.


Zobrazení náhledu a ovládání rozkladu barev v aplikaci Můžete zobrazit náhled rozkladu barev obrazů GIF a PNG-8 v aplikaci. Rozbalovací nabídka Dither Algorithm (Algoritmus rozkladu barev) v dialogovém okně Save For Web (Uložit pro Web) umožňuje zvolit pro obraz metodu rozkladu barev. Jezdec procent rozkladu barev (Diher) umožňuje regulovat rozsah barev simulovaných rozkladem. Vyšší procentuální hodnota rozkladu vytváří v obraze dojem více barev a více detailů, ale zvyšuje také velikost souboru. Chcete-li získat optimální kompresi, použijte nejnižší procentuální hodnotu rozkladu aplikace, která dává požadované barevné detaily. Obrazy s primárními plnými barvami mohou dobře fungovat s volbou Dither (Rozklad) nastavenou na None (Žádný). Barevné obrazy se spojitými tóny (zejména s přechody barev) mohou vyžadovat rozklad barev, aby se zabránilo vzniku pruhů v barvách. Jak zvolit metodu rozkladu barev:

Vyberte volbu z rozbalovací nabídky algoritmů Dithering (Rozklad barev) v dialogovém okně Save For Web (Uložit pro Web): • No Dither (Bez rozkladu) neaplikuje na obraz žádný rozklad v aplikaci. • Diffusion (Rozptýlený) aplikuje náhodný vzorek, který je obvykle méně znatelný než rozklad Pattern

(Vzorek). Efekty rozkladu se rozptýlí do sousedních obrazových bodů. • Pattern (Vzorek) aplikuje polotónový čtvercový vzorek, simulující všechny barvy, které nejsou

v tabulce barev. • Noise (Šum) aplikuje náhodný vzorek podobný rozkladu Diffusion (Rozptýlený), ale bez rozptýlení

vzorku přes sousední obrazové body. U metody rozkladu Noise (Šum) se neobjevují žádná rozhraní. Jak určit míru použitého rozkladu barev v aplikaci:

1 Z nabídky Dither Algorithm (Algoritmus rozkladu) zvolte metodu rozkladu. Nechcete-li pro obraz použít žádný rozklad, vyberte z nabídky No Dither (Bez rozkladu). 2 Pokud jste v kroku 1 vybrali jakoukoli jinou volbu než No Dither (Bez rozkladu), tažením jezdce Dither (Rozklad) nebo zadáním hodnoty vyberte procenta rozkladu.

Nabídka algoritmů rozkladu barev a rozbalovací jezdec rozkladu barev

Zobrazení náhledu rozkladu barev prohlížeče Náhled rozkladu barev prohlížeče můžete zobrazit buď přímo v Adobe GoLive nebo v prohlížeči, který používá 8-bitové barevné zobrazení (režim 256 barev).


Jak zobrazit náhled rozkladu barev prohlížeče:

Se zobrazeným optimalizovaným souborem zobrazte náhled rozkladu barev v příslušné aplikaci. Z nabídky v panelu dokumentu v dialogovém okně Save For Web (Uložit pro Web) zvolte Browser Dither (Rozklad barev v prohlížeči). (Chcete-li zobrazit nabídku, klepněte na trojúhelník u pravého horního rohu panelu dokumentu.)

Jak zobrazit náhled rozkladu barev prohlížeče v prohlížeči:

1 Nastavte barevné zobrazení svého počítače na 8-bitové barvy (256 barev). Informace o změně barevného zobrazení najdete v dokumentaci operačního systému svého počítače. 2 Proveďte jeden z následujících úkonů: • Spusťte prohlížeč a otevřete optimalizovaný obraz přímo v prohlížeči. • Se zobrazeným optimalizovaným obrazem v Adobe GoLive zvolte Special > Show in Browser

(Speciální > Zobrazit v prohlížeči) a zvolte prohlížeč, ve kterém chcete zobrazit náhled obrazu.

Minimalizace rozkladu barev prohlížeče Abyste zabránili rozkladu barev v prohlížeči, můžete posunout barvy na jejich nejbližší ekvivalenty ve webové paletě. Tím se zajistí, že se barvy nebudou rozkládat, když se zobrazí v prohlížeči na operačních systémech Windows nebo Macintosh, schopných zobrazovat nejméně 256 barev. Jak posunout jednu barvu na její nejbližší ekvivalent ve webové paletě:

1 Se zobrazeným optimalizovaným obrazem vyberte nástrojem kapátko ( ) v dialogovém okně Save For Web (Uložit pro Web) jednu barvu. Nebo klepněte na barvu v panelu Color Table (Tabulka barev). 2 V panelu Color Table klepnutím na Web Shift (Posunout na webovou) (

) barvu posuňte.

Ve středu barvy posunuté na webovou a ve všech bezpečných webových barvách se objeví malý bílý kosočtverec. Jak posunout skupinu vybraných barev na nejbližší ekvivalenty ve webové paletě:

1 Se zobrazeným optimalizovaným obrazem vyberte barvy v panelu Color Table (Tabulka barev), podle popisu ve „Vybírání barev“ na straně 186. 2 Klepněte na tlačítko Web Shift (Posunout na webové) nebo z nabídky panelu Color Table zvolte Web Shift/Unshift Selected Colors (Posunout na webové/vrátit vybrané barvy).


Ve středu vybraných barev, které byly posunuty na webové, (a ve všech bezpečných webových barvách) se objeví malý bílý kosočtverec. Pokud zahrnuje výběr jak posunuté tak neposunuté barvy, všechny barvy ve výběru se změní na posunuté barvy. Jak vrátit barvy posunuté na webové na jejich původní barvy:

Proveďte jeden z následujících úkonů: • V panelu Color Table vyberte barvu posunutou na webovou a klepněte na tlačítko Web Shift

(Posunout na webové) nebo z nabídky panelu zvolte Web Shift/Unshift Selected Colors (Posunout na webové/vrátit vybrané barvy). • V panelu Color Table zvolte z nabídky panelu Unshift All Colors (Obnovit všechny posunuté barvy). Jak určit toleranci pro automatický posun barev na nejbližší ekvivalenty z webové palety:

V panelu Optimize (Optimalizovat) v dialogovém okně Save For Web zadejte hodnotu pro Web Snap (Přitahovat na webové) nebo táhněte rozbalovacím jezdcem. S vyšší hodnotou se posune více barev.

Připojení informací o souboru k automatickým objektům Photoshopu V Adobe GoLive můžete připojit k automatickému objektu Photoshopu informace nebo komentáře. Jak zadat informace o obrazu:

1 Na webové stránce vyberte automatický objekt Photoshopu. 2 Klepněte na automatický objekt pravým tlačítkem myši (Windows) nebo se stisknutou klávesou Ctrl

(Mac OS) a z kontextové nabídky zvolte Show Properties (Zobrazit vlastnosti) (Windows) nebo Info in Folder (Informace ve složce) (Mac OS). 3 Zadejte požadované informace: • Ve Windows zadejte Caption (Popisek), Keywords (Klíčová slova), Credits (Zásluhy) nebo Origin

(Původ). • V Mac OS zadejte Comments (Poznámky).

4 Klepněte na OK (Windows) nebo zavřete okno (Mac OS).

Podrobnější pokyny k importování automatického objektu Photoshopu do webové stránky poté, co jste provedli veškeré své volby v dialogovém okně Save For Web (Uložit pro Web), viz „Vytvoření vazby na soubory Photoshopu“ na straně 175. Informace o přidání alternativního textu pro automatické objekty a jiné obrazy viz „Další volby obrazů“ na straně 201.


Vytvoření vazby na soubory Illustratoru Adobe GoLive umožňuje importovat do webové stránky soubory Adobe Illustratoru. Podobně jako u souborů Photoshopu, vytvoří Adobe GoLive kopii zdrojového souboru ve webovém formátu a udržuje vazbu mezi oběma soubory, zvanou automatická vazba (Smart Link). Pokud později změníte zdrojový obraz nebo změníte velikost automatického objektu Illustratoru, Adobe GoLive automaticky aktualizuje kopii ve webovém formátu, když se vrátíte na stránku obsahující obraz. Poznámka: K automatické aktualizaci nedojde, pokud změníte velikost obrazu ve formátu Flash nebo SVG, protože tyto formáty jsou vektorové. Proto se Illustrator v pozadí neotevře. Můžete také poklepat na automatický obraz Illustratoru v okně dokumentu, čímž se otevře původní zdrojový obraz v Adobe Illustratoru. Pokud nemáte na svém počítači instalovaný Illustrator 9.0 nebo novější, nebude ikona automatického objektu Illustratoru v záložce Smart (Automatické) v paletě Objects dostupná. Jak přidat automatický objekt Illustratoru:

1 Přetáhněte ikonu Smart Illustrator (Automatický objekt Illustratoru) ze záložky Smart (Automatické) v paletě Objects do okna dokumentu nebo poklepejte na ikonu v paletě. Můžete také přetáhnout soubor Illustratoru na webovou stránku. Pokud to uděláte, přeskočte na krok 4. 2 Vyberte vyhrazený prostor pro automatický objekt Illustratoru a klepněte na tlačítko Browse (Procházet) vedle textového pole Source (Zdroj) v paletě Smart Image Inspector.

Poznámka: Dříve, než vytvoříte automatický objekt Illustratoru, měli byste velikost zdrojového obrazu v Illustratoru nastavit alespoň přibližně na velikost, ve které ho chcete mít na webové stránce,. 3 Vyberte požadovaný soubor Illustratoru a klepněte na Open (Otevřít). Illustrator se spustí v pozadí.

Obraz můžete také vybrat tak, že táhnete z tlačítka Namířit a vybrat ( ) na soubor Illustratoru v okně místa nebo přetažením souboru z okna místa. Textové pole Destination (Cíl) se vyplní automaticky, když zvolíte a importujete zdrojový soubor. 4 Zvolte požadovaný webový formát z dialogového okna Conversion Settings (Nastavení převodu) a klepněte na OK.

Illustrator se přepne do popředí a zobrazí příslušné dialogové okno optimalizace pro webový formát, který jste zvolili v předchozím kroku. Podrobnosti o volbě nastavení optimalizace pro různé formáty viz Příručka uživatele Adobe Illustratoru . 5 Vyberte požadovaná nastavení optimalizace a klepněte na OK. 6 Určete složku, kam chcete uložit převedený obraz (musí být ve složce místa, jinak bude vazba neplatná). 7 Klepněte na Save (Uložit).

Podrobnosti o změně nastavení konverze nebo optimalizace automatického objektu Illustratoru po importu obrazu viz „Použití palety Smart Plug-in Inspector se soubory Illustratoru“ na straně 197.


Použití palety Smart Plug-in Inspector se soubory Illustratoru Pokud zvolíte pro soubory Illustratoru formát konverze SVG, SVG Compressed nebo Shockwave Flash, pak když vyberete automatický objekt, objeví se paleta Smart Plug-in Inspector (Inspektor automatického zásuvného modulu). Smart Plug-in Inspector poskytuje další volby, které umožňují definovat umístění zdrojového a cílového souboru, MIME a třídu obrazu a také, což je nejdůležitější, obsahuje tlačítko Settings (Nastavení), které umožňuje návrat k nastavením konverze a optimalizace, pokud byste snad chtěli provést změny poté, co importujete soubor Illustratoru do webové stránky. Podrobnosti o dalších volbách dostupných v paletě Smart Plug-in Inspector viz „Přidávání zvuků a videoklipů“ na straně 249. Jak změnit nastavení pro automatický objekt Illustratoru (ve formátu SVG, SVG Compressed nebo Shockwave Flash):

1 Vyberte automatický objekt Illustratoru na webové stránce. 2 Klepněte na tlačítko Settings v paletě Smart Plug-in Inspector. (Pokud není paleta Smart Plug-in Inspector zobrazena, zvolte Window > Inspector (Okno > Inspektor).) 3 Z dialogového okna Conversion Settings (Nastavení konverze) zvolte formát a klepněte na OK.

Illustrator se přepne do popředí a zobrazí příslušné dialogové okno optimalizace pro webový formát, který jste zvolili v předchozím kroku. Podrobnosti o volbě nastavení optimalizace pro různé formáty viz Příručka uživatele Adobe Illustratoru . 4 Vyberte požadovaná nastavení optimalizace a klepněte na OK. 5 Určete složku, kam chcete konvertovaný obraz uložit (obvykle složku uvnitř složky webového místa). 6 Klepněte na Save (Uložit).

Adobe GoLive použije nová nastavení pro automatický objekt na webové stránce, bez změny zdrojového souboru. Poznámka: U automatických objektů LiveMotion nemůžete nastavení konverze měnit. Když je vybraný automatický objekt LiveMotion, je tlačítko Settings v paletě Inspector ztlumené.

Vytvoření vazby na soubory LiveMotion Adobe GoLive umožňuje vytvořit na webové stránce vazbu na soubory Adobe LiveMotion. Adobe GoLive vytvoří kopii zdrojového souboru ve formátu Flash a udržuje vazbu mezi oběma soubory ve formě automatického objektu LiveMotion. Pokud později změníte zdrojový obraz automatického objektu LiveMotion, Adobe GoLive automaticky aktualizuje kopii ve formátu Flash, když se vrátíte na stránku obsahující obraz. Protože formát Flash je vektorový, není nutná žádná aktualizace při změně velikosti automatického objektu LiveMotion. Chcete-li otevřít původní zdrojový obraz v Adobe LiveMotion, můžete také poklepat na automatický obraz LiveMotion v okně dokumentu.


Jak nastavit formát exportu v LiveMotion:

1 Spusťte LiveMotion, pokud ještě neběží. 2 Pokud není paleta Export zobrazená, zvolte Window > Export (Okno > Export). 3 Z horní rozbalovací nabídky v paletě Export vyberte Flash.

Pokud toto nastavení exportu není nastaveno tak, jak je uvedeno, nebudete moci přidat automatický objekt LiveMotion do webové stránky v Adobe GoLive. Jak přidat automatický objekt LiveMotion:

1 Přetáhněte ikonu Smart LiveMotion (Automatický objekt LiveMotion) ze záložky Smart (Automatické) v paletě Objects do okna dokumentu nebo poklepejte na ikonu v paletě. Můžete také přetáhnout soubor LiveMotion na webovou stránku. Pokud to uděláte, přeskočte na krok 4. 2 Vyberte vyhrazený prostor pro automatický objekt LiveMotion a klepněte na tlačítko Browse (Procházet) ( ) vedle textového pole Source (Zdroj) v paletě Smart Image Inspector (Inspektor automatického obrazu). 3 Vyberte požadovaný soubor LiveMotion a klepněte na Open (Otevřít). LiveMotion se spustí, přepne se do popředí a automaticky uloží zdrojový soubor jako Flash. Po několika okamžicích se vrátí do popředí Adobe GoLive. 4 Až vás Adobe GoLive vyzve, uložte konvertovaný obraz do složky webového místa nebo do jiné složky uvnitř složky místa. Pokud ho neuložíte na místo uvnitř složky místa, nebude vazba platná.

Poznámka: Obraz můžete také vybrat tak, že táhnete z tlačítka Namířit a vybrat ( ) na soubor LiveMotion v okně webového místa nebo přetažením souboru z okna místa. Když zvolíte soubor a vytvoříte vazbu na zdrojový soubor, textové pole Destination (Cíl) se automaticky vyplní.

Přidání obrazů ve webových formátech Ačkoliv je pracovní postup s použitím automatických objektů efektivnější, možná již máte obrazy, které chcete použít na webové stránce, ve webovém formátu. Když přidáte obraz ve webovém formátu na webovou stránku, vytvoří Adobe GoLive jednoduchý odkaz ze stránky HTML na obraz. Adobe GoLive podporuje obrazy GIF, GIF89a pro průhledné obrazy, JPEG, Progressive JPEG a PNG. Jak vložit obraz:

1 Přetáhněte ikonu Image (Obraz) ze záložky Basic (Základní) ( nebo poklepejte na ikonu v paletě.

) palety Objects do okna dokumentu

2 Vyberte vyhrazený prostor obrazu a klepněte na Browse (Procházet) (

) v paletě Image Inspector.

3 Vyberte požadovaný grafický soubor a klepněte na Open (Otevřít).

Pokud vytváříte odkaz na obraz, který není ve webovém formátu, zobrazí se ikona vyhrazeného prostoru s přerušenou vazbou.


Obraz můžete také vybrat tak, že táhnete z tlačítka Namířit a vybrat ( webového místa nebo přetažením obrazu z okna místa.

) na soubor obrazu v okně

Pokud je vybraná volba Link Warnings (Výstrahy vazeb), přerušená vazba se objeví jako ikona otazníku s okrajem. Prázdné odkazy (Empty References) se vytvoří, když vyberete obraz nebo část hypertextu a klepnete na New Link (Nová vazba) ( ) v pruhu nástrojů, ale neurčíte cílovou adresu URL. Další informace viz „Kontrola stránek s chybami ve webovém místě“ na straně 418.

Import obrazů pro náhled Importování obrazů přetažením je vhodným urychlením pro náhled stránek. V Adobe GoLive můžete přetahovat grafické soubory z pracovní plochy na webovou stránku, včetně souborů GIF, JPEG, Progressive JPEG, PNG, PICT, TIFF a BMP. Můžete také přetáhnout obraz přímo z Adobe Photoshopu do okna dokumentu Adobe GoLive. Adobe GoLive automaticky převede obrazové soubory Photoshopu, PICT, TIFF a BMP do formátu GIF, JPEG, Progressive JPEG nebo PNG podle toho, jaké moduly jsou nainstalované a jak jsou nastavené předvolby. Další informace viz „Nastavení předvoleb obrazu“ na straně 202. Tyto převedené obrazové soubory se umístí do složky Import Images (Importované obrazy) ve složce programu Adobe GoLive nebo do jakékoli jiné složky, kterou vyberete. Tyto převedené soubory ale nemají produkční kvalitu a měly by se používat pouze pro umístění a náhledy. Abyste dosáhli produkční kvality, měli byste vždy používat funkci Save For Web (Uložit pro Web). Když jste spokojeni s výsledkem, přesuňte své obrazy produkční kvality do složky Image nebo Media ve složce webového místa. Poznámka: Pokud je nainstalovaný a zapnutý modul Save For Web (Uložit pro Web), všechny konverze obrazu se zpracovávají v dialogovém okně Save For Web. Pokud je modul vypnutý, zpracuje se konverze obrazu automaticky podle předvoleb, které nastavíte v Adobe GoLive. Další podrobnosti viz „Nastavení předvoleb obrazu“ na straně 202.

Simulace hodnoty gama Windows v Mac OS Grafiky zobrazené ve Windows vypadají tmavší než v Mac OS. Je to způsobeno rozdílem v nastavení gama. V Mac OS můžete simulovat nastavení Windows: • V ovládacím panelu Monitors and Sound (Monitory a zvuk) nastavte gama na „2.2 Television

Gamma“ pomocí tlačítka Calibrate (Kalibrovat), kterým se spustí Monitor Calibration Assistant. • Stáhněte si GammaToggle FKEY. (Shareware od Rolanda Gustafssona na

http://www.acts.org/roland/thanks.) • Použijte panel Gamma od Knoll Software (dodává se s Adobe Photoshopem).


Úprava velikosti obrazu V Adobe GoLive můžete změnit velikost obrazů, které nejsou automatickými objekty; z mnoha důvodů je ale obvykle nejlepší změnit velikost obrazů v aplikaci pro úpravu obrazů: • Pokud umístíte na stránku obraz nadměrné velikosti a pak jeho velikost zmenšíte, odkazuje stránka

stále na zbytečně velký obrazový soubor, což má za následek neefektivní využití rychlosti přenosu. • Pokud umístíte na stránku malý obraz a zvětšíte ho, obraz může vypadat zubatě.

A B

A. Tyto volby použijte ke změně velikosti obrazu. B. Vyberte volbu, která zarovná obraz.

Když změníte velikost obrazu, zobrazí Adobe GoLive v obraze výstražnou ikonu změny velikosti, aby vás varovala, že obraz může mít zbytečně velkou velikost souboru a nezobrazuje se ve svém optimálním rozlišením.

Výstražná ikona změny velikosti vám připomíná, že obraz by se nemusel zobrazit v optimálním rozlišení. Jak upravit velikost obrazu v Adobe GoLive:

S vybraným obrazem vyberte v paletě Image Inspector požadované měrné jednotky a do polí Height (Výška) a Width (Šířka) zadejte nové hodnoty. Volba Image (Obraz) v rozbalovací nabídce nastaví šířku a výšku automaticky na základě původní velikosti grafiky. Poznámka: Tuto metodu byste neměli používat k rutinnímu zmenšování velikosti obrazu. Informace o změnách velikosti automatických objektů viz „Změna velikosti automatických objektů“ na straně 174.


Další volby obrazů Záložka More (Další) v paletě Image Inspector obsahuje další volby, které umožňují upravit šířku okraje, definovat alternativní text pro obraz a převést obraz na tlačítko formuláře nebo vazbu. (Alternativní text se zobrazí v prohlížečích, které jsou konfigurovány, aby nezobrazovaly obrazy; používají ho také programy pro rozpoznávání řeči.) Jak aktivovat rámeček kolem obrazu a nastavit jeho šířku:

1 Vyberte obraz a vyberte Border (Okraj) v záložce Basic (Základní) palety Image Inspector. 2 Zadejte požadovanou šířku okraje v obrazových bodech a stiskněte Enter.

Pokud se atribut šířky okraje nastaví na 0 a obraz je zdrojem vazby, objeví se symbol řetězové vazby, který ukazuje, že to je navázaný obraz s neplatnou vazbou. Jak převést obraz na tlačítko formuláře:

1 Vyberte obraz a vyberte Is Form (Je formulář) v záložce More (Windows) nebo Spec. (Mac OS) palety Image Inspector. 2 Napište název, který chcete zobrazit ve formuláři, a stiskněte Enter. Jak přiřadit vazbu k obrazu:

1 Vyberte obraz a klepněte na záložku Link (Vazba) v paletě Image Inspector. 2 Klapněte na tlačítko New Link (Nová vazba) a pak napište URL určující cíl vazby; nebo použijte

tlačítko Browse (Procházet) k volbě umístění uvnitř webového místa. Okolo obrazu se objeví okraj (pokud není okraj zapnutý a nastavený na 0), který označuje, že je to zdroj vazby.

A B C

A. Klepnutím na New Link (Nová vazba) vytvořte nedefinovanou vazbu. B. Použitím této volby určete cílový rámec v cílové sadě rámců. C. Sem napište název vazby. Jak zadat alternativní text pro obrazy:

1 Vyberte na webové stránce obraz nebo automatický objekt (Smart Object).


2 Do textového rámečku Alt Text v paletě Image Inspector nebo Smart Image Inspector napište text, který chcete zobrazit na místě obrazu.

Poznámka: Doporučuje se, aby tagem Alt Text byly opatřeny všechny obrazy. Pomáhá to lidem s vadami zraku a také zlepšuje načítání webové stránky do prohlížeče.

Nastavení předvoleb obrazu Dialogové okno General Image Preferences (Všeobecné předvolby obrazu) umožňuje určit, jak bude Adobe GoLive zpracovávat obrazy, které nejsou připraveny pro Web. Soubory, které Adobe GoLive převede do GIF, JPEG nebo PNG, nemají produkční kvalitu; měly by se používat pouze pro náhled a umístění. Jak vybrat importní složku pro soubory PICT, TIFF nebo BMP importované pro náhled přetažením:

1 Zvolte Edit > Preferences (Úpravy > Předvolby), rozbalte předvolby General (Všeobecné) klepnutím na znaménko + (Windows) nebo na trojúhelník (Mac OS) a pak vyberte Image (Obraz). 2 V textovém rámečku Import Folder (Importní složka) klepněte na Select (Vybrat), chcete-li zvolit

jinou importní složku, nebo výběr složky neměňte, chcete-li umístit obrazy do složky Import Images ve složce programu Adobe GoLive. Jak aktivovat automatickou konverzi na soubory GIF, JPEG, Progressive JPEG nebo PNG:

1 V dialogovém okně General Image Preferences najděte volby File Format (Formát souboru). 2 Vyberte Ask User (Dotaz na uživatele), chcete-li vybrat určitý formát pro každý soubor, který importujete, nebo zvolte volbu z rozbalovací nabídky, chcete-li nastavit standardní formát. K dispozici jsou tři základní volby: • GIF má doprovodnou volbu Interlaced (Prokládaný), která umožňuje zvolit mezi standardním

a prokládaným formátem GIF. • JPEG má doprovodnou volbu Progressive (Progresivní), která umožňuje volit mezi standardním

formátem JPEG a formátem Progressive JPEG. Doplňková rozbalovací nabídka umožňuje volit mezi šesti standardizovanými úrovněmi komprese. • PNG má doprovodnou volbu Interlaced (Prokládaný), která umožňuje volit mezi standardním

a prokládaným formátem PNG. Poznámka: Pokud je nainstalovaný a zapnutý modul Save For Web (Uložit pro Web), všechny konverze obrazu se zpracovávají v dialogovém okně Save For Web. Pokud je modul vypnutý, zpracuje se konverze obrazu automaticky podle předvoleb, které zde nastavíte. Další informace o obrazových formátech viz „O formátech souborů“ na straně 206.


Jak nastavit standardní nastavení pro obrazy s nízkým rozlišením, které se objevují při načítání hlavního obrazu:

1 V dialogovém okně General Image Preferences (Všeobecné předvolby obrazu) najděte volby Low Source Image (Zdrojový obraz s nízkým rozlišením). 2 Vyberte Place in Same Folder as Source (Umístit do stejné složky jako zdroj), chcete-li uložit obrazy

s nízkým rozlišením generované v Adobe GoLive do stejné složky jako zdrojové obrazy s vysokým rozlišením; nebo zvolte Place in Import Folder (Umístit do importní složky), chcete-li je dočasně uložit před tím, než je přesunete do složky místa. 3 Vyberte volbu Auto-Generate by Default (Standardně automaticky generovat), aby Adobe GoLive automaticky vytvořil pro každý importovaný obraz kopii s nízkým rozlišením a přidal ji ke stránce.

Chcete-li se vyhnout problémům ve webových prohlížečích, zkontrolujte, že všechny obrazy mají patřičnou příponu, která označuje typ souboru; například .gif, .jpg, .jpeg nebo .png.

Vytvoření obrazových map Obrazové mapy, na které lze klepnout, jsou vazby z obrazů nebo částí obrazů ve webových stránkách. Adobe GoLive umožňuje vytvářet v obrazech obrazové mapy, upravovat je a vytvářet jejich vazby na webové stránky nebo jiné zdroje. Můžete také navázat aktivní oblasti v obrazových mapách na skriptované akce. Jak vytvořit obrazovou mapu:

1 Vyberte obraz na webové stránce. 2 V paletě Image Inspector (Inspektor obrazu) vyberte v záložce More volbu Use Map (Použít mapu).

Poznámka: Standardně přiřadí Adobe GoLive obrazové mapě jednoznačný identifikátor a zapíše ho do textového pole Name (Název). Tento identifikátor můžete nahradit tak, že zadáte název obrazové mapy do textového pole Name v záložce More. 3 Chcete-li určit aktivní místo, klepněte na jeden z nástrojů oblasti (nástroj pro výběr, obdélník, kružnice nebo mnohoúhelník) v pruhu nástrojů a pak tažením v obraze nakreslete oblast vazby. 4 Zadejte URL pro vazbu nebo vyberte cíl vazby pomocí tlačítka Browse (Prohledat) nebo tlačítka Namířit a vybrat. 5 Pomocí textového pole Target (Cíl) určete cílový rámec v cílovém souboru rámců (je-li nějaký). 6 Pomocí textového pole Title (Titul) zadejte další informace. Některé prohlížeče používají tyto informace k zobrazení tipů nástroje nebo k hlasovým anotacím.


Jak přizpůsobit vzhled aktivního místa:

1 Vyberte aktivní místo v obraze. 2 Použijte následující nástroje z pruhu nástrojů: • Zvolte nástroj ukazatel, chcete-li posunout nebo změnit velikost aktivního místa tažením. • Klepněte na tlačítko URL, chcete-li zobrazit cílovou adresu URL vazby v aktivním místě. • Klepněte na tlačítko rámečku nebo barvy, chcete-li při úpravách upravit nebo zapnout nebo vypnout

zobrazení okraje a barvy. • Klepněte na tlačítko barvy, chcete-li změnit barvu použitou pro zvýraznění. • Pokud pracujete s více překrývajícími se aktivními místy, použijte tlačítka Zcela dopředu nebo Zcela

dozadu v pruhu nástrojů, chcete-li změnit pořadí vrstvení. Poznámka: Tlačítka Zcela dopředu a Zcela dozadu jsou dostupná také v paletě Transform (Transformace). Jak přidat k obrazovým mapám akce:

1 Vyberte aktivní místo v obrazové mapě na webové stránce. 2 Zvolte Window > Actions (Okno > Akce). 3 V paletě Actions (Akce) zvolte událost myši nebo klávesy a klepněte na tlačítko +. 4 Zvolte požadovanou akci z nabídky Actions (Akce) v paletě Actions.

Obkreslované obrazy Adobe GoLive umožňuje importovat obkreslované obrazy, které můžete použít k předběžnému návrhu rozvržení webových stránek. Jako obkreslované obrazy můžete importovat následující formáty obrazů: PSD (pouze 8-bitové obrazy RGB), JPG, GIF, PNG, BMP, TARGA, PCX, PICT (Mac OS), PIXAR, TIFF a Amiga IFF. Možnost použít obrazy ve formátu Photoshopu .psd znamená, že nemusíte tyto soubory před tím, než je použijete jako obkreslované obrazy, převádět do webového formátu.

A B

C

D

E

A. Jezdec Opacity (Krytí) B. Ovládací prvky Position (Poloha) C. Nástroj posunu obrazu D. Nástroj vyříznutí E. Tlačítko Cut Out (Vyříznout)


Jak přidat k webové stránce obkreslovaný obraz:

1 Vyberte Window > Tracing Image (Okno > Obkreslovaný obraz) a importujte obraz do stránky pomocí palety Tracing Image (Obkreslovaný obraz). Můžete použít tlačítko Browse (Procházet) nebo tlačítko Namířit a vybrat v paletě. 2 V paletě Tracing Image nastavte krytí obkreslovaného obrazu. 3 Nastavte polohu obrazu v dokumentu buď zadáním hodnot v obrazových bodech do příslušných textových polí nebo tak, že klepnate na nástroj posunu obrazu v paletě (kurzor se změní na ručičku) a přetáhnete obraz v okně dokumentu. Když znovu klepnete na tlačítko nástroje posunu, nástroj posunu obrazu se vypne.

Poznámka: Velikost okna můžete rychle změnit tak, aby souhlasila s velikostí obkreslovaného obrazu, když vyberete Tracing Image (Obkreslovaný obraz) z rozbalovací nabídky Change Window Size (Změnit velikost okna) v pravém dolním rohu okna dokumentu. 4 Klepněte na nástroj vyříznutí (podobný ořezávacímu nástroji ve Photoshopu) a vyberte

obdélníkovou část obkreslovaného obrazu. Poznámka: Proces vyříznutí můžete zrušit tím, že znovu klepnete na nástroj vyříznutí. 5 Poklepejte na výběr a klepněte na Cut Out (Vyříznout) v paletě Tracing Image (Obkreslovaný obraz). 6 V dialogovém okně Save For Web (Uložit pro Web) nastavte požadovaná nastavení optimalizace a klepněte na OK. Výřez se objeví jako vrstva v plovoucím rámečku v okně dokumentu.

Nabídka v paletě Tracing Image umožňuje provádět na obkreslovaném obraze několik akcí: • Obnovit polohu obkreslovaného obrazu zpět na 0/0. • Zarovnat obkreslovaný obraz relativně k výběru v dokumentu. Můžete například vybrat buňku

v tabulce nebo plovoucí rámeček, do kterého chcete obkreslovaný obraz vložit. Obkreslovaný obraz se vloží v poloze 0/0 vzhledem k vybrané buňce tabulky nebo k plovoucímu rámečku. Jak odstranit obkreslovaný obraz:

Odznačte volbu Source (Zdroj) v paletě Tracing Image.

Práce se soubory Photoshopu s vrstvami Adobe GoLive umožňuje importovat obrazy Photoshopu s vrstvami tak, že se každá vrstva v obraze převede do vhodného webového formátu podle vaší volby. Převedené vrstvy se objeví ve webové stránce v samostatných plovoucích rámečcích. To se liší od toho, co se stane, když umístíte na webovou stránku automatický objekt Photoshopu. Soubory s vrstvami importované touto metodou se převedou do jednoho obrazu s jednou vrstvou.


Jak importovat obraz Photoshopu s vrstvami:

1 Zvolte File > Import > Photoshop as HTML (Soubor > Importovat > Photoshop jako HTML). 2 Vyberte složku, kam chcete uložit vrstvy (například složku uvnitř složky webového místa), a klepněte

na Open (Otevřít). Poznámka: Pokud importujete více než jeden obraz s vrstvami, budete možná chtít vytvořit samostatnou cílovou složku pro každý importovaný obraz s vrstvami, aby se vrstvy vzájemně nepomíchaly. 3 V dialogovém okně Save For Web (Uložit pro Web) zvolte nastavení optimalizace, které chcete použít pro první vrstvu, a klepněte na OK. Adobe GoLive přidá první vrstvu na stránku jako obraz pozadí a pak zobrazí dialogové okno Save For Web pro každou zbývající vrstvu, které se všechny přidají do samostatných plovoucích rámečků. Pokud chcete použít stejná nastavení pro všechny vrstvy obrazu, podržte Ctrl, když potvrzujete nastavení pro platnou vrstvu. Adobe GoLive pak použije tato nastavení pro všechny zbývající vrstvy, bez dotazu na nastavení pro každou vrstvu. Další podrobnosti o dostupných volbách viz „Nastavení voleb v dialogovém okně Save For Web“ na straně 179.

Poznámka: První vrstva importovaného obrazu Photoshopu s vrstvami nahradí jakýkoliv obraz pozadí, který již byl přiřazen ke stránce. Pokud je první vrstva menší než stránka, uspořádá se dlaždicově tak, aby vyplnila stránku. Pořadí plovoucích rámečků vytvořených importem obrazu Photoshopu s vrstvami můžete snadno změnit pomocí palety Floating Boxes (Plovoucí rámečky) (Window > Floating Boxes (Okno > Plovoucí rámečky)); animovat je pomocí volby Animation (Animace) v paletě Floating Box Inspector (Inspektor plovoucího rámečku) spolu s editorem časové osy DHTML; změnit zarovnání a podobně. Poznámka: Některé prohlížeče mají potíže se zpracováním plovoucích rámečků s názvy, které začínají číslem. Protože Adobe GoLive používá ke generování názvů pro plovoucí rámečky názvy vrstev, je důležité, abyste v Adobe Photoshopu nepřiřazovali vrstvám názvy, které začínají čísly nebo obsahují pouze čísla.

O formátech souborů Formát souboru, který zvolíte pro optimalizovaný obraz, je určen barevnými, tónovými a grafickými charakteristikami původního obrazu. Obecně by se měly obrazy se spojitými polotóny, jako jsou například fotografie, komprimovat jako soubory JPEG. Ilustrace s plochami plných barev nebo ostrými okraji a výraznými detaily, jako je například text, by se měly komprimovat jako soubory GIF nebo PNG-8. Formát PNG-24 je vhodný pro obrazy se spojitými polotóny. Soubory PNG-24 jsou ale často mnohem větší než soubory JPEG pro stejný obraz. Formát PNG-24 doporučujeme použít pouze v případě, že pracujete s obrazem se spojitými polotóny, který obsahuje víceúrovňovou průhlednost. (Víceúrovňovou průhlednost podporuje formát PNG-24, ale ne formát JPEG. Viz „Zachování víceúrovňové průhlednosti v obrazech PNG-24“ na straně 192.) V závislosti na formátu můžete nastavit kvalitu obrazu, průhlednost nebo podklad pozadí, zobrazení barev a metodu přenosu.


Vzhled obrazu na Webu závisí také na platformě počítače, systému zobrazení barev, operačním systému a na prohlížeči, použitém k zobrazení obrazu. Zobrazte si náhled obrazů v různých prohlížečích na různých platformách a s různým barevným rozlišením, abyste viděli, jak budou obrazy na Webu vypadat.

O formátu JPEG Formát JPEG podporuje 24-bitové barvy a zachovává široký rozsah a jemné variace jasu a odstínů, které lze nalézt na fotografiích a jiných obrazech se spojitými polotóny. JPEG podporuje většina prohlížečů. JPEG komprimuje velikost souboru selektivním odstraněním dat. Protože odstraňuje data, označuje se komprese JPEG jako ztrátová. Nastavení vyšší kvality má za následek méně odstraněných dat, ale kompresní metoda JPEG může zhoršit ostré detaily v obraze, zejména v obrazech obsahujících text nebo vektorové grafiky. Poznámka: Pokaždé, když soubor uložíte jako JPEG, vznikají v souboru artefakty, jako jsou vlnité vzorky nebo hrubě rastrované oblasti. Soubory JPEG byste měli vždy ukládat z původního obrazu, ne z dříve uloženého JPEG. Můžete vytvořit progresivní soubor JPEG, pro který se v prohlížeči v průběhu stahování plného obrazu zobrazí verze obrazu s nízkým rozlišením. Formát JPEG nepodporuje průhlednost. Když ukládáte obraz jako JPEG, průhledné obrazové body se vyplní barvou podkladu (Matte). (Viz „Vytvoření obrazů Photoshopu s průhledností a s podkladem“ na straně 189.) Pokud znáte barvu pozadí webové stránky, na kterou chcete obraz umístit, můžete přizpůsobit barvu podkladu barvě pozadí webové stránky, a tím simulovat efekt průhlednosti pozadí. Pokud obraz obsahuje průhlednost a vy neznáte barvu pozadí webové stránky nebo pokud na pozadí bude vzorek, měli byste použít formát, který podporuje průhlednost (GIF, PNG-8 nebo PNG-24).

O formátu GIF Formát GIF používá 8-bitové barvy a efektivně komprimuje plné plochy barvy, přičemž zachovává ostré detaily, které se vyskytují u čárové grafiky, log nebo ilustrací s textem. Formát GIF se používá také k vytváření animovaných obrazů. GIF podporuje většina prohlížečů. Formát GIF tradičně používá bezeztrátovou metodu komprese, která během komprimování neodstraňuje žádná data. Soubor GIF můžete uložit vícekrát bez ztráty dat. Protože ale soubory GIF mají 8-bitové barvy, optimalizace původního 24-bitového obrazu na 8-bitový GIF obecně zhorší kvalitu obrazu. Adobe GoLive navíc umožňuje vytváření ztrátové verze souboru GIF. Ztrátový formát GIF obsahuje malé artefakty komprese (podobně jako u souborů JPEG), ale dává výrazně menší soubory. Můžete snížit počet barev v GIF a zvolit volby způsobu rozkladu barev v aplikaci nebo v prohlížeči. GIF podporuje průhlednost pozadí a podklad pozadí, ve kterém prolnete okraje obrazu do barvy pozadí webové stránky.


O formátu PNG-8 Formát PNG-8 používá 8-bitové barvy. Podobně jako formát GIF, PNG-8 efektivně komprimuje plné plochy barev, přičemž zachovává ostré detaily, vyskytující se u čárové grafiky, log nebo ilustrací s textem. Protože PNG-8 nepodporují všechny prohlížeče, může být rozumné vyhnout se tomuto formátu v situacích, kdy musí být obraz přístupný nejširšímu možnému uživatelskému publiku Webu. Další informace o podpoře PNG v prohlížečích najdete v dokumentaci ke svému prohlížeči. Formát PNG-8 používá bezeztrátovou metodu komprese, která během komprese neodstraňuje žádná data. Protože ale soubory PNG-8 mají 8-bitové barvy, může optimalizace původního 24-bitového obrazu do PNG-8 zhoršit kvalitu obrazu. Soubory PNG-8 používají dokonalejší metody komprese než GIF a mohou být o 10-30% menší než soubory GIF stejného obrazu, v závislosti na barevném obsahu obrazu. Poznámka: U určitých obrazů, zejména těch, které mají velmi málo barev a velmi jednoduché vzorky, může komprese GIF vytvořit menší soubor než komprese PNG-8. Prohlédněte si optimalizované obrazy ve formátu GIF a PNG-8, abyste porovnali velikost souboru. Podobně jako u formátu GIF můžete snížit počet barev v obraze a zvolit volby způsobu rozkladu barev v aplikaci nebo v prohlížeči. Formát PNG-8 podporuje průhlednost pozadí a podklad pozadí, který umožní prolnout okraje obrazu do barvy pozadí webové stránky.

O formátu PNG-24 Formát PNG-24 podporuje 24-bitové barvy. Podobně jako formát JPEG, zachovává i PNG-24 široký rozsah jemných variací jasu a odstínů, vyskytující se například ve fotografiích. Podobně jako formáty GIF a PNG-8, zachovává PNG-24 ostré detaily, vyskytující se u čárové grafiky, log nebo ilustrací s textem. Formát PNG-24 používá stejnou bezeztrátovou metodu komprese jako formát PNG-8, která neodstraňuje žádná data. Proto jsou soubory PNG-24 obvykle větší než soubory JPEG stejného obrazu. Podpora PNG-24 prohlížeči je podobná jako u PNG-8. Podobně jako u formátu PNG-8, podporuje i formát PNG-24 průhlednost pozadí a podklad pozadí, který umožní prolnout okraje obrazu do barvy pozadí webové stránky. Mimoto formát PNG-24 podporuje víceúrovňovou průhlednost, pomocí které můžete zachovat až 256 úrovní průhlednosti pro hladké prolnutí okrajů obrazů do libovolné barvy pozadí. Víceúrovňovou průhlednost ale nepodporují všechny prohlížeče. Můžete také použít obrazy Adobe Photoshopu, Adobe Illustratoru a LiveMotion. Adobe GoLive automaticky konvertuje obraz do webového formátu podle vaší volby.

7

211

Kapitola 7: Plovoucí rámečky

P

lovoucí rámečky umožňují manipulovat s obsahem stránky a vytvářet dynamické efekty a zobrazení s více vrstvami. Plovoucí rámečky můžete použít k rozdělení stránky na obdélníky, které můžete formátovat samostatně, vyplnit obsahem HTML a navzájem překrývat.

Co jsou plovoucí rámečky Plovoucí rámečky umožňují umístit jakýkoliv objekt na stránce do absolutní polohy, takže můžete použít průhledné plovoucí rámečky například k umístění a animování objektů a k vytvoření efektů vrstev. Plovoucí rámečky můžete také změnit na textové rámečky. Plovoucí rámečky jsou založeny na elementu DIV, který je k dispozici od verze HTML 3.2. Verze HTML 4.0 podstatně rozšiřuje funkčnost elementů DIV tím, že je umožňuje umístit do absolutní polohy a mohou se překrývat, takže mají obraz pozadí nebo barvu pozadí. Element DIV je také základním elementem dynamického HTML a hlavním stavebním blokem pro umísťování do absolutní polohy s kaskádovými styly. Poznámka: Pro správné zobrazení vyžadují plovoucí rámečky webový prohlížeč verze 4.0 nebo novější. I když plovoucí rámečky budou již brzy využívány stejně běžně jako tabulky HTML, uživatelé se staršími prohlížeči mohou mít problémy při prohlížení stránek, které obsahují plovoucí rámečky. Z technického hlediska je plovoucí rámeček vizuální reprezentací elementu DIV, formátovaného obvykle stylem CSS ID. Styl ID určuje šířku, viditelnost a absolutní umístění plovoucího rámečku, a dá prohlížeči příkaz k vytvoření sekce, která není součástí normálního toku kódu HTML na stránce. Protože plovoucí rámečky jsou umístěny do absolutní polohy, je možné s nimi pohybovat. Plovoucí rámečky dědí styly aplikované na stránku s použitím kaskádových stylů. Klíčem k porozumění plovoucím rámečkům jsou dva pojmy: • Vrstvení je klíčová vlastnost. Plovoucí rámečky se mohou překrývat nebo dokonce mohou být

umístěny jeden na druhém. Pořadí překrývání je řízeno atributem nazývaným z-index (z je odvozeno od osy z v třírozměrném souřadnicovém systému). Elementy s vyšším z-indexem se zobrazí nad elementy s nižším z-indexem. Například element se z-indexem 2 bude nad elementem se z-indexem 1. Standardně jsou plovoucí rámečky umístěny nad normálním tokem HTML a nad mřížkou rozvržení Adobe GoLive. • Plovoucí rámeček jako nezávislá sekce uvnitř stránky může obsahovat jakýkoliv jiný element HTML

– například obraz nebo jednoduchý text HTML s formátováním. Má také stejný obraz pozadí a stejné barevné vlastnosti jako stránka HTML.

212 KAPITOLA 7 Plovoucí rámečky

Plovoucí rámečky mohou být neprůhledné nebo průhledné, odhalující objekty v pozadí. Můžete například použít průhledné plovoucí rámečky k umístění a animaci objektů tak, že přes sebe přecházejí, a jeden je před druhým.

A B

C

F

D

E

A. Značky plovoucích rámečků ukazují, že tato stránka HTML obsahuje pět plovoucích rámečků B. Plovoucí rámeček obsahuje obraz GIF C. Animace plovoucího rámečku pohybem po křivce D. Animace plovoucího rámečku pohybem po lineární dráze E. Plovoucí rámeček má index 2 a obsahuje GIF soubor s průhledným pozadím F. Plovoucí rámeček obsahuje text

Vytvoření plovoucích rámečků Adobe GoLive umožňuje přidat plovoucí rámečky na webovou stránku přetažením ikony plovoucího rámečku z palety Objects (Objekty). Plovoucí rámeček můžete přesně umístit pomocí palety Floating Box Inspector (Inspektor plovoucího rámečku) nebo pomocí mřížky rozvržení, kterou definujete v dialogovém okně Grid Settings (Nastavení mřížky). Do plovoucího rámečku můžete přidat jakýkoliv platný element HTML, včetně textu, obrazů, linek, a jakýchkoliv jiných základních nebo komplexních ikon z palety Objects. Můžete obvyklým způsobem formátovat text a přiřazovat atributy.


Jak vytvořit plovoucí rámeček:

1 Přetáhněte ikonu plovoucího rámečku ze záložky Basic (Základní) ( dokumentu nebo poklepejte na ikonu v paletě Objects.

) v paletě Objects do okna

Malá žlutá ikona označená SB v levém horním rohu plovoucího rámečku je značka plovoucího rámečku. Když změníte polohu rámečku, tato ikona zůstane na původním místě, kam jste ji vložili. Klepnutím na tuto ikonu můžete plovoucí rámeček vybrat, pokud neleží pod jiným plovoucím rámečkem.

2 Klepnutím na okraj plovoucího rámečku otevřete paletu Floating Box Inspector (Inspektor plovoucího rámečku). 3 Vložte název plovoucího rámečku do textového pole Name (Název). Jestliže ve své animaci používáte několik plovoucích rámečků, můžete je použitím specifických názvů snadněji identifikovat. (Neměli byste je pojmenovat pouze číslem.) Pokud neurčíte žádný název, Adobe GoLive pojmenuje všechny následující plovoucí rámečky layer, layer2, layer3, a tak dále. 4 Abyste posunuli plovoucí rámeček, táhněte ho za jeho okraj, nebo vložte přesné souřadnice (v obrazových bodech od levého horního okraje okna dokumentu) do textových polí Left (Vlevo) a Top (Nahoře). Další informace o přesném umísťování plovoucích rámečků s použitím mřížky rozvržení a palet Transform (Transformace) a Align (Zarovnání) viz „Umísťování plovoucích rámečků“ na straně 215. 5 Abyste změnili velikost plovoucího rámečku, zadejte požadovanou velikost do textových polí Width (Šířka) a Height (Výška) nebo táhněte za některé z táhel v rozích nebo po straně. Zvolte jednotky z vedlejší nabídky v paletě Inspector: • Auto, chcete-li přizpůsobit velikost rámečku jeho obsahu. • Percent (Procenta), chcete-li změnit velikost rámečku v procentech jeho původní velikosti.

Poznámka: Vnitřní chyba programu Netscape způsobuje, že Netscape mění šířku plovoucího rámečku podle šířky jeho obsahu.


6 Zadejte hodnotu z-indexu plovoucího rámečku do textového pole Depth (Hloubka), pokud budete přidávat další překrývající se rámečky. Použijte z-index (Depth) 1 pro nejnižší rámeček, 2 pro další rámeček v pořadí překrývání, a tak dále.

Přiřaďte z-indexy vždy, když umísťujete překrývající se plovoucí rámečky na stejnou stránku, abyste zabránili problémům, když se je prohlížeč snaží zobrazit.

A B C

A. Nejnižší rámeček má z-index 1. B. Rámeček uprostřed má z-index 2. C. Rámeček nahoře má z-index 3.

7 Pokud chcete, vyberte barvu pozadí pro plovoucí rámeček, s použitím postupu popsaného v „Práce

s barvami“ na straně 142. Můžete také přidat obraz pozadí. Jak přidat text do plovoucího rámečku:

1 Klepněte do plovoucího rámečku. Pokud jste ještě nevybrali nějakou barvu pozadí nebo obraz pozadí, změní se pozadí rámečku na bílé. 2 Napište požadovaný text. 3 Vyberte text a aplikujte formátování s použitím tlačítek v pruhu nástrojů Text nebo s použitím příkazů pro formátování textu z nabídky Type (Text). (Viz „Formátování textu pomocí fyzických a strukturálních stylů“ na straně 124.)

Poznámka: Pokud vložíte plovoucí rámeček do jiného plovoucího rámečku, vložený rámeček zdědí všechny informace stylů CSS od svého rodičovského plovoucího rámečku. Jak přidat obraz nebo jiný objekt do plovoucího rámečku:

1 Proveďte jeden z následujících úkonů: • Přetáhněte jakýkoliv objekt z palety Objects (Objekty) přímo do oblasti obsahu plovoucího rámečku. • Klepněte dovnitř plovoucího rámečku, a pak poklepejte na požadovanou položku v paletě Objects.


2 Nastavte položku nebo zástupný objekt podle potřeby – použijte například tlačítko Namířit a vybrat k navázání zástupce obrazu na soubor obrazu v okně webového místa.

Poznámka: Netscape Navigator a Internet Explorer mohou mít problémy s plovoucími rámečky, které obsahují tabulky nebo mřížky rozvržení. Také občasná chyba v prohlížeči Netscape 4.0 může způsobit, že obsah animovaného plovoucího rámečku dočasně zmizí, zejména když je to obrazové tlačítko. Jednoduchou nápravou je klepnout do plochy obsahu a vložit před obrazové tlačítko nerozdělitelnou mezeru stisknutím Alt a mezerníku. Jak zobrazit obraz pozadí v plovoucím rámečku:

1 Vyberte plovoucí rámeček a pak vyberte volbu BGImage (Obraz pozadí) v paletě Floating Box

Inspector (Inspektor plovoucího rámečku). V sousedním poli se objeví položka Empty Reference (Prázdný odkaz), která vás vybízí k výběru obrazu. 2 Použijte tlačítko Namířit a vybrat ( ) k navázání na soubor obrazu v okně místa, napište název souboru obrazu (včetně relativní cesty ke složce) nebo klepněte na tlačítko Browse (Procházet) ( ) a vyberte obraz v následujícím dialogu pro výběr souboru.

Poznámka: Vyhněte se použití samotného obrazu pozadí v plovoucím rámečku. V programu Netscape Communicator se nemusí obraz pozadí zobrazit. Jak změnit pozadí plovoucího rámečku z průhledného na neprůhlednou barvou:

1 Vyberte plovoucí rámeček a klepněte na pole barev v paletě Floating Box Inspector (Inspektor plovoucího rámečku). Otevře se paleta Color (Barvy). 2 Vyberte barvu z libovolné záložky palety Color (nejlépe bezpečnou webovou barvu) a táhněte ji z pole náhledu v paletě Color do pole barvy v paletě Floating Box Inspector.

Umísťování plovoucích rámečků Mřížka rozvržení, kterou určíte v dialogovém okně Grid Settings (Nastavení mřížky), vám pomůže přesně umístit plovoucí rámečky na stránce. Můžete také s použitím palet Transform (Transformace) a Align (Zarovnání) změnit velikost, polohu a zarovnat více plovoucích rámečků. Jak umístit plovoucí rámeček pomocí mřížky rozvržení:

1 Zvolte Window > Floating Boxes (Okno > Plovoucí rámečky). Otevře se paleta Floating Boxes

(Plovoucí rámečky). 2 Klepnutím na trojúhelník v pravém horním rohu palety Floating Boxes otevřete nabídku palety. Zvolte Floating Box Grid Settings (Nastavení mřížky plovoucího rámečku).


3 V dialogovém okně Grid Settings (Nastavení mřížky) určete mřížku rozvržení a její chování: • Napište do textových polí Horizontal (Vodorovně) a Vertical (Svisle) hodnoty, které určují mezery

mřížky. • Vyberte Snap (Přitahovat), aby se plovoucí rámeček přitahoval na čáry mřížky. • Vyberte Visible (Viditelná), aby se mřížka zobrazila při tažení plovoucího rámečku do nové polohy.

4 Vyberte plovoucí rámeček v paletě Floating Boxes (Plovoucí rámečky) nebo na stránce, a přetáhněte

ho do nové polohy. V závislosti na nastavení mřížky se při tažení plovoucího rámečku mřížka objeví. Jak umístit, změnit velikost a zarovnat plovoucí rámečky s použitím palet Transform (Transformace) a Align (Zarovnání):

S použitím palet Transform a Align měníte polohu, velikost a zarovnání plovoucích rámečků stejným způsobem, jakým zarovnáváte a rozmísťujete jiné objekty na mřížce rozvržení. (Viz „Zarovnání a rozmístění objektů“ na straně 139.)

Změna plovoucích rámečků na textové rámečky Plovoucí rámečky měníte na textové rámečky v paletě Floating Boxes (Plovoucí rámečky). Atributy polohy, velikosti a barvy pozadí plovoucího rámečku se zachovají. Jak změnit plovoucí rámeček na textový rámeček:

1 Zvolte Window > Floating Boxes (Okno > Plovoucí rámečky). Otevře se paleta Floating Boxes (Plovoucí rámečky). 2 Určete mřížku rozvržení podle popisu v „Umísťování plovoucích rámečků“ na straně 215. 3 Vyberte plovoucí rámeček v paletě Floating Boxes nebo na stránce HTML. 4 Klepnutím na trojúhelník v pravém horním rohu palety Floating Boxes otevřete nabídku palety. Zvolte Convert To Layout Grid (Změnit na mřížku rozvržení). Plovoucí rámeček se změní na textové rámečky na mřížce rozvržení na nové stránce.


O animaci webové stránky s plovoucími rámečky Nástroje Adobe GoLive pro DHTML (Dynamic HTML) animace umožňují vytvářet kompletní animace, maximalizující vizuální působivost vašich stránek. Animace DHTML vytvoříte tak, že umístíte obrazy, text a jiné objekty do plovoucích rámečků a použijete editor s časovou osou (TimeLine Editor) k řízení pohybu plovoucích rámečků.

E

D

A

C

B

A. Plovoucí rámeček obsahující obraz GIF se pohybuje po zakřivené dráze. B. Editor s časovou osou TimeLine Editor umožňuje řídit pohyb plovoucího rámečku v průběhu času. C. Paleta Floating Box Inspector (Inspektor plovoucího rámečku) určuje počáteční polohu, vrstvení, viditelnost a tvar křivky plovoucího rámečku. D. Ikona plovoucího rámečku v paletě Objects. E. Otevře editor s časovou osou TimeLine Editor.

Objekty můžete pohybovat po lineárních, zakřivených nebo po náhodně klikatých drahách animace. Můžete je dočasně skrýt a změnit jejich pořadí překrývání. Kombinací všech těchto funkcí můžete vytvořit úžasné vizuální efekty – můžete například zobrazit dva předměty, které se zdánlivě kolem sebe otáčejí. Informace o zobrazování a skrývání plovoucích rámečků viz „Show/Hide“ v nápovědě programu.


Editor s časovou osou TimeLine Editor se používá k vytvoření klíčových snímků a drah pro animaci objektů. A

B C D E F

G

H

I

J

A. Časový kurzor B. Tlačítko Autoplay (Přehrát) C. Nabídka scén D. Stopa akcí E. Časové stopy F. Označuje časovou stopu s právě vybraným snímkem G. Tlačítka Loop (Dokola) a Palindrome (Tam a zpět) H. Tlačítka přehrávání I. Klíčový snímek J. Počet snímků za sekundu

Před používáním editoru s časovou osou TimeLine Editor byste měli porozumět některým základním pojmům animace: Scény Umožňují autorům webových stránek vložit více animací na jednu webovou stránku. Všechny scény sdílejí stejná okna dokumentu a editoru TimeLine. Můžete vytvořit několik scén na každé stránce a nechat je přehrávat automaticky (implicitně), spustit je pomocí skriptovaných akcí nebo nabídnout uživatelům tlačítko, na které mohou klepnout. Snímky Jsou to jednotlivé obrazové jednotky animace. Snímky ve spojitosti se systémy pro video

zobrazení jsou obrazy, které se přehrávají v rychlém sledu a tím vytvářejí vizuální dojem pohybu. Počet snímků za sekundu (FPS – frames per second) řídí rychlost přehrávání animace. Čím více snímků za sekundu pro animaci stanovíte, tím lepší bude dojem plynulého pohybu. Když ale překročíte možnosti uživatelova počítače, snímky se přeskočí. Klíčové snímky Označují body na časové stopě animované sekvence, ve kterých nastává nějaká změna.

Tyto změny zahrnují změny směru dráhy animace nebo modifikace obecných vlastností, jako jsou viditelnost a pořadí překrývání. Pro každý klíčový snímek můžete nastavit polohu přidruženého plovoucího rámečku jeho přetažením do požadované polohy v okně dokumentu. Vzdálenost mezi dvěma klíčovými snímky také určuje rychlost přehrávání – čím kratší je vzdálenost, tím rychleji se bude animace přehrávat, a naopak. Časové stopy Umožňují vložit klíčové snímky do vyhrazené časové stopy pro každý plovoucí rámeček

a přizpůsobit časování a polohu. Každá jednotlivá stopa může obsahovat více klíčových snímků, které můžete umístit kam chcete. Akce Jsou to předem připravené skripty, které můžete použít s editorem TimeLine, s tlačítky s rollovery,

s vazbami a s elementy formulářů. Akce umožňují přidat zvuk, spustit přehrávání scén, dynamicky měnit obsah obrazů a řídit další procesy v okně prohlížeče. Akce popisujete v paletě Action Inspector (Inspektor akce) nebo v paletě Actions (Akce).


Chcete-li animovat více objektů na stejné stránce, použijete více plovoucích rámečků. Jak přidáváte plovoucí rámečky, Adobe GoLive je překrývá v takovém pořadí, ve kterém jste je vložili, a přidá novou časovou stopu do editoru TimeLine. Každý plovoucí rámeček animujete samostatně tím, že vložíte do jeho časové stopy klíčové snímky a umístíte plovoucí rámeček v okně dokumentu. Časová stopa v editoru TimeLine představuje pohyb plovoucího rámečku v čase (vždy zleva doprava), nikoliv směr pohybu v okně dokumentu. Směr pohybu určíte tak, že postupně klepnete na všechny klíčové snímky a přetáhnete plovoucí rámeček do nové polohy uvnitř okna dokumentu. Když například vyberete první klíčový snímek v časové stopě a přetáhnete plovoucí rámeček k pravému okraji okna, určíte, že animace má začít od pravé strany okna prohlížeče. Když zobrazujete náhled animace, nenechte se zmást opačnými směry pohybu v obou oknech. Úprava pořadí překrývání plovoucích rámečků umožňuje nastavit způsob, jakým se plovoucí rámečky budou pohybovat přes jiné plovoucí rámečky na stránce. Viz „Použití pořadí překrývání k simulaci vzájemného pohybu“ na straně 224.

Vytváření objektů, které se budou animovat Každý objekt, který chcete animovat, musí být uzavřen v plovoucím rámečku. Obecně do něj můžete vložit jakoukoliv položku z palety Objects, kterou lze vložit do sekce těla webové stránky. (Tabulky a mřížky rozvržení mohou v některých prohlížečích působit problémy.) Když připravujete obsah animace, uvažujte o použití průhledných obrazů GIF. Průhledné obrazy GIF vytvářejí velmi živý dojem pohybu, poněvadž při svém pohybu po stránce nezakrývají to, co je pod nimi. Vhodné jsou také normální obrazy GIF nebo formátovaný text. Můžete také zvolit neprůhlednou barvu pozadí nebo obraz pozadí, pokud nechcete, aby plovoucí rámeček byl průhledný. Abyste vytvořili objekt, který chcete animovat, vložte nejprve na stránku plovoucí rámeček, a pak nastavte vlastnosti rámečku a přidejte do něho obsah. Viz „Vytvoření plovoucích rámečků“ na straně 212. Poznámka: Netáhněte soubor obrazu přímo do plovoucího rámečku. Tím se vytvoří obraz pozadí, který se nezobrazí v programu Netscape. Abyste přidali obraz, který chcete nechat plout po stránce, přetáhněte do plovoucího rámečku ikonu obrazu ze záložky Basic (Základní) ( ) v paletě Objects (Objekty).

Plovoucí rámeček bez obsahu a plovoucí rámeček s vyhrazeným místem pro obraz


Animování plovoucích rámečků Abyste animovali plovoucí rámeček, umístíte klíčové snímky do editoru TimeLine. Každý klíčový snímek je spojený s relativní polohou vzhledem k levému hornímu rohu okna dokumentu. Tato poloha představuje umístění plovoucího rámečku v určitém čase při přehrávání animace. Tuto polohu můžete nastavit přetažením plovoucího rámečku do požadované polohy. Tvar dráhy animace můžete vybrat v paletě Floating Box Inspector (Inspektor plovoucího rámečku). Místo vkládání klíčových snímků po jednom a určování jejich poloh můžete zaznamenat dráhu animace také stisknutím tlačítka záznamu a pohybem plovoucího rámečku po stránce. Jak vložit nový klíčový snímek:

1 Vyberte plovoucí rámeček v okně dokumentu klepnutím na jeho obrys, na jeho malou žlutou značku nebo na jeho název v paletě Floating Boxes (Plovoucí rámečky). 2 Otevřete editor TimeLine klepnutím na tlačítko TimeLine Editor ( ) nad hlavní plochou obsahu okna dokumentu. Zpočátku obsahuje okno TimeLine Editor jen jednu časovou stopu s jedním klíčovým snímkem. 3 Podržte Ctrl (Windows) nebo Apple (Mac OS) a klepnutím na požadovanou polohu na časové stopě

vložte nový klíčový snímek. Můžete také podržet Alt, klepnout na existující klíčový snímek a jeho přetažením do nové polohy vytvořit nový klíčový snímek.

A B

C

D

A. Levá a pravá značka označují začátek a konec rozsahu přehrávání. B. Podržte Alt, klepněte na první klíčový snímek a pak tažením do požadované polohy vytvořte nový klíčový snímek. C. Počítadlo označuje polohu klíčového snímku v sekundách a ve snímcích. D. Časový kursor sleduje vaše tažení a zastaví se v poloze, kam přetáhnete nový klíčový snímek.

Nový klíčový snímek vyznačuje konec rozsahu přehrávání. Označuje to pravá značka rozsahu přehrávání ( ), která sleduje tažení klíčového snímku. Pokud vložíte více klíčových snímků, pak klíčový snímek nejvíce vpravo vždycky omezuje rozsah přehrávání.


Jak určit polohu plovoucího rámečku pro klíčový snímek:

1 Přejděte do okna dokumentu a táhněte plovoucí rámeček do polohy, kde chcete aby se plovoucí rámeček objevil v klíčovém snímku. Požadovanou polohu můžete také vložit do textových polí Left (Vlevo) a Top (Nahoře) v paletě Floating Box Inspector (Inspektor plovoucího rámečku). 2 Klepnutím na první klíčový snímek ( ) vrátíte plovoucí rámeček do počáteční polohy. (Jeho polohu můžete také změnit způsobem popsaným v kroku 1.) 3 Klepnutím na tlačítko Spustit ( ) ve spodní části editoru TimeLine spustíte náhled animace. Plovoucí rámeček se pohybuje přes okno dokumentu a zastaví se v místě, kde jste nastavili poslední klíčový snímek. 4 Časový kurzor se také zastaví na pravé značce rozsahu přehrávání ( ). Klepněte na tlačítko Stop ( ) a znovu nastavte časový kurzor na začátek rozsahu animace, nebo k návratu časového kurzoru použijte tlačítko Zpět ( ). 5 Je-li třeba, použijte ke kontrole opakování tlačítka Loop (Dokola) a Palindrome (Tam a zpět) v levém dolním rohu okna editoru TimeLine: • Tlačítko Loop (Dokola) (

) spustí animaci v jednoduché nekonečné smyčce. Když plovoucí rámeček dosáhne koncového bodu animační cesty, skočí zpět na začátek, začne se znovu pohybovat a tento cyklus se stále opakuje.

• Tlačítko Palindrome (Tam a zpět) (

) způsobí, že plovoucí rámeček se odráží zpět a dopředu mezi počátečním a koncovým bodem animační cesty. (Aby mohlo být aktivováno tlačítko Palindrome (Tam a zpět), musí být aktivní také tlačítko Loop (Dokola).)

6 Chcete-li změnit rychlost přehrávání, vyberte jinou volbu z nabídky FPS dole v editoru TimeLine.

Většina prohlížečů zvládne výchozí nastavení 15 FPS, dokonce i když běží na průměrném video hardwaru. Pokud chcete pracovat s vyššími rychlostmi, nejprve si animaci otestujte na širším výběru systémových konfigurací a zkontrolujte, že je přehrávání plynulé. Mezi dva existující klíčové snímky můžete rychle přidat další klíčový snímek a nastavit polohu plovoucího rámečku pro tento snímek. V editoru TimeLine táhněte časový kurzor do polohy na časové ose, kde chcete vložit nový klíčový snímek. Plovoucí rámeček se přesune do této polohy na dráze animace. Podržte Alt a klepněte na okraj plovoucího rámečku a pak ho přetáhněte do nové polohy. Jak určit tvar dráhy animace:

1 Podržte Ctrl (Windows) nebo Apple (Mac OS) a klepnutím v editoru TimeLine nastavte koncovou polohu dráhy animace přidáním nového klíčového snímku do časové osy. Pak posuňte plovoucí rámeček do požadované polohy pro klíčový snímek. 2 Podržte Ctrl (Windows) nebo Apple (Mac OS) a klepnutím v editoru TimeLine vložte nový klíčový snímek mezi dva existující klíčové snímky.


3 Klepnutím vyberte prostřední klíčový snímek a pak přetáhněte plovoucí rámeček do polohy, ve které chcete, aby se objevil.

A B

C

D

E

A. Koncový bod animace je označen klíčovým snímkem v 30 sekundách B. Počáteční bod animace C. Ukazuje polohu ve vybraném klíčovém snímku D. Vybraný klíčový snímek vložený na 15 sekundách rozděluje animaci do dvou sekcí E. Volba tvaru určuje tvar animace

4 Chcete-li změnit tvar dráhy mezi určitým klíčovým snímkem a následujícím klíčovým snímkem, vyberte klíčový snímek a pak vyberte volbu tvaru z nabídky Animation (Animace) v paletě Floating Box Inspector (Inspektor plovoucího rámečku). Linear (Lineární) je výchozí tvar dráhy, Curve (Křivka) vytváří hladkou křivku mezi klíčovými snímky a None (Žádná) způsobí, že plovoucí rámeček mezi klíčovými snímky přeskočí.

Chcete-li vybrat více klíčových snímků, podržte Shift a klepněte na ně, táhněte kolem nich nebo zvolte Edit > Select All (Úpravy > Vybrat vše); pak aplikujte nějaké společné nastavení, jako je například zakřivená dráha animace. 5 Klepnutím na tlačítko Spustit (

) v editoru TimeLine spusťte náhled animace.

Jak zaznamenat dráhu animace:

1 Otevřete editor TimeLine a začněte s počátečním klíčovým snímkem. 2 Klepněte na tlačítko Record (Nahrát) ( rámečku).

) v paletě Floating Box Inspector (Inspektor plovoucího

3 V okně dokumentu táhněte plovoucí rámeček po požadované dráze. V každém velkém ohybu dráhy

se objeví klíčový snímek. 4 Klepněte na každý klíčový snímek a pokud je potřeba upravte polohu.


Ovládání více plovoucích rámečků Paleta Floating Boxes (Plovoucí rámečky) vám pomůže ovládat více vrstvených plovoucích rámečků v okně dokumentu tím, že rámečky dočasně zobrazíte nebo skryjete a zamknete nebo odemknete. Poznámka: Tato nastavení v paletě Floating Boxes (Plovoucí rámečky) jsou pouze dočasná a budou potlačena, když klepnete na tlačítko Spustit v editoru TimeLine nebo když přepnete zobrazení dokumentu. Můžete také použít paletu Floating Boxes k umístění plovoucích rámečků na mřížku (viz „Umísťování plovoucích rámečků“ na straně 215). Jak ovládat více plovoucích rámečků v okně dokumentu:

1 Zvolte Window > Floating Boxes (Okno > Plovoucí rámečky). V paletě Floating Boxes je seznam plovoucích rámečků v aktivním okně.

A

B

C D

A. Klepnutím na ikonu oka skryjte nebo zobrazte obsah plovoucího rámečku. B. Klepnutím na ikonu tužky plovoucí rámeček zamkněte nebo odemkněte. C. Klepnutím na název přemístěte plovoucí rámeček do popředí. D. Zamkne plovoucí rámeček v zobrazení úprav.

2 Klepnutím na název (layer, layer 1, atd.) aktivujte plovoucí rámeček v okně dokumentu pro úpravy a přemístěte ho do popředí. Klepnutí na název plovoucího rámečku dočasně potlačí v následujících krocích nastavení skrýt/zobrazit a zamknout/odemknout. 3 Klepnutím na ikonu oka skryjte nebo zobrazte obsah plovoucího rámečku, nebo podržte Ctrl a klepnutím na kteroukoliv ikonu oka skryjte nebo zobrazte všechny plovoucí rámečky najednou: • Ztlumená ikona oka označuje, že plovoucí rámeček je neviditelný. • Černá označuje, že plovoucí rámeček je viditelný. • Červená označuje, že dočasná nastavení skrýt/zobrazit v paletě Floating Boxes jsou v konfliktu se

současným stavem viditelnosti plovoucího rámečku (viz „Nastavení viditelnosti plovoucích rámečků“ na straně 226), nastaveným v paletě Floating Box Inspector pro určitý klíčový snímek. Ikona oka je například červená, pokud jste v paletě Floating Boxes skryli plovoucí rámeček, který má být v animaci viditelný. Poznámka: Červená označuje spíše konflikt než chybu. Vaše animace se přehraje bez problémů.


4 Klepnutím na ikonu tužky plovoucí rámeček zamkněte nebo odemkněte nebo podržte Ctrl a klepnutím na kteroukoliv ikonu tužky zamkněte nebo odemkněte všechny plovoucí rámečky najednou. Když je plovoucí rámeček zamknutý, ikona tužky je v paletě Floating Boxes (Plovoucí rámečky) ztlumená a vy nemůžete plovoucí rámeček přetáhnout ani upravovat jeho obsah v okně dokumentu. 5 Ikona zámku v pravém horním rohu palety Floating Boxes umožňuje zachovat všechna dočasná nastavení skrýt/zobrazit a zamknout /odemknout, když klepnete na tlačítko Spustit v editoru TimeLine, nebo přepnete zobrazení – například ze zobrazení Layout (Rozvržení) na Source (Zdroj) a zpět.

Použití pořadí překrývání k simulaci vzájemného pohybu Pořadí překrývání, známé také jako z-index, je jedinečná vlastnost plovoucích rámečků. V animacích s více objekty můžete tuto vlastnost použít ke stanovení, které objekty se mají objevit nahoře, když se dráhy dvou nebo více objektů kříží. Pořadí překrývání můžete také použít k simulaci komplexnějších efektů vzájemného pohybu – když například necháte jeden plovoucí rámeček otáčet se kolem druhého. Podobně jako jiné vlastnosti plovoucích rámečků, můžete nastavit pořadí překrývání pro časový interval mezi kterýmikoliv dvěma klíčovými snímky na téže časové stopě. Abyste ale mohli vytvořit vizuální efekty překrývání, musí být tato vlastnost nastavena pro nejméně dva synchronní nebo překrývající se časové úseky na dvou různých časových stopách v téže scéně. Následující příklad je založen na jednoduché animaci, která simuluje relativní pohyb. Je to palindrom (smyčka přehrávaná tam a zpět), který je složen ze dvou objektů; ze stacionárního plovoucího rámečku s GIF obrazem a z animovaného plovoucího rámečku s textovým obsahem. Čtyři klíčové snímky, každý z nich na dvou časových stopách, řídí animaci a rozdělují ji do čtyř fází. Textový rámeček zůstává nahoře až do konečné fáze, ve které se pohybuje vzadu a je zakrytý obrazovým rámečkem.

1

2

3

4

1. Poloha prvního klíčového snímku. 2. Poloha druhého klíčového snímku. 3. Poloha třetího klíčového snímku. 4. Poloha čtvrtého klíčového snímku. Jak vytvořit animaci s nepohyblivým objektem a s animovaným objektem, který se kolem něj otáčí:

1 Vložte dva plovoucí rámečky a přidejte obsah – například do jednoho rámečku přidejte obraz a do druhého formátovaný text. 2 Vyberte obrazový rámeček, který má zůstat nepohyblivý, umístěte ho na stránce, a umístěte tři klíčové snímky na jeho časovou stopu v editoru TimeLine.


3 Abyste zajistili, že obrazový rámeček zůstane nepohyblivý, vyberte první klíčový snímek obrazového rámečku. Pak klepněte na každý další klíčový snímek. Poloha by měla být stejná pro všechny čtyři klíčové snímky, aby se zabránilo poskakování obrazového rámečku během přehrávání. Máte-li pochybnosti, klepněte na všechny čtyři klíčové snímky a zkontrolujte jejich polohu v textových polích Top (Nahoře) a Left (Vlevo) v paletě Floating Box Inspector (Inspektor plovoucího rámečku). Je-li to třeba, upravte jakýkoliv posun o obrazové body ruční úpravou horní a levé souřadnice každého klíčového snímku. 4 Klepněte na tlačítka Loop (Dokola) ( ) a Palindrome (Tam a zpět) ( aby se animace přehrávala v nekonečné smyčce.

) v editoru TimeLine,

5 Klepnutím na tlačítko Spustit ( ) spusťte náhled nepohyblivého objektu. Obrazový rámeček by se neměl pohybovat. Pokud se vyskytne jakýkoliv pohyb, vraťte se ke kroku 4 a upravte souřadnice Top a Left. 6 Vyberte druhý rámeček (textový rámeček) a vložte další tři klíčové snímky na jeho časovou stopu v editoru TimeLine. Umístěte každý klíčový snímek přímo pod klíčové snímky obrazového rámečku, abyste je synchronizovali.

Dvě časové stopy v editoru TimeLine. Každá obsahuje čtyři klíčové snímky.

7 Určete čtyři polohy (odpovídající čtyřem klíčovým snímkům) textového rámečku vzhledem

k obrazovému rámečku: • Vyberte první klíčový snímek textového rámečku; pak táhněte textový rámeček do polohy vlevo od

obrazového rámečku a zarovnejte ho svisle na střed obrazového rámečku. • Vyberte druhý klíčový snímek textového rámečku; pak táhněte textový rámeček vodorovně nad

obrazový rámeček. • Vyberte třetí klíčový snímek textového rámečku; pak táhněte textový rámeček vodorovně doprava od

obrazového rámečku. • Vyberte poslední klíčový snímek textového rámečku; pak táhněte textový rámeček vodorovně nad

obrazový rámeček. 8 Určete pořadí překrývání pro všechny čtyři klíčové snímky, jak pro textový rámeček, tak pro obrazový rámeček: • Vyberte první klíčový snímek textového rámečku. V paletě Floating Box Inspector (Inspektor

plovoucího rámečku) zadejte 2 do textového pole Depth (Hloubka).


• Vyberte první klíčový snímek obrazového rámečku. V paletě Floating Box Inspector zadejte 1 do

textového pole Depth.

D A

E

B C

A. Současné souřadnice B. Vybírá tvar dráhy animace. C. Vybírá barvu klíčového snímku D. Nastaví pořadí překrývání E. Nastaví viditelnost

9 Opakujte krok 8 pro druhý a třetí klíčový snímek, abyste umístili textový rámeček nad obrazový rámeček. 10 Obraťte pořadí překrývání pro časový úsek po posledním klíčovém snímku: • Vyberte poslední klíčový snímek textového rámečku v paletě Floating Box Inspector a zadejte 1 do textového pole Depth. • Vyberte poslední klíčový snímek obrazového rámečku. Zadejte 2 do textového pole Depth v paletě

Floating Box Inspector. 11 Klepnutím na tlačítko Spustit ( ) spusťte náhled animace. Při návratu z nejvzdálenějšího pravého bodu dráhy animace by měl textový rámeček zmizet za obrazovým rámečkem.

Nastavení viditelnosti plovoucích rámečků Vlastnost viditelnosti umožňuje skrýt objekt v časovém úseku mezi libovolnými dvěma klíčovými snímky. Neviditelné plovoucí rámečky mají tři hlavní výhody: • Můžete nechat objekty náhle se objevit, abyste vytvořili živější dojem z vaší animace. • V animacích s více obrazy můžete všechny obrazy skrýt až do doby, než bude animace úplně stažena

do prohlížeče uživatele. Tím se vyhnete problému na začátku, kdy přehrávání začne ještě předtím, než bude mít prohlížeč všechny informace k plynulému přehrávání. • Je dobrým zvykem skrýt obraz, když použijete akci k výměně obsahu obrazu v animované scéně.

Pokud obraz zůstane viditelný, může to způsobit trhanou animaci v době, kdy prohlížeč stahuje nový obraz z webového serveru.


Jak skrýt plovoucí rámeček:

1 Klepněte na klíčový snímek, od kterého chcete plovoucí rámeček skrýt. V paletě Floating Box Inspector vypněte volbu Visible (Viditelný). 2 Je-li to zapotřebí, opakujte tento krok pro další klíčové snímky. 3 Klepnutím na tlačítko Spustit ( zmizet.

) spusťte náhled animace. Plovoucí rámeček by měl dočasně

Vkládání akcí do animací Stopa Akce (Actions Track) v editoru TimeLine umožňuje vložit klepnutím se stisknutou klávesou Ctrl (Windows) nebo Apple (Mac OS) značky akcí. Tyto značky můžete spojit se skriptovanými akcemi dostupnými v nabídce Action (Akce) v doprovodné paletě Action Inspector (Inspektor akce). Pokyny k použití akcí s editorem TimeLine viz „Using Adobe GoLive actions“ v nápovědě programu. Poznámka: Stopu akce můžete použít i pro stránky, které nemají plovoucí rámečky.

Vytváření více scén Editor TimeLine umožňuje uložit s dokumentem více scén. Všechny scény sdílejí stejné okno dokumentu, stejné plovoucí rámečky. Se scénami budou vaše animace pružnější. Můžete je přehrávat současně, jednu po druhé nebo spouštět a zastavovat jednotlivé scény pomocí skriptovaných akcí. Můžete mít scény, které prohlížeč zavede automaticky (výchozí nastavení), můžete použít ke spuštění přehrávání skriptované akce nebo můžete nechat uživatele, aby vybral scénu klepnutím na tlačítko. Dejte pozor, abyste se nepokusili řídit stejný plovoucí rámeček ze dvou scén současně. Doporučujeme používat jen jednu scénu, pokud je to možné. Scény jsou výkonný nástroj, ale umožňují vám vytvořit i příliš složité animace. Jak vytvořit více scén:

1 Vytvořte animaci. Standardně pojmenuje Adobe GoLive první vytvořenou animaci v dokumentu Scene 1. 2 V levém horním rohu editoru TimeLine ( Zadejte název scény a klepněte na OK.

) zvolte Scenes > New Scene (Scény > Nová Scéna).

Časové stopy v editoru TimeLine se nezmění. Klíčové snímky pro první animaci se použijí v první scéně, kterou jste vytvořili. Při práci na druhé scéně je neměňte. (Chcete-li je upravit, použijte nabídku Scenes (Scény) a přepněte zpět na první scénu.) 3 Přidejte a animujte plovoucí rámečky pro novou scénu, a pak spusťte náhled celé animace klepnutím

na tlačítko Spustit v editoru TimeLine.


Řízení přehrávání scén Jestliže vytvoříte dvě scény, můžete koordinovat jejich přehrávání. Satndardně jsou scény nastaveny na Autoplay (Automatické přehrávání) – to znamená, že všechny scény se přehrávají hned poté, co prohlížeč dokončí načítání stránky. Chcete-li přehrávat scény po jedné, dejte prohlížeči instrukce, aby přepnul na druhou scénu poté, co se dokončí přehrávání první scény. Vypněte volbu Autoplay pro druhou scénu a vložte akci Play Scene (Přehrát scénu) do stopy akcí první scény. (Pokud je první scéna animace ve smyčce nebo palindrom, budete možná muset vložit akci Play Scene (Přehrát scénu) a za ní akci Stop Scene (Zastavit scénu.) Jak nechat prohlížeč přepnout v průběhu přehrávání na druhou scénu:

1 Vyberte druhou scénu a klepnutím na tlačítko Autoplay (

) vypněte automatické přehrávání.

2 Vraťte se k první scéně, podržte Ctrl (Windows) nebo Apple (Mac OS) a klepnutím na stopu akcí kdekoliv před polohou posledního klíčového snímku vložte značku akce (označenou ikonou otazníku ( )). 3 V paletě Action Inspector (Inspektor akce) zvolte Actions > Multimedia > Play Scene (Akce > Multimédia > Přehrát scénu) a zvolte název scény z rozbalovací nabídky.

Akce Play Scene (Přehrát scénu) nařídí prohlížeči, aby přepnul na určenou scénu po ukončení přehrávání současné scény. Na stopě akcí se značka s otazníkem nahradí ikonou Play Scene (Přehrát scénu) ( ). 4 Pokud první scéna je animace ve smyčce nebo palindrom, podržte Ctrl (Windows) nebo Apple (Mac OS), klepněte na stopu akcí u posledního klíčového snímku a vložte akci Stop Scene (Zastavit scénu) (Actions > Multimedia > Stop Scene – Akce > Multimedia > Zastavit scénu). Objeví se ikona akce Stop Scene (Zastavit scénu) ( ).

Akce Stop Scene (Zastavit scénu) zastaví přehrávání scény, i když je to nekonečná smyčka. Tuto akci musíte vložit až za akci Play Scene (Přehrát scénu); jinak se animace zastaví dříve, než se scény mohou přepnout. 5 Vraťte se k první scéně a spusťte náhled animace v prohlížeči. Přehrávání by mělo ukázat přepnutí scén. 6 Pokračujte a přidejte další scény a automatické přehrávání opakováním kroků 1 až 6.

Poznámka: Abyste dali uživatelům více možností ovládání animace, můžete také připojit akci Play Scene (Přehrát scénu) k rollover tlačítku nebo k textu hypervazby v zobrazení Layout (Rozvržení). Pokyny k použití akcí s rollover tlačítky a textem viz „Using Adobe GoLive actions“ v nápovědě programu.

8

231

Kapitola 8: Pokročilý návrh stránek

R

ámce, předlohy a komponenty vám pomohou zpracovávat a řídit návrh stránek, optimálně využívat zobrazovací plochu a rychle vyvinout grafický styl stránek pro webové místo.

Používání rámců Rámce rozdělují okno webového prohlížeče na části, které obsahují samostatné stránky. Pomocí rámců můžete vylepšit vizuální vzhled svých stránek a usnadnit uživatelům navigaci ve vašem webovém místě.

Co jsou rámce Protože obsahem každého rámce je samostatná stránka (a samostatný soubor) s vlastní adresou URL, dá se měnit a rolovat nezávisle na stránkách v jiných rámcích. Pomocí rámců můžete například vytvořit pomůcku pro navigaci na obrazovce nebo obsah, která zůstává stále viditelný, zatímco uživatel roluje obsahem stránky v jiném rámci.

A

B

C

A. Horní rámec obsahuje identifikační stránku. B. Levý rámec obsahuje navigační stránku. C. Pravý rámec obsahuje stránku, která má vazbu na navigační stránku.

232 KAPITOLA 8 Pokročilý návrh stránek

K vytvoření stránky se dvěma rámci potřebujete alespoň tři dokumenty HTML: jeden dokument pro sadu rámců a dva dokumenty pro viditelný obsah stránek. Sada rámců je hlavní dokument, který definuje velikost a umístění rámců a udává adresy URL, odkazující na stránky s obsahem. Stránky s obsahem navrhujete tak, aby se do jednotlivých rámců v sadě rámců buď vešly nebo aby se v nich rolovaly. Můžete nastavit rámce tak, aby se obsah roloval, pokud je stránka s obsahem větší než rámec, a můžete zvolit viditelné okraje nebo žádné okraje. Můžete také nastavit rámce na pevnou velikost nebo tak, že se jejich rozměry budou proporcionálně měnit, když uživatel změní velikost okna prohlížeče. Poznámka: Alespoň jeden rámec v sadě rámců musí mít měnitelnou velikost. Při práci s rámci nezapomeňte na tato omezení prohlížečů: • Stránky tvořené jediným rámcem se v prohlížečích Netscape Navigator a Communicator nezobrazují. • Prohlížeče obvykle posouvají obsah stránky o několik obrazových bodů od okraje své hlavní

zobrazovací plochy a od vnitřních okrajů jednotlivých rámců. Toto chování může způsobovat potíže při nastavování velikosti. • Vnoření sady rámců do jiné sady rámců je možné, ale může způsobit vážné navigační problémy.

Přidávání rámců na webovou stránku Záložka Frames (Rámce) palety Objects (Objekty) obsahuje různé sady rámců, které můžete přetáhnout do okna dokumentu, když chcete vytvořit webovou stránku s rámci. Náhled obsahu rámce můžete zobrazit přímo v okně dokumentu, bez použití prohlížeče. Pak můžete přímo na místě provést korekce poklepáním na obsah rámce nebo přetažením jiné stránky. A

B

C D

F

E

A. Klepnutím přepněte do režimu zobrazení rámců. B. Klepnutím přepněte na náhled rámců. C. Název rámce se zobrazí zde. D. Klepnutím na oddělovač vyberte sadu rámců nebo jeho tažením změňte relativní velikost rámců. E. V rámcích se zobrazí ikony, které představují jednotlivé stránky. F. Růžově vystínované plochy představují rámce s pevnou velikostí v obrazových bodech.


Jak vytvořit sadu rámců:

1 Vytvořte stránky HTML, které chcete umístit do sady rámců. Například vytvořte stránku „Obsah.html“ pro rámec s obsahem a stránku „Telo.html“ pro hlavní okno. 2 Otevřete nové okno dokumentu a klepněte na záložku Frame Editor (Editor rámců) ( části okna. 3 Ze záložky Frames (Rámce) ( dokumentu.

) v horní

) palety Objects (Objekty) přetáhněte ikonu sady rámců do okna

4 Vyberte sadu rámců klepnutím na kterékoli z jejích vodorovných nebo svislých oddělovačů. 5 Nastavte volby sady rámců v paletě Frame Set Inspector (Inspektor sady rámců). (Textové pole Size (Velikost) není k dispozici, protože sada rámců nemůže mít absolutní velikost.) • Klepnutím na tlačítko Orientation (Orientace) v paletě Frame Set Inspector uspořádejte okraje rámců

uvnitř sady rámců vodorovně nebo svisle. • Chcete-li změnit tloušťku okraje, klepněte na libovolný oddělovač v okně dokumentu, vyberte volbu

Border Size (Šířka okraje), zadejte hodnotu v obrazových bodech a stiskněte Enter. • Chcete-li skrýt vodorovný nebo svislý okraj, vyberte oddělovač a nastavte volbu Border Frame (Okraj

rámce) na No (Ne) a volbu Border Size (Šířka okraje) na 0. • Chcete-li určit barvu všech okrajů v sadě rámců, klepněte na libovolný oddělovač v okně dokumentu,

vyberte volbu Border Color (Barva okraje), klepněte na pole Border Color a potom zvolte barvu z palety Color (Barvy). Tato barva nahradí šedou barvu okrajů, kterou standardně zobrazuje většina webových prohlížečů. Poznámka: Chcete-li obarvit pozadí rámce, musíte vybrat barvu pozadí pro stránku, kterou chcete zobrazit v daném rámci. (Viz „Výběr barev textu a pozadí“ na straně 108.) 6 Klepněte na každý rámec v sadě rámců a pojmenujte ho popisným názvem. (Pojmenujte například

horní rámec „Identita“ a pravý rámec „Hlavni“.) Nastavte další atributy rámců podle potřeby.

7 Zadejte titulek stránky sady rámců. (Titulky přidělené jednotlivým rámcům se v okně prohlížeče nezobrazí.) 8 Uložte dokument se sadou rámců. Nezapomeňte ho uložit s příponou .html, například

SadaRamcu.html.


Jak určit obsah rámce:

Proveďte jeden z následujících úkonů: • V paletě Frame Inspector (Inspektor rámce) táhněte z tlačítka Namířit a vybrat (

) na stránku v okně webového místa nebo na ikonu Page (Stránka) ( ) vedle titulku cílového dokumentu.

• Do textového pole URL v paletě Frame Inspector napište požadovaný název souboru. Klepněte na

tlačítko Browse (Procházet) (

) a vyberte webovou stránku.

• Přetáhněte URL ze záložky External (Vnější) v okně webového místa. (Pomocí URL můžete vytvářet

odkazy na vzdálené disky nebo servery. (Další informace viz „Používání URL a e-mailových adres ve webovém místě“ na straně 399.) Přetáhněte stránky HTML ze záložky Files (Soubory) v okně webového místa nebo z pracovní plochy. Poznámka: Chcete-li, aby se obsah rámce změnil, když uživatel klepne na některou vazbu na stránce v jiném rámci, musíte tento rámec určit jako cíl každé vazby. (Další informace viz „Použití stránky s obsahem v sadě rámců“ na straně 235.) Jak zobrazit náhled stránky se sadou rámců i s jejich obsahem:

Klepněte na záložku Preview (Náhled) ( ) (Windows) nebo na záložku Frame Preview (Náhled rámce) ( ) (Mac OS) v horní části okna dokumentu. V režimu náhledu nelze provádět úpravy. Poznámka: Adobe GoLive neumí zobrazit náhled externích URL. Externí vazby musíte testovat v prohlížeči. Chcete-li zobrazit nebo upravovat stránku v jiném okně, poklepejte na ikonu stránky v rámci.

Jak určit atributy rámce:

1 Vyberte rámec, který chcete změnit. 2 V paletě Frame Inspector (Inspektor rámce) určete velikost rámce jedním z následujících úkonů: • Z rozbalovací nabídky Size (Velikost) zvolte Scale (Měnit velikost), pokud chcete, aby se velikost

rámce automaticky změnila vždy, když uživatel změní velikost okna prohlížeče. • Z rozbalovací nabídky Size (Velikost) zvolte Pixel (Obrazové body) a zadejte požadovanou velikost

v obrazových bodech, pokud nechcete, aby se velikost rámce mohla měnit. Tuto techniku použijte například tehdy, jestliže se má v rámci objevit malý obraz známých rozměrů. Poznámka: Pokud zadáte absolutní velikost v obrazových bodech pro jeden rámec, musíte alespoň pro jeden další stejně orientovaný rámec nastavit volbu Scale (Měnit velikost), jinak se bude v tomto směru měnit velikost všech rámců v sadě. • Z rozbalovací nabídky Size (Velikost) zvolte Percent (Procenta), pokud chcete určit pevný poměr

velikosti daného rámce k celkové výšce nebo šířce sady rámců. Potom v textovém poli Size (Velikost) zadejte požadovanou hodnotu v procentech. U vodorovně orientovaných rámců tento atribut určuje relativní výšku. U svisle orientovaných rámců tento atribut určuje relativní šířku.


• Z rozbalovací nabídky Size (Velikost) zvolte Pixel (Obrazové body) nebo Percent (Procenta) a tažením

okraje rámce nastavte požadovanou velikost. 3 V textovém poli Name (Název) zadejte název rámce. 4 Vyberte volbu z rozbalovací nabídky Scrolling (Rolování): • Auto (Automaticky) skryje posuvník, když není potřeba, a zobrazí ho, když je obsah pro daný rámec

příliš velký. • Yes (Ano) zobrazí posuvník stále. • No (Ne) posuvník skryje. Jak přemístit rámec nebo vnořenou sadu rámců:

1 Chcete-li přemístit rámec, klepněte a táhněte. Chcete-li přemístit sadu rámců, klepněte se stisknutou klávesou Ctrl a táhněte.

Při tažení zjistíte, že orientace rámce omezuje směr pohybu. Svislé rámce můžete přetáhnout do strany a vodorovné rámce nahoru nebo dolů, ale sadu rámců nemůžete zvětšit tažením za její hranice. 2 Uvolněte tlačítko myši, když je rámec v požadované poloze nebo když je vnořená sada rámců na požadovaném místě v nadřazené sadě rámců.

Použití stránky s obsahem v sadě rámců Když použijete rámce k zobrazení obsahu a k němu navázaných stránek, potom pro každou vazbu z obsahu musíte určit cílový rámec, ve kterém se navázaná stránka zobrazí.


Jak určit rámec pro navázané stránky:

1 Vytvořte sadu rámců a určete, že se má stránka s obsahem zobrazit v jednom z rámců. 2 Otevřete stránku s obsahem a pro každou položku z obsahu vytvořte vazbu na příslušnou webovou

stránku. 3 V záložce Link (Vazba) palety Text Inspector (Inspektor textu) nebo Image Inspector (Inspektor obrazu) pro každou vazbu určete cílový rámec, ve kterém se má navázaná stránka zobrazit. Cílový rámec určíte tím, že vyberete některou z voleb z rozbalovací nabídky Target (Cíl): • Když vyberete název rámce, stránka se načte do příslušného rámce. Názvy rámců z otevřené sady

rámců jsou uvedeny na začátku nabídky. • Volba _top způsobí, že stránka, na kterou vazba odkazuje, se načte do celého okna webového

prohlížeče, kde zcela nahradí právě zobrazenou sadu rámců. Pokud je platná stránka již na nejvyšší úrovni, načte se stránka do rámce, který obsahuje danou vazbu. • Volba _parent způsobí, že stránka, na kterou vazba odkazuje, se načte do rodičovského rámce

platného dokumentu. Pokud platná stránka žádný rodičovský rámec nemá, použije se cíl _self. (Rodičovský rámec je nejbližší nadřazený rámec v hierarchii.) • Volba _self způsobí, že stránka, na kterou vazba odkazuje, se načte do rámce obsahujícího danou

vazbu, přičemž nahradí stránku s obsahem. • Volba _blank způsobí, že stránka, na kterou vazba odkazuje, se načte do nového nepojmenovaného

okna. • Volba Default (Výchozí) odstraní jakýkoli dříve nastavený cíl pro danou stránku.

Pro stránky v rámcích můžete nastavit akce, které donutí prohlížeč, aby stránky vždy zobrazoval v sadě rámců, bez ohledu na způsob přístupu k nim. Pomocí akcí také můžete nastavit více cílových rámců pro jednu vazbu. Viz „Preventing pages from displaying in a frame set“ a „Displaying two frames from one link“ v nápovědě programu.


Používání předloh Stránky uložené ve složce Stationeries (Předlohy) slouží jako šablony, které lze opakovaně použít jako základ nových stránek ve webovém místě. Předlohy jsou zvlášť užitečné, pokud chcete při návrhu webového místa zachovat jednotný vzhled stránek. Předloha stránky může obsahovat sady rámců, obrazy, styly a další informace k opakovanému použití. Jak vytvořit předlohu:

V okně dokumentu připravte v zobrazení Layout (Rozvržení) stránku, kterou chcete použít jako předlohu, a proveďte jeden z následujících úkonů: • Zvolte File > Save As (Soubor > Uložit jako), pojmenujte soubor předlohy, přejděte do složky místa,

ve kterém ji chcete mít uloženou, z rozbalovací nabídky v pravém dolním rohu (Windows) nebo v horní části (Mac OS) dialogového okna Save As (Uložit jako) zvolte Stationeries (Předlohy) a klepněte na Save (Uložit).

Uložení souboru předlohy • Ze záložky Files (Soubory) v okně webového místa soubor přetáhněte do složky Stationeries

(Předlohy) v záložce Extras (Dodatky) okna webového místa. Klepněte na tlačítko Update (Aktualizovat) v pruhu nástrojů a webové místo uložte. Soubor se uloží do podsložky Stationeries (Předlohy) ve složce NazevMista.data a zobrazí se v záložce Site Extras (Dodatky místa) palety Objects (Objekty) a v záložce Extras (Dodatky) v okně webového místa. Chcete-li zobrazit vlastnosti předlohy, vyberte soubor předlohy v okně webového místa a prohlédněte si jeho vlastnosti v záložce File (Soubor) v paletě File Inspector (Inspektor souboru). Ve Windows můžete také klepnout pravým tlačítkem myši na soubor předlohy a zvolit příkaz Show Properties (Zobrazit vlastnosti). V Mac OS můžete k zobrazení vlastností použít také příkaz Finderu Get Info (Informace) (se stisknutou klávesou Ctrl klepněte na soubor předlohy a zvolte příkaz Info (Informace) ve Finderu). Jak použít předlohu stránky:

Proveďte jeden z následujících úkonů: • V záložce Extras (Dodatky) v okně webového místa poklepejte na požadovaný soubor ve složce

Stationeries (Předlohy) a klepnutím na tlačítko Create (Vytvořit) otevřete nový, nepojmenovaný dokument založený na příslušné předloze.


• V paletě Objects (Objekty) zvolte Stationeries (Předlohy) z rozbalovací nabídky v dolní části záložky

Site Extras (Dodatky místa) ( ). Přetáhněte ikonu požadované předlohy do záložky Files (Soubory) v okně webového místa nebo do záložky Navigation (Navigace) (vyberte okno místa a zvolte Site > View > Navigation (Místo > Zobrazení > Navigace)) do takové polohy v hierarchii místa, kam chcete přidat dceřinnou, sourozeneckou nebo rodičovskou stránku. Když předlohu táhnete do záložky Navigation, objeví se na horním a dolním okraji a po stranách ikon stránek vodorovný nebo svislý pruh, který označuje, kam se nová stránka umístí v hierarchii místa, až uvolníte tlačítko myši.

Přetažení ikony předlohy do záložky Files (Soubory)

GoLive vytvoří novou stránku založenou na zvolené předloze. Pokud jste použili navigační hierarchii, nová stránka se uloží do složky New Files (Nové soubory) webového místa. Pomocí záložek File (Soubor) a Page (Stránka) v paletě File Inspector (Inspektor souborů) můžete změnit název souboru a titulek nové stránky.

Používání komponent GoLive Komponenty Adobe GoLive umožňují vytvářet odkazy na jeden nebo více elementů, uložených v jednom zdrojovém souboru, které můžete opakovaně použít na mnoha stránkách. Pokud se elementy ve zdrojovém souboru změní, stránky obsahující danou komponentu se dynamicky aktualizují. Tato vlastnost je užitečná pro tlačítka, loga, nadpisy, titulky nebo jiné společné navigační elementy, které chcete ve svém webovém místě používat.

Co jsou to komponenty Komponenty Adobe GoLive se používají k vytváření odkazů na jiné stránky HTML a k jejich kompletnímu vložení na stránku, spolu s textem, obrazy a dalším vizuálním obsahem. Když stránku HTML vložíte jako dynamickou komponentu místo toho, abyste do svých stránek napsali její kód HTML, můžete kterýkoli prvek komponenty snadno změnit. Stačí jen poklepáním na komponentu


otevřít zdrojový soubor a pak upravit daný element. Když zdrojový soubor uložíte, Adobe GoLive automaticky aktualizuje všechny stránky, které komponentu obsahují. Adobe GoLive zahrne vloženou stránku HTML do vlastního tagu, který prohlížeč ignoruje (přestože jeho obsahu rozumí a správně jej interpretuje) a označí ji jako dynamický obsah stránky, který je nutné aktualizovat pokaždé, když se změní zdrojový soubor. Poznámka: Komponenty se aktualizují pouze pokud pracujete na lokálním disku. Stránky na webovém serveru se neaktualizují, když pošlete na server pouze zdrojový soubor. Aby se webové místo aktualizovalo po změně zdrojového souboru, musíte také nahrát všechny stránky, které obsahují danou komponentu. Komponenty mohou být vnořené do jiných komponent a mohou obsahovat jednu nebo více akcí.

Vytvoření komponent GoLive Jakmile vytvoříte zdrojový soubor HTML a uložíte ho jako komponentu, můžete s použitím palety Objects (Objekty) vkládat komponentu do svých stránek. Paletu Objects můžete také použít k vložení vyhrazeného místa pro komponentu, které můžete později navázat na zdrojový soubor komponenty.

Jak vytvořit zdrojový soubor komponenty:

1 V okně nového dokumentu klepněte na ikonu Page (Stránka) (

).

2 Klepněte na záložku HTML v paletě Page Inspector (Inspektor stránky) a klepnutím na tlačítko Component (Komponenta) určete, že se má platná stránka používat jako dynamická komponenta.

Díky tomu budete moci komponentu snadno upravovat v okně dokumentu v zobrazení Layout (Rozvržení). Musíte také nastavit Import CS Library (Importovat knihovnu CS), pokud vaše komponenta využívá akce GoLive.


3 Přidejte požadovaný obsah – například mřížku rozvržení s logem firmy a nadpisem. 4 Zvolte File > Save As (Soubor > Uložit jako), komponentu pojmenujte, najděte složku místa, do kterého ji chcete uložit, zvolte Components (Komponenty) z rozbalovací nabídky v pravém dolním rohu (Windows) nebo v horní části (Mac OS) dialogového okna Save As (Uložit jako) a klepněte na Save (Uložit).

Soubor se uloží do podsložky Components (Komponenty) ve složce NazevMista.data a zobrazí se v záložce Site Extras (Dodatky místa) palety Objects (Objekty) a v záložce Extras (Dodatky) v okně webového místa. Jak použít komponentu:

1 Zkontrolujte, že jste uložili požadovaný zdrojový soubor. (Nemusí být otevřený.) 2 Proveďte jeden z následujících úkonů: • Klepněte na záložku Site Extras (Dodatky místa) palety Objects (Objekty) a zvolte Components

(Komponenty) z rozbalovací nabídky v dolní části okna, abyste zobrazili uložené komponenty. Potom přetáhněte požadovanou komponentu do okna dokumentu. • Přetáhněte ikonu vyhrazeného místa pro komponentu ze záložky Smart (Automatické) (

) palety Objects (Objekty) do okna dokumentu a pomocí tlačítka Browse (Procházet) nebo tlačítka Namířit a vybrat ( ) v paletě Component Inspector (Inspektor komponenty) vytvořte vazbu na požadovanou komponentu. Pokud je zdrojový soubor komponenty otevřený, můžete také vytvořit vazbu na ikonu Page (Stránka) ( ) v okně dokumentu. Při vytváření zdrojového souboru nezapomeňte, že vyhrazená místa pro komponenty mění svoji velikost odlišně podle velikosti stránky a velikostí vložených komponent. Můžete také změnit šířku vyhrazených míst pro komponenty, když je umístíte na mřížku rozvržení.

Jak upravit zdrojový soubor:

1 Poklepáním na vloženou komponentu otevřete zdrojový soubor. 2 Proveďte požadované změny a zdrojový soubor uložte. 3 Klepnutím na OK aktualizujte všechny stránky, v nichž je daná komponenta použita.

9

243

Kapitola 9: Přidávání interaktivity

Z

abudovaná podpora pro JavaScript, aplety Java a W3Cobjects v Adobe GoLive vám umožní oživit své webové stránky. S Adobe GoLive je zvláště jednoduché implementovat rollovery myši (interaktivní oblasti, které se mění, když provedete nějakou akci s myší).

Vytváření rolloverů Pomocí ikony Rollover můžete vytvářet obrazy s rollovery, které se mění, když se přes ně pohybuje kurzor. Tato tlačítka s rollovery můžete na svých webových stránkách používat jako navigační ovladače nebo jako prvky, které umožní uživatelům ovládat animace.

Vytváření tlačítek s rollovery Efekt animace vznikne, když prohlížeč dostane pokyn, aby přepínal mezi dvěma (nebo třemi) mírně odlišnými obrazy stejného tlačítka. Tyto obrazy můžete snadno vytvořit v programech, jako je Adobe Photoshop. Poznámka: Obrazy musí mít přesně stejnou velikost, jinak nedostanete jednotné výsledky ve všech prohlížečích. První obraz určuje normální vzhled tlačítka s rolloverem, to znamená, jak tlačítko vypadá, když je kurzor někde jinde na stránce. Druhý obraz je zvýrazněnou verzí prvního obrazu a zobrazí se, když je kurzor na tlačítku. Třetí obraz se objeví, když se na tlačítko s rolloverem klepne. Rollover můžete použít jako hypervazbu na jiné místo, umožňující zobrazit jiný obraz nebo text, a také můžete k tlačítku přiřadit vestavěnou akci Adobe GoLive. Adobe GoLive vloží vlastní element sloužící jako kontejner pro obrazy s JavaScriptem, který přepíná jeho obsah v závislosti na současné poloze kurzoru myši. Při načítání stránky ve webovém prohlížeči Adobe GoLive automaticky načte všechny obrazy rolloveru. Jak vytvořit tlačítko s rolloverem myši:

1 Přetáhněte ikonu Rollover ze záložky Smart (Automatické) ( dokumentu.

) v paletě Objects (Objekty) do svého

2 Hlavní obraz pro tlačítko vyberte tak, že klepnete na ikonu Main Image (Hlavní obraz) v paletě Rollover Inspector (Inspektor rolloveru) a klepnete na tlačítko Browse (Procházet) ( ) nebo táhnete z tlačítka Namířit a vybrat na obraz v okně webového místa. 3 Obraz, který se má objevit, když je kurzor na tlačítku, vyberte tak, že klepnete na ikonu Over Image (Obraz Přes), vyberete zaškrtávací pole vedle textového pole pro výběr souboru a vyberete požadovaný obraz.

244 KAPITOLA 9 Přidávání interaktivity

4 Obraz, který se má objevit při stisknutí tlačítka, vyberte tak, že klepnete na ikonu Click Image (Obraz Klepnutí), vyberete zaškrtávací pole vedle textového pole pro výběr souboru a vyberete požadovaný obraz.

Tyto tři obrazy tlačítka můžete také přiřadit přetažením. Nejdříve přetáhněte hlavní obraz z okna nebo složky webového místa na ikonu Rollover v okně dokumentu. Potom podržte Alt a přetáhněte druhý obraz, který se má objevit, když je kurzor nad tlačítkem. Podržte Shift a přetáhněte obraz, který se má objevit při klepnutí na tlačítko. Všechny obrazy by měly mít stejnou velikost. Jak vytvořit vazbu z rolloveru na jiné místo:

V paletě Rollover Inspector (Inspektor rolloveru) vyberte zaškrtávací pole URL a do textového pole napište požadovanou adresu URL (Universal Resource Locator). Cíl vazby můžete vybrat také pomocí tlačítka Browse (Procházet) nebo tlačítka Namířit a vybrat. Jak zobrazit zprávu dole v okně prohlížeče, když se kurzor přesune nad rollover:

V okně Rollover Inspector (Inspektor rolloveru) vyberte zaškrtávací pole Status (Stav) a zadejte text, který se má zobrazit v okně prohlížeče. Efekt vyzkoušejte tím, že zobrazíte náhled stránky ve webovém prohlížeči.

Přiřazení akcí k rolloveru Pomocí palety Actions (Akce) můžete k obrazu tlačítka přiřadit akce ve formě skriptů – například akci, která změní barvu pozadí stránky. Poznámka: Zkontrolujte, že všechny obrazy tlačítka na stránce mají jedinečný název (tlacitko1, tlacitko2 atd.). Názvy, které obsahují pouze číslice (1, 2, 3 atd.) nebo začínají číslicí nebudou v některých prohlížečích fungovat. Názvy také nesmějí obsahovat mezery ani speciální znaky. Jak přiřadit akci, která se spustí určitou událostí myši nebo klávesnice:

1 V paletě Actions (Akce) zvolte požadovanou událost myši nebo klávesnice ze seznamu vlevo: • Vyberte Mouse Click (Klepnutí myší), pokud chcete, aby se akce spustila jedním klepnutím myší. • Vyberte Mouse Enter (Myš dovnitř), pokud chcete, aby se akce spustila, když se kurzor myši přemístí

nad tlačítko. • Vyberte Mouse Exit (Myš ven), pokud chcete, aby se akce spustila, když kurzor opustí tlačítko.

2 Chcete-li přidat do seznamu Actions (Akce) další akci, klepněte na tlačítko +. 3 Zvolte akci z nabídky Action (Akce) a upravte její volby. Další informace o akcích, které Adobe GoLive podporuje viz „Using Adobe GoLive actions“ v nápovědě programu. 4 Spusťte prohlížeč verze 4.0 nebo novější, ve kterém vyzkoušíte náhled akce. (Prohlížeče verze 3.0 podporují jen některé akce. Informace o kompatibilitě s jednotlivými prohlížeči jsou uvedeny vedle názvu každé akce; výsledky se však mohou lišit, a proto byste měli vždy vyzkoušet náhled akcí ve vybraných prohlížečích.)


Používání JavaScriptu Vestavěná podpora pro JavaScript a JScript umožňuje přidat na webové stránky interaktivní prvky, ověřovat vstup z formulářů, zlepšovat vzhled stránek a dynamicky ovládat prohlížeč. Integrovaný Script Editor (Editor skriptů) umožňuje vytvářet skripty v aplikaci, vložit je do stránky a okamžitě je vyzkoušet s použitím cílového prohlížeče. Abyste mohli snadněji přidávat do stránek JavaScripty, Adobe GoLive nabízí kompletní seznam stavebních bloků pro všechny hlavní dialekty a verze JavaScriptu. Kdykoli vložíte na stránku ikonu skriptu, vyberete požadovanou aplikaci v paletě Inspector, který potom odpovídajícím způsobem nakonfiguruje Script Editor (Editor skriptů). V kombinaci se schopností JavaScriptu identifikovat prohlížeče vám tato funkce usnadní vytváření stránek, podporujících více platforem. Důležité: Všechny prohlížeče neimplementují JavaScript stejným způsobem. Všechny JavaScripty testujte ve všech cílových prohlížečích.

Vytvoření JavaScriptu Do stránky dokumentu můžete přidat JavaScripty. JavaScripty můžete také vložit do sekce hlavičky okna dokumentu, čímž umožníte, aby se skript provedl, zatímco se viditelná část dokumentu teprve načítá. Po vložení ikony do těla nebo hlavičky webové stránky vytvoříte příslušný JavaScript v paletě JavaScript Editor (Editor JavaScriptu). Jak vytvořit JavaScript:

1 Přetáhněte ikonu JavaScript ze záložky Basic (Základní) (

) palety Objects (Objekty) do okna dokumentu, přetáhněte ikonu Script (Skript) ze záložky Head (Hlavička) ( ) palety Objects do panelu sekce hlavičky nebo vyberte ikonu JavaScript Editor (Editor JavaScriptu) ( ) v pravém horním rohu okna dokumentu a klepněte na tlačítko New Script Item (Nová položka skriptu) ( ) v pruhu nástrojů výsledného okna JavaScript Editor.

A

B

A. Ikona JavaScript B. Ikona Script

2 Vyberte ikonu JavaScript v okně dokumentu nebo vyberte ikonu Script (Skript) v panelu sekce hlavičky. 3 V paletě Inspector napište do textového pole Name (Název) popisný název skriptu. 4 Vyberte cílový prohlížeč z rozbalovací nabídky Language (Jazyk). V textovém poli pod nabídkou se objeví verze jazyka, odpovídající zvolenému prohlížeči.


5 Chcete-li vytvořit odkaz na existující skript, vyberte Source (Zdroj) a napište adresu URL souboru skriptu, klepněte na tlačítko Browse (Procházet) a vyberte skript nebo tažením z tlačítka Namířit a vybrat vytvořte vazbu na skript v okně webového místa. Soubory skriptů musí mít příponu .js. Jak upravit existující JavaScript:

1 Jedním z následujících úkonů otevřete JavaScript Editor (Editor JavaScriptu): • Poklepejte na ikonu JavaScript v okně dokumentu. • Vyberte ikonu JavaScript v okně dokumentu a klepněte na tlačítko Edit (Upravit) v paletě Inspector. • Klepněte na ikonu JavaScript Editor (Editor JavaScriptu) (

) v pravém horním rohu okna

dokumentu. 2 Pokud jsou ikony v pruhu nástrojů editoru JavaScriptu neaktivní, klepněte na tlačítko New Script Item (Nová položka skriptu) ( ). 3 Klepněte na záložku Events (Události) v paletě JavaScript Inspector (Inspektor JavaScriptu), aby se zobrazily objekty, k nimž mohou být přiřazeny nějaké události, a také události, které tyto objekty podporují. Chcete-li do skriptu přidat událost, vyberte ji v paletě Inspector a napište kód události do textového pole Event Code (Kód události).

Vytvořte definice událostí zapsáním jejich kódů do textového pole Event Code (Kód události).

4 Klepněte na záložku Objects (Objekty) palety JavaScript Inspector (Inspektor JavaScriptu), aby se

zobrazil kompletní seznam objektů JavaScriptu. Chcete-li přidat objekt do skriptu, přetáhněte ho ze záložky Objects do okna JavaScript Editor. Klepněte na deklaraci funkce v seznamu Functions (Funkce) v záložce Script (Skript) palety JavaScript Inspector (Inspektor JavaScriptu), čímž přejdete přímo na příslušné místo ve skriptu. 5 Zavřete JavaScript Editor (Editor JavaScriptu), čímž se vaše práce uloží. 6 V pruhu nástrojů Adobe GoLive klepněte na Show in Browser (Zobrazit v prohlížeči). Webová stránka se otevře v prohlížeči, který jste pro zobrazování náhledu a testování vybrali v dialogovém okně Preferences (Předvolby). Nebo zvolte Special > Show in Default Browser (Speciální > Zobrazit ve výchozím prohlížeči).


Poznámka: V Mac OS se nedá zobrazit náhled efektů JavaScriptu v režimu Preview (Náhled). Z následující ukázky kódu v jazyce JavaScript je patrné, jak se dá pomocí jednoduchého JavaScriptu zobrazit čas a datum získané z uživatelova operačního systému.

Ukázka JavaScriptu • Metoda document.write() v řádku „Your Local Time“ (Váš místní čas) přepíše textový řetězec

formátovaný jako nadpis H1 z dokumentu do okna prohlížeče. • new Date () vytvoří nový objekt data obsahující dlouhou verzi hodnoty současného data

z uživatelova operačního systému. Tento objekt je přiřazen proměnné currtime. • Poslední řádek je opět výstupem do okna prohlížeče, který používá metodu document.write(),

přičemž je do něj vložena proměnná currtime nastavená na současný čas a datum.

Nastavení předvoleb pro JavaScript Předvolby písma, barvy a tisku pro JavaScript umožňují přizpůsobit nastavení, která určují, jak se Script Editor (Editor skriptů) chová a zobrazuje a jak skripty vypadají v zobrazení Source (Zdroj). Jak nastavit předvolby pro JavaScript:

1 Zvolte Edit > Preferences (Úpravy > Předvolby). 2 Vyberte ikonu JavaScript (

) v levém panelu dialogového okna Preferences (Předvolby).

3 Nastavte následující předvolby: • Volba Enable Dragging of Marked Text (Povolit přetažení označeného textu) ovládá interní podporu

přetažení. • Volba Auto Indent (Automatické odsazování) ovládá odsazování elementů skriptu nižších úrovní. • Volba Line Numbers (Čísla řádků) zobrazí čísla řádků na levém okraji okna JavaScript Editor (Editor

JavaScriptu). • Volba Word Wrap (Zalamování řádků) určuje, že se kód JavaScriptu má zalomit, když dosáhne

pravého okraje okna JavaScript Editor. • Volba Tab Size (Velikost tabulátoru) nastaví šířku odsazení (ve znacích), které se přidá, když stisknete

klávesu Tab.


Jak se jednotlivá nastavení projeví si můžete prohlédnout v náhledovém panelu dole v dialogovém okně Preferences (Předvolby). Jak nastavit předvolby písma:

1 Zvolte Edit > Preferences (Úpravy > Předvolby). 2 V levém panelu dialogového okna Preferences (Předvolby) rozbalte předvolby JavaScriptu a vyberte Font (Písmo). 3 Vyberte požadované písmo, velikost písma a řez písma pro kód JavaScriptu. Vybrané volby nahradí výchozí nastavení. Toto písmo se použije k zobrazení kódu JavaScriptu v okně JavaScript Editor (Editor JavaScriptu). Jak nastavit předvolby barev (zvýraznění syntaxe):

1 Zvolte Edit > Preferences (Úpravy > Předvolby). 2 V levém panelu dialogového okna Preferences (Předvolby) rozbalte předvolby JavaScriptu a vyberte Colors (Barvy). 3 Vyberte Enable Syntax Highlighting (Zapnout zvýraznění syntaxe), pomocí které určíte výchozí

vzhled různých elementů kódu v okně JavaScript Editor. 4 Barvu pro každý element kódu vyberte tak, že klepnete na barevné pole pro daný element, zvolíte novou barvu a klepnete na OK. Jak nastavit předvolby pro tisk:

1 Zvolte Edit > Preferences (Úpravy > Předvolby). 2 V levém panelu dialogového okna Preferences (Předvolby) rozbalte předvolby JavaScriptu a vyberte

Printing (Tisk). 3 Nastavte následující předvolby, které určují výchozí formátování tištěných výstupů kódu JavaScriptu: • Vyberte Printer Specific Settings (Specifická nastavení tiskárny), pokud chcete, aby se na výtisku

použilo zvýraznění syntaxe (užitečné na barevné tiskárně), aby elementy v jazyce HTML byly zvýrazněné tučným písmem a aby řádky kódu byly očíslované, což usnadní odkazování na jednotlivé řádky. • Vyberte Use Special Font for Printing (Použít speciální písmo pro tisk), chcete-li pro tisk použít

vlastní nastavení voleb písma a stylu.

Vytváření Java apletů Adobe GoLive umožňuje vkládat Java aplety do mřížky rozvržení nebo přímo do kódu v jazyce HTML, takže můžete na svou stránku přidat animaci nebo jiné pokročilé prvky. V Mac OS můžete Java aplety přehrávat v režimech Layout (Rozvržení) a Preview (Náhled) přímo v Adobe GoLive, takže pro zobrazení náhledu není nutné spouštět prohlížeč. Ve Windows můžete Java aplety přehrávat pouze v režimu Preview.


Jak vytvořit Java aplet:

1 Přetáhněte ikonu Java Applet ze záložky Basic (Základní) ( dokumentu nebo poklepejte na ikonu v paletě Objects.

) palety Objects (Objekty) do okna

2 Vyberte požadovaný aplet tím, že klepnete na tlačítko Browse (Procházet) a najdete požadovaný aplet nebo tažením z tlačítka Namířit a vybrat ( ) vytvořte vazbu na aplet v okně webového místa.

Název souboru s příponou .class – to znamená souboru, který obsahuje kód apletu – se objeví v textovém poli Code (Kód). Název apletu se objeví v ikoně Java apletu v okně dokumentu. Poznámka: Některé programy pro tvorbu Java apletů nepřidávají správně příponu .class k atributu CODE. Tyto aplety fungují v prohlížeči, ale nezobrazí se v Adobe GoLive. 3 Aplet pojmenujte tak, že do textového pole Name (Název) napíšete jednoznačný název, který

nepoužívá žádný jiný objekt na stránce. 4 Velikost apletu změňte tažením za táhla pro změnu velikosti nebo zadejte hodnoty do polí Width (Šířka) a Height (Výška) v paletě Java Applet Inspector (Inspektor Java apletu). 5 Chcete-li aplet zarovnat podle okolního textu, když nepoužíváte mřížku rozvržení, použijte textová pole HSpace (Vodorovná mezera) a VSpace (Svislá mezera) a nabídku Alignment (Zarovnání).

Používání Java apletů jako kontejnerů HTML Adobe GoLive umožňuje vložit do ikony Java apletu alternativní text nebo objekty HTML. Prohlížeč zobrazí alternativní text, jestliže apletu porozumí, ale načítání apletu je vypnuto; objekt HTML se objeví v případě, když není podporovaná Java. Přidáním obrazů nebo jiných objektů HTML můžete upravit nebo obohatit text nebo jiný obsah HTML v Java apletu. Jak zobrazit alternativní text nebo HTML v ikoně Java apletu:

1 Když je vybraná ikona Java apletu, klepněte na záložku Alt palety Java Applet Inspector (Inspektor

Java apletu). 2 Proveďte jeden z následujících úkonů: • Do textového pole Alt Text napište normální text, který se má zobrazit na místě Java apletu. • Vyberte Show Alternative HTML (Zobrazit alternativní HTML). V okně dokumentu napište HTML

přímo do ikony apletu nebo na ikonu přetáhněte některou z ikon Body (Tělo), Forms (Formuláře) nebo DHTML z palety Objects (Objekty).

Přidávání zvuků a videoklipů Adobe GoLive podporuje řadu zásuvných modulů, které prohlížečům umožňují přehrávat multimédia z Webu a díky kterým můžete na svou stránku vkládat zvuky a videoklipy. Do mřížky rozvržení nebo přímo do kódu v jazyce HTML můžete vložit jakýkoli multimediální element podporovaný prohlížeči Netscape Navigator nebo Internet Explorer, včetně QuickTime, zvuků a videa Real, SVG a zásuvných modulů SWF. Klipy z podporovaných médií můžete přehrávat přímo v Adobe GoLive.


Adobe GoLive nabízí nastavitelnou ikonu Plug-in (Zásuvný modul) a také předdefinované zásuvné moduly SWF, QuickTime, Real nebo SVG. Pokud použijete ikonu Plug-in, mapujete typ souboru k zásuvnému modulu, čímž určíte, který zásuvný modul otevírá který typ souboru. Chcete-li umožnit použití nějakého zásuvného modulu v Adobe GoLive, musíte ho nejdříve přetáhnout do složky Plug-ins (Zásuvné moduly), umístěné v téže úrovni jako aplikace Adobe GoLive. Další informace o mapování typu souboru k zásuvnému modulu viz „Nastavení předvoleb zásuvných modulů“ na straně 256. Důležité: Než pošlete filmy QuickTime na server, musíte je nejdříve sloučit – to znamená převést je do sekvenčního formátu kompatibilního s Webem.

Použití zásuvných modulů Všechny zásuvné moduly – Plug-in (Zásuvný modul), SWF, QuickTime, Real a SVG – se nastavují stejně v paletě Plug-in Inspector (Inspektor zásuvného modulu). Volby definované v záložkách Basic (Základní), More (Další) a Attribs (Atributy) jsou podobné pro všechny zásuvné moduly; název poslední záložky a volby, které se na ní určují (QuickTime, Special atd.) se mění podle toho, jaký typ MIME je mapován ke konkrétnímu zásuvnému modulu. U předdefinovaných zásuvných modulů je jen zřídka nutné měnit výchozí nastavení v paletě Inspector. Pro ikonu Plug-in (Zásuvný modul) musíte všechny atributy určit v paletě Inspector, což vyžaduje dostatek znalostí o tom, jaké atributy je nutno přiřadit každému zásuvnému modulu, aby správně fungoval při použití s různými prohlížeči. Pomocí záložky Attribs (Atributy) palety Plug-in Inspector (Inspektor zásuvného modulu) můžete ručně přidávat, upravovat a odstraňovat atributy zásuvného modulu. Tuto záložku mužete použít s ikonou Plug-in (Zásuvný modul) k úpravě atributů těch doplňků pro média, které Adobe GoLive nepodporuje přímo. Důležité: Přestože Adobe testuje všechny zásuvné moduly a doplňky pro média od jiných výrobců, které jsou v současnosti k dispozici, neposkytuje žádnou implikovanou ani výslovnou záruku, že zásuvné moduly budou po vložení na webové stránky fungovat správně. Uvědomte si, že špatně naprogramované zásuvné moduly mohou způsobovat havárie systému a mohou poškodit vaše soubory. Jak nastavit záložku Basic (Základní) pro zásuvný modul:

1 Přetáhněte ikonu Plug-in (Zásuvný modul) nebo ikonu některého z předdefinovaných zásuvných modulů (SWF, QuickTime, Real nebo SVG) ze záložky Basic (Základní) ( ) palety Objects (Objekty) do okna dokumentu nebo poklepejte na ikonu v paletě Objects. 2 V záložce Basic palety Plug-in Inspector (Inspektor zásuvného modulu) vyberte File (Soubor), klepněte na tlačítko Browse (Procházet) ( ) a najděte požadovaný soubor nebo tažením z tlačítka Namířit a vybrat ( ) vytvořte vazbu na soubor v okně webového místa.

Poznámka: Zásuvný modul SVG musí být navázaný na nekomprimovaný soubor SVG. (Viz „Nastavení zásuvných modulů SVG“ na straně 256.) 3 Pro ikonu Plug-in (Zásuvný modul) vyberte Mime a z nabídky zvolte typ MIME. Pro zásuvné moduly SWF, QuickTime, Real nebo SVG je volba Mime již vybraná a typ MIME předdefinovaný.

Poznámka: Výchozí nastavení pro moduly SWF, QuickTime, Real a SVG je jen zřídka nutné změnit.


4 V závislosti na typu MIME a vybrané volbě HTML je volba Class (Třída) vypnutá, zapnutá nebo předdefinovaná. • Pro ikonu Plug-in (Zásuvný modul) je pro HTML standardně definován tag <embed>. Pokud

z rozbalovací nabídky HTML vyberete tag

2000 Adobe Systems Incorporated. Všechna práva vyhrazena. Adobe GoLive 5.0 Příručka uživatele pro Windows a Macintosh Tato příručka, stejně jako v ní

Recommend Documents