Adobe Muse — це потужний інструмент, який зробив веб-дизайн напрочуд простішим і цікавішим. Створювати професійні веб-сайти простіше з точки зору відсутності потреби в коді та цікаво з точки зору повного контролю над дизайном, на відміну від інших програм перетягування.

Однією з найбільш вражаючих особливостей цієї програми WYSIWYG (що бачиш, те й отримуєш) є те, що вона забезпечує відповідний робочий процес для допомоги дизайнеру в покроковій розробці веб-сайту.

Після закінчення цього підручника ви:

Майте чітке розуміння кожного технічного та дизайнерського аспекту Muse.
Знати, як професійно проектувати за менший час.
Дізнайтеся про деякі безкоштовні ресурси, де ви можете знайти приголомшливу графіку для свого веб-сайту.
Швидко створіть повноцінний односторінковий веб-сайт.

Вимоги цього посібника

Вам потрібно буде завантажити певні зображення, вектори та шрифти, щоб створити цей сайт. Але ви все одно можете йти далі без цих активів. Щоб правильно організувати вміст, створіть для свого сайту окрему папку.

Перейдіть на pexels.com і завантажте:
- 4 зображення розміром 1160 x 480 для слайд-шоу. Ось скріншот із pexels. Ви можете вказати цей розмір у полі «нестандартний розмір» на цьому веб-сайті.
- 6 зображень розміром 271 x 208 для розділу «послуги».
- 1 зображення розміром 1160 x 692 для розділу "Зв’язатися з нами".
Перейдіть на freepik.com і завантажте:
- Піктограма з одним хрестиком (ви можете відредагувати цю іконку в illustrator або просто завантажити файл png із feepik).
- 6 зображень обличчя для розділу «Відгуки».
Перейдіть на subtlepatterns.com і завантажте шаблон «brickwall» для розділу «Відгуки».
Під час вивчення цього підручника я розповім вам, як завантажити необхідні шрифти (це можна зробити в Muse).
Використовуйте фіктивний текст із lipsum.com.

ДАВАЙТЕ РОЗПОЧНЕМО!

Підготовка робочого простору та налаштування заголовка

1 Створіть новий сайт, вибравши «Файл» > «Новий сайт» (Ctrl+N) і вставивши значення, як показано нижче. Не забудьте поставити прапорець біля пункту «Прикріплений нижній колонтитул». Натисніть OK, і ви отримаєте режим ПЛАНУВАННЯ. Двічі клацніть A-Master, розташований унизу в сірій області. Ви створите все на цій головній сторінці.

2 Виберіть текстовий інструмент у панелі інструментів, розташованій у лівій частині вікна програми. Натисніть і перетягніть полотно або сторінку, щоб створити текстове поле. Перейдіть до текстової панелі (Ctrl+T), у спадному списку шрифтів знайдіть веб-шрифти, виберіть «Додати веб-шрифти» та завантажте такі шрифти:

Раметто один
Чанк
Questrial
Raleway
Шляхетний
PT Без
Ubuntu
Лобстер

Після завантаження цих шрифтів видаліть це текстове поле.

3 Перейдіть на панель «Шари», розташовану праворуч у вікні програми. Якщо його немає, перейдіть до меню «Вікно» > «Шари». Ви побачите там шар під назвою Layer 1 (синій колір). Це шар за замовчуванням, і туди потрапляє все, що ви створюєте або розміщуєте на полотні. Двічі клацніть цей шар і назвіть його «Заголовок».

4 На панелі шарів клацніть маленьку піктограму зігнутого краю паперу, розташовану в нижньому правому куті. Якщо натиснути цю кнопку, буде створено новий шар червоного кольору. Знову двічі клацніть цей шар і перейменуйте його на «Вміст».

5 Натисніть і перетягніть цей шар вмісту та розмістіть його під шаром заголовка. Ми зробили це, тому що хочемо, щоб наш заголовок був на вершині всього.

6 Виберіть шар заголовка та згорніть панель шарів.

7 Виберіть інструмент «прямокутник» із панелі інструментів або натисніть «m» на клавіатурі.

8 Намалюйте невеликий прямокутник на полотні та переконайтеся, що колір його рамки синій, що вказує на те, що цей об’єкт знаходиться всередині шару заголовка.

9 Перейдіть до панелі «Трансформування», розташованої у верхній правій частині вікна програми. Залиште ширину (Ш) і вставте 50 внутрішню висоту (В) і натисніть клавішу Enter. (Не турбуйтеся про значення X і Y.)

10 У верхній частині сторінки ви побачите дві лінії синього кольору (показано на знімку екрана нижче). Це так звані «гіди». Коли ви наводите курсор на першу довідницю, з’являється повідомлення «Верх сторінки, перетягніть, щоб налаштувати відступ над сторінкою», а на іншій — «Заголовок, перетягніть, щоб змінити положення». Дуже важливо налаштувати ці напрямні на самому початку.

11 Тепер, коли ми створили прямокутник H=50, клацніть, утримуйте та перетягуйте напрямну «верхньої частини сторінки», доки в полі, яке з’явиться нижче, коли ви почнете перетягувати, не буде написано Y=50.

12 Подібним чином перетягніть напрямну верхнього колонтитула до верхньої частини напрямної сторінки, доки не буде написано Y=0. Ми зробили це, щоб налаштувати область заголовка. (Можливо, ви захочете поекспериментувати з розміщенням цих напрямних у різних положеннях для різних результатів, але наразі це добре.)

13 Виділіть прямокутник, який ми щойно створили, і перетягніть його в область заголовка, щоб він відповідав розміру.

14 Тепер нам потрібно збільшити ширину прямокутника та зробити її 100%, щоб заголовок виглядав ідеально на будь-якому розмірі екрана. Розгорніть прямокутник до обох країв і переконайтеся, що він з’єднується з краями. З’явиться помаранчева напрямна, яка гарантує, що об’єкт було зафіксовано. Коли ви збільшуєте ширину прямокутника, у спливаючому вікні буде написано W=100% або W=1160, коли ви дійдете до краю.

15 Не вибираючи прямокутник, клацніть слово «Заливка» під меню програми та встановіть такі параметри. Виберіть перший колір як чорний, а другий колір: R=37, G=37, B=37.

16 Перейдіть до «Файл» > «Зберегти сайт». Зберігайте свій сайт щоразу, коли ви вносите зміни.

17 Створіть текстове поле та введіть – ‘example.com’ і змініть його форматування, як показано нижче.

18 Налаштуйте розмір текстового поля так, щоб весь текст відображався в одному рядку. Виберіть це текстове поле та перетягніть його на чорний прямокутник. Вирівняйте його за вертикальним центром прямокутника (синя лінія вкаже, коли він знаходиться по центру) і прив’яжіть до лівої межі, як показано нижче.

19 Створіть текстове поле та введіть – «Дім». Змініть його форматування наступним чином. Відповідно відрегулюйте ширину та висоту текстового поля. Ви також можете зробити це з панелі трансформації. У мене W=52, H=17.

20 Скопіюйте та вставте це текстове поле та введіть «Служби» в новому. Відрегулюйте ширину. Перетягніть і розмістіть це текстове поле поруч із домом із дуже меншою різницею між ними. Знову ж таки, напрямні допоможуть вам у правильному вирівнюванні.

21 Скопіюйте та вставте це текстове поле в чотири рази більше та введіть – Чому ми, Відгуки, Зв’яжіться з нами та Інформаційний бюлетень. Розмістіть ці текстові поля одне за одним на однаковій відстані поруч із «службами».

22 Вибравши інструмент виділення та натиснувши клавішу Shift, виділіть усі ці текстові поля одне за іншим. Перейдіть до текстової панелі, змініть колір на білий. Виберіть групу цих коробок і розмістіть її над прямокутником заголовка. (Вертикально по центру та вирівняно за праву межу сторінки). Це наше меню.

23 Знову вибравши інструмент виділення та натиснувши клавішу Shift, виділіть ці текстові поля, прямокутник і текстове поле example.com. У верхньому правому куті ви побачите опцію «Закріпити». Клацніть верхнє центральне поле, щоб закріпити ці елементи. Це означає, що коли користувач буде гортати ваш сайт, цей заголовок залишатиметься фіксованим у верхній частині. Це дуже корисно, оскільки користувачеві не доведеться прокручувати всю сторінку вгору, щоб вибрати інший варіант.

24 Перейдіть на панель «Шари» та заблокуйте шар заголовка. Це можна зробити, клацнувши в полі ліворуч від назви шару. Якщо ви заблокуєте шар або будь-який об’єкт, це не вплине на його зовнішній вигляд, але ви не зможете вибрати ці елементи, доки не розблокуєте. Ми зробили це, щоб повністю виключити ймовірність випадкового переміщення предметів.

25 Виберіть шар вмісту та згорніть панель шарів.

Встановлення слайд-шоу

26 Перейдіть до бібліотеки віджетів, розташованої в правій частині вікна програми. Якщо його немає, перейдіть до меню «Вікно» > виберіть «Бібліотека віджетів». Розгорніть розділ «Слайд-шоу» та виберіть «Пустий». Натисніть і перетягніть цей об’єкт на полотно. З’явиться чорне вікно з параметрами показу слайдів.

27 Переконайтеся, що параметри встановлено, як показано на зображенні нижче. У нижній частині розділу частин зніміть прапорці «Попередня», «Далі», «Підписи» та «Лічильник». Нам нічого з цього не потрібно.

28 Натисніть будь-де на полотні, щоб це спливаюче вікно зникло. Тепер обережно натисніть всередині слайд-шоу. Клацнувши його один раз, ви побачите, що «Слайд-шоу» було вказано в «типі поточної області вибору». Він розташований у верхньому лівому куті під меню програми. Ця область дозволяє вам побачити те, що ви вибрали. Це дуже корисна функція, коли макет ускладнюється. Натисніть ще раз, і ви помітите, що в описі написано «Зображення героя».

29 Збільште ширину зображення героя вручну, розширивши його від середини. Прив’яжіть його до країв сторінки (щоб зробити її шириною 100%) і до нижньої частини прямокутника заголовка, як показано нижче.

30 Перейдіть до панелі трансформації та поставте H=500.

31 Знову відкрийте параметри слайд-шоу, клацнувши маленьке блакитне коло з білим прямокутником усередині (він розташований у верхньому правому куті слайд-шоу).

32 Клацніть піктограму папки поруч із опцією «Додати зображення…», знайдіть зображення, які ми завантажили для показу слайдів. Виберіть усі чотири та натисніть відкрити.

33 Перейдіть до «Файл» > виберіть «Попередній перегляд сторінки в браузері» або Ctrl+Shift+E і подивіться, як ваше слайд-шоу працюватиме, коли сайт запрацює. Я рекомендую вам запам’ятати комбінації клавіш, які я використовую в цьому посібнику. Це допоможе вам пришвидшити процес проектування.

Створення розділу «Сервіси».

34 Тепер, коли ми налаштували наш заголовок і слайд-шоу, настав час створити розділи для кожного пункту, який ми додали до нашого меню. Почнемо з «послуг». Створіть текстове поле та введіть у ньому служби (усі літери малі) та змініть його форматування, як описано нижче.

35 Двічі клацніть у цьому текстовому полі та виберіть лише літеру «I». Змініть його шрифт на "Chunk" і залиште все без змін. Відрегулюйте висоту цього текстового поля. Коли ви зменшите його висоту, у певній точці з’явиться пунктирна лінія, і коробка не стане коротшою. Після цього не зменшуйте розмір. Це найменша висота, можлива для цього розміру шрифту.

36 Вибравши текстове поле, перейдіть до панелі трансформації та встановіть кут повороту на -90 градусів (90 градусів негативний).

37 Перемістіть текстове поле в ліву сторону полотна, як показано нижче.

38 Можливо, ви захочете трохи зменшити масштаб, щоб побачити весь вміст одночасно або правильно налаштувати об’єкти. Для цього спробуйте ввести інші значення (менше 100%) у розділі рівня масштабування вгорі. Після введення значення натисніть enter.

39 Перейдіть до «Файл» > виберіть «Розмістити». Виберіть перше зображення, яке ми завантажили для нашого розділу послуг. Натисніть відкрити.

40 Курсор змінить свій вигляд на гармату місця, заряджену зображенням. Натисніть на полотно, щоб розмістити його. Перемістіть і розташуйте його так, щоб він вирівнявся з верхньою частиною текстового поля «служби».

41 Скопіюйте це зображення та вставте його двічі. Виділіть ці вставлені зображення одне за одним і вирівняйте їх на однаковій відстані з першим зображенням.

42 Виберіть друге зображення, клацніть його правою кнопкою миші та виберіть «замінити зображення» (це остання опція). Знайдіть друге зображення та натисніть «Відкрити». Замініть також третє зображення.

43 Створіть текстові поля для інформації про послуги та застосуйте форматування заголовків і абзаців, як написано нижче. Напрямні допоможуть правильно їх вирівняти.

Для заголовків: Шрифт: Raleway Bold, розмір=20, колір: чорний, вирівняно за лівим краєм і 100% інтерліньяжу.
Для абзаців: Шрифт: Questrial, Розмір=15, Колір: R=67 G=67 B=67, вирівняно за лівим краєм і 120% інтерліньяжу.

44 Розмістіть ще три зображення, як ми робили в попередніх кроках, і аналогічно створіть для них текст опису. Ви повинні отримати наступний результат.

Остаточний результат розділу «Послуги».

Створення розділу «Чому ми».

45 Далі йде розділ «Чому ми». Це трохи складніше. Будьте уважні при виборі предметів. По-перше, створіть прямокутник шириною 100% і H=996. Заповніть його кольором (R=47, G=48, B=55). Клацніть правою кнопкою миші на цьому прямокутнику > Упорядкувати > виберіть «Надіслати назад» (не відправити назад).

46 Розширте свою робочу область, клацнувши та перетягнувши напрямну «низ сторінки», щоб у вас було достатньо місця для створення вмісту, який буде розміщено на цьому прямокутнику, який ми щойно створили.

47 Прокрутіть вниз до білого порожнього простору та створіть інший прямокутник W=351 і H=351. Заповніть його білим кольором і без обведення.

48 Перейдіть до параметра «радіус кута» (він розташований поруч із обведенням під меню програми). Клацніть усі кути, щоб зробити їх круглими, і помістіть 500 у поле поруч.

49 У вас буде коло. Перетягніть це коло на прямокутник і налаштуйте його наступним чином. Поруч із радіусом кута є опція «Непрозорість». Вибравши коло, поставте 14 у цьому полі.

50 Створіть текстове поле та введіть – чому ми (усі маленькі). Змініть його шрифт на Rammetto One, розмір = 100, колір R = 241 G = 244 B = 247, інтервал 100% і вирівняйте його по центру. Помістіть це текстове поле всередину кола та вирівняйте його належним чином.

51 Тепер ми створимо пунктирні лінії. Створіть прямокутник W=9 і H=9, без заливки. Клацніть слово «обведення» поруч із заливкою. Виберіть колір R=241 G=244 B=247. Клацніть піктограму ланцюжка, щоб розірвати його та поставити «1» у товщину нижнього обведення.

52 Скопіюйте цей однобічний прямокутник і вставте його кілька разів. Розташуйте їх в одну лінію (збільште трохи за допомогою інструмента масштабування, якщо вам важко побачити ці прямокутники). Отримавши потрібну довжину пунктирної лінії, виберіть усі ці прямокутники, клацніть правою кнопкою миші та виберіть «Згрупувати». Скопіюйте та вставте цю групу для інших пунктирних ліній.

53 Для похилих пунктирних ліній спробуйте встановити різні кути повороту на панелі трансформації. Я використовував 150 і 30 градусів. Вам доведеться видалити деякі прямокутники з цієї групи, щоб мати меншу довжину. Відкоригуйте ці лінії біля кола, як показано нижче.

54 Тепер ми додамо ще трохи тексту для номерів, заголовків і описів. Використовуйте наступні параметри для кожного з них і налаштуйте ці текстові поля, як показано нижче.

Для чисел: Шрифт = Rammetto One, Колір: R = 196 G = 214 B = 193, вирівняно по центру та 100% попереду, розмір: 200 (для числа «1»), 160 (для чисел «2» і «3») і 120 (для цифр «4» і «5»).
Для заголовків: шрифт = Raleway Bold, розмір = 18, колір: білий, вирівняно по центру та 100% інтерліньяжу.
Для абзаців: шрифт=Questrial, розмір=16, колір: R=241 G=244 B=247, вирівнювання по центру та 120% інтерліньяжу.

Остаточний результат розділу «Чому ми».

Створення розділу «Відгуки».

55 Знову ж таки, створіть трохи місця для роботи, перетягнувши нижню частину посібника сторінки. Створіть прямокутник шириною 100% і H=486.

56 Вибравши прямокутник, клацніть слово «Заливка» та натисніть «Додати зображення» поруч із параметром зображення. Знайдіть завантажене зображення візерунка цегляної стіни. У параметрі «Припасування» виберіть «Плитка», щоб заповнити весь прямокутник цією текстурою.

57 Прокрутіть вниз до порожнього простору та створіть текстове поле розміром W=406, H=289 за допомогою панелі трансформації. Введіть – «що скажуть інші» (все дрібно). Змініть його шрифт на Rammetto One, розмір=70, вирівняйте його за лівим краєм, значення кольору R=37 G=37 B=37 і інтерліньяж=100%.

58 Вибравши це текстове поле, клацніть обведення слова, застосуйте до нього правий обведення товщини один і чорного кольору. Перетягніть це текстове поле та помістіть його поверх прямокутника з малюнком цегляної стіни.

59 Наступним кроком є додавання відгуків клієнтів. Для цього ми використаємо векторні зображення круглого обличчя, які ми завантажили з freepik.com. Знову опустіться до білого порожнього простору, щоб ви могли правильно налаштувати свою композицію.

60 Перейдіть до бібліотеки віджетів і перетягніть «Пусто» з розділу композицій на полотно. Натисніть знак плюс, щоб додати ще три тригери. Обережно виберіть перший тригер і переконайтеся, що ви вибрали, за допомогою поточної області виділення з написом тригер. А поруч із ним є опція «Активний». Натисніть це, щоб розгорнути. Виберіть стан «Нормальний» і виберіть для цього стану «без заливки» та «без обведення». Повторіть це для кожного стану: «Наведення миші», «Миша вниз» і «Активний». Перейдіть до панелі трансформації з першим вибраним тригером і встановіть W=10, H=10.

61 Повторіть попередній крок для кожного наявного тригера. Це означає, що не застосовувати заливку та обведення для кожного стану та трансформувати тригери до розміру 10 x 10. Перемістіть курки ближче один до одного.

62 Зараз. Ми налаштуємо цілі для кожного з цих тригерів. Великий прямокутник, який ви бачите, є ціллю. Виберіть перший тригер і виберіть його нормальний стан на панелі станів. Після цього виберіть ціль для цього тригера та не застосовуйте заливку та обведення для кожного стану. Потім перейдіть до панелі трансформації та встановіть ціль W=360, H=370.

63 Повторіть попередній крок для кожної цілі. Просто переконайтеся, що ви спочатку вибрали тригер, перевели його в нормальний стан, потім вибрали відповідну ціль із нормальним станом, а потім не застосували заливку та обведення. Вам не потрібно буде змінювати розмір кожної цілі. Просто зробіть це для одного, і це буде застосовано до всіх.

64 Тепер ми почнемо додавати вміст до цієї композиції. Перейдіть до «Файл» > «Розмістити», відкрийте перше зображення обличчя та розмістіть його за межами композиції. Перетягніть це зображення та помістіть його в композицію. Ви побачите, що у верхньому правому куті з’явиться синє коло, яке вказує на те, що це зображення тепер є частиною композиції.

65 Створіть три текстові поля – одне для імені особи, одне для її позначення та одне для заяви чи відгуку. Застосуйте форматування, як описано нижче, і розмістіть ці текстові поля в композиції. Просто переконайтеся, що в кутку кожного з них є синє коло.

Для імені особи: шрифт: Nobile Medium Italic, розмір = 18, колір: R = 37 G = 37 B = 37, вирівняно по центру та 100% по лінії.
Для позначення: Шрифт: Nobile, розмір = 15, Колір: R = 37 G = 37 B = 37, вирівняно по центру та 100% по лінії.
Для заяв (із лапками): Шрифт: PT Sans Italic, розмір = 18, колір: R = 69 G = 64 B = 68, вирівнювання по центру та 100% інтерліньяж.

66 Вибравши зображення обличчя, застосуйте штрих товщиною 4 з кожного боку, колір: білий, закругліть усі кути та збільште радіус, доки він не охопить зображення. Я використовую 100 як радіуси кутів.

67 Перейдіть до пункту «Ефекти» (розташований поруч із опцією округлення кутів) і поставте прапорець «тінь». Поставте значення як; Колір=чорний, непрозорість=37%, розмиття=12, кут=78 і відстань=5.

68 Повторіть попередні кроки (від 64 до 67) для додавання вмісту до кожної цілі та збережіть зміни (Ctrl+S). Нанесіть цю композицію поверх прямокутника з малюнком цегляної стіни.

69 Тепер виділіть всю композицію (переконайтеся в поточній області виділення) і розгорніть її параметри, клацнувши маленьке синє коло. Встановіть параметри, як показано нижче. Натисніть Ctrl+Shift+E і подивіться, чи добре він працює.

70 Ви повинні отримати наступний результат.

Остаточний результат розділу «Відгуки».

Створення розділу «Контакти».

71 Наступний розділ «Зв’язатися з нами». У цей розділ ми додамо фонове зображення, форму та кілька текстових полів. Спочатку створіть прямокутник шириною 100% і H=692. Заповніть його зображенням, яке ми завантажили для цього розділу, і виберіть «масштаб для заповнення» в розділі «Припасування». Змініть його непрозорість до 72%.

72 Створіть інший прямокутник такої ж ширини та висоти та заповніть його градієнтом. Поставте значення градієнта як; Непрозорість=90% до 46%, колір: чорний до R=69 G=64 B=68, фокусна точка=66%, напрямок: горизонтальний і розмір: автоматичний. Покладіть цей прямокутник на зображення та переконайтеся, що він з’єднується з кожним краєм.

73 Перейти до бібліотеки віджетів. У формах виберіть «простий контакт» і перетягніть його на полотно. Відкриється вікно з параметрами форми. Введіть ім’я форми: Форма для зв’язку з нами. Електронна пошта: введіть адресу електронної пошти, на яку ви хочете отримувати інформацію, введену відвідувачами. Після надсилання: виберіть «залишитися на поточній сторінці». Останнім варіантом є «Редагувати разом». Переконайтеся, що він позначений. Таким чином вам доведеться внести зміни лише в одне поле, і вони будуть застосовані до всіх. Клацніть будь-де на полотні, щоб зникнути поле параметрів.

74 Виберіть форму. Клацніть мітку «Назва» та клацайте її знову, доки не побачите «Мітка» в області поточного виділення. Натисніть видалити. Повторіть це для електронних листів і міток повідомлень і видаліть їх.

75 Знову виберіть форму та виберіть перше поле форми з написом «Введіть назву», доки не побачите «Введення тексту» в поточній області вибору. Не застосовуйте заливку та нижню обведення (товщина один і колір білий) для кожного стану, тобто від пустого до фокусу. Для стану помилки виберіть відсутність заливки та нижню обведення червоного кольору з вагою 1.

76 Після цього, вибравши поле електронної пошти > знову виберіть його порожній стан і налаштуйте шрифт і колір тексту для кожного стану, як описано нижче.

Для порожнього, непорожнього та фокусного стану: Шрифт: Questrial, розмір=14, колір: білий, вирівняно за лівим краєм, 100% інтерліньяж і без курсиву.
Для стану наведення курсора: просто змініть колір тексту на R=196 G=196 B=196 і без курсиву.
Для стану помилки: змініть колір тексту на червоний і без курсиву.

77 Натисніть і виберіть кнопку Надіслати. Виберіть його звичайний стан, округліть усі кути з 40 радіусами та збільште його ширину, як показано на скріншоті нижче. Змініть його шрифт на Raleway Bold, розмір = 20, вирівняно по центру, колір: R = 241 G = 244 B = 247, початок: налаштуйте текст «надіслати» в центрі кнопки, збільшивши це значення (я використовував 130%) .

78 Для станів наведення курсора та наведення миші вниз змініть колір обведення та колір тексту на сірий (R=127 G=127 B=127). Нарешті, для стану «виконується надсилання» змініть колір обведення та тексту на блакитний (R=41 G=171 B=226).

79 Коли ви вибираєте стан «виконується надсилання» для цієї кнопки надсилання, ви побачите, що є інше текстове поле з написом «надсилання форми…». Установіть цей прапорець і виберіть його стан «виконується надсилання». Змініть шрифт на Questrial, розмір = 14, колір: сірий, вирівняний по центру та без курсиву. Виберіть стан «надсилання успішно» та змініть колір тексту на блакитний (без курсиву). Виберіть стан «помилка надсилання» та змініть колір тексту на червоний (без курсиву). Контактна форма готова.

80 Створіть два текстових поля. Введіть – зв’яжіться з нами та в другому рядку введіть «усі поля є обов’язковими». Для тексту зв’язку з нами використовуйте шрифт: Rammetto One, розмір=60, колір: R=241 G=244 B=247, інтерліньяж=100% і вирівняний за лівим краєм. Для тексту «всі поля обов’язкові» використовуйте шрифт: курсив Nobile, розмір=26, колір: R=241 G=244 B=247, інтерліньяж=100% і вирівняно за лівим краєм. Для цього текстового поля застосуйте нижню обведення товщини 1 і білого кольору.

81 Введіть абзац у друге текстове поле, яке ми створили. Використовуйте шрифт: PT Sans Italic, розмір = 14, колір: R = 241 G = 244 B = 247, інтервал = 120%, вирівнювання за лівим краєм і пробіл перед = 15.

82 Розмістіть ці текстові поля та форму на зображенні, яке ми розмістили. Відрегулюйте їх наступним чином.

83 Створіть ще одне текстове поле для деякої контактної інформації, наприклад адреси офісу, електронної пошти та номерів телефону. Помістіть це текстове поле на зображення. Ви повинні отримати наступний результат.

Остаточний результат розділу «Зв’язатися з нами».

Створення колонтитула

84 Останнім розділом є нижній колонтитул. Унизу є три напрямні, а саме – нижня частина сторінки, нижній колонтитул і нижня частина браузера. Що вам потрібно зробити зараз, так це переконатися, що посібник «нижня частина сторінки» збігається з нижньою частиною розділу «Зв’яжіться з нами», а напрямний «нижній колонтитул» збігається з напрямним «нижньої частини сторінки». Після цього ви можете перетягнути напрямну «нижню частину браузера» вниз, щоб налаштувати простір, потрібний для нижнього колонтитула.

85 Створіть два прямокутники 100% ширини та H=168 для першого та H=37 для іншого. Змініть колір заливки великого прямокутника на білий і використовуйте R=47, G=48, B=55 для коротшого.

86 Виберіть перший прямокутник і спробуйте розмістити його в області нижнього колонтитула. Туди не піде. Натомість нижня частина сторінки почне розгортатися вниз. Щоб зробити цей прямокутник нижнім колонтитулом, установіть прапорець «Нижній колонтитул», розташований у верхній правій частині вікна програми. Зробіть це також для другого прямокутника.

87 Тепер розмістіть ці прямокутники в області нижнього колонтитула та переконайтеся, що великий прямокутник знаходиться трохи вище напрямної нижнього колонтитула. Нижня частина кольорового прямокутника повинна з’єднатися з нижньою частиною напрямної браузера. Інакше ви побачите невелику білу прогалину після нижнього колонтитула, що виглядає неприємно.

88 Створіть текстові поля для нижнього колонтитула та введіть те, що хочете. Просто встановіть прапорець «нижній колонтитул» для текстових полів, які ви додаєте. Я додав текст із застереженням та інформацією про авторські права.

89 Значок «Зроблено за допомогою Adobe Muse CC» можна додати з бібліотеки віджетів у розділі соціальних мереж. Ви також можете додати посилання на свою сторінку у Facebook, Twitter, google+, LinkedIn, Pinterest, канал YouTube або посилання на vimeo.

90 Символ авторського права та багато інших символів, які ви бачите поруч із текстом Усі права захищені, можна додати з панелі «Гліфи», розташованої праворуч у вікні програми. Якщо його немає, перейдіть до меню «Вікно» > виберіть «Гліфи».

Створення розділу «Розсилка».

91 Дотепер ми створили розділи для всіх пунктів меню, крім одного, а саме «Інформаційний бюлетень». Давайте зробимо з ним щось цікаве. Запам’ятайте символ хреста, який ми завантажили, він буде використаний тут (це нормально, якщо ви не завантажили його, ви все одно можете слідкувати). Спочатку виберіть текстове поле «Інформаційний бюлетень» і запишіть його ширину та висоту на панелі трансформації. Мій розмір 81×17.

92 Тепер відкрийте бібліотеку віджетів і перетягніть «Лайтбокс» із розділу композицій. Видаліть перші два тригери (розташовані вгорі) і видаліть усі підписи (розташовані внизу). Зробіть розмір третього тригера таким же, як і текстове поле бюлетеня, тобто 81 x 17. Змініть його заливку та обведення на відсутність для всіх станів.

93 Перетягніть текстове поле інформаційного бюлетеня та помістіть його всередину цього тригера таким чином, щоб усі краї текстового поля збігалися з краями тригера. Тепер перетягніть цю групу та знову помістіть її в меню, де вона була розміщена раніше. Що ми зробили, так це те, що ми застосували посилання до текстового поля Newsletter. Коли користувач клацне її, веб-сайт зникне, і з’явиться ціль.

94 Наступним кроком є налаштування нашої цілі. Виберіть сіру область і переконайтеся, що в поточній області виділення зазначено «Ціль». Вам потрібно буде клацнути тричі, щоб вибрати його. Змініть заливку та обведення на відсутність для всіх її станів.

95 Додайте два текстові поля та просту контактну форму (видаліть поля імені та повідомлення та збережіть лише поле електронної пошти). Перетягніть їх у цю композицію та переконайтеся, що всі вони мають синє коло в кутах.

96 Налаштуйте форму так, як ми робили в розділі «Зв’язатися з нами». Ви повинні отримати наступний результат. Для текстового поля «Залишайтеся на зв’язку» використовуйте шрифт: Lobster, розмір=40, колір: білий, вирівняно по центру та 100% інтерліньяжу. Для тексту опису під ним використовуйте шрифт: Ubuntu Light Italic, розмір=14, колір: білий, вирівняний по центру та 120% інтерліньяжу. Змініть текст кнопки надсилання на «Підписатися».

97 Тепер виберіть кнопку закриття, перемістіть її та розташуйте у верхньому правому куті цього лайтбокса, як показано нижче. Клацайте всередині нього, доки не побачите «Мітка» в поточній області виділення. Видалити мітку.

98 Змініть заливку та обведення цієї кнопки закриття на відсутність для всіх станів і зробіть її W=40 і H=40. Перейдіть у «Заливка» > «Додати зображення» та знайдіть зображення хреста. Виберіть «масштаб відповідно до параметра підгонки».

99 Натисніть Інформаційний бюлетень, і ви побачите синє коло в його кутку. Клацніть його та переконайтеся, що параметри встановлено наступним чином.

Остаточний результат розділу «Інформаційний бюлетень».

Створення гіперпосилань

100 Останнім завданням, що залишилося, є застосування посилань до кожного розділу. Для цього виберіть параметр «прив’язка посилання», розташований у верхній середній частині, або натисніть літеру «a» на клавіатурі. Ви побачите, що курсор змінив свій вигляд на гармату місця, заряджену ланковим якорем.

101 Коли ви клацнете на полотні, щоб розмістити це, з’явиться діалогове вікно, яке дозволить вам перейменувати прив’язку.

102 Створіть прив’язки посилань для кожного розділу, який ми розробили, тобто «Домашня сторінка», «Послуги», «Чому ми», «Відгуки» та «Контакти». Розмістіть анкери у верхній частині кожної секції. Домашній якір показаний нижче як приклад. Розміщення цих анкерів є важливим кроком, і його слід робити обережно. Коли користувач натискає певне посилання, веб-сайт прокручується до місця, де було розміщено прив’язку.

103 Тепер ми застосуємо посилання. Для цього виберіть текстове поле «Додому». Перейдіть до опції «Гіперпосилання» (знаходиться вгорі), натисніть маленьку стрілку вниз, щоб розгорнути список. Тут ви можете побачити всі анкери, які ми щойно розмістили. Пов’яжіть його з прив’язкою «Додому». Повторіть цей крок для інших текстових полів, окрім «Інформаційного бюлетеня», оскільки ми застосували до них лайтбокс.

Остаточний результат після створення гіперпосилань

Останні штрихи – зміна властивостей сторінки та додавання значка сайту

104 У режимі внутрішнього планування клацніть правою кнопкою миші домашню сторінку та виберіть «Властивості сторінки». З’явиться діалогове вікно. Виберіть вкладку «Параметри» та під назвою сторінки введіть – «Ласкаво просимо на example.com» і натисніть «ОК». Це текст, який з’явиться у верхній частині вікна браузера.

105 Перейдіть до «Файл» > «Властивості сайту». На вкладці «Макет» останнім параметром є «Favicon». Коли ви наведете на нього курсор, з’явиться спливаюче вікно з описом того, що таке фавікон і який має бути оптимальний розмір. Добре додати піктограму сайту, оскільки це допомагає виділити ваш бренд, а також допомагає користувачам легко ідентифікувати ваш сайт, якщо вони додали його в закладки.

Тестування та експорт

106 Перевірте свій сайт, перейшовши до «Файл» > «Попередній перегляд сайту» у браузері або Ctrl+Alt+E. Цього разу не вибирайте «Попередній перегляд сторінки у браузері», оскільки посилання не працюють у попередньому перегляді сторінки. Ви можете спробувати розмістити прив’язки в різних місцях, щоб гарантувати, що коли користувач натискатиме посилання, сайт прокручуватиметься до потрібного розділу та правильної позиції.

107 Нарешті перейдіть до «Файл» > «Експортувати як HTML» (Ctrl+E). Під URL-адресою сайту введіть будь-яке ім’я, наприклад «example.com», і виберіть розташування. Натисніть OK. Сайт готовий.

Кінцевий результат кожної сторінки

Титульна сторінка

Розділ «Сервіси».

Розділ «Чому ми».

Розділ «Відгуки».

Розділ «Зв’язатися з нами».

Розділ нижнього колонтитула

Розділ «Інформаційний бюлетень».

ВИСНОВОК

Я впевнений, що ви отримаєте все, що я обіцяв, після виконання цього підручника. Це лише приклад. Пограйте трохи з цим чудовим інструментом і створюйте приголомшливі та професійні веб-сайти, одночасно досліджуючи нескінченні творчі можливості. Дякую.