Většina činností webdesignéra se točí kolem textu: vkládání, stylování a změna zobrazení. Textové nástroje Dreamweaveru jsou bohaté a různé. Vkládání nadpisů a textů je jednoduché a přeskakování od jednoho prvku k druhému je rychlé. Vložit také můžete uspořádané a neuspořádané seznamy ke zdůraznění hlavních bodů textu- Zobrazení dat v tabulkách, ať už ručně, nebo importem z externího zdroje není problém. Ať už použijete jakýkoli textový element, Dreamweaver vás poslouchá.
4 Práce s textem V této lekci se naučíte pracovat se záhlavími, odstavci a dalšími textovými prvky a dále se naučíte: Zadávat text v záhlaví a v odstavci Připojovat text z jiného zdroje Vkládat uspořádané a neuspořádané seznamy Vyhledávat a nahrazovat text Vkládat a upravovat tabulky Importovat data do tabulky Učivo v této lekci byste mohli zvládnout asi za 90 minut. Než začnete, přesvědčte se, zda jste si z přiloženého CD na pevný disk zkopírovali obsah složky lekce/lekce04. Při práci na této lekci přepíšete úvodní soubory. Pokud byste je potřebovali obnovit, zkopírujte je znovu z CD. Náhled na zpracovaný soubor Abyste si vytvořili představu o tom, s jakými soubory budete na tomto webovém místě pracovat, nahlédneme pomocí prohlížeče na jednu zpracovanou stránku. 1 Spusťte Adobe Dreamweaver CS3. 2 Je-li to nutné, pomocí F8 otevřte panel Soubory a ze seznamu webového místa vyberte Kniha DW CS3. 3 Na panelu Soubory rozbalte složku lekce04.
98 LEKCE 4 Práce s textem 4 Vyberte soubor info_final.htm a stiskněte F12 (Windows) nebo Option+F12 (MacOS). 5 Prohlédněte si stránku ve svém primárním prohlížeči. Všimněte si různých textových prvků: záhlaví, odstavce, seznamy a tabulky. 6 Prohlížeč zavřete a vraťte se do Dreamweaveru. Jak se zadávají nadpisy a hlavní text Jakmile v Dreamweaveru otevřete dokument, ihned můžete zadávat nebo upravovat text. Vybrat správnou velikost nadpisů a upravovat text je v Dreamweaveru velice jednoduché.
ADOBE DREAMWEAVER CS3 99 Oficiální výukový kurz 1 Poklepáním na lekce04 info.htm v panelu Soubory tento soubor otevřte. Soubor má ještě hodně daleko ke konečné podobě, mísí se v něm zástupný a finální text. 2 Pod hlavním navigačním panelem vyberte výplňový text Výplň pro nadpis a stiskněte Delete (Windows) nebo forward delete (MacOS). Napište větu Řídíme se naší představivostí. Text se implicitně vloží nezformátovaný. Pomocí inspektora Vlastnosti můžete základní formát snadno přiřadit libovolnému textovému bloku např. pomocí značek (tagů) <h1>, <h2> nebo <p>. 3 Není-li zobrazený inspektor Vlastnosti, vyberte Okno Vlastnosti. Zůstal-li kurzor v nově zadaném textu, z roletové nabídky Formát stačí vybrat Nadpis 1. Vzhledem k tomu, že k této webové stránce je připojena externí šablona, textu je přiřazena barva, písmo a velikost písma podle relevantního pravidla CSS všechna tato pravidla jsou vypsána v inspektoru Vlastnosti.
100 LEKCE 4 Práce s textem Kromě seznamu v nabídce Formát můžete pro aplikaci základního formátu také použít klávesovou zkratku. Formát <h1> zadáte jako Ctrl+1 (Windows) nebo Cmd+1 (MacOS), formát <h2> zadáte jako Ctrl+2 (Windows) nebo Cmd+2 (MacOS) atd., až po <h6> včetně. Pro formát odstavce zadejte Ctrl+0 (Windows) nebo Cmd+0 (MacOS). 4 Umístěte kurzor nad nadpis Rovnou za nosem a zadejte text Naše realita je vizionářská. Z nabídky formátů v inspektoru Vlastnosti vyberte Nadpis 2. 5 S kurzorem na konci právě zadaného textu stiskněte Enter (Windows) nebo Return (MacOS). Zadejte následující odstavec: Každý den se snažíme překonat běžné. Sdělte nám své sny a my je přivedeme k životu, mohem živější, než jste si byli schopni představit. Pro nás je vyjímečnost standardem, ať už děláme cokoliv.
ADOBE DREAMWEAVER CS3 101 Oficiální výukový kurz Poznámka: Možná jste si všimli, že Dreamweaver automaticky přidal za značku <h2> značku <p>. Tato úprava reflektuje obvyklou strukturu textu na webové stránce a je nastavena volitelně v Předvolbách. Pokud dáte přednost vložení duplikátu značky nadpisu místo značky odstavce, vyberte Upravit Předvolby a v kategorii Všeobecné zrušte zatržení ve čtverečku u textu Po nadpisu přepnout na prostý odstavec. Jakmile jste zadali text, můžete jej upravovat jako v každém jiném lepším textovém editoru. 6 V odstavci, který jste právě zadali, vyberte druhou větu (včetně mezery za tečkou): Pro nás je vyjímečnost standardem, ať už děláme cokoliv. Větu přetáhněte na konec odstavce za text... než jste si byli schopni představit. Stiskněte levou šipku, abyste posunuli kurzor na začátek přesunutého textu a stiskněte mezerník. Dosud jste pracovali s jedinou značkou, a to buď <h1>, <h2>, nebo <p>. Rozdělíteli odstavec na dvě části, Dreamweaver automaticky vytvoří další značku. 7 Umístěte kurzor pod nadpis Rovnou za nosem před druhou větu, která začíná Nicméně, členové dev / design a stiskněte Enter (Windows) nebo Return (MacOS).
102 LEKCE 4 Práce s textem 8 Zadejte Soubor Uložit. V nabídce Dreamweaveru jsou k dispozici rovněž standardní nástroje k úpravě vyjmout, kopírovat a vložit. Pokud byste chtěli rozdělit jeden řádek na dva v rámci jedné značky, stiskněte Shift+Enter (Windows) nebo Shift+Return (MacOS); touto klávesovou zkratkou vsunete konec řádku, resp. značku <br>. Dáváte-li přednost nabídce, vyberte Vložit HTML Speciální znaky Konec řádku. Import externího textu I když podpora zpracování textů v Dreamweaveru je na vysoké úrovni, návrháři občas potřebují vložit nějaký text vytvořený externími aplikacemi, např. Microsoft Word. V Dreamweaveru existuje řada různých možností pro vkládání textu z vnějšího zdroje zkopíruj a přidej, přetáhni anebo prostřednictvím odkazů. V tomto cvičení budete vkládat dokument vytvořený ve Wordu tak, že jej přetáhnete na stránku a vyberete správné volby. 1 Je-li to nutné, poklepáním na jméno souboru v panelu Soubory znovu otevřte soubor info.htm zpracovávaný v předchozím cvičení. 2 Ve sloupci vpravo na stránce vyberte odstavec se zástupným textem Výplň pro odstavec a stiskněte Delete. Vkládaný text se přidá do horní části pravého sloupce.
ADOBE DREAMWEAVER CS3 103 Oficiální výukový kurz 3 V panelu Soubory rozbalte složku lekce04 zdroje. 4 Soubor info_text.doc přetáhněte z panelu Soubory a vložte jej do webové stránky na pozici kurzoru. Když po přetáhnutí tlačítko myši uvolníte, Dreamweaver rozpozná, že soubor je wordový dokument a otevře dialogové okno Vložit dokument. Naleznete v něm řadu možností, jak zformátovat vkládaný text počínaje základním formátem až po plné formátování, navíc s možností vložení odkazu na externí dokument. Poznámka: Výše popsaný krok funguje pouze ve Windows. Uživatelé Macintoshe musí wordový dokument otevřít a celý obsah si zkopírovat do schránky. Pak musí vybrat Upravit Vložit jinak a zatrhnout volbu Text se strukturou se základním formátováním (tučné, kurzíva). Pak odstraňte zatržítko z volby Vymazat mezery odstavců z Wordu a klepněte na OK.
104 LEKCE 4 Práce s textem 5 V dialogovém okně Vložit dokument vyberte volbu Vložit obsah a pak Text se strukturou a základním formátováním (tučné, kurzíva). Pak klepněte na OK. Volba Text se strukturou a základním formátováním je vybrána proto, že současná webová stránka má aplikované styly; kdybyste vybrali volbu Text se strukturou s úplným formátováním, vložily by se i wordové styly, které byste pak museli odstranit. 6 Vyberte Soubor Uložit. Dreamweaver ponechá všechny konce odstavců společně s kurzívou napsaným textem esprit de corps; umístíte-li kurzor do tohoto textu, zjistíte, že Selektor značek indikuje správnou značku HTML <em>, resp. emphasis (zdůraznění). Při vkládání
ADOBE DREAMWEAVER CS3 105 Oficiální výukový kurz externích textů se kurzíva automaticky převádí na značky <em> a tučné písmo na značky <strong>. Vytváření uspořádaných seznamů a neuspořádaných seznamů Dreamweaver podporuje uspořádané (číslované) seznamy a seznamy neuspořádané (s odrážkami). Každá položka seznamu je na samostatném řádku a je-li seznam uspořádaný, označení (např. čísly) jeho položek je automatické. Seznamy neuspořádané mohou využívat buď vestavěné odrážky čtvereček nebo puntík nebo některý speciální symbol. V tomto cvičení budeme pracovat se seznamy obou typů. Poznámka: Číslovaný seznam se v HTML značí značkou <ol> jako ordered list (uspořádaný seznam) a seznamy s odrážkami se označují značkou <ul> jako unordered list (neuspořádaný seznam). 1 Je-li to nutné, poklepáním na jméno souboru v panelu Soubory znovu otevřte soubor info.htm zpracovávaný v předchozím cvičení. 2 Vyberte čtyři odstavce obsahující samostatné řádky, které začínají textem Důkladné předchozí plánování a končí Reálná návratnost investice. 3 V inspektoru Vlastnosti klepněte na tlačítko Uspořádaný seznam ( ). Vyberte odstavce, z nichž chcete udělat seznam Pro očíslovaný seznam vyberte Uspořádaný seznam 4 Umístěte kurzor na třetí položku, Kreativní myšlení. Ze Selektoru značek vyberte <li>, stisknutím Ctrl+X (Windows) nebo Cmd+X (MacOS) odstraníte vybranou položku.
106 LEKCE 4 Práce s textem Anebo můžete z nabídky vybrat Upravit Vyjmout. Všimněte si, že seznam je automaticky přečíslován. 5 Šipkou nahoru posuňte kurzor před druhou položku a stisknutím Ctrl+V (Windows) nebo Cmd+V (MacOS) vložte obsah schránky. Změna jednoho typu seznamu na jiný je velmi jednoduchá. 6 Ze selektoru značek vyberte <ol>. V inspektoru Vlastnosti stiskněte tlačítko Neuspořádaný seznam ( ). K externí šabloně připojené k této stránce, bylo připojeno pravidlo CSS, které zvětšuje výšku řádku položek v neuspořádaném seznamu. V dalším kroku k tomuto pravidlu přidáme další vlastnost, abychom změnili symbol odrážky.
ADOBE DREAMWEAVER CS3 107 Oficiální výukový kurz 7 Umístěte kurzor na libovolnou položku v seznamu s odrážkami a vyberte Okno Styly CSS. Na panelu Styly CSS klepněte na Současný, abyste se přepnuli do současného režimu. Na panelu Pravidla vyberte ul li a klepněte na tlačítko Upravit styl ( ). Jakmile se otevře dialogové okno Definice pravidla pro ul li v hlavni.css, v seznamu Kategorie klepněte na položku Seznam. Z nabídky Typ vyberte volbu čtverec a klepněte na OK. 8 Změny v souborech HTML i CSS uložte pomocí Vyberte soubor Uložit vše Hledání a nahrazování textu Funkce hledání a nahrazování textu je jednou z nejsilnějších vlastností Dreamweaveru. Návrháři mohou zadat libovolně dlouhý text počínaje výběrem v běžném dokumentu až po celé webové místo. Můžete hledat jenom text vybraný na stránce nebo jenom podpůrné značky nebo obojí současně. Pokročilí uživatelé mohou využívat silnější algoritmy pro sofistikované vyhledávání a nahrazování vzorků zadaných jako tzv. regulární výrazy. V tomto cvičení se pro začátek seznámíte s vyhledáváním a nahrazováním části samostatného textu v daném dokumentu. 1 Je-li to nutné, poklepáním na jméno souboru v panelu Soubory znovu otevřte soubor info.htm zpracovávaný v předchozím cvičení.
108 LEKCE 4 Práce s textem 2 Vyberte Upravit Hledat a nahradit. Jakmile se otevře dialogové okno Hledat a nahradit, v roletové nabídce Hledat v zvolte volbu Současný dokument a v nabídce Hledat vyberte volbu Text. Bylo by dobré, kdybyste se chvilku mohli zdržet u voleb, jež jsou uvedeny v seznamech Hledat v a Hledat. Nabídka Hledat v definuje rozsah hledání; možnostmi jsou vybraný text, současný dokument, otevřené dokumenty, uvedená složka, dokumenty vybrané v panelu Soubory a současné webové místo. Nabídka Hledat určuje typ hledání: zdrojový kód, text v pohledu Návrh, text v kódu a určité značky. V tomto cvičení budete hledat text dev/design a nahradíte jej textem dev / design. Nahrazující text pro dané webové místo má po obou stranách lomítka mezeru a replikuje se jím vzhled a vyznění loga webového místa. 3 V poli Hledat v zadejte text dev/design a klepněte na Hledat další. Označí se první výskyt zadaného textu. Pomocí volby Hledat další si můžete prohlédnout všechny výskyty a rozhodnout se, zda se má provést náhrada.
4 V poli Nahradit zadejte text dev / design a klepněte na Nahradit. ADOBE DREAMWEAVER CS3 109 Oficiální výukový kurz Nahradí se první výskyt hledaného textu a ihned se vyhledá další výskyt. Všechny výskyty současně můžete vidět, když zadáte Najít vše. 5 V dialogovém okně Hledat a nahradit klepněte na Najít vše. Jakmile se v panelu Výsledky vypíší všechny výskyty v kategorii Hledat v, poklepte na třetí položku; na stránce se vybere příslušný text. Poznámka: Na rozdíl od většiny operací, v nichž se pracuje s dialogovým oknem, lze s dialogovým oknem Hledat a nahradit a s dokumentem pracovat současně. Jakmile si ověříte, že se texty nahrazují správně, můžete použít tlačítko Nahradit vše, čímž se najdou a nahradí všechny výskyty v zadaném rozsahu. 6 Klepněte na zelenou šipku po straně panelu Prohledat. V dialogovém okně klepněte na Nahradit vše.
110 LEKCE 4 Práce s textem Po dokončení operace v okně Hledat a nahradit Dreamweaver automaticky zavře dialogové okno. Výsledky operace se zobrazí na spodním okraji panelu Výsledky. V tomto cvičení byste měli vidět text Hotovo, nalezeno 2 položek, nahrazeno 2 v aktuálním dokumentu. Zelená tečka u položky v panelu Výsledky značí, že výskyt byl úspěšně nahrazen. 7 Z nabídky voleb na panelu výsledky vyberte Zavřít skupinu panelů Uložit. Vytváření tabulek Tabulky jsou efektivním nástrojem pro prezentaci strukturovaných dat uspořádaných do řádků a sloupců. V Dreamweaveru jsou k dispozici tabulkové objekty, které se snadno vkládají a stejně snadno upravují. Obě tyto činnosti se provádějí pomocí inspektora Vlastnosti v pohledu Návrh. 1 Je-li to nutné, poklepáním na jméno souboru v panelu Soubory znovu otevřte soubor info.htm zpracovávaný v předchozím cvičení. 2 Umístěte kurzor na řádek pod odstavec ve sloupci vpravo dole, který začíná Týmy společnosti dev / design přináší čerstvé nápady. 3 Z kategorie Běžné v panelu Vložit vyberte Tabulku ( ).
ADOBE DREAMWEAVER CS3 111 Oficiální výukový kurz 4 Jakmile se otevře dialogové okno Tabulka, v poli Řádků zadejte 4. Stiskněte Tab a v poli Sloupců zadejte 2. Do pole Šířka tabulky zadejte 100; stiskněte Tab a z roletové nabídky Šířka tabulky vyberte volbu procent. V poli Tloušťka okraje zadejte 0 a stiskněte Tab. Nakonec v oblasti Záhlaví vyberte Nahoře a klepněte na OK. Tabulka se vloží tam, kde je kurzor a je možno zadávat data nebo tabulku jemně doladit. Vzhledem k tomu, že byla zadána šířka tabulky 100 %, tabulka zaplní celý sloupec. Poznámka: Pokud nevidíte hranice jednotlivých políček v tabulce, v hlavním dokumentu v Zobrazení Vizuální pomůcky zatrhněte Okraje tabulky. 5 V prvním políčku tabulky (horní řádek, levý sloupec) zadejte Tým. Stiskněte Tab a v pravém sloupci prvního řádku zadejte Zkušenost. Stiskněte znovu Tab a kurzor se přesune na druhý řádek.
112 LEKCE 4 Práce s textem Vzhledem k tomu, že první řádek je označen jako záhlaví, položky jsou automaticky vysazené tučně a jsou zarovnané na střed; příležitost nastavit styl dostanete za chvilku. Po tabulce se nejsnáze pohybujeme pomocí klávesy Tab; stisknutím Tab se přesunete o jedno políčka doprava. Je-li kurzor na konci řádku, dalším stisknutím klávesy Tab se přesune na začátek nového řádku. Když stisknete Shift+Tab, vrátíte se v tabulce o jedno políčko zpět. 6 Do tabulky zadejte následující text: Grafika 18 let Interaktivita 27 let Copywriting 23 let Počet řádků a/nebo sloupců většinou potřebujeme později změnit. Můžeme to provést různými způsoby; ukážeme si, jak jednoduše přidáme jeden řádek. 7 Ze Selektoru značek vyberte <table>. V inspektoru Vlastnosti změňte pole Řádky ze 4 na 5 a stiskněte Tab.
ADOBE DREAMWEAVER CS3 113 Oficiální výukový kurz Na konci tabulky přibude jeden řádek. Pokud chcete zvětšit počet sloupců, nový sloupec se přidá napravo. Chcete-li si sami určit, kam se mají přidat nové řádky a sloupce, umístěte kurzor do políčka na požadované místo a vyberte Změnit Tabulka Vložit řádky nebo sloupce. 8 V novém řádku zadejte Management a stiskněte Tab. V posledním políčku tabulky zadejte 32 let. V souladu se standardními postupy v HTML používá Dreamweaver pro všechny navržené buňky záhlaví značky <th> (anglicky table header, tedy hlavička tabulky), což zjednodušuje práci se styly. 9 Je-li to nutné, vyberte Okno Styly CSS. Z panelu Styly CSS vyberte Nové pravidlo CSS ( ). V dialogovém okně Nové pravidlo CSS vyberte Typ selektoru: Tag a do pole Tag zadejte th. Přesvědčte se, zda volba v Definovat je nastavena na hlavni.css, a klepněte na tlačítko OK. 10 Jakmile se objeví dialogové okno Definice pravidla CSS pro th v hlavni.css, v seznamu Kategorie klepněte na Blok. V nabídce Zarovnání textu vyberte vlevo a klepněte na tlačítko OK. Prohlížeče implicitně (a také Dreamweaver) používají značky <th> se zarovnáním na střed a s tučným písmem. Novým pravidlem se zarovnání změní na zarovnání vlevo, tučný řez písma však zůstává.
114 LEKCE 4 Práce s textem 11 Vyberte Soubor Uložit a stisknutím F12 (Windows) nebo Option+F12 (MacOS) si zobrazte náhled pomocí primárního prohlížeče. Poté prohlížeč zavřete, vraťte se do Dreamweaveru a vyberte Soubor Zavřít. Struktura tabulky je v náhledu prohlížeče zcela zjevná, i když její obrysy nejsou vidět. Import tabulkových dat Kromě zpracování textů z textových programů Dreamweaver umí vkládat do tabulek data z tabulkových procesorů a z databázových programů. Data, která mají být importována do Dreamweaveru, musí mít jako oddělovač tabulátor nebo čárku. Po vložení do tabulky Dreamweaveru mohou být data upravena nebo se na ně mohou použít styly.
1 Poklepáním v panelu Soubory otevřte soubor lide_maya.htm. ADOBE DREAMWEAVER CS3 115 Oficiální výukový kurz 2 Kurzor umístěte do pravého sloupce na řádku pod nadpis Nekonvenční resume. 3 Vyberte Soubor Importovat Tabulková data. V okně Importovat data tabulky klepněte na tlačítko Procházet. Jakmile se otevře dialogové okno, nasměrujte se na lekce04 zdroje a vyberte soubor interview.csv; výběr potvrďte klepnutím na Otevřít. Dialogové okno pro otvírání se zavře.
116 LEKCE 4 Práce s textem Poznámka: V souborech s příponou.csv hodnoty většinou nebývají oddělené čárkou, mohou mít různé oddělovače. V tomto případě jsou data na řádku oddělena tabulátory. 4 V seznamu oddělovač vyberte Tabulátor. Vyberte Šířka tabulky: Nastavit na, v sousedním políčku zadejte 100 a z nabídky vyberte Procenta. Do políčka Okraj zadejte 0; pak klepněte na OK. Dreamweaver vloží na stránku tabulku obsahující data, jež vyžadují ještě úpravu. první sloupec je poněkud úzký, rozšíříme jej tak, aby se všechny položky vešly na jeden řádek. 5 Kurzor umístěte do prvního políčka vložené tabulky, které obsahuje text Umělecké vzory. Je-li to nutné, zobrazte inspektora Vlastnosti pomocí Okno Vlastnosti. V políčku Š (jako šířka) zadejte 35 % a stiskněte Tab. Šířka sloupců je dána šířkou horního políčka; šířku můžete změnit také potáhnutím hranice sloupce jinam. Nyní budeme na všechna políčka aplikovat jeden styl.
ADOBE DREAMWEAVER CS3 117 Oficiální výukový kurz 6 Potáhnutím myší od horního políčka ke spodnímu vyberte celý sloupec. Z roletové nabídky Styl v inspektoru Vlastnosti vyberte interview-hlavicka. Volbu potvrďte klepnutím kamkoli na stránku. Text bude tučný, zarovnaný vpravo a vertikálně zarovnaný nahoru. 7 Vyberte Soubor Uložit a stiskněte F12 (Windows) nebo Option+F12 (MacOS), čímž si stránku zobrazíte v primárním prohlížeči. Pak prohlížeč zavřete, vraťte se do Dreamweaveru a vyberte Soubor Zavřít. Gratulujeme, právě jste dokončili tuto lekci!
Opakování Otázky 1 Je pravda, že každý nadpis a odstavec musí být upraven samostatně, aby v Dreamweaveru vypadal jinak? 2 Co se stane, když přetáhnete dokument Microsoft Wordu do stránky v Dreamweaveru v systému Windows? 3 Je pravda, že přidáte-li na stránku uspořádaný seznam, jediným způsobem, jak jej změnit na seznam neuspořádaný (s odrážkami), je vyjmout jej a vložit jej znovu? 4 Jaké jsou v Dreamweaveru k dispozici operace pro vyhledávání a nahrazování? 5 Jakým způsobem můžeme v tabulce změnit počet řádků a počet sloupců? Odpovědi 1 Není to pravda. Pomocí inspektora Vlastnosti můžete nadpisům přiřazovat značky <h1> až <h6> a odstavcům značky <p>. 2 Dreamweaver otevře dialogové okno Vložit dokument s celou řadou voleb pro vložení tohoto textu. Vložení může proběhnout mnoha různými způsoby od jednoduchého až k plně formátovanému nebo je možno vložit odkaz na dokument. 3 Není to pravda. Číslovaný seznam změníme na seznam s odrážkami tak, že v Selektoru značek vybereme značku <ol> a v Selektoru značek klepneme na Neuspořádaný seznam. 4 Dreamweaver umí hledat text v pohledu Návrh, v odpovídajícím kódu nebo v obou. Rozsah hledání může být od vybraného bloku textu přes běžnou stránku nebo složku až po celé webové místo. 5 Počet řádků nebo sloupců v tabulce v Dreamweaveru můžeme změnit buď tak, že a) vybereme tabulku a v inspektoru Vlastnosti změníme hodnoty v polích Řádky nebo Sloupce, nebo b) umístíme kurzor vedle řádku nebo sloupce, kam chceme vkládat, a vybereme Změnit Tabulka Vložit řádek nebo Vložit sloupec.