Create a site in a preschool educational

transcript

Создаём сайт в дошкольном образовательном учреждении

Руководство к действию, когда надеяться не на кого

Teachmedia.ru

Это не учебное пособие по созданию сайтов. Просто я хотел показать общее

направление работы над сайтом для неподготовленной аудитории, дать

представление о характере работы, убедить, что «не боги горшки обжигают!».

Но минимальные требования для начала работы есть:

желание научиться и сделать

Умение работать на компьютере

Умение работать с текстовыми и хотя-бы простыми графическими

редакторами

Иметь общее представление об HTML и CSS

Для создания статических сайтов обязательно умение пользоваться HTML-

редакторами

Умение найти в интернете необходимую информацию

План работы над сайтом. Подготовительный этап.

Составляем план сайта

Готовим материал.

Каждый пункт плана

наполняем содержанием.

Устанавливаем на локальный

компьютер сервер.

Выбираем и устанавливаем на локальный

компьютер CMS.

Выбираем и заказываем

хостинг-провайдера.

Создаём сайт

ПЛАН САЙТА«ДЕТСКИЙ САДИК №118»

План состоит из разделов , категорий и страниц, которые и составляют

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

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

сайт может облегчить вашу повседневную работу.

Ниже приводится только один из возможных вариантов для наглядной

демонстрации работы над сайтом.

1.Главный раздел2.Группы садика

3.Родительская страничка

4.Наша жизнь 5.Школа для родителей

6.Консультативный пункт

7.Контакты

Разделы сайта

Категории и страницыГлавный раздел

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

2.Наш садик

3.Сотрудники

4.Устав

5.История

Группы

6.Группа №1 "Колобок"

7.Группа №2 "Солнышко"

8.Группа №3 "Пчёлка"

9.Группа №4 "Вишенка"

10.Группа №5 "Клубничка"

11.Группа №6 "Теремок"

Родительский раздел

12.Общие вопросы

13.Памятка для родителей

14.Вопросы адаптации

15.Вопросы питания

16.Права детей

17.Дополнительное образование

18.Семинары для родителей

Наша жизнь

19.Тематический план занятий

20.Спорт

21.Детское творчество

22.Детские праздники

23.События

24.Фотогалерея

Школа для родителей

25.Советы психолога

26.Советы логопеда

27.Советы педиатра

28.Советы ЛОРа

29.Советы ортопеда

30.Советы окулиста

Консультативный пункт

31.О пункте

32.Материалы пункта

33.Личный кабинет для родителей

34.Воспитатель рекомендует

Контакты

35.Адрес и телефоны

36.Вопросы и консультации

Подготавливаем материал для страниц сайтаСт

рани

цы с

айта • Печатаем

текст каждой страницы в любом текстовом редакторе Ка

ртин

ки • логотип• рисунки для

оформления страниц

Фот

огра

фии • фотографии

персонала, детей, праздников и т.п. на страницы сайта

• фотографии для фотогалереи

Папка с рабочими материалами

Страницы сайта

Картинки на страницы

Определяемся, какой будет сайт

Статический сайт

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

Динамический сайт• Каждая отображаемая страница

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

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

Выбираем динамический!

Для создания динамического сайта необходимы:

Сервер• Самый популярный сервер – Апаче. Он установлен на

большинстве хостинг-площадок.• Для установки сервера на локальный компьютер

воспользуемся Денвером.

CMS – система управления содержимым сайта

Хостинг

Серв

ер А

паче Apache предоставляет богатые

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

База

дан

ных

Для хранения и вывода содержимого страниц сайта необходима база данных и система управления этой базой (СУБД).СУБД MySQL — отличный выбор для создания такой базы данных вследствие простоты в использовании и администрировании, свободной распространяемости для разных платформ, включая Linux и Windows, и быстро растущей популярности.Используются также БД PostgreSQL, БД Firebird.

Ден

вер

Для установки сервера на локальный компьютер и его конфигурирования удобно использовать джентельменский набор вебмастера Денвер - проект Дмитрия Котерова, который заслуженно пользуется большой популярностью.Сам дистрибутив, его описание и инструкцию по установке и использованию можно найти по адресу: http://www.denwer.ru/

Базовый (основной) пакет Денвера включает в себя:

• Инсталлятор (поддерживается также инсталляция на flash-накопитель).

• Apache, SSL, SSI, mod_rewrite, mod_php.

• PHP5 с поддержкой GD, MySQL, sqLite.• MySQL5 с поддержкой транзакций.• Система управления виртуальными

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

• Система управления запуском и завершением всех компонентов Денвера.

• phpMyAdmin — система управления MySQL через Web-интерфейс.

• Эмулятор sendmail и SMTP-сервера (отладочная «заглушка» на localhost:25, складывающая приходящие письма в /tmp в формате .eml); поддерживается работа совместно с PHP, Perl, Parser и т.д.

• При необходимости можно легко устанавливать дополнительные пакеты.

Установка Денвера

• Для установки необходимо перейти на сайт разработчика http://www.denwer.ru

• Скачать дистрибутив Денвера (бесплатно)

• Ссылка на скачивание отправляется на электронную почту после бесплатной регистрации

• Запустить инсталятор• Процесс установки подробно описан

на сайте разработчика• После установки на рабочем столе

будут созданы ярлыки запуска, остановки и перезапуска сервера

Тестирование

• После установки Денвера запустить его можно, набрав в адресной строке браузера адрес: http://localhost/denwer .

• откроется тестовая страница.• Для быстрого запуска Денвера

создадим на рабочем столе ярлык.

Устанавливаем на локальный компьютер сервер

Создана вырезка экрана: 17.01.2010 19:35

Ярлыки ДенвераПосле установки Денвера на рабочем столе создаются ярлыки для запуска, остановки и перезапуска сервера

Запуск сервераСервер запускается после нажатия на кнопку «Старт». При этом в трее создаются значки Денвера и Апаче.

Настройка ДенвераПосле запуска сервера в браузере набираем http://localhost/denwer Открывается рабочее окно Денвера

Проверяем работоспособность сервераНажимаем последовательно на ссылки тестовой страницы.При этом будут открываться соответствующие страницы.

Проверяем работоспособность сервера

Нажимаем

Проверяем работоспособность сервераДолжно быть так

Должно быть так

Убеждаемся, что установлена нужная нам версия языка программирования

Панель php My Admin

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

Проверка хоста с другим IP-адресом и портом.

Тестируем почту

Утилиты

Можем проверить работу утилит

Утилиты

Поиск файлов

Утилиты

Список зарегистрированных сайтов на сервере

Утилиты

Заведение новых баз данных и пользователей MySQL

Создаём ярлык Денвера

Для быстрого доступа создаём на рабочем столе ярлык Денвера

большинстве хостинг-площадок.• На локальный компьютер мы его тоже установили.

CMS – система управления содержимым сайта• Выберем и установим CMS на локальный компьютер

Хостинг

CMS – система управления содержимым сайта

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

публикации информации.

Система управления — программа, предоставляющая инструменты для

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

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

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

всей программы, но достаточна для управления им.

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

Большая часть современных систем управления содержимым реализуется в виде визуального (WYSIWYG) редактора — программы, которая создаёт HTML-

код из специальной упрощённой разметки, позволяющей пользователю

проще форматировать текст.

Можно ознакомиться с особенностями и рейтингом CMS в Рунете на сайте по

адресу: http://www.cmsmagazine.ru/catalogue/

Среди бесплатных CMS явно лидирует Joomla!, по функциональности и универсальности не уступающая

платным аналогам.

На наиболее популярных хостинг-площадках по желанию заказчика

Joomla! устанавливается автоматически.

Joomla! одна из наиболее мощных Систем Управления Содержимым с

Открытым Кодом (Open Source CMS) на планете. Она используется по всему

миру для всего, от простых сайтов до комплексных корпоративных приложений. Joomla! лёгко

устанавливается, проста в управлении, надёжна.

Макет страницы

шапка

Левый блок

Правый блоктекст

Макет страницы

Нижний блок

текст

На этом сайте можно не только узнать рейтинг CMS, но и познакомится с кратким описанием каждой.

Первая страница рейтинга CMSСреди бесплатных CMS явно

лидирует Joomla!, по функциональности и универсальности не

уступающая платным аналогам.

Выбираем Joomla! Специально для поддержки русскоязычных пользователей открыт ресурс - Joom.ru - Русский Дом Joomla! и форум по Joomla!, где можно найти для себя

полезную информацию и помощь на русском языке.

Скачать

При установке сервера на диске были созданы паки, как показано ниже.Нас интересует папка home. Откроем её.

Внутри папки home создаются домены. Создадим здесь папку с нашим сайтом – «dou118».

Папка создана

Внутри папки dou118 создадим директорию www, чтобы сервер распознал новый домен.

Запустим сервер

Пользуясь ярлыком Денвера открываем тестовую страницу.

Нажимаем на ссылку «Заведение новых БД и пользователей MySQL»

Открывается страница с формой создания новой базы данных (в базе хранятся все текстовые данные сайта и настройки).

Пароль администратора не заполняем. Во все остальные поля пишем dou118, чтобы не путаться. Нажимаем «Создать…». Новая база данных заведена.

Распаковываем архив Joomla 1.5.15 в директорию home/dou118/www

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

установке.

Набираем в адресной строке браузера адрес нашего сайта: http://dou118 .Открывается первая страница установки. Выбираем язык и жмём «Далее».

Жмём «Далее».

Соглашаемся с лицензией и жмём «Далее».

Конфигурируем базы данных, как рекомендовано справа.

При заполнении этой страницы для другого сайта меняются только имя базы данных и пароль доступа к БД. Всё остальное должно быть как здесь.

На этой странице ничего не меняем, жмём «Далее».

В основных настройках указываем название сайта «Детский садик 118», адрес электронной почты и пароль администратора (придумываете любой).

Ниже на этой странице предлагается установить демонстрационные данные.Советую с этим согласиться и нажать кнопку «Установить».

Завершение установки. Необходимо удалить папку «installation» из директории home/dou118/www

Удаляем папку «installation»

Соглашаемся.

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

Для входа в панель администратора введите имя пользователя: admin, пароль – ваш пароль администратора.

Адрес админцентра: http://dou118/administrator

Панель админцентра. Удобная, интуитивно понятная. Если нажать «Предпросмотр» – откроется сайт.

Главная страница нашего сайта. В демонстрационные данные, которые мы согласились установить, входят несколько шаблонов сайта и описание CMS Joomla! Наших материалов ещё нет, и мы видим

демонстрационные. Но можно походить по страницам, потрогать кнопочки.Адрес главной страницы: http://dou118

Рассмотрим подробнее панель управления.

Выпадающее меню кнопки сайт

Меню разделов

Выпадающее меню кнопки статьи.

Основные компоненты сайта

Установка и удаление расширений сайта

Модули

Плагины

Шаблоны

Установка и удаление расширений

Инструменты

большинстве хостинг-площадок.• На локальный компьютер мы его тоже установили.

CMS – система управления содержимым сайта• Мы выбрали и установили CMS на локальный компьютер

Хостинг• хостинг сайтов - это ряд услуг по предоставлению клиенту

дискового пространства для размещения на сервере его информации.

Хороший сайт, предоставляющий рейтинг хостинга

Рейтинг

Выбор хостинга. Отбор среди виртуальных хостингов.

Выбор хостинга. Отбор среди хостингов PHP.

Авторский обзор конкретного хостинга.

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

на хостинг-площадке провайдера.

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

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

несколько шагов.

Создать разделы сайта в менеджере разделов панели управления сайтом. Даём название разделам в соответствии с нашим планом сайта.

Создать категории разделов. Воспользуемся менеджером категорий в панели управления сайтом.

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

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

Для создания разделов сайта необходимо в панели управления сайта выделить «Статьи» и нажать «Разделы». Нажать

Менеджер разделов. Пока здесь три раздела, созданные в демонстрационном сайте. Создадим наши разделы согласно плана сайта. Для этого нажмем

Открывается редактор раздела. Заполняем пункты.

Новый раздел создан. Сохраняем его.

Подобным образом создаем все наши разделы. Деморазделы можно отключить.

Аналогично создаем категории. В качестве категорий указываем названия пунктов плана.

Переходим к созданию статей. В менеджере материалов на странице статей нажимаем «Добавить»

Открывается редактор статьи

Выбираем статью из заготовленного материала

Открываем файл со статьёй

Выделяем текст и копируем в буфер обмена

Вставляем в поле редактора скопированный текст. Заполняем поля и нажимаем «Сохранить»

Открывается страница статей. Статья сохранена и отражается в общем списке

Открываем страницу с пунктами меню. Нажимаем «Создать».

Открывается следующая страница.

Выделяем пункт меню «Статьи».

В выпадающем списке выбираем «Стандартная страница».

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

В открывшемся окне отмечаем нашу новую статью

Сохраняем изменения.

В списке пунктов меню новый пункт будет последним. Для перемещения воспользуемся средством сортировки по номеру.

Окончательное положение в новом меню.

Новый пункт меню на главной странице. Нажимаем на него.

Открывается созданная страница.

Аналогично можно создать пункты меню со ссылками на все страницы с материалами.Сравните два варианта

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

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

Так уже лучше. Здесь созданы модули меню разделов. Ориентироваться легко.

Зайдём в менеджер меню. Здесь отражены имеющиеся модули меню.Создадим новый модуль меню. Для этого нажмем «Создать».

Откроется окно параметров нового модуля. Зададим тип меню, например, «othemenu2». В качестве заголовка укажем название раздела. В описании дадим краткое содержание меню.

Создадим заголовок модуля. Новый модуль меню создан. Сохраним его.

Новый модуль меню пока не имеет пунктов. Создадим их по аналогии с тем, как создавали разделы и категории. Нажмем «Создать».

Открывается уже знакомое нам окно. Нажимаем «Статьи».

Выбираем стандартную страницу статьи

Выбираем статью, на которую будет ссылка в этом пункте меню

Заполняем подробности пункта меню и сохраняем

Таким образом создаём все пункты вновь созданного нового модуля меню. Аналогично создаём другие модули меню.

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

Устанавливаем очередность расположения модулей левого блока

Меню на главной странице будет выглядеть так.

В папке сайта «stories» создадим папки с фотографиями и картинками.

Для вставки изображения в редакторе имеется кнопка

При нажатии на кнопку «изображение» откроется окно .

Откроем паку «Фото» и выберем изображение

В редакторе на странице статьи появилось изображение.

Сохраняем изменения.

Чтобы увидеть изменения на сайте обновим страницу.

Окончательный вид страницы.

Другой шаблон сайта

Ещё один шаблон

До встречи!

Teachmedia.ru

Create a site in a preschool educational

Education