Стандартные шаблоны Ucoz используют табличную вёрстку. Преимущество таблиц в том, что они жёстко закрепляют элементы дизайна на своих местах и дают уверенность в том, что страница будет выглядеть так как вы задумали в разных броузерах и при разных разрешениях экрана. Естественно при условии, что вы не напутали с таблицами и проставили жёстко все размеры ячеек.
Вот для того, чтобы не напутать и нужен правильный подход.
Сначала немного общих положений. Интернет развивался очень быстро. И за это время сформировался правильный вывод информации на страницах сайтов. Ничего нового сегодня выдумать уже невозможно. Для примера возьмите главные страницы всех крупных поисковиков. Различие только в цветовой гамме, названиях и логотипах. В остальном - они почти похожи друг на друга. Почему так произошло? Ответ - так сформировалось. Время шло, делали анализ, развивались. А к результату пришли одному - правильному выводу информации, которую требует посетитель сайта.
Основные требования для всех сайтов :
- быстрая загрузка
- удобная навигация
- стильный, легкий вид
- простая система управления сайтом
сайт должен работать
И ещё не следует забывать, что главное на сайте – это контент! Именно информация притягивает посетителя, информация которую он ищет! Поэтому вовсе не следует увлекаться дизайном в ущерб содержанию сайта. Дизайн должен стать вспомогательным средством при подаче контента, а не контент необязательным дополнением к вашему потрясающему воображение дизайну. Систематизируя информацию о том, каким должен быть дизайн сайта, можно ответить несколькими пунктами:
Теперь приступим непосредственно к делу. Большую часть проблем снимает тот момент, что администрация Юкоза предоставляет не голое место под сайт, а уже тщательно продуманную и отлаженную группу готовых модулей, которые вам всего лишь нужно оформить в вашу оригинальную упаковку.
Вот, что предлагает нам Юкоз:
| Система управления сайтом.
Уникальная система управления сайтом, позволяющая создать как статический, так и динамический сайт. | |
Форум.
Профессиональный форум, имеющий все необходимые функции современных систем форумов. | | | Дневник (блог).
В своем дневнике вы сможете оставлять любые записи и картинки, а пользователи смогут оставить свои комментарии. | | Фотоальбомы.
Фотоальбомы с возможностью комментирования фотографий и создания приватных альбомов. | | | Гостевая книга.
Гостевая книга нового поколения; теперь управлять сообщениями можно непосредственно со страниц своей гостевой книги. | | Каталог статей.
Если вы пишите статьи, то данный сервис поможет вам классифицировать и разместить их в Интернете. | | | Новости сайта.
Максимально удобная система для ведения новостной ленты на вашем сайте. | | Статистика сайта.
Детальные отчеты о посещаемости, красивые счетчики, которые станут украшением вашего сайта. | | | Опросы.
Создайте свои опросы и голосования, для того, чтобы узнать, что интересует посетителей вашего сайта. | | Почтовые формы.
Теперь у вас есть возможность создавать любые e-mail формы для связи с посетителями вашего сайта. |
Нам остаётся только оформить содержимое этих сервисов в соответствии с нашим вкусом.
В последнее время большой популярностью пользуется портальная структура страниц. В общем случае она выглядит следующим образом:
- Верхняя часть страницы. Здесь удобно разместить логотип и рекламный баннер и кое-какую информацию по навигации.
- Область размещения блоков-менюшек.
- Область размещения основного контента.
- Область размещения блоков-менюшек.
Нижняя часть страницы. Здесь можно расположить копирайт Юкоза, свой собственный, разнообразную рекламную или справочную информацию.
Данная компоновка является не очень сложной и интуитивно понятной посетителю.Теперь займемся верхней частью нашей страницы. Давайте в левой части расположим рисунок-логотип, отражающий тематику сайта, в верхней части расположим наименование сайта и отведем область для рекламного баннера, в нижней части расположим вертикальное меню и название страницы. Результат будет выглядеть следующим образом:
Логотип | Наименование сайта | Блок
рекламы | Вертикальное меню и название страницы |
Код таблицы следующий (размеры естественно другие, эти продиктованы ограниченными размерами области для текста статьи).
<table width="473" border="2" cellspacing="0" cellpadding="0">
<tr>
<td width="131" rowspan="2"><div align="center">Логотип </div></td>
<td width="231"><div align="center">Наименование сайта </div></td>
<td width="111"><p align="center">Блок рекламы </p> </td>
</tr>
<tr>
<td colspan="2"><div align="center">Вертикальное меню и название страницы </div></td>
</tr>
</table>
Стандартные шаблоны Юкоза в средней своей части имеют всего две колонки, а не три (кроме 12 дизайна). Все блоки-менюшки располагаются в левой колонке одна над другой. Мне лично больше нравится двухколоночная структура - больше места остаётся под информацию. Но вам может больше по душе оказаться трёхколоночное расположение. Что ж - это дело вкуса. Разница небольшая, если мы разработаем стандартный блок-менюшку. Тогда оформление средней части страницы будет заключаться в размещении слева и справа нужного количества блоков-менюшек, а посередине кода $BODY$. Внешняя таблица при этом будет выглядеть элементарно:
<table width="300" border="2" cellspacing="0" cellpadding="0">
<tr>
<td>Блоки-менюшки</td>
<td>$BODY$</td>
</tr>
</table>
Или при трёхколоночном расположении:
Блоки-менюшки | $BODY$ | Блоки-менюшки |
<table width="300" border="2" cellspacing="0" cellpadding="0">
<tr>
<td>Блоки-менюшки </td>
<td> $BODY$ </td>
<td>Блоки-менюшки </td>
</tr>
</table>
Теперь рассмотрим блок-менюшку. Если просто скопировать из шаблона кусок кода относящегося к меню сайта, то мы получим для дизайна 19 следующую картинку:
<!-- Site Menu -->
<table cellspacing="0" cellpadding="0" width="210" align="center" border="2">
<tr><td class="menut0">Название блока </td>
<td background="http://src.ucoz.ru/t/194/shright0.gif"><img height="22" src="http://src.ucoz.ru/t/194/1px.gif" width="1" border="0"></td>
</tr>
<tr><td class="menut" width="100%">код блока</td>
<td background="http://src.ucoz.ru/t/194/shright.gif"><img height="1" src="http://src.ucoz.ru/t/194/1px.gif" width="8" border="0"></td>
</tr>
<tr><td background="http://src.ucoz.ru/t/194/shbottomm.gif" colspan="2"><img height="8" src="http://src.ucoz.ru/t/194/1px.gif" width="1" border="0"></td>
</tr></table>
<!-- /Site Menu -->
Варианты оформления могут выглядеть совершенно по разному. Например так:
| Разделы новостей | | | код блока | | | | |
Или так:
| |
код блока | | |
|