Создание дизайна для движка "Wikipad"

Последнее изменение: 16/03/2016 12:13:12

Через некоторое время после того, как Вы начнете использовать движок "Wikipad" у Вас может возникнуть желание изменить его дизайн. В этой статье я попробую рассказать как это можно сделать и как вообще устроен движок с точки зрения верстки.

Общая информация

Изначально движок создавался таким образом, чтобы его дизайн можно было менять в очень широких пределах. Этот сайт тоже построен на базе движка "Wikipad" и Вы можете видеть насколько сильно данный дизайн отличается от дизайна по умолчанию.

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

 /css/          - таблицы стилей, задающие внешний вид сайта
 /pic/          - изображения, используемые в дизайне сайта
 /templates/    - XHTML-шаблон, определяющий основные композиционные блоки

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

Способ №1. Изменяем заголовок

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

Вся графика, которая используется в дизайне, хранится в папке "pic/". И если Вы туда загляните, то среди графических файлов увидите один с названием "header.jpg" - это и есть заголовок сайта. Чтобы его изменить, достаточно создать новый графический заголовок тех же размеров, что и исходный. И для этого можно воспользоваться PSD-шаблоном, который я подготовил и который выложен на сайте поддержки:

Откройте данный файл в PhotoShop и скорректируйте заголовок, а также слоган сайта. При этом, постарайтесь придерживаться общего стиля, заданного исходным дизайном. Это обозначает, что название нужно написать с использование черного и белого цвета, логически разделив заголовок, а слоган просто изменить. При этом нежелательно менять гарнитуру или размер шрифта. Постарайтесь также, чтобы название сайта и слоган были примерно той же длины, что и в исходном дизайне. Вот пример того, как бы выглядел сайт "Cherry-Notes", если бы я использовал данный способ при оформлении сайта.

Изменение заголовка в дизайне "Wikipad" по умолчанию

И не забудьте, что необходимо подкорректировать название и слоган сайта в конфигурационном файле.

 // Название, слоган и электронный адрес сайта
 $globals["website_title"] = "Cherry-Notes";
 $globals["website_words"] = "Небольшой блог одного дизайнера";

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

Способ №2. Изменяем оформление, сохраняя композицию

Второй способ чуть посложнее, т.к. здесь уже готовым шаблоном не обойдешься и придется запускать PhotoShop. Смысл этого способа заключается в том, что мы не трогаем исходную верстку и, соответственно, композицию страницы. Все что необходимо сделать это нарисовать новые картинки взамен тех, что находятся в папке "pic/". При этом нужно придерживаться двух основных правил:

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

Вот пример того, как можно изменить заголовок, оставаясь при этом в рамках общей композиции, заданной исходным дизайном движка "Wikipad".

Изменение оформления с сохранением исходной композиции дизайна "Wikipad"

Это заголовок сайта, построенного на движке "Wikipad" для одного из моих проектов. Как видите, этот способ дает нам больший простор для изменения внешнего вида сайта.

Способ №3. Полностью меняем весь дизайн

Ну и, наконец, третий способ, который Вы можете видеть в действии на этом самом сайте. Пожалуй, это наиболее сложный вариант, т.к. подразумевает, что Вам необходимо с нуля полностью нарисовать весь дизайн и переверстать страницу. Зато и простор для фантазии здесь наибольший :)

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

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

Полезные ссылки

Смотри также