Размещено на http://www.allbest.ru/

Содержание

Введение

1. Интернет и Web технологии

1.1 Графика в Web-дизайне

1.1.1 GIF формат

1.1.2 JPEG

1.1.3 PNG

1.2 Мессенджеры

1.2.1 Возникновение мессенджеров

1.2.3 Программа для прямого межпользовательского общения в сети Интернет ICQ

1.3.1 Возможности чат-клиента

2. Разработка WEB-сайта муниципального образовательного учреждения средней общеобразовательной школы №28 с углубленным изучением отдельных предметов г.Воронежа

2.1 Анализ задач, которые должен решать сайт, определение целевой аудитории

2.2 Составление технического задания на разработку сайта

2.3 Хостинг сайта и покупка домена

2.4 Разработка дизайна сайта

2.5 Верстка разработанного макета

2.6 Наполнение сайта контентом

2.7 Тестирование сайта на соответствие техническому заданию

2.8 Поисковая оптимизация, продвижение сайта

Выводы и предложения

Список литературы

Введение

В последнее время, с появлением и развитием интернета в России, все большую актуальность приобретают web-технологии в нашей жизни. Если ранее сеть Интернет использовалась исключительно в качестве среды передачи файлов и сообщений электронной почты, то сегодня решаются более сложные задачи распределенного доступа к ресурсам.

Главным способом представления информации служит web - сайт. Сейчас практически каждая фирма и учреждение имеет свой сайт. Он облегчает доступ посетителям к нужной информации. Для образовательных учреждений не менее актуально иметь собственный сайт. Родители могут уже дома сделать выбор школы, в которую пойдет ребенок. Так же студенту можно прочитать информацию о вузе на страницах сайта.

Целью проекта является разработка WEB-сайта образовательного учреждения на примере средней общеобразовательной школы №28 с углубленным изучением отдельных предметов города Воронежа.

Для достижения данной цели необходимо решить следующие задачи:

• · Анализ задач, которые должен решать сайт, определение целевой аудитории
• · Составление технической разработки сайта
• · Хостинг сайта и покупка домена
• · Разработка дизайна сайта
• · Верстка разработанного макета
• · Наполнение сайта контентом
• · Тестирование сайта на соответствие техническому заданию
• · Поисковая оптимизация, продвижение сайта.
• Объектом исследования является WEB-сайт Муниципального образовательного учреждения средней общеобразовательной школы №28 с углубленным изучением отдельных предметов города Воронежа.
• Мы использовали методы: метод анализа, монографический метод, аналогии (с уже имеющимся сайтом школы), дедукции, индукции, классификации, моделирования и метод описания.
• Использованные средства: Программные: ОС Microsoft Windows 7, текстовые редакторы Блокнот, Quicker, MS Word; браузеры: Opera, Internet Explorer, Mozilla Firefox, Google Chrome, Yandex. Аппаратные: IBM совместимый компьютер: Intel Core 2 Duo E7500 2,93 GHz, 4Gb ОЗУ, 250 Gb HDD, ЖК монитор, клавиатура, мышь.

1. Интернет и Web технологии

1.1 Графика в Web-дизайне

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

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

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

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

1.1.1 GIF формат

Формат GIF был разработан компанией CompuServ специально для передачи цветных изображений по компьютерным сетям. Разработчики стремились создать формат, который позволял бы передать изображение на компьютер пользователя за кратчайшее время.

GIF - может содержать в себе последовательность растровых изображений, создаётся при помощи приложений, предназначенных для редактирования графики или видео. В основном применяется для создания баннеров или графического оформления видео. Данные могут быть сжаты без потери качества с глубиной цвета до 256 цветов. В последней редакции формата добавлена функция прозрачности. Открывается практически любой программой, предназначенной для просмотра или редактирования изображений, а также программами видеомонтажа.

Возможности формата:

· сжатие данных без потерь (алгоритм сжатия LZW);

· максимальное число отображаемых цветов -- 256;

· поддержка прозрачности;

· возможность включения нескольких изображений (анимация);

· чересстрочный вывод изображений на экран (в GIF89a);

· включение текстовых блоков (комментариев).

GIF чрезвычайно широко используется в Интернете. Благодаря возможностям алгоритма LZW стандарт GIF позволяет значительно сокращать объем итогового графического файла по сравнению с исходным изображением. Достигается это методом смешения сходных оттенков в один.

Стандарт GIF используется в документах HTML только для отображения диаграмм, логотипов, кнопок, разделительных линий, других элементов оформления страницы. Для размещения на web-сайте фотографий, репродукций картин и изображений с большим количеством цветов и цветовых переходов используется стандарт JPEG. В упрощенном виде можно сформулировать так: если изображение рисованное, его следует представлять в стандарте GIF, во всех остальных случаях лучше воспользоваться JPEG.

Подготавливая рисунок для сохранения его в формате GIF, необходимо избегать следующих художественных приемов: градиентных заливок, размытий, постепенных цветовых переходов с множеством оттенков, а также графических фильтров, обеспечивающих неравномерное смешение нескольких цветов на одном участке изображения, например, эффектов изменения интенсивности освещения, подобных фильтру «блик» редактора Adobe Photoshop. Участки с множеством различных оттенков на небольшом физическом пространстве рисунка после сохранения изображения в индексированной палитре будут выглядеть смазанными и «грязными». Этого можно избежать, применяя в своей иллюстрации по возможности однотонные и контрастные цвета.

Одно из свойств GIF - чересстрочный вывод изображений на экран, позволяет загружать картинку с сервера в клиентский браузер не целиком, а частями. Например, сначала на экране отображаются первая, пятая и десятая строки, составляющие изображение, затем - вторая, шестая и одиннадцатая и т. д. Таким образом, для пользователя создается иллюзия постепенной загрузки графического элемента: картинка как бы медленно проявляется на странице. К тому же еще до полной загрузки файла пользователь может оценить приблизительное содержимое картинки и решить, стоит ли ему дожидаться ее полной прорисовки или нет.

Через несколько лет после создания стандарта GIF, в 1989 году, компания CompuServe выпустила новую версию этого графического формата, получившую название GIF89a. Данная модификация включает в себя еще две уникальные особенности, широко использующиеся в современном Интернете. Первая называется «transparency» и подразумевает создание для изображения прозрачного фона методом сохранения вместе с файлом так называемого альфа-канала, представляющего собой маску прозрачности рисунка. Цвета, помеченные в альфа-канале как прозрачные, станут невидимы в браузерах и большинстве других программ, предназначенных для просмотра изображений.

Убрать ненужный фон из файла GIF можно, воспользовавшись встроенной процедурой графического редактора Adobe Photoshop. Для этого в меню «файл» необходимо выбрать пункт «экспорт», среди предложенных вариантов отметить «GIF89a» и в появившемся окне с помощью инструмента указать цвета, в которых вы больше не нуждаетесь.

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

1.1.2 JPEG

Наиболее распространенным в настоящее время форматом, предназначенным для хранения полноцветных фотоизображений, является формат JPEG. Работы над его созданием были начаты в 1982 году, когда в рамках Международной Организации по Стандартизации (International Standardization Organization -- ISO) была создана Группа экспертов по машинной обработке изображений (Photographic Experts Group -- PEG). Эта организация занималась вопросами передачи видеоданных, изображений и текста по каналам цифровой связи. Целью исследований была разработка международных стандартов в области передачи данных этих типов в компьютерных сетях.

Результатом этого сотрудничества стал формат JPEG (Joint Photography Experts Group -- Объединенная группа экспертов по машинной обработке изображений), позволяющий реализовать сжатие полноцветных или монохромных изображений до размеров, удобных для передачи по каналам связи. В отличие от формата GIF, JPEG позволяет хранить изображения, содержащие до 16 млн оттенков.

JPEG (Joint Photographic Experts Group) - графический стандарт, созданный на основе одноименного алгоритма сжатия изображений с потерей качества, кодирующего не идентичные элементы, как алгоритм LZW, а межпиксельные интервалы. В упрощенном виде механизм сжатия изображения в файл формата JPEG выглядит следующим образом:

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

2. Из получившейся цветовой модели удаляются приблизительно три четверти информации о цвете, затем образ дробится на участки размером 8x8 точек и преобразуется в числовой массив данных.

3. Из массива данных удаляется определенная часть информации, описывающей второстепенные оттенки, причем количество изымаемых данных зависит от выбранного пользователем качества результирующего изображения.

Готовый файл сжимается согласно алгоритму Хаффмана, который предусматривает замену наиболее часто встречающихся в массиве данных знаков более компактной двух битной кодировкой.

Таким образом, в основе JPEG лежит так называемое сжатие с потерями. Это значит, что сжатие изображения происходит за счет выбрасывания мелких, незначительных деталей. Во многих случаях эти детали столь малы и незаметны, что человек не в состоянии заметить разницу между сжатым изображением и оригиналом. Однако разница в размерах соответствующих файлов может быть значительной.

1.1.3 PNG

Формат PNG спроектирован для замены устаревшего и более простого формата GIF. Формат PNG позиционируется, прежде всего, для использования в Интернете и редактирования графики. PNG поддерживает три основных типа астровых изображений:

1. Полутоновое изображение (с глубиной цвета в 16 бит);

2. Цветное индексированное изображение (палитра 8 бит для цвета глубиной 24 бит);

3. Полноцветное изображение с глубиной цвета 48 бит).

PNG имеет следующие основные преимущества перед GIF:

· практически неограниченное количество цветов в изображении GIF использует в лучшем случае 8-битный цвет);

· опциональная поддержка альфа-канала;

· возможность гамма-коррекции;

· двумерная чересстрочная развёртка;

· возможность расширения формата пользовательскими блоками.

· хранение цветных изображений с глубиной цвета до 48 битов (в GIF -- до 8 битов);

· хранение монохромных изображений (до 16 битов на пиксел);

· поддержка переменной прозрачности -- до 256 градаций (в формате GIF каждый пиксел или прозрачен, или нет);

· сжатие изображения без потерь;

· использование фильтрации для оптимизации сжатия (в GIF отсутствует);

· возможность чересстрочного вывода изображений на экран;

· встроенные средства обнаружения ошибок передачи данных (в GIF отсутствует);

· средства цветокоррекции (в GIF отсутствуют);

· сохранение уменьшенной копии изображения.

PNG, как и GIF, поддерживает возможность чересстрочного вывода изображений на экран, но в отличие от последнего не только по горизонтали, но и по вертикали. Палитра PNG не ограничивается 256 цветами, данный формат позволяет создавать изображения с глубиной цвета до 48 бит. PNG также поддерживает альфа-канал, по состоит он не из одного уровня, как альфа-канал файлов GIF, а из 254 уровней для каждого элемента изображения, с диапазоном прозрачности 0 до 99 %. Благодаря этому дизайнер получил возможность создавать картинки с переменной прозрачностью.

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

1.2 Мессенджеры

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

Мгновенная передача сообщений (IM) является формой коммуникации в реальном времени между двумя и больше людей, основанной на печатании текста. Текст передается через компьютеры, соединенные по сети, или через Интернет.

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

Список основных функций, которые могут предоставлять современные мессенджеры служб мгновенных сообщений:

· чат (видеочат, текстовый и голосовой);

· звонки на компьютер, звонки на стационарные и мобильные телефоны;

· возможность отправки SMS;

· передача файлов;

· инструменты для совместной работы в режиме реального времени;

· возможность общаться в чате непосредственно на веб-странице;

· напоминания и оповещения;

· хранение истории общения по каждому контакту.

1.2.1 Возникновение мессенджеров

Мгновенная передача сообщений фактически предшествует Интернету, сначала появившись на многопользовательских операционных системах как CTSS и Multics в середине 1960-ых. Поскольку сети развивались и увеличивались, стали развиваться и программки для общения.

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

Современные мессенджеры всего Интернета, какие известны и сегодня, начали получать популярность в середине 1990-ых - их представляла ICQ, первый мессенджер. Несколько лет спустя ICQ (к настоящему времени принадлежащая AOL) была награждена двумя патентами за мгновенную передачу сообщений американским патентным бюро.

Тем временем, развивались другие компании, и появлялись новые мессенджеры. Среди наиболее знаменитых - QIP, Miranda, и многие другие. Развивались параллельно и чаты, приобретая буквально вселенские масштабы. Виртуальное общение захватило практически всех людей.

1.2.3 Программа для прямого межпользовательского общения в сети Интернет ICQ

В 1996 г. в компании Mirabilis LTD была выпущена первая версия программы для прямого межпользовательского общения в сети Интернет, получившая название ICQ (Аи Си Кью). В этой программе пользователи, предварительно зарегистровавшись и получив свой персональный номер (UIN), могут общаться в режиме online.

Данная программа имеет следующие возможности:

· Позволяет одновременно находиться в online любому количеству пользователей с одинаковыми именами.

· Позволяет в любой момент времени видеть, находятся ли ваши друзья в сети.

· Соединяет компьютеры пользователей напрямую, без использования промежуточных серверов.

· Предоставляет возможность вести поиск среди пользователей по любому из основных или по совокупности дополнительных признаков.

· Позволяет отправлять сообщение неактивному пользователю и быть уверенным, что тот его получит, как только подключит ICQ.

· Предоставляет возможность общаться только с избранными пользователями или сохранять полную конфиденциальность.

· Позволяет организовать мини-чат с одним или несколькими пользователями по выбору.

ICQ позволяет обмениваться сообщениями, посылать файлы и URL, играть по сети в различные игры или просто болтать в мини-чате с приятелями. Удобная и несложная система настроек позволяет самостоятельно выбрать требуемый уровень конфиденциальности.

Кроме того, существуют как прямые аналоги ICQ сторонних разработчиков (например, QIP, &RQ, SIM), так и универсальные мессенджеры, которые позволяют одновременно общаться с пользователями ICQ, MSN, Yahoo, AOL и т.д. (например, Miranda, Trillian).

1.3 Возможности чат-клиента

Обмен текстовыми сообщениями с абонентами, использующими тот же мессенджер предельно прост: щелчком по специальной кнопке в главном окне чат-клиента пользователь открывает окно для ввода текста, набирает сообщение и отправляет его. Напечатанный текст моментально отображается в окне «мессенджера», установленного на компьютере собеседника. Принцип работы - как у электронной почты, только все намного быстрее: общение идет в реальном времени в одном и том же окне.

Поддержка IP-телефонии. Если вам не хочется печатать длинные сообщения, звоните из окна чат-клиента на ПК своего собеседника. Программа покажет собеседнику сообщение о входящем звонке, сопровождающееся звуковым сигналом. После того как контакт «возьмет трубку», можно будет разговаривать. Разумеется, такой способ общения требует высокой пропускной способности интернет-канала и изрядно потребляет трафик.

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

При работе в чат-клиенте пользователь должен придерживаться определенных правил безопасности.

Установите антивирусный пакет, поскольку большинство «мессенджеров» - создает прорехи в системе безопасности операционной системы, позволяя вредоносным программам атаковать ваш компьютер.

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

2. Разработка WEB-сайта муниципального образовательного учреждения средней общеобразовательной школы №28 с углубленным изучением отдельных предметов г. Воронежа

2.1 Анализ задач, которые должен решать сайт, определение целевой аудитории

web сайт дизайн продвижение

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

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

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

2.2 Составление технического задания на разработку сайта

Сайт будет состоять из 5 разделов:

1. «Главная страница» - является первой страницей, которую видит посетитель. На ней основное содержание сайта

2. «Новости». Новости и объявления

3. «Педагогический состав». Преподаватели и информация о них.

4. «История Школы». В этом разделе история школы.

5. «Контакты». В этом разделе указан контакты администрации школы, и как связаться.

Разделы сайта будут одинаковы для всех страниц, иметь одинаковый дизайн и будут лишь отличаться контентом. Это сделано для ощущения «единства» сайта и уменьшения времени на его разработку.

Логотип
Горизонтальное меню
Изображение
Подвал

Рис. 1. Макет главной страницы

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

Логотип
Горизонтальное меню
Контент

Рис. 2. Макет страницы Новости

Здесь мы пишем о прошедших и будущих новостях в области образования. Также в содержании страницы будут прописаны мероприятия, проводимые в школе.

Логотип
Горизонтальное меню
Изображение
Таблица

Рис. 3. Макет страницы Преподавательский состав

На странице будет располагаться фотография преподавательского состава школы. Под фотографией будет находиться таблица с информацией о преподавателях.

Логотип
Горизонтальное меню
Изображение
Контент

Рис. 4. Макет страницы История школы

Здесь расположены изображения школы. Внизу под каждым изображением мы пишем комментарий про историю школы, как она изменялась и развивалась.

Логотип
Горизонтальное меню
Контент
Изображение

Рис. 5. Макет страницы Контакты

На странице будет распложена вся необходимая информация, а также фотография директора школы - Хуторецкого М.Э.

2.3 Хостинг сайта и покупка домена

Хостинг - это услуга по размещению чужого веб-сайта на своем веб-сервере, т.е. предоставление подключения к Интернету и обслуживание. Хостингами называют сами площадки или сервера, предоставляющие эту услугу. Веб-хостинг - это сервис, который выделяет пользователю дисковое пространство на своем сервере для размещения сайта пользователя. Хостинги делятся на платные и бесплатные.

Аспекты, на которые следует обратить внимание при выборе платного хостинга. Первым значимым аспектом при выборе хостинга является возможность использования скриптов CGI. CGI - скрипты позволяют устанавливать на вашем сайте гостевые книги, чаты, формы для голосования, форумы, ленты новостей. Также это объем предоставляемого места на диске хостера. Следует обратить внимание, есть ли ftp-доступ к вашему будущему проекту. FTP (протокол передачи файлов) значительно облегчает передачу файлов с вашего компьютера на сервер хостинга. И последнее - это количество почтовых ящиков или адресов. Размер или объем почтового ящика должен отвечать в первую очередь вашим личным потребностям.

Для регистрации доменного имени необходимо использовать один из нескольких специализированных интернет сайтов (например, www.101domain.ru/, www.nic.ru и другие) опираясь на «Правила регистрации доменных имен в домене .RU». Также следует обратить внимание, не зависит ли сумма оплаты хостинга от создаваемого вами трафика и не берет ли хостинг дополнительную плату за использование Microsoft FrontPage.

К выбору имени стоит уделить больше внимания - ведь на него чаще всего обращают внимание. Если имя будет длинным и не понятным, то оно будет отпугивать и путать посетителей. Так же оно должно отображать содержание сайта. Домен первого уровня мы выбрали .RU. В моем случае подходящее доменное имя будет school28.vrn.ru, school28.ru. В качестве хостинга рекомендуем выбрать платный, удаленный сервер, выбрав тариф с объемом выделенной памяти хватающей для размещения всего сайта. В будущем рекомендуем обзавестись собственным сервером.

2.4 Разработка дизайна сайта

Дизайн сайта должен быть приятен к просмотру, удобен и красив. Ко всему прочему он по минимуму должен содержать картинок и графики что бы страница имела минимальный размер. В итоге он получился таков:

Макет Главной страницы сайта. Рис.6

Мы использовали табличную верстку, так как по нашему мнению она более удобна и гибка в использовании. В верхней и нижней части сайта используется фон, в виде тетради в клетку, украшенный листьями.

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

Основная часть представляет собой клетчатую тетрадь, с изображением листьев. Так же как и объекты в шапке всегда находится посередине окна браузера. Графически меню и контент не разделены. Меню представляет собой сплошную темно-коричневую линию.

Макет меню сайта. Рис.7

2.5 Верстка разработанного макета

Как указывалось выше - каркас сайт имеет табличную верстку. Сам макет состоит из 3 основных блоков - контейнеров:

1) верхний - шапка сайта.

2) средний - контейнер, содержащий меню.

3) нижний - контейнер содержащий контент.

Начну с первого. В <body> код разметки следующий:

<table width=100% border="0" align="сenter" cellpadding=5 cellspacing="0" >

<tr>

<td height="219"><img src="Images2/флагъ.jpg" width="195" height="148"></td>

<td colspan="3

<form action="" method="post" name="form1" > <BIG> <H1> Муниципальное бюджетное общеобразовательное учреждение средняя общеобразовательная школа №28 с углубленным изучением отдельных предметов<br> г.Воронежа</H1></BIG>

</form>

</div></td>

<td><img src="Images2/1232.png" width="117" height="170" hspace="50"></td>

</tr>

</table>

В теге <table> использовали 5 атрибутов. Атрибут Width, который определяет размер меню, при сворачивание страницы. Атрибут по выравниманию по середине align="center".Атрибут Border, чтобы убрать границы меню. Атрибут cellpadding, который добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры, и атрибут cellspacing, который задает расстояние между внешними границами ячеек. Все картинки вставлены, через тег img src, и имеют разный размер.

В теге <div> один атрибут, это присвоение выравнивание содержимого посередине align="center". Внутри тега надпись «Муниципальное бюджетное общеобразовательное учреждение средняя общеобразовательная школа №28 с углубленным изучением отдельных предметов г. Воронежа». Все изображения на сайте находятся в одной папке с названием Images2.

Следующий контейнер содержит 2 других контейнера: меню и сам контент.

Меню - самый сложный по исполнению момент. Контейнер меню cделан в виде заголовков таблицы. Код в теге <boby> следующий:

<table width=100% border="0" align="сenter" cellpadding=5 cellspacing="0" >

<tr bgcolor=" #A0522D ">

<td align="сenter" width="20%"><div align="center">

<a href="index.html"style=color:#ffffff><BIG>Главная страница</BIG></a></div></td>

<td align="сenter" width="20%"><div align="center"><a

href="news.html"style=color:#ffffff><BIG>Новости</BIG>

</a></div></td>

<td align="сenter" width="20%"><div align="center"><a

href="teacher.html"style=color:#ffffff><BIG>

Преподавательский состав</BIG></a></div></td>

<td align="сenter" width="20%"><div align="center"><a

href="history.html"style=color:#ffffff><BIG>

История Школы</BIG></a></div></td>

<td align="сenter" width="20%"><div align="center"><a

href="contact.html"style=color:#ffffff><BIG>Контакты

</BIG></a></div></td> </tr>

</table>

Мы придали ячейке <tr> цвет темно-коричневый. Для каждой ячейке поставили размер 20% и выравнивание по центру.

Для блока основного контента так же используются параметры стилей:

<P align=center>

Мы делаем выравнивание всего содержимого параметра по центру.

Тег <BIG> используется для вывода более крупного текста.

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

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

2.6 Наполнение сайта контентом

Наш сайт имеет 5 разделов, каждый из которых мы заполняем контентом:

1. «Главная страница» - является первой страницей, которую видит посетитель. На ней расположена основная информация о сайте.

Мы рады вас приветствовать на сайте СОШ №28 с углубленным изучением отдельных предметов города Воронежа. Сроки осенних каникул: с 4.11.13. по 11.11.13. Начало учебных занятий второй четверти - 11 ноября (понедельник). Наш адрес: 394036, Россия, город Воронеж, ул. Фридриха Энгельса, 23. Тел. 8 (473) 253-11-25. E-mail: sch28-vrn@yandex.ru

2. «Новости». Здесь мы пишем о прошедших и будущих мероприятиях.

01.09.2013

1 сентября - Всемирный день знаний!

21.09.2013

Международный день мира

27.09.2013

День воспитателя и всех дошкольных работников

4.10.2013

День учителя в России. Состоялся концерт для всех учителей школы № 28

4.10.2013

День народного единства

7.10.2013

День Октябрьской революции 1917 года

10.10.2013

Всемирный день молодежи

20.10.2013

Всемирный день детей

24.10.2013

Всемирный день Матери

3. «Преподавательский состав». В этом разделе рассказывается о кадровом составе учебного учреждения, а их достижениях и заслугах. Информация представлена в виде таблице:

Фамилия, Имя, Отчество	Должность, предмет	Почетные звания, научная степень	Квалификационная категория
Хуторецкий Михаил Эликович	директор школы	Заслуженный учитель РФ	ВКК
Пешехонова Галина Ивановна	зам. директора по УВР	Отличник образования	ВКК
Козберг Ирина Иосифовна	зам. директора по УВР	Заслуженный учитель РФ	ВКК
Столярова Елена Семеновна	зам. директора по УВР	Почетный работник	ВКК

Таблица 1. Преподавательский состав.

4. «История Школы». В этом разделе рассказывается, когда была основана, как развивалась школа №28, фотографии изменения школы.

Год основания школы - 1912, основана как: Частная мужская гимназия С.М. Морозовой

На основе материалов поисковой работы установлено, что в здании школы были:

В 1912-1918 гг. частная мужская гимназия С.М. Морозовой

В 1913-1914 гг. в гимназии проходили занятия студентов

Воронежского СХИ имени Петра Великого

В 1918-1919 гг. курсы политпросветработников Воронежской губернии

В 1919-1921 гг. трудовая школа II ступени №41

В 1921-1924 гг. городские коммунальные учреждения

В 1925-1929 гг. губернская профтехшкола для беспризорников «Памятник Ильичу».

1933-1937 гг. средняя образовательная школа №5

В 1929-1942 гг. средняя школа №5

1937-1942 гг. средняя школа №5 имени 18-летия ВЛКСМ

В 1949 г. Средняя школа №5 была переименована в Средняя школа №28.

5. «Контакты». В этом разделе указаны контакты администрации школы, и адрес школы.

Адрес школы и контактная информация:

Режим работы школы:

Для учащихся 2-3, 5-11 классов продолжительность учебной недели составляет 6 дней

Для учащихся 1, 4 классов продолжительность учебной недели составляет 5 дней

График работы школы:

Школа открыта с 8-00 до 19-20

Адрес:

394036, г. Воронеж, ул. Фридриха Энгельса, 23

Контакты:

Секретарь - (473)-255-46-20

Телефон/Факс - (473)-255-44-91

Учительская - (473)-255-97-14

Директор - Хуторецкий Михаил Эликович, заслуженный учитель РФ.

Так как аудитория нашего сайта больше школьники и родители, на сайте должны быть расположены задания для олимпиад, должны появиться разделы для воспитательной работы, так же необходимо выложить расписание и онлайн-дневник.

2.7 Тестирование сайта на соответствие техническому заданию

Методика тестирования сайта заключается в проверке всех шрифтовых, абзацевых и табличных настроек, а также, в проверке работоспособности всех ссылок. Сайт открывается и воспроизводится во всех основных браузерах: Opera, Internet Explorer, Mozilla Firefox, Google Chrome, Yandex.

2.8 Поисковая оптимизация, продвижение сайта

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

Для поисковой оптимизации нужно подать заявку на сканирование ботом нашего сайта в поисковые системы, такие как Яндекс или Google. Так же робот, сканирующий сайт, использует тег <meta> так как в нем указаны ключевые слова. Мы указали такие как: Воронежская средняя школа № 28, МОУ СОШ №28, МОУ СОШ №28 города Воронежа, средняя школа №28, Воронежская общеобразовательная школа №28 города Воронежа.

Так же следует зарегистрироваться на общеобразовательных ресурсах содержащих каталоги школ.

Выводы и предложения

Разнообразие информационных ресурсов складывается из многообразия информационных потребностей людей. Современные информационные ресурсы существуют в различных форматах и технологиях. Мировой рынок информационных услуг представлен различными секторами, в которых имеются интернет-ресурсы в виде сайтов.

В результате выполнения работы мы выявили, что интернет все сильнее и сильнее набирает популярность и развивается. Мессенджеры стали неотъемлемой частью нашей жизни, ими пользуются сейчас чаще, чем телефонными разговорами. Но все, же главное представление информации является сайт. Благодаря новым технологиям представление информации становиться более удобным для владельца и восприятия пользователя. Технологии так же расширяют возможности представления информации. Но всегда на странице должен быть язык разметки гипертекста. Самый первый появившийся это HTML. На нем можно написать сайт, не прибегая к помощи скриптов и таблиц стилей.

Интернет появился недавно, но уже сегодня в нем применены огромное количество технологий, без которых мы уже не можем обойтись. Например, Графика в Web. Практически каждый сайт использует графику, будь то элементы дизайна или предоставляемый контент. Существует три формата изображений «прижившихся» в создании страницы сайта - это GIF, JPG, PNG. Каждый формат выгодно использовать в разных случаях.

С развитием информационных технологий Интернете стало появляться всё больше сайтов, тематика которых была совершенно различной - от сайтов крупных компаний, повествующих об успехах компании, до сайтов маленьких фирм, предлагающих посетить их офисы в пределах одного города.

Во второй главе был разработан проект Web-сайта, на основе которого был разработан сайт средней общеобразовательной школы №28 с углубленным изучением отдельных предметов города Воронежа

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

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

Список литературы

1. htmlbook.ru - Для тех, кто делает сайты / URL: http://htmlbook.ru/

2. http://otherreferats.allbest.ru/programming/00069699.html

3. http://works.doklad.ru/view/wm194Kemgbg.html

4. http://ru.wikipedia.org/wiki/ICQ

5. http://bibliofond.ru/view.aspx?id=551758

6. Бокарев, Т.М Энциклопедия Интернет-рекламы / Т.М. Бокарев- М.: ПРОМО-РУ, 2000.

7. Буковецкая, Ольга Дизайн текста: шрифт, эффекты, цвет / М.: ДМК, 2000. - 304 c.

8. Евстафьев В. А., Ясонов В. Н. Что, где и как рекламировать. Практические советы. - СПб: Питер, 2005

9. Каймин В.А. Информатика: Учебник. - М.: ИНФРА -М.: 2000. - С. 232.

10. Леонтьев В.А. - «Новейшая энциклопедия интернета 2008» - ОЛМА-ПРЕСС Образование 2008г.

11. Могилев А.В. Пак Н.И. Хеннер Е.К. Информатика. М.: изд. «Академия», 2001

12. Холмогоров, В. Основы Web-мастерства / СПб: Питер, 2002. - 352 c.

13. Шафрин Ю.А. Информационные технологии. М.: изд. ЛБЗ, 2001

Размещено на Allbest.ru

...