Блог на Textpattern с нуля. Часть 1

Как я уже обещал, начинаю один из циклов статей по созданию сайтов. Мы начнём с самого начала и постепенно будем добавлять функциональность. Итак…

Идея

Мне не хотелось просто тупо брать готовый CSS шаблон и натягивать его на движок. Это согласитесь совсем не интересно. Вместо этого подойдём к вопросу творчески и нарисуем свой макет. Располагаться он будет на поддомене нашего основного сайта и найти его можно будет по адресу: Monster.ILoveTXP.ru Дизайн, как следует из названия, будет монстрическим.

Макетирование

Макет будем рисовать для фиксированной сетки 960. То есть общая ширина будет 960px (надеюсь не осталось людей пользующихся разрешением 640х480) и будет содержать 12 колонок.

Собственно макетирование я делаю в Adobe Illustrator, так как изменения легче вносить в векторном редакторе (если вы с этим не согласны, то пожалуйста аргументируйте).

Пожалуй начнём.

Создадим новый документ:

Я использую размер 1120 на 1120 вот почему: ширина одной колонки в нашем случае 80 пикселей, если к 960 с двух сторон добавить по одной колонке, просто для пустого места, то получится именно 1120. Высоту можно в процессе разработки поменять.

Каждая колонка будет иметь боковые границы в 10 пикселей. Кстати, немного забегая вперёд и опережая возможные вопросы — фреймворк 960.gs я использовать не собираюсь, только сетку. Это хороший фреймворк для многих общих случаев, особенно если вам действительно приходится использовать все 12 или 16 колонок. В нашем случае мы ограничимся только двумя.

Итак, возвращаясь к колонкам. Ширина каждой колонки включая отступы 80 пикселей. Теперь настроим Иллюстратор, чтобы получить правильную сетку. Заходим в Edit → Preferences → Guides & Grids и делаем следующие настройки.

То что важно, я выделил. У нас получится именно такая сетка, как нужно. С большими клетками 80 на 80, состоящими из клеток 10 на 10.

Основная разметка

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

Небольшое отступление

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

1. Нажимаем кнопочку, отвечающую за показ слоёв в панельке настроек
2. Рядом с именем слоя, в котором у нас находятся блоки разметки, нажимаем кружочек. Это выделит все объекты на слое и сам слой.
3. Открываем панельку Transparency (на картинке справа) и назначаем прозрачность 10%.

Слой с разметкой кладём на самый верх и закрываем замочком, чтобы не мешал двигать объекты на других слоях.

Теперь будет отлично видно место, которое у нас есть под наши объекты.

Для тех кто не понял, вот макет, который вы можете скачать и посмотреть, что и как. Сохранено в CS4, так что если кому надо в более старом формате, пишите в комментах.

Продолжаем разговор…

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

Мне очень нравится когда сетка не только определяет положение блоков по горизонтали, но и заботится о том, чтобы строчки были выровнены и прижаты к вертикальной сетке. Это называется “вертикальным ритмом”.

Чтобы всё выглядело так как требуется, нужно чтобы высота строк line-height, а также все отступы и тому подобное, были кратны высоте вертикальной сетки. Определим для себя высоту в 20 пикселей и нарисуем на отдельном слое вспомогательные блоки, чтобы не промахнуться. Жмакаем картинку, чтобы посмотреть целиком.

Для того чтобы всё было видно используем описанный выше способ с полупрозрачными блоками.

Теперь приступим к основному проектированию. Давайте определимся с базовым функционалом. Остальное будем прикручивать после того как сделаем базу.

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

Определимся с тем как будет выводиться список статей. На главной странице мы будем показывать выдержку, если она есть, а если нет, то тело статьи. Для заголовка используем <h1>, но без ссылки (почему — объясню потом). Рядом с заголовком поставим дату. В конце статьи будет блок дополнительной информации:

• автор
• количество комментариев (если они есть)
• ссылка на полную статью
• теги

Так как мы предполагаем, что статей у нас будет много, то сделаем навигацию “старые/новые посты”. Ну и конечно заполним подвал.

Чтобы посмотреть, что у нас вырисовывается, жмакаем на картинку.

Красным я обозначил отступы. А вот что получилось без сетки.

Некоторые могут воскликнуть: “Как же так! Ведь не у всех установлен такой шрифт, который вы использовали в заголовках!”. Но подождите, когда мы доберёмся до вёрстки и сами всё увидите.

В следующей статье:

• расскажу каким редактором для вёрстки пользуюсь я
• сверстаем базовую структуру
• определим структуру папок
• и т.д.

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

Исходники

• Шаблон в формате Adobe Illustrator CS4
• Шрифт London от Ивана Гладких (Джованни Лемонад)