Якщо планується сайт, що складається з безлічі сторінок, вкрай важливо знати, як зробити шаблон сайту. Він спростить життя як верстальщику, так і програмісту.

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

Будь-сайт складається з безлічі сторінок, на кожній з яких присутні однакові елементи: службова інформація, меню, ідентичне дизайнерське оформлення і так далі. Якщо поставити собі за мету змінити подібний елемент на всьому сайті - скажімо, додати новий пункт в меню, - то доведеться це дію виконувати на кожній сторінці. Якщо на сайті їх 10, то завдання не занадто складна. А якщо 100 або більше?

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

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

Ці два документи невіддільні одна від одної, оскільки в іншому випадку вони не такі цікаві: якщо запустити файл шаблону, він не виведе ніякої корисної інформації. Те ж саме станеться, якщо запустити скрипт-обробник без самого макета.

Як створити шаблон сайту?

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

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

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

висновок

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

Рада 2: Як створити шаблон в фотошопі

створити шаблон сайту в фотошопі не дуже складно. Шаблон включає в себе меню, пошукові форми, графіку, можливо, якийсь текст для прикладу. На його основі вже буде програмуватися сам сайт.

Інструкція

Почніть формування шаблона сайту в фотошопі зі створення нового документа розмірі 1020 на 1020 pic. Зробіть фон білим. Встановіть в якості основного кольору # c5e0dd, як фоновий - # ece5cf.

Візьміть інструмент Gradient, в панелі його налаштувань виберіть перший тип заливки. Протягнете лінію градієнта по білому полю від верхнього краю до нижнього.

Візьміть інструмент Text, напишіть заголовок сайту в правому верхньому кутку так, щоб він був на одній лінії з пошуковою формою, яка буде розташовуватися в лівому верхньому кутку. Розмір шрифту встановіть, наприклад, 12.

Для створення пошукової форми виберіть інструмент Rectangle і намалюйте білий прямокутник в правому верхньому куті. Застосуйте наступні настройки шару: Inner Shadow - Blend Mode - Multiply, колір - # a2b7b1, Opacity - 43, Angle - 90, Distance - 0, Chоke - 0, Size - 10.

За допомогою інструменту Text зробіть всередині цієї форми неяскраву напис.

Виберіть інструмент Rounded Rectangle Tool і зробіть кнопку всередині пошукової форми у її правій межі. Примнеться наступні стилі шару: Gradient Overlay - Blend Mode - Normal, Opacity - 100, Gradient від темного до світлого (кольору від # 754f39 до # a1704f), Style - Linear, Angle - 90, Scale - 59.

За допомогою інструменту Text напишіть на цій кнопці «go» або щось в цьому роді.

Для створення навігації візьміть інструмент 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.

Візьміть інструмент 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.

Додайте написи на панелі навігації.

Увага, тільки СЬОГОДНІ!