Jak zrobić nagłówek i stopkę w Adobe Muse?

Witam na moim blogu. W tym artykule napiszę konkretnie jak stworzyć swoją pierwszą stronę www bez pisania zbędnych kodów, HTML5, CSS3 czy JavaScript.
Na początek zajmiemy się od stworzenia nagłówka i stopki naszej strony. Jeśli masz przygotowany szablon swojej strony www w programie Photoshop to możesz go pociąć na kawałki i umieścić w Adobe Muse lub też możesz wykorzystać cały plik PSD. Ja wykorzystałem narzędzie do cięcia grafiki i wszystko zapisałem osobno.





A więc zacznijmy od otwarcia programu Muse. Przy uruchomieniu programu pojawia się okno powitalne, z którego wybieramy Create - New Site.
Ja wybieram ustawienia domyślne i klikam OK. Jak widzisz pojawiły się dwa prostokąty, które podpisane są HOME oraz A-MASTER.


Prostokąt z napisem HOME tworzy naszą pierwszą stronę naszego przyszłego serwisu. Co do A-MASTER jest to coś na zasadzie pola roboczego, dzięki któremu możemy umieszczać grafikę i będzie ona wyświetlana na każdej podstronie naszego serwisu. Jeśli umieścisz np. stopkę w HOME będzie ona widoczna tylko na tej stronie a nie będzie widoczna na innych stronach.
A więc zacznijmy od tworzenia naszej strony. Klikamy dwa razy na A-MASTER i pojawia się przestrzeń robocza.


Oczywiście w międzyczasie możesz sam zapoznać się z funkcjami programu Muse, a ja teraz przechodzę do konkretów. Wszystkie funkcje będą omawiane w kolejnych artykułach.
A więc zaczynamy od stworzenia nagłówka strony. W tym celu przechodzimy do górnego menu Browser Fill i wybieramy ikonkę folderu, która jest podpisana Image. Po kliknięciu pojawia się okno, z którego wybiorę plik PNG z kawałkiem nagłówka, a raczej jego tła.


Po wybraniu odpowiedniej grafiki wybieramy OK. Jak widzisz plik został dodany lecz wypełnia on całą stronę


aby to wszystko miało sens i jakoś wyglądało należy przejść do tej samej zakładki Browser Fill i wybieramy z rozwijanego menu Title Horizontally, dzięki czemu nasza grafika zostaje wyrównana do górnej części naszej strony i nie powiela się.


Teraz musimy zmienić kolor naszej strony bo jak widzisz jest ona koloru szarego. W tym celu przechodzimy do tej samej zakładki i wybieramy opcje Colour


Jak widzisz nasza strona zaczyna już jakoś wyglądać. Teraz bardzo brzydko wygląda ten prostokąt na środku naszej strony www. Aby to zmienić przechodzimy do górnego menu, a dokładnie do Fill oraz Stroke gdzie wybieramy mały kwadrat, który służy do usuwania koloru.


Jak widzisz nasza strona wygląda coraz lepiej. Teraz zajmijmy się dolną częścią czyli stopką naszej strony.
Na początek stwórz prostokąt za pomocą narzędzia Rectangle Tool, które znajdziesz w górnej części programu.


Kolor jest dowolny ponieważ zaraz dodamy tam naszą grafikę. Ustawmy naszą stopkę na stronie. Ważne żeby lewa i prawa strona prostokąta była równa z naszym obszarem roboczym, jeśli chcemy żeby stopka była na całą szerokość ekranu.


Następnym ważnym elementem jest to aby prostokąt był przyczepiony do Footera czyli musi być zaznaczona opcja Footer


Jeśli już to wszystko mamy, to po prawej znajduje się panel z różnymi ciekawymi narzędziami. Teraz nas interesuje wypełnienie tego prostokąta. Przechodzimy do zakładki Fill


podobnie jak z nagłówkiem naszej strony wykorzystujemy opcje Image, skąd wybieramy naszą grafikę, która wypełni całą stopkę, a także pozostałe ustawienia ustawiamy tak jak w poprzedniej części tworząc nagłówek


Jak widzisz mamy już wszystko gotowe. Nasza przyszła strona prezentuje się całkiem nieźle. Teraz możesz wybrać File - Preview page in browser i zobaczyć naszą stronę pod przeglądarką.


W następnych artykułach zajmiemy się dodawaniem menu, slide show, lightbox, wtyczkami społecznościowymi i innymi ciekawymi rzeczami.




Zapraszam do oglądania filmów z Youtube.


3 komentarze:

  1. Ja jak wchodze w image to nie mam do wyboru zadnych obrazow typu naglowka i stopki

    OdpowiedzUsuń
  2. Nie rozumiem trochę ? A skąd masz to mieć ? Jeśli zrobiłeś sobie szablon strony w programie graficznym, np. w Photoshop czy innym i pociąłeś szablon na kawałki to właśnie to możesz wykorzystać :D

    OdpowiedzUsuń
  3. W końcu znalazłem w tym internecie jak to trzeba zrobić - najważniejsze że tak fajnie wytłumaczone, bo wszystko rozumiem :) Dzięki bardzo!

    Pozdrawiam!
    psd na html

    OdpowiedzUsuń