Пример Dreamweaver MX: навыки применения изображений

Ускорьте загрузку изображений

Если на веб-странице слишком много изображений, это повлияет на скорость просмотра. Dreamweaver может легко настроить предварительно загруженные изображения для ускорения загрузки изображений, позволяя сайту появиться перед пользователями как можно быстрее.

Описание эффекта заключается в том, чтобы сначала создать файл и предварительно загрузить изображение, чтобы изображение заранее загружалось в кеш, чтобы ускорить скорость загрузки изображения. Чтобы получить реальный эффект, просмотрите файл «Пример 36 — Увеличение скорости загрузки изображений» в каталоге «Dreamweaver MX 2004 100 примеров» на компакт-диске, прилагаемом к книге.

Творческие мысли Откройте новую страницу программного обеспечения Dreamweaver MX 2004, затем откройте панель меток и выберите параметр [Предварительная загрузка изображения] в разделе [Поведение], чтобы ускорить загрузку изображения.

Этапы работы

(1) Создайте новый файл, операция показана на рисунке 36-1.



(2) Сохраните страницу и вставьте изображение. Чтобы не запрашивать относительные пути при вставке изображений, сначала сохраните страницу как «36.htm». Затем вставьте изображение для предварительной загрузки, как показано на рисунке 36-2.


Рисунок 36-2 Вставка изображения

(3) Добавить функцию «предварительная загрузка изображения». Используйте панель поведения Dreamweaver, чтобы добавить функцию «предварительная загрузка изображения», как показано на рис. 36-3.

(4) Выберите изображение для предварительной загрузки и выполните действия, показанные на рисунке 36-4.

Совет: Если на сайте есть несколько больших изображений, вы можете щелкнуть значок [+] над [Предварительная загрузка изображения], чтобы добавить несколько изображений предварительной загрузки. Конкретная операция такая же, как показано на рисунке 36-4.

(5) Сохраните файл для завершения операции. Таким образом, можно ускорить скорость загрузки изображений, чтобы пользователи не ждали слишком долго при просмотре веб-страниц, что имеет большое значение для повышения производительности веб-сайта.

Случайные рекламные изображения

Просматривая веб-страницу, зрители могут обнаружить, что динамически обновляемые рекламные изображения на веб-странице более динамичны и привлекательны, чем статические фиксированные изображения. В этом примере предстоит изучить вопрос о том, как создавать случайные рекламные изображения на веб-страницах.

Описание эффекта При просмотре веб-страницы в области баннера веб-страницы появится рекламное изображение, как показано на рисунке 38-1. Впоследствии рекламное изображение обновляется каждые две секунды, и рекламное изображение появляется случайным образом, как показано на рисунке 38-2.

Творческие идеи Используя плагин расширения Macromedia Advance_Random_Images, вы можете легко создавать случайные рекламные изображения на веб-страницах.

Этапы работы

(1) Установите плагин. Используйте команду [Команда] | [Управление расширениями] в строке меню, чтобы открыть диалоговое окно [Диспетчер расширений Macromedia] и установить расширение Advance_Random_Images, как показано на рисунке 38-3.

(2) Вызовите команду. Откройте файл Banner.htm в исходной папке этого примера, поместите курсор в место, куда вы хотите вставить рекламу, и вызовите команду [AdvancedRandomImages], как показано на рисунке 38-4.

(3) Установите изображение. Задайте свойства преобразования изображения в появившемся диалоговом окне [RandomImages], как показано на рисунке 38-5.

(4) Добавьте изображения. Добавьте первое рекламное изображение, как показано на рисунке 38-6.

Совет: изображения, использованные в этом примере, помещаются в папку баннеров в папке материалов этого примера.

(5) Затем используйте тот же метод для добавления других изображений. После завершения добавления нажмите кнопку [ОК], чтобы подтвердить операцию, как показано на рисунке 38-7.

(6) Затем сохраните файл страницы и просмотрите его, и будет создан эффект случайного рекламного изображения. Читатели могут обратиться к файлу эффекта баннерок.htm в папке материалов этого примера, чтобы убедиться, что результат производства правильный. На этом пример завершен.

Технология, описанная в этом примере, обычно используется на различных веб-сайтах. Например, на нескольких крупных отечественных порталах рекламные объявления о трансформации можно увидеть практически на каждой странице. Читатели могут обратиться к этому содержимому, чтобы попрактиковаться.