По идее полагалось бы нарисовать рамку,
Затем мы бы разрезали эту рамку на 9 частей,
Как учат умные люди уже проделавшие такой фокус, после разрезания рисунка и обрезания фрагментов мы получили бы 8 изображений:
Вместо 5-го рисунка будет содержимое статьи. Для того, чтобы воспроизвести рамку в броузере построим таблицу 3х3 и по краям поместим рисунки, а в середине текст. Код таблицы будет выглядеть следующим образом:
Code
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="13"><img src="1.gif" width="12" height="13"></td>
<td background="2.gif" height="13"><img src="1x1.gif" height=13></td>
<td height="13"><img src="3.gif" width="14" height="13"></td>
</tr>
<tr>
<td background="4.gif" width="12"> </td>
<td align=center>
Содержимое
</td>
<td background="6.gif"> </td>
</tr>
<tr>
<td height="13"><img src="7.gif" width="12" height="13"></td>
<td background="8.gif"><img src="1x1.gif" height="13" width="1"></td>
<td height="13"><img src="9.gif" width="14" height="13"></td>
</tr>
</table>
В таблице параметры border, cellspacing и cellpadding должны быть равны нулю, иначе линии не будут состыковываться между собой.
Уголки вставляем как обычные рисунки с помощью тега IMG, а вот горизонтальные и вертикальные линии следует задавать с помощью фона ячейки таблицы, параметром background. Это позволит сделать нашу рамку масштабируемой и размер ее будет изменяться в зависимости от содержимого.
Чтобы линии плотно прилегали друг к другу и между ними не было пробелов надо обязательно указывать все размеры ячеек и рисунков.
В ячейках, где фоном размещаются горизонтальные и вертикальные линии, необходимо поместить распорку - это либо пробел, либо прозрачный GIF размером 1 на 1 пиксел (в примере файл называется 1x1.gif). Делается это для того, чтобы обмануть Netscape, который не показывает содержимое ячейки, если в ней ничего нет, фон не в счет.
Вот видите какая морока... а хотелось бы что-то попроще... и чтоб не рисовать ничего. Обратите внимание - комментарии в статьях обрамлены как раз такой рамочкой как нам нужно!
Code
<table border="0" width="100%" cellspacing="0" cellpadding="0" class="commTable1">
<tr>
<td class="commTopLeft"><img class="topImg" border="0" src="http://src.ucoz.ru/img/1px.gif" width="1" height="1"></td>
<td width="100%" class="commTopCenter"><img border="0" src="http://src.ucoz.ru/img/1px.gif" width="1" height="1"></td>
<td class="commTopRight"><img class="topImg" border="0" src="http://src.ucoz.ru/img/1px.gif" width="1" height="1"></td>
</tr>
<tr>
<td class="commMiddleLeft"><img class="middleImg" border="0" src="http://src.ucoz.ru/img/1px.gif" width="1" height="1"></td>
<td class="commMiddleCenter">
Сюда то, что должно быть в рамке
Code
</td>
<td class="commMiddleRight"><img class="middleImg" border="0" src="http://src.ucoz.ru/img/1px.gif" width="1" height="1"></td>
</tr>
<tr>
<td class="commBottomLeft"><img class="bottomImg" border="0" src="http://src.ucoz.ru/img/1px.gif" width="1" height="1"></td>
<td class="commBottomCenter"><img border="0" src="http://src.ucoz.ru/img/1px.gif" width="1" height="1"></td>
<td class="commBottomRight"><img class="bottomImg" border="0" src="http://src.ucoz.ru/img/1px.gif" width="1" height="1"></td>
</tr>
</table>
То есть мы получили ту же таблицу 3х3, но уже подогнанную под наш дизайн и с рисунками уже сделанными до нас и стоящими на сервере. Осталось только определить, что ставить в серединку. А в серединку ставим следующее:
Code
<!-- Body -->
<a href="$HOME_PAGE_LINK$"><img title="Главная страница" border="0" src="http://src.ucoz.ru/t/211/home.gif" align="absmiddle" width="17" height="16"></a>
» <a href="$MAIN_PAGE_LINK$">Каталог статей</a>
» <a href="$CAT_LINK$">$CAT_NAME$</a>
<hr>
<div class="entryTitle1" style="margin-top:8px;">$ENTRY_NAME$</div>
$BODY$
Имейте ввиду
Code
http://src.ucoz.ru/t/211/home.gif
это значок главной страницы, он имеет цвет согласованный с вашим дизайном.
211 - где
21 - это номер дизайна,
1 - номер поддизайна. В данном случае синий.
213 будет зелёный и так далее.
| Добавить в закладки | Добавить новость | Регистрация | Вход
