Проектирование сайта | Создание сайта | Дипломные работы

Дипломная работа «Разработка сайта МБОУ на примере МБОУ СОШ №5 г. Южно – Сахалинск»

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

Содержание

Введение

Глава 1. Анализ деятельности организации. Особенности сайтов образовательных учреждений

1.1. Описание предприятия

1.2. Сайты образовательных учреждений

1.2.1. Виды и характеристики сайтов

1.2.2. Особенности информационного сайта школы

1.2.3. Разработка структуры сайта

Глава 2. Проектирование сайта

2.1. Этапы проектирования сайта

2.1.1. Инструменты создания сайта

2.1.2. Создание проекта. Организация структуры директорий и файлов

2.2. Создание сайта

Заключение

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

Приложения

Введение

Глобальное развитие информационных технологий привело в последнее десятилетие к их стремительному проникновению в сферу образования. В школе изменилось понятие обучения: усвоение знаний уступает место умению пользоваться информацией, получать ее из различных источников. Учителям следует осознавать, что сейчас, в условиях развития постиндустриального общества, происходит интеграция образовательной среды в глобальное информационное пространство, и, если будут упущены определенные шаги в данном направлении, то такой важный институт, как школа может остаться вне рамок развития современного общества [8].

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

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

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

Целью работы является создание сайта школы.

Исходя из вышеописанной цели составим следующие задачи:

  • изучить деятельность МБОУ СОШ №5;
  • определить характеристики и особенности сайтов;
  • создать сайт для МБОУ СОШ №5.

Объект работы: сайт школы.

Предмет работы: сайт МБОУ СОШ №5.

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

Глава 1. Анализ деятельности организации. Особенности сайтов образовательных учреждений

1.1. Описание предприятия

Полное наименование организации: Муниципальное бюджетное общеобразовательное учреждение средняя общеобразовательная школа № 5 города Южно-Сахалинска.

Краткое наименование организации: МБОУ СОШ № 5 г. Южно-Сахалинска. Дата создания организации: 28.01.1963. Место нахождения: 693005, Россия, г. Южно-Сахалинск, ул. Курильская, д. 54.

Администрация:

Директор — Жуковская Светлана Ефремовна.

Заместитель директора по учебно-воспитательной работе — Кузьминых Надежда Георгиевна.

Заместитель директора по учебно-воспитательной работе — Чубарова Елена Александровна.

Заместитель директора по учебно-воспитательной работе — Иванькина Наталья Викторовна.

Заместитель директора по учебно-воспитательной работе — Уза Татьяна Николаевна.

Адрес электронной почты: school5@yuzhno-sakh.ru. Адрес сайта школы: http://sakh-school-5.ru.

Учредители образовательной организации. Администрация г. Южно-Сахалинска Департамент образования. Место нахождения: 693000, Россия, г. Южно-Сахалинск, ул. Ленина, 172. Начальник Департамента образования: Киктева Анастасия Николаевна. Адрес электронной почты: doys@yuzhno-sakh.ru. Адрес официального сайта: http://doys.ru.

На рис. 1. показана структура и органы управления МБОУ СОШ №5.

Здание МБОУ СОШ №5 трехэтажное, 1963 года постройки, общая площадь. Форма владения – оперативное.

Свидетельство о государственной регистрации права 65АА 081509 от 16.04.2005 г.

Материально-техническая база отвечает требованиям, обеспечивающим полноценное осуществление учебно-воспитательного процесса.

Структура МБОУ СОШ №5
Рисунок 1 – Структура МБОУ СОШ №5

В школе функционируют:

  • 26 кабинетов, все кабинеты оснащены компьютерами, мультимедийными проекторами, 19 кабинетов оснащены интерактивными досками;
  • 2 компьютерных класса;
  • спортивный зал;
  • танцевальный зал;
  • библиотека;
  • актовый зал,
  • медицинский, процедурный кабинеты;
  • буфет и обеденный зал на 100 мест;
  • игровая комната;
  • кабинет психолога.

Создана локальная сеть, педагоги и учащиеся и имеют возможность пользоваться Интернет-ресурсами.

Территория школы оборудована спортивной площадкой.

Организация образовательного процесса в МБОУ СОШ №5

1. Форма получения и язык обучения:

  • Образовательные программы осваиваются в МБОУ СОШ № 5 г. Южно-Сахалинска в очной и очно-заочной форме. Обучение ведется на русском языке.

2. Численность обучающихся по реализации образовательных программ:

  • Численность обучающихся за счет средств местного бюджета согласно муниципального задания на 2016 года составила 672 человек.

3. Уровни и сроки получения образования:

  • МБОУ СОШ № 5 осуществляет образовательный процесс в соответствии с уровнем образовательных программ общего образования:

— I уровень – начальное общее образование (нормативный срок освоения 4 года);

— II уровень – основное общее образование (нормативный срок освоения 5 лет);

— III уровень среднее общее образование (нормативный срок освоения 2 года).

Для первого уровня обучения:

a) 4-х летний срок освоения образовательных программ начального общего образования за 1-4 класс;

b) Продолжительность уроков 2-4 классов до 45 минут;

c) Для 1-4 классов пятидневная неделя.

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

1. Русский язык;

2. Литература;

3. Чтение;

4. Английский язык;

5. Математика;

6. Окружающий мир;

7. Музыка;

8. ИЗО;

9. Технология;

10. Информатика (в качестве учебного модуля);

11. Физическая культура.

Для второго уровня обучения:

a) 5-ти летний срок освоения образовательных программ основного общего образования для 5-9 классов;

b) Продолжительность уроков в 5-9 классах — не более 45 минут;

c) Для 5-8 классов пятидневная неделя;

d) 9-е классы – шестидневная неделя.

Домашние задания задаются обучающимся с учетом возможности их выполнения в следующих пределах:

a) В 5 кл – до 2 часов;

b) В 6-8 – до 2,5 часов;

c) В 9-х — до 3,5 часов.

Обязательные предметные области учебного процесса:

1. Русский язык;

2. Литература;

3. Английский язык;

4. Математика;

5. Информатика и ИКТ;

6. История;

7. Обществознание;

8. География;

9. Природоведение;

10. Физика;

11. Химия;

12. Биология;

13. Технология;

14. ОБЖ;

15. Физическая культура;

16. ИЗО;

17. Музыка (5-8 класс);

18. Элективные курсы (9 класс).

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

1. 2-х летний срок освоения образовательных программ среднего общего образования;

2. Продолжительность урока в 10-11 классах – не более 45 минут;

3. Домашние задания задаются обучающимся с учетом возможности их выполнения — до 3,5 часов.

На третьем уровне вводится профильное обучение. Учебный план разработан в соответствии с концепцией профильного обучения на старшем уровне общего образования и на основе примерного учебного плана для некоторых возможных профилей. (Приказ Министерства образования РФ №1312 от 09.03.2004 года).

Промежуточная аттестация обучающихся во 2-4 классах проводится 2 раза в год по предметным областям: математике и русскому языке в форме комплексной контрольной работы. Промежуточная аттестация обучающихся в 1 классе проводится 1 раза в год (по окончанию учебного года) по предметным областям: математике и русскому языке в форме комплексной контрольной работы. Промежуточная аттестация во 5 – 8,10-х проводится 2 раза в год по

русскому языку и математике в декабре и апреле – мае текущего года в форме тестирования, промежуточная аттестация в 9-х классах проводится в декабре, марте текущего года по русскому языку и математике. Форма промежуточной аттестации – тестирование в формате ОГЭ (в соответствии с Положением МБОУ СОШ № 5 «О формах, периодичности и порядке текущего контроля успеваемости и промежуточной аттестации обучающихся».

Государственная (итоговая) аттестация в 9,11-х классах проводится в сроки, установленные Министерством образования и науки РФ.

1.2. Сайты образовательных учреждений

1.2.1. Виды и характеристики сайтов

Сайты делятся на следующие виды (категории):

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

Сайт-визитка используется организациями и частными лицами.

Корпоративный информационный web-сайт – необходим для автоматизации внутреннего документооборота, учёта показателей компании, управления персоналом.

Корпоративный информационный web-сайт:

а)      может быть оснащён функциями обмена информацией между удалёнными филиалами;

б)      корпоративный сайт позитивно влияет на имидж компании и репутацию;

в)      дизайн должен соответствовать фирменному стилю компании;

г)       чаще всего, включает «администраторскую часть» для создания и изменения контента, которая позволяет менеджеру или секретарю компании добавлять или менять новости, информационные статьи, справочную и прочую информацию на сайте;

д)      основной упор идет на текст, графика используется по минимуму.

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

Интернет-магазин, он же сетевой магазин, электронный магазин, Internet shop, E-shop – интерактивный веб-сайт, рекламирующий товары или услуги, принимающий заказы на покупку, предлагающий пользователю выбор варианта расчета, выписывающий счет на оплату, служащий одновременно подтверждением заказа.

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

Игровой портал – сложный развлекательный интерактивный проект, который предусматривает большую посещаемость и ресурсоемкость.

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

Контент-проект – это сайт, как правило, некоммерческой направленности, который предоставляет собрание текстов, статей и прочих материалов. Основной задачей является привлечение посетителей по определенной тематике. Далее этот трафик перенаправляется на коммерческие сайты и, по сути, контент-проект используется, как рекламная площадка.

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

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

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

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

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

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

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

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

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

Блог часто используется для общения людей, которые объединены общими интересами, и поэтому это напоминает форум.

1.2.2. Особенности информационного сайта школы

Сегодня официальный сайт большинства школ в сети Интернет — это прежде всего источник официальной информации об учебном заведении и педагогический коллектив. Основной функцией школьного сайта, является предоставление посетителям как можно больше информации о школе; сообщение актуальной информации для учащихся и их родителей [13].

Сайт — это возможность заинтересованным посетителям задать вопрос учителям и администрации, а также получить квалифицированный ответ. Это место публикации работ учащихся и педагогов [13].

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

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

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

2.      Сайт как координационная точка внутришкольного взаимодействия [18]. Сайт способен предоставить межпользовательским взаимосвязям несколько иной характер. Например, когда сайт используется для «анонимного» общения, создавая возможность ученикам задавать вопросы в кризисных, критических ситуациях. Потребность у детей в таком общении есть, но они не всегда готовы к открытому диалогу в стенах школы. Безусловно, что такой диалог должен вести подготовлен в педагогической команде специалист, которого уважают и которому доверяют ученики школы.

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

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

  • В каком направлении осуществляется развитие школы?
  • Какая ценностная основа, педагогическая, методическая концепция (идея, кредо) школы?
  • В чем состоит характерное отличие от других школ?

Созданное пространство общения на сайте школы может служить показателем для профессиональной рефлексии администратора и педагога, предоставлять интересный диагностический материал для осмысления деятельности. Школьный сайт может стать коммуникативным инструментом в общении с «внешними» субъектами — родителями, работниками образования и культуры. В этом качестве школьный сайт способствует повышению открытости учебного заведения, создает такие контактные возможности, которые в off-line часто имеют определенные затруднения.

3.      Школьный сайт как элемент глобальной Интернет-системы [18]. В этом качестве сайт может быть одним из информационных субъектов единого информационного образовательного пространства города, региона. И эта проблема является самой важной, ведь она может быть решена при условии наличия в коллективе работников с определенными индивидуальными возможностями.

Как только сайт станут посещать в Интернете, появится выбор направлений дальнейшей деятельности, которые, кстати, могут предложить гости сайта: принять участие в совместных учебных проектах, в Интернет-конкурсах, Интернет-конференциях, совместных выпусках газет, обсуждении проблем на страницах сайтов [9].

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

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

Основные группы заинтересованных посетителей школьного сайта: ученики школы; остальные школьники города учителя школы; остальные работники образования; родители учеников школы; остальные родители.

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

Немногочисленная, но в то же время заинтересованная аудитория — это люди, непосредственно связанные со школой. К тому же проще организовать наполнение сайта материалами, интересными именно этой категории пользователей.

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

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

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

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

1.2.3. Разработка структуры сайта

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

Схематическое изображение иерархической структуры
Рисунок 2 — Схематическое изображение иерархической структуры
Структура разрабатываемого сайта
Рисунок 3 – Структура разрабатываемого сайта

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

Глава 2. Проектирование сайта

2.1. Этапы проектирования сайта

2.1.1. Инструменты создания сайта

За разметку внешнего вида сайта отвечают технологии HTML и CSS. Данные в формате HTML похожи на текстовой файл, за исключением того, что некоторые из символов интерпретируются как разметка. Разметка придает документу некую структуру.

Сам по себе HTML-документ представляет собой текстовый файл, содержащий набор инструкций для представления информации в требуемом виде в окне браузера. Инструкции записываются в виде тегов (читается тэг, от англ. tag) и имеют следующий синтаксис: <имя_тега [возможные параметры]>.

Чтобы указать браузеру место окончания действия того или иного тега, используется закрывающий тег. Это тег, имеющий то же самое имя с прямым слешем ‘/’ перед ним/: <html>HTML-документ</html>.

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

<img src=»image.gif»> — тег для вывода изображения image.gif в окно браузера;

<input type=»text» value=»»> — тег для ввода значений в окне браузера.

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

Как и в любом языке программирования, язык HTML имеет теги для создания комментариев внутри документа, т.е. текст, который имеется в документе, но не выводится браузером на экран. Для создания комментариев используется следующая пара тегов: <!— Комментарий —>.

Имеется ряд тегов, для которых завершающие теги опускаются большинством авторов документов. Например, тег <p> (начало абзаца), как правило, не имеет в документе завершающего тега </p>. Его завершение определяется браузером по «ходу» документа, например, если встретится очередной открывающий тег <p>.

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

При создании HTML-документов рекомендуется соблюдать следующую структуру:

html>

<head>

<!— Раздел заголовка —>

</head>

<body>

<!— Тело документа —>

</body>

</html>

Здесь <html> — это тег, обозначающий начало HTML-документа. Браузер, встретивший данный тег, будет «знать», что представленную ниже информацию следует интерпретировать как HTML-страницу.

Раздел тега <head> может содержать и другие конструкции языка HTML. В конечном итоге разработчик сам решает, что должно быть записано в данном разделе. Он может быть и пустым, т.е. не содержать ничего. Тогда браузер будет руководствоваться своими настройками и алгоритмами при отображении такого документа. Наконец, раздел <head> может совсем отсутствовать и это будет аналогично пустому разделу. Однако при разработке HTML-страницы крайне не рекомендуется пропускать данный раздел и его «минимальная конфигурация» должна иметь следующий вид [15]:

<head>

<title>Заголовок страницы</title>

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

<meta name=»description» content=»описание сайта»>

<meta name=»keywords» content=»ключевые слова»>

</head>

В тегах <body>…</body> заключается отображаемая информация (тело) страницы: текст, изображения, таблицы, звук, видео, объекты (например, flash-проигрыватель), javascript-программы, таблицы стилей (css) [15].

HTML-документ рекомендуется всегда завершать закрывающим тегом </html> и тем самым сигнализировать браузеру о завершении документа. Это полезная информация может быть использована, например, при обрыве связи во время загрузки страницы. Тогда отсутствие тега </html> может означать неполную загрузку страницы. На практике встречается и много других случаев, когда важно иметь корректную разметку страницы для исключения неверного отображения содержания документа в исключительных ситуациях.

Текст HTML-документа, как правило, представляет собой непосредственно текст и ссылки, ведущие либо на отдельные фрагменты того же документа, либо на другие документы (рис. 4).

Структура документа HTML
Рисунок 4 – Структура документа HTML
Пример простого HTML-документа
Рисунок 5 – Пример простого HTML-документа

Для создания заголовков в HTML используются теги:

<h1></h1> — заголовок 1 уровня;

<h2></h2> — заголовок 2 уровня;

<h3></h3> — заголовок 3 уровня;

<h4></h4> — заголовок 1 уровня;

<h5></h5> — заголовок 1 уровня;

<h6></h6> — заголовок 1 уровня.

На рис. 6 показано отображение заголовков разного уровня в браузере.

Отображение заголовков в браузере
Рисунок 6 – Отображение заголовков в браузере

HTML есть возможность создавать нумерованные и маркированные списки [19].

Тег <ol>…</ol> — создает нумерованный список элементов/

Атрибуты:

start=»N» — начать нумерацию с числа N;

type=»…» -определяет формат нумерации:

1 — арабские цифры (по умолчанию);

A — прописные буквы (A, B, C);

а — строчные буквы (a, b, c);

I — прописные римские цифры (I, II, III);

i — строчные римские цифры (i, ii, iii).

Тег <ul>…</ul> — создает маркированный список элементов.

Атрибут:

type=»…» — определяет формат маркера:

disk — диск (по умолчанию);

circle – окружность;

square – квадрат.

<li>…</li> — задает элемент списка в нумерованном или маркированном списке

Атрибуты:

type=»…» — формат номера или маркера (см. описание <ol> и <ul>);

value=»N» — задает номер элемента списка.

Примеры создания отображения списка показаны на рис. 7 – 8.

Создание списка в HTML
Рисунок 7 – Создание списка в HTML
Отображение списка в браузере
Рисунок 8 – Отображение списка в браузере

Для создания ссылок используется тег <a>…</a>.

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

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

Пример для абсолютного адреса:

HTML-код: <А href=»http://www.yandex.ru»>Яндекс</A>

В браузере ссылка обычно представляется как подчеркнутый текст. При клике по ссылке браузер загружает страницу, указанную в атрибуте href (рис. 9).

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

Пример файловой структуры
Рисунок 9 — Пример файловой структуры

Например, чтобы поставить ссылку из файла file1.html на файл file2.html, необходим следующий HTML-код:

<A href=»folder1/file2.html»>file2.html</A>

А чтобы ссылка в файле file2.html указывала на file1.html:

<А href=»../file1.html»>file1.html</A>

Две точки (..) означают переход к родительскому каталогу.

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

Для открытия ссылки в новом окне используется атрибут target со значением _blank.

Пример: <a href=»http://ya.ru/» target=»_blank»>Яндекс</a>

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

CSS используется применительно к языкам разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

Ключевое понятие в CSS — селектор — представляет собой правило для использования стиля. Браузер для каждого элемента пытается применить стиль в соответствии с заданным правилом. Стиль содержит набор свойств.

Различают простые селекторы, которые будут использованы для указанного элемента, в приведенном ниже примере — к любому заголовку h1, h2, h3:

  • h1 {font-family:sans-serif}
  • h2 {font-family:sans-serif}
  • h3 {font-family:sans-serif}

Селекторы групп:

h1, h2, h3 {font-family: sans-serif}

Этот фрагмент эквивалентен предыдущему фрагменту, состоящему из трех простых фрагментов [15].

Селекторы класса:

*.firstclass{ color: green } — все элементы, имеющие class=firstclass

или

.firstclass{ color: green } — все элементы, имеющие class=firstclass

а также

Hl.firstclass{ color: green } — только элементы H1, имеющие class=firstclass

Селекторы идентификатора ID:

  • h1#chapter1 { font-family: sans-serif } — для <h1 id=»chapter1″>…</h1>
  • #chapter1 { font-family: sans-serif } — для любого элемента с id=»chapter1″

Селекторы атрибутов:

  • h1[class] { font-family: sans-serif } — элемент имеет class
  • h1[class=»fancy»] { font-family: sans-serif } — элемент имеет class=»fancy»
  • *[title] { font-family: sans-serif } — любой элемент, имеющий заголовок

Селектор потомков (устанавливает иерархию применения):

tr h1 { font-family: sans-serif } — <tr><td><h1>…</h1></td></tr>

Псевдоклассы (особый вид динамических атрибутов, которые изменяются в зависимости от определенных действий):

  • a:link — ссылки, которые не были посещены
  • a:visited — посещенные ссылки
  • a:hover — выделенная в данный момент ссылка
  • a:active — активные ссылки.

При оформлении страницы доступны следующие семейства (family) шрифтов:

Serif — шрифт с засечками. Обычно используется при бумажной печати. Наиболее используемый шрифт — Times;

Sans-serif — шрифт без засечек. Подходит для заголовков. Наиболее часто применяемые шрифты этого семейства — Arial, Helvetica, Verdana;

Monospace — шрифт, который обеспечивает равную ширину символов. Служит для вывода примеров кода, поскольку внешний вид этого текста будет соответствовать текстовой консоли. Наиболее распространен шрифт Courier;

Fantasy, Cursive — декоративные и курсивные шрифты. Не рекомендуются к применению, поскольку шрифты этой группы необязательно присутствуют в компьютере, на котором будут просматривать html-страницу.

Выбор шрифта осуществляется свойством font-family. Пример использования семейств стилей:

  • <p style=”font-family: serif”>Serif: Образец текста</р>
  • <р style=”font-family: sans-serif”>Sans-serif: Образец текста</p>
  • <p style=”font-family: cursive”>Cursive: Образец текста</p>
  • <p style=”font-family: fantasy”>Fantasy: Образец текста</p>
  • <p style=”font-family: monospace”>Monospace: Образец текста</p>

Свойство font-family может содержать перечисление шрифтов:

p{font-family:”Times New Roman”, Times, serif;}

В этом случае браузер последовательно будет пытаться найти соответствующий шрифт в системе. Если конкретный шрифт не будет найден (в примере «Times New Roman”, Times), то будет применен шрифт, назначенный для serif-семейства по умолчанию [7].

Можно указать начертание шрифта с использованием свойства font-style. Допустимые значения этого свойства:

font-style: normal | italic | oblique | inherit

где normal — обычное начертание; italic — курсив (имитация рукописного шрифта); oblique — наклонный шрифт (образован наклоном обычного).

Размер шрифта задается с помощью свойства font-size. Его возможные значения:

  • larger и smaller — константы, определяющие относительный размер;
  • xx-small, x-small, small, medium, large, x-large, xx-large — константы, определяющие абсолютный размер;
  • ЧИСЛО % — число, определяющее размер в процентах от шрифта родительского элемента;
  • ЧИСЛО px — число, определяющее размер в пикселах. Кроме того, размер шрифта указывается в специальных единицах: em (высота элемента, равная размеру текущего шрифта), ex (высота символа х), пункты (pt).

Толщина шрифта регулируется с помощью свойства font-weight (рис. 13, 14):

font-weight: normal | bold | bolder | lighter | 100, 200.. 900

Здесь normal — обычная толщина; bold — жирный шрифт; bolder — предельно жирный шрифт; lighter — тонкий шрифт; 100 — тонкий шрифт; 400 — соответствует нормальному; 700 — жирному.

Свойство color задает цвет шрифта (рис. 10, 11). Можно указать цвет по его названию на английском языке (red, green, lime) или задать точное значение цвета в системах RGB, HSL, а также в RGBA, HSLA, для которых добавлен канал прозрачности. Полный перечень допустимых значений свойства color приведен в спецификации (см. http://www.w3.org/TR/css3-color/).

Определение стилей для текста в блоке body
Рисунок 10 – Определение стилей для текста в блоке body
Определение стилей для заголовков сайта
Рисунок 11 – Определение стилей для заголовков сайта

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

Используются следующие свойства фона:

  • background-color — однородный цвет константой или кодом в одной из допустимых систем цветности. Пример (рис. 12):

header .navbar-default { background-color: #fff;}

Определение фонового цвета для навигационного меню верхней части сайта
Рисунок 12 – Определение фонового цвета для навигационного меню верхней части сайта
  • background-image — фоновое изображение. Пример:

body {background-image:url(‘paper.gif’);}

  • background-repeat — флаг мозаичного размножения изображения. Пример:

body {

background-image:url(‘gradient2.png’);

background-repeat:repeat-x;

}

  • background-attachment — указание на то, будет ли изображение смещаться при скроллировании или будет оставаться на месте. Пример:

background-attachment:fixed;

  • background-position — свойство, определяющее позицию размещения изображения на устройстве отображения. Пример:

body

{

background-image:url(‘img tree.png’); background-repeat:no-repeat; background-position:right top;

}

В соответствии со спецификацией (см. http://www.w3.org/TR/ css3-text/) текст может быть подвергнут преобразованиям при отображении, например, таким как:

  • изменение регистра букв (capitalize | uppercase | lowercase);
  • изменение пробелов (collapse | preserve | preserve-breaks);
  • ограничение длины строки;
  • формирование переносов слов;
  • форматирование текста;
  • выравнивание и разреживание;
  • отступы;
  • декорирование.

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

В соответствии с блочной моделью для любого элемента имеются область самого элемента (content), внутренние поля (padding), рамка или граница (border), внешние границы (margin). Для каждой области может быть задан размер. Наличие внутреннего поля позволяет сформировать рамку на заданном расстоянии от содержимого элемента; наличие внешнего поля — установить отступ между рядом расположенными элементами.

В CSS любой элемент имеет свойства width и height, которые устанавливают размер «содержимого» элемента в процентах, пикселах. Кроме того, значения этих свойств могут быть вычислены.

Размер отступа задается свойствами ‘padding-top’, ‘padding-right’, ‘padding-bottom’, ‘padding-left’ или единственным свойством padding, которому указывается один общий размер отступа или последовательно отступ сверху, справа, снизу, слева.

Пример (рис. 13):

.container {

padding:0 20px 0 20px;

}

Определение отступов для блока container
Рисунок 13 – Определение отступов для блока container

Граница представляет собой видимое обрамление элемента с указанным начертанием, цветом и толщиной. Граница может быть задана единственным свойством border или отдельно для каждой стороны блока: ‘border-top’, ‘border-right’, ‘border-bottom’, ‘border-left’. Указываются толщина, тип начертания границы и цвет.

Пример: header .nav .caret {

border-bottom-color: #f5f5f5;

border-top-color: #f5f5f5;}

При расчете размеров блока необходимо помнить про толщину границы. Внешнее прозрачное поле может быть задано либо единственным свойством ‘margin’ с указанием одинакового размера границы для всех сторон, либо перечислением размеров по каждой из сторон, либо с использованием свойств ‘margin-top’, ‘margin-right’, ‘margin-bottom’, ‘margin-left’ для каждой из сторон в отдельности. Пример:

  • body { margin: 2em }
  • body { margin: 1em 2em }
  • body { margin:1em 2em 3em }
  • body {margin-top: 1em; margin-right: 2em;}

CSS поддерживает 4 вида позиционирования:

  • статическое (static);
  • абсолютное (absolute);
  • относительное (relative);
  • фиксированное (fixed).

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

Статическое позиционирование устанавливается для всех элементов по умолчанию и означает нормальное следование элементов. В явном виде спецификатор static применяется для перекрытия унаследованных стилей.

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

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

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

Например, следующие свойства стиля обеспечат отображение элементов-изображений img в правой части страницы, а все остальные элементы будут размещены в свободном пространстве слева:

img {float: right; padding: 15px;}

Плавающее размещение иногда применяют к блокам, содержащим меню и прочие средства навигации.

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

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

В программе поддерживаются передовые технологии веб-разработки, включая PHP, HTML5, CSS, Sass, SCSS, Less, Stylus, Compass, CoffeeScript, TypeScript, ECMA Script Harmony, шаблоны Jade, ZenCoding, Emmet, JavaScript.

PhpStorm включает в себя всю функциональность среды WebStorm (HTML/CSS редактор, JavaScript редактор) и добавляет полнофункциональную поддержку PHP и баз данных / SQL.

Основные функции PhpStorm 10:

  • интеллектуальный редактор PHP кода с подсветкой синтаксиса, автодополнением кода, расширенными настройками форматирования кода, предотвращением ошибок на лету;
  • поддерживает PHP 7.0, 5.6, 5.5, 5.4 и 5.3, генераторы, сопрограммы и все синтаксические улучшения;
  • PHP рефакторинги, code (re)arranger, детектор дублируемого кода;
  • поддержка Vagrant, Composer, встроенный REST клиент, Command Line Tools, SSH консоль;
  • поддержка фреймворков (MVC view для Symfony2, Yii) и специализированные плагины для ведущих PHP фреймворков (Symfony, Magento, Drupal, Yii, CakePHP и многие другие);
  • визуальный отладчик для PHP приложений, валидация конфигурации отладчика, PHPUnit с покрытием кода (поддержка PHPUnit 5), а также интеграция с профилировщиком;
  • HTML, CSS, JavaScript редактор; отладка и модульное тестирование для JS; поддержка HTML5, CSS, Sass, SCSS, Less, Stylus, Compass, CoffeeScript, TypeScript, ECMAScript Harmony, Emmet и других технологий веб-разработки;
  • полный набор инструментов для фронтенд-разработки;
  • поддержка стилей кода, встроенные стили PSR1/PSR2, Symfony2, Zend, Drupal и другие;
  • интеграция с системами управления версиями, включая унифицированный интерфейс;
  • удалённое развёртывание приложений и автоматическая синхронизация с использованием FTP, SFTP, FTPS и др.;
  • LiveEdit: изменения в коде можно мгновенно просмотреть в браузере без перезагрузки страницы;
  • PHP UML;
  • интеграция с баг-трекерами;
  • инструменты работы с базами данных, SQL редактор;
  • кроссплатформенность (Windows, Mac OS X, Linux).

PhpStorm 10 обеспечивает расширенную поддержку PHP 7, включая инспекции совместимости. Возможность работы с:

  • безымянными классами;
  • декларациями типов возвращаемого значения;
  • операторами объединения со значением «ноль»;
  • декларациями группового использования;
  • лексическими анализаторами, учитывающими контекст, а также много других возможностей, раскрывающих все возможности PHP 7.

При реорганизации кода в PhpStorm 10 можно локально переименовать переменные, параметры, классы, методы, константы или метки команд перехода прямо в редакторе.

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

Другие улучшения PHP:

  • дублирование поиска по выделению метода;
  • интеллектуальное копирование/добавление в последовательности;
  • возможность конфигурации значений date() или time() в шаблонах Live Templates в качестве временных отметок Unix.

Интерактивная консоль отладки для PHP (REPL) – эта новейшая возможность PhpStorm 10 позволяет преобразовывать переменные, вызывать функции PHP и определять дополнительные функции – и всё в процессе работы.

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

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

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

PhpStorm 10 поддерживает все новые функции и улучшения, выпущенные в PHPUnit 5, широко используемой тестовой платформе для PHP. Среди возможностей также есть:

  • новый принцип действия аннотации @depends;
  • тесты, помеченные @small, могут быть также помечены в качестве рискованных, если они осуществляют ввод-вывод;
  • добавленные подтверждения assertFinite(), assertInfinite() и assertNan().

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

Также есть возможность отладки веб-приложений в Xdebug или Zend Debugger.

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

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

Поддержка Angular 2 в PhpStorm включает в себя автоматическое завершение кода и навигацию по директивам и связкам и распознает новые атрибуты событий для TypeScript или ECMAScript 2015.

PhpStorm обеспечивает интеграцию с TSLint, анализатором для кода TypeScript. Позволяет увидеть предупреждения и ошибки прямо в редакторе по мере ввода кода.

Все функции и улучшения WebStorm доступны в PhpStorm, встроенные по умолчанию или доступные в качестве бесплатных плагинов в репозитории. Другие заслуживающие упоминания функции включают в себя улучшенную поддержку ECMAScript 2015, TypeScript 1.5 и 1.6, обновлённую поддержку React, форматирование связанных вызовов метода, новые инспекции Node.js, графики в CPU-профайлере Node.js, возможность запуска отдельных тестирований Mocha и т.д.

PhpStorm 10 помогает кодировать специальные символы в HTML-коде, заменяя их HTML-элементами, начинающимися с &. Также можно выбрать символы или блок кода и применить кодировку специальных символов XML/HTML.

Чтобы сделать команду FindinPath более эффективной, разработчики добавили вкладку предпросмотра, которая отображает первые 100 результатов в режиме реального времени. Теперь для того, чтобы найти всё необходимое, не нужно выходить из диалога.

Конфигурация стиля кода стала ещё проще. Нужно выбрать фрагмент кода, нажать Alt+Enter и выбрать действие настройки стиля. Можно просмотреть и настроить стиль кода, который может быть применён к данной части кода, в доступном режиме предварительного просмотра.

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

Обновлённые инструменты базы данных:

  • исходная самодиагностика для MySQL, PostgreSQL, MS SQL;
  • настраиваемая форма поведения действия Execute;
  • новое окно преобразования таблиц.

Другие улучшения:

  • обновлённые регулярные выражения в действии поиска с заменой;
  • настройки для пользователей с нарушением цветового зрения;
  • совместимость с SVN 1.9.

Поддерживаемые операционные системы:

  • Windows 10;
  • Windows 8;
  • Windows 7;
  • Windows Vista;
  • Windows 2003;
  • Windows XP (вкл. 64-бит);
  • MacOSX 10.5 и выше;
  • Linux.

Требования к компьютеру:

  • объём оперативной памяти: 1 Гб (минимум);
  • объём оперативной памяти: 2 Гб (рекомендуется);
  • минимальное разрешение экрана: 1024х768.

2.1.2. Создание проекта. Организация структуры директорий и файлов

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

Создание проекта
Рисунок 14 – Создание проекта
Создание файлов проекта
Рисунок 15 – Создание файлов проекта
Файлы и директории проекта
Рисунок 16 – Файлы и директории проекта

В процессе создания структуры сайта, были созданы следующие файлы и папки:

  • mbou5 – главная папка проекта;
  • bin – папка со скриптами;
  • css – папка со стилями;
  • bootstrap.css;
  • custom-style.css;
  • main.css;
  • font-awesome;
  • fonts – папка со шрифтами;
  • images – папка с изображениями;
  • js – папка со скриптами;
  • about.html;
  • advice-psychologist.html;
  • area-security.html;
  • basic-information.html;
  • contact.html;
  • educational-work.html;
  • ege.html;
  • enrollment.html;
  • feedback.html;
  • fire-safety.html;
  • full-width.html;
  • gia.html;
  • index.html;
  • information-parents.html;
  • management-school.html;
  • medical-office.html;
  • municipal-services.html;
  • olympiads-competitions.html;
  • online-safety.html;
  • road-safety.html;
  • school-news.html;
  • sidebar.html;
  • structure-school.html;
  • teaching-staff.html.

2.2. Создание сайта

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

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

<link href=»css/bootstrap.min.css» rel=»stylesheet»>

<link href=»css/main.css» rel=»stylesheet»>

<link href=»css/custom-style.css» rel=»stylesheet»>

Данный код подключает к странице index.html файлы bootstrap.min.css, main.css, custom-style.css в которых находятся стили сайта.

Подключение файлов стилей к странице сайта
Рисунок 17 – Подключение файлов стилей к странице сайта

После создания кода страницы (рис. 18) главная страница сайта приобретает вид, показанный на рис. 19.

Создание исходного кода главной страницы сайта
Рисунок 18 – Создание исходного кода главной страницы сайта
Главная страница сайта
Рисунок 19 – Главная страница сайта

Исходный код главной страницы сайта:

<!DOCTYPE html>

<html lang=»ru»>

<head>

    <meta charset=»utf-8″>

    <meta http-equiv=»X-UA-Compatible» content=»IE=edge»>

    <meta name=»viewport» content=»width=device-width, initial-scale=1″>

    <meta name=»description» content=»Муниципальное бюджетное общеобразовательное учреждение средняя общеобразовательная школа  № 5 города Южно-Сахалинска»>

    <meta name=»author» content=»student»>

    <title>МБОУ СОШ №5</title>

    <!— Подключение файлов стилей —>

    <link href=»css/bootstrap.min.css» rel=»stylesheet»>

    <link href=»css/main.css» rel=»stylesheet»>

    <link href=»css/custom-style.css» rel=»stylesheet»>

    <!— Подключение шрифтов —>

    <link href=»font-awesome/css/font-awesome.min.css» rel=»stylesheet» type=»text/css»>

    <!—[if lt IE 9]>

        <script src=»https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js»></script>

        <script src=»https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js»></script>

    <![endif]—>

</head>

<body>

    <!— Навигация —>

    <nav class=»navbar navbar-inverse navbar-fixed-top» role=»navigation»>

        <div class=»container»>

            <!— Группирока меню для лучшего мобильного отображения —>

            <div class=»navbar-header»>

                <button type=»button» class=»navbar-toggle» data-toggle=»collapse» data-target=»#bs-example-navbar-collapse-1″>

                    <span class=»sr-only»>Переключение навигации</span>

                    <span class=»icon-bar»></span>

                    <span class=»icon-bar»></span>

                    <span class=»icon-bar»></span>

                </button>

                <a class=»navbar-brand» href=»index.html»>МБОУ СОШ №5</a>

            </div>

            <!— Меню сайта —>

            <div class=»collapse navbar-collapse» id=»bs-example-navbar-collapse-1″>

                <ul class=»nav navbar-nav navbar-right»>

                    <li>

                        <a href=»about.html»>О школе</a>

                    </li>

                    <li>

                        <a href=»school-news.html»>Новости школы</a>

                    </li>

                    <li>

                        <a href=»contact.html»>Контакты</a>

                    </li>

                    <li>

                        <a href=»feedback.html»>Обратная связь</a>

                    </li>

                </ul>

            </div>

            <!— /.navbar-collapse —>

        </div>

        <!— /.container —>

    </nav>

    <!— Слайдер —>

    <header id=»myCarousel» class=»carousel slide»>

        <!— Индикаторы —>

        <ol class=»carousel-indicators»>

            <li data-target=»#myCarousel» data-slide-to=»0″ class=»active»></li>

            <li data-target=»#myCarousel» data-slide-to=»1″></li>

            <li data-target=»#myCarousel» data-slide-to=»2″></li>

        </ol>

        <!— Содержимое слайда —>

        <div class=»carousel-inner»>

            <div class=»item active»>

                <div class=»fill» style=»background-image:url(‘images/shkola1.png’);»></div>

                <div class=»carousel-caption»>

                    <h2>Наша школа лучше всех</h2>

                </div>

            </div>

            <div class=»item»>

                <div class=»fill» style=»background-image:url(‘images/shkola2.png’);»></div>

                <div class=»carousel-caption»>

                    <h2>Я люблю свою школу</h2>

                </div>

            </div>

            <div class=»item»>

                <div class=»fill» style=»background-image:url(‘images/shkola3.png’);»></div>

                <div class=»carousel-caption»>

                    <h2>Мне нравится учиться</h2>

                </div>

            </div>

        </div>

        <!— Управление слайдером —>

        <a class=»left carousel-control» href=»#myCarousel» data-slide=»prev»>

            <span class=»icon-prev»></span>

        </a>

        <a class=»right carousel-control» href=»#myCarousel» data-slide=»next»>

            <span class=»icon-next»></span>

        </a>

    </header>

    <!— Содержимое страницы —>

    <div class=»container»>

        <!— Приветствие —>

        <div class=»row»>

            <div class=»col-lg-12″>

                <h2 class=»page-header»>МБОУ СОШ № 5 города Южно-Сахалинска</h2>

            </div>

            <div class=»col-md-6″>

                <p>Уважаемые Посетители!</p>

                <p>Мы рады приветствовать Вас на страницах официального сайта муниципального бюджетного общеобразовательного учреждения средней общеобразовательной школы № 5 города Южно-Сахалинска!</p>

            </div>

            <div class=»col-md-6″>

                <img class=»img-responsive» src=»images/mbousosh-5fotoizm.jpg» alt=»»>

            </div>

        </div>

        <!— /.row —>

        <hr>

        <!— Нижняя часть —>

        <footer>

            <div class=»row»>

                <div class=»col-lg-12″>

                    <p>Все права защищены &copy; МБОУ СОШ №5 2017</p>

                </div>

            </div>

        </footer>

    </div>

    <!— /.container —>

    <!— jQuery —>

    <script src=»js/jquery.js»></script>

    <!— Bootstrap ядро JavaScript —>

    <script src=»js/bootstrap.min.js»></script>

    <!— Скрипт для активавции слайдера —>

    <script>

    $(‘.carousel’).carousel({

        interval: 5000 //изменение скорости смены слайдов

    })

    </script>

</body>

</html>

Заключение

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

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

В результате выполнения работы был создан сайт для Муниципального бюджетного общеобразовательного учреждения средняя общеобразовательная школа № 5 города Южно-Сахалинска. Сайт создан с использованием технологий HTML и CSS. В качестве среды разработки проекта была использована программа – PHPStorm, данная программа позволяет удобно работать с кодом HTML и CSS.

Сайт для МБОУ СОШ №5 это возможность заинтересованным посетителям задать вопрос учителям и администрации, а также получить квалифицированный ответ. Целью созданного сайта является организация и наполнение информационного пространства учебного заведения. При этом, сайт выступает как электронный представитель школы в сети Интернет.

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

  1. Дронов В. А. PHP, MySQL, HTML5 и CSS3. Разработка современных динамических Web–сайтов [Текст] / В. А. Дронов. – СПб.: BHV, 2016. – 688 c.
  2. Дунаев В. HTML, скрипты и стили / В. Дунаев. — СПб: БХВ-Петербург, 2011- 816 с.
  3. Жуков Р. А. СУБД с открытым исходным кодом: возможность применения алгоритмов распараллеливания / Р. А. Жуков // Технические науки. – 2015. – № 1–2 (35–36). – С. 20 – 21.
  4. Зудилова Т. В. Web-программирование HTML / Т. В. Зудилова, М. Л. Буркова — СПб: НИУ ИТМО, 2012. – 70 с.
  5. Комолова Н. HTML, XHTML и CSS / Н. Комолова, Е. Яковлева. — СПб: Питер, 2012 – 304 с.
  6. Кузнецов М. В. PHP на примерах [Текст] / М. В. Кузнецов, И. В. Симдянов. – СПб.: BHV, 2012. – 400 c.
  7. Лабберс К. HTML5 для профессионалов: мощные инструменты для разработки современных веб-приложений / К. Лабберс, Н. Олберс, К. Салим. — М.: Вильямс, 2011 – С. 22.
  8. Ласкова Н. А. Школьный сайт как весомой составляющей Единое информационное образовательное пространство учебного заведения / Н. А. Ласкова // Компьютер в школе и дома. – 2012. — № 3. – С. 32 – 35.
  9. Ласкова Н. А. Школьный сайт как весомой составляющей Единое информационное образовательное пространство учебного заведения / Н. А. Ласкова // Компьютер в школе и дома. – 2012. — № 3. – С. 32 – 35.
  10. Маклафлин Б. PHP и MySQL. Исчерпывающее руководство [Текст] / Б. Маклафлин. – СПб.: Питер, 2014. – 544 с.
  11. Масляк Т. А. Анализ методов разработки сайтов / Т. А. Масляк, Т. А. Колесникова // Информационные технологии: наука, техника, технология, образование, здоровье: Тезисы докладов XXIII Международной научно-практической конференции, Ч.IV (20-22 мая 2015 г., Харьков). – С. 230.
  12. Основы языка гипертекстовой разметки HTML и CSS: Учебное пособие/Сост. С. М. Наместников. — Ульяновск: УлГТУ, 2014. – 91 с.
  13. Пулина А. А. Школьный сайт как ресурс открытого информационно-образовательных пространства школы / А. А. Пулина // Управление школой. – 2013. — № 22 -24 (394 – 396). – С. 59 – 63.
  14. Росс В. С. Создание сайтов: HTML, CSS, PHP, MySQL [Текст]. Учебное пособие, ч. 2 / В. С. Росс — МГДД(Ю)Т, М. — 2011 – 68 с.
  15. Самарев Р. С. Создание простейших HTML-страниц, валидаторы кода. Каскадные таблицы стилей CSS: методические указания к выполнению практикума № 1 и лабораторной работы № 1 по дисциплинам «Языки интернет-программирования» и «Практикум по интернет-программированию» / Р. С. Самарев. — Москва: Издательство МГТУ им. Н. Э. Баумана, 2015. — 39 с.
  16. Шинкевич, А.В. Современные технологии создания web-сайтов / А. В. Шинкевич // Проблемы и перспективы современной науки: сб. ст. участников V Респ. науч.-практ. семинара молодых ученых, Минск, 28 нояб. 2014 г. / редколл: В. В. Гедранович [и др.]; Минский ун-т управления. – Минск: Минский университет управления, 2015. – С. 110–114.
  17. Эндрю Р. CSS: 100 и 1 совет, 3-е издание / Р. Эндрю. – Пер. с англ. – СПб: Символ- Плюс, 2010. – 336 с.
  18. Ээльмаа Ю. Создание школьного сайта как управленческая проблема / Ю. Ээльмаа, З. Смирнова / Народное образование. — 2009. — №2. — С. 116-121
  19. Якубайтис Э. А. Информационные сети и системы / Э. А. Якубайтис. — М.: Финансы и статистика, 1996. — 368 с.
  20. Янк К. РНР и MySQL. От новичка к профессионалу / К. Янк. — М.: Эксмо, 2013. — 384 с.

Купить данную работу или заказать подобную