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

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

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

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

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

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

супер ПЛАН

$ 75 / мес

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

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

Что ты видишь

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

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

Div блок

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

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

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

Список

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

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

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

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

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

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

Супер ПЛАН

$ 75 / мес

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кнопка Text

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

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

Спасибо!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Моя Кубок Джо

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

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

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

Стиль It Yourself

Моя Кубок Джо

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Fix It Yourself

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

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

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

Кнопка Text

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

Кнопка Text

Fix It Yourself

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

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