Як створити чудову цільову сторінку для веб-сайту з портфоліо за допомогою Adobe Muse

0

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

Це те, що ви дізнаєтеся з цього підручника. Окрім цього, ви:

  • Дізнайтеся, як оптимізувати графіку для веб-сайту Muse за допомогою Adobe Illustrator (необхідно для швидшого завантаження вмісту сайту)
  • Вміти відображати вміст у перспективі за допомогою Photoshop.
  • Дізнайтеся, як створити професійну цільову сторінку за допомогою Adobe Muse.

ВИМОГИ ДО ЦЬОГО ПІДРУЧНИКА:

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

  • Перейдіть на сторінку https://goo.gl/KVL9r1 і завантажте це зображення для заголовка. Його розміри повинні бути 1400 x 750 пікселів. Ось скріншот із сайту. Розмістіть цей розмір у коробках спеціального розміру та завантажте його.

  • Перейдіть на сторінку http://goo.gl/ZeHxOF і http://goo.gl/BASRSP і завантажте пакет значків соціальних мереж і піктограму зі стрілкою вниз.

  • Логотипи, використані в цьому підручнику, можна завантажити тут (гіперпосилання – файл ‘assets.rar' додається до електронного листа)

  • Перейдіть на сторінку http://goo.gl/mzw1Xh і завантажте цей вектор екрану iMac 27", який використовуватиметься для відображення проекту "дизайну веб-сайту".

  • Відкрийте настільну програму Creative Cloud і завантажте макети iPhone і iPad mini, як показано нижче. Вони будуть автоматично додані до вашої бібліотеки Photoshop.

КРОК №1: ЯК ОПТИМІЗУВАТИ ГРАФІКУ ДЛЯ ВЕБ В ADOBE ILLUSTRATOR:

1. Відкрийте файл соціальних іконок ‘eps' в Illustrator. Виберіть піктограму facebook (квадратна версія) і натисніть Ctrl+Shift+G, щоб розгрупувати ці піктограми.

2. Клацніть за межами полотна та знову виберіть значок facebook. Потім перейдіть до панелі трансформації, розташованої вгорі, поставте W=19,5, H=19,5 і натисніть Enter.

3. Натисніть Ctrl+C, а потім Ctrl+N. У цьому новому діалоговому вікні документа помістіть «static_facebook_icon» у поле імені, W=20 і H=20. Переконайтеся, що зі спадного списку одиниць вибрано пікселі. Натисніть OK.

4. Натисніть Ctrl+V, щоб вставити значок facebook і правильно вирівняти його.

5. Перейдіть до «Файл» > виберіть «зберегти для Інтернету» (Alt+Shift+Ctrl+S). Виберіть PNG-24 зі спадного списку, розташованого вгорі праворуч. Натисніть «Зберегти» та збережіть його в потрібному місці. Також збережіть файл ілюстратора (Ctrl+S)

6. Повторіть кроки 2–5 для піктограм twitter, google plus, LinkedIn і Behance та збережіть їх для Інтернету.

ПРИМІТКА. Ми вибрали формат png, оскільки він має велику прозорість, порівняно менший розмір і найкраще підходить для піктограм і векторів.

7. Так само оптимізуйте ці п'ять піктограм для зображення заголовка. Цього разу змініть їх колір на білий. Для цього виберіть піктограму, перейдіть до спадного меню «Заповнити», розташованого вгорі ліворуч під меню програми, виберіть білий колір і збережіть для Інтернету. Тепер у вас є 10 значків – 5 сірих і 5 білих.

8. Після цього оптимізуйте піктограму зі стрілкою вниз (колір: білий, ширина документа = 30 пікселів, висота = 20 пікселів) і збережіть її для Інтернету як PNG-24.

9. Тепер створіть новий документ розміром 1400 x 750 пікселів і назвіть його як header_image. Натисніть OK.

10. Перейдіть до «Файл» > «Помістити» та знайдіть зображення, яке ми завантажили з pexels.com. Клацніть на полотні, щоб розмістити його та налаштувати всередині полотна.

ПОРАДА. Натисніть «Z» на клавіатурі, утримуйте клавішу Alt і клацніть на полотні кілька разів, щоб трохи зменшити масштаб, щоб усе було видно одразу.

11. Виберіть інструмент прямокутник у панелі інструментів, розташованій у лівій частині вікна програми. Створіть прямокутник і трансформуйте його в W=1400, H=750px. Потім перетягніть цей прямокутник на розміщене зображення.

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

13. Виберіть Earthtone 30, як показано на знімку екрана нижче, і закрийте цю панель.

14. Вибравши прямокутник, перейдіть на вкладку градієнта, розташовану в правій частині вікна програми. Якщо його немає, натисніть Ctrl+F9. Натисніть, утримуйте та перетягніть середній повзунок градієнта в крайній лівий край.

15. Потім у полі «Непрозорість» (розташоване вгорі) поставте 87% і натисніть Enter.

16. Збережіть це зображення для Інтернету. Цього разу виберіть JPEG і якість=86%. Також збережіть файл ілюстратора.

КРОК №2: ПІДГОТОВКА АСЕТІВ У PHOTOSHOP:

17. Відкрийте Adobe Photoshop CC. Перейдіть до «Файл» > виберіть «Новий». Введіть назву як "ecommerce_design", W=619px і H=310px.

18. На панелі «Бібліотеки» (розташована праворуч) виберіть макет ipad mini, який ми завантажили, і перетягніть його на полотно.

19. Утримуйте клавішу Shift і збільште його розмір, перетягуючи кути, і відрегулюйте його всередині полотна, як показано нижче.

ПРИМІТКА. Ви можете скористатися інструментом масштабування. Щоб перемикатися між інструментами масштабування та виділення, натискайте клавіші «Z» і «V» на клавіатурі. Крім того, якщо ви не можете знайти панель бібліотек (або будь-яку іншу панель), просто перейдіть до меню «Вікно» > виберіть «Бібліотеки».

20. Виберіть інструмент «Прямокутник» і створіть прямокутник будь-якого розміру всередині полотна (не турбуйтеся про колір його заливки). З’явиться вікно властивостей. Усередині цього помістіть W=1024px і H=768px і переконайтеся, що значок ланцюжка не вибрано.

21. Тепер натисніть значок ланцюжка, щоб вибрати його. Поставте W=290px і натисніть Enter. Згорнути цю панель властивостей.

22. На панелі «Шари», розташованій праворуч, виберіть «Rectabgle 1», клацніть правою кнопкою миші та виберіть «перетворити на смарт-об’єкт».

23. Потім перейдіть до меню редагування > виберіть «Вільне перетворення». Знову відкрийте меню редагування > трансформувати > виберіть «спотворити».

24. Тримайте один кут прямокутника і зробіть так, щоб він збігався з одним кутом екрана ipad. Зробіть це для всіх чотирьох кутів і натисніть Enter. Ви отримаєте наступний результат. За потреби використовуйте інструмент масштабування.

25. На панелі «Шари» клацніть правою кнопкою миші фоновий шар і видаліть його. Крім того, зробіть шар «прямокутник 1» невидимим, клацнувши піктограму ока ліворуч.

26. Повторіть кроки з 18 по 22, щоб створити ще один прямокутник, перетворити його на смарт-об’єкт і зробити так, щоб кожен його кут збігався з кутами екрана ipad, і натисніть Enter.

27. Зробіть видимим шар «прямокутник 1», а шар «ipad» — невидимим.

28. Клацніть правою кнопкою миші шар «прямокутник 1» і виберіть «редагувати вміст». Він відкриється в новій вкладці. Перейдіть до «Файл» > «Розмістити вбудований файл», знайдіть «screen1.webp», який можна знайти в папці «Логотипи», яку ви завантажили. Натисніть місце та натисніть Enter. Натисніть Ctrl+S. Цю зміну буде оновлено в прямокутнику 1 у нашому головному файлі. Закрийте цю вкладку.

29. Подібним чином виконайте це для прямокутника 2 за допомогою ‘screen2.webp' і збережіть його. Переміщуйте шари вгору або вниз на панелі шарів відповідно до ваших уподобань. Видаліть шар ipad.

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

31. У цьому діалоговому вікні, поруч із режимом змішування, є кольорове поле. Клацніть його та виберіть наступні значення кольорів.

32. Застосуйте той самий ефект тіні до другого шару. Натисніть Alt+Ctrl+Shift+S. Виберіть PNG-24 і натисніть зберегти. Ви отримаєте наступний результат.

ПРИМІТКА: таким чином ви можете розмістити веб-сайт або будь-яке зображення в перспективі. Вам просто потрібно знати точну роздільну здатність пристрою, на якому ви збираєтеся його розмістити. Зробіть це для макетів iphone та imac для відображення проектів «дизайн логотипу» та «дизайн веб-сайту», як показано нижче.

КРОК №3: НАЛАШТУВАННЯ РОБОЧОГО ПРОСТОРУ В MUSE:

33. Відкрийте Adobe Muse CC. Вас зустріне екран привітання. У розділі «Створити новий» клацніть сайт, і з’явиться діалогове вікно нового сайту.

ПРИМІТКА. Ще один спосіб створити новий сайт — це перейти в «Файл» > «Новий сайт» або Ctrl+N.

34. У цьому діалоговому вікні є спадне меню з написом «fluid width». Відкрийте це, клацнувши його та виберіть «Фіксована ширина» та змініть значення ширини сторінки та стовпців, як показано нижче. Значення поля "жолоб" зміниться автоматично.

35. Розгорніть опцію додаткових налаштувань і переконайтеся, що встановлено прапорець «липкий нижній колонтитул». Також переконайтеся, що сайт вирівняно по центру в області браузера. Натисніть OK. Muse переведе вас у режим ПЛАНУВАННЯ.

36. Натисніть Ctrl+S і збережіть свій сайт у потрібному місці. Я рекомендую вам створити окрему папку для вашого сайту та зберігати її щоразу, коли ви вносите зміни.

ПРИМІТКА. Плавна ширина призначена для створення адаптивного макета. Ми вибрали фіксовану ширину, тому що ми будемо створювати ефект прокручування, який не працює з рухливими сайтами.

37. Двічі клацніть «A-master», розташоване внизу в сірій області. У панелі інструментів, розташованій у лівій частині вікна програми, виберіть «текстовий інструмент».

38. Зробіть текстове поле на полотні. Натисніть Ctrl+T, щоб відкрити текстову панель, і в спадному списку шрифтів знайдіть веб-шрифти та виберіть «додати веб-шрифти».

39. З'явиться нове вікно. Виберіть вкладку «edge web fonts», знайдіть і завантажте наступні шрифти по одному:

  • Однотонний
  • Телекс
  • Числа
  • Raleway
  • сторона
  • Питання

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

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

41. Двічі клацніть на шарі 1. Відкриється вікно параметрів шару. Під ім'ям введіть ‘home_header' і натисніть OK. Повторіть цей процес для двох інших шарів і назвіть їх як «static_header» і «content» відповідно.

42. Розмістіть шари в порядку, показаному нижче, просто перетягнувши їх вгору або вниз, і збережіть зміни.

ПРИМІТКА. Ми розмістили шари в такому порядку, тому що хочемо, щоб наш заголовок був зверху над усім іншим. Шари — це ефективний спосіб упорядкувати та скласти вміст сайту, особливо коли макет стає складним.

43. Виберіть шар static_header і згорніть цю панель.

КРОК №4: СТВОРЕННЯ СТАТИЧНОГО ЗАГОЛОВКА:

44. У верхній частині сторінки ви побачите два напрямні. Перший – це довідник у верхній частині сторінки, а другий – довідник у заголовку. Натисніть, утримуйте та перетягніть напрямну заголовка нижче та встановіть для неї значення 80 пікселів. Зробити це можна за допомогою лінійок. Це наша область заголовка.

45. Виберіть інструмент прямокутник або натисніть «M» на клавіатурі. Створіть невеликий прямокутник на полотні та переконайтеся, що колір рамки — «червоний», що означає, що цей об’єкт знаходиться всередині шару «static_header».

46. ​​Перейдіть до пункту «Змінити розмір» (або «Трансформувати» у старих версіях Muse), розташованого вгорі праворуч, клацніть його та встановіть H=80.

47. Перетягніть цей прямокутник і помістіть його в область заголовка таким чином, щоб він з’єднався з напрямними «верх сторінки» і «заголовок».

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

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

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

51. Після цього клацніть спадне меню кольору обведення, встановіть значення для R, G і B як 235 кожне. Потім клацніть піктограму зігнутого краю паперу, щоб створити новий зразок. З’явиться вікно параметрів зразка. Натисніть OK і збережіть зміни.

52. Перейдіть до «Файл» > «Помістити». Знайдіть «static_logo.webp» і натисніть «Відкрити». Курсор змінить свій вигляд на гармату місця, заряджену зображенням. Натисніть на полотно, щоб розмістити його.

53. Потім перемістіть це зображення на прямокутник заголовка та вирівняйте його за вертикальним центром (синя лінія вказуватиме, коли воно буде по центру) і прив’яжіть його до лівої межі, як показано нижче.

54. Знову перейдіть до «Файл» > «Розмістити» та виберіть усі статичні значки соціальних мереж, які ми оптимізували за допомогою Illustrator. Натисніть Відкрити. Ви побачите, що гармата місця буде мати номер (5), що вказує на п’ять завантажених зображень. Якщо ви хочете перейти до іншої піктограми, щоб розмістити її першою, ви можете скористатися клавішами зі стрілками на клавіатурі. Розмістіть їх один за одним.

55. Виберіть усі піктограми та перейдіть до панелі «Вирівняти», розташованої поруч із «Змінити розмір» у верхньому правому куті. У спадному меню «Вирівняти за» виберіть «вирівняти за ключовим об’єктом».

56. Потім введіть 11 у поле, надане під параметром «Розподілити інтервал». Виберіть параметри «A» і «B», як показано на знімку екрана нижче.

57. Вибравши ці значки, клацніть правою кнопкою миші та виберіть «група» або Ctrl+G. Перемістіть цю групу на прямокутник заголовка та прив’яжіть її до правої межі відповідно до логотипу, як показано нижче.

58. Створіть текстове поле та введіть у ньому HOME. Натисніть Ctrl+T і виберіть Шрифт: Телекс, Розмір: 13, колір: чорний, вирівняно по центру та 120% інтерліньяжу. Налаштуйте ширину та висоту цього текстового поля відповідно до розміру шрифту.

59. Аналогічно створіть ще чотири текстові поля для РОБОТА, ПОСЛУГИ, КОНТАКТ і ПРО. Виберіть їх усі, перейдіть до панелі вирівнювання та повторіть те, що ми робили з піктограмами соціальних мереж. Цього разу змініть інтервал розподілу на 50. Згрупуйте та перемістіть їх у прямокутник заголовка, як показано нижче.

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

61. Так само закріпіть логотип у верхньому лівому куті, групу меню вгорі посередині та групу соціальних значків у верхньому правому куті. Наша статична шапка готова.

КРОК №5: СТВОРЕННЯ НИЖНЬОГО КОНТОЛОГУ:

62. Унизу ви побачите три напрямні, а саме – нижній колонтитул, нижню частину сторінки та нижню частину браузера. Клацніть, утримуйте та перетягніть напрямну «нижня частина браузера» та встановіть її на 770 пікселів за допомогою лінійок. Потім перетягніть напрямну «нижній колонтитул» і прив’яжіть її до напрямної «низ сторінки». Це наша область нижнього колонтитула.

63. Створіть прямокутник всередині цієї області H=270 і W=546, зробіть так, щоб його верхня і нижня сторони збігалися з нижнім і нижнім колонтитулами напрямних браузера відповідно.

64. Вибравши цей прямокутник, клацніть слово «обведення» та застосуйте лише верхнє обведення вагою «1» (кольори обведення: R=235 G=235 B=235). Перейдіть до панелі «вирівнювання» та в розділі «вирівняти об’єкти» виберіть «вирівняти горизонтальні центри» (це другий варіант).

65. Розмістіть static_logo.webp і додайте текст у цей прямокутник, як показано нижче. (Шрифт тексту: Arimo, розмір: 14, колір: R=37 G=37 B=37, вирівняно по центру та 120% інтерліньяжу).

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

КРОК №6: СТВОРЕННЯ ЗАГОЛОВКА ДОМАШНЬОЇ СТОРІНКИ ТА ЕФЕКТУ ПРОКРУТКИ:

67. Закрийте головну сторінку та поверніться до режиму плану.

68. Відкрийте «Домашню» сторінку, двічі клацнувши її. Відкрийте панель шарів, виберіть шар «home_header» і згорніть панель.

69 Звільніть тут трохи місця, перетягнувши нижній колонтитул до 4000 пікселів за допомогою лінійок.

70. Тепер створіть прямокутник шириною 100%. Повної ширини, як ми робили раніше, можна досягти, розгорнувши прямокутник від його лівого та правого країв і прив’язавши його до обох країв сторінки.

71. Розгорніть прямокутник догори, перетягнувши його верхній край, і прив’яжіть його до верхньої частини сторінки, як показано нижче.

72. Перейдіть до панелі зміни розміру, поставте H=750px.

73. Вибравши прямокутник, клацніть слово «Заливка» (а не спадне меню кольору) і натисніть «додати зображення». Знайдіть ‘header_image.webp', який ми завантажили з Pexels і оптимізували в Illustrator. У спадному меню «припасування» виберіть «масштаб для заповнення» та розташуйте його у верхньому лівому куті.

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

75. Створіть текстове поле та введіть у ньому «ПРО НАШУ КОМАНДУ». Шрифт: Телекс, Розмір: 13, вирівняно за лівим краєм, колір: білий і інтерліньяж: 120%. Перемістіть його та розмістіть у верхньому лівому куті зображення, як описано нижче.

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

77. Створіть текстове поле. Він повинен бути W=944, H=92. Введіть у ньому «WE DESIGN THE WEB». Шрифт: монотонний, розмір: 72, вирівнювання по центру, 120% інтерліньяжу. Змініть колір слова ‘WEB' на R=41 G=171 B=226 і білий для решти.

78. Створіть ще три маленькі текстові поля для ПОСЛУГ, КОНТАКТІВ і БЛОГУ. Шрифт: Telex, розмір: 13, колір білий, вирівняно по центру та 120% інтерліньяжу.

79. Розмістіть зображення ‘header_logo.webp'. Налаштуйте логотип і ці чотири текстові поля наступним чином.

80. Перейдіть до бібліотеки «Віджети», розташованої праворуч. Розгорніть розділ «Кнопки». Виберіть «Кнопка стану» та перетягніть її на полотно. Закрити панель віджетів.

81. Обережно виділіть маленьке коло всередині цієї кнопки та натисніть «Видалити».

82. Двічі клацніть у текстовому полі Lorem Ipsum, виділіть увесь текст, видаліть його та введіть «ПОРТФОЛІО».

83. Виберіть інструмент виділення (інструмент зі стрілкою) з панелі інструментів. Перейдіть до текстової панелі (Ctrl+T) і змініть форматування тексту «портфоліо» наступним чином.

84. Тепер виберіть кнопку стану та змініть її розмір на W=177, H=43. Правильно налаштуйте текстове поле всередині кнопки.

85. Виберіть кнопку. Перейдіть до параметра «радіус кута» (розташований поруч із штрихом). Натисніть усі чотири кути, щоб зробити їх плоскими.

86. Вибравши кнопку, подивіться на верхній лівий кут під меню програми. Ви помітите, що «кнопка стану» написана жирним шрифтом. Це відоме як «поточна область вибору». Це дозволяє вам знати, що ви вибрали.

87. Поряд з ним написано «Нормальний». Натисніть її, і ви матимете чотири стани.

88. Для нормального стану змініть колір заливки на «немає», а колір обведення на білий.

89. Виберіть стан «ролловер», змініть колір заливки та обведення на R=41 G=171 B=226.

90. Для станів «миша вниз» і «активний» необхідні зміни будуть застосовані автоматично.

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

92. Розмістіть зображення ‘down_arrow.webp' під кнопкою. Ви повинні отримати наступний результат.

93. Наш домашній хедер готовий. Перейдіть до «Файл» > «Попередній перегляд» у браузері (Ctrl+Shift+E) і перевірте, чи все працює належним чином.

КРОК №7: ДОДАВАННЯ ВМІСТУ:

94. Поверніться до Muse, відкрийте панель шарів, виберіть шар «вміст» і згорніть панель.

95. Прокрутіть вниз до білого простору нижче та створіть текстове поле W=464, H=60. Введіть у ньому «НАША ОСТАННЯ РОБОТА». Шрифт: світлий Raleway, розмір: 46, колір: чорний, вирівнювання по центру та 120% інтерліньяжу. Тепер виділіть слово «RECENT» і змініть його шрифт на «Raleway Bold».

96. Зробіть ще два текстові поля. Один з W=376, H=165 і інший з W=376, H=363.

97. Двічі клацніть усередині першого та введіть «ДИЗАЙН ВЕБ-САЙТУ». Шрифт: Raleway Extra Light, розмір: 77, колір: чорний, вирівнювання по лівому краю, 100% інтерліньяжу.

98. Двічі клацніть всередині другого та вставте фіктивний текст із lipsum.com, як показано нижче.

  • Для основного заголовка – Шрифт: Lato Bold, розмір: 30, колір: R=33 G=42 B=52, вирівнювання по лівому краю та 120% інтерліньяжу.
  • Для основного абзацу – шрифт: Lato light, розмір: 21, колір: R=57 G=57 B=57, вирівнювання за лівим краєм і 120% інтерліньяжу.
  • Для заголовка «Відгуки клієнта» – те саме, що й основний заголовок, але розмір 21.
  • Для абзацу відгуків – так само, як і основного абзацу, але шрифт «Lato Light Italic»

99. Виберіть кнопку стану «портфоліо», скопіюйте та вставте її під текстове поле, яке ми створили на попередньому кроці. Змініть текст портфоліо на «ПЕРЕГЛЯНУТИ САЙТ»

  • Для нормального стану – Заливка: немає, колір обведення та тексту: чорний.
  • Для стану переміщення – колір заливки та обведення: R=41 G=171 B=226 і колір тексту: білий.

100. Розмістіть зображення «imac with website mockup». Розмістіть зображення, текстові поля та кнопки таким чином.

101. Прокрутіть вниз до білого простору та створіть прямокутник W=1200, H=5. Застосуйте верхню обведення товщини «1» і кольору R=235 G=235 B=235. Розмістіть його наступним чином. Це буде працювати як роздільник.

102. Скопіюйте текстові поля та кнопки, які ми створили на кроках 92–95, і вставте їх під роздільником. Змініть текст першого поля на «ДИЗАЙН ЛОГОТИПА», а текст кнопки на «ПЕРЕГЛЯНУТИ НАЖИВО».

103. Розмістіть «iphone with logo mockup» і розташуйте їх таким чином.

104. Скопіюйте та вставте роздільник після цього.

105. Так само скопіюйте та вставте текстові поля та кнопку під цим роздільником. Змініть текст першого поля на «ЕЛЕКТРОННА КОМЕРЦІЯ».

106. Розмістіть «ecommerce_design.webp», який ми створили та оптимізували в кроках 15–30 за допомогою Photoshop. Розташуйте все наступним чином.

107. Тепер створіть прямокутник W=1004, H=363 без заливки та верхнього штриха товщини «1» і кольору: R, G, B=235 кожен.

108. Усередині цього прямокутника створіть два текстових поля. У першому введіть – «ЩО МИ ВІРЮЄМО» (Шрифт: світлий Raleway, розмір: 35, колір: R, G, B=37 кожен, вирівняно по центру та 100% інтерліньяжу). Виберіть слово «ВІРЮ» та змініть шрифт на «Raleway bold».

109. У другому текстовому полі введіть відому цитату Мілтона Глейзера, як показано нижче (шрифт: Lato Light Italic, розмір: 70, колір: R, G, B = 37 кожен, вирівнювання по центру та 120% інтерліньяжу).

110. Скопіюйте та вставте будь-яку з наведених вище кнопок стану та змініть її текст на «ПЕРЕГЛЯНУТИ НАШУ РОБОТУ». Розташуйте все наступним чином.

КРОК №8: ПІДКЛЮЧЕННЯ:

111. У панелі інструментів виберіть «прив’язку посилання» або натисніть «A» на клавіатурі. Курсор змінить свій вигляд на гармату місця, заряджену якорем. Розмістіть цей якір над текстовим полем «НАША ОСТАННЯ РОБОТА», як показано нижче.

112. З’явиться діалогове вікно з параметрами прив’язки. У полі імені введіть «recent_work».

113. Виберіть зображення зі стрілкою вниз під кнопкою портфоліо. Перейдіть до спадного меню «Гіперпосилання», розташованого вгорі, і виберіть «recent_work». Збережіть зміни та перегляньте сайт (Ctrl+Shift+E).

КРОК №9: ДОДАВАННЯ АЛЬТЕРНАТИВНОГО ТЕКСТУ, МЕТАДАНИХ, ТЕГІВ РІВНЯ ТА ФАВІКОНА:

114. Альтернативний текст – це спосіб змусити пошукові системи зрозуміти значення матерії, що міститься в зображенні, і його потрібно надавати до кожного зображення, яке ви додаєте на свій сайт. Для цього клацніть правою кнопкою миші будь-яке з трьох зображень, які ми розмістили, і виберіть «редагувати властивості зображення».

115. З’явиться діалогове вікно властивостей зображення. Тут ви побачите два поля. Один — «підказка», а інший — «альтернативний текст». Основні відмінності між ними такі:

ПОРАДА ІНСТРУМЕНТА ВЕСЬ ТЕКСТ
  • Це заголовок, який з’являється, коли ви наводите курсор на зображення в браузері.
  • У HTML це називається <title>тегом.
  • Це інформація про предмет зображення.
  • У HTML це називається <alt>тегом.
  • Має бути коротким, але описовим.
  • Не відображається в браузері, але автоматично записується в коді.

ПРИМІТКА. Ви повинні пошукати в Інтернеті методи та важливі міркування щодо додавання альтернативного тексту та метаданих, оскільки вони є основними аспектами кращого SEO.

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

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

ПРИМІТКА. Зазвичай, коли ви додаєте письмовий вміст на веб-сайт, ви робите заголовки жирним і більшим за абзаци (або інший текст), щоб проілюструвати різницю між ними. Ми, як люди, можемо розпізнати цю різницю. Але проблема полягає в тому, що браузер не розуміє, яка частина тексту є заголовком, а яка абзацом, якщо ви не призначите визначені теги рівня для кожного з них.

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

118. Для цього виділіть текст, перейдіть до текстової панелі (Ctrl+T) і внизу ви побачите розкривне меню з усіма тегами. Виберіть їх відповідно та збережіть зміни.

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

КРОК №10: ЕКСПОРТ САЙТУ:

120. Нарешті перейдіть до Файл > Експортувати як HTML (Ctrl+E). У полі URL-адреси сайту введіть www.squaremaze.com і виберіть місце, куди потрібно експортувати сайт. Натисніть OK. Наша цільова сторінка готова. Ви можете попередньо переглянути його (файл ‘index.html') у будь-якому браузері та перевірити його вигляд і продуктивність.

КІНЦЕВИЙ РЕЗУЛЬТАТ:






ВИСНОВОК

Використання інших програм, таких як Illustrator, Photoshop, Fireworks, Fuse та Animate, для створення якісних ресурсів для сайту Muse завжди доводилося корисним і давало виняткові результати. Це був лише один підхід до проектування за допомогою цього чудового інструменту. Дізнайтеся більше. Дякую тобі.

Джерело запису: instantshift.com

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