Оформление групп в контакте используя wiki - разметку.

[Olga Z]

11

Добрый день!Так как всё мы уже умеем выполнять работы в фотошоп,своё внимание заостряю на создание группы и страниц. На примере тестовой группы поэтапно всё покажу. Буду оформлять группу с обложкой по новому введению в оформлении  в контакте. Уважаемые форумчане, по техническим причинам фото в уроке не открываются, все фото в уроке пронумерованы, прилагаю ссылку на фото больших размеров https://drive.google.com/open?id=0B6N7M7uxvqihMFpoSDdqM18yTFU, фото пронумерованы в архиве соответственно с фото по уроку. По всем вопросам обращайтесь, помогу разобраться.
1. Создаём в фотошоп:
 Обложку. Рекомендуемый размер обложки 1590×400 пикселей.


фото 1
 Картинку для поста. Рекомендуемый размер 510х510 пикселей.


фото2

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


 фото3

Затем нажимаем сохранить для веб.
Картинки сохранятся в папку  imajes


фото4
Теперь идём вконтакт на свою страницу.
Нажимаем группы , создать сообщество.


фото5
Прописываем название сообщества и адрес страницы.


фото6
Загружаем обложку.


фото7
Загружаем картинку для аватара сообщества.


фото8
Выбираем управление сообществом.


фото9
Заходим в разделы. Выбираем материалы ограниченные.


фото10
У нас появилась вкладка Свежие новости. Благодаря ей мы сможем создавать меню.


фото11

фото12
Обратите внимание! Запись нужно размещать от имени сообщества.Для этого нужно:


фото13

фото14

фото15
Результат того что должно получиться.
 

фото16

фото17
Нажимаем открыть меню и нас переводит на страницу, где мы будем размещать картинку с меню, которое мы разрезали в фотошоп.


фото18
Для этого нам нужно вначале загрузить картинки в альбом.


фото19

фото20

фото21

фото22

фото23

фото24
Свежие новости меняем на Меню.


фото25

фото26

фото27
В квадратных скобках прописываем название страниц [[название страницы]]


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

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


фото30


фото31

фото32
При загрузке фото следите чтобы фото расположились в нужном для вас порядке.
После того как загрузили фото идём в режим wiki-разметки.Будем прописывать нужный код. Пока будем писать код, не желательно выходить с данной вкладки, так как код может сбиться и придётся всё переписывать. Чтобы проверить правильность выполненной работы пользуйтесь предпросмотром.


фото33
Теперь будем прописывать  в коде нужные для нас части. Повторим что мы сделали:
1 Прописали название страниц.
2. Загрузили фото
Теперь, когда Вы перейдёте в редактирование wiki-разметки, у Вас уже будет прописан вверху код картинок (частей вашего разрезанного меню)
и внизу код названия страниц.
Нам нужен код картинок
1.Убираем слово <center></center>  возле каждой строчки.
Оставляем только в начале первой строчки <center>
И в конце последней строчки  </center> 
Это действие позволит нам выровнять картинки по центру.

<center>
        [[photo-142207607_456239029|200x211pх|]]
        [[photo-142207607_456239023|200x211px|]]
        [[photo-142207607_456239024|200x210px|]]
        [[photo-142207607_456239025|200x210px|]]
        [[photo-142207607_456239026|200x211px|]]
        [[photo-142207607_456239028|200x211px|]]</center>


фото34
Теперь будьте внимательны!!!
Между  рх  и | черточкой нам нужно вставить ;noborder;nopadding в каждой строчке. Следите чтобы не было пробелов между рх и ;
Этим действием мы сделаем нашу разрезанную картинку целой.


фото35
Когда пропишете, нажмите сохранить и предосмотр.
Должна получится целая картинка и по центру.
Если у Вас меню в один столбик оставляем в один столбик запись.
Обращаю Ваше внимание на то что у меня меню в 2 столбика. Поэтому мне нужно разместить картинки в 2 столбика. Мы размещаем 2 картинки в одну строку. Здесь тоже очень важно смотреть чтобы не было пробелов.
Выгдядит это так:

<center>
[[photo-142207607_456239029|200x212px;noborder;nopadding|page-142207607_52733783]][[photo-142207607_456239023|200x212px;noborder;nopadding|page-142207607_52733784]]
[[photo-142207607_456239024|200x210px;noborder;nopadding|page-142207607_52733786]][[photo-142207607_456239025|200x210px;noborder;nopadding|page-142207607_52733787]]
[[photo-142207607_456239026|200x211px;noborder;nopadding|page-142207607_52733788]][[photo-142207607_456239028|200x211px;noborder;nopadding|page-142207607_52733789]]
</center>

Цветами выделила по 2 картинки.


фото36
Теперь нужно сделать наши картинки  кликабельными.
Для этого идем на странички которые мы открывали в новых вкладках и берём  там в стороке браузера  код страницы.


фото37
И прописываем его после черточки, убираем пробелы между кодом и скобками.
Смотрим  чтобы код страницы соответствовал картинке с названием. Так прописываем все картинки, на которые нужны ссылки. 
 [[photo-123202935_418122274|150px;noborder;nopadding|page-123202935_52358485]]
Если при разрезе у Вас есть такие картинки  на которые не нужно ставить ссылку и Вам не нужно чтобы она была кликабельна  пишем такой код:
 [[photo-123202935_418122251|600px;noborder;nopadding;nolink| ]] – код не кликабельной картинки.
Прописали коды для ссылок нажимаем сохранить и предпросмотр.
При наводе на картинки у Вас должны появляться названия страниц.
А при нажатии вы переходите на данную страницу.
Теперь можно перейти в свою группу и проверить все переходы.
Для размещения информации на созданных страницах переходим в редактирование и добавляем нужную  информацию.
Для размещения на вашей странице отзывов, нужно перейти в Управление сообществом –разделы- обсуждения – нажимаем – Открытые


фото38


фото39

фото40
Надеюсь эта информация была Вам полезна и Вы справились с установкой меню при помощи wiki- разметки.
Если тема вам нужна и материал доступно изложен, буду благодарна комментариям.  Пишите чтобы вам было интересно узнать  ещё о wiki-разметке.  Возможно  будет интересно - создание и установка landing page  в контакте, создание и установка мини сайта и наполнение  мини сайта товарами. 
Всех у кого есть вопросы просьба обращаться без стеснения. Не тратьте на раздумья время. Не можете справиться, пишите, всегда рада помочь!
Ссылка на тестовую группу https://vk.com/club142207607

[Елена5919]

Здравствуйте Ольга! Огромнейшее спасибо за наиценнейшую информацию)) Все очень четко и понятно написано и показано)) Форумчане не забываем сказать "спасибо" Ольге с помощью наших плюсиков - ей будет приятно))

[Добрый модератор]

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

[Маркевич Юлия]

Оленька! ОГРОМНОЕ СПАСИБО за эту информацию,она очень поможет ВСЕМ!!!

[Елена Хамизова]

Оля, огромное спасибо за информацию. Все расписано и разложено по полочка.

[Olga Z]

Благодарю, девочки! Главное внимательность! Один раз попробовать вникнуть в wiki-разметку и потом будет всё легко получаться. Старалась сделать по простому, так как делаю сама. Буду рада если моя информация будет Вам полезна и принесёт пользу!

[Виктор]

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

[TatianaL]

Виктор, я тоже надеюсь, что Вы ничего не нарушите))))А мне было бы очень интересно просмотреть и этот материал!Заранее Вам благодарна)

[Olga Z]

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

[Olga Z]

Татьяна, добрый день! Wiki-разметка везде одинаковая, один и тот же код. Просто сделайте всё по шагам и у Вас всё получится. Если вдруг что то не получается всегда рада помочь через связь в скайпе.

[Светлана Колосова]

Спасибо, Ольга. Да Вы одним только своим присутствием помогаете! Как мне!:D

[Vera]

Оля, спасибо от души, за такой подробный расклад о wiki-разметки. Очень своевременная для меня информация, как раз хотела искать инфу в интернете. Еще раз спасибо!!!

[Olga Z]

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

[Людмила Пархоменко]

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

[Виктор]

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

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