Оформление страницы

Уровень сложности: Средний

Содержание

Введение
Список авторов
Видео
Скриншоты

Введениенаверх

Прочитайте "Правила загрузки файлов" перед тем как приступить к прочтению этого гайда.

При добавлении/редактировании материала (страницы загруженного файла) находим два окна со встроенным текстовым редактором под названием "Краткое описание" и "Полное описание". В кратком описании оставьте ссылку на скриншот или рендер, который по Вашему мнению привлечет пользователя и покажет Вашу (или чужую) работу во всей красе.

Если нет такого изображения, то оставьте текст, описывающий Вашу работу.

Выбираем ссылку "Панель HTML кодов" и очищаем поле во втором окне "Полное описание". После этого копируем код отсюда:

<p style="text-align: center;"><strong>Список авторов</strong></p>
<p style="text-align: center;"><span style="color: rgb(169, 169, 169);"><span style="font-size: 11px;">Credits</span></span></p>

<hr />
<p><span style="font-size: 11px;"><font color="#ffffe0"><b>ИМЯ АВТОРА</b></font> - ЕГО РОЛЬ В РАБОТЕ<span style="color: rgb(128, 128, 128);">//HIS ROLE</span></span></p>

<p> </p>


<p style="text-align: center;"><strong>Видео</strong></p>
<p style="text-align: center;"><span style="font-size:11px;"><span style="color:#A9A9A9;">Video Preview</span></span></p>

<p><iframe allowfullscreen="" frameborder="0" height="320" src="//www.youtube.com/embed/КОД ВИДЕО" width="580"></iframe></p>

<p> </p>




<div class="uSpoilerClosed" id="uSpoiler38msMJ">
<div class="uSpoilerButBl" style="text-align: center;"><input class="uSpoilerButton" onclick="if($('#uSpoiler38msMJ')[0]){if ($('.uSpoilerText',$('#uSpoiler38msMJ'))[0].style.display=='none'){$('.uSpoilerText',$('#uSpoiler38msMJ'))[0].style.display='';$('.uSpoilerButton',$('#uSpoiler38msMJ')).val('[\–] Скриншоты');$('#uSpoiler38msMJ').attr('class','uSpoilerOpened');}else {$('.uSpoilerText',$('#uSpoiler38msMJ'))[0].style.display='none';$('.uSpoilerButton',$('#uSpoiler38msMJ')).val('[+] Скриншоты');$('#uSpoiler38msMJ').attr('class','uSpoilerClosed');}}" type="button" value="[+] Скриншоты" /></div>

<div class="uSpoilerText" style="display: none;">
<img alt="" src="ССЫЛКА НА КАРТИНКУ" style="width: 580px;" />
<img alt="" src="ССЫЛКА НА КАРТИНКУ" style="width: 580px;" />
</div>
</div>



<p style="text-align: center;">Заменяет НАЗВАНИЕ ОРУЖИЯ.</p>

Рассмотрим каждый из пунктов в деталях.

Список авторовнаверх

То, что нам нужно выделено желтым цветом. Об остальном даже не думаем:

Если авторов больше, чем один, то копируйте последнюю строку кода и вводите имя, роль и роль на английском.

Дополнительно: Отдельное спасибо

Кто-то помог исправить баг или показал как правильно сделать что-либо? Чья-то статья помогла в разработке? Кто-то оставил конструктивную критику, которая помогла? Здесь перечисляем имена соответствующих лиц.

<p style="text-align: center;"><strong>Список авторов</strong></p>
<p style="text-align: center;"><span style="color: rgb(169, 169, 169);"><span style="font-size: 11px;">Credits</span></span></p>

<hr />
<p><span style="font-size: 11px;"><font color="#ffffe0"><b>ИМЯ АВТОРА</b></font></span></p>

Видеонаверх

Для видео обзора иожно использовать ролик из YouTube. На странице ролика в YouTube скопируйте ту часть адреса, где буквенная белиберда типа - и вставьте ее туда, где выделено желтым цветом:

<p style="text-align: center;"><strong>Видео</strong></p>
<p style="text-align: center;"><span style="font-size:11px;"><span style="color:#A9A9A9;">Video Preview</span></span></p>

<p><iframe allowfullscreen="" frameborder="0" height="320" src="//www.youtube.com/embed/КОД ВИДЕО" width="580"></iframe></p>

Скриншотынаверх

Все скриншоты прячутся под спойлер, чтобы не растягивать страницу файла и не отдалять доступ к комментариям. Заменям желтый текст на ссылку скриншота.

<div class="uSpoilerClosed" id="uSpoiler38msMJ">
<div class="uSpoilerButBl" style="text-align: center;"><input class="uSpoilerButton" onclick="if($('#uSpoiler38msMJ')[0]){if ($('.uSpoilerText',$('#uSpoiler38msMJ'))[0].style.display=='none'){$('.uSpoilerText',$('#uSpoiler38msMJ'))[0].style.display='';$('.uSpoilerButton',$('#uSpoiler38msMJ')).val('[\–] Скриншоты');$('#uSpoiler38msMJ').attr('class','uSpoilerOpened');}else {$('.uSpoilerText',$('#uSpoiler38msMJ'))[0].style.display='none';$('.uSpoilerButton',$('#uSpoiler38msMJ')).val('[+] Скриншоты');$('#uSpoiler38msMJ').attr('class','uSpoilerClosed');}}" type="button" value="[+] Скриншоты" /></div>

<div class="uSpoilerText" style="display: none;">
<img alt="" src="ССЫЛКА НА КАРТИНКУ" style="width: 580px;" />
<img alt="" src="ССЫЛКА НА КАРТИНКУ" style="width: 580px;" />
</div>
</div>

Дополнительно: Изображения uCoz

Можно загрузить скриншоты на сайт - для этого ищем поле "Изображения" (под Полным описанием, состоит из двух кнопок - плюс и папка - и пустого поля), нажимаем иконку папки и добавляем скриншот со своего компьютера. Нажмите плюсик, чтобы добавить больше скриншотов. Допускаются только GIF, JPEG, PNG форматы изображения весом не более двух мегабайт. Вы можете вставлять картинки в любое место сообщения используя специальные коды вместо ссылок на изображения. Будет это выглядеть так:

<div class="uSpoilerText" style="display: none;">
$IMAGE1$
$IMAGE2$
</div>

Дополнительно: Полноразмерный скрин

Выравнивать картинку относительно текста можно следующим образом - $IMAGE1-left$.

Также можно загрузить скриншот в поле "Полноразмерный скрин". Ссылка на это скриншот будет располагаться рядом с кнопкой "Загрузить" на странице загрузки файла.

Спасибо за внимание!

Отдельное спасибо RETOUR и †{SaInT}†

Еще статьи:

Категория: Гайды по оформлению | Добавил: MaxPlayer2009 (09.11.2015)

Просмотров: 558 | Теги: Guide, style, design, оформление, html, Страница, файл, Гайд | Рейтинг: 0.0/0

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Профиль

Меню сайта

Наш опрос

Мини-чат

Статистика

Онлайн всего: 1

Гостей: 1

Пользователей: 0

Никого нету