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