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

Transkript

1

2 Adobe Creative Team Adobe Dreamweaver CS6 Oficiální výukový kurz Computer Press Brno 2013

3 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, 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 Autorizovaný překlad z anglického jazyka publikace ADOBE DREAMWEAVER CS6 CLASSROOM IN A BOOK, 1st Edition, , 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 Objednávky knih: eshop@albatrosmedia.cz bezplatná linka ISBN 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 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í

4 OBSAH ZAČÍNÁME 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 PŘIZPŮSOBENÍ PRACOVNÍ PLOCHY 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 3

5 2 ZÁKLADY JAZYKA HTML 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 Úvod do HTML ZÁKLADY JAZYKA CSS 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 CSS TVORBA ROZVRŽENÍ STRÁNKY V této lekci Základy webového designu Práce s miniaturami a architektonickým modelem Vytvoření webové stránky v Dreamweaveru Použití úvodní stránky Prohlédnutí dokončeného souboru Úprava existujícího rozvržení CSS Přidání obrázku do pozadí záhlaví Vložení nových prvků OBSAH

6 Úprava zarovnání elementu Úprava šířky stránky a barvy pozadí Úprava existujícího obsahu a formátování Vložení obrázku jako zástupce Vložení textového zástupce Úprava zápatí Ověření kompatibility prohlížeče VYUŽITÍ KASKÁDOVÝCH STYLŮ V této lekci Náhled hotového souboru Jak pracovat s oknem Styly CSS Práce s písmem Využití obrázků pro grafické efekty Vytvoření nových pravidel CSS Tvorba interaktivní nabídky Úprava chování hypertextových odkazů Vytvoření falešných sloupců Přesunutí pravidel do externí šablony stylů Vytvoření šablony stylů pro jiná média PRÁCE S PŘEDLOHAMI V této lekci Prohlédnutí dokončených souborů Tvorba předlohy z existujícího rozvržení Vkládání upravitelných oblastí Tvorba odvozených stránek Aktualizace předlohy Použití položek knihovny Použití vsuvek na straně serveru ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ 5

7 7 PRÁCE S TEXTEM, SEZNAMY A TABULKAMI V této lekci Prohlédnutí dokončeného souboru Vytvoření a stylování textu Tvorba a stylování tabulek Kontrola pravopisu webových stránek Hledání a nahrazování textu PRÁCE S OBRÁZKY V této lekci Zopakování základů práce s obrázky na webu Prohlédnutí dokončeného souboru Vkládání obrázků Nastavení umístění obrázku pomocí tříd CSS Práce s oknem Vložit Použití Adobe Bridge k vkládání obrázků Vkládání typů souborů, které nejsou určeny pro web Použití inteligentních objektů Photoshopu Kopírování a vkládání obrázků z aplikací Fireworks a Photoshop Vkládání obrázků přetažením myší Optimalizace obrázků v inspektoru Vlastnosti TVORBA NAVIGACE V této lekci Základy hypertextových odkazů Prohlédnutí hotového souboru Tvorba interních odkazů Tvorba obrázkového odkazu Vytvoření externího odkazu Nastavení ových odkazů Cílení na elementy na stránce Vložení navigačních nabídek Spry Kontrola vaší stránky OBSAH

8 10 PŘIDÁNÍ INTERAKTIVITY V této lekci Pár slov o chování v Dreamweaveru Prohlédnutí hotového souboru Využití chování v Dreamweaveru Využití ovládacího prvku Spry skládačka PRÁCE S ANIMACÍ A VIDEEM NA WEBU V této lekci Jak funguje animace a video na webu Prohlédnutí dokončeného souboru Přidání webové animace do stránky Přidání videa na web PRÁCE S FORMULÁŘI V této lekci Prohlédnutí dokončeného souboru Pár slov o formulářích Přidání formuláře na stránku Vkládání textových elementů formuláře Vložení zaškrtávacích polí Tvorba přepínačů Vložení textových oblastí Práce se seznamy Přidání potvrzovacího tlačítka Určení akce formuláře Poslání formulářových dat em Stylování formulářů ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ 7

9 13 PRÁCE S ON-LINE DATY Práce s dynamickým obsahem Prohlédnutí dokončeného souboru Použití HTML a dat XML Výběr serverového modelu Konfigurace lokálního webového serveru Nastavení testovacího serveru Tvorba databázových aplikací TVORBA DYNAMICKÝCH WEBOVÝCH STRÁNEK S DATY V této lekci Tvorba stránek pomocí PHP Vytvoření sady hlavní stránka/stránka s detailem Tvorba stránky s detailem PUBLIKOVÁNÍ NA WEBU V této lekci Definování vzdáleného webu Maskování souborů a složek Dokončení prací na webu Publikování webu na Internetu Synchronizace místního a vzdáleného webu REJSTŘÍK OBSAH

10 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 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. ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ 9

11

12 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). ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ 11

13 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 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 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 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

14 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). ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ 13

15 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

16 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 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 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. ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ 15

17 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 Na adrese 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 Adobe Forums: na stránce forums.adobe.com můžete diskutovat s ostatními uživateli. Adobe TV: na adrese 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 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 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 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 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 Adobe Labs na adrese 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

18 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 Více informací o certifikačních programech Adobe najdete na adrese certification/index.html ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ 17

19 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

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 K2057_Dreamweaver_CS6.indd :14:20

21 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 D E B C I F G H H J K M 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, B panel aplikací, C nabídka rozvržení pracovní plochy, D seznam dokumentů, E panel nástrojů Dokument, F panel nástrojů Kódování, G zobrazení Kód, H zobrazení Návrh, I panel Vložit, J panel Styly CSS, K selektor tagů, L inspektor Vlastnosti, M panel Soubory 20 LEKCE 1 Přizpůsobení pracovní plochy

22 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 ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ 21

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 Přizpůsobení pracovní plochy

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

25 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 Přizpůsobení pracovní plochy

26 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

27 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 Přizpůsobení pracovní plochy

28 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

29 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 Přizpůsobení pracovní plochy

30 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

31 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 Přizpůsobení pracovní plochy

32 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 ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ 31

33 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 Přizpůsobení pracovní plochy

34 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. ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ 33

35 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 Přizpůsobení pracovní plochy

36 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 ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ 35

37 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 Přizpůsobení pracovní plochy

38

39 2 ZÁKLADY JAZYKA HTML žádné 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é zdrojové soubory. 38

40 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

41 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 V základu se HTML skládá ze zhruba 40 LEKCE 2 Základy jazyka HTML

42 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 <p>, <h1> a <table>. 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 Uzavírací značka Kořen Hlavička Tělo <html> <head> <title>základy HTML pro zábavu i užitek</title> </head> <body> <h1>vítejte na mé první webové stránce</h1> <hr /> </body> </html> 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, ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ 41

43 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: <html> <body> Vítejte na mé první webové stránce </body> </html> 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 Prohlížeč 42 LEKCE 2 Základy jazyka HTML

44 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: <p>tvořit webové stránky je zábavné a jednoduché!</p> 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:. ADOBE DREAMWEAVER CS6 OFICIÁLNÍ VÝUKOVÝ KURZ 43