Создание готового web-сайта средствами Adobe Muse

Для создания рабочей версии сайта, которую в последующем можно загрузить на хостинг, использовался редактор, ориентированный на создание сайтов — Adobe Muse.

Adobe Muse, разработанный компанией Adobe Systems, стал настоящим подарком для тех, кто только приступает к ознакомлению с аспектами кодировки web-сайтов. Регулярно увеличивающееся число пользователей мировой сети

направило компанию к созданию обновляемого и простого в применении редактора для создания web-сайтов. Появление Adobe Muse произвело настоящий фурор в мире цифровых технологий. [13]

Многофункциональный программный продукт существенно упрощает разработку web-сайтов. Различные степени сложности, от визиток и портфолио вплоть до web-сайтов с большим количеством страниц, которые легко и быстро создать, не расходуя время на проработку кода. Главная задача Adobe Muse — это дать возможность разрабатывать высококачественные ресурсы, не обладая при этом многолетним опытом web-программиста. Для работы с редактором достаточно знать в общих чертах процесс создания web-сайта. Доступный и понятный интерфейс не требует особой расшифровки. На странице цифрового продукта располагаются панели с инструментами для работы. Поддержка новейших стандартов кодирования позволяет создавать сложные страницы с анимацией и видео файлами. Для Adobe Muse выбран самый широкий список различных шрифтов и цветовых решений. [13]

Из преимуществ Adobe Muse можно выделить:

1. Программа обладает высокой скоростью работы и большим перечнем возможностей.

2. В Adobe Muse представлена возможность разрабатывать различные версии сайтов под планшетные устройства и телефоны. И таким способом охватить ещё большее число пользователей.

3. Adobe Muse реализовывает поддержку новейших стандартов web-разработки: HTML5 и CSS3. Это означает, что в формируемых страницах имеется возможность располагать разнообразные интерактивные составляющие, такие как анимацию, parallax-эффекты и т.д.

4. Допускается бесплатное использование программы в течении 30 дней.

5. Обладает собственной CMS-системой, таким образом после того, как вы загрузили сайт в интернет, вы можете по надобности редактировать содержимое через любой браузер, где бы вы не находились, дома или на работе. Для этого понадобится только знать логин и пароль от вашего хостинга.

Из минусов можно отметить:

1. Сложности с добавлением сторонних скриптов.

2. Сложности при редактировании проекта, в связи с особенностями вёрстки.

3. Постоянная привязка к самой программе. Если вы поправили код уже готовой страницы, то в случае редактирования в редакторе придётся править по новой.

Создание готового web-сайта средствами Adobe Muse - student2.ru

Рисунок 2.13. Внешний вид Adobe Muse CC 2017

Как уже описывалось ранее, для создания данного web-сайта использовались: Adobe Photoshop CC 2017 и Adobe Muse CC 2017. В программе Adobe Photoshop CC 2017 был разработан внешний вид сайта, после чего все слои с растровой графикой были сохранены средствами модуля «Save for web», что в переводе означает «Сохранить для сети».

«Save for web» — это очень мощный модуль управления процессом сохранения растровых документов, который позволяет подобрать оптимальные

настройки сохраняемого изображения (оптимизировать изображение). Модуль «Save for Web» поддерживает самые распространённые форматы для сети Интернет - JPG, GIF, PNG.

В большинстве случаев использовался формат JPEG c выставленным 70% качеством для лучшей компрессии изображения и меньшего размера файла, также для сохранения графических изображений с прозрачностью использовался формат PNG-24 со стандартными настройками. На рисунках ниже показан внешний вид модуля «Save for Web» и настройки, использованные для этого модуля.

Создание готового web-сайта средствами Adobe Muse - student2.ru

Рисунок 2.14. Внешний вид модуля «Save for web»

Создание готового web-сайта средствами Adobe Muse - student2.ru

Рисунок 2.15. Используемые настройки для сохранения графики в формате JPEG и PNG

После экспорта всей графики из Adobe Photoshop начинается этап создания готового web-сайта в Adobe Muse. Процесс создания web-сайта в данном программном обеспечении имеет следующий алгоритм:

1. В первую очередь переходим в Файл ➜ Новый сайт. В открывшемся окне выставляем «Максимальное значение ширины сайта» на 1020 пикселей, в списке выше выбираем «Гибкое значение ширины».

2. Далее создается шаблон, который будет использоваться на всех страницах web-сайта. В этом случае мастер-шаблон содержит «шапку» и «подвал» сайта.

Создание готового web-сайта средствами Adobe Muse - student2.ru

Рисунок 2.16. Основной шаблон web-сайта

3. Следующим шагом создаются все основные страницы сайта. В данном случае были созданы страницы: «Главная» или домашняя страница; «О компании»; «Контакты»; «Информация. После создания страниц, карта сайта имеет следующий вид (см. рис. 2.17):

Создание готового web-сайта средствами Adobe Muse - student2.ru

Рисунок 2.17. Карта сайта в Adobe Muse

4. После этого остается повторить созданный ранее в Adobe Photoshop макет. Сделать кликабельные кнопки, навигационное меню, импортировать сохранённую графику, разместить все элементы в соответствии с макетом, поработать с гиперссылками.

5. Завершающим этапом является экспорт HTML документа или загрузка web-сайта на FTP сервер прямиком из Adobe Muse. Экспортированный HTML документ также можно загрузить средствами сторонних FTP-клиентов таких как: FileZilla, FTPRush или WinSCP. Для загрузки файлов на FTP-сервер в Adobe Muse нужно перейти в раздел «Файл» и выбрать соответствующий пункт, что показано на следующем рисунке.

Создание готового web-сайта средствами Adobe Muse - student2.ru

Рисунок 2.18. Экспорт готового web-сайта

На этом этап разработки уже рабочего web-сайта окончен. В следующей главе будет описан процесс загрузки файлов на FTP-сервер, а также предоставлена теоретическая информация о FTP-протоколе.

Наши рекомендации