Poznámka:

Do aplikace Adobe Muse již nejsou přidávány žádné další funkce a 26. března 2020 bude její podpora ukončena. Podrobnější informace a možnosti asistence naleznete na stránce Ukončení životnosti aplikace Adobe Muse.

Použití vloženého HTML k zobrazení blogu na webu Muse

Vložený HTML kód odkazuje na zdrojový kód generovaný webem třetí strany, například Google, YouTube, Flickr nebo Picasa. Můžete si vytvořit účet v těchto webech, přihlásit se, a poté zkopírovat kód pro vložení z jejich webu a přidat jej do svého webu.

Když do stránky vložíte vložený HTML, je to jako byste do stránky svého webu vložili okno zobrazující obsah webu třetí strany.

Vložený HTML kód představuje vynikající způsob rychlého a jednoduchého přidávání komplexních informací (například map, předpovědí počasí, vývoje na akciových trzích) a bohatých médií (jako jsou digitální videa, prezentace a zvukové soubory). Tato strategie má také tu výhodu, že vám umožňuje používat web třetí strany jako hostující službu a rozhraní pro odesílání. Pokud si například vytvoříte bezplatný účet u YouTube, můžete vytvořit svůj vlastní kanál YouTube a odeslat video obsah týkající se vašeho webu. YouTube nabízí webovou stránku, která zjednodušuje proces odesílání a hostuje soubory videa na svém webu. Když chcete aktualizovat svůj web, přidejte další videa do svého kanálu YouTube, zkopírujte kód pro vložení a vložte jej do stránky svého webu Muse, na kterou chcete přidat nová videa.

V této kapitole budete kopírovat zdrojový kód ze služby Tumblr. Jedná se o bezplatnou online službu, která vyžaduje vytvoření účtu a přihlášení, a poté můžete vyvěšovat položky blogů, které budou veřejně dostupné. Používání blogů je velice jednoduché, a proto se jejich používání hodí, když chcete někomu bez technických znalostí umožnit jednoduše aktualizovat svůj vlastní web. Většina blogových webů obsahuje online rozhraní, takže se můžete pomocí libovolného prohlížeče přihlásit do svého účtu a bez jakékoli znalosti HTML nebo dalšího software vyvěšovat nové položky.

Poznámka: Návštěvníci prohlížející váš web nemusejí mít účet služby Tumblr, aby si mohli prohlížet blog, který jste vložili na svoji stránku. Tento účet potřebujete pouze vy při navrhování webu, abyste mohli vytvořit blog šitý na míru a generovat kód pro vkládání, který si přidáte na svůj web.

  1. Pro účely této výukové lekce není nutné vytvářet účet Tumblr. Stačí zkopírovat následující kód vygenerovaný webem Tumblr po vytvoření bezplatného blogu:

<iframe src="http://katiescafe.tumblr.com/" width="910" height="1400" marginwidth="0" marginheight="0" frameborder="no" scrolling="yes" style="border:0px;"></iframe>

  1. V zobrazení plánu si dvojitým kliknutím na miniaturu událostí stránky otevřete stránku a upravte ji v zobrazení návrhu.
  2. Klikněte doprostřed prázdné stránky a jedním z následujících způsobů vložte kód HTML:
  • Vyberte možnost nabídky Úpravy > Vložit nebo pomocí klávesové zkratky (Command+V v systému Mac nebo Control+V v systému Windows) vložte kód přímo na stránku.
  • Vyberte možnost nabídky Objekt > Vložit HTML. Klikněte do pole v okně Upravit HTML a vložte obsah. Kliknutím na tlačítko OK zavřete okno Upravit HTML.

Poznámka: Ve většině případů aplikace Muse kód HTML rozpozná a automaticky jej vloží do stránky. Pokud se vám ale na stránce zobrazí kód místo obsahu z webu třetí strany, použijte volbu Objekt > Vložit HTML.

Po vložení kódu HTML uvidíte modrý ohraničovací rámeček s táhly obklopující příspěvky blogu zadané v rámci účtu Tumblr pro Katie's Cafe.

  1. Pomocí nástroje pro výběr přetáhněte táhla a upravte velikost obsahu blogu tak, aby zabíral přibližně 80% šířky stránky. Vystřeďte obsah blogu na stránce tak, aby byla grafika na dlaždicích pozadí viditelná na levé i pravé straně. Modré měřící obdélníky zobrazují vzdálenost od ostatních objektů. Krátce se zobrazí červené vodítko zarovnání označující, kdy je vybraný objekt svisle vystředěn.
Změňte velikost a umístění stránky
Změna velikosti a umístění blogu Tumblr na stránce událostí.

To je celý postup vkládání HTML do stránek Muse. Pokud byste chtěli kód HTML upravit, můžete kliknout pravým tlačítkem na vložený element HTML a v zobrazené kontextové nabídce vybrat možnost Upravit HTML. Otevře se okno Upravit HTML s kódem, který jste předtím vložili.

Nyní si shrneme změny, které jste provedli na stránce událostí:

  1. Pomocí možnosti nabídky Soubor > Náhled stránky v prohlížeči si zobrazte stránku událostí v novém oknu prohlížeče.

Všimněte si, že při posouvání seznamu položek blogu se záhlaví zobrazuje přes ostatní obsah stránky. Toto chování je způsobeno tím, že stránka událostí používá vzorovou stránku Popředí a obsah záhlaví této vzorové stránky je nastaven tak, aby se zobrazoval v popředí.

Stránka událostí je nyní dokončena. V následující části se naučíte vkládat vložený obsah HTML do widgetu a ovládat, jak se bude obsah třetí strany zobrazovat v závislosti na interakcích uživatele.

Vložení videa na web Muse

Kontejner cílové oblasti je aktuálně vyplněn šedou barvou výplně. Do kontejneru cílové oblasti ale můžete vkládat různé druhy obsahu, například různé soubory obrazů, vyplněné obdélníky, text nebo vložený HTML zkopírovaný z jiného webu.

V této ukázce vložíte vložený HTML vygenerovaný službou YouTube.

Představte si, že jste na webu YouTube.com a chcete si zobrazit video, které jste odeslali prostřednictvím svého účtu. Pokud kliknete na tlačítko Sdílet a následně na tlačítko Vložit, můžete zkopírovat zobrazený kód pro dané video.

Vložení videa
Po výběru požadované velikosti videa zkopírujte kód pro vložení vygenerovaný službou YouTube.

Pro účely tohoto videa byl kód pro vložení videa Katie's Cafe již zkopírován, takže nemusíte přecházet na stránky YouTube. Zkopírujte a do schránky uložte následující kód pro vložení:

<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/krqjM5GmqzQ" frameborder="0" allowfullscreen></iframe>

Výše uvedený kód používá k obklopení odkazu na soubor videa vyvěšeného na YouTube tagy iFrame. iFrame je HTML kontejner umožňující zobrazit obsah přidaný do webové stránky uvnitř „okna“.

Po zkopírování výše uvedeného kódu se vraťte do aplikace Muse.

  1. Nástrojem pro výběr klikněte na šedý okraj stránky tak, aby indikátor výběru v levém horním rohu zobrazoval slovo Stránka. To znamená, že je vybraná celá stránka.
  2. Klikněte na větší kontejner cílové oblasti s šedou barvou výplně. Indikátor výběru v levém horním rohu zobrazí slovo: Kompozice. Klikněte na šedý kontejner cílové oblasti a indikátor výběru zobrazí slovo: Kontejner. Klikněte na něho znovu (zobrazí slovo Cílová oblast) a poté ještě jednou. Nyní indikátor výběru zobrazuje slovo: Rámeček obrazu. Stisknutím klávesy Backspace (Windows) nebo Delete (Mac) odstraňte rámeček obrazu z kontejneru cílové oblasti.

Vnitřní kontejner cílové oblasti je stále vybraný a dalším krokem tedy bude vložení dříve zkopírovaného kódu HTML do kontejneru cílové oblasti.

Poznámka: Podobně jako při vkládání obrazu úvodní obrazovky do kontejneru spouštěcí oblasti může být vkládání kódu do kontejneru cílové oblasti poněkud obtížné, protože cílem je vložit kód DOVNITŘ kontejneru cílové oblasti widgetu. Může se stát (záleží na aktuálně vybraném elementu), že dojde k vložení kódu videa mimo widget, takže dojde k jeho vložení přímo na stránku. Takže postupujte opatrně... když vyzkoušíte světelný box kliknutím na tlačítko Náhled a video se zobrazí ještě před kliknutím na obraz úvodní obrazovky, znamená to, že kód videa nebyl vložen do kontejneru a proto se zobrazí okamžitě. Video by se mělo zobrazit až po kliknutí na obraz úvodní obrazovky.

Pomocí následujících kroků vložte kód videa do kontejneru cílové oblasti (když indikátor výběru zobrazuje slovo: Kontejner).

  1. Vyberte možnost nabídky Objekt > Vložit HTML. V zobrazeném okně vyberte výchozí zástupný text a stisknutím klávesy Delete (Mac) nebo Backspace (Windows) jej odstraňte. Pomocí příkazu nabídky Úpravy > Vložit vložte zkopírovaný kód z YouTube do pole Kód HTML. Kliknutím na tlačítko OK zavřete okno Kód HTML.

Poznámka: V mnoha případech aplikace Muse automaticky detekuje vložení kódu HTML a rozezná, že se jedná o HTML a nikoli o obyčejný text. Takže místo použití příkazu nabídky Objekt > Vložit HTML a otevření okna HTML můžete kliknout pravým tlačítkem (nebo kliknout se stisknutou klávesou Control) když je vybraný vnitřní kontejner cílové oblasti a použít příkaz kontextové nabídky Vložit. (Nebo zvolte Úpravy > Vložit nebo pomocí klávesové zkratky vložte zdrojový kód do kontejneru cílové oblasti). Aplikace Muse nabízí řadu metod sloužících k dosažení stejného cíle vložení kódu videa do kontejneru cílové oblasti.

Po vložení kódu do kontejneru cílové oblasti se zobrazí první rámeček videa (šálek kávy). Tento první rámeček videa znamená, že se vám podařilo úspěšně vložit kód HTML. Při upravování stránky v zobrazení návrhu se video nebude přehrávat. Přehraje se až po kliknutí na tlačítko Náhled na ovládacím panelu nebo po zobrazení náhledu stránky v prohlížeči.

  1. Pomocí nástroje pro výběr můžete v případě potřeby změnit velikost kontejneru cílové oblasti, aby jeho rozměry odpovídaly velikosti vloženého obsahu HTML videa. Šířka by měla být přibližně 670 obrazových bodů a výška by měla být kolem 415 obrazových bodů. Když je vybrané video, zobrazuje indikátor výběru slovo Položka HTML.
  2. Když je vybraný kontejner cílové oblasti, můžete jedním stisknutím klávesy Escape vybrat vnější kontejner. Nebo můžete kliknutím mimo zrušit výběr widgetu Zobrazení světelného boxu a poté na něho dvakrát kliknout: jedním kliknutím dojde k výběru kompozice a druhým k výběru většího kontejneru. Pomocí nástroje pro výběr přetáhněte táhla kontejneru tak, aby byl kontejner cílové oblasti uvnitř vystředěn. Upravte rozměry kontejneru na šířku 710 obrazových bodů a výšku 460 obrazových bodů.
  3. Pomocí nabídky Výplň nastavte barvu výplně kontejneru na hnědou (#63301B) a nastavte krytí barvy výplně na 100.
Nabídka Výplň
Pomocí nabídky Výplň nastavte barvu výplně a krytí kontejneru.

  1. Vyberte textový rámeček ve spodní části kontejneru a stisknutím klávesy Delete (Mac) nebo Backspace (Windows) jej odstraňte. Textový rámeček může být vyplněn popiskem týkajícím se obsahu cílové oblasti, ale v tomto projektu jej nepoužijeme.
  2. Vyberte rámeček Zavřít (s X) v pravém horním rohu kontejneru. Kliknutím do rámečku Zavřít vyberte jeho popis a odstraňte jej. Pomocí nabídky Výplň nastavte barvu výplně na Žádná. Klikněte na ikonu složky vedle části Obraz nabídky Výplň a zvolte soubor s názvem icon-close.png. Pomocí nástroje pro výběr změňte velikost rámečku Zavřít tak, aby byl zobrazen celý obraz ikony zavření.
  3. Pomocí nástroje pro výběr upravte umístění jak kontejneru cílové oblasti, tak kontejneru spouštěcí oblasti a přesuňte je do umístění, kde chcete, aby se zobrazovaly na stránce.
  4. Když je vybraná možnost Kompozice, tak kliknutím na tlačítko modré šipky otevřete panel Volby. V této ukázce použijte následující nastavení:
    • Umístění: Světelný box
    • Přechod: Zeslabování
    • Přehrát automaticky: Vypnuto
    • Přemístit: Vypnuto
    • Na začátku skrýt vše: Vypnuto
    • Zapnout posouvání: Zapnuto
    • Spouštěcí oblasti nahoře: Vypnuto
    • Tlačítko Zavřít: Zapnuto
    • Při úpravách zobrazit části světelného boxu: Zapnuto
    • V režimu náhledu zobrazit vše: Zapnuto
Volby kompozice
Aktualizujte nastavení v nabídce Volby ovlivňující chování widgetu.

Kliknutím někde mimo nabídku Volby ji zavřete. Widget je nyní nakonfigurovaný a připravený k vyzkoušení.

Dříve jste se v tomto výukovém programu naučili, jak vkládat kód HTML do stránek pro přidání blogu Tumblr na stránku událostí. Také jste viděli, jak vložit vnořený kód HTML do widgetu Kompozice světelného boxu za účelem zobrazení videa služby YouTube v okně světelného boxu, když uživatel klikne na tlačítko. V této části se seznámíte s dalším typem vnořeného kódu HTML, který poskytuje web Google Maps. Postupujte takto:

  1. Pokud je již stránka návštěv otevřena v pohledu návrhu, klikněte na položku Plán a pak dvakrát klikněte na miniaturu stránky návštěv, abyste ji mohli upravovat.

Tento zdrojový kód byl zkopírován z webu maps.google.com. Můžete vytvořit vlastní mapu pro jednu adresu (nebo v tomto případě pro více míst). Jedná se o bezplatnou službu – stačí zadat adresu (nebo adresy) a kliknout na tlačítko Vytvořit mapu.

Klikněte na tlačítko Vytvořit mapu
Kliknutím na tlačítko Vytvořit mapu vygenerujete mapu na základě zadané adresy.

Po vytvoření mapy vám rozhraní Google Maps umožní zadat název a popis. Pak můžete kliknutím na tlačítko Odkaz získat přístup ke kódu. Vyberte kód HTML uvedený v poli s popiskem „Paste HTML to embed in website“ a jste připraveni vrátit se do aplikace Muse a vložit tento kód HTML na stránku.

Přidejte kód HTML na svoji stránku
Pomocí rozhraní Google Maps vygenerujte kód HTML pro mapu.

Pro účely tohoto výukového programu není nutné, abyste sami vytvářeli novou mapu. Pokud byste si to chtěli vyzkoušet, zadejte libovolnou adresu, vytvořte mapu a zkopírujte kód. Pokud však chcete jenom otestovat, jak to funguje, můžete pracovat s předem vygenerovaným kódem HTML.

  1. Zkopírujte následující zdrojový kód:

<iframe width="887" height="298" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=218302982680021663941.00049fcd9cf93276f540e&amp;ll=37.7737,-122.43782&amp;spn=0.067844,0.098877&amp;z=12&amp;output=embed"> </iframe>

  1. Vložte tento kód nahoru na stránku návštěv. Pomocí nástroje Výběr umístěte vložený kód HTML svisle do středu stránky do blízkosti horního okraje tak, aby přibližně čtvrtina mapy překrývala oblast záhlaví. Zkontrolujte, zda jste ponechali místo mezi mapou a grafikou květiny pod ní, aby bylo možné zadat textový popis.
  2. Pomocí nástroje Text přetáhněte textový rámeček pod vloženou mapu. Zkopírujte následující text a vložte jej do textového rámečku:

I když každá z našich pekáren ztělesňuje jedinečné atributy své čtvrti, jsou všechny provozovny vzájemně provázány pečlivou pozorností věnovanou ze strany Katie jednotlivým detailům, obsluze a láskou k dobrému jídlu.

  1. Na panelu Text použijte u textu styl pomocí následujícího nastavení formátování:
    • Písmo: Droid Serif (nebo libovolné písmo serif)
    • Velikost písma: 14
    • Barva písma: č. 222222
    • Zarovnání: Vlevo
    • Proklad: 120 %

Po přidání popisu k mapě je stránka návštěv nyní dokončena.

  1. Výběrem možnosti Soubor > Náhled stránky v prohlížeči zobrazte, jak se stránka zobrazí v prohlížeči.
Webová stránka s mapou
Dokončená stránka návštěv obsahuje plně funkční mapu Google.

Všimněte si, že vložená HTML mapa Google je interaktivní. Kliknutím na šipky se můžete v okně mapy pohybovat a můžete ji i přiblížit a oddálit kliknutím na tlačítka + a –.

Návrh webu je nyní dokončen pro všechny stránky. Ve zbývajících částech tohoto výukového programu zjistíte, jak přidat vylepšení a publikovat web jako bezplatnou zkušební verzi.

 Vložení HTML na stránky Adobe Muse

Do stránek svého webu můžete zabudovat kód HTML, pomocí kterého přidáte složité prvky, které se budou dynamicky zobrazovat z webového serveru třetí strany. Tyto části kódu můžete zkopírovat ze služeb různých poskytovatelů, například Google, Yahoo!, YouTube a dalších, a poté je vložit do stránek webu Muse. V této části se podíváte na dva různé příklady vložení kódu HTML, a naučíte se do webu vytvořeného v aplikaci Muse rychle přidat obsah sociálních médií a interaktivní mapu Google.

Začněte dokončením obsahu domovské stránky. Pokud jste postupovali podle výše uvedených pokynů, měli byste mít domovskou stránku otevřenou v zobrazení Návrh. Pokud ne, tak si v zobrazení Plán dvojím kliknutím na miniaturu domovské stránky tuto stránku otevřete v zobrazení Návrh. Vložený kód HTML přidáte nad prezentaci, kterou jste dříve vytvořili na domovské stránce.

Přidání vloženého HTML kanálu služby Twitter zobrazujícího nejnovější příspěvky

U řady webových služeb, včetně služby Twitter, si můžete vytvořit bezplatný účet, který vám umožní publikovat příspěvky, které se zobrazí na webu této služby. Kromě zobrazování informací na Twitter.com můžete ale tento účet použít také k přihlášení se a zkopírování vloženého kódu, který zobrazí stejné zprávy ve vámi vytvářeném webu.

V rámci této ukázky byl vytvořen fiktivní účet pro Kevin's Koffee Kart. Tento postup obsahuje přihlášení se do služby Twitter jako nový uživatel a vyplnění registračního formuláře. Poté můžete používat rozhraní tohoto webu k zobrazování příspěvků a ke zkopírování kódu pro vložení, pomocí kterého tyto zprávy lze zobrazovat jinde na webu. Stejný proces použijete ke sdílení příspěvků blogů, video obsahu, kanálů RSS, informací o akciích, předpovědí počasí, výsledků her a řady dalších druhů dynamických dat. Pokud vytváříte web pro nějakého klienta, tak se jej zeptejte, jestli tyto služby již používá ke sdílení informací se svými zákazníky. V řadě případů můžete použít účet klienta k přihlášení se a následnému získání kódu pro vložení týkajícího se dat, které chcete zobrazit.

Abyste si nemuseli vytvářet svůj vlastní účet ve službě Twitter, uvádíme zde kód pro vložení zkopírovaný z účtu Kevin's Koffee Kart ve službě Twitter:

<script type="text/javascript" src="http://www.gtaero.net/twitter/twitter.php?user=kevinkoffee"></script>

<div id="twitFeed">Volitelný zástupný text</div>

<script type="text/javascript">twitter2id("twitFeed");</script>

 

  1. Zkopírujte výše uvedený kód.

  2. Vraťte se do aplikace Muse. V řadě případů stačí kliknout na požadovaném místě na stránce, kliknout pravým tlačítkem a v místní nabídce vybrat možnost Vložit. Případně můžete také použít klávesové zkratky pro vložení (Command-V v systému Mac a Control-V v systému Windows) a aplikace Muse sama rozpozná, že vkládaný text je zdrojový kód a nikoli normální textový obsah.

    Poznámka:

    Ve vzácných případech, kdy neproběhne rozpoznání kódu HTML, můžete pomocí příkazu nabídky Objekt > Vložit HTML otevřít okno Kód HTML. Poté do tohoto okna vložte zkopírovaný zdrojový kód a kliknutím na tlačítko OK okno zavřete a kód vložte.

  3. Po vložení zdrojového kódu (ve vašem webu dojde k vytvoření okna zobrazujícího obsah z webu třetí strany) nemusí výsledek na stránce přesně odpovídat vaší představě. Zobrazí se výchozí zobrazení vloženého HTML obsahu služby Twitter.

    Vložení zdrojového kódu
    Data kanálu služby Twitter se zobrazují podle očekávání, ale text není naformátovaný a nemá přiřazený žádný styl.

  4. Velikost oblasti s textem kanálu Twitter můžete zvětšit kliknutím na úchyty obklopující vložený HTML a jejich roztažením tak, aby tato oblast vyplňovala většinu šířky stránky, a přibližně jednu třetinu její výšky.

    Roztáhněte pole s vloženým kódem
    Výrazně roztáhněte šířku a výšku okna s daty kanálu služby Twitter.

    Text se nyní může zobrazit na mnohem větší ploše, ale jeho velikost je stále ještě výchozí velikost.

    Nyní aktualizujete kód v okně Kód HTML a přidáte několik stylů CSS, které definují vzhled dynamického textu. Tato operace nijak neovlivní zobrazování zpráv na webu Twitter.com, ale změní formátování textu ve vašem webu.

  5. Zkopírujte následující kód stylu CSS:

    <style type="text/css">

    #twitFeed { font-family: Helvetica Neue,Helvetica,sans-serif; font-size: 54px; line-height: 1; color: white; text-align: left }

    a:link, a:hover { font-size: 14; color: white; text-decoration: none }

    </style>

    Poznámka:

    Prohlédněte si výše uvedený kód a všimněte si, že styly jsou obklopeny značkou otevření, která určuje, o jaký kód se jedná (),a poté značkou uzavření, která prohlížeči oznamuje, že pravidla stylů CSS jsou ukončena (). Tyto značky budete používat jako závorky kolem definovaných stylů pokaždé, když budete upravovat styl vloženého kódu HTML. V tomto případě web služby Twitter hostuje vyvěšené příspěvky a k ovládání vzhledu textu na svém webu používá selektor ID CSS pojmenovaný #twitFeed. Výše uvedený kód tedy používá stejný název stylu (získaný z webu služby Twitter) a poté přidává několik pravidel definujících vzhled textu ve vašem webu a potlačujících styly použité na webu Twitter.com. Další informace o pravidlech CSS týkajících se formátování textového obsahu najdete na webu W3C Schools.

  6. Klikněte pravým tlačítkem do okna Kód HTML s vloženým HTML a v místní nabídce vyberte možnost HTML. Otevře se okno Kód HTML, ve kterém vidíte kód, který jste předtím vložili. V průběhu upravování webu můžete toto okno kdykoli otevřít a aktualizovat zdrojový obsah HTML. V horní části okna klikněte nad dříve vložený kód HTML. Vložte kód nového stylu, který jste zkopírovali v kroku 5.

    Vložený kód HTML
    Do okna Kód HTML, nad dříve vložený zdrojový kód služby Twitter, vložte kód stylu.

  7. Kliknutím na tlačítko OK zavřete okno HTML. Po provedení této změny stylu textu služby Twitter se příspěvek propojený z webu Twitter zobrazí nad prezentací na domovské stránce bílým textem a v mnohem větší velikosti.

    Webová stránka zobrazuje text služby Twitter
    Dokončený kanál služby Twitter po aktualizaci velikosti objektu HTML a naformátování stylů textu.

Domovská stránka je skoro dokončená. Zbývá přidat na stránku jediný prvek.

  1. Zvolte Soubor > Umístit. V dialogu Importovat vyberte ve složce Kevins_Koffee_Kart soubor pojmenovaný DailyDrip.png. Klikněte na tlačítko Vybrat.

  2. Po vložení tohoto obrazu na domovskou stránku jej pomocí nástroje pro výběr umístěte na levou stranu poblíž horního okraje prezentace tak, aby částečně překrýval horní část prezentace.

  3. Klikněte na tlačítko Náhled a sledujte průběh prezentace pod obrazy Daily Drip a hnědými kapkami.

    Dokončený návrh domovské stránky
    Dokončený návrh domovské stránky.

Zkontrolujte domovskou stránku a kliknutím na odkaz Plán se vraťte do zobrazení Plán.

Dále přidáte do stránky KART MAP jiný typ vloženého HTML.

  1. Dvojitým kliknutím na miniaturu stránky KART MAP otevřete stránku v zobrazení Návrh a začněte ji upravovat.

  2. Pomocí nástroje Text přetáhněte na stránku KART MAP textový rámeček a umístěte jej poblíž horního okraje obsahu stránky, přímo pod záhlaví.

  3. Zadejte následující text: Hledáte Koffee Kart? Zde po celý den najdete aktualizace polohy v reálném čase.

  4. Vyberte tento text a otevřete panel Styly odstavce. Kliknutím na styl pojmenovaný Georgia Body Medium použijte tento styl odstavce na text záhlaví stránky KART MAP.

Použití vloženého HTML k vložení mapy Google do webové stránky

Výukové video

Výukové video
lynda.com - James Fritz

V této části přidáte na stránku KART MAP obsah představovaný vloženým HTML, který načte mapu generovanou systémem Google Maps. Jedná se pouze o malou ukázku možností, nabízejících se při používání vloženého HTML ve vašem webu. Do webu můžete nejen začlenit obsah z řady webů třetích stran, například YouTube, Flickr nebo Picasa, ale také přidávat formuláře, blogy a další složité webové prvky, které můžete ovládat přihlášením se do svého účtu a vyvěšením obsahu na odpovídajících webech.

  1. Otevřete nové okno prohlížeče a navštivte stránku Google Maps.

  2. Zadejte adresu nebo výraz pro vyhledání, například Adobe SF, aby došlo k vyhledání skutečného místa, které použijete k vytvoření mapy.

  3. Klikněte na tlačítko Odkaz, které se zobrazí v pravé horní části rozhraní a poté na volbu Přizpůsobit vloženou mapu a zobrazit náhled.

  4. Zobrazí se okno Přizpůsobit, ve kterém nastavte vlastní velikost mapy na šířku 850 a výšku 470. Upravte umístění mapy v okně tak, aby byl text adresy zcela viditelný.

  5. Zkopírujte z okna Google výsledný kód HTML. Nebo pokud nechcete generovat svůj vlastní kód mapy Google, tak stačí zkopírovat následující zdrojový kód:

    <!-- Google Public Location Badge -->

    <iframe src="http://www.google.com/latitude/apps/badge/api?user=3988005937557250144&type=iframe&maptype=roadmap" width="872

    " height="600" frameborder="0"></iframe>

    <!-- To disable location sharing, you *must* visit https://www.google.com/latitude/apps/badge and disable the Google Public Location badge. Removing this code snippet is not enough! -->

    Zkopírujte zdrojový kód HTML z okna Google Maps
    Zkopírujte zdrojový kód HTML z okna Google Maps.

  6. Vraťte se do aplikace Muse. Klikněte pravým tlačítkem a pomocí příkazu Vložit umístěte kód. Můžete také pomocí příkazu nabídky Objekt > Vložit HTML otevřít okno Kód HTML nebo vložit kód pomocí standardní klávesové zkratky (Command-V v systému Mac a Control-V v systému Windows).

  7. Pomocí nástroje pro výběr umístěte mapu na levou stranu stránky.

  8. Kliknutím na tlačítko Náhled si zobrazte, jak se mapy Google zobrazí návštěvníkům v aktivním webu. Klikněte na navigační tlačítka mapy a všimněte si, že mapa je plně interaktivní a vy ji můžete v rámci vloženého okna zvětšovat či s ní pohybovat.

Přidání prvků iframe do vašeho webu pro zobrazení jiných stránek s vnořeným kódem HTML

Kromě používání vloženého HTML k vložení kódu zkopírovaného z webu třetí strany můžete také do prvku iframe pomocí stejné metody vložit celou webovou stránku. Můžete například zadat následující fragment kódu:

<iframe title="Nadpis obsahu" src="http://vašeurl.cz" width="900" height="500" style="border: 0;"></iframe>

Ve výše uvedeném kódu nahraďte text v části title="" a url="“ požadovaným názvem externí webové stránky a adresou URL. Můžete také přizpůsobit šířku a výšku prvku iframe tak, aby odpovídal vašemu návrhu.

Přidáním následujícího kódu do značky otevření prvku iframe přidáte atribut, který zajistí, že prvek iframe nebude zobrazovat posuvník:

scrolling="no"

Pomocí příkazu nabídky Objekt > Vložit HTML můžete otevřít nové okno Kód HTML a vložit prvek iframe kamkoli ve svém webu a následně zadáním libovolné adresy URL (adresa webu, například www.google.com) uvnitř zobrazit aktivní web z Internetu.

Prvky iframe můžete používat také k vkládání animací, například animací HTML5 vytvořených v aplikaci Adobe Edge. Vyhledejte název souboru HTML vytvořeného v aplikaci Adobe Edge a použijte tento název souboru v atributu URL vašeho prvku iframe:

<iframe src="Project-Header-r1v1.html" width="100%" height="100%" scrolling="no">

</iframe>

Poté budete muset odeslat soubor HTML aplikace Adobe Edge (včetně závislých souborů) do stejného hostitelského serveru jako soubory webu Muse. Pokud exportujete svůj web do FTP, můžete zkopírovat soubor HTML do složky vytvořené aplikací Muse při exportu. Pokud publikujete přímo do hostingových serverů systému Adobe Business Catalyst® kliknutím v aplikaci Muse na odkaz Publikovat, můžete soubory odeslat pomocí aplikace Adobe Dreamweaver® nebo libovolného klienta FTP. Další informace o odesílání souborů prostřednictvím FTP do hostingových serverů systému Business Catalyst najdete v části Publikování webů.

Formátování prvků kontaktního formuláře

Pomocí několika standardních pravidel stylu CSS můžete formátovat prvky kontaktního formuláře, který jste si vytvořili v rozhraní konzoly pro správu systému Business Catalyst. Máte možnost upravit, jakým způsobem se zobrazí formulář a jeho prvky, aby odpovídaly návrhu stránky.

Po vložení zdrojového kódu formuláře z konzoly pro správu do stránky v aplikaci Muse se formulář zobrazí s výchozími styly.

Vložení libovolného kódu HTML
Po vložení kódu HTML se formulář zobrazí na stránce.

Podobně jako u každého prvku, i u formuláře lze pomocí táhel upravit jeho rozměry nebo jej přesunout na požadované místo na stránce.

Klikněte na formulář pravým tlačítkem (nebo klikněte se stisknutou klávesou Ctrl) a v zobrazeném seznamu vyberte položku HTML.

Použijte kontextovou nabídku pro volbu HTML
V kontextové nabídce vyberte ze seznamu voleb možnost HTML.

Zobrazí se okno Kód HTML. Zde se zobrazí kód, který jste vložili do stránky z konzoly pro správu. Umístěte kurzor zcela nahoru, před první řádek kódu, a opakovaným stisknutím klávesy Enter (Windows) nebo Return (Mac) posuňte kód formuláře směrem dolů a vytvořte si tak místo pro přidání stylů.

Stisknutím klávesy Enter nebo Return přidejte několik prázdných řádků nad existující kód
Stisknutím klávesy Enter nebo Return přidejte několik prázdných řádků nad existující kód.

Do této oblasti nad kódem formuláře můžete vložit nebo zadat pravidla CSS ovlivňující vzhled prvků formuláře.

Abyste viděli, jak to funguje, zkopírujte následující kód:

<style type="text/css">

input.cat_textbox, textarea { background-color: #fff; border: 1px solid #cacaca; padding: 3px; margin: 2px 0 8px 0; width: 300px; font: 12px Georgia, Times, serif; }

input.cat_textbox { height: 16px; }

input.cat_button { background-color: #eee; font: 12px Helvetica, Arial, sans-serif; border: 1px solid #cacaca; padding: 14px 0; width: 150px; font-weight: bold; text-transform: uppercase; }

.form label, .webform label { font: 14px Georgia, Times, serif; }

table.webform td { padding: 0; }

</style>

Vložte tento kód nad formulář, do horní části okna HTML.

Vložte styly CSS do horní části okna HTML
Vložte styly CSS do horní části okna HTML.

Kliknutím na tlačítko OK zavřete okno HTML. Všimněte si, že se vzhled formuláře aktualizuje na základě nového formátování. Kliknutím na tlačítko Náhled nebo vybráním možnosti Soubor > Náhled stránky se podívejte, jak se zobrazí v publikovaném webu.

Stejnou strategii můžete použít k ovládání celé řady různých prvků formulářů, které máte k dispozici při přidání kódu kontaktního formuláře zkopírovaného ze systému Business Catalyst.

Prohlédněte si kód, který jste vložili do horní části okna. Všimněte si dvou značek stylů nacházejících se v horní a spodní části pravidel CSS, která obklopují. Důležité: bez značky otevření a uzavření stylu pravidla CSS nefungují. Zde vidíte tyto dvě značky stylů samostatně:

<style type="text/css">

</style>

Tyto značky otevření a uzavření stylu sdělují prohlížeči, že kód obsažený mezi nimi obsahuje pravidla formátování CSS. Před vložením pravidel CSS si vždy zkontrolujte, jestli se tyto značky nacházejí v horní části okna.

Když chcete provést změny v prvcích formuláře a aktualizovat jejich vzhled, musíte vyvolat „třídu“ (což je název přiřazený různým prvkům formuláře), určit vlastnost, kterou chcete aktualizovat, a nastavit její atributy.

Podívejte se na následující řádek kódu:

input.textarea {

background-color: #fff;

}

Slovo input.textarea je název přiřazený jednomu typu textového pole (jeho „třída“). Následující řádek poté vyvolá vlastnost, kterou chcete změnit. V tomto případě se výraz background-color vztahuje k barvě pozadí textového pole. Výraz #fff za středníkem zkrácený zápis v kódu CSS pro zapsání výrazu #ffffff (což je hexadecimální hodnota barvy odpovídající bílé barvě).

Výše uvedené pravidlo jednoduše říká: Nastavit barvu pozadí tohoto typu textového pole na bílou.

Při aktualizování formuláře můžete přiřadit barvě pozadí textového pole hodnotu běžné webové barvy: červenou. Následující kód nastaví barvu pozadí tohoto typu textového pole na červenou:

input.textarea {

background-color: red;

}

Pravidla CSS jsou napsána ve svém vlastním jazyce. Podobně jako u každého nového jazyka, i zde jeho plynulé zvládnutí chvíli trvá. Chcete-li se dozvědět další informace o jeho syntaxi (gramatice používané při zapisování těchto pravidel), přečtěte si vynikající výukové lekce a referenční příručky pro CSS nabízené bezplatně online společností W3Schools.

Až budete připraveni zahájit úpravy vlastních kontaktních formulářů, můžete pomocí následujícího seznamu identifikovat názvy tříd a jejich přidružené vlastnosti, které můžete upravovat pro jednotlivé prvky formulářů.

Poznámka:

Nezapomeňte obklopit svůj seznam pravidel CSS značkou otevření a uzavření stylu, protože jinak prohlížeč (a zobrazení Návrh) nemůže tato pravidla vykreslit:

<style type="text/css">

</style>

Odebrání výchozích prvků z horní části kontaktního formuláře

Když vložíte formulář na stránku, bude ve výchozím nastavení začínat následujícími dvěma prvky.

Chcete-li odstranit některý z těchto prvků nebo oba dva, tak otevřete okno HTML a podívejte se na zdrojový kód, který jste vložili (těsně pod značkou stylů CSS, kterou jste pravděpodobně přidali).

Chcete-li odstranit řádek *Vyžadované, najděte tento řádek kódu a odstraňte jej.

<span class="req">*</span> Vyžadované

Chcete-li odstranit text a nabídku Popisek, najděte tyto řádky kódu a odstraňte je:

<td><label for="Title">Title</label><br /><select name="Title" id="Title" class="cat_dropdown_smaller"><option value="301457">DR</option><option value="301456">MISS</option><option value="301453" selected="selected">MR</option><option value="301454">MRS</option><option value="301455">MS</option></select></td>

Poznámka:

Při upravování kódu HTML dávejte pozor, abyste omylem neodstranili žádné značky, kromě výše uvedených řádků. I kdyby došlo k odstranění jediného znaku navíc, například znaku >, mohlo by dojít k rozpadnutí formuláře. Pokud by k tomu došlo, můžete se vrátit do konzoly pro správu a nahradit upravený kód opětovným zkopírováním kódu pro vložení na stránku.

Seznam tříd a vlastností pro přidání pravidel CSS a formátování kontaktních formulářů

Mnohem širší nabídku hexadecimálních hodnot pro přiřazení barev vám nabídne nějaký online nástroj, například Kuler nebo aplikace pro úpravu obrazů (Photoshop nebo Fireworks). Hexadecimální hodnoty barev vždy začínají symbolem #, po kterém následuje kombinace 3 nebo 6 alfanumerických znaků (0-9 a A-F).

Možná bude jednodušší použít nástroj kapátko v aplikaci Muse a vybrat barvy z již existujícího návrhu. Hexadecimální hodnoty barev můžete kopírovat z pole výběru barvy a vkládat do kódu. Následujících 16 webových barev lze zadat pomocí názvu. Mohou být velice užitečné, když chcete testovat pravidlo:

Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White a Yellow (Akvamarínová, černá, modrá, fuchsiová, šedá, zelená, limetová, kaštanová, námořnická modrá, olivová, nachová, červená, stříbrná, modrozelená, bílá a žlutá)

Při zadávání barev pomocí názvu neuvádějte před barvou symbol #.

Následující seznam není zcela vyčerpávající - existuje mnoho jiných kombinací (a mnoho dalších vlastností, které můžete použít), pomocí kterých lze prvky ovlivnit. Začněte pomocí následujících námětů. Dvojitým kliknutím vyberte úsek kódu a zkopírujte jej do schránky.

Pokud máte zájem o další tipy ohledně práce s aplikací Muse, určitě se podívejte na stránku nápovědy a výukových lekcí aplikace Muse nebo stránku akcí aplikace Muse, kde najdete živé i nahrané webové semináře.

Tato práce podléhá licenci Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Na příspěvky ze služeb Twitter™ a Facebook se nevztahují podmínky licence Creative Commons.

Právní upozornění   |   Zásady ochrany osobních údajů online