Режим визуального редактирования
!-- #End_Auth --.
ЗАМЕЧАНИЕ
Лучше не просто вырежьте код, а перенесите его в текстовый файл.
¦ Перейдите в режим визуального редактирования.
¦ Вызовите панель Компоненты 2.0, щелкнув по кнопке внизу визуального редактора. Откроется панель со списком доступных компонентов.
¦ Откройте группу компонентов Служебные ^ Пользователь.
¦ Перенесите иконку Форма авторизации на место, где находился HTML-код авторизации (рис. 4.13) (между метками !-- #Begin_ Auth --и!-- #End_Auth --).
¦ Вызовите панель Свойства.
¦ В группе параметров Дополнительно в поле Страница регистрации
введите /auth/ (ссылка на папку компонента авторизации).
¦ В этой же группе параметров в поле Страница профиля введите /personal/profile/ (ссылка на персональный раздел).
¦ Сохраните изменения.
Если теперь перейти в раздел Просмотр и завершить сессию, а потом авторизоваться опять, то вы увидите, что форма авторизации работает, но ее вид не соответствует дизайну. Более того, окно регистрации не открывается в отдельном окне, как планировалось.
¦ Перейдите в раздел Разработка.
¦ Вызовите функцию Редактировать параметры компонента из меню компонента Авторизация. Откроется диалог свойств компонента (рис.
4.14).
Рис. 4.14. Настраиваем свойства компонента
¦ В поле Шаблон компонента выберите шаблон auth.
¦ Сохраните внесенные изменения.
Теперь при завершении сессии и повторной авторизации вы увидите, что всплывающее окно открывается, а вид формы компонента изменился. Тем не менее ни вид ссылок для регистрации и авторизации, ни окно авторизации совершенно не соответствуют утвержденному дизайну (рис.
4.15).
Рис. 4.15. Слева как должно быть, справа как есть
Какие расхождения мы видим?
- Не соответствует порядок ссылок: сначала Войти, потом Регистрация вместо обратного, как в дизайне.
- Само слово Войти не соответствует утвержденному Вход.
- Не соответствуют шрифты и их форматирование в надписях.
- Не соответствуют картинки.
Кроме того, всплывающее окно авторизации тоже не вписывается в дизайн.
Изменение шаблона компонента
Займемся подгонкой шаблона компонента под дизайн.
ЗАМЕЧАНИЕ
Если у вас включено кеширование компонентов, то возможна ситуация, когда после внесения изменений в шаблоны компонента или его файл стилей вы не заметите этих изменений. Дело в этом самом кешировании, которое показывает не реальный вид, а кешированный от предыдущих сессий.
В этом случае надо просто обновить кеш компонента, воспользовавшись кнопкой Обновить на административной панели.
Оговоримся, что не все неточности дизайна нам удастся исправить на данном уровне подготовки. Порядок ссылок невозможно изменить, не модифицируя PHP-код самого компонента.
Это требует определенного уровня подготовки, и мы этим заниматься не будем. Если для вас важен порядок слов, используйте вариант авторизации HTML.
На наш взгляд, это не настолько существенное отклонение от дизайна, чтобы отказаться от компонента.
Существует еще один момент в шаблоне компонента, который мы не сможем поменять простым путем уже в силу ограничений в версии Стандарт. Для замены слова Войти словом Вход необходим Модуль локализации. А он, к сожалению, есть только в версии Бизнес.
Но всегда есть обходные пути. Мы воспользуемся одним из них.
Дело в том, что любая программа это файлы, которые где-то лежат и которые можно изменить. Значит, нам надо найти файл, где задается надпись Войти, и поменять ее на Вход.
¦ Перейдите в раздел Панель управления.
¦ Перейдите в раздел Контент ^ Структура сайта ^ Файлы и папки /bitrix/templates/test/components/bitrix/system.auth.form/auth/ lang/ru/.
ЗАМЕЧАНИЕ
Внимательный взгляд заметит определенную логику расположения информации в файлах компонента. Вот она: system.auth.form/ auth/lang/ru/.
Эта структура типична для всех компонентов системы: имя_компонента/применяемый_шаблон/языковая_папка/конкрет-ный_язык. В папке конкретного языка расположены все описания полей, используемые в этом шаблоне.
Так можно поменять тексты в любом компоненте.
В этой папке есть файл template.php.
¦ В колонке действий для строки этого файла выберите Редактировать как PHP. Откроется форма редактирования файла (рис.
4.16).
Рис. 4.16. Изменяем надпись
В самой первой строке мы видим слово Войти, которое прописано для параметра auth_login_button. Именно это слово и выводится в форме авторизации.
¦ Замените Войти словом Вход.
ЗАМЕЧАНИЕ
При утверждении шаблона дизайна очень трудно предусмотреть все возможные моменты. Например, в нашем случае мы заменяем слово Войти словом Вход, но в утвержденном дизайне ничего не говорится про то, как выглядит страница у авторизованного посетителя.
А у авторизованного посетителя будет видно слово Выйти. Логично заменить его словом Выход по аналогии со словом Вход, хотя на это нет прямого указания в дизайне.
¦ Сохраните внесенные изменения.
Итак, мы адаптировали текст модуля к требованиям дизайна. Теперь займемся внешним видом.
¦ Вызовите функцию Редактировать шаблон компонента из меню компонента Авторизация. Откроется диалог с PHP-кодом шаблона компонента.
ЗАМЕЧАНИЕ
Мы уже упоминали о предпочтительном порядке работы над дизайном сайта. В этом списке редактирование шаблона стоит на самом последнем месте. Однако к данному способу приходится иногда прибегать.
Если вы редактируете шаблон, то ни в коем случае не редактируйте системные шаблоны, расположенные в папке /bitrix/components/bitrix. Копируйте либо сами компоненты, как это сделали мы, либо шаблоны компонентов, как мы будем делать ниже.
Нам нужно заменить картинки. Работа упрощается тем, что в тестовом дизайне использована одна картинка на все три позиции.
Если бы картинки были разные, нам бы пришлось повторять описываемую ниже операцию несколько раз, меняя названия картинок.
¦ Откройте файл с сохраненным HTML-кодом авторизации.
Имя картинки в этом коде punkt_top.gif. Эта картинка после загрузки на тестовый сайт расположена в папке /bitrix/templates/test/ images.
Значит, путь до картинок в рамках системы будет такой: /bitrix/ templates/test/images/punkt_top.gif.
¦ В диалоге с кодом шаблона найдите ссылки на картинки, используемые в шаблоне. Так как в теги картинки включен PHP-код и найти их не так просто, мы приведем ссылки на картинки полностью:
- Первая и вторая: img src=?=$templateFolder?/images/ login.gif width=10 height=11 border=0 alt=
- Третья: input type=image src=?=$templateFolder?/images/ login.gif alt=?=GetMessage(AUTH_LOGOUT_BUTTON)?
ЗАМЕЧАНИЕ
Теги расположены почти в самом низу шаблона.
¦ Замените в шаблоне пути до всех картинок указанным выше адресом картинки. У вас должно получиться:
- Первая и вторая: img src=?=$templateFolder?/bitrix/ templates/test/images/punkt top.gif width=10 height=11 border=0 alt=
- Третья: input type=image src=?=$templateFolder?/ bitrix/templates/test/images/punkt top.gif alt=?=GetMessage(AUTH_LOGOUT_BUTTON)?
Если вы знакомы с HTML, то должны обратить внимание на то, что размеры картинок (исходных в шаблоне и из нашего дизайна) не совпадают. В шаблоне используются картинки с параметрами width=10 и height=11 в одном случае, width=8 и height=11 в другом и вообще без указания размеров в третьем.
А в исходном дизайне width=4 и height=4.
¦ В шаблоне компонента замените параметры размеров правильными, то есть в тегах width и height поставьте 4.
¦ В третьем случае нужно установить параметры width=4 и height=4 перед параметром alt.
¦ Сохраните внесенные изменения.
ЗАМЕЧАНИЕ
Образец исходного и конечного кода есть в приложении 3.
Завершите сессию и авторизуйтесь заново. Вы увидите, что картинки заменены.
Теперь займемся шрифтами.
¦ Перейдите в раздел Разработка.
¦ Вызовите функцию Редактировать шаблон компонента из меню компонента Авторизация. Откроется диалог с PHP-кодом шаблона компонента.
Просматривая шаблон компонента, мы увидим, что за оформление всплывающего окна отвечает стиль login-form-window: код этого окна расположен в теге div id=login-form-window /div. А на надписях Вход и Регистрация стиль не задан. Следовательно, нам надо задать стиль для этих надписей, а стиль login-form-window изменить так, чтобы он соответствовал дизайну. Начнем со всплывающего окна авторизации.
Что нас в нем не устраивает? Фон, отличающийся от фона сайта.
Кому-то еще может показаться, что не соответствует размер окна и т. п. Эти вопросы дело вкуса, и их изменение мы оставляем на ваше усмотрение.
¦ Вызовите функцию Редактировать CSS-файл шаблона из меню компонента Авторизация. Откроется диалог с файлом CSS шаблона компонента (рис.
4.17).
Рис. 4.17. Задан единственный стиль
¦ Откройте исходные коды тестового сайта.
При внимательном просмотре вы увидите, что дизайнер задал фон таблиц в цвете #dedee2, а границы в цвете #bfbfbf. Например, ячейка:
td class=br bgcolor=#DEDEE2 bordercolor=#bfbfbf
/td
Воспользуемся этими же цветами и мы.
¦ Замените цвет в строке background:#F5F5ED; цветом background: #DEDEE2;.
¦ Замените цвет в строке border: 1px solid #000; цветом border:1px solid #bfbfbf;.
¦ Сохраните внесенные изменения.
Завершите сессию и авторизуйтесь заново. Вы увидите, что вид окна изменился и стал соответствовать общей цветовой гамме сайта.
Теперь нужно изменить вид надписей Вход и Регистрация. Сделать это можно разными способами.
Но мы снова воспользуемся файлом стилей. Пусть стиль, отвечающий за оформление этих надписей, называется login-info. Соответственно, стиль активной ссылки будет #login-info а.
ЗАМЕЧАНИЕ
Стиль может называться как угодно, главное, чтобы название было на латинице. Индекс а говорит о том, чем активная ссылка будет отличаться от обычной.
¦ Перейдите в раздел Разработка.
¦ Вызовите функцию Редактировать шаблон компонента из меню компонента Авторизация. Откроется диалог с PHP-кодом шаблона компонента.
Установим теги для стиля login-info. Установить эти теги придется два раза, так как HTML-код не должен пересекаться с PHP-кодом.
¦ Установите тег div id=login-info первый раз сразу за тегом /div, закрывающим предыдущий стиль login-form-window.
¦ Установите тег /div, закрывающий использование стиля перед PHP-кодом ?else:?.
¦ Установите тег div id=login-info второй раз сразу за тегом ?else:?.
¦ Установите тег /div, закрывающий использование стиля, перед завершающим PHP-кодом ?endif?.
¦ Сохраните внесенные изменения.
Мы прописали место, где должны будут использоваться стили для шрифта. Теперь надо создать сами шрифты.
¦ Вызовите функцию Редактировать CSS-файл шаблона из меню компонента Авторизация. Откроется диалог с файлом CSS шаблона компонента.
¦ Добавьте в файл стилей строки:
#login-info {color:#3B3B3B; font-size:70%; font-weight:bold;} #login-info a {color: #666666;}
Параметры стилей частично найдены опытным путем (font-size:70%), так как они не указаны в исходных стилях, либо (цвет шрифтов и форматирование bold) взяты из исходного кода. Необходимость использования для форматирования шрифта параметра font-weight:bold подсказывает тег b в исходном коде.
¦ Сохраните внесенные изменения.
Завершите сеанс и авторизуйтесь вновь. Вы увидите, что надписи изменили шрифт, размер и цвет.
Теперь они почти полностью соответствуют утвержденному дизайну.
ЗАМЕЧАНИЕ
Образец исходного и конечного кода есть в приложении 3.
Мы закончили встраивание модуля авторизации и теперь можем двигаться дальше и заняться меню сайта.
Меню сайта
Меню бывают разные: горизонтальные и вертикальные, левые и правые, верхние и нижние. Чаще всего встречаются левые вертикальные меню и верхние горизонтальные. В нашем дизайне встречаются три вида меню:
- левое вертикальное, классическое;
- нижнее горизонтальное;
- верхнее горизонтальное частичное.
Работу начнем с левого вертикального меню.
Левое меню
Левое вертикальное меню есть практически в каждом сайте. Оно удобно, привычно, и мы не видим смысла отказываться от него. Реализовать меню в HTML-кодах возможно, но крайне трудоемко при развитой структуре сайта.
При работе с компонентом в рамках CMS 1С-Битрикс: Управление сайтом можно быстро и удобно редактировать меню, причем не силами разработчика, а силами малоквалифицированных редакторов.
¦ Откройте для редактирования шаблон сайта.
Сначала нужно определить часть HTML-кода, отвечающего за один элемент меню. Поскольку вы, как предполагается, владеете азами HTML, то в своем проекте разберетесь сами, а в нашем тестовом дизайне код, отвечающий за меню, расположен между:
!-- #Begin_Left_Menu --
!-- #End_Left_Menu --
¦ Скопируйте код, имитирующий меню, в отдельный текстовый файл. Он нам понадобится.
ЗАМЕЧАНИЕ
Далее мы будем просто говорить: Удалите код. Под этим подразумевается, что вы находите код, вырезаете его из кодов шаблона и сохраняете в отдельном текстовом файле.
¦ Удалите из HTML-кода шаблона код меню.
¦ Перейдите в режим визуального редактирования.
¦ Вызовите панель Компоненты 2.0.
¦ Откройте раздел Служебные ^ Навигация.
¦ Перенесите компонент Меню на место, где располагалось старое меню. В нашем случае настройка этого компонента не требуется.
¦ Сохраните внесенные изменения.
¦ Перейдите в режим Просмотр и оцените результат.
А оценивать-то нечего: на месте меню пустое место, так как мы только установили компонент, но не создали само меню.
¦ Выполните команду Создать меню в текущем разделе из меню команд компонента Меню. Откроется форма для создания меню (рис.
4.18).
Рис. 4.18. Форма создания меню
В этой главе мы не занимаемся созданием структуры раздела и наполнением сайта контентом. Поэтому нас интересует только одна колонка Название.
Пока мы создаем меню без привязки к разделам.
¦ Щелкните по кнопке Вставить пункт. Появится поле для заполнения.
¦ Введите в это поле название пункта например, Главная.
Создавая пункты, мы можем писать абсолютно любые значения. Но для облегчения дальнейшей работы лучше сразу вводить названия разделов согласно техническому заданию сайта.
¦ Повторите два последних шага шесть раз для создания меню.
¦ Сохраните внесенные изменения.
Как и должно быть, меню появилось, но оно совершенно нам не подходит по оформлению (рис. 4.19).
Прежде чем заняться модификацией шаблона меню под наш дизайн, выполним операцию копирования шаблона компонента Меню в тестовый шаблон. Если этого не сделать, мы будем модифицировать сам системный шаблон.
¦ Перейдите в раздел Разработка.
¦ Вызовите функцию Копировать шаблон компонента из меню компонента Меню. Откроется диалог Копирование шаблона компонента (рис.
4.20).
Рис. 4.19.
Меню. Слева как должно быть, справа как есть на данный момент
Рис. 4.20. Копируем шаблон компонента
¦ Введите в поле Название нового шаблона компонента имя для нового шаблона. Пусть это будет, скажем, Fishl (название должно быть только на латинице).
¦ Выберите текущий/test в группе Копировать в шаблон сайта. Этим действием вы укажете место, где будет храниться новый шаблон.
¦ Снимите флажок с Перейти к редактированию шаблона. Остальные флажки не снимайте.
Так вы сразу примените шаблон.
ЗАМЕЧАНИЕ
В дальнейшем мы будем просто говорить: Скопируйте шаблон компонента в текущий шаблон сайта. А вы выполняйте описанные выше действия по отношению к соответствующему компоненту.
Можно было бы сразу открыть шаблон для редактирования, но мы сначала зададим стили.
Шаблон скопируется, диалог за-
Щелкните по кнопке Сохранить кроется, сайт обновится.
Внешне после обновления сайта ничего не изменится. Это естественно, так как мы просто скопировали шаблон, ничего в нем не меняя. Для системы важны уже совершенные действия.
Теперь при выводе компонента она будет обращаться не к системному шаблону, а к вашему, скопированному.
¦ Вызовите функцию Редактировать CSS-файл шаблона из меню компонента Меню. Откроется диалог Редактирование файла CSS.
В этом файле видно, что для вывода текста используется стиль left-menu. Мы пойдем по более простому пути в нашем тестовом сайте (впрочем, кто мешает вам экспериментировать?).
Переименуйте стиль ul.left-menu в просто .left-menu.
¦ Вставьте в параметры стиля left-menu следующие строки:
- font-size:80%; изменяем размер шрифта;
- coior:#6 66 66 6; изменяем цвет шрифта;
- font-weight:boid; изменяем написание шрифта;
- text-decoration:none; отменяем подчеркивание ссылок.
¦ Так как по дизайну не предусмотрены другие стили оформления (активной ссылки, посещенной ссылки, подсветки ссылки), то все остальные стили просто удалите.
¦ Сохраните внесенные изменения.
Итак, шрифт заменен и подогнан по цвету, размеру.
ЗАМЕЧАНИЕ
Образец исходного и конечного кода есть в приложении 3.
Теперь надо подогнать шаблон Меню под утвержденный дизайн. Будьте внимательны: работа по изменению данного шаблона требует аккуратности!
¦ Вызовите функцию Редактировать шаблон компонента из меню компонента Меню. Откроется диалог Редактирование файла template.php.
¦ Удалите строку с указанием на стиль ul class=left-menu, так как мы его применять не будем.
¦ Откройте текстовый файл, где сохраняли вырезанный HTML-код таблицы меню оригинального дизайна.
HTML-код представляет собой таблицу с двумя строками. Вторая строка декоративная.
Сама ссылка должна формироваться в первой строке, если быть точным во второй ячейке первой строки.
Эту ячейку необходимо отредактировать:
td height=25 background=/bitrix/templates/test/ images/fot_tabl_centr.jpg img width=10 height=10 src=/bitrix/templates/ test/images/pix.gif /
b
a href=# class=text font size=2 color=#6 6 66 6 6rnaBHaf/font/a
/b
/td
¦ Найдите указанный участок кода.
¦ Удалите из этого участка теги b/b; font size=2 со1ог=#666666Главная/?опЬ.
Мы удалили параметры форматирования текста, которые теперь будут определяться не шаблоном, а стилями.
¦ Замените параметр class=text параметром class=left-menu. Так вы укажете название стиля, который должен применяться для названий разделов в меню.
Теперь нужно заменить # - символ ссылки PHP-кодом, объясняющим системе, где искать название раздела и ссылку на него.
ЗАМЕЧАНИЕ
Чтобы понимать, как построен шаблон меню, необходимо рассмотреть его структуру. В колонке слева действие.
В колонке справа обозначены теги, задающие данное действие.
Действие Код Проверка включения ?if (!defined(B PROLOG
INCLUDED) || B PROLOG
INCLUDED!==true)die();? Старт скрипта ?if (!empty($arResu1t)):? Открытие тега UL u1 c1ass = .... ненумерованный список Старт цикла поиска ?foreach ($arResu1t as
$arItem):? Вывод ссылки ?if($arItem[SELECTED]):?
Ссылка активная 1ia href=?=$arItem[LINK]?
c1ass=se1ected?=$arItem
[TEXT]?/a/1i Проверка на ?e1se:? продолжение
цикла Ссылка 1ia href=?=$arItem[LINK] неактивная ??=$arItem[TEXT]?/a
/1i Завершение вывода ?endif? ссылки Завершение цикла ?endforeach? поиска Закрытие тега UL /u1 ненумерованный список Завершение скрипта ?endif?
Теперь вы видите, как в PHP-коде шаблона отображаются ссылки. Они располагаются между тегами li, которые определяют отдельный элемент списка. Элементов списка два, так как в шаблоне предусмотрено выделение активной ссылки. В исходном дизайне такое выделение не предусмотрено.
Это значит, что мы должны объединить представление выбранной и простой ссылки в PHP-коде.
То есть вместо:
lia href=?=$arItem[LINK]? class=selected ?=$arItem[TEXT]?/a/li
?else:?
lia href=?=$arItem[LINK]??=$arItem [TEXT]?/a/li
?endif?
PHP-код, вызывающий ссылку и текст, должен стать таким:
?=$arItem[LINK]??if($arItem[SELECTED]):?
?else:??endif??=$arItem[TEXT]?
¦ Вместо # поставьте PHP-код:
?=$arItem[LINK]??if($arItem[SELECTED]):??else:
??endif??=$arItem[TEXT]?
В конечном итоге должен получиться такой код ячейки:
td height=25 background=/bitrix/templates/test/ images/fot_tabl_centr.jpg img width=10 height=10 src=/bitrix/templates/ test/images/pix.gif /
a class=left-menu href=?=$arItem[LINK]? ?if($arItem[SELECTED]):??else:?
?endif??=$arItem[TEXT]?/a
/td
ЗАМЕЧАНИЕ
Образец исходного и конечного кода есть в приложении 3.
Теперь можно переходить к переносу HTML-кодов, определяющих внешний вид строки меню. PHP-код и HTML-код не должны пересекаться между собой, а должны быть включены друг в друга. Поэтому сейчас нужно очень внимательно подходить к размещению тегов в шаблоне.
Сначала разместим теги таблицы. Так как меню должно формироваться внутри таблицы, PHP-код, запускающий цикл, также должен находиться внутри нее.
¦ Вставьте открывающий тег table width=99% cellspacing=0 cellpadding=0 border=0 перед PHP-функцией foreach, задающей цикл.
ЗАМЕЧАНИЕ
Теги в PHP начинаются с ? и заканчиваются ?. Если в книге говорится Вставьте открывающий тег... перед PHP-функцией..., это означает, что надо устанавливать тег не непосредственно перед указанной функцией, а перед открывающим ее тегом. Аналогично и в случае с закрывающими тегами.
¦ Вставьте тег /table, закрывающий таблицу, сразу за функцией endforeach, завершающей PHP-цикл. Теперь цикл формируется в рамках таблицы, заданной дизайном.
Так как мы уже интегрировали код PHP-цикла в HTML-код, осталось только вставить полученную HTML-конструкцию между тегами начала и конца PHP-цикла.
