Главная Случайная страница


Полезное:

Как сделать разговор полезным и приятным Как сделать объемную звезду своими руками Как сделать то, что делать не хочется? Как сделать погремушку Как сделать так чтобы женщины сами знакомились с вами Как сделать идею коммерческой Как сделать хорошую растяжку ног? Как сделать наш разум здоровым? Как сделать, чтобы люди обманывали меньше Вопрос 4. Как сделать так, чтобы вас уважали и ценили? Как сделать лучше себе и другим людям Как сделать свидание интересным?


Категории:

АрхитектураАстрономияБиологияГеографияГеологияИнформатикаИскусствоИсторияКулинарияКультураМаркетингМатематикаМедицинаМенеджментОхрана трудаПравоПроизводствоПсихологияРелигияСоциологияСпортТехникаФизикаФилософияХимияЭкологияЭкономикаЭлектроника






Пример 21.1. (html, txt)





Обратите внимание, что сразу же заданы все атрибуты для дальнейшей стилизации, а также вызова JavaScript, а именно:

  • addtoPL() –функция для добавления указанного трека в пользовательскую очередь воспроизведения;
  • testListen() – функция для предварительного прослушивания трека (в течении 10 секунд, например).

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

Рис. 21.2. Результат выполнения шага 1

Шаг 2

Создадим HTML - документ для нашей главной страницы:

<body onload="load();"> <div id="header"> <h1>Audio example</h1> </div> <div id="albums"> <form id="albumform"> <fieldset> <legend class="singer">Ray Charles</legend> <ul class="albumname"> <li><a class="albumlink" onclick="loadAlbum('RC_hitstheroad.html');">The Genius Hits The Road</a></li> <li><a class="albumlink" onclick="loadAlbum('RC_smile.html';)>Have A Smile With Me</a></li> </ul> </fieldset> </form> </div> <div id="tracks"> <iframe id="target" src=""></iframe> </div>

Пример 21.2. (html, txt)

Код приведенный в листинге выше довольно прост, подобное мы уже не раз рассматривали в рамках курса. Поясним только встречающие имена JavaScript - функций:

  • load () – загрузка списка воспроизведения;
  • loadAlbum() – загрузка внешнего HTML - документа (альбома).

Шаг 3

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

#albums{ float:left;} #tracks{ float:left;} #audioPanel{ clear:left;} #albumform{ width:350px;} audio{ width:100%} a.albumlink:hover{ cursor:pointer; font-style:italic; font-weight:bolder;} #playlistpanel{ border:3px double black;} #target{ width:800px; height:600px; border:0px;} a.listenlink{ margin:10px;} a.addtoPLlink:hover, a.listenlink:hover{ cursor:pointer; font-style:italic; font-weight:bolder;} #albumtracks{ width:500px;} li.PL:hover{background-color:Blue;cursor:pointer;color:White;} body { background-color:#F7F7F7;} h1{ text-align:center;}

Date: 2015-07-22; view: 577; Нарушение авторских прав; Помощь в написании работы --> СЮДА...



mydocx.ru - 2015-2024 year. (0.007 sec.) Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав - Пожаловаться на публикацию