Создание готового 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. Постоянная привязка к самой программе. Если вы поправили код уже готовой страницы, то в случае редактирования в редакторе придётся править по новой.
Рисунок 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» и настройки, использованные для этого модуля.
Рисунок 2.14. Внешний вид модуля «Save for web»
Рисунок 2.15. Используемые настройки для сохранения графики в формате JPEG и PNG
После экспорта всей графики из Adobe Photoshop начинается этап создания готового web-сайта в Adobe Muse. Процесс создания web-сайта в данном программном обеспечении имеет следующий алгоритм:
1. В первую очередь переходим в Файл ➜ Новый сайт. В открывшемся окне выставляем «Максимальное значение ширины сайта» на 1020 пикселей, в списке выше выбираем «Гибкое значение ширины».
2. Далее создается шаблон, который будет использоваться на всех страницах web-сайта. В этом случае мастер-шаблон содержит «шапку» и «подвал» сайта.
Рисунок 2.16. Основной шаблон web-сайта
3. Следующим шагом создаются все основные страницы сайта. В данном случае были созданы страницы: «Главная» или домашняя страница; «О компании»; «Контакты»; «Информация. После создания страниц, карта сайта имеет следующий вид (см. рис. 2.17):
Рисунок 2.17. Карта сайта в Adobe Muse
4. После этого остается повторить созданный ранее в Adobe Photoshop макет. Сделать кликабельные кнопки, навигационное меню, импортировать сохранённую графику, разместить все элементы в соответствии с макетом, поработать с гиперссылками.
5. Завершающим этапом является экспорт HTML документа или загрузка web-сайта на FTP сервер прямиком из Adobe Muse. Экспортированный HTML документ также можно загрузить средствами сторонних FTP-клиентов таких как: FileZilla, FTPRush или WinSCP. Для загрузки файлов на FTP-сервер в Adobe Muse нужно перейти в раздел «Файл» и выбрать соответствующий пункт, что показано на следующем рисунке.
Рисунок 2.18. Экспорт готового web-сайта
На этом этап разработки уже рабочего web-сайта окончен. В следующей главе будет описан процесс загрузки файлов на FTP-сервер, а также предоставлена теоретическая информация о FTP-протоколе.