Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 17330 / 1604 | Оценка: 3.91 / 4.09 | Длительность: 12:32:00
Практическая работа 1:

HTML5. Основы разметки

< Лекция 15 || Практическая работа 1: 1234 || Лекция 16 >
Создание стилей содержимого

Для управления содержимым создадим css - файл:

h1, h2 { text-align:center; }
.text { text-align:justify}

.annotation { font-style:italic;}

table.normal { border: 1px solid black; border-right: none; border-bottom: none}
table.normal tr td { border-bottom: 1px solid black; border-right:1px solid black}
table.normal thead { text-align:center; font-weight:bold}
table.normal caption { text-align:right}

dt.terms { font-style:italic; font-weight:bold}
15.2.
Создание основной страницы

Создадим основную HTML страницу для выполнения задания. Для этого, во - первых, на страницу необходимо добавить четыре контейнера, во - вторых, создать css - файл для управления размещением контейнеров.

С добавлением контейнеров на страницу все просто:

<div id="top">HEADER</div>
<div id="navigation">NAVIGATION</div>
<div id="content">CONTENT</div>
<div id="footer">FOOTER</div>
15.3.

Также не должно быть сложностей и с их позиционированием относительно друг друга:

#top { height: 15%; width:100%; }
#navigation { height: 70%; width:20%; float: left}
#content { height: 70%; width:70%; float:left}
#footer { height: 15%; width:100%; clear: left}
15.4.
Реализация подгрузки содержимого

Осталось немного, а именно: создать полосу навигации и организовать подгрузку содержимого в блок content.

Полоса навигации, к примеру может быть создана следующим образом:

<div id="navigation"><a href="javascript://" onclick="loadContent('lectures/lecture1.html')" > Лекция № 1</a></div>
15.5.

Теперь необходимо поместить элемент iframe в контейнер content:

<div id="content"><iframe id="target" src=""></iframe></div>
15.6.

И, наконец, создать JavaScript - файл, в который мы поместим функцию, обрабатывающую клик по ссылке:

function loadContent(path)
{
  document.getElementById('target').src = path;
}
15.7.
Фрагмент черновой страницы - результата

увеличить изображение
Рис. 15.9. Фрагмент черновой страницы - результата

Нами был рассмотрен общий ход работы для выполнения задания, однако получившийся результат далек от совершенства. Самостоятельно для завершения задания необходимо:

  1. Создать несколько страниц - источников.
  2. Оформить панель навигации.
  3. Создать стили для оформления содержимого контейнеров.
< Лекция 15 || Практическая работа 1: 1234 || Лекция 16 >
Эмиль Галеев
Эмиль Галеев

По каким то причинам не сохраняется текст. И не выдает сообщение об ошибке если текста нет. Проверил все внимательно проблем в написании нет. Вопрос почему он не сохраняет?

Алексей Вычегжанин
Алексей Вычегжанин

http://www.intuit.ru/studies/courses/3734/976/lecture/27486?page=3

Заполнил html, js и css-файлы согласно рекомендациям. После запуска главной страницы в панели разработчика браузера, во вкл. Console, выдает сообщение об ошибке:

"script.js:85 Uncaught TypeError: Cannot read property 'addEventListener' of null"

, ссылаясь на строку js-файла (функция load()):

" audio.addEventListener('ended', function () "

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

Функция добавления записей в плейлист не работает. Соответственно сам плей-лист и полоса прокрутки не открываются.

Елена Винокурова
Елена Винокурова
Россия, г. Новоуральск
Максим Вязовой
Максим Вязовой
Россия, Ярославская область