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

[Olga Z]

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
|-
|первая
|вторая
|третья
|-
|четвертая
|пятая
|шестая
|}

[TatianaL]

Оля, спасибо!Обязательно сделаю. А на мобильном устройстве будет сразу загружаться меню? не приходилось загружать какие-либо группы на моб.устройство. ..

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

Оленька! Спасибо! Ты ,как всегда, на высоте! Молодец, что разбираешься в таких непростых техниках,это очень нужная информация.И особенно,что делишься и помогаешь нам.Просто суууупер!!!

[Olga Z]

Добрый день, Юлия, Татьяна и все форумчане! Благодарю  за тёплые слова! Очень приятно!
Татьяна, не нужно никуда загружать меню. Делаете по шаблону таблицы у себя в группе и всё! Это делается для того , чтобы те посетители кто зашёл в вашу группу с мобильного телефона увидели сложенные картинки, смотрите пример выше. Адаптивность увеличит трафик посетителей.

[Гала]

 Ольга, спасибо за подробное объяснение вики разметки.
 Ты - супер!
 Всего наилучшего тебе! Удачи во всём!
 С уважением, Галина.

[Olga Z]

Благодарю, Галина! Желаю всем Удачи и творческого вдохновения!