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

1. Получите разрешение преподавателя на коррекцию страниц с помощью изменения HTML-кода. Еще раз просмотрите страницы образцового оптимизированного сайта (папка «Сайт-Фильтр-Образец»). Обратите внимание на то, что все заголовки окон страниц (не путайте с заголовками самих страниц) одинаковы и совпадают с заголовком сайта — «Герменевтика». Аналогичная картина наблюдается на вашем собственном сайте. Зададимся целью добавить в заголовки окон информацию о подзаголовках. Для этого применим «ручную» корректировку HTML-кода страниц.
2. «Ручное» редактирование HTML-кода страниц относится к области продвинутого подхода при создании сайтов. Любые малейшие (в том числе случайные) необдуманные изменения кода могут привести к частичной или полной неработоспособности отдельных страниц и всего сайта. Обнаружить такие ошибки нелегко, и в большинстве случаев вместо исправления ошибок кода целесообразно заново обработать страницу в MS Word.
3. В целях безопасности работайте только с дополнительной копией папки последней версии вашего сайта. Откройте начальную страницу сайта index.htm в программе Блокнот (правый щелчок по значку файла — Открыть с помощью — Блокнот. Откроется окно Блокнота с весьма объемным и сложным текстом HTML-кода страницы, состоящим из большого количества тегов.
4. Найдите тег типа <title>Герменевтика</title>, где вместо слова «Герменевтика» — название вашего сайта. Аккуратно, не трогая угловых скобок, добавьте к названию сайта дефис (тире) и название подзаголовка начальной страницы. Получится тег типа <title>Герменевтика – Что такое герменевтика</title>. Закройте окно Блокнота с сохранением изменений. Откройте начальную страницу в браузере и убедитесь в том, что заголовок страницы изменился.
5. Аналогичным образом добавьте названия подзаголовков в заголовки остальных страниц.
6. Получите у преподавателя разрешение на оформление всплывающих надписей. Всплывающая надпись появляется при наведении курсора на картинку в окне браузера. Например, фотография человека может быть дополнена всплывающей надписью с именем и фамилией этого человека. Пронаблюдайте появление всплывающих надписей на картинках страниц оптимизированного сайта-образца.
7. Решите, какое изображение (и какой страницы) вашего сайта будет дополнено всплывающей надписью. Откройте папку с файлами, обслуживающими страницу. Определите, какой файл содержит нужное изображение (например, «image003.jpg»). Откройте в Блокноте страницу сайта. Найдите тег, содержащий имя файла «image003.jpg». Для этого воспользуйтесь функцией поиска Блокнота («Правка — Найти»). В поле поиска введите «image003» (без кавычек). Поиск должен привести вас к тегу типа
   <img border=0 ... src="4.files/image003.jpg" align=left hspace=12>
8. Аккуратно перед правой угловой скобкой сделайте пробел и далее впечатайте без пробелов title=”Гадамер”, где Гадамер — текст вашей всплывающей надписи, заключенный в латинские КАВЫЧКИ (не путать с двумя апострофами!). Тег должен принять вид
   <img border=0 ... src="4.files/image003.jpg" align=left hspace=12 title=”Гадамер”>
9. Закройте окно блокнота с сохранением изменений и пронаблюдайте в браузере работу всплывающей надписи. Оформите с помощью всплывающих надписей другие изображения на страницах вашего сайта.

Использование Java-скриптов для оформления страниц сайта.

1. Получите разрешение преподавателя на работу с Java-скриптами. Просмотрите сайт, файлы которого находятся в папке «Сайт-Скрипт-Фильтр-Образец». Несколько страниц этого сайта оформлены с помощью ярко проявляющих себя Java-скриптов, наглядно демонстрирующих возможности технологии. На реальных сайтах применение столь агрессивных Java-скриптов должно быть умеренным и строго оправданным.
2. Скрипт — это завершенный фрагмент программного кода. Java-скрипты (JS) — это наборы команд, написанные на особом языке — языке Java-скриптов. Мы будем использовать файлы, содержащие готовые Java-скрипты. Найдите эти небольшие по размеру файлы в папке сайта — они имеют расширение «.js». Желающие могут посмотреть их содержимое (правый щелчок — Открыть с помощью — Блокнот). Скрипты, содержащиеся в файлах «.js», запускаются с помощью нескольких дополнительных строк HTML-кода страницы сайта. (Посмотреть результаты работы скриптов также можно, открыв файлы с расширением «.htm» в образцовой папке «Java-скрипты»).
3. Получите разрешение на оформление сайта с помощью Java-скриптов. Создайте копию последней версии вашего сайта, дав ей имя «Сайт-Скрипт-Фильтр-Фамилия-Группа-Тема». Другие необходимые для работы файлы вы найдете в папке «Java-скрипты».
4. Приступите к оформлению одной из страниц (не начальной!) эффектом падающего снега. Для этого разместите в папке вашего сайта копию файла «DS_Snow.js», взяв ее из папки «Java-скрипты». Затем откройте HTML-коды страницы и поиском найдите строку тега, начинающегося словом «body» (например, <body bgcolor="#FFFFCC" lang=RU link=blue vlink=purple>
5. Убедитесь в наличии свободной строки под строкой тега «body». В эту свободную строку вставьте набор тегов, скопированный из предварительно открытого файла «DS_Snow.txt» (папка «Java-скрипты»). Сохраните изменения и просмотрите результат.
6. Оформите начальную страницу с помощью слайд-шоу. (Помните, что на одной странице можно использовать только один скрипт). Скопируйте из папки «Java-скрипты» в папку вашего сайта файл «DS_Blend.js» и три файла для слайд шоу: «pic1.jpg», «pic2.jpg» и «pic3.jpg». Уже известным вам способом дополните HTML-код страницы информацией, скопированной из файла «DS_Blend.txt».Сохраните изменения и просмотрите результат. На странице должно появиться слайд-шоу, закрывающее часть полезного информации.
7. Отрегулируйте положение слайд-шоу на странице. Для этого откройте ее HTML-код и найдите строки «var posx="10";» и «var posy="150";», отвечающие за положение слайд-шоу по горизонтали (posx) и вертикали (posy). Измените числовые значения в кавычках с «10» и «150» на «20» и «400». После сохранения пронаблюдайте результат. Для более точного позиционирования слайд-шоу измените числа еще раз, подобрав их опытным путем.
8. При желании создать слайд-шоу из собственных изображений замените файлы «pic1.jpg», «pic2.jpg» и «pic3.jpg» на три собственных файла одинакового геометрического размера с теми же именами. Продумайте технологию увеличения количества изображений в слайд-шоу до шести (см. текст, добавленный в HTML-код).
9. Оформите другие страницы сайта другими скриптами из папки «Java-скрипты».