Адаптация HTML шаблона (футер)
Теперь перейдем к завершающей стадии работы над шаблоном сайта. Создадим виджеты для футера.
Исходный код футера в шаблоне
Исходный html код футера в шаблоне выглядит так:
<div class="fbg_resize">
<div class="col c1">
<h2><span>Image Gallery</span></h2>
<a href="#"><img src="images/gallery_1.jpg" width="58" height="58" alt="pix" /></a> <a href="#"><img src="images/gallery_2.jpg" width="58" height="58" alt="pix" /></a> <a href="#"><img src="images/gallery_3.jpg" width="58" height="58" alt="pix" /></a> <a href="#"><img src="images/gallery_4.jpg" width="58" height="58" alt="pix" /></a> <a href="#"><img src="images/gallery_5.jpg" width="58" height="58" alt="pix" /></a> <a href="#"><img src="images/gallery_6.jpg" width="58" height="58" alt="pix" /></a> </div>
<div class="col c2">
<h2><span>Lorem Ipsum</span></h2>
<p>Lorem ipsum dolor<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. <a href="#">Morbi tincidunt, orci ac convallis aliquam</a>, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam.</p>
</div>
<div class="col c3">
<h2><span>Contact</span></h2>
<p>Nullam quam lorem, tristique non vestibulum nec, consectetur in risus. Aliquam a quam vel leo gravida gravida eu porttitor dui. Nulla pharetra, mauris vitae interdum dignissim, justo nunc suscipit ipsum. <a href="#">mail@example.com</a><br />
<a href="#">+1 (123) 444-5677</a></p>
</div>
<div class="clr"></div>
</div>
<div class="footer">
<p class="lr">© Copyright <a href="#">MyWebSite</a>.</p>
<p class="lf">Layout by Cool <a href="http://www.coolwebtemplates.net/">Website Templates</a></p>
<div class="clr"></div>
</div>
</div>
В футере определены 3 блока и информация об авторстве сайта и шаблона.
Три блока футера
Для начала работы над кодом зададим 3 виджета в структуре сайта для соответствующих блоков футера. Для этого выделим основной элемент сайта в дереве проекта и выполним пункт меню Добавить/Виджет. Опустим элемент виджета вниз проекта, чтоб он не мешал основным элементам сайта, клавишами Ctrl+Down, либо используя пункты контекстного меню. Затем добавим еще 2 виджета через команду контекстного меню Дублировать (Ctrl+Ins), щелкнув правой кнопкой мыши на элементе добавленного виджета.
Позиционирование виджетов
Мы создали 3 элемента для блоков футера в которых укажем информацию для размещения. Для определения какой блок относится к какому положению в футере мы должны распределить их по группам. Для этого на вкладке Настройки виджетов в поле Группа укажем соответственно: footer1, footer2 и footer3. А затем к виджету группы footer1 добавим 6 изображений из исходного шаблона через команду Добавить фото..., а к остальным соотвествующий текст.
Код шаблона футера
Вернемся в редактор шаблона через меню Сайт/Шаблон и заменим код футера на следующий:
<div class="fbg_resize">
<!--{widget:footer1}-->
<div class="col c1">
<h2><span>{title}</span></h2>
<!--{photos}-->
<a href="{url}"><img src="{thumb(58)}" width="58" height="58" alt="{title}" /></a>
<!--{/}-->
</div>
<!--{/}-->
<!--{widget:footer2}-->
<div class="col c2">
<h2><span>{title}</span></h2>
{text}
</div>
<!--{/}-->
<!--{widget:footer3}-->
<div class="col c3">
<h2><span>{title}</span></h2>
{text}
</div>
<!--{/}-->
<div class="clr"></div>
</div>
<div class="footer">
<p class="lr">© Copyright <a href="{site.url}">{site.name}</a>.</p>
<p class="lf">Layout by Cool <a href="http://www.coolwebtemplates.net/">Website Templates</a></p>
<div class="clr"></div>
</div>
</div>
В данном коде задаем 3 блока в футере, в первом выводим коллекцию подключенных изображений, второй и третий просто текст. Если нужно изменить вывод в блоках, можно добавить соотвествующий код в соотвествующий блок, добавить текст или вывод изображений по аналогии. И в самом низу мы выводим информацию о сайте. При желании можно добавить еще один виджет в проект и задать там текст для дополнительного вывода в шаблоне.
На мой взгляд, данный шаблон еще можно доработать в плане стилевого оформления, для этого достаточно поправить css файл в шаблоне. Вы можете загрузить готовый шаблон в разделе: Шаблоны сайтов.
