Центр документации
|
Самоучитель по интеграции дизайна и настройке Amiro.CMS на примере демонстрационной версии пакета Визитка »
В данной главе рассмотрим создание макета страницы.
В панели администратора необходимо открыть «Менеджер сайта – Макеты страниц». На рис.2 видно, что нам необходимо организовать верстку таким образом, что бы макет представлял собой связанный набор следующих блоков:
По порядку создадим все необходимые блоки.
При верстке необходимо учесть что, сайт должен растягиваться по ширине и высоте на 100%. Это достигается путем вариаций параметров таблицы и ячеек width и height.
1. Нижний блок. На первом этапе создаем основную таблицу, которая содержит две строки. Таблицу растягиваем на 100% по ширине и высоте, задав параметры width=100% и height=100%. В первой строке у нас будет находиться вложенная таблица с блоками - «Левый блок», «Шапка», «Блок с картинкой» и «Информационное поле». Этой строке необходимо задать height=100%. Во второй строке разместим «Нижний блок». Ячейка должна иметь атрибут id = lay_f3. В ячейке, которая имеет данный атрибут, должна вызываться переменная соответствующая id этого блока - ##lay_f3_body##. В поле «Название блока 3» пишем название «Нижний блок». На рис.3 представлен результат.
Получаем:
Далее, в ячейку, в которой у нас должна располагаться вложенная таблица добавляем следующий html-код:
Т.е. создаем еще одну таблицу с двумя столбцами. Таблицу растягиваем на 100% по ширине и высоте, задав параметры width=100% и height=100%. В первом столбце размещаем блок «Левый блок». Ячейка должна иметь атрибут id = lay_f2. В ячейке вызывается переменная соответствующая id этого блока - ##lay_f2_body##. Во втором столбце будет вторая вложенная таблица с блоками - «Шапка», «Блок с картинкой» и «Информационное поле». Второму столбцу задаем width=100%.
В поле «Название блока 2» пишем название «Левый блок». На рис.4 представлен результат:
Далее, в ячейку, в которой у нас должна располагаться вторая вложенная таблица добавляем следующий html-код:
Т.е. создаем еще одну таблицу с двумя строками. Таблицу растягиваем на 100% по ширине и высоте, задав параметры width=100% и height=100%. В первой строке размещаем блок «Шапка». Ячейка должна иметь атрибут id = lay_f1. В ячейке вызывается переменная соответствующая id этого блока - ##lay_f1_body##. Во второй впоследствии будет третья вложенная таблица с блоками - «Блок с картинкой» и «Текст».
В поле «Название блока 1» пишем название «Шапка». На рис.5 виден получившийся макет:
Далее, в ячейку, в которой у нас должна располагаться третья вложенная таблица добавляем следующий html-код:
Т.е. создаем таблицу с двумя столбцами. Таблицу растягиваем на 100% по ширине и высоте, задав параметры width=100% и height=100%. В первом столбце размещаем блок «Текст» (##lay_ body_body##) и задаем ему width=100%.Во втором размещаем блок «Блок с картинкой».
В поле «Название блока 4» пишем название «Блок с картинкой». На рис.6 представлен окончательный вариант макета:
Где ##status_messages## - блок системных статусных сообщений ##lay_body_body## - основной информационный блок (тело) страницы
Итак, все необходимые блоки добавлены и макет готов. |
|||||||||||||||||||