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

Шаг 1. Создаем в фотошопе шапку меню
Создаем в фотошопе документ шириной 600 пикселей. Высота может быть разная, на ваше усмотрение. Вы можете поместить в шапку любую видовую фотографию, коллаж, информационный баннер и прочие графические картинки. В данном сучае я использовала такой вот рекламный баннер размером 600х172 пикселя.

Шаг 2. Создаем в фотошопе строку навигации
Теперь нам надо создать строку навигации. В данном примере я использовала в качестве кнопок только текст. Но на ваше усмотрение можно создать цветные кнопки и уже на них написать текст. Делаем так — создаем в фотошопе прямоугольник 600х56 пикселей и в данном случае заливаем его белым цветом. Потом в строку пишем пункты меню — где-то порядка 5-6 пунктов, не больше. Большее количество пунктов будет смотреться зажато.

Шаг 3. Создаем в фотошопе строку навигации в нажатом состоянии
Теперь нам надо создать активные ссылки, так, как-будто по ним нажали. Я использовала обычное подчеркивание, но можно использовать другой цвет текста или фона для маркировки посещенной ссылки.

Шаг 4. Нарезаем готовые картинки
На данном этапе нам надо нарезать картинки из Шага 2 и Шага 3. У нас должно получиться два комплекта по пять кнопок — одна кнопка без подчеркивания, другая кнопка с подчеркиванием. Кнопки каждого отдельного пункта (с подчеркиванием и без подчеркивания) должны быть одинакового размера. На картинке ниже представлено все наше графическое оформление — десять кнопок и одна шапка меню.

Шаг 5. Создаем Вконтакте страницу Меню
Теперь переходим ВКонтакт. Наша задача — создать отдельную страницу под названием «Меню». Для этого мы воспользуемся таким кодом
http://vk.com/pages?oid=-XXX&p=Нaзвание_страницы
где вместо ХХХ мы подставим id нашей группы, а вместо текста «Название страницы» мы напишем Меню. Теперь надо выяснить id группы. Как это сделать? Заходим на главную страницу группы и смотрим на наши записи на стене — прямо под блоком «Добавить запись» будет написано «Все записи» — нажимаем на эту ссылку.

Шаг 6. Определяем id группы и редактируем код
Переходим на страницу и видим урл такого вида https://vk.com/wall-78320145?own=1 , где цифры 78320145 в данном примере и есть id группы. Подставляем наши данные в исходный код и получаем запись такого вида:
http://vk.com/pages?oid=-78320145&p=Меню (с вашими цифрами!). Вставляем эту строку в адресную строку браузера и нажимаем Enter. Так мы создали новую страницу Вконтакте и изначально она выглядит так.

Шаг 7. Создаем Вконтакте остальные страницы навигации
Аналогичным образом мы создаем еще четыре страницы навигации: Цены, Как заказать, Техзадание и Вопросы. То есть еще четыре раза копируем в адресную строку браузера соответствующий код (с вашими цифрами id в примере ниже мои цифры):

http://vk.com/pages?oid=-78320145&p=Цены

http://vk.com/pages?oid=-78320145&p=Как_заказать

http://vk.com/pages?oid=-78320145&p=Техзадание

http://vk.com/pages?oid=-78320145&p=Вопросы
Обратите внимание, в названии страницы из двух слов (Как заказать) пробел между словами заменен на нижнее подчеркивание Как_заказать. Теперь у нас есть пять готвых страниц под каждый пункт меню. Страницу Портфолио мы не создавали поскольку она размещается на странице Меню

Шаг 8. Загружаем фотографии на первую страницу меню
На созданной, пока еще пустой странице (см. Шаг 6) Меню нажимаем на ссылку Редактировать или на ссылку Наполнить содержанием. После этого мы видим панель редактирования. Здесь нам надо нажать на значок фотоаппарат с функцией Загрузить фотографию. Важно! Обратите внимание на то, чтобы у вас стоял режим wiki-разметки. Переключение режимов регулируется значком у правого края страницы.

Шаг 9. Результат после загрузки картинок
Загружаем наши картинки, которые мы создавали в Шаге 1 и Шаге 2. После загрузки мы видим такой код, как на картинке ниже, а само меню выглядит так. После каждого изменения кода не забываем нажимать Сохранить страницу, а потом нажать предпросмотр для просмотра результата.

Шаг 10. Редактируем код картинок
Теперь наша задача заменить все свойства noborder на свойство nopadding. А у первой картинки проставить реальные размеры, поскольку Вконтакт при загрузке ужал картинку до 400 пикселей. После всех изменений мы должны получить такой код и такое меню.

Шаг 11. Проставляем ссылки для картинок
Теперь мы должны проставить ссылки для каждой картинки. Ссылку надо вставлять после nopadding| вместо пробела перед закрывающими скобками. Для первой картинки (шапка меню из Шага 1) можно дать ссылку на главную страницу группы, а можно воспользоваться свойством nolink (ставится через; после nopadding без пробелов). Для второй картики вставляем адрес страницы формата page-78320145_49821289 . То есть полный урл картинки https://vk.com/page-78320145_49821289 , до первую часть с доменом можно опустить. А вот для ссылок на внешние сайты урл ссылки надо указывать полностью.

Шаг 12. Копируем код на остальные страницы навигации
На этом, достаточно простом шаге, мы копируем последний код из предыдущего шага и вставляем его на остальные созданные страницы — Цены, Как заказать, Техзадание и Вопросы. Находимся на странице, нажимаем Редактировать или Наполнить содержанием (находимся в режиме wiki-разметки), вставляем код и нажимаем Сохранить. И потом также на следующей странице. То есть сейчас у нас есть пять страниц, на каждой из которых меню выглядит абсолютно одинаково. Но зато уже можно осуществлять навигацию по меню — при нажатии на ссылку например Цены, мы переместимся на страницу Цены итд.

Шаг 13. Делаем эффект нажатой кнопки
Теперь нам предстоит на каждой из пяти страниц поменять одну картинку (кнопку без подчеркивания заменим на кнопку с подчеркиванием). Например, на первой странице Меню мы загружаем новую картинку и потом заменяем в коде адрес старой картинки на новый (подчеркнуто красным). Потом переходим на страницу Цены, загружаем картинку с подчеркнутыми Ценами и меняем в коде на адрес новой картинки. Потом заходим на страницы Как заказать, Техзадание и Вопросы и делаем туже самую операцию аналогичным образом.

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

Меню оформленное таким образом не адаптировано под мобильные устройства. При уменьшении размера экрана картинки начинают съезжать одна под другую. Для того чтобы сделать адаптивный дизайн, нужно использовать таблицы для жесткой версти. Но это уже другая история и более продвинутая техника. А пока посмотрите на различные варианты графического формления меню.

И снова рад Вас приветствовать!

В сегодняшней статье речь пойдет исключительно про группу вконтаке, хотя в большей части, я предпочитаю работать с публичными страницами. Но когда в прошлой статья я затронул на примере своего паблика, у многих возникли вопросы, именно про меню для группы.

Как создать меню в группе вконтакте

Вот что у меня получилось.

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

И так. Вот основные шаги:

  • Продумать основное меню
  • Выбрать изображение
  • Фотошоп (без фотошопа как всегда никуда 🙂)
  • Раскройка изображения
  • Заливка изображения в альбом контакта

Чтобы активировать свежие записи (для Вашего будущего меню) , нужно зайти в управление сообщества и включить пункт — «Материалы»

После того, как материалы будут включены, в верхней части группы появится пункт «Свежие новости», в котором и нужно будет создавать меню. Также как и с любой страницей контакта, мы попадаем в редактор, в котором можно как вручную заливать изображения или кнопочки меню, так и через wiki-разметку (кнопочка в правом верхнем углу).

Как Вы догадались, проще всего сначала нарисовать необходимую картинку в фотошопе, и заранее поместить на нее кнопочки, в будущем они будут ссылками.

В своём примере я использовал фон девушки, и поместил слева от нее 3 кнопки. Каждая кнопка — имела своё название.

Мое меню состояло из следующих пунктов:

Для внедрение готового изображения в контакт, предварительно его нужно раскроить. Для этого в фотошопе используем инструмент «Раскройка «. Думаю с этим сложностей не возникнет. Там всё просто… На всякий случай, сделал фото 🙂

Выбираем данный инструмент и начинаем «резать». У меня получилось 4 части. (самое простое, что придумал:), хотя можно изрезать его на кусочки)

Все необходимые работы по созданию меню выполнены. Теперь можно приступить к созданию меню вконтакте. Для этого поочередно загружаем изображения в контакт. Вот что получилось в итоге:

Теперь нажимаем на каждую кнопку (или часть изображения), и присваиваем необходимый адрес (ссылку). Чтобы убрать лишние пробелы нужно использовать тег «nopadding» (в меню Wiki-разметки)

Тег «nopadding» – убирает пробелы между картинками, то есть помогает «состыковать» их вплотную к друг другу.

В результате добавления тега, получилось следующее:

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

У многих видел, что делают продолжение основного аватара. Получается как одно целое изображение. Красиво смотрится. Но для создания такого, нужно лучше разбираться в фотошопе 🙂 .

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

Ответ: Данную возможность насколько мне известно убрали администраторы Vkontakte. Раньше была отдельная кнопочка, чтобы меню было фиксированным — открытом. Затем эту функцию убрали, и теперь менюшки приходится открывать отдельно.

Хотя, встречал у некоторых открытые по умолчанию… и кто то даже говорил, что существует какой-то код, который справляется с этой проблемой. Но я бы не советовал использовать его. Судя по обсуждениям на многих форумах, админы это не приветствуют!

А на сегодня всё. До связи!

Привет дорогие друзья, последнее время, если Вы могли заметить, я много пишу про социальную сеть Вконтакте и ее премудрости! Не удивляйтесь, я не собираюсь пока менять своего основного направления — быть блогом шпоргалгой для самого себя, ну и для людей конечно! 🙂

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

Итак, сегодня я хочу рассказать — как более умело управлять своим аккаунтом Вконтакте, ну и конечно, как можно делать любые меню в группе и паблике Вконтакте. Не так давно, благодаря одному хорошему человеку — Марине Лазаревой и ее статье « VKopt - что это такое и зачем он нужен администраторам вконтакте?» , я узнал о небольшом бесплатном скрипте (VkOpt — это сокращение от полного названия Vkontakte Optimizer), который создан для облегчения пользования социальной сетью Вконтакте.

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

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

Интересно, что изначально данный скрипт был создан в далеком уже 2007 году для скачивания видео, в тогда уже набирающей популярность социальной сети Вконтакте.

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

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

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

Далее, на этой же вкладке ниже, благодаря Vkontakte Optimizer появились ссылки, кликнув на них, я получаю доступ ко всем созданным Вконтакте размерам данной картинки или фото от маленькой иконки, до максимальной закаченной картинки. В обыденности, Вконтакте представлены фото с шириной 604 пиксела. Все копии открываются в полном размере, где их можно легко скачать.

Тут же, появилось несколько кнопок, одна из них — поиск копий Google. Нажав ее, с большой вероятностью можно найти настоящего автора данной картинки или фотографии, например, нажав на мое фото — гугл обнаружил копию этой фотографии, только в моей же статье про север Таиланда на нашем трэвел блоге. Таким же образом, можно узнать о несанкционированным использовании Вашего фото другими людьми. А еще забавно — гугл пытается найти картинки, похожие по цветовой гамме на представленную фотографию.

Далее, захожу во вкладку мои группы, здесь тоже появились новшества, сверху в правом углу я заметил новую кнопку, видимо для тех людей, кому всё надоело, или кто жаждет больших перемен. Там расположилась кнопка Покинуть все, т.е. одним кликом можно выйти из всех групп одновременно.

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

Выше были рядовые функции, просто понравившиеся лично мне, а теперь, ближе к делу! Нахожу пример группы Вконтакте с красивым дизайном . Предположим, мне нужно посмотреть исходники дизайна данной группы и сделать у себя что-то подобное. Если нажать на меню этой группы получается милая картинка — это один из вариантов . А вот в правой части группы, благодаря скрипту Vkontakte Optimizer появилась кнопка -> Список Wiki-страниц.

Нажимаю на список Wiki-страниц, и получаю исходный код wiki-разметки, который использован при создании меню этой группы Вконтакте.


Как Вы понимаете, чтобы создать подобное меню группы Вконтакте, у меня уже есть код, и мне даже не надо изучать wiki-разметку, хотя, это еще никому не мешало!

А теперь, мне только не хватает исходников картинок к этому меню для примера. В этой же группе нахожу альбом с фото, где и расположены исходники меню.

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

Как Вы понимаете, здесь нет никакого плагиата в том, что я беру исходный код wiki-разметки у определенного автора, идею с размерами и расположением картинок, в созданном им меню в группе или паблике Вконтакте. Я только учусь у этого автора на его конкретном примере. После чего, создаю свои картинки в фотошопе и свое меню.

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

Еще хотел затронуть один вопрос, меня уже несколько раз спрашивали можно ли паблик Вконтакте сделать группой Вконтакте? Отвечаю — теперь можно, благодаря скрипту Vkontakte Optimizer, в паблике появляется новая кнопка — перевести в группу. Испытывать эту возможность я не стал, мне ни к чему. Ну как я понимаю, там придется заново приглашать всех подписчиков в группу, а если их тысячи, это не очень удобно!

Приветствую, дорогие друзья и гости блога. Сегодня поговорим про создание менюшек в ВК и как это делать в новом дизайне социальной сети. Есть реально существенные изменения, о которых надо знать так как если меню сделано в старом дизайне, о котором я писал , то картинки могут покоситься.

Меню группы Вконтакте – это ее лицо. Именно его пользователь видит, когда только заходит в сообщество, и от того, насколько все доступно и привлекательно оформлено, во многом зависит, станет ли он постоянным участником группы.

ВАЖНО: После смены общего дизайна в ВК, сменились и размеры картинок для меню в соц.сети. Проверьте свои работы и внесите изменения в группах о которых пойдет речь далее.

Виды меню и их особенности

Первым делом при создании сообщества стоит определиться с его главной целью. Именно от этого зависит будущий дизайн меню и его функциональные особенности.
В зависимости от целей группы, меню может быть:

  • для информационной площадки;
  • ;
  • для обучающей площадки.

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

Меню торговой и обучающей пабликов могут быть схожими. Цель и того, и другого – помочь своему пользователю сориентироваться в ассортименте товаров или услуг. Меню для продаж, как правило, включает такие разделы, как Каталог товаров, Оплата, Доставка, Акции и скидки, а для обучения может ограничиться разделами с описанием услуг, так как здесь главное – чтобы пользователь нашел нужную ему обучающую программу или материал.

Как создать меню в группе Вконтакте: пошаговая инструкция

Весь процесс можно разделить на 2 этапа:

  • Работа в фотошопе;
  • Добавление разделов и картинок в самой группе.

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

На первом этапе создается аватарка группы и непосредственно изображения для самого меню. Гармоничнее будет смотреться единое изображение и для аватарки, и для меню.

К выбору или созданию аватарки следует отнестись со всей серьезностью, так как многие пользователь обращают на нее особое внимание. Подходящую картинку можно найти в Интернете и добавить к ней надпись или какие-либо элементы в Фотошопе, а можно самому сделать абсолютно уникальное изображение.

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

Алгоритм действий:

  • Открываем Фотошоп и заходим в «файл» - «создать» и устанавливаем ширину и высоту: 760X500 соответственно.

  • Выбираем инструмент «раскройка», а затем – «разделить фрагмент». Делим изображение на 3 части по горизонтали. Для фрагмента с левого или правого края в выпадающем окне (в зависимости от того, какую часть хотите видеть на аватарке) пишем значения ширины и высоты – 200XXи Y) – 560 и 0. Это будет аватарка группы.

  • Для следующего фрагмента устанавливаем значения ширины и высоты – 50X500, а в координатах пишем 510 и 0. Это пространство между аватаркой группы и меню. Данная часть в дальнейшем не понадобится.

  • Снова выбираем «разделить фрагмент» и делим по вертикали на 2 части. Для фрагмента сверху устанавливаем значения: ширина – 510, высота – 182, координаты – 0. Это пространство над меню. Данную часть также не будет видно в группе.

  • Теперь копируем на созданный и разделенный объект выбранную или созданную картинку. Если горячие клавиши CTRL+V не поддаются, просто откройте место на компьютере, где сохранено изображение, и перетащите его в Фотошоп.

  • Оставшееся пространство делим по вертикали на такое количество фрагментов, сколько разделов будет в меню. Для них значения можно не устанавливать.
    Пишем название каждого раздела.

  • Последний шаг – сохранение изображений. Необходимо сохранить картинки так: файл – сохранить для Web. Этот способ подойдет для более поздних версий Фотошоп. Если в разделе «файл» надписи «сохранить для Web» нет, значит, поступаем следующим образом:

Заходим в пункт «файл», выбираем «экспортировать» - «сохранить для Web». Все параметры оставляем как есть. Снова жмем «сохранить».

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

Теперь приступаем ко второму этапу, чтобы точно разобраться, как создать меню в группе Вконтакте – непосредственно добавлению меню в паблик. Для этого:

  • В первую очередь нужно подключить Материалы, так как добавлять какие-либо разделы на главной странице можно только так. Чтобы сделать это заходим в Управление сообществом и в самом низу страницы выбираем «Материалы», а затем – «открытые». Сохраняем изменения.

  • Загружаем все фотографии в группу, кроме аватарки и тех частей, которые не понадобятся. Чтобы фотографии отобразились на главной странице нужно зайти снова в Управление сообществом и нажать напротив вкладки «фотографии» - «открытые».
  • Загружаем аватарку.
  • Следующий шаг- включение режима wiki-разметки. Сделать это можно, нажав иконку с ромбиками в правой части страницы в разделе «редактировать».

  • Здесь же вставляем код для разметки: [], где [] - ссылка на раздел или страницу, куда будет осуществляться переход путем нажатия на фотографию. Можно добавлять, как ссылки на разделы в самом Вконтакте, так и на внешние ресурсы.
  • Данный код дублируется столько раз, сколько разделов в меню, каждый раз вставляя ссылки.
    При желании меняем также вкладку «свежую новости», например, на «меню.

  • Жмем «сохранить страницу», возвращаемся в главный раздел группы и обновляем страницу. Меню по умолчанию закрытое, но пользователь, нажав на соответствующее название, сможет открыть его разделы и перемещаться по ним.

На этом весь процесс закончен, но обязательно стоит проверить, работают ли ссылки и совпадают ли границы фото.

Сервисы для создания меню группы

Если вы так и не поняли, как создать меню в группе Вконтакте и пошаговая инструкция вам не помогла, можно воспользоваться специальными сервисами, которые создадут и даже добавят красиво
оформленное меню в группу.

Одним из наиболее популярных сервисов является MenuMake. После подачи заявки заказ будет готов уже через 5 минут, а затем по желанию меню будет добавлено в группу. При этом учитываются все пожелания заказчика по дизайну и количеству разделов.

С уважением, Галиулин Руслан.

Как известно, человек, читая или попадая на тот или иной веб-ресурс, первые 8 секунд обращает внимание на дизайн и интерфейс. Параллельно он убеждается в хорошем или плохом юзабилити (удобстве пользования). Меню в группе в социальной сети «Вконтакте», о котором мы сегодня и поговорим и рассмотрим принцип его конструирования на примере, позволяет не только красочно преподать информацию и «отличиться» от конкурентов в лучшую сторону, но и выявить именно те пункты и сделать на них акцент, которые необходимы.

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

Приступим. Для начала, следует отметить, что, если вы хотите сделать меню сами с нуля, то вам понадобится вся нижеследующая информация. В том случае, если дизайн уже есть, то можете пропустить часть статьи пи перейти непосредственно к его размещению и wiki-разметке.

Дизайн меню

Позволяет выполнить основу для будущего проекта. Чтобы выполнить данную часть работ, приветствуется знание такой программы, как «Adobe Photoshop». Вот так выглядит шаблон размеров, в котором мы будем реализовывать будущее красивое меню.

Ширина аватара составляет 200 пикселей, высота – 500. Картинка основного меню – 510*308. В результате мы получим вот такую красивую «менюшку» в конце.

Обращаем внимание на то, что в зависимости от информации, расписанной после названия группы, может меняться высота картинки справа (аватара), а соответственно и все что расположено рядом, может сместиться!

Данный исходник PSD-макета был реализован для примера. Скачать .

Не будем заострять внимания на том, как делался шаблон, приступим сразу к его подготовке для размещения в новую или уже существующую группу. Открываем файл в «Фотошопе».

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

Заходим в раздел «Изображение» и выбираем операцию «Тримминг».

На выходе получаем:

При большом весе получившегося изображения, можно воспользоваться инструментом «Сохранить для Web». Команда также находится в разделе «Файл».

Проделываем аналогичную операцию с изображением, которое будет выводиться при первичном отображении меню. В нашем случае, оставляем видимыми – папку «открыть меню» и «фон меню» в папке «меню с машиной». На выходе в результате:

Теперь необходимо выполнить сохранение и нарезку второго уровня меню. Для этого оставляем видимым «фон меню» в папке «меню с машиной» и добавляем к нему «Меню второй уровень».

Затем воспользуемся инструментом «Раскройка», найти который можно в меню слева.

«Разрезаем» нашу картинку на соответствующие части. В нашем случае их будет три.

На этом подготовительная часть закончена. Приступаем к основному этапу.

Wiki-разметка готового меню в «Вконтакте».

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


Затем обязательно проделываем следующую последовательность действий. Заходим в «Управление сообществом» и в пункте «Разделы» напротив кнопки «Материалы» выбираем «Ограниченные».

Сделать это необходимо, чтобы пользователи и участники группы не могли изменять и/или редактировать дополнительные позиции, в том числе и меню.

После проделанной операции загружаем наши нарезанные картинки в альбом сообщества.

Переходим в раздел «Свежие новости», выбираем «Редактировать» и попадаем в меню редактора.

Чтобы убыстрить процесс, воспользуемся клавишей «Фотоаппарат» и нажмем «Выбрать из фотографий сообщества».

После добавления снова попадаем в меню редактора и нажимаем клавишу «<>», в которой произведем дальнейшее редактирование. Также сразу переименовываем раздел и вместо «Свежие новости» пишем в нашем случае «МЕНЮ ГРУППЫ».

Общая структура каждой нарезанной части выглядит следующим образом в разметке - [], где:

    id – идентификатор (номер) картинки, которую вы загрузили;

    X и Y – размер изображения по горизонтали и вертикали в пикселях;

Глядя на шаблон, редактируем нашу wiki-разметку и периодически заходим в раздел «Предпросмотр», в которой визуально отображаются внесенные нами изменения.

Сразу все картинки необходимо закрыть тегом (а не как стоит изначально по умолчанию, каждое изображение)

…
, который автоматически размещает все части меню по центру страницы!

Так как тег, центрирующий изображение, мы уже оставили один, то, чтобы избавиться от «неприятных» расстояний между частями общего изображения, следует вставить тег «nopadding» следующим образом: []

Вот что получается в итоге.

Теперь следует нажать на вкладку «МЕНЮ ГРУППЫ», потом «редактировать».

Важно! Чтобы скопировать необходимый адрес, нажимаем в нашем варианте на «МЕНЮ ГРУППЫ» и копируем оттуда «правильную ссылку».

Переходим на главную страницу, нажимаем «Добавить запись». Не забываем сразу же поменять автора записи!

Нажимаем на «многоточие» справа от записи и кликаем по вкладке «Закрепить».

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

При нажатии на «Открыть меню».

Как видите, сделать меню в социальной сети «Вконтакте» достаточно легко и просто. Достаточно иметь легкий уровень знаний пользования «Фотошопом» и wiki-разметки. Чем лучше и понятливее дизайн, тем охотнее и чаще будет потенциальный пользователь приходить и возвращаться в вашу группу.

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