Далее: Задание 6. Оптимизация гипермедийного Вверх: Создание статического Web-сайта на Назад: Задание 4. Создание сайта.

Задание 5. Оформление сайта с помощью графики (фотографий, картинок).

1. Откройте папку материалов для сайта с графическими файлами *.jpg и *.gif и др. (только не*.bmp!) и проконтролируйте их байтовый и геометрический размер. Байтовый размер файлов следует постоянно контролировать, установив вид папок “Таблица”. Оптимальный байтовый размер графического файла для использования на сайте — 20-50 кБ, предельно допустимый — до 100 кБ. Файлы размером до 7 кБ малоинформативны и, как правило, дают изображения небольшого геометрического размера. Файлы размером более 100 кБ следует использовать только после согласования с преподавателем. В случае необходимости размер графического файла можно уменьшить с помощью одного из графических редакторов (например, Microsoft Office Picture Manager).
2. Разместите на начальной странице сайта обычное (небольшое) изображение. Для этого откройте файл страницы в редакторе MS Word. Скопируйте файл изображения из внешней папки и вставьте его возле левого верхнего края основного текста правого столбца таблицы. Установите подходящий размер изображения, протянув мышью один из углов.
3. Включите обтекание текстом (правый щелчок по картинке — “Обтекание текстом” — “Вокруг рамки”). Сохраните изменения. Просмотрите полученный результат в браузере.
4. Откройте папку своего гипермедийного сайта. Найдите и откройте в ней папку “index.files”, автоматически сгенерированную редактором MS Word. В ней найдите два автоматически созданных файла разного размера, несущих информацию об одном и том же изображении. Там также можно видеть служебные файлы. При добавлении других картинок на начальную страницу в папке “index.files” будут появляться новые файлы. Аналогичные файлы появятся при добавлении графики на другие страницы сайта. По левой части имени папки всегда можно определить страницу, которую она обслуживает. Помните, что файл большего размера непосредственно в оформлении страницы не участвует. Этот “лишний” файл вручную удалять нельзя. Он исчезнет сам после дальнейшей оптимизации сайта — обработки его страниц с помощью фильтра HTML.
5. Все дополнительные папки с файлами становятся неотъемлемыми частями сайта и подлежат размещению на Web-сервере. Содержимое папок надо постоянно контролировать. Файлы из них нельзя удалять вручную. Они появляются и исчезают сами после корректирования страниц с помощью редактора MS Word.
6. Оформите другие страницы с помощью изображений. Проконтролируйте содержимое дополнительных папок в режиме “Вид — Эскизы страниц”. Просмотрите в браузере весь измененный сайт.
7. Сделайте одну из небольших картинок эскизом — небольшим изображением, щелчок по которому будет открывать в отдельном окне такое же изображение большего размера. Для этого копию файла с изображением большого (до 100 кБ) размера поместите в корневой папке сайта, обязательно дав ей новое имя на латинице без пробелов и дефисов (например, “foto1.jpg”). Если маленького изображения на странице еще нет, то по привычной схеме в редакторе MS Word проделайте процедуру вставки изображения из файла “foto1.jpg” с последующим уменьшением.
8. В редакторе MS Word сделайте правый щелчок по изображению-эскизу и в возникшем контекстном меню войдите в раздел “Гиперссылка”. В окне “Вставка гиперссылки” откройте корневую папку сайта и укажите файл “foto1.jpg”. Подтвердите свой выбор и сохраните изменения в файле страницы. Пронаблюдайте работу гиперссылки эскиза в браузере. Разместите еще несколько больших изображений с эскизами на других страницах.
9. Оформите текстовые фрагменты одной из страниц как ссылки на графические файлы (например, название достопримечательностей сделайте ссылками на фотографии с их видами). Файлы фотографий заранее разместите в корневой папке сайта. Не делайте ссылок на файлы, находящиеся в автоматически сгенерированных папках! В именах файлов используйте только латиницу без пробелов и дефисов.
10. В корневую папку сайта поместите файл “info.docx” c информацией (например, рефератом) по вашей теме без графических включений размером не более 150 кБ. На последней странице сайта со списком источников добавьте фразу “Дополнительная информация по теме (посмотреть/скачать)” сделав её ссылкой на файл “info.docx”. Пронаблюдайте действие ссылки в окне браузера — если браузер не перенастроен, то она должна открывать окно выбора между открытием и сохранением файла на диск. (В перенастроенном браузере вместо выбора откроется сам документ). После размещения сайта на Web-сервере эта ссылка обеспечит скачивание (download) файла на компьютер посетителя сайта. По согласованию с преподавателем добавьте и оформите для скачивания файлы других форматов.

Далее: Задание 6. Оптимизация гипермедийного Вверх: Создание статического Web-сайта на Назад: Задание 4. Создание сайта.