Подготовка макета для меню


Для того,чтобы сделать красивое графическое меню для группы или публичной страницы, вам понадобится картинка, на которой будет нарисовано меню целиком с пропорциями примерно 500*1000 пикселей и базовые навыки работы в Adobe Photoshop. Предположим, вы уже нарисовали своё меню – прямоугольную картинку с основными кнопками. Но как разместить его на странице ВКонтакте и сделать функциональным, то есть работающим по нажатию на определенную область? Откройте свой макет в Adobe Photoshop, при помощи инструмента нарезки (Slice tool) разрежьте картинку на несколько отдельных горизонтальных частей, каждая из которых будет кнопкой. Затем сохраните нарезанное изображение для интернета (Save – Save for Web), желательно в формате .jpg. Вы получите несколько отдельных картинок-кнопок, которые затем можно будет разместить на странице ВКонтакте. Первая часть работы сделана!

Добавление изображений меню


Теперь вам предстоит самая ответственная часть работы: верстка и оформление. Для того чтобы создать меню, необходимо обладать правами администратора в данном сообществе. Зайдите в свою группу, справа выберите пункт «Управление сообществом». Напротив пункта «Материалы» выставьте значение «ограниченные». Вернитесь на главную страницу, теперь под описанием сообщества появился дополнительный развертывающийся значок «Свежие новости». Подсветите его, затем выберите «редактировать». Откроется окно редактирования блока. В верхней его части кликните по пиктограмме «Добавить фотографию» и загрузите заранее подготовленные изображения. После загрузки распределите их в правильном порядке. Теперь кликните на каждое изображение по очереди и в поле «ссылка» введите адрес страницы, на которую требуется переадресация при нажатии. Но это еще не всё, при предпросмотре и сохранении окажется, что между изображениями есть значительные промежутки. Это необходимо исправить.

Вёрстка


Кликните на пиктограмму с кавычками в правом верхнем углу меню редактирования страницы. Вы увидите, что ваши изображения имеют собственный код, который выглядит примерно так: [[photo169452_381609123|422px|page-6574936_174936]]. Чтобы убрать пробелы, добавьте специальный тег: nopadding, вписав его через точку с запятой после размера изображения. Результат должен выглядеть примерно так: [[photo169452_381609123|422px;nopadding;|page-6574936_174936]]. Повторите эту процедуру для всех картинок и сохраните готовое меню.