Обложки для журналов
от Yoksel

Дизайны для ЖЖ

Уроки по дизайну ЖЖ. Часть 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 и тд.
Вступите в сообщество, чтобы увидеть все дизайны
Next Entry
← назад
сил - немного, печатать задолбалась, а ещё неудобно что нельзя к посту сss'ный файл прикрутить.. : )

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

Ваше сообщество - это бесценный кладезь справочной информации, но без базовой информации ею очень трудно пользоваться
Это просто ОБАЛДЕТЬ! Сама я училась по чьим-то кодам, долго допирая, что куда. И попутно бегая выспрашивать совета в сообщества, но это было уже позже.
Все очень красиво и наглядно:) Просто умница!!!
круть. я конечно делала дизаины в жж. но с очень кривыми кодами. зачастую не понимая, что там за что отвечает, просто беря за основу чужои код. а теперь наконец-то разобралась и начну по тихоньку новыи диз у себ в жж, сеичас просто времени нету((
СПАСИБО ВАМ :)
Это восхитительно! Спасибо за проделанную работу, сейчас почитаю все следующие части =) Уже убил свой старый дизайн и решил сделать на основе генератора новый. хехе
смотрела всё много и долго... прочитала все уроки... но что то не поняла как "переделывать" форму самих записей? тоесть я вот написала пост в свой жж и хочу что бы каждый пост был в отдельном прямоугольничке (например)... или они шли одной полосой все...
скорее всего про это вы писали, но у мя бошка плохо варит... ткните носом меня туды :)
как-то раньше не задумывалась, а теперь...пропер такой вопрос - то есть имапы и сайдбары, получается, вставляются в ячейку "shadowed"??
то есть если да, то это для меня будет большим открытием...)

но тогда понятно, почему имап сдвигается при вставке - там стоит невидимый юзерпик. (а если, кстати, пытаться убрать юзерпик вообще - даже таким способом как ".shadowed td td img {display: none}", то имап тоже пропадает) следовательно, имап вставляется в табличку "meta"?

как же сайдбар?
тоже в мету?

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

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

meta - это не таблица, а ячейка, причём этот же класс у ячеек с настроением-музыкой и у навигации внизу, только вложенность разная, а самой таблице с меню класс не присвоен

то что вы вставляете в блоки WEBSITE оказывается между открывающим table и tr, посмотрите код страницы, соответсвенно если вы хотите просто добавить ссылки или сделать свои - надо вписывать их в строку и в ячейку, то есть код должен быть:
<tr>
<td>сюда вашу ссылку</td>
</tr>

а если хотите вставить мап, таблицу другого вида или что-нибудь хитрое - вписывать это в строчку-ячейку не надо, вы же не будете пользоваться табличной структурой, а меню по умолчанию спрячете.. короче ваше меню, сайдбары и прочее попадает в мету только в том случае если вы руками этот класс им пропишите, по моему - совершенно незачем : )
простите,пожалуйста))
Сразу же объясню - я полный профан в дизайнах)Делаю пока только по наитию - по примерам других жж)
посему вопрос- возможно покажется глупым)
Дизайн с имеджмепом...ваше явблочко)..возможно ли сделать так. чтобы справа или слева от яблочка высвечивался юзерпик по умолчанию?
в мемориз!
фантастика!!!
ничего не поняла =)))) все эти GLOBAL_HEAD, LASTN_WEBSITE и прочая внушают священный ужас =))
но буду очень стараться разобраться, уж больно хочется самой сделать себе дизайн :)
СПАСИБО!
Re: в мемориз!
это они по началу внушают священный ужас, на самом деле всё не так уж сложно : )) на самом деле самое главное находится в двух следующих уроках - это Css. Лучше всего сначала раздербанить какой-нить диз чтобы посмотреть как там всё устроено, а потом и свой можно делать : )
Next Entry
← назад
?

Log in

No account? Create an account