Материал: Разработка сайта-визитки

-        Нет возможности сделать backup сайта (резервную копию)

-        Присутствие рекламного баннера в бесплатной версии

-        Невозможность привязать собственный домен второго уровня

Вывод

В целом, конструктора Wix - полностью отвечает всем требованиям для создания сайта и вполне подойдет для реализации сайта-визитки.

2.3 Разработка сайта

Регистрация на сайте редактора Wix

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

Рисунок 2.1 - официальная страница сайта Wix

Далее требуется пройти процесс регистрации на сайте CMSWix, выбрать доменное имя для будущего сайта. (Рисунок 2.2)

Рисунок 2.2 - окно регистрации

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

В качестве альтернативы можно использовать возможность войти при помощи учетной записи на одном из социальных сервисов Facebook или Google+. В этом случае просто нужно будет подтвердить разрешение на подключение к аккаунту.

После регистрации нас перенаправит на следующую страницу (Рисунок 2.3)

Рисунок 2.3 - выбор тематики будущего сайта, для фильтрации подходящих шаблонов

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

Редактор сайта

После выбора шаблона, нажатием кнопки редактор, мы непосредственно переходим к редактированию шаблона выбранной тематики. (Рисунок 2.4)

Рисунок 2.4 - Главная страница редактора

При открытии шаблона, появляется окно с видео, которое кратко рассказывает и показывает возможности редактора.

(Видео - #"869367.files/image005.jpg">

Рисунок 2.5 - боковая панель

и на верхней (Рисунок 2.6) панели инструментов.

Рисунок 2.6 - верхняя панель

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

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

-        выбрать страницу сайта, которую необходимо редактировать;

-        отменить / повторить последнее действие;

-        скопировать / вставить выделенное в/из буфера обмена;

-        активировать сетку направляющих, выравнивание элементов по сетке, а также линейки;

-        включить предпросмотр сайта;

-        сохранить сайт в черновиках или опубликовать его в Интернете;

-        оплатить профессиональный аккаунт;

-        вызвать справку.

Настройка сайта

В разделе настроек (нижняя кнопка в левом меню) у нас есть несколько полезных подразделов. И первый из них - «Адрес сайта» (Рисунок 2.7)

Рисунок 2.7 - Название и адрес сайта

Здесь я уточняю адрес своего нового сайта. Теперь он имеет вид «wezo380.wix.com/family». Рисунок 2.8

Рисунок 2.8 - готовый адрес сайта

Это пожалуй, один из самых досадных моментов бесплатного использования WIX. Добавить реальный адрес нельзя.

Настройка дизайна

За общие параметры визуального отображения странички отвечает вкладка «Дизайн». Рисунок 2.9

Рисунок 2.9 - вкладка дизайн

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

Для редактирования фона нашего сайта, заходим во вкладку Фон, после чего выбираем необходимый нам фон. Рисунок 2.10

Рисунок 2.10 - Выбор фона страницы

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

Рисунок 2.11 - контекстное меню настройки бокса

После открытия контекстного меню, нажимаем на кнопку, Изменить стиль.

На рисунке 2.12 и 2.13 представлены 2 окна Изменение стиля и Настройка стиля.

Рисунок 2.12, 2.13- изменение стилей и настройка стиля

После изменения стиля, переходим к редактированию текстовой информации.

Для этого, делаем двойной клик мышкой по необходимому для редактирования тексту после чего появляется меню редактирования (Рисунок 2.14), либо переходим во вкладкуДобавить, после чего выбираем Текст и способ его размещения Заголовок или Абзац. Рисунки 2.15, 2.16

Рисунок 2.14 - редактирование с помощью двойного клика мышью

Рисунок 2.15, 2.16 - Добавление текста и выбор текста

Далее появляется необходимость заменить изображение внутри бокса, на более подходящею нам тематику.

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

Рисунок 2.17 - Замена изображения

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

Загрузить изображение с компьютера мы можем двумя способами:

.        Перетащить нужное нам изображение с рабочего стола

.        Нажать на кнопкуЗагрузить изображение. Рисунок 2.18

Рисунок 2.18 - Загрузка изображения

Загружаем необходимые нам изображения, после процесса загрузки они отображаются во вкладкеВсе медиа, выбираем нужное нам и нажимаем кнопку Выбрать изображение. Рисунок 2.19

Рисунок 2.19 - Замена исходного изображения на загруженное

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

На основе этого примера, была проведена работа по редактированию всего исходного материала шаблона.

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

Кликнув мышью по названию раздела или названию блюда, в открывшимся окне Меню ресторана, выбираем пунктРедактировать меню. Рисунок 2.21

Рисунок 2.21 - Меню ресторана

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

Пример работы с редактором меню представлены на рисунках 2.22, 2.23

Рисунок 2.22 - Меню супов

Рисунок 2.23 - Редактор блюда

Так же на главной странице сайта присутствует галерея слайд-шоу, способ её добавления и настройки изображены на рисунках 2.24, 2.25

Рисунки 2.24, 2.25 - Добавление элемента слайд-шоу

Настройка и изменение изображений слайд шоу, производится с помощью клика левой кнопкой мыши посозданной галереи слайд-шоу. Рисунок 2.26

Рисунок 2.26 - Настройка галереи слайд-шоу

Например, если нам нужно добавить изображение в наше слайд-шоу, в открывшимся меню выбираемОрганизовать фото и добавляем нужные нам изображения. Рисунок 2.27

Рисунок 2.27 - Организация галереи изображений

2.4 Работа сайта

Главная страница - на этой странице находится основная информация для клиентов кафе Family.

Рисунок 2.28 - Главная страница

О Нас - на данной странице исполнено описание кафе Family

Рисунок 2.29- О Нас

Контакты- в этом разделе указаны все контактные данные и место положения кафе на карте.

Рисунок 2.30 - Контакты

Основное меню - здесь представлено основное меню кафе Family с ценой, весом и составом каждого блюда.

Рисунок 2.31 - Основное меню

Меню выпечки - румяный раздел представленного ассортимента выпечки и напитков кафе Family.

Рисунок 2.32 - Выпечка и напитки

Заключение

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

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

В качестве среды разработки был выбран конструктор сайтов CMSWix.

Обширные возможности редактирования стиля, текста и медиа файлов, в сочетании с простотой и комфортабельностью использования, с учетом всех критериев, способствовали созданию сайта-визитки кафе «Family»

Список используемых источников

1. Хананеин Д.М. «Информационно - коммуникационные технологии», 2010 г.

. Панфилов К.М. «По ту сторону Web-страницы», 2008 г.

. Печников В.Н. «Создание web-страниц и web-сайтов. Самоучитель», 2008 г.

. Печников В.Н. «Создание web-сайтов без посторонней помощи», 2009 г.

. Рязанов В.И. «Создание сайта в 5 этапов», 2009 г.

. Гладкий А.В «Веб - Самоделкин. Как самому создать сайт быстро и профессионально», 2012 г.

. Питер Фиелл «Энциклопедия дизайна», 2011 г.

. F.A.Q официально сайта Wix [Электронный ресурс] - URL: https://ru.wix.com/support/html5 (дата обращения 01.06.2015).

. Свободная энциклопедия Википедия [Электронный ресурс] - URL: https://ru.wikipedia.org (дата обращения: 01.06.2015).