Як зробити вікі-розмітку?

Як зробити вікі-розмітку?

Добрий день, друзі. Ми Але функціонал групи дозволяє нам робити і цікавіші оформлення. Тому давайте оформимо групу ВКонтакте, використовуючи вікі розмітку, як було обіцяно в. Перед тим як заглибитися в вікі розмітку, створюючи інтерактивне меню, необхідно зробити деякі підготовчі дії, в першу чергу, змінити деякі налаштування в групі. Натискаємо на Управління спільнотою, відкриваємо Обговорення, і підключаємо Матеріали.

Тепер переходимо до підготовки зображень. Якщо Ви не працюєте з графічними редакторами, то доведеться звернутися до фрілансерам. Подальша робота буде показана з застосуванням Фотошопа, але може бути виконана і в інших редакторах. Заготовлюємо шаблон для групи ВКонтакте згідно зображенню. Розміри вікна А, в якому розміщуватиметься меню, можуть відрізнятися від вказаних.

Все залежить від того, які розміри Ви задасте кнопках меню. У запропонованому варіанті передбачено по одній кнопці в рядок. Якщо ж Вам потрібно розмістити по дві кнопки в рядок, то ширину вікна А потрібно зменшити до 377 рх максимум. Висота цього вікна в більшості випадків підбирається досвідченим шляхом.

У запропонованому варіанті висота в 377 рх обрана при розміщенні на передній сторінці групи кожного елемента інформації в одну строчку. Далі готуємо відповідне зображення, прописуємо написи і розкроюємо весь малюнок на ділянки, з урахуванням того, що кожна окрема дільниця, з відповідним написом, буде служити кнопкою меню.

Як все це зробити, тут ми заглиблюватися не будемо, так як ця стаття не урок по Фотошопу. Зберігши і видаливши непотрібні фрагменти (фотошоп кроїть і зберігає всі зображення і білі поля теж), перейменуємо фрагменти, пронумерувавши їх по порядку їх розташування в меню. Тепер переходимо безпосередньо до групи. Після коректування налаштувань, на стіні з’явилися дві вкладки: Свіжі новини і Обговорення. Кількома по Нова тема в закладці обговорень і створюємо першу сторінку нашого меню.

Її потрібно назвати згідно з ім’ям на графічному меню і заповнити поле з описом. Після заповнення всієї необхідної інформації, натискаємо Створити тему.

На стіні з’явиться створене повідомлення. Таким же шляхом створюємо потрібну нам кількість (у відповідності з розділами меню) сторінок. Після завершення підготовчих операцій можемо переходити до редагування нашого меню. Для цього нам знадобиться вкладка Свіжі новини. Наводимо курсор на неї і натискаємо на Редагувати.

Далі нам відкриється вже знайоме. Перебуваючи у візуальному режимі редагування, за допомогою натискання на значок фотоапарата в редакторі завантажуємо всі фрагменти в тій послідовності, в якій вони розташовуються в загальному зображенні. Також міняємо назву на більш зрозуміле для наших відвідувачів. Після цього перемикаємося в режим wiki розмітки і редагуємо код. Важливо мати на увазі, що для фрагментів, які не виконують роль кнопки необхідно замість посилання на сторіночку прописувати nolink.

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

Тут необхідно копіювати не весь адреса, а тільки топік. Якщо все зроблено правильно і не допущено жодної помилки в коді, то при поверненні в нашу групу і після натискання на назву вкладки (Головне меню групи) відкриється створене нами меню, яке виглядає, як одне ціле разом з аватаром.

Інтерактивне меню і графічне оформлення групи представляють собою єдину композицію. При натисканні на розділи меню ми потрапляємо у відповідні розділи групи. Якщо меню не співпало по нижньому рівню з аватаром, в коді в нижньому фрагменті, змінюючи висоту в рх, добийтеся вирівнювання. Якщо це відобразилося на якості малюнка, то у вихідному шаблоні графічного редактора внесіть зміни в розмір потрібного фрагмента і перекриємо макет.

Ми розглянули, як зробити інтерактивне меню або оформити групу в стилі wiki. Якщо виникнуть питання по самому процесу підготовки, пишіть в коментарях і разом спробуємо вирішити їх.

Як зробити вікі-розмітку?

Сподобалася стаття? Поділися нею з друзями!




Комментарии закрыты