Опубликован: 23.11.2006 | Доступ: свободный | Студентов: 1146 / 240 | Оценка: 4.13 / 3.80 | Длительность: 08:04:00
Специальности: Менеджер
Лекция 8:

Совершенствование сайта с помощью графики

< Лекция 7 || Лекция 8: 12345 || Лекция 9 >

Создание и отображение автоэскизов

Автоэскизы - это небольшие версии изображений, которые представляют гиперссылку на полноразмерные версии. Они часто используются на веб-страницах, содержащих много изображений, которые не обязательно могут понадобиться веб-посетителям (например, элементы каталога). Ввиду небольших размеров автоэскизы загружаются быстрее, что снижает вероятность того, что нетерпеливые посетители не дождутся и перейдут к другому сайту. В этом упражнении вы создадите автоэскиз изображения и проверите ее в программе FrontPage.

pictures.htm

Для этого упражнения используется рабочая папка Office XP SBS\FrontPage\Chap20\Thumbnail.

Выполните следующие шаги.

  1. Откройте файл pictures.htm, находящийся в рабочей папке.
  2. Щелкните на изображении этой страницы, чтобы выделить его и открыть панель инструментов Рисунки (Pictures).
  3. В панели инструментов рисунков щелкните на кнопке Автоэскизы (Auto Thumbnail). Изображение сожмется до размера миниатюры и будет окружено синей рамкой, что указывает на присутствие гиперссылки, см. ниже.
    Гиперссылка связывает эту миниатюру с исходным изображением, которого уже нет на данной странице.
  4. Щелкните на кнопке HTML внизу окна просмотра и редактирования страниц, чтобы вывести на экран HTML-код, указывающий связь миниатюры с исходным изображением.

    HTML-код имеет следующий вид:

    <img border="2" 
    src=="../../../WINDOWS/TEMP/FrontPageTempDir
    PH01245J [1]_small.jpg" width="100" height="151" xthumbnail-orig
    image="PH01245J[1].jpg">
  5. Щелкните на кнопке обычного режима внизу окна просмотра и редактирования страниц.
  6. Перетащите маркеры выделенной миниатюры, чтобы сделать ее больше. При увеличении миниатюра станет размытой и "зернистой" (точечной), поскольку миниатюрная версия содержит меньше деталей, чем исходное изображение.
  7. Увидев результаты увеличения миниатюры, щелкните на кнопке Отмена (Undo), чтобы вернуть миниатюру к прежнему размеру.
  8. Чтобы проверить гиперссылку этой миниатюры, щелкните на кнопке Просмотр (Preview) внизу окна просмотра и редактирования страниц, чтобы перейти в режим просмотра, и затем щелкните на миниатюре, чтобы открыть исходное изображение в панели просмотра.
    Решение проблем. Определенные типы файлов, включая файлы формата Windows Metafile (WMF), не открываются в панели просмотра. Для просмотра этих изображений нажмите и удерживайте клавишу (Ctrl), когда находитесь в панели Обычный (Normal), и щелкните на автоэскизе, чтобы открыть исходное изображение в отдельном окне.
  9. Чтобы увидеть действие гиперссылки автоэскиза для веб-посетителей, щелкните в стандартной панели инструментов на кнопке Просмотр в обозревателе (Preview in Browser). Сохраните страницу и встроенные изображения, если появится соответствующий запрос. Ваша веб-страница откроется в вашем браузере с представленными на экране миниатюрой и гиперссылкой.
  10. Щелкните на миниатюре, чтобы вывести на экран полноразмерное изображение, и затем щелкните на кнопке браузера Назад (Back), чтобы вернуться к миниатюре.
  11. Закройте браузер, чтобы вернуться в программу FrontPage.
  12. Закройте данную страницу без сохранения изменений.
< Лекция 7 || Лекция 8: 12345 || Лекция 9 >
Сергей Асямов
Сергей Асямов
Россия
Андрей Шах
Андрей Шах
Россия, Самара