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. В общем-то судя по количеству положительных отзывов и «успешных очищений» — пипл хавает зависимые от социальных сетей успешно пользуются сервисом и довольны...
Подробнее..



Создаём шаблон для DLE

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

создаём шаблон для dle

Здравствуйте уважаемые посетители! После небольшого отпуска, я продолжаю работу над проектом.
Эта публикация – первая, открывающая новую категорию – «Создание сайтов». В ней, мы будем изучать принципы создания сайтов (шаблонов) под определённую CMS. Начнём с одной из самых распространённых в России CMS – DataLife Engine…


Примером будет служить новый шаблон для сайта gzweb.ru.
Итак, приступим к его созданию:

Цель нашей работы: создать шаблон для сайта веб-мастеров, ориентированный на четкость линий и максимальную легкость.

Для начала – нам предстоит работа в Photoshop. Макет будущего дизайна, как правило, рисуется именно в этой программе.
Грузить вас фотошопом не буду, тем более, что сайтов с уроками – достаточно. Скажу только, что рисования дизайна – не главное. Главное – придумать интересную структуру, чему научить, разумеется нельзя.

Итак, будем считать, что нарисовали и разрезали дизайн на части. Теперь можно приступать к верстке под CMS.
Шаблоны под DLE строятся на файлах TPL. Это обеспечивает максимальную лёгкость вёрстки и значительно облегчает адаптацию дизайна.
Фактически, tpl – это простой html файл, который встраивается в PHP. Для рассматриваемой системы, TPL строятся следующим образом:
Главным файлом (задающим основную структуру шаблона) является main.tpl, Все дополнительные объекты (кроме меню) тоже задаются tpl.
Как правило, стили CSS задаются 2-мя файлами: engine.css – программные части шаблона и style.css – основные стили и верстка.
Чисто схемотично можно изобразить main.tpl таким:



Итак, вернёмся к нашему шаблону. Я остановлюсь конкретно на его особенностях:
- Шаблон должен быть «резиновым», но не доходить до краёв. Я сделал это следующим образом:

html, body {
padding:8px;
margin:0;
}


Теперь все границы нашего шаблона сдвинуты к центру на 8 пикселей. Это было – самое простое…
- шапку шаблона будем создавать с помощью дивов (div), то есть без какого-либо использования таблиц. Схематично, это можно изобразить так:

То есть, в html это выглядит так:

<div id=”top”>
<div id=”left”><div id=”right”>
</div>


Стили задаются следующим образом.

#top {
background-image:url(../img/sup.png);
height:15px;
}

#left {
background-image:url(../img/sup_l.png);
width:39px;
height:15px;
float:left;
}

#right {
background-image:url(../img/sup_r.png);
width:39px;
height:15px;
float:right;
}


Готово. Мы получили классическую структуру строки. Если в ней должно быть содержание, то добавится ещё один див между левым и правым. Стиль его, соответственно – float:left.

Теперь – следующая особенность шаблона – отдельные блоки для каждого элемента, оформленные вертикальным градиентом. Метод его создания известен давно и чаще всего используется для защиты элементов с градиентным фоном от дублирования или обрыва по вертикали. Сделать это очень просто. Достаточно задать его фон следующим образом:

background:#d2d2d2 url(../img/com.png) repeat-x;


Отлично. Фон готов.

Ещё хочу сказать, что центральная часть шаблона сделана с помощью таблицы, состоящей из одной строки и 3 столбцов. Левый и правый – фиксированы по ширине, центральный – «резиновый».
Само собой, и центр можно было сделать без таблиц, но я решил, что с таблицами будет удобнее. Так оно и оказалось.

Итак, соберём воедино всё, что узнали:
1)Шаблоны DataLife Engine строятся на TPL;
2)Основным файлом шаблона является main.tpl;
3)DLE идеально подходит для порталов и новостных сайтов;
4)DLE – один из самых простых, в плане создания шаблонов, CMS
5)Весь рассматриваемый шаблон построен на 2-х CSS-приёмах, которые рассмотрены выше. Дальше – простая их комбинация и работа с атрибутами, описанными в нашем справочнике.

Замечу, что в создании шаблона (а именно поиска) не обошлось без свободно позиционированных элементов, что не всегда хорошо.


P.S. Даже прочитав эту статью сто раз, Вы не поймёте всех особенностей создания шаблонов под DLE. В нашем деле, главное – это практика.
Вот и всё на сегодня. Спасибо за внимание!

P.P.S. Далее, в поле нашего зрения попадёт WordPress. Мы рассмотрим эту систему на примере специально созданного учебного шаблона.

P.P.P.S Руководство по созданию сайта От А до Я входит в заключающую стадию написания. Если всё будет нормально, то опубликуем его в ближайшие дни.

 


Читайте:


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


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

News image

Разработка Web-приложений с помощью Oracle JavaServer Pages

Используйте технологии OracleJSP и сервлетов для легкой разработки и внедрения гибких WEB-приложений. В связи с увеличением числа продавцов и пот...

News image

Microsoft поддержала открытые технологии создания географических карт

Microsoft добавила на сервис Microsoft Bing Maps поддержку свободно распространяемых карт OpenStreetMap, которые создаются на основе пользовательски...

News image

Oracle RAC. Общее описание

Высоконагруженные сайты, доступность «5 nines». На заднем фоне (backend) куча обрабатываемой информации в базе данных. А что, если железо забарахлит...

News image

Chromoting – новая технология в Chrome OS

В операционной системе Chrome появится новая функция, которая позволит запускать настольные приложения непосредственно в окне браузера. Это новшеств...

News image

Язык C#: от Microsoft для разработчиков

В последнее время внимание сообщества специалистов IT-индустрии приковано к новой инициативе компании Microsoft -- .NET. Однако в своем восприятии э...

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

News image

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

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

News image

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

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