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

OpenStreetBugs — лёгкий способ сообщить об ошибке в OpenStreetMap

Вы, конечно, знаете о свободной карте OpenStreetMap. Это настоящая народная карта, создаваемая такими же людьми как и вы! Это такой же opensource-проект как Linux и как Википедия. Конечно же, как и в других картах, в OpenStreetMap имеются ошибки, но в отличие от тех же Яндекс.Карт, где ошибки не исправляются годами из-за сложной бюрократической процедуры (я уже не говорю о намеренных ошибках), в OpenStreetMap всё гораздо проще и лучше для всех нас...
Подробнее..

CloudMade Navigation поддерживает ограничения манёвров

Не так давно CloudMade выделил несколько приоритетных направлений, среди которых оказалась и навигация. Решено было создать специальный проект Navi Studio, который объединял бы в себе несколько более мелких сервисов и позволял пользоваться ими, для создания полноценного навигационного программного обеспечения. В Navi Studio вошли: Работа закипела и уже появилось несколько приложений использующих данный проект. Но полноценной навигации без соблюдения правил ПДД не существует, а потому данному вопросу было также уделено не мало времени...
Подробнее..

Удали себя из интернет-социума — «Web 2.0 Suicide Machine»

Недавно наткнулся в сети на один занимательный интернет-сервис, именующийся Web 2.0 Suicide machine . Предназначен он для того, чтобы позволить людям, обремененным «социальной жизнью в интернете», в пару кликов удалить свои аккаунты на Facebook (в данный момент сервис блокирован администрацией по IP), Twitter, Linkedin и Myspace. В общем-то судя по количеству положительных отзывов и «успешных очищений» — пипл хавает зависимые от социальных сетей успешно пользуются сервисом и довольны...
Подробнее..

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

Веб разработка - Уроки dle

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

Всем привет, сегодня я научу вас оформлять главную страницу портала 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>

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

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

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

Подробно объяснять о login.tpl я не буду, если вы знаете html и 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 onsubmit= javascript: showBusyLayer() 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 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;

}

Читайте:

Data Life Engine. Урок 2. Оформляем шаблоны краткой и полной новости Data Life Engine. Урок 3. Оформляем комментарии Data Life Engine. Урок 5. Оформляем приватные сообщения Data Life Engine. Урок 6. Оформляем добавление новостей и регистрацию посетителей Data Life Engine. Урок 7. Оформляем результаты поиска

Читайте:

Добавить комментарий

Демонстрация HTML5 от Apple: пнем Flash чуть сильнее

Все, кто слышал о неумолимо надвигающемся счастье в виде HTML5, скорей всего слабо представляют с чем это собственно едят. Apple в рамках программы ...

Adobe представила второе поколение Air

Компания Adobe представила второе поколение кросс-платформенной технологии Air (Adobe integrated runtime), сообщается в блоге компании. Новая версия...

Microsoft открыла формат почтовых баз Outlook

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

Microsoft Volta – еще один конкурент AJAX на платформе .NET

Microsoft анонсировала новый инструмент для Web-разработчиков: Microsoft Volta. Volta – это разработка Microsoft Live Labs, в настоящее время пре...

WidgetPad – открытая среда для коллективной разработки мобильных прило

Сатоси Накадзима (Satoshi Nakajima) – создатель первой системы автоматизированного проектирования для ПК, один из ведущих разработчиков Windows 95 и...