образовательный центр

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

 

Содержание:

 

Добавление виджета
Изменения размера виджета
Замена картинки
Удаление виджета
Установка ссылки
Копировать, вставить, вырезать виджет
Блокировка виджета
Управление слойностью (глубиной)
Свойства виджета
Прочие настройки
Скругление углов
Настройка границ

 

 

Добавление виджета

 

Итак, список ваших файлов находится в левом меню, в последнем пункте.

 

Для добавления виджета на сайт, просто перетащите его левой кнопкой мышкой.

 

Виджет появился на рабочей области редактора.

Изменения размера виджета

 

Когда виджет активен, вокруг него показываются восемь маркеров (кружочков), за которые вы можете изменять размер виджета.

Для перемещения виджета используйте левую кнопку мышки.

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

 

Замена картинки

 

Часто бывает появляется задача быстро заменить одну картинку на другую с сохранением текущих размеров картинки. Сделать это можно, нажав правую кнопку мышки, затем в появшимся меню "Заменить картинку".

 

 

Удаление виджета

 

Первый способ. Удалить виджет можно из контекстного меню виджета (правая кнопка).

 

Второй способ: нажать кнопку Delete на клавиутуре.

 

 

Установка ссылки

 

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

После чего откроется окно, в котором вы сможете установить ссылку на: внутреннюю страницу сайта, другой файл, внешний сайт, почтовый адрес,Skype или SIP

 

Копировать, вставить, вырезать виджет

 

Первый способ. Данные функции доступны из контекстного меню виджета.

Чтобы вставить скопированный или вырезанный виджет откройте контекстное меню, кликннув правой кнопкой мыши по пустому месту на странице, и выберите "Вставить"

 

Второй способ. Копировать/вставить виджет можно их верхнего меню редактора.

 

Третий способ. Используйте комбинации клавиш на клавиатуре CTRL + C (чтобы скопировать) и CTRL + V (чтобы вставить), CTRL + X (чтобы вырезать).

 

 

Блокировка виджета

 

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

Блокировка доступна из контекстного меню виджета.

 

Заблокированный виджет показывается вот с такой иконкой.

 

Для разблокировки также используйте контекстное меню.

 

Примечание. Заблокированный виджет не выделяется как активный (не показываются маркеры-кружочки), такой виджет нельзя переместить и его нельзя заменить на другую картинку.

 

Управление слойностью (глубиной)

 

Часто возникают ситуации, когда вам нужно показывать один виджет строго над другим. Другими словами, используя терминологию Adobe Photoshop, вам нужно управлять слоями. Вы можете сделать виджет на один слой выше/на один слой ниже, а также поставить его на самых вверх/самый низ. Все это доступно вам также из контекстного меню.

 

К примеру, опустим правую картинку в самый низ.

 

Вот, что получится в результате.

Примечание. Обратите внимание, что маркеры (кружочки) всегда показываются, даже сквозь другие виджетов, если она перекрывают часть виджета. Все это только для вашего удобства!

 

 

Свойства виджета

 

Все остальные свойства виджета находятся в отдельном окне.

 

Вот это окно.

 

Координаты виджета

Вы можете задать вручную координаты виджета. Имейте в виду, что координата Х считается слева направо, а У сверху вниз.

Размер виджета

Вы также имеете возможность ввести размеры виджета с клавиатуры. Если вы хотите отключить сохранение пропорций виджета, то нажмите на иконку с замочком.

 

 

 

Прочие настройки

 

Дополнительные настройки находятся на закладке "Прочин настройки" в свойствах виджета.

 

  1. Изменение цвета виджета

Доступны два варианта: фон и цветовая трансформация. Как видно из названия, изменения фона картинки будут заметны только для .png файлов. Разница между изменением фона и цветовой трансформации особенно хорошо будет заметна для векторных файлов. 

Примечание. Если вы не понимаете разницу между фоном и цветовой трансформацией, то меняйте всегда просто цветовую трансформацию :)

  1. Увеличение по клику

Позволяет открыть изображение в оригинальном размере по клику.

  1. Дублировать при расширении

Еси контейнер, содержащий изображение будет больше размера самого изображения - картинка будет дублироваться.

  1. Выключение виджета

Если вы снимете галочку "Активен"  в свойствах виджета, то данный виджет перестанет показываться при просмотре сайта.

  1. Атрибут ALT

Атрибут тега <IMG> ALT предназначены для более эффективной индексации изображений на вашем сайте.
Атрибут ALT необходим для передачи информации о картинке при отключенных картинках в браузере. Если ALT прописан, то ваши посетители смогут увидеть хотя бы текстовое описание картинки.

 

 

  Скругление углов

 

Вы можете установить скругление углов для любого изображения на вашем сайте. Это можно сделать на закладке “Скругление углов” Свойств виджета.

 

Устанавливать скругление можно в процентах или пикселах.

 

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

Чтобы задать значение используйте кнопки "+" и "-" или просто введите нужную величину в соответствующем поле с помощью клавиатуры.

 

Вы сразу увидите результат.

 

Примечание: если для квадратного изображения установить скругление углов равное 50% вы получите круг.

 

По умолчанию величина скругления изменяется для всех углов. Обратите внимание на схему слева, значения скругления для всех углов одинаковые и все они выделены темно серым.


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


Отредактировать величину скругления можно:

  • • используя кнопки "+" или "-"
  • • введя нужное значение на клавиатуре

 

Примечание: вы можете одновременно изменять скругление нескольких углов 2 или 3. Для этого просто выделите их на схеме. Величина скругления будет изменяться для выбранных углов, выделенных темно серым на схеме, а скругление неактивных углов (светло серых) не измениться.


Чтобы сбросить все настройки скругления нажмите “Очистить”

 

  Настройка границ

 

Помимо непосредственно скругления углов на данной вкладке можно управлять толщиной и цветом границы.
По умолчанию границы нет: 0.

 

Но вы легко можете добавить к любому изображению границу. Для этого:

  • • выберите цвет границы и
  • • установите ее толщину