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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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