Вторник, 19.03.2024, 11:30 AM
Приветствую Вас Гость | Регистрация | Вход | RSS
Главная » Статьи » Дизайн сайтов на UcoZ

Дизайн сайтов UcoZ

Для тех, кто никогда раньше не имел дела с построением сайтов, все странички выглядят или очень просто или наоборот сложно. Поясню. Без опыта совершенно не отличить статическую страничку от динамической. Или портальную структуру от просто многостраничного сайта. Не будем сейчас углубляться в дебри теории, скажем лишь, что сервис UcoZ использует имитацию портальной структуры с помощью таблиц.

Пользователь сервиса, имея базовые знания в HTML и CSS может совершенно поменять дизайн своих страничек лишь перемещая эти таблички и меняя их параметры. Разные дизайны (10-й, 11-й и т.д.) используют несколько различное размещение таблиц, но принцип остаётся тем же. Ещё одним удобством является то, что многие важные вещи сделаны как переменные ($ПЕРЕМЕННАЯ$), и, вставляя их или убирая можно манипулировать целыми блоками.

Например, баннер сервиса (необходимый атрибут каждой страницы предоставленной сервисом) можно ставить в любое место страницы лишь оперируя переменной $BANNER$.

Или: создав страницу в Редакторе сайтов можно вывести на неё новости простым помещением переменной $LAST_NEWS$.

Разберём шаблон Главной страницы этого дизайна (21-синий).

Цвет фона страницы задаётся строчкой:

<body leftmargin="0" topmargin="0" rightmargin="0" marginheight="0" marginwidth="0" bgcolor="#B8E5FE"

 Дальше идёт пустая табличка. Пока непонятно для чего.

<table border="0" cellpadding="2" cellspacing="0" width="790" align="center"> <tr> <td height="20"></td> </tr> </table>

Следующая табличка, это табличка в которой размещается баннер (или размещался) и логотип сервиса (или уже наш).

<!-- 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 вложена другая табличка с двумя колонками. В одной колонке находится лого, в другой был баннер.

Дальше идёт блок названный Вертикальное меню, хотя на мой взгляд оно как раз таки и горизонтальное. Туда лучше не лазить. Хотя бы по началу.

<!-- 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 -->

Практически вся остальная часть  странички заключена в одну таблицу, которая состоит из двух колонок. В левой располагаются блоки-таблички Меню сайта, Календарь новостей, Друзья сайта, Наш опрос и Счетчик. При условии, что сервисы Новости и Опросы задействованы. Не хочется сюда копировать такой огромный кусок кода, но в теле шаблона эти блоки обозначены примечаниями.

<!-- Site Menu -->

<!-- News Menu --> - видно не всегда.

<!-- News Calendar -->

<!-- Login Form --> - видно не всегда.

<!-- Friends -->

<!-- Poll --> - это опрос.

<!-- Counter -->

Далее идёт основная часть, та, где видны новости.

<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 -->

Переменная Добавить новость оформлена как ссылка, ведь кликнув по надписи мы должны вызвать новую страницу.

И наконец! Последняя табличка завершающая страницу.

<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>

Мной добавлена лишняя строчка с точкой чтобы баннер не прилипал к копирайту.

 

Категория: Дизайн сайтов на UcoZ | Добавил: Isida (17.12.2005)
Просмотров: 7419 | Комментарии: 12 | Рейтинг: 3.7/7
Всего комментариев: 121 2 3 »
0  
12 kagoUnsaskgax   (20.11.2012 2:20 PM) [Материал]
Вау, прикольно

0  
11 vipgod   (10.02.2012 10:25 PM) [Материал]
Отличная статья, мне нравится, досойо.

0  
10 Alex   (30.05.2010 2:54 AM) [Материал]
И соответственно, чтобы добавляемые новости выводились на той странице, где их добавляешь, а не на главной.
Спасибо.

0  
9 Alex   (30.05.2010 1:01 AM) [Материал]
Всем привет! Подсобите советом пожалуйста! При добавлении новых страниц в "Редакторе страниц", как сделать так, чтобы на каждой добавленной странице была надпись "Добавить новость" ?
Заранее спасибо!!

0  
7 jeni   (23.02.2010 12:16 PM) [Материал]
Всем привет, помогите советом, у меня дизайн сайта #894, справа пустая колонка, я создала информер и хочу поместить в эту колонку вниз, это реально? Сайт: cat43.ucoz.ru

0  
8 Admin   (27.02.2010 4:23 PM) [Материал]
Это реально. Непонятно на каком этапе вы сталкиваетесь с проблемой.

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