Уроки по дизайну ЖЖ. Часть VI.
Внимание: это уроки для устаревшей системы стилей S1.
Перейти к актуальным урокам →
В этом уроке речь пойдёт о разнообразных меню для вашего журнала, от простой русификации до ImageMap'ов.
Самый простой вариант сделать себе другое меню - это вставить в блоки *_WEBSITE ваше меню и ссылки и скрыть меню по умолчанию. Как это делается?
Навигация по урокам
Важно!
• все приведённые примеры действительны только в Generator, я не могу обещать что они будут работать в других вариантах оформления.
• Для того чтобы отображалось ваше меню, в юзеринфо НЕОБХОДИМО указать САЙТ Пример дизайна с простым меню:
Увеличить | Код дизайна
Нас интересуют блоки WEBSITE, рассмотрим их содержимое на примере LASTN_WEBSITE:
LASTN_WEBSITE<= О пользователе Друзья Архив <=LASTN_WEBSITE
Это самый корректный способ встроить ваше меню в код страницы. Вспомним схему из 4-го урока, часть которая отображает верхнее меню:
Две строки, по пять ячеек каждая, у всех ячеек один и тот же класс - meta. Чтобы ячейка для нашего меню растягивалась на все 5 ячеек стандартного меню, указываем colspan="5". Так как встраивается оно между открывающим тегом table и открывающим тегом tr для стандартного меню, своё меню необходимо заключить в tr, затем в td.
Пример дизайна с меню в таблице
Увеличить | Код дизайна
Вообще можно прямо в это td вставить нужные ссылки, но можно разместить их в таблице и вставить в ячейку уже таблицу (как в примере), это смотря что вы хотите получить в результате и насколько управляемым должно быть меню.
Чтобы было удобно управлять свойствами ячеек, у них заданы классы. Если вы не хотите делать с ними ничего особенного, можно обойтись без этого.
Как встраивается меню в код страницы:
О пользователе Друзья Архив [ userinfo | livejournal userinfo ] [ calendar | livejournal calendar ] Оранжевым я выделила кусок встраиваемого кода. Обратите внимание: класс meta только у ячеек стандартного меню, соответственно чтобы его убрать достаточно всего одной строчки:
.shadowed td.meta{display:none;} стили вставляются в блоки *_HEAD внутрь тега style, думаю все помнят
Строка обращается ко всем ячейкам с классом meta находящимся внутри ячейки shadowed, то есть прочие ячейки с тем же классом на странице затронуты не будут. Это я к тому, что совершенно не зачем использовать неуклюжие конструкции вроде этой:
table table table table .meta { visibility: hidden;} table table table table table .meta { visibility: visible;}
Помимо громоздкости кода, ещё одним недостатком является то, что visibility: hidden; просто скрывает элемент, он продолжает занимать место на странице и растопыривать собой ячейки. Тогда к visibility: hidden; добавляют ещё position:absolute; top:0; - и код раздувает ещё больше...
Если же указать display:none, элемент исчезает вообще, как будто бы в коде его не было и при этом он никак не влияет на окружающие элементы.
Это самый простой вариант, но можно сделать меню сложнее, например вот:
Увеличить | Код дизайна
В этом дизайне пункты меню в виде кнопок расположены слева от ленты постов (вы можете расположить их где хотите). Каждая кнопка представляет собой див окружённый ссылкой. Эта конструкция позволяет располагать меню на странице как вам нравится и менять цвет у кнопок при наведении курсора.
Рассмотрим код:
LASTN_WEBSITE<=
О пользователе
Последние записи
Друзья
Архив <=LASTN_WEBSITE Так как это меню не будет встраиваться в таблицу с меню по умолчанию, заключать его в td и tr не надо. А вот чтобы было удобно двигать все пункты сразу, они заключены в общий див и ему присвоен класс.
Теперь о стилях для этого меню.
.menu_left{ /*стили для дива с кнопками меню*/ position:absolute; left:30px; margin-top:-50px; } /*при указании top и left меню вообще пропадало в ИЕ, поэтому один из отступов лучше задать как margin, в данном случае margin-top:-50px;*/ .menu_left div{ /* дивы с пунктами меню */ padding:7px; margin-bottom:20px; } Я удалила из кода всё что не относится к позиционированию меню на странице. Оформление кнопок как у дизайна взятого для примера вы можете посмотреть в его коде.
На самом деле, и это меню не очень сложное, но с ним можно делать много интересного, например имитировать кнопки или использовать какие-нибудь красивые шрифты, вот пара примеров:
Увеличить | Код дизайна
Увеличить | Код дизайна Меню такого типа тоже позволяет менять цвет кнопки при наведении (посмотреть можно в первом дизайне).
Делается это следующим образом: сначала каждому из дивов с пунктами меню присваивается свой класс, в стилях указываем для каждого из них фоновый рисунок с изображением кнопки (для каждого пункта меню должна быть своя картинка), а затем в стилях же указываем какая картинка у дива должна стать фоновой при наведении курсора. Как это выглядит в записи:
div.last{ /* див с кнопкой для последних записей, то есть ссылка на сам журнал. */ height:45px; background:url('первый фон'); background-repeat:no-repeat; } a:hover .last{ /* здесь задаётся реакция дива на курсор, в данном случае при наведении меняется картинка */ background:url('второй фон'); background-repeat:no-repeat; } Обязательно указывайте высоту и ширину дива! Иначе он будет размером с точку и никакого фона, соответственно, не будет видно : )
В ИЕ такое меню отображается немного глючно, кнопки "моргают" при наведении курсора, но на функциональность это не влияет.
И последний вид меню о котором я хочу рассказать - ImageMap. Это картинка с задаными активными областями, которые работают как ссылки.
Примеры дизайнов с ImageMap
Увеличить | Код дизайна
Увеличить | Код дизайна
Как это делается?
Рисуете картинку с кнопками для меню, открываете её в программе ImageReady (она ставится вместе с фотошопом, есть и другие программы), с помощью этого инструмента
выделяете область которую вы хотите сделать активной.
Выделение может быть прямоугольным, круглым или многоугольным, для этого выберите нужный вам вариант инстумента.
Затем в панели Image Map в поле Url задаёте ссылку для этой кнопки. Это нужно проделать со всеми кнопками на рисунке, присвоив каждой свою ссылку.
Теперь Image Map надо сохранить. Если картинка уже подготовлена к публикации в сети, можете в Save Optimized As.. (не знаю как в русской версии) выбрать сохранение только HTML-кода.
Если же картинка требует подготовки, в панели Optimize можно выбрать параметры сохранения изображения и сохранить картинку вместе с кодом для неё.
Далее необходимо разместить картинку с кнопками в сети и в коде Image Map в строке типа
сайдбары . Они могут служить контейнером для ваших ссылок, небольших картинок, коротких рассказов о себе и всякой всячины. Очень полезная штука! : )
Располагаться сайдбары могут и справа, и слева, расположение на странице задаётся так же как для меню в предыдущих примерах.
Вот примерный код для сайдбара:
Пример дизайна с сайдбаром
Увеличить | Код дизайна Это в блоки *_WEBSITE:
Редактировать
Записи
Юзерпики
Инфо
Оформление
Хотите рассказать о себе?
Или сделать список любимых друзей?
А это место для пометок на полях : )
А это в HEAD, к остальным стилям:
.menu_left{ width:220px; position:absolute; left:20px; margin-top:0px; text-align:left; } Содержимое внутри основного дива с сайдбаром можно рассовать по другим дивам и задать отдельные свойства каждого из них (например всем сделать разный фон : ))
Если меню справа или слева уже есть, можно добавить в него содержимое сайдбара.
Важно!
• все приведённые примеры действительны только в Generator, я не могу обещать что они будут работать в других вариантах оформления.
• Для того чтобы отображалось ваше меню, в юзеринфо НЕОБХОДИМО указать САЙТ
И эта.. поправьте если что-нибудь не написала : )
Навигация по урокам
I. Общее представление о HEAD, WEBSITE и тд.
II. Общее представление о Css, 1-я часть справочной таблицы (фоны, рамки, шрифты)
III. 2-я часть таблицы (курсор, видимость, отступы, размеры, выравнивание, позиционирование)
IV. Применение Css к коду журнала. Понятие о P, Div, Span, Table, A, Img. Схема страницы для Genrator.
V. Эффекты перехода между страницами (IE). Что такое Favicon и как его сделать.
VI. Способы изготовления меню: замена надписей, меню справа или слева, сайдбар, ImageMap.