|
| Основы Web-технологий | Введение в Web-дизайн | Первая Web-страница | Графика web-дизайне | Специальные возможности HTML | Каскадные таблицы стилей | Полезные приемы в Web-дизайне | Обслуживание Web-сайта | Программирование на JavaScript и VBScript | Раскрутка сайта | Деньги и интернет | Партнерские программы | Web-софт | Поисковая оптимизация | Хостинг |
Ускоряем загрузку графики Многие начинающие web-дизайнеры, разрабатывая
свой первый самостоятельный проект, сталкиваются иногда с весьма трудной задачей, связанной с отображением графики в документах HTML. Проблема заключается в том, что согласно изученным вами ранее ;постулатам
web-дизайна каждый html-документдолжен быть максимально компактным, тогда как большое количество иллюстраций, появляющихся, например, при создании виртуального фотоальбома, значительно перегружает файл,
пропорционально увеличивая время его считывания с сервера. Решить эту проблему, оптимизировав объем итогового html-документа, можно двумя методами. Первый метод заключается в следующем. Создавая
фотоальбом, подготовьте две копии каждого изображения: одну — нормального размера и качества, такую, которую вы и хотели бы поместить на свою web-страничку, вторую — в уменьшенном масштабе и с низким разрешением.
Разместите на web-странице уменьшенные копии картинок, назначив для каждой из них свойства гиперссылки с атрибутом TARGET="_blank", которая перенаправит пользователя к большому графическому файлу.
В документ вставьте пояснение для посетителей о том, что щелчок кнопкой мыши на любом рисунке приведет к его загрузке в отдельном окне броузера в увеличенном масштабе. Тогда пользователю, не заинтересованному
в разглядывании ваших фотографий, не придется подолгу дожидаться окончания считывания странички с удаленного узла. Если же он все-таки захочет полюбоваться на некоторые из опубликованных вами иллюстраций,
ему не составит труда выбрать наиболее интересные из них. Такой подход к представлению графики в Интернете носит название ;предварительного просмотра, или, по-английски, ;preview. Если мы назовем
файл, содержащий уменьшенную копию картинки, picture1.jpg, а файл нормального размера — picture2.jpg, то html-код гиперссылки, описанной выше, будет выглядеть следующим образом: <А HREF="picture2.jpg"
TARGET="_blank"><IMG SRC="../picture1.JPG" WIDTH="100" HEIGHT="98" АLT="Уменьшенная картинка" BORDER="0"></A> Второй метод
ускорения загрузки графических файлов с сервера несколько отличается от предыдущего. Если, предположим, ваш сайт содержит фото галерею, доступ к которой открывается с пятой — шестой странички по счету,
все содержащиеся в ней графические файлы можно загрузить в клиентский компьютер заранее, на предыдущих страницах, выводя их на экран размером 1x1пиксел. Код, осуществляющий подобный вывод графики, выглядит
так: <IMGSRC="URL графического файла" WIDTH="1" HEIGHT="1">. Изображение при этом станет невидимым для посетителя сайта, но сохранится в кэше его машины, а при последующем
открытии данной картинки она будет загружаться уже с жесткого диска локального компьютера. Таким образом, у пользователя создается впечатление, что изображение выводится на экран очень быстро. Однако за
все надо платить: время загрузки предыдущих страниц при этом пропорционально увеличивается. Дабы посетитель вашего сайта не скучал, в процессе выгрузки графики его можно развлечь чем-нибудь другим: например,
предложить почитать новости или подборку свежих анекдотов. Выводим иллюстрации в отдельном окне Иногда необходимо организовать вывод графических
изображений в отдельном окне, приблизительно так, как это описано в предыдущем разделе, но вам хотелось бы, чтобы новое окно броузера не содержало кнопок навигации, адресной строки, полос прокрутки и чтобы
его заданный первоначально физический размер был фиксированным. Как этого добиться? Достаточно просто: следует использовать несложный сценарий JavaScript, запрещающий изменение пользователем размеров окна
и удаляющий из него все ненужные вам компоненты. Скрипт, написанный на языке Java, интегрируется в web-страницу при помощи тега <SCRIPT> с атрибутом LANGUAGE, который помещается в начало кода
html-документа, либо между тегами <HEAD> и </HEAD>, или же сразу после директивы <BODY>. Сам текст сценария не отображается в окне броузера при загрузке документа, он исполняется .подобно
подпрограмме в случае определенного действия пользователя, например, открытия или закрытия окна. Встроенные в web-страницу сценарии JavaScript интерпретируются броузером вместе с кодом разметки гипертекста
и вызываются на исполнение из тела html-документа специальными директивами. Описание правил записи тега <SCRIPT> включено в спецификацию языка HTML 4.0 и потому здесь не приводится. Поскольку подробный
обзор синтаксиса языка JavaScript выходит за рамки этой книги, ниже мы рассмотрим лишь отдельные аспекты его применения. Итак, для того чтобы организовать вывод графического изображения в отдельном
окне фиксированного размера без кнопок навигации и полос прокрутки, в тело html-документа необходимо поместить следующий код: <BODY> <SCRIPT LANGUAGE="JavaScript">
function picture( ){ window.open("URL. определяющий адрес расположения картинки", "newwindow", config=''width-ширина картинки, height-высота картинки, toolbar=0, location=0,
directories=0, status=1, menubar=0, scrollbars=0, resizable=0"); } </SCRIPT> Тело html-документа </BODY> Записываемый в коде сценария JavaScript
адрес картинки лучше всего приводить в абсолютном виде, с указанием протокола передачи данных и имени целевого графического файла, например, http://www.myserver.ru/images/picture.jpg.
Атрибут config определяет конфигурацию создаваемого окна. Значения параметров width и height, устанавливающих ширину и высоту картинки в пикселах, следует увеличить на 10-15 точек, поскольку в новом окне
изображение будет иметь отступы сверху и снизу, а значит, определенная его часть может оказаться скрытой за границей окна. Остальные параметры атрибута config принимают одно из двух возможных значений:
0 — определяемый параметром элемент не отображается на экране и 1 — определяемый параметром объект отображается вместе с другим содержимым. Так, параметр toolbar выводит на экран (или не выводит) панель
инструментов с функциональными кнопками,параметр location — адресную строку, directories — список директорий, status —строку состояния в нижней части окна, menubar — системную панель, содержащую меню Файл,
Правка, Вид и т. д., параметр scrollbars — полосы прокрутки, и, наконец, параметр resizable разрешает или запрещает произвольное изменение размеров окна пользователем. Определитель picture( ), записанный
правее директивы function, является уникальным именем данной функции JavaScript, которое будет использовано в дальнейшем для вызова этой функции на исполнение. Если вы планируете выводить на экран подобным
образом несколько разных графических файлов, для каждого из них придется написать отдельную функцию, отличающуюся от предложенной выше лишь именем, адресом расположения целевого файла и значениями размеров
картинки. Для того чтобы активизировать созданный сценарий JavaScript, в теле html-документа необходимо разместить соответствующую гиперссылку, включающую ряд необходимых параметров. Для подготовки
такой ссылки можно использовать графическую миниатюру рисунка, отображаемого броузером в отдельном динамически появляющемся окне. Код гиперссылки в этом случае будет выглядеть следующим образом:
<A HREF="javascript:picture()"><IMG SRC="URL миниатюры картинки" WDTH="ширина миниатюры" НЕIGHT="высота миниатюры" BORDER="0"АLT="Альтернативный
текст"></А> где picture() — уникальное имя функции, вызываемой при активизации гиперссылки. 1>>>2>>>3>>>4>>>5 Обсудить в форуме...>>>>
| |
