Адаптация HTML шаблона (шапка сайта)
Следующим шагом будет адаптация кода шапки сайта. Для удобства редактирования выполним её в виде виджета.
Шапка сайта
Шапка сайта состоит из изображения, заголовка и текста:
<h2>best proposition</h2>
<p><strong>More beautiful templates </strong><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna a turpis ornare aliquam id hendrerit nisl. Pellentesque adipiscing blandit mollis. Curabitur varius est et sem rhoncus et pretium massa molestie. </p>
<div class="clr"></div>
</div>
Виджет шапки сайта
Для редактирования элементов шапки оформим её в виде виджета:
<div class="header_img"><!--{photo}--><img src="{src}" alt="{title}" /><!--{/}-->
<h2>{title}</h2>
{text}
<div class="clr"></div>
</div>
<!--{/}-->
Код начала виджета <!--{widget:header}--> указывает программе, что с этого места начинается код виджета. Чтоб этот код выполнился корректно, в проекте должен быть определен виджет группы header. В шаблоне RedPlanet определен похожий виджет для картинки шапки сайта, используйте его. Закройте редактор шаблона, выделите виджет Шапка и перейдите на вкладку Настройки, в поле Группа напишите header. Теперь этот виджет будет отвечать за шапку сайта нового шаблона.
Картинка начинается с кода <!--{photo}-->, параметры src и title будут относиться к изображению. Если для картинки не задан заголовок, будет использован заголовок родителя, это позволяет автоматически заполнять атрибут alt для изображения. Код <!--{/}--> закрывает код изображения, после него все указанные переменные будут относиться к виджету. Соответственно переменные title и text, которые идут ниже, будут подставлены из виджета. Завершается виджет кодом <!--{/}-->.
Добавьте текст и замените изображение виджета на изображение images/main_img.png кликнув по нему 2 раза и выбрав нужный файл. Теперь выполните просмотр сайта либо нажмите кнопку Обновить в окне предварительного просмотра. Если все сделано правильно, вы увидите шапку сайта с новым заголовком и текстом.
