Дизайн на продажу > Дизайн групп социальных сетей
Оформление групп в контакте используя 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:
Здравствуйте Ольга! Огромнейшее спасибо за наиценнейшую информацию)) Все очень четко и понятно написано и показано)) Форумчане не забываем сказать "спасибо" Ольге с помощью наших плюсиков - ей будет приятно))
Добрый модератор:
Ольга спасибо, очень нужный материал. Наглядно, понятно с картинками. Теперь все кому интересна Вики разметка с легкостью смогут сделать и для своей группы и для заказчиков.
Маркевич Юлия:
Оленька! ОГРОМНОЕ СПАСИБО за эту информацию,она очень поможет ВСЕМ!!!
Елена Хамизова:
Оля, огромное спасибо за информацию. Все расписано и разложено по полочка.
Навигация
[0] Главная страница сообщений