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

1. Teachmedia.ruСоздаём сайт в дошкольном образовательном учрежденииРуководство к действию, когда надеяться не на кого

2. Это не учебное пособие по созданию сайтов. Просто я хотел показать общее направление работы над сайтом для неподготовленной аудитории, дать представление о характере работы, убедить, что «не боги горшки обжигают!». Но минимальные требования для начала работы есть:желание научиться и сделать

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

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

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

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

7. Умение найти в интернете необходимую информацию План работы над сайтом. Подготовительный этап.

8. План состоит из разделов , категорий и страниц, которые и составляют основу сайта. Сформулируйте для себя, что Вы хотите показать и рассказать на сайте разным категориям посетителей , продумайте, как сайт может облегчить вашу повседневную работу. Ниже приводится только один из возможных вариантов для наглядной демонстрации работы над сайтом. План сайта«Детский садик №118»

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

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

11. Группы

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

13. Наша жизнь

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

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

16. Контакты

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

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

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

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

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

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

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

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

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

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

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

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

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

32. Проверяем работоспособность сервераНажимаем

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

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

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

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

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

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

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

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

41. Проверяем работоспособность сервераПроверка хоста с другим IP-адресом и портом.

42. Проверяем работоспособность сервераТестируем почту

43. Проверяем работоспособность сервераТестируем почту

44. Проверяем работоспособность сервераТестируем почту

45. УтилитыМожем проверить работу утилит

46. УтилитыПоиск файлов

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

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

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

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

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

53. Макет страницышапкаЛевый блокПравый блоктекст

54. Макет страницытекстНижний блок

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

81. Для входа в панель администратора введите имя пользователя: admin, пароль – ваш пароль администратора.Адрес админцентра: http://dou118/administrator

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

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

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

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

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

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

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

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

90. Модули

91. Плагины

92. Шаблоны

93. Шаблоны

94. Шаблоны

95. Шаблоны

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

97. Инструменты

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

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

100. Рейтинг

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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