Вызов функции из Меню компонента
Для открытия шаблона редактирования из панели управления:
¦ Выполните команду Настройки ^ Настройки продукта ^ Сайты ^ Шаблоны сайтов. Откроется список шаблонов, имеющихся в системе.
¦ Откройте для редактирования нужный шаблон любым способом из описанных в разделе Форма отчета.
В книге мы будем говорить Откройте шаблон сайта для редактирования, а вы решайте, каким способом сделать это в данный момент.
Это несложная операция, но надо знать, что меню компонента может отображаться по-разному в разных закладках и предоставлять различные возможности по управлению. В режиме Просмотр меню компонента вообще недоступно.
В режиме Редактирование доступны меню только тех компонентов, которые позволяют добавлять элементы в составе компонента, например, добавление разделов в меню сайта. Если компонент не предусматривает добавления элементов (например, компонент Авторизация или Цепочка навигации), то в режиме Редактирование его меню не видно.
так выглядит меню компонента в режиме Редактиро вание.
Самый полный режим управления предоставлен режиму Разработка (рис. 3.33), в котором возможно не только редактирование и добавление элементов, но и редактирование самого компонента: параметров, шаблона, стилей.
Рис. 3.33. Меню компонента
Редактировать меню можно и из административного раздела, но, на наш взгляд, предлагаемый вариант проще и удобнее. Для вызова функции меню:
¦ Перейдите в раздел Разработка.
¦ Вызовите меню нужного компонента и выберите функцию для редактирования.
Далее мы будем говорить Вызовите для редактирования... с указанием требуемой функции.
Откуда все начинается
Начальная точка
Сейчас необходимо определиться с точкой, откуда будут начинаться все уроки в нашей книге. Любой любознательный и пытливый человек, коими мы считаем читателей, всегда экспериментирует и пробует. В ходе этих проб он обязательно окажется в каком-нибудь месте, далеком от предлагаемого порядка действий. Скажем, изучая описанные в книге механизмы, попутно можно выполнять и работу над собственным сайтом.
Дело, конечно, хозяйское. Однако все уроки, описанные в книге, будут начинаться с одной и той же позиции, в которую вам надо выйти, перед тем как начать изучение следующего этапа.
Вы уже имеете основные представления о структуре интерфейса, поэтому вам легко будет объяснить стартовую точку всех уроков это тестовый сайт, открытый в публичном разделе после авторизации вас как администратора. Тестового сайта у нас пока нет. Мы создадим его в самом начале следующей главы.
Там же мы расскажем, как сделать его открывающимся по умолчанию.
Если вы начинаете работу с незапущенного 1С-Битрикс: Управление сайтом, то переход в стартовую точку очень прост.
¦ Выполните команду Пуск ^ Все программы ^ Битрикс: Веб-окружение (имеется в виду кнопка Пуск операционной системы, а не CMS 1С-Битрикс: Управление сайтом). Запустится браузер по умолчанию, и в нем откроется демо-версия сайта (или созданная нами тестовая версия, которая установлена по умолчанию).
¦ Войдите в систему как администратор.
Вы в стартовой точке.
Если 1С-Битрикс: Управление сайтом был запущен ранее, но браузер закрыт, то:
¦ Щелкните правой кнопкой мыши по ярлыку в системном трее операционной системы. Появится контекстное меню.
¦ В этом меню выберите Открыть. В браузере откроется публичная часть демо-версии сайта (или тестовый сайт).
¦ Войдите в систему как администратор.
Если вы уже в системе, просто перейдите в публичный раздел.
Последнее замечание
И напоследок одно очень важное замечание. В процессе интеграции дизайна в сайт, да и последующей работы с сайтом и его кодами вам нужно будет модифицировать HTML-код: удалять его фрагменты, вставлять и HTML-код, и PHP-код. Даже опытные программисты могут при этом выделить для удаления или добавления не то, что нужно. Вам же настоятельно рекомендуем подходить к изменениям в коде очень и очень серьезно.
Мы обещаем, что хоть где-то, хоть раз, но вы ошибетесь, и результатом этой ошибки будет поломанный дизайн или сообщение системы об ошибке в такой-то строке кода.
Приучите себя, особенно первое время, держать под рукой простой текстовый файл, куда вы будете копировать удаляемые или добавляемые участки кода, чтобы при необходимости было легче восстановить исходное состояние. Также рекомендуем время от времени (лучше после завершения определенного этапа работ) копировать код шаблона в такой же txt-файл и сохранять его под соответствующим именем.
Скажем, вставили код компонента авторизации, убедились в правильности его работы сохраните код в отдельном файле. Вы еще не настолько опытны, чтобы разобраться в допущенной ошибке, а в большинстве случаев бывает проще начать работу заново с последнего успешного шага.
Резюме
Вы познакомились с интерфейсом программы 1С-Битрикс: Управление сайтом и, как мы надеемся, в полной мере освоили базовые понятия и основные операции в этой CMS. Теперь можно переходить к непосредственной работе над созданием сайта.
И начнем мы эту работу с интеграции дизайна, то есть с создания шаблона сайта.
Глава 4КАК ВСТАВИТЬ В САЙТ СВОЙ ДИЗАЙН
Внешний вид сайта это очень важно. Конечно, эта книга предназначена для тех, кто хочет сам попытаться сделать сайт, но в области дизайна мы рекомендуем обратиться к профессионалам.
Хорошо выглядящий сайт это не только художественный вкус, но и опыт как в работе с графическими редакторами, так и в самой компьютерной графике.
Впрочем, и на дизайне можно сэкономить. Если услуги дизайнерских студий вам покажутся дорогими, можно воспользоваться услугами проекта BitrixTemplates (). На сайте представлен каталог шаблонов, который включает в себя более 4900 вариантов дизайна сайтов различной тематики и стиля.
По выбранному шаблону может быть разработан шаблон сайта для 1С-Битрикс: Управление сайтом.
При использовании этого сервиса есть один нюанс: в верстке шаблона будут указаны только компоненты, которые явно присутствуют в выбранном вами дизайне. То есть если в конкретном дизайне не показана форма авторизации, ее не будет и в верстке. По этой же причине не дорабатываются компоненты форм, блогов, фотогалерей.
Они, как правило, не представлены на главных страницах проектов. И это ограничение понятно. Чтобы грамотно сделать шаблон, нужно знать требования к сайту, на котором он будет работать.
Если вы выбрали шаблон, но верстальщик не знает, что будет делаться на внутренних страницах сайта, он и не сможет это учесть. Поэтому совет: перед тем как заказать шаблон, обратитесь в техподдержку BitrixTemplates.
В заказе определите четкие требования, иначе будет непонятно, что требовать от исполнителей.
Если вы все же решитесь создавать дизайн сами, обратитесь за помощью к специальной литературе по веб-дизайну. Также вам придется освоить мастерство нарезки дизайна и работу в программах, которые это делают. Мы же считаем, что у вас есть нарезанный готовый дизайн.
Поэтому и будем рассматривать только процедуру его интеграции.
Прежде чем вы начнете заниматься собственным проектом, советуем потратить пару-тройку вечеров на интеграцию дизайна с диска, приложенного к книге. Весь учебный курс создан на примере создания сайта условной общественной организации Клуб любителей рыбалки.
Для этого сайта используется макет, созданный профессиональным дизайнером Владимиром Кривошлыком (). Текстовые и фотоматериалы для тестового проекта предоставлены Юрием Радугиным, автором проекта .
Возможно, тестовый дизайн вам не понравится или покажется, что он неоптимально нарезан. Все это дело вкуса, а задача этой книги научить неопытного в 1С-Битрикс: Управление сайтом человека создавать сайты.
Поэтому, разобравшись с созданием тестового сайта, методы оптимизации кода и работы ищите сами.
ЗАМЕЧАНИЕ
Все в жизни меняется. А программное обеспечение тем более. Поэтому не удивляйтесь, если в пошаговом описании названия некоторых полей будут не соответствовать тому, что вы увидите на экране монитора своего компьютера. Это замечание сделано после того, как от разработчиков продукта пришло уведомление об очередном улучшении, повлекшее изменения в полях некоторых форм.
Пока книга пишется, все эти изменения будут отслеживаться, но как только рукопись будет сдана в издательство, мы не сможем их вносить. Однако оговоримся, что все эти правки носят косметический, а не принципиальный характер.
Вышесказанное справедливо только для тех, кто использует обновленные версии CMS. Если вы устанавливаете 1С-Битрикс: Управление сайтом с компакт-диска, приложенного к книге, то все поля и весь функционал соответствуют описанию.
ЗАМЕЧАНИЕ
Мы понимаем трудности, которые возникнут перед вами при работе с кодами. Поэтому придумали небольшое подспорье.
В приложениях есть тексты почти всех шаблонов и таблиц css, которые мы будем менять при работе, в двух видах: шаблона до и шаблона после. Но эти тексты будут только в книге, а не на компакт-диске, чтобы не провоцировать читателя на бездумный copy paste. В тексте книги используется специальное упоминание: Образец исходного и конечного кода есть в приложении 3.
Учебные курсы
Эта глава пошаговая инструкция по интеграции определенного дизайна в механизм 1С-Битрикс: Управление сайтом. Она не в состоянии раскрыть все особенности этого довольно сложного процесса. Поэтому рекомендуем вам изучить бесплатные онлайновые курсы на сайте компании 1С-Битрикс:
- Интеграция (BX-DEV001);
- Компоненты 2.0 (BX-DEV002).
Создание сайта
В локальной демо-версии 1С-Битрикс: Управление сайтом есть созданный демо-сайт, однако для нашего проекта мы создадим новый сайт, а не будем модифицировать существующий. Мы уже упоминали о том, что многосайтовость одна из сильных сторон программы, и именно она позволит нам сделать всю работу с нуля, не теряя сайтов, поставляемых по умолчанию.
¦ Перейдите в административный раздел.
¦ Перейдите на страницу Настройки ^ Настройки продукта ^ Сайты. В рабочей области откроется Список сайтов.
¦ Выполните команду Добавить сайт на контекстной панели. В рабочей области откроется форма Добавление сайта (рис.
4.1).
Рис. 4.1. Форма Добавление сайта
В этой форме нам предстоит заполнить довольно много полей.
¦ ID поставьте произвольный двузначный код (только латинскими буквами и цифрами);
¦ Поставьте флажок Активен.
¦ Введите название сайта, которое будет отображаться в административной части. Пусть в нашем случае это будет Matchfishing.
Название сайта необязательно должно быть на латинице, вы можете дать название и на русском языке.
¦ Установите флажок По умолчанию.
¦ В поле Доменное имя введите доменное имя (имена) вашего сайта (если его еще нет, поле можно оставить пустым).
¦ В поле Папка сайта поставьте просто /.
¦ В поле Сортировка можно ввести любое числовое значение. Оно обязательно для заполнения, однако в данном случае расположение элемента (сайта) в таблице элементов значения не имеет: сайтов мало (это поле имеет и другие значения, которыми вы можете пользоваться, если познакомитесь с системой поближе).
¦ В поле Язык оставьте русский язык. Это поле отвечает за то, на каком языке будут выводиться системные сообщения.
¦ В полях Формат даты и Формат даты и времени нужно указать системе, как отображать эти параметры. В частном случае проще всего скопировать с примера, скажем, DD.MM.YYYY.
¦ Выберите кодировку windows-1251, если ваш сайт на русском языке. Если на другом, кодировка должна соответствовать этому языку.
ЗАМЕЧАНИЕ
Иногда для указания кодировки используют упрощенное название win-1251. В нашем случае это недопустимо, так как может вызвать ошибку, связанную с некорректным названием кодировки.
¦ В поле Название сайта введите название, которое будет отображаться для пользователей. Пусть в тестовом примере он называется
Клуб любителей рыбалки.
¦ В поле URL сервера введите адрес сайта (localhost для локальной версии в нашем случае).
¦ В поле E-Mail адрес по умолчанию введите электронный адрес, который будет использоваться по умолчанию, например во всех почтовых шаблонах в качестве адреса отправителя.
¦ Остальные поля оставьте нетронутыми, только в поле Шаблон выберите абсолютно любой из имеющихся. Это поле обязательно для заполнения, но пока наш собственный шаблон не создан, должен быть выбран любой другой.
¦ Сохраните вновь созданный сайт. Форма создания сайта закроется, откроется список имеющихся сайтов, в котором отобразится и наш тестовый сайт.
Проверьте этот список. Ваш сайт должен быть установлен по умолчанию и оставаться единственным активным.
ЗАМЕЧАНИЕ
Если возникла необходимость удалить сайт, надо помнить, что это действие не происходит автоматически. Чтобы это сделать, нужно удалить все инфоблоки и другие объекты системы, связанные с этим сайтом.
Создание шаблона
Создание шаблона не самый сложный шаг в создании сайта, но он требует внимательности.
Форма создания шаблона
¦ Перейдите в раздел Настройки ^ Настройки продукта ^ Сайты ^ Шаблоны сайтов. В рабочей области откроется форма Шаблоны сайтов.
¦ Выполните команду Добавить шаблон на контекстной панели. Откроется форма создания нового шаблона (рис.
4.2).
В этой форме:
¦ В поле ID введите название шаблона. В нашем примере это будет
test.
¦ В поле Название введите название шаблона. Оно может быть и на русском языке, но мы напишем тоже test.
¦ В поле Описание можно вставить комментарий к шаблону. В нашем случае пусть будет Попытка создать дизайн.
Рис. 4.2. Создаем новый шаблон для тестового сайта
Теперь можно переходить непосредственно к самому шаблону. Перед этим сделаем маленькое замечание.
Без установки в шаблоне разделителя #Work_Area# его сохранение невозможно. Поэтому сейчас последует этап работы, который вы не сможете прервать в произвольный момент.
Добавление кода тестового дизайна в шаблон
Задание внешнего вида шаблона происходит в поле Внешний вид шаблона сайта. Шаблон можно редактировать как в режиме визуального редактора, так и в виде тегов HTML. Мы будем работать и с редактором, и с кодами.
Сначала необходимо сделать так, чтобы в шаблоне подключалась административная панель. Для этого:
¦ В поле Внешний вид шаблона сайта введите код:
? $APPLICATION-ShowPanel (); ?
К сожалению, для этого кода не предусмотрена возможность ввода в режиме редактора с помощью кнопки, поэтому придется поработать. Утешение найдите в том, что делается это только один раз.
¦ Поставьте флажок Использовать визуальный редактор и перейдите в режим визуального редактирования (далее мы будем говорить просто: Перейдите в режим визуального редактирования). В этом режиме в известный уже вам редактор добавляется еще одна панель, которая присутствует только в формах редактирования шаблона. Она так и называется: Редактирование шаблона (рис.
4.3).
В ней всего три кнопки, если смотреть слева направо:
- Редактировать служебные части шаблона;
- Вставить разделитель шаблона;
- Предпросмотр шаблона с внесенными изменениями без сохранения изменений.
Первые две кнопки мы применим только один раз, постоянно вы будете пользоваться только самой последней кнопкой с рисунком лупы. При щелчке по ней в отдельной вкладке или окне (зависит от версии браузера) откроется шаблон дизайна с внесенными изменениями относительно сохраненного на данный момент варианта. Эта возможность предусмотрена, чтобы вы могли в полном размере и в реальном виде оценить внесенные в шаблон изменения, не прибегая к сохранению отредактированного кода.
Если изменения вас устраивают, их можно сохранить, если нет продолжать работу дальше. Больше к описанию этой кнопки мы возвращаться не будем, пользуйтесь ею сами, когда сочтете нужным.
В режиме визуального редактора вы увидите пустое поле редактора с единственной иконкой |_pApj. Такой иконкой обозначаются куски кода, написанные на PHP. Посмотреть PHP-код можно так:
¦ Активируйте иконку: вокруг иконки появится рамочка.
¦ Щелкните по кнопке Свойства на нижней панели редактора. Появится панель Свойства, в которой и будет отображен код.
В нашем случае это будет код для вывода административной панели.
Этим алгоритмом вы можете пользоваться во всех случаях, когда хотите просмотреть произвольный код, вставляемый в шаблон.
Теперь надо вставить служебные части кода в шаблон дизайна.
¦ Щелкните по кнопке [5- Появится диалог Редактировать служебные области шаблона (рис. 4.4) с пока еще пустыми полями в обеих вкладках.
Рис. 4.4. Вставляем служебные коды
¦ В этом диалоге щелкните по кнопке (5- Появится системный диалог с вопросом: действительно ли мы хотим установить значения по умолчанию для верхней части?
¦ Щелкните по кнопке да. В пустом поле появится добавленный автоматически код верхней части (как на рис.
4.4).
¦ Перейдите на закладку Нижняя часть и повторите два последних действия.
¦ Сохраните внесенные изменения.
В визуальном режиме вы не заметите никаких перемен, так как в нем отображаются только видимые части кода HTML и иконки разных кодов PHP. Чтобы увидеть добавленный только что код, надо либо перейти в режим редактирования исходного кода, либо снять флажок Использовать визуальный редактор.
Мы сделаем второе, тем более что исходные коды дизайна удобнее вставлять именно в режиме текста.
¦ Снимите флажок Использовать визуальный редактор. Откроется форма редактирования в текстовом режиме (далее мы будем говорить: Перейдите в режим текстового редактирования).
Нам нужно вставить разработанный дизайн в создаваемый шаблон. На приложенном диске он находится в папке Х:\Сайт\, где X это буква вашего оптического привода.
ЗАМЕЧАНИЕ
В дальнейшем при упоминании путей мы будем указывать не полные, а относительные пути, опуская упоминание о приводе.
¦ Откройте в браузере файл index.htm из указанной папки. В окне браузера откроется тестовый дизайн (рис.
4.5).
Теперь необходимо перенести HTML-код дизайна в поле Внешний вид шаблона сайта.
¦ В Internet Explorer выполните команду Вид ^ Источник (в Fire-fox Вид ^ Исходный код страницы). В отдельном окне откроется страница с HTML-кодом дизайна.
ЗАМЕЧАНИЕ
В будущем нам еще предстоит открывать исходные коды тестового дизайна. Поэтому далее мы будем использовать фразу Откройте исходные коды тестового дизайна.
А вы будете повторять по этой фразе два последних действия.
¦ Выделите весь код, расположенный между тегами body и /body (без самих тегов), и скопируйте его в буфер.
¦ Вставьте код в поле Внешний вид шаблона сайта перед закрывающим тегом /body.
Осталось только кое-что подправить в получившейся конструкции. В коде body нет заданных дизайнером параметров.
¦ Вставьте в тег body параметры: bgcolor=#ffffff text=#000000 leftmargin=0topmargin=0marginwidth=0marginheight=0. Их можно просто скопировать из исходного кода сайта.
¦ Перейдите в режим визуального редактирования.
Вы увидите картину, представленную на рис. 4.6.
Отображается только текст и границы таблиц. Это происходит, поскольку:
- во-первых, нами еще не добавлены картинки и не изменен путь к ним в коде сайта;
- во-вторых, не заданы стили сайта.
Все это мы сделаем позже, а пока надо сохранить созданный шаблон. До сих пор это было невозможно, так как не был задан разделитель #Work_area#. Об этом разделителе, его функциях и причинах, по которым мы поставим его в определенное место, будет рассказано ниже.
Пока его необходимо установить, чтобы иметь возможность сохранения шаблона.
¦ Поставьте курсор в строку навигации перед меткой, расположенной впереди названия статьи О прикорме.
¦ Щелкните по кнопке [шй]. На месте курсора появится значок WORK AREA
¦ Сохраните шаблон.
Теперь вы можете по мере необходимости приостанавливать работу
и возобновлять ее.
ЗАМЕЧАНИЕ
Советуем просмотреть код шаблона в текстовом режиме с помощью кнопки [т]. Разделитель #Work area# должен стоять строго перед меткой !-- #Begin_Article --.
Если он попал не в это место, перенесите его.
ЗАМЕЧАНИЕ
В визуальном редакторе видны метки в виде !- Не беспокойтесь по поводу внешнего вида самого сайта. В нем эти метки не будут видны. Визуальный редактор предназначен для работы над сайтом, поэтому в нем отображается вся информация, в том числе и та, которая не будет видна при просмотре самого проекта. Кроме визуального редактора, вы можете заметить искажение дизайна и в режиме Разработка.
Это также не страшно, так как данный режим тоже предназначен только для создания сайта, а не его просмотра. Окончательный вид сайта после изменений надо проверять либо в режиме Просмотр, либо по кнопке Предпросмотр при редактировании шаблона сайта.
Назначение шаблона для сайта
Теперь, когда шаблон сохранен, его нужно назначить для тестового сайта, ведь пока там работает старый шаблон из демо-версии.
¦ Перейдите на страницу Настройки ^ Настройки продукта ^ Сайты. В рабочей области откроется Список сайтов.
ЗАМЕЧАНИЕ
Сейчас мы приведем пример работы с контекстным меню, которое вы тоже можете использовать в формах отчета.
¦ Щелкните правой кнопкой по строке с тестовым сайтом. Появится контекстное меню, в котором нужно выбрать опцию Изменить (рис.
4.7).
Рис. 4.7. Открытие формы редактирования сайта с помощью контекстного меню
Откроется форма редактирования сайта. В самом низу этой формы есть группа Шаблон.
В этой группе пока заполнена только одна строка. В конце главы мы научимся создавать дополнительные шаблоны, а в следующих главах применять эти шаблоны для разных страниц. Такое применение будет производиться с помощью именно этой группы полей.
Но пока мы только назначим вновь созданный шаблон для нашего сайта.
¦ В первой строке колонки Шаблон вызовите раскрывающееся меню.
¦ В этом меню выберите только что созданный шаблон test.
¦ Сохраните внесенные изменения.
Итак, мы назначили новый шаблон для нового сайта.
Добавление графики и стилей
Чтобы сайт стал цветным, надо добавить картинки. Теоретически картинки можно хранить в любой папке системы.
