Логотип

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

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

Как работать с сайтом ucoz, дорабатываем блок с текстом и рекламой


Добрый день друзья, вот и подошли мы к очередному уроку по созданию собственного сайта на системе ucoz. Шаг за шагом мы узнаём всё больше о том как работать с сайтом ucoz, и надеюсь для вас эти уроки полезны. Сегодня мы продолжим настраивать наш дизайн и наверное доработаем до конца блок с текстом и рекламой.

Сегодня постараюсь более коротко описать работу над этими элементами, можно сказать так, по меньше теории по больше практики.

И так, что я сегодня буду делать?

Первым делом нужно наши два элемента, а это рекламный блок и текст обвернуть в отдельные блоки div, каждый элемент обвернуть в свой блок. Ну и зададим первому блоку стили.

Для этого заходим в следующий раздел - Панель управления -> Дизайн -> Управление дизайном (шаблоны) -> на странице найдите раздел онлайн игры и зайдите в Страница материала и комментариев к нему.

Как раз в этом разделе мы и настраиваем страницу с игрой. Если вдруг не найдёте этот раздел, тогда зайдите в прошлый урок про хлебные крошки, и изучите.

И так, нам нужно обвернуть каждый элемент в свой собственный блок div. Эти два блока отличаются между собой только названиями класса. При помощи данных классов мы будем задавать стили для блоков.

Вот этот код для рекламы.

<div class="block_google">Здесь элемент</div>

Вот этот для текста.

<div class="block_text">Здесь элемент</div>

Посмотрите пример как сделал это я.

Код под стрелочкой один и два оборачивает рекламный блок, в данном случае это пока картинка. Код под стрелочками три четыре оборачивает текст. Пока что здесь наша работа заканчивается, не забудьте сохранить документ.

Стили для блоков

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

Напомню что стили на сайте отвечают за вид сайта, то-есть за цвет ссылок, за размер шрифта, за размер картинок, за выравнивание элементов ну и многое многое другое.

Промотайте это страницу до самого низа, там в самом низу вставьте вот такой вот код и сохраните документ.

.block_google{
float:left;
}

Пример:

Стиль начинается с точки, точка обозначает класс, после точки идёт название класса, в моём случае это block_google далее идут фигурные скобки. Имя класса можно давать произвольное, оно прописывается в тегах. Что-бы связаться с этим тегом, в стилях прописывается точка а после неё имя класса, в фигурных скобках правило стиля.

В моём случае правило такой float:left; Это обозначает что блок должен прижаться влево а другие блоки его могут обтекать справа. Двоеточие разделяет свойство:значение, точка с запятой разделяет правила между собой.

Давайте зайдём на сайт и посмотрим что получилось.

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

Кстати на картинке блоки я выделил красным цветом, что бы вам было удобно приставлять что это такое, просто блоки не видны изначально, так как они прозрачны.

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

Подсказка:

Для сбора ключевых слов, предпочитаю программу с интересным названием "словоЁБ".

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