Среда, 08.09.2010, 14:04 Приветствую Вас, Гость
Главная | Форум | Файлы | Ваша ссылка | Блог | Онлайн видео | Видео
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Last-Soft.Net - форум » Web-мастеру » Скрипты » Оформление групп Вконтакте ( палю тему)
Оформление групп Вконтакте ( палю тему)
donald_666Дата: Вторник, 29.06.2010, 16:13 | Сообщение # 1
Лейтенант
Группа: Администраторы
Сообщений: 79
Репутация: 3
Статус: Offline
Оформление групп Вконтакте ( палю тему)

Я решил акцентировать внимание на группах вконтакте, а именно на их оформление, ведь это является чуть ли не самым важным в создании группы. Дополнение будет полезно не только для тех, кто решил создать группу под партнерку. Я расскажу про различные виды и способы разметки, которые идеально подойдут для групп интернет магазинов, групп сайтов, фан-групп.

Вас ждет подробный мануал по WIKI разметке. После его прочтения вы легко сможете оформить себе группу так, как вам необходимо.
Я разделяю виды оформления на три вида:
1 - Графическое меню.
2 - Текстовое меню.
3 - Оформленное описание.
Мы поговорим про каждый из них в отдельности.

А для начала давайте узнаем - что же такое WIKI разметка? Это своеобразный аналог HTML, который используется для оформления новостей в группах, и написанию и редактированию статей в самой википедиии, если кто не знал. Вы спросите: "А зачем тогда нужна эта разметка, почему бы просто не поставить html?" На этот вопрос я могу дать два ответа. Во-первых, разве вы сможете с html сделать что то хотябы похожее на такое

Может какой то заядлый верстальщик ответит: "Да!". Но если таких на сео форумах единицы, то сколько таких на 50 миллионов обычных людей? На то, чтобы начать разбираться в wiki разметке нужно просто прочитать и вникнуть в пару страниц ворда. Что бы начать же разбираться в html нужно прочитать книгу, а то и несколько. Да и сама разметка по своему лучше в понимании чем html.
Ну и конечно же, если бы было html то все бы начали вставлять свои попандеры, редиректы и прочую фигню. И контакт за несколько дней превратился бы в свалку.

Для начала нужно определиться, какой вид новостей вы будете делать. Если это группа под интернет магазин, то лучше всего вам подойдет графическое меню. Если это группа сайта или фан-группа то тоже графическое или текстовое меню. Хотя я считаю, что лучше текстовое. Если это группа для смс платника, то смело выбирайте оформленное описание.
А как же начать это понимать? - спросите вы. Лично я перед тем как делать группу в поиске искал похожие, смотрел на их разметку и с помощью мануалов пытался сделать точно так же. Здесь я выложу свои работы, по одной для каждого вида, заодно и портфолио себе наберу

Начинаем работу с wiki разметкой. И первое, что мы попробуем - это сделать графическое меню, которое лучше всего подойдет для интернет магазина. Реже - для группы сайта. Здесь мы попытаемся сделать что то наподобие

Многие сейчас подумали что это очень сложно. Что ж, я вас огорчу. Такую навигацию делать проще всего Чем мы сейчас и займемся.
Для начала одно важное замечание. Картинки вконтакте нельзя вставлять с компьютера или файл хостинга. Их можно вставлять только с альбомов. Это конечно печально, но не на столько. Выкладываю код этой навигации:

Доступно только для пользователей

Code
{|
|-
| [[photo7357589_143534713]] ||  [[photo7357589_143534714]] ||  [[photo7357589_143534715]]
|-
! [http://site.ru|Навигация]  !! [http://site.ru|Навигация]!! [http://site.ru|Навигация]
|-
|  [[photo7357589_143534716]] ||  [[photo7357589_143534717]] ||  [[photo7357589_143534718]]
|-
![http://site.ru|Навигация] !! [http://site.ru|Навигация] !! [http://site.ru|Навигация]
|}

Лентяи уже скопировали код и тихонько ушли вставлять себе. Те, кто хочет разобраться - остались <img src="http://s38.ucoz.net/sm/1/smile.gif" border="0" align="absmiddle" alt="smile"> Давайте разберем весь код.
Код
{|
текст
|}

Это код начала и конца таблицы. Наподобие <table></table>.
Дальше всмотритесь.
|- означает одну строку. Тоесть для того чтобы поставить хотя бы одну строку с картинками или текстом, ставим |-. Потом на новой строчке выбираем тип строки.
| значит белый фон
! синий.
В примере у меня картинки на строке с белым фоном, текст - с синим.
Разделитель для каждой ячейки является двойным обозначением для типа. Тоесть:
|| - для белого
!! - для синего.
Между ними ставим либо картинку, либо текст. Картинку обозначаем так:
[[photo7357589_143534713]]
где вместо photo7357589_143534713 - номер фотографии в альбоме. Его можно взять в адресной строке.
Ссылку делаем так:
[http://site.ru|Навигация]. Тут я надеюсь - всё понятно. Вместо site.ru ваш сайт, вместо "Навигация" - анкор можно сказать
Внутренние ссылки делаем так:
Доступно только для пользователей

Code
[idNNN|Имя Фамилия]
[clubNNN|Название группы]
[topicNNN|Название темы]
[photoXXX_YYY]
[videoXXX_YYY]

Тут я тоже надеюсь всё понятно

Как я уже говорил, это подойдет для групп сайтов. В примере будет использовано такое меню:

P.S. это меню было взято с группы wiki разметки.
Сейчас мы всё подробно разберем и узнаем. Вот код меню:

Доступно только для пользователей

Code
{|
|-
! !! !!
|-
!
|
{|
|+[[photo-9291063_128344730]]
|-
! ▶ '''Меню''' || ▶ '''FAQ''' || ▶ '''Форум'''
|-
| ▶ '''Разделы''' || ▶ '''Новости''' || ▶ '''Правила'''
|-
| ▶ '''Пригласи''' ||▶ '''О нас''' || ▶ '''Выгодно'''
|}
!
|-
! !! !!
|}

Строение самого кода очень похоже на наш прошлый пример(Графическое меню). Так же здесь было использовано две таблицы. Одна - рамка. Другая - сама навигация. Первую я так думаю разбирать не стоит, так как её менять нету смысла, она своего рода уникальная А поговорим мы о самой навигации.
Как вы видете, с помощью плюса мы позволили картинке добавиться вне ячеек. Это называется заголовком таблицы. Вместо картинки можно поставить текст, видео, да вообщем что душа пожелает . Если убрать этот плюс, то картинка просто напросто не отобразится. Потом идет сама навигация. Если вы заметили, ячейка "Меню" выделена. Это делается легко, просто создаем ячейку синей(с помощью знака !). Дальше я хочу обратить внимание на заголовки. Они сделаны с помощью таких параметров '''[текст]'''. Очень симпатичненько выходит Вместо текста вы естественно можете вставить ссылку с помощью способа, который я описывал выше.


Последним пунктом в моей статье будет разметка для групп смс платников. Здесь можно включить фантазию, придумывать новые решения. Очень хорошие иконки для смс платников предоставляет партнерская программа ElitePartners.RU. С помощью них можно сделать что то подобное:

Чем мы сейчас и займемся. Для такого оформления можно сделать рамки, ступеньки. Вообщем идей много. Сейчас давайте рассмотрим исходный код этой разметки
Доступно только для пользователей
Code

<center>[[photo20703116_142428401]]  [[photo20703116_142428402]]  [[photo20703116_142428431]]  [[photo20703116_142428432]]</center>
{|
|-
|<center>Раскрыть тайну своей фамилии хочет каждый из нас, ведь фамилия - это наследственное имя семьи!
У нас более 100 тысяч довольных клиентов которых мы сумели удивить
Их отзывы о нашем сервисе можно прочесть у нас на сайте</center>
|}
<center>[[photo20703116_142428433]]  [[photo20703116_142428434]]  [[photo20703116_142428432]]  </center>
{|
|-
| <center>Статистика показывает, что 87% потомков великих людей не знают об этом из-за сложных запутанных исторических следствий</center>
|}

Как вы видете иконки вставляются вне таблицы. Так же хорошо видно, что центровка сделана привычным
Код:
Доступно только для пользователей

Code
<center></center>

как в html. А потом делается обычная таблица с белым фоном куда вставляются отличные заголовки. Ничего сложного нет.


Напоминаю, что для группы смс платника одной разметки мало. Необходимо ставить яркое название, красочные аватары. Писать заманивающие отзывы, по возможности . Только в комбинации со всем этим разметка принесет хороший эффект.
Ну вот и всё. Мое дополнение к статье подошло к концу. Прочитав его полностью внимательно вы будете понимать что и как в этой WIKI разметке, и сможете сделать настоящую, красивую группу.
Прикрепления: 7922901.jpg(25Kb) · 4235141.jpg(31Kb) · 7826014.jpeg(6Kb) · 2410622.jpeg(7Kb) · 7163406.jpeg(38Kb) · 7689909.jpeg(7Kb) · 2117060.jpg(112Kb) · 5397311.jpg(7Kb)
 
Last-Soft.Net - форум » Web-мастеру » Скрипты » Оформление групп Вконтакте ( палю тему)
Страница 1 из 11
Поиск:


Карта сайта