О чем эта статья?
Рассмотрим пример преобразования обычного правильно построенного XHTML документа в презентацию, состоящую из отдельных слайдов.
Браузеры с отключенным JavaScript просто покажут всю страницу полностью. Зато браузеры, с включенным JavaScript и поддерживающие DOM представят этот документ в виде отдельных слайдов с:
- ссылками вперед и назад
- общим количеством кадров и номером отображаемого слайда
- ссылками-оглавлением на все кадры презентации
- анимацией при смене слайдов
Что будем делать?
- Разобьем документ на отдельные слайды
- Покажем общее количество слайдов и номер слайда, отображаемого в настоящий момент
- Соорудим навигацию по слайдам типа «вперед-назад»
- Соберем заголовки слайдов и сделаем из них оглавление
Как построим XHTML-документ?
Для реализации нашего слайд-шоу разобьем документ на логически законченные блоки и заключим каждый в <div class="slide">...</div>
.
Каждый слайд будем начинать с заголовка, заключенного в теги <h2>...</h2>
. Из них соберем оглавление.
Остальной XHTML-код в пределах слайда может быть произвольным, включая изображения, таблицы и т.п.
Что должно получиться?
XHTML-код документа должен получиться таким:
...
<body>
<div class="slide">
<h2>Заголовок слайда 1</h2>
... произвольный XHTML-код 1-го слайда
</div>
...
<div class="slide">
<h2>Заголовок слайда n</h2>
... произвольный XHTML-код n-го слайда
</div>
</body>
...
Для чего такая структура?
Зная, что каждый слайд заключен в <div class="slide">...</div>
, а заголовки заключены в теги <h2>...</h2>
, мы сможем:
- легко подсчитать их количество и сделать панель навигации «следующий – предыдущий»;
- определить заголовки каждого блока и сделать из них оглавление.
Можно ли добавить таблицу?
|
IE6 |
Opera8 |
FF1.5 |
HTML |
+ |
+ |
+ |
CSS |
+ |
+ |
+ |
DOM |
+ |
+ |
+ |
<h2>Конечно!</h2>
<h3>И не только таблицу!</h3>
<p>Можно использовать практически любые теги для разметки внутри слайдов. Важно лишь соблюдать правила разметки и корректно закрывать теги.</p>
Что сделаем с помощью JavaScript?
- Проверим, поддерживаются ли методы DOM браузером.
- Найдем в документе все
<div class="slide">...</div>
и подсчитаем их количество.
- Переберем слайды:
- выберем в них заголовки
<h2>...</h2>
для генерации оглавления
- создадим ссылки типа «вперед-назад»
- Сделаем панель навигации по слайдам
- Сделаем оглавление слайдов для быстрого перехода к любому из них
Что еще можно сделать?
Можно взять архив с этим примером и исследовать JavaScript, в котором очень подробно описаны все действия по созданию элементов навигации и управлению слайдами.
Можно попытаться оптимизировать код JavaScript или добавить что-то новое.
Можно задать любой вопрос по работе этого примера или оставить комментарий.
Можно написать свой вариант скрипта и продемонстрировать его работу посетителям сайта.