Прототип Figma: как самостоятельно сделать кликабельный прототип

Alt функциональные клавиши

КомбинацияОписание
Alt F1Переход к следующему полю.
Alt F3Открытие диалогового окна Создание нового стандартного блока, когда выделен текст или объект.
Alt F4Выход из программы Word.
Alt F5Восстановление размера окна.
Alt F6Переход из открытого диалогового окна назад к документу для диалоговых окон, поддерживающих такое поведение.
Alt F7Поиск следующей орфографической или грамматической ошибки.
Alt F8Запуск макроса.
Alt F9Переключение между отображением кодов полей и их значениями.
Alt F10Отображение панели задач Выделение и Видимость.
Alt F11Отображение окна редактирования кода Microsoft Visual Basic.

Css код стрелки-треугольники в кружочках:

.left-arrow,

.right-arrow {

display: inline-flex;

position: relative;

width: 20px;

height: 20px;

background-color: gray;

border-radius: 50%;

cursor: pointer;

}

.left-arrow::before,

.right-arrow::before {

position: absolute;

display: inline-flex;

border: 6px solid transparent;

content: ”;

}

.left-arrow::before {

top: 4px;

left: 0;

border-right: 6px solid white;

}

.right-arrow::before {

top: 4px;

right: 0;

border-left: 6px solid white;

}

/* Иземнение фона и цвета при наведении*/

.left-arrow:hover,

.right-arrow:hover {

background-color: lightgray;

}

.left-arrow:hover:before {

border-right: 6px solid gray;

}

.right-arrow:hover:before {

border-left: 6px solid gray;

}

Css код стрелки-треугольники:

.left-arrow_2, .right-arrow_2 {

border: 20px solid transparent;

display: inline-flex;

}

.left-arrow_2 {

border-right: 20px solid gray;

border-left: none;

}

.right-arrow_2 {

border-left: 20px solid gray;

border-right: none;

}

Ctrl alt функциональные клавиши

КомбинацияОписание
Ctrl Alt F1Просмотр сведений о системе.
Ctrl Alt F2Вызов команды Открыть.

Ctrl shift функциональные клавиши

КомбинацияОписание
Ctrl Shift F3Вставка содержимого буфера Spike.
Ctrl Shift F5Редактирование закладки.
Ctrl Shift F6Переход к предыдущему окну.
Ctrl Shift F7Обновление связанной информации в документе-источнике Microsoft Word.
Ctrl Shift F8 и затем использовать клавиши курсора; нажать Esc для завершения режима выделенияВыделение вертикального блока текста.
Ctrl Shift F9Отмена связи с полем.
Ctrl Shift F11Отмена блокировки поля.
Ctrl Shift F12Вызов команды Печать.

Ctrl функциональные клавиши

КомбинацияОписание
Ctrl F1Отображение или скрытие ленты функций.
Ctrl F2Вызов команды Предварительный просмотр.
Ctrl F3Вырезание выделенного фрагмента и помещение его в буфер Spike.
Ctrl F4Закрытие окна.
Ctrl F6Переход к следующему окну.
Ctrl F9Вставка пустого поля.
Ctrl F10Максимизация окна документа (при повторном нажатии – возврат к предыдущему размеру).
Ctrl F11Блокировка поля.
Ctrl F12Вызов команды Открыть.

Shift функциональные клавиши

КомбинацияОписание
Shift F1Вызов контекстной справки или отображение сведений о форматировании.
Shift F2Копирование текста.
Shift F3Изменение регистра символов.
Shift F4Повторение команды Найти или Перейти к.
Shift F5Переход к последнему изменению.
Shift F6Переход к предыдущей панели или рамке (после нажатия F6).
Shift F7Выбор команды Тезаурус (вкладка Рецензирование, группа Проверка правописания).
Shift F8Уменьшение размера выделения.
Shift F9Переключение между кодом и значением выделенного поля.
Shift F10Отображение контекстного меню.
Shift F11Переход к предыдущему полю.
Shift F12Вызов команды Сохранить.

Адресная строка

Ctrl LилиAlt DилиF6 — перейти в адресную строку.

Вставка в таблицу абзацев и символов табуляции

КомбинацияОписание
EnterВставить в ячейку новый абзац.
Ctrl TabВставить в ячейку символ табуляции.

Вставка графического объекта smartart

Нажмите Alt, N, M, чтобы выбрать SmartArt.

Используйте клавиши курсора для выбора типа рисунка.

Нажмите Tab, затем используйте клавиши курсора для выбора рисунка.

Нажмите Enter.

Вставка объекта

Нажмите Alt, N, J, затем J, чтобы открыть диалоговое окно Объект.

Выполните одно из следующих действий:

А) нажмите стрелку вниз, чтобы выбрать тип объекта, затем нажмите Enter, чтобы создать объект.

Б) нажмите Ctrl Tab чтобы переключиться на вкладку Создать из файла, нажмите Tab, затем укажите имя файла объекта, который вы хотите вставить или перейдите к файлу.

Вставка объекта wordart

Нажмите Alt, N, W, чтобы выбрать WordArt.

Используйте клавиши курсора для выбора стиля объекта WordArt, нажмите Enter.

Наберите нужный текст.

Нажмите Esc, чтобы выделить объект WordArt, затем используйте клавиши курсора, чтобы перемещать объект, нажмите Esc ещё раз для возврата в документ.

Вставка символов с использованием кодов

КомбинацияОписание
Набрать код символа, нажать Alt XВставка символа Unicode по введенному шестнадцатеричному Unicode коду символа. Например, для вставки символа Евро, наберите 20AC, затем нажмите Alt X.
Alt XПреобразование выделенного символа в код Unicode.
Alt код символа на цифровой клавиатуреВставка ANSI символа для введенного десятичного ANSI кода символа. Например, для вставки символа Евро, нажмите Alt и наберите 0128 на цифровой клавиатуре.

Вставка специальных символов

КомбинацияОписание
Ctrl F9Поле.
Shift EnterРазрыв строки.
Ctrl EnterРазрыв страницы.
Ctrl Shift EnterРазрыв колонки.
Alt Ctrl знак минус на цифровой клавиатуреТире (em dash).
Ctrl знак минус на цифровой клавиатуреМинус (en dash).
Ctrl дефисСкрытый перенос.
Ctrl Shift дефисНеразрывный дефис.
Ctrl Shift ПробелНеразрывный пробел.
Alt Ctrl CСимвол авторских прав.
Alt Ctrl RСимвол зарегистрированной торговой марки.
Alt Ctrl TСимвол торговой марки.
Alt Ctrl .Многоточие.
Ctrl ’ , ’Одинарная открывающаяся кавычка.
Ctrl ’ , ’Одинарная закрывающаяся кавычка.
Ctrl ’ , Shift ’Двойная открывающаяся кавычка.
Ctrl ’ , Shift ’Двойная закрывающаяся кавычка.
Enter после начала набора имени автотекста и появления подсказкиПоле Автотекста.

Выделение текста и графики

Выделить текст можно, нажав клавишу Shift и используя клавиши курсора.

Выделение текста и графики в таблице

КомбинацияОписание
TabВыделить содержимое следующей ячейки.
Shift TabВыделить содержимое предыдущей ячейки.
Удерживать клавишу Shift и нажать клавиши курсора несколько разРасширить выделение на смежные ячейки.
Использовать клавиши курсора, чтобы переместить курсор в верхнюю или нижнюю ячейку колонки и затем выполнить следующее:

Shift Alt Page Down – для выделения колонки сверху вниз;

Shift Alt Page Up – для выделения колонки снизу вверх.
Выделение колонки.
Ctrl Shift F8, затем использовать клавиши курсора. Нажать Esc для завершения режима выделения.Расширение выделения (или блока).
Alt 5 (на цифровой клавиатуре (с отключенным Num Lock)Выделение всей таблицы.

Выполнение слияния

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

КомбинацияОписание
Alt Shift KПредварительный просмотр результатов слияния.
Alt Shift NСлияние документа.
Alt Shift MПечать объединённого документа.
Alt Shift EРедактирование документа слияния данных.
Alt Shift FВставка поля слияния.

Выравнивание абзацев

КомбинацияОписание
Ctrl EПереключение абзаца между выравниванием по центру и по левому краю.
Ctrl JПереключение абзаца между выравниванием по ширине и по левому краю.
Ctrl RПереключение абзаца между выравниванием по правому краю и по левому краю.
Ctrl LВыравнивание абзаца по левому краю.
Ctrl MДобавление отступа слева.
Ctrl Shift MУдаление отступа слева.
Ctrl TДобавление висячего отступа.
Ctrl Shift TУдаление висячего отступа.
Ctrl QУдаление форматирования абзаца.

Действия отмены и повтора

КомбинацияОписание
EscПрервать текущее действие.
Ctrl ZОтмена последнего действия.
Ctrl YПовтор последнего действия (в том числе отмененного).

Закрытие панели задач

Нажмите F6, чтобы перейти в панель задач (если необходимо).

Нажмите Ctrl Пробел.

Используйте клавиши курсора для выбора команды Закрыть, нажмите клавишу Enter.

Изменение межстрочного интервала

КомбинацияОписание
Ctrl 1Одинарный межстрочный интервал.
Ctrl 2Двойной межстрочный интервал.
Ctrl 5Полуторный межстрочный интервал.
Ctrl 0 (ноль)Добавление или удаление дополнительного межстрочного интервала перед абзацем.

Изменение размера панели задач

Нажмите F6, чтобы перейти в панель задач (если необходимо).

Нажмите Ctrl Пробел.

Используйте клавиши курсора для выбора команды Размер, нажмите клавишу Enter.

Используйте клавиши курсора для изменения размера панели задач, нажмите клавишу Enter.

Изменение фокуса клавиатуры без помощи мыши

Другой способ использования клавиатуры для навигации по ленте функций – перемещение по вкладкам и командам до нужной функции, которую вы хотите использовать.

КомбинацияОписание
Alt или F10Завершение комбинации клавиш доступа и возврат к редактированию документа.
F10, далее стрелки влево и вправоПеремещение по вкладкам ленты функций.
Ctrl F1Отображение или скрытие ленты функций.
Shift F10Отображение контекстного меню для выбранного элемента.
F6Смена фокуса для выбора следующих областей окна: активная вкладка ленты функций, любые открытые панели задач, панель статуса внизу окна, сам документ.
Tab или Shift TabПереключение между командами ленты функций, вперед или назад, соответственно.
Клавиши курсораПеремещение вниз, вверх, влево, вправо по элементам ленты функций.
Пробел или EnterАктивация выделенной команды или элемента на ленте.
Пробел или EnterОткрытие выделенного меню или галереи на ленте.
EnterАктивация команды или элемента на ленте для модификации значения.
EnterЗавершение модификации значения в элементе управления на ленте и возврат к самому документу.
F1Отображение помощи по выделенной команде или элементу ленты функций. Если нет связанного с командой раздела помощи, то будет показана общая справка по программе.

Изменение шрифта и его размера

Приведенные ниже комбинации клавиш не работают в режиме чтения.

КомбинацияОписание
Ctrt Shift FОткрытие диалога выбора шрифта.
Ctrl Shift >Увеличение размера шрифта.
Ctrl Shift <Уменьшение размера шрифта.
Ctrl ]Увеличение размера шрифта на 1 точку.
Ctrl [Уменьшение размера шрифта на 1 точку.

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

КомбинацияОписание
Shift F10Отображение контекстного меню для выделенного элемента.
Alt Shift F10Отображение меню или сообщения для доступного действия или для кнопки Автокоррекции или для кнопки Вставки. Если доступно более одного действия, переключение к следующему действию и отображение меню или сообщения.
Клавиши курсораПеремещение между опциями меню доступных действий.
EnterВыполнение выбранного действия в меню доступных действий.
EscЗакрытие меню или сообщения с доступными действиями.

Использование панелей задач и галерей

КомбинацияОписание
F6Переход к панели задач из другой панели окна программы (может потребоваться нажать F6 несколько раз).
Ctrl TabПереход к панели задач при активном меню (может потребоваться нажать Ctrl Tab несколько раз).
Tab или Shift TabВыбор следующей или предыдущей опции в панели задач, когда она активна.
Ctrl ПробелОтображение полного набора команд в меню панели задач.
Пробел или EnterВыполнение действия, назначенного на выбранную кнопку.
Shift F10Отображение выпадающего меню для выделенного элемента галереи.
Home или EndВыбор первого или последнего элемента в галерее.
Page Up или Page DownПрокрутка вверх или вниз в выделенном списке галереи.
:/>  Оператор goto: что это, зачем необходимо и где применяется | CoderNet

История и закладки

Ctrl H — открыть историю браузера (Mac: Command Y).

Ctrl J — открыть загрузки (Mac: Command Shift J).

Ctrl D — добавить в закладки текущую страницу.

Ctrl Shift Del — открыть страницу для очистки истории.

Как ставить линки в кликабельный прототип

В качестве примера мы воспользуемся проектом из предыдущей статьи. Создавая дизайн в первой части, мы использовали две страницы и объединили их с помощью вкладки prototype, Пример работы можно видеть на картинке ниже:

Вкладка prototype открывает всплывающее окно, где нужно выбрать тип перехода. Для этих целей обычно используется функция onClick. В раскрывающемся списке доступно еще несколько вариантов:

  1. OnDrag – предназначен для захвата и перетаскивания. Допустим, дизайнер создал два окна для смартфона и нужно реализовать действие, где щелчком мыши по фрейму и перемещением открывается новое окно.   
  2. Hovering – при наведении на фрейм будет переход на следующую страницу. Как только курсор мыши уберется с целевой области, автоматически произойдет возврат обратно.
  3. Pressing – действия происходят при нажатии мышки на страницы. 
  4. Key/gamepad – здесь пользователь устанавливает нажатие клавиши. После выбора этого пункта появится поле, где нужно обозначить клавишу на клавиатуре. 

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

  1. Enter – координаты курсора мышки фиксируются, и когда они попадают в рабочую область страницы прототипа, автоматически осуществляется перенаправление. 
  2. Leave – при наведение на любой участок, кроме основного фрейма, будет выполнен переход. 
  3. Down – зажатая кнопка мышки на фрейме сделает переход.
  4. Up – аналогично предыдущему варианту, только в этом случае переход работает при отпускании мышки.

Как в Фигме сделать ссылки? Приведем пример и создадим две области, где при нажатии на кнопки будут переключаться картинки. Для этого применим оригинальный шаблон из первой части и увеличим высоту (height), и перенесем часть блоков ниже:

Добавим в пустое пространство еще один frame (фрейм). Редактирование внутри фреймов может оказаться непростой задачей, поэтому мы приняли решение сначала создать контейнеры выше макета, в которых будет находиться картинка. Создадим еще два фрейма.

Теперь заполним области случайными image (изображениями), для этих целей воспользуемся Unsplash. Выбираем два контейнера Frame8 и Frame7 правой кнопкой Plugins->Unsplash, В итоге у нас получится вот что:

Теперь внешние кадры перенесем и вставим внутрь десктопного приложения номер 1 (Desktop-1). В левой вкладке Layers захватываем frame8 и frame7 и перетаскиваем их. Они должны оказаться в ранее созданном объекте Frame6. В итоге на общем холсте они скроются, чтобы снова их отобразить, нужно настроить позиционирование. Пример:

Ниже оставлен небольшой отступ для стрелок, чтобы с их помощью менять баннеры. 

Desktop-1 следует дополнить двумя прямоугольниками (Rectangle). И задать настройки: обводку Stroke и заливку, как показано на скриншоте: 

Дальше оформляем каждый квадрат стрелочкой. Воспользуемся плагином, который открывает иконки на разные объекты. Называется plugin “Font Awesome Icons”. 

Выбрав icons (иконки), мы увидим, что они расположены не в том месте, где нам надо, поэтому следующий шаг – это назначить позиции и размер, например, 55 пикселей высота и ширина. Дальше следует их назвать arrow-right и arrow-left и сгруппировать с rectangle быстрыми клавишами CTRL G. Выделяем и группируем. Придумываем название, например, button-arrow-right и button-arrow-left. 

Для каждого квадрата свой arrow. Полностью пример всех действий показан на скриншоте:

Сделаем привязку к кнопкам. При щелчке будет меняться кадр. Стоит напомнить, что в предыдущей статье мы сделали копию макета, чтобы показать, как работают переходы. Сейчас копия нам не нужна. Если по пути встречаются посторонние объекты, которые мешают просмотру и редактированию, вы всегда сможете сделать две вещи: “скрыть” и “повесить замок”. Таким образом, вы прячете страницу, используя глаз, и защищаете от изменений с помощью замка:

Чтобы сделать переходы, нужно сначала добавить горизонтальную прокрутку. Делается это так: щелкаем по Frame6, открываем вкладку prototype и видим надпись Overflow Behavior, из списка выбираем Horizontal scrolling. Настраиваем связи, используя ранее созданные кнопки “стрелки”.

После того, как выполнили предписанные действия, настраиваем связь между фреймами: правую стрелку привязываем к кадру, которая находится за пределами видимости станицы, левую, соответственно, указываем на первый frame. Делается это все через prototype. В всплывающем окне указываем настройки анимации. Пример:

Данная процедура – это настройка якорных ссылок (anchor link) в Фигме. Эффект, когда при нажатии кнопки контент сдвигается и показывается следующий блок. После того, как все сделано, можно протестировать полученный результат. Нажимаем вправо, появится следующий frame, влево – вернется на исходную позицию.

Это методика допустима для одного объекта, в случае, когда понадобится добавить якорные ссылки в Фигме. Если же появилась задача, где нужно работать с анимацией, то этот вариант определенно не подойдет. 

Чтобы зациклить баннер или сделать плавное появление следующего image, нужно использовать Smart Animate. В таком случае потребуется дублировать страницу, после этого появится возможность добавлять разные эффекты при переходе.

Еще один важный элемент, который может присутствовать на вебсайте, это вертикальный anchor link. Щелкнув по веб-ссылке в меню навигации, страница прокрутится до указанного фрагмента и отобразится нужный контент. Чтобы это реализовать, понадобится в наш прототип добавить в самом верху меню. Поэтому, создавая прототип в первой части, нужно сделать отступ, там мы и разместим элемент menu.

Сверху разместим четыре figma ссылки, например: Наши новинки, Товары, Консультация и Подвал. В макете одного раздела не хватает, а именно возможности задать вопрос, поэтому следующее, что необходимо сделать, – расширить высоту шаблона и добавить фрейм free-consultation. Еще важно разместить в макете подвал с контактами (footer), пример элемента ниже:

Вставим в шапку (header) несколько текстовых полей, преобразуем в anchor link и перенаправим на определенный фрагмент страницы. Чтобы это сделать, нужно выбрать любое текстовое поле, потом перейти во вкладку prototype, затем на экране появится плюсик, делаем захват и ведем стрелку на целевой контейнер. Показываем screenshot с примером всех связей:

Способ поставить линк на внешний ресурс – это использование инструмента “Create Link” (цепь). Иконка цепи расположена на верхней панели. Для начала выбираем text, потом щелкаем по “цепи”, затем появится всплывающее окно, вписываем url-адрес сайта. При тестировании веб-ссылка станет активной. 

Как шерить проект

Допустим дизайн готов и самое время показывать его заказчику. Для этого есть специальная кнопка в верхнем углу экрана Share, при нажатии на нее появится окно, далее нажимаем Copy Link. Скопированную ссылку можно передавать заказчику. Если запустить тестирование, то там тоже есть Share, работает аналогично. 

В раскрывающемся списке можно выбрать обычный просмотр или редактирование:

Кроме того, нажав “Get embed code”, откроется код с тегом iframe, который можно разместить на сторонний веб-сайт. 

Подведем итоги: прочитав статью, вы ознакомились с таким понятием как ссылки в Фигма. Научились делать “галерею” из бесконечно прокручивающихся картинок и освоили дополнительную простую тему создания popup окон. Все это в совокупности позволит вам собрать кликабельный прототип в сервисе Фигма.

Копирование и перемещение текста и графики

КомбинацияОписание
Alt H, F, OОткрытие буфера обмена Office.
Ctrl CКопирование выделенного текста или графики в буфер обмена Office.
Ctrl XВырезание выделенного текста или графики в буфер обмена Office.
Ctrl VВставка наиболее позднего добавления или вставленного элемента из буфера обмена Office.
F2, затем переместить курсор в нужное место и нажать Enter.Однократное перемещение текста или графики.
Shift F2, затем переместить курсор в нужное место и нажать Enter.Однократное копирование текста или графики.
Alt F3Открытие диалогового окна Создание нового стандартного блока, когда выделен текст или объект.
Shift F10Отображение контекстного меню для выделенного стандартного блока, например объекта SmartArt.
Ctrl F3Вырезание выделенного фрагмента и помещение его в буфер Spike.
Ctrl Shift F3Вставка содержимого буфера Spike.
Alt Shift RКопирование верхнего или нижнего колонтитула из предыдущего раздела документа.

Копирование форматирования

КомбинацияОписание
Ctrl Shift CКопирование форматирования из текста.
Ctrl Shift VПрименение скопированного форматирования к тексту.

Масштабирование

Ctrl и « » или Ctrl прокрутка колесика мыши вверх — увеличить масштаб страницы.

Ctrl и «–» или Ctrl прокрутка колесика мыши вниз  — уменьшить масштаб страницы.

Ctrl 0 — установить масштаб по умолчанию.

F11 — запустить полноэкранный режим.

Навигация по ленте функций

Комбинации доступа позволяют вызвать нужную команду нажатием нескольких клавиш, в зависимости от того, где вы находитесь в программе. Каждая команда Word 2022 может быть вызвана с использованием комбинации доступа. Вы можете вызывать большинство команд, используя от двух до 5 клавиш.

Для использования комбинации доступа:

  1. Нажмите клавишу Alt.
  2. Нажмите клавишу Alt. На текущем представлении ленты функций появятся подсказки по нажатию клавиш.
  3. Нажмите клавишу, отображенную в подсказке над функцией, которую вы хотите использовать. После нажатия клавиши в случае наличия опций у выбранной функции могут быть показаны дополнительные подсказки.
  4. Продолжайте нажимать клавиши, пока вы не нажмете клавишу для конечной команды, которую вы хотите выполнить. В некоторых случаях вначале нужно нажать клавишу выбора группы, которая содержит команду.

Примечание:

Для отмены предпринимаемого действия и скрытия подсказок нажмите Alt.

Навигация по сайтам

Alt стрелка влево/пробел — перейти на предыдущую страницу (Mac: Command стрелка влево).

Alt стрелка вправоилиShift пробел — перейти на следующую страницу (Mac: Command стрелка вправо).

F5 — перезагрузить страницу.

Ctrl F5 — обновить страницу полностью без использования кэша (Mac: Command Shift R).

Escape — остановить загрузку страницы.

Alt Home — открыть домашнюю страницу (Mac: Command Shift H).

Отображение и работа с окнами

КомбинацияОписание
Alt TabПереключение на следующее окно.
Alt Shift TabПереключение на предыдущее окно.
Ctrl W или Ctrl F4Закрытие активного окна.
Alt F5Восстановление размера активного окна после его максимизации.
Shift F6Переход к панели задач из другой панели в окне программы.
Ctrl F6Переключение на следующее окно, когда открыто более одного окна.
Ctrl Shift F6Переключение на предыдущее окно, когда открыто более одного окна.
Ctrl F10Максимизация или восстановление активного окна.
Prt ScrКопирование картинки экрана в буфер обмена.
Alt Prt ScrКопирование картинки текущего окна в буфер обмена.
:/>  Как открыть блокнот

Переключение режима отображения

КомбинацияОписание
Alt Ctrl PПереключение в режим разметки страницы.
Alt Ctrl OПереключение в режим структуры документа.
Alt Ctrl NПереключение в обычный режим.

Перемещение панели задач

Нажмите F6, чтобы перейти в панель задач (если необходимо).

Нажмите Ctrl Пробел.

Используйте клавиши курсора для выбора команды Переместить, нажмите клавишу Enter.

Используйте клавиши курсора для перемещения панели задач, нажмите клавишу Enter.

Перемещение по документу

КомбинацияОписание
Стрелка влевоПеремещение на один символ влево.
Стрелка вправоПеремещение на один символ вправо.
Ctrl стрелка влевоПеремещение на одно слово влево.
Ctrl стрелка вправоПеремещение на одно слово вправо.
Ctrl стрелка вверхПеремещение на один параграф вверх.
Ctrl стрелка внизПеремещение на один параграф вниз.
Shift TabПеремещение на одну ячейку влево (в таблице).
TabПеремещение на одну ячейку вправо (в таблице).
Стрелка вверхПеремещение на одну строку вверх.
Стрелка внизПеремещение на одну строку вниз.
EndПеремещение в конец строки.
HomeПеремещение в начало строки.
Alt Ctrl Page UpПеремещение вверх окна.
Alt Ctrl Page DownПеремещение вниз окна.
Page UpПеремещение на один экран вверх с прокруткой.
Page DownПеремещение на один экран вниз с прокруткой.
Ctrl Page DownПеремещение вверх следующей страницы.
Ctrl Page UpПеремещение вверх предыдущей страницы.
Ctrl EndПеремещение в конец документа.
Ctrl HomeПеремещение в начало документа.
Shift F5Переход к предыдущему исправлению.
Shift F5После открытия документа – переход к месту, над которым вы работали перед тем, как документ был последний раз закрыт.

Перемещение по таблице

КомбинацияОписание
TabПерейти к следующей ячейке строки.
Shift TabПерейти к предыдущей ячейке строки.
Alt HomeПерейти к первой ячейке строки.
Alt EndПерейти к последней ячейке строки.
Alt Page UpПерейти к верхней ячейке колонки.
Alt Page DownПерейти к нижней ячейке колонки.
Стрелка вверхПерейти к предыдущей строке.
Стрелка внизПерейти к следующей строке.
Alt Shift стрелка вверхСдвинуть строку вверх.
Alt Shift стрелка внизСдвинуть строку вниз.

Печать и предварительный просмотр документа

КомбинацияОписание
Ctrl PПечать документа.
Alt Ctrl IПереключение е режим предварительного просмотра.
Клавиши курсораПеремещение по странице предварительного просмотра при увеличенном масштабе.
Page Up и Page DownПеремещение к предыдущей или следующей странице при уменьшенном масштабе.
Ctrl HomeПеремещение к первой странице при уменьшенном масштабе.
Ctrl EndПеремещение к последней странице при уменьшенном масштабе.

Поворот стрелки №1

Для поворота стрелки будем использовать свойство transform с о значением rotate:

transform: rotate(числоdeg);

Поворот стрелки №1 вверх

Для того, чтобы стрелка №1 повернулась вверх, коду css добавляем

transform: rotate(-45deg);

Поиск

Ctrl KилиCtrl E — перейти во встроенную строку поиска в браузере или перейти на адресную строку, если в браузере нет отдельной поисковой.

Alt Enter — выполнить поиск по запросу в поисковой строке в новой вкладке (только для Windows).

Поиск, замена, навигация по тексту

КомбинацияОписание
Ctrl FОткрытие панели навигации для поиска по документу.
Alt Ctrl YПовторить поиск после закрытия окна поиска и замены.
Ctrl HЗамена текста, специфического форматирования и специальных элементов.
Ctrl GПереход к странице, закладке, таблице, комментарию, графику, другим объектам.
Alt Ctrl ZПереключение между последними четырьмя местами, которые вы редактировали.
Alt Ctrl HomeОтображение списка режимов просмотра. Перемещение с помощью клавиш курсора, выбор режима с помощью клавиши Enter.
Ctrl Page UpПереход к предыдущему объекту просмотра (установленному в режиме просмотра).
Ctrl Page DownПереход к следующему объекту просмотра (установленному в режиме просмотра).

Применение стилей абзацев

КомбинацияОписание
Ctrl Shift SОтображение панели задач Применение стилей.
Alt Ctrl Shift SОтображение панели задач Стили.
Alt Ctrl KНачало автоформатирования.
Ctrl Shift NПрименение стиля Обычный.
Alt Ctrl 1Применение стиля Заголовок 1.
Alt Ctrl 2Применение стиля Заголовок 2.
Alt Ctrl 3Применение стиля Заголовок 3.
Если панель не выбрана, нажмите F6. Нажмите Ctrl Пробел. Используйте клавиши курсора, чтобы выбрать Закрыть, нажмите Enter.Закрытие панели задач Стили.

Применение форматирования текста

КомбинацияОписание
Ctrl DОткрытие диалога выбора шрифта для изменения форматирования текста.
Shift F3Изменение буквенного регистра.
Ctrl Shift AФорматирование всех букв как заглавных.
Ctrl BПрименение полужирного форматирования.
Ctrl UПрименение подчеркивания.
Ctrl Shift WПрименение подчеркивания для слов, но не для пробелов.
Ctrl Shift DПрименение двойного подчеркивания.
Ctrl Shift HПрименение форматирования скрытым текстом.
Ctrl IПрименение форматирования курсивом.
Ctrl Shift KПреобразование букв в малые прописные.
Ctrl знак равноПеревод текста в нижний индекс (автоматические интервалы).
Ctrl Shift знак плюсПеревод текста в верхний индекс (автоматические интервалы).
Ctrl ПробелУдаление ручного форматирования символов.
Ctrl Shift QПрименение шрифта Symbol к выделению.

Прокрутка страницы

Пробелилистрелка вниз — прокрутить страницу вниз.

Shift Spaceилистрелка вверх — прокрутить страницу вверх.

Home — перейти к верхней части страницы.

End — перейти к нижней части страницы.

Щелчок средней кнопкой мыши — прокручивать страницу с помощью мыши (доступно только на Windows).

Просмотр и копирование форматов текста

КомбинацияОписание
Ctrl Shift *

(звездочка на цифровой клавиатуре не работает)
Отображение непечатных символов.
Shift F1

(затем нажмите на текст с форматированием, которое вы хотите изучить)
Обзор форматирования текста.
Ctrl Shift CКопирование форматирования.
Ctrl Shift VВставка форматирования.

Прочие функции

Ctrl P — распечатать текущую страницу.

Ctrl S — сохранить текущую страницу на компьютер.

Ctrl O — открыть файл, хранящийся на компьютере.

Ctrl U — открыть исходный код текущей страницы.

F12 — открыть инструменты разработчика (Mac: Option Command U).

Источник.

Фото на обложке: Thaspol Sangsee /

Работа в режиме структуры документа

КомбинацияОписание
Alt Shift стрелка влевоУвеличить уровень параграфа (уровень 1 самый большой).
Alt Shift стрелка вправоУменьшить уровень параграфа.
Ctrl Shift NУбрать уровень и сбросить стиль на основной текст.
Alt Shift стрелка вверхПереместить выбранные параграфы вверх.
Alt Shift стрелка внизПереместить выбранные параграфы вниз.
Alt Shift знак плюсРазвернуть текст под заголовком.
Alt Shift знак минусСвернуть текст под заголовком.
Alt Shift AРазвернуть или свернуть весь текст или заголовки.
Знак слэш (/) на числовой клавиатуреСкрыть или отобразить форматирование.
Alt Shift LПоказать первую строку текста раздела или весь текст раздела.
Alt Shift 1Показать все заголовки со стилем Заголовок 1.
Alt Shift nПоказать все заголовки до стиля Заголовок n включительно.
Ctrl TabВставить знак табуляции.

Работа с диалоговыми окнами

КомбинацияОписание
TabПереключение на следующую опцию или группу опций.
Shift TabПереключение на предыдущую опцию или группу опций.
Ctrl TabПереключение на следующую вкладку диалогового окна.
Ctrl Shift TabПереключение на предыдущую вкладку диалогового окна.
Клавиши курсораПеремещение между опциями открытого выпадающего списка или между опциями в группе.
Пробел (Spacebar)Выполнение действия назначенного выбранной кнопке; отметка или очистка поля флажка.
Alt буква с подчеркиванием в названии опцииВыбор опции, отметка или очистка поля флажка.
Alt стрелка внизОткрытие выбранного выпадающего списка.
Первая буква опции в выпадающем спискеВыделение опции выпадающего списка.
EscЗакрытие активного выпадающего списка; завершение команды и закрытие диалогового окна.
EnterЗапуск выбранной команды.

Работа с диалоговыми окнами открыть и сохранить как

КомбинацияОписание
Ctrl F12 или Ctrl OОтображение диалогового окна Открыть (открытие файла).
F12Отображение диалогового окна Сохранить как (сохранение файла в выбираемом формате).
EnterОткрытие выбранной папки или файла.
BackspaceПереход в папку на один уровень выше текущей папки.
DelУдаление выбранной папки или файла.
Shift F10Отображение контекстного меню для выбранного элемента (папки или файла).
TabПереключение на следующую опцию.
Shift TabПереключение на предыдущую опцию.
F4 или Alt IОткрытие списка папок.

Работа с полями

КомбинацияОписание
Alt Shift DВставка поля даты.
Alt Ctrl LВставка поля LISTNUM.
Alt Shift PВставка поля номера страницы.
Alt Shift TВставка поля времени.
Ctrl F9Вставка пустого поля
Ctrl Shift F7Обновление связанной информации в документе-источнике Microsoft Word.
F9Обновление выделенных полей.
Ctrl Shift F9Отмена связи с полем.
Shift F9Переключение между кодом и значением выделенного поля.
Alt F9Переключение между отображением кодов полей и их значениями.
Alt Shift F9Запуск GOTOBUTTON или MACROBUTTON из поля для отображения значений полей.
F11Переход к следующему полю.
Shift F11Переход к предыдущему полю.
Ctrl F11Блокировка поля.
Ctrl Shift F11Снятие блокировки поля.

Работа с полями ввода в диалоговых окнах

Поле ввода – это поле, в котором можно печатать или вставлять текст из буфера обмена, например, поле с путём к папке.

КомбинацияОписание
HomeПереход в начало поля ввода.
EndПереход в конец поля ввода.
Стрелки влево и вправоПеремещение курсора на один символ влево или вправо.
Ctrl стрелка влевоПеремещение курсора на одно слово влево.
Ctrl стрелка вправоПеремещение курсора на одно слово вправо.
Shift стрелка влевоВыделение или снятие выделения с одного символа слева от курсора.
Shift стрелка вправоВыделение или снятие выделения с одного символа справа от курсора.
Ctrl Shift стрелка влевоВыделение или снятие выделения с одного слова слева от курсора.
Ctrl Shift стрелка вправоВыделение или снятие выделения с одного слова справа от курсора.
Shift HomeВыделение от позиции курсора и до начала поля ввода.
Shift EndВыделение от позиции курсора и до конца поля ввода.

Распознавание рукописного ввода

КомбинацияОписание
Левый Alt ShiftПереключение между языками или раскладками клавиатуры.
Windows CОтображение списка вариантов исправлений.
Windows HВключение и отключение рукописного ввода.
Alt ~Отключение (или включение) японского редактора метода ввода (IME) на 101 раскладке клавиатуры.
Правый AltОтключение (или включение) IME для корейского языка на 101 раскладке клавиатуры.
Ctrl ПробелОтключение (или включение) редактора IME для китайского языка на 101 раскладке клавиатуры.

Расширение области выделения

КомбинацияОписание
F8Включить режим расширения выделения.
F8, затем нажимая стрелку влево или вправо.Выбрать ближайший символ.
F8 (один раз) для выделения слова, дважды – для выделения предложения, и т.д.Увеличение размерности выделения.
Shift F8Уменьшение размерности выделения.
EscВыключить режим расширенного выделения.
Shift стрелка вправоРасширить выделение на один символ вправо.
Shift стрелка влевоРасширить выделение на один символ влево.
Ctrl Shift стрелка влевоРасширить выделение до начала слова.
Ctrl Shift стрелка вправоРасширить выделение до конца слова.
Shift EndРасширить выделение до конца строки.
Shift HomeРасширить выделение до начала строки.
Shift стрелка внизРасширить выделение на одну линию вниз.
Shift стрелка вверхРасширить выделение на одну линию вверх.
Ctrl Shift стрелка внизРасширить выделение до конца параграфа.
Ctrl Shift стрелка вверхРасширить выделение до начала параграфа.
Shift Page DownРасширить выделение на один экран вниз.
Shift Page UpРасширить выделение на один экран вверх.
Ctrl Shift HomeРасширить выделение до начала документа.
Ctrl Shift EndРасширить выделение до конца документа.
Alt Ctrl Shift Page DownРасширить выделение до конца текущего экрана.
Ctrl AРасширить выделение с включением всего документа.
Ctrl Shift F8 и затем использовать клавиши курсора; нажать Esc для завершения режима выделенияВыделение вертикального блока текста.
F8 клавиши курсора; нажать Esc для завершения режима выделенияРасширить выделение до нужного места в документе.
:/>  Как убрать кракозябры вместо букв в ОС Windows XP | Татьяна Поспелова

Редактирование объекта

Разместите курсор слева от объекта, выделите объект нажатием Shift стрелка вправо.

Нажмите Shift F10.

Нажмите Tab, чтобы перейти к имени объекта, нажмите Enter и ещё раз Enter.

Режим чтения

КомбинацияОписание
HomeПерейти к началу документа.
EndПерейти к концу документа.
n, EnterПерейти к странице n.
EscВыход из режима чтения.

Рецензирование документа

КомбинацияОписание
Alt Ctrl A или Alt Ctrl MВставить примечание.
Ctrl Shift EВключение и отключение режима отслеживания изменений документа.
Alt Shift CЗакрытие панели рецензирования, если она была открыта.

Советы

Можно включить воспроизведение звукового сигнала при действии (недоступно в приложении Word Starter). Для прослушивания звуковых уведомлений, необходимо иметь звуковую карту. Необходимо также, чтобы на компьютере были установлены звуки Microsoft Office.

Создание кликабельной карусели с картинками

На просторах интернета встречаются карусели, по которым можно кликнуть и открыть следующую страницу. Владельцы интернет-магазинов размещают в каруселях фото товары или последние новинки. Карусель обычно автоматически прокручивается, привлекая внимания потенциальных клиентов.

Создадим новый пустой проект “Blank canvas”. Начинаем рисовать фреймы. Их будет четыре, придумаем каждому названия, например, image-frame1-4, зададим ширину и высоту 200 пикселей и добавим туда картинки с помощью плагина unsplash. Первые три будут сгенерированы случайно, а четвертую нужно перенести с первой позиции: 

Мы подготовили наш ряд. Теперь добавим основное окно, которое будет отображаться при старте проекта, размер проставим 600×400, дадим название main-frame. Внутри основной области добавим еще один контейнер с названием slides-frame, этот объект должен быть такой же, как размер картинок, 200×200 px.

Перенесём все наши image-frame в slides-frame, затем нужно настроить позиции. Часть image скрыта из-за опции “Clip Content”. Сгруппируем наши изображение в единый контейнер, для этого следует выбрать их в разделе «слои». Лучше всего это сделать, щелкая по первой и последней картинке, удерживая клавишу Shift. После нажимаем клавишу CTRL G. Полный результат всех действий показан на картинке:

Сделаем четыре дубликат main-frame, используя CTRL C и CTRL V. Теперь начнем смещать наши группы. Во втором дубликате на 200 пикселей, в третьем на 400, в четвертом на 600, разумеется, все это со знаком минус:

Настроим связи между четырьмя кадрами с помощью Prototype. При переходе с первой на четвертую будет Smart Animage. С четвертой по первую Instant. 

При тестировании запускаем бесконечный слайд. Вернёмся к нашему шаблону и найдем блок с новинками товаров. Напомним, что в первой части статьи мы использовали целый ряд карточек товаров и прокручивали его с помощью вкладки Overflow behavior->

Horizontal Scrolling. Теперь создадим бесконечный скроллинг, используя Smart Animate. Графическое изображение “новинок товаров” находится в блоке Frame3, он будет у нас основным, создадим там еще один блок и назовём slides-frame. Раньше мы сгенерировали иллюстрации, чтобы протестировать Overflow behavior, поэтому часть придется удалить, оставить только 6 и сделать дубликат. Переносим весь ряд в slides-frame:

Все отступы должны быть строго соблюдены, например, во вложенной группе, куда добавлены все картинки, от левого края рекомендуется установить 15 пикселей, а расстояние между карточками 55 px. Кроме того, следует добавить стрелки, чтобы дать возможность прокручивать вручную. 

Делая скроллинг в первый раз, мы сдвигали группу влево, используя параметр «количество пикселей» у картинки, теперь нам нужно учитывать не только ширину image, но и отступы между изображениями и от левого края группы. Вам нужно сделать захват мышкой и перетащить к самому краю, а потом из параметра Y группы X вычесть 15 пикселей.

Дальше делаем несколько копий со сдвигом на одну картинку в каждой. Потом реализуем привязку (Prototype). Учитывая количество изображений (одиннадцать), дублированных макетов должно быть семь. Пример на картинке:

Обратите внимание, что первый и последний шаблон похожи. Это сделано для того, чтобы осуществить плавный переход во время бесконечной прокрутки. С 1 по 7 мы будем использовать связь Smart Animate, c седьмого по первый –Instance. Настройки на скриншоте:

Если требуется сделать привязку ко кнопке, то для этого нужно взаимодействовать с функцией onclick, привязать её к последующему и предыдущему шаблону. 

Чтобы картинка в ленте стала кликабельной, следует применить prototype к ней и провести стрелку на блок, куда будет переходить пользователь при нажатии.

Создание, просмотр и сохранение документов

КомбинацияОписание
Ctrl NСоздание нового документа.
Ctrl OОткрытие документа.
Ctrl WЗакрытие документа.
Alt Ctrl SРазделение окна документа на области.
Alt Shift C или Alt Ctrl SУдаление разделения окна документа.
Ctrl SСохранение документа.

Создать интернет-магазин, воронку продаж или лендинг быстро и легко – advantshop

В статье рассмотрим как работает прокрутка сайта (стрелка слева) (рис. 1).

Данная навигационная стрелка помогает быстро перейти в начало страницы сайта.

Навигационная стрелка - 5298
Рисунок 1.

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

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

Изменение внешнего вида стрелки

Если планируете поменять цвет стрелки, либо загрузить свою картинку, то это можно сделать следующим образом:
Через встроенный редактор в браузере (вызываем редактор через F12) смотрим, какой класс отвечает за стили иконки корзины (рис. 2).

Навигационная стрелка - 2611
Рисунок 2.

Кнопке соответствует класс .to-top-icon.

Код для изменения стилей будет выглядеть следующим образом:

.to-top-icon
{
background: url(strelka.png) no-repeat;
background-size: cover;
}
.to-top-icon:before
{
content: “”;
}

Где strelka.png – это название вашей иконки. Её нужно предварительно загрузить на сайт. Подробнее о том, как загрузить изображение на сайт, можно ознакомиться в инструкции. Рекомендуемый размер иконки – 40x40px.

Размещаем код в панели администрирования: пункт меню “Мои сайты” – “Редактировать” – вкладка “Параметры“, раздел “CSS” и в окне редактора сохраняем настройки (рис. 3).

Навигационная стрелка - 7316
Рисунок 3.

Результат применения стилей (рис. 4).

Навигационная стрелка - 2539
Рисунок 4.

Аналогично можно изменить цвет существующей стрелки и сделать ее больше (рис. 5).

Навигационная стрелка - 7499
Рисунок 5.

Код для изменения цвета и размера с рис. 5 будет выглядеть следующим образом:

.scroll-to-top .cs-t-1
{
color: #DC143C;
font-size: 30px;
}

Готово, мы рассмотрели, что такое навигационная стрелка и как ее изменить.

Тэги: навигация, стрелка вверх, прокрутка вверх, стрелка, навигационная стрелка, прокрутка, боковая стрелка

Ссылки, сноски и концевые сноски

КомбинацияОписание
Alt Shift OОпределение элемента оглавления.
Alt Shift IОпределение элемента таблицы цитат.
Alt Shift XОпределение элемента указателя.
Alt Сtrl F.Вставка сноски.
Alt Сtrl D.Вставка концевой сноски.

Стандартные задачи в microsoft word

КомбинацияОписание
Ctrl Shift ПробелВвод неразрывного пробела.
Ctrl Shift ‑Ввод неразрывного дефиса.
Ctrl BПрименение к тексту жирного выделения.
Ctrl IПрименение к тексту курсива.
Ctrl UПрименение к тексту подчёркивания.
Ctrl Shift <Уменьшение размера шрифта на один шаг.
Ctrl Shift >Увеличение размера шрифта на один шаг.
Ctrl [Уменьшение размера шрифта на одну точку.
Ctrl ]Увеличение размера шрифта на одну точку.
Ctrl ПробелУдаление форматирования параграфа или символов.
Ctrl CКопирование выделенного текста или объекта в буфер обмена.
Ctrl XВырезание выделенного текста или объекта в помещение его в буфер обмена.
Ctrl VВставка текста или объекта из буфера обмена.
Ctrl Alt VСпециальная вставка.
Ctrl Shift VВставка только форматирования.
Ctrl ZОтмена предыдущего действия.
Ctrl YПовтор предыдущего действия.
Ctrl Shift GОтображение окна статистики документа: количество страниц, слов, знаков и др.

Стрелка css в виде стрелы.

Следующая стрелка css в виде стрелы:

Стрелка №1 смотрит влево.

Html:

Стрелка №1 смотрит вниз.

Html:

Стрелка №1 смотрит вправо.

Html:

Удаление текста и графики

КомбинацияОписание
BackspaceУдаление одного символа слева.
Ctrl BackspaceУдаление одного слова слева.
DelУдаление одного символа справа.
Ctrl DelУдаление одного слова справа.
Ctrl XВырезание выделенного текста и помещение его в буфер обмена.
Ctrl ZОтмена последнего действия.
Ctrl F3Вырезание выделенного фрагмента и помещение его в буфер Spike.

Управление вкладками

Ctrl 1-8 — перейти к определенной вкладке, начиная слева.

Ctrl 9 — перейти к последней вкладке.

Ctrl Tab илиCtrl Page Up — перейти к следующей вкладке, то есть к той, что находится справа (Mac: Command Option стрелка вправо).

Ctrl Shift Tab илиCtrl Page Down — перейти к предыдущей вкладке, то есть к той, что находится слева (Mac: Command Option стрелка влево).

Ctrl WилиCtrl F4 — закрыть текущую вкладку.

Ctrl Shift T — открыть последнюю закрытую вкладку.

Ctrl T — открыть новую вкладку.

Ctrl N — открыть новое окно браузера.

Alt F4 — закрыть текущее окно (Mac: Command Shift W).

Управление вкладками с помощью мыши

Щелчок средней кнопкой на вкладке — закрыть вкладку (только для Windows).

Ctrl щелчок левой или средней кнопкой — открыть ссылку в фоновой вкладке.

Shift щелчок левой кнопкой — открыть ссылку в новом окне браузера.

Ctrl Shift щелчок левой кнопкой — открыть ссылку в текущей вкладке.

Оставьте комментарий

Adblock
detector