Уроки HTML и CSS
Скачать материалы к учебному курсу:
Скачать Notepad++ Portable
Скачать папку CD для изучения курса «Уроки HTML и CSS» (136 Мб)
Урок 9. Фотогалерея для сайта Lightbox 2.04
Ярким и привлекательным элементом является фотогалерея для сайта, которая может содержать миниатюры фотографий, возможности прокрутки, различные эффекты, наложенные на изображения. Как подключить фотогалерею для сайта мы изучим в данном уроке.
Фотогалереи и слайдеры пишутся с использованием языков программирования, особенно популярны скрипты, написанные на языке JavaScript. Мы с вами изучим, как вставлять в html-страницы готовые скрипты, написанные профессиональными программистами.
Способы подключения JavaScript (источник http://javascript.ru/tutorial/foundation/start)
- Подключение в любом месте
- Вынос скриптов в заголовок HEAD
- Внешние скрипты
1. Подключение в любом месте
Когда браузер читает HTML-страничку, и видит <script> – он первым делом читает и выполняет код, а только потом продолжает читать страницу дальше.
Так, в следующем примере будет показано начало страницы, затем три раза выполнится функция alert, которая выводит окошко с информацией, а только потом появится остальная часть страницы.
2. Вынос скриптов в заголовок HEAD
Обычно javascript стараются отделить от собственно документа.
Для этого его помещают внутрь тега HEAD, а в теле страницы по возможности оставляется чистая верстка.
В следующем примере javascript-код только описывает функцию count_rabbits, а ее вызов осуществляется по нажатию на кнопку input.
Для указания запускаемой по клику функции в input был использован атрибут onclick. Это лишь вершина мощного айсберга javascript-событий.
3. Внешние скрипты
Обычно javascript-код вообще не пишут в HTML, а подключают отдельный файл со скриптом, вот так:
<script src="/my/script.js"></script>
При этом файл /my/script.js содержит javascript-код, который иначе мог бы находиться внутри тега <script>.
Это очень удобно, потому что один и тот же файл со скриптами можно подключать на разных страницах. При правильных настройках сервера браузер закеширует его и не будет скачивать каждый раз заново.
Чтобы подключить несколько скриптов - используйте несколько таких тегов:
|
|
|
|
|
При указании атрибута src содержимое тега игнорируется.
То есть одновременно подключить внешний файл и написать что-то внутри тега нельзя. Придется делать два разных тега <script>: первый с src, второй – с командами, которые будут выполнены после выполнения внешнего файла.
В этом уроке мы изучим, как вставлять в html-страницы готовый скрипт фотогалереи, написанный профессиональными программистами.
Будем создавать фотогалерею на основе готового скрипта Lightbox2.04.
1. Просмотрите фотогалерею, созданную на базе этого скрипта. Откроется в новой вкладке/окне.
2. Скачайте здесь дистрибутив фотогалереи LIGHTBOX 2.04.
3. Создайте папку, в которой будете создавать фотогалерею.
4. Скопируйте в нее скачанный дистрибутив фотогалереи lightbox2.04.zip и разархивируйте его.
5. Запустите файл index.html, полученный из архива. Вы увидите следующую страницу (рис. 1).
Рисунок 1
6. Щелкните по изображению с зелеными листьями. Получите увеличенное изображение этой миниатюры (рис. 2).
Рисунок 2
7. Закройте это изображение, нажав на крестик. Мы опять вернулись на исходную страницу. Здесь на английском языке написана инструкция по использованию фотогалереи. Мы могли бы заняться переводом этого текста, но есть способ проще.
Если порассуждать, мы уже имеем готовую фотогалерею. Нам остается только добавить свои фотографии, убрать из этой страницы все лишнее содержание и добавить свое.
8. Откроем код страницы в блокноте и проанализируем его (рис. 3).
Строка 6: в теге <title> Вы можете написать свой заголовок, который будет иметь Ваша web-страница;
Строка 8: тег <link> связывает эту web-страницу с таблицей стилей, которая получена из архива и находится в папке css. Вы уже умеете работать с таблицами стилей, поэтому, открыв файл lightbox.css, Вы можете внести в него изменения, и тем самым задать другое оформление самой фотогалерее. Возможно, для этого Вам придется дополнительно почитать справочники по таблицам стилей;
Строки 10-12: этот блок подключает готовый скрипт фотогалереи, которая находится в папке js (мы ее получили из архива). Здесь мы менять ничего не будем, как и в самих скриптах;
Строка 15: это внедренная таблица стилей, которая отвечает за оформление самой web-страницы. Здесь Вы точно сумеете задать свое новое оформление, т.к. изучили таблицы стилей;
Строка 22: здесь Вы и без моих подсказок догадались, что это заголовок самой web-страницы и текст под ним. Оба являются ссылками на интернет-ресурс разработчика фотогалереи. Этот текст можно заменить на свое содержание;
Строка 27: эта строка включает в web-страницу миниатюру с зелеными листочками. Давайте проанализируем эту строку подробней. Читайте дальше текст после рисунка.
Рисунок 3
9. Рассмотрим строку <a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>:
<a href="images/image-1.jpg" rel="lightbox"> - это гиперссылка, при нажатии на которую загрузится изображение image-1.jpg из папки images. Это большое изображение (рис. 2), которое появляется при щелчке по миниатюре на web-странице;
<img src="images/thumb-1.jpg" width="100" height="40" alt="" /> - это миниатюра , которая имеет название thumb-1.jpg, ширину 100px (width="100"), высоту 40px (height="40"), и расположена в папке images.
Ну вот, в общем, и все.
Сейчас Вам необходимо создать свои изображения в крупном размере, потом для каждого изготовить миниатюру в Photoshop. Все это сложить в одну папку и добавить на web-страницу. Структура гиперссылки на каждое изображение будет аналогична строке 27 на рисунке 3. Только имена Ваших миниатюр, больших картинок и папки могут быть другими.
Контрольное задание
Создать web-страницу, включающую:
- Заголовок web-страницы. Тему надо продумать предварительно, т.к. этой теме будет посвящена фотогалерея.
- Web-страница должна иметь фон, отличный от белого.
- Фотогалерею (не менее 10 изображений).
- Дополнительный пояснительный текст по данной теме (2-3 абзаца).