Przeczytaj ten artykuł, aby dowiedzieć się więcej o punktach przerwania. Dowiedz się, jak przypinać obiekty, zmieniać ich wielkość pod kątem układów responsywnych oraz formatować tekst w punktach przerwania.

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.

W przypadku responsywnego projektu witryny pojedynczy układ obiektów i tekstu może nie być dostosowany do wszystkich rozmiarów ekranów. Obrazy, tekst, widżety i formularze mogą być przesuwane w różnych punktach przerwania. Ramki mogą wykraczać poza stronę, obiekty mogą zderzać się ze sobą, przejrzystość tekstu może się pogorszyć. Obrazy, tekst, widżety i formularze mogą wymagać przesunięcia w różnych punktach przerwania. Dlatego też przemyślane rozmieszczanie obiektów i formatowanie tekstu w taki sposób, aby były odpowiednio wyświetlane na różnych rozmiarach ekranów, staje się nadrzędne. 

Po zaprojektowaniu strony za pomocą suwaka można uzyskać podgląd układu dla różnych rozmiarów ekranów. Jeśli zajdzie konieczność ułożenia obiektów w inny sposób dla konkretnych szerokości okna przeglądarki, można dodać punkty przerwania.

Czytaj dalej, aby dowiedzieć się więcej o punktach przerwania i efektywnym projektowaniu układu za pomocą układu responsywnego Adobe Muse.

Czym są punkty przerwania?

Punkty przerwania w układzie responsywnym reprezentują różne szerokości przeglądarki w pikselach. Dzięki punktom przerwania możesz wizualizować swój projekt w przeglądarkach o różnych szerokościach, a także sprawdzać, jak obiekty znajdujące się na stronie reagują na zmianę szerokości przeglądarki.

Dodawanie punktów przerwania

Domyślnie nowa witryna w programie Adobe Muse zawiera punkt przerwania dla komputera stacjonarnego (960 pikseli szerokości). Możesz zacząć projektowanie układu w tej szerokości. Po ukończeniu projektu możesz przejrzeć układ w różnych szerokościach za pomocą suwaka. Pozwala to na znalezienie i zarejestrowanie szerokości, które powodują, że projekt nie wygląda dobrze. Przykładem może być podzielenie linii tekstu na dwie części lub utworzenie się pionowego stosu obrazów, które wcześniej ułożone były w rzędzie. W przypadku tych szerokości wymagane są dodatkowe punkty przerwania. Po dodaniu wymaganych punktów przerwania możesz dostosować projekt w taki sposób, aby obiekty były prawidłowo wyświetlane.

Na tylnym końcu każdego punktu przerwania program Adobe Muse dodaje do tworzonej strony odpowiednią deklarację dotyczącą zapytań mediów. Zapytania mediów to moduł CSS3 umożliwiający renderowanie zawartości, aby dostosować ją do różnych rozmiarów ekranów. Większość nowoczesnych przeglądarek oferuje możliwość interpretacji zapytań mediów, które odnoszą się do tych punktów przerwania. Gdy użytkownicy będą przeglądać Twoją stronę internetową za pośrednictwem różnych urządzeń, przeglądarka wybierze i wyświetli najodpowiedniejsze zapytanie mediów i odpowiedni układ projektu.

  1. Przeciągnij suwak na pasku punktów przerwania, umieszczając go w miejscu, w którym chcesz dodać punkt przerwania.

  2. Kliknij ikonę na pasku punktów przerwania. Zwróć uwagę, że nowy punkt przerwania jest dodawany na pasku punktów przerwania. Możesz też zobaczyć szerokość przeglądarki punktu przerwania.

    W podobny sposób możesz w razie potrzeby dodawać punkty przerwania na pasku, aby ustawiać określone szerokości przeglądarki.

    Po kliknięciu punktu przerwania aktywny punkt wypełnia się kolorem. Pozostałe punkty przerwania są wyszarzone.

    Uwaga:

    Możliwe jest także dodawanie punktów przerwania poprzez umieszczanie elementów Biblioteki z punktami przerwania w widoku Projektowanie. Otwórz panel Biblioteka, zaznacz obiekt, który chcesz umieścić, kliknij symbol + obok obiektu i przeciągnij obiekt do widoku Projektowanie.

Gdzie mogę dodać punkty przerwania?

Możesz dodać punkty przerwania do stron głównych oraz do pojedynczych stron. Gdy dodasz punkty przerwania do pojedynczej strony, wartości punktu przerwania zostaną zastosowane wyłącznie do danej strony.

Gdy dodasz punkty przerwania do strony wzorcowej, możesz ustalić wedle potrzeb punkty, które będą dodane do poszczególnych stron. Punkty przerwania ze stron wzorcowych pojawią się na poszczególnych stronach jako małe trójkąty. Wystarczy kliknąć przycisk ze znakiem plus (+), aby aktywować te punkty przerwania na poszczególnych stronach.

Punkty przerwania strony wzorcowej
Kliknij przycisk +, aby dodać punkty przerwania strony wzorcowej.

Rozważ następujący scenariusz. Podczas ustalania układu witryny możliwe jest dodanie konkretnych punktów przerwania dla telefonów. Możesz dodać odpowiednie punkty przerwania na stronie wzorcowej w taki sposób, aby były one dostępne na poszczególnych stronach. Podczas późniejszego projektowania poszczególnych stron możesz zastosować te punkty na tych stronach jednym kliknięciem.

Uwaga:

Gdy do pojedynczej strony zastosujesz inną stronę wzorcową, punkty przerwania nowej strony wzorcowej zastępują punkty przerwania poprzedniej strony wzorcowej.

Edycja punktów przerwania

  1. Na pasku punktów przerwania przeciągnij i umieść suwak w żądanym punkcie przerwania. Będzie to zmodyfikowana lokalizacja punktu przerwania.

  2. Jeśli chcesz przejrzeć lub edytować kolor punktu przerwania, kliknij dany punkt przerwania prawym przyciskiem myszy i wybierz opcję Właściwości punktu przerwania lub kliknij punkt przerwania dwukrotnie.

    Możesz tutaj również zmodyfikować kolor punktu przerwania, szerokość i wysokość strony oraz wartość marginesów.

    Właściwości punktów przerwania umożliwiające wyświetlanie i modyfikowanie wartości kolorów i marginesów punktu przerwania
    Zmodyfikuj kolory i wartości punktu przerwania za pomocą okna dialogowego Właściwości punktu przerwania.

  3. Kliknij OK, aby zapisać zmiany.

Uwaga:

Nie można edytować punktów przerwania stron wzorcowych z poziomu pojedynczych stron.

Usuwanie punktów przerwania

  1. Aby usunąć punkt przerwania, należy wykonać jedną z następujących czynności:

    • Kliknij X po lewej stronie aktywnego punktu przerwania.
    • Kliknij pasek punktu przerwania prawym przyciskiem myszy, a następnie wybierz polecenie Usuń punkt przerwania.

    Po usunięciu punktu przerwania zostaną również usunięte powiązane zmiany układu oraz ustawienia tekstu danego punktu przerwania.

    Usuwanie punktów przerwania
    Kliknij symbol x, aby usunąć punkt przerwania.

    Usuwanie punktów przerwania za pomocą kliknięcia prawym przyciskiem myszy
    Kliknij prawym przyciskiem myszy i usuń punkty przerwania.

    Uwaga:

    Nie można usunąć punktu przerwania strony wzorcowej z poziomu pojedynczej strony.

Przełączanie między punktami przerwania

Z bieżącego punktu przerwania można przejść do następnego lub poprzedniego. Aby przejść do poprzedniego lub następnego punktu przerwania, wykonaj następujące czynności:

  • Użytkownicy systemu Windows: 
    • Poprzedni punkt przerwania – naciśnij kombinację klawiszy Ctrl + Shift + 5
    • Następny punkt przerwania – naciśnij kombinację klawiszy Ctrl + Shift + 6
  • Użytkownicy systemu Mac OS:
    • Poprzedni punkt przerwania – naciśnij kombinację klawiszy Cmnd + Shift + 5
    • Następny punkt przerwania – naciśnij kombinację klawiszy Cmnd + Shift + 6

Praca z obiektami w układzie responsywnym

Można korzystać z następujących opcji, aby upewnić się, że dany układ wygląda dobrze we wszystkich punktach przerwania:

  • Pokaż/ukryj obiekty: możesz opcjonalnie ukryć obiekt w punkcie przerwania, jednocześnie pokazując go w innym punkcie przerwania. Aby uzyskać więcej informacji, zobacz temat Wyświetlanie lub ukrywanie obiektów.
  • Umieszczanie obiektów w różnych punktach przerwania: możesz umieścić pojedynczy obiekt w różnych pozycjach w różnych punktach przerwania. Więcej informacji można znaleźć w sekcji Umieszczanie obiektów w responsywnych projektach witryn internetowych.
  • Korzystanie z przypinania responsywnego: możesz zdecydować, które obiekty będą statyczne, a które płynne. Możesz przypiąć statyczne obiekty, aby pozostały w tym samym miejscu we wszystkich punktach przerwania. Więcej informacji zawiera temat Przypinanie responsywne.
  • Zmiana rozmiaru obiektów: możesz ustawiać różne rozmiary obiektu dla każdego punktu przerwania. Możesz również ustawić obiekt tak, aby automatycznie dopasować jego rozmiar na podstawie szerokości strony. Więcej informacji na temat zmiany rozmiaru obiektów można znaleźć w temacie Zmiana rozmiaru obiektów.
  • Formatowanie tekstu w różnych punktach przerwania: możesz formatować tekst na różne sposoby w różnych punktach przerwania, aby zwiększyć przejrzystość i czytelność tekstu dla różnych szerokości przeglądarki. Więcej informacji można znaleźć w sekcji Formatowanie tekstu w układach responsywnych.

Wyświetlanie lub ukrywanie obiektów

Można rozważyć następujący scenariusz: dodano tradycyjne menu dla komputerów. Jednak to menu zajmuje zbyt dużo miejsca na ekranach tabletów. Menu typu „kanapka” lub „harmonijka” działa lepiej na tabletach.

Podczas tworzenia responsywnych witryn internetowych w programie Adobe Muse można bardzo łatwo znaleźć rozwiązania dla podobnych scenariuszy. Można wyświetlać tradycyjne menu dla komputerów i menu „kanapka” dla tabletów, jak pokazano na następujących ilustracjach.

Pokazywanie lub ukrywanie obiektów w układzie responsywnym
Pokaż tradycyjne menu i ukryj menu „kanapka” w widoku na komputery.

Pokazywanie lub ukrywanie obiektów w układzie responsywnym
Pokaż menu „kanapka” w widoku na urządzenia mobilne i ukryj tradycyjne menu.

Aby pokazać lub ukryć obiekty w projekcie Adobe Muse:

  1. Wstaw wszystkie żądane obiekty, łącznie z tymi, które zamierzasz ukryć w niektórych punktach przerwania.

  2. Przeciągnij suwak, aby przejść do widoku określonego punktu przerwania.

  3. Kliknij prawym przyciskiem myszy obiekt, który chcesz ukryć i wybierz opcję Ukryj w punkcie przerwania.

    Obiekt jest ukryty w bieżącym widoku punktu przerwania, ale jest widoczny w innych punktach przerwania. Jeśli chcesz ukryć obiekt we wszystkich innych punktach przerwania, kliknij opcję Ukryj w innych punktach przerwania. Możesz później wyświetlić obiekt w konkretnych punktach przerwania, korzystając z panelu Warstwy.

    Ukrywanie obiektów w punktach przerwania
    Ukrywanie obiektów w punktach przerwania

    Teraz rozmieść obiekty widoczne w widoku punktu przerwania.

  4. Przejdź do widoku punktu przerwania, w którym chcesz pokazać wcześniej ukryty obiekt. Możesz przesunąć w tym celu suwak.

  5. Kliknij panel Warstwy i odszukaj warstwę obiektu, który chcesz wyświetlić. Aby zlokalizować daną warstwę obiektu, może być konieczne przeszukanie różnych warstw.

    Pokazywanie lub ukrywanie obiektów za pomocą panelu Warstwy
    Użyj panelu Warstwy, aby ukryć/pokazać obiekty.

  6. Kliknij pierwszą kolumnę odpowiadającą warstwie obiektu. Pojawi się mała czarna kropka, informując, że obiekt jest teraz widoczny w bieżącym widoku punktu przerwania.

    Pokazywanie lub ukrywanie obiektów za pomocą kliknięcia
    Kliknij pierwszą kolumnę, aby wyświetlić lub ukryć obiekty.

    Aby pokazać ukryty obiekt we wszystkich punktach przerwania, kliknij obiekt prawym przyciskiem myszy i wybierz polecenie Pokaż w innych punktach przerwania.

Położenie obiektów

Można ustawić obiekty w różny sposób w różnych widokach punktów przerwania. Przykładowo można ustawić obrazy w poziomie w widoku na komputery oraz w pionie w widoku na urządzenia mobilne.

Program Adobe Muse zapamiętuje położenie obiektów i wyświetla je z uwzględnieniem zmian rozmiarów ekranu.

Układ obiektów w widoku na komputery
Poziomy układ obiektów w widoku na komputery.

Układ obiektów w widoku na urządzenia mobilne.
Pionowy układ obiektów dla urządzeń mobilnych.

Aby przesunąć obiekty pomiędzy punktami przerwania, wykonaj następujące czynności:

  1. Zaznacz punkt przerwania, w którym chcesz umieścić obiekt.

  2. Przeciągnij obiekt i umieść go w żądanym położeniu.

    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.

Przesuwanie wielu obiektów jako grupy

Możesz przesunąć jednocześnie grupę obiektów w układzie responsywnym. Jeśli chcesz przenieść grupę obiektów wyrównanych w pionie, wystarczy zaznaczyć obiekt u góry. Zauważysz pionowy uchwyt wyświetlony na lewym marginesie w programie Adobe Muse.

Uchwyt przesuwania w pionie w programie Adobe Muse
Przesuń grupę obiektów wyrównanych w pionie.

Gdy klikniesz uchwyt i przesuniesz go w górę lub w dół, zauważysz, że wybrany obiekt oraz wszystkie obiekty pod nim są przesuwane razem jako grupa.

Umieszczanie obiektów z punktami przerwania

Możesz dodać zestaw punktów przerwania, umieszczając element Biblioteki zawierający punkty przerwania w widoku Projektowanie. Otwórz panel Biblioteka (Okna > Biblioteka). Zaznacz element, który chcesz dodać do strony. Kliknij symbol plusa obok elementu i przeciągnij go do widoku Projektowanie.

Dodawanie punktów przerwania za pomocą elementów Biblioteki
Umieszczanie obiektów z punktami przerwania za pomocą kliknięcia symbolu +

Zwróć uwagę na zestaw punktów przerwania, które są automatycznie dodawane do strony. Jeśli dodasz element Biblioteki zawierający punkty przerwania, jeśli punkty przerwania już wcześniej zostały dodane do strony, wszystkie punkty przerwania zostaną aktywowane.

Możesz wykorzystać elementy Biblioteki zawierające punkty przerwania, aby szybko skopiować punkty przerwania na różnych stronach, a nawet w różnych plikach .muse.

Przypinanie obiektów

W programie Adobe Muse możesz użyć opcji przypinania, jeśli chcesz sprawić, by wybrane obiekty stały się statyczne. Możesz przypiąć obiekt do strony lub przeglądarki.

  • Przypnij obiekty do przeglądarki: możesz przypiąć obiekt do przeglądarki, jeśli chcesz, by ten obiekt był stałym elementem, nawet gdy używasz paska przewijania przeglądarki. Przykładowo możesz przypiąć pasek menu, który będzie stałym elementem, nawet gdy użytkownik przewija stronę w dół lub w górę. Aby uzyskać więcej informacji na temat przypinania obiektów do przeglądarki, skorzystaj z tego łącza.
  • Przypnij obiekty do strony: możesz przypiąć obiekt do strony, jeśli chcesz, by ten obiekt był stałym elementem w odniesieniu do strony internetowej. Na przykład można przypiąć logo firmy, aby zawsze znajdowało się w prawym górnym rogu strony.

Czytaj dalej, aby zrozumieć, w jaki sposób można przypiąć obiekt do strony w układzie responsywnym.

Uwaga:

Aby określić, czy chcesz przypiąć obiekt, użyj suwaka i wyświetl stronę dla różnych szerokości okna przeglądarki. Jeśli nadal chcesz przypiąć obiekt do strony, wykonaj następujące czynności.

  1. Wybierz obiekt, który chcesz przypiąć.

  2. W opcji Pinezka znajdującej się na górze wybierz jedno z pól, aby przypiąć obiekt do strony.

    Korzystanie z opcji Przypnij do strony w projekcie responsywnym
    Użyj menu Pinezka, aby przypinać obiekty w układzie responsywnym.

  3. Przypnij obiekt do strony w jeden z następujących sposobów:

    • Przypnij do lewej : zaznacz to pole, aby przypiąć obiekt w lewej części strony internetowej. Odległość między krawędzią przeglądarki i lewą krawędzią obiektu pozostaje stała.
    • Przypnij do środka : zaznacz to pole, aby przypiąć obiekt do środka strony. Odległość między lewą i górną krawędzią obiektu i krawędzią przeglądarki pozostaje stała.
    • Przypnij do prawej : zaznacz to pole, aby przypiąć obiekt w prawej części strony internetowej. Odległość między krawędzią przeglądarki i prawą krawędzią obiektu pozostaje stała.

    Na przykład, jeśli masz przycisk Zamów w przedsprzedaży teraz, który powinien być wyświetlany w prawym rogu strony we wszystkich punktach przerwania, musisz zaznaczyć przycisk i przypiąć go do prawej, jak pokazano na ilustracji.

    Kliknij pole, aby przypiąć obiekt do prawej.
    Kliknij pole po prawej stronie, aby przypiąć obiekt do prawej.

    Kiedy przypinasz obiekt do strony, program Adobe Muse wyświetla linię przerywaną od obiektu, aby wskazać pozycję Przypnij do strony. Na kolejnej ilustracji widoczna jest linia przerywana, która rozciąga się do prawej krawędzi strony. To wskazuje, że obiekt jest przypięty do prawej strony.

    Pasek Przypnij do strony
    Przerywane linie wskazują pozycję Przypnij do strony.

  4. Użyj suwaka, aby wyświetlić układ w różnych szerokościach strony. Sprawdź, czy przypinanie wpływa na układ strony podczas zmiany rozmiaru strony.

Zmiana rozmiaru obiektów

  1. Przejdź do widoku punktu przerwania, w którym chcesz zmienić rozmiar obiektu.

  2. Kliknij obiekt prawym przyciskiem myszy i wybierz polecenie Zmień rozmiar > <opcja zmiany rozmiaru>.

    Uwaga:

    Opcja zmiany rozmiaru jest inna dla różnych obiektów. Przykładowo możesz zmienić rozmiar obrazu według szerokości i wysokości w układzie responsywnym, a rozmiar pola tekstowego wyłącznie według szerokości.

    Obiekty, które nie są płynne nie zostały objęte opcją Zmień rozmiar.

  3. Przeciągnij i zmień rozmiar obiektu dla bieżącego punktu przerwania.

    Na przykład w pierwszym obrazie należy zauważyć, że obraz w punkcie przerwania dla 768 pikseli wykracza poza szerokość ekranu. Możesz przeciągnąć i zmienić rozmiar obrazu, aby dopasować go do szerokości strony, jak pokazano na drugiej ilustracji.

    Obraz wykracza poza szerokość strony.
    Obraz wykracza poza szerokość strony.

    Zmień rozmiar obiektów w różnych punktach przerwania.
    Przeciągnij i zmień rozmiar obiektów w różnych punktach przerwania.

  4. Wyświetl podgląd zmiany w przeglądarce. Zmień rozmiar przeglądarki, aby uzyskać szerokość okna przeglądarki określoną w punkcie przerwania. Należy zwrócić uwagę na zmianę rozmiaru obiektu po osiągnięciu przez szerokość przeglądarki wartości punktu przerwania.

Uwaga:

Jeśli elementy w przycisku stanu lub innym kontenerze widżetu są skonfigurowane jako płynne, zmienią położenie lub rozmiar w przypadku zmiany rozmiaru ich kontenera.

Kopiowanie rozmiaru i położenia obiektów

Jeśli chcesz skopiować rozmiar i położenie obiektu w różnych punktach przerwań, wykonaj następujące czynności:

  1. Kliknij prawym przyciskiem myszy obiekt, który chcesz skopiować.

  2. Wykonaj jedną z poniższych czynności.

    • Wybierz polecenie Kopiuj rozmiar i położenie do > <określona wartość punktu przerwania>, aby zastosować bieżący rozmiar i położenie obiektu do danego punktu przerwania.
    • Wybierz polecenie Kopiuj rozmiar i położenie do > Wszystkie punkty przerwania, aby zastosować bieżący rozmiar i położenie obiektu do wszystkich punktów przerwania.

Formatowanie tekstu w układzie responsywnym

W projektach responsywnych ważne jest przygotowanie tekstu dla różnych szerokości przeglądarki, aby był wyraźny i czytelny. Tekst umieszczony w jednym widoku punktu przerwania może zostać nagle zawinięty w innym widoku punktu przerwania. Podczas przechodzenia między punktami przerwania mogą również pojawiać się niechciane podziały wierszy.

Program Adobe Muse umożliwia formatowanie tekstu dla różnych punktów przerwania. Na przykład można ustawić rozmiar czcionki na 20 pkt dla tabletów i 15 pkt dla urządzeń przenośnych.

Formatowanie tekstu w widoku na komputery
Formatowanie tekstu w widoku na komputery

Formatowanie tekstu w widoku na urządzenia przenośne
Formatowanie tekstu w widoku na urządzenia przenośne

Aby formatować tekst w projekcie responsywnym, program Adobe Muse oferuje ikonę formatowania tekstu w panelu, w którym można również znaleźć narzędzie Kadrowanie i narzędzie Zaznaczanie. W ikonie są dostępne dwie opcje. Możesz wybrać jedną z nich, aby sformatować tekst.

Możesz wybrać opcję Formatowanie tekstu pomiędzy punktami przerwania, aby sformatować tekst we wszystkich punktach przerwania na stronie. Po wybraniu tej opcji wystarczy sformatować tekst tylko w jednym widoku punktu przerwania. Tekst będzie automatycznie formatowany dla innych punktów przerwania.

Możesz też wybrać opcję Formatowanie tekstu w bieżącym punkcie przerwania, jeśli chcesz sformatować tekst w konkretnym punkcie przerwania. Na przykład możesz zwiększyć rozmiar tekstu do 24 pkt podczas przygotowywania tekstu dla urządzeń przenośnych.

Formatowanie tekstu jest zapamiętywane i odpowiednio wyświetlane, gdy witryna internetowa jest wyświetlana w przeglądarkach o różnych szerokościach.

Formatowanie tekstu w układzie responsywnym

  1. Przejdź do żądanego widoku punktu przerwania.

  2. Zaznacz pole tekstowe i przeciągnij, aby zmienić jego rozmiar. W przypadku zmiany rozmiaru pola tekstowego następuje ponowne wlanie tekstu.

    Uwaga:

    Prawa krawędź pola tekstowego określa zakres, w którym tekst będzie płynął wszerz w miarę zmieniania rozmiaru pola tekstowego.

  3. Aby sformatować tekst, zaznacz tekst, który ma być sformatowany, a następnie kliknij jedną z następujących opcji.

    • Formatowanie tekstu pomiędzy punktami przerwania, aby sformatować tekst we wszystkich punktach przerwania.
    • Formatowanie tekstu w bieżącym punkcie przerwania, aby sformatować tekst wyłącznie dla bieżącego punktu przerwania.

    Obie te opcje są dostępne w panelu po lewej stronie, w którym znajdują się narzędzia Tekst i Kadrowanie.

    Formatowanie tekstu w punktach przerwania
    Formatowanie tekstu w projekcie responsywnym

    A. Formatowanie tekstu pomiędzy punktami przerwania B. Formatowanie tekstu w bieżącym punkcie przerwania 

    Uwaga:

    Opcja formatowania tekstu w układzie responsywnym powoduje zmianę wyłącznie w formatowaniu tekstu. Nie można zmienić słów lub zawartości dla każdego punktu przerwania.

Kopiowanie formatowania tekstu w różnych punktach przerwania

Jeśli chcesz skopiować rozmiar i położenie tekstu w różnych punktach przerwania lub szerokościach okna przeglądarki, wykonaj następujące czynności:

  1. Zaznacz tekst, który ma zostać skopiowany.

  2. Wykonaj jedną z poniższych czynności.

    • Kliknij prawym przyciskiem myszy i wybierz polecenie Kopiuj formatowanie tekstu do > <określona wartość punktu przerwania>, aby zastosować bieżące atrybuty tekstu do danego punktu przerwania.
    • Kliknij prawym przyciskiem myszy i wybierz polecenie Kopiuj formatowanie tekstu do > Wszystkie punkty przerwania, aby zastosować bieżące atrybuty tekstu do wszystkich punktów przerwania.

    Sprawdź podgląd układu w każdym punkcie przerwania za pomocą suwaka. W razie potrzeby dodaj punkty przerwania, aby zoptymalizować układ dla różnych szerokości przeglądarki.

Stosowanie efektów przewijania w układzie reponsywnym

Możesz dodać efekty przewijania w układzie reponsywnym. Efekty przewijania są obsługiwane w stałych punktach przerwania. Stałe punkty przerwania wskazują, że układ jest ustalony dla danej szerokości strony. Dodaj stały punkt przerwania, wybierz obiekt, do którego chcesz zastosować efekty przewijania, a następnie skonfiguruj ustawienia Efekty przewijania.

  1. Otwórz stronę Adobe Muse, na której chcesz dodać efekt przewijania. Przykładowo możesz dodać efekty przewijania do elementów nawigacyjnych i obrazu w tle w nagłówku.

  2. Po otwarciu układu responsywnego zwróć uwagę na punkty przerwania na stronie. Te punkty przerwania są płynne. Wskazuje na to ikona ze strzałkami w obu kierunkach.

    Płynne punkty przerwania
    Płynne punkty przerwania oznaczone ikoną z podwójną strzałką

    Jeśli wyświetlisz teraz panel Efekty przewijania, zobaczysz, że ta opcja jest wyłączona.

    Efekty przewijania wyłączone dla płynnych punktów przerwania
    Efekty przewijania są wyłączone dla płynnych punktów przerwania

  3. Musisz dodać stały punkt przerwania, aby włączyć efekty przewijania. Aby dodać stały punkt przerwania, kliknij pasek Punkt przerwania, a następnie kliknij opcję Dodaj punkt przerwania. 

  4. Wybierz opcję Stała szerokość z rozwijanego menu i kliknij przycisk OK.

    Dodaj punkt przerwania stałej szerokości
    Dodaj punkt przerwania stałej szerokości

    Stałe punkty przerwania
    Zwróć uwagę na stałe punkty przerwania z ikoną w kształcie kwadratu

    Zwróć uwagę na stały punkt przerwania na stronie oznaczony kwadratem. Jeśli wyświetlisz stronę w oknie przeglądarki o szerokości przekraczającej 1225 pikseli, strona pozostanie niezmieniona i będzie wyświetlana tak, jak przy 1225 pikselach. Układ nie staje się płynny w tym punkcie przerwania.

  5. Zaznacz obiekt, do którego chcesz zastosować efekty przewijania i skonfiguruj ustawienia efektów przewijania.

    Stosowanie efektów przewijania do wybranych obiektów
    Stosowanie efektów przewijania do wybranych obiektów

    Uwaga:

    Efekty przewijania można stosować tylko w stałym punkcie przerwania (nie w innych, płynnych punktach przerwania).

    Aby dowiedzieć się więcej o dodawaniu i używaniu efektów przewijania w programie Adobe Muse, zobacz temat Stosowanie efektów przewijania w programie Adobe Muse.

Często zadawane pytania

Jakie są idealne punkty przerwania w przypadku tworzenia witryny dla komputerów stacjonarnych, tabletów i urządzeń przenośnych?

Jeśli masz urządzenie, pod kątem którego chcesz zaprojektować witrynę, możesz dodać odpowiedni punkt przerwania. Jednak użytkownicy mogą przeglądać witrynę na dowolnych urządzeniach z ekranami o różnych rozmiarach. W związku z tym zaleca się dodawanie punktów przerwania tylko tam, gdzie projekt nie wygląda dobrze. Dzięki temu witryna będzie prawidłowo wyświetlana na dowolnym urządzeniu.

Dlaczego punkty przerwania na stronie wzorcowej nie działają na poszczególnych stronach?

Punkty przerwania strony wzorcowej są wyświetlane jako białe trójkąty na poszczególnych stronach. Aby włączyć takie punkty na poszczególnych stronach, kliknij biały trójkąt na pasku punktów przerwania, a następnie kliknij symbol plusa (+).

Innym sposobem na łatwe przenoszenie punktów przerwania ze strony wzorcowej do określonej strony jest skopiowanie elementu strony wzorcowej, przejście do strony, na której chcemy zastosować punkty przerwania, wybranie polecenia Edycja > Wklej z punktami przerwania, a następnie usunięcie wklejanego elementu z obszaru roboczego. Wprawdzie element zostanie usunięty, ale punkty przerwania ze strony wzorcowej pozostaną nienaruszone.

Jak można zapobiec nakładaniu się pól tekstowych w układzie responsywnym?

Pola tekstowe nie są skalowane i mogą się na siebie nakładać, jeśli nie są „płynne”. Aby pola tekstowe stały się płynne, kliknij każde z nich prawym przyciskiem myszy i wybierz kolejno pozycje Zmień rozmiar >Szerokość responsywna.

Jak usunąć dodatkowy odstęp lub białą przestrzeń w responsywnych witrynach internetowych?

Dodatkowy odstęp lub biała przestrzeń może powstawać z różnych powodów, np. wskutek użycia stopki u dołu strony lub ukrytego obiektu. Więcej informacji na temat rozwiązania tego problemu można uzyskać w tym artykule.

Jak usunąć szary obszar, który pojawia się po włączeniu podglądu witryny?

Gdy w widoku podglądu pojawi się szary obszar, należy sprawdzić, czy w projekcie nie ma zewnętrznych obiektów lub ukrytych obiektów umieszczonych poza obszarem strony. Aby zaznaczyć wszystkie obiekty, kliknij kolejno pozycje Widok > Pokaż krawędzie ramek. Ponadto można zmniejszyć podgląd strony w celu wyświetlenia rozkładu wszystkich obiektów. Sprawdź, czy występuje ukryty lub zewnętrzny obiekt. Jeśli tak, umieść go w obrębie układu w celu rozwiązania tego problemu.

Jak przekształcić wszystkie widżety w obiekty płynne lub responsywne?

Obecnie żaden widżet w programie Adobe Muse nie jest responsywny. Informacje o zachowaniu responsywnym poszczególnych widżetów zawiera ta tabela.

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