Оформление групп VK - Wiki-разметка

Опубликовано в Разное


Здравствуйте Друзья! В прошлой нашей статье из обучающей серии, мы научились оформлять группу Вконтакте. Там же мы пообещали рассказать подробнее о wiki-разметке, и как при помощи нее оформить группу VK.

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

Лично я, вижу оформление группы разделенным на три этапа:

  1. Графическое меню

  2. Текстовое меню

  3. Оформление описания

Мы сегодня расскажем вам про каждый из этих этапов отдельно и с применением вики-разметки. Не знаю как правильно - WIKI разметка или вики, скорей всего и то и другое верно.

 

Для начала давайте разберемся, что же такое Wiki-разметка.

Wikipedia гласит (дословно):

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

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

И так, "включаем" хорошее настроение и приступаемУлыбаюсь. Начинаем работу с wiki-разметкой. А начинаем мы с нашего первого пункта - графическое меню в VK, такое меню, на мой взгляд, больше подойдет для интернет-магазина, конечно оно и для группы различных сайтов подойдет, но меньше, это мое личное IMHO так сказатьПодмигиваю. Мы с вами попробуем сделать что-то вроде того, что на картинке ниже:

Сейчас некоторые решать, что это довольно непросто и уйдут с сайта. Не торопитесь, оставайтесь с нами, ведь подобное меню для VK сделать очень простоУлыбаюсь Мы вам сейчас это докажем - расскажем как сделать его и вы поймете, что тут ничего сложного нет.

Начнем с того, что картинки в Вконтакте нельзя вставлять с файл хостинга или со своего компьютера. Изображения в VK можно вставить исключительно с альбомов. Это факт и это не изменить.

Вот код нашей навигации:

{|
|-
| [[photo7357589_143534713]] ||  [[photo7357589_143534714]] ||  [[photo7357589_143534715]]
|-
! [http://site.ru|Навигация]  !! [http://site.ru|Навигация]!! [http://site.ru|Навигация]
|-
|  [[photo7357589_143534716]] ||  [[photo7357589_143534717]] ||  [[photo7357589_143534718]]
|-
![http://site.ru|Навигация] !! [http://site.ru|Навигация] !! [http://site.ru|Навигация]
|}

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

Давайте теперь с вами разберем весь код

{|
текст
|}

Это код начала и конца таблицы. Наподобие <table></table>.

Дальше всмотритесь. 

|- означает одну строку. Тоесть для того чтобы поставить хотя бы одну строку с картинками или текстом, ставим |-. Потом на новой строчке выбираем тип строки.

| значит белый фон

! синий.

В нашем примере, в картинке, на строке с белым фоном, текст - с синим.

Разделитель для каждой ячейки является двойным обозначением для типа.

То есть:

|| - для белого

!! - для синего.

Между ними ставим либо картинку, либо текст.

Картинку обозначаем так:

[[photo7357589_143534713]] 

где вместо photo7357589_143534713 - номер фотографии в альбоме. Его вы можете увидеть в адресной строке.

Ссылку делаем так:

[http://site.ru|Навигация]. Тут я надеюсь - всё понятно. Вместо site.ru ваш сайт, вместо "Навигация" - анкор можно сказать

 

Внутренние ссылки делаем следующим образом:

[idNNN|Имя Фамилия]
[clubNNN|Название группы]
[topicNNN|Название темы]
[photoXXX_YYY]
[videoXXX_YYY]

Я думаю тут трудностей тоже возникнуть не должно.

 

Теперь мы начнем делать текстовое меню

Мы также разберем подробно как его сделать. С ним у нас тоже не должно возникнуть проблем, т.к. оно также не содержит каких то непонятных моментов - все просто и понятно.

 

Код текстового меню с использованием WIKI-разметки

{|
|-
! !! !!
|-
!
|
{|
|+[[photo-9291063_128344730]]
|-
! ▶ '''Меню''' || ▶ '''FAQ''' || ▶ '''Форум'''
|-
| ▶ '''Разделы''' || ▶ '''Новости''' || ▶ '''Правила'''
|-
| ▶ '''Пригласи''' ||▶ '''О нас''' || ▶ '''Выгодно'''
|}
!
|-
! !! !!
|}

Как выглядит сам код, напоминает наш предыдущий пример с графическим меню. Тут мы применили 2 таблицы. Одна таблица - рамка. Другая - навигация. Первую я надеюсь объяснять нетребуется, т.к. люди здесь не глупые, элементарное понимают, что менять ее смысла нет никакого, она уникальная. А разберем мы с вами именно навигацию меню Вконтакте.

Как вы наверное заметили, используя плюс (+) мы тем самым картинку добавили вне ячеек. Это заголовок нашей таблицы. Вместо изображения вы можете добавить какой нибудь текст, любое видео, да что захотите, то и добавляйте тудаСмеюсь, хозяин-барин, как говорится. Если этот плюс исключить, т.е убрать, то тогда изображение не отобразится.

После этого, следует сама навигация. Как вы тоже уже увидели, ячейка "Меню" выделена. Это делается просто - создаем ячейку синей (используя знак !). Теперь обратите внимание на заголовки. Они исполнены с помощью таких параметров '''[текст]'''. Довольно неплохо получается. Вместо текста вы, конечно же, можете ссылку вставить, применив способ, который я выше описал.

 

Ну а теперь - оформление описания группы при помощи вики-разметки

Тут можно дать фантазии разгулятmсяКрутой, используя wiki-разметку можно творить чудеса в VK. 

С помощью wiki можно сделать похожее описание, причем опять же без заморочек:

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

 

Давайте изучим исходный код этой разметки

<center>[[photo20703116_142428401]]  [[photo20703116_142428402]]  [[photo20703116_142428431]]  [[photo20703116_142428432]]</center>
{|
|-
|<center>Раскрыть тайну своей фамилии хочет каждый из нас, ведь фамилия - это наследственное имя семьи!
У нас более 100 тысяч довольных клиентов которых мы сумели удивить
Их отзывы о нашем сервисе можно прочесть у нас на сайте</center>
|}
<center>[[photo20703116_142428433]]  [[photo20703116_142428434]]  [[photo20703116_142428432]]  </center>
{|
|-
| <center>Статистика показывает, что 87% потомков великих людей не знают об этом из-за сложных запутанных исторических следствий</center>
|}

Иконки, опять же, вставляются вне самой таблицы. К тому же те, кто сталкивался с HTML уже заметили, что центровка выполнена обычными тегами <center></center>. После чего создается обычная таблица с белым фоном, туда-то мы и вносим наши заголовки. Все до безобразия просто, а помните начало статьи? Как казалось непонятно, аПодмигиваю? Ведь если чуть-чуть вникнуть - всё простоУлыбаюсь.

Ну вот вроде и всё, про wiki-разметку рассказали. Если вы будете использовать яркие картинки, оригинальные заголовки, увлекательные тексты, то вместе c применением Wiki  у вас получится супер группа, в которой будет масса подписчиковУлыбаюсь. Если начальной аудитории в группе вам покажется мало, то ее всегда можно раскрутить до нужного количества подписчиков при помощи различных инструментов для продвижения Вконтакте.



comments powered by HyperComments
@Mail.ru