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

Министерство образования и науки Российской Федерации

Федеральное государственное автономное образовательное учреждение высшего профессионального образования «Российский государственный профессионально-педагогический университет»

филиал в г. Первоуральске

КУРСОВАЯ РАБОТА

по теме: Разработка Web-сайта МКОУ СОШ №20

по дисциплине: Web-дизайн

Выполнил студент

Атаманенко Б. А.

Проверил преподаватель:

Полевов А. В,

Первоуральск

2013



Содержание

Введение

1. JavaScript

1.1 Общие сведения

1.2 Понятие объектной модели применительно к JavaScript

1.2.1 Cвойства

1.2.2 Методы

1.2.3 События

1.3 Размещение кода на HTML-странице

1.4 URL-схема JavaScript

1.5 Обработчики событий

1.6 Иерархия классов

2. Разработка Web-сайта МКОУ СОШ №20

2.1 Требования закона РФ к школьному сайту

2.2 Техническое задание на создание сайта школы №20

2.3 Создание сайта в системе Ucoz

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

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

2.6 Наполнение проекта и опытная эксплуатация

2.7 Оптимизация

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

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

Список использованной литературы

Приложение



Введение

Актуальность и необходимость создания школьного сайта объясняется тем, что школьный сайт:

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

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

• вносит качественных изменений в процесс использования ИКТ в образовательном процессе;

• стимулирует творческую активность педагогов и учащихся.

Цель данного курсового проекта: создать школьный сайт, заказчиком которого является МКОУ СОШ №20. Наличие сайта является обязательным требованием к руководству школы.

Задачи:

1. определение требований к сайту;

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

3. покупка домена и хостинга;

4. разработка эскизов дизайна;

5. верстка, программирование, тестирование;

6. наполнение проекта;

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

8. оптимизация;

9. продвижение сайта.

Объектом исследования является официальный сайт МКОУ СОШ №20.

При создании web-сайта будут использоваться знания по HTML, а для управления сайтом будет использоваться стандартная CMS от Ucozа. В рамках курсовой работы необходимо продемонстрировать:

• знание теоретических основ web-технологий;

• умение использовать графические редакторы для подготовки графического контента;

• умение готовить текстовый контент для размещения на страницах сайта;

• умение проводить поиск и анализ информации.

.

1. JavaScript

1.1 Общие сведения

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

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

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

При генерации страниц в Web возникает дилемма, связанная с архитектурой "клиент-сервер". Страницы можно генерировать как на стороне клиента, так и на стороне сервера. В 1995 году специалисты компании Netscape создали механизм управления страницами на клиентской стороне, разработав язык программирования JavaScript.

Таким образом, JavaScript - это язык управления сценариями просмотра гипертекстовых страниц Web на стороне клиента. Если быть более точным, то JavaScript - это не только язык программирования на стороне клиента. Liveware, прародитель JavaScript, является средством подстановок на стороне сервера Netscape. Однако наибольшую популярность JavaScript обеспечило программирование на стороне клиента.

Основная идея JavaScript состоит в возможности изменения значений атрибутов HTML-контейнеров и свойств среды отображения в процессе просмотра HTML-страницы пользователем. При этом перезагрузки страницы не происходит.

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

Название "JavaScript" является собственностью Netscape. Реализация языка, осуществленная разработчиками Microsoft, официально называется Jscript. Версии JScript совместимы (если быть совсем точным, то не до конца) с соответствующими версиями JavaScript, т.е. JavaScript является подмножеством языка JScript.

JavaScript стандартизован ECMA (European Computer Manufacturers Association - Ассоциация европейских производителей компьютеров). Соответствующие стандарты носят названия ECMA-262 и ISO-16262. Этими стандартами определяется язык ECMAScript, который примерно эквивалентен JavaScript 1.1. Отметим, что не все реализации JavaScript на сегодня полностью соответствуют стандарту ECMA. В рамках данного курса мы во всех случаях будем использовать название JavaScript.

1.2 Понятие объектной модели применительно к JavaScript

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

· свойства;

· методы;

· события.

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

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

1.2.1 Cвойства

Многие HTML-контейнеры имеют атрибуты. Например, контейнер якоря <A ...>...</A> имеет атрибут HREF, который превращает его в гипертекстовую ссылку:

<A HREF=intuit.htm>intuit</A>

Если рассматривать контейнер якоря <A ...>...</A> как объект, то атрибут HREF будет задавать свойство объекта "якорь". Программист может изменить значение атрибута и, следовательно, свойство объекта:

document.links[0].href="intuit.htm";



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

Для общности картины свойствами в JavaScript наделены объекты, которые не имеют аналогов в HTML-разметке. Например, среда исполнения, называемая объектом Navigator, или окно браузера, которое является вообще самым старшим объектом JavaScript.

1.2.2 Методы

В терминологии JavaScript методы объекта определяют функции изменения его свойств. Например, с объектом "документ" связаны методы open(), write(), close(). Эти методы позволяют сгенерировать или изменить содержание документа. Приведем простой пример:

function hello()

{ id=window.open("","example","width=400, height=150");

id.focus(); id.document.open();

id.document.write("<H1>Привет!</H1>");

id.document.write("<HR><FORM>");

id.document.write("<INPUT TYPE=button VALUE='Закрыть окно' ");

id.document.write("onClick='window.opener.focus();

window.close();'>");

id.document.close();}

В этом примере метод open() открывает поток записи в документ, метод write() осуществляет эту запись, метод close() закрывает поток записи в документ.

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

1.2.3 События

Кроме методов и свойств объекты характеризуются событиями. Собственно, суть программирования на JavaScript заключается в написании обработчиков этих событий.

Например, с объектом типа button (контейнер INPUT типа button - "Кнопка") может происходить событие click, т.е. пользователь может нажать на кнопку.

Для этого атрибуты контейнера INPUT расширены атрибутом обработки события click - onClick. В качестве значения этого атрибута указывается программа обработки события, которую должен написать на JavaScript автор HTML-документа:

<INPUT TYPE=button VALUE="Нажать" onClick=

"window.alert('Пожалуйста, нажмите еще раз');">

Обработчики событий указываются в тех контейнерах, с которыми эти события связаны.

Например, контейнер BODY определяет свойства всего документа, поэтому обработчик события завершения загрузки всего документа указывается в этом контейнере как значение атрибута onLoad.

Примечание. Строго говоря, каждый браузер, будь то Internet Explorer, Netscape Navigator или Opera, имеет свою объектную модель. Объектные модели разных браузеров (и даже разные версии одного) отличаются друг от друга, но имеют принципиально одинаковую структуру. Поэтому нет смысла останавливаться на каждой из них по отдельности. Мы будем рассматривать общий подход применительно ко всем браузерам, иногда, конечно, заостряя внимание на различиях между ними.

1.3 Размещение кода на HTML-странице

Главный вопрос любого начинающего программиста: "Как оформить программу и выполнить ее?". Попробуем на него ответить как можно проще, но при этом не забывая обо всех способах применения JavaScript-кода.

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

· гипертекстовая ссылка (схема URL);

· обработчик события (handler);

· подстановка (entity) (в Microsoft Internet Explorer реализована в версиях от 5.X и выше);

· вставка (контейнер SCRIPT).

В учебниках по JavaScript описание применения JavaScript обычно начинают с контейнера SCRIPT. Но с точки зрения программирования это не совсем правильно, поскольку такой порядок не дает ответа на ключевой вопрос: как JavaScript-код получает управление? То есть каким образом вызывается и исполняется программа, написанная на JavaScript и размещенная в HTML-документе.

В зависимости от профессии автора HTML-страницы и уровня его знакомства с основами программирования возможны несколько вариантов начала освоения JavaScript. Если вы программист классического толка (С, Fortran, Pascal и т.п.), то проще всего начинать с программирования внутри тела документа, если вы привыкли программировать под Windows, то в этом случае начинайте с программирования обработчиков событий, если вы имеете только опыт HTML-разметки или давно не писали программ, то тогда лучше начать с программирования гипертекстовых переходов.

1.4 URL-схема JavaScript

Схема URL (Uniform Resource Locator) - это один из основных элементов Web-технологии. Каждый информационный ресурс в Web имеет свой уникальный URL. URL указывают в атрибуте HREF контейнера A, в атрибте SRC контейнера IMG, в атрибуте ACTION контейнера FORM и т.п. Все URL подразделяются на схемы доступа, которые зависят от протокола доступа к ресурсу, например, для доступа к FTP-архиву применяется схема ftp, для доступа к Gopher-архиву - схема gopher, для отправки электронной почты - схема smtp. Тип схемы определяется по первому компоненту URL: http://intuit.ru/directory/page.html .В данном случае URL начинается с http - это и есть определение схемы доступа (схема http).

Основной задачей языка программирования гипертекстовой системы является программирование гипертекстовых переходов. Это означает, что при выборе той или иной гипертекстовой ссылки вызывается программа реализации гипертекстового перехода. В Web-технологии стандартной программой является программа загрузки страницы. JavaScript позволяет поменять стандартную программу на программу пользователя. Для того чтобы отличить стандартный переход по протоколу HTTP от перехода, программируемого на JavaScript, разработчики языка ввели новую схему URL - JavaScript:

<A HREF="JavaScript:JavaScript_код">...</A>

<IMG SRC="JavaScript:JavaScript_код">



В данном случае текст "JavaScript_код" обозначает программы-обработчики на JavaScript, которые вызываются при выборе гипертекстовой ссылки в первом случае и при загрузке картинки - во втором. Например, при нажатии на гипертекстовую ссылку Внимание!!! можно получить окно предупреждения:

<A HREF="JavaScript:alert('Внимание!!!');"> Внимание!!!</A>

А при нажатии на кнопку типа submit в форме можно заполнить текстовое поле этой же формы:

<FORM NAME=f METHOD=post

ACTION="JavaScript:window.document.f.i.VALUE=

'Нажали кнопку Click';void(0);">

<TABLE BORDER=0>

<TR>

<TD><INPUT NAME=i></TD>

<TD><INPUT TYPE=submit VALUE=Click></TD>

<TD><INPUT TYPE=reset VALUE=Reset></TD>

</TABLE>

</FORM>

В URL можно размещать сложные программы и вызовы функций. Следует только помнить, что схема JavaScript работает не во всех браузерах, а только в версиях Netscape Navigator и Internet Explorer, начиная с четвертой.

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



1.5 Обработчики событий

Такие программы, как обработчики событий (handler), указываются в атрибутах контейнеров, с которыми эти события связаны. Например, при нажатии на кнопку происходит событие click:

<FORM><INPUT TYPE=button VALUE="Кнопка" onсlick=

"window.alert('intuit');"></FORM>

1.6 Иерархия классов

Объектно-ориентированный язык программирования предполагает наличие иерархии классов объектов. В JavaScript такая иерархия начинается с класса объектов Window, т.е. каждый объект приписан к тому или иному окну. Для обращения к любому объекту или его свойству указывают полное или частичное имя этого объекта или свойства объекта, начиная с имени объекта старшего в иерархии, в который входит данный объект:

Рисунок 1 - Иерархия классов



Сразу оговоримся, что приведенная нами схема объектной модели верна для Netscape Navigator версии 4 и выше, а также для Microsoft Internet Explorer версии 4 и выше. Еще раз отметим, что объектные модели у Internet Explorer и Netscape Navigator совершенно разные, а приведенная схема составлена на основе их общей части.

Вообще говоря, JavaScript не является классическим объектным языком (его еще называют облегченным объектным языком). В нем нет наследования и полиморфизма.

Программист может определить собственный класс объектов через оператор function, но чаще пользуется стандартными объектами, их конструкторами и вообще не применяет деструкторы классов. Это объясняется тем, что область действия JavaScript-программы обычно не распространяется за пределы текущего окна.

Иногда у разных объектов JavaScript бывают определены свойства с одинаковыми именами.

В этом случае нужно четко указывать, свойство какого объекта программист хочет использовать. Например, Window и Document имеют свойство location. Только для Window это место - Location, а для Document - строковый литерал, который принимает в качестве значения URL загруженного документа.

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

Например, для всех объектов по умолчанию определен метод преобразования в строку символов: toString(). В примере с location, если обратиться к window.location в строковом контексте, будет выполнено преобразование по умолчанию, и программист этого не заметит:



<SCRIPT>

document.write(window.location);

document.write("<BR>");

document.write(document.location);

</SCRIPT>

Однако разница все-таки есть, и довольно существенная. В том же примере получим длины строковых констант:

<SCRIPT>

w=toString(window.location);

d=toString(document.location);

h=window.location.href;

document.write(w.length);

document.write(d.length);

document.write(h.length);

</SCRIPT>

Как легко убедиться, при обращении к свойству объекта типа URL, а свойство location как раз является объектом данного типа, длина строки символов после преобразования будет другой.

1. 

2. Разработка Web-сайта МКОУ СОШ №20

2.1 Требования закона РФ к школьному сайту

Законы РФ	Название	Содержание, комментарии
152-ФЗ от 27.07.2006г. (вступает в силу с 01.07.2011г.)	Персональные данные	Любая информация, относящаяся к определенному или определяемому на основании такой информации физическому лицу (субъекту персональных данных), в том числе его фамилия, имя, отчество, год, месяц, дата и место рождения, адрес, семейное, социальное, имущественное положение, образование, профессия, доходы, другая информация.
	Конфиденциальность персональных данных	Обязательное для соблюдения оператором или иным получившим доступ к персональным данным лицом требование не допускать их распространение без согласия субъекта персональных данных или наличия иного законного основания
	Информационная система персональных данных	Информационная система персональных данных (ИСПДн) - информационная система, представляющая собой совокупность персональных данных, содержащихся в базе данных, а также информационных технологий и технических средств, позволяющих осуществлять обработку таких персональных данных с использованием средств автоматизации или без использования таких средств.
	Классификация информационной системы персональных данных (ИСПДн)	Порядок классификации определен приказом ФСТЭК России, ФСБ России и Мининформсвязи России № 55/86/20 от 13 февраля 2008 г. Оператор формирует комиссию (приказом руководителя организации), которая после анализа исходных данных принимает решение о присвоении ИСПДн соответствующего класса КЛАССЫ БЕЗОПАСНОСТИ класс 1 (К1) - информационные системы, государственных спец. служб; класс 2 (К2) - информационные системы, крупных банков, операторов телекомов, сотовой связи и т.п.; класс 3 (К3) - информационные системы, интернет-магазины, службы и сервисы; класс 4 (К4) - информационные системы, для которых нарушение заданной характеристики безопасности персональных данных, обрабатываемых в них, не приводит к негативным последствиям для субъектов персональных данных.
293-ФЗ от 8.11.2010 г (вступил в силу с 01.01.2011г.)	О внесении изменений в отдельные законодательные акты РФ в связи с совершенствованием контрольно надзорных функций и оптимизацией предоставления государственных услуг в сфере образования	Образовательное учреждение обеспечивает открытость и доступность следующей информации: Сведения о дате создания образовательного учреждения (Дата регистрации, дата аккредитации или дата получения лицензии); О структуре образовательного учреждения; о реализуемых основных и дополнительных образовательных программах с указанием численности лиц, обучающихся за счет средств соответствующего бюджета бюджетной системы Российской Федерации, по договорам с физическими и (или) юридическими лицами с оплатой ими стоимости обучения; О персональном составе педагогических работников с указанием уровня образования и квалификации; О материально-техническом обеспечении и об оснащенности образовательного процесса (в том числе о наличии библиотеки, общежитий, спортивных сооружений, об условиях питания, медицинского обслуживания, о доступе к информационным системам и информационно-телекоммуникационным сетям); Порядок оказания платных образовательных услуг, в том числе образец договора об оказании платных образовательных услуг, с указанием стоимости платных образовательных услуг;

2.2 Техническое задание на создание сайта школы №20

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

Сайт:

1. Кроссбраузерная (IE, Opera, Mozilla обязательно) верстка! Сайт должен быть «резиновым». На всю ширину страницы.

2. На данный момент требуется создать обычный динамический сайт на любой известной, стабильной и удобной CMS со стандартными модулями вроде статей (новостей), фотоальбома + некоторые дополнительные функции:

a. Расписание. На странице с расписанием - выбор класса, при выборе должна открываться красивая удобочитаемая табличка с расписанием.

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

Статья здесь представляет собой текст с картинками с полным форматированием. С названием. Зарегистрированные пользователи могут оставлять комментарии.

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

В предпросмотре статей ссылочка «Подробнее».

На сайте должна быть возможность создания неограниченного числа страниц.

Для администратора:

1. Добавлять/изменять/удалять/менять местами (вверх или вниз) статьи (новости): текст с картинками с полным форматированием. С названием.

2. Добавлять/изменять/удалять/менять местами (вверх или вниз) фотографии в основном фотоальбоме.

3. Добавлять/изменять/удалять/менять местами (вверх или вниз) пункты меню сайта, заголовки.

4. Добавлять/изменять/удалять расписание работы школы (пока - для учеников). Расписание загружается на сайт в виде .doc файла, в файле таблица. Файл конвертируется в понятный сайту формат и таблица (уже на сайте) может подлежать изменению. Также можно создать новую таблицу без конвертирования.

5. Добавлять/изменять/удалять шаблоны дизайна.

6. Возможность добавлять какие-либо новые разделы на сайт, в общем дизайне.

Для модераторов:

1. Добавлять/изменять/удалять/менять местами (вверх или вниз) статьи (новости): текст с картинками с полным форматированием. С заголовком.

2. Добавлять/изменять/удалять/менять местами (вверх или вниз) фотографии в основном фотоальбоме.

3. Добавлять/изменять/удалять расписание работы школы (пока - для учеников).

2.3 Создание сайта в системе Ucoz

1. На сайте Ucoz.ru, нажать кнопку «Создать сайт», которая является и ссылкой на регистрацию (не зарегистрированным/не авторизованным), и ссылкой на создание сайта.

2. В открывшейся странице регистрации заполняем все обязательные поля.

3. На указанный вами электронный ящик придёт письмо о том, что «кто-то использовал этот адрес электронной почты при регистрации.

4. Откроется система для создания сайтов. Появляется окно, в котором надо ввести пароль для Панели Управления сайтами (ПУ) (Рисунок 2).



Рисунок 2 - Панель для установки пароля ПУ

5. Введя логин и пароль от аккаунта Unet (вводился при регистрации) И пароль от вебтопа (тот самый для ПУ), откроется окно, уже для создания сайта.

6. Заполняем адрес сайта, выбираем доменное имя и соглашаемся с правилами хостинга (Рисунок 3).

Рисунок 3 - Панель выбора доменного имени



7. Открывается главная страница ПУ. Здесь нас просят ввести Название сайта, выбрать дизайн и язык, на котором будет ваш будущий сайт.

Выбираем модули, которые нужны на вашем сайте. Позже, остальные модули, можно будет активировать в ПУ сайтом. Ставим «галки» напротив модулей, которые хотите видеть на сайте. Все!

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

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

Критерии технологичности:

• скорость загрузки страниц сайта;

• оптимальный необходимый объём информационного ресурса для размещения материалов.

Критерии функциональности:

• дизайн сайта должен быть удобен для навигации;

• доступность информации сайта;

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

• читаемость примененных шрифтов;

• разнообразие информации, адресованной различным категориям пользователей

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

Сайт будет состоять из трех колонок.

Центральная колонка для различного рода информации: новостей, статей, картинок и т.д.

Слева меню сайта, подпункты меню, в общем, функциональная часть сайта.

В крайней правой колонке будет располагаться дополнительная информация: полезные ссылки, календарь и т. д (Рисунок 4).

Рисунок 4 - Эскиз страницы сайта

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

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

В самый верх сайта, в так называемую шапку, помещаем заранее подготовленный файл logo.jpg (рисунок 5).

Рисунок 5 - Файл logo.jpg

В левом столбце сайта создаем блок с меню сайта. Остальные задуманные добавляем стандартные блоки через админ панель.

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

Меню является отражением структуры сайта (Рисунок 6).

Рисунок 6 - Структура меню

В крайнем правом столбце добавляем блок «Полезные ссылки», ссылки будут в виде баннеров (рисунок 7). Остальные блоки из столбца стандартными.



Рисунок 7 - Панель «Полезные ссылки»

Процесс тестирования проходит в несколько этапов:

1. сохранение данных в редакторе.

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

3. в процессе проверки орфографии были допущены ошибки. Изменения были внесены в окно редактора и сохранены.

4. для просмотра изменений снова открываем страницу в окне браузера. Если снова обнаружились недочеты необходимо вернуться к пункту 3.

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

Работа гиперссылок:

С главной страницы можно перейти на страницы:

1. Главная страница

2. Информация об учреждении

3. Итоговая аттестация

4. График заездов 2013!

5. Образовательная деятельность

6. Комплектование первых классов

7. Информация для родителей

8. Памятки

9. Фотоальбомы

10. Статьи

11. Гостевая книга

12. Школьная форма

13. Контакты

При нажатии на перечисленные выше ссылки можно перейти на интересующую страницу со страницы «Главная».

2.6 Наполнение проекта и опытная эксплуатация

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

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

1. Информация о школе:

· Историческая справка о школе.

· Месторасположение и история села (деревни), где находится образовательное учреждение.

· Школа сегодня.

· Направление работы школы.

· Режим работы образовательного учреждения

2. Новости.

· Раскрывают последние события, которые произошли в школе, в жизни учеников и учителей (обновляется не реже чем 1 раз в две недели).

3. Раздел «Документы»

· Устав образовательного учреждения

· Лицензия

· Публичный доклад директора

· Программа развития

· Образовательная программа

· План работы школы на учебный год

· Программы элективных курсов

· Программы объединений (дополнительное образование детей)

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

4. Методическая работа.

· структура

· опыт

· семинары, методические объединения, мастер-классы

· олимпиады, конкурсы

· Методические разработки

· фотогалерея

5. Воспитательная работа

· структура

· опыт

· семинары, мастер-классы

· конкурсы

· Методические разработки

· фотогалерея

6. Раздел писем и обращений к администрации.

Служит для личной связи с администрацией школы:

· Фамилия, имя, отчество работника администрации образовательного учреждения

· Телефон для связи

· e-mail

7. Раздел достижений учащихся и учителей школы.

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

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

2.7 Оптимизация

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

Мета-теги Сейчас большая часть веб-мастеров используют 2 главных мета-тега: description и keywords. Прописываются они в коде страницы между тегами <head> и </head>.

Вид кода для этих тегов:

<meta name="description" content="Официальный сайт школы №20" />

<meta name="keywords" content="Первоуральск, школа №20"/>

Основные CMS сами генерируют мета-теги страниц, но для uCoz полезно самим сделать эту процедуру. Если на всех страницах будут одинаковые мета-теги, то поисковая система может искусственно занизить в выдаче страницы с такими тегами. Чтобы избежать таких проблем необходимо прописывать для каждой страницы разные мета-теги. Для главной страницы нужно разместить такие мета-теги:

<meta name="description" content="Первоуральск школа №20 $ENTRY_TITLE$" />

<meta name="keywords" content="$ENTRY_TITLE$, $CAT_NAME$" />

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

$ENTRY_TITLE$ / $CAT_NAME$

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

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

<a href=” http://olimp20.ucoz.ru/ ” title=”Первоуральск школа №20”></a>

Семантическое ядро. Нужно отобрать ключевые запросы, по которым хотелось бы видеть сайт в топе. Обычно, опытные seo-мастера делают в районе 5 тысяч таких запросов, из которых выбирается в районе 30-50 для дальнейшего продвижения. Наша задача собрать список ключей, по которым мы будем продвигать сайт. Когда будет готов список ключей - разместим их в мета-тегах. Wordstat от Яндекса - удобное средство для составления семантического ядра.

Выводы:

• каждая страница сайта должна иметь уникальные мета-теги, соответствующие содержанию страницы;

• каждая ссылка на сайте должна иметь описание;

• важно добиваться малого числа внешних ссылок;

• код должен быть простой и качественный.

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

Зарегистрировать сайт в поисковых системах можно, только если сайту исполнился 1 месяц с момента регистрации.

Каждая система требует проверку прав на сайт, проходим ее.

1. Зарегистрируем свой сайт на http://Yandex.ru

Для этого зайдём на Webmaster Yandex по ссылке: http://webmaster.yandex.ru/.

Вводим название сайта. Сайт будет добавлен на рассмотрение (Для регистрации сайта надо иметь свой профиль).

2. Зарегистрируем свой сайт на http://Mail.ru

Для этого переходим на Go Mail Webmaster по ссылке http://webmaster.mail.ru/.

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

3. Зарегистрируем сайт на http://Google.ru

Для этого переходим на Webmaster Google по ссылке http://www.google.ru/addurl/.



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

Целью данного курсового проекта было создание сайта МКОУ СОШ №20.

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

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

Данный сайт создавался в системе uCoz. Поскольку работать в данной системе раньше не доводилось, пришлось начинать всё с нуля и учиться работать в ней в очень сжатые сроки.

В ходе работы стало ясно, что профессия web-дизайнер достаточно сложна, ведь при создании сайта нет мелочей.

Работа над данным сайтом будет продолжаться и дальше. Есть ещё много нерешённых проблем.

Адрес сайта: http://olimp20.ucoz.ru/.



Список использованной литературы

Электронные источники:

1. JavaScript; режим доступа: http://ru.wikipedia.org/wiki/JavaScript; (дата обращения 20.05.2013);

2. Верстка и программирование; режим доступа: http://www.orweb.ru/programmirovanie; (дата обращения 01.06.2013);

3. Внутренняя оптимизация сайта на uCoz - это просто!; режим доступа: http://manual.ucoz.net/board/41-1-0-188; (дата обращения 11.06.2013);

4. Книга JavaScript; режим доступа: http://ru.wikibooks.org/wiki/Книга_JavaScript; (дата обращения 20.05.2013);

5. Меню сайт; режим доступа: http://www.arisfera.ru/glossary/web/Menju-sajta.html; (дата обращения 11.06.2013);

6. О создании школьного сайта; режим доступа: http://school124.land.ru/files/prikaz24_3.doc; (дата обращения 29.05.2013);

7. Оптимизация сайта Ucoz; режим доступа: http://www.md-money.ru/index/optimizacija_sajta/0-50; (дата обращения 18.06.2013).

8. Программирование сайтов; режим доступа: http://www.divier.ru/uslugi/programmirovanie_saitov/; (дата обращения 11.06.2013);

9. Разработка эскиза одной страницы сайта; режим доступа: http://www.prometsoft.ru/web/design/classic/sketch.php; (дата обращения 10.06.2013);

10. Регистрация сайта в поисковых машинах; режим доступа: http://manual.ucoz.net/board/48-1-0-301; (дата обращения 10.06.2013);

11. Самостоятельное SEO - раскрутка сайта шаг за шагом; режим доступа: http://tutorial.semonitor.ru/; (дата обращения 01.06.2013);

12. Создание сайта в системе Ucoz; режим доступа: http://manual.ucoz.net/board/48-1-0-248; (дата обращения 25.05.2013);

13. Требования закона РФ к школьному сайту; режим доступа: http://www.ural.edusite.ru/p7aa1.html; (дата обращения 25.05.2013);

14. Уроки JavaScript; режим доступа: http://webdizainer-ru.narod.ru/; (дата обращения 24.05.2013);

15. Учебник JavaScript; режим доступа: http://javascript.ru/; (дата обращения 20.05.2013).



Приложение

Структурные элементы станицы сайта



Главная страница



Контакты



Расписание экзаменов, досрочный период



График заездов



Фотоальбомы

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

...