Раздел «Настройки вида сайта» — различия между версиями

Материал из Mid Office Manager Help
Перейти к: навигация, поиск
Строка 1: Строка 1:
== Вкладка «Основное» ==
+
[[Image:Sm9.png|600px]]
  
[[Image:Sm9.png]]
+
=== Вкладка «Основное» ===
 +
На этой вкладке указывается заголовок сайта, логотип сайта, а также настраивается описание и ключевые слова (для SEO). В следующей таблице эти параметры описываются более подробно.
  
На этой вкладке указывается заголовок сайта, логотип сайта, а также настраивается описание и ключевые слова (для SEO).
+
{|class="wikitable"
 +
!Параметр!!Описание
 +
|-
 +
| '''Название сайта'''
 +
| В этом поле задается название сайта, которое отображается в заголовке окна браузера. На вкладках '''Русский вариант''' и '''Английский вариант''' можно задать различные названия для русской и английской версий сайта. Обязательно введите или отредактируйте текст для всех версий сайта, которые планируется использовать.
 +
|-
 +
| '''Блок SEO''':
 +
| Текстовые поля в этом блоке предназначены для размещения информации для поисковой оптимизации сайта, то есть повышения позиции сайта в результатах поисковых систем, таких как Google или Yandex.
 +
|-
 +
| '''Description'''
 +
| В этом поле указывается информация, размещаемая в мета-теге <tt>description</tt>.
 +
|-
 +
| '''Keywords'''
 +
| В этом поле указываются ключевые слова для продвижения сайта.
 +
|-
 +
| '''Логотип'''
 +
|  Графический файл в формате JPG с печатью агентства. Логотип может использоваться в разных печатных документах, например для формирования PDF-файла маршрут-квитанции и при выписке билетов в ГРС «Сирена-Трэвел». Если агентство не пользуется ГРС «Сирена-Трэвел», то логотип добавлять не обязательно. На вкладках '''Русский вариант''' и '''Английский вариант''' можно задать различные логотипы для русской и английской версий сайта.
 +
|-
 +
| '''Использовать экспресс-меню при малом разрешении'''
 +
| Этот флажок управляет отображением упрощенной панели перелетов в левой части сайта на шагах с 2 по 6 для быстрого доступа к поиску нового варианта перелета.
  
*'''Название сайта''' - заголовок сайта, можно указать различные варианты для русской и английской версий сайта.
+
Для обеспечения возможности гибкой настройки полей данной формы все блоки размещены в контейнер DIV с уникальными идентификаторами, что позволяет отредактировать видимость любых частей экспресс-формы с помощью описанных заново свойств DIV-модулей в CSS.
  
*'''Блок SEO''':
+
Экспресс-меню также можно разместить в iFrame, ссылка для экспрес-меню в этом случае будет выглядеть следующим образом:
:*'''''Description''''' - позволяет указать, что будет заключено в мета-тег <tt>description</tt> вашего сайта.
+
<nowiki>http://<имя_ сайта>.ru/ru/express_menu_iframe.html''</nowiki>
:*'''''Keywords''''' - позволяет указать ключевые слова для сайта.
+
|}
  
*'''Логотип''' - позволяет выбрать логотип для сайта, можно использовать разные логотипы для русской и английской версий сайта.
+
=== Вкладка «Таблица стилей» ===
 +
На этой вкладке можно выбрать каскадную таблицу стилей (CSS) сайта. Существует два варианта этой таблицы — таблица простого режима и таблица экспертного режима. Определяются эти CSS-таблицы по-разному:
  
*'''Опция «Использовать экспресс-меню при малом разрешении» — данная опция используется, если вы хотите отобразить упрощенный интерфейс поиска перелетов в левой колонке сайта на 2-6 шагах для моментального доступа к поиску нового варианта перелета.
+
* '''CSS-таблица простого режима''' создается на вкладке '''Простой режим''' с использованием «визуального» метода определения стилей, в котором пользователю предоставляется возможность наглядно выбирать цвет, размер, тип и начертание шрифта стилей сайта.
Для возможности гибкой настройки полей данной формы все «блоки» размещены в контейнер DIV с уникальными идентификаторами, что позволяет отредактировать видимость любых частей экспресс-формы с помощью описанных заново свойств DIV-ов в CSS (см. далее).
+
* '''CSS-таблица экспертного режима''' задается на вкладке '''Экспертный режим''', где есть только поле редактора, в который можно ввести обычный код CSS.
 +
Для выбора используемой таблицы служат флажки '''Использовать простой режим''' или '''Использовать экспертный режим''': при выборе флажка на сайте используется соответствующий вариант таблицы, например при выборе флажка '''Использовать простой режим''' на сайте будет использоваться CSS-таблица, определенная на вкладке '''Простой режим'''.
 +
Далее подробно описываются параметры этих таблиц.
  
''Экспресс-меню также можно разместить в iFrame, ссылка для экспрес-меню в этом случае будет
+
==== Таблица простого режима ====
выглядеть следующим образом: http://имя_вашего_сайта.ru/ru/express_menu_iframe.html''
+
Эта вкладка содержит простейший редактор для замены цвета фона, цвета, размера, типа и начертания шрифтов для различных частей сайта. Для использования «простого» режима необходимо установить флажок «Использовать простой режим».
  
== Вкладка «Таблица стилей» ==
+
[[Image:Smw_010.png|600px]]
 
+
=== Простой режим ===
+
[[Image:Smw_010.png|Таблица стилей - простой режим]]<br>
+
Данный редактор представляет собой простейший редактор для замены цвета фона, цвета, размера, типа и начертания шрифтов для различных частей сайта. Для использования «простого» режима необходимо отметить чекбокс «Использовать простой режим».
+
  
 
Возможна модификация следующих настроек:
 
Возможна модификация следующих настроек:
Строка 44: Строка 63:
 
*политика безопасности
 
*политика безопасности
  
=== Экспертный режим ===  
+
==== Таблица экспертного режима ====  
[[Image:Smw_011.png|Таблица стилей - экспертный режим]]<br>
+
[[Image:Smw_011.png|600px]]
Данная вкладка позволяет задавать заново свойства CSS, заданные для сайта по умолчанию, которые можно просмотреть, используя стандартные средства HTML.
+
 
 +
На этой вкладке можно задавать свойства CSS сайта по умолчанию, используя стандартные средства HTML.
  
Записанные в этом разделе свойства CSS заменяют собой свойства по умолчанию, что позволяет изменять внешний вид сайта в очень широком диапазоне например:
+
Записанные в этом разделе свойства CSS заменяют собой свойства по умолчанию, что позволяет изменять внешний вид сайта в очень широком диапазоне. Далее приведены примеры настройки внешнего вида сайта.
  
 
Пример изменения цвета фона кнопки и цвета текста на активной кнопке меню:
 
Пример изменения цвета фона кнопки и цвета текста на активной кнопке меню:
<code><br>.breadcrumbs .current {<br></code>
+
.breadcrumbs .current {
<code>    background: none repeat scroll 0 0 #FF0000 !important; /* цвет фона кнопки */<br></code>
+
    background: none repeat scroll 0 0 #FF0000 !important; /* цвет фона кнопки */
<code>    color: #000000 !important; /* цвет фона текста */<br></code>
+
    color: #000000 !important; /* цвет фона текста */
<code>}<br></code>
+
}
  
Пример изменения цвета фона кнопки, цвета текста и размера текста на НЕактивной кнопке меню
+
Пример изменения цвета фона кнопки, цвета текста и размера текста '''не'''активной кнопки меню:
<code><br>.breadcrumbs .step {<br></code>
+
.breadcrumbs .step {
<code>    border-right: 1px solid #999999; /* цвет правой границы кнопки */<br></code>
+
    border-right: 1px solid #999999; /* цвет правой границы кнопки */
<code>    color: #38ec52; /* цвет текста кнопки */<br></code>
+
    color: #38ec52; /* цвет текста кнопки */
<code>    cursor: pointer;<br></code>
+
    cursor: pointer;
<code>    float: left;<br></code>
+
    float: left;
<code>    font-size: 12px; /* размер шрифта */<br></code>
+
    font-size: 12px; /* размер шрифта */
<code>    font-weight: bold; /* стиль шрифта ("жирность") */<br></code>
+
    font-weight: bold; /* стиль шрифта ("жирность") */
<code>    height: 30px; /* высота кнопки */<br></code>
+
    height: 30px; /* высота кнопки */
<code>    line-height: 30px;<br></code>
+
    line-height: 30px;
<code>    padding-left: 7px; <br></code>
+
    padding-left: 7px;  
<code>    padding-right: 7px; <br></code>
+
    padding-right: 7px;  
<code>    background: #6540ed; /* цвет фона кнопки */<br></code>
+
    background: #6540ed; /* цвет фона кнопки */
<code>}<br></code>
+
}
  
Пример изменения цвета текста для кнопки "Поиск вариантов"
+
Пример изменения цвета текста кнопки "Поиск вариантов":
<code><br>.ui-button {<br></code>
+
.ui-button {
<code>    color: #FF9600;<br></code>
+
    color: #FF9600;
<code>}<br></code>
+
}
  
 
Пример изменения цвета кнопки "Поиск вариантов" (изменения рисунка - укажите полный путь к вашему рисунку)
 
Пример изменения цвета кнопки "Поиск вариантов" (изменения рисунка - укажите полный путь к вашему рисунку)
<code><br>.ui-state-default {<br></code>
+
.ui-state-default {
<code>    background: url("http://ibe.gridnine.com/common/galleries/images/ui-bg_highlight-hard_100_blue_1x100.png");<br></code>
+
    background: url(<nowiki>"http://ibe.gridnine.com/common/galleries/images/
<code>}<br></code>
+
    ui-bg_highlight-hard_100_blue_1x100.png"</nowiki>);
 +
}
  
Пример изменения цвета, размера и типа начертания текста для страниц с подсказками, заголовки
+
Пример изменения цвета, размера и типа начертания текста заголовков на страницах с подсказками:
<code><br>.content_dialog h4 {<br></code>
+
.content_dialog h4 {
<code>    padding: 10px 0;<br></code>
+
    padding: 10px 0;
<code>    text-decoration: underline; /* подчеркивание текста */<br></code>
+
    text-decoration: underline; /* подчеркивание текста */
<code>    font-weight:bold; /* "жирный" шрифт */<br></code>
+
    font-weight:bold; /* "жирный" шрифт */
<code>}<br></code>
+
}
  
Пример изменения цвета, размера и типа начертания текста для страниц с подсказками, основной текст
+
Пример изменения цвета, размера и типа начертания основного текста на страницах с подсказками:
<code><br>.content_dialog p {<br></code>
+
.content_dialog p {
<code>    color: #FF0000; /* цвет текста */<br></code>
+
    color: #FF0000; /* цвет текста */
<code>    padding: 5px 0;<br></code>
+
    padding: 5px 0;
<code>}<br></code>
+
}
  
Пример изменения цвета, размера и типа начертания текста для страниц с подсказками, текст в списке
+
Пример изменения цвета, размера и начертания текста списков на страницах с подсказками:
<code><br>.content_dialog li {<br></code>
+
.content_dialog li {
<code>    font-style:italic; /* наклонный текст */<br></code>
+
    font-style:italic; /* наклонный текст */
<code>    padding: 5px 0;<br></code>
+
    padding: 5px 0;
<code>}<br></code>
+
}
  
Пример изменения цвета ссылок
+
Пример изменения цвета ссылок:
<code><br>a:link, a:visited, a:hover {<br></code>
+
a:link, a:visited, a:hover {
<code>   color: #1200FF;<br></code>
+
   color: #1200FF;
<code>}<br></code>
+
}
  
Пример изменения цвета заголовка календаря
+
Пример изменения цвета заголовка календаря:
<code><br>.ui-widget-header {<br></code>
+
.ui-widget-header {
<code>    background: url("http://ibe.gridnine.com/common/galleries/images/ui-bg_highlight-hard_100_blue_1x100.png") repeat-x scroll 50% 50%;<br></code>
+
    background: url(<nowiki>"http://ibe.gridnine.com/common/galleries/images/
<code>    border: 1px solid #5C5FE2; /* Цвет бордюра заголовка */<br></code>
+
    ui-bg_highlight-hard_100_blue_1x100.png"</nowiki>) repeat-x scroll 50% 50%;
<code>    color: #5C5FE2; /* Цвет текста заголовка */<br></code>
+
    border: 1px solid #5C5FE2; /* Цвет бордюра заголовка */
<code>}<br></code>
+
    color: #5C5FE2; /* Цвет текста заголовка */
 +
}
  
Все нижеуказанные свойства можно посмотреть на сайте http://test.ibe.gridnine.com
+
Также можно добавить ссылку на внешний CSS-файл, который можно редактировать, даже не имея доступ к Менеджеру сайта, например:
 +
<nowiki>@import "http://www.адрес_ сайта/ibecss/ibe.css"</nowiki>
  
Также можно добавить ссылку на внешний CSS-файл, который можно править не имея доступ к Менеджеру сайта, например: '''<nowiki>@import "http://www.адрес_вашего_сайта/ibecss/ibe.css"</nowiki>'''
+
=== Вкладка «Блоки» ===
 +
На этой вкладке редактируются блоки в верхней, правой, левой и нижней частей страницы сайта. Блоки неизменны на всех шагах бронирования. В коде можно использовать JavaScript и HTML, но не серверные скрипты.
  
== Вкладка «Блоки» ==
+
{{ warn |Скрипты, написанные на языках, требующих их обработки со стороны сервера (Perl, PHP и аналогичные) не поддерживаются. }}
[[Image:Smw_012.png|Вкладка "Блоки"]]<br>
+
Доступно редактирование блоков в верхней, правой, левой и нижней частей экрана. Все блоки с «резиновым» дизайном, правые и левые баннеры прописаны для примера. Все блоки показываются одинаково на всех шагах бронирования. Также на вкладки можно добавлять JavaScript, HTML.
+
  
*Скрипты, написанные на языках, требующих их обработку со стороны сервера (Perl, PHP, etc…) работать не будут.
+
В нижнем блоке обязательно должна присутствовать переменная '''${Copyright}''' — без этой переменной .
*Наличие переменной '''${Copyright}''' обязательно.
+

Версия 14:44, 20 ноября 2014

Sm9.png

Содержание

Вкладка «Основное»

На этой вкладке указывается заголовок сайта, логотип сайта, а также настраивается описание и ключевые слова (для SEO). В следующей таблице эти параметры описываются более подробно.

Параметр Описание
Название сайта В этом поле задается название сайта, которое отображается в заголовке окна браузера. На вкладках Русский вариант и Английский вариант можно задать различные названия для русской и английской версий сайта. Обязательно введите или отредактируйте текст для всех версий сайта, которые планируется использовать.
Блок SEO: Текстовые поля в этом блоке предназначены для размещения информации для поисковой оптимизации сайта, то есть повышения позиции сайта в результатах поисковых систем, таких как Google или Yandex.
Description В этом поле указывается информация, размещаемая в мета-теге description.
Keywords В этом поле указываются ключевые слова для продвижения сайта.
Логотип Графический файл в формате JPG с печатью агентства. Логотип может использоваться в разных печатных документах, например для формирования PDF-файла маршрут-квитанции и при выписке билетов в ГРС «Сирена-Трэвел». Если агентство не пользуется ГРС «Сирена-Трэвел», то логотип добавлять не обязательно. На вкладках Русский вариант и Английский вариант можно задать различные логотипы для русской и английской версий сайта.
Использовать экспресс-меню при малом разрешении Этот флажок управляет отображением упрощенной панели перелетов в левой части сайта на шагах с 2 по 6 для быстрого доступа к поиску нового варианта перелета.

Для обеспечения возможности гибкой настройки полей данной формы все блоки размещены в контейнер DIV с уникальными идентификаторами, что позволяет отредактировать видимость любых частей экспресс-формы с помощью описанных заново свойств DIV-модулей в CSS.

Экспресс-меню также можно разместить в iFrame, ссылка для экспрес-меню в этом случае будет выглядеть следующим образом:

http://<имя_ сайта>.ru/ru/express_menu_iframe.html''

Вкладка «Таблица стилей»

На этой вкладке можно выбрать каскадную таблицу стилей (CSS) сайта. Существует два варианта этой таблицы — таблица простого режима и таблица экспертного режима. Определяются эти CSS-таблицы по-разному:

  • CSS-таблица простого режима создается на вкладке Простой режим с использованием «визуального» метода определения стилей, в котором пользователю предоставляется возможность наглядно выбирать цвет, размер, тип и начертание шрифта стилей сайта.
  • CSS-таблица экспертного режима задается на вкладке Экспертный режим, где есть только поле редактора, в который можно ввести обычный код CSS.

Для выбора используемой таблицы служат флажки Использовать простой режим или Использовать экспертный режим: при выборе флажка на сайте используется соответствующий вариант таблицы, например при выборе флажка Использовать простой режим на сайте будет использоваться CSS-таблица, определенная на вкладке Простой режим. Далее подробно описываются параметры этих таблиц.

Таблица простого режима

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

Smw 010.png

Возможна модификация следующих настроек:

  • базовый стиль текста – применяется ко всем стилям.
  • цена найденного результата
  • заголовки
  • шапки сайта
  • заголовок искомого перелета
  • цена
  • типы оплаты
  • сообщение о тайм-лимите
  • вкладка текущего шага
  • стиль кнопок
  • ссылка при наведении
  • предупреждение на 4-ом шаге
  • текущая вкладка
  • сообщения об ошибке
  • политика конфиденциальности
  • политика безопасности

Таблица экспертного режима

Smw 011.png

На этой вкладке можно задавать свойства CSS сайта по умолчанию, используя стандартные средства HTML.

Записанные в этом разделе свойства CSS заменяют собой свойства по умолчанию, что позволяет изменять внешний вид сайта в очень широком диапазоне. Далее приведены примеры настройки внешнего вида сайта.

Пример изменения цвета фона кнопки и цвета текста на активной кнопке меню:

.breadcrumbs .current {
    background: none repeat scroll 0 0 #FF0000 !important; /* цвет фона кнопки */
    color: #000000 !important; /* цвет фона текста */
}

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

.breadcrumbs .step {
    border-right: 1px solid #999999; /* цвет правой границы кнопки */
    color: #38ec52; /* цвет текста кнопки */
    cursor: pointer;
    float: left;
    font-size: 12px; /* размер шрифта */
    font-weight: bold; /* стиль шрифта ("жирность") */
    height: 30px; /* высота кнопки */
    line-height: 30px;
    padding-left: 7px; 
    padding-right: 7px; 
    background: #6540ed; /* цвет фона кнопки */
}

Пример изменения цвета текста кнопки "Поиск вариантов":

.ui-button {
    color: #FF9600;
}

Пример изменения цвета кнопки "Поиск вариантов" (изменения рисунка - укажите полный путь к вашему рисунку)

.ui-state-default {
    background: url("http://ibe.gridnine.com/common/galleries/images/
     ui-bg_highlight-hard_100_blue_1x100.png");
}

Пример изменения цвета, размера и типа начертания текста заголовков на страницах с подсказками:

.content_dialog h4 {
    padding: 10px 0;
    text-decoration: underline; /* подчеркивание текста */
    font-weight:bold; /* "жирный" шрифт */
}

Пример изменения цвета, размера и типа начертания основного текста на страницах с подсказками:

.content_dialog p {
    color: #FF0000; /* цвет текста */
    padding: 5px 0;
}

Пример изменения цвета, размера и начертания текста списков на страницах с подсказками:

.content_dialog li {
    font-style:italic; /* наклонный текст */
    padding: 5px 0;
}

Пример изменения цвета ссылок:

a:link, a:visited, a:hover {
  color: #1200FF;
}

Пример изменения цвета заголовка календаря:

.ui-widget-header {
    background: url("http://ibe.gridnine.com/common/galleries/images/
     ui-bg_highlight-hard_100_blue_1x100.png") repeat-x scroll 50% 50%;
    border: 1px solid #5C5FE2; /* Цвет бордюра заголовка */
    color: #5C5FE2; /* Цвет текста заголовка */
}

Также можно добавить ссылку на внешний CSS-файл, который можно редактировать, даже не имея доступ к Менеджеру сайта, например:

@import "http://www.адрес_ сайта/ibecss/ibe.css"

Вкладка «Блоки»

На этой вкладке редактируются блоки в верхней, правой, левой и нижней частей страницы сайта. Блоки неизменны на всех шагах бронирования. В коде можно использовать JavaScript и HTML, но не серверные скрипты.

Alert.png Скрипты, написанные на языках, требующих их обработки со стороны сервера (Perl, PHP и аналогичные) не поддерживаются.

В нижнем блоке обязательно должна присутствовать переменная ${Copyright} — без этой переменной .

Личные инструменты
Пространства имён

Варианты
Действия
Навигация
Печать/экспорт
Инструменты