Uwaga:

Do programu Adobe Muse nie są już dodawane nowe funkcje, a jego obsługa zostanie wycofana 26 marca 2020 r. Aby uzyskać szczegółowe informacje i pomoc, zobacz stronę na temat wycofania usługi Adobe Muse.

Wyświetlanie bloga w witrynie Muse za pomocą osadzonego kodu HTML

Terminem osadzony kod HTML określa się kod źródłowy wygenerowany przez witrynę zewnętrzną, np. Google, YouTube, Flickr lub Picasa. Aby dodać zawartość z tych witryn, należy założyć konto użytkownika, a następnie zalogować się i skopiować tzw. kod osadzania (ang. embed code).

Wklejenie osadzonego kodu HTML na stronie można porównać do umieszczenia na niej okna, które wyświetla zawartość pochodzącą z witryny zewnętrznej.

Osadzony kod HTML to sprawdzony i łatwy sposób dodawania skomplikowanych informacji (np. map, prognoz pogody, notowań papierów wartościowych itp.) oraz zaawansowanych multimediów, takich jak filmy, pokazy slajdów i pliki dźwiękowe. Ta strategia umożliwia dodatkowo korzystanie z witryny zewnętrznej jako usługi hostingowej oraz interfejsu przesyłania plików. Przykład: po utworzeniu konta w serwisie YouTube możesz założyć własny kanał i przesyłać do niego zawartość wideo przeznaczoną dla swojej witryny. W serwisie YouTube znajdziesz stronę, która upraszcza proces przesyłania plików wideo i przechowuje je w witrynie serwisu. Jeśli zechcesz zaktualizować swoją witrynę, wystarczy, że dodasz kolejne filmy do kanału YouTube i skopiujesz kod osadzania, a następnie wkleisz go na swoją stronę, aby dodać nowe filmy do witryny Muse.

W tej sekcji zajmiemy się kopiowaniem kodu źródłowego z serwisu Tumblr. To bezpłatny serwis internetowy, który wymaga utworzenia konta i zalogowania się do niego w celu dodawania wpisów na blogu publicznym. Blogi są łatwe w obsłudze i okazują się pomocne, gdy chcemy ułatwić osobie bez umiejętności technicznych aktualizowanie własnej witryny. Wiele serwisów blogerskich obsługuje się za pomocą interfejsu internetowego. Dzięki temu można się zalogować do konta z dowolnej przeglądarki i dodawać wpisy bez znajomości języka HTML i bez pomocy dodatkowego oprogramowania.

Uwaga: osoby odwiedzające Twoją witrynę nie potrzebują konta w serwisie Tumblr, aby przeglądać osadzony na stronie blog. Konto jest wymagane tylko w przypadku projektanta strony w celu stworzenia niestandardowego bloga i wygenerowania kodu osadzania, który zostanie zamieszczony na stronie.

  1. Na potrzeby tego samouczka nie musisz tworzyć konta w serwisie Tumblr. Po prostu skopiuj poniższy kod wygenerowany przez witrynę po utworzeniu darmowego bloga:

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

  1. W widoku Planowanie kliknij dwukrotnie miniaturę strony „events”, aby otworzyć ją w widoku Projektowanie.
  2. Kliknij pośrodku pustej strony i osadź kod HTML jedną z poniższych metod:
  • Wybierz polecenie Edytuj > Wklej lub użyj skrótu klawiaturowego (Command+V w systemie Macintosh lub Control+V w systemie Windows), aby wkleić kod bezpośrednio na stronę.
  • Wybierz polecenie Obiekt > Wstaw HTML. Kliknij wewnątrz okna Edytuj HTML i wstaw skopiowaną wcześniej zawartość. Kliknij OK, aby zamknąć okno Edytuj HTML.

Uwaga! W większości przypadków program Muse rozpozna kod HTML i automatycznie osadzi go na stronie. Jeśli jednak zamiast zawartości z witryny zewnętrznej zobaczysz fragment kodu, skorzystaj z polecenia Obiekt > Wstaw HTML.

Po osadzeniu kodu HTML zobaczysz niebieską obwiednię z uchwytami, która będzie otaczać wpisy na blogu dodane na koncie Katie's Cafe w serwisie Tumblr.

  1. Za pomocą narzędzia Zaznaczanie przeciągnij uchwyty i dopasuj rozmiar zawartości bloga w taki sposób, aby zajmowała ok. 80% szerokości strony. Wyśrodkuj zawartość bloga na stronie w taki sposób, aby obraz tła ustawiony sąsiadująco był widoczny z lewej i prawej strony. Niebieskie prostokąty pomiaru oznaczają odległość od innych obiektów. Czerwona linia pomocnicza wyrównania pojawia się wtedy, gdy zaznaczony obiekt zostaje wyśrodkowany w pionie.
Zmień wielkość i położenie strony
Zmień wielkość i położenie bloga z serwisu Tumblr na stronie „events”.

To wszystko, co jest konieczne do osadzenia kodu HTML na stronach Muse. Jeśli zechcesz edytować kod HTML, kliknij prawym przyciskiem myszy osadzony element HTML i wybierz w menu kontekstowym polecenie Edytuj HTML. Zostanie otwarte okno edycji HTML, w którym możesz edytować wklejony wcześniej kod.

Przyjrzyjmy się zmianom, jakich dokonaliśmy na stronie „events”:

  1. Wybierz polecenie Plik > Podgląd strony w przeglądarce, aby wyświetlić stronę „events” w nowym oknie przeglądarki.

Zauważ, że w miarę przewijania w dół listy wpisów na blogu nagłówek jest wyświetlany na tle reszty zawartości strony. Dzieje się tak, ponieważ strona „events” jest oparta na wzorcowej stronie „Foreground”, a zawartość jej nagłówka została ustawiona do wyświetlania na pierwszym planie.

Strona „events” jest gotowa. W następnej sekcji zajmiemy się wklejanie, zawartości osadzonego kodu HTML do widżetu. Dzięki temu można sterować wyświetlaniem zawartości pochodzącej z witryny zewnętrznej w oparciu o czynności użytkownika.

Osadzanie pliku wideo w witrynie Muse

W tej chwili kontener celu jest wypełniony szarym kolorem. Możesz w nim jednak umieścić różne typy zawartości, w tym pliki obrazów, kolorowe prostokąty, tekst lub osadzony kod HTML skopiowany z innych stron internetowych.

Na potrzeby tego przykładu wkleimy osadzony kod HTML pochodzący z serwisu YouTube.

Wyobraź sobie, że odwiedzasz stronę w serwisie YouTube.com, aby obejrzeć film przesłany za pomocą twojego konta. Po naciśnięciu przycisku Udostępnij, a następnie Umieść, można skopiować kod osadzania filmu.

Osadzanie zawartości wideo
Po wybraniu żądanego rozmiaru filmu skopiuj kod osadzania wygenerowany przez serwis YouTube.

Na potrzeby tego filmu kod osadzania filmu Katie's Cafe został już skopiowany, więc nie musisz odwiedzać serwisu YouTube. Skopiuj poniższy kod osadzania do schowka:

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

W powyższym kodzie występują znaczniki iFrame otaczające łącze do filmu opublikowanego w serwisie YouTube. Znacznik iFrame to kontener języka HTML, który umożliwia wyświetlanie zawartości w „oknie” po umieszczeniu jej na stronie.

Po skopiowaniu kodu wróć do programu Muse.

  1. Za pomocą narzędzia Zaznaczanie kliknij szare obramowanie strony, tak aby Wskaźnik zaznaczenia w lewym górnym rogu wyświetlał słowo Strona. Oznacza to, że zaznaczona jest cała strona.
  2. Kliknij większy kontener celu wypełniony szarym kolorem. Wskaźnik zaznaczenia w lewym górnym rogu panelu sterowania wyświetli słowo Kompozycja. Kliknij szary kontener celu po raz drugi, a wskaźnik wyświetli słowo Kontener. Kliknij go ponownie (wskaźnik wyświetli słowo Cel), a następnie jeszcze raz, aż we wskaźniku zaznaczenia pojawi się słowo Ramka obrazu. Naciśnij klawisz Backspace (w systemie Windows) lub Delete (w systemie Mac), aby usunąć ramkę obrazu z kontenera celu.

W następnej części tego przewodnika, nie usuwając zaznaczenia wewnętrznego kontenera docelowego, należy wkleić do niego kod HTML skopiowany powyżej.

Uwaga! Podobnie jak w przypadku wklejania obrazu do kontenera wyzwalacza, należy zachować ostrożność przy wklejaniu kodu HTML do kontenera, ponieważ celem jest wklejenie go DO ŚRODKA kontenera docelowego widżetu. W zależności od aktualnie zaznaczonego elementu może się zdarzyć, że kod osadzenia filmu zostanie wklejony poza obszarem widżetu, a zatem bezpośrednio na stronie. Dlatego należy postępować z ostrożnością... Jeśli przetestujesz lightbox, klikając pozycję Podgląd i zobaczysz, że film jest wyświetlany, choć obraz główny nie został jeszcze kliknięty, oznacza to, że kod osadzenia wideo nie został wklejony do kontenera. Film powinien zostać odtworzony wyłącznie po kliknięciu obrazu głównego.

Wykonaj poniższe kroki, aby wkleić kod osadzenia wideo do kontenera celu (Wskaźnik zaznaczenia powinien wyświetlać słowo Kontener).

  1. Wybierz polecenie Obiekt > Wstaw HTML. W oknie, które zostanie wyświetlone, zaznacz domyślny tekst i usuń go, naciskając klawisz Delete (w systemie Mac) lub Backspace (w systemie Windows). Wybierz polecenie Edycja > Wklej, aby wkleić kod YouTube skopiowany powyżej w polu Kod HTML. Kliknij OK, aby zamknąć okno Kod HTML.

Uwaga!  W wielu przypadkach program Muse automatycznie wykryje wklejenie kodu HTML i uzna go za kod HTML, a nie zwykły tekst. Zamiast otwierać okno HTML za pomocą polecenia Obiekt > Wstaw HTML możesz zatem kliknąć zaznaczony wewnętrzny kontener celu prawym przyciskiem myszy i wybrać w menu kontekstowym polecenie Wklej. (Możesz też wybrać polecenie Edycja > Wklej lub użyć skrótu klawiaturowego, aby wkleić kod źródłowy do kontenera celu). W programie Muse kod osadzenia filmu można wkleić do kontenera celu na kilka sposobów.

Po wklejeniu kodu do kontenera celu zostanie wyświetlona pierwsza klatka filmu (filiżanka kawy). Oznacza ona, że kod osadzenia HTML został wklejony prawidłowo. Filmu nie można odtworzyć podczas edytowania strony w widoku Projektowanie. Można go odtworzyć wyłącznie po kliknięciu przycisku Podgląd na panelu sterowania lub uzyskaniu podglądu strony w przeglądarce.

  1. Za pomocą narzędzia Zaznaczanie dostosuj w razie konieczności rozmiar kontenera, aby zmieścić osadzoną zawartość HTML filmu. Szerokość kontenera powinna wynosić ok. 670 pikseli, a wysokość ok. 415 pikseli. Podczas gdy zaznaczona jest zawartość wideo, Wskaźnik zaznaczenia wyświetla słowo Element HTML.
  2. Gdy zaznaczony jest kontener celu, naciśnij klawisz Esc, aby przejść o poziom wyżej do kontenera zewnętrznego. Jeśli wolisz, możesz kliknąć poza stroną, aby usunąć zaznaczenie widżetu Wyświetlanie ramki lightbox, a następnie kliknąć go dwa razy: pierwszy, aby zaznaczyć Kompozycję, i drugi, aby zaznaczyć większy kontener. Za pomocą narzędzia Zaznaczenie przeciągnij uchwyty kontenera, tak aby kontener celu znalazł się pośrodku. Zmień wymiary kontenera; nowa szerokość powinna wynosić 710 pikseli, a wysokość 460 pikseli.
  3. Za pomocą menu Wypełnienie ustaw kolor wypełnienia kontenera na brązowy (#63301B), a wartość jego krycia na 100.
Menu Wypełnienie
Ustaw kolor wypełnienia i krycie kontenera za pomocą menu Wypełnienie.

  1. Zaznacz ramkę tekstową u dołu kontenera i naciśnij klawisz Delete (w systemie Mac) lub Backspace (w systemie Windows), aby ją usunąć. Ramkę tekstową można zapełnić opisem docelowej zawartości, jednak na potrzeby tego projektu nie jest to konieczne.
  2. Zaznacz pole Zamknij (oznaczone ikoną X) w prawym górnym rogu kontenera. Kliknij wewnątrz pola Zamknij, aby zaznaczyć jego etykietę i usunąć ją. W menu Wypełnienie ustaw brak wypełnienia. Kliknij ikonę folderu obok pozycji Obraz w menu Wypełnienie i przejdź do folderu przykładowych plików, a następnie zaznacz plik o nazwie icon-close.png. Za pomocą narzędzia Zaznaczanie zmień wielkość pola Zamknij, aby wyświetlić ikonę zamykania w całości.
  3. Za pomocą narzędzia Zaznaczanie zaznacz kontener wyzwalacza i celu, a następnie umieść je tam, gdzie mają być wyświetlane na stronie.
  4. Zaznacz kompozycję, a następnie kliknij niebieską ikonę strzałki, aby otworzyć panel Opcje. Na potrzeby tego przykładu należy użyć poniższych ustawień:
    • Pozycja: Ramka lightbox
    • Przejście: Przyciemnienie
    • Odtwarzanie automatyczne: Wyłączone
    • Przetasuj: Wyłączone
    • Ukryj wszystko na wstępie: Wyłączone
    • Włącz przesuwanie palcem: Włączone
    • Wyzwalacze na górze: Wyłączone
    • Przycisk Zamknij: Włączony
    • Pokaż części ramki lightbox podczas edytowania: Włączone
    • Pokaż wszystko w trybie projektowania: Włączone
Opcje kompozycji
Zaktualizuj ustawienia w menu Opcje, aby sterować zachowaniem widżetu.

Kliknij w dowolnym miejscu poza menu Opcje, aby je zamknąć. Na tym etapie widżet jest skonfigurowany i gotowy do przetestowania.

W jednej z części tego samouczka nauczyliśmy się osadzać kod HTML, aby dodać blog Tumblr do strony „events”. Wkleiliśmy także osadzony kod HTML do widżetu kompozycja lightbox, aby po kliknięciu przycisku przez osobę odwiedzającą w ramce lightbox został wyświetlony film z serwisu YouTube. W tej sekcji zajmiemy się kolejnym typem osadzonego kodu HTML, który pochodzi z witryny Mapy Google. Wykonaj następujące czynności:

  1. Jeśli strona visit nie jest otwarta w widoku Projektowanie, przejdź do widoku Planowanie, a następnie kliknij dwukrotnie miniaturę strony visit, aby otworzyć ją do edycji.

Ten kod źródłowy został skopiowany z witryny maps.google.com. Możesz utworzyć niestandardową mapę wskazującą jeden adres (lub wiele, jak ma to miejsce w tym przypadku). Usługa ta jest bezpłatna; wystarczy podać adres (lub adresy) i kliknąć przycisk Utwórz mapę.

Kliknij Utwórz mapę
Kliknij Utwórz mapę, aby wygenerować mapy na podstawie wprowadzonych adresów.

Po utworzeniu mapy interfejs Mapy Google umożliwia nadanie jej nazwy. Następnie możesz kliknąć przycisk Łącze, aby uzyskać dostępu do kodu. Zaznacz kod HTML wyświetlany w polu Wklej kod HTML do swojej strony internetowej, a następnie wróć do programu Muse i osadź kod na stronie.

Dodaj kod HTML na stronie
Za pomocą interfejsu Mapy Google wygeneruj kod HTML mapy.

Na potrzeby tego samouczka nie musisz tworzyć samodzielnie nowej mapy. Jeśli chcesz przetestować tę funkcjonalność, wprowadź adresy, utwórz mapy i skopiuj kod. Jeśli jednak chcesz tylko sprawdzić sposób działania, możesz skorzystać z kodu HTML wygenerowanego wcześniej.

  1. Skopiuj poniższy kod źródłowy:

<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. Wklej kod na górze strony. Za pomocą narzędzia Zaznaczenie ustaw osadzony kod HTML w pionie i pośrodku strony, tak aby 1/4 mapy nachodziła na obszar nagłówka. Upewnij się, że między mapą, a grafiką kwiatka u dołu znajduje się odstęp, w którym będzie można wstawić opis tekstowy.
  2. Za pomocą narzędzia Tekst narysuj ramkę tekstową pod osadzoną mapą. Skopiuj poniższy tekst i wklej go do ramki:

While each of our bakeries embodies the unique attributes of its neighborhood, they are all bound together by Katie's impeccable attention to detail, commitment to service, and, above all, enjoyment of good food.

  1. W panelu Tekst zastosuj poniższe ustawienia, aby wystylizować tekst:
    • Czcionka: Droid Serif (lub dowolna czcionka typu serif)
    • Rozmiar czcionki: 14
    • Kolor czcionki: #222222
    • Wyrównanie czcionki: Do lewej
    • Interlinia: 120%

Strona jest gotowa po dodaniu opisu mapy.

  1. Wybierz polecenie Plik > Podgląd strony w przeglądarce, aby uzyskać podgląd strony.
Strona internetowa z mapą
Finalna wersja strony zawiera w pełni funkcjonalną mapę Google.

Zwróć uwagę, że osadzona mapa Google jest interaktywna. Możesz ją przesuwać wewnątrz okna, klikając strzałki, oraz powiększać ją i zmniejszać, klikając przyciski + i -.

W ten sposób zakończyliśmy projektowanie wszystkich stron. W ostatnich sekcjach tego samouczka zajmiemy się finalizacją witryny i jej publikacją w formie bezpłatnej wersji próbnej.

 Osadzenie kodu HTML na stronach Adobe Muse

Osadzając kod HTML na stronach witryny możesz dodać do niej zaawansowane funkcje, które są dynamicznie wyświetlane za pośrednictwem zewnętrznych serwerów. Tego rodzaju fragmenty kodu można kopiować z różnych serwisów, jak Google, Yahoo! i YouTube oraz wielu innych, a następnie wklejać na strony witryny Muse. W tej sekcji przyjrzymy się dwóm różnym przykładom osadzonego kodu HTML i na ich podstawie nauczymy się szybko dodawać zawartość społecznościową oraz mapę Google do witryny utworzonej w programie Muse.

Zaczniemy od sfinalizowania zawartości strony domowej. Jeśli postępujesz zgodnie z instrukcjami w samouczku, strona domowa może być już otwarta w widoku Projektowanie. W przeciwnym razie kliknij dwukrotnie jej miniaturę w widoku Planowanie, aby umożliwić edycję w widoku Projektowanie. Osadzony kod HTML dodamy na tle pokazu slajdów umieszczonego wcześniej na stronie głównej.

Wyświetlanie najnowszych tweetów za pośrednictwem kanału z serwisu Twitter w postaci osadzonego kodu HTML

Po założeniu darmowego konta w jednym z wielu serwisów, np. na Twitterze, możesz publikować wiadomości, które będą wyświetlane w witrynie serwisu. Możesz jednak zalogować się do swojego konta i skopiować specjalny kod, który umożliwia wyświetlanie tych samych wiadomości w twojej własnej witrynie.

W tym przykładzie dla kafejki Kevin's Koffee Kart zostało utworzone fikcyjne konto na Twitterze. Aby założyć konto, należy się zarejestrować jako nowy użytkownik, a następnie uzupełnić formularz. Następnie za pośrednictwem interfejsu serwisu można publikować wiadomości i kopiować specjalny kod umożliwiający wyświetlanie ich w innych witrynach internetowych. W ramach tego samego procesu można udostępniać wpisy na blogu, zawartość wideo, kanały RSS, informacje giełdowe, prognozy pogody, wyniki meczów i inne dynamiczne dane. Jeśli tworzysz witrynę dla klienta, zapytaj, czy udostępnia konsumentom informacje za pośrednictwem wspomnianych usług. W wielu przypadkach możesz zalogować się do konta klienta, a następnie uzyskać odpowiedni kod umożliwiający osadzenie danych w witrynie.

Aby oszczędzić czas, skorzystaj z tego kodu skopiowanego z profilu Kevin's Koffee Kart na Twitterze:

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

<div id="twitFeed">Opcjonalny tekst zastępczy</div>

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

 

  1. Skopiuj powyższy kod.

  2. Wróć do programu Muse. W wielu przypadkach wystarczy kliknąć prawym przyciskiem myszy w wybranym miejscu na stronie i wybrać w menu kontekstowym polecenie Wklej. Można także użyć skrótu klawiaturowego (Command-V w systemach Macintosh lub Control-V w systemach Windows), a program Muse rozpozna wklejaną zawartość jako kod źródłowy, a nie zwykły tekst.

    Uwaga:

    Jeśli zdarzy się, że kod nie zostanie rozpoznany, możesz wybrać polecenie Obiekt > Wstaw HTML, aby otworzyć okno kodu HTML. Wystarczy wkleić kod źródłowy do okna i kliknąć przycisk OK, aby zamknąć okno i osadzić kod.

  3. Po osadzeniu kodu źródłowego (co powoduje utworzenie okna, w którym jest wyświetlana zawartość z witryny zewnętrznej), jego wygląd na stronie może być inny niż sobie tego życzysz. Widoczny jest teraz domyślny sposób wyświetlania osadzonej zawartości HTML z Twittera.

    Osadzanie kodu źródłowego
    Dane z kanału Twittera są wyświetlane poprawnie, ale tekst nie jest ani sformatowany ani wystylizowany.

  4. Powiększ rozmiar tekstu z kanału Twittera, klikając uchwyty obwiedni osadzonego kodu HTML i rozszerzając je tak, aby zajęły prawie całą szerokość strony i ok. 1/3 jej długości.

    Rozwiń okno z osadzonym kodem
    Rozciągnij okno danych z Twittera.

    Dzięki temu tekst może być wyświetlany na większej przestrzeni, choć nadal ma domyślny rozmiar.

    Następnie zaktualizujemy kod HTML w oknie edycji, dodając style CSS, które zdefiniują wygląd dynamicznego tekstu. Ta czynność nie będzie mieć wpływu na wygląd publikowanych wiadomości na Twitterze, ale zmieni formatowanie tekstu w twojej witrynie.

  5. Skopiuj poniższy kod 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 }

    </styl>

    Uwaga:

    Poświęć chwilę na zaznajomienie się z powyższym kodem i zwróć uwagę, że style są zawarte pomiędzy znacznikiem początkowym oznaczającym kod () a znacznikiem końcowym, który informuje przeglądarki o tym, że reguły stylów CSS zostały zakończone (). Podczas stylizowania własnego osadzonego kodu HTML w znacznikach tych (nawiasach) zamkniesz style, które chcesz zmienić. W tym przypadku witryna Twitter hostuje opublikowane wiadomości i używa selektora identyfikatorów CSS o nazwie #twitFeed, który steruje wyglądem tekstu w witrynie. Powyższy kod używa zatem tej nazwy stylu (pozyskanej z witryny Twitter), a następnie stosuje pewne reguły określające wygląd tekstu w witrynie użytkownika, zastępując style zastosowane przez witrynę Twitter.com. Aby dowiedzieć się więcej na temat reguł CSS dotyczących formatowania zawartości tekstowej, odwiedź witrynę W3C Schools.

  6. Kliknij prawym przyciskiem myszy osadzony kod HTML i w menu kontekstowym wybierz opcję HTML. Zostanie otwarte okno edycji kodu HTML, w którym widać wklejony wcześniej kod. W dowolnym momencie podczas edytowania witryny możesz otworzyć to okno i zaktualizować zawartość źródłową HTML. Kliknij nad osadzonym wcześniej kodem HTML na samej górze okna. Wklej nowy kod stylu skopiowany w kroku 5.

    Osadzony kod HTML
    Wklej kod stylu w oknie edycji HTML nad wklejonym wcześniej kodem źródłowym z Twittera.

  7. Kliknij OK, aby zamknąć okno edycji HTML. Po dokonaniu tej zmiany stylu tekstu z Twittera wpis połączony z witryną Twitter jest teraz biały i większy i jest wyświetlany u góry na tle pokazu slajdów na stronie domowej.

    Strona internetowa wyświetla tekst z Twittera
    Gotowy kanał Twittera po zaktualizowaniu wielkości obiektu HTML i sformatowaniu stylów tekstu.

Strona domowa jest prawie gotowa. Pozostał ostatni element do dodania.

  1. Wybierz polecenie Plik > Umieść. W oknie dialogowym Importuj przejdź do folderu Kevins_Koffee_Kart i odszukaj plik DailyDrip.png. Kliknij polecenie Wybierz.

  2. Po umieszczeniu obrazu na stronie domowej za pomocą narzędzia Zaznaczanie przesuń go na lewą stronę w pobliżu górnej krawędzi pokazu slajdów, tak aby częściowo na nią nachodził.

  3. Kliknij opcję Podgląd, aby obejrzeć pokaz slajdów i zobaczyć, jak jest wyświetlany poniżej obrazu Daily Drip i brązowych kropel.

    Finalna wersja strony głównej
    Finalna wersja strony głównej.

Po zakończeniu podglądu strony domowej, kliknij łącze Planowanie, aby powrócić do widoku Planowanie.

Teraz dodamy do strony KART MAP inny typ kodu HTML.

  1. Kliknij dwukrotnie miniaturę strony KART MAP, aby otworzyć ją do edycji w widoku Projektowanie.

  2. Za pomocą narzędzia Tekst narysuj ramkę tekstową na stronie KART MAP i umieść ją w pobliżu górnej krawędzi obszaru zawartości, bezpośrednio pod nagłówkiem.

  3. Wpisz następujący tekst: Looking for the Koffee Kart? Check here for real-time location updates throughout the day.

  4. Zaznaczywszy tekst, kliknij panel Style akapitowe. Kliknij styl o nazwie Georgia Body Medium, aby zastosować Styl akapitowy wobec tekstu nagłówka na stronie KART MAP.

Wstawianie mapy Google na stronę internetową za pomocą osadzonego kodu HTML w witrynie Muse

Samouczek wideo

Samouczek wideo
lynda.com - James Fritz

W tej sekcji dodamy zawartość do strony KART MAP poprzez osadzenie kodu HTML, który wczyta mapę wygenerowaną przez serwis Mapy Google. To kolejny przykład mnogości zastosowań funkcji osadzania kodu HTML w witrynie. Program Muse umożliwia dołączanie zawartości z wielu zewnętrznych serwisów, takich jak YouTube, Flickr i Picasa. Pozwala także na dodawanie formularzy, blogów i innych zaawansowanych funkcji, którymi można sterować, publikując zwartość w odpowiednich witrynach za pośrednictwem konta użytkownika.

  1. Otwórz nowe okno przeglądarki i odwiedź stronę Mapy Google.

  2. Wpisz adres lub kwerendę (np. Adobe SF), aby wyszukać faktyczną lokalizację, dla której zostanie wygenerowana mapa.

  3. Kliknij przycisk Łącze, który zostanie wyświetlony w prawym górnym rogu interfejsu i wybierz opcję dostosowania i wyświetlenia podglądu mapy.

  4. W oknie Dostosuj ustaw niestandardowe wymiary mapy, wprowadzając wartość 850 w polu Szerokość i wartość 470 w polu Wysokość. Przesuń mapę w oknie, aby upewnić się, że tekst adresu jest widoczny.

  5. Skopiuj wygenerowany kod HTML z okna serwisu Google. Jeśli nie chcesz generować własnego kodu Mapy Google, skopiuj poniższy kod:

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

    Skopiuj kod źródłowy HTML z okna Mapy Google
    Skopiuj kod źródłowy HTML z okna Mapy Google.

  6. Wróć do programu Muse. Kliknij prawym przyciskiem myszy na stronie i wybierz polecenie Wklej, aby umieścić kod. Możesz także otworzyć okno edycji kodu HTML, wybierając polecenie Obiekt > Wstaw HTML, lub wkleić kod za pomocą standardowego skrótu klawiaturowego wklejania (Command+V w systemie Mac OS lub Control+V w systemie Windows).

  7. Za pomocą narzędzia Zaznaczanie umieść mapę w lewej części strony.

  8. Aby zobaczyć, w jaki sposób mapa Google będzie wyświetlana w aktywnej wersji witryny, kliknij polecenie Podgląd. Kliknij przyciski nawigacji mapy i zwróć uwagę, że jest w pełni interaktywna – możesz ją powiększać i przesuwać w ramach osadzonego okna.

Wstawianie ramek iframe i wyświetlanie zawartości innych witryn internetowych za pomocą osadzonego kodu HTML

Poza możliwością wstawiania kodu w postaci osadzonej zawartości HTML z witryn zewnętrznych istnieje możliwość osadzenia w taki sam sposób całej witryny przy pomocy ramki iframe. Można np. wprowadzić poniższy fragment kodu:

<iframe title="A Title for this Content" src="http://yoururlhere.com" width="900" height="500" style="border: 0;"></iframe>

W powyższym fragmencie wystarczy zastąpić tekst znaczników title="" i url="" żądanym tytułem zewnętrznej witryny oraz adresem URL. Można także dostosować szerokość i długość okna iframe, aby dopasować je do projektu witryny.

Aby upewnić się, że ramka iframe nie będzie wyświetlać paska przewijania, w początkowym znaczniku iframe należy dodać poniższy opcjonalny atrybut:

scrolling="no"

Po wybraniu polecenia Obiekt > Wstaw HTML można otworzyć okno kodu HTML i osadzić ramkę iframe w dowolnym miejscu witryny. W osadzonej ramce można następnie ustawić dowolny adres (witryny internetowej, np. www.google.com), aby wyświetlać w niej aktywną witrynę internetową.

Za pomocą ramek iframe można także osadzać animacje, w tym animacje HTML5 utworzone w aplikacji Adobe Edge. Odszukaj plik HTML utworzony w programie Adobe Edge i użyj jego nazwy w atrybucie URL ramki iframe:

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

</iframe>

Następnie należy przesłać plik HTML programu Adobe Edge (oraz pliki z nim powiązane) do serwera hostingowego wraz z plikami witryny Muse. Jeśli eksportujesz witrynę do serwera FTP, możesz skopiować plik HTML do folderu wygenerowanego przez program Muse podczas eksportu. Jeśli publikujesz bezpośrednio na serwerach hostingowych platformy Adobe Business Catalyst® poprzez kliknięcie łącza Publikowanie w programie Muse, możesz przesłać pliki za pomocą programu Adobe Dreamweaver® lub dowolnego klienta FTP. Aby uzyskać więcej informacji na temat przesyłania plików do serwerów hostingowych Business Catalyst za pośrednictwem protokołu FTP, patrz Publikowanie witryn internetowych.

Formatowanie elementów formularza kontaktowego

Korzystając ze standardowych reguł CSS, można sformatować elementy formularza kontaktowego, który został utworzony przy pomocy interfejsu konsoli administracyjnej Business Catalyst. Można dostosować sposób wyświetlania formularza i jego elementów, aby pasował do projektu strony.

Po wklejeniu kodu źródłowego formularza z Konsoli administratora na stronę Muse formularz jest wyświetlany ze stylami domyślnymi.

Wklejanie dowolnego kodu HTML
Po wklejeniu dowolnego kodu HTML formularz jest wyświetlany na stronie.

Tak jak w przypadku każdego innego elementu, możesz użyć uchwytów bocznych, aby zmienić rozmiar formularza i przesunąć go w inne miejsce na stronie.

Kliknij prawym przyciskiem (lub z klawiszem Control) formularz i z listy, która się pojawi, wybierz HTML.

Użyj menu kontekstowego, aby wybrać HTML
Użyj menu kontekstowego, aby wybrać HTML z listy opcji.

Pojawi się okno kodu HTML. Wyświetla ono kod wklejony przez ciebie z Konsoli administratora na witrynę. Umieść kursor na górze, przed pierwszą linią kodu i wciśnij Enter (Windows) lub Return (Mac) kilka razy, aby przesunąć kod formularza w dół i wprowadzić miejsce na dodanie stylów.

Naciśnij Enter, aby dodać linie odstępu powyżej istniejącego kodu
Naciśnij Enter, aby dodać linie odstępu powyżej istniejącego kodu.

W ten obszar nad formularzem można wkleić lub wpisać reguły CSS, które będą miały wpływ na wygląd elementów formularza.

Aby zobaczyć, jak to działa, skopiuj poniższy kod:

<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; }

</styl>

Wklej kod w górną część okna HTML, powyżej formularza.

Wklej style CSS u góry okna HTML
Wklej style CSS u góry okna HTML.

Kliknij OK, aby zamknąć okno HTML. Zauważ, że wygląd formularza został zaktualizowany przy wykorzystaniu nowego formularza. Kliknij Podgląd, lub wybierz Plik > Podgląd strony w przeglądarce, aby zobaczyć, jak będzie wyświetlana na opublikowanej witrynie.

Możesz skorzystać z tej samej strategii, aby kontrolować wiele różnych elementów formularza, które są uwzględnione w dodanym kodzie formularza kontaktowego skopiowanym z Business Catalyst.

Poświęć chwilę, aby przejrzeć kod wklejony u góry okna. Zwróć uwagę na dwa znaczniki stylu u góry i dołu reguł CSS, otaczające je. Jest to ważne; bez początkowych i końcowych znaczników stylu reguły CSS nie będą działały. Oto dwa rodzaje znaczników, wyświetlane niezależnie:

<style type="text/css">

</styl>

Te otwierające i zamykające znaczniki stylu mówią przeglądarce, że kod wewnątrz nich zawiera reguły formatowania CSS. Zawsze sprawdź, czy znaczniki te znajdują się na początku i końcu okna przed wklejeniem pomiędzy nie reguł CSS.

Gdy chcesz dokonać zmian w elementach formularza w celu zaktualizowania ich wyglądu, wystarczy wywołać „klasę" (nazwę przypisaną różnym elementom formularza), określającą właściwość, którą chcesz zaktualizować, a następnie określić jej atrybuty.

Przyjrzyj się poniższej linii kodu:

input.textarea {

background-color: #fff;

}

Słowo input.textarea jest nazwą przypisaną jednemu rodzajowi pola tekstowego (jego „klasie”). Kolejna linia wywołuje właściwość, którą chcesz zmienić. W tym wypadku atrybut background-color odnosi się do koloru tła pola tekstowego. Zapis #fff po dwukropku stanowi skrót zapisu wartości #ffffff w kodzie CSS (szesnastkowej wartości koloru odpowiadającej kolorowi białemu).

Mówiąc zwykłym językiem, powyższa reguła stwierdza: ustaw kolor tła tego typu pola tekstowego jako biel.

Aby zaktualizować formularz możesz też przypisać kolor tła pola tekstowego do popularnej wartości koloru z palety internetowej: czerwień. Poniższy kod określa kolor tła tego typu pola tekstowego jako czerwień:

input.textarea {

background-color: red;

}

Reguły CSS są napisane w specjalnym języku. Podobnie jak z każdym nowym językiem, opanowanie go w stopniu płynnym wymaga praktyki. Aby dowiedzieć się więcej o składni (gramatyce tworzenia tych reguł) przeczytaj świetne samouczki i CSS materiały referencyjne udostępnione za darmo online przez W3Schools.

Gdy wiesz, jak rozpocząć edytowanie własnych formularzy, możesz skorzystać z poniższej listy, aby określić nazwę klasy i powiązanych właściwości, które możesz dostosować dla każdego elementu formularza.

Uwaga:

Pamiętaj, aby zawsze otwierać i zamykać listę reguł CSS znacznikami stylu, ponieważ w przeciwnym razie przeglądarka (i widok Projektowanie) nie mogą przetworzyć tych reguł:

<style type="text/css">

</styl>

Usuwanie domyślnych elementów u góry formularza kontaktowego

Domyślnie przy wklejaniu formularza na stronę będzie się on rozpoczynał od następujących dwu elementów.

Jeśli chcesz usunąć jeden lub oba te elementy, otwórz okno HTML i przyjrzyj się wklejonemu kodowi źródłowemu (bezpośrednio pod ewentualnie dodanymi stylami CSS).

Aby usunąć linię *Wymagane, znajdź poniższą linię kodu i usuń ją:

<span class="req">*</span> Wymagane

Aby usunąć etykietę Tytuł, znajdź poniższe linie kodu i usuń je:

<td><label for="Title">Tytuł</label><br /><select name="Title" id="Title" class="cat_dropdown_smaller"><option value="301457">DR</option><option value="301456">PANNA</option><option value="301453" selected="selected">PAN</option><option value="301454">PANI</option><option value="301455">PANI</option></select></td>

Uwaga:

Zachowaj ostrożność podczas edytowania kodu HTML, aby nie usunąć przypadkowo żadnych znaczników innych niż powyższe linie. Nawet usunięcie pojedynczego znaku, np. >, może spowodować awarię formularza. Jeśli tak się stanie, możesz wrócić do Konsoli administratora i skopiować kod, aby wkleić go z powrotem na stronę, zastępując edytowany kod.

Wymień klasy i właściwości, do których mają być dodane reguły CSS i sformatuj formularze kontaktowe.

Gdy przypisujesz wartości kolorów, uzyskasz dużo większe zróżnicowanie kolorystyczne korzystając z narzędzi online, takich jak kuler, lub programu do edycji obrazów (Photoshop lub Fireworks) do utworzenia szesnastkowej wartości kodu. Wartość szesnastkowa kodu zawsze rozpoczyna się symbolem #, po którym następuje kombinacja 3 lub 6 wartości alfanumerycznych (0–9 i A–F).

Spróbuj użyć narzędzia Kroplomierz w Muse do wybrania kolorów z istniejącego projektu — może to ułatwić wykonywanie tej czynności. Możesz skopiować szesnastkowe wartości kolorów z pola w Próbniku kolorów i wkleić je do kodu. Jednak następujących 16 kolorów internetowych można określić z nazwy. Mogą być bardzo pomocne, gdy chcesz sprawdzić regułę:

Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White i Yellow

Gdy podajesz nazwę kolorów, nie dodawaj symbolu # przed kolorem.

Lista ta nie jest wyczerpująca — istnieje wiele różnych kombinacji (i wiele innych własności, których możesz użyć) mających wpływ na elementy. Skorzystaj z tych sugestii, aby rozpocząć. Kliknij dwukrotnie, aby wybrać fragment kodu, następnie skopiuj go do schowka.

Więcej wskazówek dotyczących pracy z programem Muse można znaleźć na stronie Pomoc i samouczki programu Muse lub na stronie Muse Events, na której dostępne są prezentacje internetowe w wersji zarejestrowanej oraz „na żywo”.

Ta zawartość jest licencjonowana na warunkach licencji Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Posty z serwisów Twitter™ i Facebook nie są objęte licencją Creative Commons.

Informacje prawne   |   Zasady prywatności online