nsniagara
580-734-052
mail@niagarastar.ru
г. Москва ул. Большая Новодмитровская д.23 стр.6
7 минут от м.Дмитровская или м. Савеловская

Описание инетерфейса созданного сайта

Руководство по использованию интерфейса:

 

Введение

Интерфейс — это комплекс функций, предназначенный для внесения изменений на сайт и легкого редактирования его страниц без каких либо знаний HTML, наподобие таких офисных программ, как Microsoft Office, OpenOffice, и т.д. В данной статье мы рассмотрим особенности интерфейса от “Ниагара стар”.


Для корректной работы нашего интерфейса вам необходимо использовать следующие браузеры:  Mozilla Firefox, Opera, Google Chrome, Safari

Первые шаги. Начало работы с интерфейсом

Клиентам, заказавшим сайт в  нашей фирме, по окончании работ мы высылаем на электронную почту две ссылки:

1) http://adminns-test.ru/ - ссылка на сам сайт;
2) — ссылка на интерфейс управления сайтом. (рис. 1)

Внешний вид страницы интерфейса «Ниагара стар» (рис. 1)


Чтобы приступить к работе с интерфейсом, открываем в первой вкладке браузера сам сайт, а во второй вкладке - интерфейс. Затем необходимо вернуться на вкладку с сайтом и обновить страницу (клавиша F5), после чего на сайте появиться красная рамка в текстовой области страницы (рис. 2). Теперь вы можете редактировать текстовые области всех страниц вашего сайта. Единожды кликнув левой клавишей мыши внутри красной рамки вы откроете панель управления, которая появится в левом верхнем углу страницы. С её помощью можно вставлять картинки, создавать таблицы, форматировать текст и т.д.

Интерфейс редактирования страницы (Рис. 2)


Рассмотрим каждый элемент интерфейса управления поподробнее:

Элементы интерфейса. Вспомогательная панель-редактор

Сохранить. При нажатии на эту кнопку  происходит сохранение всех внесенных на страницу изменений. Не забывайте про неё, в противном случае вы можете потерять всю отредактированную вами информацию.
Новая страница. Быстрое создание новой страницы сайта.
Редактировать в интерфейсе. Переход на отдельную страницу для редактирования в интерфейсе. 

  

Работа с текстом

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

Работа с таблицами

Показывать невидимые элементы. При нажатии на эту кнопку вы будете видеть границы таблиц, изначально скрытые на странице.
Таблица. При нажатии всплывет окно, где вам предложат задать параметры таблицы (количество столбцов, строк, ширина и высота таблицы, отступы, выравнивание). Для внесения изменений в заданные параметры созданной таблицы, нужно дважды кликнуть по внешней пунктирной рамке, после чего всплывет окно её параметров. 
Свойства ячеек. Здесь вы можете менять свойства выделенных ячеек таблицы (их выравнивание, цвет фона, ширину и высоту, границы). 
Добавить колонку справа. Добавляет колонку справа от текущего местоположения курсора в тексте.
Добавить колонку слева. Добавляет колонку слева от текущего местоположения курсора в тексте.
Добавить строку снизу. Добавляет строку снизу от текущего местоположения курсора в тексте.
Добавить строку сверху. Добавляет строку сверху от текущего местоположения курсора в тексте.
Удалить строку. Удаляет строку, на которой находится курсор.
Удалить столбец. Удаляет столбец, на котором находится курсор.
Объединить ячейки. Объединяет выделенные ячейки в одну.
 Разделить ячейки. Разделяет снова ранее объединенные ячейки.

Форматирование

- выравнивание по левому краю.
- выравнивание по центру.
- выравнивание по правому краю.
- выравнивание по ширине страницы.
- уменьшить отступ.
- увеличить отступ.

Другое

Ссылка. Перед добавлением ссылки необходимо выделить текст или объект (например, картинку), который и будет содержать ссылку. Затем нажмите на эту кнопку, после чего откроется нижеуказанное окно:


Адрес — то куда будет вести ссылка. Например: http://www.ваш_сайт.ru.

Якорь — в данном поле выбирается созданный якорь. При нажатии на ссылку-якорь совершится прокрутка страницы к отмеченному месту. Это делается для быстрого доступа к определенному месту страницы. Например, если страница большая, разумнее сделать вверху список её подразделов, создав в каждом такой якорь. При нажатии на якорь человека перенаправит на нужную информацию.

Цель — имеет два параметра:

 - «Открыть в новом окне» - ссылка будет открываться в новом окне браузера;

 - «Открыть в этом окне» - ссылка будет открываться в текущем окне браузера.

Заголовок — текстовая подсказка, всплывающая при наведении курсора на ссылку.


Якорь. Служит для создания ссылки на нужный раздел данной страницы, как было сказано выше. При клике на иконку всплывёт окно с полем "Имя", где вы можете ввести условное обозначение сноски, отражающее её принадлежность.
Список. Создает пункты списка.
Подстрочный. Делает выделенный текст подстрочным.
Надстрочный. Делает выделенный текст надстрочным.
Изображение. Вставляет изображение на сайт. При нажатии на иконку всплывёт окно следующего вида:


Адрес — адрес на изображение на вашем компьютере. При клике на кнопку «Обзор...» всплывёт еще одно окно, где вам предложат выбрать картинку с компьютера.

Например: C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg.

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

Выравнивание — поле имеет несколько параметров:

 - «По левому краю»  — изображение выравнивается по левому краю, текст обтекает изображение справа;

 - «По правому краю»  — изображение выравнивается по правому краю, текст обтекает изображение справа.

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

Ширина — ширина картинки в пикселях (px).

Высота — высота картинки в пикселях (px).


Поля Ширина и Высота не рекомендованы к заполнению. Если у картинки задан размер меньший, чем был изначально, посетителю вашего сайта всё равно придётся сперва загрузить её в первоначальном размере. Некоторые посетители, имеющие ограничение по трафику или скорости, просто не станут дожидаться загрузки больших картинок. Следовательно, разумнее сжать картинку в любом графическом редакторе до нужного размера, уменьшив также время её загрузки.


Примечание: В случае если вы забыли что означает какой либо из элементов панели-редактора вы можете просто навести курсором мыши на интересующий вас элемент и всплывет подсказка с названием.

Вставка видео

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



Чтобы вставить видео, перейдите на нужный вам видеоролик на сайте YouTube. Найдите внизу кнопки Отправить → Встроить. Появившийся код копируем, и переходим на ваш сайт. Нажимаем мышкой в то место, куда вы хотите вставить видео. Затем нажимаем на иконку в интерфейсе «HTML код». Вставляем туда наш код и сохраняем его.

Работа с Интернет-магазином (сайтом-каталогом)

В данном разделе рассмотрим работу с сайтом каталогом —  то, как добавлять, удалять и редактировать товар. Если был заказан интернет-магазин, то интерфейс будет иметь следующий вид (рис. 3):


Внешний вид интерфейса интернет-магазина (Рис. 3)


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

Добавление категорий


Прежде чем начать работу с каталогом, мы добавим категории. В левом меню вы увидите раздел «Изменение» → Категории. На данной странице присутствует одно поле, которое называется «Категории». Рассмотрим на примере как заполнять данное поле:


Бытовая техника|1

Электроника|2

Телевизоры|3

Мобильные телефоны|4


В данном примере создано 4 категории: Бытовая техника, Электроника, Телевизоры, Мобильные телефоны. Это названия категорий. |1 – это идентификатор категории, который ни в коем случае не должен повторяться. Для каждой категории он должен быть индивидуальным. 

Теперь рассмотрим пример с созданием подкатегорий:

Бытовая техника|1

Название подкатегории|5

Название подкатегории|6

Название подкатегории|7

Электроника|2

Название подкатегории|8

Название подкатегории|9

Название по категории|10

Телевизоры|3

Мобильные телефоны|4


 Как видите, в данном примере для 2-х категорий создано по 3 подкатегории. Подкатегории должны располагаться под названием той категории, к которой необходимо их добавить; единственное правило добавления подкатегорий  —  это пробел вначале строки.

Добавление элементов (товаров)

Чтобы добавить элемент находясь на странице интерфейса, переходим по ссылке, находящейся в левом меню — Добавление → Элемента. Данная страница содержит следующие поля:

Категория — здесь из выпадающего списка указывается категория, к которой относится товар.

Название — название товара.

Изображение — изображение товара. При нажатии на кнопку «Обзор» всплывает окно, в котором указывается путь к картинке, двойным кликом левой кнопки мыши по изображению. В этом же поле прописывается путь до изображения такого вида C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg.

Краткое описание — краткое описание товара, отображаемое в списке товаров.

Подробное описание — описание, которое отображается при переходе на сам товар.

Цена — цена товара.

Изменение элементов (товаров)

Вносить поправки из интерфейса можно в левом меню Изменение → Элемента. Данная страница содержит поля, которые вводятся вами при добавлении, и по которым на данной странице можно найти конкретный товар. Если же оставить поле пустым и нажать кнопку «поиск», то отобразится весь товар, находящийся на сайте.


Удаление элементов осуществляется на данной странице. В столбце «удалить»  ставим галочку напротив товара, который необходимо удалить. и внизу страницы нажимаем по кнопке «изменить».

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