Всем привет. Меня очень огорчает, когда такую удобную систему, как юкоз (система управления сайтом+хостинг в одном флаконе, www.ucoz.ru) считают чем-то ущербным и не для хорошего сайта. В нашем сообществе есть несколько сайтов на юкозе и все они заслуживают уважения.
Так, например, дизайн главной странички моего сайта сделан исключительно при помощи информеров юкоза.
Я считаю, что информеры в юкозе — это отличные помощники для создания неповторимого дизайна. Пользователям все равно, какой системой управляется ваш сайт, и если дизайн будет красивым и удобным — не таким, как стандартные дизайны на юкозе — ваш сайт от этого только выиграет.
Делать тизеры на юкозе легко. Нет, я бы даже сказала, что это очень легко. И порой напоминает игру: «а что будет, если добавить это, а это удалить, а вот это сделать чуть-чуть иначе?»
Как его сделать?
1. Заходим в панель управления — информеры
2. Нажимаем кнопку создать информер
3. Создаем. Наш информер выводит последнюю запись из каталога статей. Так и выбираем: каталог статей, материалы, дата добавления материала D (последняя добавленная статья), кол-во материалов: 1, колонок: 1.
4. При необходимости раскрываем окошко: дополнительные опции и выставляем Список ID категорий или материалов — это нужно, чтобы вывести статьи из разных рубрик. Нажимаем кнопку Создать.
5. Заходим в шаблон информера и меняем стандартный код на следующий:
КОД ТИЗЕРА:
<table style="background: #FF8882;" border="0" width="130" cellspacing="0" cellpadding="0"">
<tbody>
<tr>
<td style="background: #FF8882;" align="left" valign="top" width="130" height="249"><a href="$ENTRY_URL$" target="_blank"><img title="$TITLE$" src="$IMG_URL1$" alt="" width="130" height="150" border="0" /></a>
<a style="text-decoration: none;" href="$ENTRY_URL$"><span style="color: #ffffff; font-family: Verdana; font-size: medium;">$TITLE$</span></a>
<span style="color: #ffffff; font-family: Verdana; font-size: xx-small;">$MESSAGE$</span></td>
</tr>
</tbody>
</table>
Я неДизайнер, я такой же новичок как и вы. А потому мы сейчас вместе разберем этот код по косточкам. Кому не интересно и кто это уже все знает — может дальше не читать. 🙂
Итак, Этот код говорит нам о том, что мы создаем табличку с фоном, цвета FF8882, без границ и отступов. При желании, изменяя цвет фона вы можете сделать другой тизер. С белым фоном, с черным, с голубым — каким захотите.Идем дальше:<a href="$ENTRY_URL$" target="_blank"><img title="$TITLE$" src="$IMG_URL1$" alt="" width="130" height="150" border="0" /></a>
td — это ячейка таблицы, внутри которой будет располагаться фото и подпись к нему, заключающая в себя название и описание статьи. $IMG_URL1$ — это первое фото, которое вы прикрепили при добавлении статьи через кнопку добавить изображение (внизу).
$ENTRY_URL$ — это ссылка на статью. $TITLE$ — название статьи. Т.е. мы делаем ссылку-картинку, которая ведет на статью с подписью, содержащей её название.
Ну, и самое интересное:<a style="text-decoration: none;" href="$ENTRY_URL$"><span style="color: #ffffff; font-family: Verdana; font-size: medium;">$TITLE$</span></a>
<span style="color: #ffffff; font-family: Verdana; font-size: xx-small;">$MESSAGE$</span>
Ниже под фото мы выводим ссылку на статью (коды $ENTRY_URL$ и $TITLE$ вам уже знакомы) и описание статьи. $MESSAGE$ — это переменная, которая выводит краткое описание статьи, которое вы задаете сами при её добавлении. 🙂
Чтобы сделать название и описание статьи понятным для читателей, я использовала тег font, который говорит браузеру, что название нужно вывести более крупным шрифтом (3), а описание более мелким(1). color — как вы уже догадались цвет текста — вы можете его менять по своему усмотрению. Также вы можете задать все эти параметры в css и прописать лишь классы.
Просто, не правда ли?
Давайте вместе сделаем тизер из сайдбара моего нового сайта, вот он:
Принцип тот же самый, только материалов надо выбрать при создании информера 4 и у нас добавляется ещё одна ячейка td, чтобы выводить название статьи не под фото, а справа от него.
КОД ТИЗЕРА:
<table style="background: #FF8882;" border="0" width="310" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td scope="col" align="left" valign="top" width="150"><a href="$ENTRY_URL$" target="_blank"><img src="$IMG_URL1$" alt="" width="130" height="150" border="1px" /></a></td>
<td style="background: #FF8882;" scope="col" align="center" valign="middle" width="160"><a style="text-decoration: none;" href="$ENTRY_URL$" target="_blank"><span style="color: #ffffff; font-size: small;">$TITLE$</span></a></td>
</tr>
</tbody>
</table>
Видите, я сделала 2 ячейки, одна выровнена по левой стороне шириной 150, чтобы вместить в себя картинку размером 130*150, а другую размером 160 с выравниванием по центру, чтобы вместить ссылку на статью.
Код<div style="border-bottom: 0px dotted #000000; clear: both; padding-bottom: 10px; margin-bottom: 10px;"></div>
делает отступы между тизерами.
Ещё раз повторюсь, что я не специалист и потому могу делать что-то не так, возможно, есть другие — более правильные варианты. Знаете их — пишите. 🙂
Если есть какие-то вопросы — задавайте. Будем учиться вместе.
Ваша Verytruth
