|
Итак, в этой статье я расскажу вам, как создать дизайн боковых блоков. Прежде всего стоит вспомнить, что за боковой блок (если он один - левый) отвечает Глобальный блок Первый контейнер. Если вы изначально выбрали шаблон, в котором 2 блока, то за правый блок отвечает Второй контейнер.
Так вот, чтобы установить левый боковой блок, сперва открываем Первый контейнер. Лично я использую способ вставки специальных кодов, это просто и удобно, хотя есть одно НО: вы не сможете пользоваться Конструктором для быстрой корректировки боковых блоков, так как после этого дизайн блоков совершенно переворачивается с ног на голову. Все изменения вам придется делать с помощью html и css, хотя, стоит заметить, это нисколько не трудно.
Итак, если вы все-таки решили, что можете обойтись без такой мелочи, как Конструктор, следуйте данной статье.
Условно можно сказать, что существует 2 вида подблоков (подблоками будем называть подразделы боковых блоков, такие как, к примеру, на этом сайте Графика, Полезное и т.д.): подблоки со ссылками на другие страницы и каталоги (Меню) и подблоки с т.н. "объектами" (Статистика, Опрос, Элита и др.).
Таким образом, если вы хотите вставить подблок с Меню, то вам нужно сделать следующее:
1. Вставить в Первый контейнер следующий код:
<div id="menu1" style="width: 140%; margin-top: 100px;">
<ul>
<br><br>
$SMENU_1$
</ul>
</div>
В данном случае $SMENU_1$ является кодом Меню, которое будет в этом подблоке. Сконструировать данное Меню можно в Конструкторе меню в разделе Дизайн.
2. Теперь в Таблицы Css нужно вставить код, который будет как бы "описывать" предыдущий (отвечает за шрифт, цвет, размер, фон и др.):
div#menu1 {
width: 233px; ( ширина подблока)
height: 330px; (высота подблока)
background: url (http://lonelighthouse.ucoz.ru/Winter/grafika.png) (код картинки подблока) no-repeat;
float: center;
font-size: 13px; (размер шрифта)
padding: 100 0 0 20px;
margin: 5px 0;
margin-left: 40px; (отступ вправо)
margin-top: 10px; (отступ вниз)
}
div#menu1 ul {
margin: 0px;
padding: 0px;
}
* html div#menu1 ul {
float: left;
margin-left: 15px;
}
* html div#menu1 a {
display: block;
}
div#menun1 li {
float: left;
list-style-type: none;
background-color: #FFCC99;
}
div#menu1 li:first-child {
}
div#menu1 a {
text-decoration: none;
padding: 0px 10px;
color: #090e15; (цвет шрифта)
}
div#menu1 a:hover {text-decoration:line-through;
color: #090e15; (цвет шрифта)
}
div#menu1 li:hover {text-decoration:line-through;
}
Вам остается лишь создать красочную картинку блока, подобрать параметры, настроить меню, и ваш подблок готов!
Чтобы создать второй такой подблок, замените лишь в кодах menu1 и SMENU_1 цифру 1 на 2!
Если вы хотите создать подблок с "объектом", то:
1. В Первый контейнер вставляем следующий код:
<table class="boxTable" style="background: url(http://lonelighthouse.ucoz.ru/Winter/statistika.png) (картинка подблока) no-repeat;width: 233px (ширина подблока);height: 372px (высота подблока);(margin-left: 40px (отступ вправо);"><tr><th><!-- <bt> --><!--<s5195>--><!--</s>--><!-- </bt> --></th></tr><tr><td class="boxContent" style="margin-left: -500px"><div align="center"><!-- <bc> -->$COUNTER$<?if($ONLINE_COUNTER$)?>$ONLINE_COUNTER$$ONLINE_USERS_LIST$ (код, обозначающий "объект, в данном случае Статистика)<?endif?><!-- </bc> --></div></td></tr></table>
Изменяя код "объекта" (коды "объектов" указаны внизу на ПУ) и параметры подблока, вы сможете добиться желаемого результата!
Примечание: для вставки подблока с Элитой, вставляйте следующий код:
<div id="menu2" style="width: 140%;">
<ul>
<br><br>
Коды баннеров
</ul>
</div>
Вот и все. Будьте оригинальными и не бойтесь трудностей, и результат не заставит себя ждать! Надеюсь, данный урок вам очень помог! Удачи!
| 
