Разработка web-представительства для МОУ "Венгеровская СОШ"

Бортников А.С.

Разработка web-представительства для МОУ "Венгеровская СОШ"

02.03.02 Фундаментальная информатика и информационные технологии

Информатика

Дипломы

Вуз: Белгородский государственный университет - национальный исследовательский университет (НИУ «БелГУ»)

ID: 5b8878bb7966e1073081b2c9

UUID: 6a7a0e30-8ed7-0136-b18c-525400005860

Язык: Русский

Опубликовано: около 6 лет назад

Просмотры: 6

Бортников А.С.

Источник: Федеральное государственное автономное образовательное учреждение высшего образования «Белгородский государственный национальный исследовательский университет»

Комментировать 0

Рецензировать 0

Скачать - 1,7 МБ

Поделиться работой

ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ АВТОНОМНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ «БЕЛГОРОДСКИЙ ГОСУДАРСТВЕННЫЙ НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ» (НИУ «БелГУ») ИНСТИТУТ ИНЖЕНЕРНЫХ ТЕХНОЛОГИЙ И ЕСТЕСТВЕННЫХ НАУК КАФЕДРА МАТЕМАТИЧЕСКОГО И ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИНФОРМАЦИОННЫХ СИСТЕМ РАЗРАБОТКА WEB-ПРЕДСТАВИТЕЛЬСТВА ДЛЯ МОУ «ВЕНГЕРОВСКАЯ СОШ» Выпускная квалификационная работа обучающегося по направлению подготовки 02.03.02 Фундаментальная информатика и информационные технологии очной формы обучения, группы 07001301 Бортникова Александра Сергеевича Научный руководитель к.т.н., доцент Чашин Ю.Г. БЕЛГОРОД 2017

2 ОГЛАВЛЕНИЕ ВВЕДЕНИЕ ........................................................ Ошибка! Закладка не определена.3 ГЛАВА 1 ТЕОРЕТИЧЕСКИЕ ОСНОВЫ СОЗДАНИЯ ШКОЛЬНОГО САЙТА . 6 1.1 Обоснование необходимости разработки школьного сайта .......................... 6 1.2 Обзор аналогов школьных сайтов .................................................................... 9 1.3 Типовая структура web-сайта образовательного учреждения .................... 15 ГЛАВА 2 ОБЗОР И СРАВНИТЕЛЬНЫЙ АНАЛИЗ HTML-РЕДАКТОРОВ ..... 22 2.1 HTML-редактор Dream Weaver ...................................................................... 22 2.2 Редактор Macromedia DreamWeaver .............................................................. 23 2.3 HTML-редактор FrontPage .............................................................................. 25 ГЛАВА 3 ПРОЕКТИРОВАНИЕ И РАЗРАБОТКА WEB-САЙТА ...................... 30 3.1 Разработка структуры web-сайта.................................................................... 30 3.2 Описание этапа разработки ............................................................................. 34 3.3 Программирование дизайна web-сайта ......................................................... 37 ГЛАВА 4 АПРОБАЦИЯ САЙТА ............................................................................ 42 ЗАКЛЮЧЕНИЕ ......................................................................................................... 46 СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ ................................................. 48 ПРИЛОЖЕНИЯ ......................................................................................................... 51

3 ВВЕДЕНИЕ В современном мире всё больше появляется веб-ресурсов. Свои странички в Интернете имеют все государственные и негосударственные учреждения, в том числе и школы. Актуальность исследования определяется возникшей необходимостью в создании школьного сайта практически для каждой школы, возросшей ответственностью за качество сайта, его соответствие современным требованиям. Образовательное учреждение, которое стремится быть конкурентоспособным, иметь привлекательный имидж и эффективную систему работы с информацией для обеспечения своих внутренних потребностей, а также оперативного предоставления необходимых сведений вышестоящим организациям и широкой общественности, сталкивается с проблемой создания своего интернет – представительства, а именно о создании своего интернет ресурса, веб-сайта. Настоящий школьный сайт должен быть не только информативным, но и "живым". Именно здесь можно сообщить всё, что может оказаться полезным или интересным для родителей нынешних и будущих учеников, а также разместить информацию, необходимую для вышестоящих организаций, тем самым уменьшая бумажный документооборот и облегчая поиск информации. В дипломной работе была сделана попытку разобраться в том, что необходимо знать и уметь для создания школьной Web-страницы, какое программное обеспечение является инструментарием создания школьных Web-страниц и как его эффективно использовать. Чтобы реализовать поставленную цель, потребуется любой браузер, например MS Internet Explorer, а так же любой графический редактор. Web-страницы, поддерживая технологию мультимедиа, объединяют в себе различные виды информации: текст, графику, звук, анимацию и видео. От того, насколько качественно и красиво сделана та или иная Web-страница, зависит во многом ее успех в Сети. Пользователю приятно посещать те Web-страницы, которые имеют

4 стильное оформление, не отягощены чрезмерно графикой и анимацией, быстро загружаются и правильно отображаются в окне Web-браузера. Цель дипломной работы: определить методику создания и поддержки веб-пространства школы. В соответствии с целью исследования сформулированы следующие задачи: ‒ функциональные возможности веб-сайтов. Анализ существующих аналогов; ‒ обзор и выбор инструментальных средств; ‒ проектирование и разработка web-сайта; ‒ апробация полученного сайта. В дипломной работе рассмотрены актуальные вопросы разработки и создания современной школьной Web-страницы. При этом были решены следующие задачи: • ознакомление с современными Интернет - технологиями и их использование в настоящей разработке; • изучение программного инструментария, применяемого для разработки и создания Web-сайтов; • страницах выявление и учет методов и способов представления на Webразличных видов информации, не препятствующих их доступности; • ознакомление с основными правилами и рекомендациями по разработке и созданию Web-сайтов и неукоснительное следование им на практике; • определение структуры Web-страниц; • разработка карты web-сайта; • выбор стратегии разработки и создания школьного Web-сайта. В значительной степени теоретическая база исследования опирается на проектирование учебного процесса в информационно-образовательной среде (Босова, Л.Л., Лаптев, В.В., Прозорова, Ю.А.,Чернобай Е. В., Кочерова Е. С.,

5 Коротенков Ю. Г., С.В.Зенкина, А.А.Кузнецов, А.Л. Семенов, Е. Иванова, И. Осмоловская, О.Н. Арефьев, Коротенков Ю.Г.); методику преподавания традиционных школьных дисциплин с применением информационнокоммуникационных технологий (В.В.Лаптев, Е.С.Полат, И.В.Роберт и др.); внедрение систем открытого и дистанционного образования (А.Д.Иванников, В.И.Солдаткин, В.М.Филиппов, С.А. Щенников и др.); формирование ИКТкомпетентности учащихся (А.П.Ершов, А.А.Кузнецов, Руднев М.Г. С.А. Бешенков, М.Г.Победоносцева, А.С.Захаров, Т.Н.Суворова, А.Л. Семенов и др.); повышение уровня информационной культуры учителя (Т.В.Добудько, Э.И.Кузнецов, В.И.Пугач, Рубашкин Д.Д., Тадевосян С. В., Третьяк Т. М., Хамидулина Е. В. М.В. Швецкий, Prensky, M. и др.). Веб-сайт образовательного учреждения не может иметь одного автора, он предполагает работу хорошо организованной команды людей, заинтересованных в поддержании функционирования и развития этого ресурса на протяжении времени. Основным методом исследования является изучение и анализ существующих сайтов. Были использованы также исследования: анализ психолого-педагогической и методической литературы; наблюдение за учебным процессом; анкетирование; педагогический эксперимент. База исследования. Исследование проводилось на базе МОУ «Венгеровская СОШ» Ракитянского района. Научная новизна и теоретическая значимость исследования состоит в выделении и систематизации методики разработки сайта. Практическая значимость заключается в том, что основные положения исследования и разработки, использованы при создании методические и развитии материалы Web – могут быть пространства в общеобразовательной школе, а конкретно при создании сайта. Структура работы включает в себя: введение, четыре заключение, список литературы и приложения. главы,

6 ГЛАВА 1 ТЕОРЕТИЧЕСКИЕ ОСНОВЫ СОЗДАНИЯ ШКОЛЬНОГО САЙТА 1.1 Обоснование необходимости разработки школьного сайта В соответствии «Об образовании» со статьей 32 Закона Правительство Российской Российской Федерации Федерации постановило «Правила размещения в сети Интернет и обновления информации об образовательном учреждении». На основании постановления от 10 июля 2013 года №582 «Об утверждении правил размещения на официальном сайте образовательной организации в информационно-телекоммуникационной сети «Интернет» и обновления информации об образовательной организации» наличие школьного сайта у образовательного учреждения обязательно. В связи с этим для многих школ на первое место вышла проблема создания собственного школьного сайта. Есть несколько путей решения данной проблемы. Первый - использование специальных конструкторов. Однако опубликованные на такой основе интернет - представительства мало чем отличаются друг от друга по дизайну, что не нравиться как пользователям, так и разработчикам. Содержание таких сайтов остается статичным, что не отвечает современным требованиям. Второй путь создание собственного сайта с нуля. Для этого школьному разработчику понадобится изучение основ программирования, освоение языков разметки HTML и CSS, а также языков программирования РНР или ASP. Но, даже потратив значительное время на изучение специальной литературы, весьма сложно решить проблемы создания динамических страниц и управления их контентом. Можно привлечь к данному проекту профессионалов, но для этого необходимо дополнительное финансирование, да и останутся вопросы, связанные с поддержкой сайта, его обновлением и администрированием.

7 CMS - система управления контентом сайта. Она представляет собой специально написанную административную панель, основные функции которой - быстрый и понятный доступ к содержимому сайта, возможность простого управления им. Сайт (от анг. Site – место; синонимы – веб узел, веб сайт, ресурс) – это место в Интернете, имеющее свой адрес (URL), своего владельца и состоящее из веб-страниц, которые воспринимаются как единое целое. Вебстраница (от анг. web-page) – это логическая единица Интернета, однозначно определяемая адресом (URL). Она может включать картинки, скрипты, форматированный текст, звук, видео, ссылки на другие веб-страницы или ресурсы Интернета. Таким образом, веб-сайт – это группа веб-страниц, которые должны иметь общий стиль оформления и быть связаны между собой единой темой. Создание сайтов в сфере образования и культуры приобрело массовый характер. Как и любой другой сайт, вебсайт школы - это своего рода окно в единое информационное пространство, это виртуальное представительство общеобразовательного учреждения в Интернете. Основные функции, выполняемые сайтом школы: 1. Представительская представительство школы в функция. Интернете, Сайт — которое это официальное может содержать разнообразные данные, включая публичный отчет директора, сведения о том, чем знаменито данное общеобразовательное учреждение, информацию о лучших педагогах, учениках, выпускниках. 2. Образовательная функция. Сайт — это средство организации воспитательно - образовательного процесса в условиях Интернета: представление возможностей дистанционного обучения, использование в учебном процессе электронных учебных материалов и т.п. 3. Воспитательная функция. Сайт — это средство отражения основных направлений воспитания, осуществляемых в общеобразовательном учреждении: нравственного, трудового, эстетического и др.

8 4. Информационная функция. Сайт — это средство отражения ежедневной жизни школы: успеваемость и внеклассные мероприятия, проекты и конкурсы, расписание и домашние задания и т.д. 5. Коммуникативная функция. Сайт — это средство общения учащихся, учителей и родителей: возможность задавать вопросы и обмениваться информацией. 6. Инвестиционная функция. Сайт — это средство привлечения спонсоров, включая выпускников школы. Школьный сайт предоставляет возможности как: • ftp-сервер как электронное хранилище образовательных ресурсов (тексты, иллюстративный материал в виде CD, презентаций; музыка, видео и др); • форумы как способы обсуждения педагогических, методических и других проблем, и инициатив; • world Wide Web как средство получения необходимой информации из любой точки Интернета; • e-mail как способоперативного обмена электронной документацией. Школьный сайт будет нужен: учащимся, учителям, родителям, учебновспомогательному персоналу, администрации школы, руководителям и работникам системы управления образованием, преподавателям педагогических колледжей и вузов, студентам-практикантам педагогических колледжей и вузов, спонсорам. Чёткого разграничения между различными сайтами нет, так как слишком велико их разнообразие по структуре и способу представления информации. Можно привести лишь общие различия, которые, в основном, и позволяют разделить сайты на группы. Б.П.Сайков предлагает следующую классификацию веб-сайтов: ▪ сайты пропаганды, сайты политических партий, различных общественных организаций и т.д.;

9 ▪ коммерческие сайты, содержащее рекламу и прочие сведения о товарах для продажи; ▪ информационные сайты, на которых размещаются статистика, различного рода списки, перечни, справочники и др.; ▪ сайты развлечений, предлагающие музыку, игры, анекдоты, головоломки, а также новости и другую информацию об индустрии развлечений; ▪ образовательные образовательных сайты, учреждениях содержащие различных сведения уровней, об предлагающие репетиторскую помощь и т.д.; сайтыдистанционного образования; ▪ сайты новостей, сообщающие о событиях местного, регионального, международного значения; ▪ персональные сайты – визитная карточка, фотоальбомы и другая персональная информация о конкретном человеке. Структура школьного сайта может формироваться как с ориентацией на пользователя ресурса, так и по видам деятельности школы. 1.2 Обзор аналогов школьных сайтов При создании школьного сайта необходимо ориентироваться на приказ Рособрнадзора от 29.05.2014 N 785 "Об утверждении требований к структуре официального сайта образовательной организации в информационнотелекоммуникационной сети "Интернет" и формату представления на нем информации" (Зарегистрировано в Минюсте России 04.08.2014 N 33423). Данному приказу полностью соответствует сайт Муниципального автономного нетипового общеобразовательного учреждения «Шуховский лицей» г. Белгорода (рис. 1.1).

10 Рис. 1.1. Главная страница Сайт оформлен с достаточным количеством изображений, использованная цветовая гамма не является яркой раздражающей и, в тоже время, ее нельзя назвать тусклой и бледной. На главной странице выведена информация об учреждении, новости учебного учреждения, что, несомненно, вызывает интерес у посетителей сайта. Главная страница сайта содержит информацию о дате создания образовательной организации, об учредителе, учредителях образовательной организации, о месте нахождения образовательной организации и ее филиалов (при наличии), режиме, графике работы, контактных телефонах и об адресах электронной почты. Вся эта информация имеется на сайте Муниципального автономного нетипового общеобразовательного учреждения «Шуховский лицей» г. Белгорода. Для размещения информации на Сайте создан специальный раздел "Сведения об образовательной организации". Доступ к данному разделу осуществляться с главной страницы Сайта. Раздел содержит следующиЙ подраздел "Основные сведения" (рис. 1.2).

11 Рис.1.2 Основные сведения Подраздел "Структура и органы управления образовательной организацией" содержит информацию о структуре и об органах управления школы, в том числе о наименовании структурных подразделений (органов управления) и другие (рис.1.3). Рис.1.3. Структура и органы управления сайта Муниципального автономного нетипового общеобразовательного учреждения «Шуховский лицей» г. Белгорода

12 Подраздел "Документы" имеет следующие размещенные школьные документы: • в виде копий: устав образовательной организации; лицензия на осуществление образовательной деятельности (с приложениями); свидетельство о государственной аккредитации (с приложениями); план финансово-хозяйственной деятельности образовательной организации, локальные нормативные акты, предусмотренные частью 2 статьи 30 Федерального закона "Об образовании в Российской Федерации", правила внутреннего распорядка обучающихся, правила внутреннего трудового распорядка и коллективного договора; • отчет о результатах самообследования; • документ о порядке оказания платных образовательных услуг; • предписания органов, осуществляющих государственный контроль (надзор) в сфере образования, отчеты об исполнении таких предписаний. Подраздел "Образование". Подраздел содержит информацию о реализуемых уровнях образования, о формах обучения, нормативных сроках обучения, сроке действия государственной аккредитации образовательной программы (при наличии государственной аккредитации), об описании образовательной программы с приложением ее копии, об учебном плане с приложением его копии, об аннотации к рабочим программам дисциплин (по каждой дисциплине в составе образовательной программы) с приложением их копий (при наличии), о календарном учебном графике с приложением его копии, о методических и об иных документах, разработанных образовательной организацией для обеспечения образовательного процесса, о реализуемых образовательных программах с указанием учебных предметов, курсов, дисциплин (модулей), практики, предусмотренных соответствующей образовательной программой, о численности обучающихся по реализуемым образовательным программам за счет бюджетных ассигнований

13 федерального бюджета, бюджетов субъектов Российской Федерации, местных бюджетов и по договорам об образовании за счет средств физических и (или) юридических лиц, о языках, на которых осуществляется образование (обучение). Подраздел "Образовательные стандарты" Подраздел содержит информацию о федеральных государственных образовательных стандартах и об образовательных стандартах. Информация представлена с приложением их копий (при наличии). Подраздел "Руководство. Педагогический (научно-педагогический) состав". Главная страница подраздела должна содержать следующую информацию: ▪ о руководителе образовательной организации, его заместителях, руководителях филиалов образовательной организации (при их наличии), в том числе фамилию, имя, отчество (при наличии) руководителя, его заместителей, должность руководителя, его заместителей, контактные телефоны, адреса электронной почты; ▪ о персональном составе педагогических работников с указанием уровня образования, квалификации и опыта работы, в том числе фамилию, имя, отчество (при наличии) работника, занимаемую должность (должности), преподаваемые дисциплины, ученую степень (при наличии), ученое звание (при наличии), специальности, наименование данные о направления повышении подготовки квалификации и (или) и (или) профессиональной переподготовке (при наличии), общий стаж работы, стаж работы по специальности. Подраздел "Материально-техническое обеспечение и оснащенность образовательного процесса". Главная страница подраздела должна содержать информацию о материально-техническом обеспечении образовательной деятельности, в том числе сведения о наличии оборудованных учебных кабинетов, объектов для

14 проведения практических занятий, библиотек, объектов спорта, средств обучения и воспитания, об условиях питания и охраны здоровья обучающихся, о доступе к информационным системам и информационнотелекоммуникационным сетям, об электронных образовательных ресурсах, к которым обеспечивается доступ обучающихся. Подраздел "Финансово-хозяйственная деятельность". Главная страница подраздела содержит информацию об объеме образовательной деятельности, финансовое обеспечение которой осуществляется за счет бюджетных ассигнований федерального бюджета, бюджетов субъектов Российской Федерации, местных бюджетов, по договорам об образовании за счет средств физических и (или) юридических лиц, о поступлении финансовых и материальных средств и об их расходовании по итогам финансового года (рис. 1.4). Рис. 1.4. Финансово-хозяйственная деятельность Файлы документов представлены на Сайте в форматах Portable Document Files (.pdf), Microsoft Word / Microsofr Excel (.doc, .docx, .xls, .xlsx), Open Document Files (.odt, .ods). Все файлы, ссылки на которые размещены на

15 страницах соответствующего раздела сайта оформлены согласно требованиям. Таким образом, web-сайт школы – это информация о школе, представленная в определенном виде, которая располагается на Web-сервере и имеет свое имя (адрес). Для просмотра школьных Web-сайтов, как и всех других, на компьютере пользователя используются специальные программы, которые называются браузерами. В зависимости от того, какое имя (адрес) сайта задан в строке "Адрес", браузер будет загружать в свое окно соответствующую информацию. Школьный web-сайт состоит из связанных между собой Web-страниц. Каждая страница Web-сайта также имеет свой Internet адрес, который состоит из адреса сайта и имени файла, соответствующего данной странице. Таким образом, школьный web-сайт – это информационный ресурс, состоящий из связанных между собой гипертекстовых документов (Web-страниц), размещенный на Web-сервере и имеющий индивидуальный адрес. Посмотреть Web-сайт может любой человек, имеющий компьютер, подключенный к Internet. В настоящее время во всемирной паутине размещено несколько миллионов Web-сайтов и их число постоянно растет. 1.3 Типовая структура web-сайта образовательного учреждения Сайт является важнейшим элементом информационной политики современной образовательной организации и инструментом решения ряда образовательных задач, связанных с формированием информационной культуры участников образовательного процесса. Сайт образовательной организации создается, прежде всего, с целью информирования о своей деятельности и для взаимодействия с общественностью. Он повышает имидж образовательного учреждения. Сайт позволяет продемонстрировать свои достижения, представить актуальную информацию для заинтересованных лиц, к которым относятся не только

16 ученики и педагогический коллектив, но, несомненно, родители учеников настоящих и будущих, выпускники, вышестоящее руководство, коллеги, имеющиеся и потенциальные партнеры и спонсоры, и т.д. С 1 января 2011г. наличие официального сайта образовательной организации является обязательным и должен соответствовать необходимым нормам закона РФ (Постановление Правительства № 582 от 10.07.2013г.). В мае 2014 года вышел Приказ Рособрнадзора № 785 от 29.05.2014 « Об утверждении требований к структуре информационно-телекоммуникационной официального сети сайта «Интернет» и ОО в формату предоставления на нем информации». Методические рекомендации содержат информацию о том, как построить оптимальную структуру сайта образовательной организации, грамотно наполнить его содержанием, согласно предъявляемым требованиям, продумать дизайн и определиться с инструментарием. Согласно постановлению Правительства Российской Федерации от 10 июля 2013 г. № 582 на официальном сайте образовательного учреждения в сети «Интернет» подлежит размещению следующая информация. Сведения: ▪ о дате создания учредителе, о месте нахождения [13] образовательной организации, об ОО и [3] ее филиалов (при наличии), режиме, графике работы, контактных телефонах и об адресах электронной почты; о структуре и об органах управления ОО; ▪ наименование структурных подразделений (органов управления); ▪ фамилии, имена, отчества и должности руководителей структурных подразделений; ▪ места нахождения структурных подразделений; ▪ адреса официальных сайтов в сети "Интернет" структурных подразделений (при наличии); ▪ наличии); адреса электронной почты структурных подразделений (при

17 ▪ сведения о наличии положений о структурных подразделениях (об органах управления) с приложением копий указанных положений (при их наличии); ▪ об уровне образования; ▪ о формах обучения; ▪ о нормативном сроке обучения; ▪ о сроке действия государственной аккредитации образовательной программы (при наличии государственной аккредитации); ▪ об описании образовательной программы с приложением ее копии; ▪ об учебном плане с приложением его копии; ▪ об аннотации к рабочим программам дисциплин (по каждой дисциплине в составе образовательной программы) с приложением их копий (при наличии); ▪ о календарном учебном графике с приложением его копии; ▪ о методических и об иных документах, разработанных ОО для обеспечения образовательного процесса; ▪ учебных о реализуемых предметов, образовательных курсов, дисциплин программах с указанием (модулей), практики, предусмотренных соответствующей образовательной программой; ▪ о численности обучающихся по реализуемым образовательным программам за счет бюджетных ассигнований федерального бюджета, бюджетов субъектов Российской Федерации, местных бюджетов и по договорам об образовании за счет средств физических и (или) юридических лиц; ▪ о языках, на которых осуществляется образование (обучение); ▪ о федеральных государственных образовательных стандартах и об образовательных стандартах с приложением их копий (при наличии); ▪ о руководителе ОО, его заместителях, руководителях филиалов ( при их наличии), в том числе: фамилия, имя, отчество (при наличии)

18 руководителя, его заместителей; должность руководителя, его заместителей; контактные телефоны; адрес электронной почты; ▪ о персональном составе педагогических работников с указанием уровня образования, квалификации и опыта работы, в том числе: ▪ фамилия, имя, отчество (при наличии) работника; ▪ занимаемая должность (должности); ▪ преподаваемые дисциплины; ▪ ученая степень (при наличии); ▪ ученое звание (при наличии); ▪ наименование направления подготовки и (или) специальности; ▪ данные о повышении квалификации и (или) профессиональной переподготовке (при наличии); ▪ общий стаж работы; ▪ стаж работы по специальности; ▪ о материально-техническом обеспечении образовательной деятельности, в том числе сведения о наличии оборудованных учебных кабинетов, объектов для проведения практических занятий, библиотек, объектов спорта, средств обучения и воспитания, об условиях питания и охраны здоровья обучающихся, о доступе к информационным системам и информационно-телекоммуникационным сетям, об электронных образовательных ресурсах, к которым обеспечивается доступ обучающихся; ▪ о количестве вакантных мест для приема (перевода) по каждой образовательной программе, профессии, специальности, направлению подготовки (на места, финансируемые за счет бюджетных ассигнований федерального бюджета, бюджетов субъектов Российской Федерации, местных бюджетов, по договорам об образовании за счет средств физических и (или) юридических лиц); ▪ о наличии и условиях предоставления обучающимся стипендий, мер социальной поддержки;

19 ▪ о наличии общежития, интерната, количестве жилых помещений в общежитии, интернате для иногородних обучающихся, формировании платы за проживание в общежитии; ▪ об объеме образовательной деятельности, финансовое обеспечение которой осуществляется за счет бюджетных ассигнований федерального бюджета, бюджетов субъектов Российской Федерации, местных бюджетов, по договорам об образовании за счет средств физических и (или) юридических лиц; ▪ о поступлении финансовых и материальных средств и об их расходовании по итогам финансового года; ▪ о трудоустройстве выпускников. Копии: ✓ устава ОО; ✓ лицензии на осуществление образовательной деятельности (с приложениями); ✓ свидетельства о государственной аккредитации (с приложениями); ✓ плана финансово-хозяйственной деятельности ОО, утвержденного в установленном законодательством Российской Федерации порядке, или бюджетной сметы ОО; ✓ локальных нормативных актов, предусмотренных частью 2 статьи 30 Федерального закона "Об образовании в Российской Федерации", правил внутреннего распорядка обучающихся, правил внутреннего трудового распорядка и коллективного договора. Отчет о результатах самообследования с приложением его копии. Документ о порядке оказания платных образовательных услуг, в том числе образец договора об оказании платных образовательных услуг, документ об утверждении стоимости обучения по каждой образовательной программе.

20 Предписания органов, осуществляющих государственный контроль (надзор) в сфере образования, отчеты об исполнении таких предписаний. Иную информацию, которая размещается, опубликовывается по решению ОО и (или) размещение, опубликование которой являются обязательными в соответствии с законодательством Российской Федерации. Технологические и программные средства, которые используются для функционирования официального сайта, должны обеспечивать: • доступ к размещенной на официальном сайте информации без использования технические программного средства обеспечения, пользователя установка информации которого требует на заключения лицензионного или иного соглашения с правообладателем программного обеспечения, предусматривающего взимание с пользователя информации платы; • защиту информации от уничтожения, модификации и блокирования доступа к ней, а также иных неправомерных действий в отношении нее; • возможность копирования информации на резервный носитель, обеспечивающий ее восстановление; • защиту от копирования авторских материалов. При размещении информации на сайте школы нельзя забывать о сохранении персональных данных. персональные данные – это любая информация, к относящаяся определенному или определяемому на основании такой информации физическому лицу (субъекту персональных данных), в том числе его фамилия, имя, отчество, год, месяц, дата и место рождения, адрес, семейное, социальное, имущественное положение, образование, профессия, доходы, другая информация. Конфиденциальность персональных данных представляет собой обязательное для соблюдения оператором или иным получившим доступ к персональным данным лицом требование не допускать их распространение

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

22 ГЛАВА 2 ОБЗОР И СРАВНИТЕЛЬНЫЙ АНАЛИЗ HTMLРЕДАКТОРОВ 2.1 HTML-редактор DreamWeaver Macromedia Flash. Каждый выбирает свой инструмент для создания Webстраниц. Это может быть MS FrontPage или Macromedia DreamWeaver, Allaire HomeSite. А кто-то пользуется простым текстовым редактором, например Блокнотом (Notepad). Текстовые редакторы, возможно, использовать только для создания небольших страниц, так как у них есть много минусов (не поддерживаются проекты, отсутствует «подсветка» текста, в общем, работать с ними может только профессионал, знающий язык HTML). Рассмотрим визуальный HTML-редактор DreamWeaver. Этот программный продукт рассчитан на тех, кто плохо, или почти не знает язык HTML, хотя в нем можно создавать сайты, даже не обладая данными знаниями. DreamWeaver содержит все, что необходимо как для визуальной компоновки web-страниц, так и для работы с HTML-кодом. Интерфейс DreamWeaver настолько прост, что даже начинающий дизайнер сможет быстро создать профессиональный Web-сайт. Непосредственно в DreamWeaver можно создавать анимации в формате Macromedia Flash, использовать данные из Microsoft Office, легко импортировать rolloverграфику, меню и кнопки из Fireworks. Компания Macromedia считается лидером по производству программ для создания wеb-сайтов, а также законодателем моды в этой области. В последнее время она начала выпускать версию за версией данного продукта, тем самым все, более совершенствуя его. DreamWeaver-3,-4,-6 и это еще не предел. Причем в каждой новой версии добавляется всё больше и больше функциональных возможностей, не по одной и не по две, а чуть ли не десятками.

23 Одна из последних версий HTML-редактора компании MacromediaDreamWeaver 9, который относится к категории WYSIWYG-редакторов (то есть What You See Is What You Get), и этот пакет имеет очень много достоинств: удобный интерфейс, настройка функций, поддержка больших проектов и многое другое. Для работы в этой программе не нужно досконально знать HTML (в этом и упрощается преимущество технологии WYSIWYG – что вижу, то и получаю). 2.2 Редактор Macromedia DreamWeaver Macromedia DreamWeaver – профессиональный редактор HTML для визуального создания и управления сайтами различной сложности и страницами сети Internet. Нравится ли вам вручную писать код HTML или вы предпочитаете работать в визуальной среде, DreamWeaver облегчает эту работу и обеспечивает полезными инструментами и средствами, чтобы сделать свои собственные проекты непревзойденными. DreamWeaver включает в себя много инструментов и средств, для редактирования и создания профессионального сайта: HTML, CSS, JavaScript, редакторы кода (просмотр кода и инспектор кода), что позволяет вам, редактировать различные текстовые документы, которые поддерживаются в DreamWeaver. Также вы можете настроить DreamWeaver, чтобы он наводил порядок и переформатировал HTML, как вы этого хотите. Компания Macromedia решила большинство проблем совместимости и производительности, выпустив Flash, который к сегодняшнему дню весьма эволюционировал и является полноценной частью инструментов-техник Web-дизайна. Существуют plug-in'ы (подключаемые модули), которые встраиваются в браузер, и служат для просмотра Flash страниц. Называются они Flash Player. Причем в последних версиях Netscape Navigator и Internet Explorer эти модули уже встроены (если нет, то их можно бесплатно скачать

24 с сайта Macromedia). И существует программа Flash, с помощью которой эти страницы создаются. В пользу Flash приведу его основные достоинства и статистку использования Macromedia профессиональными разработчиками: • маленький размер получающихся файлов и, соответственно, более быстрая загрузка из сети. Flash использует векторный формат изображений и сжимает растровые и звуковые файлы, (которые также могут использоваться в страницах Flash), что очень положительно влияет на уменьшение размера страницы и время ее скачивания; • устранение проблем совместимости между браузерами. В отличие от HTML, Flash одинаково работает как в Internet Explorer, так и в Netscape Navigator. Имеется даже специальный вариант примочки- проигрывателя для браузеров, поддерживающих Java (Flash Java Player); • мощный событийно-управляемый язык. В Macromedia Flash используется специальный язык, при помощи которого можно создавать «интеллект» для своей страницы. Причем если в Flash 4 это был, скорее, некий скрипт (script), имеющий всего несколько основных функций, то в Flash 5 (несмотря на название «ActionScript») – это почти полноценный язык программирования, с поддержкой условий, циклов, массивов, функций и классов, которые можно наследовать. Здесь делается основной акцент на нестандартные интерфейсы. Нестандартные интерфейсы имеют ряд отличий от стандартных (под стандартными подразумеваются привычные интерфейсы HTML): 1. Специальные управляющие объекты (кнопки, панели, блоки). Для примера, рулетка в Microsoft Word – нестандартный объект. Ее практически невозможно реализовать в HTML, только картинку, но не интерактивную функциональность; 2. Независимое размещение объектов, другими словами, не размещение объектов относительно друг друга, а расположение по

25 координатам и уровням. В DHTML такая возможность существует, но в DHTML надежно реализовать можно только совсем простые вещи; 3. Прозрачное взаимодействие с любым объектом. Т.е. все объекты равны, не складывается ситуация, когда часть принадлежит системе, часть вашему коду, и т.д., и при этом набор обрабатываемых событий один для всех. Существует два принципиальных условия применения Flash: • нужно аккуратно выбирать область применения Flash за пределами анимации; • этим инструментом нужно уметь грамотно пользоваться. С первым условием достаточно просто: Flash нужен там, где нестандартный интерфейс дает много новых возможностей, где нужна интерактивность, где не подходит «спартанская» внешность. При совпадении всех этих требований имеет смысл задуматься об использовании Flash 5 в качестве инструмента для построения системы. Основные плюсы и минусы программирования в среде Flash 5 – в процессе разработки: ▪ почти каждая аккуратно запрограммированная функция сразу очевидно полезна во многих местах; ▪ возможно построение универсального сервера; ▪ легко переносится часть логики с серверной на клиентскую часть; ▪ свобода в верстке и в наборе control-элементов (кнопок, меню, списков, таблиц). 2.3 HTML-редактор FrontPage Одним из первых редакторов является FrontPage. Редактор входит в программный пакет MS Office. Этот программный продукт упрощает работу с HTML-языком. Microsoft FrontPage призван облегчить нам задачу достойно представить себя в WWW или создать Web-сайт для сети вашей организации.

26 FrontPage органично вписывающийся в пакет приложений Microsoft Office, стал первым продуктом широкого использования для Internet, сочетающим в себе клиентскую и серверную части и обеспечивающим возможность разработки сайта в целом и установки его на большинство популярных серверов. Если вы хотите создать свой Web-сайт, но с программированием знакомы только понаслышке, не беспокойтесь — FrontPage способен взять на себя всю необходимую работу по программированию. Однако FrontPage станет достаточно серьезным помощником и для профессиональных разработчиков, предпочитающих держать в руках полный контроль над творческим процессом. FrontPage поставляется с несколькими дополнительными утилитами, вместе составляющими так называемый FrontPage Bonus Pack. Уникальность FrontPage еще и в том, что он базируется на клиент-серверной модели разработки, что неимоверно облегчает интеграцию с большинством компьютерных систем. Давайте разберемся в этом получше. В клиент – серверных системах, сервер — это компьютер (или приложение), обеспечивающий удаленным пользователям доступ по сети к своим данным или ресурсам. Клиент — это компьютер (или приложение), который запрашивает эти данные или ресурсы. Чаще всего сервер — мощная машина, а клиент — обычный настольный компьютер. Предположим, например, что все счета, выставленные компанией Cascade Coffee Roasters, хранятся в базе данных на сервере. В клиент-серверной платежной системе вы вводите информацию на компьютере-клиенте, а заполнив счет, сохраняете информацию на сервере, централизованно. Таким образом, вы можете подключить к серверу неограниченное количество клиентских компьютеров, и все они будут иметь доступ к одним и тем же данным. FrontPage работает аналогичным образом, фактически он включает и сервер, и клиента. Его клиентское программное обеспечение состоит из Проводника (FrontPage Explorer) и Редактора (FrontPage Editor). Проводник позволяет просматривать и администрировать сайты несколькими различными способами. Для

27 создания новых страниц и редактирования существующих предназначен Редактор. Создание сайта на Google Sites. Основные достоинства Google Sites: простой и понятный интерфейс есть обширная база знаний Google (если что-то не понятно) легко размещать разнообразное содержание: текстовые документы, презентации, таблицы организация общего информационного пространства. Этапы создания сайта в Google Sites. • зарегистрироваться ( логин и пароль) в Google Accounts; • перейти на http://sites.google.com/ и нажать «Создать»; • выбрать шаблон для сайта; • ввести название сайта; • посмотреть не занят ли web-адрес. Если занят, то ввести на латинице новое название сайта (http://sites.google.com/site/ не меняется, если нет своего платного места в сети, но мы то говорим про бесплатный сайт); • выбрать тему оформления страницы; • набрать указанный код – антибот; • нажать на кнопку “Создать” вверху страницы. Технически бесплатный сайт готов. Теперь необходимо наполнить его содержимым: текстами, картинками и т. д. Как редактировать сайт в Google Sites. Начать с главной страницы. ▪ нажмать на кнопку в виде карандаша «Изменить страницу» вверху; ▪ выбрать поле для редактирования и внести изменения; ▪ нажать на кнопку «Сохранить» вверху. Теперь изменения внесены. Аналогичные действия доступны и для других страниц. Как вставить картинку на страницу созданную в Google Sites. Добавить на страницу картинку или другое содержание можно так: выбрать меню сверху пункт меню «вставить». Для того что бы меню вставки и

28 форматирования отобразилось нужно перейти в режим редактирования, то есть нажать кнопку «Редактировать». Далее Google Sites предложит стандартный диалог выбора картинки. Как добавить страницы на сайт созданный в Google Sites: 1. Нажмите на кнопку «Создать страницу» в правом верхнем углу. 2. В открывшемся окне впишите название страницы, шаблон, положение относительно других страниц. 3. Нажмите «Создать». 4. Отредактируйте и сохраните страницу. Основным недостатком MS FrontPage, является то, что он генерирует очень большой HTML-код (слишком много лишнего), поэтому страницы получаются большими, что сказывается на скорости загрузки. Более того, при создании Web-страниц в этом редакторе видишь одно, а в окне браузера – совсем другое (особенно это касается Netscape Navigator). Блокнот в Windows и Linux. Плюсы ручного создания сайтов в блокноте: 1. В блокноте вы наглядно пишете свой сайт в HTML-коде; 2. В блокноте вы и только вы отслеживаете все теги и конструкции тегов не вписывая другие излишества; 3. С блокнотом вы учитесь писать не только HTML-код, но и скрипты под ваш сайт; 4. Блокнот прост и бесплатен; 5. Web-странички написанные в блокноте, как правило быстрее загружаются у других пользователей. Минусы написания сайта в блокноте: • для создания статичного сайта нужно хорошо знать HTML и • для создания динамического сайта, помимо HTML и CSS, нужно CSS; хорошо знать JavaScript;

29 • для создания сайта на профессиональном уровне нужно знать, помимо выше перечисленных языков, ещё PHP и MySQL; • нужно для создания сайта на ещё более профессиональном уровне, знать такие языки программирования, как C++ и Java; Страницы в ручном режиме создаются медленно; • нужно внимательно писать синтаксис кода. Нет возможности изменения кода сразу на нескольких web-страницах, если вы не работаете на PHP. Мы остановимся на одном из самых распространенных и популярных из них – блокноте. Это не означает, что другие пакеты плохи, сложны в освоении или неудобны, отнюдь. От локализованных конструкторов сайта пришлось отказаться из-за их стоимости, а бесплатные он-лайн конструкторы не дали воли фантазии, ограничивая своими шаблонами, поэтому решил начать работать в этом направлении с нуля, где помощником оказался блокнот. И после знакомства с этой программой я понял насколько конструкторы сайтов, за исключением некоторых локализованных и он-лайн версий, ограничены. Из всего сказанного я, как вы уже поняли, сделал свой выбор.

30 ГЛАВА 3 ПРОЕКТИРОВАНИЕ И РАЗРАБОТКА WEBСАЙТА 3.1 Разработка структуры для web-сайта Навигационная схема Web-сайта зависит от его структуры и определяет то, как пользователь будет по нему перемещаться и получать доступ к информации, которую Вы представляете. Простота и удобство навигации является одним из важных факторов, определяющих посещаемость Web-сайта. Пользователи должны быстро и легко перейти на любую страницу Web-сайта, в том числе на начальную. Именно на этом этапе закладываются основные принципы работы сайта, его структура, формируется общее представление о дальнейшей работе над проектом. Также на этом этапе необходимо придумать названия разделов сайта, заголовки страниц, определить переходы между ними, то есть продумать логическую структуру размещения информации. В результате третьего этапа должна быть сформирована ясная и логическая структура размещения информации на сайте - ничто так не утомляет при поиске нужной информации, как плохо структурированные сайты. Существует несколько видов структурирования информационного материала на Web-сайте: линейная, иерархическая узкая глубокая и широкая не глубокая, смешанная структура. Линейная структура материала располагается последовательно друг за другом,как показано на рис. 3.1. Рис.3.1. Линейная структура

31 Иерархическая структура. Чаще всего структура Web-сайта представляет собой иерархию. При этом сначала создают категории высшего уровня, а затем материал в логическом порядке размещают в категории, которые находятся ниже. Иерархические структуры бывают двух видов: узкая глубокая и широкая неглубокая. Широкая неглубокая иерархия. Эта структура обладает достаточно понятной навигацией, но предполагает достаточно долгий путь к нижним уровням, из-за чего информация, размещенная там, нередко не доходит до потенциального пользователя. Характеризуется большим количеством категорий, как на верхнем, так и на последующих уровнях. Сразу дает полное представление об информации, размещенной на сайте, но затрудняет поиск на нижних уровнях структуры. Собранный информационный материал необходимо структурировать по логическим частям, каждая из которых в дальнейшем будет представлять отдельный HTML-файл. Для сбора материала и разработки сайтов необходимо грамотно подобрать материал, информативности, структурирован отвечающий доступности, требованиям понятности. соответствующим образом Материал с учетом достоверности, должен быть дидактических принципов построения. При сборе материала нужно руководствоваться принципами педагогического дизайна. Наш сайт будет представлять собой широкую иерархию с элементами нелинейной структуры. Первый уровень иерархии составляют основные рубрики «Специальный раздел», «Ученики», «Выпускники», «Одарённые дети», «Детская организация», «Учителя», «Родителям», «Аккредитация», «Телефоны «Горячих линий»», «Гордость школы» (рис 3.2).

Одарённые дети 32 Копилка достижений Фотогалерея Результаты олимпиад Рис. 3.2. Структура web-сайта На рис. 3.3 представлена структура сайта. Кружки Секция баскетбола Юный художник Народный умелец Рис. 3.3. Структура web-сайта Определим информационную часть сайта (статическая составляющая) и активную часть, которая требует от пользователя выполнения действий, например, заполнения форм, просмотр ресурсов: • сгруппируем идеи по содержанию; • сгруппируем идеи по возможностям; • определим приоритет каждой из идей. На рис. 3.4 продемонстрирована общая структура web-сайта.

33 Основные сведения Структура и органы управления Документы Специальный раздел Платные образовательные услуги Ученики Стипендии и иные виды материальной поддержки Образование Одарённые дети Внеурочная деятельность Детская организация О проекте Учителя Родителям Аккредитация Медалисты Телефоны "Горячих линий" Творчество Гордость школы Ученики Спорстмены Рис. 3.4. Общая структура web-сайта Главная страница Выпускники

34 проект "Крестьянская изба" Дошкольное образование Начальные классы (1кл) Начальные классы (2кл) Методическая копилка Начальные классы (3кл) История и общество Русский язык и литература Физика Воспитательная работа География Технология Православная культура Математика Рис. 3.5. Структура web-сайта 3.2 Описание этапов разработки Дизайн и стиль оформления были реализованы с помощью HTML, CSS, функций Java Script. Титульная страница содержит новости с приложенными к ним фотографиями. Слайдинг фото осуществляется с помощью скрипта: Листинг 3.1. Функция смены фотографий

35 function IIPYouScrollToWhile(id,side,step) { var div=document.getElementById(id); if(side=='Left') { if(div.scrollLeft!=1224) div.scrollLeft+=step; } if(side=='Right') { div.scrollLeft-=step; } } Так же на титульной странице находится кнопка, которая включает версию для слабовидящих, при нажатии на которую меняется цветовая гамма сайта, размер и цвет текста. Смена цветовой гаммы реализована с помощью скрипта: Листинг 3.2. Смена цветовой гаммы function butt() { if (layer2.style.visibility=="hidden") layer2.style.visibility="visible"; } function clos() { if (layer2.style.visibility=="visible") layer2.style.visibility="hidden"; } Сам плагин jquery.comfortable (Плагин для слабовидящих) выглядит так показан в листинге 3.3. Листинг 3.3. Плагин jquery.comfortable (function( $ ){ var methods = { init : function( options, initLink ) { $.cookie.json = true; lastSettings = $.cookie('sver-last-options')||{}; var settings = $.extend( {

36 'base-style' : '', 'default-background' : '#fff', 'default-text-color' : '#000', 'back-link-text' : 'Обычная версия', 'container' : 'body' }, lastSettings, options); jQuery( document ).ready(function( $ ) { if($.cookie('sver-initLinkId')&&( $.cookie('sver-size')|| $.cookie('svercolor')|| $.cookie('sver-bgColor'))){ … jQuery( document ).ready( function() { jQuery('#cr_version_link').specialVersion({'base-style' : '/wpcontent/plugins/comfortable-reading/css/styles.css'}); }); Просмотр фотографий реализован с помощью Lightbox на jQuery. Lightbox - это плагин на jquery, который открывает изображения на весь экран при нажатии и выводит кнопки: "далее" и "назад". Благодаря этому плагину при просмотре фото мы можем настроить стиль кнопок, прозрачность фона, подпись к изображениям, горячие клавиши и многое другое, что представлено в листинге 3.4. Листинг 3.4. Настройка стилей, подписей (function($) { /** * $ is an alias to jQuery object * */ $.fn.lightBox = function(settings) { settings = jQuery.extend({ // Configuration related to overlay overlayBgColor: '#000', overlayOpacity: 0.8, // Configuration related to navigation fixedNavigation: false, // Configuration related to images imageLoading: 'images/lightbox-ico-loading.gif', imageBtnPrev: 'images/lightbox-btn-prev.gif',

37 Размеры, рамки, фон, тип позиции Lightbox устанавливаются в cssфайле: Листинг 3.5. CSS-файл #jquery-overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; } #jquery-lightbox { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; } 3.3 Программирование дизайна web-сайта Разработка дизайна веб-сайта – сложная и трудоемкая задача. При разработке оформления веб-сайта, подборе шрифтов и цветовой схемы нужно руководствоваться не только принципами эргономики, но и социологическими и педагогическими аспектами. Чтобы сделать дизайн сайта более привлекательным все пункты меню должны размещаться в правильном, удобном для просмотра порядке, бросаться в глаза, чтобы человек при желании мог перейти в другой раздел. Необходимо периодически обновлять публикации, люди ведь обычно приходят узнать что-то новое и полезное. Шрифт на web-сайте был выбран таким образом, чтобы посетители могли спокойно получить нужную им информацию. В верхней части веб-сайта обычно помещается так называемая «шапка» - логотип организации в сочетании с текстом. Текстом может быть название

38 этой организации или её слоган. Для школы он выглядит следующим образом (рис. 3.6). Рис. 3.6. Логотип сайта Пункты меню на сайте были разработаны в виде вертикального меню (рис. 3.7). Рис. 3.7. Меню сайта

39 Имеется версия для слабовидящих, содержащая увеличение размера шрифта до 200%, изменения расстояния между буквами до 20 раз, отключение/включение палитры цветов и картинок (рис.3.8) Рис.3.8. Переход на версию для слабовидящих Так же имеется страница, на которой указано, что сайт соответствует законодательству РФ. ФЗ «Об образовании в Российской Федерации» (рис.3.9). Рис. 3.9. Страница с требованиями к сайту (fz.php) В страницу «Специальный раздел» (рис. 3.10) включены несколько подразделов, в которых мы можем узнать дату основания школы, её историю, информацию об учредителе образовательной организации, место нахождения учреждения, график работы и скачать положение о защите персональных данных учащихся, воспитанников и их родителей.

40 Рис. 3.10. Основные сведения (sved_c.php) Страница «Телефоны «Горячих линий»» содержит все контакты «Горячих линий» по Белгородский области (рис. 3.11). Рис. 3.11. Горячие линии (telefon.php) На странице аккредитации Вы можете скачать все локальные акты и образовательные ресурсы МОУ «Венгеровской СОШ» (рис. 3.12).

41 Рис. 3.12. Ресурсы для скачивания (resurs.php) Таким образом, были разрабатываемого web-приложения. рассмотрены основные страницы

42 ГЛАВА 4 АПРОБАЦИЯ САЙТА Разработанное в данном дипломном проекте Web-приложение было успешно апробировано и протестировано. В программе не было выявлено критических ошибок и сбоев. Система работает соответственно поставленным целям и задачам ее функционирования. Были исправлены неточности описания, а также мелкие недочеты и сбои в ее работе. Процесс размещения сайта также называют иногда публикацией сайта. Этот процесс неразрывно связан с понятием «хостинг». Как известно, в Интернете существует три основных вида хостинга: • платный хостинг, который продается за деньги; • бесплатный хостинг; • бонусный хостинг, который предоставляется бесплатно, т.е. в качестве бонуса поощрения в случае покупки контрактного dial-up доступа в Интернет. К примеру, можно купить карточку для доступа в Интернет, на которой четко и ясно написано, что ее владелец может бесплатно получить на сервере провайдера почтовый ящик размером 10 МБ и место под веб-сайт, также объемом 10 МБ. Тем не менее, последний вид хостинга является наименее распространенным, так как понятно, что смена провайдера Dial-Up доступа автоматически означает потерю сайта. Поэтому мало кто рискует сайты на таких хостингах заводить. На самом деле, веб-хостинг, это не только «место на диске», но еще и: ▪ трафик, который стоит денег; ▪ дорогостоящее программное обеспечение, в том числе и то, которое разрабатывается специалистами фирмы - хостинг-провайдера; Помимо определения хостинга, на этом этапе производится выбор инструментальных средств, для размещения сайта в сети Интернет.

43 Тестирование. На этом этапе проводится тестирование образовательного сайта на предмет обнаружения возможных ошибок, связанных с обычным «человеческим фактором» в процессе разработки и интеграции программных решений в функциональность сайта. При тестировании следует обратить внимание на время загрузки страниц и при недостаточном быстродействии продолжить оптимизацию графических элементов и текста страниц и программ. Для тестирования на удобство пользования интерфейсом приглашают специальные группы людей. В условиях образовательного учреждения можно привлечь учащихся и преподавателей к просмотру сайта и, не давая им никаких инструкций, посмотреть, как они будут пользоваться веб-сайтом. Следует понаблюдать, как они перемещаются по веб-сайту, где возникают паузы, когда пользователи испытывают трудности. И при этом не стоит подсказывать им и давать указания, такие наблюдения могут дать много информации. На основании результатов тестирования обычно принимаются решения об исправлении ошибок и неточностей, возможно о доработке сайта. Также в редакторе есть проверка орфографии. Поддержка. Содержимое веб-сайта может подвергаться неоднократным изменениям. Важно, чтобы предоставляемая на веб-сайте информация всегда была актуальной, поэтому надо как можно чаще обновлять информацию на своем веб-сайте, по возможности расширять материал, улучшать дизайн. Обязательное правило для функционирования веб-сайта гласит, что обновления на сайте должны появляться не реже одного раза в месяц. В противном случае постоянных посетителей на сайте просто не будет, и сайт может потерять не только потенциальных, но и уже состоявшихся посетителей. После покупки хостинга пользователь получает все необходимые доступы для управления сайтом: доступ к панели управления, вход по FTP, вход по FTP. Теперь необходимо скопировать дистрибутив на хостинг, удобнее

44 всего это делать при помощи FTP менеджера. Копировать файлы можно как в корневую папку на хостинге, так и в папку с любым названием. Для доступа к сайту по FTP нужно знать логин, пароль и адрес сервера (рис. 4.1). Рис. 4.1. Подключение к ftp Для доступа в административную часть в последующем нужно будет ввести в адресную строку вашего браузера «https://panel.hostland.ru/» (рис.4.2). Рис. 4.2. Вход в административную панель

45 На рис. 4.3 продемонстрирован сервер-меню. Рис. 4.3. Сервер-меню Во вкладке ftp/файлы мы можем выгрузить файлы нашего сайта на хостинг (см. рис. 4.3). В главном меню хостинга мы можем посмотреть всю информацию о сервере (дата регистрации, занимаемое место на сервере и т.д.), что показано на рис. 4.4. Рис. 4.4. Главное меню хостинга

46 ЗАКЛЮЧЕНИЕ Академик Семенов А.Л., сказал: «Задача современной школы - научить человека жить в информационном мире». В настоящем информационном веке наблюдается большие перемены. Чтобы маленький человек не потерялся в этом информационном мире, его необходимо научить применять новые технологии. Чтобы не информационные технологии управляли им, наоборот, он сам управлял ими себе на благо. Создание школьного сайта способствует повышению информационной культуры всех участников образовательного процесса. Ведь современное время требует высококомпетентных, ответственных работников в любой сфере. Подготовить таких специалистов помогут те преподаватели которые работают в ИОС. С помощью этой среды можно воспитать информированных, гибко и активно мыслящих, динамичных и дающих оценку за свою выполненную работу. В настоящее время каждый ученик должен преобразовывать, освоить и использовать в практической деятельности большую информацию. Надо заинтересовать, используя технологии информационного обучения, чтобы ребенок активно и с большим интересом работал и видел свой результат и оценил его. В работе над проектом были изучены теоретические аспекты и требования для создания сайта. В тесном сотрудничестве с учителями МОУ «Венгеровская СОШ» проводилось планирование этапов работы над проектом, обсуждение требований сайта, выбор инструментальных средств, разработан сайт, который обладает такими техническими характеристиками и функциями как надежность, стабильность, понятный и логичный интерфейс, высокая скорость обработки данных. В ходе работы над дипломным проектом были отработаны практические навыки использования современных средств Web-разработки,

47 позволяющих создавать яркие с красивыми визуальными эффектами Webстраницы. Были изучены алгоритмические структуры, система команд, функций и процедур языков программирования РНР, Java Script. В рамках данной работы решены поставленные задачи: - рассмотрены функциональные возможности веб-сайтов. Проведён анализ существующих аналогов; - выполнен обзор и выбор инструментальных средств для написания сайта; - спроектирована структура сайта; - реализован сайт; - полученный сайт был апробирован; Цель проекта реализована в полной мере, задачи выполнены. Таким образом, цель — разработать презентационный сайт школы, а также реализовать базовые механизмы для шаблона школьного сайта достигнуты, наработанные решения готовы к применению для реализации других школьных сайтов. В дальнейшем планируется: - улучшить взаимодействие между школьным сайтом и информационной системой района; - использовать наработанные решения для создания других школьных сайтов.

48 СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ 1. Афанасьев Д. Office XP / Д. Афанасьев, С. Баричев, О. Плотников М., 2002г. 2. Антонов, А. В. Системный анализ [Текст]: учеб. для вузов по напр. "Информатика и вычисл. техника" и спец. "Автоматизир. системы обработки информации и управления" / А. В. Антонов. - М.: Высш. шк., 2006г.. 3. Банк, В. Р. Информационные системы в экономике [Текст]: учеб. для вузов по спец. «Прикл. информатика (по областям)» / В. Р. Банк, В. С. Зверев. - М.: Экономистъ, 2006. 4. Бокарев, Т.А. Энциклопедия Интернет-рекламы. [Текст] / А.Т. Бокарев. — М.: Издательство «ПРОМО-РУ», 2000. 5. Будилов, В.А. Основы программирования для Интернета [Текст] / Будилов В.А.- СПБ.: БХВ - Петербург, 2003. 6. Бумфрей, Ф., Диренцо, О. XML. Новые перспективы. [Текст] / Ф. Бумфей, О. Диренцо. – М.: ДМК-Пресс, 2000. 7. Бовтенко М.А. Современное офисное оборудование = Modern Office Eguipment : Учеб. пособие / М. А. Бовтенко; Новосиб. гос. техн. ун-т. – Новосибирск : НГТУ, 2002г. 8. Бовтенко М. А. Создаем компьютерные учебные материалы самостоятельно: Перевод Krauss M. Web Page Evaluation Form [Электронный ресурс]. – Режим доступа: http://www.itlt.edu.nstu.ru/article11.ph 9. Веллинг, Л., Томсон Л. Разработка Web-приложений с помощью PHP и MySQL [Текст] / Л. Веллинг, Л. Томсон. – М.: Вильямс, 2005г. 10. Волков, О.И. Экономика предприятия [Текст]: курс лекций / О. И. Волков, В. К. Скляренко. - М.: Инфра-М, 2002г. 11. Грузинов, В.П. Схема маркетинговой деятельности [Текст] / В.П. Грузинов. - М.: «Инфра – М», 1998.-305с.

49 12. Гуров, Г. Г. Интернет для бизнеса [Текст] / Г.Г Гуров. — М., 13. Гаевский А.Ю. Самоучитель работы в Microsoft Office: Word 1997. 97/2000. Excel 97/2000. Электронная почта / А. Ю. Гаевский – Киев : А.С.К. , 2002 14. Джерк, Н. Разработка приложений для электронной коммерции. Библиотека программиста [Текст] / Н. Джерк. – СПб.: Питер, 2001г. 15. Дик, В.В. Информационные системы в экономике[Текст] /В.В. Дик.— М.: Финансы и статистика, 2002г. 16. Дубянский, В. М. 1С:Предприятие. Конфигурирование и администрирование для начинающих [Текст]: экспресс-курс / В. М. Дубянский. - СПб.: БХВ-Петербург, 2005г. 17. Дунаев, В.В. Самоучитель PHP [Текст] / В.В Дунаев. – СПб.: Питер, 2007. 18. Дунаев, В.В. Самоучитель. Сценарии для Web-сайта. PHP и JavaScript [Текст] / В.В Дунаев. – СПб.: BHV-Санкт-Петербург, 2006. 19. Зольников, Д.С. PHP 5. Как самостоятельно создать сайт любой сложности [Текст] / Д.С. Зольников. – М.: НТ Пресс, 2005. 20. Иванов, В. Эффективные технологии создания информационных систем [Текст] / В. Иванов, С. Мещеряков. – М.: Политехника, 2005.. 21. Калянов, Г.Н. Case-технологии. Консалтинг при автоматизации бизнес-процессов [Текст]: учеб. для вузов; изд-е 2-е, перераб./ Г.Н. Калянов – М.: Горячая линия – Телеком, 2004. 22. Карпова, Т.С.Базы данных: модели, разработка, реализация [Текст] / Т.С. Карпова. - ЗАО «Питер Бук», С-Петербург, 2001. 23. Кент, П. Internet / Пер. c англ. В.Л. Григорьева [Текст] / П. Кент. - М.: Компьютер, ЮНИТИ, 2002. 24. Кузнецов, М.В., Симдянов И.В. PHP 5. Практика создания web- сайта [Текст] / М.В. Кузнецов. – СПб.: BHV-Санкт-Петербург, 2005. – 401 с.

50 25. Храмцов П.«Практическое введение в программирование на JavaScript» – М.: Нолидж, 2001. 26. Картузов А.В « Программирование на языке JAVA» – М.: Нолидж, 2001. 27. Стефан Кох «Введение в JavaScript» – М.: Нолидж, 2002. 28. Кишик А. Н. Office XP. Эффективный самоучитель: Быстро… Просто… Наглядно…/ А. Н. Кишик. – М.: ДиаСофтЮП, 2002. 29. Ларри Ульман «Основы программирования на РНР Самоучитель» - М.: Нолидж, 2005. 30. Ларри Ульман «Программирования на РНР» - М.: Нолидж, 2006. 31. Елова Д. «Основы PHP» - М.: Нолидж, 2006. 32. Паршукова коммуникационная Г.Б., компетенция Бовтенко М.А. преподавателя: ИнформационноУчеб. пособие. - Новосибирск, 2005. 33. Перепелкин В. Пользователь персонального компьютера. Современный курс / В. Перепелкин – Ростов н/Д : Феникс , 2002. 34. Фролов А.В. «Программирование на Java» - М.: Нолидж, 2005. 35. Мазуркевич А. Нолидж, 2005.- «PHP настольная книга программиста» - М.:

51 ПРИЛОЖЕНИЯ Файл index.php <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Новая страница 1</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <table BORDER="0" CELLPADDING="0" CELLSPACING="0" width="100%" height="100%"> <tr> <td width="200px" style="background-color:#cccccc;vertical-align:top;borderright: 1px solid #cccccc;border-bottom: 1px solid #cccccc;border-top: 1px solid #cccccc;textalign:center;" > <img src="img/logo_2.png" > </td> <td colspan="2" style="border-bottom: 1px solid #cccccc;backgroundimage:url('img/header_fon.jpg');text-align:center; "> <img src="img/img_header.png" style="position: relative; top: 5px"> </td> </tr> <tr> <td width="200px" style="vertical-align:top;border-right: 1px solid #cccccc" > <ul class="menu"> <li><a href="link1.html">» О ШКОЛЕ</a></li> <li><a href="link2.html">» УЧИТЕЛЯ</a></li> <li><a href="link3.html">» ДОКУМЕНТЫ</a></li> <li><a href="link4.html">» ФОТОГАЛЕРЕЯ</a></li> <li><a href="link4.html">» ГОСТЕВАЯ КНИГА</a></li> <li><a href="link4.html">» ДЕТСКАЯ ОРГАНИЗАЦИЯ</a></li> <li><a href="link4.html">» НАША СЛУЖБА</a></li> <li><a href="link4.html">» МЕТОДИЧЕСКАЯ КОПИЛКА</a></li> </ul> </td> <td style="vertical-align:top;padding-left:15px;padding-right:15px"> <table width="100%" height="100%"> <tr> <td class="obv" height="30px" colspan="2"> НОВОСТИ </td> </tr> <tr> <td width="48%" style="vertical-align:top;"> <table cellpadding="0" cellspacing="0" width="100%"> <tr> <td style="vertical-align:top;border-bottom: 1px solid #cccccc;padding-bottom:10px;" > height="30px"

52 <img src="img/IMG_0435.jpg" width="130px" height="100px" align="left" style="border:2px solid #cccccc; margin-right:15px;margintop:10px;"><p class="new">26.07.2011г.</p> <p class="new_sod">Пройди свой путь он ведь одни и с него не свернуть пусть не знаешь зачем и не знаeшь куда ты идешь.</p> </td> </tr> <tr> <td height="30px" style="vertical-align:top;border-bottom: 1px solid #cccccc;padding-bottom:10px;" > <p class="new">26.07.2011г.</p> <p class="new_sod">Пройди свой путь он ведь одни и с него не свернуть пусть не знаешь зачем и не знашь куда ты идешь.</p> </td> </tr> <tr> <td height="30px" style="vertical-align:top;border-bottom: 1px solid #cccccc;padding-bottom:10px;" > <p class="new">26.07.2011г.</p> <p class="new_sod">Рокен рол мертв а я еще нет - рокен рол а я</p> </td> </tr> </table> </td> <td style="vertical-align:top;padding-left:35px;"> <table cellpadding="0" cellspacing="0" width="100%"> <tr> <td height="30px" width="48%" style="vertical-align:top;border-bottom: 1px solid #cccccc;padding-bottom:10px;" > <p class="new">26.07.2011г.</p> <p class="new_sod">Пройди свой путь он ведь одни и с него не свернуть пусть не знаешь зачем и не знаtшь куда ты идешь.</p> </td> </tr> <tr> <td height="30px" width="48%" style="vertical-align:top;border-bottom: 1px solid #cccccc;padding-bottom:10px;" > <p class="new">26.07.2011г.</p> <p class="new_sod">День знаний</p> </td> </tr> <tr>

53 <td height="30px" style="vertical-align:top;border-bottom: 1px solid #cccccc;padding-bottom:10px;" > <img src="img/P2031178.JPG" width="130px" height="100px" align="left" style="border:2px solid #cccccc; margin-right:15px;margintop:10px;"><p class="new">26.07.2011г.</p> <p class="new_sod">Пройди свой путь он ведь одни и с него не свернуть пусть не знаешь зачем и не знаешь куда ты идешь.</p> </td> </tr> </table> </td> </tr> <td colspan="2">   </td> </tr> </table> </td> <td width="160px" style="border-left: 1px solid #cccccc;verticalalign:top;padding-left: 15px;padding-right:15px; "> <table cellpadding="0" cellspacing="0" width="100%" > <tr> <td class="obv" height="30px"> ОБЪЯВЛЕНИЯ </td> </tr> <tr> <td> <p class="new">26.07.2011г.</p> <p class="new_sod">Пройди свой путь он ведь одни и с него не свернуть пусть не знаешь зачем и не знаешь куда ты идешь.</p> </td> </tr> <tr> <td> <p class="new">27.07.2011г.</p> <p class="new_sod">День знаний</p> </td> </tr> <tr> <td> <p class="new">26.07.2011г.</p> <p class="new_sod">Рокен рол мертв а я еще нет - рокен рол а я</p> </td> </tr> </table> </td> </tr> <tr> <td height="50px" style="background-color:#cccccc;"> </td> <td style="background-color:#339900;vertical-align:middle;">

54 <p style="margin-bottom:0;margin-left:20px;font-family:arial;fontsize:12;color:#ffffff;">МОУ "Венгеровская средняя общеобразовательная школа" </p> <p style="margin-top:0;margin-left:20px;font-family:arial;fontsize:12;color:#ffffff;">Ракитянского района Белгородской области © Горбунов Иван, 2011</p> </td> <td style="background-color:#339900;"> <p style="margin-bottom:0;margin-left:25px;font-family:arial;fontsize:12;color:#ffffff;"> <u>Образование района </u> </p> </td> </tr> </table> </body> </html>

55 Файл menu.php <ul id="my-menu" class="sample-menu"> <li><a href="../index.php">» НА ГЛАВНУЮ</a></li> <li><a href="">» СПЕЦИАЛЬНЫЙ РАЗДЕЛ</a> <ul> <li><a href="sved_c.php" >» основные сведения</a></li> <li><a href="strukt.php" >» структура и органы управления образовательной организации</a></li> <li><a href="doci.php">» документы</a></li> <li><a href="uslugi.php">» платные образовательные услуги</a></li> <li><a href="stepen.php">» cтипендии и иные виды материальной поддержки</a></li> <li><a href="obraz.php">» образование</a></li> <li><a href="fgos.php">» образовательные стандарты</a></li> <li><a href="rucav.php">» руководство</a></li> <li><a href="mat_basa.php">» материально - техническое обеспечение и оснащенность образовательного процесса</a></li> <li><a href="finans.php">» финансо-хозяйственная деятельность</a></li> <li><a href="vakant.php">» вакантные места для приёма (перевода)</a></li> <li><a href="ovz.php">» дети инвалиды и с ОВЗ</a></li> <li><a href="ege.php">» итоговая аттестация</a></li> </ul> <li><a href="uch.php" >» УЧИТЕЛЯ</a></li> <li><a href="fotouchi/demos/uchi.php" >» УЧЕНИКИ</a></li> <li><a href="vip.php" >» ВЫПУСКНИКИ</a></li> <li><a href="">» ГОРДОСТЬ ШКОЛЫ</a> <ul><li><a href="gold.php">медалисты</a></li> <li><a href="sport_d.php">спортсмены</a></li> <li><a href="uchi.php">ученики</a></li> <li><a href="tv.php">творчество</a></li> </ul> </li> <li><a href="">» МЕТОДИЧЕСКАЯ КОПИЛКА</a> <ul><li><a href="link2.html">проект "Крестьянская изба"</a></li> <li><a href="liter.php">русский язык и литература</a></li> <li><a href="russ.php">русский язык и литература</a></li> <li><a href="istor_pr.php">история и общество</a></li> <li><a href="nach.php">начальные классы (1кл)</a></li> <li><a href="nach3.php">начальные классы (2кл)</a></li> <li><a href="nach1.php">начальные классы (3кл)</a></li> <li><a href="doy.php">дошкольное образование</a></li> <li><a href="uvr.php">воспитательная работа</a></li> <li><a href="fiz_baza.php">физика</a></li> <li><a href="matematika.php">математика</a></li> <li><a href="texnolog.php">технология</a></li> <li><a href="texnol.php">технология (девочки)</a></li> <li><a href="geograf.php">география</a></li> <li><a href="pravosl.php">Православная культура</a></li> </ul> </li> <li><a href="">» СОТРУДНИЧЕСТВО С ХРАМОМ</a> <ul><li><a href="xram_1.php">новости</a></li>

56 <li><a href="ierei.php">настоятель храма</a></li> <li><a href="istor_xr.php">история храма</a></li> <li><a href="pasha.php">традиции</a></li> <li><a href="doci_x.php">беседы</a></li> <li><a href="moleben.php">молебен</a></li> <li><a href="foto_xr.php">фотогалерея</a></li> </ul> </li> <li><a href="">» ДЕТСКАЯ ОРГАНИЗАЦИЯ</a> <ul><li><a href="deti.php">о проекте</a></li> <li><a href="vneuroch.php">внеурочная деятельность</a></li> </ul> </li> <li><a href="">» ОДАРЕННЫЕ ДЕТИ</a> <ul><li><a href="2008.php">копилка достижений</a></li> <li><a href="fotouchi/demos/n_uchi.php">фотогалерея</a></li> <li><a href="olimp.php">результаты олимпиад</a></li> </ul> </li> <li><a href="resurs.php">» АККРЕДИТАЦИЯ</a></li> <li><a href="roditel.php">» РОДИТЕЛЯМ</a></li> <li><a href="krugok.php">» КРУЖКИ</a></li> <li style="margin-left:15px;"><a href="">» Юный художник</a> <ul> <li><a href="xud_vr.php">время проведения</a></li> <li><a href="xud.php">о проекте</a></li> <li><a href="dostig.php">достижения</a></li> <li><a href="tvorch.php">коллективное творчество</a></li> <li><a href="rab.php">лучшие работы</a></li> <li><a href="sachuna.php">творчество учителя</a></li> </ul> </li> <li style="margin-left:15px;"><a href="">» Секция баскетбола</a> <ul> <li><a href="sport_vr.php">время проведения</a></li> <li><a href="kuznezov.php">об учителе</a></li> <li><a href="foto_sp.php">фотогалерея</a></li> <li><a href="sp_2005.php">достижения</a></li> </ul> </li> <li style="margin-left:15px;"><a href="">» Народный умелец</a> <ul> <li><a href="trud_vr.php">время проведения</a></li> <li><a href="babinin.php">об учителе</a></li> <li><a href="">фотогалерея</a></li> </ul> </li> <li><a href="foto.php" >» ФОТОГАЛЕРЕЯ</a></li> <li><a href="go.php" >» ГОСТЕВАЯ КНИГА</a></li>

57 Файл head.php <link rel="stylesheet" type="text/css" href="../style.css"> <script type="text/javascript" src="http://s206.ucoz.net/src/jquery-1.7.2.js"></script> <div id="infobardm">Размер шрифта: <a onclick="dmfunctsizeone();" class="dmchangea1">A</a> <a onclick="dmfunctsizetwo();" class="dmchangea2">A</a><a onclick="dmfunctsizethree();" class="dmchangea3">A</a> Изображения <a onclick="dmdisableimage();" class="dmdisableimage">Выключить</a> <a onclick="dmenableimage();" class="dmenableimage">Включить</a> Цвет сайта <a onclick="dmcolor1();" class="dmcolor1">Ц</a> <a onclick="dmcolor2();" class="dmcolor2">Ц</a> <a onclick="dmcolor3();" class="dmcolor3">Ц</a> <a onclick="dmreset();" class="dmcolor4">Х</a> </div> <script type="text/javascript" src="../script/jquery.js"></script> <script type="text/javascript" src="../script/jquery.cookie.js"></script> <link href="../style/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css"> <link rel="icon" href="../img/zvon.ico" type="image/x-icon"> <script type="text/javascript" src="../script/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> jQuery(function(){ jQuery("span a").lightBox(); }); </script> <script type="text/javascript"> $(document).ready(function() { $('ul#my-menu ul').each(function(i) { // Check each submenu: if ($.cookie('submenuMark-' + i)) { // If index of submenu is marked in cookies: $(this).show().prev().removeClass('collapsed').addClass('expanded'); // Show it (add apropriate classes) }else { $(this).hide().prev().removeClass('expanded').addClass('collapsed'); // Hide it } $(this).prev().addClass('collapsible').click(function() { // Attach an event listener var this_i = $('ul#my-menu ul').index($(this).next()); // The index of the submenu of the clicked link if ($(this).next().css('display') == 'none') { $(this).next().slideDown(200, function () { // Show submenu: $(this).prev().removeClass('collapsed').addClass('expanded'); cookieSet(this_i); }); }else { $(this).next().slideUp(200, function () { // Hide submenu: $(this).prev().removeClass('expanded').addClass('collapsed'); cookieDel(this_i); $(this).find('ul').each(function() { $(this).hide(0, cookieDel($('ul#my-menu ul').index($(this)))).prev().removeClass('expanded').addClass('collapsed'); });

58 }); } return false; // Prohibit the browser to follow the link address }); }); }); function cookieSet(index) { $.cookie('submenuMark-' + index, 'opened', {expires: null, path: '/'}); // Set mark to cookie (submenu is shown): } function cookieDel(index) { $.cookie('submenuMark-' + index, null, {expires: null, path: '/'}); // Delete mark from cookie (submenu is hidden): } </script>

59 Файл style.php html, body { margin:0;margin-top:3px; background-color:#ffffff; padding: 0px; height: 100%; border: none; } /* База */ .logo { background-color:#999999; } .logo,.line_head { height:20px; padding-left:20px; } .head { height:190px; background-image:url('img/header_fon.jpg'); .head_1 } { height:190px; background-image:url('img/header_fon_1.jpg'); .head_img } { position: absolute; margin-top:0; margin-left: 30%; /* Отступ слева */ margin-right: 30%; /* Отступ слева */ width: 300px; height: 256px; z-index: 3; } .logo,.line_head,.menu_razd,.head,.obv,.kont_sod,.upload ,.head_1,.sbor { border-bottom: 1px solid #cccccc; } .cont { width:20px; border-top: 2px solid #0099ff; } .poisk { width:180px; text-align:right; } .poisk,.cont,.vxod { padding-bottom:3px; vertical-align:bottom; } .vxod p {

60 text-align:right; margin-right:15px; color:#99cc66;size:12px; cursor:hand; } .menu { width:200px; vertical-align:top; border-right: 1px solid #cccccc; padding-left:15px;padding-right:15px; } ul.sample-menu { width:190px; padding:0;margin:5px 5px; } ul.sample-menu li { padding:5px 0;margin:0;list-style:none; border-bottom: 1px solid #cccccc; font-family:arial;font-size:12px;font-weight:bold;color:#666666; } ul.sample-menu li ul { padding:0;margin:0 0 0 20px; } ul.sample-menu li ul li{ padding:3px 0;margin:0; border-bottom: 0; } .podmenu { margin-top:0; padding:0; padding-left: 30px; } #comment label { width:45px; float:left; text-align:left; } a{text-decoration:none;} a:link{color:#666666;} a:visited{color:#666666;} a:hover{color:#0066cc;} a:link.men_doc{color:#0066cc;} a:visited.men_doc{color:#993366;} a:hover.men_doc{text-decoration:underline;color:#0066cc;}

61 a:link.men_gal{color:#666666;} a:visited.men_gal{color:#993366;} a:active.men_gal {color:#ffffff;} a:hover.men_gal{text-decoration:underline;color:#0066cc;} .kont { padding-left:15px;padding-right:15px; } .urd { text-align:center;border-bottom:1px solid #cccccc; } .urd img { width:110px;height:150px; } .urd p { font-family:arial;font-size:12px;color:#0066cc;font-weight:bold; } .g_line p { margin-top:10px; font-family:arial;font-size:12px;color:#666666; } .obv { height:25px; font-family:arial;font-size:12px;color:#666666;font-weight:bold;text-align:left;vertical- align:bottom; padding-bottom:3px; } .sbor { height:50px; font-family:arial;font-size:12px;color:#cc0000;text-align:center;vertical-align:center; padding-bottom:3px; } .kont_uch .kont_sod,.pod,.kont,.kontact,.k_text,.k_priz,.pod_xr { vertical-align:top; } .upload { text-align:center; font-family:arial;font-size:12px;color:#666666; } .kont_uch p { margin-top:0;margin-bottom:5px; font-family:arial;font-size:12px;color:#666666; } .kont_uch h4{ margin-top:10px;margin-bottom:10px; font-size:14px;color:#0066cc;font-weight:bold; } .kont_uch .kont_sod,.kontact { height:25px;

62 padding-bottom:10px; } .uch_zag .uch_op { margin-top:10px;margin-bottom:10px; font-family:arial;font-size:12px;color:#0066cc;font-weight:bold; } { margin-top:0;margin-bottom:5px; font-family:arial;font-size:12px;color:#666666;font-weight:normal; } .kont_sod h4{ margin-top:10px;margin-bottom:5px; font-family:arial;font-size:12px;color:#0066cc;text-align:center; } .kont_sod p font { margin-top:0;margin-bottom:5px; font-family:arial;font-size:12px;color:#666666;font-weight:normal; } .kont_sod p { margin-top:0;margin-bottom:5px; font-family:arial;font-size:12px;color:#666666;font-weight:normal;text-align:justify; } .kont_sod h4 { margin-top:10px;margin-bottom:5px; font-family:arial;font-size:12px;color:#0066cc;font-weight:bold;text-align:left; } .kont_sod img,.k_text img,.k_text span img,.k_priz img{ width:130px;height:100px; float:left; border:2px solid #cccccc; margin-right:15px;margin-top:10px; } .k_text span b img { width:190px;height:153px; } .k_priz span img { height:140px; width:100px; } .kont_uch img{ width:135px;height:203px; float:left; border:2px solid #cccccc; margin-right:15px;margin-top:10px; } .kont_uch p img{ width:31px;height:30px; border:0; } .foto_admin img{ border:2px solid #cccccc; margin-top:20px; } .kontact img {

63 width:130px;height:100px; float:left; border:2px solid #cccccc; margin-right:15px;margin-top:10px; } .kontact p { margin-top:10px;margin-bottom:15px; font-family:arial;font-size:12px;color:#0066cc;font-weight:bold; } .kontact p span { margin-top:0; font-family:arial;font-size:12px;color:#666666;font-weight:normal;text-align:justify; } .foto img { width:130px;height:100px; float:left; border:2px solid #cccccc; margin-right:18px;margin-top:20px; } .fotos img { border:2px solid #cccccc; } .pod { background-color:#339900; } .pod_xr { background-color:#3366cc; } .pod p,.pod_xr p { margin-bottom:0;margin-top:20px;margin-left:20px; font-family:arial;font-size:12px;color:#ffffff; } .pod_logo { height:50px; background-color:#cccccc; } .pod_logo img { margin-left:40px; } .rightcol { position: absolute; margin-top:0; width: 190px; height: 150px; background-color:#ffffff; border:1px solid #cccccc; z-index: 2; right:15px; } .login { margin-top: 15px;margin-bottom:15px; } .login span { padding-right:10px;padding-left:5px;

64 font-family:arial;font-size:12px;color:#666666; } .k_priz { border-bottom:1px solid #cccccc;padding-bottom:10px } .k_text,.k_priz { padding-top:10px; font-family:arial;font-size:13px;color:#666666; text-align:justify; } .k_text p,.k_priz p { margin-top:7px; margin-bottom:7px; text-indent: 0; } .k_text h3,.k_priz h3 { margin-top:10px;margin-bottom:10px; font-size:12px;color:#0066cc; } .k_text h4,.k_priz h4 { text-align:center; font-size:13px; } li { margin-left:40px; } .fz { padding-top:3px;padding-bottom:3px; border-left:1px solid #ccc;border-top:1px solid#ccc; text-align:center; } .fz_1 { height:25px; border-left:1px solid #ccc;border-top:1px solid#ccc; text-align:left;padding-left:5px;paddingtop:3px;padding-bottom:3px; }

65 Файл Style.css div#fancy_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #666; display: none; z-index: 30; } * html div#fancy_overlay { position: absolute; height: expression(document.body.scrollHeight > document.body.scrollHeight : document.body.offsetHeight + 'px'); } document.body.offsetHeight div#fancy_wrap { text-align: left; } div#fancy_loading { position: absolute; height: 40px; width: 40px; cursor: pointer; display: none; overflow: hidden; background: transparent; z-index: 100; } div#fancy_loading div { position: absolute; top: 0; left: 0; width: 40px; height: 480px; background: transparent url('../img/fancy_progress.png') no-repeat; } div#fancy_loading_overlay { position: absolute; background-color: #FFF; z-index: 30; } div#fancy_loading_icon { position: absolute; background: url('../img/fancy_loading.gif') no-repeat; z-index: 35; width: 16px; height: 16px; } div#fancy_outer { ?

66 position: absolute; top: 0; left: 0; z-index: 90; padding: 18px 18px 33px 18px; margin: 0; overflow: hidden; background: transparent; display: none; } div#fancy_inner { position: relative; width:100%; height:100%; border: 1px solid #BBB; background: #FFF; } div#fancy_content { margin: 0; z-index: 100; position: absolute; } div#fancy_div { background: #000; color: #FFF; height: 100%; width: 100%; z-index: 100; } img#fancy_img { position: absolute; top: 0; left: 0; border:0; padding: 0; margin: 0; z-index: 100; width: 100%; height: 100%; } div#fancy_close { position: absolute; top: -12px; right: -15px; height: 30px; width: 30px; background: url('../img/fancy_closebox.png') top left no-repeat; cursor: pointer; z-index: 181; display: none; } #fancy_frame { position: relative; width: 100%;

67 height: 100%; display: none; } #fancy_ajax { width: 100%; height: 100%; overflow: auto; } a#fancy_left, a#fancy_right { position: absolute; bottom: 0px; height: 100%; width: 35%; cursor: pointer; z-index: 111; display: none; background-image: url(data:image/gif;base64,AAAA); outline: none; } a#fancy_left { left: 0px; } a#fancy_right { right: 0px; } span.fancy_ico { position: absolute; top: 50%; margin-top: -15px; width: 30px; height: 30px; z-index: 112; cursor: pointer; display: block; } span#fancy_left_ico { left: -9999px; background: transparent url('../img/fancy_left.png') no-repeat; } span#fancy_right_ico { right: -9999px; background: transparent url('../img/fancy_right.png') no-repeat; } a#fancy_left:hover { visibility: visible; } a#fancy_right:hover { visibility: visible; } a#fancy_left:hover span { left: 20px; } a#fancy_right:hover span {

68 right: 20px; } .fancy_bigIframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; } div#fancy_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 70; border: 0; padding: 0; margin: 0; } div.fancy_bg { position: absolute; display: block; z-index: 70; border: 0; padding: 0; margin: 0; } div.fancy_bg_n { top: -18px; width: 100%; height: 18px; background: transparent url('../img/fancy_shadow_n.png') repeat-x; } div.fancy_bg_ne { top: -18px; right: -13px; width: 13px; height: 18px; background: transparent url('../img/fancy_shadow_ne.png') no-repeat; } div.fancy_bg_e { right: -13px; height: 100%; width: 13px; background: transparent url('../img/fancy_shadow_e.png') repeat-y; } div.fancy_bg_se { bottom: -18px; right: -13px; width: 13px; height: 18px; background: transparent url('../img/fancy_shadow_se.png') no-repeat; }

69 div.fancy_bg_s { bottom: -18px; width: 100%; height: 18px; background: transparent url('../img/fancy_shadow_s.png') repeat-x; } div.fancy_bg_sw { bottom: -18px; left: -13px; width: 13px; height: 18px; background: transparent url('../img/fancy_shadow_sw.png') no-repeat; } div.fancy_bg_w { left: -13px; height: 100%; width: 13px; background: transparent url('../img/fancy_shadow_w.png') repeat-y; } div.fancy_bg_nw { top: -18px; left: -13px; width: 13px; height: 18px; background: transparent url('../img/fancy_shadow_nw.png') no-repeat; } div#fancy_title { position: absolute; bottom: -33px; left: 0; width: 100%; z-index: 100; display: none; } div#fancy_title div { color: #FFF; font: bold 12px Arial; padding-bottom: 3px; } div#fancy_title table { margin: 0 auto; } div#fancy_title table td { padding: 0; vertical-align: middle; } td#fancy_title_left { height: 32px; width: 15px; background: transparent url(../img/fancy_title_left.png) repeat-x; } td#fancy_title_main { height: 32px; background: transparent url(../img/fancy_title_main.png) repeat-x;

70 } td#fancy_title_right { height: 32px; width: 15px; background: transparent url(../img/fancy_title_right.png) repeat-x; } a.gallery img, a.gallery2 img {border: 1px solid #CCC;padding: 2px;margin: 10px 5px 10px 0;}

Рецензии:

Авторизуйтесь, чтобы добавить рецензию

- у работы пока нет рецензий -

Отзывы:

Авторизуйтесь, чтобы оставить отзыв