Облачный сервис для Joomla сайтов
Навигация: Главная Обзоры Об этом стоит знать Основные методы и теги при создании HTML шаблона меню для Joomla и других CMS


Основные методы и теги при создании HTML шаблона меню для Joomla и других CMS

31.12.2017

Конечно, можно сказать, что верстка – вещь универсальная, но с другой стороны, верстая HTML страницы не задумываясь о том, на какую систему управления контентом (CMS) будет установлен сайт, вы можете изрядно усложнить этап интеграции.

Да, возможно вы только верстальщик и вас не интересует дальнейшая судьба проекта. Возможно, не вам придется тратить дополнительно часы или дни на изменение вашей верстки, делая ее более приспособленной для той же Joomla или Wordpress. Но подумайте вот о чем, если возникнет задержка на этапе интеграции и заказчик спросит: «в чем проблема?», интегратор, весьма вероятно укажет, что он тут ни при чем и виной всему «ужасная» верстка. Неискушённый заказчик, конечно же, поверит этому, и новый заказ от этого клиента вы уже не получите.

Поэтому вот вам совет: думайте не только о своих интересах, а и об интересах клиента, ведь это принесет вам пользу в будущем в виде новых заказов и соответственно и прибыли.

Перед тем как приступать к верстке, вам, конечно же, нужно изучить основные элементы HTML, называемые тегами. Вы можете посмотреть все HTML теги в списке справочника по веб разработке. Не стоит пренебрегать этим этапом, ведь чем больше элементов вы изучите – тем шире будут ваши возможности в верстке HTML страниц.

А теперь о том, что следует учитывать для «персонализации» верстки HTML шаблона под систему на примере меню:

Что учесть при верстке меню в HTML страницах

Меню есть на любом качественном сайте. И то одностраничный он или многостраничный не имеет значения, так как навигация может быть как между HTML страницами, так и между блоками при помощи якорной ссылки <a href="#identifier";>.

Популярными для многих CMS являются следующие две схемы использования тегов:

Использование списков <ul> <li>

Первая модель – это создание меню при помощи тега маркированного списка <ul>. Элементы меню при этом обворачиваются тегами <li>. Через CSS свойства у самого списка убираются стили маркеров, элементы li делаются строчно-блочными. Дальше уже формируется нужный по дизайну стиль.

Структура получается такой:

<div class="menu">
<ul>
<li><a href="page1.php">Пункт 1</a></li>
<li><a href="page2.php">Пункт 2</a></li>
<li><a href="page3.php">Пункт 3</a></li>
</ul>
</div>

Использование Блоков <div> и ссылок <a>

Второй вариант заключается в использовании для обвертки блоков <div> либо самих ссылок <a> без обвертки (для одноуровневого меню).

Структура такая:

<div class="menu">
<div><a href="page1.php">Пункт 1</a></div>
<div><a href="page2.php">Пункт 2</a></div>
<div><a href="page3.php">Пункт 3</a></div>
</div>

Скорее всего, вам подойдут оба эти варианта, но все-таки чтобы облегчить задачу себе или тому, кто будет интегрировать вашу верстку на CMS, посмотрите каким образом сделано меню в стандартных шаблонах и попробуйте сделать макет таким же методом, либо с его учетом.

 
Баннер
Баннер