Dodawanie tekstu i ramek tekstowych w programie Adobe Muse

Tworząc witrynę internetową, można dodawać tekst w programie Adobe Muse w następujący sposób.

• Dodaj pole tekstowe, a następnie zacznij wpisywać treść wewnątrz pola tekstowego.
• Zapisz tekst w pliku tekstowym i zaimportuj ten plik w na stronę Adobe Muse.
• Użyj aplikacji, np. InDesign, aby skonfigurować układ tekstu. Skopiuj ten wstępnie sformatowany tekst do schowka i wklej go w programie Adobe Muse.

W układzie responsywnym można również sformatować tekst w zależności od urządzenia, na którym użytkownicy przeglądają stronę internetową. Można na przykład zwiększyć tekst dla smartfonów i użyć dodatkowych wypełnień w porównaniu do wersji tekstu dla komputerów stacjonarnych. Ponadto układ responsywny w projektowaniu witryn internetowych w programie Adobe Muse umożliwia formatowanie tekstu dla każdego punktu przerwania. Można zmienić styl, kolor, interlinię, wypełnienie i rozmiar tekstu dla każdego punktu przerwania. Więcej informacji o formatowaniu tekstu podczas tworzenia witryn dla różnych urządzeń w pojedynczym pliku można znaleźć w rozdziale Formatowanie tekstu w układzie responsywnym.

Aby uzupełnić menu, skopiujesz tekst z zewnętrznych plików tekstowych, a następnie wkleisz zawartość do ramek tekstowych. Zajmiesz się także stylizacją tekstu poprzez utworzenie i zastosowanie stylów akapitowych. Wykonaj poniższe kroki:

Jako referencji możesz użyć opublikowanej wersji przykładowej witryny.

Aby dowiedzieć się więcej na temat pracy z tekstem, przeczytaj artykuł Typografia w programie Adobe Muse.

Korzystanie z wbudowanej funkcji sprawdzania pisowni

Program Adobe Muse ma funkcję sprawdzania pisowni, która ułatwia odnajdywanie i poprawianie błędów ortograficznych w ramkach tekstowych. Funkcja sprawdzania pisowni jest zawsze włączona. Wyświetla czerwone podkreślenie pod wyrazami, które nie znajdują się w słowniku.

Jeśli jeden z proponowanych wyrazów jest prawidłowy, naciśnij klawisz strzałki w dół i wskaż wyraz, który chcesz użyć, a następnie naciśnij klawisz Return/Enter. Możesz także zrobić to za pomocą myszy. Jeśli popełnisz błąd i wybierzesz niewłaściwy wyraz, cofnij ostatnią operację (Edycja > Cofnij), a następnie wybierz inny proponowany wyraz lub edytuj błąd za pomocą narzędzia Tekst.

Jeśli wyraz oznaczony jako błąd (np. imię osoby lub nazwa miejsca) został użyty tylko raz i masz pewność, że jest zapisany prawidłowo, nie musisz go poprawiać. Czerwone podkreślenie w widoku Projektowanie nie jest wyświetlane po uzyskaniu podglądu, opublikowaniu lub wyeksportowaniu witryny.

Podczas pracy z często wykorzystywanymi wyrazami, takimi jak nazwy lub adresy firm, warto dodać je do słownika funkcji sprawdzania pisowni, aby uniknąć oznaczania ich jako błędy.

Za pomocą narzędzia Tekst kliknij prawym przyciskiem myszy wyraz, który chcesz dodać do słownika, a następnie wybierz w menu kontekstowym opcję Dodaj do słownika.

Program Muse umożliwia wybór języka (co aktywuje odpowiedni słownik funkcji sprawdzania pisowni) dla całej witryny lub poszczególnych ramek tekstowych.

Aby ustawić słownik funkcji sprawdzania pisowni dla całej witryny, wybierz polecenie Plik > Właściwości witryny. Kliknij zakładkę Tekst, a następnie wybierz w menu Język żądaną pozycję i kliknij OK.

Niektóre projekty witryn wymagają wprowadzenia tekstu w różnych językach. W takiej sytuacji należy ustawić język domyślny (używany najczęściej) we właściwościach witryny, a następnie wybrać język funkcji sprawdzania pisowni dla poszczególnych ramek tekstowych, w których wyświetlana jest zawartość w różnych językach.

Aby ustawić słownik funkcji sprawdzania pisowni dla ramki tekstowej, zaznacz ramkę za pomocą narzędzia Zaznaczanie. Kliknij prawym przyciskiem myszy i wybierz w menu kontekstowym polecenie Język > [wybrany język].

Teraz zajmiemy się aktualizowaniem wyglądu ramki tekstowej. Podobnie jak w przypadku prostokątów i ramek obrazu także w przypadku ramek tekstowych można je stylizować, ustawiając obrys, wypełnienie oraz obraz tła.

Aktualizowanie wyglądu ramek tekstowych

W tej sekcji zajmiemy się aktualizowaniem atrybutów ramki tekstowej, aby odróżnić ją od grafiki tła strony.

Etykieta umieszczona powyżej menu pomaga osobom odwiedzającym witrynę zorientować się, które menu przeglądają. Po dokonaniu zmian gotowe menu śniadaniowe wygląda podobnie do strony przedstawionej na następującej ilustracji.

W następnej sekcji powielimy menu śniadaniowe, a następnie zaktualizujemy zawartość tekstową w powielonych ramkach tekstowych, aby utworzyć menu lunchowe, główne i deserowe.

Powielanie ramek tekstowych

W poprzednich sekcjach utworzyliśmy ramkę tekstową menu śniadaniowego, w której umieściliśmy tekst, oraz zastosowaliśmy style akapitowe w celu zapewnienia spójności formatowania. Na koniec zaktualizowaliśmy wygląd ramki tekstowej, dodając obraz tła ustawiony sąsiadująco oraz ustawiając kolor wypełnienia i obrys. Dodaliśmy także drugą ramkę powyżej ramki menu, tworząc w ten sposób nagłówek ułatwiający identyfikację zawartości. Następny krok polega na powieleniu tego zestawu elementów trzy razy, aby w sumie powstały cztery menu.

Być może udało ci się zauważyć, że podczas przeciągania powielonych menu w dół stopka utworzona Części I automatycznie się przesuwa, tworząc więcej poziomej przestrzeni na stronie. Dzięki temu strona „food” jest dłuższa od pozostałych stron naszej witryny.

Aby stworzyć system nawigacji witryny, który ułatwi osobom odwiedzającym przechodzenie do poszczególnych menu, należy dodać zakotwiczenia nad każdym menu. Z racji długości strony „food” zawartość przewija się w pionie w celu wyświetlenia odpowiedniego menu zgodnie z pozycją klikniętą przez osobę odwiedzającą. Zajmiemy się także pracą z opcją Hiperłącza, za pomocą której utworzymy łącza różnego typu, w tym łącza pobierania, które umożliwią osobom odwiedzającym pobranie pliku PDF.

Wstawianie symboli i znaków specjalnych

Panel Glify umożliwia wstawianie symboli, takich jak ©, oraz znaków specjalnych, takich jak beta (ᵝ), które nie są dostępne na standardowej klawiaturze. Panel Glify umożliwia wstawianie znaków Unicode.

Typ symboli i znaków, które można wstawiać, zależy od wybranej czcionki. Niektóre czcionki mogą na przykład zawierać międzynarodowe znaki (Ç, ë) i symbole walut (£, ¥). Wbudowana czcionka symboli zawiera strzałki, punktory i symbole naukowe.

Aby wstawiać znaki za pomocą panelu Glify, wykonaj poniższe instrukcje.

Zmiana wyglądu ramek tekstowych

Niezależnie od tego, czy użyjesz czcionki internetowej, bezpiecznej czcionki internetowej czy czcionki systemowej, zawartość tekstową możesz w dowolnej chwili przeredagować w widoku Projektowanie. Możesz także zmienić wygląd samej ramki tekstowej, aby wyświetlić blok tekstu w inny sposób.

Ramki tekstowe można porównać do kontenerów zawierających poszczególne sekcje tekstu. Za pomocą szeregu opcji sterowania można dostosować sposób ich wyświetlania w aktywnej wersji witryny.

Jeśli chcesz sformatować i wystylizować ramkę tekstową, zaznacz ją za pomocą narzędzia Zaznaczanie, a następnie zastosuj zmiany, które wpłyną na wygląd zawartości tekstowej.

Uwaga: jeśli zaznaczysz tekst za pomocą narzędzia Tekst, możesz dostosować opcje formatowania w panelu Tekst lub panelu sterowania.

Wielkość ramki tekstowej możesz zmienić, przeciągając odpowiednio jej uchwyty. Możesz także zmienić położenie samej ramki tekstowej, przeciągając ją w żądane miejsce. Podczas dostosowywania wielkości ramki tekstowej w okienku podpowiedzi są wyświetlane jej wymiary.

Ramkę tekstową możesz także obrócić, jednak pamiętaj o tym, że po jej obróceniu (niezależnie od zastosowanych czcionek) zawartość tekstowa zostanie wyeksportowana jako obraz. Funkcji tej należy zatem używać tylko wtedy, gdy jest to naprawdę konieczne.

Aby zaktualizować wygląd kontenera ramki tekstowej, możesz skorzystać z tych samych opcji formatowania, których używasz do edytowania prostokątów. Możesz ustawić kolor wypełnienia ramki, a nawet wybrać obraz jako jej tło. Możesz także ustawić obrys i skorzystać z tych samych opcji jego szerokości, koloru i wyrównania. Za pomocą menu Narożniki i Efekty w panelu sterowania możesz ustawić promień narożnika ramki tekstowej oraz zastosować cienie, fazy i blaski.

Aby dostosować przezroczystość ramki tekstowej, zmień wartość Krycie za pomocą suwaka.

Za pomocą menu i pola Hiperłącze możesz dodać tytuły oraz łącza, a także ustawić opcję otwierania łączy w nowym oknie przeglądarki.

Sterowanie wyrównaniem tekstu oraz oblewaniem tekstem wokół obrazu

Ramki tekstowe znacznie ułatwiają tworzenie zawartości stron. Jak pokazaliśmy w poprzedniej sekcji, ramki tekstowe mogą zawierać elementy graficzne i efekty, a także zawartość tekstową.

W tej sekcji przyjrzymy się sterowaniu zawartością tekstową w ramce poprzez zwiększenie przestrzeni za pomocą odstępów między łamami. Pokażemy też, jak tworzyć układy znane z czasopism, w których tekst jest owinięty wokół obrazów.

Dodawanie odstępów między łamami

Domyślnie tekst wpisywany, umieszczany lub wklejany do ramki jest wyrównany do jej lewej krawędzi. Jeśli przyjrzysz się ustawieniom w panelu Odstępy, zauważysz wszędzie wartość 0.

Aby ustawić większy odstęp od którejkolwiek z krawędzi ramki, wprowadź żądaną wartość (w pikselach) w odpowiednim polu lub kliknij strzałkę w górę lub w dół, aby stopniowo zwiększyć lub zmniejszyć wartość liczbową w polu.

Stosowanie wcięć tekstu oraz sterowanie wartościami interlinii i światła

Formatowaniem tekstu w programie Adobe Muse można sterować w taki sam sposób, jak w edytorach tekstu oraz narzędziach do obróbki zdjęć. Panel Tekst zapewnia wiele dodatkowych ustawień, których część jest niedostępna w panelu sterowania po zaznaczeniu tekstu.

Wykonaj poniższe kroki, aby wciąć pierwszą linijkę tekstu w akapicie:

Opcja Światło w panelu Tekst umożliwia określenie odstępu między poszczególnymi znakami. Opcja ta jest szczególnie przydatna podczas korzystania z efektów tekstowych oraz w kontekście poprawy czytelności czcionek ozdobnych w Internecie.

Opcję światła można zastosować wobec zaznaczonego tekstu, wprowadzając liczbę pikseli w polu Światło. Można ją także dostosować, klikając strzałki w dół lub w górę znajdujące się obok pola aż do uzyskania żądanego efektu.

Kolejną przydatną opcją umożliwiającą sterowanie formatowaniem tekstu w akapitach jest Interlinia. Opcja ta pozwala dostosować odstęp pomiędzy wierszami tekstu. Opcja Interlinia jest dostępna zarówno w panelu sterowania, jak i panelu Tekst.

Pozostałe cztery elementy sterowania typografią dostępne w panelu Tekst to:

Lewy margines i Prawy margines

Jak nietrudno się domyślić, opcje te umożliwiają dostosowanie odstępu między bocznymi krawędziami ramki a tekstem. Przypomina to dostosowywanie opcji Odstęp między łamami w panelu Odstępy z tą różnicą, że w celu dostosowania odstępów między łamami należy zaznaczyć ramkę tekstową za pomocą narzędzia Zaznaczanie (a nie zawartość tekstową za pomocą narzędzia Tekst).

Odstęp przed i Odstęp po

Za pomocą tych ustawień można dostosować ilość przestrzeni wyświetlanej przed lub po znaku powrotu karetki, wyrażoną w pikselach. Umożliwiają one dostosowanie ilości przestrzeni pomiędzy akapitami znajdującymi się w tej samej ramce tekstowej.

Wypróbuj poszczególne ustawienia dostępne w panelu Tekst, aby opanować sterowanie sposobem wyświetlania zawartości tekstowej na projektowanych stronach.

Umieszczanie tekstu z pliku tekstowego na stronie

Pliki źródłowe z zawartością tekstową dla tego przykładowego projektu znajdują się w folderze Kevins_Koffee_Kart. Tekst jest zapisany w plikach TXT. W programie Adobe Muse możliwe jest dodanie tekstu do strony poprzez umieszczenie pliku tekstowego. Nie trzeba otwierać plików tekstowych w edytorze i kopiować/wklejać wierszy na stronę.

Praca z tekstem zsynchronizowanym

Informacje na temat pracy z tekstem zsynchronizowanym można znaleźć w sekcji Praca z tekstem zsynchronizowanym.

Praca z tekstem w układzie responsywnym

Aby dowiedzieć się, w jaki sposób formatować tekst w układzie responsywnym, zobacz sekcję Formatowanie tekstu w układzie responsywnym.