Бесплатный курс «Веб-дизайн и создание сайтов с нуля»
О курсе Авторы Содержание
Команда, которая работала над курсом
Среди авторов эксперты с опытом в международных проектах.
Анастасия Свеженцева
Продуктовый дизайнер (UX/UI), веб-дизайнер и бренд-дизайнер. Опыт проектов в международных компаниях Omega-R (агентство), iSpring Solutions (продуктовая) и со стартапами по всему миру.
Ольга Жолудова
Копирайтер, UX-писатель, редактор и контент-стратег. Увлекается переводами в tech-тематиках. Помогает собрать гибкую контент-стратегию, улучшить коммуникации с пользователями и проработать tone of voice. Работала с UsabilityLab и «iSpring».
Rafal Tomal
Креативный директор в Authentik Studio, в дизайне с 2005.
Содержание курса
Читайте главы последовательно по одной в день или начните с наиболее интересной.
Глава 1
Веб-дизайн с нуля: что читать и где учиться? | Глава 1
В этом бесплатном курсе вы узнаете, с чего начинался дизайн сайтов, кто такой веб-дизайнер, где на него можно учиться и что такое современный веб-дизайн.
Глава 2
Что должен уметь веб-дизайнер? Главные навыки веб-дизайнера | Глава 2
В прежние времена дизайнер сайта сам и проектировал, и кодил, и запускал сайт онлайн. Но тогда не было множества веб-приложений, а дизайн ограничивался тем, что можно было создать в рамках табличной верстки в HTML.
Глава 3
Зачем учиться программировать непрограммистам? Должен ли дизайнер кодить? | Глава 3
Возможно, вы уже встречали кучу статей на эту тему — но все же это самый популярный вопрос всех начинающих дизайнеров. Воспользуюсь шансом и поделюсь своими соображениями, потому что четкого ответа у меня нет.
Глава 4
Чем занимается веб-дизайнер на самом деле и к чему нужно быть готовым | Глава 4
Дизайн совершенно точно ближе к науке, чем к искусству. Большинство решений в дизайне принимаются исходя из целей бизнеса, но в лучших дизайнерских работах наука встречается с искусством.
Глава 5
5 направлений, в которых веб-дизайнеру нужно развиваться постоянно | Глава 5
Дизайн — одна из тех профессий, где и без диплома можно найти классную работу и даже сделать карьеру.
Крупнейшие tech-компании не попросят у вас никаких документов об образовании — если, конечно, вы реально круты в дизайне. ← Назад | Продолжение…
Глава 6
Основные этапы работы над веб-проектом | Глава 6
В самом начале мой рабочий процесс был достаточно хаотичным: я легко отвлекался на разные идеи и вдохновляющие штуки и из-за этого не мог сосредоточиться на основной цели проекта. Не разузнав достаточно о целях и ограничениях проекта, я сразу…
Глава 7
Программы для веб-дизайнера: где создавать сайты? | Глава 7
Дизайн создает не программа, а вы. Если вы владеете дизайном, то сможете сделать работу качественно в любой программе. Однако, правильно подобранные инструменты облегчают процесс дизайна и помогают работать эффективнее. ← Назад (Перед вами бесплатный курс Рафаля Томаля «Интро в…
Бесплатные курсы веб-дизайна
Средняя зарплата веб-дизайнера в Украине – примерно $1,5–2 тыс . При этом можно работать не только на компанию, но и искать заказчиков на биржах фриланса.
Редакция MC.today сделала подборку из шести онлайн-курсов веб-дизайна. На них вы узнаете, подходит ли вам эта профессия, какие навыки вам нужны, чтобы найти первую работу, и почему важно знать, как работает цвет.
На украинском языке«Основы UI/UX»
Продолжительность: 3 дня
Организатор: Logos IT Academy
Это вводный курс, на котором вы поймете, подходит ли вам профессия веб-дизайнера. На занятиях расскажут, какие обязанности есть у дизайнера и какие инструменты нужны для работы. Еще вы узнаете:
- как работать с текстом;
- как совмещать цвета;
- что такое композиция;
На курсе объяснят, зачем нужен адаптивный дизайн и как использовать модульную сетку. Еще вы попробуете создать дизайн приложения для заказа еды.
Занятия проходят в Zoom. Записаться на курс можно до 23 мая.
«Как работает цвет»Продолжительность: 10 лекций
Организатор: Projector
На этом курсе вы узнаете все про цвета: их природу, историю цветов флагов, гербов и брендов, как работают цветовые схемы и так далее.
Вы поймете, как использовать эту информацию для дизайна сайтов.
Лектор также расскажет:
- как гармонично подобрать оттенки;
- как использовать цвет, чтобы донести информацию;
- зачем нужен цветной контраст;
- какие есть удачные и неудачные примеры дизайна.
Напоследок вы сможете проверить, насколько хорошо усвоили информацию, с помощью онлайн-теста.
Этот курс входит в программу Projector Humanitarium. До победы Украины и еще месяц после нее можно пройти бесплатно. Для этого после регистрации нужно ввести промокод 0688-5072.
«Основы веб-дизайна»Продолжительность: 2,5 месяца
Организатор: «Креативная практика»
Курс состоит из шести видеоуроков, 19 статей и пяти мастер-классов. Во время учебы вы узнаете:
- как развивался интернет и как это связано с историей веб-дизайна;
- какие существуют типы сайтов;
- из чего состоит сайт;
- чем отличается дизайн мобильной и браузерной версий сайта;
- какие есть стратегии разработки сайтов;
- как сделать сайт удобным.
Чтобы закрепить знания, после каждого модуля нужно сдавать тесты.
Бесплатный доступ к курсу действует только до 1 июня. Сколько он будет стоить потом, неизвестно.
«Профессия: веб-дизайнер»Продолжительность: 3 урока
Организатор: «Образовательный хаб города Киева»
Краткий курс, на котором вы узнаете:
- есть ли сейчас спрос на веб-дизайнеров;
- какими навыками он должен владеть, чтобы найти первую работу;
- в каких направлениях может развиваться его карьера.
При разработке курса использовались материалы кафедры веб-программирования Киевского политехнического института имени Игоря Сикорского.
Записаться и пройти курс можно в любое время.
На английском языкеWeb Design for Everybody: Basics of Web Development & Coding SpecializationПродолжительность: 4 курса
Организатор: Университет Мичигана
Специализация на Coursera – это несколько курсов, которые помогают получить определенные навыки.
Их можно проходить вместе, а можно выбрать только один курс – тот, который нужен вам больше всего.
Программа состоит из теоретической и практической частей. Если вы хотите получить сертификат, что прошли всю специализацию, нужно сначала закончить теоретическую часть, а затем перейти к практической.
На первом курсе вы разберетесь, как на самом деле работает сайт. Например, что происходит, когда вы нажимаете ту или иную кнопку. Еще лектор объяснит, что такое JavaScript, CSS3 и как они связаны с веб-дизайном.
На втором курсе вы узнаете, как работают каскадные таблицы стилей CSS3. Затем можете создать дизайн HTML-страницы.
На третьем курсе вы поймете, как с помощью языка программирования JavaScript заставить пользователей больше взаимодействовать с вашим сайтом.
На четвертом курсе специализации вы научитесь создавать адаптивные сайты для разных платформ, например, смартфона, ноутбука, планшета.
Пятый, практический, курс нужен, чтобы закрепить полученные навыки и создать собственное портфолио.
Вы должны будете разработать дизайн сайта по меньшей мере для трех платформ.
Начать обучение можно в любое время. Если вы будете уделять ему три часа в неделю, примерно через шесть месяцев пройдете всю специализацию.
Web Design Bootcamp: Design like a PROПродолжительность: 2 часа 20 минут
Организатор: Udemy
Курс поделен на три части:
- Вступление. Вы разберетесь, что такое цвет, шрифты и текстовый дизайн.
- Дизайн веб-страницы. Узнаете, из каких элементов состоит страница сайта и почему эти элементы важны.
- Создание страницы с помощью HTML и CSS. Поймете, как эти инструменты помогают создать удобный сайт.
Напоследок нужно пройти небольшой тест и ответить на четыре вопроса.
Этот курс подходит тем, кто владеет любой программой для дизайна. Например, Photoshop, Illustrator и другими. Начать обучение можно в любое время.
Доступность в Интернете | Webflow University
Есть причина, по которой Apple, Википедия и MDN — есть причина, по которой они используют структуру CSS на своих производственных сайтах (за исключением закругленных кнопок Apple).
Но когда вы применяете контур CSS к чему-либо, он создает контур вокруг этого элемента. Так. Являются ли контуры просто еще одним термином для границ или теней? Абсолютно. Нисколько.
В этом уроке мы рассмотрим ВСЕ. Чем это отличается, как мы можем использовать состояние Focused (клавиатура), чтобы заставить его работать идеально, как мы можем добавить контур к ссылке. Мы рассмотрим некоторые передовые методы, когда дело доходит до оформления контуров на наших сайтах (и обходной путь, который Apple использует в Safari). В самом конце мы исправим поведение табуляции на Tiffany.com.
Часть 1. Почему контуры? Другими словами, почему бы не использовать рамки или тени? Границы (это стандартный CSS в Интернете) — границы могут влиять на размер элементов и смещать объекты. А тени даже не отображаются на многих системах с включенным режимом высокой контрастности. Как и в Windows, где появится другой контур по умолчанию (к которому мы вернемся чуть позже). Это несколько причин, по которым эти два свойства не похожи на контуры.
Контуры уникальны. Поскольку контуры обтекают элемент. Поэтому, в отличие от границ, они не влияют на размер. И, в отличие от коробчатых теней, они не игнорируются в режиме высокой контрастности (за исключением цвета контура, который задается в настройках режима высокой контрастности). Но есть очень специфические соображения относительно того, когда использовать контуры, а когда не использовать контуры. И в качестве бонуса вы также можете добавить смещение к контурам. И предела смещению нет. Продолжайте увеличивать и увеличивать, пока оно не выйдет за пределы этого дисплея и не окажется на дисплее Гримура. Кого сегодня здесь нет, потому что он навещает свою семью в Исландии.
Где сейчас 00:48.
Но контуры важнее этого. Потому что без пользовательских контуров (это просто сайт, на котором еще не применены стили контуров). Без контуров, если мы используем клавиатуру для навигации по вкладкам, перемещая фокус по странице? Различные браузеры почти всегда дают противоречивые результаты.
Здесь фокус табуляции на Google Chrome. Вот он в Сафари. Вот он в Фаерфоксе. Вот он в Интернете Microsoft Edge. И, конечно же, на Arch Card от McDonald’s все иначе, когда перед съемкой не забываешь зарядить его аккумулятор.
Итак, основное замечание о контурах CSS заключается в том, что мы можем переопределить и действительно стандартизировать поведение контуров во всех браузерах, чтобы они были разборчивыми и последовательными. И это происходит в сфокусированном состоянии клавиатуры.
Итак, что произойдет, если мы пойдем и применим схему к состоянию None? (Другими словами, если мы просто добавим это свойство, потому что хотим, чтобы внешний вид вещей по умолчанию имел такой контур?) Невероятно высокий риск. Вот почему. Установка контура CSS в состояние по умолчанию (Нет)? Вот что произойдет, если мы пролистнем эту страницу сейчас. (Это действительно может привести к тому, что даже поведение контура по умолчанию в некоторых браузерах не очень ясно, что выделено.
)
Итак, давайте отменим это, и, честно говоря, мы должны поджечь его. Что мы и сделали бы, если бы не забыли зарядить аккумулятор нашей Arch Card перед съемкой.
Это приводит нас к использованию состояния Focused (клавиатура).
И, чтобы быть по-настоящему ясным: вместо того, чтобы применять контур в состоянии «Нет», мы собираемся перейти к этому раскрывающемуся меню здесь и убедиться, что мы используем стиль в состоянии «Фокусировка» (клавиатура).
Сейчас. Почему состояние Focused (клавиатура)? Что ж, мы знаем, что состояние «Сфокусировано» — это то, что появляется, когда кто-то щелкает (или нажимает) или перемещает вкладки с помощью клавиатуры, но в большинстве случаев дизайнеры и разработчики не хотят, чтобы этот контур отображался при каждом щелчке или касании. Здесь, когда мы нажимаем, вы можете видеть, прежде чем он дойдет до места назначения, мы видим контур даже по клику — не всегда идеально.
Итак, вот тут-то и появляется Focused (клавиатура) (или в CSS это фокус-видимый).
И стили здесь позволяют вам управлять тем, как будут выглядеть объекты при навигации с помощью клавиатуры. (Но это не повлияет на то, как это будет выглядеть, когда вы щелкнете мышью или нажмете пальцем.)
Здесь мы можем очень четко добавить контур к ссылке.
Итак, на этой кнопке ссылки (мы стилизуем этот класс кнопок), если мы войдем и выберем наше состояние Focused (Keyboard), мы можем перейти вниз и начать настраивать именно то, как мы хотим, чтобы наш контур выглядел. (Мы можем настроить значения, чтобы получить именно то, что нам нужно — принимая во внимание контраст не только с остальной частью кнопки, но и с содержимым за кнопкой.)
А если мы пойдем в Preview это? Мы можем щелкнуть и начать переходить по нашим ссылкам. (И это работает и на полностью опубликованном сайте для навигации с вкладками, но в Webflow в режиме предварительного просмотра мы хотим убедиться, что щелкнули на холсте.)
Мы начинаем здесь сверху (и очевидно, мы еще не стилизовали контуры CSS для навигационных ссылок).
Но когда мы переходим по нашим кнопкам, мы видим, что каждая кнопка, к которой применен этот класс (у нее есть…)
Хорошо. Похоже, компьютер должен перезагрузиться, потому что мы обновили macOS.
Но если бы обновление не выполнялось, вы бы увидели, что каждая кнопка (с этим классом) — каждая из них отображает контур, который мы только что разработали — когда мы нажимаем (при перемещении фокуса) по каждой из них.
И не только здесь. Он есть в Chrome, Firefox, Microsoft Edge, Safari и так далее.
Но если мы нажмем кнопку (или если мы нажмем ее, например, на iPad)? Стили контура не видны. На самом деле вообще ничего. Потому что macOS все еще обновляется.
Но, к счастью, в macOS есть сочетание клавиш, которое позволяет полностью обойти установку, поэтому мы можем вернуться обратно в браузер. Команда, смена, клеверное поле.
И вот. А если мы нажмем на кнопку? (Или если бы мы постукивали по сенсорному устройству?) Не видны стили контура.
И это потому, что мы использовали состояние Focused (Keyboard), а не обычное состояние Focused.
И приводит нас к лучшим практикам и этому большому вопросу:
Означает ли все это, что мы не должны использовать контуры CSS в обычном состоянии Focused? Другими словами, должны ли мы использовать только состояние Focused (Keyboard) при применении контуров CSS? И ответ таков: это зависит от ваших дизайнерских предпочтений. Wikipedia, например, использует состояние фокуса для своих контуров, но MDN использует Focused (Keyboard) (или focus-visible в CSS). Как правильно? Что не так? Возможны ли путешествия во времени? Не всегда есть четкий ответ. И это нормально.
Независимо от ваших предпочтений в дизайне, процесс прост: хотите ли вы, чтобы ваши контуры были видны при любом щелчке, любом касании или любой вкладке? Используйте сфокусированное состояние. НО, если вы ДЕЙСТВИТЕЛЬНО хотите, чтобы ваши контуры были доступны для навигации с помощью клавиатуры, но вы предпочитаете, чтобы ваши ссылки не отображали контуры при щелчках или касаниях? Используйте состояние Focused (клавиатура).
Еще одна передовая практика, которую следует здесь рассмотреть, касается контраста. И здесь сияют очертания. Потому что еще одна причина, по которой стили контуров по умолчанию (по умолчанию в браузере) не идеальны? Поведение (на самом деле видимость) на разных фонах (например, это контур по умолчанию в Safari) не всегда идеально разборчиво, особенно если контур сливается с фоном.
Итак. Как мы можем решить эту проблему и сделать ее более единообразной? Другими словами, можем ли мы просто установить для всех наших ссылок один и тот же стиль контура CSS и забыть об этом? Мы абсолютно можем. Но причина, по которой мы поощряем тестирование, заключается в том, что мы часто выглядим по-разному. Может быть, нам нужен синий контур, как у Apple. Он отлично работает на светлом или темном фоне. Но если у нас есть синий фон? Это не работает так хорошо. Таким образом, в этом случае мы могли бы захотеть стилизовать класс или комбинированный класс для кнопки в синем разделе и в состоянии Focused (Keyboard), мы могли бы сделать его не синим.
Может быть, что-то вроде белого. И так, это намного заметнее. Гораздо больше контраста с фоном.
Сейчас. Вот интересное наблюдение. Ссылка в форме таблетки (это просто кнопка с закругленными углами). А в Safari (по крайней мере, в версии 15.1, которую мы здесь тестируем)? Если мы перейдем через табуляцию, 90-градусные края. Что происходит? Некоторые браузеры (например, Safari здесь) могут игнорировать радиус границы при отображении контура.
Итак, на Apple.com это сходит с рук, добавляя ОТДЕЛЬНЫЙ стиль. Коробки в форме таблеток с закругленными углами вообще не используют контур; они используют тень блока для достижения этого эффекта. Но ранее мы узнали, что тени блоков ИГНОРИРУЮТСЯ в Windows при использовании высокой контрастности. Значит ли это, что Apple ошибается? Гугл? Например, в Windows, если вы начнете печатать в Документах Google с включенным высоким контрастом, где будет курсор? Высокая контрастность не всегда идеальна. Поэтому мы хотим сделать НАИЛУЧШЕЕ.
Вот почему может быть действительно хорошей идеей использовать структуру CSS для ВСЕХ объектов навигации пользователя. Ссылки, кнопки — все, на что можно нажать или нажать. Теперь: одно предостережение здесь. Windows позволит пользователям выбирать, в каком цвете будут отображаться контуры. Таким образом, несмотря на то, что он будет учитывать ваши значения контура CSS, он может переопределить сам цвет.
Таким образом, контуры очень хорошо подходят для четкого определения элемента, находящегося в фокусе.
Опять же, ни одно из этих правил не является абсолютным. И в этом красота (гибкость) CSS. Мы можем сделать то, что хорошо подходит для нашего дизайна, а кто-то другой может сделать то, что хорошо подходит для его дизайна. Это означает, что будут разные мнения, разные разговоры и дебаты — и это хорошо. Пока мы учитываем видимость и доступность при проектировании и разработке, у нас будет бесконечно лучший пользовательский опыт, чем если бы мы не учитывали эти вещи.
И в тех случаях, когда у нас есть что-то среднее (или когда что-то немного не так), всегда есть Мэг.
[Мэг] Дорогая Тиффани,
Это снова Мэг. Две вещи. Во-первых, ваш сайт использует границы при табуляции. Контуры CSS сделают это менее дерганым. Во-вторых, Tiffany Blue вовсе не синий; это бирюза.
С уважением, Мэг
[МакГуайр] Так что здесь происходит? На этой странице, как сказала Мэг, они на самом деле используют границы, когда что-то сфокусировано. И по мере того, как мы переходим, изображения здесь немного изменяются. Итак, если мы войдем и проверим код, мы сможем не только проверить это (мы не только увидим, что здесь используется граница, когда она сфокусирована — и мы можем включать и выключать это), но мы просто отключаем ее. полностью. И мы можем добавить свой собственный стиль: «Контур CSS» — это не имя свойства. Его контур: 2px сплошной #00a4b7. И чтобы убедиться, что это становится приоритетным, !important. Теперь, если мы переключим это, мы увидим, что, в отличие от границ, это не влияет на размер.
Все аккуратно сохранилось.
Итак. Мы рассмотрели здесь многое. Мы рассмотрели, что такое контуры CSS: различия между границами, которые могут испортить размер, как мы видели на Tiffany.com; коробчатые тени, которые могут не отображаться на высококонтрастных устройствах; и контуры, которые проходят по границе элемента. Мы рассмотрели состояние Focused (Keyboard), стиль которого отображается только при навигации с помощью клавиатуры. Мы рассмотрели добавление схемы в ССЫЛКУ. Мы рассмотрели лучшие практики — как вы можете установить более контрастные контуры для определенного класса. И мы исправили Tiffany.com, теперь он использует контуры вместо границ.
Но это наброски CSS в Webflow Designer.
Веб-элементы | Webflow University
На этом уроке мы создадим форму — и в данном примере это будет форма генерации ЛИДОВ (мы хотим собрать потенциальных клиентов для нашего вымышленного бизнеса — и в конце она будет выглядеть так ). И мы будем двигаться ДОСТАТОЧНО быстро за 5 шагов.
Сначала мы рассмотрим, что находится в форме (анатомию), мы покажем, как настраивать элементы формы, мы стилизуем нашу форму, мы поговорим об успехах и ошибках и, наконец, мы будем контролировать что происходит, когда кто-то заполняет эту форму.
Давайте посмотрим на анатомию. Таким образом, мы можем ввести форму (кстати, вы можете добавить МНОГО элементов формы), но мы НАЧНЕМ… с нашего блока формы на панели «Добавить» (мы можем просто перетащить его). И по умолчанию в Form Block уже есть куча вещей. И это КРИТИЧЕСКИ по одной причине: нам НУЖЕН блок формы, чтобы фактически ЗАХВАТИТЬ данные формы.
И хотя мы можем УВИДЕТЬ многое, это только ТРЕТЬ того, что внутри. Открыть блок формы? На самом деле есть ТРИ вещи: сама форма (то, что мы видим), но ВТОРАЯ… у нас есть сообщение об УСПЕХЕ (когда кто-то отправляет форму). И, наконец, сообщение об ОШИБКЕ (если у кого-то возникли ПРОБЛЕМЫ при отправке).
И если мы взглянем на форму под формой, у нас будет почти все, что мы видим на холсте: все наши метки, текстовые поля и кнопка отправки.
Мигель [маниакально смеется]: Ты буквально…
Гримур: Мигель, в чем дело? Мы снимаем.
Мигель: Нельзя так говорить.
Гримур: Могу, Мигель. И я только что сделал. В противном случае анатомия формы скучна.
Но одна ДЕЙСТВИТЕЛЬНО хорошая практика: НЕ удаляйте метки полей. Они часто КРИТИЧЕСКИ важны для доступной навигации. Так что, если у вас есть соблазн пойти по минимуму, рассмотрите другие способы сделать это.
И если мы хотим ДОБАВИТЬ другие элементы формы (например, те, что мы видим здесь), мы можем перетащить их прямо туда.
Давайте сделаем это сейчас. Мы можем начать создавать своего рода «форму лидогенерации». Итак, мы добавим нужные поля. Но перетаскивание вещей….
Мигель: Скучно?
Гримур: Да, с магией редактирования | Теперь у нас есть все, что нам нужно для нашей формы лидогенерации. Имя. Эл. адрес. Номер телефона. Размер компании. И текстовая область для добавления дополнительной информации.
Давайте поговорим о КОНФИГУРАЦИИ.
Какова наша ЦЕЛЬ? Мы добавляем эти различные элементы, ЧТОБЫ СОБИРАТЬ всю необходимую нам информацию от ПОТЕНЦИАЛЬНЫХ клиентов… которые заполняют эту форму.
Таким образом, с МНОЖЕСТВОМ этих элементов формы, мы можем как бы дважды щелкнуть по ним (… или даже просто нажать маленькую кнопку…), и мы можем увидеть все наши варианты.
Допустим, нам ДЕЙСТВИТЕЛЬНО нужно узнать их имя и адрес электронной почты. Что ж, мы можем войти и убедиться, что не только имя, но и ЭЛЕКТРОННАЯ ПОЧТА помечены как НЕОБХОДИМЫЕ. (Возможно, остальные не являются обязательными. Это зависит от вас. Мне нравится делать все необходимое, но давайте будем честными, это также причина, по которой Мигель все еще заполняет мой ответ на приглашение на день рождения, хотя я действительно отпраздновал свой день рождения, ха , да, три недели назад.)
Но в этих параметрах конфигурации происходит нечто большее. Каждый раз, когда мы видим поле NAME в наших настройках ввода? Вот как мы будем идентифицировать поле ВНУТРЕННЕ, которое будет отображаться при отправке формы.
Пользователи не увидят это имя напрямую, но оно все равно отображается в коде, поэтому будьте осторожны и не включайте то, что вы не хотите, чтобы пользователи видели.
Далее. ТИП текста, например электронная почта. По сути это ПРОВЕРКА. Для электронной почты это проверяет, чтобы убедиться, что то, что написано в поле, является электронной почтой, а не случайным разбиванием символов клавиатуры, как в режиме ввода Мигеля по умолчанию.
Мигель: Это не мой режим печати по умолчанию.
Гримур: Прости, Мигель.
Мигель: Все в порядке.
[Мигель возвращается к своему ноутбуку и печатает, разбивая символы на клавиатуре.]
После этого у нас есть заполнитель, который представляет собой текст, который отображается перед тем, как кто-то введет что-то в поле. (Это переписывается в тот момент, когда вы начинаете вводить текст в поле.)
Затем требуемый параметр. Мы рассмотрели это ранее: и это мешает кому-то ОТПРАВИТЬ форму, не заполнив это.
И еще один большой — автофокус.
Когда пользователь загружает эту страницу, это текстовое поле УЖЕ будет иметь фокус (у него будет мигающий курсор). Однако будьте осторожны: если ваша форма находится на длинной странице, это может привести к тому, что кто-то АВТОМАТИЧЕСКИ опустится вниз страницы.
У нас также есть опции для кнопки «Отправить». Дважды щелкните это. И здесь мы можем изменить текст на что-то захватывающее, например Engage. Или Отправить. Или выполнить.
ТАКЖЕ если захотим? Мы можем изменить текст ожидания. Это текст, который будет временно ЗАМЕНЯТЬ текст кнопки во время отправки формы.
Это все? Нет. Потому что каждый элемент формы имеет РАЗНЫЕ параметры (различные настройки ввода, основанные на каждом типе элемента, к которым вы можете получить доступ в настройках элемента).
На самом деле, в различных элементах есть СЕКРЕТНЫЕ параметры, которые, надеюсь, ВЫ обнаружите, создавая свои собственные формы.
Но давайте перейдем к стилизации.
Это СУПЕР мощный. Метки полей (мы это знаем): метки полей здесь по УМОЛЧАНИЮ.
У меня есть текстовый стиль под названием «Ярлык» в моем проекте, в котором уже есть некоторые стили типографики, и я могу быстро применить тот же класс, ВЫБИРАЯ каждую метку и добавляя этот класс прямо в него. (Я использую сочетание клавиш Command + Enter что позволяет мне перейти ВПРАВО к полю селектора.) Кроме того, моя клавиатура и мышь делают все это ДЛЯ меня.
Давайте также создадим класс… для наших текстовых полей. Мы назовем этот класс «Поля», потому что мы используем его для ДРУГИХ вещей.
Цвет фона: давайте сделаем его светло-серым цветом (для этого у нас есть образец). Граница: давайте изменим цвет границы на 0% в альфе. (Кстати… ПОЧЕМУ? Я объясню почему через минуту.)
И это все на данный момент.
Давайте удостоверимся, что мы ПРИМЕНЯЕМ этот класс ко ВСЕМ нашим текстовым полям… но на самом деле мы продолжим и сделаем ОДИН шаг дальше. Потому что мы ТАКЖЕ применим эти изменения стиля к нашему полю SELECT (что-то вроде размера компании), и мы сделаем то же самое для нашей текстовой области — мы выберем ее и убедимся, что применяется тот же класс.
Очень быстро: давайте рассмотрим PLACEHOLDERS, потому что это запрос, который мы получаем МНОГО.
Текст-заполнитель на самом деле является СОСТОЯНИЕМ. С вводом —
Мигель: Проверил, нет.
Гримур: Клепка, Мигель. Позвольте мне показать вам, что я имею в виду.
Мигель: Пожалуйста.
Гримур: Выбрав любое из этих полей (давайте удостоверимся, что поле выбрано и к нему применен класс)… но мы можем зайти в раскрывающийся список и проверить это: PLACEHOLDER.
Заполнитель относится к предварительно написанному тексту (мы показывали это ранее). Так что, если мы хотим очень, очень светло-серый (из-за минимализма), мы можем это сделать. Конечно, речь идет о наименее заметной вещи в мире, и, честно говоря, у меня жжет сетчатка, когда я просто пытаюсь прочитать этот текст, так что давайте сделаем его СЕРЫМ и не таким ужасным.
Но это ЗАПОЛНИТЕЛЬ. Что, если мы захотим изменить цвет НАБОРНОГО текста… поэтому, когда кто-то начинает вводить текст в любое из этих текстовых полей, мы контролируем этот цвет.
Давайте просто убедимся, что мы используем стиль None.
И мы спустимся вниз и повлияем на цвет шрифта — давайте сделаем его очевидным, например, КРАСНЫМ… и когда мы это сделаем, мы можем перейти к предварительному просмотру и начать что-то вводить, и… он будет КРАСНЫМ. (Обратите внимание, что это также повлияло на поле «Выбрать» для размера компании.)
Хорошо. Выйти из режима предварительного просмотра? Вернуться и открыть цвет шрифта? Сделать его немного МЕНЕЕ красным, чем сейчас? Увлажняйте… потому что увлажнение имеет решающее значение? Теперь текст не красный.
Но есть еще одна важная часть ввода данных. И это позволяет пользователям узнать, КОГДА конкретное поле выбрано (или ФОКУСИРУЕТСЯ).
Итак. Если мы перейдем к предварительному просмотру нашей страницы и щелкнем внутри текстового поля? Теперь это поле сфокусировано. В зависимости от того, как вы стилизовали свой проект, он может вам понравиться как есть. Или, может быть, вы хотите сделать что-то другое.
Если это так, мы можем переопределить этот стиль.
И мы можем получить доступ к Фокусу, выбрав текстовое поле и нажав на Штаты. И мы видим, что у нас есть «Focused». И отсюда мы можем СТИЛИТЬ… состояние. Для нас мы могли бы сделать что-то вроде изменения цвета фона (привлечь к нему больше внимания, сделав его немного темнее и более заметным).0004
Но для состояния «Фокусировка» ДЕЙСТВИТЕЛЬНО обычной вещью является граница (давайте установим наш цвет на черную рамку, чтобы мы УВИДЕЛИ эффект). Если после этого мы перейдем в режим предварительного просмотра, мы можем щелкнуть и посмотреть, как выглядит это состояние фокуса.
Но помните: ранее мы сделали цвет рамки ПРОЗРАЧНЫМ. Почему? (Почему мы просто не установили границу на 0 пикселей?) Вот почему.
Если мы возьмем наше текстовое поле в состоянии None (не в Focused, просто в None) и установим его на 0 пикселей? Мы видим, что граница исчезает. (Это ожидаемо.)
И если мы перейдем в состояние Focused и установим его примерно на 5 пикселей (я просто добавляю это, чтобы доказать свою точку зрения).
.. вот проблема: если мы вернемся в наше состояние None (мы можем просто нажмите escape на клавиатуре), и мы перейдем в режим предварительного просмотра, обратите внимание, как это влияет на поток документов (вещи качаются, а другие вещи сфокусированы).
СО. Один из ЛУЧШИХ способов сделать это следующий: в состоянии none (как мы показывали ранее) давайте удостоверимся, что мы УСТАНАВЛИВАЕМ границу на ОДИН пиксель (на этот раз я ничего не УСТАНАВЛИВАЮ на 0 пикселей). Но Я устанавливаю ЦВЕТ этой границы (это АЛЬФА… на 0). Таким образом, мы не ВИДИМ границы.
А в сфокусированном состоянии СЕЙЧАС? Мы можем вернуться и установить эту альфу на ЧТО-НИБУДЬ (придать ей больше контраста)… и СЕЙЧАС, если мы вернемся к состоянию «Нет» и перейдем к предварительному просмотру, все готово: мы можем видеть границу, КАК мы выберите (как мы FOCUS) на каждом текстовом поле.
Все работает? И для этого дизайна я действительно собираюсь УДАЛИТЬ этот более темный цвет, так как мы все еще можем видеть эффект ФОКУСИРОВАНИЯ с фоновым цветом.
В любом случае, как только я подготовлю дизайн для проверки, я могу перейти в режим предварительного просмотра и посмотреть, как он выглядит, когда КАЖДОЕ поле (каждое текстовое поле) находится в фокусе.
Теперь есть волшебные улучшения в CSS, такие как контуры CSS, которые делают многое из этого еще проще, у нас есть тонны этого в Университете Webflow, но сейчас давайте перейдем к стилю нашей кнопки.
А как же наша кнопка? Выделив нашу кнопку, мы можем стилизовать ее. Мы можем изменить толщину, размер и цвет нашего шрифта, расстояние между буквами, мы можем войти и изменить заглавные буквы, и давайте изменим цвет фона. (Мы можем внести изменения в стиль, чтобы они соответствовали нашему дизайну.) Это всего лишь изменения, которые МЫ вносим, но вы можете оформить их по своему усмотрению.
Перейдем к состояниям успеха и ошибки.
Что мы видим на холсте прямо сейчас? Это нормальное состояние. (На самом деле, с выбранным блоком «Форма» мы можем перейти к настройкам элемента и увидеть, что он в НОРМАЛЬНОМ режиме).
Переключиться на успех? Теперь мы видим, что происходит, когда кто-то ОТПРАВЛЯЕТ форму. У нас есть некоторый текст-заполнитель, и пока мы выбрали блок сообщения УСПЕХА в навигаторе, мы можем СТИЛИРОВАТЬ блок или что-либо внутри. И… вы можете буквально добавить ДОПОЛНИТЕЛЬНЫЕ вещи (например, я перетаскиваю изображение).
И то же самое с состоянием Ошибка (если есть проблема с отправкой формы). Здесь тот же тип управления, что и для нашего сообщения об успехе. Вернуться в нормальное состояние? И у нас есть полный доступ к нашей обычной форме.
Наконец, давайте объединим все это в ПОЛУЧЕНИЕ этих форм.
И нужно отметить только ДВЕ вещи (первая простая): если у вас одна форма, несколько форм — что угодно. Вы можете зайти в настройки формы и задать имя формы.
Но во второй части… давайте поговорим о том, ЧТО НА САМОМ ДЕЛЕ ПРОИСХОДИТ, когда кто-то отправляет форму. Конечно, эти данные формы захвачены и будут отображаться в настройках проекта (и как только мы окажемся там, мы можем перейти туда, где написано «Формы», и все наши данные формы находятся внизу).
А если прокрутить эту страницу ВВЕРХ? Я могу контролировать ДРУГОЙ аспект этого: ВОЗ получает уведомление при отправке формы.
Достаточно просто, если я хочу, чтобы данные формы всегда отправлялись мне? [email protected]? Сейчас получу письмо. Хотите добавить Tearsa? [email protected].
И теперь копия формы отправляется мне и Тирсе каждый раз, когда она заполняется. ОДНАКО. От имени?! Что это вообще такое? Это опечатка? Должен ли он говорить «имя формы»? НЕТ. Имя ОТ кого или ОТ ЧЕГО отправлено это электронное письмо с уведомлением. Я также могу управлять строкой темы или строкой ответа (если я хочу, чтобы на электронное письмо можно было ответить…). И я могу контролировать тело письма.
Для многих из них я также могу использовать переменные, и у нас есть ТОННЫ информации об этом в Университете Webflow. Так что проверьте это, если вы еще этого не сделали.
Снова. Когда кто-то отправляет форму? Эти данные отправки будут отправлены по электронной почте на адрес (или адреса), и они также будут перечислены ниже.