Разработка Web-сайта структурного подразделения образовательного учреждения на примере МОУ Матреногезовской СОШ с.Матрено-гезово Алексее

Автор работы: Пользователь скрыл имя, 06 Марта 2013 в 12:58, курсовая работа

Описание

Целью нащего курсового проекта является разработка и публикация веб-сайта образовательного учреждения. Для достижения поставленной цели нам необходимы будут программные средства регистрация доменного имени, хостинга и непосредственно тестирование сайта. Для верски сайта была использована программа (Adobe dreavewer) для графического оформления была использована программа paint. Для тестирования мы использовали сервер установленный на свой PC. После тестирования мы закачиваем все фаилы на сервер хостинга и в качестве названия сайта мы используем доменное имя.

Содержание

Введение 3
Глава I. Web-дизайн 5
1.1. Шрифты 5
1.2.Мессенджеры. 7
Глава II. Разработка web-сайта структурного подразделения образовательного учреждения на примере web-сайта Образовательного Учреждения Матреногезевской СОШ 8
2.1. Определение требований к сайту. 8
2.2. Техническое задание на разработку сайта. 8
2.3. Домен и хостинг. 10
2.4. Разработка эскизов дизайна. 11
2.5. Верстка, программирование, тестирование. 12
2.6. Наполнение проекта. 15
2.7. Опытная эксплуатация и внедрение проекта. 16
2.8. Оптимизация. 16
2.9. Продвижение сайта. 17
Выводы и предложения 19
Список использованной литературы 20
Приложения 21

Скачать (218.46 Кб) Сколько стоит заказать работу?
Работа состоит из  1 файл

курсовая.doc

— 357.00 Кб (Скачать документ)

Определившись с ключевыми понятиями, рассмотрим требования, предоставляемые  будущим сайтом к хостингу:

    1. Так как проект будет выполнен с частичным использованием языка PHP, его поддержка на хостинге просто необходима.
    2. Дополнительным плюсом к хостингу будет поддержка баз данных (на случай будущей установки скриптов, требующих данную функцию).
    3. С целью наивысшей скорости работы, удалённость серверов хостинга должна быть минимальной.
    4. Размер дискового пространства под файлы сайта – не менее 100 Мб.
    5. Количество трафика на месяц – не менее 1 Гб.
  1. Хостинг должен быть бесплатным.

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

1Gb.ru – Данный хостинг имеет несколько тарифов поддерживает большое дисковое пространство, также поддерживает PHP и базы данных, домен – в подарок. Хостинг является платным, поэтому не подходит к нашему проекту.

Hostinger.ru – является бесплатным, поддерживает PHP, Mysql. Дисковое пространство  ограничивается 2 Гб, месячный траффик  – 100 Гб, не требует дополнительных  затрат. Hostinger.ru – наиболее подходящий вариант для нашего проекта.[5]

После регистрации на данном проекте  на бесплатном тарифе открываются большие  возможности: автоматическая установка  скриптов и CMS, удобное управление собственным сайтом и многое другое.[6]

    1. Разработка эскизов дизайна.

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

И так в своем сайте я буду использовать блочную верстку так как оно проста в реализации и требует мало времени для написания. На сайте выделяются 2 области ( хедер и контент). Данный  будет разделен на 2 блока .

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

{

-moz-border-radius: 10px; /* для браузера Mozilla Firefox */

-webkit-border-radius: 10px; /* для браузеров Chrome и Safari */

-khtml-border-radius:10px; /* для Linux */

 border-radius: 10px; /* для всех остальных браузеров */

}

2.Общий фон сайта мы выбрали светло зеленый.

    1. Верстка, программирование, тестирование.

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

Существует два способа верстки  страниц:

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

Лучше всего использовать блочную  верстку так как она имеет  ряд преимуществ над табличной, но я буду использовать табличную верстку.

Создаем файл index-html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Матреногезовская СОШ</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

</body>

</html>

 

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

Для того чтобы разбить сайт на блоки нам необходимо воспользоваться языком программирования PHP, в котором сушествует интерестная функция include которая позволяет вставить код с другой страницы. Создаем в редакторе папку bloks или любую другую папку, в которой будут храниться все блоки нашего сайта. Создадим в ней новый файл lefttd.php. В него вставляем код, вырезанный из index.php и отвечающий за выдачу левого блока:

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td class="heading2">Навигация</td>

</tr>

<tr>

<td><a href class="links">Об учереждении</a></td>

</tr>

<tr>

<td><a href class="links">Документы</a></td>

</tr>

<tr>

<td><a href class="links">Учеба</a></td>

</tr>

<tr>

<td><a href class="links">Администрация и учебный коллектив </a></td>

</tr>

<tr>

<td><a href ss="links">Воспитательная работа</a></td>

</tr>

<tr>

<td><a href ss="links">Музей</a></td>

</tr>

<tr>

<td><a href ss="links">Дополнительная информация</a></td>

</tr>

<tr>

<td><a href ss="links">Внеклассные мероприятия</a></td>

</tr>

<tr>

<td><a href ss="links">Достижение</a></td>

</tr>

<tr>

<td><a href ss="links">Детское творчество</a></td>

</tr>

<tr>

<td><a href ss="links">Наши выпускники</a></td>

</tr>

<tr>

<td><a href ss="links">Информация для родителей и учащихся</a></td>

</tr>

<tr>

<td><a href ss="links">Летний отдых</a></td>

</tr>

<td>&nbsp;</td>

</tr>

</table>  

Вместо данного кода в файл index.php прописываем:

<?php include (‘bloks/lefttd.php’) ?>

Аналогичным образом производим разбивку для блока footer. Блок content под данную разбивку не попадает, так как для каждой страницы он будет уникальным!

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

    1. Наполнение проекта.

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

Данный сайт имеет 14 разделов которые мы заполняем контентом.

    1. Главная – здесь будет размешаться работа школьного округа;
    2. Об учреждении – здесь будет размешена история школы;
    3. Документы - здесь будут размещены приказы по школе и различная требуемая информация;
    4. Учеба - здесь размещены личные страницы преподавателей, учебный и процесс и кол-во учеников;
    5. Администрация - здесь размещены информация по руководящему составу школы;
    6. Воспитательная работа - здесь размещается план мероприятий и жизнедеятельность ребенка;
    7. Музей - здесь размещена информация по патриотическому отряду;
    8. Дополнительная информация - здесь размещены информация по кружкам и секциям в школе;
    9. Внеклассное мероприятия - здесь размещается информация какие мероприятия прошли в школе;
    10. Достижения - здесь размещены достижения школы;
    11. Детское творчество - здесь размещено творчество учащихся;
    12. Наши выпускники - здесь размещена информация по выпускникам школы, их место работы и связь;
    13. Информация для родителей и школьников - здесь размещена информация для учащихся и их родителей, то есть расписание и планы мероприятий;
    14. Летний отдых - здесь размещена информация где может отдохнуть школьник.

    1. Опытная эксплуатация и внедрение проекта.

И так после того как наш сайт будет готов нам надо будет его разместить в сети интернет чтобы он стал доступен посетителям. Ранее мы уже регистрировали хостинг на hostinger.ru и чтобы мы смогли разместить его на данном сервере нам потребуется фаиловый менеджер(total commander) либо программа для заливки документов на сервер(ftp pro). В файловом менеджере либо в программе нужно просто прописать имя, адрес сервера и пароль, которые нам выдали при регистрации на hostinger.ru.

    1. Оптимизация.

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

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

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

Оптимизация сайта ведется по так  называемому «ядру запросов» - списку эффективных, продающих поисковых запросов, которые потенциальные клиенты задают поисковой системе.

В HTML существуют специальные теги для лучшей индексации сайта.

Тег description используется при создании краткого описания страницы. Для главной  страницы он имеет следующий вид:

<meta name="description" content" />

При выдаче в поисковике, информация, заключенная в content будет выдаваться сразу после ссылки в качестве описания страницы.

Тег keywords используется поисковыми системами для определения приоритета ссылки:

<meta name="keywords" content" />

Мета-тег Document-state также имеет значение при индексации страницы в поисковых  системах. Тег обладает двумя значениями — Static и Dynamic. Значение «Static» отмечает, что системе нет необходимости  индексировать документ в дальнейшем, «Dynamic» позволяет регулярно индексировать Интернет-страницу.[7]

    1. Продвижение сайта.

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

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

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

Из опосредованно связанных  с поисковой выдачей способов продвижения сайтов можно выделить размещение контекстной рекламы  в поисковой машине. При ответе на определенный запрос пользователя поисковая машина вместе с результатами поисковой выдачи покажет и рекламное объявление Клиента, заказанное им под этот запрос. Данный метод продвижения сайтов обычно применяют в случае необходимости получить целевых посетителей на сайт без временных затрат, характерных для продвижения сайта и до того, как сайт займет надлежащее место в выдаче по этому запросу.[8]

 

 

 

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

И так завершая наш проект мы должны убедится что были учтены все требования предьявленные к нему.

  • Мы выявили требования сайта, которым он должен соответствовать
  • Зарегестрировали доменное имя для него и выбрали хостинг
  • Спланировали структуру
  • Разработали дизайн и верстку макета
  • Наполнили сайт необходимым контентом
  • Протестировали и опубликовали его в интернете

И так у нас получился вполне пригодный сайт общеобразовательного учреждения.

Данный сайт частично написан на гипертекстовом препроцессоре так  как в наше время не актуально  писать статистические HTML-сайты . Современные технологии почти полностью перешли на динамические сайты (HTML 5, ASP, PHP) и  др. Но я пока еще новичок в этом деле поэтому мне еще предстоит многому научиться.

Информация о работе Разработка Web-сайта структурного подразделения образовательного учреждения на примере МОУ Матреногезовской СОШ с.Матрено-гезово Алексее