Практическая работа № 33
«Использование Javascript»

1. Скопируйте на свой компьютер каталог SCRIPT. Откройте в редакторе файл valaam.htm и посмотрите, как он выглядит в браузере.

Ваша задача – оформить документ так, как показано на следующей странице. В нем будет один скрытый блок. Для оформления используйте рисунки из каталога images.

2. Добавьте тэги, необходимые для правильного HTML-документа. Добавьте заголовок страницы (TITLE), укажите название документа и фамилию автора, например:

 	Валаам: работа Василия Пупкина.

3. Выделите заголовок документа стилем H1. Справа от заголовка добавьте рисунок valaam_gray.gif, который будет ссылкой на сайт valaam.ru. При наведении мыши рисунок должен меняться на valaam.gif.

4. Выделите абзацы в тексте с помощью тэга P.

5. Создайте стилевой файл valaam.css и файл для скриптов valaam.js, подключите эти файлы к документу. Все оформление должно быть сделано с помощью CSS, все скрипты «убраны» в файл valaam.js.

6. Замените верхние кавычки на «ёлочки».

7. Замените везде, где нужно, обычные пробелы на неразрывные, и знаки «минус» – на тире; сделайте так, чтобы тире не отрывались от предыдущих слов.

8. Сделайте плавающий блок, содержащий фотографию Валаама и подпись «Фото А. Колыбалова (www.rg.ru) ». Адрес сайта должен быть ссылкой на этот сайт.

Подпись должна быть набрана шрифтом без засечек (sans-serif), курсивом, размер 80% от размера шрифта основного текста, внешних отступов (margin) нет.

9. Оформите скрытый блок, включающий ту часть текста, которой нет на экране в краткой версии (см. оборот). Присвойте этому блоку имя (id), установите следующее оформление: цвет фона #EEEEFF; рамка синяя, сплошная, толщиной 1 пиксель; отступы по бокам 10 пикселей.

10. В нижнюю часть скрытого блока добавьте внутренний плавающий блок, содержащий фотографию резьбы по дереву с подписью ‘К. Гоголев. «На пристани» (резьба по дереву)’. Оформление подписи должно быть такое же, как и для первого плавающего блока.

11. Сделайте так, чтобы скрытый блок показывался при щелчке по словам «гениев творчества и науки».

12. В конце скрытого блока должна быть ссылка с текстом «Свернуть», при щелчке по которой блок скрывается.

13. В конце документа добавьте форму с вопросом «Назовите ближайший город, из которого можно приехать на о. Валаам» (правильный ответ – Сортавала). Выделите вопрос с помощью тэга STRONG. Сделайте так, чтобы после щелчка по кнопке Ответить на экран выдавалось сообщение «Правильно» или «Неправильно».

Полная версия (развернутый вид):