Создание Фрэймворка на 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

Читать комменты и комментировать

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



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

Создание Фрэймворка на PHP5 – Часть 3 | | 2012-06-19 12:08:41 | | Статьи Web-мастеру | | Теперь, когда движок нашего фрэймворка готов, мы можем заняться другими вещами. К примеру, интеграцией дизайна в наш PHP фрэймворк. На данный момент, мы сконцентрируемся на оформлении фронт энда и | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: