Создание Фрэймворка на 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
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Великие умы обсуждают идеи, средние - обсуждают поступки, а малые - людей Индийская пословица |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их !
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Мы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!
Комплексный подход это не просто продвижение сайта, это целый комплекс мероприятий, который определяется целями и задачами поставленными перед сайтом и организацией, которая за этим стоит. Время однобоких методов в продвижении сайтов уже прошло, конкуренция слишком высока, чтобы была возможность расслабиться и получать \ удерживать клиентов из Интернета, просто сделав сайт и не занимаясь им...
Мы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.
Контекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.