Всем привет, сегодня я научу вас оформлять главную страницу портала Data Life а также мы вместе сделаем дизайн блоков.

Для начала давайте посмотрим, из чего состоит вообще в целом дизайн портала.

1. Верхушка сайта, там обычно находится логотип+место под баннеры либо форма логина и пароля
2. Собственно контент-часть сайта, обычно это таблица с 2-3 столбцами, сбоку находятся всякие блоки типа Юзеры онлайн, Меню и т.д., в центре обычно идут новости/статьи.
3. Нижняя часть сайта, там могут стоять баннеры, счетчики, копирайты и т.д.

Схематически это можно показать вот так:

Вы добрались до 4го урока, с чем вас и поздравляю. Благодаря первым трем урокам оформление вашего сайта готово уже на 35%, пора довести его до 50%.

1. Оформляем обратную связь(feedback.tpl).

Обратная связь это заголовок+таблица с полями обратной связи, вот как это выглядит:

1. Оформляем добавление новостей (addnews.tpl)

Для начала посмотрим на то, как будет выглядеть эта страница в визуальном редакторе в виде таблиц и тегов

В целом ничего сложного, вверху заголовок, дальше идет привычная нам таблица с полями, тегами и окнами редактора.

Введите заголовок {title} -название вашей статьи
URL статьи {alt-name}- сюда вводите адрес статьи, не обязательно
{category} - выводит список категорий, выбираете в какую категорию помещать новость
{bbcode} - выводит BB коды
[not-wysywyg] и [/not-wysywyg]-выводится текст заключенный в теги если отключен WYSIWYG редактор
{shortarea} -выводит WYSIWYG редактор для добавления краткой новости
{short-story}-короткая новость при редактировании новости
{full-story}- полная новость при редактировании новости
{fullarea} -выводит WYSIWYG редактор для добавления полной новости
{xfields} - выводит дополнительные поля новостей
[sec_code][/sec_code]- выводит текст если было установлено в настройках использование CAPTCHA при добавлении новостей
{sec_code}- код отображения CAPTCHA
{admintag} - вывод дополнительных опций для администратора

Оформляем userinfo.tpl

Шаблон профиля пользователя состоит из 2х частей.

1я часть, это то, что пользователь видит зайдя в свой профиль - имя, дату регистрации, аватар, полное имя, место жительства, группу, последнее посещение и т.д.

2я часть которая становится доступна после нажатия кнопки "Редактировать профиль", после нажатия этой кнопки внизу открывается табличка, в которую пользователь вводит данные

Важной частью кода является строка <div id="options" style="display:none;"> все что идет ДО этой строки, это то что пользователь видит войдя в свой профиль, а все что ПОСЛЕ этой строки пользователь видит нажав кнопку "Редактировать профиль"

Вот скриншот из визуального редактора, где показаны части ДО и ПОСЛЕ нажатия "редактировать профиль"

Очень короткий урок, посвященный шаблону static.tpl, шаблон простенький, выводится текст статической страницы, заголовок, линки на страницы и кнопка распечатать

Открываем static.tpl, удаляем оттуда весь код и вставляем вот такой:

<div class="stat1">{description}</div> 
<div class="short_s">{static}</div>
<br><br>
<div align="right">[print-link]<b>[Распечатать страницу]</b>[/print-link]</div>
<br><br>
<center>{pages}</center>

1. Шаблон карточки пользователя.

В версии DataLife 9.0 добавлен новый шаблон карточки пользователя - profile_popup.tpl. Увидеть его можно нажав на нике любого пользователя, появится всплывающее окно с информацией о пользователе. В этом шаблоне можно использовать практически все теги из профиля пользователя. Сам шаблон я не менял, он мне и так нравится и вполне вписывается в сайт. Вот его код:

 Код profile_popup.tpl

<table width="100%">
    <tr>
        <td width="100" style="padding:4px;">Полное имя:</td>
        <td>{fullname}&nbsp;</td>
        <td rowspan="6" valign="top" align="right"><img src="{foto}" border="0" /></td>
    </tr>
    <tr>
        <td style="padding:4px;">Группа:</td>
        <td>{status}</td>
    </tr>
    <tr>
        <td style="padding:4px;">Дата посещения:</td>
        <td>{lastdate}</td>
    </tr>
    <tr>
        <td style="padding:4px;">Дата регистрации:</td>
        <td>{registration}</td>
    </tr>
    <tr>
        <td style="padding:4px;">Публикаций:</td>
        <td>{news_num} [ {news} ]</td>
    </tr>
    <tr>
        <td style="padding:4px;">Комментариев:</td>
        <td>{comm_num} [ {comments} ]</td>
    </tr>
</table>

Сам код представляет собой  обычную табличку. Теги аналогичны тегам из урока 8 "Оформляем панель информации (профиль) пользователя".

{fullname} - полное имя пользователя
{foto} - аватар
{status} - группа пользователя
{lastdate} - последний заход на сайт
{registration} - дата регистрации
{news_num} [ {news} ] - количество добавленных пользователем новостей и ссылка на все его новости
{comm_num} [ {comments} ] - количество добавленных пользователем комментариев и ссылка на все его комментарии

2. Шаблон для предосмотра новостей (шаблон не является обязательным)

В шаблоны добавлен новый файл шаблона preview.tpl, предназначенный для организации предосмотра новостей и статических страниц. При организации сложных шаблонов со сложной версткой и подключением дополнительных скриптов, не всегда уместно при предосмотре использовать стандартные файлы шаблонов для кратких и полных новостей. Поэтому вы можете организовать предосмотр с использованием специального шаблона. Данный файл является необязательным и если он отсутствует, то будут использованы стандартные файлы шаблонов. Полную документацию по тегам этого шаблона, вы можете увидеть в документации по скрипту.

Я не буду давать полный код, не вижу смысла, вы можете взять код из fullstory.tpl/shortstory.tpl вставить и посмотреть сами, или можете написать облегченные версии шаблонов краткой и полной новости, и вставить в шаблон предосмотра. О тегах внутри этого шаблона:

[short-preview][/short-preview] - между этими тегами вставляется код шаблона краткой новости

[full-preview][/full-preview] - между этими тегами вставляется код шаблона полной новости

[static-preview][/static-preview] - между этими тегами вставляется код шаблона статических страниц