Дизайн на продажу > Дизайн групп социальных сетей
Верстка под мобильные устройства меню группы ВКонтакте.
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:
Добрый день, Юлия, Татьяна и все форумчане! Благодарю за тёплые слова! Очень приятно!
Татьяна, не нужно никуда загружать меню. Делаете по шаблону таблицы у себя в группе и всё! Это делается для того , чтобы те посетители кто зашёл в вашу группу с мобильного телефона увидели сложенные картинки, смотрите пример выше. Адаптивность увеличит трафик посетителей.
Гала:
Ольга, спасибо за подробное объяснение вики разметки.
Ты - супер!
Всего наилучшего тебе! Удачи во всём!
С уважением, Галина.
Навигация
Перейти к полной версии