Полезное:
Как сделать разговор полезным и приятным
Как сделать объемную звезду своими руками
Как сделать то, что делать не хочется?
Как сделать погремушку
Как сделать так чтобы женщины сами знакомились с вами
Как сделать идею коммерческой
Как сделать хорошую растяжку ног?
Как сделать наш разум здоровым?
Как сделать, чтобы люди обманывали меньше
Вопрос 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: 636; Нарушение авторских прав