Уроки по дизайну ЖЖ. Часть I.
Часто наблюдаю, что юзеры пытаются создать или изменить свой дизайн просто копированием чужого кода, то есть без понимания того что они делают. Результат бывает довольно удручающим, код сильно вырастает в размерах, а если возникает ошибка - многие не могут её самостоятельно найти, потому что в коде ничего не понимают.
Хочу попытаться исправить эту досадную ситуацию, написав универсальный справочник по кодам дизайна с примерами : )
В качестве примера я буду рассматривать один из своих кодов:
Навигация по урокам
Код дизайна:
GLOBAL_HEAD<= <=GLOBAL_HEAD LASTN_WEBSITE<=
<=LASTN_WEBSITE
FRIENDS_OPT_ITEMS=>50 <=FRIENDS_OPT_ITEMS
FRIENDS_WEBSITE<=
<=FRIENDS_WEBSITE
CALENDAR_WEBSITE<=
<=CALENDAR_WEBSITE
DAY_TALK_LINKS<=
<=DAY_TALK_LINKS
LASTN_TALK_LINKS<=
<=LASTN_TALK_LINKS
FRIENDS_TALK_LINKS<=
<=FRIENDS_TALK_LINKS
LASTN_TALK_READLINK<=
Комментариев: %%messagecount%%
<=LASTN_TALK_READLINK
FRIENDS_TALK_READLINK<=
Комментариев: %%messagecount%%
<=FRIENDS_TALK_READLINK
DAY_TALK_READLINK<=
Комментариев: %%messagecount%%
<=DAY_TALK_READLINK
Для того чтобы вам было удобно следить за моими объяснениями, скопируйте этот код в какой-нибудь текстовый или HTML'ный файл.
Примечание: редактировать коды можно хоть в блокноте, но удобнее пользоваться HTML-редакторами, в них подсвечиваются теги и атрибуты, код гораздо удобнее читать.
Сначала рассмотрим крупные элементы: GLOBAL_HEAD (и прочие __HEAD), LASTN_WEBSITE, LASTN_TALK_LINKS..
Зачем они нужны?
Это блоки вашего кода, которые встраиваются в код Вашего журнала, а иногда и заменяют имеющийся уже код. Для того чтобы понять куда они вставляются, надо рассмотреть структуру обычной HTML-страницы. Она всегда включает в себя несколько обязательных тегов, которые располагаются определённым образом:
Теги style и title необязательные, я их указала только для примера.
Тег head используется для служебных задач, его содержимое не видно непосредственно на странице, но именно в него мы вставляем стили (в тегах ), которые меняют её внешний вид.
В head также можно вставить тег , это заголовок страницы, который мы видим в шапке окна. Обычно для журналов заголовок задаётся в настройках, но вы можете поменять его в шапке таким вот образом.
Туда же можно вставить значок favicon.ico, он будет представлять ваш журнал рядом с названием страницы в браузере и в закладках (в ИЕ только в закладках). Так выглядят значки ЖЖ и Яндекса:
Как их делать и вставлять я расскажу пойже.
В теге body находится основной код страницы, тот, что непосредственно определяет её содержимое.
Вы можете просмотреть код своего журнала, выбрав в меню браузера View -> Page Source или Вид -> Просмотр HTML-кода.
Пусть вас не пугают его размеры, вы можете воспользоваться поиском для обнаружения нужных вам участков кода. В Mozille теги подсвечиваются, что значительно облегчает его просмотр.
Теперь рассмотрим куда именно встраиваются наши коды из GLOBAL_HEAD, LASTN_WEBSITE и прочие:
Название блока Предназначение Где он в результате оказывается? Что в него можно вставлять? Примечания GLOBAL_HEAD Используются как контейнеры для стилей журнала В теге head для всего журнала Тег style и всё его содержимое для конкретной страницы
Тег title для конкретной страницы
favicon.ico Тег style для каждой страницы (то есть внутри каждого HEAD) должен открываться и закрываться 1 раз, в результате ваш код должен выглядеть так:
LASTIN_HEAD В теге head, страница с вашими записями FRIENDS_HEAD В теге head, страница с записями друзей CALENDAR_HEAD В теге head, страница с календарем DAY_HEAD В теге head, страница с записями за определённый день Название блока Предназначение Где он в результате оказывается? Что в него можно вставлять? Примечания LASTIN_WEBSITE Код для верхнего меню в меню страница с вашими записями Очень полезный блок! В нем можно:
• вставлять всё что относится к верхнему меню, например просто вставить свои ссылки
• убрать стандартные ссылки вида [ userinfo | livejournal userinfo ] [ calendar | livejournal calendar ]
а вместо них вставить свои, в принципе какие угодно
• сделать меню с помощью ImageMap - это картинка, определённые области которой являются ссылками, например как тут:
Увеличить Код дизайна
Как сделать такие меню я расскажу пойже
• сюда же вставляется код блоков с вашей информацией и любимыми ссылками, как тут В коде оказывается в теге body
на странице - в меню где Userinfo, Friends и т.д., рядом с юзерпиком
FRIENDS_WEBSITE в меню на странице друзей CALENDAR_WEBSITE в меню страница с календарем DAY_WEBSITE в меню страница с записями за определённый день Название блока Предназначение Где он в результате оказывается? Что в него можно вставлять? Примечания LASTIN_TALK_LINKS Текст ссылок на добавление комментариев к постам страница с вашими записями Код типа:
%%readlink%% | Добавить комментарий
где вместо Добавить комментарий - любой ваш текст
%%readlink%% - это код который вставляет количество комментариев, надписи для него определяются в *_TALK_READLINK. (см. ниже).
Желательно прописывать для этого блока и открывающий элемент, и закрывающий, например:
LASTN_TALK_LINKS<=
здесь ваш код <=LASTN_TALK_LINKS
Можно прописать только один элемент:
LASTN_TALK_LINKS=>здесь ваш код
тогда весь код должен будет умещаться в одну строку. Если же он перенесётся и строки станет две - код работать не будет.
Поэтому лучше сразу прописывать и открывающий и закрывающий элементы
FRIENDS_TALK_LINKS на странице друзей CALENDAR_TALK_LINKS страница с календарем DAY_TALK_LINKS страница с записями за определённый день Название блока Предназначение Где он в результате оказывается? Что в него можно вставлять? Примечания LASTIN_TALK_READLINK Текст ссылок на комментарии к постам страница с вашими записями Код типа:
Комментариев: %%messagecount%%
где вместо Комментариев: - любой ваш текст
Для этого блока также желательно прописывать открывающий и закрывающий элементы, например:
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 и тд.
II. Общее представление о Css, 1-я часть справочной таблицы (фоны, рамки, шрифты)
III. 2-я часть таблицы (курсор, видимость, отступы, размеры, выравнивание, позиционирование)
IV. Применение Css к коду журнала. Понятие о P, Div, Span, Table, A, Img. Схема страницы для Genrator.
V. Эффекты перехода между страницами (IE). Что такое Favicon и как его сделать.
VI. Способы изготовления меню: замена надписей, меню справа или слева, сайдбар, ImageMap.
Хочу попытаться исправить эту досадную ситуацию, написав универсальный справочник по кодам дизайна с примерами : )
В качестве примера я буду рассматривать один из своих кодов:
Навигация по урокам
Код дизайна:
GLOBAL_HEAD<= <=GLOBAL_HEAD LASTN_WEBSITE<=
| О пользователе |
| Друзья |
| Архив |
| http://community.livejournal.com/journals_covers/"> |
| Последние записи |
| О пользователе |
| Друзья |
| Архив |
| http://community.livejournal.com/journals_covers/"> |
| Последние записи |
| О пользователе |
| Друзья |
| Архив |
| http://community.livejournal.com/journals_covers/"> |
%%readlink%% 
http://yoksel.ru/i/dises/lags/lags_comm.gif"/> Добавить комментарий
%%readlink%% http://yoksel.ru/i/dises/lags/lags_comm.gif"/> Добавить комментарий
%%readlink%% http://yoksel.ru/i/dises/lags/lags_comm.gif"/> Добавить комментарий
Для того чтобы вам было удобно следить за моими объяснениями, скопируйте этот код в какой-нибудь текстовый или HTML'ный файл.
Примечание: редактировать коды можно хоть в блокноте, но удобнее пользоваться HTML-редакторами, в них подсвечиваются теги и атрибуты, код гораздо удобнее читать.
Сначала рассмотрим крупные элементы: GLOBAL_HEAD (и прочие __HEAD), LASTN_WEBSITE, LASTN_TALK_LINKS..
Зачем они нужны?
Это блоки вашего кода, которые встраиваются в код Вашего журнала, а иногда и заменяют имеющийся уже код. Для того чтобы понять куда они вставляются, надо рассмотреть структуру обычной HTML-страницы. Она всегда включает в себя несколько обязательных тегов, которые располагаются определённым образом:
Теги style и title необязательные, я их указала только для примера.
Тег head используется для служебных задач, его содержимое не видно непосредственно на странице, но именно в него мы вставляем стили (в тегах ), которые меняют её внешний вид.
В head также можно вставить тег , это заголовок страницы, который мы видим в шапке окна. Обычно для журналов заголовок задаётся в настройках, но вы можете поменять его в шапке таким вот образом.
Туда же можно вставить значок favicon.ico, он будет представлять ваш журнал рядом с названием страницы в браузере и в закладках (в ИЕ только в закладках). Так выглядят значки ЖЖ и Яндекса:
Как их делать и вставлять я расскажу пойже.
В теге body находится основной код страницы, тот, что непосредственно определяет её содержимое.
Вы можете просмотреть код своего журнала, выбрав в меню браузера View -> Page Source или Вид -> Просмотр HTML-кода.
Пусть вас не пугают его размеры, вы можете воспользоваться поиском для обнаружения нужных вам участков кода. В Mozille теги подсвечиваются, что значительно облегчает его просмотр.
Теперь рассмотрим куда именно встраиваются наши коды из GLOBAL_HEAD, LASTN_WEBSITE и прочие:
Название блока Предназначение Где он в результате оказывается? Что в него можно вставлять? Примечания GLOBAL_HEAD Используются как контейнеры для стилей журнала В теге head для всего журнала Тег style и всё его содержимое для конкретной страницы
Тег title для конкретной страницы
favicon.ico Тег style для каждой страницы (то есть внутри каждого HEAD) должен открываться и закрываться 1 раз, в результате ваш код должен выглядеть так:
LASTIN_HEAD В теге head, страница с вашими записями FRIENDS_HEAD В теге head, страница с записями друзей CALENDAR_HEAD В теге head, страница с календарем DAY_HEAD В теге head, страница с записями за определённый день Название блока Предназначение Где он в результате оказывается? Что в него можно вставлять? Примечания LASTIN_WEBSITE Код для верхнего меню в меню страница с вашими записями Очень полезный блок! В нем можно:
• вставлять всё что относится к верхнему меню, например просто вставить свои ссылки
• убрать стандартные ссылки вида [ userinfo | livejournal userinfo ] [ calendar | livejournal calendar ]
а вместо них вставить свои, в принципе какие угодно
• сделать меню с помощью ImageMap - это картинка, определённые области которой являются ссылками, например как тут:
Увеличить Код дизайна
Как сделать такие меню я расскажу пойже
• сюда же вставляется код блоков с вашей информацией и любимыми ссылками, как тут В коде оказывается в теге body
на странице - в меню где Userinfo, Friends и т.д., рядом с юзерпиком
FRIENDS_WEBSITE в меню на странице друзей CALENDAR_WEBSITE в меню страница с календарем DAY_WEBSITE в меню страница с записями за определённый день Название блока Предназначение Где он в результате оказывается? Что в него можно вставлять? Примечания LASTIN_TALK_LINKS Текст ссылок на добавление комментариев к постам страница с вашими записями Код типа:
%%readlink%% | Добавить комментарий
где вместо Добавить комментарий - любой ваш текст
%%readlink%% - это код который вставляет количество комментариев, надписи для него определяются в *_TALK_READLINK. (см. ниже).
Желательно прописывать для этого блока и открывающий элемент, и закрывающий, например:
LASTN_TALK_LINKS<=
здесь ваш код <=LASTN_TALK_LINKS
Можно прописать только один элемент:
LASTN_TALK_LINKS=>здесь ваш код
тогда весь код должен будет умещаться в одну строку. Если же он перенесётся и строки станет две - код работать не будет.
Поэтому лучше сразу прописывать и открывающий и закрывающий элементы
FRIENDS_TALK_LINKS на странице друзей CALENDAR_TALK_LINKS страница с календарем DAY_TALK_LINKS страница с записями за определённый день Название блока Предназначение Где он в результате оказывается? Что в него можно вставлять? Примечания LASTIN_TALK_READLINK Текст ссылок на комментарии к постам страница с вашими записями Код типа:
Комментариев: %%messagecount%%
где вместо Комментариев: - любой ваш текст
Для этого блока также желательно прописывать открывающий и закрывающий элементы, например:
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 и тд.
II. Общее представление о Css, 1-я часть справочной таблицы (фоны, рамки, шрифты)
III. 2-я часть таблицы (курсор, видимость, отступы, размеры, выравнивание, позиционирование)
IV. Применение Css к коду журнала. Понятие о P, Div, Span, Table, A, Img. Схема страницы для Genrator.
V. Эффекты перехода между страницами (IE). Что такое Favicon и как его сделать.
VI. Способы изготовления меню: замена надписей, меню справа или слева, сайдбар, ImageMap.