Эту статью я хочу посвятить оформлению каких либо блоков на любом сайте. Все сайты, в основном состоят из набора готовых блоков, которые разложены на рабочей поверхности страницы. И не важно формирует ли их движок или ты втыкаешь их ручками, разницы нету абсолютно никакой. Чтобы в дальнейшем твой сайт можно было быстро изменить или переиначить, или даже просто что то добавить, советую тебе соблюдать простейшие правила. Придумай для себя конструкцию блока. Я сейчас для примера беру простейшую конструкцию самого что ни на есть типового блока. Пусть это будет маленький рекламный блок.
Вот что мы будем делать:
Для придания единого стиля всем блокам твоего сайта предлагаю воспользоваться контейнером <div>
Теперь определимся со структурой : у нас есть блок в котором находится заголовок и само тело блока, то есть текст картинки и всякая прочая гадость. И в итоге у нас получается такая структура:
<div id="block"> <!--открываем контейнер блока-->
<div class="titles"></div> <!--контейнер с заголовком-->
<div class="bodyblock"></div> <!--контейнер с телом блока-->
</div> <!-- закрывем контейнер блока -->
Исходя из этой схемы строим блок.
<div id="block">
<div class="titles">Рекламный блок</div>
<div class="bodyblock"><p>Высокой точностью изготовления оцилиндрованного калиброванного бревна можно избежать характерного для обычного бревна чередования в обязательной последовательности комель к вершине и их кропотливой подгонки друг к другу. Благодаря высокому качеству обработки поверхностей и одинаковому диаметру, бревенчатые дома не требуют отделки.</p><p align="center"><img src="probka.jpg" width="78" height="80" /></p>
</div>
</div>
Смотрим что у нас получилось :
Рекламный блок
Высокой точностью изготовления оцилиндрованного калиброванного бревна можно избежать характерного для обычного бревна чередования в обязательной последовательности комель к вершине и их кропотливой подгонки друг к другу. Благодаря высокому качеству обработки поверхностей и одинаковому диаметру, бревенчатые дома не требуют отделки.
*-*-*-*-*-*
Дальше нам потребуется CSS. Подключаем его отдельным файлом или пишем прямо в теле кода, думаю в этом проблем не будет ))) На всякий случай дам ссылку как подключить CSS к документу.
В первую очередь обработаем сам блок, окантуем наш блок рамкой, делается это с помощью команды border, и зададим размеры блока командами width и height
/*создаем класс */
#block
{
border:solid 1px #000; /*сплошной бордюр толщиной в 1 пиксел черного цвета*/
width:250px; /*Ширина контейнера 250 пикселов*/
height:400px;/*Высота контейнера 400 пикселов*/
}
Смотрим что у нас получилось :
Высокой точностью изготовления оцилиндрованного калиброванного бревна можно избежать характерного для обычного бревна чередования в обязательной последовательности комель к вершине и их кропотливой подгонки друг к другу. Благодаря высокому качеству обработки поверхностей и одинаковому диаметру, бревенчатые дома не требуют отделки.
*-*-*-*-*-*
Теперь нам нужно привести в порядок заголовок блока, нам нужно закрасить его в синий цвет, сделать отступы в 1 пиксел, сделать рамку более светлого цвета, окрасить буквы в жёлтый цвет, поменять размер шрифта и добавить птичку. Для этого пишем ещё один кусок кода.
.titles
{
color:#FFFF00; /* ставим желтый цвет шрифта*/
background:url(galka.png) no-repeat #3333CC; /* подложка контейнера синего цвета с рисунком из корня сайта без повтора*/
margin:2px; /* отступы вокруг контейнера 2 пиксела по кругу*/
border:solid 1px #0099FF; /* рамка вокруг контейнера сплошная толщиной 1 пиксел голубого цвета*/
font-size:18px; /* размер шрифта 18 пикселов*/
font-weight:bold; /*шрифт жирный*/
height:35px; /*высота контейнера 35 пикселов*/
}
.titles p
{
padding-left:27px; /* отступ заголовка слева 27 пиксел*/
line-height:0px; /*высота линии текста 0 пикселов*/
}
Смотрим что у нас получилось :
Высокой точностью изготовления оцилиндрованного калиброванного бревна можно избежать характерного для обычного бревна чередования в обязательной последовательности комель к вершине и их кропотливой подгонки друг к другу. Благодаря высокому качеству обработки поверхностей и одинаковому диаметру, бревенчатые дома не требуют отделки.
*-*-*-*-*-*
Ну вот впринципе и все, осталось только привести в порядок текст блока, думаю надо сделать поменьше шрифт и добавить отступы по бокам пикселей этак по пять с каждой стороны. Для этого добавляем ещё один кусок кода.
.bodyblock
{
padding-left:5px;
padding-right:5px;
font-size:9px;
color:#333333;
}
Не забываем, что уменьшив шрифт, мы так же уменьшаем высоту блока поэтому не забудьте поменять высоту, хотя на практике обычно высота модуля не указывается, если у вас блок одинаковый для всех элементов сайта, в этом случае лучше добавить нижний отступ margin-bottom:15px; для класса #block
Смотрим что у нас получилось :
Высокой точностью изготовления оцилиндрованного калиброванного бревна можно избежать характерного для обычного бревна чередования в обязательной последовательности комель к вершине и их кропотливой подгонки друг к другу. Благодаря высокому качеству обработки поверхностей и одинаковому диаметру, бревенчатые дома не требуют отделки.
*-*-*-*-*-*
Теперь смотрите что может получиться если убрать ширину и высоту у блоков но разложить их в какую то жёсткую сетку, шаблон сайта или ещё в какую херню. Я использую для этого обычную таблицу.... Напоминаю в CSS убираем высоту и ширину блока и добавляем нижний отступ, писать код не буду думаю сами допетрите ))) Учитывая подробный вышеидущий текст ))))
Вот такой примерчик:
|
Ширина столбика 250рх
|
Ширина столбика 350рх
|
Ширина 100рх
|
Высокой точностью изготовления оцилиндрованного калиброванного бревна можно избежать характерного для обычного бревна чередования в обязательной последовательности комель к вершине и их кропотливой подгонки друг к другу. Благодаря высокому качеству обработки поверхностей и одинаковому диаметру, бревенчатые дома не требуют отделки.
Высокой точностью изготовления оцилиндрованного калиброванного бревна можно избежать характерного для обычного бревна чередования
|
Высокой точностью изготовления оцилиндрованного калиброванного бревна можно избежать характерного для обычного бревна чередованияВысокой
Высокой точностью изготовления оцилиндрованного калиброванного бревна можно избежать характерного для обычного бревна чередованияВысокой
|
текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст
|
А теперь поговорим про модули InstntCMSони абсолютно ничем не отличаются от того, что мы сейчас сделали ручками, разница только в том, что контентом их наполнять не надо, всё делает движок. Всё правим в таблице стилей. Файл который находится в папке с твоим шаблоном по пути templates/шаблон/css/styles.css
Ищем там такую запись :
#left .module, #right .module {
border: 1px solid #9DB0BC;
padding: 0px;
margin-bottom:2px;
}
#left .moduletitles, #right .moduletitles{
font-size: 14px;
font-weight:bold;
text-align:center;
margin-bottom: 6px;
background:url(/templates/_default_/images/modtitles.jpg) repeat-x #9DB0BC;
padding: 0px;
height: 34px;
line-height:34px;
border-bottom:solid 1px #9DB0BC;
}
#left .modulebody, #right .modulebody {
padding: 10px;
background-color:#FFFFFF;
}
#center .module{
padding: 10px;
margin-bottom:2px;
}
#center .moduletitles{
font-size:18px;
text-transform:uppercase;
border-bottom:solid 1px #7192A6;
color:#7192A6;
}
#center .modulebody {
padding: 10px;
background-color:#FFFFFF;
}
Вот так выглядят наши модули в instantcms обрати внимание на идентификаторы #left, #right, #center . Если на сайте левые, правые и центральные модули отличаться не будут визуально, тогда достаточно сделать один комплект этих записей. Кстати...
На всякий случай расскажу как расставить позиции в шаблоне instantcms
Позиция модуля в шаблоне выглядит так :
<div id="здесь как раз вставляем тот самый идентификатор"><?php cmsModule("left"); ?></div>
Ну вот вроде и все по поводу модулей в инстанте и вообще всяческих блоков на сайте. Надеюсь кому то это поможет, а такие найдутся обязательно. Все эмоции и пожелания высказываем в комментах ))))
