Wiki статья вконтакте. Как сделать красивое меню для группы вконтакте

Редактировать статью в Википедии легко. Следуйте ссылке «править». Откроется страница правки; на ней есть текстовая форма с исходным текстом статьи, который содержит особые символы - разметку «вики», описанную ниже.

Редактирование

Затем: внесите желаемые изменения в исходный текст; кратко опишите смысл своей правки в строке «Описание изменений»; для проверки правильного отображения страницы нажмите кнопку «Предварительный просмотр»; если со страницей всё в порядке, опубликуйте свою новую версию нажатием кнопки «Записать страницу».

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

Дополнительные возможности

Выше текстовой формы редактирования находятся кнопки для форматирования текста, ниже - панель быстрой вставки специальных символов, элементов вики-разметки и шаблонов. Кнопка «Внесённые изменения» позволяет сравнить исходный код с тем, что у вас в окне редактирования. Зарегистрированным участникам также доступны: флажок «Малое изменение», позволяющий отметить ваши изменения как незначительные; флажок «Включить эту страницу в список наблюдения» для наблюдения за дальнейшими изменениями этой статьи. Часто бывает удобно предварительно скопировать текст в текстовый редактор (через буфер обмена), отредактировать, а затем перенести обратно в форму редактирования в браузере. Для этих целей следует использовать текстовый редактор, поддерживающий юникод. Кроме того, вы можете обсуждать статьи с другими участниками. Практически у каждой статьи в Википедии существует параллельная страница с её обсуждением. Участники просто редактируют эту страницу, так же, как и статьи: перейдите к странице «обсуждение» и там нажмите «править». В обсуждениях, опять же, следует придерживаться правил; главное - избегайте резкости и подписывайтесь (четыре тильды niska 14:39, 14 июня 2007 (MSD) в коде страницы).

Вики-разметка

Ниже приведена справочная таблица по редактированию в Википедии.

Разделы, абзацы, списки и строки

Начните раздел со строки заголовка:

Новый раздел == === Подраздел === ==== Под-подраздел ====

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

Но пустая строка начинает новый абзац.

С помощью тега «br» можно разрывать строки, не начиная новый абзац

Сделать список очень просто

  • каждая строка начинается со звёздочки;
    • чем больше звёздочек - тем глубже уровень; отступ внутри можно делать и с помощью двоеточия
* каждая строка начинается со звёздочки; ** чем больше звёздочек - тем глубже уровень; **: отступ внутри можно делать и с помощью двоеточия

Нумерованные списки тоже хороши:

  1. Нумерованные списки тоже хороши:
    1. очень организованные;
    2. легко читаются
# Нумерованные списки тоже хороши: ## очень организованные; ## легко читаются

Можно также делать смешанные списки:

  • Можно также делать смешанные списки:
    1. и вкладывать их
      • как, например,
    2. здесь.
* Можно также делать смешанные списки: *# и вкладывать их *#* как, например, *# здесь.

Tочка с запятой в начале строки и затем двоеточие создают двухуровневый список.

Двоеточие в начале строки делает отступ абзаца.

Простой перенос строки при этом начинает новый абзац.

Примечание: это применяется в основном на страницах обсуждения.

Если строка начинается с пробела, тогда она будет отформатирована так же, как и набрана; шрифтом фиксированной ширины; без переноса строк. Это можно применять для:

* вставки преформатированного текста; * описания алгоритмов; * исходного кода программ * ascii art (создание изображений при помощи текстовых символов).

Центрированный текст.

Центрированный текст.

Горизонтальная разделительная линия: четыре пунктира подряд (----)

Вы можете управлять выравниванием текста абзаца, используя тег

С параметром align, со значением center для выравнивания по центру, justify для выравнивания по ширине, left для выравнивания по левому краю, right для выравнивания по правому краю.

По умолчанию принято выравнивание по левому краю.

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

Текст абзаца

Ссылки, URL

В Лондоне хороший общественный транспорт. Первая буква точки назначения автоматически делается большой. Внутренние пробелы автоматически представляются как подчёркивания (набор подчёркивания имеет тот же эффект, что и набор пробела, но не рекомендуется).

Таким образом, приведённая выше ссылка ведёт на http://ru.wikipedia.org/wiki/Общественный_транспорт , которая является статьёй с названием «Общественный транспорт».

Внимание: если падеж ссылающегося слова или словосочетания не совпадает с именительным, то следует в двойных квадратных скобках ставить вертикальную черту и слева от неё писать именительный падеж, а справа - соответствующий грамматике предложения, в которое вставлена ссылка.

Пример: Лондон располагает хорошим общественным транспортом .

В Лондоне хороший [[общественный транспорт]]. Лондон располагает хорошим [[общественный транспорт| общественным транспортом]].

Окончания сливаются со ссылкой: тестирование , гены

Автоматически скрывается заключённое в круглых скобках: царство .

Автоматически скрывается пространство имён: Портал сообщества .

Автоматически скрывается заключённое в круглых скобках: [[царство (биология)|]]. Автоматически скрывается пространство имён: [[Википедия:Портал сообщества|]].

Можно ссылаться на подраздел в самой статье, указав его после «решётки»: Ссылайтесь .

Можно ссылаться на подраздел в самой статье, указав его после «решётки»: [[Википедия:Правила и указания#Ссылайтесь|Ссылайтесь]].

При добавлении комментариев к странице обсуждения следует их подписать. Это можно сделать, добавив три тильды для получения имени пользователя:

niska

или четыре для получения имени пользователя плюс дата/время:

niska 14:39, 14 июня 2007 (MSD)

Именно вариант с датой и временем является предпочтительным.

При добавлении комментариев к странице обсуждения, следует их подписать. Это можно сделать, добавив три тильды для получения имени пользователя: : ~~~ или четыре для получения имени пользователя плюс дата/время: : ~~~~ Именно вариант с датой и временем является предпочтительным. Внешняя ссылка: , для ссылок не на русском языке желательно указывать язык: {{ref-en}}

Или просто укажите URL: http://www.nupedia.com.

Этот адрес приведён для примера, не используйте его.

Указать e-mail можно так:

[[Медиа:Sg_mrob.ogg|Звук]] [[Медиа:Tornado.jpg|Изображение торнадо]]

ISBN 0123456789X

Форматирование текста

Полужирное и курсивное начертания используются в следующих случаях: логическое ударение, структурное выделение, логическое ударение в структурном выделении (или наоборот) логическое ударение
структурное выделение
логическое ударение в структурном выделении (или наоборот) .

  • Это двойные и тройные апострофы, а не кавычки.
""логическое ударение""
"""структурное выделение"""
"""""логическое ударение в структурном выделении (или наоборот)""""".

Вы также можете писать курсивом и жирным, если вас интересует определенный стиль шрифта, а не логическое выделение, например, в математических формулах: F = ma

:F = m a

Моноширинный шрифт для технических терминов технических терминов

технических терминов

Специальное форматирование для фрагментов исходного кода исходного кода

исходного кода

Вы можете использовать маленький текст для заголовков маленький текст для заголовков

маленький текст>

Вы можете перечёркивать удалённый материал и подчёркивать новый материал перечёркивать удалённый материал и подчёркивать новый материал

перечёркивать удалённый материал и подчёркивать новый материал

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

Здравствуйте, мои уважаемые читатели. Давайте сегодня я расскажу, как сделать красивое меню для группы ВКонтакте и совершенно бесплатно. Кстати научившись создавать такие темы можно немного заработать на этом -))). Уже ни один коммерческий сайт не работает без создания своего сообщества в социальных сетях в особенности ВК, что гарантированно помогает привести новых клиентов, а также раскрутить свой бизнес.

Но если Ваше сообщество будет не привлекательно и как у всех то, кто захочет там остаться? Я думаю никто!!! Так давайте украсим свои группы качественным дизайном и научимся делать это очень быстро. Перед тем как начать создавать графику и наше будущее меню необходимо установить программу фотошоп на свой компьютер для дальнейшей нарезки картинок. Многие спросят зачем вообще нужно нарезать картинки. Тут дело в том, что для каждой ссылки меню мы должны будем создать отдельную полоску из общего баннера.

Существует на сегодня несколько видов создаваемого меню:

  • Открытое с активными пунктами;
  • Закрытое в виде закрепленной записи;
  • С отдельными картинками или общей смежной картинкой баннера и меню.

Суть создания обоих вариантов одна и та же. Только основное отличие в дополнительных элементах и типов записи и об этом подробнее будет в этой статье.

Для работы с меню нам поможет wiki-разметка , которая встроена сегодня в текстовый редактор ВКонтакте. От обычного она отличается тем, что для нее будут использоваться стандартные команды для вывода той или иной картинки и вставки ссылок на нужные элементы. Сама wiki-разметка дает возможность вставки кода для отображения изображений, видео и прочих элементов.

Закрытое меню группы ВК

В данном случае мы будем наблюдать слева от основной аватарки группы гиперссылку в виде надписи «меню группы» при нажатии на которую у нас будет открываться наше меню с активными пунктами и изображениями.

Вид меню, будет следующим:

Открытое меню группы (закрепленный материал)

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

Как сделать красивое меню для группы ВКонтакте: пошаговая инструкция

Итак, в первую очередь нам необходимо будет создать главную аватарку группы которую мы разместим справа и заглушку нашего меню в виде баннера.

  • Для аватарки 200х332 пикселя;
  • Для основного баннера меню 395х282 пикселей.

Как вы могли заметить высота изображений отличается и это сделано для того, чтобы картинки не съезжали по высоте и были на одном уровне так как высота названия сообщества и статус занимают около 50 px и как раз эту величину нам необходимо будет убрать из высоты меню.

Чтобы было понятно если высота главной аватарки группы 332, то от нее мы отнимаем 50 и получаем высоту основного меню равную 282. Если же размеры не имеют значения, то высоту можно будет выставлять произвольную.

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

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

Создадим новое полотно в фотошопе размерами 600х350 пикселей которое мы будем использовать в качестве трафарета вырезав в нем проемы для наших картинок. Для работы нам необходимо перевести размеры всех элементов и линеек в пикселе и делается это по следующему пути: «Редактировать-установка-основное» и тут уже выставляем пиксели.

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

Используя левую кнопку мыши, как будто вы выделяете область, необходимо выделить блоки нужных нам размеров и после каждого выделения нажимаем кнопку удалить «Delete» и выбираем 50% серого . Такие действия приведут к тому, что блоки будут нужных размеров и выделены цветом отличным от основного фона.

Должно получиться следующее:

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

Отлично. После того как вы поместили картинку нашего дизайна нам остается выбрать «сохранить для Web» и на выходи мы получаем 2 наши картинки. Теперь идем снова в нашу группу и можем заливать главную аватарку (вертикальную). Баннер для меню мы будем использовать чуть позже при работе с кодом wiki-разметки.

Давайте создадим само меню, с активными пунктами, которые будут перенаправлять пользователя на нужные разделы стороннего сайта или же на альбомы и каталоги в самой группе. Использовать будем новое изображение для разнообразия -))).

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

На картинке размещаем кнопки нашей будущей менюшки и нарезаем картинку как мы делали выше путем выделения нужных блоков. После чего также выбираем «сохранить для web» и получаем папку с нашими нарезками. В моем случае получилось 4 картинки в отдельной папке.

Теперь нам необходимо выгруженные из фотошопа картинки залить в отдельный альбом и скрыть от посторонних глаз. После загрузки каждая картинка получит свое новое название и уникальный id.

Обратите внимание что у вас должно быть:

  • Открыты материалы в режиме «ограниченные»;
  • Включены обсуждения;
  • Папка с фотографиями открыта для всех.

Теперь остается настроить нашу страницу где и будет отображаться на менюшка. Для этого переходим на главную страницу сообщества и выбираем свежие материалы и редактировать и называем «НАШЕ МЕНЮ».

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

Работая в текстовом редакторе если после загрузки картинок, мы нажмем на иконку в виде скобок в правом верхнем углу то должны увидеть вот такой код:

Совет: Важным моментом после загрузки изображений является удаление отступов. Решается это вставкой «nopadding» перед размерами изображений.

Для пояснения ниже расписано что откуда берется, но учитывая, что все будет вставлено автоматически и не нужно мудрить, и открывать как некоторые пишут каждую картинку и брать id, то просто загружаем и сохраняем.

[]
где xxxxx - id вашей картинки
yyyyy - ширина в пикселях (не более 388)

Должно в итоге получиться вот так:

Теперь наши картинки собраны в отдельный баннер. А для того, чтобы добавить каждому пункту ссылку просто нажимаем при отключенной разметке на картинку и в разделе ссылка вставляем скопированный url.

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

http://vk.com/page-116682062_51411604?act=edit&hid=183950676§ion=edit

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

Переходим на главную страницу и делаем следующее:

Шаг №1.

Вставляем адрес станицы в текстовое поле для новой записи на стене, после чего она преобразуется в ссылку.

Шаг №2.

К записи прикрепляем изображение нашей заглушки для меню и нажимаем отправить.

Шаг №3.

Теперь после публикации записи нажимаем на время создания в нижней левой части записи и выбираем «ЗАКРЕПИТЬ».

Отлично!!! На этом заканчиваем. Теперь вы умеете создавать классные меню и можете зарабатывать на этом неплохие деньги. Советую все делать в следующем порядке:

  • Придумываем структуру и заказываем дизайн изображений меню;
  • Делаем подгонку размеров и нарезку всех изображений;
  • Вставляем в альбомы картинки;
  • Редактируем в редакторе все нарезки и публикуем на главные страницы группы.

В итоге работы мы получим вот такое меню.

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


ВАЖНО: После смены дизайна ВК в 2016 году внесены новые изменения при создании изображений и требования к картинкам о которых .

Скачать шаблон меню группы ВК + все исходники урока

Надеюсь материал был полезен, и вы с легкостью теперь поняли, как сделать красивое меню для группы ВКонтакте. Подписывайтесь на обновления блога и до скорых встреч в новых постах. Если остались вопросы пишите их в комментариях, и я обязательно помогу Вам.

Прикладываю видеоролик для закрепления прочитанного -))).

Социальные сети давно вошли в жизнь большинства людей и являются важной составляющей в ней. Многие люди даже умудряются создавать свои виртуальные бизнесы в них: накрутка лайков, подписчиков, продажа товаров как из других стран, так и авторских. Почти все они имеют группу. А как пользователям донести быстрее всего, чем занимается человек или даже целая организация? Создать специальное меню, в котором будет содержаться самая необходимая информация. И именно здесь нам понадобится Wiki-разметка. Как сделать меню группы ВК? Что добавить в неё? В статье будут рассмотрены правила создания и примеры.

Чем является Wiki-разметка?

Как сделать меню группы ВК? Вики-разметка — вот хороший помощник! Это очень эффективный и удобный способ оформления группы в социальной сети «ВКонтакте». Эта разметка по принципу своего действия очень напоминает html код. Но для людей, не связанных с программированием, она будет более понятной благодаря простоте реализации. Своё название вики-разметка получила благодаря «Википедии», где многие пользователи впервые смогли ознакомиться с основными особенностями её функционирования. Вики-разметка позволяет людям без знаний в программировании быстро и легко оформлять внешний вид группы:

  1. Создавать графические спойлеры и таблицы.
  2. Форматировать текст и изображения.
  3. Работать с якорями и ссылками.

Как сделать меню группе ВК? Рекомендации бывают так нужны, но в целом, можно разобраться и с помощью хорошего руководства. Если говорить о html, то для его изучения и работы с ним необходимо было посидеть несколько суток или даже неделю. Вики-разметка при хорошей памяти требует только совсем немного времени. Как же её можно создать? Какие есть подходы? Вот мы будет говорить о технологии, а кто её сделал? Мы разберемся, как сделать меню группе ВК. Уорд Каннингем же впервые ввёл понятие «вики» (в переводе с гавайского значит «быстрый»).

Способы создания вики-разметок

Нужно задать себе не только вопрос: «Как сделать меню в группе в ВК», но и уточнить, как это реализовать. Можно выбрать несколько путей. Каждый из них зависит от направленности и цели группы. Итак, что может быть:

  1. Если группа имеет социальное направления, то можно создать текстовое меню. Преимущества ему отдают благодаря более серьезному внешнему виду.
  2. Группам коммерческого и развлекательного характера желательно сделать ставку на графическое меню. Использование в нём изображений позволит обратить внимание пользователей на то, что должно быть на виду. Применение такого подхода позволит вам также сделать пребывание в группе более приятным и расслабляющим.

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

Работа с изображениями

Как сделать меню в группе в ВК, которое было бы красивым? В социальной сети «ВКонтакте» вставить фотографию или картинку при помощи вики-разметки предоставляется возможным только в тех случаях, когда они загружены в фотоальбомы сайта. Итак, заходим в него, выбираем нужную фотографию и копируем её адрес. К примеру, пускай он будет такой: photo12345_67890. Теперь необходимо его взять в двойные Должен получиться такой результат: []. А что, если к фотографии или картинке следует прикрепить текст или ссылку? А может, есть желание немного отредактировать внешний вид? Тогда с этим поможет следующее: необходимо, чтобы у файла был такой вид — [[ photo12345_67890|options|text/link]]. Вместо трех последних слов подставляется то, что надо. Text — пишем то, что нужно. Думается, особенных объяснений не надо. Link переводится с английского как «ссылка». Указывается для того, чтобы машина пользователя знала, куда ей необходимо идти. Options — здесь могут устанавливаться такие значения:

  1. Plain — ссылка на изображение оформлена как текст, в ней отсутствует картинка.
  2. Noborder — убирается рамка около фотографии.
  3. Box — изображение открывается в окне.
  4. Nolink — ссылка на фотографию убирается.
  5. Nopadding — пробелы между изображениями не отображаются.
  6. NNNxYYYpx или NNNpx — указывают, какой размер будет иметь картинка в пикселях. Первый вариант предусматривает ширину и высоту. При желании можно «сжать» картинку. И второй вариант предусматривает редактирования ширины.

Как создавать таблицы с использованием вики-разметки?

Обычно и графическому, и текстовому меню необходим элемент, который позволяет представить данные в удобном виде, а именно таблицы. Без них мало какая группа в «ВКонтакте» обходится. Чтобы создать таблицу в вики-разметке, необходимо использовать определённый набор символов. Предлагаем ознакомиться, за какой функционал они отвечают:

  1. {| — так обозначается начало таблицы. Обойтись без него при создании данного элемента невозможно, он является обязательным атрибутом.
  2. | — используется, чтобы давать ячейкам эффект прозрачности.
  3. |+ — с помощью этого набора символов располагают название таблицы по центру. Это не обязательный атрибут, но он должен быть размещен сразу после знаков, что обозначают начало.
  4. |- — так обозначают новые строки (в том числе и для ячеек).
  5. ! — даёт тёмный цвет. При эго отсутствии необходимо использовать знак из пункта №2.
  6. |} — набор символов, которые обозначает конец таблицы. Он является необязательным атрибутом. Но использовать его всё же рекомендуется, чтобы предотвратить возникновение ошибки.

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

Создание меню группы в социальной сети «ВКонтакте» с помощью вики-разметки: пример реализации

Здесь будут использованы опции noborder и nolink. Они уберут рамку картинки и ссылку. Также у изображений будет изменён размер, а вторая строка ячеек таблицы будет иметь тёмную заливку, благодаря использованию атрибута!. А вот и сам пример:

{|
|-
|

”’Новое в науке”’
||
|-
!
[]
!!
|-
|

[[Новости науки|Новости]]

[[Открытия]]

|

[[Конференции]]

[[Разработки]]

[[Книги]]

[[Симпозиумы]]

|

Разделы:

[[Медицина|1]] | [[Физика|2]] | [[Математика|3]] | [[Экономика|4]]

[[Химия|5]] | [[Биология|6]] | [[Программирование|7]] | [[Электротехника|8]]

|-
|}

Как видите, ответ на вопрос: «Как сделать меню в группе в ВК?» весьма лёгок.

Важность Wiki-разметки при продвижении своего проекта

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

Заключение

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

Каждый, кто хочет продавать товары или предлагать услуги с помощью социальной сети «ВКонтакте», должен зарегистрировать своё сообщество. Групп, которые создавались с целью продать что-либо в социальной сети «ВКонтакте», уже существует огромное количество. Как сделать Вашу группу уникальной и привлекательной? Как выделиться на фоне остальных сообществ и убедить клиента купить товар именно у Вас? Для этого необходимо красиво и необычно оформить своё ВК-сообщество. В этом поможет вики-разметка. Мы расскажем, что такое вики-разметка ВКонтакте для чайников.

Скидка читателям

Вам повезло, сервис smmbox.com раздаёт скидки.
Сегодня скидка 15% на использование сервиса. Вам нужно просто зарегистрироваться и ввести при оплате промокод smmbox_blog

Вики-разметка. Что это

Вики-разметка «ВКонтакте» — это специальный язык, созданный для оформления обучающих, продающих или развлекательных Web-страниц ВК-сообщества. Это очень ценный и мощный язык разметки, который позволяет подключать дополнительный функционал «ВКонтакте» и использовать его для продвижения и уникализации группы.

Страницы, оформленные или созданные с помощью вики-разметки, принято называть вики-страницами. Впервые этот термин ввёл Уорд Каненгем в 1995 году. Тогда пользователи сети Интернет познакомились с Википедией. «Wiki» переводится с гавайского, как «быстрый».

Вики-разметка позволяет быстро создать и внедрить в код любой страницы сообщества красиво оформленные элементы, такие как:

  • кнопочное меню;
  • картинки-ссылки;
  • спойлеры;
  • якоря;
  • мини-игры.

Спойлер вики-разметки — это текст, который скрывается за кнопкой с надписью синего цвета, после нажатия на которую, текст становится видимым.

Вики-разметка « ВКонтакте» очень похожа на HTML (Hyper Text Markup Language). Но, в отличие от языка разметки кибер текста, её можно освоить за неделю благодаря графическому интерфейсу.

Такая разметка существенно расширит Ваши возможности в администрировании группы. С её помощью Вы сможете создавать онлайн-журналы, интернет-магазины и даже мини-сайты.

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

Как создать вики-страницу

Придерживаемся следующего плана при создании вики-страницы:

  • Определиться с видом страницы и сделать её макет. Бывают такие виды: ВК-лэндинг, ВК-пост, интерактивная страница.
  • После того, как Вы определились с видом своего мини-сайта, можно приступать к созданию вики-станицы. Создать меню, сделать кнопки меню активными. Наполнить страницы контентом. Сделать ссылки на товары. Подключить видео или аудио записи и многое другое. Всё зависит от Вашей фантазии.
  • Художественно оформить сообщество. Вставить картинки, логотипы, аватарки, фото товаров…
    Мы покажем конкретный пример оформления интерфейса уже существующей группы с помощью вики-разметки. Создадим тестовое сообщество и разберём весь процесс пошагово.

Для того, чтобы создать вики-страницу, нам нужно в поисковую строку браузера скопировать ссылку https://vk.com/pages?oid=-***&p=ИМЯ .

Вместо *** нужно вставить уникальный Id сообщества.

В нашем случае это 105722542.

Id находится в адресной строке браузера после /club; /event или /public.

Вместо «ИМЯ» — вбить название вики-страницы, например, «каталог товаров».

Обратите внимание, что поменять название уже не получится.


Для дальнейшего доступа к нашему разделу меню обязательно скопируем и сохраним выделенную ссылку в текстовый документ.

Для перехода в режим вики-разметки нажмём на кнопку «Редактирование», а затем «Режим вики-разметки».

В режиме разметки нужно набрать следующий код.

{|nomargin ***с помощью этой команды убираем границы
|- ***начинаем создавать надписи
|

Главная
***создаём надпись «Главная» и выравниваем её по центру прямоугольника
|
каталог товаров
*** создаём надпись «каталог товаров» и выравниваем её по центру прямоугольника
|
о нас
***создаём надпись «о нас» и выравниваем её по центру прямоугольника
|
контакты
***создаём надпись «контакты» и выравниваем её по центру прямоугольника
|} ***закрываем блок надписей
[[Главная]] ***создаём ссылку на «Главная»
[[О нас]] ***создаём ссылку на «О нас»
[[контакты]] *** создаём ссылку на «Контакты»
________________________________________
***Примечание

Копируем их до «?». Вот что должно получиться в итоге на каждой странице.

Код главной страницы

https://vk.com/page-105722542_54261370

***(Каталог товаров) |

https://vk.com/page-105722542_54261943

*** (О нас) |

***(О нас) |

https://vk.com/page-105722542_54261944

*** (Контакты) | }

***(Контакты) |}

***Примечание

Остальные кнопки меню оформляем аналогично коду «главной страницы».

Сохраняем все изменения на каждой странице.

Переходим на любой из разделов в обычном режиме, скопировав ранее сохранённую ссылку из текстового документа в строку браузера.

Ждём, пока не появится пункт меню. После этого ссылку нужно удалить и нажать кнопку «отправить». Возле кнопки необходимо выбрать пункт «От имени сообщества».

Каждую страницу меню нужно заполнить текстом. После этого можно приступить к художественному оформлению.

Добавим «шапку» и «аватарку».

Сделать их можно по видео уроку


Мы показали Вам, что такое вики-разметка ВКонтакте для чайников. Оформлять сообщество с её помощью очень увлекательно. Изучайте вики-разметку и создавайте настоящие мини-сайты.


.

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

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

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

Выглядит это так - [] - и применима такая разметка к любому изображению, которое есть в альбомах. Дополнив разметку, можно вместе с изображением вставить и текст, и ссылку, тем самым меняя его внешний вид.

Для этого надо применить такую вики разметку - []. Слово «options» можно заменить другими значениями, каждое из которых изменит вид фотографии. А значения следующие:

  • noborder сделает рисунок без рамки;
  • nopadding соединит вместе изображения, убрав между ними пробелы;
  • plain сделает из рисунка ссылку;
  • NNNpx позволит изменить размер картинки;
  • box откроет в новом окне.

Работа с таблицами при помощи Вики-разметки?

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

  • {| без этого первоначального символа невозможно создать таблицу;
  • |+ необязательный символ, с помощью которого таблица располагается по центру
  • |- с этого символа начинается новая строка;
  • | этот символ отвечает за прозрачность ячеек;
  • ! с помощью этого символа можно сделать ячейку темного цвета;
  • |} этим необязательным символом заканчивается таблица.

Вот такое меню получится из следующего очень простого кода:

{|
|-
|

”Новинки”’
||
”’Игры”’
||
”’Все жанры”’

|-
!
[]
!!
[]
!!
[]

|-
|

[[Новинки online игр|Новинки]]

[[Головоломки]]

|

[[Шарики]]

[[Квесты]]

[[Аркады]]

[[Обсуждения игр]]

|-
|}

Оформление ссылок с помощью вики-разметки ?

В контакте для оформления группы wiki-разметкой можно использовать три вида ссылок.

  • Традиционная ссылка:

  • Обычная ссылка + текст:
  • Ссылка в виде картинки: []

Работа с графическим меню?

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

  • Нарежьте в редакторе необходимую графику и «сохраните для web»;
  • Загрузите графику как обычные картинки, без использования flash, чтобы не ухудшить их качества;
  • Соберите меню с помощью специального тега «nopadding»;
  • Пропишите внимательно все ссылки;
  • Красивое меню для вашей развлекательной группы готово.

Несколько секретов wiki-разметки

Эта разметка не похожа на html код, и некоторые ее особенности можно испробовать лишь экспериментальным способом. Но если вам не по душе эксперименты, изучите следующие особенности, чтобы не допускать ошибок и гадать, почему тот или иной элемент не подчиняется wiki-разметке. Хитрости разметки:

  • Допустимая ширина картинки составляет не больше 610px;
  • Изменение ширины автоматически меняет и высоту картинки;
  • Рисунки меньше 134px меняют качество в худшую сторону;
  • В строчке разметки может присутствовать лишь 7 элементов списка;
  • Более 18 незакрытых тегов на одной странице приведут к ее искажению и ошибкам.

Приложения программистов для wiki-разметки

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