Создание Фрэймворка на PHP5 – Часть 3
Теперь, когда движок нашего фрэймворка готов, мы можем заняться другими вещами. К примеру, интеграцией дизайна в наш PHP фрэймворк. На данный момент, мы сконцентрируемся на оформлении фронт энда и попытаемся организовать этот процесс простым настолько, насколько это возможно.
Как всё собрать в кучу
Итак, у нас есть наши файлы с кодом, рассортированных в каталоги и несколько объектов, доступ к которым получаем из центра управления. Одним из этих объектов является обработчик шаблонов, который позволяет нам без особых сил генерировать HTML код. Также мы можем с его помощью выводить изображения, css и другие шаблоны, которые формируют дизайн нашего приложения.
Шаг 1: Что нам необходимо для дизайна
Дизайн фронт энда не должен быть слишком уж сложным. Будет круто, если структура HTML шаблона будет пригодна для всех фичей, которые поддерживаются нашим фрэймворком. Минимум, который нам нужен - это:
- Основной блок, где будет располагаться инфа. Назовём его #content
- Также нам понадобится несколько колонок, которые будут храниться в #content
- Наверняка нам понадобится таблица.
- Нумерованные и ненумерованные списки (и другие виды списков).
- Изображение. Я привык использовать технику присвоения специального стиля для фоток в HTML коде; к примеру, вот так: <img class=”photo” src=”images/photo.jpg” alt=”Photograph” />.
- Формы для получения данных.
<head>
А теперь настало время создать простую структуру нашей XHTML страницы. Начнём мы вот с чего:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{pagetitle}</title>
<meta name="description" content="{metadesc}" />
<meta name="keywords" content="{metakey}" />
<style type="text/css" title="Default page style" media="screen"><!--@import "skins/fmwk/style.css";--></style>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
</head>
<body>
Если вы хотите, то можете поменять doctype на тот, который используете в своей повседневной практике. Также ничего не мешает вам отредактировать и другие параметры, например, такие как язык
lang. В этом же фрагменте кода мы подключаем наши основные таблицы стилей. В добавок, вписываем теги мета для ключевых слов и описания, которые будут меняться в зависимости от страницы. Заменитель {pagetitle} будет использоваться для того, чтобы вставлять название страницы, которую будет просматривать пользователь.
<body>
Теперь мы можем перейти непосредственно к телу нашей XHTML страницы, для того чтобы дополнить структуру дизайна нашего фрэймворка. Сейчас мы ничего не будем заполнять, а просто создадим несколько блоков, которые часто используются разработчиками. Добавим блоки header, content, column и footer.
<div id="wrapper"> <div id="header"> </div> <div id="content"> </div><!--/content--> <div id="column"> </div><!--/column--> <div id="footer"> </div><!--/footer--> </div><!--/wrapper--> </body> </html>
Шаг 2: основной контент
Как я и обещал, теперь мы перейдём к описанию основного контента, который будет состоять из тегов, которые так или иначе часто встречаются на веб страницах:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{pagetitle}</title>
<meta name="description" content="{metadesc}" />
<meta name="keywords" content="{metakey}" />
<style type="text/css" title="Default page style" media="screen"><!--@import "skins/fmwk/style.css";--></style>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h2><a href="#" title="Website name">Website name</a></h2>
</div>
<div id="content">
<h1>{pagetitle}</h1>
<img class="photo" src="/photo.jpg" alt="Photo test" />
<p>
Lorem ipsum dolor sit amet, <strong>consectetuer adipiscing elit</strong>. Quisque urna augue, fringilla quis, pulvinar non, feugiat in, pede. Curabitur vitae pede. Cras vehicula varius tellus. Sed consequat, enim tristique euismod volutpat, <em>tellus magna aliquet risus</em>, id aliquet eros metus at purus.
</p>
<h2>Secondary heading</h2>
<p>
Aliquam dictum, nibh eget <a href="#" title="Test link">ullamcorper condimentum</a>, magna turpis placerat pede, tempor facilisis tortor urna commodo turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras luctus cursus velit. Nullam imperdiet turpis.
</p>
<h3>Tertiary heading</h3>
<table>
<tr>
<th>Heading</th>
<td>Data</td>
</tr>
<tr>
<th>Heading</th>
<td>Data</td>
</tr>
</table>
<p>
<img src="/image.jpg" alt="Generic image" />
Cras a eros eget lorem fermentum malesuada. Phasellus condimentum libero vel lacus. Donec lectus nisl, adipiscing malesuada, sodales tincidunt, sagittis vitae, lacus. Proin nec pede. Maecenas adipiscing adipiscing risus.
</p>
</div><!--/content-->
<div id="column">
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
<ol>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>
</div><!--/column-->
<div id="footer">
<p>
© Website name, 2008.
</p>
</div><!--/footer-->
</div><!--/wrapper-->
</body>
</html>
Теперь наш контент готов к тому, чтобы мы его слегка оформили.
Шаг 3: стиль
В первую очередь, нам необходимо сбросить все начальные значения HTML элементов, такие как внешние и внутренние отступы:
body, * {
margin: 0;
padding 0;
}
Теперь оформим ещё несколько элементов:
body {
background: #FFF;
color: #000;
font-family: "helvetica", "arial", "verdana", sans-serif;
font-size: 62.5%;
}
a, a:active, a:link {
color: #1A64AC;
text-decoration: underline;
}
a:visited {
color: #0D2F4F;
}
Теперь нам надо сконцентрировать наше внимание на блоке #wrapper, а также добавить небольшую границу всем основным элементам страницы.
#wrapper {
margin: 0 auto;
width: 950px;
}
#wrapper, #header, #content, #column, #footer {
border: 1px #DDD solid;
}
Внимание! В Internet Explorer 6 возможны глюки. Давайте добавим ещё немного CSS, для того чтобы окончательно добить оформление структуры фронт энда нашего фрэймворка – всё остальное это просто позиционирование:
#column, #content {
float: left;
font-size: 125%;
padding: 5px;
}
#column {
width: 200px;
}
#content {
margin-left 5px;
width: 725px;
}
#header, #footer {
clear: both;
}
Всё что осталось сделать, так это написать парочку стилей для изображений:
#column img, #content img {
border: 2px #DDD solid;
float: left;
margin: 0 5px 0 10px;
}
img.photo {
background: #DDD;
float: right !important;
padding: 25px 2px;
}
И вот что у нас в конечном итоге получилось:
Конечно же тут всё может быть намного сложнее, однако это не было целью данного урока. Мне нужно было вам показать, как внедрить XHTML и CSS в наш новоиспечённый фрэймворк.
Шаг 4: XHTML шаблоны
Следующее, что нам нужно разъяснить, так это передачу XHTML, CSS и изображений в наш PHP фрэймворк. Для этого нам необходимо разбить XHTML на три части: header, main и footer. Благодаря системе, которую мы построили за эти несколько уроков, наша страница может строиться из нескольких шаблонов.
Шаблон Header для PHP фрэймворка (skins/default/templates/header.tpl.php)
Данный шаблон будет хранить следующую информацию:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{pagetitle}</title>
<meta name="description" content="{metadesc}" />
<meta name="keywords" content="{metakey}" />
<style type="text/css" title="Default page style" media="screen"><!--@import "style.css";--></style>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h2><a href="#" title="Website name">Website name</a></h2>
</div>
Шаблон Main для PHP фрэймворка (skins/default/templates/main.tpl.php)
В этом шаблоне должны размещаться блоки div, которые будут содержать основной контент страницы. Теперь вместо вставки какого-то случайного текста, мы можем вставить специальные заменители, которые будут замещаться текстом.
Нам потребуется:
- {pagetitle} для заголовка страницы.
- {maincontent} для основного контента страницы.
- {btitle} и {bcontent} заголовки и контент для дополнительной инфы.
<div id="content">
<h1>{pagetitle}</h1>
{maincontent}
</div><!--/content-->
<div id="column">
<!-- START rcolumn -->
<h2>{btitle}</h2>
{bcontent}
<!-- END rcolumn -->
</div><!--/column-->
Шаблон Footer для PHP фрэймворка (skins/default/templates/footer.tpl.php)
И наконец, нам осталось создать шаблон для нижней части страницы. Обычно в этой части люди пишут копирайт и другую информацию.
<div id="footer"> <p> © Website name, 2008. </p> </div><!--/footer--> </div><!--/wrapper--> </body> </html>
Я приношу свои извинения, т.к. немного изменил тему данной статьи. Думаю, в следующих частях данной серии мы рассмотрим вопросы безопасности, отправки email и возможности расширения данного фрэймворка.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/1oYgC1hCWWQ/lessons.php
|
Теперь, когда движок нашего фрэймворка готов, мы можем заняться другими вещами. К примеру, интеграцией дизайна в наш PHP фрэймворк. На данный момент, мы сконцентрируемся на оформлении фронт энда и |
РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2025-12-02 » Когда ошибка молчит: как бессмысленные сообщения ломают пользовательский опыт
- 2025-12-02 » 9 лучших бесплатных фотостоков
- 2025-12-02 » UTM-метки: ключевой инструмент аналитики для маркетолога
- 2025-12-02 » ПромоСтраницы Яндекса: Что такое и для чего служит
- 2025-12-02 » Метатеги для сайта: исчерпывающее руководство по Title, Description, Canonical, Robots и другим тегам
- 2025-11-26 » Оценка эффективности контента: превращаем информационный балласт в рабочий актив
- 2025-11-26 » 10 причин высокого показателя отказов на сайте
- 2025-11-26 » Когда и зачем обновлять структуру сайта
- 2025-11-26 » Скрытые демотиваторы: как мелочи разрушают эффективность команды
- 2025-11-26 » Зачем запускать MVP и как сделать это грамотно?
- 2025-11-20 » Половина российских компаний сократит расходы на транспорт и маркетинг в 2026 году
- 2025-11-20 » Перенос сайта с большим количеством ссылок
- 2025-11-20 » Перелинковка сайта: Что такое и как ее использовать
- 2025-11-20 » Критерии выбора SEO-специалиста и подрядчика для продвижения сайта
- 2025-11-20 » Применение искусственного интеллекта в рекламных агентствах: комплексное исследование трендов 2025 года
- 2025-11-19 » Геозапросы по-новому: как покорить локальное SEO с помощью ИИ
- 2025-11-14 » Консалтинг: сущность и ключевые направления
- 2025-11-14 » Онлайн-формы: универсальный инструмент для сбора обратной связи
- 2025-11-14 » Факторы конверсии органического трафика
- 2025-11-14 » Планирование рекламного бюджета: самостоятельный подход
- 2025-11-14 » Авторизация на сайте: как выбрать решение для удержания клиентов и сохранения продаж
- 2025-11-13 » Эффективные методы стимулирования клиентов к оставлению положительных отзывов
- 2025-11-13 » Налоговая реформа — 2026: грядущие изменения для предпринимателей
- 2025-11-13 » Альтернативы мессенджерам: что выбрать вместо Telegram и WhatsApp
- 2025-11-13 » Маркировка рекламы для начинающих: полное руководство по требованиям ЕРИР
- 2025-11-13 » ИИ не отберет вашу работу — её займет специалист, владеющий искусственным интеллектом
- 2025-10-29 » Как оценить эффективность работы SEO-специалиста: практическое руководство для маркетологов и владельцев бизнеса
- 2025-10-29 » Киберспорт как маркетинговый инструмент: стратегии привлечения геймеров
- 2025-10-29 » Как говорить с аудиторией о сложном
- 2025-10-29 » Что такое доказательства с нулевым разглашением (ZKP) и их роль в блокчейне
Лично я люблю землянику со сливками, но рыба почему-то предпочитает червяков. Вот почему, когда я иду на рыбалку, я думаю не о том, что люблю я, а о том, что любит рыба. (Дейл Карнеги / БИЗНЕС) |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их !
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Мы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!
Комплексный подход это не просто продвижение сайта, это целый комплекс мероприятий, который определяется целями и задачами поставленными перед сайтом и организацией, которая за этим стоит. Время однобоких методов в продвижении сайтов уже прошло, конкуренция слишком высока, чтобы была возможность расслабиться и получать \ удерживать клиентов из Интернета, просто сделав сайт и не занимаясь им...
Мы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.
Контекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.