Поточний час:
Сьогодні 18 червня, понеділок 2018 рік
Zura-Blog 3 роки 5 місяців 30 днів

Ваш ip адрес:54.198.86.28

Доброго дня!
Ви обновили сторінку в 14 : 30
Статистика

Кількість публікацій на блозі: 375
Кількість коментарів на блозі: 102
Кількість категорій на блозі: 27
Кількість міток на блозі: 3

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

Post_104Привет всем посетителям Zura-Blog, после небольшого празднования в связи с получением ТИЦ-10 от Yandex, приступаю к очередной публикации.

В которой продолжаю создавать, или можно сказать совершенствовать сайт – визитку, сайт созданный на основе шаблона “Астрал”, с помощью программы Adobe Dreamweaver .

Речь шла уже в самом конце предыдущей публикации, которая имеет отношение к созданию сайта с помощью програмы Adobe Dreamweaver, я рассказывал о том, что я намерен дополнить шаблон “Астрал” скрытым аудиоелементом, чтобы после того, когда страница в браузере откроется, началась проигрываться аудио мелодия.

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

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

В таком случае, если ссылка присутствует, то ее следует удалить в “Свойствах”, щелкаем в верхней панели на раздел “Подробно”, а в низу ищем “Удаление свойств и личной информаций”, и в пункте “Источник” ставим галочку возле текста “URL адрес автора”, и естественно далее ” Ок ». 

svst1

“Удаление свойств и личной информаций”

Не часто бывает такое, чтобы присутствовал чей то URL, но проверка лишней не будет, ну а далее выбираем место на странице сайта, куда бы вставить аудиофайл, и конечно еще будет нужен код.

Где взять код, можно в поисковиках ввести вопрос, а можно на Zura-Blog перейти в публикации “Иллюстрации в веб-сайте добавляем видео и аудио” , там присутствует код для вставки аудиоелементов, или чучуть  ниже на етой странице, тоже присутствует код для  аудиоелементов, если дочитаете статью полностью,  то в конце статьи присутствует ссылки на еще две статьи, тема котрых тоже о создании сайта в програме Adobe Dreamweaver.

 

svst2

 “URL адреса автора ”  і далі “Ок”

Копируем код, открываем index.html и вставляем в тело страницы, это теги body. Вставлять любой код жалательно осторожно, чтобы случайно не вставить этот код, в код какого-то другого скрипта, потому что в такую ​​случае скрипт работать не будет (шутка конечно,но не помешает, хотя и такое возможно).

 

Пример кода

<audio controls> <source src=”audio/07. quardo rossi – maria (original mix).ogg” type=”audio/ogg; codecs=vorbis”> <source src=”audio/07. quardo rossi – maria (original mix).mp3″ type=”audio/mpeg”> </audio>

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

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


user_97

Пример 1 когда страница открывается и начинается играть мелодия

Пример 2 когда страница открывается и начинается играть мелодия<


Для етого нужно в коде сделать следующие изменения, или скажем (настройки), в начале кода, где код аудиоелемента начинается с тега “audio”, поменять в нем значение “controls” на значение “autoplay “, в результате чего когда страница откроется начнется проигрыватся мелодия. 

Пример здесь:

 

<audio controls> меняем на <audio autoplay>

далее ниже в коде  прописываем названия  аудиомелодии,

<source src=”audio/07. quardo rossi – maria (original mix).mp3” type=”audio/mpeg” > 

красным выделено название аудиоролика, здесь нужно поменять на название вашего аудио, делать желательно аккуратно, чтобы не удалить нужную частицу кода, ну и понятно что для аудиофайла создать папку с названием “audio” (в коде названия папки “audio” вы синим цветом).

Создаем папку “audio” в корневой папке сайта, в етой папке должны находится аудиофайлы, все эти операции тоже написаны в публикации “Иллюстрации в веб сайте, добавляем аудио и видео”.

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

Если мелодия начнет проигрываться на странице, а присутствии плеэра не обнаружено, тогда все работает.

Если ролик не проигрывается, тогда вся причина может быть в браузерах, бывает что браузер не поддерживает  кодек. В данном аудиоелементе, в коде присутствуют два “src».

За “source src =” задается путь к аудиофайлам, файл в этом коде проигрывается как за счет кодека “ogg”, так и за счет кодека “mp3”, это сделано для того, чтобы мелодия проигрывалась во всех браузерах.

Поэтому если ваш файл не проигрывается в одном из браузеров, возьмите аудиофайл и перекодируйте его в другой кодек. Затем вставте оба файла в папку “audio”. Для того чтобы перекодировать аудиофайл нужна спецальная програма, которая перекодирует кодеки. После всего нужно просто добавить файл в папку, а в самом коде аудиоелемента дописать еще один “src».

 

Копируем код нижче, далее нужно “попарится” с перекодировкой. Поле “ваша папка” и “ваш файл” меняем на английское значение, “src” укажет путь к файлу, поля .ogg” type=”audio/ogg; codecs=vorbis”, і .mp3″ type=”audio/mpeg” не трогаем, в папку для мультимедиа сохраняем перекодорованйй файл.
 

<audio controls>
<source src="ваша папка/ваш файл.ogg" type="audio/ogg; codecs=vorbis">
<source src="ваша папака/ваш файл.mp3" type="audio/mpeg">
</audio>

Далее на очереди фон сайта.

Папка с файлом который отображает фон сайта, находится в папке css. Путь к файлу следующий, открываем папку “css”, далее в ней ищем папку “images”, открываем папку “images”, а в папке “images”  два графических файла. “Bg” и “overlay” если они нас чем то не устраивают, тогда можем поменять их.

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

Название файла, и расширение файла который вы выбрали для замены фона должна соответствовать, (быть такими же) как имена файла и расширения, которые присутствуют в папке “images”.

Вообще – то  вряд ли ваш файл, будет иметь такое же название как “bg” или “overlay”, поэтому названия ваших файлов нужно просто поменять, или в кодах указать тогда уже названия ваших файлов.

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

На этом, заканчиваю цикл публикаций посвященных созданного сайта-визитки, напомню что на Zura — Blog, присуствуют два варианта как сделать сайт — визитку, один этот, имеется ввиду сделать сайт — визитку с програмой Adobe Dreamweaver, используя при етом шаблон.

Шаблон найти не проблема, в сети достаточно сайтов на которых найдутся как бесплатные так и понятно что платные шаблоны.

Ну и другой вариант ето програма  “Incomedia WebSite X5”, и естественно что сайт — визитку можна создать используя движок csm WordPress.

Который из этих вариантов выбрать, в принцыпе скорее от самого шаблона зависит, среди всех подходящих которые имеются в наличие у меня, именно “Astral” больше всего устраивает.

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

Кстати, еще раз что касается кодеков, на одном из тестовых сайтов, созданном программой Incomedia WebSite x5 не воспроизводился  кодек в браузере “Орега”, печально когда не известно почему, и очень хорошо когда знаешь причину, и способ как все исправить, если у вас мультимедиа файл не проигрываться, то возможно причину вы найдете благодаря етой статьи.

До зустрічі.


user_97

Публікації присвячені створенню сайту-візитки в програмі Adobe Dreamweaver.

 

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

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