Możesz definiować obszary nagłówka i stopki Twojej witryny, aby dodawać w nich menu, logotypy, informacje o prawach autorskich i inne elementy w programie Adobe Muse.

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.

Adobe Muse umożliwia proste tworzenie nagłówków i stopek strony. Dobrą praktyką jest nadawanie spójnego wyglądu witrynie dzięki zachowaniu takiego samego wyglądu elementów nagłówka i stopki. Można to osiągnąć poprzez zdefiniowanie elementów nagłówka i stopki strony wzorcowej w Adobe Muse. Zaktualizowanie strony wzorcowej powoduje zmiany na wszystkich stronach witryny.

Podczas tworzenia witryny internetowej z zastosowaniem języków HTML i CSS poszczególne strony mają często różną wysokość, która zależy od unikatowej zawartości wyświetlanej na każdej z nich. Program Muse zawiera funkcje, które dostosowują długość stron witryny w zależności od ich zawartości. Po zdefiniowaniu regionów nagłówek zawsze będzie znajdować się u góry, a stopka zawsze znajdzie się bezpośrednio pod zawartością, niezależnie od wysokości danej strony.

Dodawanie nagłówka i stopki do strony

Zanim zaczniesz definiować regiony nagłówka i stopki strony, sprawdź, czy są wyświetlane linie pomocnicze nagłówka i stopki. Jeśli nie są, wybierz polecenie Widok > Nagłówek i stopka.

Możesz także skorzystać z menu Widok w panelu sterowania i włączyć linie pomocnicze nagłówka i stopki.

Sprawdź, czy linie pomocnicze nagłówka i stopki są włączone.
Sprawdź, czy linie pomocnicze nagłówka i stopki są włączone.

Jeśli chcesz, możesz także kliknąć prawym przyciskiem myszy po lewej stronie przestrzeni roboczej tuż za obszarem okna przeglądarki. W menu kontekstowym, które zostanie wyświetlone, włącz opcję Nagłówek i stopka.

Praca z liniami pomocniczymi i miarkami

W celu zmiany położenia linii pomocniczych nagłówka i stopki należy najpierw włączyć miarkę. Za pomocą miarki można ustawić położenie linii pomocniczych z dokładnością do jednego piksela. Domyślnie są wyświetlane także zwykłe linie pomocnicze (wyświetlają one liczbę kolumn ustawioną przed utworzeniem witryny).

Przez całą szerokość strony biegnie pięć poziomych linii pomocniczych. Zaczynając od wierzchołka, tych pięć linii pomocniczych wytycza górną część strony, dolną krawędź nagłówka, górną krawędź nagłówka, dolną część strony internetowej oraz dolną część okna przeglądarki. Podczas przesuwania linii w celu wyznaczenia obszarów jest wyświetlane okno podpowiedzi z opisem linii pomocniczej oraz informacją o jej położeniu. Pomocne może się okazać powiększenie strony w celu dokładniejszego ustawienia linii pomocniczych.

Trzy środkowe linie pomocnicze określają zawartość, która będzie wyświetlana w obszarach nagłówka i stopki. Pozostały środkowy region to obszar przeznaczony na unikatową zawartość strony. Obszar ten rozciąga się, dostosowując się do wysokości elementów umieszczonych na każdej ze stron.

Zaznaczać można także prostokąty i elementy na stronie. Obwiednie zaznaczonych elementów pomagają wyrównać linie pomocnicze podczas określania obszarów nagłówka i stopki.

Uwaga:

Dolna krawędź okna przeglądarki wyznacza najniżej położony obszar wyświetlania witryny w przeglądarce osoby odwiedzającej. W zależności od projektu można ustawić dla przeglądarki kolor lub obraz tła i umieścić linię pomocniczą dolnej krawędzi strony powyżej linii pomocniczej dolnej krawędzi przeglądarki. Dzięki temu obraz lub kolor tła będzie widoczny pod zawartością strony.

Definiowanie elementów nagłówka i stopki

Aby zdefiniować elementy nagłówka i stopki:

  1. Przeciągnij zarówno linię pomocniczą Dolna część strony, jak i Dolna część przeglądarki w to samo miejsce u dołu strony bezpośrednio pod prostokąt stopki, jak pokazano na ilustracji poniżej.
Definiowanie elementów nagłówka i stopki w programie Adobe Muse
Definiowanie elementów nagłówka i stopki w programie Adobe Muse

  1. W stopce zaznacz prostokąt zawierający ustawiony sąsiadująco obraz tła. Przeciągnij linię pomocniczą Stopka aż do jej wyrównania z górną krawędzią prostokąta nagłówka.
  2. Pozostaw linię pomocniczą Górna część strony na samej górze (w położeniu Y: 0 piks.). Przeciągnij w dół linię pomocniczą nagłówka pożądanego poziomu.

Zawartość nagłówka będzie wyświetlana w obszarze pomiędzy górną częścią strony a linią pomocniczą nagłówka.

Przeciągnij linię pomocniczą nagłówka, aby ustawić obszar nagłówka
Przeciągnij linię pomocniczą nagłówka, aby ustawić obszar nagłówka

W dowolnym momencie projektowania można powrócić na stronę A-wzorcową, aby dostosować linie pomocnicze do zawartości nagłówka i stopki.

Kliknij łącze Planowanie lub kartę zatytułowaną katiesCafe, aby powrócić do widoku Planowanie.

Zwróć uwagę, że we wszystkich miniaturach stron witryny są teraz widoczne elementy, które dodano do połączonej strony A-wzorcowej.

Zauważ, że nagłówek i stopkę określono dla wszystkich stron połączonych ze stroną A-wzorcową
Projekt strony A-wzorcowej jest wyświetlany we wszystkich miniaturach połączonych stron w widoku Planowanie.

W dowolnym momencie projektowania zmiany dokonane na stronie wzorcowej znajdują odzwierciedlenie na stronach połączonych. Strony wzorcowe ułatwiają aktualizowanie lub modyfikowanie witryny, ponieważ do zmiany jej wyglądu wystarczy aktualizacja strony wzorcowej.

Uzupełnianie zawartości nagłówka poprzez umieszczenie obrazu

Z uwagi na to, że logo witryny będzie wyświetlane na każdej stronie, należy je umieścić w nagłówku strony wzorcowej.

  1. Wybierz polecenie Plik > Umieść. Jeśli wolisz, możesz umieścić obraz, używając skrótu klawiaturowego Control+D (Windows) lub Command+D (Mac OS).

  2. W oknie dialogowym Importuj, które zostanie wyświetlone, przejdź do folderu Kevins_Koffee_Kart i odszukaj plik Logo.png. Kliknij polecenie Wybierz.

  3. Za pomocą narzędzia Zaznaczanie przeciągnij logo do górnej części określonego obszaru nagłówka, który zdefiniowano wcześniej.

Następnie umieść kolejny obraz, który posłuży jako tło widżetu Pasek menu, który zostanie dodany w kolejnej sekcji.

  1. Wybierz polecenie Plik > Umieść lub użyj skrótu klawiaturowego właściwego dla systemu operacyjnego, z którego korzystasz (Control+D w przypadku Windows lub Command+D w przypadku Mac OS).

  2. Przejdź do folderu Kevins_Koffee_Kart i wybierz plik top-nav.png.

  3. Kliknij raz w górnej części strony określonej jako nagłówek. Upewnij się, że logo znajduje się nad znacznikiem nagłówka, tak aby było wyświetlane w tym samym miejscu na tle zawartości poszczególnych stron.

  4. Za pomocą narzędzia Zaznaczanie przeciągnij umieszczoną przed chwilą brązową grafikę wstążki, aby koła czerwonego roweru w logo niemalże stykały się z jej górną krawędzią. Dzięki takiemu rozmieszczeniu rower zdaje się przesuwać po krawędzi brązowej wstążki.

  5. Wybierz ponownie polecenie Plik > Umieść. Przejdź do folderu przykładowych plików i odszukaj plik thedrip.png. Kliknij w pobliżu prawej dolnej części brązowej wstążki, aby umieścić obraz w oryginalnym rozmiarze.

  6. Za pomocą narzędzia Zaznaczanie przesuń obrazek kropli, aby wyrównać go w linii z brązową wstążką i stworzyć iluzję kawy kapiącej z prawej strony.

    Zawartość nagłówka po dodaniu logo i tła sekcji nawigacyjnej witryny.
    Zawartość nagłówka po dodaniu logo i tła sekcji nawigacyjnej witryny.

    Zajrzyj na aktywną wersję witryny, aby sprawdzić faktyczne położenie logo i górnego panelu nawigacji.

    W następnej części omówimy pracę z kontenerami i zajmiemy się dodawaniem widżetów.

Korzystanie z funkcji Stopka zawsze u dołu strony

Korzystanie z funkcji Stopka zawsze u dołu strony pozwala umieścić stopkę na stronie internetowej. Opcja Stopka zawsze u dołu strony jest przeznaczona do wyświetlania przede wszystkim na dużych monitorach. Włączenie funkcja Stopka zawsze u dołu strony powoduje, że stopka pozostaje we właściwym miejscu, nawet jeśli okno przeglądarki jest zdecydowanie większe niż projekt witryny.

Podczas tworzenia witryny w programie Muse opcja Stopka zawsze u dołu strony jest dostępna w oknie dialogowym Nowa witryna (Plik > Nowa witryna). Można też wejść do pola wyboru Stopka zawsze u dołu strony poprzez menu Właściwości strony (Strona > Właściwości strony) i okna dialogowe Właściwości witryny (Plik > Właściwości witryny).

Domyślnie opcja Stopka zawsze u dołu strony jest włączona. 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 zawartość stron witryny jest skromniejsza, 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.

Jeśli chcesz jednak wyłączyć tę opcję dla całej witryny, usuń jej zaznaczenie w oknie dialogowym Właściwości witryny.

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