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


Для того, щоб зробити гарне графічне меню для групи або публічної сторінки, вам знадобиться картинка, на якій буде намальовано меню цілком з пропорціями приблизно 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]]. Повторіть цю процедуру для всіх картинок і збережіть готове меню.