Автор Тема: Верстка под мобильные устройства меню группы ВКонтакте.  (Прочитано 2984 раз)

Olga Z

  • Moderator
  • Full Member
  • *****
  • Сообщений: 100
  • Уровень доверия: 32
  • Имя: Ольга
  • Рейтинг: +71/0
7
Добрый день участники форума и гости!
Продолжаем изучение и применение на практике возможностей wiki-разметки.
В прошлом уроке я подробно на примере  показала  как с помощью  wiki-разметки создать в ваших группах страницы и внутреннее меню. https://photoshop-forum.com/index.php?topic=918.0  (Всем, кто не знаком с wiki-разметкой, рекомедую перейти по ссылке и выполнить урок по созданию страниц с wiki-разметкой)
 Все вы огромные молодцы, так как применили данный урок на практике и у всех получились замечательные группы. Потренировавшис ь на своей группе можно брать заказы на оформление групп в контакте + выполнение  wiki-разметки, что увеличит ваш доход.
Wiki-разметки  мы уже научились делать.  Сегодня я покажу на примере своей группы как  сделать,  чтобы ваши группы были адаптивные под мобильные устройства. Для этого нам нужно  разместить  код в таблицу.
Для создания wiki-разметки мы изначально  подготавливали   в фотошоп картинку с кнопочками и потом разрезали её на нужные нам части. У кого то дизайн был кнопочек в один столбец  у кого  то в два или три столбца.  У меня внутреннее меню с двумя столбцами. Привожу пример таблицы на 2 колонки. В конце урока пропишу код  для одного,  двух и трёх столбцов.

Сейчас у меня стоит  код такой как мы делали в первом уроке.

<center>
[[photo-133487395_456239097|600x150px;nopadding;nolink| ]]
[[photo-133487395_456239098|300x69px;nopadding|page-133487395_54340499]][[photo-133487395_456239099|300x69px;nopadding|page-133487395_54340508]]
[[photo-133487395_456239100|300x67px;nopadding|page-133487395_54340501]][[photo-133487395_456239101|300x67px;nopadding|page-133487395_54340513]]
[[photo-133487395_456239102|300x56px;nopadding|page-133487395_54340502]][[photo-133487395_456239103|300x56px;nopadding|page-133487395_54340511]]
[[photo-133487395_456239104|300x76px;nopadding|page-133487395_54340503]][[photo-133487395_456239105|300x76px;nopadding|page-133487395_54340507]]
[[photo-133487395_456239106|600x130px;nopadding;nolink| ]]
</center>


Так отображается на мониторах компьютера.



Так отображается на мобильных устройствах.





Переходим к практике

1. У меня верхняя и нижняя картинки загружались целиком. Нужно их разрезать в фотошоп пополам (у кого 3 колонки на три равных части)

2. Сохраняем себе в текстовый документ шаблон

Код таблицы:

{|fixed noborder nopadding
|-305px 305px
|-
|первая
|вторая
|-
|третья
|четвертая
|-
|пятая
|шестая
|}


3. Заходим на страницу редактирования внутреннего меню. В режим wiki-разметки
4. Ставим курсор впереди кода и опускаем код чуть ниже.
5. Копируем с текстового документа таблицу и вставляем выше нашего кода ( у кого код не опускается можно таблицу вставить после кода)
6. Теперь нужно из нашего кода скопировать код картинок и вставить их в таблицу по очерёдности  так как стоят картинки.

{|fixed noborder nopadding
|-305px 305 px
|-

|[[photo302483756_456239210|305px;noborder;nopadding;nolink| ]]
|[[photo302483756_456239211|305px;noborder;nopadding;nolink| ]]
|-
|[[photo-133487395_456239098|305px;noborder;nopadding|page-133487395_54340499]]
|[[photo-133487395_456239099|305px;noborder;nopadding|page-133487395_54340508]]
|-
|[[photo-133487395_456239100|305px;noborder;nopadding|page-133487395_54340501]]
|[[photo-133487395_456239101|305px;noborder;nopadding|page-133487395_54340513]]
|-
|[[photo-133487395_456239102|305px;noborder;nopadding|page-133487395_54340502]]
|[[photo-133487395_456239103|305px;noborder;nopadding|page-133487395_54340511]]
|-
|[[photo-133487395_456239104|305px;noborder;nopadding|page-133487395_54340503]]
|[[photo-133487395_456239105|305px;noborder;nopadding|page-133487395_54340507]]
|-
|[[photo302483756_456239212|305px;noborder;nopadding;nolink| ]]
|[[photo302483756_456239213|305px;noborder;nopadding;nolink| ]]
|}
Вместо синего кода вставляем код своих картинок. Вместо картинок которые были целые вставляем разрезанные. Незабываем о том, что если картинка некликабельная (нет перехода с ссылкой ) в таких случаях мы прописываем ;noborder;nopadding;nolink|

В шапке кода

{|fixed noborder nopadding
|-200px 200px 200 px

( мы прописываем размер картинок если в 2 столбика размер ставим |-305px 305 px, если в один столбик ставим размер 510рх, если в три столбика ставим размер |-200px 200 px 200рх)

7. Сохранить и  предпросмотр .
8.После того как проверили всё ли правильно разместилось, удаляем старый код. Оставляем новый  прописанный в таблице.
9.Для того чтобы проверить адаптивность на мобильном устройстве нужно в строке браузера
Ставим английскую букву m. Это будет выглядеть так:

https://m.vk.com/dizajnnazakaz



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

Код таблицы в один столбец:

{|fixed noborder nopadding
|-510px 
|-
|первая
|-
|вторая
|-
|третья
|-
|четвёртая
|-
|пятая
|-
|шестая
|}


Код таблицы в  два столбца:

{|fixed noborder nopadding
|-305px 305px
|-
|первая
|вторая
|-
|третья
|четвертая
|-
|пятая
|шестая
|}


Код таблицы в три столбца:

{|fixed noborder nopadding
|-200px 200px 200 px
|-
|первая
|вторая
|третья
|-
|четвертая
|пятая
|шестая
|}






« Последнее редактирование: Май 21, 2017, 10:14:05 am от Olga Z »

TatianaL

  • Участник МГ3.5
  • Full Member
  • *
  • Сообщений: 177
  • Уровень доверия: 2
  • Nulla dies sine linea.
  • Имя: Татьяна
  • Рейтинг: +122/-1
Оля, спасибо!Обязательно сделаю. А на мобильном устройстве будет сразу загружаться меню? не приходилось загружать какие-либо группы на моб.устройство. ..

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

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

Olga Z

  • Moderator
  • Full Member
  • *****
  • Сообщений: 100
  • Уровень доверия: 32
  • Имя: Ольга
  • Рейтинг: +71/0
Добрый день, Юлия, Татьяна и все форумчане! Благодарю  за тёплые слова! Очень приятно!
Татьяна, не нужно никуда загружать меню. Делаете по шаблону таблицы у себя в группе и всё! Это делается для того , чтобы те посетители кто зашёл в вашу группу с мобильного телефона увидели сложенные картинки, смотрите пример выше. Адаптивность увеличит трафик посетителей.

Гала

  • Участник МГ2
  • Full Member
  • *
  • Сообщений: 134
  • Уровень доверия: 0
  • Имя: Галина
  • Рейтинг: +109/0
 Ольга, спасибо за подробное объяснение вики разметки.
 Ты - супер!
 Всего наилучшего тебе! Удачи во всём!
 С уважением, Галина.
Сообщение понравилось: Татьяна Павлова

Olga Z

  • Moderator
  • Full Member
  • *****
  • Сообщений: 100
  • Уровень доверия: 32
  • Имя: Ольга
  • Рейтинг: +71/0
Благодарю, Галина! Желаю всем Удачи и творческого вдохновения!

 

Прикрепление банера в новом дизайне для группы ВК

Автор Елена5919

Ответов: 27
Просмотров: 3345
Последний ответ Ноябрь 21, 2016, 08:33:15 pm
от Елена Хамизова
Как изменить шаблон оформления группы ВК

Автор Александр Коньшин

Ответов: 10
Просмотров: 2212
Последний ответ Ноябрь 05, 2016, 12:14:58 am
от Татьяна Щукина
Оформление группы ВК

Автор Pavel1961801

Ответов: 41
Просмотров: 5064
Последний ответ Январь 12, 2017, 08:25:38 pm
от Асель
Как прикрепить баннер ВКонтакте

Автор Владимир

Ответов: 11
Просмотров: 2016
Последний ответ Январь 13, 2016, 08:46:43 pm
от Александр Коньшин
Динамические обложки ВКонтакте

Автор Александр Коньшин

Ответов: 4
Просмотров: 1519
Последний ответ Сентябрь 12, 2017, 07:26:05 pm
от Vera