2.3.4 Настройка дизайна
За общие параметры визуального отображения странички отвечает вкладка «Дизайн». Рисунок 2.3.4
Рисунок 2.3.4- вкладка дизайн
Здесь есть три инструмента, которые позволяют изменить фон сайта, цветовую схему и набор используемых шрифтов.
Для редактирование фона нашего сайта, заходим во вкладку Фон, после чего выбираем необходимый нам фон. Рисунок 2.3.5
Рисунок 2.3.5- выбор фона страницы
Настроив общую цветовую и стилевую палитру, далее я перехожу непосредственно к правке стандартных элементов страницы и добавлению собственных блоков. Кликнув на нужном фрагменте, появляется контекстное меню, из которого идет управление нужными параметрами. Рисунок 2.3.6
Рисунок 2.3.6- контекстное меню настройки бокса
После открытия контекстного меню, нажимаем на кнопку, Изменить стиль.
На рисунке 2.3.7 и 2.3.8 представлены 2 окна Изменение стиля и Настройка стиля.
Рисунок 2.3.7- изменение стилей Рисунок 2.3.8 Настройка стиля
После изменения стиля, переходим к редактированию текстовой информации.
Для этого, делаем двойной клик мышкой по необходимому для редактирования тексту после чего появляется меню редактирования (Рисунок 2.3.9), либо переходим во вкладку Добавить, после чего выбираем Текст и способ его размещения Заголовок или Абзац. Рисунки 2.3.10, 2.3.11
Рисунок 2.3.9- редактирование с помощью двойного клика мышью.
Рисунок 2.3.10- Добавление текста Рисунок 2.3.11- выбор текста
Далее появляется необходимость заменить изображение внутри бокса, на более подходящею нам тематику.
Для решения данной задачи, наводим курсор мыши на заменяемую картинку, щелкаем левой кнопкой мыши и в появившимся меню, нажимаем Заменить фото. Рисунок 2.3.12
Рисунок 2.3.12- Замена изображения.
В открывшимся окне, мы можем добавить, редактировать, фильтровать нашу галерею картинок и плюс ко всему, использовать уже готовы решения от Wix.
Загрузить изображение с компьютера мы можем двумя способами:
Перетащить нужное нам изображение с рабочего стола
Нажать на кнопку Загрузить изображение. Рисунок 2.3.13
Рисунок 2.3.13- Загрузка изображения
Загружаем необходимые нам изображения, после процесса загрузки они отображаются во вкладке Все медиа, выбираем нужное нам и нажимаем кнопку Выбрать изображение. Рисунок 2.3.14
Рисунок 2.3.14- Замена исходного изображения на загруженное .
В итоге, после порядочного выполнения выше представленных действий, из исходного бокса (Рисунок 2.3.15) мы получили готовый, исполненный по требованию заказчика бокс, с необходимой нам информацией. (Рисунок 2.3.16)
Рисунок 2.3.16- готовая форма рекламы бизнес-ланчей.
На основе этого примера, была проведена работа по редактированию всего исходного материала шаблона.
Так же возможность добавить индивидуальное меню на страницу сайта не осталась незамечена. Переходя на страницу Основное меню и Меню выпечки, можно заметить информацию о каждом блюде, его составе, весе и цене.
Кликнув мышью по названию раздела или названию блюда, в открывшимся окне Меню ресторана, выбираем пункт Редактировать меню. Рисунок 2.3.17
Рисунок 2.3.17- Меню ресторана.
В открывшимся окне Restaurant menu (меню ресторана), мы можем добавить новое блюдо, редактировать старое, удалять, прикреплять фотографии, добавлять описание, тем самым полноценно управлять меню без особых сложностей.
Пример работы с редактором меню представлены на рисунках 2.3.18, 2.3.19,
Рисунок 2.3.18- Меню супов.
Рисунок 2.3.19- Редактор блюда.
Так же на главной странице сайта присутствует галерея слайд-шоу, способ её добавления и настройки изображены на рисунках 2.3.20, 2.3.21
Рисунки 2.3.20, 2.3.21- Добавление элемента слайд-шоу.
Настройка и изменение изображений слайд шоу, производится с помощью клика левой кнопкой мыши по созданной галереи слайд-шоу. Рисунок 2.3.22
Рисунок 2.3.23- Настройка галереи слайд-шоу.
Например если нам нужно добавить изображение в наше слайд-шоу, в открывшимся меню выбираем Организовать фото и добавляем нужные нам изображения. Рисунок 2.3.24
Рисунок 2.3.24- Организация галереи изображений
2.4 Работа сайта
Главная страница - на этой странице находится основная информация для клиентов кафе Family.
Рисунок 2.4.1- Главная страница.
О Нас - на данной странице исполнено описание кафе Family
Рисунок 2.4.2- О Нас
Контакты- в этом разделе указанны все контактные данные и место положения кафе на карте.
Рисунок 2.4.3- Контакты
Основное меню - здесь представлено основное меню кафе Family с ценой, весом и составом каждого блюда.
Рисунок 2.4.4- Основное меню
Меню выпечки- румяный раздел представленного ассортимента выпечки и напитков кафе Family.
Рисунок 2.4.5- Выпечка и напитки
Заключение
В процессе проектирования и реализации дипломного проекта, был собран необходимый материал, изучены все возможности создания веб-сайта, проведен сравнительный анализ бесплатных CMS систем. Материал для заполнения сайта был предоставлен генеральным директором предприятия. Все функции сайта были согласованны с помощью технического задания.
В качестве среды разработки был выбран конструктор сайтов CMS Wix.
Обширные возможности редактирования стиля, текста и медиа файлов, в сочетании с простотой и комфортабельностью использования, с учетом всех критериев, способствовали созданию сайта-визитки кафе “Family”
Сайт выполняет требуемые функции согласно техническому заданию, корректно отображается во всех популярных браузерах и имеет следующую структуру:
- Family (Главная страница);
- Информация о нашем кафе;
- Контакты;
- Наше меню;
- Фото нашего кафе.
Список используемых источников
---
Приложение 1. Инструкцию по сопровождению сайта.
Создание сайта
Для того чтобы начать создавать сайт на Wix, необходимо зайти на сайт http://ru.wix.com/ и пройти регистрацию.
Приложение 1. Рисунок 1- сайт ru.wix.com
Наполнение сайта
Далее вы приступаете к выбору шаблона для своего сайта.
Приложение 1. Рисунок 2- Выбор шаблона