Tworzenie jednostronicowej witryny dla małych firm za pomocą programu Adobe Muse

Adobe Muse to potężne narzędzie, dzięki któremu projektowanie stron internetowych jest zaskakująco łatwe i interesujące. Łatwiejsze pod względem braku kodu do tworzenia profesjonalnych stron internetowych i interesujące pod względem pełnej kontroli nad projektem w przeciwieństwie do innych aplikacji typu „przeciągnij i upuść”.

Jedną z najbardziej imponujących cech tej aplikacji WYSIWYG (What You See Is What You Get) jest to, że zapewnia ona odpowiedni przepływ pracy, pomagając projektantowi krok po kroku w tworzeniu strony internetowej.

Po ukończeniu tego samouczka:

• Masz jasne zrozumienie każdego technicznego i projektowego aspektu Muse.
• Dowiedz się, jak projektować profesjonalnie w krótszym czasie.
• Dowiedz się o darmowych zasobach, w których możesz znaleźć wspaniałe grafiki do swojej witryny.
• Błyskawicznie stwórz w pełni funkcjonalną, jednostronicową witrynę internetową.

Wymagania tego samouczka

Aby utworzyć tę witrynę, musisz pobrać określone obrazy, wektory i czcionki. Ale nadal możesz podążać bez tych zasobów. Aby odpowiednio uporządkować zawartość, utwórz osobny folder dla swojej witryny.

• Wejdź na pexels.com i pobierz:

  • 4 obrazy o rozmiarze 1160 x 480 do pokazu slajdów. Oto zrzut ekranu z pexels. Możesz umieścić ten rozmiar w polu „rozmiar niestandardowy” na tej stronie.

  • 6 obrazów o rozmiarze 271 x 208 do sekcji „usługi”.

  • 1 obraz o rozmiarze 1160 x 692 w sekcji „Kontakt”.

• Wejdź na freepik.com i pobierz:

  • Jedna ikona krzyżyka (możesz edytować tę ikonę w programie Illustrator lub po prostu pobrać plik png z feepik).
  • 6 obrazów twarzy do sekcji „Świadectwa”.

• Wejdź na subtelnepatterns.com i pobierz wzór 'brickwall’ do działu 'Testimonials’.

• Gdy będziesz kontynuować ten samouczek, powiem ci, jak pobrać wymagane czcionki (można to zrobić w programie Muse).

• Użyj fałszywego tekstu z lipsum.com.

ZACZNIJMY!

Przygotowanie przestrzeni roboczej i ustawienie nagłówka

1 Utwórz nową witrynę, przechodząc do Plik > Nowa witryna (Ctrl+N) i wprowadź wartości, jak pokazano poniżej. Nie zapomnij zaznaczyć pola wyboru „Sticky Footer”. Kliknij OK, aby przejść do trybu PLAN. Kliknij dwukrotnie A-Master znajdujący się na dole w szarym obszarze. Wszystko utworzysz na tej stronie wzorcowej.

2 Wybierz narzędzie tekstowe z przybornika znajdującego się po lewej stronie okna aplikacji. Kliknij i przeciągnij na płótnie lub stronie, aby utworzyć pole tekstowe. Przejdź do panelu tekstowego (Ctrl+T), pod listą czcionek, poszukaj czcionek internetowych i wybierz „Dodaj czcionki internetowe” i pobierz następujące czcionki:

• Rametto Jeden
• Kawałek
• Questrialny
• Raleway
• szlachetny
• PT Bez
• Ubuntu
• Homar

Po pobraniu tych czcionek usuń to pole tekstowe.

3 Przejdź do panelu Warstwy znajdującego się po prawej stronie okna aplikacji. Jeśli go tam nie ma, przejdź do menu Okno > Warstwy. Zobaczysz tam warstwę o nazwie Layer 1 (kolor niebieski). Jest to domyślna warstwa i wszystko, co tworzysz lub umieszczasz na płótnie, jest tam umieszczane. Kliknij dwukrotnie tę warstwę i nazwij ją jako „Nagłówek”.

4 Wewnątrz panelu warstw kliknij małą ikonę zagiętego papieru znajdującą się w prawym dolnym rogu. Kliknięcie tego spowoduje utworzenie nowej warstwy w kolorze czerwonym. Ponownie kliknij dwukrotnie tę warstwę i zmień jej nazwę na „Zawartość”.

5 Kliknij i przeciągnij tę warstwę treści i umieść ją poniżej warstwy nagłówka. Zrobiliśmy to, ponieważ chcemy, aby nasz nagłówek był na szczycie wszystkiego.

6 Wybierz warstwę nagłówka i zwiń panel warstw.

7 Wybierz narzędzie Prostokąt z przybornika lub naciśnij „m” na klawiaturze.

8 Narysuj mały prostokąt na płótnie i upewnij się, że kolor jego obramowania jest niebieski, co wskazuje, że ten obiekt znajduje się w warstwie nagłówka.

9 Przejdź do panelu Przekształć znajdującego się w prawym górnym rogu okna aplikacji. Pozostaw szerokość (W) i wpisz 50 w polu wysokości wewnętrznej (H) i naciśnij enter. (Nie przejmuj się wartościami X i Y).

10 Na górze strony zobaczysz dwie linie koloru niebieskiego (pokazane na zrzucie ekranu poniżej). Są to tak zwane „przewodniki”. Gdy najedziesz kursorem na pierwszy przewodnik, pojawi się komunikat „Góra strony, przeciągnij, aby dostosować dopełnienie nad stroną”, a drugi komunikat „Nagłówek, przeciągnij, aby dostosować pozycję”. Ustawienie tych przewodników na samym początku jest bardzo ważne.

11 Teraz, gdy stworzyliśmy prostokąt o wysokości H=50, kliknij, przytrzymaj i przeciągnij prowadnicę „góry strony”, aż pole, które pojawi się poniżej po rozpoczęciu przeciągania, powie Y=50.

12 Podobnie przeciągnij powyższą prowadnicę nagłówka na prowadnicę górnej strony, aż wyświetli się Y=0. Zrobiliśmy to, aby skonfigurować nasz obszar nagłówka. (Możesz poeksperymentować z umieszczeniem tych prowadnic w różnych pozycjach, aby uzyskać różne wyniki, ale na razie jest to dobre).

13 Zaznacz prostokąt, który właśnie utworzyliśmy, przeciągnij go do obszaru nagłówka, tak aby pasował.

14 Teraz musimy zwiększyć szerokość prostokąta do 100%, aby nagłówek wyglądał idealnie na każdym rozmiarze ekranu. Rozwiń prostokąt do obu krawędzi i upewnij się, że łączy się z krawędziami. Pojawi się pomarańczowy przewodnik, który zapewnia, że ​​obiekt został przyciągnięty. Gdy zwiększysz szerokość prostokąta, wyskakujące okienko powie W=100% lub W=1160, gdy dotrzesz do krawędzi.

15 Pozostaw wybrany prostokąt, kliknij słowo Wypełnij pod menu aplikacji i ustaw opcje w następujący sposób. Wybierz pierwszy kolor jako Czarny, a drugi kolor: R=37, G=37, B=37.

16 Przejdź do Plik > Zapisz witrynę. Zapisz swoją witrynę za każdym razem, gdy dokonasz zmiany.

17 Utwórz pole tekstowe i wpisz – „example.com” i zmień jego formatowanie, jak pokazano poniżej.

18 Dopasuj rozmiar pola tekstowego tak, aby cały tekst znajdował się w jednym wierszu. Zaznacz to pole tekstowe i przeciągnij je nad czarny prostokąt. Wyrównaj go do pionowego środka prostokąta (niebieska linia poinformuje Cię, kiedy jest wyśrodkowany) i przyciągnij go do lewej krawędzi, jak pokazano poniżej.

19 Utwórz pole tekstowe i wpisz – „Dom”. Zmień jego formatowanie w następujący sposób. Odpowiednio dostosuj szerokość i wysokość pola tekstowego. Możesz to zrobić również z panelu transformacji. Mój ma szer.=52, wys.=17.

20 Skopiuj i wklej to pole tekstowe i wpisz „Usługi” w nowym polu. Dopasuj szerokość. Przeciągnij i umieść to pole tekstowe obok domu z bardzo małą różnicą między nimi. Ponownie, prowadnice pomogą ci we właściwym ustawieniu.

21 Skopiuj i wklej to pole tekstowe jeszcze cztery razy i wpisz – Dlaczego my, Referencje, Kontakt z nami i Biuletyn. Umieść te pola tekstowe jedno po drugim w równych odstępach obok „usług”.

22 Po wybraniu narzędzia do zaznaczania i naciśnięciu klawisza Shift zaznacz wszystkie te pola tekstowe jeden po drugim. Przejdź do panelu tekstowego, zmień kolor na biały. Wybierz grupę tych pól i umieść ją nad prostokątem nagłówka. (Wyśrodkowany w pionie i wyrównany do prawego marginesu strony). To jest nasze Menu.

23 Ponownie, przy wybranym narzędziu do zaznaczania i wciśniętym klawiszu Shift, zaznacz te pola tekstowe, prostokąt i pole tekstowe example.com. W prawym górnym rogu zobaczysz opcję o nazwie Pin. Kliknij jego górne środkowe pole, aby przypiąć te elementy. Oznacza to, że gdy użytkownik będzie przewijał Twoją witrynę, ten nagłówek pozostanie na górze. Jest to bardzo przydatne, ponieważ użytkownik nie będzie musiał przewijać do końca, aby wybrać inną opcję.

24 Przejdź do panelu Warstwy i zablokuj warstwę nagłówka. Można to zrobić, klikając wewnątrz pola po lewej stronie nazwy warstwy. Gdy zablokujesz warstwę lub dowolny obiekt, nie wpłynie to na jego wygląd, ale nie będziesz mógł wybrać tych elementów, chyba że je odblokujesz. Zrobiliśmy to, aby całkowicie wyeliminować ryzyko przypadkowego przeniesienia przedmiotów.

25 Wybierz warstwę zawartości i zwiń panel warstw.

Ustanawianie pokazu slajdów

26 Przejdź do biblioteki widżetów znajdującej się po prawej stronie okna aplikacji. Jeśli go tam nie ma, przejdź do menu Okno > wybierz Biblioteka widżetów. Rozwiń sekcję „pokazy slajdów” i wybierz „Puste”. Kliknij i przeciągnij ten obiekt na płótno. Pojawi się czarne okno z opcjami pokazu slajdów.

27 Upewnij się, że opcje są ustawione tak, jak pokazano na poniższym obrazku. W sekcji części na dole odznacz pola wyboru Poprzedni, Następny, Podpisy i Licznik. Nic z tego nie jest nam potrzebne.

28 Kliknij w dowolnym miejscu obszaru roboczego, aby zniknęło to wyskakujące okienko. Teraz ostrożnie kliknij wewnątrz pokazu slajdów. Klikając go raz, zobaczysz, że „Pokaz slajdów” został zapisany w „Typie bieżącego obszaru zaznaczenia”. Znajduje się w lewym górnym rogu pod menu aplikacji. W tym obszarze możesz zobaczyć, co wybrałeś. Jest to bardzo przydatna funkcja, gdy układ staje się skomplikowany. Kliknij ponownie, a zobaczysz, że w opisie jest napisane „Obraz bohatera”.

29 Ręcznie zwiększ szerokość obrazu bohatera, rozszerzając go od środka. Przyciągnij go do obu krawędzi strony (aby miała 100% szerokości) i do dołu prostokąta nagłówka, jak pokazano poniżej.

30 Przejdź do panelu transformacji i wstaw H=500.

31 Ponownie otwórz opcje pokazu slajdów, klikając małe niebieskie kółko z białym prostokątem w środku (znajduje się ono w prawym górnym rogu pokazu slajdów).

32 Kliknij ikonę folderu obok opcji „Dodaj obrazy…”, wyszukaj obrazy, które pobraliśmy do pokazu slajdów. Wybierz wszystkie cztery i kliknij otwórz.

33 Przejdź do Plik > wybierz „Podgląd strony w przeglądarce” lub Ctrl+Shift+E i zobacz, jak będzie wyglądał pokaz slajdów, gdy strona będzie już dostępna. Zalecam zapamiętanie skrótów klawiaturowych, których używam w tym samouczku. W ten sposób przyspieszysz proces projektowania.

Tworzenie sekcji „Usługi”.

34 Teraz, gdy mamy ustawiony nagłówek i pokaz slajdów, nadszedł czas na utworzenie sekcji dla każdej pozycji, którą dodaliśmy do naszego menu. Zacznijmy od „usług”. Utwórz pole tekstowe i wpisz w nim usługi (wszystkie małe litery) i zmień jego formatowanie w następujący sposób.

35 Kliknij dwukrotnie wewnątrz tego pola tekstowego i wybierz tylko literę „I”. Zmień czcionkę na „Chunk” i pozostaw wszystko bez zmian. Dostosuj wysokość tego pola tekstowego. Kiedy zmniejszysz jego wysokość, w pewnym miejscu pojawi się przerywana linia i pudełko nie będzie się skracać. Nie zmniejszaj później rozmiaru. Jest to najniższa możliwa wysokość przy tym rozmiarze czcionki.

36 Po zaznaczeniu pola tekstowego przejdź do panelu przekształcania i ustaw kąt obrotu na -90 stopni (90 stopni minus).

37 Przenieś pole tekstowe na lewą stronę płótna, jak pokazano poniżej.

38 Możesz trochę pomniejszyć, aby zobaczyć całą zawartość na raz lub odpowiednio dopasować obiekty. Aby to zrobić, spróbuj wpisać inne wartości (mniej niż 100%) w sekcji poziomu powiększenia u góry. Po wpisaniu wartości naciśnij enter.

39 Przejdź do Plik > wybierz „Miejsce”. Wybierz pierwszy obraz, który pobraliśmy do naszej sekcji usług. Kliknij otwórz.

40 Kursor zmieni swój wygląd na pistolet załadowany obrazem. Kliknij płótno, aby je umieścić. Przesuń i umieść go tak, aby był wyrównany z górną krawędzią pola tekstowego „usługi”.

41 Skopiuj ten obraz i wklej go dwukrotnie. Wybierz te wklejone obrazy jeden po drugim i wyrównaj je w równych odstępach z pierwszym obrazem.

42 Wybierz drugi obraz, kliknij go prawym przyciskiem myszy i wybierz „zastąp obraz” (jest to ostatnia opcja). Wyszukaj drugi obraz i kliknij otwórz. Zastąp również trzeci obraz.

43 Utwórz pola tekstowe na informacje o usługach i zastosuj formatowanie nagłówków i akapitów, jak opisano poniżej. Prowadnice pomogą ci odpowiednio je wyrównać.

• Nagłówki: czcionka: Raleway Bold, rozmiar = 20, kolor: czarny, wyrównanie do lewej i 100% interlinii.
• Dla akapitów: czcionka: Questrial, rozmiar=15, kolor: R=67 G=67 B=67, wyrównanie do lewej i 120% interlinii.

44 Umieść jeszcze trzy obrazy, tak jak to zrobiliśmy w poprzednich krokach, i podobnie utwórz dla nich tekst opisu. Powinieneś mieć następujący wynik.

Wynik końcowy sekcji „Usługi”.

Tworzenie sekcji „Dlaczego my”.

45 Następna jest sekcja „Dlaczego my”. Ten jest trochę skomplikowany. Zachowaj ostrożność przy wybieraniu obiektów. Najpierw utwórz prostokąt o szerokości 100% i H=996. Wypełnij go kolorem (R=47, G=48, B=55). Kliknij prawym przyciskiem myszy ten prostokąt> Ułóż> wybierz „prześlij do tyłu” (nie wysyłaj do tyłu).

46 Rozszerz swój obszar roboczy, klikając i przeciągając prowadnicę „dół strony”, aby mieć wystarczająco dużo miejsca na tworzenie treści, które zostaną umieszczone na właśnie utworzonym prostokącie.

47 Przewiń w dół do białej pustej przestrzeni i utwórz kolejny prostokąt o wymiarach W=351 i H=351. Wypełnij go białym kolorem i bez obrysu.

48 Przejdź do opcji 'promień naroża’ (znajduje się obok obrysu pod menu aplikacji). Kliknij wszystkie rogi, aby je zaokrąglić i umieść 500 w pudełku obok.

49 Będziesz miał krąg. Przeciągnij ten okrąg na prostokąt i dostosuj go w następujący sposób. Obok promienia narożnika znajduje się opcja o nazwie „Krycie”. Po zaznaczeniu koła wpisz 14 w tym polu.

50 Utwórz pole tekstowe i wpisz – dlaczego my (wszystkie małe). Zmień czcionkę na Rammetto One, size=100, Color R=241 G=244 B=247, interlinia 100% i wyrównaj ją do środka. Umieść to pole tekstowe wewnątrz okręgu i odpowiednio je wyrównaj.

51 Teraz utworzymy linie przerywane. Utwórz prostokąt o wymiarach W=9 i H=9, bez wypełnienia. Kliknij słowo „obrys” obok wypełnienia. Wybierz kolor R=241 G=244 B=247. Kliknij ikonę łańcucha, aby go zerwać i wpisz „1″ w wadze dolnego uderzenia.

52 Skopiuj ten prostokąt obrysu z jednej strony i wklej go kilka razy. Ułóż je w jednej linii (powiększ trochę za pomocą narzędzia powiększania, jeśli trudno ci zobaczyć te prostokąty). Po uzyskaniu pożądanej długości linii przerywanej zaznacz wszystkie te prostokąty, kliknij prawym przyciskiem myszy i wybierz „Grupuj”. Skopiuj i wklej tę grupę dla innych przerywanych linii.

53 W przypadku nachylonych linii przerywanych spróbuj ustawić różne kąty obrotu w panelu transformacji. Użyłem 150 i 30 stopni. Będziesz musiał usunąć niektóre prostokąty z tej grupy, aby mieć krótsze długości. Dostosuj te linie w pobliżu okręgu, jak pokazano poniżej.

54 Teraz dodamy trochę więcej tekstu dla numerów, nagłówków i opisów. Użyj następujących ustawień dla każdego z nich i dostosuj te pola tekstowe, jak pokazano poniżej.

• Dla liczb: Czcionka=Rammetto One, Kolor: R=196 G=214 B=193, wyrównany do środka i 100% interlinii, rozmiar: 200 (dla numeru „1″), 160 (dla numerów „2″ i „3″) i 120 (dla numerów „4″ i „5″).
• Dla nagłówków: czcionka=Raleway Bold, rozmiar=18, kolor:biały, wyrównanie do środka i 100% interlinii.
• Dla akapitów: czcionka=Questrial, rozmiar=16, kolor: R=241 G=244 B=247, wyrównanie do środka i 120% interlinii.

Ostateczny wynik sekcji „Dlaczego my”.

Tworzenie sekcji „Referencje”.

55 Ponownie stwórz trochę miejsca do pracy, przeciągając dolną część prowadnicy strony. Zrób prostokąt o szerokości 100% i H=486.

56 Po zaznaczeniu prostokąta kliknij słowo „Wypełnij” i kliknij „Dodaj obraz” obok opcji obrazu. Wyszukaj pobrany przez nas obraz wzoru cegły. W opcji Dopasowanie wybierz „Sąsiadująco”, aby wypełnić cały prostokąt tą teksturą.

57 Przewiń w dół do pustego miejsca i utwórz pole tekstowe o wymiarach W=406, H=289 za pomocą panelu transformacji. Wpisz – „co inni mają do powiedzenia” (wszystkie małe). Zmień jego czcionkę na Rammetto One, rozmiar=70, wyrównaj do lewej, wartości kolorów R=37 G=37 B=37 i interlinia=100%.

58 Po zaznaczeniu tego pola tekstowego kliknij obrys słowa, zastosuj obrys prawy o grubości jeden i koloru czarnego. Przeciągnij to pole tekstowe i umieść je nad prostokątem ze wzorem ceglanej ściany.

59 Kolejnym krokiem jest dodanie referencji klientów. W tym celu użyjemy obrazów wektorowych okrągłej twarzy, które pobraliśmy z freepik.com. Ponownie zejdź do białej pustej przestrzeni, abyś mógł odpowiednio dostosować swoją kompozycję.

60 Przejdź do biblioteki widżetów i przeciągnij „Blank” z sekcji kompozycji na płótno. Kliknij znak plus, aby dodać trzy kolejne wyzwalacze. Ostrożnie wybierz pierwszy wyzwalacz i potwierdź swój wybór za pomocą bieżącego obszaru wyboru, który mówi wyzwalacz. A tuż obok znajduje się opcja o nazwie „Aktywny”. Kliknij to, aby rozwinąć. Wybierz stan „Normalny” i wybierz „bez wypełnienia” i „bez obrysu” dla tego stanu. Powtórz to dla każdego stanu Rollover, Mouse Down i Active. Przejdź do panelu transformacji z wybranym pierwszym wyzwalaczem i ustaw W=10, H=10.

61 Powtórz poprzedni krok dla każdego wyzwalacza, jaki mamy. Oznacza to, że nie stosuj wypełnienia ani obrysu dla każdego stanu i przekształć wyzwalacze do rozmiaru 10 x 10. Przesuń wyzwalacze bliżej siebie.

62 Teraz. Dostosujemy cele dla każdego z tych wyzwalaczy. Duży prostokąt, który widzisz, jest celem. Wybierz pierwszy wyzwalacz i wybierz jego normalny stan z panelu stanów. Następnie wybierz cel dla tego wyzwalacza i nie stosuj wypełnienia ani obrysu dla każdego stanu. Następnie przejdź do panelu transformacji i ustaw cel W=360, H=370.

63 Powtórz poprzedni krok dla każdego celu. Tylko upewnij się, że najpierw wybrałeś wyzwalacz, ustawiłeś go w normalnym stanie, a następnie wybrałeś odpowiedni cel w normalnym stanie, a następnie nie zastosowałeś wypełnienia ani obrysu. Nie będziesz musiał zmieniać rozmiaru każdego celu. Po prostu zrób to dla jednego, a zostanie to zastosowane do wszystkich.

64 Teraz zaczniemy dodawać treść do tej kompozycji. Przejdź do Plik > Umieść i otwórz pierwszy obraz twarzy i umieść go poza kompozycją. Przeciągnij ten obraz i umieść go teraz w kompozycji. Zobaczysz, że w prawym górnym rogu pojawi się niebieskie kółko, co oznacza, że ​​ten obraz jest teraz częścią kompozycji.

65 Utwórz trzy pola tekstowe – jedno na imię i nazwisko osoby, jedno na jej oznaczenie i jedno na oświadczenie lub recenzję. Zastosuj formatowanie zgodnie z poniższym opisem i umieść te pola tekstowe w kompozycji. Tylko upewnij się, że każdy z nich ma niebieskie kółko w rogu.

• Imię i nazwisko osoby: Czcionka: Nobile Medium Italic, rozmiar = 18, Kolor: R = 37 G = 37 B = 37, wyrównana do środka i 100% interlinii.
• Oznaczenie: Czcionka: Nobile, rozmiar = 15, Kolor: R = 37 G = 37 B = 37, wyrównana do środka i 100% z przodu.
• Dla Oświadczeń (z cudzysłowami): Czcionka: PT Sans Italic, rozmiar=18, kolor: R=69 G=64 B=68, wyrównana do środka i 100% interlinii.

66 Po wybraniu obrazu twarzy, zastosuj pociągnięcie o wadze 4 z każdej strony, kolor: biały, zaokrąglij wszystkie rogi i zwiększ promień, aż owinie się wokół obrazu. Używam 100 jako promieni narożnych.

67 Przejdź do zakładki „Efekty” (znajdującej się obok opcji zaokrąglenia rogów) i zaznacz pole wyboru „cień”. Umieść wartości jako; Kolor=Czarny, Krycie=37%, Rozmycie=12, Kąt=78 i Odległość=5.

68 Powtórz poprzednie kroki (od 64 do 67) dla dodania treści do każdego celu i zapisz zmiany (Ctrl+S). Umieść tę kompozycję na prostokącie ze wzorem ceglanego muru.

69 Teraz zaznacz całą kompozycję (upewnij się z aktualnym obszarem zaznaczenia) i rozwiń jej opcje klikając w małe niebieskie kółko. Ustaw opcje, jak pokazano poniżej. Naciśnij Ctrl + Shift + E i sprawdź, czy działa dobrze.

70 Powinieneś otrzymać następujący wynik.

Ostateczny wynik sekcji „Świadectwa”.

Tworzenie sekcji „Kontakt”.

71 Następna sekcja to Skontaktuj się z nami. W tej sekcji dodamy obraz tła, formularz i kilka pól tekstowych. Najpierw utwórz prostokąt o szerokości 100% i H=692. Wypełnij go obrazem, który pobraliśmy dla tej sekcji i wybierz „skala do wypełnienia” w obszarze Dopasowanie. Zmień jego krycie na 72%.

72 Utwórz kolejny prostokąt o tej samej szerokości i wysokości i wypełnij go gradientem. Umieść wartości gradientu jako; Krycie=90% do 46%, Kolor: Czarny do R=69 G=64 B=68, Punkt skupienia=66%, Kierunek: Poziomy i Rozmiar: automatyczny. Umieść ten prostokąt nad obrazem i upewnij się, że zatrzaśnie się przy każdej krawędzi.

73 Przejdź do biblioteki widżetów. W formularzach wybierz „prosty kontakt” i przeciągnij go na kanwę. Pojawi się okno z opcjami formularza. Wpisz nazwę formularza: Formularz kontaktowy, Wyślij e-mail na adres: wpisz swój adres e-mail, na który chcesz otrzymywać informacje wprowadzane przez odwiedzających, Po wysłaniu: wybierz opcję „pozostań na bieżącej stronie”. Ostatnia opcja to „Edytuj razem”. Upewnij się, że jest zaznaczone. W ten sposób będziesz musiał wprowadzić zmiany tylko w jednym polu, a zostaną one zastosowane we wszystkich. Kliknij dowolne miejsce na płótnie, aby zniknęło pole opcji.

74 Wybierz formularz. Kliknij etykietę „Nazwa” i klikaj ją ponownie, aż zobaczysz napis „Etykieta” w bieżącym obszarze wyboru. Naciśnij usuń. Powtórz tę czynność dla etykiet wiadomości e-mail i wiadomości i usuń je.

75 Wybierz formularz ponownie i wybierz pierwsze pole formularza z napisem „Wprowadź nazwę”, aż zobaczysz „Wprowadzanie tekstu” w bieżącym obszarze wyboru. Zastosuj brak wypełnienia i obrys dolny (waga jeden i kolor biały) dla każdego stanu, czyli od Pusty do Fokus. Jako stan błędu wybierz brak wypełnienia i dolną obrys koloru czerwonego o wadze 1.

76 Następnie przy zaznaczonym polu e-mail > ponownie wybierz jego pusty stan i dostosuj czcionkę i kolor tekstu dla każdego stanu, jak opisano poniżej.

• Dla stanu pustego, niepustego i skupionego: Czcionka: Questrial, rozmiar=14, kolor: biały, wyrównanie do lewej, 100% interlinii i bez kursywy.
• Dla stanu najazdu: po prostu zmień kolor tekstu na R=196 G=196 B=196 i bez kursywy.
• Dla stanu błędu: zmień kolor tekstu na czerwony i bez kursywy.

77 Kliknij i wybierz przycisk Prześlij. Wybierz jego normalny stan, zaokrąglij wszystkie rogi o 40 promieni i zwiększ jego szerokość, jak pokazano na zrzucie ekranu poniżej. Zmień czcionkę na Raleway Bold, rozmiar = 20, wyrównanie do środka, kolor: R = 241 G = 244 B = 247, interlinia: dostosuj tekst „prześlij” na środku przycisku, zwiększając tę ​​wartość (użyłem 130%) .

78 Dla stanów najechania i wciśnięcia myszy zmień kolor obrysu i kolor tekstu na szary (R=127 G=127 B=127). Na koniec dla stanu „przesyłanie w toku” zmień obrys i kolor tekstu na błękitny (R=41 G=171 B=226).

79 Gdy wybierzesz stan „wysyłanie w toku” dla tego przycisku wysyłania, zobaczysz inne pole tekstowe z napisem „przesyłanie formularza…”. Zaznacz to pole i wybierz jego stan „wysyłanie w toku”. Zmień czcionkę na Questrial, rozmiar=14, kolor: szary, wyrównany do środka i bez kursywy. Wybierz stan „prześlij pomyślnie” i zmień kolor tekstu na błękitny (bez kursywy). Wybierz jego stan „błąd przesyłania” i zmień kolor tekstu na czerwony (bez kursywy). Formularz kontaktowy jest gotowy.

80 Zrób dwa pola tekstowe. Wpisz – skontaktuj się z nami i w drugiej linii wpisz „wszystkie pola są wymagane”. W przypadku kontaktu użyj czcionki: Rammetto One, rozmiar=60, kolor: R=241 G=244 B=247, interlinia=100% i wyrównanie do lewej. Dla tekstu „wszystkie pola są wymagane” użyj czcionki: Nobile italic, rozmiar=26, kolor: R=241 G=244 B=247, interlinia=100% i wyrównanie do lewej. W tym polu tekstowym zastosuj dolną kreskę o grubości 1 i pokoloruj na biało.

81 Wpisz akapit w drugim polu tekstowym, które utworzyliśmy. Użyj czcionki: PT Sans Italic, rozmiar=14, kolor: R=241 G=244 B=247, interlinia=120%, wyrównanie do lewej i spacja przed=15.

82 Umieść te pola tekstowe i formularz na obrazie, który umieściliśmy. Wyreguluj je w następujący sposób.

83 Utwórz jeszcze jedno pole tekstowe na niektóre informacje kontaktowe, takie jak adres biura, adres e-mail i numery telefonów. Umieść to pole tekstowe na obrazie. Powinieneś mieć następujący wynik.

Wynik końcowy sekcji „Kontakt”.

Tworzenie stopki

84 Ostatnia sekcja to stopka. Na dole znajdują się trzy prowadnice, a mianowicie – dół strony, stopka i dół przeglądarki. Teraz musisz upewnić się, że prowadnica „dół strony” łączy się z dołem sekcji kontaktowej, a prowadnica „stopka” pokrywa się z prowadnicą „dół strony”. Następnie możesz przeciągnąć prowadnicę „dolnej części przeglądarki” w dół, aby dostosować miejsce potrzebne na stopkę.

85 Utwórz dwa prostokąty o szerokości 100% i H=168 dla pierwszego i H=37 dla drugiego. Zmień kolor wypełnienia dużego prostokąta na biały i użyj R=47, G=48, B=55 dla krótszego.

86 Wybierz pierwszy prostokąt i spróbuj umieścić go w obszarze stopki. Nie pójdzie tam. Zamiast tego dolna część prowadnicy strony zacznie się rozszerzać w dół. Aby uczynić ten prostokąt elementem stopki, zaznacz pole wyboru „Stopka” znajdujące się w prawym górnym obszarze okna aplikacji. Zrób to również dla drugiego prostokąta.

87 Teraz umieść te prostokąty w obszarze stopki i upewnij się, że duży prostokąt znajduje się nieco powyżej prowadnicy stopki. Dolna część kolorowego prostokąta musi przylegać do dolnej krawędzi prowadnicy przeglądarki. W przeciwnym razie zobaczysz małą białą szczelinę po stopce, która nie wygląda ładnie.

88 Utwórz pola tekstowe dla stopki i wpisz, co chcesz. Po prostu zaznacz pole wyboru „stopka” dla pól tekstowych, które chcesz dodać. Dodałem tekst zawierający wyłączenie odpowiedzialności i informacje o prawach autorskich.

89 Odznakę „Made with Adobe Muse CC” można dodać z biblioteki widżetów w sekcji społecznościowej. Możesz również dodać linki do swojej strony na Facebooku, Twitterze, Google+, LinkedIn, Pinterest, kanale YouTube lub link vimeo.

90 Symbol praw autorskich i wiele innych symboli widocznych obok tekstu Wszelkie prawa zastrzeżone można dodać z panelu „Glify” znajdującego się po prawej stronie okna aplikacji. Jeśli go tam nie ma, przejdź do menu Okno> wybierz Glify.

Tworzenie sekcji „Newsletter”.

91 Do tej pory zaprojektowaliśmy sekcje dla wszystkich pozycji menu oprócz jednej, czyli „Newslettera”. Zróbmy z tym coś ciekawego. Zapamiętaj symbol krzyżyka, który pobraliśmy, będzie on używany tutaj (możesz go nie pobrać, nadal możesz śledzić). Najpierw zaznacz pole tekstowe Newsletter i zanotuj jego szerokość i wysokość z panelu transformacji. Mój ma 81×17.

92 Teraz otwórz bibliotekę widżetów i przeciągnij „Lightbox Display” z sekcji kompozycji. Usuń pierwsze dwa wyzwalacze (znajdujące się na górze) i usuń wszystkie napisy (znajdujące się na dole). Ustaw rozmiar trzeciego wyzwalacza taki sam jak w polu tekstowym biuletynu, czyli 81 x 17. Zmień jego wypełnienie i obrys na brak dla wszystkich stanów.

93 Przeciągnij pole tekstowe newslettera i umieść je w tym wyzwalaczu w taki sposób, aby wszystkie krawędzie pola tekstowego pokrywały się z krawędziami wyzwalacza. Teraz przeciągnij tę grupę i umieść ją ponownie w menu, w którym była wcześniej umieszczona. To, co zrobiliśmy, to zastosowanie linku do pola tekstowego Newsletter. Gdy użytkownik go kliknie, witryna zniknie i pojawi się cel.

94 Następnym krokiem jest dostosowanie naszego celu. Wybierz szary obszar i upewnij się, że bieżący obszar zaznaczenia mówi „Cel”. Będziesz musiał kliknąć trzy razy, aby go wybrać. Zmień wypełnienie i obrys na brak dla wszystkich jego stanów.

95 Dodaj dwa pola tekstowe i prosty formularz kontaktowy (usuń jego nazwę i pola wiadomości i pozostaw tylko pole e-mail). Przeciągnij je do tej kompozycji i upewnij się, że wszystkie mają niebieskie kółko w rogach.

96 Dostosuj formularz tak, jak zrobiliśmy to w sekcji kontakt. Powinieneś mieć następujący wynik. W polu tekstowym „Bądź w kontakcie” użyj czcionki: Lobster, rozmiar = 40, kolor: biały, wyrównanie do środka i 100% interlinii. W tekście opisu poniżej użyj czcionki: Ubuntu Light Italic, rozmiar=14, kolor: biały, wyrównany do środka i 120% interlinii. Zmień tekst przycisku przesyłania na „Subskrybuj”.

97 Teraz wybierz przycisk zamykania, przesuń go i umieść w prawym górnym rogu tego wyświetlacza lightbox, jak pokazano poniżej. Klikaj wewnątrz, aż zobaczysz napis „Etykieta” w bieżącym obszarze wyboru. Usuń etykietę.

98 Zmień wypełnienie i obrys tego przycisku zamykania na brak dla wszystkich stanów i ustaw jego W=40 i H=40. Przejdź do opcji Wypełnij > dodaj obraz i wyszukaj krzyżyk. Wybierz opcję „Skaluj, aby dopasować” w opcji dopasowania.

99 Kliknij Biuletyn, aw jego rogu zobaczysz niebieskie kółko. Kliknij go i upewnij się, że opcje są ustawione w następujący sposób.

Wynik końcowy Sekcji „Newsletter”.

Tworzenie hiperłączy

100 Ostatnim zadaniem, które pozostało, jest zastosowanie linków do każdej sekcji. Aby to zrobić, wybierz opcję „kotwicy linku” znajdującą się w górnym środkowym obszarze lub naciśnij literę „a” na klawiaturze. Zobaczysz, że kursor zmieni swój wygląd na pistolet załadowany kotwicą łączącą.

101 Kiedy klikniesz na płótno, aby to umieścić, pojawi się okno dialogowe, w którym możesz zmienić nazwę kotwicy.

102 Utwórz kotwice linków dla każdej zaprojektowanej przez nas sekcji, czyli Strona główna, Usługi, Dlaczego my, Referencje i Kontakt. Umieść kotwy na górze każdej sekcji. Kotwica domowa jest pokazana poniżej jako przykład. Umieszczenie tych kotew jest ważnym krokiem i powinno być wykonane ostrożnie. Gdy użytkownik kliknie w konkretny link, strona przewinie się do miejsca, w którym została umieszczona kotwica.

103 Teraz zastosujemy linki. Aby to zrobić, wybierz pole tekstowe „Dom”. Przejdź do opcji „Hiperłącza” (znajdującej się u góry), kliknij małą strzałkę w dół, aby rozwinąć listę. Tutaj możesz zobaczyć wszystkie kotwice, które właśnie umieściliśmy. Połącz go z kotwicą „Dom”. Powtórz ten krok dla innych pól tekstowych z wyjątkiem biuletynu, ponieważ zastosowaliśmy do niego wyświetlanie lightbox.

Ostateczny wynik po utworzeniu hiperłączy

Ostatnie poprawki – zmiana właściwości strony i dodanie Favicon

104 Inside Plan Mode, kliknij prawym przyciskiem myszy stronę główną i wybierz 'Właściwości strony. Pojawi się okno dialogowe. Wybierz zakładkę „Opcje” i pod nazwą strony umieść – „Witamy w example.com” i kliknij OK. To jest tekst, który pojawi się w górnej części okna przeglądarki.

105 Przejdź do Plik > Właściwości witryny. Na karcie Układ ostatnią opcją jest „Favicon”. Po najechaniu na nią kursorem pojawi się wyskakujące okienko opisujące, czym jest favicon i jaki powinien być optymalny rozmiar. Dobrze jest dodać favicon, ponieważ pomaga to wyróżnić Twoją markę, a także pomaga użytkownikom w łatwej identyfikacji Twojej witryny, jeśli dodali ją do zakładek.

Testowanie i eksportowanie

106 Przetestuj swoją witrynę, przechodząc do Plik > Podgląd witryny w przeglądarce lub Ctrl+Alt+E. Nie wybieraj tym razem opcji „Podgląd strony w przeglądarce”, ponieważ linki nie działają w podglądzie strony. Możesz spróbować umieścić kotwice w różnych miejscach, aby mieć pewność, że gdy użytkownik kliknie link, strona przewinie się do właściwej sekcji i właściwej pozycji.

107 W końcu przejdź do Plik > Eksportuj jako HTML (Ctrl+E). Pod adresem URL witryny umieść dowolną nazwę, np. „example.com” i wybierz lokalizację. Kliknij OK. Strona jest gotowa.

Końcowy wynik każdej strony

Pierwsza strona

Sekcja „Usługi”.

Sekcja „Dlaczego My”.

Sekcja „Świadectwa”.

Sekcja „Kontakt”.

Sekcja stopki

Sekcja „Newsletter”.

WNIOSEK

Jestem pewien, że po wykonaniu tego samouczka masz wszystko, co obiecałem. To tylko przykład. Pobaw się trochę z tym niesamowitym narzędziem i projektuj wspaniałe i profesjonalne strony internetowe, jednocześnie odkrywając nieskończone możliwości twórcze. Dziękuję Ci.