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.

Projektowanie responsywne jest obsługiwane w programie Adobe Muse – wydanie z lutego 2016 r. lub nowsze. Po utworzeniu witryn internetowych w wersjach wcześniejszych niż wydanie z lutego 2016 r. można przekonwertować je na projekt responsywny.

Dlaczego warto przeprowadzić migrację do układu responsywnego?

Jeśli masz istniejący projekt Adobe Muse, który korzysta z układu alternatywnego, możesz przenieść ten projekt do układu responsywnego. Jeśli jednak masz ochotę, możesz dalej pracować z układami alternatywnymi.  

Responsywne witryny internetowe kojarzą się zwykle z dużą ilością kodu i złożonymi szablonami. Program Adobe Muse po raz pierwszy umożliwia tworzenie responsywnych witryn internetowych bez konieczności edycji kodu i stosowania siatek lub szablonów. Co więcej, wystarczy jeden plik, aby utworzyć responsywną witrynę internetową, która będzie prawidłowo wyświetlana na każdym urządzeniu, bez względu na rozmiar ekranu. Osobne układy to już przeszłość!

Funkcja projektowania responsywnego w programie Adobe Muse ułatwia także aktualizowanie obrazów i tekstu. Nie trzeba poświęcać wielu godzin na wprowadzanie tych samych zmian w poszczególnych układach. Ponadto dzięki funkcji In-Browser Editing można edytować zawartość witryny responsywnej za pomocą przeglądarek.

Program Adobe Muse zapewnia kilka udogodnień podczas projektowania witryny. Użytkownik może wyświetlić lub ukryć określone obiekty w konkretnych punktach przerwania. Przykładem jest możliwość wyświetlania dotykowych opcji menu, gdy witryna jest przeglądana na urządzeniach przenośnych. Można też przypinać obiekty do lokalizacji i zmieniać ich położenie w konkretnych punktach przerwania.

Czytaj dalej, aby dowiedzieć się, jak przeprowadzić migrację bieżących witryn Adobe Muse do układu responsywnego. Migracja witryny do układu responsywnego sprawi, że będzie ona gotowa na przyszłe rozwiązania techniczne.

Jak przeprowadzić migrację układów alternatywnych do układu responsywnego?

Przed migracją witryny do układu responsywnego warto przeczytać przegląd responsywnego projektowania witryn internetowych w programie Adobe Muse.

Aby rozpocząć migrację witryny do układu responsywnego:

  1. Otwórz istniejącą witrynę internetową.

  2. Otwórz każdą stronę w witrynie internetowej i kliknij pozycję Strona > Właściwości strony.

    Kliknij właściwości strony
  3. Na karcie Układ zmień opcję Stała szerokość na Szerokość płynna. W tym oknie można również ustawić minimalną i maksymalną szerokość strony, marginesy i wypełnianie.

    Kliknij przycisk OK.

    Zmień pozycję Szerokość stała na Szerokość płynna
    Zmień pozycję Szerokość stała na Szerokość płynna w oknie Właściwości strony.

  4. Aby upewnić się, że wszystkie nowo dodawane strony również będą płynne, kliknij opcję Plik > Właściwości witryny. Zmień pozycję Szerokość stała na Szerokość płynna w tym oknie.

  5. Wybierz do swojego układu maksymalną szerokość, minimalną szerokość i minimalną wysokość strony.

  6. Kliknij przycisk OK.

  7. Przejdź do strony wzorcowej i poszczególnych stron, aby otworzyć strony z opcją Szerokość płynna.

    Aby efektywnie używać funkcji projektowania responsywnego, wyłącz efekty przewijania. Jeśli chcesz zachować efekty przewijania na konkretnych stronach, kontynuuj pracę z opcją Szerokość stała dla tych stron.

    Po otwarciu strony z opcją Szerokość płynna domyślnie obiekty na tej stronie są ustawione na Szerokość stałą. Obiekty są również przypięte do lewej strony.

  8. Zmień obiekty na płynne, aby zmieniały rozmiar proporcjonalnie do szerokości przeglądarki. Kliknij prawym przyciskiem myszy każdy obiekt, który ma być płynny, i wybierz opcję Responsywne.

    Usuń przypinanie, jeśli obiekty mają być płynne. Aby usunąć przypinanie, kliknij obiekt prawym przyciskiem myszy i wybierz opcję Przypnij do strony > Płynne.

  9. Użyj suwaka, aby zobaczyć układ strony w różnych szerokościach przeglądarki.

    Można zauważyć, że niektóre widżety nie są płynne. Jeśli widżety powodują, że projekt nie wygląda dobrze, należy dodać punkty przerwania w tych szerokościach stron. Można wtedy zmienić rozmiar widżetu lub ukryć go dla danego punktu przerwania.

    Domyślnie pasek punktu przerwania nie jest widoczny, gdy pracujesz z witryną utworzoną w poprzednich wersjach programu. Aby wyświetlić punkty przerwania, kliknij Widok > Pokaż punkty przerwania.

    Wyświetlanie punktów przerwania za pomocą menu Widok
    Kliknij Widok > Pokaż punkty przerwania.

    Uwaga:

    Jeśli planujesz użyć projektowania responsywnego, najpierw ustal układ dla stron o największej szerokości strony. Następnie wyświetl strony w różnych szerokościach przeglądarki, używając suwaka. Jeśli twój projekt nie wygląda dobrze, dodaj punkty przerwania w tych szerokościach. Następnie dopasuj układ w tych punktach przerwania.

    Z reguły należy dodawać punkty przerwania w oparciu o układ strony, a nie w oparciu o rozmiar ekranu urządzeń użytkowników.

  10. Dopasuj położenie i rozmiar obiektów oraz sformatuj tekst, aby elementy te były prawidłowo wyświetlane we wszystkich szerokościach przeglądarki. Więcej informacji na temat umieszczania obiektów w układzie responsywnym znajduje się w sekcji Umieszczanie obiektów w responsywnych projektach witryn internetowych.

    Uwaga:

    Podczas umieszczania obiektów należy sprawdzić odległości między obiektami i odległość między obiektem a krawędzią okna przeglądarki. Może być konieczne dopasowanie położenia obiektu lub dodanie kolejnych punktów przerwania, aby rozwiązać problemy projektowe, które pojawiają się między punktami przerwania.

  11. Sprawdź czytelność i wyrównanie tekstu we wszystkich punktach przerwania. Jeśli chcesz zmienić dopasowanie pola tekstowego lub format tekstu w konkretnych szerokościach strony, zobacz sekcję Formatowanie tekstu w układach responsywnych.

  12. Sprawdź podgląd wprowadzonych zmian, przeciągając suwak do określonych punktów przerwania lub wyświetl zmiany w przeglądarce internetowej.

  13. Usuń wszystkie alternatywne układy witryny internetowej, które były utworzone dla innych urządzeń. Projektowanie responsywne umożliwia migrowanie i utrzymanie witryny dla wszystkich urządzeń na jednym obszarze roboczym.

Twoja responsywna witryna internetowa jest teraz gotowa do opublikowania!

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