Информация к новости
  • Просмотров: 17867
  • Автор: Алексей
  • Дата: 26-05-2011, 21:08
26-05-2011, 21:08

Оформляем главную страницу, формы логина и блоки.

Категория: Уроки Dle


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

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

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

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


Мы будет делать 1 столбец слева, там будут блоки, один справа большой - статьи и новости. Вверху будет логотип и форма авторизации.

Для урока я взял стандартный шаблон Simple, переделывать мы его не будем, мы будем постепенно удалять из него файлы шаблонов заменяя их на свои, фактически создавать новый шаблон.

В настройках портала в админцентре указываем, что шаблон по умолчанию - Simple. Заходим в папку шаблона templates/Simple - удаляем оттуда файл main.tpl (создаем в блокноте файл с таким же названием и расширением и помещаем его вместо удаленного), заходим в папку templates/Simple/images и удаляем все из нее, туда загружаем все картинки из архива, скачать его можно на сайте в первой новости этого раздела. Заходим в папку templates/Simple/css и удаляем файл style.css, вместо него создаем точно такой же но пустой.

Ну вот, все подготовительные работы сделаны, есть пустой файл main.tpl, наши картинки загружены в папку images и создан пустой файл стилей.

Файл стилей style.css открываем редактором TopStyle.Pro. v 4.0, файл main.tpl - Macromedia Dreamweaver. Можно и стили и main.tpl открывать одним редактором Dreamweaver, кому как удобнее.

В самый верх main.tpl вставляем вот такой код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
{headers}
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<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}


В этом коде мы указываем пути к нашим CSS файлам, ну и по сути это почти стандартный код начала любой html страницы, правда в этом коде есть несколько тегов

{headers} Выводит сгенерированные метатеги о кодировке страницы, title
{AJAX} Подключает все необходимы скрипты для работы DLE и AJAX

Теперь открываем файл CSS и вставляем туда вот такой код:

html, body {
    height: 100%;
  margin-bottom    : 20px;
  padding          : 0px;
    background: #0A0E19 url(../images/sf.jpg) no-repeat center top;
    font-size: 11px;
    font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: #1F2932;
}

a:link {
    color: #900;
    text-decoration: none;
}

a:visited{
        color: #900;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    color: #B35800;
}

p {margin: 0; padding: 0;}

Этим кодом мы указали стили для страницы - отступы, размеры, бэкграунд, тип шрифта и его размер. Указали общий вид ссылок на странице.

Ну вот, начало положено, пока конечно-же вы результата не увидите, при попытке загрузить сайт вы увидите пустую белую страницу или сообщение о ошибке. Пришла пора подключать блоки и контент.

Для начала подготовим блоки.

Что такое блок? Из чего он состоит? Многие задаются этим вопросом, а ответ на него очень прост
1. Заголовок блока - вы можете в заголовок вписать любое слово или фразу
2. Содержимое блока - задается специальным тегом

Теги блоков:
{tags} - Используется для вывода всех ключевых тегов, находящихся в базе данных
{calendar} - используется для вывода календаря
{topnews} - вывод популярных статей
{vote} - опрос
{inform_dle} - выводит RSS с других сайтов, сам тег, его название, задается в админцентре
{archives} - архив новостей
{changeskin} - форма смены шаблона на сайте

Я хочу сделать 3 разных бока, 1 синий для меню, красный и желтый для всего остального (их можно будет чредовать, красный календарь-желтый архив-красный опрос-желтый облако меток)

Выглядеть наши блоки будут вот так:
Желтый
<div id="menutitle1"> Календарь </div>
<div class="menu1">{calendar}</div>

Красный
<div id="menutitle2">Самое популярное</div>
<div class="menu2">{topnews}</div>


<div id="menutitle3"> Навигация </div>
<div class="menu3">
<a href="http://gametactics.ru/news/" onclick="showHiddenForm(0)">Новости</a>
<div id="first_group_div" style="visibility:visible; display:none;">
<a href="http://gametactics.ru/news/mmorpg_news/" class="sublinks">Новости MMORPG</a>
<a href="http://gametactics.ru/news/single_player_news/" class="sublinks">Одиночные игры</a>
<a href="http://gametactics.ru/news/hardware_news/" class="sublinks">Железный цех</a>
</div>
<a href="http://gametactics.ru/guides_world-of-warcraft/" onmouseup="showHiddenForm(1)">Руководства World Of Warcraft</a>
<div id="second_group_div" style="visibility:visible; display:none;">
<a href="http://gametactics.ru/guides_world-of-warcraft/wow_professions/" class="sublinks">Професии</a>
<a href="http://gametactics.ru/guides_world-of-warcraft/wow_classes/" class="sublinks">Классы</a>
<a href="http://gametactics.ru/guides_world-of-warcraft/wow_addons/" class="sublinks">Настройка аддонов</a>
<a href="http://gametactics.ru/guides_world-of-warcraft/wow_gameguides/" class="sublinks">Руководства по игре</a>
</div>
<a href="http://gametactics.ru/guide_runes-of-magic/">Руководства Runes Of Magic</a>
<a href="http://gametactics.ru/guide_atlantica-online/">Руководства Atlantica Online</a>
<a href="http://gametactics.ru/guides_aion/">Руководства Aion</a>
<a href="http://gametactics.ru/game-reviews/">Обзоры игр</a>
<a href="http://gametactics.ru/media/">Видео и скриншоты</a>
<a href="/index.php?do=feedback">Контакты</a>
<a href="/index.php?do=rules">Правила</a>
<a href="/engine/rss.php">RSS 2.0</a>
</div>


В этих блоках - заголовки Календарь, Самое популярное, Навигация. Сюда вписываются любые слова, например вместо Навигация можно вписать НАВИГАЦИЯ ПО САЙТУ, вместо самое популярное ТОП САЙТА, обычный текстовый заголовок.
Во второй строке идут теги, которые выводят содержимое.

Открываем файл style.css и добавляем туда вот такой код (оформление блоков):


#menutitle1  {
    background: url(../images/menu_top_bg_2.png) no-repeat center top;
    height: 47px;
    color: #622B02;
    font: bold 12px/50px Tahoma, Geneva, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    text-align: right;
    display: block;
    padding-right: 15px;
}

.menu1 {
    color: #000;
    background: #F1BD09 url(../images/menu_bg_2.png) repeat-y left top;
    text-align: justify;
    margin-right: 8px;
    margin-bottom: 5px;
    margin-left: 10px;
    border: 2px solid #670506;
    padding: 4px;
    font-size: 11px;
}
.menu1 a {
    color: #990000;
    font-weight: bold;
    text-decoration: none;
}
.menu1 a:hover {
    font-weight: bold;
    color: #F00;
    text-decoration: none;
}

#menutitle2  {
    background: url(../images/menu_top_bg_3.png) no-repeat center top;
    height: 47px;
    color: #EBB907;
    font: bold 12px/50px Tahoma, Geneva, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    text-align: right;
    display: block;
    padding-right: 15px;
}

.menu2 {
    color: #EBB907;
    background: #780C0C url(../images/menu_bg_3.png) no-repeat center top;
    text-align: left;
    margin-right: 7px;
    margin-bottom: 5px;
    margin-left: 10px;
    border: 2px solid #EBB907;
    padding: 4px;
    font-size: 11px;
}
.menu2 a {
    color: #FFF;
    font-weight: bold;
    text-decoration: none;
}
.menu2 a:hover {
    font-weight: bold;
    color: #F00;
    text-decoration: none;
}


#menutitle3  {
    background: url(../images/menu_top_bg.png) no-repeat center top;
    height: 47px;
    color: #4AB1FD;
    font: bold 12px/50px Tahoma, Geneva, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    text-align: right;
    display: block;
    padding-right: 15px;
}

.menu3 {
    font-size: 11px;
    color: #fff;
    background: #026BBC url(../images/menu_bg.png) repeat-y left top;
    text-align: left;
    margin-right: 8px;
    margin-bottom: 5px;
    margin-left: 10px;
    border: 2px solid #4AB1FD;
    text-transform: lowercase;
    }
.menu3 a {
    color: #4AB1FD;
    font-weight: bold;
    text-decoration: none;
    display: block;
    padding-right: 5px;
    padding-left: 18px;
    line-height: 21px;
    border-bottom: 1px dotted #4AB1FD;
    background: url(../images/ic2.gif) no-repeat 4px center;
}
.menu3 a:hover {
    font-weight: bold;
    color: #0C101B;
    background: #026BBC url(../images/ic.gif) no-repeat 187px center;
    text-decoration: none;
    padding-right: 5px;
    padding-left: 18px;
    line-height: 21px;
}


Этот код задает оформление для блоков, шапку, бэкграунд, вид ссылок внутри блока, цвета, шрифты и их размеры.

Вот так будут выглядеть наши блоки:
Оформляем главную страницу, формы логина и блоки.


В принципе большая часть оформления уже сделана.

Находим файл login.tpl, удаляем весь код из него, и вставляем туда вот такой:

<?php
if ($is_logged == TRUE){

$login_panel = <<<HTML
<div align="right" style="line-height:18px; margin-top:12px;">
<img src="{THEME}/images/user2.png" border="0" align="absmiddle" />Привет, {$member_id['name']}![ <a  href="{$link_logout}"><b>Выход</b></a> ]
HTML;


if ($user_group[$member_id['user_group']]['allow_admin']) {
$login_panel .= <<<HTML
[ <a onfocus="this.blur()" href="{$adminlink}" target="_blank"><span>Админцентр</span></a>]<br>
HTML;


}
$login_panel .= <<<HTML
<br /><a onfocus="this.blur()" href="{$link_profile}">• &nbsp;Мой профиль</a>&nbsp; &nbsp;<a onfocus="this.blur()" href="{$link_pm}">• &nbsp;ПС ({$member_id['pm_unread']} | {$member_id['pm_all']})</a>&nbsp; &nbsp;<a onfocus="this.blur()" href="{$link_favorites}">• &nbsp;Мои закладки</a><br />
<a onfocus="this.blur()" href="{$link_addnews}">• &nbsp;Опубликовать новость</a>&nbsp; &nbsp;<a onfocus="this.blur()" href="{$link_stats}">• &nbsp;Статистика</a>&nbsp; &nbsp;<a href="{$link_newposts}">• &nbsp;Непрочитанное</a>
</div>
HTML;

} else {
$login_panel = <<<HTML
<div align="right">
<div align="right" style="padding-right:18px; line-height:21px; margin-top:12px;">
<img src="{THEME}/images/wuser.gif" border="0" align="absmiddle" />Привет, гость!<br />
<a onfocus="this.blur()" href="{$link_lost}" title="Восстановление пароля">• &nbsp;Напомнить пароль?</a>&nbsp; &nbsp;<a onfocus="this.blur()" href="/index.php?do=register" title="Регистрация на сайте">• &nbsp;Регистрация</a></div>
<form method="post" action=''><input name="login" type="hidden" id="login" value="submit" />
<div align="right" style="height:23px;">Логин: <input name="login_name" type="text" class="username_f" title="Введите ваш логин" /> &nbsp; &nbsp; Пароль: <input name="login_password" type="password" class="passwd_f" title="Введите ваш пароль" />&nbsp; &nbsp;<input onclick="submit();" name="image" type="image" src="{THEME}/images/p_loginbutton1.gif" onmouseout="this.src='{THEME}/images/p_loginbutton1.gif'" onmouseover="this.src='{THEME}/images/a_loginbutton1.gif'" width="80" height="20" border="0" align="right" alt="Login" /></div>
</form>
</div>
HTML;
}
?>


Подробно объяснять о login.tpl я не буду, если вы знаете html и css то вы поймете, что там написано, если нет - верьте мне на слово. В этом коде просто переделано отображение форм логина и пунктов меню. Я собираюсь вставить его в самый верх сайта, мне нужно что бы пункты меню логина были ближе друг к другу, формы были чуть короче.

В наш файл style.css вставляем такой код:

.username_f
{
    background: url(../images/user.png) no-repeat left #FFFFFF;
    height: 17px;
    padding-left: 20px;
    border: solid 1px #CCCCCC;
}

.passwd_f
{
    background: url(../images/lock.png) no-repeat left #FFFFFF;
    height: 17px;
    padding-left: 20px;
    border: solid 1px #CCCCCC;
}
.login_z{
border-bottom: 1px dotted #FCC80A;
border-left: 1px dotted #FCC80A;
display: block;
float: right;
padding-right: 15px;
text-align: left;
text-decoration: none;
color: #ffffff;
height: 16px;
width: 130px;
font-size: 11px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
}

#loginform {
    width: 640px;
    text-transform: uppercase;
    color: #4AB1FD;
    font: bold 10px Georgia, "Times New Roman", Times, serif;
    float: right;
    padding-right: 15px;
}
#loginform a {
    text-decoration: none;
    color: #EEBB08;
}
#loginform a:hover {
    text-decoration: none;
    color: #FFF;
}
#loginform span {
    text-decoration: none;
    color: #ff0000;
}
#loginform b {
    text-decoration: none;
    color: #0C0;
}


Это оформление полей логина и пароля, цвета ссылок меню пользователя и т.д.

После этих манипуляций форма логина и меню пользователя будут выглядеть вот так:
Оформляем главную страницу, формы логина и блоки.
Оформляем главную страницу, формы логина и блоки.


Подводя итог - мы сделали оформление блоков сайта, формы логина и меню пользователя, задали в css основные параметры для страницы. Осталось сделать саму страницу.

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

В файле main.tpl после тега {AJAX} вставляем вот такой код:
<table width="90%" border="1" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="333"><a href="http://gametactics.ru"><img src="{THEME}/images/logo_1.png" width="342" height="200" alt="Gametactics.ru" border="0"></a></td>
    <td width="429"><a href="http://gametactics.ru"><img src="{THEME}/images/logo_2.png" width="420" height="200" alt="Gametactics.ru" border="0"/></a></td>
    <td width="100%" valign="top" style="background-image:url({THEME}/images/logo_3.png)">
     <div align="right" id="loginform">{login}</div>
                <br>
       </td>
  </tr>
</table>


Это верхняя таблица, в ней слева будет ваш логтип, а справа форма логина и меню пользователя.

После этого кода вставляем:
<table width="90%" border="0" align="center" cellpadding="2" cellspacing="2" class="all">
  <tr>
    <td  valign="top" align="right"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="bgg">
      <tr>
        <td width="250" height="569" align="center" valign="top" class="t_right">
        <form method="post" ><input type=hidden name=do value=search><input type="hidden" name="subaction" value="search">
<table width="190" border="0">
    <tr>
        <td width="140" valign="top" style="padding-top:10px;padding-left:4px;"><font size="2"><center><b>Поиск на сайте</b></center></font><input name="story"  type="text"  id="story" value="поисковый запрос ..." onfocus="this.value = '';" style="width:140px; height:18px; font-family:tahoma; font-size:11px;border:1px solid #A1B1BE;"></td>
        <td width="32" valign="top" style="padding-top:9px;padding-left:4px;"><br><input type="image" src="{THEME}/images/search.png" border="0" alt="Найти на сайте" align="absmiddle"></td>
            </tr>
</table>
</form>
<div id="menutitle3"> Навигация </div>
<div class="menu3">
<a href="http://gametactics.ru/news/" onclick="showHiddenForm(0)">Новости</a>
<div id="first_group_div" style="visibility:visible; display:none;">
<a href="http://gametactics.ru/news/mmorpg_news/" class="sublinks">Новости MMORPG</a>
<a href="http://gametactics.ru/news/single_player_news/" class="sublinks">Одиночные игры</a>
<a href="http://gametactics.ru/news/hardware_news/" class="sublinks">Железный цех</a>
</div>
<a href="http://gametactics.ru/guides_world-of-warcraft/" onmouseup="showHiddenForm(1)">Руководства World Of Warcraft</a>
<div id="second_group_div" style="visibility:visible; display:none;">
<a href="http://gametactics.ru/guides_world-of-warcraft/wow_professions/" class="sublinks">Професии</a>
<a href="http://gametactics.ru/guides_world-of-warcraft/wow_classes/" class="sublinks">Классы</a>
<a href="http://gametactics.ru/guides_world-of-warcraft/wow_addons/" class="sublinks">Настройка аддонов</a>
<a href="http://gametactics.ru/guides_world-of-warcraft/wow_gameguides/" class="sublinks">Руководства по игре</a>
</div>
<a href="http://gametactics.ru/guide_runes-of-magic/">Руководства Runes Of Magic</a>
<a href="http://gametactics.ru/guide_atlantica-online/">Руководства Atlantica Online</a>
<a href="http://gametactics.ru/guides_aion/">Руководства Aion</a>
<a href="http://gametactics.ru/game-reviews/">Обзоры игр</a>
<a href="http://gametactics.ru/media/">Видео и скриншоты</a>
<a href="/index.php?do=feedback">Контакты</a>
<a href="/index.php?do=rules">Правила</a>
<a href="/engine/rss.php">RSS 2.0</a>
</div>
<div id="menutitle2"> Облако меток </div>
<div class="menu2"><i>{tags}</i></div>
<br>
<div id="menutitle1"> Календарь </div>
<div class="menu1">{calendar}</div>
<br>
<div id="menutitle2">Самое популярное</div>
<div class="menu2">{topnews}</div>
<br>
<div id="menutitle1">Архив</div>
<div class="menu1">{archives}</div><br> {changeskin}
</td>
        <td valign="top" style="padding-right:14px;">
          <div class="sort" align="left">[sort]{sort}<br />[/sort]</div>
          {speedbar}<br>{info}
          {content}

        </td>
        </tr>
    </table>
</td>
  </tr>
</table>
</body>
</html>


Пугаться такого кода не стоит, он простенький. Это таблица, в ней еще одна талица разделенная на 2 столбца, в левом наши блоки, по центру контент (статьи и новости)
В центральной части теги:

{content} Вывод непосредственно самого контекста на сайте, новостей, обратной связи регистрации и прочего, в общем основная колонка.
{speedbar} - выводит местоположение пользователя, по сути навигация. когда пользователь щелкает по новостям, он видит путь по которому прошел.
[sort]{sort}[/sort], отвечают за вывод выбора пользователем порядка сортировки новостей, если это разрешено в настройках скрипта
{info} выводит служебную информацию и ошибках о произведенных действиях (например "Вход не выполнен, неверный пароль" или "Необходимо заполнить все поля")

Теперь добавляем стили для главной страницы, добавляем в style.css, в целом мы все добавили уже выше, осталось добавление оформления таблиц
.t_right{
        border-right: 1px dotted #cccccc;
}
.t_left{
    border-left: 1px dotted #cccccc;
}
.all{
    border: 1px solid #979797;
    
}


Готово!


































Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
^