Эта статья является первой частью серии статей о новых отзывчивые средства проектирования.
Сегодня, Ричард Найт исследует преимущества WebFlow и как вы можете использовать его сегодня, чтобы построить отзывчивые веб-сайтов — Может быть, немного быстрее, чем можно было бы строить их иначе.– Эд .
Новые инструменты появились, чтобы решать проблемы Адаптивный веб-дизайн — инструменты, такие как Adobe Reflow 1 и недавно выпустила Macaw 2 .Сегодня мы будем смотреть на тот, который я тщательно протестированы в течение последних нескольких месяцев.Хотя это и не идеально, это было шагом вперед в производительности для команды, что я работаю.Его зовут Webflow 3 , и это может быть решением проблемы вы сталкиваетесь со статическим дизайна Ком производится в Photoshop и Fireworks .
Эта статья будет считать вас шаг за шагом через процесс создания гибкой макет сайта для реального проекта.Как мы идем вместе, мы также определить преимущества WebFlow и где она приходит короткий .
Получение Started
Начало в WebFlow является относительно простым.Зайдем на в website 4 , зарегистрироваться и дать бесплатную пробную версию идти.Убедитесь в том, чтобы открыть интерфейс в последней версии Google Chrome, потому что это в настоящее время единственный браузер, который полностью поддерживается .
Перед началом проектирования решить, будет ли начать его с нуля или на работу с одним из многих шаблонов.Для этого урока, мы будем выбирать пустой шаблон веб-сайта .
5 Остановитесь на минутку к мыши над всплывающие подсказки в интерфейсе WebFlow, чтобы стать знакомым.Там нет формы инструментов или слоев в традиционном смысле.Там также нет фильтры и эффекты, или даже кисти.WebFlow держит все сосредоточено на том, что браузер может сделать;Таким образом, зная основы HTML и CSS достаточно, чтобы приступить к работе .
6 Панель инструментов Overview
Левая панель обрабатывает различные функции, такие, как публикация свой сайт для совместного с живым ссылку, и переключение между окнами устройств (с помощью ноутбука и телефона иконки).Вы будете использовать эту панель инструментов в основном для последней и для входа в режим предварительного просмотра, которая скрывает интерфейс WebFlow и показывает, что ваш сайт будет выглядеть при публикации .
7 Правой панели (как показано ниже) состоит из шести вкладок.Первая вкладка (“”) позволяет добавлять структуру и HTML элементы контента на странице.Каждый элемент вы добавляете в теле страницы идет со стилями по умолчанию, которые вы можете перезаписать.Всякий раз, когда вам нужно добавить содержание, вы пришли сюда.Я всегда начинаю с раздела, контейнер и столбцы, потому что все они имеют предопределенный поведение, которое меняется в зависимости от точки останова .
Раздел DIV набор на полную ширину окна просмотра.Контейнер сидит по центру в пределах раздела и ограничивает ширину элементов, таких как заголовки и абзацы, а в колонках равномерно разделить контейнеры в процентах .
9 Далее идет вкладка CSS, где мы проводим большую часть нашего времени.Здесь мы можем назначить классы для элемента, выбранного, а затем стиль ее по своему усмотрению.Вся CSS, которые вы обычно писать от руки показано здесь.Как только вы измените класс, CSS будет незамедлительно обновить без того, чтобы обновить.Будьте уверены, чтобы изучить передовые переключает, которые предназначены для управления других вещей, таких как позиционирование и поведение фоновых изображений в их DIV .
11 Третья закладка предназначена для настройки элемента, который вы выбрали.Здесь вы можете контролировать то, как видимость содержания в определенных размеров экрана, и вы можете добавить элементы ссылок на другие страницы в вашем проекте.Эта панель имеет дело в основном с не-стиле аспектам и особенно удобно, когда вы работаете на сложных элементов, таких как меню навигации .
Четвертый слева полезным структура навигатор, который визуально отображает содержимое вашего сайта в папку, как дерево.Если вам нужен заголовок, чтобы сидеть в другом DIV или контейнера, просто нажмите и перетащите его туда, где вы хотите, чтобы он.Я часто ссылаются на этой панели, как я иду, чтобы убедиться, что некоторые элементы в нужных дивы и что мои каскадных стилей надлежащим образом.Это также полезно для отбора содержания, которые могут быть трудно щелкнуть мышью, потому что он находится за другие элементы .
Далее идет менеджер класс, который показывает все ваши классы CSS сразу.Вы можете использовать его для редактирования определенного класса (см маленький значок гаечного ключа) и быстро удалить любой класс, который не используется.Это удобно, но вы, как правило, просто использовать его для очистки классы, которые вы отбрасываются или быстро изменить класс, которая используется несколько раз в разных местах .
Последнее является библиотека символов.Сложные элементы, такие как основной навигации и нижнего колонтитула, может быть создан в виде символов, которые могут быть повторно использованы на другие страницы сайта WebFlow.Это здорово экономит время, но знаю, что символы могут использоваться только в проекте они были созданы в .
Что касается веб-Fonts
Прежде чем мы начнем с проекта, это стоитотметить, что WebFlow поддерживает веб-шрифты в определенной степени.Все обычные резервных, в том числе Arial и Verdana, доступны, и вы можете использовать любой шрифт в библиотеке Google, а также те, что вы имеете в TypeKit.Тем не менее, любой шрифт, не предусмотрено ни Google или Typekit не могут быть интегрированы в режиме конструктора WebFlow (в препятствие, которое сталкивается моя команда) .
Применение свой собственный шрифт с помощью пользовательского кода область WebFlow является возможным.Сделайте это, ссылки на него в голове вашего сайта, а затем с помощью тега стиля, чтобы определить, где использовать его.Тем не менее, шрифт появится только после того как вы опубликованы на веб-сайте, что делает его расстраивает точного типографики для различных точек останова .
13 Конструирование в Browser
В этом уроке мы будем работать с точки зрения рабочего стола до мобильного телефона.Это сделано преднамеренно: В WebFlow, каждый стиль, который вы создаете в режиме рабочего стола будет каскадом вниз.Это странно на первый, но вы привыкнете его.Смысл заключается в том, что, когда вы изменить стиль в окне таблеток, она будет меняться в течение всего ниже.Это экономит время, когда что-то сломалось в одном медиа-запроса, поскольку он часто будет нарушена в узких взглядов .
Мы найдем то, что нужно, чтобы начать на значке “” (вкладка для добавления элементов).Во-первых, добавить раздел, а затем перетащить “NavBar” в этом разделе.Затем выберите элемент изображения в соответствии с “Медиа”, и перетащите его на области логотипа навигационной панели.После того, как он подчеркнул, отпустить мыши, и WebFlow упадет в заполнитель изображения.Я заменил изображение по умолчанию с логотипом моей компании.По сути, то, что мы делаем здесь использованием дивы и HTML части, которые имеют предопределенный поведение в Webflow;в то время как пустой и не хватает каких-либо заметных стилей, они образуют основную структуру сайте .
14 Теперь давайте добавим остальную часть навигация, дать ему цвет фона, и изменить шрифты.Моя компания использует стандартный серый для фона своего навигации.Добавить цвет фона легко, выбрав раздел NavBar с помощью мыши, а затем спускаясь к области фона на вкладке стиле.После того как вы выбрали цвет, нажмите “OK” для подтверждения .
15 Далее, нам необходимо добавить раздел, который сидит над навигационной панели.Это будет иметь ссылку и некоторые копию.Нажмите и перетащите раздел так, что он сидит над навигационной панели, а затем добавить контейнер так, что наш новый контент остается в центре в окне браузера, как навигация под ним .
16 Выше я добавил открытым текстом блок для копии срок, а также текстовую ссылку на наш призыв к действию.Оба назначены отдельные классы, установленные для отображения в качестве inline-block и с текстом по правому краю.Я также регулировать отступы с помощью перетаскивания мышью на стрелки под “Позиция”, так что они оба оказываются в вертикальной плоскости.Наконец, я дал эту новую секцию градиент фона .
Уведомление под “Позиция”, как значения обивка синий.Это позволяет нам знать, что мы изменили стиль по умолчанию 0.Если бы это было желтый номер или метка, это будет означать, что стиль выбранного элемента наследуется .
С моделированием сделано для заголовка, давайте установить структуру основного корпуса.Наши потребности копии веб-сайтов слева и изображение о праве на планшетных и настольных видом.Опять же, добавить раздел и контейнер, и определить сетку путем добавления элемента столбца к этому контейнеру.По умолчанию, мы дали два столбца.Вы можете изменить это на другой номер в любое время путем настройки параметра столбца .
17 Я пошел вперед и добавил большой шаблон изображения в правой колонке и в пункте копирования слева.Я также добавил две кнопки.Работа с длинной копии в WebFlow получает утомительным, потому что каждый пункт должен быть добавлен в качестве собственного элемента.Было бы хорошо, только работать с одним текстовом поле элемента, в котором вы можете вставить всекопии сразу и приступить к моду, как в ара .
В настоящее время, давайте регулировать высоту абзаца строки, добавьте стиль кнопок и добавить остальное содержимое .
18 Последняя, мы добавим подвал, добавив раздел в нижней части страницы.Мы будем применять цвет фона и бросить в последни …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров