При разработке дизайна стоить знать одну главную вещь, ширина всего оформления не должна превышать 370 пикселей. Иначе картинки просто напросто не влезут в блок “Свежих новостей” вконтакте.
Для начала необходимо порезать его на отдельные кусочки. В Photoshop делается это с помощью инструмента Slice Tool. Требуется это для того, чтобы выставить нужные нам ссылки на отдельные картинки с надписями. В моем оформлении, я решил разместить 5 ссылок и две картинки(верхнюю и нижнюю) оставить без ссылок.
Сохраняем наше оформление с помощью File -> Save for Web… После этого в указанном месте автоматически создастся папка images, в которой и будет находится дизайн в виде отдельно порезанных картинок.
Далее, заходим на страничку группы Вконтакте и создаем там отдельный фотоальбом. Назовем его ” Оформление группы” и загрузим туда все картинки из папки images. В моем случае мне пришлось загрузить 7 картинок.
Теперь для удобства рекомендую оставить на одной вкладке альбом с картинками, а в новой вкладке открыть страницу группы и перейти к редактированию блока свежих новостей.
Самая пора приступить к написанию кода для вставки дизайна. Для этого давайте рассмотрим разметку сайта Вконтакте и разберемся c кодом для вставки полной картинки в блок группы.
Пример:
[[photo-880171_215099744|370x37px;noborder;nopadding;|[Ссылки могут видеть только зарегистрированные пользователи. ]
В деталях:
“photo-880171_215099744″ - id фотографий, найти его можно в строке браузера при просмотре необходимой картинки
“370x37px” – размер картинки в пикселях
“noborder” – отсутствие рамки вокруг изображения
“nopadding” – отсутствие каких-либо отступов от картинки
“[Ссылки могут видеть только зарегистрированные пользователи. ] – ссылка на нужную страницу
Думаю что все понятно и теперь легко можно составить подходящий код.
PS: Желаю удачи и красивых групп. В случае возникновения вопросов или проблем, пишите в комментарий. Так же не стесняйтесь оставлять здесь Ваши варианты оформлении.
ОБНОВЛЕНИЕ:
Во-первых хочется сказать огромное спасибо, всем кто откликнулся в комментариях. Рад что материал оказался полезным. Большинству из тех, кто задавал вопросы я постарался помочь. Решил дополнить статью, а заодно ответить на некоторые из вопросов из комментариев в более обширном виде.
Начнем, пожалуй, с самого интересного вопроса:
Как создать несколько меню и связать их между собою
Во многих группах администраторам не хватает одного меню на главной странице, поэтому они создают дополнительные страницы с новыми меню. Таким образом создаются целые архивы с продуманными структурами с довольно-таки грамотным оформлением. Итак, как же нам создать такое меню собственноручно?
На самом деле, в этом нет ничего нового. Чтобы создать расширенное меню с вложеными страницами, нам понадобиться всего лишь создать несколько новых страниц (в зависимости от количества новых меню) и разместить на них свой код (аналогичный как и в главном меню, но с новыми картинками и ссылками).
Далее, предлагаю вместе рассмотреть пример с такой структурой меню:
Итак, для примера я возьму новое оформление группы сайта. На данный момент оно выглядит так:
Заметьте, в одном месте мы ссылаемся на новую страницу, где теперь и создадим подменю. На этой странице будет размещена отдельная информация, а так же здесь мы будем ссылаться на остальные страницы отдельными тремя категориями.
Чтобы создать новую страницу в группе, необходимо использовать данный код: [[Новая страница|Название страницы]]. Чтобы узнать ID новой страницы, нужно перейти на нее, кликнув по ссылке в предпросмотре и нажать на кнопку редактирования. Теперь ID-страницы можно скопировать из адресной страки браузера (например, page-880171_44194001)
Итак, страница с категориями имеет следующий вид:
Код страницы: (ссылки на новые страницы, я не стал прописывать)
[[photo-35539675_292485563|370x179px;noborder;nolink;nopad ding|Группа ArtsLab.info]]
[[photo-35539675_292485558|370x50px;noborder;nopadding|[Ссылки могут видеть только зарегистрированные пользователи. ]
[[photo-35539675_292485559|370x50px;noborder;nopadding|[Ссылки могут видеть только зарегистрированные пользователи. ]
[[photo-35539675_292485560|370x50px;noborder;nopadding|[Ссылки могут видеть только зарегистрированные пользователи. ]
[[photo-35539675_292485562|370x50px;noborder;nolink;nopadd ing|группа сайта artslab.info]]
Я думаю на этом можно останавливаться, принцип должен быть ясен. Таким образом мы создали вложенную страницу со своим собственным меню.
Как сделать так чтобы меню открывалось в отдельном окне?
Я думаю вы уже не раз встречали такие меню (или обычные страницы) в группах, которые открываются в виде отдельного всплывающего окна поверх сайта. Пример:
Для того чтобы создать такую страницу необходимо воспользоваться подобной ссылкой:
[Ссылки могут видеть только зарегистрированные пользователи. ]
Не забудьте изменить id-страницы и группы из примера на собственные.
Можно ли сделать так, чтобы при входе в группу оформление было видно сразу, а не после нажатия на ссылку меню
Этот вопрос был задан в комментариях несколько раз, но к сожалению, пока что такой возможности нету. Все меню в группах, по умолчанию, скрыты и становятся видны только после клика по ссылке меню.
Получилось сделать тогда поставь спасибо
Очень просто
ВСЕ ССЫЛКИ ПРОВЕРЕНЫ НА ЯВНОСТЬ СПАМОВ
Всё должно работать
проверено мной
Регистрация: 14.07.2013
Сообщений: 0
Популярность: 10
Сказал(а) спасибо: 0
Как сделать Дизайн вк
Re: Как сделать Дизайн вк
