Создание Фрэймворка на 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
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
- 2024-01-18 » Мифический человеко-DevOps
- 2023-12-28 » Google подвел итоги 2023 года в поиске
- 2023-12-28 » 5 ошибок отдела продаж, из-за которых вы теряете клиентов
- 2023-12-28 » Американский суд признал монополию Google на рынках дистрибуции Android-приложений
- 2023-12-28 » Хостинг-провайдер GoDaddy перестанет оказывать услуги пользователям из России
Не делай другим то, что ты хотел бы, чтобы они делали для тебя. У вас могут быть разные вкусы Шоу Джордж Бернард - (1856-1950) - английский писатель. В своем творчестве ниспровергал догматизм и предвзятость, традиционность представлений |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.