Автор Тема: Оформление групп в контакте используя wiki - разметку.  (Прочитано 8056 раз)

Olga Z

  • Moderator
  • Full Member
  • *****
  • Сообщений: 100
  • Уровень доверия: 32
  • Имя: Ольга
  • Рейтинг: +73/0
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

« Последнее редактирование: Август 25, 2017, 01:26:56 am от Olga Z »

Елена5919

  • Administrator
  • *****
  • Сообщений: 1031
  • Уровень доверия: 33
  • Клиент всегда прав!
  • Рейтинг: +365/-7
Здравствуйте Ольга! Огромнейшее спасибо за наиценнейшую информацию)) Все очень четко и понятно написано и показано)) Форумчане не забываем сказать "спасибо" Ольге с помощью наших плюсиков - ей будет приятно))

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

  • Главный модератор
  • *****
  • Сообщений: 400
  • Уровень доверия: 39
  • Имя: Наталья
  • Рейтинг: +201/-1
Ольга спасибо, очень нужный материал. Наглядно, понятно с картинками. Теперь все кому интересна Вики разметка с легкостью смогут сделать и для своей группы и для заказчиков.

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

  • Участник МГ3.5
  • Jr. Member
  • *
  • Сообщений: 60
  • Уровень доверия: 2
  • МАРКЕВИЧ ЮЛИЯ
  • Имя: Юлия
  • Рейтинг: +44/0
Оленька! ОГРОМНОЕ СПАСИБО за эту информацию,она очень поможет ВСЕМ!!!

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

  • Модератор
  • Full Member
  • *****
  • Сообщений: 157
  • Уровень доверия: 30
  • Не могу не существует. Если я хочу - значит могу.
  • Имя: Елена
  • Рейтинг: +118/-1
Оля, огромное спасибо за информацию. Все расписано и разложено по полочка.

Olga Z

  • Moderator
  • Full Member
  • *****
  • Сообщений: 100
  • Уровень доверия: 32
  • Имя: Ольга
  • Рейтинг: +73/0
Благодарю, девочки! Главное внимательность! Один раз попробовать вникнуть в wiki-разметку и потом будет всё легко получаться. Старалась сделать по простому, так как делаю сама. Буду рада если моя информация будет Вам полезна и принесёт пользу!
Сообщение понравилось: Виктория Sd

Виктор

  • Участник ALP
  • Full Member
  • *
  • Сообщений: 204
  • Уровень доверия: 3
  • Виктор Русинович
  • Имя: Виктор
  • Рейтинг: +23/0
Добрый вечер,дорогие коллеги! По поводу вики разметки в ВК. У меня на компьютере есть видеоурок по созданию меню в ВК используя вики разметку. Этот урок проводил Александр в рамках треннинга по соц. сетям в инфоклубе. И когда у меня ещё был доступ к этим урокам я его скачал к себе на комп. При необходимость могу его выложить. Я думаю, что своим действием я ничего не нарушу.

TatianaL

  • Участник МГ3.5
  • Full Member
  • *
  • Сообщений: 175
  • Уровень доверия: 2
  • Nulla dies sine linea.
  • Имя: Татьяна
  • Рейтинг: +123/-1
Виктор, я тоже надеюсь, что Вы ничего не нарушите))))А мне было бы очень интересно просмотреть и этот материал!Заранее Вам благодарна)

Olga Z

  • Moderator
  • Full Member
  • *****
  • Сообщений: 100
  • Уровень доверия: 32
  • Имя: Ольга
  • Рейтинг: +73/0
Добрый день, Виктор. Думаю, Виктор, это будет как раз и противозаконно. Так как видео Александра и только сам Александр вправе им распоряжаться, где его размещать и в каком доступе открытом или закрытом.
Сообщение понравилось: Виктория Sd

Olga Z

  • Moderator
  • Full Member
  • *****
  • Сообщений: 100
  • Уровень доверия: 32
  • Имя: Ольга
  • Рейтинг: +73/0
Татьяна, добрый день! Wiki-разметка везде одинаковая, один и тот же код. Просто сделайте всё по шагам и у Вас всё получится. Если вдруг что то не получается всегда рада помочь через связь в скайпе.

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

  • Участник МГ3.5
  • Full Member
  • *
  • Сообщений: 168
  • Уровень доверия: 12
  • Светлана Колосова
  • Имя: Светлана
  • Рейтинг: +320/-1
Спасибо, Ольга. Да Вы одним только своим присутствием помогаете! Как мне!:D

Vera

  • Профессия ВД Эксперт
  • Newbie
  • *
  • Сообщений: 49
  • Уровень доверия: 0
  • Вера Маслова
  • Имя: Вера
  • Рейтинг: +6/0
Оля, спасибо от души, за такой подробный расклад о wiki-разметки. Очень своевременная для меня информация, как раз хотела искать инфу в интернете. Еще раз спасибо!!!

Olga Z

  • Moderator
  • Full Member
  • *****
  • Сообщений: 100
  • Уровень доверия: 32
  • Имя: Ольга
  • Рейтинг: +73/0
Пожалуйста, Вера. Изучайте,применяйте. Обращайтесь, если возникнут вопросы. Всегда рада помочь.

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

  • GoogleSketchup-III
  • Full Member
  • *
  • Сообщений: 100
  • Уровень доверия: 0
  • Людмила Пархоменко
  • Имя: Людмила
  • Рейтинг: +64/0
Благодарю, Ольга за проведённую большую работу. Внимательно прочитала. Сейчас приступила к выполнению обложки.

Виктор

  • Участник ALP
  • Full Member
  • *
  • Сообщений: 204
  • Уровень доверия: 3
  • Виктор Русинович
  • Имя: Виктор
  • Рейтинг: +23/0
Добрый вечер,дорогие коллеги! По поводу вики разметки в ВК. У меня на компьютере есть видеоурок по созданию меню в ВК используя вики разметку. Этот урок проводил Александр в рамках треннинга по соц. сетям в инфоклубе. И когда у меня ещё был доступ к этим урокам я его скачал к себе на комп. При необходимость могу его выложить. Я думаю, что своим действием я ничего не нарушу.
К большому сожалению данный видео-урок я не могу выложить. Так-что приношу свои извинения за напрасные ожидания.

 

Перенесено: Оформление группы ВКонтакте на тему «КИНОМАНИЯ»

Автор Добрый модератор

Ответов: 0
Просмотров: 841
Последний ответ Сентябрь 17, 2016, 06:38:32 am
от Добрый модератор
Оформление группы и паблика ВКонтакте

Автор dsmix

Ответов: 1
Просмотров: 1085
Последний ответ Июль 31, 2016, 07:22:02 am
от Елена5919
Оформление группы ВК

Автор Pavel1961801

Ответов: 41
Просмотров: 5554
Последний ответ Январь 12, 2017, 08:25:38 pm
от Асель
ВК поменял дизайн сообществ и групп

Автор Юрий

Ответов: 57
Просмотров: 7165
Последний ответ Декабрь 10, 2016, 10:16:14 am
от Виктор
Оформление Групп VK

Автор Pavel1961801

Ответов: 18
Просмотров: 2557
Последний ответ Апрель 20, 2016, 08:56:55 pm
от Людмила