Лабораторная работа №3
Модификация персонального сайта студента с использованием CSSиJavascript
Программное обеспечение
Для выполнения лабораторной работы необходимо следующее ПО:
Редактор HTMLдокументов (желательноHomeSite4.5 и выше)
Редактор стилей TopStyle1.5 и выше ()
Графический редактор (желательно AdobePhotoshop5.5 и выше)
Файловый менеджер (желательно WindowsCommander4.0 и выше)
Браузер (желательно InternetExplorer5.0 и выше)
Веб сервер Apache1.3.27 и выше
Задание
Разработать стилевые решения
Стили должны быть описаны во внешнем файле. Файл со стилями должен быть связан со всеми документами, входящими в состав сайта.
Провести разметку документов
Документы, входящие в состав сайта, должны быть размечены при помощи стилей, определенных в п.1
Анимировать графическое меню
Меню, осуществляющее навигацию между разделами сайта, должно быть анимировано средствами Javascript. Анимация заключается в изменении цвета пункта меню при наведении на него курсора мыши. После того, как курсор убран, пункт меню должен восстанавливать свой цвет.
Для осуществления анимации необходимо изготовить второй комплект графических изображений элементов меню, причем цвет элементов второго комплекта должен отличаться от цвета элементов первого комплекта (изготовленного в ходе л/р №2).
При наведении курсора мыши на пункт меню, графическое изображение пункта, входящее в состав первого комплекта, должно заменяться на соответствующее графическое изображение из второго комплекта. Когда курсор убран с пункта меню, должна производиться обратная замена.
Заполнить таблицу изображений
В таблицу изображений (заполненную в ходе л/р №2) необходимо добавить сведения о втором комплекте графических изображений пунктов меню.
|
№ п/п |
Название файла |
Длина изображения |
Ширина изображения |
Размер файла (кб) |
Присутствует в документах (номера из табл. документов) |
Отчет
Отчет о выполнении лабораторной работы должен содержать следующие разделы:
Титульный лист
Таблицу изображений
Описание стилей
Текст одного HTMLдокумента, размеченного стилями и содержащего скрипт анимированного меню (по выбору учащегося)
Защита
Защита лабораторной работы осуществляется в специально отведенное время в дисплейном классе института. Для защиты необходимо предоставить отчет о выполнении лабораторной работы и продемонстрировать версию сайта с элементами CSSиJavascript.
Перед демонстрацией сайт должен быть помещен на выделенный сервер при помощи FTPклиента. Логин и пароль для доступа к персональному каталогу учащегося на сервере должен быть получен у преподавателя. Демонстрация работоспособности сайта осуществляется на рабочей станции дисплейного класса путем загрузки страниц сайта с сервера программой просмотра страниц (браузером).
Учащийся допускается к защите ТОЛЬКО ПРИ НАЛИЧИИ отчета и демонстрационной версии сайта.
Пример
Описание стилей (файл styles.css)
.title {
font-family : "Times New Roman", Times, serif;
font-size : 22px;
color : Teal;
}
.subtitle {
font-family : "Times New Roman", Times, serif;
font-size : 16px;
color : Black;
text-decoration : underline;
font-weight : bold;
}
.bold {
font-family : "Times New Roman", Times, serif;
font-size : 16px;
color : Black;
font-weight : bold;
}
.normal {
font-family : "Times New Roman", Times, serif;
font-size : 16px;
color :black;
font-weight : normal;
}
Текст файла res.html(в примере анимирована одна кнопка меню)
<html>
<head>
<title>Персональный сайт Иванова И.И. Резюме</title>
<link href="img/styles.css" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="keywords" content="Иванов, персональный сайт, резюме">
</head>
<body bgcolor="#CCCCCC">
<script language="Javascript">
<!--
// инициализация массивов, содержащих имена файлов
var PassivePictures=new Array(1);
var ActivePictures=new Array(1);
// заполнение массивов
ActivePictures[0]="img/res2.gif";
PassivePictures[0]="img/res.gif";
// функция замены изображений
function Change(button,param,type) {
if (type=="act") button.src=ActivePictures[param];
else button.src=PassivePictures[param];
}
-->
</script>
<center><span class="title">Резюме</span></center>
<hr size="1" width="100%">
<table width="100%" cellspacing="10" cellpadding="0" border="0">
<tr>
<td width="200" valign="top">
<a href="res.html"><img src="img/res.gif" width="157" height="47" alt="Резюме" border="0" onmouseover="Change(this,0,'act')" onmouseout="Change(this,0,'pas')"></a><br><br>
<a href="#"><img src="img/bio.gif" width="157" height="47" alt="Биография" border="0"></a><br><br>
<a href="#"><img src="img/proj.gif" width="157" height="47" alt="Проекты" border="0"></a>
</td>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="normal">
<span class="bold">Ф.И.О:</span> Иванов Иван Иванович<br>
<span class="bold">Дата рождения:</span> 1 января 1970г.<br>
<span class="bold">Семейное положение:</span> холост<br>
<span class="bold">Домашний телефон:</span> 111-11-11<br>
<span class="bold">E-mail:</span> ivanov@mail.ru<br><br>
<span class="subtitle">Образование</span><br>
Московский государственный институт Электроники и Математики (МГИЭМ).<br>
<span class="bold">Специальность:</span> вычислительные машины, комплексы, системы и сети.<br><br>
<span class="subtitle">Опыт работы</span><br>
1995-2004 ООО "СуперСофт"<br>
<span class="bold">Должность:</span> системный администратор<br><br>
<span class="subtitle">Профессиональные навыки</span><br>
<span class="bold">ОС:</span> MS Windows 9x/2000/XP, UNIX<br>
<span class="bold">Языки программирования:</span> C/С++, Visual Basic<br>
<span class="bold">Программные продукты:</span> MS Office, MS Visio<br><br>
<span class="subtitle">Дополнительные сведения</span><br>
<span class="bold">Личные качества:</span> аккуратность, педантичность, обучаемость<br>
<span class="bold">Увлечения:</span> музыка, литература, спорт, компьютерные игры<br>
<span class="bold">Прочее:</span> Английский язык (технический)
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>