Пишем вид материалов для системы ucoz

Новые сообщения

Страница 1 из 1 1
Модератор форума: chocopie

proucoz

администратор

Сообщений: 1611

Репутация:

off-line Добавлено: 2011-Июл-19 - 21:07 | Сообщение #1

Сегодня я Вам вкратце расскажу, как написать простой, но удобный вид материалов для системы ucoz.

Для начала напишем каркас самого вида материалов. В нашем виде материалов будет строка заголовка, текстовое поле и сразу под ним информация о материале, сколько скачали, просмотры. автор и т д. В итоге у Нас должно получиться вот это:

Учтя все вышеперечисленное я набросал код:

Code

<div  class="bord">

<div class="eTitle" style="text-align: left;"><a href="$ENTRY_URL$">$TITLE$</a></div>
<div class="eMessage" style="text-align: left;  padding: 10px;">

  $MESSAGE$

</div>

    <br>
  <div style="text-align: left; clear: both; padding: 10px;">
     Просмотров: $READS$ | Скачиваний: $LOADS$ | Добавил: <a href="$PROFILE_URL$">$USERNAME$</a>
     </div>
     </div>
     <br>

Теперь по порядку:

Code

Это отвечает за нашу рамочку вокруг вида материалов и внутренний цвет вида материалов - в нашем случае белый. Этот класс закрывается в самом конце вида метериалов, так как он должен делать рамку на весь вид материалов.

Code

<div class="eTitle" style="text-align: left;"><a href="$ENTRY_URL$">$TITLE$</a></div>

Эта строка отвечает за вывод названия материала и на ее заднем фоне будет голубая полоса, которую мы зададим в стилях.

Code

<div class="eMessage" style="text-align: left; padding: 10px;">

$MESSAGE$

</div>

Эти строки отвечают за вывод самого текста материала, с помощью стилей CSS мы его выровняли слева и сделали отступы от краев.

Code

<br>
  <div style="text-align: left; clear: both; padding: 10px;">
     Просмотров: $READS$ | Скачиваний: $LOADS$ | Добавил: <a href="$PROFILE_URL$">$USERNAME$</a>
     </div>

Эти строки отвечают за информацию о материале, тут ничего сложного, обычный HTML. Как и текст самого материала с помощью стилей CSS мы его выровняли слева и сделали отступы от краев.

Теперь набросаем CSS файл:

Code

/* Entries Style */
.eTitle {font-family:Verdana,Arial,Sans-Serif;font-size:12px;font-weight:bold;color:#FFFFFF; padding: 5px; border:1px solid #CCCCCC; background:url('http://preview-uc.ucoz.ru/11.png') ;}
.eTitle a:link {text-decoration:none; color:#FFFFFF;}
.eTitle a:visited {text-decoration:none; color:#FFFFFF;}
.eTitle a:hover {text-decoration:none; color:#CCCCCC;}
.eTitle a:active {text-decoration:none; color:#FFFFFF;}
.eText {text-align:justify; padding:10px;}
/* --------------- */
.bord {background:#fff; border:1px solid #CCCCCC}

eTitle отвечает за нашу голубую полоску, за размер шрифта заголовка, за сам шрифт, обводит его рамочкой и выделяет жирным. Последующие 4 класса связаны с ссылками, то есть вид ссылки при наведении, после нажатия, во время нажатия и до наведения и нажатия.

bord отвечает за цвет внутри самого вида материалов - белый, а также обводит вид материалов рамкой.

Прикрепления: 2875059.png (1.9 Kb)

Хочешь в команду сайта? Пиши! Контакты в профиле.

профиль цитировать

zhenikdst