Для тех, кто никогда раньше не имел дела с построением сайтов, все странички выглядят или очень просто или наоборот сложно. Поясню. Без опыта совершенно не отличить статическую страничку от динамической. Или портальную структуру от просто многостраничного сайта. Не будем сейчас углубляться в дебри теории, скажем лишь, что сервис UcoZ использует имитацию портальной структуры с помощью таблиц. Пользователь сервиса, имея базовые знания в HTML и CSS может совершенно поменять дизайн своих страничек лишь перемещая эти таблички и меняя их параметры. Разные дизайны (10-й, 11-й и т.д.) используют несколько различное размещение таблиц, но принцип остаётся тем же. Ещё одним удобством является то, что многие важные вещи сделаны как переменные
и вставляя их или убирая можно манипулировать целыми блоками.
Например, баннер сервиса (необходимый атрибут каждой страницы предоставленной сервисом) можно ставить в любое место страницы лишь оперируя переменной $BANNER$.
Или: создав страницу в Редакторе сайтов можно вывести на неё новости простым помещением переменной
Разберём шаблон Главной страницы этого дизайна (21-синий).
Цвет фона страницы задаётся строчкой:
Code
<body leftmargin="0" topmargin="0" rightmargin="0" marginheight="0" marginwidth="0" bgcolor="#B8E5FE">
Дальше идёт пустая табличка. Пока непонятно для чего.
Code
<table border="0" cellpadding="2" cellspacing="0" width="790" align="center"> <tr> <td height="20"></td> </tr> </table>
Следующая табличка, это табличка в которой размещается баннер (или размещался) и логотип сервиса (или уже наш).
Code
<!-- Logo -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td height="113" bgcolor="#318EB7" background="http://src.ucoz.ru/t/211/bgtop.gif">
<table border="0" cellpadding="0" cellspacing="0" width="790" align="center">
<tr>
<td><img border="0" src="http://abba.ucoz.ru/images/logo1.jpg" width="204" height="113"></a></td>
<td width="90%" align="center">Здесь был баннер!</td>
</table>
</td>
</tr>
</table>
<!-- /Logo -->
Убрав баннер вниз страницы. можно воспользоваться освободившимся местом по своему усмотрению. Здесь в одну табличку с фоновым рисунком background="http://src.ucoz.ru/t/211/bgtop.gif вложена другая табличка с двумя колонками. В одной колонке находится лого, в другой был баннер.
Дальше идёт блок названный Вертикальное меню, хотя на мой взгляд оно как раз таки и горизонтальное. Туда лучше не лазить. Хотя бы по началу.
Code
<!-- Vertical Menu -->
<table border="0" cellpadding="0" cellspacing="0" width="790" align="center">
<tr>
<td height="14"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#318EB7"><img border="0" src="http://src.ucoz.ru/t/211/r1.gif" width="5" height="34"></td>
<td width="70%" bgcolor="#318EB7" background="http://src.ucoz.ru/t/211/r2.gif">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="menuTd"><a href="$HOME_PAGE_LINK$" class="menu1">Начало</a></td>
%NONE%<td class="menuTd"><a class="menu1" href="$REGISTER_LINK$">Регистрация</a></td>%/NONE%
%NONE%<td class="menuTd"><a class="menu1" href="$PERSONAL_PAGE_LINK$">Персональный раздел</a></td>%/NONE%
%NONE%<td class="menuTd"><a class="menu1" href="$LOGIN_LINK$">Вход</a></td>%/NONE%
%NONE%<td class="menuTd"><a class="menu1" href="$LOGOUT_LINK$">Выход</a></td>%/NONE%
</tr>
</table>
</td>
<td width="30%" nowrap="nowrap" bgcolor="#318EB7" background="http://src.ucoz.ru/t/211/r2.gif" align="right"><span class="pageTitle">$PAGE_NAME$</span></td>
<td bgcolor="#318EB7"><img border="0" src="http://src.ucoz.ru/t/211/r3.gif" width="5" height="34"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="14"></td>
</tr>
</table>
<!-- /Vertical Menu -->
Практически вся остальная часть странички заключена в одну таблицу, которая состоит из двух колонок. В левой располагаются блоки-таблички Меню сайта, Календарь новостей, Друзья сайта, Наш опрос и Счетчик. При условии, что сервисы Новости и Опросы задействованы. Не хочется сюда копировать такой огромный кусок кода, но в теле шаблона эти блоки обозначены примечаниями.
- видно не всегда.
Code
<!-- News Calendar -->
- видно не всегда.
- это опрос.
Далее идёт основная часть, та, где видны новости.
Code
<td valign="top" class="mFrame">
<!-- Body -->
Приветствую Вас, <b>$USER_FULL_NAME$</b>.<br>
Текущая дата: <i>$WDAY$, $DATE$, $TIME$</i>
<hr>
%NONE%<div align="right" style="padding-bottom:3px;">[ <a href="$ADD_NEWS_LINK$">Добавить новость</a> ]</div>%/NONE%
$LAST_NEWS$
<!-- /Body -->
Переменная Добавить новость оформлена как ссылка, ведь кликнув по надписи мы должны вызвать новую страницу.
И наконец! Последняя табличка завершающая страницу.
Code
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="24">
<tr><center>$BANNER$</center></tr>
<tr>.</tr>
<tr>
<td width="100%" align="center" bgcolor="#C3E1EF" background="">http://src.ucoz.ru/t/211/bgb.gif"> <center>$POWERED_BY$</center></td>
</tr>
</table>
Мной добавлена лишняя строчка с точкой чтобы баннер не прилипал к копирайту.
| Добавить в закладки | Добавить новость | Регистрация | Вход
