Опубликован: 01.08.2012 | Уровень: для всех | Доступ: платный | ВУЗ: Томский политехнический университет
Практическая работа 5:

Мультимедиа

< Практическая работа 4 || Практическая работа 5: 123 || Лекция 18 >

Шаг 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.

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

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

Результат шагов 2 - 3 можно увидеть на рисунках рис. 21.3 - рис. 21.4.

Результат выполнения шагов 2 и 3

увеличить изображение
Рис. 21.3. Результат выполнения шагов 2 и 3
Результат шагов 2 и 3 с подгруженным содержимым

увеличить изображение
Рис. 21.4. Результат шагов 2 и 3 с подгруженным содержимым
< Практическая работа 4 || Практическая работа 5: 123 || Лекция 18 >
Галина Башкирова
Галина Башкирова

Здравствуйте, недавно закончила курс по проф веб программиованию, мне прислали методические указания с примерами тем, однако темы там для специальности 

Системный администратор информационно-коммуникационных» систем.
Мне нужно самой найти тему? или делать по высланным темам

 

Константин Моренко
Константин Моренко
Алексей Бегунов
Алексей Бегунов
Беларусь
Виктор Лабутин
Виктор Лабутин
Россия