Опубликован: 01.08.2012 | Уровень: для всех | Доступ: платный | ВУЗ: Томский политехнический университет
Практическая работа 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 >
Галина Башкирова
Галина Башкирова

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

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

 

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