Создание сайта-заглушки: Урок #2

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

Скачать все файлы к курсу «Сайт-заглушка»

Создание стилей

Шаг #1. В главном меню перейдите в раздел «Конструктор стилей» → нажмите на кнопку «Добавить стиль» → задайте название и тип стиля (название стиля: Текст белый (22 px), тип стиля: текст) → нажмите «Далее».

Выберите параметры шрифта → задайте стиль, размер и цвет текста (стиль: Ristrettopro-light-webfont, размер текста: 22 px, цвет текста: #ffffff).

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

Нажмите «Сохранить» → над экраном внешнего вида стиля нажмите «Назад».

Шаг #2. Нажмите «Добавить стиль» → задайте название и тип стиля (название стиля: Текст белый (32 px), тип стиля: текст) → нажмите «Далее».

Выберите параметры шрифта → задайте стиль, размер и цвет текста (стиль: Ristrettopro-regular-webfont, размер текста: 32 px, цвет текста: #ffffff) 

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

Нажмите «Сохранить».

Шаг #3. При желании вы можете скопировать стиль, нажав на кнопку «+» в правом нижнем углу экрана → присвойте название для нового стиля (Текст белый (32 px) medium) → нажмите «Копировать».

Установите параметры стиля → в данных настройках замените стиль шрифта на Ristrettopro - medium - webfont.

Остальные настройки оставьте неизменными → над экраном внешнего вида стиля нажмите «Назад».

Шаг #4. Подобным образом создайте еще один стиль для кнопки → нажмите «Добавить стиль» → задайте название и тип стиля (название стиля: Текст белый (82 px), тип стиля: текст) → нажмите «Далее».

Выберите параметры шрифта → задайте стиль, размер и цвет текста (стиль: Ristrettopro-regular-webfont, размер текста: 82 px, цвет текста: #ffffff).

 нажмите «Сохранить».

Шаг #5. Подобным образом создайте еще один стиль для кнопки → нажмите «Добавить стиль» → задайте название и тип стиля (название стиля: Текст серый (16 px), тип стиля: текст) → нажмите «Далее».

Выберите параметры шрифта → задайте стиль, размер и цвет текста (стиль: Ristrettopro-regular-webfont, размер текста: 16 px, цвет текста: #656565) → нажмите «Сохранить».

Шаг #5. Создайте новый стиль для кнопки → задайте название и выберите тип (название стиля: Кнопка, тип стиля: кнопка) → нажмите «Далее».

Установите параметры кнопки по умолчанию и при наведении курсора. 

В разделе «Базовые параметры» укажите ширину и высоту кнопки (ширина: 250 px, высота: 40 px) → выберите параметры шрифта (стиль шрифта: Ristrettopro-regular-webfont, размер текста: 32 px, цвет текста: #ffffff).  

Настройте параметры рамки (ширина рамки: 1 px, цвет: #656565, прозрачность: 0.6) → настройте параметры фона (цвет: #656565, прозрачность цвета: 0.6).  

Шаг #6. Настройте параметры кнопки при наведении на нее курсора → замените цвет шрифта (цвет текста: #000000) → отключите «Фон» → переключите синюю плашку в неактивное состояние.

На боковом экране визуально отображается внешний вид создаваемого стиля → нажмите «Сохранить». 

В следующем вы узнаете, как создавать шаблоны (Template).