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

Создание стилей содержимого

Для управления содержимым создадим 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}

Создание основной страницы

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

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

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

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

#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}

Реализация подгрузки содержимого

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

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

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

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

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

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

function loadContent(path)
{
  document.getElementById('target').src = path;
}

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

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

1. Создать несколько страниц - источников.
2. Оформить панель навигации.
3. Создать стили для оформления содержимого контейнеров.