Сегодня допилим текст под игрой, я покажу как отодвинуть его от рекламы вправо, ну и покажу как изменить шрифт на сайте ucoz двумя способами. Чувствую что урок должен получится очень массивным, так что запаситесь терпением.
Очень важно! Если вдруг, перед тем как изучить урок вы обнаружили что вид вашей панели отличается от того что описано в уроке, не пугайтесь! Просто переключите новую панель на старую. Как это сделать? Вот в этой инструкции.
Рекомендую почитать:
Как поменять адрес сайта на ucoz Всего за 200р.
Давайте немного вернёмся в прошлый урок и вспомним что нам удалось сделать а точнее мне. На сколько помню первое что я сделал этот обвернул наши два элемента рекламу и текст в отдельные блоки div. При помощи этих блоков div теперь я буду управлять элементами на сайте, то-есть рекламой и текстом.
Управлять будем при помощи стилей css.
В прошлом уроке мне удалось рекламу разместить слева от текста, а текст с право от рекламы))
Теперь-же можно сказать что блок с рекламой настроен, осталось настроить текст, а это отодвинуть его от рекламы вправо, что-бы между ними было пустое пространство, ну и задать новый шрифт тексту.
В следующих уроках мы разместим над текстом заголовок оригинального название игры, для этого придётся залезть в форму добавления и исправить некоторые поля. Зачем это нужно поговорим там-же.
Назад в тот-же раздел css
В прошлом уроке мы прописали классы нашим блоками div. Для рекламы, название класса я дал «block_google» а для текста «block_text». У вас это могут быть ваши собственные названия, так-что если вдруг что-то работать не будет возможно название класса не правильное.
Если вдруг вы забыли что то, советую освежить в памите предыдущий урок, ссылку на который я дал выше.
Так вот, в прошлом уроке в стилях мы уже прописали правила для блока с рекламой, а для текста пока что правил ещё нету, так что давайте их пропишем.
Для этого зайдите в раздел управление дизайном.
Откроется документ в котором прописываются стили. Этот документ промотайте до самого низа, и в самом низу, там где мы вставили правила для блока с рекламой, под ними вставьте следующие правила для текста.
.block_text{ margin-left:20px; float:left; width: 60%;
}
Вот так как у меня.
Если сохранить документ и перейти на сайт посмотреть что получилось, тогда можно увидеть вот что.
То-есть наш блок с текстом отступил от блока с рекламой ровно на 20 пикселей, остальных изменений визуально мы не видим, но уверяю они есть!
Стили css
Разберём немного стили. Как вы помните из прошлого урока, стили прописываются между фигурных скобок {Стили}, так вот что мы сегодня прописали туда?
Первый стили margin-left:20px; отвечает за внешний отступ слева, от блока на 20 пикселей. У любого блока в html есть граница, эта граница разделяет блок на внутри блока и снаружи блока.
Пример:
С таким-же успехом мы можем отступать и сверху, справа, снизу от других блоков или элементов на сайте.
Для этого просто пропишите —
- margin-top:20px; | Сверху
- margin-right:20px; | Справа
- margin-bottom:20px; | Снизу
Следующий стиль float мы уже знаем из предыдущего урока, так что давайте поговорим о width:60%;. Это правило в стилях задаёт ширину для блоков, в нашем случае 60%. Шестьдесят процентов означает что блок будет занимать эту ширину относительно родительского блока, который сам по себе имеет сто процентную ширину.
Визуальный пример:
Вот в принципе и всё со стилями мы разобрались, нам осталось разобраться со шрифтами для текста.
Как — же изменить шрифт на своём сайте?
Шрифты обычно для текста меняются точно так-же, как мы задавали ширину нашему блоку, то-есть можно прописать определённый стиль в фигурных скобках для того-же блока.
вот пример как это сделал я —
После сохранения документа смотрим что получилось.
Как видим шрифт у текста поменялся.
Рассмотрим правило стиля
font: 16px ‘segoe print’; — слово font отвечает за определение шрифтов в документе. 16 px задаёт размер тексту, а ‘segoe print’ это и есть сам шрифт.
Запомним сразу, если шрифт состоит из двух слов как в нашем случае segoe print, его обязательно нужно пемещать в одинарные или двойные кавычки.
Вот и всё шрифт мы поменяли, но у вас возникли вопросы, где брать эти шрифты?
А здесь всё очень просто, для этого в яндексе или google пропишите ключевое слово шрифты html, и вы получити кучу сайтов на которых можно отыскать понравившийся шрифт и вставить его за место того который прописан у меня, после сохранить документ и посмотреть что получится на сайте.
Куча стандартных шрифтов:
А как поменять шрифт у всего сайта?
Да, пожалуй этот вопрос я то-же затрону. Дело в том что, на сайте ucoz да и не только на сайтах ucoz, можно шрифты менять двумя способами.
Один из способов это когда шрифт прописывается всему тексту на сайте, а второй это когда шрифт прописывается отдельному тексту на сайте, на примере мы выше разглядели как это работает.
Теперь давайте пропишем шрифт для всего сайта
Как это сделать? Всё очень просто, промотайте страницу со стилями до самого верха, и найдите селектор body — он отвечает за всё тело сайта.
Так вот, у него найдите стиль который отвечает за шрифты.
В моём случае он имеет три разных шрифта, Verdana, Arial, и случайный шрифт из той же серии с засечками, который подставляется автоматически при помощи sans-serif, это происходит если предыдущих двух шрифтов не оказалось на компьютере у посетителя вашего сайта.
Так вот, за место этих трёх шрифтов вы можете подставить свой шрифт или несколько своих шрифтов через запитую.
После сохраните документ и посмотрите что у вас получилось на сайте.
Вроде-бы всё, хотелось бы рассказать о не стандартных шрифтах которые тоже можно подключать к сайту, но это отдельная большая тема, которая поместится в отдельный урок. Здесь же мы научились подключать стандартные шрифты которые есть на любом компьютере.
Пожалуй вот и всё что я хотел рассказать в этом уроке, в следующем мы будем работать над оригинальным название игры, что бы оно выводилось над текстом. а так-же над некоторыми фишками. Пока.
Предыдущий урок | Как создать сайт — Оглавление | Следующий урок