Далее: Задание 9. Размещение сайта Вверх: Создание статического Web-сайта на Назад: Задание 7. Коррекция страниц

Задание 8. Использование 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-скрипты”.

Далее: Задание 9. Размещение сайта Вверх: Создание статического Web-сайта на Назад: Задание 7. Коррекция страниц

ЯГПУ, Центр информационных технологий обучения
25.09.2012