И снова представляю вашему вниманию некоторые интересные и полезные приемы, которыми может пополнить свою копилочку начинающий веб-дизайнер.
Генерация запроса
Когда необходимо работать с большими массивами информации (текст, графика, таблицы, аудио и т.д.), ручной контроль за редактированием данных отнимает большое количество времени. Представьте, что на вашем сайте размещена галерея автомобилей, содержащая свыше 50-ти фотографий. Более того: вы не собираетесь останавливаться на достигнутом и планируете как минимум каждую неделю дополнять галерею новыми десятью изображениями. Что подразумевает открытие нужных страниц в текстовом редакторе и ручное прописывание тегов для новых фотографий, потом открытие страницы разделов/подразделов и обновление данных там, наконец, редактирование стартовой или новостной страницы. Все эти действия требуют времени и завидного терпения. Облегчить обновление данных призваны так называемые «программные движки», позволяющие редактировать максимум информации за счет минимальных усилий. Однако, в рамках одного выпуска (впрочем, как и всего цикла статей) рассказать о движках не представляется возможным: во-первых, потребуется время для разъяснения основ работы движков, описания их базовых функциональных возможностей и характеристики некоторых конкретных программных пакетов, а значит — большая журнальная площадь), во-вторых, рассказ о движках будет не совсем уместен в рамках цикла статей для начинающих веб-дизайнерах, большинство из которых — не программисты и даже не обладающие программистским мышлением. Однако, упоминание о простом редактировании информации было неслучайным: сегодня я расскажу, как можно реализовать автоматическую генерацию запроса данных с помощью клиентского языка JavaScript.
Итак, у нас имеется галерея с N-ным количеством изображений. Нам нужно сделать так, чтобы не приходилось ничего редактировать в HTML-коде нескольких веб-страниц. Единственное, что надо будет делать при появлении новых фотогорафий, — загрузить их в ту же директорию, где располагаются «старые» изображения.
Начало скрипта будет таким:
<script language=»JavaScript»>
max_num=100;
ex_url=location.search.substring(1);
if (ex_url.length==0) {
number=1;
}
else {
number=parseInt(ex_url,10);
}
prev=number-1;
next=number+1;
if (number<2) {
}
Эта часть определяет максимальное число изображений (в данном случае — 100), задает параметры для генерирования ссылки для каждой предыдущей и последующей фотографии. Этот фрагмент выводит непосредственно саму ссылку, которая была сгенерирована с помощью предыдущего блока кода:
else {
document.write(«<a href=cars_gallery.html?»+prev+»>Предыдущее изображение</a>»);
}
if (number==max_num) {
}
else {
document.write(«<a href=cars_gallery.html?»+next+»>Следующее изображение</a>»);
}
Последний блок сценария загружает выбранное изображение:
document.write(«<p align=center><iframe src=http://www.myserver.ru/cars/»+number+».jpg width=400 height=230></p></iframe>»);
</script>
В данном случае все фотографии будут отображаться во встроенном («плавающем») фрейме (параметры ширины и высоты, указанные в последнем фрагменте кода, относятся не к графическому изображению, а самому фрейму). В итоге, ссылки запроса будут иметь примерно такой вид:
http://www.myserver.ru/cars/cars_gallery.html?25
