Зарегистрируйтесь, чтобы не вводить цифры
E-Mail
 *
Пароль *
Придумайте пароль, который будет использоваться для входа на наш портал
Пароль еще раз *
Фамилия, имя *
Как вы узнали о TiBiMi.ru? *
* Поля обязательные для заполнения.

Урок 4. Оформление группы ВКонтакте. Часть 3. Как оформить меню в группе в ВКонтакте

11 Ноября

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

В прошлом уроке Оформление группы ВКонтакте. Часть 2. Рисуем графическое меню в Photoshop мы разобрались, как нарисовать красивое меню для вашей группы. А сегодня мы научимся размещать меню непосредственно на странице в ВКонтакте и создавать для него внутренние страницы. Итак, поехали!

Шаг 1. Загружаем элементы меню на сайт vk.com

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

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

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

Нажмите кнопку Сохранить фотографии внизу страницы. Ваш альбом теперь выглядит примерно так:

Осталось собрать из этих частей меню группы.

Шаг 2. Собираем меню из элементов

Заходим на страницу редактирования меню (как это сделать, смотрите во втором уроке). Проверяем, чтобы был включен режим редактирования Режим wiki-разметки. Сейчас у вас здесь (если вы выполняли задания второго урока) написаны пункты вашего меню, заключенные в квадратные скобки. Их мы пока не трогаем, а пишем ниже:

[[photo-уникальный_номер|388px;noborder;nopadding| ]]

уникальный_номер - это номер фотографии, который присваивается ей при загрузке на сайт vk.com. Чтобы его посмотреть, откройте загруженную фотографию, кликнув по ней, и посмотрите в адресную строку браузера:

388px – это ширина вашего меню

Noborder – означает, что вашим элементам меню не добавляется обводка по контуру черным цветом

Nopadding – означает, что между картинками не будет расстояния (что нам и нужно, чтобы меню было цельным).

Пробел в конце обязателен, иначе ничего не получится.

У вас должно получиться столько строчек, сколько пунктов в вашем меню (и, соответственно, сколько вы рисовали картинок):

Будьте внимательны и не перепутайте порядок расположения картинок.

Заходим на главную страницу группы, обновляем ее (нажимаем кнопку Обновить в браузере или просто F5). Любуемся полученным результатом!

Шаг 3. Прикрепляем к меню внутренние страницы

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

Нажимаем на первую из них (у нас это ссылка Как заказать) и видим перед собой сообщение о том, что страница Как заказать пуста, с предложением наполнить ее содержанием:

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

Сразу проверяем, какой у нас установлен доступ к странице (напомним, что доступ к просмотру страницы нужно установить - Все пользователи, а доступ к редактированию – Только редакторы и администраторы), и наполняем ее информацией.

Наполняя страницу информацией, вы можете для расставления акцентов использовать панель форматирования текста, чтобы сделать текст жирным, курсивным, добавить выравнивание или список:

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

Поскольку вы находитесь в режиме wiki-разметки, то при применении команд форматирования к вашему тексту будут добавляться определенные символы. Например, при выборе команды курсив, то слово, которое вы хотите выделить курсивом, будет окружено кавычками. Эти символы – и есть элементы языка wiki-разметки. Чтобы посмотреть, как будет выглядеть текст на странице, нажмите кнопку Предпросмотр:

И вот, что получится:

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

При помощи полученных знаний расставляем акценты на нашей странице и нажимаем Сохранить страницу. Вот  что у нас получилось (на забывайте, что это всего лишь пример):

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

Остается выяснить адреса только что созданных вами страниц и прикрепить их к меню.

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

И теперь добавляем этот адрес к тому коду, который вы писали для меню:

[[photo-уникальный_номер|388px;noborder;nopadding|адрес страницы]]

Будьте внимательны и не перепутайте ссылки. В нашем примере получилось так:

Удаляем строки, отмеченные на картинке, и сохраняем страницу.

Поздравляем, меню вашей группы готово!

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

Жигунов Алексей 20.02.2014, 04:07 #

я сделал еще кнопку каталог, которая ведет ко всем альбомам, как ее к ним привязать?

Башара Ольга 20.02.2014, 18:11 #

напишите адрес вашей группы ВК

Жигунов Алексей 22.02.2014, 03:12 #

http://vk.com/club66150458

Башара Ольга 22.02.2014, 12:48 #

Ссылку на раздел со всеми альбомами нужно делать как ссылку на сторонний сайт, т.е. она должна иметь вид
[[photo-59792224_313312438|388px;noborder;nopadding|
http://www.sitename.com]]

Конкретно для вашей группы:
[[photo-66150458_323169382|388px;noborder;nopadding|
https://vk.com/albums-66150458]]

Жигунов Алексей 22.02.2014, 21:26 #

спасибо!)

Самсонов Алексей 28.04.2014, 14:43 #

Здравствуйте! А возможно ли сделать так, чтобы при нажатии на одну из тем графического меню пользователи попадали в одну из тем из раздела "Обсуждения"? Пробовал вставить вместо адреса страницы - адрес конкретной темы - ничего не происходит, при наведении на соответствующий раздел графического меню отображается адрес обсуждения, но при клике - открывается изображение фрагмента меню.

Башара Ольга 28.04.2014, 16:39 #

Привет, заходите в следующий 5 урок http://www.tibimi.ru/blog/2013/11/urok_5_chto_takoe_obsuzhdeniya_i_v_chem_ih_polza_dlya_biznesa в конце урока описано Как добавить ссылку на обсуждение в меню группы ВКонтакте

Гордиенко Андрей 23.07.2014, 05:16 #

драствуйте !подскажите как зделать так что бы работала кнопка отзывы !очень нужно!большое спасибо!

Башара Ольга 23.07.2014, 15:50 #

Читайте урок про Отзывы http://www.tibimi.ru/blog/2013/11/urok_5_chto_takoe_obsuzhdeniya_i_v_chem_ih_polza_dlya_biznesa

Клевцов Юрий 14.05.2015, 03:31 #

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

Башара Ольга 14.05.2015, 16:34 #

Рады, что наши статьи вам помогли. На ваш вопрос точно и быстро смогут ответить из Службы Поддержки ВКонтакте, напишите им с помощью раздела Помощь https://vk.com/support?act=new, задайте ваш вопрос, обычно отвечают в течение 24 часов