yoksel : ) (yoksel) wrote in journals_covers,
yoksel : )
yoksel
journals_covers

Categories:

Уроки по дизайну ЖЖ. Часть I.

Внимание: это уроки для устаревшей системы стилей S1.
Перейти к актуальным урокам →

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

Хочу попытаться исправить эту досадную ситуацию, написав универсальный справочник по кодам дизайна с примерами : )

В качестве примера я буду рассматривать один из своих кодов:

Стеклянные мурашки

Код дизайна:

Для того чтобы вам было удобно следить за моими объяснениями, скопируйте этот код в какой-нибудь текстовый или HTML'ный файл.

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

Сначала рассмотрим крупные элементы: GLOBAL_HEAD (и прочие __HEAD), LASTN_WEBSITE, LASTN_TALK_LINKS..

Зачем они нужны?
Это блоки вашего кода, которые встраиваются в код Вашего журнала, а иногда и заменяют имеющийся уже код. Для того чтобы понять куда они вставляются, надо рассмотреть структуру обычной HTML-страницы. Она всегда включает в себя несколько обязательных тегов, которые располагаются определённым образом:

<html>
   <head>
     <title></title>
     <style></style>
   </head>
   <body></body>
</html>

Теги style и title необязательные, я их указала только для примера.

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

В head также можно вставить тег <title></title>, это заголовок страницы, который мы видим в шапке окна. Обычно для журналов заголовок задаётся в настройках, но вы можете поменять его в шапке таким вот образом.

Туда же можно вставить значок favicon.ico, он будет представлять ваш журнал рядом с названием страницы в браузере и в закладках (в ИЕ только в закладках). Так выглядят значки ЖЖ и Яндекса:
icons
Как их делать и вставлять я расскажу пойже.

В теге body находится основной код страницы, тот, что непосредственно определяет её содержимое.

Вы можете просмотреть код своего журнала, выбрав в меню браузера View -> Page Source или Вид -> Просмотр HTML-кода.

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

Теперь рассмотрим куда именно встраиваются наши коды из GLOBAL_HEAD, LASTN_WEBSITE и прочие:

Название блока Предназначение Где он в результате оказывается? Что в него можно вставлять? Примечания
GLOBAL_HEAD Используются как контейнеры для стилей журнала В теге head для всего журнала Тег style и всё его содержимое для конкретной страницы

Тег title для конкретной страницы

favicon.ico
Тег style для каждой страницы (то есть внутри каждого HEAD) должен открываться и закрываться 1 раз, в результате ваш код должен выглядеть так:

<style type="text/css">
здесь все ваши стили
</style>

LASTIN_HEAD В теге head, страница с вашими записями
FRIENDS_HEAD В теге head, страница с записями друзей
CALENDAR_HEAD В теге head, страница с календарем
DAY_HEAD В теге head, страница с записями за определённый день

Название блока Предназначение Где он в результате оказывается? Что в него можно вставлять? Примечания
LASTIN_WEBSITE Код для верхнего меню в меню страница с вашими записями Очень полезный блок! В нем можно:

• вставлять всё что относится к верхнему меню, например просто вставить свои ссылки

• убрать стандартные ссылки вида
[ userinfo | livejournal userinfo ]
[ calendar | livejournal calendar ]

а вместо них вставить свои, в принципе какие угодно

• сделать меню с помощью ImageMap - это картинка, определённые области которой являются ссылками, например как тут:
Предпросмотр Яблоко & Co
Увеличить
Код дизайна

Как сделать такие меню я расскажу пойже

• сюда же вставляется код блоков с вашей информацией и любимыми ссылками, как тут
В коде оказывается в теге body

на странице - в меню где Userinfo, Friends и т.д., рядом с юзерпиком

FRIENDS_WEBSITE в меню на странице друзей
CALENDAR_WEBSITE в меню страница с календарем
DAY_WEBSITE в меню страница с записями за определённый день

Название блока Предназначение Где он в результате оказывается? Что в него можно вставлять? Примечания
LASTIN_TALK_LINKS Текст ссылок на добавление комментариев к постам страница с вашими записями Код типа:

<tr>
<td align="right" valign="top" colspan="2" width="100%" bgcolor="%%color:weak_back%%" class="comments"><div>%%readlink%% | <a href="%%urlpost%%">Добавить комментарий </a></div> </td>
</tr>

где вместо Добавить комментарий - любой ваш текст

%%readlink%% - это код который вставляет количество комментариев, надписи для него определяются в *_TALK_READLINK. (см. ниже).

Желательно прописывать для этого блока и открывающий элемент, и закрывающий, например:

LASTN_TALK_LINKS<=
здесь ваш код <=LASTN_TALK_LINKS

Можно прописать только один элемент:

LASTN_TALK_LINKS=>здесь ваш код

тогда весь код должен будет умещаться в одну строку. Если же он перенесётся и строки станет две - код работать не будет.

Поэтому лучше сразу прописывать и открывающий и закрывающий элементы

FRIENDS_TALK_LINKS на странице друзей
CALENDAR_TALK_LINKS страница с календарем
DAY_TALK_LINKS страница с записями за определённый день

Название блока Предназначение Где он в результате оказывается? Что в него можно вставлять? Примечания
LASTIN_TALK_READLINK Текст ссылок на комментарии к постам страница с вашими записями Код типа:

<a href="%%urlread%%"><b>Комментариев: %%messagecount%%</b></a>

где вместо Комментариев: - любой ваш текст

Для этого блока также желательно прописывать открывающий и закрывающий элементы, например:

LASTIN_TALK_READLINK<=
здесь ваш код <=LASTIN_TALK_READLINK

Подробнее см. в *_TALK_LINKS, Примечания

FRIENDS_TALK_READLINK страница друзей
CALENDAR_TALK_READLINK страница с календарем
DAY_TALK_READLINK страница с записями за определённый день

Название блока Предназначение Где он в результате оказывается? Что в него можно вставлять? Примечания
LASTN_DATE_FORMAT Формат даты для постов страница с вашими записями Код типа:

%%dd%%. %%mm%%. %%yy%%| %%24hh%%:%%min%%

Формат даты и времени можно менять, можно указать день недели. Подробнее здесь

Для этого блока также лучше прописывать открывающий и закрывающий элементы, например:

LASTIN_DATE_FORMAT<=
здесь ваш код <=LASTIN_DATE_FORMAT

Подробнее см. в *_TALK_LINKS, Примечания

FRIENDS_DATE_FORMAT на странице друзей
CALENDAR_DATE_FORMAT страница с календарем
DAY_DATE_FORMAT страница с записями за определённый день

На сегодня достаточно : )) В следующий раз я буду рассказывать о содержимом блоков *_HEAD - теге style и о том, что такое CSS : )

Мне интересны ваши отзывы о том, насколько понятно написано, а также код каких дизайнов вам было бы интересно разобрать : )

Навигация по урокам
 I.  Общее представление о HEAD, WEBSITE и тд.
Tags: useful: уроки по оформлению ЖЖ, система стилей: S1
Subscribe
promo journals_covers august 1, 2013 11:15 62
Buy for 200 tokens
У меня сегодня прекрасная новость: длинные инструкции по настройкам оформления больше не нужны, потому что теперь настройки на русском! : ) '​*':'*'тут салютики'*':'*' Сначала это было сделано для Хамелеона, теперь настройки переведены для Minimalism и Expressive. Помимо перевода, настройки…
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 109 comments
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →