4. РЕШЕНИЕ ЗАДАЧ

4.1. Определение цели сайта

Цель – сделать сайт – электронный учебник, где будут присутствовать обучающие уроки по HTML-редактору Adobe Dreamweaver CС. Была выбрана самая актуальная на данный момент версия программы.

4.2. Решение информационной задачи

Данный сайт будет посвящен урокам по созданию сайта в HTMLредакторе Adobe Dreamweaver CС. Там будет присутствовать пошаговое руководство, содержащее скриншоты программы, на которых выделены основные элементы, с которыми и придется работать.

4.3. Разработка web-интерфейса

4.3.1. Дизайн сайта

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

4.3.2. Требования к оформлению и дизайну сайта

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

24

•Фон - белый, в элементах может использоваться любой из цветов, взятых из логотипа.

4.3.3.Требования к шрифтовому оформлению сайта

•Использование шрифтов «без засечек» (Arial, Calibri, Tahoma, Verdana

и т.д.), шрифты с «засечками» (Georgia, Times New Roman, Trebuchet и

т.д.)

•Размер шрифтов должен обеспечивать удобство восприятия текста (диапазон от 10 до 16 пт.)

4.3.4.Выбор платформы для сайта (CMS)

Ввыводе 3.4. указано, что выбрана CMS система WordPress.

4.3.5.Размещение сайта на хостинге

Для того, чтобы наш сайт работал в интернете, он должен находиться на высокопроизводительном компьютере под управлением серверной операционной системы (например, Microsoft Windows Server 2008 и прочие). Так же этот компьютер должен быть подключен к высокоскоростной сети интернет. Но помимо этого нужно еще много программ установить, настроить, чтобы компьютер стал сервером (хостингом). Далеко не каждый сможет это сделать. Поэтому данный способ не подходит, и воспользуемся уже готовым хостингом в интернете.

Выделим 3 хостинга, рассмотрим их и выберем подходящий под наши

цели:

1. “Timeweb.com”

25

2.“Beget.ru”

3.“www.hostinger.ru”

На удивление этих хостингов оказалось очень много. Были выбраны 2 самых популярных по данным с сайта “hosting101.ru” и 3-ий хостинг, который не сильно популярен. Почти все хостинги ничем не отличаются друг от друга по функционалу. Единственное отличие – это тарифы на услуги хостинга. То есть для того, чтобы зарегистрировать домен, место на сетевом диске и прочие услуги нужно заплатить определенную сумму денег. Тем более за это нужно будет платить ежемесячно. При сравнении 3-х хостингов, больше всего подошел “www.hostinger.ru”, так как там есть бесплатный тариф, который по параметрам подходит для осуществления цели.

Рис. 10. Скриншот сайта “www.hostinger.ru” (Главная страница).

26

Итак, необходимо зарегистрироваться на сайте “www.hostinger.ru” и приобрести бесплатный тариф.

Теперь регистрируем домен “androngt2.esy.es”.

Рис. 11. Скриншот сайта “www.hostinger.ru” (Страница регистрации домена).

Нажимаем “Продолжить”. Домен успешно создан. Теперь переходим к его управлению.

4.3.6. Подключение CMS

В панели администрации имеется пункт – “Импортировать сайт”. Нажимаем, появится страница, куда нужно перенести архив с сайтом. В данном случае это будет CMS система WordPress.

27

Рис. 12. Скриншот сайта “www.hostinger.ru” (Страница – “Импортировать сайт”).

Приступаем к установке CMS системы WordPress. Для начала необходимо скачать архив, в котором содержится вся система WordPress. Заходим на официальный сайт “ru.wordpress.org” и скачиваем архив. После этого необходимо перетащить архив с CMS системой на страницу - “Импортировать сайт”.

Рис. 13. Скриншот сайта “www.hostinger.ru” (страница “Импортировать сайт” - успешно импортированная CMS система WordPress).

28

Таким образом, была скопирована CMS система WordPress на сервер. Чтобы система заработала, нужно перейти на сайт “androngt2.esy.es”. После того, как зашли на сайт, появился интерфейс установки CMS системы WordPress. Далее потребуется ввести информацию о подключении к базе данных MySQL. Для этого необходимо создать базу данных MySQL на хостинге. Переходим в панель управления домена “androngt2.esy.es”, находим пункт “База данных”, нажимаем на “Базы Данных MySQL”. На этой странице заполняем необходимые поля, при этом все данные нужно запомнить, или же записать на листочек, потому что это пригодится для настройки CMS системы WordPress.

Рис. 14. Скриншот сайта “www.hostinger.ru” (страница “Базы Данных MySQL” – Создание базы данных MySQL).

База данных MySQL успешно создана. Теперь вернемся на страницу установки CMS системы WordPress. Вводим в необходимые поля данные базы данных MySQL, которую создали ранее.

29

Рис. 15. Скриншот сайта “androngt2.esy.es” (страница установки CMS системы WordPress – Ввод данных БД MySQL). В целях безопасности, было

закрашено поле с паролем.

Нажимаем кнопку “Отправить”, открывается страница, информирующая о половине пройденной установки. Далее нажимаем кнопку “Запустить установку”. Открылось окно, где нужно ввести название сайта, имя пользователя, пароль и E-mail администратора. Заполняем все поля, и нажимаем кнопку “Установить WordPress”. На этом можно завершить установку CMS системы WordPress. Как видите, это было не так сложно. Можно использовать автоматический установщик CMS системы, но проще настраивать все вручную.

30