Центр документации
Карта сайта

Создай визитку сам!


Самоучитель по интеграции дизайна и настройке Amiro.CMS на примере демонстрационной версии пакета Визитка »


Создание макета

В данной главе рассмотрим создание макета страницы.

 

В панели администратора необходимо открыть «Менеджер сайта – Макеты страниц». На рис.2 видно, что нам необходимо организовать верстку таким образом, что бы макет представлял собой связанный набор следующих блоков:

  1. Нижний блок;
  2. Левый блок;
  3. Шапка;
  4. Блок с картинкой;
  5. Информационный блок.

По порядку создадим все необходимые блоки.

 

При верстке необходимо учесть что, сайт должен растягиваться по ширине и высоте на 100%. Это достигается путем вариаций параметров таблицы и ячеек width и height.

 

1. Нижний блок.

На первом этапе создаем основную таблицу, которая содержит две строки. Таблицу растягиваем на 100% по ширине и высоте, задав параметры width=100% и height=100%. В первой строке у нас будет находиться вложенная таблица с блоками - «Левый блок», «Шапка», «Блок с картинкой» и «Информационное поле». Этой строке необходимо задать height=100%. Во второй строке разместим «Нижний блок». Ячейка должна иметь атрибут id = lay_f3. В ячейке, которая имеет данный атрибут, должна вызываться переменная соответствующая id этого блока - ##lay_f3_body##.

В поле «Название блока 3» пишем название «Нижний блок». На рис.3 представлен результат.

 

Получаем:

Html-код

Результат

<table height=100% width=100% height=100% cellpadding=0 cellspacing=0>

<tr><td valign=top height=100%>Вложенная таблица</td> </tr>

<tr><td id=lay_f3>##lay_f3_body##</td></tr>

</table>

Рисунок 3.

 

Далее, в ячейку, в которой у нас должна располагаться вложенная таблица добавляем следующий html-код:

 

<table height=100% width=100% cellpadding=0 cellspacing=0>

<tr><td valign=top id=lay_f2>##lay_f2_body##</td>

<td width=100% valign=top height=100%>Вложенная таблица </td></tr>

</table>

 

Т.е. создаем еще одну таблицу с двумя столбцами. Таблицу растягиваем на 100% по ширине и высоте, задав параметры width=100% и height=100%. В первом столбце размещаем блок «Левый блок». Ячейка должна иметь атрибут id = lay_f2. В ячейке вызывается переменная соответствующая id этого блока - ##lay_f2_body##. Во втором столбце будет вторая вложенная таблица с блоками - «Шапка», «Блок с картинкой» и «Информационное поле». Второму столбцу задаем width=100%.

 

В поле «Название блока 2» пишем название «Левый блок». На рис.4 представлен результат:

Html-код

Результат

<table height=100% width=100% cellpadding=0 cellspacing=0>

<tr><td width=100% valign=top height=100%>

<table height=100% width=100% cellpadding=0 cellspacing=0>

<tr><td valign=top id=lay_f2>##lay_f2_body##</td>

<td width=100% valign=top height=100%>Вложенная таблица 2</td></tr>

</table>

</td></tr>

<tr><td>##lay_f3_body##</td></tr>

</table>

Рисунок 4.

 

Далее, в ячейку, в которой у нас должна располагаться вторая вложенная таблица добавляем следующий html-код:

 

<table height=100% width=100% cellpadding=0 cellspacing=0>

<tr><td valign=top id=lay_f1>##lay_f1_body##</td></tr></tr>

<td width=100% valign=top height=100%>Вложенная таблица 3

</td></tr>

</table>

 

Т.е. создаем еще одну таблицу с двумя строками. Таблицу растягиваем на 100% по ширине и высоте, задав параметры width=100% и height=100%. В первой строке размещаем блок «Шапка». Ячейка должна иметь атрибут id = lay_f1. В ячейке вызывается переменная соответствующая id этого блока - ##lay_f1_body##. Во второй впоследствии будет третья вложенная таблица с блоками - «Блок с картинкой» и «Текст».

 

В поле «Название блока 1» пишем название «Шапка». На рис.5 виден получившийся макет:

 

Html-код

Результат

<table height=100% width=100% cellpadding=0 cellspacing=0>

<tr><td width=100% valign=top height=100%>

<table height=100% width=100% cellpadding=0 cellspacing=0>

<tr><td valign=top id=lay_f2>##lay_f2_body##</td>

<td width=100% valign=top height=100%>

<table height=100% width=100% cellpadding=0 cellspacing=0>

<tr><td valign=top id=lay_f1>##lay_f1_body##</td></tr></tr>

<td width=100% valign=top height=100%>Вложенная таблица 3

</td></tr>

</table>

</td></tr>

</table>

</td> </tr> <tr><td>##lay_f3_body##</td></tr>

</table>

Рисунок 5.

 

Далее, в ячейку, в которой у нас должна располагаться третья вложенная таблица добавляем следующий html-код:

 

<table height=100% width=100% cellpadding=0 cellspacing=0>

<tr><td valign=top id=lay_body width=100%>

##status_messages##

##lay_body_body##</td>

<td valign=top height=100% id=lay_f4>

##lay_f4_body##</td></tr>

</table>

 

Т.е. создаем таблицу с двумя столбцами. Таблицу растягиваем на 100% по ширине и высоте, задав параметры width=100% и height=100%. В первом столбце размещаем блок «Текст» (##lay_ body_body##) и задаем ему width=100%.Во втором размещаем блок «Блок с картинкой».

 

В поле «Название блока 4» пишем название «Блок с картинкой». На рис.6 представлен окончательный вариант макета:

 

Html-код

Результат

<table height=100% width=100% cellpadding=0 cellspacing=0>

<tr><td width=100% valign=top height=100%>

<table height=100% width=100% cellpadding=0 cellspacing=0>

<tr><td valign=top id=lay_f2>##lay_f2_body##</td>

<td width=100% valign=top height=100%>

<table height=100% width=100% cellpadding=0 cellspacing=0>

<tr><td valign=top id=lay_f1>##lay_f1_body##</td></tr></tr>

<td width=100% valign=top height=100%>

<table height=100% width=100% cellpadding=0 cellspacing=0>

<tr><td valign=top id=lay_body width=100%>

##status_messages##

##lay_body_body##</td>

<td valign=top id=lay_f4>

##lay_f4_body##</td></tr>

</table></td></tr></table>

</td></tr>

</table>

</td></tr>

<tr><td>##lay_f3_body##</td></tr>

</table>

Рисунок 6.

 

Где ##status_messages## - блок системных статусных сообщений

##lay_body_body## - основной информационный блок (тело) страницы

 

Итак, все необходимые блоки добавлены и макет готов.

Версия для печати

Установка и настройка Руководство пользователя Интеграция дизайна Разработчикам (API)
 2000 – 2021 © Amiro.CMS Все права защищены.