Графика
Для вставки рисункана веб-страницу предусмотрено несколько различных способов. Например, командаВставка / Рисунок / Из файла, либо нажатие одноименной кнопки на панели инструментов. Далее в диалоговом окнеРисунокследует отыскать нужный файл и, выделив его, нажать кнопкуВставить. Если по каким-то причинам желательно сначала вставить тег <img>, а уже затем определить местонахождение файла с рисунком, то достаточно перетащить элементРисунок из спискаТегинаПанели элементовна документ (рис. 6.10).
Рис. 6.10. Вставка пустого тега рисунка
Затем, для того, чтобы выбрать файл с рисунком, следует либо дважды щелкнуть на рисунке в области Конструктор, либо ввести командуСвойства рисункапосредством контекстного меню (рис. 6.11), а затем в диалогеСвойства рисункаопределить основные параметры тега <img> (рис. 6.12).
Рис. 6.11. Вызов диалога Свойства рисунка
Рис. 6.12. Диалоговое окно Свойства рисунка
Диалоговое окно Свойства рисункаимеет две вкладки:Общие(рис. 6.12) иВид (рис. 6.13). На вкладкеВид задаются опции обтекания рисунка текстом и положение рисунка на странице.
Рис. 6.13. Дополнительные опции редактирования рисунка
Применение различного форматирования к рисунку, например, при выборе некоторых параметров на вкладке Видв диалогеСвойства рисунка, реализуется путем создания соответствующего класса стилевой разметки. Как правило, большая часть форматирования графики (за исключением задания ширины и высоты изображения) не записывается непосредственно в атрибуты тега <img>, а оформляется в виде ссылки на соответствующий класс стилевой разметки. Например, на рис. 6.14 на панелиСвойства CSSпоказано определение CSS-класса style1, который был создан SharePoint Designer автоматически. Этот стиль применяется только для одного рисунка и является внедренным, т.е. хранится непосредственно в коде веб-страницы в пределах тега <head>.
Рис. 6.14. Форматирование рисунка реализуется посредством новых стилей CSS
По мере импорта новых рисунков и их сопутствующего форматирования, создаваемые автоматически стили добавляются в код веб-страницы и становятся доступными для применения к другим рисункам.
В заключение опишем еще один, наиболее простой, способ вставки рисунка на веб-страницу.
Выделите файл с рисунком на панели Список папок.
Перетащите файл в нужное место веб-страницы (рис. 6.15).
При желании отформатируйте рисунок, который тут же появится на странице (рис. 6.16).
Рис. 6.15. Вставка рисунка из файла
Рис. 6.16. Вставленный рисунок на веб-странице
Быстрое редактирование графики средствами SharePoint Designer
Применить несложное редактирование путем модификации самого содержимого графического файла можно не только посредством графических редакторов, но и непосредственно в пределах SharePoint Designer, при помощи панели инструментов Рисунки (рис. 6.17). Эта панель позволяет вставить рисунки из файла, дублируя возможности стандартной панели инструментов, а также позволяет применить характерное форматирование рисунков, перезаписав информацию в соответствующий файл. Для ее вызова на экран достаточно ввести команду Вид / Панели инструментов / Рисунки.
Рис. 6.17. Отражение рисунка
Например, если Вы хотите отразить рисунок слева направо или сверху-вниз, то следует, выделив его, нажать соответствующую кнопку на панели Рисунки. Результат отражения можно оценить по рис. 6.18.
Примечание:До момента сохранения веб-страницы, содержимое файла с рисунком будет оставаться неизменным. В момент сохранения SharePoint Designer потребует подтвердить намерение перезаписать графический файл.
Рис. 6.18. Перекрашивание рисунка
Коротко остановимся на назначении различных кнопок на панели инструментов Рисунки. КнопкиПереместить впередиПереместить назадуправляют месторасположением изображения относительно других элементов. Контрастность и яркость регулируется кнопкамиУвеличениеконтрастности,Уменьшение контрастности,УвеличениеяркостииУменьшение яркостисоответственно. КнопкаОбрезкапозволяет обрезать рисунок с разных сторон. При этом внутри рисунка появляется дополнительные маркеры обрамления, служащие для вырезания из рисунка нужного фрагмента.
Кнопка Установить прозрачный цветприменяется, когда нужно показать рисунок с необычным контуром, который не имеет прямых границ и залит по этому контуру однотонным цветом. КнопкаЦветпозволяет перекрасить рисунок в оттенки серого или размыть рисунок (как это показано на рис. 6.18). ОперацияСокращение цветовприменяется, чаще всего, для повышения четкости рисунка, который был увеличен или сжат. КнопкаБагетная рамкасоздает характерный эффект выпуклого обрамления рисунка.
Если в какой-либо из моментов работы отредактированный вид рисунка перестает Вас устраивать, то вернуться к прежнему его состоянию (из текущего содержимого файла) можно нажатием кнопки Восстановить (рис. 6.19).
Примечание:Остальные кнопки (с контурами графических примитивов) служат для разметкикарт-изображений.
Рис. 6.19.
Восстановление первоначального вида
рисунка