Пояснительная записка План:

Пояснительная записка
План:
1.
2.
3.
4.
5.
6.
7.
8.
Тема сайта
Технологии и технические требования
Структура сайта
Навигация
Средства управления сайтом
Стилевое оформление
Графика и анимация
Скрипты
Тема сайта
В качестве темы для курсовой работы выбран детский сайт по динозаврам, так как
в Сети практически отсутствуют сайты по динозаврам со статьями, написанными на понятном для детей языке. Я решил восполнить этот пробел и создать сайт более специализированный на детскую и школьную аудиторию. Поэтому, все статьи в моем сайте написаны на понятном для детей языке, и отвечают на поставленные вопросы в легкой форме.
Технологии и технические требования
В создании сайта были использованы:
 Версия HTML 4.0,
 Java Script,
 Macromedia Dreamweaver v 8.0,
 Macromedia Flash v 8.0,
 Adobe Photoshop CS2 v 9.0.
Оптимальные технические характеристики, необходимые при просмотре сайта:
 Microsoft Windows 9x/ME/2000/XP,
 Microsoft Internet Explorer v 6.0 или выше,
 Разрешение от 1024 на 768 и выше (страницы саморастягивающиеся).
-1-
Структура сайта
Галерея
Регистрация
Хочу все знать!
Полезные
таблицы
О динозаврах
в мультфильмах
4
О динозаврах
в кино
4
4
4
Рис. 1 Карта сайта
В структуру сайта (см. рис. 1) входят:
 главная страница (index.htm);
 информационный раздел “ Хочу все знать!!!” (10wtka.htm); статьи на 4 страницах;
 полезные таблицы (20tables.htm); таблицы на 4 страницах;
 о динозаврах в мультфильмах (30mult.htm); описания мультфильмов
на 4 страницах;
 о динозаврах в кино (40kino.htm); описания фильмов на 4 страницах;
 галерея (5gallery.htm);
 регистрация (60registr.htm).
Навигация
Вертикальная навигационная панель сайта расположена в левой части страницы в
виде кнопок, которые отражают названия разделов. Использованы такие эффекты как
ролловеры, а также всплывающие меню. Данная навигация позволяет пользователю мгновенно перейти с одной страницы на любую другую, без посреднических страниц. То есть,
чтобы перейти от страницы одного информационного раздела, на страницу другого, пользователю не обязательно будет сначала выйти на начальную страницу информационного
раздела.
Средства управления сайтом
В сайте использовано два шаблона. Один основной (shablon.htm), на основе которого созданы все страницы, кроме главной, для поддержания стилевого единства сайта. И
дополнительный (registr.htm), созданный специально для страницы регистрации. Шаблоны находятся в папке Templates. Эскизы шаблонов были созданы в среде Adobe Photoshop
CS2, а сами шаблоны были созданы в среде Dreamweaver 8 на основе табличного макетирования. Шаблоны собраны из собственных рисунков, либо из чужих, но полностью измененных и обработанных.
-2-
Стилевое оформление
Стиль сайта един для всех страниц. Единство оформления ресурса поддерживается
посредством стилевой таблицы, которая находится в файле Dino.css и применяется ко
всем страницам сайта, кроме index.htm, так как на этой странице отсутствует контент.
Графика и анимация
В качестве графического наполнения ресурса были использованы различные рисунки динозавров, взятые из Интернета и обработанные в соответствии со стилем сайта в
редакторе Adobe Photoshop CS2. В этой же среде было создано собственное графическое
наполнение. Были проведены оптимизация и понижение качества для уменьшения веса.
Все flash-banner’ы созданы в среде Macromedia Flash 8.
Скрипты
Скрипты используются на всех страницах сайта:
Этот скрипт обеспечивает работу всплывающих меню на панели навигации:
n=12;
function overMenu(abc)
{
eval(abc).style.visibility="visible";
eval(abc).style.pixelLeft=window.event.clientX-window.event.offsetX+200;
eval(abc).style.pixelTop=window.event.clientY-window.event.offsetY;
}
function outMenu(abc)
{
eval(abc).style.visibility="hidden";
}
function overSubMenu(abc)
{
eval(abc).style.visibility="visible";
}
Этот скрипт обеспечивает просмотр фотографий в разделе
“Галерея” (Файл 50gallery.htm):
function forward(){
n=n+1;
var element;
if(n<=20) {
document.all.pic12.src="../IMG/Gallery/Dino" +
"_small.jpg";
document.all.link12.href="../IMG/Gallery/Dino"
"_big.jpg";
document.all.pic11.src="../IMG/Gallery/Dino" +
"_small.jpg";
document.all.link11.href="../IMG/Gallery/Dino"
"_big.jpg";
document.all.pic10.src="../IMG/Gallery/Dino" +
"_small.jpg";
n +
+ n +
(n-1) +
+ (n-1) +
(n-2) +
-3-
document.all.link10.href="../IMG/Gallery/Dino" + (n-2) +
"_big.jpg";
document.all.pic9.src="../IMG/Gallery/Dino" + (n-3) +
"_small.jpg";
document.all.link9.href="../IMG/Gallery/Dino" + (n-3) +
"_big.jpg";
document.all.pic8.src="../IMG/Gallery/Dino" + (n-4) +
"_small.jpg";
document.all.link8.href="../IMG/Gallery/Dino" + (n-4) +
"_big.jpg";
document.all.pic7.src="../IMG/Gallery/Dino" + (n-5) +
"_small.jpg";
document.all.link7.href="../IMG/Gallery/Dino" + (n-5) +
"_big.jpg";
document.all.pic6.src="../IMG/Gallery/Dino" + (n-6) +
"_small.jpg";
document.all.link6.href="../IMG/Gallery/Dino" + (n-6) +
"_big.jpg";
document.all.pic5.src="../IMG/Gallery/Dino" + (n-7) +
"_small.jpg";
document.all.link5.href="../IMG/Gallery/Dino" + (n-7) +
"_big.jpg";
document.all.pic4.src="../IMG/Gallery/Dino" + (n-8) +
"_small.jpg";
document.all.link4.href="../IMG/Gallery/Dino" + (n-8) +
"_big.jpg";
document.all.pic3.src="../IMG/Gallery/Dino" + (n-9) +
"_small.jpg";
document.all.link3.href="../IMG/Gallery/Dino" + (n-9) +
"_big.jpg";
document.all.pic2.src="../IMG/Gallery/Dino" + (n-10) +
"_small.jpg";
document.all.link2.href="../IMG/Gallery/Dino" + (n-10) +
"_big.jpg";
document.all.pic1.src="../IMG/Gallery/Dino" + (n-11) +
"_small.jpg";
document.all.link1.href="../IMG/Gallery/Dino" + (n-11) +
"_big.jpg";
t_b.innerText="НАЗАД";
}
if(n==20) {t_f.innerText=" ";}
if(n>=20) {n=20}
}
function backward(){
n=n-1;
if(n>=12) {
document.all.pic12.src="../IMG/Gallery/Dino" + n +
"_small.jpg";
document.all.link12.href="../IMG/Gallery/Dino" + n +
"_big.jpg";
document.all.pic11.src="../IMG/Gallery/Dino" + (n-1) +
"_small.jpg";
document.all.link11.href="../IMG/Gallery/Dino" + (n-1) +
"_big.jpg";
document.all.pic10.src="../IMG/Gallery/Dino" + (n-2) +
"_small.jpg";
document.all.link10.href="../IMG/Gallery/Dino" + (n-2) +
"_big.jpg";
document.all.pic9.src="../IMG/Gallery/Dino" + (n-3) +
"_small.jpg";
document.all.link9.href="../IMG/Gallery/Dino" + (n-3) +
"_big.jpg";
document.all.pic8.src="../IMG/Gallery/Dino" + (n-4) +
"_small.jpg";
-4-
document.all.link8.href="../IMG/Gallery/Dino" + (n-4) +
"_big.jpg";
document.all.pic7.src="../IMG/Gallery/Dino" + (n-5) +
"_small.jpg";
document.all.link7.href="../IMG/Gallery/Dino" + (n-5) +
"_big.jpg";
document.all.pic6.src="../IMG/Gallery/Dino" + (n-6) +
"_small.jpg";
document.all.link6.href="../IMG/Gallery/Dino" + (n-6) +
"_big.jpg";
document.all.pic5.src="../IMG/Gallery/Dino" + (n-7) +
"_small.jpg";
document.all.link5.href="../IMG/Gallery/Dino" + (n-7) +
"_big.jpg";
document.all.pic4.src="../IMG/Gallery/Dino" + (n-8) +
"_small.jpg";
document.all.link4.href="../IMG/Gallery/Dino" + (n-8) +
"_big.jpg";
document.all.pic3.src="../IMG/Gallery/Dino" + (n-9) +
"_small.jpg";
document.all.link3.href="../IMG/Gallery/Dino" + (n-9) +
"_big.jpg";
document.all.pic2.src="../IMG/Gallery/Dino" + (n-10) +
"_small.jpg";
document.all.link2.href="../IMG/Gallery/Dino" + (n-10) +
"_big.jpg";
document.all.pic1.src="../IMG/Gallery/Dino" + (n-11) +
"_small.jpg";
document.all.link1.href="../IMG/Gallery/Dino" + (n-11) +
"_big.jpg";
t_f.innerText="ВПЕРЕД";
}
if(n==12) {t_b.innerText=" ";}
if(n<=12) {n=12}
}
Этот скрипт обеспечивает проверку правельности заполнения
форма регистрации в разделе “Регистрация”
(Файл 61registr.htm):
function sendData()
{
if(window.confirm("Отправить данные?")==true)
{
if(ver.Name.value=="")
{
window.alert("Не указано имя");
return;
}
if(ver.LastName.value=="")
{
window.alert("Не указана фамилия");
return;
}
if(ver.men.value=="")
{
window.alert("Не указано кол-во человек");
return;
}
if(ver.day.value=="")
{
window.alert("Не указано кол-во дней");
return;
}
-5-
if(ver.E_mail.value=="")
{
window.alert("Не указан E-mail");
return;
}
if(ver.checkbox1.checked==0 &&
ver.checkbox2.checked==0 && ver.checkbox3.checked==0)
{
window.alert("Не указан вид номера");
return;
}
ver.checkbox1.checked==0;
ver.checkbox2.checked==0;
ver.checkbox3.checked==0;
ver.Name.disabled=true;
if(ver.E_mail.value.indexOf("@")==-1){
window.alert("В адресе ошибка");
return;
}
window.alert("Данные отправлены");
}
else{
window.alert("Данные неотправлены");
}
}
function Yes(){
document.all.pic.src="img/sad.gif ";
}
function No(){
document.all.pic.src="img/happy.gif";
}
Этот скрипт обеспечивает работу часов:
var timeStr, dateStr;
function clock(){
now=new Date();
h=now.getHours();
if (h<10) {h="0" +h} //вывод незначащего нуля
m=now.getMinutes();
if (m<10) {m="0" +m} //вывод незначащего нуля
s=now.getSeconds();
if (s<10) {s="0" +s} //вывод незначащего нуля
Myt.innerText ="Время: " + h + ":" + m + ":" + s;
//дата
date= now.getDate();
if (date<10) {date="0" +date} //вывод незначащего нуля
month= now.getMonth()+1;
if (month<10) {month="0" +month} //вывод незначащего нуля
year= now.getFullYear();
Myd.innerText="Дата: " + date + "/" + month + "/" +
year;
Timer= setTimeout("clock()",1000);
}
-6-