Урок №11.Создаем основную страницу "с нуля"

Неофициальное руководство по созданию дизайна для DataLife Engine 5.х-6.3

Обсудить на форуме DLE

Навигация:

Урок номер 11
Создаем основную страницу "с нуля"

перед прочтением этого урока ОЧЕНЬ рекомендую прочитать предыдущие 9

Многих интересует вопрос - а елси нет шаблона котрый можно переделать, как сделать дизайн для DLE с чистого листа? Не имея под рукой ничего на что можно опираться. Ответ и прост и сложен одновременно - нужно как минимум обладать знаниями верствки HTML страниц, основ дизайна и работы с портальными системами. В этом уроке я дам ОСНОВНЫЕ понятия о том как сделать страницу с нуля. Опираться я буду на графику и код модулей которые я написал для предыдущих уроков.

Итак как же нам сделать скин с нуля? С чистого листа.

Я обычно делаю скин в 3 этапа:

1. Самое главное это оформление шаблона main.tpl, именно в нем находится 80% всего оформления сайта. Логотип, блоки, навигация, структура сайта оформляются именно там.

2. Оформление вида краткой и полной новости.

3. Оформление остальных разделов (обычно ипользуются заготовки из предыдщих 2 пунктов с некоторыми модификациями)

Как оформлять краткую новость, полную новость и остальные разделы мы изучили на уроках досконально.

Наша, основная задача, оформить main.tpl - а именно каркас страницы, навигацию, расположение элементов. И вот здесь как раз все очень просто, ибо процесс разработки ничем не отличается от разработки обычной веб-страницы.

итак делаем верх страницы - прописываем пути к css

<html>
<head>

{headers}

<style type="text/css" media="all">
@import url({THEME}/css/style.css);
</style>
<style type="text/css" media="all">
@import url({THEME}/css/engine.css);
</style>

</head>

<body>
{AJAX}

</body>
</html>

Для тех кто совсем ничего не понимает попробую обьяснить, хотя это и чистый хтмл - его азы.

{headers} Выводит сгенерированные метатеги о кодировке страницы, title, keywords, description.

эта чать кода - ссылки на ваши css файлы стилей, прописывается всегда внутри тега заголовка head.

{AJAX} - прописывается сразу после тега BODY - включает поддержку технологии AJAX на старницах сайта.

Сам каркас main.tpl и по сути оформление 80% сайта прописываются внутри тегов <body> </body>, елси вы не знаете зачем эти теги нужны - этот урок читать не нужно) Сначала изучите HTML.

Тепперь главный вопрос - а что прписывать внутри этих тегов? С чего начинается страница. туда нужно прописать 2 таблицы (можно одну, можно 10 - вариация миллионы, все зависит от воображения и нужд). Я рассматриваю ПРОСТЕЙШИЙ и наиболее распространенный вариант - 2 таблицы. Первая таблица -это логотип и баннер, вторая таблица разбита на 2 столбца - левый для блоков, правый для контента.

Я покажу вам визуально, в виде таблиц как это выглядит, затем дам код.

вот что представляет собой main.tpl в простом варианте, не похоже? сейчас я вам это докажу.

Логотип

Баннер

блоки

{speedbar} {info} {content}

итак 2 таблицы,

Первая - слева лого, справа баннер, вторая таблица идет сразу после первой

Вторая - левый столбец таблицы фиксирован 160 пикселей, туда вставляются блоки, правый столбец - туда вставляются теги - {speedbar} {info} {content} - в том столбце будет выведен в будущем - новости, спидбар, рекламный блок и т.д.

Как дальше происходит процесс разработки - правую чать мы не трогаем, там стоят нужные теги, способ и вид вывода редактируется в админке+в шаблонах shortstory fullstory speedbar И т.д. это центральная часть.

Левый столбец - нам надо сделать отдельно блоки, офрмить их и вставить. Вот что получится в прстейшем варианте:

Логотип (рисунок, надпись)

Баннер

блоки

Опрос

{vote}

Календарь

{calendar}

Популярное

{topnews}

Архив

{archives}

Выберите скин

{changeskin}

контент

{speedbar} {info} {content}

Вот схематическое изображение вида main.tpl, 2 таблицы+блоки+теги движка - все.

Код:

<table width="100%" border="1">
<tr>
<td width="50%">Логотип (рисунок, надпись) </td>
<td width="50%">Баннер</td>
</tr>
</table>
<br />
<table width="100%" border="1" align="center" cellpadding="10" cellspacing="5">
<tr>
<td width="190" valign="top" bgcolor="#FAFAFA"><center>
<p>блоки </p>
<table width="99%" border="1">
<tr>
<td> <div align="center">Опрос</div></td>
</tr>
<tr>
<td height="46"><div align="center"><span style="width:190px; padding-left:5px">{vote} </span></div> <div align="center"></div></td>
</tr>
</table>

<br />
<br />
<br />

<table width="99%" border="1">
<tr>
<td><div align="center">Календарь</div></td>
</tr>
<tr>
<td height="46"><div align="center"><span style="width:190px; padding-left:5px">{calendar} </span></div>
<div align="center"></div></td>
</tr>
</table>
<br />
<br />
<table width="99%" border="1">
<tr>
<td><div align="center">Популярное</div></td>
</tr>
<tr>
<td height="46"><div align="center"><span class="news" style="width:190px; padding-left:5px">{topnews} </span></div>
<div align="center"></div></td>
</tr>
</table>
<br />
<br />
<br />
<table width="99%" border="1">
<tr>
<td><div align="center">Архив</div></td>
</tr>
<tr>
<td height="46"><div align="center"><span style="width:190px; padding-left:5px">{archives} </span></div>
<div align="center"></div></td>
</tr>
</table>
<br />
<br />
<br />
<table width="99%" border="1">
<tr>
<td><div align="center"><span class="navigation_box1">Выберите скин</span></div></td>
</tr>
<tr>
<td height="46"><div align="center">{changeskin}</div>
<div align="center"></div></td>
</tr>
</table>
<p>  </p>
</center></td>
<td valign="top" bgcolor="#FAFAFA"> <p>контент</p>
<p>{speedbar}<br /> {info}
{content}<br />
</p></td>
</tr>
</table>

Если сейчас этот код вставить в main.tpl, между тегами body то вы получите простейший примитивный вариант формления вашего портала.

МЫ сделалли свой простейший вариант оформления что дальше? А дальше - все зависит от вашей фантазии и уровня подготовки, во первых надо сделать офрмление блоков - добавить графику в таблицы, прописать в css вид ссылок, шрифт страницы, отступы от краев и т.д. Т.е. самая обычная верстка страницы. когда страница готова - вы начинаете офрмлять вид новостей (исходя из цветов и оформления главной), вывод новостей, PM, info и т.д. Шаблоны этих элементов вынесены в отдельные файлы и их оформление подробно описано на уроках.

Все.

напоминаю я описал простейший вариант, вариаций структуры могут быть тысячи. ради интереса можете взять код таблицы из этого урока и вставить в main.tpl после тега body.

вот скриншот того что получится (у меня часть элементов уже оформлена+прописаны css, поэтому на скрине это выглядит чуть лучше чем будет на самом деле:))