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

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

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

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

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

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

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

Удали себя из интернет-социума — «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;

}

 


Читайте:


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


Защитный код
Обновить

News image

Что такое AJAX API для Google Переводчика?

Благодаря AJAX API для Google Переводчика можно переводить и определять язык блоков текста на веб-странице, используя только JavaScript. Кроме того,...

News image

Apple: инструменты для разработчиков

Компания Apple официально уведомила своих разработчиков о готовности для скачивания предварительного релиза набора программного обеспечения iPhone S...

News image

Adobe Alchemy - использование C/C++ в Adobe Flash

Adobe Labs опубликовала preview версию проекта Alchemy (ранее упомиинался как FLACC). Alchemy - это исследовательский проект, позволяющий пользов...

News image

.NET Framework

.NET Framework — программная технология от компании Microsoft, предназначенная для создания обычных программ и веб-приложений. Одной из основных ...

News image

Gmail Labs: кто выйдет в свет, а кто уйдет в отставку

Мы запустили Gmail Labs более полутора лет назад. Это экспериментальная лаборатория, позволяющая разработчикам предлагать новые функции, а вам – реш...

Топ технологий:

News image

Оздана новая система беспроводной связи - она в 10

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

News image

Как взломали Twitter

В Интернетах, наряду с iPad, сканерами в аэропортах и войне между Google и Apple, уже второй день подряд активно обсуждается тема взлома и...