Jak zaprojektować oszałamiającą stronę docelową dla witryny z portfolio za pomocą Adobe Muse?

Lista nakazów i zakazów dla witryny z portfolio jest nieskończona. Jednak z tych list znalazłem dwie wspólne cechy – unikanie wypełniania pojedynczej strony wszystkim i utrzymywanie strony docelowej i nawigacji tak prostej, atrakcyjnej i łatwo dostępnej, jak to tylko możliwe.

Tego dowiesz się z tego samouczka. Oprócz tego będziesz:

• Dowiedz się, jak zoptymalizować grafikę dla witryny Muse za pomocą programu Adobe Illustrator (niezbędne do szybszego wczytywania zawartości witryny)
• Umiejętność wyświetlania treści w perspektywie za pomocą programu Photoshop.
• Dowiedz się, jak zaprojektować profesjonalną stronę docelową w programie Adobe Muse.

WYMAGANIA NINIEJSZEJ INSTRUKCJI:

Aby właściwie zrozumieć i stworzyć dokładnie to, co pokazano w tym samouczku, musisz pobrać określone zasoby z różnych bezpłatnych zasobów. Jednak nadal możesz iść bez nich.

• Wejdź na https://goo.gl/KVL9r1 i pobierz ten obraz do nagłówka. Jego wymiary muszą wynosić 1400 x 750 pikseli. Oto zrzut ekranu ze strony. Umieść ten rozmiar w pudełkach o niestandardowych rozmiarach i pobierz go.

  

• Wejdź na http://goo.gl/ZeHxOF i http://goo.gl/BASRSP i pobierz pakiet ikon mediów społecznościowych oraz ikonę strzałki w dół.
• Logo użyte w tym samouczku można pobrać tutaj (hiperłącze – plik „assets.rar” jest dołączony do wiadomości e-mail)
• Wejdź na http://goo.gl/mzw1Xh i pobierz ten wektor ekranu iMac 27”, który będzie używany do wyświetlania projektu „projekt strony internetowej”.
• Otwórz aplikację Creative Cloud na komputer i pobierz mini makiety iPhone'a i iPada, jak pokazano poniżej. Zostaną one automatycznie dodane do Twojej biblioteki Photoshopa.

  

KROK #1: JAK ZOPTYMALIZOWAĆ GRAFIKĘ DLA INTERNETU W ADOBE ILLUSTRATOR:

1. Otwórz plik ikon społecznościowych „eps” w programie Illustrator. Wybierz ikonę Facebooka (wersja kwadratowa) i naciśnij Ctrl+Shift+G, aby rozgrupować te ikony.

2. Kliknij poza płótnem i ponownie wybierz ikonę facebook. Następnie przejdź do panelu transformacji znajdującego się na górze i umieść W=19,5, H=19,5 i naciśnij enter.

3. Naciśnij Ctrl+C, a następnie Ctrl+N. W tym nowym oknie dialogowym dokumentu, wpisz 'static_facebook_icon' w polu Nazwa, W=20 i H=20. Upewnij się, że piksele są wybrane z listy rozwijanej jednostek. Kliknij OK.

4. Naciśnij Ctrl + V, aby wkleić ikonę Facebooka i wyrównaj ją poprawnie.

5. Przejdź do Plik > wybierz „zapisz dla Internetu” (Alt+Shift+Ctrl+S). Wybierz PNG-24 z rozwijanej listy znajdującej się w prawym górnym rogu. Kliknij Zapisz i zapisz w wybranej lokalizacji. Zapisz również plik programu Illustrator (Ctrl+S)

6. Powtórz kroki od 2 do 5 dla ikon Twittera, Google plus, LinkedIn i Behance i zapisz je w Internecie.

UWAGA : Wybraliśmy format png, ponieważ mają dużą przezroczystość, stosunkowo mniejszy rozmiar i są najlepsze dla ikon i wektorów.

7. Podobnie zoptymalizuj te pięć ikon dla obrazu nagłówka. Tym razem zmień ich kolor na biały. Aby to zrobić, wybierz ikonę, przejdź do rozwijanej listy Wypełnienie znajdującej się w lewym górnym rogu pod menu aplikacji, wybierz biały kolor i zapisz do sieci. Teraz masz 10 ikon – 5 szarych i 5 białych.

8. Następnie zoptymalizuj ikonę strzałki w dół (kolor: biały, dokument W=30px, H=20px) i zapisz do sieci jako PNG-24.

9. Teraz utwórz nowy dokument o rozmiarze 1400 x 750 pikseli i nazwij go jako header_image. Kliknij OK.

10. Przejdź do Plik > Umieść i wyszukaj obraz, który pobraliśmy z pexels.com. Kliknij płótno, aby je umieścić i dopasować do płótna.

WSKAZÓWKA : Naciśnij „Z” na klawiaturze, przytrzymaj klawisz Alt i kliknij kilka razy na płótnie, aby trochę pomniejszyć, aby wszystko było widoczne naraz.

11. Wybierz narzędzie prostokąta z przybornika znajdującego się po lewej stronie okna aplikacji. Utwórz prostokąt i przekształć go do W=1400, H=750px. Następnie przeciągnij ten prostokąt na umieszczony obraz.

12. Po zaznaczeniu tego prostokąta przejdź do listy rozwijanej wypełnienia, wybierz menu bibliotek próbek znajdujące się w jego lewym dolnym rogu. Na tej liście przejdź do „Gradienty” i wybierz „Earthtones”.

13. Wybierz earthtone 30, jak pokazano na zrzucie ekranu poniżej i zamknij ten panel.

14. Mając nadal zaznaczony prostokąt, przejdź do zakładki gradientu znajdującej się po prawej stronie okna aplikacji. Jeśli go tam nie ma, naciśnij Ctrl+F9. Kliknij, przytrzymaj i przeciągnij środkowy suwak gradientu maksymalnie w lewo.

15. Następnie w polu 'Opacity' (znajdującym się na górze) wpisz 87% i naciśnij enter.

16. Zapisz ten obraz do internetu. Tym razem wybierz JPEG i jakość=86%. Zapisz również plik programu Illustrator.

KROK #2: PRZYGOTOWANIE AKTYWÓW W PHOTOSHOP:

17. Otwórz Adobe Photoshop CC. Przejdź do Plik > wybierz „Nowy”. Wpisz nazwę jako „ecommerce_design”, W=619px i H=310px.

18. Z panelu Biblioteki (znajdującego się po prawej stronie) wybierz pobraną mini makieta iPada i przeciągnij ją na płótno.

19. Przytrzymaj klawisz Shift i zwiększ jego rozmiar, przeciągając rogi i dostosuj go wewnątrz płótna, jak pokazano poniżej.

UWAGA : Możesz użyć narzędzia powiększania. Aby przełączać się między narzędziami powiększania i zaznaczania, naciśnij klawisze „Z” i „V” na klawiaturze. Ponadto, jeśli nie możesz znaleźć panelu bibliotek (lub innego panelu), po prostu przejdź do menu Okno > wybierz Biblioteki.

20. Wybierz narzędzie do tworzenia prostokątów i utwórz prostokąt o dowolnym rozmiarze wewnątrz płótna (nie martw się o jego kolor wypełnienia). Pojawi się okno właściwości. Wewnątrz tego wpisz W=1024px i H=768px i upewnij się, że ikona łańcucha nie jest zaznaczona.

21. Teraz kliknij ikonę łańcucha, aby ją wybrać. Ustaw W=290px i naciśnij enter. Zwiń ten panel właściwości.

22. W panelu Warstwy znajdującym się po prawej stronie wybierz 'Prostokąt 1', kliknij prawym przyciskiem myszy i wybierz 'Konwertuj na inteligentny obiekt'.

23. Następnie przejdź do menu edycji > wybierz „Dowolna transformacja”. Ponownie otwórz menu edycji> przekształć> wybierz „zniekształcić”.

24. Przytrzymaj jeden róg prostokąta i spraw, aby pokrywał się z jednym rogiem ekranu iPada. Zrób to dla wszystkich czterech rogów i naciśnij Enter. Otrzymasz następujący wynik. W razie potrzeby użyj narzędzia powiększania.

25. W panelu Warstwy kliknij prawym przyciskiem myszy warstwę tła i usuń ją. Ponadto, zrób niewidoczną warstwę „prostokąt 1”, klikając małą ikonę oka po jej lewej stronie.

26. Powtórz kroki od 18 do 22, aby utworzyć jeszcze jeden prostokąt, przekształć go w inteligentny obiekt i spraw, aby pokrywał się w każdym rogu z narożnikami ekranu iPada i naciśnij Enter.

27. Spraw, aby warstwa „prostokąt 1” była widoczna, a warstwa „ipad” niewidoczna.

28. Kliknij prawym przyciskiem warstwę „prostokąt 1” i wybierz „edytuj zawartość”. Otworzy się w nowej karcie. Przejdź do Plik > Umieść osadzony, wyszukaj plik „screen1.png”, który można znaleźć w pobranym folderze Logos. Kliknij miejsce i naciśnij Enter. Naciśnij klawisze Ctrl+S. Ta zmiana zostanie zaktualizowana w prostokącie 1 w naszym głównym pliku. Zamknij tę kartę.

29. Podobnie zrób to dla prostokąta 2 z 'screen2.png' i zapisz go. Przesuwaj warstwy w górę lub w dół w panelu warstw zgodnie z własnymi preferencjami. Usuń warstwę iPada.

30. Kliknij prawym przyciskiem dowolną warstwę prostokąta i wybierz „opcje mieszania”. Pojawi się okno stylu warstwy. Wybierz ostatnią opcję, którą jest „cień” i wprowadź wartości, jak pokazano poniżej.

31. W tym oknie dialogowym, tuż obok trybu mieszania, znajduje się pole koloru. Kliknij i wybierz następujące wartości kolorów.

32. Zastosuj ten sam efekt cienia również na drugiej warstwie. Naciśnij Alt+Ctrl+Shift+S. Wybierz PNG-24 i kliknij Zapisz. Otrzymasz następujący wynik.

UWAGA : W ten sposób możesz umieścić stronę internetową lub dowolny obraz w perspektywie. Musisz tylko znać dokładną rozdzielczość urządzenia, na którym zamierzasz go postawić. Zrób to dla makiet iphone'a i imac do wyświetlania projektów "projektowania logo" i "projektowania stron internetowych", jak pokazano poniżej.

KROK #3: KONFIGURACJA PRZESTRZENI ROBOCZEJ W MUSE:

33. Otwórz Adobe Muse CC. Zostaniesz powitany ekranem powitalnym. W sekcji „Utwórz nową” kliknij witrynę, a pojawi się okno dialogowe nowej witryny.

UWAGA : Innym sposobem utworzenia nowej witryny jest przejście do Plik > Nowa witryna lub Ctrl+N.

34. W tym oknie dialogowym znajduje się rozwijane menu z napisem „szerokość płynu”. Otwórz to, klikając go i wybierz „Stała szerokość” i zmień wartości szerokości strony i kolumn, jak pokazano poniżej. Wartość pola „rynna” zmieni się automatycznie.

35. Rozwiń opcję ustawień zaawansowanych i upewnij się, że zaznaczone jest pole wyboru „przyklejona stopka”. Upewnij się również, że witryna jest „wyśrodkowana” w obszarze przeglądarki. Kliknij OK. Muse przeniesie Cię do trybu PLAN.

36. Naciśnij Ctrl+S i zapisz swoją witrynę w wybranej lokalizacji. Zalecam utworzenie osobnego folderu dla swojej witryny i zapisanie go za każdym razem, gdy dokonasz zmiany.

UWAGA : Szerokość płynna służy do tworzenia układu responsywnego. Wybraliśmy stałą szerokość, ponieważ stworzymy efekt przewijania, który nie będzie działał w przypadku płynnych witryn.

37. Kliknij dwukrotnie „A-master” znajdujący się na dole w szarym obszarze. Z przybornika znajdującego się po lewej stronie okna aplikacji wybierz 'narzędzie tekstowe'.

38. Stwórz pole tekstowe na płótnie. Naciśnij Ctrl + T, aby otworzyć panel tekstowy i pod listą czcionek, poszukaj czcionek internetowych i wybierz „dodaj czcionki internetowe”.

39. Pojawi się nowe okno. Wybierz zakładkę 'edge web fonts', wyszukaj i pobierz kolejno następujące czcionki:

• Monotoni
• Teleks
• Numans
• Raleway
• Lato
• Arimo

Po pobraniu tych czcionek usuń pole tekstowe.

40. Otwórz panel 'Warstwy' znajdujący się po prawej stronie lub przejdź do menu Okno > wybierz 'Warstwy'. Kliknij małą ikonę papieru z zagiętą krawędzią znajdującą się w prawym dolnym rogu. Kliknij go dwukrotnie, aby utworzyć dwie dodatkowe warstwy.

41. Kliknij dwukrotnie „warstwę 1”. Pojawi się okno opcji warstwy. Pod nazwą wpisz „home_header” i kliknij OK. Powtórz ten proces dla pozostałych dwóch warstw i nazwij je odpowiednio „static_header” i „content”.

42. Ułóż warstwy w kolejności pokazanej poniżej, przeciągając je w górę lub w dół i zapisz zmiany.

UWAGA : umieściliśmy warstwy w tej kolejności, ponieważ chcemy, aby nasz nagłówek znajdował się na szczycie wszystkiego innego. Warstwy są skutecznym sposobem organizowania i układania zawartości witryny, zwłaszcza gdy układ staje się złożony.

43. Wybierz warstwę 'static_header' i zwiń ten panel.

KROK 4: USTAWIANIE NAGŁÓWKA STATYCZNEGO:

44. Na górze strony zobaczysz dwa przewodniki. Pierwszy to przewodnik „na górze strony”, a drugi to „przewodnik po nagłówku”. Kliknij, przytrzymaj i przeciągnij poniższy przewodnik nagłówka i ustaw go na 80 pikseli. Możesz to zrobić za pomocą władców. To jest nasz obszar nagłówka.

45. Wybierz narzędzie do tworzenia prostokątów lub naciśnij „M” na klawiaturze. Zrób mały prostokąt na płótnie i upewnij się, że jego obramowanie ma kolor „czerwony”, co oznacza, że ​​obiekt znajduje się w warstwie „static_header”.

46. ​​Przejdź do „Zmień rozmiar” (lub „Przekształć” w starszych wersjach Muse) znajdującego się w prawym górnym rogu, kliknij go i wpisz H=80.

47. Przeciągnij ten prostokąt i umieść go w obszarze nagłówka w taki sposób, aby zatrzasnął się z prowadnicami „góry strony” i „nagłówka”.

48. Teraz zwiększymy szerokość prostokąta i uczynimy go w 100% skalowalnym dla każdego rozmiaru ekranu. Rozwiń prostokąt do obu krawędzi i upewnij się, że zatrzasnął się wraz z krawędziami strony. Kiedy dotrzesz do krawędzi, na pomarańczowym wskaźniku pojawi się przewodnik wskazujący, że obiekt został uchwycony, a komunikat powie W=100% lub W=1400.

49. Po zaznaczeniu prostokąta kliknij listę rozwijaną Wypełnij pod menu aplikacji i wybierz kolor biały.

50. Kliknij słowo „obrys” obok, aby wypełnić. Kliknij ikonę łańcucha, aby go przerwać i umieść „1” w dolnym polu wagi obrysu.

51. Następnie kliknij menu rozwijane koloru obrysu, ustaw wartości R, G i B jako 235 każda. Następnie kliknij ikonę papieru z zagiętą krawędzią, aby utworzyć nową próbkę. Pojawi się okno opcji próbki. Kliknij OK i zapisz zmiany.

52. Przejdź do Plik > Umieść. Wyszukaj „static_logo.png” i kliknij Otwórz. Kursor zmieni swój wygląd na pistolet z załadowanym obrazem. Kliknij płótno, aby je umieścić.

53. Następnie przenieś ten obrazek na prostokąt nagłówka i wyrównaj go do jego pionowego środka (niebieska linia wskaże, kiedy jest wyśrodkowany) i przyciągnij go do lewej krawędzi, jak pokazano poniżej.

54. Ponownie przejdź do Plik > umieść i wybierz wszystkie statyczne ikony mediów społecznościowych, które zoptymalizowaliśmy za pomocą programu Illustrator. Kliknij Otwórz. Zobaczysz, że pistolet pozycyjny będzie miał numer (5) wskazujący pięć załadowanych obrazów. Jeśli chcesz przełączyć się na inną ikonę, aby umieścić ją jako pierwszą, możesz użyć klawiszy strzałek na klawiaturze. Umieść je jeden po drugim.

55. Wybierz wszystkie ikony i przejdź do panelu „Wyrównaj” znajdującego się obok opcji Zmień rozmiar w prawym górnym rogu. W menu „Wyrównaj do” wybierz opcję „Wyrównaj do obiektu kluczowego”.

56. Następnie wpisz 11 w polu 'Rozmieść odstępy'. Kliknij opcje „A” i „B”, jak pokazano na poniższym zrzucie ekranu.

57. Po zaznaczeniu tych ikon kliknij prawym przyciskiem myszy i wybierz „grupuj” lub Ctrl+G. Przenieś tę grupę na prostokąt nagłówka i przyciągnij ją do prawej krawędzi, wyrównując z logo, jak pokazano poniżej.

58. Utwórz pole tekstowe i wpisz w nim HOME. Naciśnij Ctrl+T i wybierz Czcionka: Telex, Rozmiar: 13, kolor: czarny, wyśrodkowany i 120% interlinii. Dostosuj szerokość i wysokość tego pola tekstowego zgodnie z rozmiarem czcionki.

59. W podobny sposób utwórz cztery dodatkowe pola tekstowe dla PRACA, USŁUGI, KONTAKT i INFORMACJE. Zaznacz je wszystkie, przejdź do wyrównania panelu i powtórz to, co zrobiliśmy z ikonami mediów społecznościowych. Tym razem zmień odstępy dystrybucji na 50. Pogrupuj i przenieś je do prostokąta nagłówka, jak pokazano poniżej.

60. Teraz przypniemy te obiekty do góry przeglądarki, co spowoduje, że nasz nagłówek będzie statyczny. Oznacza to, że zawsze będzie wyświetlany u góry przeglądarki, niezależnie od przewijania. Aby to zrobić, wybierz prostokąt nagłówka, przejdź do „Przypnij” znajdującego się w prawym górnym rogu i kliknij w jego górnym środkowym kwadracie, jak pokazano poniżej.

61. Podobnie przypnij logo w lewym górnym rogu, grupę menu u góry pośrodku, a grupę ikon społecznościowych w prawym górnym rogu. Nasz statyczny nagłówek jest gotowy.

KROK 5: USTAWIANIE STOPKI:

62. Zobaczysz trzy przewodniki na dole, a mianowicie – stopkę, dół strony i dół przeglądarki. Kliknij, przytrzymaj i przeciągnij przewodnik „dół przeglądarki” i ustaw go na 770 pikseli za pomocą linijek. Następnie przeciągnij prowadnicę „stopki” i przyciągnij ją do prowadnicy „dół strony”. To jest nasza stopka.

63. Utwórz prostokąt wewnątrz tego obszaru o wysokości H=270 i szer.=546, aby jego górna i dolna strona pokrywały się odpowiednio ze stopką i dołem prowadnic przeglądarki.

64. Po zaznaczeniu tego prostokąta kliknij słowo „skok” i zastosuj tylko górny skok wagi „1” (wartości kolorów obrysu: R=235 G=235 B=235). Przejdź do panelu „wyrównaj” i pod wyrównaniem obiektów wybierz „wyrównaj środki w poziomie” (jest to druga opcja).

65. Umieść static_logo.png i dodaj tekst wewnątrz tego prostokąta, jak pokazano poniżej. (Czcionka tekstu: Arimo, rozmiar: 14, kolor: R=37 G=37 B=37, wyśrodkowany i 120% interlinii).

66. Symbol praw autorskich, który widzisz przed 2016 rokiem, można dodać z panelu „Glify” znajdującego się po prawej stronie okna aplikacji. Jeśli go tam nie ma, przejdź do opcji Okno > Glify. Nasza stopka jest gotowa.

KROK #6: TWORZENIE NAGŁÓWKA STRONY GŁÓWNEJ I EFEKTU PRZEWIJANIA:

67. Zamknij stronę wzorcową i wróć do trybu planu.

68. Otwórz stronę 'Home', klikając ją dwukrotnie. Otwórz panel warstw, wybierz warstwę „home_header” i zwiń panel.

69. Zrób tu trochę miejsca, przeciągając warstwę stopki do 4000 pikseli za pomocą linijek.

70. Teraz utwórz prostokąt o szerokości 100%. Tak jak wcześniej, pełną szerokość można uzyskać, rozwijając prostokąt od jego lewej i prawej krawędzi i przyciągając go do obu krawędzi strony.

71. Rozwiń prostokąt w górę, przeciągając jego górną krawędź i przyciągnij go do górnej części prowadnicy strony, jak pokazano poniżej.

72. Przejdź do panelu zmiany rozmiaru, wpisz H=750px.

73. Po zaznaczeniu prostokąta kliknij słowo „Wypełnij” (nie menu rozwijane kolorów) i kliknij „dodaj obraz”. Wyszukaj plik „header_image.jpg”, który pobraliśmy z Pexels i zoptymalizowaliśmy w programie Illustrator. Z listy rozwijanej „Dopasowanie” wybierz opcję „Skaluj do wypełnienia” i umieść ją w lewym górnym rogu.

74. W samym polu opcji „Wypełnij”, obok wypełnienia, znajduje się opcja o nazwie „Przewiń”. Kliknij go i wstaw 0 w początkowych i końcowych polach ruchu. Oznacza to, że obraz pozostanie nieruchomy, a zawartość przesunie się, tworząc ładny i atrakcyjny wizualnie efekt przewijania.

75. Utwórz pole tekstowe i wpisz w nim „O NASZ ZESPOLE”. Czcionka: teleks, rozmiar: 13, wyrównanie do lewej, kolor: biały i interlinia: 120%. Przesuń go i umieść w lewym górnym rogu obrazu w następujący sposób.

76. Umieść wszystkie ikony społecznościowe, które zoptymalizowaliśmy dla naszego obrazu nagłówka. Wyrównaj je w równych odstępach, tak jak w przypadku nagłówka statycznego. Pogrupuj je i umieść w prawym górnym rogu obrazu w następujący sposób.

77. Utwórz pole tekstowe. Powinien mieć szerokość=944, wysokość=92. Wpisz w nim „PROJEKTUJEMY SIEĆ”. Czcionka: Monoton, rozmiar: 72, wyśrodkowana, 120% interlinii. Zmień kolor słowa 'WEB' na R=41 G=171 B=226 i biały dla reszty.

78. Utwórz jeszcze trzy małe pola tekstowe na USŁUGI, KONTAKT i BLOG. Czcionka: Telex, rozmiar: 13, kolor biały, wyśrodkowany i 120% interlinii.

79. Umieść obrazek 'header_logo.png'. Dostosuj logo i te cztery pola tekstowe w następujący sposób.

80. Przejdź do biblioteki „Widżety” znajdującej się po prawej stronie. Rozwiń sekcję „Przyciski”. Wybierz „Przycisk stanu” i przeciągnij go na płótno. Zamknij panel widżetów.

81. Ostrożnie wybierz małe kółko wewnątrz tego przycisku i naciśnij Usuń.

82. Kliknij dwukrotnie w polu tekstowym Lorem Ipsum, zaznacz cały tekst, usuń go i wpisz 'PORTFOLIO'.

83. Wybierz narzędzie wyboru (narzędzie strzałki) z przybornika. Przejdź do panelu tekstowego (Ctrl+T) i zmień formatowanie tekstu „portfolio” w następujący sposób.

84. Teraz wybierz przycisk stanu i zmień jego rozmiar na W=177, H=43. Dostosuj odpowiednio pole tekstowe wewnątrz przycisku.

85. Wybierz przycisk. Przejdź do opcji „promień narożnika” (znajdującej się obok obrysu). Kliknij wszystkie cztery rogi, aby były płaskie.

86. Po wybraniu przycisku spójrz na lewy górny róg, pod menu aplikacji. Zauważysz, że „przycisk stanu” jest napisany pogrubionymi literami. Nazywa się to „obecnym obszarem selekcji”. Pozwala wiedzieć, co wybrałeś.

87. Tuż obok jest „Normal”. Kliknij go, a będziesz mieć cztery stany.

88. W przypadku stanu Normal zmień kolor wypełnienia na „brak”, a kolor obrysu na biały.

89. Wybierz stan 'rollover', zmień kolor wypełnienia i obrysu na R=41 G=171 B=226.

90. W przypadku stanu „wciśnięta mysz” i „aktywny” wymagane zmiany zostaną zastosowane automatycznie.

91. Wybierz ponownie jego normalny stan, rozwiń panel „Przejście” znajdujący się na dole. Zaznacz pole wyboru „Zanikanie” i wprowadź wartości, jak pokazano poniżej. Zapisz zmiany.

92. Umieść obrazek 'down_arrow.png' pod przyciskiem. Powinieneś otrzymać następujący wynik.

93. Nasz główny nagłówek jest gotowy. Przejdź do Plik > Podgląd strony w przeglądarce (Ctrl+Shift+E) i sprawdź, czy wszystko działa poprawnie.

KROK #7: DODAWANIE TREŚCI:

94. Wróć do Muse, otwórz panel warstw, wybierz warstwę „treść” i zwiń panel.

95. Przewiń w dół do białej przestrzeni poniżej i utwórz pole tekstowe W=464, H=60. Wpisz w nim „NASZE OSTATNIE PRACE”. Czcionka: Raleway light, rozmiar: 46, kolor: czarny, wyśrodkowany i 120% interlinii. Teraz wybierz słowo „RECENT” i zmień jego czcionkę na „Raleway Bold”.

96. Zrób jeszcze dwa pola tekstowe. Jeden o W=376, H=165 i drugi o W=376, H=363.

97. Kliknij dwukrotnie wewnątrz pierwszego i wpisz „PROJEKT STRONY INTERNETOWEJ”. Czcionka: Raleway Extra Light, rozmiar: 77, kolor: czarny, z wyrównaniem do lewej, 100% interlinii.

98. Kliknij dwukrotnie wewnątrz drugiego i wklej trochę fikcyjnego tekstu z lipsum.com w następujący sposób.

• Główny nagłówek – Czcionka: Lato Bold, rozmiar: 30, kolor: R=33 G=42 B=52, wyrównany do lewej i 120% interlinii.
• Główny akapit – Czcionka: Lato light, rozmiar: 21, kolor: R=57 G=57 B=57, wyrównana do lewej i 120% interlinii.
• W przypadku nagłówka „Referencja klienta” – taki sam jak nagłówek główny, ale rozmiar to 21.
• W przypadku akapitu z referencjami – tak samo jak w akapicie głównym, ale czcionka to „Lato Light Italic”

99. Wybierz przycisk stanu „portfolio”, skopiuj go i wklej poniżej pola tekstowego, które utworzyliśmy w poprzednim kroku. Zmień tekst z portfolio na „ZOBACZ WITRYNĘ”

• Dla stanu normalnego – Wypełnienie: brak, obrys i kolor tekstu: czarny.
• Dla stanu najazdu – kolor wypełnienia i obrysu: R=41 G=171 B=226 i kolor tekstu: biały.

100. Umieść obraz „imac z makietą witryny”. Ułóż obraz, pola tekstowe i przyciski w następujący sposób.

101. Przewiń w dół do białej przestrzeni i utwórz prostokąt o szerokości 1200, wysokości 5. Zastosuj górny skok o wadze '1' i kolorze R=235 G=235 B=235. Umieść go w następujący sposób. Będzie to działać jako separator.

102. Skopiuj pola tekstowe i przyciski, które utworzyliśmy w krokach 92 do 95, wklej je poniżej separatora. Zmień tekst pierwszego pola na „PROJEKT LOGO”, a tekst przycisku na „WYŚWIETL NA ŻYWO”.

103. Umieść „iPhone z makietą logo” i ułóż je w następujący sposób.

104. Następnie skopiuj i wklej separator.

105. Podobnie skopiuj i wklej pola tekstowe i przycisk poniżej tego separatora. Zmień tekst pierwszego pola na „E-COMMERCE”.

106. Umieść 'ecommerce_design.jpg', który utworzyliśmy i zoptymalizowaliśmy w krokach od 15 do 30 w Photoshopie. Ułóż wszystko w następujący sposób.

107. Teraz utwórz prostokąt W=1004, H=363 bez wypełnienia i górnego obrysu o wadze '1' i kolorze: R,G,B=235 każdy.

108. Wewnątrz tego prostokąta utwórz dwa pola tekstowe. W pierwszym wpisz – „W CO WIERZYMY, W TO” (Czcionka: Raleway light, rozmiar: 35, kolor: R,G,B=37 każdy, wyśrodkowany i 100% interlinii). Wybierz słowo „BELIEVE” i zmień czcionkę na „Raleway bold”.

109. W drugim polu tekstowym wpisz słynny cytat Miltona Glasera, jak pokazano poniżej (czcionka: Lato Light Italic, rozmiar:70, kolor: R,G,B=37 każdy, wyśrodkowany i 120% interlinii).

110. Skopiuj i wklej dowolny z powyższych przycisków stanu i zmień jego tekst na „ZOBACZ NASZĄ PRACĘ”. Ułóż wszystko w następujący sposób.

KROK #8: ŁĄCZENIE:

111. Z przybornika wybierz „kotwicę łącza” lub naciśnij „A” na klawiaturze. Kursor zmieni swój wygląd na działko ładowane kotwicą. Umieść tę kotwicę nad polem tekstowym „NASZE OSTATNIE PRACE”, jak pokazano poniżej.

112. Pojawi się okno dialogowe z opcjami kotwicy. W polu nazwy wpisz 'recent_work'.

113. Wybierz zdjęcie strzałki w dół poniżej przycisku portfolio. Przejdź do listy rozwijanej „Hiperłącza” znajdującej się u góry i wybierz „recent_work”. Zapisz zmiany i wyświetl podgląd witryny (Ctrl+Shift+E).

KROK #9: DODAWANIE TEKSTU ALTERNATYWNEGO, METADANYCH, TAGÓW POZIOMU ​​I FAVIKONY:

114. Tekst alternatywny umożliwia wyszukiwarkom zrozumienie znaczenia materii zawartej w obrazie i musi być dołączany do każdego obrazu, który dodajesz do swojej witryny. Aby to zrobić, kliknij prawym przyciskiem myszy dowolny z trzech umieszczonych obrazów i wybierz „edytuj właściwości obrazu”.

115. Pojawi się okno dialogowe właściwości obrazu. Zobaczysz tutaj dwa pola. Jednym z nich jest „podpowiedź”, a drugim „tekst alternatywny”. Podstawowe różnice między nimi są następujące:

UWAGA : Powinieneś przeszukać internet w poszukiwaniu metod i ważnych uwag dotyczących dodawania tekstu alternatywnego i metadanych, ponieważ są to podstawowe aspekty lepszego SEO.

116. Aby dodać metadane, wróć do widoku planu, kliknij prawym przyciskiem myszy stronę główną i wybierz „właściwości strony”. Pojawi się nowe okno zawierające trzy zakładki, a mianowicie – układ, metadane i opcje. Przełączaj się między tymi kartami, poznaj opcje i dodaj odpowiednie słowa kluczowe.

117. Innym ważnym czynnikiem, który należy wziąć pod uwagę przed uruchomieniem witryny online, jest zmiana niektórych właściwości tekstu w celu dodania znaczników poziomu.

UWAGA : Zwykle, gdy dodajesz pisemną treść na stronie internetowej, nagłówki są pogrubione i większe niż akapity (lub inny tekst), aby zilustrować różnicę między nimi. My, ludzie, możemy rozpoznać tę różnicę. Ale problem polega na tym, że przeglądarka nie rozumie, która część tekstu jest nagłówkiem, a która akapitem, chyba że przypiszesz wyznaczone znaczniki poziomu do każdego z nich.

Z pewnością zaprezentuje twoją stronę online tak, jak ją zaprojektowałeś, niezależnie od tego, czy zastosowałeś tagi, czy nie (ze względu na CSS), ale aby stworzyć witrynę przyjazną SEO, konieczne jest użycie tych opisowych tagów.

118. Aby to zrobić, zaznacz tekst, przejdź do panelu tekstowego (Ctrl+T), a na dole zobaczysz listę rozwijaną zawierającą wszystkie tagi. Wybierz je odpowiednio i zapisz zmiany.

119. Przejdź do Plik > Właściwości witryny. Na karcie treści ostatnią opcją jest „Favicon” (w starszych wersjach Muse znajduje się ona na karcie Układ). Gdy najedziesz kursorem na słowo „Favicon”, pojawi się podpowiedź opisująca, co to jest i jakie powinny być jego odpowiednie wymiary. Korzystne jest dodanie favicon, ponieważ ma to na celu wyróżnienie Twojej marki i ułatwienie identyfikacji witryny, jeśli użytkownicy dodają ją do zakładek.

KROK #10: EKSPORTOWANIE WITRYNY:

120. Na koniec przejdź do Plik > Eksportuj jako HTML (Ctrl+E). W polu URL witryny wpisz www.squaremaze.com i wybierz lokalizację, do której chcesz wyeksportować witrynę. Kliknij OK. Nasza strona docelowa jest już gotowa. Możesz go podejrzeć (plik 'index.html') w dowolnej przeglądarce i przetestować jej wygląd i wydajność.

OSTATECZNY WYNIK:

WNIOSEK

Korzystanie z innych aplikacji, takich jak Illustrator, Photoshop, Fireworks, Fuse i Animate, do tworzenia wysokiej jakości zasobów witryny Muse zawsze okazywało się korzystne i przynosiło wyjątkowe rezultaty. To tylko jedno podejście do projektowania za pomocą tego niesamowitego narzędzia. Śmiało i odkrywaj więcej. Dziękuję.