Задание 6. Оптимизация гипермедийного (hM) сайта с помощью фильтраHtml.

41. Получите разрешение преподавателя на оптимизацию сайта способом пересохранения его страниц в редакторе MS Word как веб-страниц с фильтром HTML. Создайте копию папки гипермедийного сайта, дав ей имя «Сайт-Фильтр-Фамилия-Группа-Тема».

42. Во вновь образованной папке откройте файл начальной страницы «index.htm» в редакторе MS Word. Сохраните страницу в том же файле с применением фильтра HTML, дав команды «Файл — Сохранить как… — Другие форматы — Тип файла:Веб-страница с фильтром (*.htm. *.html)». Прочитайте возникшее предупреждение и ответьте «Да». Просмотрите преобразованную страницу. Возникшие нежелательные изменения обсудите с преподавателем. Сравните старый и новый байтовые размеры файла «index.htm». Откройте папку «index.files» и пронаблюдайте изменение её содержимого, в частности, исчезновение служебных и «лишних» файлов.

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

Задание 7. Коррекция страниц сайта с помощью измененияHtml-кода.

44. Получите разрешение преподавателя на коррекцию страниц с помощью изменения HTML-кода. Еще раз просмотрите страницы образцового оптимизированного сайта (папка «Сайт-Фильтр-Образец»). Обратите внимание на то, что все заголовки окон страниц (не путайте с заголовками самих страниц) одинаковы и совпадают с заголовком сайта — «Герменевтика». Аналогичная картина наблюдается на вашем собственном сайте. Зададимся целью добавить в заголовки окон информацию о подзаголовках. Для этого применим «ручную» корректировкуHTML-кода страниц.

45. «Ручное» редактирование HTML-кода страниц относится к области продвинутого подхода при создании сайтов. Любые малейшие (в том числе случайные) необдуманные изменения кода могут привести к частичной или полной неработоспособности отдельных страниц и всего сайта. Обнаружить такие ошибки нелегко, и в большинстве случаев вместо исправления ошибок кода целесообразно заново обработать страницу в MS Word.

46. В целях безопасности работайте только с дополнительной копией папки последней версии вашего сайта. Откройте начальную страницу сайта index.htmв программе Блокнот (правый щелчок по значку файла — Открыть с помощью — Блокнот. Откроется окно Блокнота с весьма объемным и сложным текстомHTML-кода страницы, состоящим из большого количества тегов.

47. Найдите тег типа <title>Герменевтика</title>, где вместо слова «Герменевтика» — название вашего сайта. Аккуратно, не трогая угловых скобок, добавьте к названию сайта дефис (тире) и название подзаголовка начальной страницы. Получится тег типа<title>Герменевтика – Что такое герменевтика</title>. Закройте окно Блокнота с сохранением изменений. Откройте начальную страницу в браузере и убедитесь в том, что заголовок страницы изменился.

48. Аналогичным образом добавьте названия подзаголовков в заголовки остальных страниц.

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

50. Решите, какое изображение (и какой страницы) вашего сайта будет дополнено всплывающей надписью. Откройте папку с файлами, обслуживающими страницу. Определите, какой файл содержит нужное изображение (например, «image003.jpg»). Откройте в Блокноте страницу сайта. Найдите тег, содержащий имя файла «image003.jpg». Для этого воспользуйтесь функцией поиска Блокнота («Правка — Найти»). В поле поиска введите «image003» (без кавычек). Поиск должен привести вас к тегу типа<img border=0 ... src="4.files/image003.jpg" align=left hspace=12>

51. Аккуратно перед правой угловой скобкой сделайте пробел и далее впечатайте без пробелов title=”Гадамер”, гдеГадамер — текст вашей всплывающей надписи, заключенный в латинские КАВЫЧКИ (не путать с двумя апострофами!). Тег должен принять вид<img border=0 ... src="4.files/image003.jpg" align=left hspace=12 title=”Гадамер”>

52. Закройте окно блокнота с сохранением изменений и пронаблюдайте в браузере работу всплывающей надписи. Оформите с помощью всплывающих надписей другие изображения на страницах вашего сайта.