Совет 1: Как создать шаблон для сайта

Если планируется сайт, состоящий из множества страниц, крайне важно знать, как сделать шаблон сайта. Он упростит жизнь как верстальщику, так и программисту.

Что такое шаблон для сайта?



Любой сайт состоит из множества страниц, на каждой из которых присутствуют одинаковые элементы: служебная информация, меню, идентичное дизайнерское оформление и так далее. Если задаться целью поменять подобный элемент на всем сайте - скажем, добавить новый пункт в меню, - то придется это действие выполнять на каждой страничке. Если на сайте их 10, то задача не слишком сложная. А если 100 или больше?


Шаблон - это некий макет, реализующий логику отображения материала. В нем можно задать место отображения меню, шапки сайта, основного контента и так далее. Само содержимое элементов, прописанных в шаблоне, задается в скрипте или посредством функционала, предоставляемого системой управления сайтом.

В качестве шаблона можно представить пару документов. В одном файле имеется разметка. Это сам макет, где указано конкретное место размещения того или иного контента. Второй файл отвечает за то, что именно будет отображено. Задача второго документа - проанализировать файл макета и подставить реальные значения переменных.

Эти два документа неотделимы друг от друга, поскольку в противном случае они не так интересны: если запустить файл шаблона, он не выведет никакой полезной информации. То же самое произойдет, если запустить скрипт-обработчик без самого макета.

Как создать шаблон сайта?



Создание макета страницы сайта сводится к созданию простого html-документа, в котором прописана логика отображения элементов страницы. Одновременно с этим необходимо создать файл, управляющий отображением шаблона. В этом файле будут прописаны реальные значения переменных.

Такая работа достаточно трудоемка, поэтому можно воспользоваться готовым шаблонизатором. В качестве примера можно привести Smarty и Twig. В этом случае достаточно скачать дистрибутив шаблонизатора, и по инструкции установить его на сервер. В этом случае не требуется создавать файл, отвечающий за отображение реальных переменных, так как он уже создан - это сам дистрибутив, то есть набор файлов. Необходимо создавать только макеты страниц.

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

Заключение



Создание шаблона - очень хороший способ разделить логику отображения и логику приложения. Это облегчает работу верстальщику и упрощает работу программиста.

Совет 2: Как создать шаблон в фотошопе

Создать шаблон сайта в фотошопе не очень сложно. Шаблон включает в себя меню, поисковые формы, графику, возможно, какой-то текст для примера. На его основе уже будет программироваться сам сайт.
Инструкция
1
Начните формирование шаблона сайта в фотошопе с создания нового документа размером 1020 на 1020 pic. Сделайте фон белым. Установите в качестве основного цвета #c5e0dd, в качестве фонового - #ece5cf.
2
Возьмите инструмент Gradient, в панели его настроек выберите первый тип заливки. Протащите линию градиента по белому полю от верхнего края до нижнего.
3
Возьмите инструмент Text, напишите заголовок сайта в правом верхнем углу так, чтобы он был на одной линии с поисковой формой, которая будет располагаться в левом верхнем углу. Размер шрифта установите, например, 12.
4
Для создания поисковой формы выберите инструмент Rectangle и нарисуйте белый прямоугольник в правом верхнем углу. Примените следующие настройки слоя: Inner Shadow - Blend Mode – Multiply, цвет - #a2b7b1, Opacity – 43, Angle – 90, Distance – 0, Chоke – 0, Size - 10.
5
При помощи инструмента Text сделайте внутри этой формы неяркую надпись.
6
Выберите инструмент Rounded Rectangle Tool и сделайте кнопку внутри поисковой формы у ее правой границы. Примнете следующие стили слоя: Gradient Overlay - Blend Mode – Normal, Opacity – 100, Gradient от темного к светлому (цвета от #754f39 к # a1704f ), Style – Linear, Angle – 90, Scale – 59.
7
При помощи инструмента Text напишите на этой кнопке «go» или что-то в этом роде.
8
Для создания навигации возьмите инструмент Rounded Rectangle Tool и нарисуйте длинный прямоугольник под заголовком и поисковой формой. Примените следующие стили слоя: Gradient Overlay - Blend Mode – Normal, Opacity – 100, Gradient от темного к светлому (цвета от #76503e к # a46ecd), Style – Linear, Angle – 90, Scale – 59; Stroke Structure – 1, Position – Inside, Blend Mode – Normal, Opacity – 100, Fill Type – Color, Color # 9F6038.
9
Возьмите инструмент Rounded Rectangle Tool и нарисуйте небольшой прямоугольник в левой стороне панели навигации. Примените следующие стили слоя: Inner Shadow - Blend Mode – Multiply, Opacity – 75, Angle – 90, Distance – 1, Chоke – 0, Size - 8; Gradient Overlay - Blend Mode – Normal, Opacity – 100, Gradient от темного к светлому (цвета от #76503c к # a46e4d ), Style – Linear, Angle – 90, Scale – 59; Stroke - Structure – 1, Position – Inside, Blend Mode – Normal, Opacity – 100, Fill Type – Color, Color # 8f6347.
10
Добавьте надписи на панели навигации.
Видео по теме
Видео по теме
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500