|
p align="left">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> и самое главное, воспитания подрастающего поколения.<br> Где альтернатива современной школе?</b></td></tr></table></a></td> <td width=150 height=20 align=right><a href="superbest.htm">Почему мы лучшие</td></tr> Описание 3-го ряда таблицы<tr><td height=10><a href="chores.htm">Наши будни</a></td> <td align=center valign=middle><b><a href="kaes.htm">Школа Завтрашнего Дня предлагает свой выход</b></td> <td height=10 align=center><a href="email.htm">Описание кнопки почты: в памяти хранится 2 изображения кнопки - нажатой, ims0 и не нажатой, ims1.<ahref="mailto:kaes@nursat.kz" onMousedown="document.images['btn0'].src=ims1.src" onMouseup="document.images['btn0'].src=ims0.src" onMouseout="document.images['btn0'].src=ims0.src" onfocus="blur()"> <img name=btn0 src="e-mail40.gif" border=0 alt="Пишите нам"> </td></tr> </table></center> </body> </html> Все остальные страницы сайта содержат по 2 фрейма: 1 представляет собой систему навигации по сайту, и состоит из таблицы гиперссылок, которые остаются неподвижными на экране, а 2 - собственно сама страница. Первый фрейм, который похож для каждой страницы, называется именем, в котором есть буквы ref (от английского слова reference - ссылка). Например, refhist.htm - фрейм для страницы history.htm, refbest.htm - фрейм для страницы best.htm, reflaws.htm - фрейм для страницы laws.htm. Второй фрейм данной страницы называется тем же именем, но без букв ref и имеют в конце цифру 2. Сама страница целиком называется, так же как и второй фрейм, но без цифры 2. Для большей ясности возьмем конкретный пример: страница history.htm (Наша история) <html><head><title>Наша история</title></head> Во фреймовых документах отсутствует часть bоdy, вместо нее используется тег<frameset>. <frameset rows="30,*" border=0> В данном случае описывается прямоугольная область экрана (строка) высотой 30 пикселей и шириной во весь экран без видимых границ. <frame src="refhist.htm" scrolling="no" marginheight="0" marginwidth="0"> Здесь указывается имя файла, который будет загружаться во фрейм - refhist.htm, без полосы прокрутки и без полей. <frame src="history2.htm" scrolling="yes"> В этой строке описывается источник для 2-го фрейма - history2.htm" уже с полосой прокрутки. </frameset> </html> Соответственно закрываются фреймы и документ html. Теперь проанализируем код первого фрейма: <html><head><title>Наша история</title></head> Задается фон для документа, цвета ссылок и шрифт. <body background="bg.gif" body bgcolor=#000000 link=#00ccff vlink=#66cc99 alink=#99cc99> <font face="Times New Roman,Arial"> Создаем таблицу шириной в экран и в ячейках описываем гиперссылки. Кнопка «назад» описывается скриптами javascript:history.go(-1). <table width=100% height=3 border=0><tr align=center><td><a href="javascript:history.go(-1)"><font size=2> Назад</a></td> Во всех ссылках присутствует параметр _parent, чтобы документ, вызываемый по ссылке, загружался в отдельный, родительский фрейм. [28] <td align=center><a href="index.htm" target="_parent"><font size=2>Главная страница</td> <td align=center><a href="chores.htm" target="_parent"><font size=2>Наши будни</td> <td align=center><a href="superbest.htm" target="_parent"><font size=2>Почему мы лучшие</td> <td align=center><a href="laws.htm" target="_parent"><font size=2>5 законов обучения</td> <td align=center><a href="principles.htm" target="_parent"><font size=2>Основы нашей философии</td></html> 2-ой фрейм представляет собой таблицу, в ячейках которой размещается текст и фотография семьи Экельбаргеров. Никаких специальных эффектов на этой странице нет, поэтому рассмотрим лучше один из фреймов страницы “Почему мы лучшие”. Сначала идет стандартная “шапка” HTML - файла - объявление документа и кодировки <html><head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"><title>Words</title> Затем объявляем использование Java - script и используемых функций dynAnimation() и clickSwapImg() <script language="JavaScript" fptype="dynamicanimation"> <!-- function dynAnimation() {} function clickSwapImg() {} //--> </script> Указываем имя отдельного файла, где находится сам анимационный код "animate.js" <script language="JavaScript1.2" fptype="dynamicanimation" src="animate.js"> </script> </head> Загружаем функцию анимации, указываем ее тип - fpAnimelasticBottomFP1 и описываем фон документа, цвета ссылок. <body onload="dynAnimation()" language="Javascript1.2" body background="bg.gif" body bgcolor=#000000 link=#66cc99 alink=#99ccff vlink=#339966> <p dynamicanimation="fpAnimelasticBottomFP1" id="fpAnimelasticBottomFP1" style="position: relative !important; visibility: hidden" language="Javascript1.2"><font face="Times New Roman,Arial"><font size=3 color=#6699ff> Далее следует непосредственно сам текст страницы. Текст страницы </font></p></body></html> 5 Техническое обеспечение В составе комплекса технических средств разработчика необходимо предусмотреть компьютер для администратора сайта. Характеристики КТС определяем в соответствии с требованиями ПО, установленного на его рабочем месте (смотрите пункт 4 пояснительной записки). Данная работа выполнялась в простейшем текстовом редакторе Блокнот, для которого системные требования минимальные. Для создания и обработки графических объектов использовалась программа Corel Draw 9 и Corel Photo Paint 9. Объем диска для инсталляции этих программ варьируется в зависимости от его конфигурации. Например, 2 Kб файл на FAT форматированном диске объемом 1 Гб займет 16 Кб и 32 Кб на 2 Мб диске. Инсталляция расчитывается на действительном размере файлов, а не на требуемом свободном пространстве. Поэтому, инсталлирование в большой, разбитый на логические диски, FAT - форматированный и заполненный HDD, может привести к проблемам в конце установки.
Страницы: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
| 
