Создание сайта-заглушки


Урок #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).