Как сделать таблицу wiki вконтакте

Wiki-разметки в группах Вконтакте

Что такое Вики разметки?

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

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

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

Wiki разметка имеет:

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

Принципы оформления заключаются в создании таблицы, которая является базовым элементом в меню, текстовых и графических вставок.

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

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

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

Создание таблиц с помощью wiki-разметки

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

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

Оформление ссылок при помощи wiki-разметки

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

Как сделать графическое меню в группе?

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

Меню можно оформить в:

Текстовое меню обычно идеально подходит для серьезных тем, направления бизнес, IT-технологий. Графическое меню больше походит для развлекательных тематик.

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

Шаблоны разметки для меню группы (картинки, теги, таблицы, спойлеры)

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

Особенности и секреты wiki-разметки

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

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

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

Источник

Вики разметка Вконтакте для чайников

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

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

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

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

viki razmetka vkontakte dlya chajnikov

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

viki razmetka dlya chajnika

viki razmetka dlya chajnika vkontakte

Вики разметка Вконтакте таблица

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

Таблицы в вики-разметке составляются по аналогии с html-кодом, только тэги не в буквенном, а символьном виде (не путать с символами для статусов ВК )

|- это начало новой строки, конец, указывать не обязательно.

| это знак столбца в этой строке. Сколько таких знаков, столько и столбцов будет.

! это знак столбца, который будет отличаться по фону от соседнего.

Теперь давайте составим простейшую таблицу из 4 ячеек.

viki razmetka vkontakte tablica

Вики разметка Вконтакте шаблоны

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

Источник

Wiki-разметка на службе у копирайтеров: как создать портфолио и блог Вконтакте

Хотите получить место, в котором можно разместить примеры работ, вести блог и рекламировать свои услуги? Обычно для этих целей создают сайт. Но есть и другой, более простой выход — группа Вконтакте с wiki-разметкой. В этой статье я объясню, как ее создать.

Практика и еще больше практики! Я буду описывать процесс на примере реальной группы — Футуристичный копирайтинг.

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

У вас уже есть группа? Читайте, как привлекать в нее больше подписчиков.

Навигация по руководству

Почему не сайт?

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

Но группа Вконтакте — тоже отличный вариант:

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

К тому же группа — классный вариант для старта. Оформите ее, найдите постоянных читателей, привлеките клиентов. А уже потом создавайте сайт. Страничка в соц. сети превратится в площадку для анонса статей в блоге — продолжит приносить пользу.

Группа или публичная страница?

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

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

Участники не могут писать на стене, но могут предлагать посты для публикации. А вы уже решаете, нужны они вам или нет.

Еще одно различие — в дизайне. В группе список обсуждений находится сразу после описания — над стеной. На публичной странице он размещен сбоку.

Лично мне больше по душе публичная страница. Поэтому в примере я буду создавать именно ее. Если выбранный вариант вам не понравится — вы всегда можете переключиться на другой. Только осторожнее — это можно делать не чаще, чем раз в 2 недели.

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

Создание группы

Если вы уже знаете, как это делать — переходите к следующему разделу.

Первое, что вы должны сделать — создать новую группу:

Ура, сообщество создано!

Редактирование информации о сообществе

Сразу после создания новой группы вы попадете на страницу «Редактирование информации». Что здесь есть:

Когда закончите с настройками — нажмите «Сохранить».

Теперь можно загрузить основное изображение. Нажмите на «Загрузить фотографию» справа.

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

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

Вот, что у нас получилось. Страница стала на 35% привлекательней!

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

На этом подготовительные работы заканчиваются и начинается самое сложное — wiki-разметка.

Как узнать ID группы

Меню, запись в блоге, список с примерами работ — все это мы будем создавать с помощью wiki-страниц. Вконтакте — отвратительный сервис, в котором нет инструментов для создания новой страницы. Вместо этого придется использовать скрипты. Не пугайтесь, это просто, хоть и неудобно.

Для скрипта вам понадобится узнать ID вашей группы. Если вы не меняли ее адрес — то это цифры в адресной строке, которые идут после слова «club». Я уже поменял, поэтому мне такой простой способ выцепить ID недоступен.

Кликните по любому посту на стене, чтобы открыть его. Если ничего нет — напишите что-нибудь. Что угодно.

В адресной строке появятся новые данные. То, что находится посередине между «wall-» и «_» (нижним подчеркиванием) — и есть ID вашей страницы. Сохраните его где-нибудь.

Создание wiki-страницы

Теперь вы можете использовать скрипт для создания новых страниц с вики-разметкой.

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

Будьте внимательны! Название вики-страницы изменять нельзя. Если будут опечатки — придется создавать новую.

Давайте для начала сделаем главную страницу. Я назвал ее «Меню».

Нажмите «Наполнить содержанием».

Здесь находится редактор страницы. Но нам пока что нужен не он, а ссылка. Посмотрите на адресную строку. Вам нужно все, что расположено до слов «?act=edit&section=edit».

Скопируйте ссылку и сохраните ее где-нибудь. Получится что-то вроде такого: «https://new.vk.com/page-124301131_50771728».

Это очень важный момент. Новая страница еще нигде не закреплена и на нее не ведут никакие ссылки. Если вы закроете ее — то потеряете.

Я советую создать отдельный файл, в котором будет храниться структура вашей группы. Оформите его в виде «Название — ссылка — ID страницы». ID — это «page-124301131_50771728». Оно вам еще понадобится.

Вот, например структура моей группы «Подслушано». Меню и еще 2 страницы. Сюда же закинул скрипт для создания новых страниц. Чтобы его было легко найти.

Что делать, если вы сохранили только ID страницы, но забыли про ссылки? Введите в адресную строку адрес «https://vk.com/page-124301131_50771728». Естественно, подставьте ID своей страницы.

Закрепление вики-страницы в группе

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

Теперь удалите текст. Сама ссылка никуда не денется.

Загрузите изображение. Максимальная ширина картинки — 510 px. Максимальная высота — тоже 510 px. В пределах этих значений можно делать что угодно. Квадрат 510х510 — самый большой баннер, какой вы можете сделать. Это справедливо для любых постов, не только для закрепленных.

Нажмите отправить. Теперь кликните по значку в виде трех точек в правом верхнем углу поста. И нажмите «Закрепить».

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

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

Если кликнуть по картинке или по кнопке «Посмотреть» — откроется wiki-страница.

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

Верстка вики-страницы Вконтакте

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

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

На странице редактирования есть 2 режима: обычный и режим разметки. Обычный почему-то нещадно глючит — постоянно ломает ссылки. И большинство функций в нем недоступны. Поэтому я стараюсь в нем не работать. Чтобы перейти в режим wiki-разметки, кликните по значку <> справа вверху.

Что должно быть на странице «Обо мне»? Немного информации, список преимуществ перед другими копирайтерами, возможно, фотография. Давайте это и сделаем.

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

Теперь добавим фотографию. Кликните по значку в виде фотоаппарата и укажите путь к изображению.

Вот и наша фотография

Я хочу, чтобы текст обтекал картинку, поэтому добавлю ей параметр «left». И я не хочу, чтобы люди могли открывать полную версию фотографии, поэтому добавил атрибут «nolink». Подробнее об атрибутах почитайте в группе, на которую я дал ссылку выше.

Чтобы посмотреть на результат — перейдите в обычный режим с помощью кнопки <>.

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

Теперь оформим список. Выделите нужную строку и нажмите на значок списка.

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

Теперь нужно выделить заголовки. На панели инструментов есть кнопки для оформления заголовков H1-H3.

«Обо мне» я сделаю заголовком первого уровня. А фразу перед списком — третьего уровня.

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

Если вам нужно пропустить только 1 строку —
для этого не нужен. Он используется, если вы хотите получить 2 и больше пустых строк подряд.

Пожалуй, можно выделить жирным отдельные слова. Выделите нужный фрагмент и нажмите на кнопку «B» или используйте комбинацию клавиш Ctrl+B.

Вот что получилось в итоге.

Здесь планируется ссылка на портфолио, но такой страницы у нас пока что нет.

Оформление портфолио Вконтакте

Теперь сделаем удобное портфолио для клиентов. Я вижу 2 способа:

Для примера я оформлю 2 работы в портфолио — каждую своим способом.

Портфолио-альбом

Чтобы создать альбом, откройте меню «Управление сообществом».

Здесь установите галочку напротив пункта «Фотоальбомы». Теперь вы сможете их создавать. Сохраните изменения.

На странице сообщества нажмите на кнопку «Добавить фотографии» и укажите путь к нужным файлам.

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

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

У меня получилось 4 кусочка текста и миниатюра. Наведите курсор на любое изображение и нажмите на значок «Переместить фотографию».

Создайте новый альбом.

Дайте альбому такое же название, какое было у статьи. Чтобы его легко было найти. Описание вам не нужно. Также поставьте галочки напротив пунктов «Фотографии могут добавлять только редакторы и администраторы» и «Отключить комментирование альбома». Нажмите «Создать альбом и перенести».

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

Вот что у нас получилось в итоге.

Для последующих альбомов такого геморроя с переносом уже не будет. Нажмите на «Фотоальбомы».

Теперь кликните по кнопке «Создать альбом» в правом верхнем углу. Дайте ему название и загрузите туда новую порцию скриншотов с помощью кнопки «Добавить фотографии».

Все, теперь у нас есть 2 альбома, в которых хранятся скриншоты 2 статей. Хватит, пожалуй.

Создайте страницу «Портфолио» и запишите ее ID. На ней мы не будем размещать сами работы — только названия, миниатюры и короткие описания.

Кликните по значку «Добавить фотографию».

Нажмите на «Выбрать из фотографий сообщества». Откройте нужный альбом и выберите свою миниатюру.

В новой вкладке откройте альбом или первый скриншот в нем. И скопируйте его ссылку (целиком). Ее вам нужно вставить в тег фотографии между вертикальной чертой | и закрывающимися квадратными скобками ]].

Так вы получите миниатюру, при клике на которую откроется нужный альбом или скриншот с началом текста (смотря на что вы укажете ссылку).

Портфолио-страница

Ну, здесь все гораздо проще. Создайте новую вики-страницу и не забудьте записать ее ID. Нажмите на значок «Добавить фотографию» и загрузите скриншот своего текста, предварительно порезанный на небольшие кусочки. В идеале 1 изображение — 1 абзац.

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

Теперь выключите режим вики-разметки (если он был включен).

Неплохо, но маловато будет. Кликните по первой картинке. В открывшихся настройках задайте ширину (левая ячейка) — 607 px. Это максимально допустимый размер изображения на странице. Высота изменится автоматически.

Вот что получилось. Точно так же увеличьте все остальные фрагменты текста.

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

Наконец-то нам понадобятся ID страниц, которые вы записывали. Откройте свою страницу «Портфолио».

Загрузите на нее миниатюру (из созданного альбома или с компьютера). Теперь вставьте ID страницы с текстом между закрывающимися квадратными скобками ]] и вертикальной чертой |.

Собственно, все. Теперь при клике по миниатюре посетитель перейдет на страницу с текстом.

Оформление списка работ

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

Чтобы сделать гиперссылку, используйте конструкцию вида [[Ссылка|Текст]]. Если нужно переходить на вики-страницу — вместо ссылки указывайте ID.

Оформление страницы «Услуги и цены»

У нас уже есть страница «О себе» и красивое портфолио. Пожалуй, самое время показать клиентам ценник. Думаю, что мы оформим его в виде таблицы. Просто и понятно. Создавайте новую вики-страничку, сохраняйте ID — и поехали.

Подробно обо всех тегах, которые нужны при верстке таблицы, можно почитать тут. Я их описывать не буду. Зачем дублировать хороший и понятный гайд?

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

Вот как это будет выглядеть.

Если хотите, можете сделать отдельную страницу для описания каждой услуги. Напишите продающий текст и укажите ссылки на примеры работ, например. Получится клево. Этот процесс я описывать не буду — ничего нового для вас тут уже нет.

Оформление блога

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

Есть и другой способ организации блога Вконтакте — с помощью #хештегов. Придумайте себе несколько уникальных хештегов для категорий статей. Например:

Когда вы публикуете новую статью — в посте с анонсом напишите хештег с темой. А в самом блоге создайте ссылки на поиск по этим хештегами. Так вы автоматизируете процесс добавления новых статей. Опубликовали, написали анонс с хештегом — пост уже в списке. Здорово я придумал, правда?

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

А вот как оно выглядит в живую.

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

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

Оформление главной страницы

Есть 2 способа оформить главную страницу:

Создание меню

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

В меню моей группы декоративных картинок нет. Только кнопки. Выглядит стильно и оригинально.

Совет: если хотите, чтобы между изображениями не было никаких промежутков — добавьте им атрибут «nopadding».

Совет №2: если вы помещаете много картинок в ряд — в мобильной версии меню будет выглядеть ужасно. Чтобы этого не случилось — создайте таблицу и помещайте каждое изображение в отдельную ячейку.

Создание продающей страницы

Второй вариант интереснее. Мы сделаем группу еще больше похожей на сайт. Что копирайтеры обычно помещают на главную? Продающий текст!

Робот Бендер писать продающий текст для главной поленился. Поэтому придется просто поставить его фото. Вы ведь уже умеете верстать страницы с текстом.

Теперь нужно сделать главное меню, в котором будут ссылки на остальные страницы группы.

Если вам лень рисовать кнопочки — сделайте просто текстовые гиперссылки. Тут то вам и пригодится файлик с сохраненными ID всех страниц. Поместите меню по центру. Для этого выделите его и нажмите на кнопку «Выравнивание по центру».

Вот что у нас получилось.

Мне нравится, как выглядит меню, если его оформить в виде цитаты. Выделите его и кликните по кнопке «Добавить цитату».

Уже гораздо солиднее, правда?

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

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

Заключение

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

Сюда можно добавить страницу с вашими контактными данными. Можно добавить страницу с брифами. Просто загрузите их в документы Вконтакте и разместите полученную ссылку у себя в группе. Только не забудьте снять галочку с опции «Личный документ». А то никто не сможет его скачать.

Или используйте онлайн-брифы, созданные в Google Forms. Их не надо скачивать — только перейти по ссылке.

Кстати, заходите в группу «Футуристический копирайтинг». Я создал ее специально для этого гайда. В ней можно увидеть результаты всех описанных тут действий. Если вам нужен код какой-то из страниц — напишите мне, я отправлю.

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

Источник