Главная | Обучение и полезности | Создание музыкальной открытки — это просто

Создание музыкальной открытки — это просто

obraz

На подходе Новый год и многие хотели бы поздравить своих друзей и родных музыкальной открыткой. Для друзей и партнеров компании ИнетПродюс я предлагаю небольшой урок по созданию такой открытки, без особого знания html. Вам только надо подобрать и заменить  картинки в архиве на ваши картинки, придерживаясь оригинальных размеров.

Принимайте участие в конкурсе «Новогодняя открытка», получайте призы

И так, начнём!

Вы можете пользоваться простым текстовым редактором Windows, но я советую скачать и установить Notepad++ пройдя по ссылке https://notepad-plus-plus.org/.  Данный текстовый редактор более удобен для начинающих,  при редактирования кода, так как имеет цветную подсветку.

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

Откройте установленный редактор и в меню нажмите Файл ->Создать. Первым делом прописываем код создаваемой страницы и даем нужное нам название, как показано на скриншоте

kod1

Затем прописываем стиль фона будущей картинки, необходимо будет в шаблоне просто поменять название указанного фона,  на название вашего фона.

kod2

Заходим в раздел меню Файл -> Сохранить как. Выбираем Тип файла html. Даем Имя файлу index.html и сохраняем файл, получая его со значком того браузера, который стоит на вашем компьютере по умолчанию.

kod2

Если открыть этот файл, то визуально мы увидим страницу с установленным общим фоном.

01

Далее открываем этот файл снова в редакторе и прописываем код таблицы между тегами <body></body> , где width – ширина таблицы, а height – высота. Эта таблица и будет содержать все данные открытки.

kod3

Визуально таблица смотрится примерно так, как показано на скриншоте

02

Возвращаемся в редактор и прописываем общий фон таблицы или по-другому, фон открытки

kod4

В визуальном просмотре это выглядит так, как показано на скриншоте

03

Вернувшись в текстовый редактор, в ячейке таблицы, которая у нас всего одна, мы размещаем «Дивный блок» <div></div> указывая, что его содержание располагается по центру. Для ячейки устанавливается правило выравнивания содержимого понизу  <td valign=»bottom»>.

kod5

Далее, между каждым парным тегом <p></p> мы прописываем название нужной картинки.

kod6

Визуально это выглядит так:

04

Возвращаемся в редактор и прописываем следующую картинку

kod7

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

05

Возвращаемся в редактор и прописываем третью картинку

kod8

В визуальном просмотре мы видим практически готовую открытку

06

Я нашел, как мне кажется, оптимальный вариант онлайн плеера для озвучивания открытки. Ссылку на него вы найдете в папке servisy.

07

Если вы знаете другой способ, как по-другому поставить музыку на плеер, то используйте его.  А в данном уроке переходим по ссылке на страницу плеера

08

В поисковой строке плеера пишем название запроса и нажимаем найти. Нам будет предложен плейлист с похожими композициями. Выбираем музыку, которая нам подходит и с правой стороны от названия, нажав на ярлык Шестерёнки, в выпадающем меню выбираем строку Код для вставки.

09

Перед нами появляется информационное окно с Кодом для вставки. В нашем примере выбран Уменьшенный вид и цвет Стандартный (серый). Если вы будете размещать код на другом каком то ресурсе, то можете отметить чек-бокс «Автостарт воспроизведения» и «Не показывать рекламу». Необходимо так же подобрать Ширину и Высоту плеера в местах отмеченных красной обводкой . В данном уроке они составляют width=»430″ height=»30″

010

Скопировав данный код вставляем его в текстовом редакторе под адресами картинок

kod9

При визуальном просмотре открытка с музыкальным плеером выглядит вот так:

obraz

Теперь включив плеер, открытку можно записать, например в  Camtasia Studio и поместить записанное видео на канале YouTube. После чего принять участие на Портале конкурсов в конкурсе НОВОГОДНЯЯ ОТКРЫТКА

http://entertainment.inetproduce.ru/event/novogodnyaya-otkrytka

Для увеличения расстояния между картинками можно применять тег <br>.  Так можно создать открытку любой тематики. При минимальном знании написания HTML.

Если вы такими знаниями не обладаете, то предлагаю вам подписаться на моём блоге «Мой интернет online» на рассылку:  HTML легко «Пошаговые уроки для новичков».

Вот в принципе и все. Архив с файлами открытки можно СКАЧАТЬ ЗДЕСЬ

Удачи и хорошего настроения Вам и вашим близким!

Ответить

Ваш e-mail не будет публиковаться Required fields are marked *

*