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

Руководство Visual Web Design

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

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

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

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

супер ПЛАН

$ 75 / мес

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

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

Что вы видите

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

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

Div блок

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

Блок текста $ 75 / мес

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

Список

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

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

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

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

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

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

Супер ПЛАН

$ 75 / мес

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

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

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

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

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

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

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

Контейнерный элемент

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

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

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

Укладка элементов

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

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

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

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

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

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

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

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

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

Кнопка Text

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

Пример формы для дизайна

Спасибо!

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

Ой! Что-то пошло не так при отправке формы :(

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

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

Ой! Что-то пошло не так при отправке формы :(

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

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

Lakewood Stout

Темное пиво Лейквуда, Колорадо

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

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

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

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

Lakewood Stout

Темное пиво Лейквуда, Колорадо

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

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

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

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

# 4 Схема с CSS

Создание веб-макеты с помощью CSS

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

Маржа и Обивка пример

Главные новости

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

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

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

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

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

Главные новости

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

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

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

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

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

В данную товарную позицию настроен на отображение: блок

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ой! Что-то пошло не так при отправке формы :(

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

Float сами

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

Ой! Что-то пошло не так при отправке формы :(

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

Абсолютное положение Пример

Моя Кубок Джо

Это текст подпись к фотографии.

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

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

Стиль It Yourself

Моя Кубок Джо

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

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

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

# 5 каскадное

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

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

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

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

GREEN Кнопка

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

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

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

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

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

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

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

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

Fix It Yourself

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

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

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

Кнопка Text

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

Кнопка Text

Fix It Yourself

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

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