Разработка web-сайта Хохольского лицея

 

Цель практической работы: создание сайта для Хохольского лицея, с соблюдением основных этапов разработки.

 

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

 

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

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

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

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

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

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

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

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

 

Регистрация доменного имени и хостинг сайта

 

Для регистрации доменного имени используем хостинг globatel.ru. Данный хостинг был выбран из-за достаточно большого дискового пространства за 99 рублей в месяц и из-за того, что на любых тарифных планах этого хостинга доменное имя в зоне «ru» предоставляется бесплатно. Доменное имя, которое мы выбрали hohollicey.ru

 

Планирование структуры сайта. Разработка дизайна. Верстка разработанного макета

 

Для удобства пользователя создаем схему навигации:

 

Таблица 1 - Схема навигации

Пункт	Ассоциированная html-страница
Главная	index.htm
История лицея	history.htm
Педагогический коллектив	collective.htm
Внеурочная деятельность	out_lessons.htm
Информация для родителей	info.htm

 

Дизайн страницы

Для реализации навигации в html необходимы следующие теги:

< ul> - маркированный список

< li> - новый элемент маркированного текста

< a href=example.com> Example< /a> - ссылка

< h3> - заголовок третьего уровня

< p align=<! --Сторона выравнивания--> - выравнивыание текста

Реализуем навигацию на языке html:

 

< h3> < p align=center> Навигация< /p> < /h3>

< ul>

< li> < a href = " index.htm" > Главная< /a>

< li> < a href = " history.htm" > История лицея< /a>

< li> < a href = " collective.htm" > Педагогический коллектив< /a>

< li> < a href = " out_lessons.htm" > Внеурочная деятельность< /a>

< li> < a href = " info.htm" > Информация для родителей< /a>

< /ul>

 

Далее создаем макет страницы. Для удобства разметки составляем автоматически растягивающююся таблицу:

 

Шапка сайта
Навигация	Основной текст

Пространство Логотип заполняем изображением licey.jpg (в архиве-приложении), пространство Навигация заполняем розовым цветом, пространство Основной текст - оранжевым.

Для реализации макета в html необходимы следующие теги:

< meta> - метаданные о странице

< body> - начало основной части страницы, цвет страницы

< table> - создание таблицы

< tr> - создание новой строки

< td> - создание нового столбца

< img src=Картинка> - вставка изображения

Реализуем макет на языке html:

 

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.1//EN" " http: //www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >

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

< head>

< meta http-equiv = " content-Type" content = " text/html; charset=windows-1251" />

< title> История лицея< /title>

< /head>

< body bgcolor = " #FFDAB9" >

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

< tr>

< td colspan = " 2" >

< img src = " images/licey.jpg" width = " 100%" height = " 350" alt = " Шапка сайта" />

< /td>

< /tr>

< tr>

< tr>

< td style = " width: 20%; " valign = " top" bgcolor = " FFCCFF" >

< h3> < p align=center> Навигация< /p> < /h3>

< ul>

< li> < a href = " index.htm" > Главная< /a>

< li> < a href = " history.htm" > История лицея< /a>

< li> < a href = " collective.htm" > Педагогический коллектив< /a>

< li> < a href = " out_lessons.htm" > Внеурочная деятельность< /a>

< li> < a href = " info.htm" > Информация для родителей< /a>

< /ul> < /td>

< td style = " width: 80%; " >

<! --Основной текст-->

< /table>

< p style = " text-align: center; " > & copy; Home 2011. Все права защищены< /p>

< /body>

< /html>

 

Реализация дизайна и верстка контента завершена.

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

 

Для наполнения сайта контентом необходимо:

)   Исходные тексты. Они находятся в Word-документе Исходник.doc (Приложение 1).

)   Теги для правильной вставки текста:

< h3> - заголовок третьего уровня

< p align=<! --Сторона выравнивания--> - выравнивыание текста

< br> - перенос на новую строку

< h<! --n--> > - заголовок n-го уровня

< p> - создание абзаца

< font> - настройка шрифта

& copy - знак ©

Страницы сайта содержат следующий контент:

Главная - основная страница, с общими данными о лицее.

История лицея. Здесь описаны этапы развития лицея и его первые директора.

Педагогический коллектив. Здесь представлена администрация лицея и учителя.

Внеурочная деятельность. Этот раздел посвещён воспитательной и досуговой деятельности.

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

Исходные тексты находятся в Приложении 2.

Интеграция сверстанного макета в систему управления сайтом

 

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

Тестирование сайта. Публикация сайта в Интернет

 

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

Мы протестировали сайт в следующих браузерах: Mozilla firefox, Google Chrome, Internet Explorer. Во всех этих браузерах сайт отображается корректно.

⇐ Предыдущая1234Следующая ⇒

Поделиться: