В данном разделе мы с вами создадим простую фотогалерею. Этот пример научит вас структурировать информацию сайта и адресовать ресурсы с помощью относительных ссылок.

Для начала спроектируем структуру папок нашего сайта. Для чего необходимо структурировать информацию сайта? Безусловно, все будет работать, даже если все ваши страницы и изображения будут находиться в одной папке. Однако, с увеличением количества странц и изображений (а это неизбежно в крупных проектах), найти требуемый файл становится делом затруднительным. Крупные порталы с серьезными фотогалереями насчитывают тысячи и десятки тысяч файлов. Если все они будут находиться в одном каталоге, то поддержка такого портала оборачивается долговременной головной болью дизайнера.

Итак, структурируем информацию! Пусть наш сайт располагается в папке "site". Здесь расположен главный html-файл сайта "index.html". Помимо "index.html", в этой же папке создадим папки для html-страниц (htmldocs) и изображений (images). Изображения разобъем по категориям. В нашем примере создается автомобильная галерея. В ней будут находиться изображения для "Ferrari" и "Lamborghini". Создаем в папке "images" папку для каждой марки авто: Ferrari и Lamborghini соответственно.

В результате у меня получилась примерно следующая структура каталогов:

Рис. №4.4.1. Структура каталогов сайта

Вы можете видеть, что в каждой тематической папке изображений содержится дочерняя папка "preview". Здесь будут храниться уменьшенные копии изображений галереи. Для чего? Мы разместим их на странице и сделаем гиперссылками на html-документ, демонстрирующий полную версию изображения. Так пользователи не будут вынуждены дожидаться загрузки всех больших изображений. Загрузка уменьшенных копий произойдет значительно быстрее. После этого пользователь сам выберет интересующую его ссылку. Свобода воли, так сказать.

Ну что, приступим? В первую очередь подготовим изображения. Для полных версий я выбрал размеры 640x480, для маленьких - 100x75. Все изображения сохранены в формате JPEG. Для маленьких изображений использовалось меньшее качество. Все эти операции легко выполняются в Adobe Photoshop.

Справились? Замечательно. На данном этапе мы имеем несколько изображений в папках "ferrari" и "lamborghini", а, так же, их уменьшенные копии в соответствующей папке "preview". Теперь главный файл - "index.html". Создайте xhtml-документ и сохраните его под именем "index.html" в корневом каталоге сайта - "site". Его код приводится ниже:

<h1 style="text-align: center;">Автогалерея!</h1>
<div style="text-align: center;">
 <a href="htmldocs/lamborghini.html"><img src="images/lamborghini.gif"
  alt="Раздел &quot;Lamborghini&quot;" border="0" /></a>
 <a href="htmldocs/ferrari.html"><img src="images/ferrari.gif"
  alt="Раздел "Ferrari"" border="0" /></a>
</div>

Изображения-ссылки, расположенные в каталоге "images" указывают на файлы "lamborghini.html" и "ferrari.html", расположенные в каталоге "htmldocs". Обратите внимание на способ адрессации. Каталоги "images" и "htmldocs" являются дочерними по отношению к каталогу текущего документа.

Теперь займемся файлами тематических разделов "lamborghini.html" и "ferrari.html". Они имеют примерно одинаковый код, поэтому приведу только один из них:

<h1 style="text-align: center;">Lamborghini</h1>
<div style="text-align: center;"> 
 <a href="l0001.html"><img src="../images/lamborghini/preview/l0001.jpg"
  alt="Lamborghini" border="0" /></a> 
 ...
 <br />
 <a href="../index.html">Список разделов</a>
</div>

Для того, чтобы адресовать миниатюры изображения, необходимо сначала выйти в родительский каталог, затем перейти по каталогам "images/lamborghini/preview", и уже после этого указать имя файла. То есть адрес будет выглядеть следующим образом:

 src="../images/lamborghini/preview/l0001.jpg"

В нижней части документа добавлена ссылка на "index.html", расположенный в родительском каталоге по отношению к текущему документу.

Каждое изображение в файле тематического раздела является ссылкой на документ html, содержащий полную версию изображения. Код этих файлов достаточно прост и приводить из здесь не имеет смысла. С уроком поставляется полная версия галереи. Разберитесь с ее структурой и принципами адрессации объектов. Я надеюсь, что этот пример и комментарии к нему прольют свет на использование ссылок и изображений в web-страницах.

Успехов!