Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Поделиться ссылкой

Мы в социальных сетях



- Правила форума -

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: JPG-Net Видео фоторедактор Транслит
Видео-туториалы
Настройка шапки форума
Категории и подфорумы - 1
Создание портала
Модули
Виджеты
Как присваивать награды
Выброс кубиков
Pop-up для входа на форум
Настроение в профиле

Древо рангов на Htlm - странице. [Все движки]

Предыдущая тема Следующая тема Перейти вниз

Древо рангов на Htlm - странице. [Все движки]

Сообщение автор Сказочник Зазеркалья в Пн 15 Апр - 11:03

Всем приветик ребята.  thank

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



Первый вариант - Стандарт.

Первый вариант это обычное отображение древа рангов, без каких либо бонусов. Нам понадобятся изображения рангов и в максимальной мере 1 час свободного времени, но это с учётом того если у вас очень много рангов и званий.



И так сделаем первый вариант на примере рангов Наруто. У нас имеются вот такие изображения, нужные для работы:

Спойлер:

Желательно чтобы изображения были одинаковой формы и размера.  Exclamation



Инструкция по установке:

Имея изображения, направляемся на свой форум и проделываем следующее:

Панель Администратора ✄ Модули ✄ Управление Htlm & Javascript ✄ Htlm - страницы.

Создаёте новую страницу по такому шаблону:

Название : Можете выбрать любое, например Древо Рангов.
Использовать низ и вверх вашего форума: НЕТ
Вы хотите использовать данную страницу в качестве главной: НЕТ


В поле содержимого страницы вставляем вот этот код:

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru" xml:lang="ru">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<div class="regulations">
<br/>


<div style="position:absolute; left:800px; bottom:70%;"><a href="Ваша ссылка"><img src="http://savepic.org/3208802.png" /></a></div>

<div style="position:absolute; left:800px; bottom:63%;"><a href="Ваша ссылка"><img src="http://savepic.org/3197538.png" /></a></div>

<div style="position:absolute; left:800px; bottom:56%;"><a href="Ваша ссылка"><img src="http://savepic.org/3198562.png" /></a></div>

<div style="position:absolute; left: 1010px; bottom:56%;"><a href="Ваша ссылка"><img src="http://savepic.org/3195490.png" /></a></div>

<div style="position:absolute; left:590px; bottom:56%;"><a href="Ваша ссылка"><img src="http://savepic.org/3189346.png" /></a></div>

<div style="position:absolute; left:800px; bottom:49%;"><a href="Ваша ссылка"><img src="http://savepic.org/3190370m.png" /></a></div>

<div style="position:absolute; left: 800px; bottom:42%;"><a href="Ваша ссылка"><img src="http://savepic.org/3188322.png" /></a></div>

<div style="position:absolute; left:1010px; bottom:42%;"><a href="Ваша ссылка"><img src="http://savepic.org/3203685.png" /></a></div>

<div style="position:absolute; left: 590px; bottom:42%;"><a href="Ваша ссылка"><img src="http://savepic.org/3204709.png" /></a></div>

<div style="position:absolute; left: 800px; bottom:35%;"><a href="Ваша ссылка"><img src="http://savepic.org/3210853.png" /></a></div>

<div style="position:absolute; left: 800px; bottom:28%;"><a href="Ваша ссылка"><img src="http://savepic.org/3197541.png" /></a></div>


<style>
body {
background: url(http://www.snapsnap.ru/i/ibackground.png); /*основной фон*/
background-attachment: fixed; /*Фиксация фона*/
}


</style>
</body>
</html>

Сохраняете страницу и вуаля, на отдельной Htlm странице у вас будет Древо рангов.  Оформление страницы можно изменить на свой вкус и желание. Arrow




Инструкция по редактированию и настройке:

Теперь можно перейти к настройке Древа рангов.

Собственно говоря сам туториал и его редактирование очень лёгкое, поэтому для редактирования вам нужно в этих строках:

<div style="position:absolute; left:800px; bottom:70%;"><a href="Ваша ссылка"><img src="http://savepic.org/3208802.png" /></a></div>

Изменить параметры отображения рангов на странице. И так разберём все параметры по частям:

position:absolute - Отвечает за прокрутку рангов. При absolute ранги будут прокручиваться вместе со страницей, а если указать fixed, это сделает ранги фиксированными на странице, а это будет не очень красиво, поэтому для лучшего отображения используйте  
absolute.

left:800px; - Отвечает за горизонтальное отображение. left можно заменить на right, а числовой параметр можно использовать как допустим 800px;, так и 80%. Т.е проще говоря указывать можно как в пикселях, так и в процентах, это уже как вам будет удобнее.

bottom:70% - Отвечает за вертикальное отображение. bottom можно заменить на top, а с числовым параметром тоже самое что и с горизонтальным отображением.  

<a href="Ваша ссылка"> - Собственно говоря этот параметр не так уж и важен и его можно удалить. Но если у вас есть к примеру желание создать описание ранга, то в определённой теме выкладываете описание, а затем вставляете ссылку на эту тему, заместо этих  
слов "Ваша ссылка".

<img src="Ссылка на изображение" /> - Это самый важный параметр собственно отвечающий за изображение. Заместо моей ссылки на изображение, вставляете свои ссылки изображений рангов.

Ещё хочу дополнить, что можно сделать всплывающую подсказку на наведении курсора на изображение ранга. Для этого достаточно добавить в код ранга, атрибут title="текст подсказки"

<div style="position:absolute; left:800px; bottom:70%;"><a href="Ваша ссылка"><img src="http://savepic.org/3208802.png" title="За красивые глазки" /></a></div>

И так на этом заканчивается инструкция по созданию Древа Рангов на отдельной Htlm - странице.  12




Дополнительно.

Советы по туториалу.

№1 - Чтобы страница с Древом не была пустой, её можно всячески украшать. Например добавлять фоновую музыку, менять фоновое изображение, добавить снег, дождь, падающие предметы или же использовать сторонние виджеты, можно также разместить по углам изображения и т.д. Дизайн вашей страницы с древом зависит от вашей фантазии.  :88:



Примечание.

Уважаемые форумчане: Если вы найдёте в туториале ошибки или неправильные шаги туториала, пожалуйста напишите мне об этом в л/с. Туториал хоть и писал не на скорую руку, но всё же мог допустить ошибки в грамматике или инструкции.  punish



Описание Древа рангов:

Я думаю найдутся люди, которые захотят оставить подобные Коментарии "А зачем это вообще нужно ?" или же "Легче в теме создать нечто простое в текстовом варианте". И так чтобы не было таких комментариев, я подробно опишу зачем вообще нужно это Древо рангов. Приведу пример на основе ролевых: Как многие знают, на ролевых используется система званий/рангов, и собственно говоря для более лёгкого процесса получения званий, нужно иметь Древо рангов, которое даст понять пользователю какие условия он должен выполнить или вообще какие звания имеются на ролевой, т.е к чему вообще можно стремиться. Подобное древо рангов на Htlm странице, позволит значительно улучшить эту систему, так как есть множество методов модификации Древа рангов. Со временем смогу выложить более прокаченные варианты, так как на классное отображение и настройку функционала требуется время. В Дизайнерском деле возможно всё что может пожелать ваша фантазия, проще говоря в Интернете сказка может стать реальностью. Нет таких слов как "Невозможно сделать эту деталь или функционал", есть только такие "Не хочу делать" или "Мой уровень знаний ещё не того уровня". Всё в ваших руках, поэтому не закидывайте на чердак ваши фантазии, а ищите пути их  воплощения в реальность.  music


С уважением автор туториала Миша Вейк aka Сказочник Зазеркалья.

Сказочник Зазеркалья
Дизайнер
Дизайнер

Пол : Мужчина
Сообщения : 3672
Возраст : 25
Место обитания : Морг.
Карма : Без предупреждений
Благодарности : 687
Регистрация : 2012-11-16

http://help.forum2x2.ru

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения