Виртуальные открытки к праздникам

Довольно незначительную часть нашей жизни занимают виртуальные открытки, однако востребованы во многих случаях. С их помощью  можно всегда поддержать хорошие отношения, со своими родными и знакомыми, а также немного улучшить позиции своих сайтов.  Научилась их делать совсем недавно, хотя сайты веду три года. Первые виртуальные открытки были сделаны для внуков. Теперь умею делать их в 2 программах: Power Point и Share Point.

виртуальные открытки

Виртуальные открытки к праздникам в программе: Share Point

Объясняю, на своей виртуальной открытке «8marta». Вначале создадим  отдельную папку, сразу подпишем ее латинскими буквами – это будет название. Скачаем в папку нужные рисунки из Интернета, в формате «png», на прозрачной сетке, без фона.

вход в программу paint

Если не удалось скачать без фона, его можно удалить в программе Paint. В этом случае, нажмем правой кнопкой на картинку, получив контекстное меню, в нем перейдем к  опции «изменить». Выберем слева, вверху окно, перейдем в новую вкладку, где нажмем «сохранить как». В левой части этого же окна сохраним нашу картинку в формате «png» или «gif». Могу сказать, что готовые картинки имеют лучшее качество, чем из программы Paint. В картинках формата «gif» хорошо сохраняются анимации, если мы их совсем не редактируем.

Бесшовные фоны в программе GIMP

Особое внимание уделим изображению фона. В Интернете скачаем «фоны», но нам нужен бесшовный фон, который не всегда можем встретить, в соответствии со своими запросами по цвету и рисунку. Исправить положение поможет программа GIMP 2.8, она бесплатна, находится в фазе испытаний. Это графический редактор со многими функциями. В данном случае, нам она нужна — только для получения бесшовного фона. Сейчас, пока делаю открытки, ярлык программы находится у меня на панели задач, чтобы быстро и удобно было ее развертывать.

фон в программе gimp

Когда программа развернется, нажмем «файл», «открыть». Откроется наша папка: Pictures, где выберем нужный фон. В окне предпросмотра увидим выбранный рисунок, в строке сохранения установим «все файлы» и «открыть». Откроется большой экран с изображением фона. Здесь выберем «фильтры», «карты», «без шва». В меню найдем «экспортировать» и сохраним в нужном формате, чаще это — «png».

Настройка других изображений 

Остальные картинки тоже отредактируем, в программе Microsoft Office Picture Manager или в сервисе avatan.ru. Важно подогнать их по размерам, улучшить освещенность и контраст. Когда папка с картинками полностью готова перейдем к программе Share Point.

Настройки  программы Share Point 

Программа 2007 года, скачала ее бесплатно, простым запросом в браузере Яндекса. Никогда в ней не работала, но изучения не потребовалось, потому что все понятно.
Программа Share Point оказалась неплохой, но к ней нужно приспособиться. В открытом конструкторе работаем в режиме разделения, когда вверху видим код, а внизу делаем открытку.
В нижнем отделе программы щелкнем правой кнопкой мыши, и выберем в открывшемся контекстном меню «свойства страницы». Откроется новое окно, где произведем необходимые настройки.

настройка свойств страницы

На вкладке «общие» запишем название открытки, сделаем ее краткое описание и перечислим ключевые слова, через запятую. В строку «базовое расположение» скопируем полный путь расположения открытки на компьютере. В строке «конечная рамка» записала  размер всей открытки и это оказалось правильным.  Размер моего экрана составляет 1250 пикселей,/измеряю линейкой программы FsCapture/. Готовая открытка плохо отобразилась, на дисплее, когда я всю ее сделала и открыла с хостинга, видимо на хостинге размер сайта меньше. Пришлось все переделать под новый размер, однако второй раз все делается за 15 минут.

настройка фона

На вкладке «форматирование» отметим галочками 2 чекбокса: «фоновый рисунок» и «сделать подложкой». В «обзоре» выберем фон из папки с картинками для открытки, в строку с названием скопируется полный ее адрес, сохраним, и фон сразу появится, внизу окна программы. На этот фон будем устанавливать другие элементы.
Осталось настроить язык – выбираю — русский и опять сохраняю, можно все сразу сохранить.
Чтобы наши элементы не расплывались и не двигались по странице, будем располагать их в таблице. Для этого на верхней панели инструментов выберем значок «таблица». Нам нужна не вся таблица, а только 2 или 3 квадратика, в зависимости от задуманного рисунка. Вначале сделала 3 квадратика, но они сдвинулись на хостинге. Оставила только два квадрата, в которых расположила 2 гирлянды, вверху виртуальной открытки.

расположение рисунков на открытке

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

настройки ячеек

Вначале рассчитаем всю ширину открытки 1100 px или точек, как указано в программе. По краям оставим по 250 px, в центре остается 600 px. Не все будет так точно, как мы рассчитали. Рисунки сдвигаются, в этом случае настройку ячеек приходится восстанавливать и посматривать, как эти размеры изменяются в коде, верхней части конструктора. Кое — что приходится переделывать с самого начала. Вверху и по краям у меня установились гирлянды, посередине стихи из Интернета. Пришло время установки аудио плеера.

Установка аудио плеера 

Подбираю музыку  в формате mp3 и оставляю ее в загрузках, оттуда ее проще скопировать, чем из файла с музыкой. Вначале загружаем аудио файл на свой сайт, в папку с медиа файлами. Затем копируем адрес этого файла, уже в составе нашего сайта. Идем в онлайн сервис и вставляем наш адрес строку.

строка для вставки в mp3

Ниже выберем цвет аудиоплеера, внизу страницы нажмем оранжевую кнопку «собрать и показать html код». Скопируем этот код и перенесем его вначале в наш блокнот notepad++. Затем нужно этот код вставить в код нашего конструктора, вверху страницы. Но это не трудно, установим курсор под картинкой, у меня под стихами. Место курсора выделится в коде, сюда и вставим код аудио плеера, после закрытого кода </br>- перенос. В коде плеер называется объектом. Внутри папки он изображается, как белая полоса. При переходе на внешнюю страницу открытки, плеер будет отображаться и звучать.

Снизу можем добавить  картинки, так же построив таблицу. Решаю рядом с картинками установить форму подписки.

Установка формы подписки

Оказалось совсем не сложно. Заходим в сервис рассылок, добавляем новую рассылку писем. Составляем письмо для имеющихся подписчиков и копируем форму подписки будущим подписчикам, чтобы вставить ее в открытку. Чтобы форма была миниатюрнее, оставляю только 2 строчки: email, и слово «подписаться». Окраску формы выбираю соответственно стилю открытки. Копирую код формы, переношу его вначале в блокнот, «сохраняю как». И не торопясь ищу место вставки для формы. Чтобы форма точно встала, вначале вставила картинку, подогнала ее размеры, под форму, все измерила. Затем прямо на картинку поставила курсор, это место выделилось в коде, куда и вставила код формы, вытеснив картинку. Потом картинку удалила, а форма подписи встала точно туда, куда ее вставили.
Все сохраним, как файл index.html –  наша виртуальная открытка и есть главная страница одностраничного сайта. Научившись делать такие открытки, мы сможем сделать лэндинг и продающую страницу, которые в Интернете продаются дорого.
Этим можно ограничиться, думаю, что не стоит делать огромных открыток, перегружая их изображениями, текстами, музыкой. Открытки и так довольно тяжелы для сайта. Теперь разместим папку с картинками и файлом index.html на хостинге.

Размещение  на хостинге

Заходим в файловый менеджер к своим сайтам, выберем нужный. Создадим  папку, подпишем ее латинскими буквами. В ней поместим нашу виртуальную открытку «8marta»- так будет называться и наша папка с одноименной открыткой. В эту папку скачаем поочередно все изображения и файл index.html.

Откроем этот файл на хостинге, для редактирования, потому что нам теперь нужно изменить путь к каждой картинке, включая фон. Раньше был прописан путь на наш компьютер, теперь заменим его адресом сайта. У меня получилось следующее: привожу весь код, скопированный на хостинге, включая форму подписки. В этом случае станут понятными все названия картинок.

После того, как мы все сделали, напишем в браузере:http:// moylubimiblog.ru/otkritki/8marta/, нажмем enter, и наша открытка прекрасно открывается. Однако это не все.

Связь открытки с сайдбаром

Откроем на сайте «записи», перейдем на вкладку «текст» и скопируем сюда код, который заранее приготовлен в блокноте.

Первая часть кода – это адрес нашей открытки на хостинге. Вторая часть кода включает в себя адрес одной из картинок папки хостинга, при помощи которой, посетитель сможет вызвать всю открытку. Однако эту маленькую картинку вставляем дополнительно в папку медиафайлов, чтобы связать ее с записью, которую публиковать не будем, а сохраним, как черновик. Заметили, что эта картинка находится дополнительно в папке изображений? Код из черновика скопируем в виджет, теперь посетитель может кликнуть на картинку виджета и перейти на открытку, где его ждет форма подписки. Если открытка понравится посетителю, он может на нее подписаться и поздравлять по электронной почте своих друзей.

Комментарии 5

  • Отлично, прекрасная открытка, интересно этим заниматься. Послать открытки своим друзьям и родным думаю очень приятно.

  • Алевтина Михайловна, пока вы не сделали свои открытки, можете мою открытку посылать по почте своим друзьям. Я своей соседке послала открытку на компьютер и она хочет поздравлять ею своих знакомых. Все же там поет Мирей Матье и музыка хорошая, можно слушать сколько угодно.

  • По мне, так слишком сложно всё это. Меня до сих пор страшит код и всё что с ним связано. Так что я бы предпочёл какой-нибудь плагин или виджет…

  • Ну что вы, Николай? Вы просто совсем не вникли. Когда вы работаете в программе Share Point, код сам генерируется, а если нужно что-то вставить, это место указывается выделением. Такая работа как раз снимает страх перед кодами. Я тоже кодов боюсь, на сайте, а здесь страшного нет ничего.

  • Тогда наверно действительно не вник. Тогда попробую на досуге…

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *