Руководство по использованию интерфейса:
Интерфейс — это комплекс функций, предназначенный для внесения изменений на сайт и легкого редактирования его страниц без каких либо знаний HTML, наподобие таких офисных программ, как Microsoft Office, OpenOffice, и т.д. В данной статье мы рассмотрим особенности интерфейса от “Ниагара стар”.
Для корректной работы нашего интерфейса вам необходимо использовать следующие браузеры:
Клиентам, заказавшим сайт в нашей фирме, по окончании работ мы высылаем на электронную почту две ссылки:
1) http://adminns-test.ru/ - ссылка на сам сайт;Внешний вид страницы интерфейса «Ниагара стар» (рис. 1)
Интерфейс редактирования страницы (Рис. 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.
Краткое описание — краткое описание товара, отображаемое в списке товаров.
Подробное описание — описание, которое отображается при переходе на сам товар.
Цена — цена товара.
Удаление элементов осуществляется на данной странице. В столбце «удалить» ставим галочку напротив товара, который необходимо удалить. и внизу страницы нажимаем по кнопке «изменить».
Так же, перейдя на страницу с каталогом, можно наблюдать красную рамку вокруг названия товара, краткого описания, полного описания и цены, что позволяет с легкостью, быстро внести какие-либо корректировки в добавленный товар непосредственно с самого сайта.