следующая заметка >>

help
Страничка помощи по типографике и движку


Если вы сюда зашли, то зря. :) Это чисто служебная страничка с напоминалкой для ведущего сайт.

Особенности движка


Горячие клавиши: N — новая заметка или страница, E — редактирование, D — переход на последнюю запись в дневнике, ctrl+alt+shift+A — включение сканера нажимаемых клавиш. U - показать карточку пользователя.

Модули:

Особенности типографики дизайна


Классы DIV контейнеров:

class="the_content" — основное содержание. К его началу можно ссылаться через a href="#content"

class="icon" - превращает изображение в контейнере в иконку в стиле WP виджетов перед текстом.

class="social" - маленькие иконки для "социальных" кнопок. Красивый эффект подсвечивания при наведении

class="clear" - вставляется в пустом див контейнере для очистки зависимостей и предыдущих установок

class="left_col" - выводит список в левой колонке. Вот так:

  • Очень полезно для оформления иногда
  • Можно обойтись без таблиц при выводе информации "в строку"
  • В общем, хороший класс, надо не забывать пользоваться
  • Экономит пространство страницы

При этом текст, который идет за фрагментом, оформленным классом "левая колонка", автоматом заполняет правое пространство. А вот как работает аналогичный класс class="right_col":

  • Их можно использовать в паре
  • Чтобы делать красивые двухколоночные списки
  • Наверное, можно и просто текст оформлять этими классами, надо будет попробовать
  • Содержимое, идущее за контентом в этих контейнерах, автоматом занимает свободное пространство, только если не использовать класс очистки. Если использовать то будет вот как в этом правом списке, а слева - пусто.

div id="любой текст" - создание анкоров для ссылок на нужную часть страницы

class="shadow" - при оформлении странички добавляет эффект едва заметной тени к изображению. Пример использования:

Кошка в див-контейнере
Кошка без тени

Куча классов для создания виджетов и выносной колонки. Пример использования :

  • Кошки разные


    • Киса в снегу
    • Кошка оглядывается
    • Кот подглядывает
    • Кот спрятался
  • Функции дизайна


    • Модульная структура
    • Автоматическое подстраивание
    • Разные куфон шрифты
    • Боковое меню
    • PrettyPhoto Lightbox
    • Комментированный код
    • Протестировано на многих браузерах
    • Простая смена оформления

Вот это заголовок второго уровня


А это простой текст без всяких классов и дополнительного оформления, просто в стандартных тегах абзаца

Это заголовок третьего уровня


А дальше пойдут разные стандартные html штучки, чтобы посмотреть, как они выглядят в данной типографике:


Ну, это вот в теге "blockquote":

Для отметки цитат разных, фрагментов или вступительных слов. Выделения абзацев и прочих подобных целей подходит этот тег.
Ну а это для выделения кода. Обычный тег "code" вот так будет выглядеть. В рамочке такой вот пунктирной.

[top]

Fieldsets


Элементы форм






Radio 1
Radio 2
Radio 3


Radio 1
Radio 2
Radio 3



[top]

Таблицы


Table Header 1Table Header 2Table Header 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3



  следующая заметка >>
Оставить комментарий