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