Онлайн всего: 1
Гостей: 1
Пользователей: 0































Уроки фотошопа

Главная » Статьи » Уроки сайтостроения

Урок №2: боковые блоки

Итак, в этой статье я расскажу вам, как создать дизайн боковых блоков. Прежде всего стоит вспомнить, что за боковой блок (если он один - левый) отвечает Глобальный блок Первый контейнер. Если вы изначально выбрали шаблон, в котором 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>

Вот и все. Будьте оригинальными и не бойтесь трудностей, и результат не заставит себя ждать! Надеюсь, данный урок вам очень помог! Удачи!

Категория: Уроки сайтостроения | Добавил: Shephard (06.04.2014) | Автор: Shephard W
Просмотров: 679 | Комментарии: 2 | Рейтинг: 5.0/1
Всего комментариев: 2
0   Спам
2 Spring_Pumpkin   (16.05.2015 23:29)
Спасибо)
Подобным занимаюсь впервые, и с помощью ваших уроков хоть немного, но получается, - все предельно просто описано.
Хотелось бы знать, когда будут следующие уроки по созданию дизайна?

0   Спам
1 Ви_Драгоций   (10.04.2014 16:09)
Спасибо огромное! С:

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]