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.

Praca z hierarchicznymi stronami wzorcowymi

Program Muse umożliwia tworzenie stron wzorcowych, które można stosować wobec innych stron wzorcowych. Zasada działania hierarchicznych stron wzorcowych jest podobna do stosowania stron wzorcowych wobec strony w widoku Planowanie. W starszych wersjach programu Muse można było utworzyć wiele stron wzorcowych, jednak wobec witryny internetowej można było jednorazowo zastosować tylko jedną stronę wzorcową z pojedynczym zestawem elementów.

Wcześniej, gdy użytkownik chciał utworzyć witrynę z dwiema podobnymi sekcjami, które różnią się nieznacznie od siebie, należało powielić stronę wzorcową i nieco ją zmienić, a następnie zastosować ją wobec określonych stron. W ten sposób obie strony wzorcowe często zawierały kilka elementów wspólnych. Aktualizacja strony pociągała za sobą konieczność modyfikowania zawartości obu stron wzorcowych w celu zachowania spójności elementów.

Za pomocą programu Muse w wersji 4.0 i nowszych można utworzyć stronę A-wzorcową, która zawiera elementy wspólne wyświetlane na wielu stronach wzorcowych (np. tło i stopkę dodane zgodnie z instrukcjami w poprzedniej sekcji). Następnie należy utworzyć dodatkowe strony wzorcowe, które przejmą wszystkie elementy strony A-wzorcowej oraz będą posiadać własne unikatowe elementy. W przypadku utworzenia trzeciej strony wzorcowej mogła ona używać elementów ze strony A-wzorcowej oraz elementów unikatowych dla drugiej sekcji.   

Hierarchiczne strony wzorcowe zapewniają korzyść w postaci możliwości ograniczenia liczby wystąpień elementu do jednej instancji. W przypadku wprowadzania zmian w projekcie witryny wystarczy edytować każdy element jeden raz, aby wszystkie jego instancje zaktualizowały się automatycznie.

Do zarządzania stronami wzorcowymi i stosowania ich służy widok Planowanie. Podobnie jak w przypadku klikania i przeciągania miniatury strony wzorcowej na miniaturę strony w celu jej zastosowania, po utworzeniu wielu stron wzorcowych można je klikać i przeciągać na inne strony wzorcowe. Można też kliknąć dowolną miniaturę strony wzorcowej lub zwykłej prawym przyciskiem myszy w widoku Planowanie i ustawić stronę wzorcową za pomocą opcji Wzorce.

Zwróć uwagę, że po umieszczeniu kursora nad nazwą strony zwykłej lub wzorcowej jest wyświetlana podpowiedź przedstawiająca hierarchię zastosowanych wobec niej wzorców.

Aktualnie mamy utworzoną stronę A-wzorcową z wypełnieniem przeglądarki ustawionym sąsiadująco oraz zawartością stopki. W następnej sekcji zajmiemy się tworzeniem nowej strony wzorcowej, która przejmuje zawartość strony A-wzorcowej, a następnie dodamy nagłówek, który będzie można zastosować do stron witryny. Wykonaj następujące czynności:

  1. Przeglądając mapę witryny w widoku Planowanie, najedź kursorem na miniaturę strony A-wzorcowej, aby wyświetlić ikony plusa po obu jej stronach. Kliknij ikonę plusa na prawo od strony A-wzorcowej, aby utworzyć nową stronę wzorcową. Nowa strona wzorcowa zostanie domyślnie nazwana B-wzorcowa.
  2. Kliknij dwukrotnie pole tekstowe poniżej miniatury strony B-wzorcowej, aby je edytować. Wpisz żądaną nazwę nowej strony wzorcowej: „Main” (Główna).
  3. Kliknij prawym przyciskiem myszy miniaturę strony wzorcowej Main i wybierz w menu kontekstowym polecenie Wzorce > A-wzorcowa.
Dzięki temu samouczkowi poznasz przestrzeń roboczą programu Adobe Muse i dowiesz się, jak stworzyć w pełni funkcjonalną witrynę internetową bez pisania kodu. Dowiesz się także, jak utworzyć mapę witryny i pracować ze stronami wzorcowymi oraz zaznajomisz się z opcjami wypełnienia przeglądarki dostępnymi w programie Muse.
W menu wybierz pozycję A-wzorcowa, aby zastosować ją wobec strony wzorcowej „Main”.

Zwróć uwagę, że po zastosowaniu strony A-wzorcowej wobec strony wzorcowej „Main” miniatura strony wzorcowej „Main” zostaje zaktualizowana i wygląda tak samo jak miniatura strony A-wzorcowej. Niebieska etykieta widoczna poniżej strony wzorcowej „Main” zawiera tekst [A-wzorcowa] ponieważ to tę stronę zastosowano wobec strony „Main” w kroku nr 3.

Warto zaznaczyć, że strona wzorcowa „Main” nie zawiera elementów strony A-wzorcowej, ponieważ strona A-wzorcowa nie została powielona. Zamiast tego strona wzorcowa „Main” została połączona ze stroną A-wzorcową, co oznacza, że zawartość dodana do strony A-wzorcowej będzie automatycznie wprowadzana na stronie wzorcowej „Main”.

Jak wspomnieliśmy zaletą hierarchicznych stron wzorcowych jest fakt, że stopka, menu oraz tło wciąż istnieją tylko na stronie A-wzorcowej. Dzięki temu jeśli klient zażąda w przyszłości użycia innego tła, wystarczy zaktualizować stronę A-wzorcową, a strona wzorcowa „Main” zostanie zaktualizowana automatycznie.

W dalszej części tego samouczka zajmiemy się tworzeniem dwóch różnych wzorców dla różnych wersji wyglądu w dwóch różnych sekcjach witryny. Teraz jednak możesz zaktualizować strony w widoku Planowanie tak, aby wszystkie bazowały na nowej stronie wzorcowej „Main” zamiast strony A-wzorcowej.

  1. Kliknij i przeciągnij stronę wzorcową „Main” na miniaturę strony „food” w lewym górnym rogu. Zwróć uwagę, że po przeciągnięciu i upuszczeniu miniatury strony wzorcowej„Main” na miniaturę strony „food” tekst w polu pod nią zmienił się z [A-wzorcowa] na [„Main”].

To najczęściej stosowany sposób stosowania stron wzorcowych wobec innych stron w widoku Planowanie, jednak tę czynność można także wykonać za pomocą menu kontekstowego.

  1. Kliknij prawym przyciskiem myszy miniaturę strony events i wybierz w menu kontekstowym polecenie Wzorce > Main.
Dzięki temu samouczkowi poznasz przestrzeń roboczą programu Adobe Muse i dowiesz się, jak stworzyć w pełni funkcjonalną witrynę internetową bez pisania kodu. Dowiesz się także, jak utworzyć mapę witryny i pracować ze stronami wzorcowymi oraz zaznajomisz się z opcjami wypełnienia przeglądarki dostępnymi w programie Muse.
Zastosuj stronę „Main” jako wzorzec dla strony „events”.

  1. Stosując ulubioną metodę (opisaną w krokach 4 i 5), ustaw stronę „Main” jako wzorzec dla pozostałych trzech stron: „home”, about i visit.

Po dokonaniu zmiany niebieskie etykiety pod miniaturami wszystkich stron powinny wyświetlać tekst [„Main”]. Po najechaniu kursorem na którąkolwiek z niebieskich etykiet zostanie wyświetlona podpowiedź przedstawiająca hierarchię zastosowanych stron wzorcowych.

Dzięki temu samouczkowi poznasz przestrzeń roboczą programu Adobe Muse i dowiesz się, jak stworzyć w pełni funkcjonalną witrynę internetową bez pisania kodu. Dowiesz się także, jak utworzyć mapę witryny i pracować ze stronami wzorcowymi oraz zaznajomisz się z opcjami wypełnienia przeglądarki dostępnymi w programie Muse.
Podpowiedź przedstawiająca hierarchię po najechaniu kursorem na etykietę.

W tym przykładzie hierarchia ma tylko jeden podpoziom. Inaczej mówiąc, strona wzorcowa „Main” dziedziczy zawartość strony A-wzorcowej. Należy jednak pamiętać, że w razie konieczności można utworzyć sekwencję stron wzorcowych. Można np. utworzyć stronę wzorcową o nazwie Nagłówek, zawierającą wyłącznie nagłówek, a następnie utworzyć kolejną stronę wzorcową o nazwie Stopka, która przejmuje zawartość strony wzorcowej Nagłówek, oraz kolejną stronę wzorcową o nazwie „Main”, która przejmuje całą zawartość strony wzorcowej Stopka (w tym także nagłówek). W zależności od projektu witryny oraz wiedzy, w jaki sposób niektóre elementy stron mogą ulec zmianie, można zbudować kilkupoziomową hierarchię dziedziczenia. Tego rodzaju dzielenie projektu przypomina tworzenie symboli, ponieważ można dzięki temu wydzielić wybrane jego części, aby móc je później łatwo odnaleźć i edytować.

Przejdź do kolejnego samouczka zatytułowanego Tworzenie pierwszej strony internetowej w programie Muse | Część II, z którego dowiesz się, jak pracować z widżetami (przygotowanymi wcześniej interaktywnymi elementami witryny, które można przeciągać na stronę). Widżety umożliwiają szybkie dodawanie zaawansowanych funkcji do stron bez pisania kodu. Zobaczysz, jak można edytować zachowanie i wygląd widżetów oraz dostosować sposób ich wyświetlania w ramach projektu witryny.

Dodawanie zawartości nagłówka do strony wzorcowej „Main”

Po utworzeniu stopki poprzez dodanie widżetu Menu do strony wzorcowej „Main” zajmiesz się dodawaniem elementów sterowania najwyższego poziomu. Wykonaj poniższe kroki, aby dodać zawartość do obszaru nagłówka.

  1. W widoku Planowanie kliknij dwukrotnie miniaturę strony wzorcowej „Main”, aby ją otworzyć do edycji w widoku Projektowanie (jeśli nie jest otwarta).
  2. Za pomocą narzędzia Prostokąt narysuj prostokąt, który będzie się rozciągać od lewego górnego do prawego górnego rogu widocznego obszaru przeglądarki. Za pomocą narzędzia Zaznaczanie przeciągnij uchwyty: górny, lewy i prawy prostokąta, aż do wyświetlenia czerwonych krawędzi, które oznaczają, że osiągnięto 100% szerokość prostokąta, podobnie jak miało to miejsce w przypadku stopki.
fig_30_building
Narysuj prostokąt o szerokości górnej części okna przeglądarki.

 

Po przeciągnięciu uchwytów wielkość prostokąta powinna wynosić ok. 1160 × 253 piksele (szer. × wys.). Wartość pozioma X wynosi -100, co oznacza, że lewy górny róg prostokąta znajduje się w odległości 100 pikseli od lewego górnego rogu strony. Wartość Y wynosi 0, co oznacza, że lewy górny róg prostokąta znajduje się w tej samej pozycji, co lewy górny róg strony (w pionie). Jeśli chcesz ustawić dokładne wartości tych opcji, możesz otworzyć panel Przekształcenia lub dostosować je w panelu sterowania po zaznaczeniu prostokąta.

  1. Ustaw szerokość obrysu na 0, a w menu Wypełnienie ustaw brak wypełnienia. Kliknij ikonę folderu na prawo od pozycji Obraz i wybierz plik o nazwie tile-header.png. W menu Dopasowanie wybierz pozycję Sąsiadująco w poziomie.
fig_31_building
Za pomocą menu Dopasowanie ustaw obraz tła sąsiadująco.

 

Choć nagłówek składa się z pojedynczego prostokąta, ustawiony sąsiadująco obraz tła, który go wypełnia, tworzy efekt szarego prostokąta umieszczonego nad czarnym.

  1. Wybierz polecenie Plik > Umieść albo użyj skrótu klawiaturowego Command+D (w systemie Mac) lub Control+D (w systemie Windows), aby otworzyć okno dialogowe Importuj.
  2. Przejdź do folderu przykładowych plików i wybierz plik bg-ribbon.png. Kliknij przycisk Otwórz, aby go wybrać i zamknąć okno dialogowe importu.
  3. Kliknij jeden raz pośrodku prostokąta nagłówka, w pobliżu górnej części strony. Spowoduje to umieszczenie pojedynczej instancji pliku bg-ribbon.png o pierwotnych wymiarach.
  4. Za pomocą narzędzia Zaznaczanie wyrównaj element graficzny pomarańczowej wstążki w pionie do środka i umieść ją w pobliżu górnej części nagłówka, a następnie dostosuj jej szerokość do szerokości strony.
fig_32_building
Pomarańczowa wstążka ustawiona pośrodku nagłówka.

 

Grafika przedstawiająca wstążkę będzie tłem menu najwyższego poziomu, które dodamy w kolejnej sekcji

Powielanie strony wzorcowej

Zawartość nagłówka strony wzorcowej „Main” jest gotowa. Wprawdzie moglibyśmy użyć strony wzorcowej „Main” dla wszystkich stron w ramach witryny, ale ta witryna ma dwie sekcje. Projekt strony wzorcowej „Main” zostanie ostatecznie użyty dla stron „home” i visit. Dla stron „food”, „events” i about użyjemy drugiej, nieco innej strony wzorcowej.

Wykonaj poniższe kroki, aby powielić stronę wzorcową „Main”:

  1. W widoku Planowanie kliknij prawym przyciskiem miniaturę strony wzorcowej „Main”.
  2. W menu kontekstowym wybierz polecenie Powiel stronę.
fig_38_building
Za pomocą menu powiel istniejącą stronę wzorcową „Main”.

 

Na prawo od strony wzorcowej „Main” pojawi się nowa strona wzorcowa o domyślnej nazwie „Main kopia”. Z racji tego, że powieliliśmy stronę wzorcową „Main”, nowa strona wzorcowa bazuje już na stronie A-wzorcowej.

  1. Kliknij dwukrotnie pole nazwy utworzonej przed chwilą strony wzorcowej i wpisz nazwę „Foreground” (pierwszy plan).

W tej sekcji nauczysz się układać elementy na stronie wzorcowej w taki sposób, aby obiekty były wyświetlane nad elementami strony, a nie pod nimi. Na tym etapie warto zapisać postępy pracy.

  1. Wybierz polecenie Plik > Zapisz witrynę.

Jedną z zalet utworzenia kopii strony wzorcowej jest możliwość wyświetlania części zawartości nad obiektami umieszczonymi na drugiej stronie, co przypomina użycie polecenia Ułóż > Przesuń na wierzch. Ten „pierwszy plan” będzie widoczny na stronach „food” i „events”.

Możliwość ustawiania kolejności elementów strony wzorcowej jest nową funkcją programu Muse 4.0. W starszych wersjach, gdy użytkownik chciał ułożyć elementy wspólnych elementów witryny nad inną zawartością w układzie strony elementy nagłówka lub stopki, należało je umieszczać na każdej stronie z osobna.

Ustawianie elementów stron wzorcowych w taki sposób, aby były wyświetlane na wierzchu

W programie Muse interfejs widoku Projektowanie umożliwia zaznaczenie elementu i wybór polecenia Obiekt > Przesuń na wierzch, Przesuń do przodu, Przesuń na spód lub Przesuń do tyłu. Dzięki temu dany element może być wyświetlany nad lub pod innym obiektem na stronie. (Ten sam efekt można uzyskać, klikając element lub ich grupę prawym przyciskiem myszy i wybierając polecenie Ułóż > Przesuń na wierzch, Przesuń do przodu, Przesuń na spód lub Przesuń do tyłu).

W przypadku projektowania witryny w starszej wersji programu Muse domyślnym zachowaniem jest wyświetlanie elementów strony wzorcowej za pozostałymi elementami na stronie po jej odwzorowaniu. Taka metoda tworzenia warstw tła sprawiała czasem problemy (w zależności od projektu witryny), ponieważ jedynym obejściem było kopiowanie elementów, które normalnie zostałyby umieszczone na stronie wzorcowej, i wklejanie ich na wszystkie strony witryny, na których miały być wyświetlane na wierzchu.

Program Muse został wyposażony w nową funkcję sterowania ułożeniem elementów na stronach wzorcowych. Dzięki temu zamiast wyświetlania wszystkiego na stronie wzorcowej za elementami strony można wybrać elementy strony wzorcowej i ustawić je tak, aby były wyświetlane na pierwszym planie. Elementy stron wzorcowych ustawione jako pierwszoplanowe będą wyświetlane nad pozostałymi obiektami na stronie.

Ta nowa opcja jest dostępna po wybraniu polecenia Obiekt > Przenieś na > Master Foreground. Podczas edytowania strony wzorcowej można także kliknąć dowolny element w widoku Projektowanie prawym przyciskiem myszy i wybrać polecenie Przenieś na > Master Foreground dostępne w menu kontekstowym.

W tym przykładowym projekcie zawartość na stronach „home” i visit ma być ułożona w sposób domyślny (elementy strony są wyświetlane na nagłówku strony wzorcowej „Main”). Nie dotyczy to stron „food”, „events” i about.

W przypadku stron „food” i visit uaktualnimy stronę wzorcową „Foreground” w taki sposób, aby zawartość nagłówka była wyświetlana na pierwszym planie względem zawartości strony w miarę przewijania. Wykonaj następujące czynności:

  1. W widoku Planowanie kliknij dwukrotnie miniaturę strony wzorcowej „Foreground”, aby otworzyć ją w widoku Projektowanie (o ile nie jest już otwarta).
  2. Za pomocą narzędzia Zaznaczanie kliknij i przeciągnij ramkę zaznaczania tak, aby objęła całą zawartość nagłówka. Mają się w niej znaleźć: prostokąt z tłem ustawionym sąsiadująco, umieszczona, pomarańczowa wstążka, widżet Menu oraz animowane logo GIF.
  3. Zaznaczywszy całą zawartość nagłówka, kliknij go prawym przyciskiem myszy i wybierz polecenie Przenieś na > Master Foreground. Zwróć uwagę, że w odróżnieniu od zwyczajowej niebieskiej obwiedni zaznaczonych obiektów, elementy ustawione do wyświetlania na pierwszym planie po zaznaczeniu są oznaczone czerwoną obwiednią.
fig_39_building
Przenieś zawartość nagłówka na pierwszy plan za pomocą menu kontekstowego.

Ta czynność pozwala się upewnić, że na stronach, wobec których zostanie zastosowana strona wzorcowa Foreground, nagłówek będzie wyświetlany na tle pozostałych elementów.

  1. Nie odznaczając wybranego nagłówka, przypniemy go do górnej części strony, tak aby pozostawał na swoim miejscu nawet podczas przewijania. Więcej informacji na temat przypinania obiektów zawiera Część VII samouczka. Kliknij teraz środkową górną pozycję przypięcia na panelu sterowania, aby przypiąć nagłówek w wybranym miejscu.
fig_40_building
Przypnij zaznaczony nagłówek, wybierając środkową górną pozycję.

  1. Kliknij i przeciągnij stronę wzorcową „Foreground” na stronę „food”, aby ją zastosować. Powtórz ten krok jeszcze dwa razy, aby zastosować stronę wzorcową „Foreground” wobec stron „events” i about.

Po dokonaniu tej zmiany niebieska etykieta tekstowa będzie wyświetlać słowo [Foreground], co oznacza, że strony „food”, „events” i about są teraz oparte na stronie wzorcowej „Foreground”. Jeśli umieścisz kursor na niebieskiej etykiecie [Foreground], zostanie wyświetlona podpowiedź z informacją o tym, że strona wzorcowa „Foreground” jest oparta na stronie A-wzorcowej.

Projektując własne witryny możesz eksperymentować z nową funkcją Move to Foreground i za jej pomocą ustawiać elementy stron wzorcowych tak, aby były wyświetlane na wierzchu. W dalszej części tej serii samouczków zajmiemy się finalizacją stron „food” i „events” oraz przyjrzymy się temu, jak ustawienie pierwszego planu gwarantuje wyświetlanie nagłówka nad pozostałą zawartością strony.

W następnej sekcji tego samouczka, zatytułowanej Tworzenie pierwszej strony internetowej w programie Muse, część IV, zajmiemy się wyświetlaniem zawartości pochodzącej z innych witryn za pomocą osadzonego kodu HTML. Dowiesz się także, jak rozbudować stronę główną poprzez dodanie widżetu Wyświetlanie ramki lightbox.

Używanie wielu stron wzorcowych i wprowadzanie animacji

W tej sekcji dowiesz się więcej na temat pracy ze stronami wzorcowymi oraz sposobu wyświetlania wspólnej zawartości witryny na wielu stronach wzorcowych w celu zachowania spójności, tworząc jednocześnie poszczególne sekcje witryny. Omówimy także strategie dotyczące przenoszenia elementów ze stron wzorcowych, ponieważ w niektórych projektach witryn pomocne może się okazać utworzenie kilku stron wzorcowych i umieszczenie na nich tylko określonych grafik (przykładem może być witryna o czterech różnokolorowych obszarach). Zajmiemy się także przenoszeniem elementów umieszczanych zwykle na stronach wzorcowych na określoną stronę w celu stworzenia takich efektów, jak układanie elementów na następujących po sobie warstwach.

Edytowanie zawartości strony wzorcowej

Obiekty umieszczone na stronie wzorcowej są wyświetlane na warstwie znajdującej się pod zawartością strony. Przykład: wszelkie elementy umieszczone w nagłówku lub stopce na stronie głównej będą wyświetlane nad tłami ustawionymi w nagłówki i stopce na stronie wzorcowej. Z tego względu mogą się zdarzyć sytuacje, w których trzeba przenieść elementy ze strony wzorcowej i umieścić je na poszczególnych strony, aby wizualnie znalazły się nad pozostałymi elementami strony (na ich tle).

Zawartość dodaną do strony wzorcowej można później edytować po otwarciu strony w widoku Projektowanie. W przypadku otwarcia strony powiązanej ze stroną wzorcową edycja nagłówka, stopki lub zawartości jest niemożliwa. W celu zmiany zawartości strony wzorcowej można skorzystać z jednej z dwóch strategii:

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

  2. Kliknij dwukrotnie miniaturę strony wzorcowej w widoku Planowanie, aby otworzyć ją w widoku Projektowanie. Zaznacz elementy, które chcesz edytować (które po umieszczeniu na stronie mają się znaleźć na tle innych elementów) i wybierz polecenie Edycja > Wytnij lub użyj skrótu klawiaturowego Command-X (Mac OS) lub Control-X (Windows).

  3. Wróć do widoku Planowanie i kliknij dwukrotnie stronę, na której ma zostać umieszczona zawartość znajdująca się wcześniej na stronie wzorcowej. Wybierz polecenie Edycja > Wklej w miejsce. Dzięki temu element lub elementy wycięte ze strony wzorcowej zostaną umieszczone w tej samej lokalizacji na zwykłej stronie. Jeśli chcesz, możesz otworzyć więcej stron i wybrać polecenie Edycja > Wklej w miejsce, aby rozmieścić zawartość ze strony wzorcowej na kilku różnych stronach witryny.

W razie konieczności możesz także powielić istniejącą stronę wzorcową. Witrynę możesz skonfigurować w taki sposób, aby większość stron korzystała z jednej strony wzorcowej, a strona specjalna korzystała z nieco zmienionej wersji strony wzorcowej (na stronie specjalnej znalazłyby się elementy skopiowane z powielonej strony wzorcowej). Aby uzyskać więcej informacji na temat powielania stron, przejdź do kolejnej podsekcji.

Po umieszczeniu obiektu ze strony wzorcowej na poszczególnych stronach możesz go edytować z poziomu tychże stron, aby upewnić się, że jest wyświetlany na wierzchu.

W tym przykładowym projekcie witryna wyświetla logo Kevin's Koffee Kart (czerwony rower z banerem) bezpośrednio nad paskiem nawigacji witryny w nagłówku. Zawartość nagłówka i stopki jest wyświetlana automatycznie na każdej stronie, ponieważ strona domowa oraz wszystkie pozostałe są domyślnie połączone ze stroną A-wzorcową, na której znajduje się ta zawartość. W wielu przypadkach projektanci decydują się na korzystanie z jednej strony wzorcowej w celu zapewnienia spójności całej witryny.

Nasza strona ma jednak animowane logo, które jest wyświetlane wyłącznie na stronie domowej. Jeśli przyjrzysz się projektowi witryny Kevin's Koffee Kart, zauważysz, że logo czerwonego roweru na stronie domowej odtwarza animację tylko raz po wczytaniu strony, sprawiając wrażenie, jakby rower wjeżdżał na stronę od lewej. Odwiedzając kliknięciem poszczególne strony witryny, zauważysz, że animacja ta pojawia się tylko na stronie domowej, a na wszystkich innych logo jest statyczne.

W kolejnych podsekcjach zajmiemy się powielaniem strony wzorcowej oraz omówimy przypisywanie stron do wybranej strony wzorcowej w widoku Planowanie.

Powielanie i usuwanie stron wzorcowych

  1. Kliknij łącze Planowanie, aby otworzyć widok Planowanie. Odszukaj miniaturę strony A-wzorcowej w dolnej części interfejsu widoku Planowanie.

  2. Najedź kursorem na miniaturę strony A-wzorcowej i zwróć uwagę na te same symbole plusa (+), które znasz z dodawania stron do mapy witryny. Kliknij symbol plusa (+) z prawej strony miniatury strony A-wzorcowej. Za pomocą tej metody możesz w dowolnej chwili utworzyć nową stronę wzorcową. Zwróć uwagę, że miniatura jest pusta, co oznacza, że na nowej stronie wzorcowej nie ma zawartości dodanej do strony A-wzorcowej. Nowa strona wzorcowa zostaje domyślnie nazwana B-wzorcową, jednak możesz kliknąć jej pole nazwy i zmienić ją zgodnie z wymaganiami.

    W tym przypadku zamiast tworzyć nową, pustą stronę wzorcową utworzysz kopię istniejącej strony A-wzorcowej.

  3. Kliknij ikonę X w prawym górnym rogu strony B-wzorcowej, aby ją usunąć. (Jeśli przypadkowo usuniesz istniejącą stronę wzorcową, wybierz polecenie Edycja > Cofnij Usuń, aby ją przywrócić).

  4. Kliknij miniaturę strony A-wzorcowej i w menu kontekstowym wybierz polecenie Powiel stronę. Zostanie wyświetlona nowa miniatura powielonej strony wzorcowej o nazwie „A-wzorcowa kopia”.

    fig_59_getting
    Powielona strona A-wzorcowa w widoku Planowanie.

  5. Kliknij pole poniżej miniatury kopii strony A-wzorcowej i zmień jej nazwę na: MasterFlash. Na tej stronie będziesz dodawać zawartość multimedialną, która będzie animowana tylko na stronie Home. Pozostałe strony będę powiązane ze stroną A-wzorcową, która wyświetla statyczną wersję logo w nagłówku.

  6. Kliknij prawym przyciskiem miniaturę strony domowej. W menu kontekstowym wybierz Wzorce > MasterFlash. Ta operacja powiąże stronę wzorcową MasterFlash ze stroną domową.

    Uwaga:

    Możesz także przeciągnąć miniaturę strony MasterFlash na miniaturę strony Home, aby powiązać obie strony.

Po zastosowaniu nazwa strony wzorcowej MasterFlash jest wyświetlana w nawiasach pod miniaturą strony domowej w widoku Planowanie.

Jeśli klikniesz łącze Podgląd, nie zauważysz różnic na stronie domowej. Z racji tego, że strona MasterFlash jest powieloną kopią strony A-wzorcowej, strona domowa wygląda tak samo jak wcześniej, a wyświetlane logo jest statyczne. W następnej sekcji będziemy edytować zawartość strony MasterFlash i dodamy do niej animację, która będzie wyświetlana wyłącznie na stronie domowej.

Wykorzystanie powielonych, niemal identycznych stron wzorcowych to doskonały sposób wyróżnienia wybranej sekcji witryny oraz nadania wyjątkowego charakteru stronie domowej jak w przypadku tego projektu.

Z tego samouczka dowiesz się, jak korzystać ze stron wzorcowych. Zanalizujemy trzy układy witryn i zbadamy, jak możesz osiągnąć ciekawe efekty i osiągnąć spójność, korzystając ze wspólnych elementów na stronie wzorcowej.

Na początek: czym jest strona wzorcowa? Strona wzorcowa umożliwia stosowanie wspólnych elementów, takich jak nagłówki, stopki, loga i elementy nawigacyjne, do wielu stron w witrynie. Możesz korzystać z jednej strony wzorcowej dla witryny lub określić wiele stron wzorcowych, tak, aby móc szybko i spójnie stosować wyjątkowe style do różnych sekcji witryny.

Domyślnie przy tworzeniu nowej witryny Muse tworzy pustą stronę domową i pustą stronę wzorcową. Strony te stanowią bazę dla każdej witryny. Możesz zaplanować mapę witryny korzystając z pustych stron, a następnie zastosować do nich strony wzorcowe. Możesz także utworzyć witrynę rozpoczynając od stron wzorcowych, zastosować je do pojedynczej strony (strony domowej), a następnie tworzyć nowe strony w oparciu o ten projekt.

Analiza układów witryn

Świetnym sposobem uczenia się strategii projektowania nowych witryn jest zapoznanie się z różnymi projektami stron wzorcowych. W tym artykule przyjrzymy się trzem różnym układom witryny utworzonym w Muse i zbadamy, jak były oryginalnie tworzone.

Jeśli chcesz śledzić i otwierać zasoby dla każdej witryny demonstracyjnej, pobierz pliki demonstracyjne, rozpakuj plik ZIP i kliknij dwukrotnie każdy plik .muse, aby otworzyć go w programie Muse.

Gdy będziesz przyglądać się po kolei witrynom demonstracyjnym, zwróć uwagę na pewne elementy, które wykorzystano w tych projektach i które umożliwiają odwiedzającym orientowanie się w odkrywanej zawartości witryny oraz czynią stronę prostą w nawigacji.

  • Konfiguruj właściwości strony, aby określić wymiary wszystkich stron.
  • Korzystaj z linii pomocniczych, aby określić obszary nagłówków i stopek na stronie wzorcowej.
  • Przypinaj obiekty do okna przeglądarki, aby umieścić je poza układem strony.
  • Dostosowuj wypełnienie obrazem tła tak, by przewijało się lub miało stałą pozycję, tworząc ciekawe efekty.
  • Rozciągnij prostokąt tak, aby wyświetlał się ze 100% szerokością, zajmując całą szerokość przeglądarki.
  • Dodawaj widżety harmonijki i widżety pokazu slajdów, wyświetlające interaktywną zawartość stron.
  • Dostosowuj i stylizuj widżety menu, zapewniając nawigację po witrynie.
  • Twórz linki zakotwiczone, powodujące pionowy lub poziomy przeskok do określonych części strony.
  • Wklejaj kod z witryn firm trzecich (osadzony HTML), aby dodawać funkcje do stron.

Gdy odwiedzasz każdą przykładową witrynę spróbuj przewijać i zmieniać rozmiar okna przeglądarki, aby zobaczyć, jak działają uruchomione już w Internecie przykłady. Następnie otwórz każdy plik .muse w programie Muse, aby zobaczyć, jak strony wzorcowe są wykorzystywane do standaryzowania układu witryny i tworzenia bardziej ujednoliconego jej odbioru.

Przykład 1: Happy Valley Adventure

fig01.master.b720

W pierwszym przykładzie grafika stopki jest przypięta u dołu okna przeglądarki. Dodatkowo tło stopki jest ustawione na 100% szerokości, aby zajmowały poziomo cały dół strony. Dłuższa zawartość strony przewija się za pierwszym planem stopki, tworząc efekt gradientu nieba. Gdy klikasz łącza zakotwiczone po lewej stronie, strona przesuwa się pionowo do odpowiedniej części. Półprzezroczyste elementy graficzne i strategicznie uporządkowany stos wywołuje wrażenie lotu balonem.

Podczas przeglądania pliku .muse tej witryny zauważ, że:

Na stronie wzorcowej seria prostokątów wypełnionych gradientem zapewnia tło dla dłuższej zawartości strony.

  • Strona domowa zawiera grafikę stopki z poziomo sąsiadującymi obrazami tła ustawionymi na zajmowanie 100% szerokości, przypiętymi u dołu okna przeglądarki. Druga grafika stopki (szczyt góry) jest wyśrodkowana i także przypięta u dołu przeglądarki i jest umieszczona tak, by wyświetlana była nad inną ustawioną sąsiadująco grafiką stopki, dzięki wybraniu Rozmieść > Przesuń na wierzch. Strategia ta jest zgodna z dowolnym rozmiarem monitora.
  • Łącza nawigacyjne po lewej stronie przenoszą do znaczników zakotwiczonych, które są dodawane do długiej, ułożonej pionowo strony. Gdy odwiedzający klikają łącza, strona przewija się, wyświetlając odpowiednią zawartość. Projekt wygląda na dobrze zrównoważony i jednolity we wszystkich kolejnych częściach witryny.
  • W części Kontakt na stronie domowej znajduje się osadzony kod HTML wyświetlający elementy formularza w celu ułatwienia komunikacji z odwiedzającymi i planowania harmonogramu pod kątem nadchodzących atrakcji.

Przykład 2: Kevin's Koffee Kart

fig02.master.b720
Ta wielopoziomowa witryna korzysta z widżetu Menu i elementów osadzonego kodu HTML.

Strona domowa witryny Kevin's Koffee Kart zawiera animację Flash w nagłówku i przypiętą grafikę chmur. Korzystając z pasków przewijania do nawigacji po stronie zauważ, że obraz tła jest stały i nie jest przewijany, ale zawartość strony przewija się nad nim. Pokaz slajdów jest natychmiast odtwarzany, wyświetlając kolejno obrazy pod osadzonym HTML kanału informacyjnego Twitter.

Pasek menu w nagłówku został utworzony przy użyciu widżetu Menu poziome, który zapewnia stałe przyciski nawigacji po witrynie, aktualizowane automatycznie w miarę dodawania nowych stron. W tym przykładzie widżet menu jest skonfigurowany tak, aby wyświetlał zarówno strony najwyższego poziomu jak i niższego poziomu.

Korzystaj z menu i zobacz, jak każda strona jest pobierana po kliknięciu przycisków. Nagłówek i stopka są standardem na wszystkich stronach, ale wysokości poszczególnych stron różnią się zależnie od zawartości. Brązowa stopka składa się z dwu prostokątów, ustawionych na 100% szerokości, tak by zajmowała całą szerokość okna przeglądarki, co zapewnia spójność wszystkich stron.

Podczas tworzenia witryny Kevin's Koffee Kart zastosowano następujące konwencje projektowe:

  • Witryna ta jest oparta na dwóch podobnych do siebie stronach wzorcowych: stronie wzorcowej bez mediów Flash, stosowaną do większości stron witryny, oraz drugiej stronie wzorcowej z filmem Flash, stosowanej tylko do strony domowej. Obie strony wzorcowe mają stopki szerokości 100% z przezroczystym obramowaniem projektu i korzystają z tego samego widżetu menu, co zapewnia ich spójność. Po utworzeniu pierwszej strony wzorcowej elementy są kopiowane a następnie wklejane do drugiej strony wzorcowej, w celu zapewnienia, że wszystkie elementy są idealnie zgodne.
  • Strony są zorganizowane w widoku Planowanie tak, by tworzyły części witryny niższego poziomu, co odzwierciedlone jest w elementach widżetu menu rozwijanego.
  • Mapa stanowiąca obraz tła wykorzystywana jako wypełnienie przeglądarki jest ustawiona na rozmiar oryginalny, a nie sąsiadująco. Jest ześrodkowana i ustawiona poniżej zawartości strony.
  • Wypełnienie tła strony jest jednolicie białe, z lekką przezroczystością umożliwiającą prześwitywanie obrazu tła z mapą.
  • Strona domowa zawiera dwa półprzeźroczyste obrazy chmur przypięte do przeglądarki. Przewijaj strony pionowo, aby zobaczyć, że przypięte elementy nie poruszają się i pozostają w miejscu, gdy zmienisz wielkość okna przeglądarki.
  • Strona domowa korzysta z osadzonego HTML do wyświetlania na bieżąco zawartości kanału informacyjnego Twitter.
  • Strona Kawa posiada funkcje widżetu harmonijki, który rozwija i zwija panele po kliknięciu, co umożliwia wyświetlanie większej ilości zawartości na małym obszarze strony.
  • Strona Pochodzenie posiada widżet pokazu slajdów z miniaturkami, wyświetlający interaktywną galerię zdjęć. Strona Przygotowanie korzysta z nawigacji poprzez znaczniki zakotwiczone, umożliwiając przeskakiwanie do każdej części strony, a Mapa lokalizacji wózka posiada osadzony HTML, umożliwiający wyświetlanie na bieżąco mapy Google Latitute w oparciu o aktualne położenie telefonu komórkowego wykorzystywanego z tym kontem.

Przykład 3: More than square

fig03.master.b720
Mocno nakładające się na siebie przypięte elementy graficzne otaczają przewijaną zawartość.

Przeglądając ostatni przykład zwróć uwagę, że grafika budynków jest przypięta w prawym górnym i lewym dolnym rogu i otacza zawartość strony. Budynek w prawym górnym rogu jest umieszczony z przodu tak, aby nakładał się powyżej zawartości strony, podczas gdy budynek u dołu z lewej wyświetla się poniżej strony.

Zawartość strony jest ześrodkowana, półprzezroczysta i zrównoważona elementami architektury o zaokrąglonych rogach. Zawartość strony przewija się pionowo a wysokość zmienia odpowiednio do poszczególnych stron. Łącza do serwisów społecznościowych (Twitter, Facebook i YouTube) pozostają po lewej stronie strony, zapewniając wzajemne odnośniki i tworząc spójny, asymetryczny układ całej witryny.

Strona domowa zawiera galerię zdjęć z przyciskami nawigacyjnymi Dalej i Wstecz, która jest ponadto skonfigurowana tak, aby odtwarzała powoli kolejne slajdy, jeśli odwiedzający nie będzie używał przycisków. Strona Jak się tam dostać zawiera interaktywną mapę, utworzoną przy pomocy osadzonego kodu HTML skopiowanego z Google Maps.

Gdy przeglądasz plik źródłowy .muse tego przykładu, zwróć uwagę na:

Prawie wszystkie wspólne elementy stron w tym przykładzie znajdują się na stronie wzorcowej. Strategia ta upraszcza aktualizację witryny i wprowadzanie zmian do indywidualnych elementów zawartości strony.

Strona wzorcowa zawiera grafikę z nieprzewijanym tłem obrazu stopki, który jest przypięty u dołu po lewej stronie przeglądarki. Strona wzorcowa posiada także półprzezroczysty projekt strony z zaokrąglonymi narożnikami i z nawigacją po witrynie.

Wszystkie strony witryny posiadają grafikę przypiętą w prawym górnym rogu i zaaranżowaną tak, aby wyświetlała się przed zawartością strony, tworząc złudzenie perspektywy przekazywane przez kąty obrazów budynków.

Muse to intuicyjne narzędzia do projektowania, umożliwiające umieszczanie projektów w sieci. Kreatywne umieszczanie elementów stron wzorcowych i wyjątkowa zawartość każdej strony umożliwia tworzenie interesujących projektów. W tworzeniu innowacyjnych witryn dla klientów ogranicza cię tylko wyobraźnia.

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 można znaleźć 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