2. Разработка Web – сайта гпоу «Печорский промышленно-экономический техникум»

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

В связи с распоряжениями Министерства образования Республики Коми и на основании проекта приказа Рособрнадзора «Об утверждении требований к структуре официального сайта образовательной организации в сети Интернет и формату представления на нем информации» была разработана следующая структура:

Таблица 1. Структура сайта ГПОУ «ППЭТ»

Раздел	Страница
Главная
Официально	Основные сведения
	Структура
	Документы
	Оценка качества образования
	Образовательные программы
	Педагогический состав
	Материально-техническое обеспечение
	О стипендиях
	Платные услуги
	Финансово-хозяйственная деятельность
	Вакансии учебных мест
Новости
О техникуме	История техникума
	Символика
	Информационный центр
	Виртуальная экскурсия
	Доска почета
	Достижения
Абитуриенту	Прием на 2014-2015 учебный год
	Контрольные цифры приема
	Социальная поддержка
	Профессиограммы
	Общежития
	Советы психолога
Педагогу	Аттестация
	Деятельность ПЦК
	Методическая работа
	Исследовательская деятельность
	Инновационная деятельность
	Советы психолога
	Новости образования
Студенту	Специальности СПО
	Профессии СПО
	Заочное отделение
	Самоуправление
	Волонтерское движение
	Спортивная жизнь
	Исследовательская деятельность
	Досуг
	Советы психолога
	Доска почета
Выпускнику	ЦСТВ
	Нормативно-правовая база
	Социальные партнеры
	Советы выпускнику
	Работодателю
	В поисках работы
	АИСТ
Наши координаты
Обращения граждан
Полезные ресурсы
Медиатека
Расписание занятий
ВУЗы Республики Коми
Дополнительное профессиональное образование
Обратная связь

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

Рисунок 1. Пример разделения страницы на подпункты.

Такое расположение контента достаточно удобно и понятно для посетителей сайта.

Использование подпунктов (списков) в разработке структуры, сделало сайт техникума довольно простым и удобным в использовании, а анимационное CSS позиционирование отступа списков делает сайт внешне интересным.

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

Каждое структурное подразделение техникума предоставляет информацию по определенному разделу сайта.

Так, например, контент (содержимое, информационное наполнение сайта) с главной страницы предоставляется директором ГПОУ «ППЭТ» Паншиной Н.Н.

В разделе сайта «О техникуме» содержится информация, которую предоставляют руководители по воспитательной работе. Руководители учебной работы предоставляют всю необходимую информацию по разделу «Абитуриенту».

Методические материалы для обновления раздела сайта «Педагогу» даны методистами и заместителем директора по методической работе.

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

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

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

Основные особенности написания кода.

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

Так например, для того чтобы браузер мог интерпретировать код и отображать данную веб-страницу необходимо в первой строке кода документа прописать элемент <!DOCTYPE>.

Для некоторых тегов необходимо указывать атрибуты. Например, нельзя просто указать тег<style>, необходимо писать<style type="text/css">.

Правильное вложение тегов также влияет на корректность отображения сайта.

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

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

• пересечение тегов, например: <strong><em>текст</strong></em>. Здесь закрывающий тег </strong> помещается в контейнер <em>, тогда как он должен следовать только после тега</em>;

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

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

Также необходимо указывать в кавычках значения атрибутов тега.

Связь элементов сайта.

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

Организация файлов и папок на сайте техникума выглядит так:

Главная страница(main), в ее состав входят «шапка» сайта (header) и «подвал»(footer).