Так вы новичок в WebFlow, а? Давайте погрузимся в.

Руководство Визуальный Веб-дизайн

Это наглядное руководство, вы пройдете через важных концепций реагировать веб и как реализовать их визуально внутри WebFlow.

# 1 коробка модель

Понимание структуры сайта

Все элементы на этой странице, все блоки внутри других блоков (ака "блочную модель"). При перетаскивании веб-элементы, вы перетащите их из одного блока и поместите их в другой. Вот как работает HTML!

супер ПЛАН

$ 75 / цена

Идеально подходит для любого бизнеса с 20 или более сотрудников.

500GB хранения
1 миллион просмотров страниц
20 соавторы
50 Социальные сети
Премиум поддержка

Что ты видишь

Примечание: Вы поймете, как проектировать что-то подобное с ниже понятий.

Что Блоки Он сделан из

Див Блок

Н2 Заголовок супер ПЛАН

Текстовый блок $ 75 / мес

Пункт Идеально подходит для любого бизнеса с 20 или более сотрудников.

Список

Список экземпляров
500GB хранения
Список экземпляров
1 миллион просмотров страниц
Список экземпляров
20 соавторы
Список экземпляров
50 Социальные сети
Список экземпляров
Премиум поддержка

попробуйте сами

Перетащите этот пункт ...

Все функции без ограничений. Все вы можете съесть. (Этот параграф элемент)

СОВЕТ: Нажмите и перетащите элемент абзаца выше и поместите его по цене справа. Вы также можете использовать сочетания как копировать и вставить (Ctrl + C, Ctrl + V), скопируйте при перетаскивании (проведение Alt), и удалить (удалить ключ).

В фиолетовом блока ...

Супер ПЛАН

$ 75 / ffd

ИНФОРМАЦИЯ: Это, как работает HTML и веб-структуры - элементы стека друг под другом или внутри друг друга. Это лучший способ построить жидкости и отзывчивый сайт.

# 2 элементы макета

Основные элементы макета

Добавление элементов в свой веб-сайт, нажав на иконку [+] в верхнем левом углу. Ниже приведены некоторые из наиболее основных структурных элементов в веб-дизайне - секции, контейнеры и столбцов.

Секция занимает 100% ширины окна браузера, если вы добавляете его в тело (холст веб-сайта).
Это здорово для больших горизонтальных сечений сайте.

Элемент Раздел

Контейнер представляет собой блок 960px сосредоточена в середине браузере. Обычно большинство содержание веб-сайта будет добавлен внутри контейнер так, чтобы он по центру. Контейнеры, как правило, добавляется в орган или элемент секции.

Контейнер Элемент

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

Отзывчивый Колонны

# 3 Проектирование с помощью CSS

Стилизация ваши элементы

Выберите элемент и добавить класс в правильном стиле панели (Кисть Icon). В этой панели вы можете добавить текст и графические стили, такие как цвет шрифта, высоту строки, градиентов, границ, теней и многое другое. Визуальный веб-дизайн намного больше удовольствия, чем кодирование правильно?

Кнопка пример дизайн

Добавить в корзину ➜

Стиль его самостоятельно

Кнопка Текст ➜

СОВЕТ: Эта кнопка уже есть класс "Button" с некоторых основных стилей. Выберите кнопку и попробуйте добавить градиент, границы, закругленные углы, внутри / вне тени, наведите государственные стили и переход на стили при наведении - все с помощью панели в стиле.

То, что вы создали

Кнопка Текст ➜

применить класс «кнопка»

Кнопка Текст

СОВЕТ: В веб-дизайне можно применить класс многих элементов, чтобы сделать их выглядят одинаково. Применить класс "Button", что вы оформлением ссылке выше, нажав на [+] в верхней части панели Style и введите "Button", чтобы найти этот класс.

Пример Дизайн формы

Спасибо!

Ваше рок мои носки!

Нам Что-то пошло не так во время отправки формы :(

Стиль его самостоятельно

Спасибо! Ваше представление было получено!

Нам Что-то пошло не так во время отправки формы :(

СОВЕТ: Сначала создайте классы для текстовых полей и кнопки (применить тот же класс обоих полях). Затем измените стили границ, цвет фона, и добавлять стили для висения и прессованных государств. Не забудьте для элемента формы, найденной в панели настроек (Icon передач в правом верхнем углу) стиль состояние "успех".

Пример Типография

Лейквуд Стаут

Темный Пиво Лейквуд, штат Колорадо

Легендарный толстый родился из красивого брака горного человека и его самой любимой вещью, в городе Лейквуд в штате Колорадо. Гора человек тоже любил свой топор и его однократного Remington винтовки, но не так сильно, как любил свой город. Он мечтал о ее лёгкой струящейся реки и величественные горы. Так он назвал свою самую большую располнеть после нее. Таким образом, славное было рождено толстый из сердца горы человека.

"Я созданный эту славную пиво выразить бессмертную любовь моей прекрасном городе."

- Горный Человек

Стиль его самостоятельно

Лейквуд Стаут

Темный Пиво Лейквуд, штат Колорадо

Легендарный толстый родился из красивого брака горного человека и его самой любимой вещью, в городе Лейквуд в штате Колорадо. Гора человек тоже любил свой топор и его однократного Remington винтовки, но не так сильно, как любил свой город. Он мечтал о ее лёгкой струящейся реки и величественные горы. Так он назвал свою самую большую располнеть после нее. Таким образом, славное было рождено толстый из сердца горы человека.

"Я созданный эту славную пиво выразить бессмертную любовь моей прекрасном городе."

- Горный Человек

СОВЕТ: Идите вперед и добавлять пользовательские типографики и стили в фоновом режиме. Прохладный совет: Если вы добавляете стили типографии к родительскому блоку, то все его дети текстовых элементов будет наследовать эти стили текста. В CSS это поведение называется "каскадные".

# 4 Макет CSS с

Строительство веб-макеты с помощью CSS

Подобно добавления стиля к элементу, чтобы изменить положение элемента сначала добавить класс, а затем редактировать свойства позиции. Вы узнаете о Margin, Padding, дисплей, Float, переполнение, и позиции.

Маржа и Заполнение пример

Последние новости

Федеральные агенты Raid Gunshop, Найти оружие

Владелец магазина, Стив Witmere ранее арестован за blackmarket базуки торговли. Признается участия в русской мафии.

Среди многочисленных базуки, найденных в gunshop были десятки тысяч незаконно полученных картин на сумму не менее $ 10000. То высокую цену, чтобы заплатить за эти немые картины.

Описание: маржа и обивка могут быть найдены в положении палитры стилей панели. Добавление маржа будет добавить пространства за пределами блока, и добавление Заполнение будет добавить пространства внутри блока.

Добавить себя интервал

Последние новости

Федеральные агенты Raid Gunshop, Найти оружие

Владелец магазина, Стив Witmere ранее арестован за blackmarket базуки торговли. Признается участия в русской мафии.

Среди многочисленных базуки, найденных в gunshop были десятки тысяч незаконно полученных картин на сумму не менее $ 10000. То высокую цену, чтобы заплатить за эти немые картины.

СОВЕТ: Начните с добавления отступы со всех сторон основного серого блока (родительский элемент). Затем добавить нижнее поле, чтобы добавить расстояние между отдельными элементами текста (дети элементов). Подсказка: Удерживайте SHIFT при использовании контроля маржа / обивка применять для всех сторон и ALT также обратиться к противоположной стороне.

"Показать: Блок 'примеры

Этот заголовок устанавливается для отображения: блок

Этот пункт установлен на дисплее: Блок. Так он заполняет ширину родительского окна и стеки на вершине других блоков.

Кнопка с Дисплей: блок Кнопка с Дисплей: Блок Эта ссылка устанавливается на дисплее: Блок Эта ссылка устанавливается на дисплее: Блок

Описание: Установка Настройки дисплея элементы 'в блок сделает их укладывают на вершине друг друга и заполнить 100% ширины родительского блока. Большинство элементов на самом деле есть этот параметр по умолчанию.

Сделать их "Дисплей: блок 'сами

Это кнопка Это кнопка Ссылки являются Дисплей: Встроенный по умолчанию ссылки Показать: Встроенный по умолчанию

СОВЕТ: Выберите эти элементы (некоторые Inline Block и некоторые Инлайн) и сделать их Display: блок так, чтобы они складывают друг на друга.

"Дисплей: встроенный блок" пример

Скачать Редактировать Удалить

Описание: Установка Настройки дисплея элементов "на встроенный блок сделает ширина блока соответствует ширине содержимого внутри него. Это означает, что если их содержание является достаточно небольшим, они могут складывать рядом друг с другом. Вы можете скопировать вставить кнопки выше и редактировать текст внутри, чтобы видеть, как это работает.

сделать их рядный блок себя

Скачать Редактировать

СОВЕТ: Выберите вышеуказанные элементы и сделать их Display: встроенный блок так они складывают рядом друг с другом. Вы увидите, что изображения стек рядом с кнопками. Совет: Удаление кнопки и изображения в отдельных блоках Div сделает их укладывают друг на друга, потому что (Div Блоки дисплея: Блок по умолчанию).

Поплавок пример

Спасибо! Ваше представление было получено!

Нам Что-то пошло не так во время отправки формы :(

Описание: Установка дисплея: встроенный блок или плавающей (это пример) являются наиболее распространенными способами стек боковые элементы бок. В этом примере я покажу вам, как плавать-то.

Отслеживать это самостоятельно

Спасибо! Ваше представление было получено!

Нам Что-то пошло не так во время отправки формы :(

СОВЕТ: Сначала выберите текстовое поле, сделать это Float: слева и дать ему ширину в процентах (например: 60%). Затем установите кнопку Float: слева, а и установить еще один процентное значение ширины (например: 40%), так они оба добавить до 100%. Это ручной способ, чтобы заставить любой элемент в стек бок о бок.

Абсолютная позиция Пример

Мой Кубок Джо

Это текстовый фото подпись.

Рекомендуемые

Описание: Если вы установите положение в Абсолюте на элементе, вы сможете расположить его в любом месте внутри своей материнской блока. Чтобы выбрать, какой родитель в положение внутри, установить позицию родительского элемента, чтобы Относительная. Примечание: Если элементы являются абсолютными позиционируется они плавают выше других элементов.

Стиль It Yourself

Мой Кубок Джо

Это фото Подпись к моей любимой чашки Джо.

Рекомендуемые

СОВЕТ: Сначала выберите изображения Wrapper элемент и установить свою позицию в относительной. Затем выберите заголовок, перетащите его в установлен образ его положение в Абсолюте и выберите 7-й предустановки. Чтобы поместить значок в Featured правильном месте выбрать 2-й предустановки и вручную позиционировать его.

# 5 Стиль каскадных

Использование каскадных таблиц стилей

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

Общий пример стили кнопок

Дизайн кнопок самостоятельно

ЗЕЛЕНЫЙ Кнопка

Красная кнопка

СОВЕТ: Выберите вторую кнопку и нажмите на [+] рядом с классом, чтобы добавить еще один класс. Вы можете назвать это "Зеленый". Затем дать ему различные стили. Эти стили будут переопределить базовые стили первого класса. Затем создайте красную кнопку.

# 6 СМИ запросы

Проектирование для различных устройств

В WebFlow сначала создать свой веб-сайт для настольных устройств, а затем внести изменения на мобильных устройствах (доступ значки устройств в верхней панели). Добавление стилей в мобильном устройстве будет переопределить настольные стили.

Отзывчивый Заголовок пример

Это некоторые заголовок текст, который становится меньше в мобильных устройствах.

Описание: В данную товарную позицию действительно большой на рабочем столе, но мы хотим, чтобы это было меньше, на мобильных устройствах. Щелкните устройств в верхней панели, чтобы увидеть, что размер текста и высота строки была снижена.

Fix It Yourself

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

СОВЕТ: Выберите этот заголовок на планшетных устройства и сделать размер шрифта и высоту строки меньше. Сделайте то же самое для телефона ландшафтных и телефон Портрет устройств. Вы можете видеть, что

Отзывчивый пример Кнопка

Кнопка Текст

Описание: Эта кнопка предназначается, чтобы быть небольшая на рабочий стол экранах, потому что это просто щелкнуть курсором мыши. Мы сделали это больше на мобильных устройствах, так что это легче постукивать пальцем

Кнопка Текст

Fix It Yourself

СОВЕТ: Перейти к планшетному устройству и увеличить отступы кнопки. Когда вы, что это будет переопределить предыдущие стили, установленные на рабочем столе и каскадом вниз, чтобы ниже Tablet всех устройств.

Отзывчивый Колонны пример