Adobe Creative Team. Adobe Dreamweaver CS6 Oficiální výukový kurz

Adobe Creative Team

Adobe Dreamweaver CS6 Oficiální výukový kurz

Computer Press Brno 2013

K2057_Dreamweaver_CS6.indd 1

21.2.2013 9:44:52

Adobe DreamWeaver CS6 Oficiální výukový kurz Adobe Creative Team Překlad: Ondřej Pár Obálka: Adobe Creative Team Odpovědný redaktor: Roman Bureš Technický redaktor: Jiří Matoušek Translation © Ondřej Pár, 2013 Authorized translation from the English language edition, entitled ADOBE DREAMWEAVER CS6 CLASSROOM IN A BOOK, 1st Edition, 0321822455 by ADOBE CREATIVE TEAM, published by Pearson Education, Inc., publishing as Adobe Press. Copyright © 2012, Pearson Education, Inc., publishing as Adobe Press. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from Pearson Education, Inc. CZECH language edition published by Albatros Media a. s., Copyright © 2013. Autorizovaný překlad z anglického jazyka publikace ADOBE DREAMWEAVER CS6 CLASSROOM IN A BOOK, 1st Edition, 0321822455, kterou vytvořil ADOBE CREATIVE TEAM, a vydalo nakladatelství Pearson Education, Inc., publikující jako Adobe Press. Copyright © 2012, Pearson Education, Inc., publishing as Adobe Press. Všechna práva vyhrazena. Žádná část této publikace nesmí být publikována a šířena žádným způsobem a v žádné podobě bez výslovného svolení od nakladatelství Pearson Education, Inc. Českou publikaci vydalo nakladatelství Albatros Media a. s., Copyright © 2013. Objednávky knih: http://knihy.cpress.cz www.albatrosmedia.cz [email protected] bezplatná linka 800 555 513 ISBN 978-80-251-3735-2 Vydalo nakladatelství Computer Press v Brně roku 2013 ve společnosti Albatros Media a. s. se sídlem Na Pankráci 30, Praha 4. Číslo publikace 16 790. © Albatros Media a. s. Všechna práva vyhrazena. Žádná část této publikace nesmí být kopírována a rozmnožována za účelem rozšiřování v jakékoli formě či jakýmkoli způsobem bez písemného souhlasu vydavatele. 1. vydání


21.2.2013 9:40:27

OBSAH

ZAČÍNÁME . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11 O edici Oficiální výukový kurz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . TinyURL. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Potřebné znalosti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Instalace programu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jak zkopírovat soubory výukového kurzu . . . . . . . . . . . . . . . . . . . Doporučené pořadí lekcí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Skoková výuka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Nastavení rozvržení pracovní plochy . . . . . . . . . . . . . . . . . . . . . . . . Kde hledat informace o Dreamweaveru . . . . . . . . . . . . . . . . . . . . . Kontrola aktualizací . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Další zdroje informací . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Certifikace společnosti Adobe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

11 11 11 12 12 12 13 14 15 15 15 16

PŘIZPŮSOBENÍ PRACOVNÍ PLOCHY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18 V této lekci . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Prohlídka pracovní plochy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Přepínání a rozdělování zobrazení . . . . . . . . . . . . . . . . . . . . . . . . . . Práce s panely . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Výběr rozvržení pracovní plochy . . . . . . . . . . . . . . . . . . . . . . . . . . . . Přizpůsobení panelů nástrojů . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Úprava předvoleb . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tvorba vlastních klávesových zkratek . . . . . . . . . . . . . . . . . . . . . . . Použití inspektoru Vlastnosti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ


18 20 21 24 28 30 31 32 33

3

19.2.2013 14:14:18

2

ZÁKLADY JAZYKA HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .38 V této lekci . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Co je HTML? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Kde se jazyk HTML vzal? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Základní kostra HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jak psát svůj vlastní kód HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Často používaný kód jazyka HTML 4 . . . . . . . . . . . . . . . . . . . . . . . . Úvod do HTML 5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

ZÁKLADY JAZYKA CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .58 V této lekci . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Co je to CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Formátování HTML vs. CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Výchozí formátování HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Blokový model CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Formátování textu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Konstrukce pravidla CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Formátování objektů . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Vícenásobné selektory, třídy a identifikátory, ale ne! . . . . . . . . . Shrnutí a podpora CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4

38 40 40 41 41 51 53

58 60 61 63 65 67 67 75 84 86

TVORBA ROZVRŽENÍ STRÁNKY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .90 V této lekci . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Základy webového designu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Práce s miniaturami a architektonickým modelem . . . . . . . . . . 94 Vytvoření webové stránky v Dreamweaveru . . . . . . . . . . . . . . . . 98 Použití úvodní stránky. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Prohlédnutí dokončeného souboru . . . . . . . . . . . . . . . . . . . . . . . . 100 Úprava existujícího rozvržení CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Přidání obrázku do pozadí záhlaví . . . . . . . . . . . . . . . . . . . . . . . . . 104 Vložení nových prvků . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

4

OBSAH


19.2.2013 14:14:18

Úprava zarovnání elementu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 Úprava šířky stránky a barvy pozadí . . . . . . . . . . . . . . . . . . . . . . . 113 Úprava existujícího obsahu a formátování . . . . . . . . . . . . . . . . . 116 Vložení obrázku jako zástupce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 Vložení textového zástupce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 Úprava zápatí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 Ověření kompatibility prohlížeče . . . . . . . . . . . . . . . . . . . . . . . . . . 122 5

VYUŽITÍ KASKÁDOVÝCH STYLŮ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 V této lekci . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Náhled hotového souboru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 Jak pracovat s oknem Styly CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 Práce s písmem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 Využití obrázků pro grafické efekty . . . . . . . . . . . . . . . . . . . . . . . . 133 Vytvoření nových pravidel CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134 Tvorba interaktivní nabídky . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 Úprava chování hypertextových odkazů . . . . . . . . . . . . . . . . . . . 145 Vytvoření falešných sloupců . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Přesunutí pravidel do externí šablony stylů . . . . . . . . . . . . . . . . 151 Vytvoření šablony stylů pro jiná média. . . . . . . . . . . . . . . . . . . . . 153

6

PRÁCE S PŘEDLOHAMI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 V této lekci . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 Prohlédnutí dokončených souborů . . . . . . . . . . . . . . . . . . . . . . . . 164 Tvorba předlohy z existujícího rozvržení . . . . . . . . . . . . . . . . . . . 165 Vkládání upravitelných oblastí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166 Tvorba odvozených stránek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168 Aktualizace předlohy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171 Použití položek knihovny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 Použití vsuvek na straně serveru . . . . . . . . . . . . . . . . . . . . . . . . . . . 181



5

19.2.2013 14:14:18

7

PRÁCE S TEXTEM, SEZNAMY A TABULKAMI . . . . . . . . . . . . . . . . . . . . . . . . 190 V této lekci . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190 Prohlédnutí dokončeného souboru . . . . . . . . . . . . . . . . . . . . . . . . 192 Vytvoření a stylování textu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194 Tvorba a stylování tabulek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 Kontrola pravopisu webových stránek . . . . . . . . . . . . . . . . . . . . . 221 Hledání a nahrazování textu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223

8

PRÁCE S OBRÁZKY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228 V této lekci . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228 Zopakování základů práce s obrázky na webu . . . . . . . . . . . . . 230 Prohlédnutí dokončeného souboru . . . . . . . . . . . . . . . . . . . . . . . . 235 Vkládání obrázků . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236 Nastavení umístění obrázku pomocí tříd CSS. . . . . . . . . . . . . . . 238 Práce s oknem Vložit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 Použití Adobe Bridge k vkládání obrázků . . . . . . . . . . . . . . . . . . 241 Vkládání typů souborů, které nejsou určeny pro web . . . . . . . 245 Použití inteligentních objektů Photoshopu . . . . . . . . . . . . . . . . 248 Kopírování a vkládání obrázků z aplikací Fireworks a Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250 Vkládání obrázků přetažením myší . . . . . . . . . . . . . . . . . . . . . . . . 255 Optimalizace obrázků v inspektoru Vlastnosti . . . . . . . . . . . . . . 256

9

TVORBA NAVIGACE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262 V této lekci . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262 Základy hypertextových odkazů . . . . . . . . . . . . . . . . . . . . . . . . . . . 264 Prohlédnutí hotového souboru . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265 Tvorba interních odkazů. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267 Tvorba obrázkového odkazu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 Vytvoření externího odkazu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272 Nastavení e-mailových odkazů . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274 Cílení na elementy na stránce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 Vložení navigačních nabídek Spry . . . . . . . . . . . . . . . . . . . . . . . . . 279 Kontrola vaší stránky . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297

6

OBSAH


19.2.2013 14:14:19

10

PŘIDÁNÍ INTERAKTIVITY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300 V této lekci . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300 Pár slov o chování v Dreamweaveru . . . . . . . . . . . . . . . . . . . . . . . 302 Prohlédnutí hotového souboru . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304 Využití chování v Dreamweaveru . . . . . . . . . . . . . . . . . . . . . . . . . . 305 Využití ovládacího prvku Spry skládačka . . . . . . . . . . . . . . . . . . . 312

11

PRÁCE S ANIMACÍ A VIDEEM NA WEBU . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320 V této lekci . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320 Jak funguje animace a video na webu . . . . . . . . . . . . . . . . . . . . . 322 Prohlédnutí dokončeného souboru . . . . . . . . . . . . . . . . . . . . . . . . 322 Přidání webové animace do stránky . . . . . . . . . . . . . . . . . . . . . . . 324 Přidání videa na web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327

12

PRÁCE S FORMULÁŘI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334 V této lekci . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334 Prohlédnutí dokončeného souboru . . . . . . . . . . . . . . . . . . . . . . . . 336 Pár slov o formulářích . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337 Přidání formuláře na stránku . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338 Vkládání textových elementů formuláře . . . . . . . . . . . . . . . . . . . 341 Vložení zaškrtávacích polí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350 Tvorba přepínačů . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352 Vložení textových oblastí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354 Práce se seznamy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356 Přidání potvrzovacího tlačítka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358 Určení akce formuláře . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360 Poslání formulářových dat e-mailem . . . . . . . . . . . . . . . . . . . . . . . 361 Stylování formulářů . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364



7

19.2.2013 14:14:19

13

PRÁCE S ON-LINE DATY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370 Práce s dynamickým obsahem. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372 Prohlédnutí dokončeného souboru . . . . . . . . . . . . . . . . . . . . . . . . 372 Použití HTML a dat XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373 Výběr serverového modelu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384 Konfigurace lokálního webového serveru . . . . . . . . . . . . . . . . . . 386 Nastavení testovacího serveru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386 Tvorba databázových aplikací . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389

14

TVORBA DYNAMICKÝCH WEBOVÝCH STRÁNEK S DATY . . . . . . . . . . . . . 398 V této lekci . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398 Tvorba stránek pomocí PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400 Vytvoření sady hlavní stránka/stránka s detailem. . . . . . . . . . . 411 Tvorba stránky s detailem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424

15

PUBLIKOVÁNÍ NA WEBU . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428 V této lekci . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428 Definování vzdáleného webu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430 Maskování souborů a složek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437 Dokončení prací na webu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439 Publikování webu na Internetu . . . . . . . . . . . . . . . . . . . . . . . . . . . 443 Synchronizace místního a vzdáleného webu . . . . . . . . . . . . . . . 445

REJSTŘÍK . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449

8

OBSAH


19.2.2013 14:14:19

PRACOVNÍ SOUBORY K JEDNOTLIVÝM LEKCÍM Pracovní soubory k jednotlivým lekcím knihy Adobe Dreamweaver CS6: Oficiální výukový kurz si můžete stáhnout z adresy http://knihy.cpress.cz/K2057 po klepnutí na odkaz Soubory ke stažení. Naleznete tam všechny soubory, jež jsou potřebné k vypracování cvičení v této knize, a dále užitečné odkazy na další výukový materiál v anglickém jazyce, který vám usnadní práci s Adobe Dreamweaverem CS6.

Soubory z jednotlivých lekcí Každá lekce má svou vlastní složku ve složce Lekce. Tyto složky s lekcemi je potřeba před zahájením studia stáhnout z výše uvedené internetové adresy.

Internetové zdroje Uvnitř souboru HTML naleznete odkazy na nápovědu Adobe Community Help, nápovědu k produktu, stránky podpory, Adobe Press, programy certifikace Adobe, Adobe TV a na další užitečné internetové zdroje. Stačí otevřít soubor v internetovém prohlížeči a klepnout na odkazy, mezi nimiž je i speciální odkaz na produkt z této knihy, kde naleznete aktualizace a bonusový materiál.



9

19.2.2013 14:14:19


19.2.2013 14:14:20

ZAČÍNÁME Adobe® Dreamweaver® CS6 je nejpoužívanějším programem pro tvorbu webových stránek. Ať už se živíte vytvářením webu na zakázku nebo plánujete vytvořit webové stránky pro svou vlastní živnost, Dreamweaver vám nabízí všechny nástroje potřebné pro dosažení profesionálního výsledku.

O edici Oficiální výukový kurz Adobe Dreamweaver CS6 Oficiální výukový kurz je součástí oficiálních výukových průvodců pro práci v grafickém a publikačním softwaru od Adobe Systems. Lekce jsou navrženy tak, že se můžete učit svým vlastním tempem. Pokud jste v Dreamweaveru nováčky, naučíte se základům toho, jak s programem pracovat. Jestliže jste již zkušenými uživateli, zjistíte, že kniha z edice Oficiální výukový kurz vás naučí využívat mnoho pokročilých funkcí a nabídne tipy a techniky pro poslední verzi Dreamweaveru. Ačkoliv každá lekce obsahuje instrukce krok za krokem, díky nimž vytvoříte specifické projekty, stále budete mít prostor pro zkoumání a experimentování. Knihu můžete číst od začátku až do konce, nebo se věnovat pouze těm částem, které korespondují s vaším zájmem a potřebami. Každou lekci ukončuje část Opakování obsahující otázky a odpovědi, jež se věnují probrané látce.

TinyURL Kniha často odkazuje na zdroje dostupné na internetu. Odkazy na webové stránky jsou často dost dlouhé a špatně se opisují, používáme tedy místo nich odkazy vytvořené pomocí služby TinyURL. Takové odkazy se bohužel časem zneplatní. Pokud vám některý z TinyURL nefunguje, najděte si původní odkaz v příloze knihy.

Potřebné znalosti Před použitím knihy Adobe Dreamweaver CS6 Oficiální výukový kurz byste měli mít povědomí o svém počítači a svém operačním systému. Ujistěte se, že víte, jak pracovat s myší, standardními nabídkami a příkazy, a také jak otevírat, ukládat a zavírat soubory. Pokud si budete chtít tyto techniky připomenout, zkuste některou z knih nakladatelství a vydavatelství Computer Press, které se věnují Windows 7, Vista či XP, nebo vaší linuxové distribuci nebo Mac OS X (nabídka knih viz knihy.cpress.cz).



11

19.2.2013 14:14:20

Instalace programu Než se pustíte do cvičení uváděných v knize, ujistěte se, že váš počítač splňuje hardwarové požadavky Dreamweaveru, je správně nakonfigurován a že je nainstalován všechen potřebný software. Adobe Dreamweaver CS6 musí být zakoupen zvlášť – není součástí přiloženého DVD. Bližší informace o systémových požadavcích softwaru naleznete na adrese http://www.adobe.com/cz/ products/dreamweaver/tech-specs.html. Program nainstalujte na pevný disk počítače z instalačního DVD (program nelze spustit přímo z instalačního disku) nebo z instalačních souborů stažených ze stránek společnosti Adobe. Potřebujete-li další instrukce k instalaci softwaru, přečtěte si soubor ReadMe na instalačním DVD nebo na stránce http://helpx.adobe.com/cz/support. Před instalací programu se ujistěte, že máte k dispozici platné sériové číslo.

Jak zkopírovat soubory výukového kurzu Soubory k této knize obsahují složky, v nichž najdete všechny soubory potřebné pro provedení všech cvičení v knize. Každá lekce má svou složku. Příslušnou složku musíte extrahovat na svůj pevný disk, abyste byli schopni provést cvičení v každé z lekcí. Abyste ušetřili místo na vašem pevném disku, můžete extrahovat složky ke každé lekci zvlášť, podle vaší potřeby. V zásadě je důležité uchovat všechny lekce v jedné složce na vašem pevném disku. Tato hlavní složka vám poslouží jako kořenová složka webu, jak popisuje lekce 4 – Tvorba layoutu stránky. Soubory výukového kurzu nainstalujete následovně: 1 Stáhněte si archiv z webu knihy na http://knihy.cpress.cz/k2057, pododkazem „Soubory ke stažení“. 2 Archiv obsahuje uvítací soubor, další užitečné odkazy a složku Lekce. 3 Složku zkopírujte na pevný disk vašeho počítače. Pokud chcete kopírovat pouze složku jedné lekce, pak přeskočte ke kroku 5. 4 Složku na pevném disku přejmenujte na „DW-CS6“. Tato složka bude kořenovou složkou webu. 5 Pokud chcete kopírovat jednotlivé lekce postupně, zkopírujte složku každé lekce zvlášť tehdy, kdy ji budete potřebovat. A poté pokračujte k části „Skoková výuka“, v níž najdete další instrukce. Nekopírujte složku s lekcí do složky s jinou lekcí. Soubory a složky pro každou lekci nelze zaměňovat.

Doporučené pořadí lekcí Tento výukový kurz je navržen tak, abyste jej prošli od A do Z, od základního k pokročilému návrhu, vývoji a produkování webů. Každá nová lekce staví na výkladu v předchozích cvičeních

12

ZAČÍNÁME


19.2.2013 14:14:20

a používá soubory a prostředky, jež vytváříte při tvorbě celého webu. Doporučujeme, abyste provedli každou lekci, jak jdou za sebou, čímž dosáhnete nejlepšího výsledku a nejlépe pochopíte všechny aspekty webového designu. Ideální tréninkový scénář spočívá v tom, že začnete lekcí 1 a budete postupovat až k lekci 15. Neboť v každé další lekci vytvoříte nezbytné množství souborů a obsah pro lekci další, jakmile začnete podle tohoto scénáře postupovat, neměli byste žádnou lekci, nebo jen jediné cvičení, přeskočit. I když je ideální, tento scénář nemusí být praktický pro úplně každého uživatele. Takže, pokud to situace vyžaduje, můžete vykonat jednotlivé lekce metodou rychlého úvodu popsanou v následující části textu.

Skoková výuka Metoda skokové výuky je určena těm uživatelům, kteří nemají čas nebo nechtějí vykonávat každou lekci v této knize tak, jak jdou po sobě, nebo mají s určitými lekcemi potíže. Proto jsme do knihy přidali tuto metodu, s níž budete moci některé lekce přeskočit, nebo je vykonat v jiném pořadí. Jakmile začnete tuto metodu používat, budete ji muset použít u všech následujících lekcí. Například, pokud budete chtít přeskočit a začít lekcí 6, budete poté muset stejnou metodu použít pro lekci 7. V mnoha případech se soubory potřebné pro následující cvičení vytvářejí v dřívějších lekcích a cvičeních, a pokud některé lekce přeskočíte, nebudete mít tyto soubory k dispozici. Každá složka lekce obsahuje všechny soubory a datové zdroje potřebné k dokončení cvičení obsažených v lekci. Každá složka obsahuje dokončené soubory, startovací soubory a přizpůsobitelnou předlohu a soubory knihovny (ne vždy však obsahuje soubory, použité v ostatních lekcích). Může se zdát, že tyto složky obsahují duplicitní materiál. Ale tyto duplikující se složky a datové zdroje nelze ve většině případů použít zaměnitelně v jiných lekcích a cvičeních. Pokud byste je takto použili, pravděpodobně byste nebyli schopni správně cvičení dokončit. Metoda skokové výuky je určená k tomu, abyste mohli plnit jednotlivé lekce ve vlastním pořadí, využívá každou složku jako samostatný web. Abyste mohli přeskočit k lekci, zkopírujte složku s lekcí na váš pevný disk a vytvořte nový web přímo pro tuto lekci za použití dialogu Nastavení webu (Site Setup). Nevytvářejte nový web ve složce, vložené do jiného webu – všechny weby a jejich datové zdroje ponechejte v jejich originálních složkách, abyste se vyhnuli konfliktům. Je vhodné složky s lekcemi, stejně tak jako vaše jednotlivé weby na pevném disku, organizovat v jediné hlavní složce webu blízko kořenové složky na vašem pevném disku. Vyvarujte se však použití složky aplikace Dreamweaver nebo jakýchkoli složek obsahujících webový server, jako je Apache, ColdFusion nebo Internet Information Services (IIS) – o těch se blíže zmíníme v kapitolách 13 a 14. Jinak můžete tuto metodu používat u všech lekcí, jak se vám zachce. Web pro skokovou výuku vždy v dané lekci nastavíte následovně: 1 Zvolte Web (Site)  Nový web (New Site). Zobrazí se dialog Nastavení webu (Site Setup).



13

19.2.2013 14:14:20

2 Do pole Název webu (Site Name) zapište název lekce, například lekce06. 3 Klepněte na ikonu Vyhledat složku ( ) vedle pole Místní složka webu (Local Site Folder). Najděte složku lekce, kterou jste zkopírovali z DVD přiloženého ke knize a stiskněte tlačítko Vybrat (Choose). 4 Klepněte na šipku ( ) vedle kategorie Rozšířené nastavení (Advanced Settings), aby se zobrazily skryté záložky. Zvolte kategorii Lokální informace (Local Info). 5 Klepněte na ikonu Procházet vedle pole Výchozí složka obrazů (Default Images Folder). V otevřeném dialogu najděte složku obrázky ve složce s lekcí a stiskněte tlačítko Vybrat (Choose). 6 V původním dialogu stiskněte tlačítko Uložit (Save). 7 Název aktuálně vybraného webu se nyní zobrazuje v roletové nabídce na panelu Soubory (Files). Pokud je to třeba, panel můžete zobrazit pomocí klávesové zkratky F8 /Cmd+Shift+F. Poté je možné vybrat web, se kterým chcete pracovat, ze zmíněné roletové nabídky panelu. Tyto kroky budete muset zopakovat v případě každé lekce, na níž chcete přeskočit. Více informací o tom, jak nastavit nový web v Dreamweaveru, nabízí lekce 4. V každém případě pamatujte na to, že pokud uvedenou skokovou metodu použijete u všech lekcí, může se stát, že výsledný obsah vytvořených adresářů nemusí být stejný, jako kdybyste jednotlivá cvičení prováděli postupně.

Nastavení rozvržení pracovní plochy Dreamweaver obsahuje množství rozvržení pracovní plochy, aby vyhověl různým konfiguracím počítače a individuálnímu stylu práce. V této knize budeme pracovat v rozvržení nazvaném Grafický návrhář. 1 V Dreamweaveru CS6 se zaměřte na horní panel aplikace. 2 Výchozím rozvržením pracovní plochy je Grafický návrhář (Designer). Nicméně pokud máte zvolené jiné rozvržení, pak klepněte do roletové nabídky a vyberte jej. 3 Jestliže jste dříve zvolené rozvržení pracovní plochy změnili a některá okna nyní nejsou vidět, zvolte Okno  Rozvržení pracovní plochy  Obnovit „Grafický návrhář“ pro obnovení standardního vzhledu aplikace. Většina snímků v knize pochází z rozvržení Grafický návrhář. Jakmile dokončíte lekce této knihy, zkuste experimentovat s dalšími rozvrženími pracovní plochy, abyste našli to, které vám bude vyhovovat. Více informací o rozvržení pracovní plochy najdete v lekci 1.

Příkazy ve Windows a v OS X Ve většině případů se Dreamweaver chová stejně jak ve Windows, tak v Mac OS X. Existují drobné odlišnosti mezi verzemi systémů, většinou kvůli specifickým problémům dané platformy, za něž

14

ZAČÍNÁME


19.2.2013 14:14:20

program nemůže. Většinou však jde pouze o rozdílné klávesové zkratky, nebo zobrazení dialogů nebo pojmenování tlačítek. Snímky obrazovek jsou v této knize z platformy Windows. V případě rozdílností v příkazech na tuto situaci text upozorní. Příkazy pro Windows jsou vždy uvedeny nejdříve, načež je následují stejné příkazy pro OS X, například: Ctrl+C/Cmd+C. Podobný zkrácený zápis se užívá pro příkazy v celé knize, pokud to je možné, a vypadá následovně: WINDOWS Control = Ctrl Alternate = Alt

MACINTOSH Command = Cmd Option = Opt

Kde hledat informace o Dreamweaveru Kompletní, aktuální informace o panelech, nástrojích a jiných funkcích aplikace Dreamweaver najdete na webových stránkách Adobe. Zvolte Nápověda (Help)  Nápověda aplikace Dreamweaver (Dreamweaver Help). Aplikace Adobe Help otevře a stáhne poslední soubory nápovědy z webu Adobe Community Help. Tyto soubory se uloží do vašeho počítače, takže k nim později můžete přistupovat, i když nejste připojeni k Internetu. Z této aplikace si také můžete nápovědy k Dreamweaveru stáhnout ve formátu PDF. Další informační zdroje, jako jsou tipy, techniky a poslední informace o produktech, najdete na adrese www.adobe.com/support/dreamweaver.

Kontrola aktualizací Adobe pravidelně poskytuje aktualizace svého softwaru. Tyto aktualizace můžete získat pomocí nástroje Adobe Updater, a to v případě, že jste připojeni k Internetu. 1 V Dreamweaveru zvolte Nápověda (Help)  Aktualizace (Updates). Adobe Updater automaticky zkontroluje dostupnost aktualizací vašeho softwaru od společnosti Adobe. 2 V dialogu Adobe Updateru zvolte, které aktualizace chcete nainstalovat, a poté klepněte na Stáhnout a nainstalovat aktualizace (Download And Install Updates), čímž se nainstalují. Dodatky ke knize a další užitečné informace naleznete na adrese www.peachpit.com/dwcs6cib

Další zdroje informací Kniha Adobe Dreamweaver CS6 – Oficiální výukový kurz nemá nahrazovat dokumentaci, která doprovází zakoupený program, ani není vyčerpávající příručkou popisující každou funkci Dreamweaveru CS6. Vysvětleny jsou pouze příkazy a volby, které popisují jednotlivé lekce této knihy. Úplné informace o funkcích programu můžete získat z následujících informačních zdrojů: Adobe Community Help: Komunitní nápověda spojuje aktivní uživatele produktů společnosti Adobe, členy produktového týmu Adobe, autory a experty, takže získáte nejužitečnější, nejrelevantnější a nejaktuálnější informace o produktech společnosti Adobe.



15

19.2.2013 14:14:20

Přístup k Adobe Community Help: Pokud máte jakýkoli produkt Adobe CS5, pak máte přístup k aplikaci Community Help. Dostanete se do ní příkazem Nápověda (Help) > Nápověda aplikace Dreamweaver (Dreamweaver Help). Obsah se aktualizuje na základě zpětné vazby od komunity a přispěvatelů. I vy můžete přispět: vkládat komentáře do obsahu nebo do diskusních fór, a to včetně odkazů na webový obsah; publikovat váš vlastní obsah pomocí Community Publishing; nebo přispívat do Cookbook Recipes. Informace o tom, jak přispívat, najdete na adrese www.adobe.com/community/publishing/download.html. Na adrese http://community.adobe.com/help/profile/faq.html najdete odpovědi na nejčastější dotazy ohledně Community Help. Nápověda a podpora pro aplikaci Dreamweaver: zde můžete najít podporu a výukový materiál na adobe.com. Navštivte www.adobe.com/cz/support/dreamweaver/. Adobe Forums: na stránce forums.adobe.com můžete diskutovat s ostatními uživateli. Adobe TV: na adrese http://tv.adobe.com je online zdroj videí s radami expertů a inspirací k práci v produktech Adobe, včetně kanálu How To (Jak na to) s videi, s nimiž se naučíte základům práce v Dreamweaveru. Adobe Design Center na adrese www.adobe.com/designcenter nabízí zajímavé články na téma designu, galerii ukázek prací těch nejlepších designérů, návody a mnoho dalšího. Adobe Developer Connection na adrese www.adobe.com/devnet je vaším zdrojem technických článků, ukázek kódů a výukových videí věnujících se vývojářským produktům a technologiím společnosti Adobe. Zdroj pro školitele na adrese www.adobe.com/education obsahuje spoustu informací pro instruktory, včetně volně dostupných osnov používajících integrovaný přístup k výuce software od společnosti Adobe. Tyto osnovy výuky lze použít k přípravě na zkoušky k certifikaci Adobe. A zkuste také navštívit následující užitečné odkazy: Adobe Marketplace & Exchange na adrese www.adobe.com/cfusion/exchange je centrálním zdrojem ke hledání nástrojů, služeb, rozšíření, ukázek kódů a dalšího doprovodného obsahu k produktům společnosti Adobe. Domovskou stránku produktu Adobe Dreamweaver CS6 na adrese www.adobe.com/cz/products/dreamweaver/. Adobe Labs na adrese http://labs.adobe.com vám poskytne přístup k raným sestavením těch nejnovějších technologií, stejně tak jako diskusní fóra, v nichž můžete komunikovat s vývojovým týmem Adobe, vyvíjejícím nové technologie, a dalšími členy komunity.

Certifikace společnosti Adobe Certifikační a školicí program společnosti Adobe je navržen tak, aby pomohl zákazníkům a školitelům společnosti Adobe zdokonalovat a podporovat jejich odborné dovednosti. Program nabízí čtyři úrovně certifikace: 16

ZAČÍNÁME


19.2.2013 14:14:20



Adobe Certified Associate (ACA)



Adobe Certified Expert (ACE)



Adobe Certified Instructor (ACI)



Adobe Authorized Training Center (AATC)

Diplom Adobe Certified Associate (ACA) potvrzuje, že držitel certifikátu má základní znalosti k plánování, tvorbě a udržování komunikace s použitím různých forem digitálních médií. Program Adobe Certified Expert je program umožňující pokročilým uživatelům rozšířit své osvědčení. Certifikaci společnosti Adobe můžete využít k získání nové práce, vyššího platu a ke svému profesionálnímu růstu. Pokud jste školitelem na úrovni ACE, s programem Adobe Certified Instructor posunete své znalosti na další úroveň a získáte přístup k širokému spektru zdrojů Adobe. Autorizovaná školicí centra Adobe nabízející kurzy vedené školiteli a věnující se programům Adobe, zaměstnávají pouze certifikované školitele. Seznam školitelů s certifikací AATC najdete na adrese http://partners.adobe.com/. Více informací o certifikačních programech Adobe najdete na adrese www.adobe.com/support/ certification/index.html



17

19.2.2013 14:14:20

1

PŘIZPŮSOBENÍ PRACOVNÍ PLOCHY

V této lekci V této lekci se seznámíte s rozhraním programu Dreamweaver CS6 (Creative Suite 6) a naučíte se, jak:  Přepínat mezi zobrazenými dokumenty  Pracovat s panely  Vybrat rozvržení pracovní plochy  Vyladit panely nástrojů  Nastavit vlastní předvolby  Nastavit klávesové zkratky  Používat inspektor Vlastnosti



Dokončení této lekce vám zabere okolo 20 minut. Než začnete, ujistěte se, že jste na svůj pevný disk zkopírovali soubory pro lekci 1, jak popisuje část „Začínáme“ na začátku této knihy.

18


19.2.2013 14:14:20

Dreamweaver nabízí přizpůsobitelný a snadno použitelný editor typu WYSIWYG, který, pokud jde o maximální možnosti a flexibilitu, nedělá kompromisy. Pravděpodobně byste potřebovali řadu programů, které by zvládly vše to, co zvládne Dreamweaver a použití žádného z nich by nebylo tak zábavné.

19


19.2.2013 14:14:20

Prohlídka pracovní plochy Dreamweaver je na trhu vedoucím editorem HTML, pro jehož popularitu jsou dobré důvody. Program nabízí neuvěřitelnou sadu designérských a kódovacích nástrojů. Dreamweaver nabízí každému něco. Kodéři milují množství vylepšení zabudovaných do prostředí Zobrazení Kód a vývojáři se zase těší z podpory ASP, PHP, ColdFusion a JavaScript a dalších programovacích jazyků. Designéři obdivují přesnost, s níž se jejich text a grafika zobrazí stylem „Co vidíš, to také dostaneš“ (What You See Is What You Get – WYSIWYG), čímž ušetří hodiny času, které by jinak strávili prohlížením stránek v prohlížečích. Nováčci samozřejmě oceňují jednoduché používání programu a sílu jeho uživatelského rozhraní. Bez ohledu na to, jaký typ uživatele jste právě vy, pokud používáte Dreamweaver, nemusíte dělat kompromisy. A

C

B

D E

I H

F G

H

J

M

K

L

Rozhraní Dreamweaveru obsahuje sadu panelů a panelů nástrojů, které si uživatel může upravit. Seznámení se s názvy těchto komponent zabere pouze chvíli. A – navigační nabídka,

D – seznam dokumentů,

G – zobrazení Kód,

K – selektor tagů,

B – panel aplikací,

E – panel nástrojů Dokument,

H – zobrazení Návrh,

L – inspektor Vlastnosti,

I – panel Vložit,

M – panel Soubory

F – panel nástrojů Kódování,

J – panel Styly CSS,

C – nabídka rozvržení pracovní plochy,

20

LEKCE 1


Přizpůsobení pracovní plochy

19.2.2013 14:14:23

Mohli byste si myslet, že program, jenž toho nabízí tolik, bude těžkopádný, pomalý a hůře ovladatelný, ale nenechte se mýlit. Dreamweaver poskytuje většinu svých schopností pomocí ukotvitelných panelů a panelů nástrojů, jež můžete zobrazovat a skrývat a uspořádávat v nejrůznějších kombinacích, abyste vytvořili naprosto ideální pracovní plochu. Tato lekce vám představí rozhraní Dreamweaveru a seznámí vás se schopnostmi skrývajícími se pod kapotou. Pokud se budete chtít s námi na tuto prohlídku vydat, pak klepněte na příkaz Soubor (File)  Otevřít (Open). Ve složce lekce01 zvolte soubor zacnete_zde.html. Pak stiskněte tlačítko Otevřít.

Přepínání a rozdělování zobrazení Dreamweaver nabízí speciální prostředí pro kodéry a designéry a navíc možnost kombinovaného zobrazení, které spojuje vlastnosti obou z nich.

Zobrazení Návrh Zobrazení Návrh (Design) zaměřuje pracovní plochu Dreamweaveru na editor WYSIWYG, jenž poskytuje přesné, avšak nikoliv dokonalé, znázornění webové stránky tak, jak by měla vypadat v prohlížeči. Toto zobrazení aktivujete klepnutím na tlačítko Návrh (Design) na panelu nástrojů Dokument.

Zobrazení Návrh



21

19.2.2013 14:14:23

Zobrazení Kód Zobrazení Kód (Code) zaměřuje pracovní plochu Dreamweaveru na kód jazyka HTML a obsahuje řadu nástrojů určených k úpravě kódu. Toto zobrazení zpřístupníte, pokud stisknete tlačítko Kód (Code) na panelu nástrojů Dokument.

Zobrazení Kód

Zobrazení Kód a návrh Toto kombinované zobrazení vám zpřístupní kód i návrh současně. Změny v jednom okně způsobí okamžité zobrazení změny v druhém okně a obráceně. Chcete-li přepnout na toto zobrazení, stiskněte tlačítko Rozdělit v okně dokumentu. Aby byla využita celá plocha moderních LCD monitorů, zobrazuje Dreamweaver obě části okna vedle sebe. Části okna mohou být také zobrazeny pod sebou. Preferujete-li tento způsob zobrazení, zrušte v nabídce zaškrtnutí položky Zobrazit (View)  Rozdělit svisle (Split horizontally).

22

LEKCE 1



19.2.2013 14:14:23

Zobrazení Kód a návrh

Zobrazení Kód a návrh, rozdělené vodorovně ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ


23

19.2.2013 14:14:23

Práce s panely Ačkoliv se k většině příkazů dostanete v nabídkách, Dreamweaver má většinu svých schopností rozptýlenou do uživatelem vybraných panelů a panelů nástrojů. Ty můžete zobrazovat, skrývat, přesouvat a dokovat po celé obrazovce. Přesunout je také můžete na druhou nebo třetí obrazovku, pokud chcete.

Standardní seskupování panelů

Nabídka Okno (Window) obsahuje všechny dostupné panely. Pokud nějaký určitý panel na obrazovce nevidíte, vyberte jej v nabídce Okno (Window). Zatržítko zobrazující se v nabídce označuje, že je panel zobrazený. Výjimečně se může jeden panel na obrazovce umístit za jiný a bude ho tak možné jen těžko najít. V takových situacích jednoduše požadovaný panel zvolte v nabídce Okno (Window) a on se objeví v pořadí panelů nejvýše.

Minimalizace Abyste vytvořili prostor pro jiné panely nebo získali přístup k dalším oblastem pracovní plochy, můžete jednotlivé panely minimalizovat nebo rozbalovat. Panel minimalizujete poklepáním na záložku obsahující název panelu. Panel rozbalíte poklepáním na stejnou záložku. 24

LEKCE 1



19.2.2013 14:14:23

Minimalizování plovoucího panelu poklepáním na jeho záložku

Minimalizovat nebo rozbalit jeden panel nebo celou sadu ukotvených panelů můžete poklepáním na jejich záložku.

Minimalizování ukotveného panelu poklepáním na záložku

K uvolnění většího prostoru na pracovní ploše můžete minimalizovat skupiny panelů nebo ukotvené panely do ikon jednoduše poklepáním na jejich horní lištu. Panely můžete minimalizovat také kliknutím na dvojitou šipku ( ) v horní liště panelu. I když jsou minimalizované do ikony, můžete k jednotlivým panelům stále přistupovat klepnutím na jeho ikonu nebo tlačítko. Vybraný panel se zobrazí nalevo nebo napravo vašeho rozvržení podle toho, kde je volný prostor.

Minimalizování skupiny do ikon ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ


25

19.2.2013 14:14:23

Plovoucí umístění panelů Panel seskupený s dalšími panely je možné oddělit do plovoucího umístění. Stačí jej ze skupiny panelů přetáhnout za jeho záložku.

Oddělení panelu tažením za jeho záložku

Přetahování panelů Pořadí panelů můžete přeuspořádat jejich přetažením na určenou pozici ve skupině.

Přetažení záložky do nového umístění

Změnu umístění panelů, skupin panelů a složených panelů provedete jednoduše jejich přetažením za horní lištu.

Přetažení celé skupiny panelů nebo ukotvené části do nového umístění

26

LEKCE 1



19.2.2013 14:14:24

Seskupování, skládání a ukotvení panelů Vlastní skupinu panelů vytvoříte tak, že jednotlivé panely přetáhnete k sobě. Jakmile se při přetahování panelu dostanete do správné pozice, Dreamweaver cílovou oblast vysvítí modře (jak ukazuje obrázek). V té chvíli pusťte tlačítko myši, čímž se vytvoří skupina panelů.

Vytvoření nové skupiny panelů

V některých případech ale budete chtít mít oba panely viditelné. Panely k sobě složíte tak, že požadovanou záložku panelu přetáhnete ke spodní části jiného panelu. Jakmile uvidíte modrou cílovou oblast, tlačítko myši pusťte.

Skládání panelů k sobě

Plovoucí panely lze ukotvit k pravému, levému nebo spodnímu okraji pracovní plochy Dreamweaveru. Panel, skupiny panelu, nebo složené panely ukotvíte tak, že je přetáhnete za horní lištu k okraji, k němuž je chcete ukotvit. Jakmile uvidíte modrou cílovou oblast, tlačítko myši pusťte. ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ


27

19.2.2013 14:14:24

Ukotvení panelů

Výběr rozvržení pracovní plochy Rychlým způsobem, jak upravit prostředí programu, je použití jednoho z připravených rozvržení pracovní plochy. Tato rozvržení byla optimalizována experty, abyste měli co nejlepší přístup ke všem potřebným nástrojům. Dreamweaver CS6 obsahuje jedenáct připravených rozvržení pracovní plochy. K těmto rozvržením máte přístup z roletové nabídky umístěné v pravé části panelu aplikace.

Nabídka rozvržení pracovní plochy

28

LEKCE 1



19.2.2013 14:14:24

Dlouhodobí uživatelé Dreamweaveru mohou zvolit rozvržení Klasický (Classic), jež zobrazuje panely a panely nástrojů, jak jste byli zvyklí v předchozích verzích Dreamweaveru.

Klasické rozvržení pracovní plochy

Rozvržení Programátor (Coder) se zaměřuje na kód jazyka HTML a nástroje pro úpravu kódu.

Programátorské rozvržení pracovní plochy ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ


29

19.2.2013 14:14:24

Rozvržení Grafický návrhář (Designer) poskytuje optimální prostředí pro grafické návrháře.

Návrhářské rozvržení pracovní plochy

Přizpůsobení panelů nástrojů Některé možnosti programu jsou tak užitečné, že je budete chtít mít dostupné po celou dobu ve formě panelu nástrojů. V horní části okna Dokument se vodorovně zobrazují tři panely nástrojů: Styl vykreslení (Style Rendering), Dokument (Document), Standard (Standard – appear). Panel nástrojů Kódování (Coding) se nicméně zobrazuje svisle, a to pouze v zobrazení Kód. Schopnosti těchto panelů nástrojů prozkoumáte v pozdějších cvičeních.

30

LEKCE 1



19.2.2013 14:14:24

Styl vykreslení Dokument Dokument (živé zobrazení) Standard Kódování

Požadované panely nástrojů zobrazíte jejich vybráním z nabídky Zobrazit (View).

Úprava předvoleb Po určité době strávené prací v Dreamweaveru si najdete pro každou aktivitu nejvhodnější rozvržení panelů a panelů nástrojů. Tyto konfigurace vlastního rozvržení pracovní plochy můžete ukládat pod zvolenými názvy. Vlastní rozvržení pracovní plochy uložíte tak, že klepnete na příkaz Nová pracovní plocha (New Workspace) v roletové nabídce s rozvrženími pracovní plochy na panelu aplikace.

Uložení vlastního rozvržení pracovní plochy



31

19.2.2013 14:14:25

Tvorba vlastních klávesových zkratek Jinou užitečnou funkcí Dreamweaveru je schopnost tvorby vlastních klávesových zkratek a změna těch existujících. Klávesové zkratky se načítají a uchovávají nezávisle na vlastních rozvrženích pracovní plochy. Znáte příkaz, u něhož nesnesete, že k němu není klávesová zkratka? Vytvořte si svoji vlastní. Zkuste tento postup: 1 Zvolte Upravit (Edit) > Klávesové zkratky (Keyboard Shortcuts)/Dreamweaver > Klávesové zkratky

2 Klepněte na tlačítko Duplikovat sadu (Duplicate Set), čímž vytvoříte novou sadu klávesových zkratek. 3 Do pole Název duplikované sady (Name of Duplicate Set) zapište její název a stiskněte tlačítko OK.

4 V roletové nabídce Příkazy (Commands) vyberte Příkazy nabídky (Menu commands). 5 Vyberte Uložit vše (Save all) ze seznamu Soubor (File). Všimněte si, že tento příkaz nemá přiřazenou klávesovou zkratku, ačkoliv jej v Dreamweaveru používáte pravidelně. 6 Kurzor umístěte do pole Stiskněte klávesu (Press Key) a stiskněte klávesovou zkratku Ctrl+Alt+S/Cmd+Opt+S. Všimněte si chybového hlášení, které oznamuje, že tato kombinace kláves již je přiřazená jinému příkazu. Ačkoliv můžete kombinaci kláves přiřadit znovu, zvolte raději jinou kombinaci.

32

LEKCE 1



19.2.2013 14:14:25

7 Stiskněte zkratku Ctrl+Alt+Shift+S/Cmd+Ctrl+S. Tato kombinace není aktuálně přiřazená žádnému příkazu, takže ji můžete volně přiřadit například příkazu Uložit vše. 8 Stiskněte tlačítko Změnit (Change). Nová klávesová zkratka je nyní přiřazena příkazu Uložit vše.

9 Změny uložíte stisknutím tlačítka OK. Právě jste vytvořili vlastní klávesovou zkratku a tuto klávesovou zkratku také využijete v dalších lekcích.

Použití inspektoru Vlastnosti Jedním z aktivních nástrojů při práci je inspektor Vlastnosti (Property Inspector). Tento panel se obvykle zobrazuje u spodního okraje pracovní plochy. Inspektor Vlastnosti se přizpůsobuje aktuální situaci a tomu, jaký prvek zrovna vyberete.



33

19.2.2013 14:14:25

Použití záložky HTML Jakmile kurzor umístíte do jakéhokoli textového obsahu na vaší stránce, inspektor Vlastnosti poskytne možnost rychle přidělit určitý základní kód a formátování jazyka HTML. Pokud je tlačítko HTML stisknuté, můžete přidělovat značky nadpisů nebo odstavce, stejně tak jako tučnost, kurzívu, odrážky nebo číslování či odsazení, mimo jiného formátování a atributů.

Inspektor Vlastnosti pro HTML

Použití záložky CSS Klepnutím na tlačítko CSS (kaskádové styly) se rychle přepnete do režimu, v němž máte rychlý přístup k přidělování příkazů nebo úpravě formátování CSS.

Inspektor Vlastnosti pro CSS

Vlastnosti obrázků Vyberte na webové stránce obrázek, čímž zpřístupníte atributy a možnosti formátování určené obrázkům v Inspektoru Vlastnosti.

34

LEKCE 1



19.2.2013 14:14:25

Inspektor Vlastnosti pro obrázky

Vlastnosti tabulek Vlastnosti tabulek zpřístupníte umístěním kurzoru do tabulky a klepnutím na značku table v selektoru tagů u spodního okraje okna dokumentu.

Inspektor Vlastnosti pro tabulky



35

19.2.2013 14:14:25

Opakování Otázky 1 Kde najdete příkaz k zobrazení nebo skrytí jakéhokoli panelu? 2 Kde najdete tlačítka zobrazení Kód (Code), Návrh (Design) a Kód a návrh (Split)? 3 Co lze uložit v rámci rozvržení pracovní plochy? 4 Jsou na rozvržení pracovní plochy navázané také klávesové zkratky? 5 Co se stane v inspektoru Vlastnosti (Properties), když umístíte kurz do různých elementů webové stránky?

Odpovědi 1 Všechny panely jsou uvedeny v nabídce Okno (Window). 2 Tato tlačítka jsou komponentami panelu nástrojů Dokument (Document). 3 V rámci rozvržení pracovní plochy se ukládá konfigurace dokumentového okna, otevřené panely, jejich rozměry a umístění na obrazovce. 4 Ne, klávesové zkratky se načítají a uchovávají nezávisle na rozvržení pracovní plochy. 5 Inspektor Vlastnosti se přizpůsobuje vybranému elementu, zobrazuje k němu relevantní informace a příkazy formátování.

36

LEKCE 1



19.2.2013 14:14:25


19.2.2013 14:14:25

2

ZÁKLADY JAZYKA HTML

V této lekci V této lekci se seznámíte s HTML a naučíte se, jak:  Ručně napsat kód jazyka HTML  Chápat syntaxi jazyka HTML  Vkládat elementy kódu  Formátovat text  Vkládat kostru HTML  V Dreamweaveru vytvářet HTML



Dokončení této lekce vám zabere okolo 45 minut. K této lekci nejsou dostupné žádné zdrojové soubory.

38


19.2.2013 14:14:25

HTML je páteří Webu, kostrou vašich webových stránek. Je základem a podstatou Internetu, ačkoliv jej obvykle nevidí nikdo jiný než webový designér. Bez HTML by Web neexistoval. Dreamweaver obsahuje řadu funkcí, které vám pomohou rychle a efektivně vytvářet a upravovat kód jazyka HTML.

39


19.2.2013 14:14:25

Co je HTML? „Jaké jiné programy umí otevřít soubor Dreamweaveru?“ Tuto otázku mi nedávno položil jeden z mých studentů; ačkoliv něco takového může být zřejmé zkušenému vývojáři, dokládá to problémy při výuce a učení se webovému designu. Většina lidí si program plete s technologií. Předpokládají, že přípona .htm nebo .html patří Dreamweaveru nebo Adobe. Například grafičtí návrháři jsou zvyklí pracovat se soubory s příponou .ai, .psd, .indd a tak dále. Toto jsou proprietární formáty souborů vytvořené programy, jež mají specifické schopnosti a omezení. Cílem je ve většině případů vytvořit finální tiskové dílo. Program, v němž byl soubor vytvořen, poskytuje schopnosti interpretovat kód, jež produkuje tištěná stránka. Grafičtí návrháři se za celou tu dobu naučili, že otevření těchto formátů souborů v různých programech může vést k neočekávaným výsledkům nebo dokonce nevratnému poškození souboru. Na druhou stranu cílem webového návrháře je vytvořit webovou stránku, jež se má zobrazit v prohlížeči. Možnosti a funkcionalita původního programu má málo co dělat s výsledným zobrazením stránky v prohlížeči, neboť zobrazení závisí na kódu HTML a na tom, jak jej prohlížeč vyhodnocuje. Ačkoliv program může napsat dobrý nebo špatný kód, všechnu těžkou práci zde odvádí právě prohlížeč. Web je založen na hypertextovém značkovacím jazyku (HTML). Jazyk a formát souborů nepatří žádnému konkrétnímu programu nebo společnosti. Vlastně jde o neproprietární, čistě textový jazyk, který je možné upravovat v jakémkoli textovém editoru, operačním systému nebo na jakémkoli počítači. Dreamweaver je ve svém základu editor HTML, ačkoliv jeho hranice výrazně překračuje. Ale abyste mohli využít plný potenciál Dreamweaveru, musíte nejprve rozumět tomu, co je HTML a co dokáže a co nikoliv. Záměrem této kapitoly je stručně vás seznámit s HTML a jeho možnostmi a naučit všem základům, které budete pro práci s Dreamweaverem potřebovat.

Kde se jazyk HTML vzal? Jazyk HTML a první prohlížeč vynalezl na začátku 90. let 20. století TimBarnes-Lee, vědec pracující v CERNu (Evropská společnost pro atomový výzkum), v laboratoři částicové fyziky v Ženevě ve Švýcarsku. Vymyslel technologii určenou ke sdílení technických informací a referátů přes Internet, který tehdy existoval velmi krátce. Své vynálezy, HTML a prohlížeč poskytnul veřejnosti jako pokus, co nejvíce jej rozšířit mezi vědeckou společnost a dále, aby jej tak snadněji přijali a aby povzbudil ostatní k jejich vlastnímu vývoji. Skutečnost, že na své dílo nevztáhnul autorská práva nebo se jej nepokusil prodat, započala trend otevřeností a kamarádství, které na Internetu působí dodnes. Jazyk, jenž Tim Berners-Lee vytvořil před 20 lety, byl mnohem jednodušší než jeho nynější podoba, ale i tak je HTML překvapivě snadné se naučit a ovládnout. V době vzniku této knihy existuje HTML ve verzi 4.01, která byla oficiálně přijata v roce 1999. V základu se HTML skládá ze zhruba

40

LEKCE 2


Základy jazyka HTML

19.2.2013 14:14:27

90 značek, jako jsou html, head, body, h1, p a tak dále. Značky se píší do lomených závorek, jako například
,
a . Tyto značky se používají k uzavření, nebo také označení textu a grafiky, aby umožnily prohlížeči jejich zobrazení určitým způsobem. Kód HTML je považován za vyvážený, obsahuje-li jak otevírací (<…>), tak uzavírací () značku. Otevírací a uzavírací značka se společně nazývají element. Některé elementy se používají k vytvoření kostry stránky, jiné k formátování textu, a jiné nesou interaktivitu a programovatelnost. I když Dreamweaver snižuje nutnost psát většinu kódu ručně, schopnost číst a vyhodnocovat kód jazyka HTML je stále nutnou výbavou každého webového designéra. Navíc napsat kód ručně je někdy jediný způsob, jak najít chybu ve vaší webové stránce. Zde vidíte základní strukturu webové stránky:

Základní kostra HTML Otevírací značka

Kořen

Uzavírací značka

Základy HTML pro zábavu i užitek Hlavička
Vítejte na mé první webové stránce
Tělo
Vodorovná čára (prázdná značka)

Správně strukturovaný, nebo vyvážený, zdrojový kód HTML se skládá z otevírací a uzavírací značky. Značky jsou uzavřené mezi lomené závorky. Uzavírací značku vytvoříte zopakováním značky otevírací a za první lomenou závorku zapíšete lomítko (/). Prázdné značky, například vodorovná čára, je možné psát zkráceným zápisem, jak ukazuje obrázek. Možná vás překvapí zjištění, že jediný text, který se v prohlížeči zobrazí po spuštění tohoto kódu, je „Vítejte na mé první webové stránce“. Zbytek kódu vytváří strukturu webové stránky a zajišťuje formátování textu. Stejně jako u ledovce, většina skutečného obsahu webové stránky se skrývá pod hladinou.

Jak psát svůj vlastní kód HTML Psaní kódu nejspíš zní poněkud složitě, nebo přinejmenším pracně, ale tvorba webových stránek je mnohem jednodušší, než byste si mohli myslet. V několika následujících cvičeních se dozvíte,



41

19.2.2013 14:14:27

jak HTML funguje vytvořením základní webové stránky a přidáním a naformátováním nějakého jednoduchého textového obsahu: 1 Spusťte Notepad (Windows) nebo TextEdit (Mac). 2 Do prázdného dokumentu napište následující kód: Vítejte na mé první webové stránce

3 Soubor uložte na plochu s názvem mojeprvnistranka.html. 4 Spusťte Chrome, Firefox, Internet Explorer, Safari nebo jakýkoli jiný nainstalovaný prohlížeč. 5 Zvolte Soubor (File)  Otevřít (Open). Na ploše vyberte soubor mojeprvnistranka.html a stiskněte tlačítko OK či Open. Gratulujeme, právě jste vytvořili vaši první webovou stránku. Jak sami vidíte, není potřeba tolik kódu, abyste vytvořili funkční webovou stránku.  Poznámka: Pro tato cvičení můžete používat libovolný textový editor, ale vždy se ujistěte, že ukládáte vytvořené soubory jako prostý (plain) text.  Tip: Ve vašem textovém editoru zvolte Formát (Format)  Uložit (Save) jako prostý text předtím, než uložíte soubor ve formátu .html

 Poznámka: Některé textové editory mohou změnit příponu .html nebo vás vyzvou k potvrzení této

volby.

Textový editor

42

LEKCE 2


Prohlížeč


19.2.2013 14:14:27

Porozumění syntaxi jazyka HTML Jako další krok přidáte obsah do vaší nové webové stránky a naučíte se některým důležitým aspektům syntaxe kódu jazyka HTML: 1 Přepněte se do textového editoru, aniž byste zavírali okno prohlížeče. 2 Kurzor vložte za text „Vítejte na mé první webové stránce“ a stiskněte klávesu Enter/Return, čímž zalomíte odstavec. 3 Napište Tvořit webové stránky je zábavné a stiskněte pětkrát mezerník, čímž vložíte pět prázdných mezer. A text dokončete napsáním a jednoduché! na stejném řádku. 4 Soubor uložte. 5 Přepněte se do prohlížeče a stránku nechte znovu načíst (například stisknutím klávesy F5).

Jak můžete vidět, prohlížeč zobrazil nový text, ale zcela ignoruje zalomení řádků na dva odstavce, stejně jako další prázdné mezery. Ve skutečnosti byste totiž mohli odstavec zalomit třeba stokrát a nebyl by v tom žádný rozdíl. To protože prohlížeč je programovaný tak, aby mezery ignoroval a vyhodnocoval pouze elementy kódu jazyka HTML. Vložením značek můžete jednoduše docílit požadovaného zobrazení textu.

Vkládání kódu jazyka HTML V tomto cvičení vložíte do kódu značky jazyka HTML, čímž zajistíte správné zobrazení textu: 1 Přepněte se zpět do textového editoru. 2 K textu přidejte následující značky:
Tvořit webové stránky je zábavné a jednoduché!

Pokud budete chtít vložit mezeru nebo jiný speciální znak do řádku textu, HTML k tomu poskytuje elementy kódu nazvané entity. Entity se vkládají do kódu jinak než značky. Například, pokud chcete vložit nedělitelnou mezeru o velikosti jednoho znaku, jednoduše zapíšete tuto entitu: .



43

19.2.2013 14:14:27

3 Nahraďte tedy pět mezer v textu těmito nedělitelnými mezerami, takže kód bude vypadat následovně:
Tvořit webové stránky je zábavné ajednoduché!

4 Soubor uložte. Přepněte se do prohlížeče a nechejte stránku znovu načíst. Prohlížeč nyní zobrazuje text zalomený do odstavců a s požadovanými mezerami.

 Poznámka: Zlaté pravidlo použití entit říká, že pokud se pokusíte napsat znak s použitím standardní 101-klávesové klávesnice a tento znak se neobjeví, je na místě použít entitu. Pokud jsou značky a entity správně použity, prohlížeč zobrazí stránku v požadované struktuře.

Formátování textu pomocí jazyka HTML Značky obvykle slouží více účelům. Mimo to, že vytvoří odstavcovou strukturu a mezery, jak jsme si ukázali před chvílí, mohou mít také vliv na základní formátování textu, a stejně tak mohou identifikovat relativní důležitost obsahu stránky. HTML například poskytuje šest značek pro nadpisy (od
po
), které můžete použít pro oddělení odstavců nadpisy. Značky neslouží pouze k formátování textu, ale nesou i další význam. Nadpisy jsou automaticky formátovány tučně a často ve větší velikosti písma než běžný text. Číslo u značek pro nadpisy má taky svůj význam: Značka
označuje nadpis nejvyšší důležitosti, s největší velikostí písma. V tomto cvičení změníte text odstavce na prvním řádku na nadpis první úrovně: 1 Přepněte se zpět do textového editoru. 2 Do kódu přidejte následující značky:
Vítejte na mé první webové stránce

3 Soubor uložte. Přepněte se do prohlížeče a nechejte stránku znovu načíst. Všimněte si změny textu. Nyní je větší a formátovaný tučně.

44

LEKCE 2



19.2.2013 14:14:28

Weboví designéři používají značky nadpisů k označení důležitosti určitého obsahu, aby vylepšili pozici svých stránek ve vyhledávačích, jako je Google, Seznam a dalších.

Použití formátování na úrovni řádku Všechny značky, které jste zatím použili, fungují jako odstavce, nebo jako značky prázdné. Těmto prvkům se říká blokové elementy. Jazyk HTML však také poskytuje schopnost formátovat a strukturovat takový obsah, jenž je obsažen uvnitř jednotlivých značek, neboli na řádku. Typickým použitím řádkového kódu je přidělení kurzívy nebo tučnosti slovu nebo části textu odstavce. V tomto cvičení použijete řádkové formátování: 1 Přepněte se zpět do textového editoru. 2 Do kódu přidejte následující značky:
Tvořit webové stránky je zábavné <strong><em>a jednoduché!

3 Soubor uložte. Přepněte se do prohlížeče a nechejte stránku znovu načíst. Většinu formátování, jak řádkového nebo jiného, je ale správnější udělat pomocí kaskádových stylů (CSS). Značky <strong> a <em> patří mezi těch pár, jež je stále ještě možné pro řádkové formátování pomocí elementů jazyka HTML použít. Tyto elementy jsou ve skutečnosti určeny více k přidání sémantického významu do textového obsahu, ale výsledek je stejný: Text se zobrazí tučně nebo kurzívou.  Poznámka: Věnujte zvláštní pozornost vnoření elementů a ujistěte se, že jsou správně uzavřeny. Všimněte si, že nejprve je uzavřen element <m>, a až poté element <strong>.

Obecně se dnes přijímá myšlenka, že by se měl oddělovat obsah od jeho prezentace neboli formátování. Plné vysvětlení použití a strategií tohoto modelu založeného na standardech jazyka CSS najdete v lekci 3.



45

19.2.2013 14:14:28

Značky <strong> a <em> se používají místo značek (tučně) a (kurzíva), protože poskytují sémantický význam pro návštěvníky stránek se zrakovou vadou, ale výsledek jejich použití pro běžného uživatele je stejný.

Přidání kostry dokumentu Většina webových stránek se skládá z alespoň tří základních elementů: kořene (obvykle ), hlavičky () a těla (). Tyto elementy vytvářejí základní kostru webové stránky. Kořenový element obsahuje veškerý kód a obsah a slouží k tomu, aby prohlížeči či jakékoli jiné aplikaci deklaroval, jaký typ kódu má v dokumentu očekávat. Element obsahuje veškerý viditelný obsah, jako je text, tabulky, obrázky, videa a tak dále. Element obsahuje kód, jenž se postará o vykonání základních úkolů na pozadí, jako je stylování, odkazování a poskytuje další informace. Jednoduchá stránka, jíž jste vytvořili, neobsahuje element head. Webová stránka může fungovat i bez této části, ale jakmile byste stránce přidali další obsah a funkce, už byste se bez ní neobešli. V tomto cvičení přidáte na stránku elementy a : 1 Přepněte se zpět do textového editoru. 2 Na začátek dokumentu vložte následující značky a jejich obsah: <html> <head> <title>Základy HTML pro zábavu i užitek

3 Soubor uložte. Přepněte se do prohlížeče a nechejte stránku znovu načíst. Všimli jste si, co se změnilo? Možná to na první pohled nebude patrné. Podívejte se proto do titulkové lišty okna prohlížeče. Text „Základy HTML pro zábavu i užitek“ se nyní zobrazuje nad celou webovou stránkou. To jste provedli právě přidáním elementu . Ale nejde jen o skvělý trik; je to dobré také pro byznys. Google, Seznam a další prohlížeče obsah elementu <title> zaznamenávají a používají jej mimo jiných kritérií k ohodnocení významnosti stránky. Obsah titulku je jednou z položek, jež se<br /> <br /> 46<br /> <br /> LEKCE 2<br /> <br /> K2057_Dreamweaver_CS6.indd 46<br /> <br /> Základy jazyka HTML<br /> <br /> 19.2.2013 14:14:28<br /> <br /> zobrazuje ve výsledku vyhledávání. Dobře otitulkovaná stránka může být hodnocena lépe než stránka se špatným titulkem nebo než stránka s žádným titulkem. Dávejte svým stránkám krátké a smysluplné názvy. Například titulek „ABC domovská stránka“ ve skutečnosti nenese žádnou smysluplnou informaci. Lepší by bylo například „Vítejte na domovské stránce společnosti ABC“. Podívejte se na ostatní webové stránky, zejména podobně zaměřené jako je ta vaše, nebo stránky vaší konkurence, jaké titulky používají.<br /> <br /> Obsah elementu <title> se objeví v titulkové liště prohlížeče, když se načte stránka.<br /> <br /> Jak psát kód jazyka HTML v Dreamweaveru Takže samozřejmou otázkou nyní je: „Když můžu kód jazyka HTML psát v jakémkoli textovém editoru, k čemu potřebuji Dreamweaver?“ Ačkoliv na vás kompletní odpověď čeká v následujících 13 lekcích, otázka vyžaduje rychlou ukázku. V tomto cvičení vytvoříte znovu stejnou stránku, ale tentokrát pomocí Dreamweaveru: 1 Spusťte Dreamweaver CS6. 2 Zvolte Soubor (File)  Nový (New). 3 V okně Nový dokument (New Document) zvolte v prvním sloupci položku Prázdná stránka (Blank Page). 4 Ve sloupci Typ stránky (Page Type) vyberte HTML a ve sloupci Rozvržení zvolte <žádné>(<none>). Pak stiskněte tlačítko Vytvořit (Create). V Dreamweaveru se otevře okno s novým dokumentem. Okno se zobrazí v jednom ze tří zobrazení: Kód (Code), Kód a návrh (Split) nebo Návrh (Design). 5 Pokud už není aktivní zobrazení Kód, stiskněte tlačítko Kód (Code) v levém horním rohu okna dokumentu. První věcí, které si můžete všimnout v zobrazení Kód je to, že Dreamweaver oproti textovému editoru poskytuje obsáhlou hlavičku dokumentu. Základní kostra stránky je již vytvořená, včetně kořenového elementu, hlavičky a těla, a také včetně titulku a dalšího kódu. Jediné, co za vás Dreamweaver neudělá, je vložení vašeho vlastního obsahu.<br /> <br /> ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ<br /> <br /> K2057_Dreamweaver_CS6.indd 47<br /> <br /> 47<br /> <br /> 19.2.2013 14:14:28<br /> <br /> Zobrazení Kód Zobrazení Kód a návrh Zobrazení Návrh<br /> <br /> 1 Kurzor vložte za otevírací značku <body>a napište text Vítejte na mé druhé stránce. Dreamweaver ulehčuje také formátování prvního řádku textu jako nadpis první úrovně. 2 Kurzor umístěte na začátek textu „Vítejte na mé druhé stránce“. Napište < jako začátek elementu <h1>. Všimněte si, že Dreamweaver automaticky otevře rozevírací seznam možných elementů kódu. Jde o pomocníka při psaní kódu. Jakmile se aktivuje, poskytuje vždy seznam dostupných prvků jazyků HTML, CSS a JavaScript a dalších podporovaných elementů. 3 Napište h a podívejte se do okna nápovědy.<br /> <br /> 48<br /> <br /> LEKCE 2<br /> <br /> K2057_Dreamweaver_CS6.indd 48<br /> <br /> Základy jazyka HTML<br /> <br /> 19.2.2013 14:14:28<br /> <br /> Výhody použití Dreamweaveru k vytváření HTML kódu jsou zřejmé od samého začátku: Velká část struktury stránky je již vytvořena.<br /> <br /> Dreamweaver v okně nápovědy nyní nabízí pouze elementy začínající písmenem h. 4 Ze seznamu nabízených elementů vyberte abyste uzavřeli element.<br /> <br /> h1<br /> <br /> a dvojklikem jej vložte do kódu. Napište >,<br /> <br /> 5 Přesuňte kurzor na konec textu. Napište </ na konec věty. Všimněte si, že Dreamweaver značku <h1> automaticky uzavřel. Ale většina kodérů přidává značky v průběhu psaní, a to následujícím způsobem: 6 Stiskněte Enter/Return k zalomení řádku. Napište <. 7 Napište p a stiskněte Enter/Return, čímž se vloží element. Zapište >, čímž značku uzavřete. 8 Nyní napište text Tvořit webové stránky v Dreamweaver je ještě zábavnější! A poté napište </, čímž vložíte uzavírací značku </p>. Už jste se psaním kódu unavili? Dreamweaver nabízí řadu různých způsobů formátování vašeho obsahu. 9 Vyberte slovo „ještě“ a v inspektoru Vlastnosti (Properties) klepněte na ikonu B a poté na ikonu I. Tím se na slovo použijí značky <strong> a <em>. Tyto značky způsobí, že se text do nich uzavřený naformátuje tučně a kurzívou.<br /> <br /> ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ<br /> <br /> K2057_Dreamweaver_CS6.indd 49<br /> <br /> 49<br /> <br /> 19.2.2013 14:14:28<br /> <br /> Nepostrádáte něco? Když jste dorazili v kroku 14 ke klepnutí na ikony B a I, zjistili jste, že vám chybí? Když provádíte změny v zobrazení Kód, inspektor Vlastnosti je třeba občas aktualizovat, aby zpřístupnil příkazy pro formátování. Jednoduše proto klepněte na tlačítko Aktualizovat (Refresh) a formátovací příkazy se zase objeví.<br /> <br /> K dokončení webové stránky zbývají poslední dva úkoly. Všimněte si, že Dreamweaver vytvořil element <title> a mezi jeho značky vložil text „Dokument bez názvu“ („UntitledDocument“). Můžete text označit a napsat vlastní název, nebo můžete pro přejmenování využít speciální funkci. 10 Najděte pole Titul (Title) v panelu nástrojů nad oknem dokumentu a vyberte text „Dokument bez názvu“ („UntitledDocument“). 11 Do pole napište text Základy jazyka HTML, stránka 2. 12 Stiskněte Enter/Return, čímž tvorbu titulku dokončíte.<br /> <br /> Všimněte si, že se nový titulek zároveň změnil také v kódu. Nyní nastal čas soubor uložit a prohlédnout si jej v prohlížeči. 13 Zvolte Soubor (File)  Uložit (Save). Soubor nechte uložit na plochu a pojmenujte jej druhastranka. Pak stiskněte tlačítko Uložit (Save). Dreamweaver souboru automaticky přidá správnou příponu (.html). 14 Zvolte Soubor (File)  Náhled v prohlížeči (Preview in Browser). Hotová stránka se zobrazí v prohlížeči.<br /> <br /> 50<br /> <br /> LEKCE 2<br /> <br /> K2057_Dreamweaver_CS6.indd 50<br /> <br /> Základy jazyka HTML<br /> <br /> 19.2.2013 14:14:29<br /> <br /> Právě jste vytvořili dvě webové stránky – jednu jste vytvořili ručně a další s pomocí Dreamweaveru. V obou případech můžete vidět, že hlavní úlohu hrál jazyk HTML. Abyste se tento jazyk naučili, podívejte se na www.w3schools.com nebo si přečtěte některou z doporučených knih.<br /> <br /> Doporučené knihy HTML5 a CSS3 Elizabeth Castro, Bruce Hyslop, ComputerPress, 2012 HTML5 – Programujeme moderní webové aplikace Peter Lubbers, Brian Albers, Frank Salim, Computer Press, 2011 HTML5 a CSS3 – Výukový kurz webového vývojáře Brian P. Hogan, Computer Press, 2011<br /> <br /> Často používaný kód jazyka HTML 4 Elementy kódu jazyka HTML slouží určitému účelu. Značky dokážou vytvořit strukturu, použít formátování, logicky označit obsah nebo generovat interaktivitu. Značky vytvářející samostatné struktury se nazývají blokové elementy; a ty, které působí uvnitř jiného elementu, se nazývají elementy řádkovými.<br /> <br /> Značky jazyka HTML Následující tabulka uvádí některé nejpoužívanější značky jazyka HTML. Pomohou vám pochopit povahu těchto elementů a jak je použít, takže z Dreamweaveru a tvorby vašich stránek vyždímáte víc. Pamatujte si, že některé značky mohou sloužit více účelům. Tabulka 2.1 Často používané značky jazyka HTML<br /> <br /> Značka<br /> <br /> Popis Strukturální Blokový Řádkový HTML komentář. Umožňuje vkládání G poznámek do kódu tak, že nejsou zobrazeny prohlížečem. G <a> Vytváří hypertextový odkaz. <blockquote> Bloková citace. Vytvoří samostatný odstaG vec s citací. <body> Označuje tělo dokumentu. Obsahuje vešG kerý viditelný obsah webové stránky. <br /> Vkládá zalomení řádku bez vytvoření G nového odstavce. <div> Rozdělení stránky do částí. Vytváří bloky G G uzavírající obsah stránky a používá se hojně k simulování sloupcového layoutu. <em> Zdůraznění. Přidává sémantické zdůrazG nění. Ve výchozím stavu zobrazí obsah kurzívou. G G <form> Označuje formulář HTML. <br /> <br /> ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ<br /> <br /> K2057_Dreamweaver_CS6.indd 51<br /> <br /> 51<br /> <br /> 19.2.2013 14:14:29<br /> <br /> Značka <h1> až <h6> <head><br /> <br /> <hr /> <html><br /> <br /> <iframe> <img /> <input /> <li> <link /> <meta /> <ol> <p> <script> <span><br /> <br /> <strong> <style> <table> <td> <textarea> <th> <title> <tr> <ul><br /> <br /> 52<br /> <br /> LEKCE 2<br /> <br /> K2057_Dreamweaver_CS6.indd 52<br /> <br /> Popis Strukturální Blokový Řádkový Nadpisy. Vytváří tučné nadpisy. Přidává G hierarchickou sémantickou hodnotu. Označuje hlavičku dokumentu. Obsahuje kód vykonávající funkce na pozadí, jako G jsou meta značky, skripty, stylování, odkazování a další informace, které se nezobrazují na stránce. Vodorovná linka. Prázdný element vytváG G řející vodorovnou linku. Kořenový element většiny webových stránek. Obsahuje celou webovou stránku G mimo případů, kdy je třeba kód na straně serveru nahrát před načtením obsahu jazyka HTML. Řádkový rámec. Strukturální element G G obsahující jiné dokumenty. G G Obrázek. Vstupní element pro formulář, například G G textové pole. G Položka seznamu. Označuje vztah mezi dokumentem G a externím zdrojem. G Metadata. Uspořádaný seznam. Definuje číslované G G seznamy. G Odstavec. Vytváří samostatný odstavec. Skript. Obsahuje kód skriptu nebo odkaz G na externí skript. Označuje část elementu. Slouží k použití G formátování nebo zvýraznění na části elementu. Přidává sémantické zdůraznění. Obsah se G zobrazí tučně. G Volá pravidla stylů CSS. G G Označuje tabulku v HTML. G Označuje buňku tabulky. G G Víceřádkové vstupní pole formuláře. G Záhlaví tabulky. G Titulek stránky. G Řádek tabulky. Neuspořádaný seznam. Definuje odrážkoG G vý seznam.<br /> <br /> Základy jazyka HTML<br /> <br /> 19.2.2013 14:14:29<br /> <br /> Znakové entity jazyka HTML Entity existují pro každé písmeno a znak. Pokud není možné symbol přímo vložit pomocí klávesnice, je možné jej vložit zapsáním jeho názvu nebo číselné hodnoty – obě varianty uvádí následující tabulka. Tabulka 2.2 Zápis entit jazyka HTML***<br /> <br /> Znak © ® ™ • – — <br /> <br /> Popis Autorská práva Registrovaná obchodní značka Obchodní značka Tečka Spojovník Pomlčka Nedělitelná mezera<br /> <br /> Název<br /> <br /> Číslo<br /> <br /> ©<br /> <br /> ©<br /> <br /> ®<br /> <br /> ® ™ • – —<br /> <br /> <br /> <br /> <br /> <br /> Úvod do HTML 5 Aktuální platná verze jazyka HTML je tady již více než 10 let a již nedrží tempo s překotným rozvojem technologií, jako jsou mobilní telefony a další mobilní zařízení. World Wide Web Consortium (W3C), organizace odpovědná za udržování a aktualizaci standardů jazyka HTML a jiných webových standardů, intenzivně pracovala na aktualizaci jazyka a vydání pracovního návrhu HTML 5 v lednu 2008. Poslední verze byla publikována v květnu 2012, nicméně na finální verzi si počkáme možná ještě několik let. Co to ale znamená pro současného webového návrháře? Zatím celkem nic. Weby a jejich vývojáři se rychle mění a přizpůsobují v závislosti na aktuální technologii a stavu trhu, ale vývoj podstatných technologií se děje pomaleji. Výrobci prohlížečů již nyní podporují řadu funkcí HTML 5. Ti, kteří je budou přijímat dříve, jistě nadchnou vývojáře a uživatele, jež se zajímají o poslední novinky, což znamená, že prohlížeče nepodporující HTML 5 upadnou v zapomnění, protože budou nekompatibilní s většinou populárních webových stránek. Někteří lidé říkají, že plný přechod nastane někdy kolem roku 2020 nebo později; jiní si myslí, že k tomu dojde mnohem dříve. V každém případě zpětná kompatibilita k HTML 4.01 bude jistá i v budoucnu, takže staré webové stránky a weby zcela jistě najednou nevybuchnou nebo nezmizí.<br /> <br /> Co je nového v HTML 5 Každá nová verze HTML přinesla nové elementy a zároveň změnila význam dříve zavedených elementů. HTML veze 4.01 obsahuje přibližně 90 elementů. Některé z nich byly označeny za zastaralé nebo rovnou zrušeny; zároveň byly přijaty či navrženy elementy nové. Řada novinek souvisí s podporou nových technologií a nových typů obsahu. V některých případech byly změny přijaty v reakci na zvyklosti a techniky, které si vývojáři oblíbili po zavedení předchozí verze HTML. Další změny zjednodušují psaní kódu a zrychlují jeho vytváření a úpravy.<br /> <br /> ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ<br /> <br /> K2057_Dreamweaver_CS6.indd 53<br /> <br /> 53<br /> <br /> 19.2.2013 14:14:29<br /> <br /> Elementy HTML 5 Následující tabulka uvádí některé nové elementy HTML5. Jazyk jich nyní obsahuje přes 100, přičemž téměř 30 původních elementů bylo označeno za zastaralé – ve výsledku tedy HTML5 přináší téměř 50 nových značek. Příklady v této knize řadu těchto nových elementů obsahují a uvádí jejich správné užití. Na příkladech tedy uvidíme zamýšlenou funkci nových vlastností jazyka – seznamte se teď v krátkosti s přehledem a základním popisem nově zaváděných elementů. Tabulka 2.3 Důležité nové značky jazyka HTML 5<br /> <br /> Značka<br /> <br /> Popis Strukturální Označuje nezávislý, samostatný obsah, který G může být šířen nezávisle na zbytku stránky. <aside rel="nofollow"> Označuje obsah postranního pruhu souviseG jící s okolním obsahem. <audio rel="nofollow"> Označuje multimediální obsah, zvuky, G hudbu nebo jiné audio. <canvas> Označuje grafický obsah vytvořený za pouG žití skriptu. <figure> Označuje oblast samostatně stojícího obsaG hu zahrnujícího obrázek nebo video. <figcapti- Označuje titulek elementu <figure>. G <article><br /> <br /> Blokový Řádkový G G G<br /> <br /> G G<br /> <br /> on><br /> <br /> <footer> <header> <hgroup> <nav> <section><br /> <br /> <source><br /> <br /> <track> <video><br /> <br /> Označuje zápatí dokumentu nebo sekce. Označuje úvod dokumentu nebo sekce. Označuje sadu elementů <h1> až <h6> v případě, že má hlavička více úrovní. Označuje sekci navigace. Označuje oblast dokumentu, jako například kapitolu, záhlaví, zápatí, nebo jakoukoli jinou oblast. Označuje zdroj pro mediální elementy. Potomek elementů <video> a <audio rel="nofollow">. V prohlížeči, který nepodporuje defaultní zdroj, může být takto definováno několik jiných zdrojů Označuje název stopy používaný v přehrávačích médií. Označuje video, jako jsou filmy nebo klipy.<br /> <br /> G<br /> <br /> G<br /> <br /> G<br /> <br /> G<br /> <br /> G G<br /> <br /> G<br /> <br /> G<br /> <br /> G<br /> <br /> G<br /> <br /> G<br /> <br /> G G<br /> <br /> Sémantický web Mnoho změn v HTML vzniklo na podporu konceptu sémantického webu. Jedná se o webové stránky vytvořené za použití elementů a struktur, které nesou nějaký vnitřní význam. Například to vedlo ke vzniku řady nových elementů, jako jsou <article>, <section>, <header> či <footer>. Tento posun má zásadní význam pro budoucnost a použitelnost HTML a pro vzájemnou spolupráci webových stránek v rámci sítě Internet. V tuto chvíli funguje každá stránka na webu samostatně. Obsah stránky může odkazovat na jiné stránky, nicméně neexistuje žádný způsob, jak souvisle kombinovat či sbírat informace dostupné na různých stránkách. Vyhledávače dělají,<br /> <br /> 54<br /> <br /> LEKCE 2<br /> <br /> K2057_Dreamweaver_CS6.indd 54<br /> <br /> Základy jazyka HTML<br /> <br /> 19.2.2013 14:14:29<br /> <br /> co mohou, aby zobrazily obsah všech stránek, ale mnoho informací je zkrátka ztraceno díky přirozené povaze a struktuře kódu starého HTML. Jazyk HTML byl původně navržen jako nástroj pro prezentaci. Jinými slovy byl určen k zobrazení technických dokumentů v prohlížeči čitelným způsobem. Pokud se pozorně podíváte na původní specifikaci jazyka HTML, vypadá jako seznam položek, které by se měly objevit ve vědecké publikaci: hlavičky, odstavce, citované zdroje, tabulky, číslované a odrážkované seznamy a tak dále. Internet v době před HTML vypadal spíš jako MS DOS nebo terminálové aplikace OS X. Nebylo zde žádné formátování, grafika ani barvy. Elementy zavedené v první verzi HTML jednoduše popisovaly, jak bude obsah zobrazen. Značky v sobě nenesly žádný vnitřní význam. Například značka pro nadpis znamenala, že se označený řádek textu zobrazí tučně, ale neříkala nic o tom, jaký má nadpis vztah k následujícímu textu. Jedná se o název celého textu, nebo o pouhý podnadpis? HTML 5 přináší významný počet nových značek, aby nám pomohlo přidat význam do našeho kódu. Značky jako <header>, <footer>, <article> či <section> poprvé umožňují označit specifický obsah bez nutnosti použití dalších atributů, jako je <div class=“header“>… </div>. Výsledkem je jednodušší a méně obsáhlý kód. Ale nejlepší na tom všem je, že přidání sémantického významu do vašeho kódu vám a dalším vývojářům umožní propojit obsah jedné stránky s dalšími stránkami, a to novými a vzrušujícími způsoby – z nichž mnoho ještě ani nebylo vynalezeno.<br /> <br /> Nové techniky a technologie HTML 5 také pozměnilo přirozenou povahu tohoto jazyka tím, že převzalo některé funkce, které byly v průběhu let v rostoucí míře zajišťovány doplňky třetích stran a externím programováním. Pokud jste nováčky v oblasti návrhu webů, tento přechod pro vás bude bezbolestný, protože se nemáte co přeučovat a nemáte žádné špatné návyky, kterých byste se potřebovali zbavit. Pokud již máte zkušenosti s vytvářením webových stránek, tato kniha vás bezpečně provede přes některá úskalí a představí vám nové postupy a technologie logickým a srozumitelným způsobem. Ale nejlepší na tom všem je, že sémantický návrh webu neznamená, že musíte zahodit své stránky a udělat všechno znova. Validní kód v HTML 4 zůstane v dohledné budoucnosti validní. Účelem HTML 5 je usnadnit vám vaše úkoly a dokázat více, s menším úsilím. Tak pojďme do toho!<br /> <br /> Referenční příručky HTML 5 Více informací o HTML 5 najdete na stránkách www.w3.org/TR/2011/WD-html5-20110525/ Kompletní seznam elementů v HTML 5 naleznete zde: www.w3schools.com/html5/html5_ reference.asp. Více informací o W3C najdete na stránkách www.w3.org.<br /> <br /> ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ<br /> <br /> K2057_Dreamweaver_CS6.indd 55<br /> <br /> 55<br /> <br /> 19.2.2013 14:14:29<br /> <br /> Opakování Otázky 1 Které programy dokážou otevřít soubory HTML? 2 Co dělá značkovací jazyk? 3 Ano nebo ne? HTML 5 se příliš neliší od HTML 4. 4 Jaké jsou tři hlavní části většiny webových stránek? 5 Jaký je rozdíl mezi blokovými a řádkovými elementy?<br /> <br /> Odpovědi 1 HTML je čistě textový jazyk, jehož soubory je možné otevírat a upravovat v jakémkoli textovém editoru a prohlížet v jakémkoli prohlížeči. 2 Značkovací jazyk umísťuje značky skládající se z lomených závorek <> a textové informace, čímž předávají informaci o struktuře a formátování zobrazovací aplikaci. 3 Ne. Více než 30 nových značek z HTML 4 zmizelo a téměř 50 nových přibylo v HTML 5. To znamená, že se změnila téměř polovina jazyka od jeho představení v roce 1998. 4 Většina webových stránek se skládá ze tří částí: kořene, hlavičky a těla. 5 Blokové elementy vytvářející samostatné elementy. Řádkové elementy mohou existovat uvnitř jiných elementů.<br /> <br /> 56<br /> <br /> LEKCE 2<br /> <br /> K2057_Dreamweaver_CS6.indd 56<br /> <br /> Základy jazyka HTML<br /> <br /> 19.2.2013 14:14:29<br /> <br /> K2057_Dreamweaver_CS6.indd 57<br /> <br /> 19.2.2013 14:14:29<br /> <br /> 3<br /> <br /> ZÁKLADY JAZYKA CSS<br /> <br /> V této lekci V této lekci se seznámíte s CSS a naučíte se:  Rozumět termínům a terminologii CSS (kaskádových stylů)  Jaké jsou rozdíly mezi formátováním pomocí HTML a CSS  Jak kaskáda, dědičnost, následnictví a specifičnost ovlivňují, jakým způsobem prohlížeče použijí formátování CSS  Jak může CSS formátovat objekty  Nové vlastnosti a funkce CSS3<br /> <br /> <br /> <br /> Dokončení této lekce vám zabere okolo 1 hodiny a 30 minut. Než začnete, ujistěte se, že jste zkopírovali soubory k lekci 3 na váš pevný disk, jak je popsáno v kapitole „Začínáme“ na začátku knihy. Pokud v této lekci začínáte od nuly, pak použijte metodu popsanou v části „Skoková výuka“ v kapitole „Začínáme“.<br /> <br /> 58<br /> <br /> K2057_Dreamweaver_CS6.indd 58<br /> <br /> 19.2.2013 14:14:29<br /> <br /> Kaskádové styly ovládají vzhled a dojem webových stránek. Jazyk a syntaxe jsou složité, výkonné a nekonečně přizpůsobitelné. Naučit se je bude vyžadovat nějaký čas a úsilí, ovládnutí pak potrvá roky. Moderní webový designér však bez nich nemůže existovat.<br /> <br /> 59<br /> <br /> K2057_Dreamweaver_CS6.indd 59<br /> <br /> 19.2.2013 14:14:29<br /> <br /> Co je to CSS? Jazyk HTML nebyl nikdy zamýšlen jako designové médium. Mimo tučnosti a kurzívy verze 1.0 postrádala jakýkoli způsob nahrání fontů nebo formátování textu. Formátovací příkazy se přidávaly postupně až do verze HTML 3, aby se s těmito omezen ími vypořádaly, ale všechny tyto změny stále nebyly dostatečné. Designéři se tak uchylovali ke spoustě triků, aby byli schopni vyprodukovat požadovaný výsledek. Například používali HTML tabulky k simulování vícesloupcového a komplexního layoutu textu či grafiky, a obrázky používali, když chtěli jako typ písma zobrazit jiný font než Times nebo Helvetica.<br /> <br /> S pomocí režimu rozšířených tabulek (nahoře) můžete vidět, jak je tato stránka rozdělená na tabulky a obrázky, aby se vytvořil konečný design (dole).<br /> <br /> 60<br /> <br /> LEKCE 3<br /> <br /> K2057_Dreamweaver_CS6.indd 60<br /> <br /> Základy jazyka CSS<br /> <br /> 19.2.2013 14:14:30<br /> <br /> Formátování pomocí HTML bylo natolik nekoncepční, že bylo úplně zavrženo ve prospěch kaskádových stylů coby nástroje k formátování webových stránek. CSS se vyhýbá všem problémům s formátováním pomocí HTML, a navíc šetří čas a také peníze. CSS nutí doslova k obnažení kódu HTML až na základní obsah a strukturu a poté k oddělenému použití formátování, takže můžete snadněji vytvořit webové stránky podle specifických požadavků.<br /> <br /> Formátování HTML vs. CSS Při porovnávání formátování pomocí HTML a CSS je snadné vidět, že formátování pomocí CSS je mnohem efektivnější a méně náročné na čas. V následujících cvičeních prozkoumáte sílu a efektivitu CSS úpravou dvou webových stránek, jedné formátované pomocí HTML a druhé pomocí CSS. 1 Spusťte Dreamweaver CS6, pokud již není spuštěný. 2 Zvolte Soubor (File)  Otevřít (Open). 3 Najděte složku lekce03 a otevřete soubor formatovani_HTML.html. 4 Přepněte do zobrazení Kód a návrh (Split). V případě potřeby vyberte Zobrazení (View)  Rozdělit svisle (Split Vertically), abyste zobrazili okna Kód a Návrh vedle sebe.<br /> <br /> Každý prvek obsahu je formátovaný zvlášť pomocí zavržené značky atributů color=“blue“ v každém elementu <h1> a <p>.<br /> <br /> <font>.<br /> <br /> Všimněte se<br /> <br /> 5 Na každém řádku nahraďte hodnotu blue (modrý) v uvozovkách hodnotou green (zelený). Pak klepněte na tlačítko Návrh (Design), čímž se aktualizuje zobrazení stránky.<br /> <br /> ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ<br /> <br /> K2057_Dreamweaver_CS6.indd 61<br /> <br /> 61<br /> <br /> 19.2.2013 14:14:31<br /> <br /> Text se nyní zobrazí zeleně. Jak můžete vidět, formátování pomocí zastaralé značky <font> je nejen velmi pomalé, ale také náchylné k chybám. Zkuste udělat chybu, například napište greeen místo green, a prohlížeč bude celé formátování barvy ignorovat. 6 Nyní z adresáře lekce03 otevřete soubor formatovani_CSS.html. 7 Pokud jste tak již neučinili, přepněte do zobrazení Návrh a Kód (Split).<br /> <br /> Obsah soubor je identický s předchozím dokumentem. Jediný rozdíl je, že tento dokument je formátovaný pomocí CSS. Kód, jenž formátuje elementy jazyka HTML, se zobrazuje v hlavičce dokumentu (<head>). Všimněte si, že kód obsahuje dvě vlastnosti color:blue;. 8 Vyberte hodnotu blue v kódu h1 {color:blue;} a napište místo ní hodnotu green. Poté se přepněte do zobrazení Návrh (Design), čímž aktualizujete zobrazení stránky. V návrhovém zobrazení se nyní všechny nadpisy zobrazují zeleně. Text odstavců zůstává modrý. 9 Vyberte hodnotu blue v kódu p {color:blue;} a napište místo ní hodnotu přepněte do zobrazení Návrh (Design), čímž aktualizujete zobrazení stránky.<br /> <br /> green.<br /> <br /> Poté se<br /> <br /> V návrhovém zobrazení se nyní text odstavců zobrazuje zeleně. V tomto cvičení jste pomocí CSS provedli změnu barvy jednoduchou dvojí úpravou kódu, zatímco v případě HTML jste museli upravit atributy značky <font>na každém řádku. Už je vám jasné, proč organizace W3C zavrhla značku font ve prospěch kaskádových stylů? Toto cvičení ukazuje pouze malý příklad vylepšení formátovacích schopností a produktivity, které přináší CSS a jež nelze se samotným HTML nijak srovnávat.<br /> <br /> 62<br /> <br /> LEKCE 3<br /> <br /> K2057_Dreamweaver_CS6.indd 62<br /> <br /> Základy jazyka CSS<br /> <br /> 19.2.2013 14:14:31<br /> <br /> Výchozí formátování HTML Každý z téměř stovky elementů jazyka HTML obsahuje jedno nebo více výchozích formátování, charakteristik nebo chování. Takže i když neprovedete nic, text se bude nějak formátovat. Jedním ze základních úkolů na cestě k ovládnutí CSS je naučit se a pochopit toto výchozí formátování. Tak se na to podívejme. 1 Otevřete soubor vychozi_HTML.html z adresáře lekce03. V případě potřeby se přepněte do zobrazení Návrh (Design view), abyste si mohli prohlédnout obsah souboru.<br /> <br /> Soubor obsahuje celou řadu nadpisů a textových elementů v HTML. Každý element ukazuje základní styl, jako je velikost písma, font nebo velikost mezer. 2 V případě potřeby se přepněte do zobrazení Kód a návrh (Split view). V okně Kód (Code) najděte hlavičku (<head>) a zkuste identifikovat, která část kódu zajišťuje formátování elementů HTML. Na první pohled je zřejmé, že v souboru není žádná explicitní informace o stylech, ale text je přesto zformátován. Takže kde se bere? A co jsou tato nastavení zač? Odpověď zní: Záleží na tom. Elementy jazyka HTML vykreslují své charakteristiky podle více zdrojů. Nejdříve podle organizace webových standardů, které ustavuje specifikace a protokoly Internetu. Výchozí šablonu stylů můžete najít na adrese www.w3.org/TR/CSS21/sample.html – stránka definuje chování všech elementů jazyka HTML 4. Toto je specifikace, na jejímž základě všichni výrobci webových prohlížečů zakládají výchozí zobrazení elementů HTML. Abychom vám ušetřili čas a věnovali vám něco do začátku, následující tabulka shrnuje některé nejběžnější základy:<br /> <br /> ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ<br /> <br /> K2057_Dreamweaver_CS6.indd 63<br /> <br /> 63<br /> <br /> 19.2.2013 14:14:31<br /> <br /> Tabulka 3.1: Běžně používaná výchozí nastavení v HTM***<br /> <br /> Položka Pozadí Nadpisy Text těla dokumentu Text v buňce tabulky Hlavička tabulky Písmo Vnější okraje Vnitřní okraje<br /> <br /> Popis Ve většině webových prohlížečů je pozadí bílé. Pozadí elementů <div>, <table>, <td> a <th> a většiny dalších elementů je průhledné. Nadpisy <h1> až <h6> jsou tučné a zarovnané vlevo. U šesti úrovní nadpisů se použije různá velikost písma, <h1> je největší, <h6> nejmenší. Mimo buňky tabulky se text na stránce zarovnává doleva a nahoru. Text v buňkách tabulky <td> je tučný a zarovnává se vodorovně vlevo a svisle na střed. Text uvnitř buněk hlavičky tabulky <th> se zarovnává svisle i vodorovně na střed. Tento výchozí stav není podporován všemi prohlížeči. Text je černý. Výchozí typ písma specifikuje a určuje prohlížeč (nebo uživatelské nastavení prohlížeče). Mezera vně bloku elementu. Mnoho elementů HTML má přidělené výchozí vnější formátování. Mezera mezi hranicí bloku a obsahem. Ve výchozím nastavení žádný element neobsahuje vnitřní okraje.<br /> <br /> Dalším důležitým úkolem je identifikovat prohlížeč a jeho verzi, jenž momentálně zobrazuje HTML. To proto, že se prohlížeče obvykle liší způsobem vyhodnocení či zobrazení elementů HTML a formátování CSS. Bohužel i různé verze téhož prohlížeče mohou stejný kód zobrazovat velmi odlišně. Ideální je tvořit a testovat vaše webové stránky tak, abyste si byli jistí, že budou správně fungovat v těch prohlížečích, které vaši uživatelé používají nejčastěji, nebo alespoň v těch, které používá většina návštěvníků vašich webů. V lednu 2012 uveřejnilo W3C statistiku nejpoužívanějších prohlížečů, viz graf. IE 20,2 % Firefox 37,7 %<br /> <br /> Safari 4,2 % Opera 2,5 % Ostatní 0,8 %<br /> <br /> Chrome 34,6 % Ačkoliv je hezké vědět, který prohlížeč je nejpopulárnější mezi širokou veřejností, je zcela nezbytné, abyste před tvorbou a testováním vašich webových stránek zjistili, které prohlížeče používá vaše cílové publikum. Pokud například děláte web pro uživatele výrobků Apple, je nezbytné odladit stránky hlavně pro prohlížeč Safari.<br /> <br /> 64<br /> <br /> LEKCE 3<br /> <br /> K2057_Dreamweaver_CS6.indd 64<br /> <br /> Základy jazyka CSS<br /> <br /> 19.2.2013 14:14:31<br /> <br /> Ačkoli tento graf ukazuje základní rozložení v použití webových prohlížečů ve světě, ignoruje fakt, že se stále používají různé verze uvedených prohlížečů. Toto je potřeba mít na paměti, protože starší verze prohlížečů mají menší tendenci podporovat nejnovější funkce HTML a CSS. A aby to nebylo tak jednoduché, vězte, že tato statistika platí pro Internet jako celek, čísla pro Českou republiku (nebo jinou konkrétní oblast) mohou být velice odlišná.<br /> <br /> Blokový model CSS Prohlížeč obvykle přečte kód HTML, poté vyhodnotí jeho strukturu a formátování a nakonec zobrazí webovou stránku. CSS svou práci dělá tím, že vstoupí mezi HTML a prohlížeč, aby znovu definoval, jak by se měly jednotlivé elementy vykreslit. Ty na stránce vytvářejí okolo každého elementu imaginární blok a poté umožní formátování téměř každého aspektu toho, jak se blok a jeho obsah zobrazí. Horní rámeček<br /> <br /> Levý vnitřní okraj<br /> <br /> <h1>…</h1> Spodní vnitřní okraj<br /> <br /> Pravý vnější okraj<br /> <br /> Horní vnitřní okraj<br /> <br /> Pravý vnitřní okraj<br /> <br /> Levý rámeček<br /> <br /> Levý vnější okraj<br /> <br /> Horní vnější okraj<br /> <br /> Pravý rámeček<br /> <br /> Spodní vnější okraj Spodní rámeček<br /> <br /> Blokový model je programový konstrukt předepsaný CSS, jenž vám umožňuje formátovat nebo znovu definovat výchozí vlastnosti každého elementu HTML.<br /> <br /> CSS vám povoluje specifikovat typ písma, výšku řádku, barvy, ohraničení, odstín pozadí a grafiky, a mimo jiných věcí i vnější a vnitřní okraj. Tyto bloky jsou obvykle neviditelné. CSS umožňuje formátování těchto bloků, ale nevyžaduje, abyste jej vždy provedli. 1 Spusťte Dreamweaver. Otevřete soubor blokovy_model.html z adresáře lekce03. 2 Přepněte se do zobrazení Kód a návrh (Split view).<br /> <br /> ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ<br /> <br /> K2057_Dreamweaver_CS6.indd 65<br /> <br /> 65<br /> <br /> 19.2.2013 14:14:31<br /> <br /> Vzorový kód HTML z tohoto souboru obsahuje nadpis a dva odstavce, formátování textu ukazuje některé vlastnosti blokového modelu CSS. Text má nastaveno viditelné ohraničení, barvu pozadí a vnější i vnitřní okraje.<br /> <br /> Obsah vs. Zobrazení Základní pravidlo dnešních webových standardů je oddělení obsahu (text, obrázky, seznamy apod.) a jeho zobrazení (formátování). Zde vidíte vedle sebe identické soubory z hlediska HTML. Ze souboru vlevo jsme zcela odstranili CSS. Vzhledem k tomu, že text vlevo zcela postrádá formátování, je jasné, jakou sílu má použití CSS při zobrazení kódu HTML.<br /> <br /> Na adrese www.w3.org/TR/css3-box můžete najít specifikaci popisující, jak by se měl blokového modelu dokument vykreslovat v různých médiích.<br /> <br /> 66<br /> <br /> LEKCE 3<br /> <br /> K2057_Dreamweaver_CS6.indd 66<br /> <br /> Základy jazyka CSS<br /> <br /> 19.2.2013 14:14:31<br /> <br /> Formátování textu Kaskádové styly můžete použít třemi způsoby: přímo (anglicky: inline style), vloženou šablonou (anglicky: embedded style sheet), nebo externí šablonou (anglicky: linked style sheet). Formátovací instrukce CSS se nazývají pravidla. Pravidlo se skládá ze dvou částí – selektoru a jedné nebo více deklarací. Selektor určuje, jaký element nebo kombinace elementů se bude formátovat, zatímco deklarace obsahuje specifikaci formátování. Pravidla CSS mohou předefinovat vlastnosti jakéhokoli elementu HTML, stejně jako mohou definovat dva vlastní selektory nazývané třída a identifikátor. Pravidlo může jednotlivé selektory kombinovat, aby formátování přidělilo velmi specifickým situacím uvnitř stránky, kde se elementy zobrazují jedinečným způsobem, například když je jeden element vnořený do druhého. Použití pravidla CSS není jednoduše pouze záležitostí vybrání nějakého textu a použití odstavcového nebo znakového stylu, tak jako to znáte z Adobe InDesignu nebo Adobe Illustratoru. Pravidla CSS mohou ovlivňovat jednotlivá slova, odstavce textu nebo kombinace textu a objektů. Jednotlivé pravidlo může ovlivňovat celou stránku. Pravidlo je možné specifikovat tak, aby náhle začalo a skončilo, nebo aby obsah formátovalo nepřerušeně, dokud jej nezmění pravidlo následující.<br /> <br /> Konstrukce pravidla CSS Selektor<br /> <br /> Element HTML<br /> <br /> p<br /> <br /> Deklarace<br /> <br /> Deklarace<br /> <br /> {color:red;font-family:Verdana;}<br /> <br /> Vícenásobný selektor<br /> <br /> th,td {font-weight:bold;padding:4px;}<br /> <br /> Následník<br /> <br /> div p {font-size:95%;margin-top:5px;}<br /> <br /> Třída<br /> <br /> .ctr<br /> <br /> {text-align:center;line-height:16px;}<br /> <br /> Identifikátor<br /> <br /> #hdr<br /> <br /> {background-color:black;color:white;} Vlastnost<br /> <br /> Hodnota Vlastnost Hodnota<br /> <br /> Tato vzorová pravidla ukazují některé typické konstrukce použité v selektorech a deklaracích. Jak již bylo vysvětleno, způsob, jímž je selektor napsaný, určuje, jak se stylování použije a jak budou pravidla vzájemně interagovat.<br /> <br /> V tom, jak pravidlo CSS vykoná svou práci, hraje roli hodně vlivů. Abyste lépe pochopili, jak to vše funguje, cvičení v následující části textu ilustrují čtyři pojetí CSS: kaskádu, dědičnost, následnictví a specifičnost.<br /> <br /> ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ<br /> <br /> K2057_Dreamweaver_CS6.indd 67<br /> <br /> 67<br /> <br /> 19.2.2013 14:14:31<br /> <br /> Kaskáda Kaskáda popisuje, jak pořadí a umístění pravidel v šabloně stylů nebo ve stránce ovlivní použití stylování. Jinými slovy, pokud se dvě pravidla dostanou do konfliktu, které zvítězí? Podívejme se, jak kaskáda ovlivňuje formátování CSS. 1 Otevřete soubor kaskada.html z adresáře lekce03 Soubor obsahuje nadpisy v HTML formátované červeně. 2 Přepněte se do zobrazení Návrh a Kód (Split) a prohlédněte si pravidla CSS v hlavičce kódu (<head>)<br /> <br /> Všimněte si, že kód obsahuje dvě identická pravidla CSS, která se liší pouze barvou: jedno nastavuje červenou, druhé modrou. Obě pravidla mají formátovat stejné prvky, ale pouze jedno z nich se uplatní. Druhé pravidlo evidentně zvítězí. Proč? Protože druhé pravidlo je poslední uvedené a tím se ocitá nejblíže obsahu, na který má být aplikováno. 3 Vyberte pravidlo h1<br /> <br /> {color: red;}<br /> <br /> 4 Zvolte Úpravy (Edit)  Vložit (Paste) 5 Přesuňte kurzor na konec pravidla h1<br /> <br /> { color: red; }<br /> <br /> 6 Zvolte Úpravy (Edit)  Vložit (Paste)<br /> <br /> Právě jste změnili pořadí pravidel. 7 Klepněte do okna Návrh (Design) a tím obnovte náhled. Nadpisy jsou nyní zobrazeny modře. Blízkost a pořadí pravidel v rámci kódu jsou důležité aspekty ovlivňující způsob, jak se CSS uplatní. Když zkoušíte určit, které pravidlo CSS dostane přednost, pamatujte si, že prohlížeče obvykle použijí následující hierarchii pořadí, z nichž je nejvýše číslo 3. 68<br /> <br /> LEKCE 3<br /> <br /> K2057_Dreamweaver_CS6.indd 68<br /> <br /> Základy jazyka CSS<br /> <br /> 19.2.2013 14:14:31<br /> <br /> 1 Výchozí formátování prohlížeče 2 Externí nebo interní (místní) šablona stylů umístěná v hlavičce dokumentu. Pokud se vyskytují obě, uplatní se naposledy uvedená. 3 Řádkový styl (uvnitř vlastního elementu HTML)<br /> <br /> Dědičnost Dědičnost popisuje, jak může být jedno pravidlo ovlivněné jiným nebo více pravidly deklarovanými dříve. Dědičnost může ovlivňovat pravidla se stejným názvem a pravidla, jež formátují rodičovské elementy nebo elementy, které jsou do sebe vnořené. Podívejme se, jak dědičnost ovlivňuje formátování CSS. 1 Otevřete soubor dedicnost.html z adresáře lekce03. V zobrazení Kód a návrh (Split) si prohlédněte kód CSS.<br /> <br /> Jako první si všimněte, že zde jsou dvě různá pravidla CSS, která formátují nadpis <h1>. Když se podíváte do okna Návrh (Design), umíte říct, které pravidlo se skutečně uplatňuje na nadpis <h1>? Pokud řeknete, že obě, máte pravdu. Na první pohled se může zdát, že zde jsou dvě pravidla pro formátování nadpisu <h1>, a v podstatě je to pravda. Nicméně když se podíváte pořádně, zjistíte, že druhé pravidlo není v rozporu s prvním. Ono totiž nemění atribut barva (color), ale deklaruje nový atribut. Jinými slovy, vzhledem k tomu, že každé pravidlo dělá něco jiného, uplatní se obě. Všechny nadpisy <h1> budou modré a v písmu Verdana. Toto rozhodně není chyba, ani nezamýšlený důsledek; naopak schopnost vytvářet komplexní formátování za použití mnoha pravidel je jedna z nejvýznamnějších vlastností kaskádových stylů. 2 Podívejte se na pravidla, která formátují elementy h2, h3 a p.<br /> <br /> Všechna pravidla obsahují výraz { color: blue; font-family: Verdana; }. Tvorbě nadbytečného kódu bychom se měli vyhnout, kdykoli je to možné, protože vede k nárůstu<br /> <br /> ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ<br /> <br /> K2057_Dreamweaver_CS6.indd 69<br /> <br /> 69<br /> <br /> 19.2.2013 14:14:31<br /> <br /> celkové velikosti kódu a tím zpomaluje jeho stahování a spouštění. Za použití dědičnosti můžete dosáhnout stejného efektu s pouhým jedním pravidlem. Místo použití stylu pro každý element zvlášť jej použijte na jejich rodičovský element, ve kterém jsou obsaženy – v tomto případě je to <div>. 3 Vyberte selektor h2 a napište místo něho div. Tato změna ovlivní styl rodičovského elementu a tím pádem i všech elementů, které obsahuje. 4 Smažte pravidla, která formátují elementy h3 a p.<br /> <br /> 5 Klikněte do okna Návrh (Design), abyste obnovili náhled. Všechny elementy zůstaly formátovány modře a v písmu Verdana. Jedno pravidlo teď formátuje tři různé elementy. Pojďme se posunout o další krok. Možná jste si také všimli, že dvě pravidla pro h1 společně vytvářejí stejný efekt jako pravidlo pro div. 6 Označte a smažte obě pravidla pro h1. Klikněte do okna Návrh (Design), abyste obnovili náhled; výsledek by měl vypadat úplně stejně jako předtím. Všechen text je nyní formátován jediným pravidlem div<br /> <br /> { color: blue; font-family:<br /> <br /> Verdana; }.<br /> <br /> Následnictví Pojem následnictví popisuje, jak je možné formátování přidělit specifickému elementu na základě jeho relativní pozice ve vztahu k jiným elementům. Vytvořením složeného selektoru, stejně tak jako s využitím třídy nebo identifikátoru, můžete formátovat velmi specifické části textu uvnitř webové stránky. Podívejme se, jak dědičnost ovlivňuje formátování CSS. 1 Otevřete soubor naslednik.html z adresáře lekce03. V zobrazení Kód a návrh (Split) si prohlédněte kód CSS a strukturu obsahu v HTML.<br /> <br /> Stránka obsahuje tři elementy h1. Tyto elementy se objevují třemi různými způsoby: samostatně, v rámci elementu div a v rámci elementu div, který je zároveň atributem třídy. Kromě značek HTML jsou zde také tři pravidla CSS, která aplikují různé styly na tyto elementy.<br /> <br /> 70<br /> <br /> LEKCE 3<br /> <br /> K2057_Dreamweaver_CS6.indd 70<br /> <br /> Základy jazyka CSS<br /> <br /> 19.2.2013 14:14:32<br /> <br /> Zajímavé na těchto pravidlech je, že se neuplatňují na elementy h1 přímo, ale v pořadí, v jakém se tyto elementy vyskytují ve struktuře HTML. Všimněte si, jakým způsobem je první element h1 formátován, aby se zobrazil modře a v písmu Verdana. 2 V okně Kód (Code) vyberte celý první element h1. 3 Zvolte Úpravy (Edit)  Kopírovat (Copy). 4 Posuňte kurzor za uzavírací značku elementu<h1>Jsem<br /> <br /> uvnitř DIV elementu</h1>.<br /> <br /> 5 Zvolte Úpravy (Edit)  Vložit (Paste). Klikněte do okna Návrh (Design), abyste obnovili náhled.<br /> <br /> Objeví se nový element <h1>, zobrazený červeně a ve fontu Impact, úplně stejně jako jiný element <h1> v rámci stejného elementu <div>. Co se stalo s modrou Verdanou? CSS automaticky odlišilo samostatně stojící element <h1> od těch, které se vyskytují uvnitř elementu <div>. Jinými slovy není nutné vytvářet speciální formátování, nebo měnit existující. Stačí přesunout element do správné struktury nebo pozice v rámci kódu, a on se naformátuje sám. Fajn. Pojďme to zkusit znovu. 6 V okně Kód (Code) posuňte kurzor za uzavírací značku elementu <h1>A třídní příslušností</h1>.<br /> <br /> já v DIVu s <em><br /> <br /> 7 Zvolte Úpravy (Edit)  Vložit (Paste). Klikněte do okna Návrh (Design), abyste obnovili náhled.<br /> <br /> ***051-1***<br /> <br /> Objeví se nový element <h1>, zobrazený zeleně a ve fontu Times. Znovu, vložený text se přizpůsobil formátování ostatních elementů v rámci elementu <div> a jeho původní formátování bylo ignorováno.<br /> <br /> ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ<br /> <br /> K2057_Dreamweaver_CS6.indd 71<br /> <br /> 71<br /> <br /> 19.2.2013 14:14:32<br /> <br /> Specifičnost Specifičnost popisuje, jak prohlížeč rozhodne, který formát zvolit, pokud dojde ke konfliktu dvou nebo více pravidel. Někdo o tomto konceptu mluví jako o váze – tedy dát určitému pravidlu větší váhu na základě pořadí, blízkosti, dědičnosti a následnictví. Tyto konflikty jsou kletbou webových designérů a díky nim můžete strávit hodiny řešením problémů s chybami ve formátování pomocí CSS. Podívejme se na příklady toho, jak specifičnost ovlivňuje váhu některých pravidel. 1 Otevřete soubor specificnost.html z adresáře lekce03. V zobrazení Kód a návrh (Split) si prohlédněte kód CSS a strukturu obsahu v HTML. Pak si všimněte vzhledu textu v okně Návrh (Design).<br /> <br /> V hlavičce souboru jsou tři pravidla CSS. Všechna tři by mohla formátovat element na této stránce. Nicméně v tuto chvíli se žádné z nich neuplatňuje.<br /> <br /> <h1><br /> <br /> Vidíte lomítko a hvězdičku (/*) na začátku kódu CSS? Tato značka se používá k zapsání komentáře v CSS a slouží také k deaktivaci pravidel, která následují. Komentář se zakončuje podobnou značkou, jen v opačném pořadí lomítka a hvězdičky (*/). V Dreamweaveru se komentář obvykle zobrazuje šedě. Také si všimněte, že otevírací značka elementu <h1> obsahuje atribut @style. Tento řádkový styl CSS byl deaktivován použitím symbolu @ na začátku slova. Stylování CSS můžete jednoduše aktivovat vymazáním značek pro komentář /* a */, stejně jako @ v rámci atributu. Než tak učiníte, dokážete určit – na základě syntaxe a pořadí pravidel – jaké formátování se použije na ukázkový text? Například zobrazí se text v písmu Times, Impact, nebo Verdana? Bude mít barvu modrou, červenou, zelenou nebo oranžovou? Podívejme se na to. 2 Vyberte značku /* na začátku kódu CSS a vymažte ji. 3 Vyberte značku */ na konci kódu CSS a vymažte ji. 4 Vyberte symbol@ v <h1> atributu a vymažte ho. 5 Klikněte do okna Návrh (Design), abyste obnovili náhled.<br /> <br /> 72<br /> <br /> LEKCE 3<br /> <br /> K2057_Dreamweaver_CS6.indd 72<br /> <br /> Základy jazyka CSS<br /> <br /> 19.2.2013 14:14:32<br /> <br /> Pokud jste za vítěze určili řádkový styl obsažený ve značce <h1>, pak jste o něco napřed. Text se zobrazí oranžově. Ale všimli jste si, že řádkový styl neurčuje typ písma? Tak jakto, že se text zobrazil v písmu Verdana? 6 Řádkový styl sice trumfne jakékoli jiné formátování, nicméně ne vždy fungují pravidla CSS samostatně. Jak již bylo řečeno, pravidla CSS mohou formátovat více elementů HTML současně, a některá pravidla mohou přebít jiná, nebo naopak zdědit jejich styl. V tomto případě se písmo elementu <h1> řídí jedním z dalších uvedených pravidel. Uměli byste říct kterým? 7 Vyberte a smažte celý kód pro řádkový styl v rámci elementu <h1>: style= “color: orange”.<br /> <br /> 8 Klikněte do okna Návrh (Design), abyste obnovili náhled. Poslední řádek textu je nyní formátován pouze pravidlem div .product h1. Dokážete vysvětlit proč? Notace .product v selektoru odkazuje na atribut class=”product” , který je přiřazen elementu <h1>. Třídy se používají k aplikování stylů CSS v případě, že jiné metody nedosahují požadovaného efektu, nebo v případě, kdy potřebujeme potlačit výchozí nastavení. Třídám se budeme více věnovat v dalších lekcích. Každá z popsaných teorií hraje svou roli ve způsobu, jak se budou kaskádové styly uplatňovat na vaší webové stránce. Po načtení stylů, obzvlášť pokud jsou pravidla v konfliktu, použije prohlížeč pro jejich vyhodnocení následující hierarchii – s tím, že číslo 4 má největší váhu. 1 Kaskáda 2 Dědičnost 3 Následnictví 4 Specifičnost Znalost této hierarchie vám ovšem moc nepomůže, pokud budete v rámci stránky řešit konflikt desítek nebo možná stovek pravidel. V těchto případech je k nezaplacení úžasná funkce Dreamweaveru, zvaná Průvodce kódem (Code navigator).<br /> <br /> Navigace v kódu Navigace v kódu (Code Navigator) je nástroj Dreamweaveru, který umožňuje prozkoumat element HTML a okamžitě zjistit, jakým způsobem je tento element formátován pomocí CSS. Pokud je aktivní, zobrazí všechna relevantní pravidla CSS v pořadí jejich kaskádového uplatnění a specifičnosti. Průvodce kódem funguje jak v zobrazení Návrh (Design), tak Kód (Code). 1 Otevřete soubor specificnost.html tak, jak jste jej upravili v předchozím cvičení. V zobrazení Kód a návrh (Split) si prohlédněte kód CSS a strukturu obsahu v HTML.<br /> <br /> ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ<br /> <br /> K2057_Dreamweaver_CS6.indd 73<br /> <br /> 73<br /> <br /> 19.2.2013 14:14:32<br /> <br /> Přestože se jedná o velmi jednoduchý soubor, obsahuje tři pravidla CSS, která mohou ovlivnit formát elementu <h1>. Na skutečné webové stránce roste pravděpodobnost konfliktu s každým přidaným pravidlem. Nicméně s Navigací v kódu je řešení těchto problémů hračka. 2 V zobrazení Návrh umístěte kurzor do textu nadpisu.<br /> <br /> Po chvilce se objeví ikona, která vypadá jako kormidlo. Tato ikona poskytuje přístup do Průvodce kódem. 3 Klikněte na ikonu Navigace v kódu.<br /> <br /> Objeví se malé okno, ve kterém jsou zobrazeny tři styly CSS použité pro tento nadpis. Pořadí pravidel v seznamu určuje jejich posloupnost v kaskádě a jejich specifičnost. Pokud dojde ke konfliktu, pravidla umístěná níže v seznamu přebijí ta, která jsou výš. Pamatujte si, že elementy mohou být formátovány více pravidly, a že výchozí nastavení může být změněno více specifickým nastavením. Pravidlo div .product h1 je v seznamu na posledním místě, což znamená, že je pravděpodobně zodpovědné za formátování tohoto elementu. Nicméně existuje řada faktorů určujících, které pravidlo zvítězí. Někdy je to prostě pořadí, v jakém jsou pravidla uvedena v šabloně stylů. Jak jste viděli dříve, změna pořadí pravidel často ovlivňuje způsob, jakým se pravidla uplatní. 4 V zobrazení Kód vyberte celé pravidlo: div. product h1 {font-family: Verdana; color: green ;}<br /> <br /> 5 Zvolte Úpravy (Edit)  Vyjmout (Cut). 6 Přesuňte kursor před pravidlo h1 {font-family: Times; color: blue ;} 7 Zvolte Úpravy (Edit)  Vložit (Paste). Stiskněte Enter/Return pro vložení konce řádku. 8 Klikněte do okna Návrh, abyste obnovili náhled. Styly se nezměnily.<br /> <br /> 74<br /> <br /> LEKCE 3<br /> <br /> K2057_Dreamweaver_CS6.indd 74<br /> <br /> Základy jazyka CSS<br /> <br /> 19.2.2013 14:14:32<br /> <br />  Poznámka: Průvodce kódem můžete otevřít také tak, že kliknete pravým tlačítkem na vybraný element a zvolíte Zobrazení (View) Navigace v kódu (Code navigator) z kontextového menu. Další způsob je použití klávesové zkratky Alt+Ctrl+N/Opt+Cmd+N.<br /> <br /> 9 V zobrazení Kód přesuňte kurzor do textu elementu <h1>. Spusťte Průvodce kódem.<br /> <br /> Přestože jsme přesunuli pravidlo na začátek šablony stylů, pořadí zobrazení v Průvodci kódem se nezměnilo, protože pravidlo div.product h1 je více specifické než ostatní dvě. V tomto případě pravidlo vyhraje bez ohledu na jeho umístění v šabloně stylů, ale jeho specifičnost můžeme snadno změnit modifikací selektoru. 10 Vyberte a smažte notaci třídy .product v selektoru. 11 Klikněte do zobrazení Návrh, abyste obnovili náhled.<br /> <br /> Všimli jste si, jak se změnil styl? 12 Přesuňte kurzor do textu nadpisu a spusťte Navigace v kódu. Odstraněním notace třídy ze selektoru má nyní pravidlo stejnou váhu, jak div h1{font-family: Impact; color: red ;}. Nicméně protože je umístěno v kódu jako poslední, má nyní v kaskádě<br /> <br /> přednost. Přestává to dávat smysl? Nebojte se – časem se to zlepší. Do té doby si hlavně zapamatujte, že pravidlo, které se objeví jako poslední v Průvodci kódem, má největší vliv na daný element.<br /> <br /> Formátování objektů Posledním konceptem, který prozkoumáte v této lekci, je také ten nejsložitější a nejnáchylnější k chybám: formátování objektů. Formátování objektů považujte za specifikaci záměru změnit umístění, velikost, pozadí, ohraničení či vnější a vnitřní okraje elementu. Protože CSS dokáže předefinovat jakýkoli element HTML, objektové formátování lze jednoduše přidělit jakékoli značce, i když se nejčastěji směřuje na značku <div>.<br /> <br /> ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ<br /> <br /> K2057_Dreamweaver_CS6.indd 75<br /> <br /> 75<br /> <br /> 19.2.2013 14:14:32<br /> <br /> Ve výchozím nastavení se elementy začínají vykreslovat v levém horním rohu okna prohlížeče a zobrazí se postupně jeden za druhým zleva doprava a shora směrem dolů. Blokové elementy se zobrazí vždy přes celý řádek nebo odstavec; řádkové elementy se zobrazí na místě svého vložení. CSS dokáže celé toto výchozí nastavení zrušit a umožní vám změnit velikost, formát či umístění elementu téměř jakkoli chcete. Velikost je jedna z nejzákladnějších vlastností elementu HTML. CSS může určovat šířku a výšku elementu s různou úspěšností. Všechny charakteristiky se mohou uvádět v relativních (procento, em, ex) nebo absolutních (pixely, palce, body, centimetry atd.) jednotkách.<br /> <br /> Šířka Nastavení šířky elementu HTML je jednoduché. Ukažme si to na příkladu. 1 Otevřete soubor sirka.html z adresáře lekce03. 2 Přejděte do zobrazení Kód a návrh (Split) a prohlédněte si kód CSS a strukturu HTML.<br /> <br /> ***056-1*** Blokové elementy zabírají ve výchozím nastavení 100 % šířky okna prohlížeče. CSS definuje rozměry v absolutních nebo relativních jednotkách.<br /> <br /> Soubor obsahuje čtyři elementy <div> formátované směsí relativních a absolutních nastavení. Blok 1 není formátovaný, abychom si ukázali, jak vypadá výchozí zobrazení bloku. Blok zabírá 100 % šířky okna prohlížeče. Naproti tomu blok dva je nastaven tak, aby zabíral 50 % šířky okna. Údaj v procentech říká, jakou část šířky okna element zabere. Specifikace v relativních jednotkách umožní přizpůsobení elementu změnám šířky okna prohlížeče. Například pokud posunete tažením myší hranici mezi okny Kód a Návrh, blok 2 bude vždy zabírat polovinu šířky okna Návrh.<br /> <br /> 76<br /> <br /> LEKCE 3<br /> <br /> K2057_Dreamweaver_CS6.indd 76<br /> <br /> Základy jazyka CSS<br /> <br /> 19.2.2013 14:14:32<br /> <br /> Šířka elementu nastavená v procentech se automaticky přizpůsobí změnám okna prohlížeče za udržení poměru zaplněné plochy. Pokud je šířka nastavena v absolutních jednotkách, nereaguje na změny okna prohlížeče.<br /> <br /> Blok 3 má nastavenou pevnou šířku 200 pixelů. Tuto šířku si zachová bez ohledu na to, jak se změní okno prohlížeče. Tato metoda je oblíbená u mnoha návrhářů, protože jim umožňuje snadno kontrolovat rozměry a tvar komponent na stránce. Toto ovšem neplatí pro setkání uživatelů s vaší stránkou. Pevné nastavení šířky například se neumí vyrovnat se změnou velikosti písma na stránce. Pokud uživatel zadá takový požadavek, může se rozpadnout celé uspořádání stránky. Poslední element <div> ukazuje způsob formátování, který je směsí použití absolutních a relativních jednotek. Jeho šířka je nastavená na 10 em. Em je jednotka, která je pravděpodobně bližší tiskovým návrhářům. Je založena na velikosti a typu použitého písma. Jinými slovy, pokud použijete větší písmo, em bude větší, naopak pokud použijete menší písmo, em bude menší. Jeho velikost se mění dokonce i v závislosti na tom, jestli je písmo úzké nebo široké. V návrhu webových stránek se za výchozí hodnotu pro určení em (a také ex) považuje písmo nastavené v těle dokumentu jako výchozí písmo webové stránky.<br /> <br /> Šířka elementu nastavená v jednotkách em umožňuje vaší stránce přizpůsobit se požadavku uživatele na zvětšení nebo zmenšení písma.<br /> <br /> ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ<br /> <br /> K2057_Dreamweaver_CS6.indd 77<br /> <br /> 77<br /> <br /> 19.2.2013 14:14:32<br /> <br /> Pokud byste změnili vlastnost font-size v pravidle pro element bodyze 100% na 300%, čtvrtý element <div> by se automaticky zvětšil trojnásobně s tím, že by se zachoval poměr velikosti bloku a písma. Elementy formátované v procentech nebo pixelech by zůstaly beze změny.<br /> <br /> Výška V ideálním případě by mělo být možné určit výšku elementu stejně jako jeho šířku. Ve skutečnosti to bohužel není tak jednoduché. Podpora parametru height (výška) prohlížeče nebyla v minulosti konzistentní ani spolehlivá. Dnešní moderní prohlížeče by se měly chovat předvídatelně, pokud používáte absolutní jednotku, jako jsou pixely, body, palce apod. Ani relativní jednotky jako jsou em či ex by neměly činit větší potíže. Nicméně zadávání v procentech vyžaduje použití určitého úsilí, nebo triku, aby bylo přijato většinou prohlížečů. 1 Otevřete soubor vyska.html z adresáře lekce03. Přejděte do zobrazení Kód a návrh (Split) a prohlédněte si kód CSS a HTML.<br /> <br /> Soubor obsahuje čtyři elementy <div> představující příklady absolutního i relativního nastavení výšky. Blok 1 ukazuje výchozí chování blokových elementů; zabírá na výšku právě tolik prostoru, kolik potřebuje jeho obsah. Blok 2 má výšku nastavenu na 100 pixelů; tato výška mu zůstane bez ohledu na změnu velikosti nebo orientace obrazovky. Blok 3 má výšku nastavenu na 10 em. Přestože em je relativní jednotka, výška tohoto bloku se neodvozuje od velikosti obrazovky; místo toho je závislá na velikosti výchozího fontu, jak bylo popsáno dříve. Změňte výchozí velikost písma a tento element <div> na to zareaguje. Až potud dobré. Zdá se, že parametr height (výška) funguje jednoduše a podle očekávání pro první tři elementy. Nicméně blok 4 je ten, který bude dělat potíže. Jeho výška je nastavena na 50 % a vy pravděpodobně očekáváte, že bude zabírat polovinu výšky obrazovky. Nicméně jak můžete vidět v okně Návrh, box 4 není vyšší než box 1. V čem je problém? Většina prohlížečů, a dokonce i zobrazení Návrh v Dreamweaveru ignoruje nastavení výšky v procentech. Důvod je ve způsobu, jakým prohlížeče počítají velikost okna stránky. V podstatě jde o to, že prohlížeče počítají šířku, ale nikoli výšku. Toto chování neovlivní<br /> <br /> 78<br /> <br /> LEKCE 3<br /> <br /> K2057_Dreamweaver_CS6.indd 78<br /> <br /> Základy jazyka CSS<br /> <br /> 19.2.2013 14:14:32<br /> <br /> pevné nastavení výšky nebo nastavení v em či ex, nicméně zcela selže v případě nastavení v procentech. A přesně v tuto chvíli přijde na řadu zmiňovaný trik. 2 Přesuňte kurzor na začátek kódu CSS. 3 Napište html,<br /> <br /> body {height: 100%}.<br /> <br /> Přidáním vlastnosti height do kořenového elementu vaší webové stránky předáte prohlížeči informaci, že musí spočítat výšku každého elementu zadanou v procentech. Abyste viděli výsledek, je potřeba přejít do Živého zobrazení (Live view) nebo si prohlédnout stránku ve skutečném prohlížeči. 4 Přepněte se do Živého zobrazení (Live view).<br /> <br /> Blok 4 nyní zabírá 50 % výšky okna Návrh.  Poznámka: Ve většině případů nebude výška elementů striktně zachována. Standardně se jedná o proměnnou vlastnost umožňující elementu přizpůsobit se automaticky prostorovým požadavkům svého obsahu.<br /> <br /> Přestože podpora prohlížečů je dnes na mnohem vyšší úrovni, je nezbytné testovat návrh vašich stránek ve všech oblíbených prohlížečích, jestli se zobrazí správně.<br /> <br /> Ohraničení a pozadí Každý element může obsahovat čtyři samostatná ohraničení (horní, spodní, levý a pravý). Ty se hodí k tvorbě blokových elementů, ale můžete je umístit také k hornímu a/nebo dolnímu okraji odstavců na místo značky <hr /> (vodorovná čára) k oddělení textových oblastí. 1 Otevřete soubor ohraniceni.html z adresáře lekce03. Přejděte do zobrazení Kód a návrh (Split) a prohlédněte si kód CSS a HTML.<br /> <br /> ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ<br /> <br /> K2057_Dreamweaver_CS6.indd 79<br /> <br /> 79<br /> <br /> 19.2.2013 14:14:32<br /> <br /> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://adoc.pub/report/adobe-creative-team-adobe-dreamweaver-cs6-oficialni-vyukovy-" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "Adobe Creative Team. Adobe Dreamweaver CS6 Oficiální výukový kurz"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea> </div> <div class="form-group"> <div style="display: inline-block;"> <div class="g-recaptcha" data-sitekey="6LcEnMcZAAAAAFHzKKgaE-Qh57XzUTzpfRElD4dP"></div> </div> </div> <script src='https://www.google.com/recaptcha/api.js'></script> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary">Send</button> </div> </form> </div> </div> </div> <script> $(document).ready(function () { var inner_height = $(window).innerHeight() - 250; $('#pdfviewer').css({"height": inner_height + "px"}); }); </script> <footer class="footer" style="margin-top: 60px;"> <div class="container-fluid"> Copyright © 2024 ADOC.PUB. All rights reserved. <div class="pull-right"> <span><a href="https://adoc.pub/about">About Us</a></span> | <span><a href="https://adoc.pub/privacy">Privacy Policy</a></span> | <span><a href="https://adoc.pub/term">Terms of Service</a></span> | <span><a href="https://adoc.pub/copyright">Copyright</a></span> | <span><a href="https://adoc.pub/contact">Contact Us</a></span> | <span><a href="https://adoc.pub/cookie_policy">Cookie Policy</a></span> </div> </div> </footer>  <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="add-note-label">Sign In</h4> </div> <div class="modal-body"> <form action="https://adoc.pub/login" method="post"> <div class="form-group"> <label class="sr-only" for="email">Email</label> <input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" /> </div> <div class="form-group"> <label class="sr-only" for="password">Password</label> <input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" /> </div> <div class="form-group"> <div class="checkbox"> <label class="form-checkbox"> <input type="checkbox" name="remember" value="1" /> <i class="form-icon"></i> Remember me </label> <label class="pull-right"><a href="https://adoc.pub/forgot">Forgot password?</a></label> </div> </div> <button class="btn btn-primary btn-block" type="submit">Sign In</button> </form> </div> </div> </div> </div>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-177279549-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-177279549-1'); </script> <script src="https://adoc.pub/assets/js/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://adoc.pub/assets/css/jquery-ui.css"> <script> $(function () { $("#document_search").autocomplete({ source: function (request, response) { $.ajax({ url: "https://adoc.pub/suggest", dataType: "json", data: { term: request.term }, success: function (data) { response(data); } }); }, autoFill: true, select: function( event, ui ) { $(this).val(ui.item.value); $(this).parents("form").submit(); } }); }); </script>  <div id="ADOCPUB_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #FFC107; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;"> Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://adoc.pub/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_ADOCPUB_cookie_box();return false;">Agree & close</a> </div> <script> function accept_ADOCPUB_cookie_box() { document.cookie = "ADOCPUB_cookie_box_viewed=1;max-age=15768000;path=/"; hide_ADOCPUB_cookie_box(); } function hide_ADOCPUB_cookie_box() { var cb = document.getElementById('ADOCPUB_cookie_box'); if (cb) { cb.parentElement.removeChild(cb); } } (function () { var ADOCPUB_cookie_box_viewed = (function (name) { var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)")); return matches ? decodeURIComponent(matches[1]) : undefined; })('ADOCPUB_cookie_box_viewed'); if (ADOCPUB_cookie_box_viewed) { hide_ADOCPUB_cookie_box(); } })(); </script>  </body> </html>

Adobe Creative Team. Adobe Dreamweaver CS6 Oficiální výukový kurz

Recommend Documents

Vítejte na mé první webové stránce

po

označuje nadpis nejvyšší důležitosti, s největší velikostí písma. V tomto cvičení změníte text odstavce na prvním řádku na nadpis první úrovně: 1 Přepněte se zpět do textového editoru. 2 Do kódu přidejte následující značky:

Vítejte na mé první webové stránce