Przeczytaj ten artykuł, aby dowiedzieć się, jak tworzyć witryny internetowe dla urządzeń przenośnych lub smartfonów.

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.

Możliwe jest tworzenie i projektowanie stron internetowych dla urządzeń przenośnych z wykorzystaniem projektowania responsywnego w programie Adobe Muse. Z układem responsywnym możesz użyć jednego pliku Muse, aby utworzyć witryny na wszystkie urządzenia, w tym urządzenia przenośne.

Najpierw należy określić szerokość przeglądarki, dla której chcesz zaprojektować witrynę. Następnie możesz kontynuować projektowanie witryny. Więcej informacji dotyczących tworzenia witryn dla urządzeń mobilnych z wykorzystaniem układu responsywnego można znaleźć w sekcji Tworzenie witryn responsywnych.

Jeśli chcesz zaprojektować alternatywny układ witryny wyłącznie dla urządzeń mobilnych, przeczytaj następujący artykuł.

Projektowanie witryn wyłącznie dla urządzeń mobilnych

W programie Adobe Muse możesz tworzyć układy zawartości witryn internetowych do wyświetlania na komputerach stacjonarnych, smartfonach i tabletach. Funkcje projektowania związane z urządzeniami mobilnymi umożliwiają tworzenie układów alternatywnych dla telefonów i tabletów oraz komputerów stacjonarnych.

Program Adobe Muse zawiera ustawienia, takie jak przełącznik szerokości 100% lub opcja Stopka zawsze u dołu strony, aby zapewnić zgodność wyświetlania Twojego projektu na szerokiej gamie wyświetlaczy dostępnych obecnie na rynku. W programie Adobe Muse możesz tworzyć interesujące projekty w każdym wymiarze dostępnym na różnych ekranach przy użyciu znajomych sposobów pracy.

Aby utworzyć układ alternatywny dla urządzeń przenośnych:

  1. Otwórz program Adobe Muse i kliknij polecenie Plik > Nowa witryna.

    Wybierz opcję Stała szerokość, aby utworzyć witryny dla konkretnych urządzeń.
    Wybierz opcję Stała szerokość, aby utworzyć witryny dla urządzeń przenośnych.

  2. Wybierz opcję Stała szerokość, a następnie kliknij przycisk Ustawienia zaawansowane w tym samym oknie dialogowym.

    Ustawienia zaawansowane nowej witryny
    Ustawienia zaawansowane tworzenia nowej witryny.

  3. Określ Maksymalną szerokość strony (lub Maks. szerokość strony).

    Określ odpowiednią szerokość przeglądarki dla telefonów komórkowych i wprowadź żądaną wartość.

  4. Wprowadź wartości marginesów i wypełnienia dla strony na urządzenia przenośne. Podaj następujące informacje:

    • Szerokość strony i Wysokość strony: umożliwiają ustalenie jej początkowych wymiarów. Program Muse automatycznie zwiększa wysokość strony proporcjonalnie do rosnącej zawartości, dlatego maksymalna wartość wysokości strony nie jest ustalona.
    • Kolumny i Szerokość kolumny: kolumny dzielą wizualnie witrynę Muse na dwie równe części, umożliwiając precyzyjne wyrównanie elementów projektu. Program Muse automatycznie ustawia szerokość kolumny dla określonej liczby kolumn i ustala wartości odstępu między łamami.
    • Marginesy i Wypełnienie: marginesy zajmują obszar wokół strony internetowej poza obszarem projektu. Wypełnienie umożliwia wypełnienie obszaru w granicach projektu strony internetowej.

    Kliknij przycisk OK.

    Możesz zacząć projektowanie układów witryny na urządzenia przenośne.

Dodawanie układu telefon do istniejącej witryny Adobe Muse

Tworząc nowy projekt, możesz najpierw utworzyć jeden układ, a następnie dodatkowe – wszystko to w ramach tego samego pliku programu Muse.  Podczas publikowania lub eksportowania witryny program Adobe Muse automatycznie wygeneruje plik o nazwie sitemap.xml, który będzie zawierał listę wszystkich stron dla wszystkich układów. Plik sitemap.xml jest przesyłany wraz z pozostałymi zasobami witryny. Usprawnia on pozycjonowanie witryny (SEO), ułatwiając wyszukiwarkom internetowym jej indeksowanie. Dzięki temu poszczególne strony będą precyzyjnie odpowiadać wprowadzonym terminom wyszukiwania.

Aby stworzyć nowy układ mobilny dla telefonu, należy w pierwszej kolejności przejrzeć zawartość istniejącej witryny i ustalić, które jej elementy będą odpowiednie dla użytkowników smartfonów. Z uwagi na fakt, że użytkownicy smartfonów przeważnie używają ich podczas podróży i wyświetlają zawartość na mniejszym ekranie, priorytetem jest uproszczenie wyglądu. Oznacza to, że należy publikować wyłącznie taką zawartość, którą łatwo odczytać i obsługiwać na ekranie dotykowym.

  1. Otwórz istniejący plik .muse, dla którego chcesz dodać alternatywny układ na telefony.

  2. Otwórz każdą stronę w projekcie, a następnie kliknij opcję Strona > Dodaj układ alternatywny > Telefon.

    Opcje menu Dodaj układ Telefon
    Dodaj układ Telefon, aby utworzyć witrynę na urządzenia przenośne.

  3. Za pomocą menu możesz wybrać istniejący układ do skopiowania. Na potrzeby tego artykułu wybierz Komputer, aby skopiować układ Komputer do układu Telefon.

    Zwróć uwagę, że możesz oprócz tego skopiować plan witryny, atrybuty stron oraz wypełnienie przeglądarki. Pozostaw ustawienia domyślne, aby skopiować informacje o istniejącej witrynie do układu Telefon.

  4. Kliknij OK, aby zamknąć okno dialogowe i dodać układ Telefon.

    Program Muse utworzy plan witryny dla układu Telefon. Nazwy stron, struktura witryny oraz atrybuty strony wzorcowej zostaną skopiowane. Symbol plusa (+) nie jest już widoczny przy układzie Telefon, ponieważ układ ten został dodany do projektu Muse.

    Z pewnością zauważysz, że zawartość stron nie została dodana do miniatur w układzie Telefon. Jest to działanie celowe. Dzięki temu możesz skopiować tylko tę zawartość, która faktycznie powinna znaleźć się na stronach układu mobilnego. Podczas dodawania żądanej zawartości do kolejnych stron możesz zmienić jej wielkość, aby dostosować ją do mniejszych wymiarów ekranu urządzenia mobilnego.

    Aby dodać nowe strony, należy kliknąć symbol plusa przy prawej krawędzi strony Home. Po utworzeniu mapy witryny możesz zacząć projektowanie dla urządzeń przenośnych.

    Zapoznaj się z następną sekcją, aby dowiedzieć się, jak utworzyć strony wzorcowe dla układu Telefon.

    Utwórz mapę witryny dla układu mobilnego, dodając nowe strony
    Utwórz mapę witryny dla układu mobilnego, dodając nowe strony.

Ustawianie strony wzorcowej i dodawanie popularnych elementów witryny

  1. W widoku Planowanie kliknij dwukrotnie stronę wzorcową telefonu, aby otworzyć ją w oknie Projekt.

  2. Otwórz interfejs Wypełnianie przeglądarki, aby ustawić obraz tła.

  3. Kliknij Dodaj obraz w sekcji Obraz. Wyszukaj i wybierz obraz, który chcesz ustawić jako obraz tła.

    Dodaj obraz – opcje
    Dodaj obraz tła do strony wzorcowej układu Telefon.

  4. Ustaw opcję Dopasowanie na Skaluj do wypełnienia i kliknij centralną pozycję.

  5. Kliknij szary obszar poza stroną lub panel sterowania, aby zamknąć interfejs Wypełnienie przeglądarki.

Dodawanie hiperłączy dla lepszej nawigacji

Program Adobe Muse umożliwia tworzenie łączy do zewnętrznych stron, plików do pobrania, danych sekcji witryn internetowych i innych za pomocą opcji Hiperłącza. Dzięki utworzeniu odpowiedniej nawigacji w witrynie możesz się upewnić, że osoby odwiedzające będą mogły z łatwością poruszać się pomiędzy jej stronami. Dobrze zaprojektowany schemat nawigacji pomaga zoptymalizować witrynę dla wyszukiwarek internetowych. Więcej informacji zawiera temat Tworzenie hiperłączy.

Menu rozwijane Hiperłącza zawiera listę stron i zakotwiczonych łączy dodanych do twojej mapy witryny. Aby wyszukać żądane łącza, zacznij wpisywać nazwę strony lub zakotwiczenia. Wystarczy, że wpiszesz kilka początkowych liter, a w menu Hiperłącza wyniki wyszukiwania zostaną przefiltrowane i wyświetlone na rozwijanej liście. Ułatwia to dostęp do łączy, które mają zostać zaktualizowane.

Hiperłącza – opcje
Przefiltruj listę łączy, wpisując pierwsze litery nazwy w polu menu Hiperłącza.

Dodawanie zawartości do stron w układzie Telefon

Rozpoczniemy od sfinalizowania strony Home.

  1. Kliknij kartę Interior (Telefon). Skopiuj cała grupę czterech ponumerowanych przycisków.
  2. Za pomocą funkcji Przejdź do strony przeskocz na stronę Home (Telefon) i wklej skopiowaną grupę. Łącza dodane w poprzedniej sekcji zostają zachowane, dzięki czemu zarówno strona Home, jak i Interior korzystają z tych samych elementów nawigacyjnych.
  3. Za pomocą narzędzia Zaznaczanie umieść grupę na środku strony Home w pobliżu dolnej części nagłówka.
  4. Kliknij kartę scratch (Komputer), aby wrócić na stronę scratch. Skopiuj ramkę tekstową znajdującą się z lewej strony, która zawiera tekst „There's more than one way to solve a problem”.
  5. Kliknij kartę Home (Telefon) i wklej ramkę tekstową. Za pomocą narzędzia Zaznaczanie umieść ramkę tekstową na środku strony tuż nad grupą przycisków.
Projekt strony Home jest gotowy
Projekt strony Home jest gotowy.

Teraz dodasz zawartość do strony Section 01.

  1. Kliknij kartę scratch (Komputer), aby wrócić na stronę scratch. W drugim zasobniku od lewej zaznacz biały prostokąt tła z zaokrąglonymi narożnikami oraz trzy ramki tekstowe. Trzy ramki tekstowe obejmują kółko 01, tekst zastępczy Section 01 oraz pomarańczowy przycisk Phone. Skopiuj zaznaczone elementy.
  2. Użyj skrótu Command+J (Macintosh) lub Control+J (Windows), a następnie wprowadź pierwsze litery słowa Section 01. Naciśnij jeden raz klawisz strzałki w dół, aby zaznaczyć stronę Section 01 w układzie Telefon, a następnie naciśnij klawisz Return/Enter, aby ją otworzyć w widoku Projektowanie.
  3. Wklej skopiowane elementy na stronie Section 01 układu Telefon. Za pomocą narzędzia Zaznaczanie wyśrodkuj je na stronie za pomocą tymczasowych linii pomocniczych.

Strona Section 01 zawiera krótki opis działalności oraz ułatwia użytkownikom urządzeń mobilnych nawiązanie połączenia telefonicznego z firmą. Podczas projektowania witryn mobilnych można dodać nowy typ łącza, który umożliwia osobom odwiedzającym wywołanie klawiatury ekranowej za dotknięciem ekranu i wybranie numeru telefonicznego. To bardzo użyteczna funkcja, która ułatwia potencjalnym klientom nawiązanie kontaktu telefonicznego z firmą.

Aby dodać w układzie mobilnym łącze umożliwiające wybranie numeru, wykonaj poniższe kroki:

  1. Za pomocą narzędzia Zaznaczanie zaznacz przycisk Phone.
  2. W polu tekstowym menu Hiperłącza wpisz numer telefonu w następującym formacie:
    tel:+14155551234

Format ten jest rozpoznawany przez przeglądarki mobilne jako numer telefonu.

  1. Naciśnij klawisz Return lub Enter, aby zapisać łącze.

Uwaga: jeśli wolisz utworzyć łącze e-mail, w polu tekstowym menu Hiperłącze użyj następującego formatu:
mailto:designers@design-is-fun.com

Po dodaniu łącza do przycisku Phone projekt strony Section 01 jest gotowy.

  1. Kliknij kartę scratch (Komputer), aby wrócić na stronę scratch. Zaznacz biały prostokąt z zaokrąglonymi narożnikami, zielone kółko 02, ramkę tekstową Section 02, osadzoną mapę oraz zielony przycisk Map. Skopiuj zaznaczone elementy.
  2. Użyj skrótu Command+J (w systemie Mac) lub Control+J (w systemie Windows), a następnie wprowadź pierwsze litery słowa Section 02. Naciśnij klawisz strzałki w dół, aby zaznaczyć stronę Section 02 w układzie Telefon, a następnie naciśnij klawisz Return/Enter, aby ją otworzyć w widoku Projektowanie.
  3. Wklej elementy skopiowane w kroku 1 na stronie Section 02 układu Telefon. Za pomocą narzędzia Zaznaczanie wyśrodkuj je na stronie za pomocą linii pomocniczych wyrównywania.

Strona Section 02 zawiera osadzony kod HTML, który został wygenerowany w serwisie Mapy Google w celu utworzenia interaktywnej mapy.

Jeśli korzystasz z samouczka Pierwsze kroki w programie Muse, pamiętasz zapewne kopiowanie kodu źródłowego z serwisu Mapy Google i wklejanie go na stronie za pomocą funkcji osadzonego kodu HTML w programie Muse.

Kod z serwisu Mapy Google obsługuje gesty wykonywane palcami na ekranie dotykowym, dzięki czemu osoby odwiedzające mogą wchodzić w interakcje z mapą. Na potrzeby tego przykładowego projektu wymiary mapy zostały wcześniej dostosowane.

Jeśli jednak zechcesz zmienić wymiary osadzanej zawartości HTML, możesz kliknąć ją prawym przyciskiem myszy i wybrać pozycję Edytuj HTML, aby wyświetlić kod HTML w osobnym oknie. Edytując kod możesz zmienić wysokość i szerokość mapy, aby dopasować ją do mniejszego ekranu.

Zmiana wymiarów osadzonych elementów HTML w kodzie
Jeśli chcesz zmienić wymiary osadzonych elementów HTML, skorzystaj z okna edycji kodu.

Jeśli zostało otwarte okno Edytuj HTML, kliknij OK, aby je zamknąć bez wprowadzania zmian.

  1. Zaznacz przycisk Mapa.

Tym razem dodasz łącze do witryny zewnętrznej (Mapy Google), aby zapewnić użytkownikom urządzeń mobilnych podgląd pełnej wersji mapy w nowym oknie przeglądarki.

  1. Skopiuj poniższe łącze i wklej je do pola tekstowego w menu Hiperłącza:

https://maps.google.com/maps?q=adobe+systems,+san+francisco&hl=en&sll=37.269174,-119.306607&sspn=17.492546,19.160156&hq=adobe+systems,&hnear=San+Francisco,+California&t=m&z=14

  1. Kliknij słowo Hiperłącza na lewo od menu Hiperłącza. W wyświetlonym oknie dialogowym zaznacz pole wyboru Otwórz łącze w nowym oknie lub na nowej karcie. W polu Podpowiedź wpisz następujący tekst Map to Adobe Fremont.
Hiperłącze – opcje
Ustaw otwieranie łącza w nowym oknie przeglądarki i dodaj podpowiedź.

  1. Kliknij poza oknem dialogowym Hiperłącza, aby je zamknąć.

Teraz dodasz zawartość do strony Section 03.

  1. Kliknij kartę scratch (Komputer), aby wrócić na stronę scratch. Zaznacz biały prostokąt z zaokrąglonymi narożnikami, fioletowe kółko 03, ramkę tekstową Section 03, formularz kontaktowy oraz przycisk wysyłania. Skopiuj zaznaczone elementy.
  2. Użyj skrótu Command+J (w systemie Mac) lub Control+J (w systemie Windows), a następnie wprowadź pierwsze litery słowa Section 03. Naciśnij klawisz strzałki w dół, aby zaznaczyć stronę Section 03 w układzie Telefon, a następnie naciśnij klawisz Return/Enter, aby ją otworzyć w widoku Projektowanie.
  3. Wklej elementy skopiowane w kroku 1 na stronie Section 03 układu Telefon. Za pomocą narzędzia Zaznaczanie wyśrodkuj je na stronie za pomocą linii pomocniczych wyrównywania. Style zastosowane wobec widżetu Formularz kontaktowy w układzie Komputer zostają zachowane po jego skopiowaniu do układu Telefon. Jedyna zmiana mająca na celu przystosowanie formularza do układu mobilnego dotyczy dostosowania rozmiarów formularza i jego elementów do wymagań mniejszego ekranu.

Strona Section 03 zawiera widżet Formularz kontaktowy, który przetwarza dane wysłane za pomocą formularza, wykorzystując w tym celu skrypty serwerowe i bazę danych Business Catalyst. Po kliknięciu Publikowanie i przesłaniu plików witryny z programu Muse funkcja formularza działa automatycznie.

Uwaga! Wprawdzie gotowa witryna Muse może być hostowana przez dowolnego dostawcę takiej usługi, należy pamiętać, że w celu zapewnienia prawidłowego działania formularza w przypadku hostingu na serwerach innych niż Business Catalyst wymagana jest edycja kodu.

Na potrzeby tego przykładowego projektu w formularzu wyłączono funkcję CAPTCHA. CAPTCHA to jedno z ustawień w menu Opcje widżetu Formularz kontaktowy, które można dodać, aby upewnić się, że formularze będą wysyłane przez osoby, a nie tzw. spam boty. Interfejs funkcji CAPTCHA wyświetla obraz przedstawiający serię znaków, które osoba odwiedzająca musi wpisać w odpowiedniej kolejności, aby wysłać wiadomość za pośrednictwem formularza. Choć wiadomości wysyłane przez spam boty stanowią pewną niedogodność, należy także wziąć pod uwagę łatwość obsługi witryny w urządzeniu mobilnym. Jeśli formularz będzie zbyt skomplikowany do uzupełnienia, może to zniechęcić osoby odwiedzające do jego wysłania.

Strona Section 03 jest gotowa. Nie jest konieczne dodanie łącza do przycisku Submit, ponieważ jest on już skonfigurowany jako element widżetu Formularz kontaktowy.

Ostatnia strona układu Telefon, Section 04, zawiera widżet Pokaz slajdów. Widżety programu Muse są projektowane i testowane pod kątem zgodności ze wszystkimi nowoczesnymi przeglądarkami dla komputerów stacjonarnych i urządzeń mobilnych, więc nie musisz wprowadzać jakichkolwiek zmian w ustawieniach w celu uruchomienia pokazu slajdów na ekranie dotykowym.

Wykonaj poniższe kroki, aby skopiować zawartość ze strony scratch w układzie Komputer i wkleić ją na stronie Section 04 w układzie Telefon:

  1. Kliknij kartę scratch (Komputer), aby wrócić na stronę tymczasową. Zaznacz długi, biały prostokąt tła, czerwone kółko 04, widżet Pokaz slajdów oraz ramkę tekstową Section 04. Możesz użyć narzędzia Zaznaczanie, aby zaznaczyć wszystkie elementy naraz i przeciągnąć je. Skopiuj zaznaczone elementy.
  2. Użyj skrótu Command+J (Macintosh) lub Control+J (Windows), a następnie wprowadź pierwsze litery słowa Section 04. Naciśnij klawisz strzałki w dół, aby zaznaczyć stronę Section 04 w układzie Telefon, a następnie naciśnij klawisz Return/Enter, aby ją otworzyć w widoku Projektowanie.
  3. Wklej elementy skopiowane w kroku 1 na stronie Section 03 układu Telefon. Za pomocą narzędzia Zaznaczanie wyśrodkuj je na stronie za pomocą linii pomocniczych wyrównywania. Style zastosowane wobec widżetu Pokaz slajdów w układzie Komputer zostają zachowane po jego skopiowaniu do układu Telefon. Jedyna zmiana mająca na celu przystosowanie pokazu do układu mobilnego dotyczy dostosowania rozmiarów pokazu i jego elementów do wymagań mniejszego ekranu. Podczas dodawania widżetów z funkcjami interaktywnymi (takich jak Pokaz slajdów) do układów mobilnych tworzonych w programie Muse, zwrócisz uwagę, że w panelu Opcje jest dostępna pozycja Włącz przesuwanie palcem. Ustawienie to jest domyślnie włączone, zatem wszelkie widżety dodane do projektów mobilnych są automatycznie konfigurowane do obsługi gestów wykonywanych na ekranach dotykowych. Strona Section 04 zawiera widżet Pokaz slajdów, który po dotknięciu miniatury wyświetla właściwy obraz. Pokaz slajdów jest skonfigurowany do przełączania kolejnych zdjęć za pomocą przejść poziomych. Do wyświetlania zdjęć w tym przykładzie jest wymagana interakcja ze strony użytkownika. Jeśli chcesz, możesz jednak ustawić widżet Pokaz slajdów w taki sposób, aby po wczytaniu strony zdjęcia były wyświetlane automatycznie i w kolejności.

Uwaga! Jeśli ustawisz w widżecie przejście Blaknięcie, Poziomo lub Pionowo, kod programu Muse automatycznie włączy gest przesuwania palcem. Dzięki temu osoby odwiedzające mogą przeglądać slajdy, przesuwając palcem po ekranie.

W następnej części zatytułowanej Projektowanie układów dla urządzeń mobilnych w programie Muse dowiesz się, jak w łatwy sposób aktualizować zasoby na wszystkich platformach mobilnych oraz jak opublikować każdy z układów witryny Muse.

Aktualizacja i optymalizacja zasobów do obsługi stron mobilnych

Tablety i smartfony ustępują komputerom stacjonarnym pod względem wydajności procesora, szybkości transferu i mniejszej pojemności pamięci. W rezultacie podczas projektowania witryn dla urządzeń mobilnych należy wziąć pod uwagę związane z nimi ograniczenia.

Program Muse zapewnia funkcje, które mogą pomóc w zoptymalizowaniu grafiki wyświetlanej w układach mobilnych w celu zagwarantowania szybkiego wczytywania i płynnego działania stron.

  1. Użyj skrótu klawiaturowego Command/Control+7, aby wyświetlić układ Komputer, a następnie kliknij dwukrotnie stronę A-Master, aby otworzyć ją w widoku Projektowanie.
  2. Otwórz panel Zasoby, klikając jego kartę w zasobniku po prawej. Jeśli panelu nie ma w zasobniku, wybierz polecenie Okno > Zasoby.
  3. Zaznacz duży obraz tła przedstawiający zielone wzgórza. W panelu zostanie podświetlony odpowiedni zasób.
  4. Kliknij nazwę zasobu (background.jpg), aby rozwinąć listę jego instancji w witrynie. Zwróć uwagę, że plik obrazu tła występuje na liście trzy razy z dwiema różnymi ikonami, które informują o tym, że występuje on zarówno w układzie Telefon, jak i Komputer.
Panel Zasoby
Sprawdź instancje pliku background.jpg w panelu Zasoby, aby sprawdzić, gdzie w witrynie można go znaleźć.

W tej przykładowej, małej witrynie lista zasobów nie jest zbyt obszerna, jednak podczas tworzenia zaawansowanych witryn może się ona znacznie wydłużyć, co utrudnia jej przeszukiwanie.

Aby ułatwić nawigowanie w ramach listy zasobów, można zaznaczyć pierwszy element każdego z zasobów, a następnie kliknąć strzałkę obok niego, aby zwinąć zestaw. Ponowne kliknięcie strzałki skutkuje rozwinięciem zestawu i umożliwia podgląd pełnej listy instancji w celu sprawdzenia wystąpień zasobu w witrynie.

Jeśli chcesz odnaleźć zasoby wykorzystywane w określonym układzie, kliknij górną część kolumny z prawej strony panelu Zasoby, w której są wyświetlane ikony komputera, tabletu i telefonu. W ten sposób możesz posortować zasoby wg układu, aby były wyświetlane w jednym zestawie.

Panel Zasoby
Kliknij kafelek dowolnej kolumny w panelu Zasoby, aby posortować pozycje wg typu.

Jeśli chcesz dokonać zmiany w grafice, która spowoduje aktualizację jej wszystkich instancji (we wszystkich układach), możesz kliknąć nazwę zasobu prawym przyciskiem myszy i wybrać w menu kontekstowym opcję Edytuj oryginał.

Wybierz opcję Edytuj oryginał, aby zaktualizować zasób w ramach całej witryny
Wybierz opcję Edytuj oryginał, aby zaktualizować zasób w ramach całej witryny.

Oryginał umieszczonego pliku zostanie otwarty w programie Photoshop, Fireworks lub innym, w którym został utworzony obraz, co umożliwia szybkie wprowadzenie zmian.

Po zapisaniu poprawionego pliku i powrocie do programu Muse obok elementu w panelu Zasoby pojawi się ikona braku synchronizacji, która informuje o tym, że wersja grafiki w witrynie nie jest zgodna z plikiem źródłowym. Kliknij plik ponownie prawym przyciskiem myszy i wybierz opcję Aktualizuj, aby zaktualizować wszystkie wystąpienia tak, aby używały nowej wersji grafiki.

Za pomocą funkcji Aktualizuj zweryfikuj wszystkie instancje zasobu wykorzystywane w witrynie
Za pomocą funkcji Aktualizuj zweryfikuj wszystkie instancje zasobu wykorzystywane w witrynie.

Podgląd układów mobilnych

Podgląd tworzonych projektów witryn można uzyskać na kilka sposobów:

W widoku Projektowanie układu Komputer kliknij przycisk Podgląd, aby wyświetlić zawartość HTML, CSS i JavaScript we wbudowanym emulatorze opartym na silniku Webkit. Funkcja podglądu umożliwia testowanie wyglądu układów w przeglądarce przed opublikowaniem witryny i sprawdzeniem jej w trybie online za pomocą urządzenia mobilnego.

W widoku Projektowanie układu Telefon kliknij przycisk Podgląd, aby wyświetlić układ Telefon. W menu Rozmiar podglądu możesz wybrać ustawienia iPhone 4, iPhone 5, Samsung Galaxy S III lub Nokia Lumia 920, aby sprawdzić wygląd układu na różnych ekranach.

Podgląd układu mobilnego
Menu Rozmiar podglądu jest dostępne w oknie podglądu układu Telefon lub Tablet.

Kliknij ikonę na prawo od okna Rozmiar podglądu, aby uzyskać podgląd w orientacji pionowej lub poziomej.

Menu Rozmiar podglądu zapewnia predefiniowane proporcje wysokości i szerokości, które obejmują najpopularniejsze rozmiary ekranu telefonów komórkowych.

Ekrany niektórych smartfonów, np. Motorola Droid, są szersze od innych. Jeśli osoba odwiedzająca dysponuje szerszym ekranem, funkcja Viewport programu Muse automatycznie skaluje układ Telefon, aby dostosować ja do dostępnej szerokości ekranu smartfonu.

W oknie Podgląd możesz klikać łącza i odwiedzać poszczególne strony. Możesz przewijać ekran, symulując przesuwanie palcem, jednak najskuteczniejszy będzie test witryny w urządzeniu mobilnym.

Kliknięcie ikony informacyjnej (i) znajdującej się obok menu Rozmiar podglądu w oknie Podgląd powoduje wyświetlenie uwagi wraz z łączem do opisu narzędzia firmy Adobe o nazwie Edge Inspect. Narzędzie Edge Inspect umożliwia podłączenie urządzeń mobilnych do komputera za pomocą wtyczki do przeglądarki Chrome. Następnie można je zsynchronizować z zawartością wyświetlaną w oknie przeglądarki Chrome na komputerze.

Dzięki Edge Inspect można wyświetlić witrynę w przeglądarce Chrome za pośrednictwem funkcji Podgląd w przeglądarce dostępnej w programie Adobe Muse, co spowoduje jej wyświetlenie także na ekranach podłączonych urządzeń mobilnych. (Przeglądarka Chrome powinna być ustawiona jako domyślna).

Jeśli chcesz, możesz także kupić rozwiązanie innego dostawcy o nazwie Reflection, które emuluje podłączone urządzenie mobilne i wyświetla jego interfejs na ekranie komputera. Emulator pełni funkcję ekranu dotykowego urządzenia, odzwierciedlając sposób przeglądania witryny za pomocą smartfonu lub tabletu.

Dodatkowe funkcje związane z układami mobilnymi

Stopki zawsze u dołu strony

Podobnie jak we starszych wersjach programu Muse, także w najnowszej możesz zdefiniować region stopki, przesuwając odpowiednio linie pomocnicze. Możesz także ustawić dowolny obiekt jako element stopki, co spowoduje jego wyświetlanie poniżej minimalnej wysokości strony ustawionej we Właściwościach witryny lub poniżej istniejącej zawartości strony w zależności od tego, który z obszarów jest dłuższy.

Określenie zawartości stopki jest pomocne w sytuacji, gdy strony witryny różnią się długością. Położenie stopki dostosowuje się w pionie, dzięki czemu jest ona wyświetlana pod dolną krawędzią strony i nie nachodzi na zawartość.

Opcja Stopka zawsze u dołu strony jest domyślnie włączona. Została ona stworzona z myślą o osobach odwiedzających, które dysponują większymi monitorami. W większości przypadków warto zachować tę opcję włączoną podczas tworzenia witryny. Sprawia ona, że stopka pozostaje w żądanym miejscu, nawet jeśli okno przeglądarki jest znacznie większe od projektu strony internetowej, jak ma to miejsce w przypadku monitorów Apple Cinema Display.

Aby zobaczyć, jak to działa, uzyskaj podgląd witryny Muse w przeglądarce i zmniejsz stronę. Zwróć uwagę, że jeśli za bardzo zmniejszysz zawartość strony względem okna przeglądarki, w obszarze poniżej stopki będzie wyświetlane okno przeglądarki, a nie stopka ustawiona równo z dolną krawędzią.

Podczas tworzenia nowych witryn w programie Muse zauważysz, że opcja Stopka zawsze u dołu strony jest włączona w oknie dialogowym Nowa witryna.

Nowa witryna – opcje
Pole wyboru opcji Stopka zawsze u dołu strony jest automatycznie zaznaczane po utworzeniu nowej witryny.

Ogólnie rzecz biorąc, podczas tworzenia nowych witryn warto korzystać z opcji Stopka zawsze u dołu strony. Jeśli jednak zauważysz, że długość wyświetlanych stron jest większa od żądanej (z racji tego, że strony witryny mają minimalną zawartość, a same strony są krótkie), możesz w każdej chwili wyłączyć tę opcję, usuwając zaznaczenie pola wyboru w oknie dialogowym Właściwości strony.

Wyłącz opcję Stopka zawsze u dołu strony w menu Właściwości strony.
Po utworzeniu witryny zaktualizuj Właściwości strony i wyłącz opcję Stopka zawsze u dołu strony.

Elementy przypięte

Kod generowany przez program Muse jest testowany pod kątem zgodności z większością współczesnych przeglądarek i platform.

Obsługa przypiętych elementów stron jest jednym ze standardów internetowych, które nie są wspólne dla przeglądarek komputerowych i mobilnych. Podczas projektowania witryn dla przeglądarek komputerowych można zaznaczyć wybrany element i przypiąć go do okna przeglądarki za pomocą panelu sterowania. Przypinanie umożliwia zapewnienie spójności elementów nawigacyjnych. Jest ono także pomocne w sytuacjach, gdy dany element ma pozostać w tym samym położeniu niezależnie od tego, jak daleko w dół przewinie stronę osoba odwiedzająca.

W chwili sporządzania tego dokumentu nie wszystkie przeglądarki mobilne obsługują przypięte elementy. W związku z tym podczas projektowania układów Telefon i Tablet należy zastosować alternatywne strategie związane z przypinaniem obiektów.

Projektując układ Telefon lub Tablet, zauważysz, że opcje funkcji Pinezka są nieaktywne (wyszarzone).

Elementy przypięte – opcje
Interfejs funkcji Pinezka w panelu sterowania jest niedostępny podczas projektowania układów mobilnych.

Publikowanie witryny z układami mobilnymi

Witryny z wieloma układami można publikować w programie Muse tak samo jak witryny dla komputerów stacjonarnych. Warto najpierw opublikować witrynę próbną i wyświetlić ją w urządzeniu mobilnym, aby sprawdzić jej funkcjonalność na mniejszym ekranie.

Kliknij przycisk Publikowanie lub wybierz polecenie Plik > Prześlij do hosta FTP, aby przesłać pliki witryny do serwera hostingowego.

W przypadku publikowania witryny Muse z wieloma układami jej aktywna wersja jest dostępna za pośrednictwem pojedynczego adresu URL. Dzięki temu wystarczy zarejestrować jedna nazwę domeny, np.:

http://www.moja-domena.pl

W przypadku publikowania witryny o dwóch lub trzech różnych układach program Muse generuje kod obejmujący skrypty wykrywania, które identyfikują typ komputera lub urządzenia oraz przeglądarkę, w której osoba odwiedzająca otwiera witrynę.

Kod wykrywający rozpoznaje wersję platformy i przeglądarki, po czym automatycznie wyświetla odpowiedni układ. Nie musisz się martwić o wyświetlenie prawidłowego układu — program Muse dostosuje go za ciebie na podstawie wykrytej konfiguracji urządzenia. Wszystko to dzieje się w tle.

Nowe funkcje układów mobilnych w programie Muse umożliwiają optymalizację układu w taki sposób, aby oszczędzić osobom odwiedzającym niepotrzebnego pobierania większych plików. Funkcja układu alternatywnego dostarcza tylko mniejsze i zoptymalizowane pliki obrazów, dzięki czemu witryna działa wydajnie niezależnie od platformy lub przeglądarki.

Więcej informacji na temat pracy z programem Muse można znaleźć w artykułach i samouczkach na stronie Pomoc programu Adobe Muse.

Kopiowanie zawartości pomiędzy stronami za pomocą polecenia Przejdź do strony

Kliknij kartę A-wzorcowa (Komputer), aby otworzyć stronę wzorcową układu Komputer w widoku Projektowanie.

Program Muse ułatwia przełączanie pomiędzy układami dzięki wbudowanemu narzędziu o nazwie Przejdź do strony. Jego przycisk jest dostępny w widoku Projektowanie dowolnego projektu o wielu układach.

  1. Kliknij przycisk Przejdź do strony.
Przycisk Przejdź do strony
Przycisk narzędzia Przejdź do strony przypomina strzałkę wskazującą stronę.

Podczas pracy z wieloma układami przydaje się możliwość szybkiego przeskakiwania pomiędzy dwiema lub więcej stronami. Ułatwia to kopiowanie i wklejanie zawartości.

Uwaga!  Poza kliknięciem przycisku Przejdź do strony możesz także użyć skrótu klawiaturowego Command+J (w systemach Mac) lub Control+J (w systemach Windows).

Zostaje wyświetlone okno dialogowe Przejdź do strony. Zawiera ono pole tekstowe, w którym można wpisać kilka pierwszych liter nazwy strony witryny, co umożliwia przejście do niej bez konieczności wracania do widoku Planowanie.

  1. Wprowadź trzy pierwsze litery nazwy strony, którą chcesz odnaleźć. Na potrzeby tego przykładu wprowadź trzy pierwsze litery słowa Master, czyli „mas”.

Algorytm przeszuka witrynę pod kątem pasujących nazw stron, a następnie wyświetli wyniki na liście poniżej.

  1. Naciśnij dwukrotnie klawisz strzałki w dół, aby zaznaczyć stronęA-Master (Telefon), a następnie naciśnij klawisz Return/Enter, aby ją otworzyć.

Strona A-Master (Telefon) zostanie otwarta do edycji w widoku Projektowanie.

Inną skuteczną metodą przeskakiwania pomiędzy różnymi układami witryny jest używanie nowych skrótów klawiaturowych:

  • Command/Control+7 przywołuje układ Komputer
  • Command/Control+8 przywołuje układ Tablet
  • Command/Control+9 przywołuje układ Telefon

Skróty te są aktywne tylko podczas edycji witryny, która ma odpowiedni układ. Wypróbuj nowe skróty klawiaturowe i znajdź preferowany obieg pracy związany z przełączaniem układów i stron.

W następnej sekcji utworzymy drugą stronę wzorcową do układu Telefon i dodamy do niej elementy projektowe.

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