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

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

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

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

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

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

супер ПЛАН

$ 75 / мес

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

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

Что ты видишь

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

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

Див Блок

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

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

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

Список

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

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

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

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

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

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

Супер ПЛАН

$ 75 / мес

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кнопка Текст

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

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

Спасибо!

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

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

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

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

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

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

Мой Кубок Джо

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Fix It Yourself

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

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

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

Кнопка Текст

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

Кнопка Текст

Fix It Yourself

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

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