Логотип

Как создать сайт

Всё что нужно для создания сайта!

Ucoz категории, добавляем кнопку на категорию стрелялки


Перед тем как начать настраивать категории на нашем сайте, а точнее она у меня одна пока. Так вот, перед тем как начать настраивать эту страницу, нужно на сайт добавить кнопку что-бы переходить на неё. После мы доработаем ещё немного главную страницу и сможем приступить к настройке категорий.

На главной странице нам осталось настроить кнопку для категории, это мы сделаем сегодня. Добавить в верхний слайдер информеры для того что бы игры выводились динамично. Настроить функцию что бы на главной странице выводились 15 игр а не девять как это у нас сейчас. Убрать лишние полосы внизу и верху страницы. Поменять название у поиска, сейчас там написано на английском и под слайдером настроить кнопки для того чтобы они смотрелись красиво. Кнопка добавить игру и кнопку с главной наверное полностью снесем.

После можно спокойно выдохнуть и сказать что главная страница нашего сайта настроена.

К работе:

Давайте время не терять приступим кнопку добавлять )) Для этого нужно зайти в панель управления и нажать на главной странице модуль онлайн игры и управление категориями. Просто нам нужно скопировать ссылку на категорию стрелялки.

Пример:

Откроется страница на которой собираются списки категорий, в нашем случае она пока одна. Нажмите на неё.

Пример:

Откроется страница с данной категорией, в ней будет собран список с играми. На против каждой игры показано к какой категории данная игра относится. Так вот, нажмите на эту категорий правой кнопкой мышки и скопируйте адрес.

Пример:

Всё теперь можно идти на главную страницу в панели, и нажимать управление дизайном.

Пример:

Далее откроется страница на которой выберите верхняя часть сайта.

Пример:

Откроется код в который установите перед тегом </nav> следующий код.

Код:

<a class="kategori" href="Сюда вставьте ссылку на категорию">Стрелялки</a>

Пример:

Сохраните документ. На главной странице должно получится вот так.

Пример:

Css стили:

Теперь что нам осталось сделать, это добавить стили на сайт. Для этого нажмите по кнопке управление дизайном.

Пример:

Откроется страница на которой в самом низу вставьте следующий css код

Код:

.kategori{
background: url('/img/li.gif') left top repeat-x;
border: 1px solid #0589c0;
margin-left:117px;
color: #fff !important;
display: block;
height: 41px;
line-height: 41px;
padding: 0 27px;
}

Пример:

Разберём стили: Первая строчка в этом списке это backgorund. Это правило добавляет задний фон для нашей кнопке, в данном случае это картинка. Следующие правило border. Оно задаёт рамку для кнопке. Правило margin-left делает отступ слева в 117 пикселей. Color задаёт цвет для текста у кнопке, в моём случае это белый. display делает кнопку блоком. Следующие правило задаёт высоту нашей кнопке. line-height задаёт высоту строки для текста. И свойство padding делает внутренний отступ у конке, для того что бы вокруг текста было пространство.

Не забудьте сохранить документ.

Итог:

Вот и всё кнопку добавили. Конечно схема не усовершенствована, следующею кнопку уже просто не добавишь, придётся менять стили. Для этого кнопку придётся отодвигать при помощи правила margin-left. Будут вопросы задавайте в комментариях. Пока!

Задай свой вопрос в комментариях? или в специальном разделе.
Подсказка:

Перед тем как начать создавать сайт, изучи язык разметки HTML.

Курс ещё не готов, но подписчики получат его первыми - как только работа будет закончена. На данный момент 27.07.2017 записано 19 теоретических уроков и 0 практических. Теоретический кус Готов! "Как создать, настроить, наполнить и раскрутить сайт на uCoz"