Разработка веб-сайта

Сценарии JavaScript обычно помещают непосредственно в  документ HTML. Они могут находиться или в заголовке или в теле документа. В один документ можно  поместить несколько сценариев. Пример синтаксиса:

<SCRIPT LANGUAGE=”JavaScnpt”>

Здесь находится сценарий

</SCRIPT>

2.7 Дизайн  учебника

Элементы, без  которых не обходится ни одна web-страница, -- фон, текст и гипертекстовые ссылки -- ставят интересную задачу гармонизации трех (или четырех, если учитывать цвет «посещенных» ссылок) цветов, занимающих в композиции резко различающиеся площади и выполняющих разные функции. Есть немало страниц с минимумом графики и достаточно ординарной композицией, которые привлекают и запоминаются исключительно своей цветовой гаммой.[19;20;21]

Первое требование к паре цветов для фона и текста -- достаточный контраст между ними, необходимый для комфортного, неутомительного чтения. Контраст этот должен, прежде всего, выражаться в различной яркости цветов, так как разница только в тоне или насыщенности не позволит сознанию различать текст и фон с достаточным автоматизмом, а для текста с небольшим кеглем его тональная окраска или степень насыщенности вообще с трудом различимы (кроме того, эти параметры цвета теряются на черно-белых устройствах вывода).

Одно из возможных цветовых решений -- со светлым текстом и темным фоном кажется более привлекательным. Поскольку буквы текста занимают существенно меньшую площадь, чем фон, любой достаточно темный цвет для текста норовит превратиться в черный. Поэтому для текста выгоднее выбирать светлый и насыщенный оттенок, которому, естественно, требуется темный фон. Нужно также учитывать, что светлый текст на темном фоне, хотя и уступает по комфортности длительного чтения черному тексту на белом, в небольших объемах меньше утомляет глаз, так как ограничивает общее количество света, получаемое от монитора (к сожалению, у многих пользователей мониторы настроены так, что белый фон страницы почти моментально вызывает резь в глазах).

Печать текста белым по черному применяется  иногда и в журнальной верстке, однако, только на экране компьютера эта цветовая схема открыла все заложенные в ней возможности. Любой достаточно темный цвет в качестве фона звучит сдержанно, благородно, даже таинственно; любой светлый цвет для текста становится по-особому ярким и выразительным. Пожалуй, теперь такие цветовые сочетания уже ни у кого не ассоциируются с чем-то мрачным или траурным, так что свобода творчества ничем не ограничена.

Есть, тем не менее, одно ограничение технического плана. Фоновый цвет, который хочет выглядеть именно цветом, а не бесцветным черным, обязан быть достаточно насыщенным, -- «ночью все кошки серы», и слишком слабая примесь основного тона будет в темном цвете трудно различима, несмотря даже на большую площадь, занимаемую этим цветом. Насыщенность цвета текста может при этом поддерживать насыщенность фона, а может, контрастировать с ней. Чтобы подчеркнуть цвет фона, на экране расположены цветные мерцающие звездочки, имитирующие звездное небо. Выплывающая из бесконечности заставка школы создает эффект глубины изображения, придает плоским изображениям третье измерение.

3 Методическое  обеспечение

3.1 Руководство  по инсталляции

Чтобы разместить сайт в сети Internet, необходимо открыть  сайт с адресом http://www.tbns.net/, затем  перейти в окно "Free Services", далее на Web-Hosting, затем - SignUp Today, щелкнуть на SignUp Now! Следующий шаг - необходимо будет заполнить предложенную форму, при этом необходимо удостовериться, что ваше имя и адрес записаны верно. Вам будет выслана необходимая информация на ваш электронный счет, здесь важно не забыть свой пароль и пора подумать о будущем логине. Ваш сайт будет располагаться по адресу www.tbns.net/<ваш login>. Например,

если ваш логин = solidworks, то адрес будет

address=www.tbns.net/solidworks

Когда вы получите письмо от администратора, вам необходимо будет ответить на него. Далее в течении 2-х суток ваш счет будет установлен. После этого вы можете войти в свой счет с их первой страницы. Оттуда вы уже можете загрузить свои файлы на их сервер.

3.2 Руководство пользователя

Чтобы просмотреть  сайт школы, пользователю необходимо иметь  компьютер, модем, выход в интернет и браузер Internet Explorer 4.0 или выше.[22] Первая страница, на которую попадает пользователь, называется главной. (Рисунок 5) Она имеет вид таблицы, в ячейках которой расположены элементы страницы - гиперссылки, логотип школы и e-mail. Граница таблицы имеет толщину 0, поэтому ее на экране не видно.

Рисунок 5 - Главная  страница

Сразу под анимированным  логотипом школы Завтрашнего  Дня, располагается текст в рамке, являющийся гиперссылкой, призванный заинтриговать читателя. При нажатии на этот текст, пользователь переходит на следующую страницу (см. рисунок 4 на стр. 39 и 6), где видные педагогические авторитеты высказываются о необходимости реформ, либо о состоянии народного образования в целом, что опять же подтверждает остроту вопроса реформирования школы. С этой страницы возможен переход только на главную страницу.

Рисунок 6 - Современная  школа

Возвратясь на главную страницу, читатель уже понял, что с общественным образованием надо что-то делать, но что именно еще не решил. И тут Школа Завтрашнего Дня предлагает свой выход из ситуации. Именно так называется ссылка внизу экрана. При нажатии на нее читатель попадает на страницу, очень кратко, буквально в двух словах, представляющую ШЗД (Школу Завтрашнего Дня). (Смотрите рисунок 7) С этой страницы, как и впрочем, со всех остальных, можно перейти на любую другую страницу сайта.

Рисунок 7 - Школа  завтрашнего дня

Для этого существует удобная система навигации по сайту, представляющая собой закрепленные вверху экрана ссылки, остающиеся неподвижными даже при прокрутке страницы. Но вернемся к главной странице.

Слева от эмблемы  расположена ссылка «Наша история», ее название говорит само за себя. (Смотрите рисунок 8) На странице представлена краткая история школы от идеи создания до настоящих дней с фотографией основателей - семьи Эккельбаргеров.

Рисунок 8 - Наша история

Под "Нашей  историей" расположены "Наши будни", расказывающие о повседневной жизни  школы. (Смотрите рисунок 9) Эта страница постоянно прокручивается без участия пользователя. На этой странице есть возможность связаться со школой по электронной почте или непосредственно с автором сайта. Справа от логотипа расположена ссылка «Почему мы лучшие», где в полной мере используется сценарий Java-Script для анимации текста. (Смотрите рисунок 10) На странице проводится сравнительный анализ ШЗД на примере Казахстано-Американской английской школы и обычной школы.

Рисунок 9 - Наши будни

Под этой ссылкой  находится школьный е-mail, при нажатии на который запускается Outlook Express, если он установлен на данной машине.

Помимо этих ссылок, в сайте еще присутствуют другие страницы, переход на которые  возможен со всех страниц, кроме главной.

Рисунок 10 - Почему мы лучшие

Так, есть страница, называемая "Основы нашей философии", которая изобилует таблицами, фреймами и Java скриптами. На этой странице анимированный текст объясняет принципы, на которых построена ШЗД.

Кроме нее есть еще одна страница, которая называется "5 законов обучения". Педагогические исследования д-ра Ховарда и его команды привели к открытию 5 законов обучения, которые имеют свое обоснование в Библии. Эти законы, которые служат фундаментом для "Основ нашей философии" прошли многолетнюю практику по всему миру и отлично зарекомендовали себя.

4

4.

4. Программное  обеспечение

4.1 Выбор  общесистемного программного обеспечения

В качестве операционной системы была выбрана Windows 9x по целому ряду причин. [23;34]

Во-первых, она  является одной из наиболее распространенных на сегодняшний день. Создавать программу, работающую на основе OS/2, было бы не рационально.

Во-вторых, В Windows 9x, в частности 98, надежность компьютера повышается за счет применения новых  мастеров, служебных программ и ресурсов, обеспечивающих бесперебойную работу системы.

В третьих, в  состав Windows 98 входит ряд программ, совместное применение которых повышает производительность компьютера.

Проводник Windows 98 и Internet Explorer позволяют объединить ресурсы Web в едином представлении, что особенно важно, учитывая специфику данной работы.

ОС Windows характеризуется  тем, что предоставляет приложениям  возможность создания пользовательского  интерфейса на высоком уровне эргономичности и удобства. В то же время, для  работы этой системы требуется от 16 до 128 Мб оперативной памяти в зависимости от версии.

ОС UNIX является антиподом Windows - практически отсутствие графического интерфейса, за исключение дополнительно  загружаемой графической подсистемы X-Window. В то же время требования к  оперативной памяти не превышают 2-4 Мб для отдельных модификаций. В отличие от Windows, код UNIX специально рассчитан под используемое оборудование, что привело к отсутствию понятия Plug&Play, но зато дало возможность создания высокопроизводительных приложений, интенсивно использующих комплекс технических средств.

Так как пользователь работает только с программой Internet Explorer, на его  машине необходима установка операционной системы на базе Windows. Наиболее подходящая - ОС Windows 98, являющейся недорогой, но в  тоже время довольно мощной операционной системой, поддерживающей большинство современных технологий программирования и при этом нетребовательна к комплексу технических средств.

4.2 Базовое программное  обеспечение

В качестве базового программного обеспечения используется браузер Internet Explorer 4.0 как для отображения работы, так и для редактирования, поскольку он способен определять ошибки в Web-сценарии.[25;26;33] Он является наиболее популярным и распространенным наряду с Netscape Navigator. Было решено не использовать самые последние версии, например 5-ю, так как далеко не все пользователи имеют обновленные версии, и некоторые эффекты были бы недоступны. По той же самой причине я не использовал Flash MacroMedia, который требует плейер для просмотра эффектов. Далеко не каждый пользователь его имеет, а, не имея, захочет его установить.

Для непосредственного создания и редактирования HTML файлов использовался  обычный Блокнот. Написание HTML кода вручную немного сложнее, чем  использование специализированных пакетов, таких как, Front Page, но зато программист получает полную свободу над текстом программы, и объем файла получается значительно меньше. Этот факт нельзя игнорировать, учитывая не очень высокую скорость передачи информации по сети. Кроме того, при использовании пакетов, конечный продукт (web-страница) в браузере, далеко не всегда выглядит так, как он смотрится в процессе создания в редакторе. [27;34]

Все графические элементы сайта были выполнены и отредактированы  в пакете Corel Draw 9 и Сorel Photo Paint 9. К  преимуществам этого редактора относят развитую систему управления и богатство средств настройки инструментов. Наиболее сложные композиции, близкие к художественным произведениям, получают средствами именно этого редактора. Сorel Photo Paint 9 позволяет создавать анимационные ролики в формате Gif, что очень удобно для размещения в интернете и кроме того, возможно изменять настройки каждого кадра. Более того, Сorel Photo Paint 9 является естественным дополнением к Corel Draw 9 и образует с ним единый графический пакет.

4.3 Прикладное программное  обеспечение

Прикладное программное  обеспечение представляет собой  рекламный Web-сайт Казахстано-Американской Английской школы. На нем размещается  информация о школе, призванная заинтересовать потенциальных учеников и их родителей, а также просто заявить о себе. На сайте представлена необходимость создания школы такого типа, история и описаны будни школы, концепция и принципы функционирования, а также сравнительный анализ с другими школами. Все это представлено в удобном для чтения формате, в отдельных случаях текст сопровождается графическими дополнениями - фотографиями, рисунками или анимацией. Как правило, страницы не несут слишком много информации, чтобы не перегружать пользователя, в этом нет необходимости, так как цель сайта, в первую очередь - реклама. Большинство страниц не имеют полосы прокрутки и это совершенно оправданно, так как многие посетители интернета просматривают лишь то, что видят на экране при загрузке. Сайт снабжен удобной системой навигации по всем страницам. Выполненные в отдельном фрейме, ссылки остаются всегда в верхней части экрана, дажа при прокрутке страницы. Схема страниц сайта представлена на рис.4

4.4 Руководство  проектировщика

Код данного сайта целиком  и полностью написан в html с  использованием Java Script в обычном текстовом редакторе Блокнот. При редактировании сайта не рекомендуется использование каких-бы то ни было пакетов для создания web-страниц, так как они неизбежно увеличивают размер файла за счет добавления своих собственных и совершенно ненужных тегов. Мы опустим из описания повторяющиеся моменты, а также простую, нетворческую работу, такую как, например, набивка текста и затронем только наиболее интересные эффекты и идеи. Описание сайта начнем с главной страницы.

Главная страница (файл с именем index.htm)Сразу после раздела <head> идет объявление использования jscript и в нем объявление двух изображений для значка e-mail. Это сделано с той целью, чтобы они начали загружаться еще до того как данная кнопка будет активизирована.

<head><title>Главная страница</title></head>

<script language="jscript"><!--

ims0=new Image()

ims0.src="e-mail40.gif"

ims1=new Image()

ims1.src="e-mail50.gif"

Далее следует объявление функции fly() и ее описание.

function fly(){

var ims=window.document.im1

Тут объявляется  переменная ims, которая обозначает графический  файл - эмблемму школы

if (ims.width>396){

ims.width=405

ims.height=80

}else{

ims.width+=5

ims.height+=1}

setTimeout("fly()",70)

} Если разм ...........

еры изображения  меньше 396 пикселей по ширине, а они заведомо меньше, то ширина и высоты увеличивается соответственно на 5 и 1 пиксель соответственно с частотой 70 миллисекунд до тех пор пока не выполнится условие if (ims.width>396). Это условие выполнится, когда ширина картинки будет 400 пикселей. После этого устанавливаются конечные размеры - 405 на 80 пикселей. Численные параметры подобраны таким образом, что обеспечивается плавное увеличение эмблемы, создавая эффект анимации.

//--></script>

Фоном служит анимированный  графический файл bg.gif, созданный в пакете Corel Photo Paint 9. В том же теге <body> вызывается функция fly().

<body background="bg.gif" body bgcolor=#000000 link=#00ccff vlink=#66cc99 alink=#99cc99 onload="fly()">

<center><font face="Times New Roman,Arial"><font size=4 color=#6699ff><b>

Казахстано-Американская Английская Школа<br>

Школа завтрашнего дня  в КарагандеОсновой страницы служит таблица, размером 750 на 350 пикселей.<table border=0 table height=350 width=750>

<tr>

<td width=150> Пустая ячейка  таблицы

</td>

Здесь загружается рисунок с именем logo2.gif <td width=405 height=110 align=center valign=middle><br>

<img name="im1" src="logo2.gif" width=0 height=0></td>

<font size=3 color=#6699ff><b>

<td width=150>

</td></tr>

Описание 2-го ряда таблицы, заполненного ссылками на другие страницы. <tr><td width=150 height=20 align=left><a href="history.htm">История создания</td>

<td align=center><a href="exit.htm"><table width=320 height=10 border=1 cellspacing=0><tr><td align=center><font size=3 color=#6699ff><b><a href="exit.htm">Общественное образование терпит кризис.<br>Школа не решает задачи обучения<br>