«Лендинг за 60 мин» — это не просто

Посмотрела вебинар «Лендинг за 60 мин». Он был бесплатный и сам по себе являлся рекламой интенсива по быстрому созданию сайтов. Видео в сети оставили только на сутки. Тем не менее, оно успело вдохновить меня на создание своего первого лендинга.

Разработка ведется в программе Adobe Muse. Скачать пробную версию на месяц — проблем не составило. Однако на первых же шагах начали возникать проблемы, которые не описываются в вебинаре, через них ведущий просто перескакивает. Первая из них это выставить направляющие. Решение банальное — двойной клик по линейке.  Так же можно задать направляющей центральное выравнивание или точную координату. napravl Второе непонимание было связано со шрифтами, на которых строятся все основные фишки. Все иконки выполняются с помощью так называемых глифов, значков входящих в состав шрифта. Это очень удобно и не требует создания отдельных элементов для фона. Он задается в свойствах текста. А если придать достаточное скругление, можно создавать иконки в кружочках. Они будут иметь хорошее качество даже при большом приближении. glifНо шрифтов этих нет в стандартном наборе Muse. Их нужно скачивать, конвертировать и устанавливать.

На сайте fontello.com можно создать свой набор необходимых иконок и скачать его как шрифт. Дальше с помощью fontsquirrel конвертируем шрифт. Закачиваем свой с компьютера, ставим галочку и скачиваем получившийся файл. squirrel Добавлять шрифты в Muse просто. Нужно указать папку в которой лежат все файлы. Muse сам выберет из них те, которые ему нужны. Но в моем случае они упорно не хотели добавляться в библиотеку. Уже было забросив это дело, через два дня, я каким-то невероятным образом догадалась сначала установить шрифт на компьютере, а потом уже пытаться добавить его в программу.

webfonts

set

После установки шрифта, долго доходила до того, как вызвать панель с глифами. Оказалось — Окно → глифы.

Более серьезные сложности начались когда файл мьюза был готов. При выгрузке кода, сайт начал вести себя очень странно. Элементы съезжали, картинки отказывались подгружаться, функционал отсутствовал. Словом выглядел совсем не так как в предварительном просмотре. После боданий и ручной правки кода в файле index, сайт приобрел ожидаемые очертания, если не считать общей кривоты, которую не видно в редакторе.

В Muse есть функция якоря, но она почему-то не работает привычным образом. Поэтому пришлось решать это с помощью html в файле index.
<a href=»#podbor»>Код кнопки</a>
В месте куда должно перемещать нажатие на кнопку, вставляем:
<a name=»podbor»></a>
Не работала форма обратной связи. Долго не могла понять в чем дело. Оказалось рамка формы — это прозрачный прямоугольник с оранжевой обводкой. И прямоугольник этот расположен на переднем плане и закрывает собой форму. Переместила форму на верхний слой и все заработало.

Лендинг разместили здесь — http://misht.ru/land/

Итого на его создание лендинга в Adobe Muse ушла неделя вечеров с перерывами на подумать.
Если делать подобные landing page по готовому шаблону, не загружая никакие шрифты и не шибко возиться с индивидуальным дизайном, то раза с третьего можно делать такие странички и быстрее часа.

Adobe Muse для 32-разрядных систем не поддерживается с 2012 года. А возможность загрузки собственных шрифтов добавили после 2012. Так что Muse на офисном компе не открывал файлы, которые я создавала дома. Там он оказался бесполезным и был быстро снесен.

Теперь у меня есть шаблон landing page в Adobe Muse.

Добавить комментарий

Ваш адрес email не будет опубликован.