SharePoint
Designer 2007 как HTML-редактор
Несмотря на то, что программа SharePoint Designer, в первую очередь, предназначена для редактирования веб-узлов SharePoint, ее, тем не менее, довольно удобно использовать в качестве неплохого средства традиционного веб-дизайна. Поэтому посвятим данную главу основам применения SharePoint Designer для разработки HTML- и ASPX-страниц, не касаясь особенностей технологии SharePoint, однако, имея в виду, что приведенные в главе сведения пригодятся и при разработке страниц SharePoint. Ведь почти все элементы управления HTML- и ASP- допускается размещать на веб-страницах стандарта SharePoint.
При изложении материала в этой главе подразумевается, что читатель владеет самыми основными приемами HTML-дизайна.
Стили
Начнем с неотъемлемого приема современного веб-дизайна, связанного с использованием каскадных таблиц стилей. SharePoint Designer обладает развитыми средствами по применению стилей, главным из которых является панель Свойства CSS.
Подключение CSS-файла
Мы начнем с применения к создаваемым в SharePoint Designer веб-страницам уже существующей таблицы стилей, которая, возможно, использовалась Вами при проектировании других узлов и хранится в некотором файле с расширением .CSS на Вашем компьютере.
- Разместите на экране одновременно окно Проводника Windows и SharePoint Designer (рис. 1).
- Перетащите файл каскадной таблицы стилей из папки Проводника на панель Список папок (рис. 1)
Рис. 1. Перенесите
CSS-файл на панель Список папок
- Перетащите CSS-файл из панели Список папок на область Конструктор (рис. 2).
Рис. 2. Перетащите
CSS-файл прямо на область Конструктор
- Оцените результат применения стилей к веб-странице (рис. 3).
- Откройте область задач Свойства CSS.
- На панели Свойства CSS просмотрите свойства стиля, который определяет форматирование тега, размечающего выделенный объект. В нашем примере это тег <Body>, указанный в списке Примененные правила (рис. 3).
Рис. 3. Результат
применения таблицы стилей
Отредактировать сам файл, описывающий таблицу стилей (т.е. файл с расширением .CSS), можно непосредственно в SharePoint Designer. Для этого достаточно двойным щелчком открыть его в отдельной вкладке и править, как в обычном текстовом редакторе (рис. 4). Второй вариант изменения самих стилей – это выбор желаемого форматирования на панели Свойства CSS.
Рис. 4. Редактирование
файла с таблицей стилей
Назначение и редактирование стилей
Для, собственно, назначения существующих стилей CSS служат области задач Применение стилей и Управление стилями. Следует отметить, что каскадные таблицы стилей подразумевают последовательное применение стилевой разметки, которая может описываться, как в коде самой веб-страницы, так и в обособленных CSS-файлах, с ней связанных. Кроме того, стили могут использоваться для различных целей: форматирования текста и графики, позиционирования объектов на веб-странице и т.д. Принцип каскадного назначения стилей иллюстрируется рис. 5. Как видно из панели Применение стиля, стили, назначенные выделенному фрагменту на веб-странице, имеют выделяются обрамлением.
Рис. 5. Каскадное
применение стилей
Для того, чтобы применить к выделенному фрагменту какой-либо стиль, достаточно щелкнуть по имени этого стиля на панели Применение стиля (рис. 6).
Рис.6. Назначение стиля
посредством панели Применение стиля
Обратите внимание на атрибут class тега <div> (или другого тега), который, собственно, и определяет, каким стилем размечен фрагмент веб-страницы (рис. 6). На рис.7 приведена сводка элементов интерфейса SharePoint Designer, на которых отображаются название и свойства стиля, назначенного выделению. Таким образом, пользователь имеет определенную свободу в выборе панелей, которые он будет применять для настройки стилей CSS.
Рис. 7. Сводка мест
отображения назначенного стиля
Помимо панели Применение стиля, для назначения и редактирования стилей может применяться и панель Управление стилями (рис. 8).
Примечание: Вопросам применения стилей в SharePoint Designer посвящена лабораторная работа 1.
Рис. 8. Использование
панели Управление стилями
В частности, вызывая из области названия некоторого стиля контекстное меню и выбирая в нем пункт Изменить стиль, Вы получаете доступ к редактированию параметров данного стиля в диалоговом окне (рис. 9). Выбор команды Перейти к коду открывает фрагмент кода выбранного стиля в отдельной вкладке (см. рис. 4).
Рис. 9. Настройка стиля
Графика
Для вставки рисунка на веб-страницу предусмотрено несколько различных способов. Например, команда Вставка / Рисунок / Из файла, либо нажатие одноименной кнопки на панели инструментов. Далее в диалоговом окне Рисунок следует отыскать нужный файл и, выделив его, нажать кнопку Вставить. Если по каким-то причинам желательно сначала вставить тег <img>, а уже затем определить местонахождение файла с рисунком, то достаточно перетащить элемент Рисунок из списка Теги на Панели элементов на документ (рис. 10).
Рис. 10. Вставка пустого
тега рисунка
Затем, для того, чтобы выбрать файл с рисунком, следует либо дважды щелкнуть на рисунке в области Конструктор, либо ввести команду Свойства рисунка посредством контекстного меню (рис. 11), а затем в диалоге Свойства рисунка определить основные параметры тега <img> (рис. 12).
Рис. 11. Вызов диалога
Свойства рисунка
Рис. 12. Диалоговое окно
Свойства рисунка
Диалоговое окно Свойства рисунка имеет две вкладки: Общие (рис. 12) и Вид (рис. 13). На вкладке Вид задаются опции обтекания рисунка текстом и положение рисунка на странице.
Рис. 13. Дополнительные
опции редактирования рисунка
Применение различного форматирования к рисунку, например, при выборе некоторых параметров на вкладке Вид в диалоге Свойства рисунка, реализуется путем создания соответствующего класса стилевой разметки. Как правило, большая часть форматирования графики (за исключением задания ширины и высоты изображения) не записывается непосредственно в атрибуты тега <img>, а оформляется в виде ссылки на соответствующий класс стилевой разметки. Например, на рис. 14 на панели Свойства CSS показано определение CSS-класса style1, который был создан SharePoint Designer автоматически. Этот стиль применяется только для одного рисунка и является внедренным, т.е. хранится непосредственно в коде веб-страницы в пределах тега <head>.
Рис. 14. Форматирование
рисунка реализуется посредством новых стилей CSS
По мере импорта новых рисунков и их сопутствующего форматирования, создаваемые автоматически стили добавляются в код веб-страницы и становятся доступными для применения к другим рисункам.
В заключение опишем еще один, наиболее простой, способ вставки рисунка на веб-страницу.
- Выделите файл с рисунком на панели Список папок.
- Перетащите файл в нужное место веб-страницы (рис. 15).
- При желании отформатируйте рисунок, который тут же появится на странице (рис. 16).
Рис. 15. Вставка рисунка
из файла
Рис. 16. Вставленный
рисунок на веб-странице
Быстрое редактирование графики средствами SharePoint
Designer
Применить несложное редактирование путем модификации самого содержимого графического файла можно не только посредством графических редакторов, но и непосредственно в пределах SharePoint Designer, при помощи панели инструментов Рисунки (рис. 17). Эта панель позволяет вставить рисунки из файла, дублируя возможности стандартной панели инструментов, а также позволяет применить характерное форматирование рисунков, перезаписав информацию в соответствующий файл. Для ее вызова на экран достаточно ввести команду Вид / Панели инструментов / Рисунки.
Рис. 17. Отражение
рисунка
Например, если Вы хотите отразить рисунок слева направо или сверху-вниз, то следует, выделив его, нажать соответствующую кнопку на панели Рисунки. Результат отражения можно оценить по рис. 18.
Примечание: До момента сохранения веб-страницы, содержимое файла с рисунком будет оставаться неизменным. В момент сохранения SharePoint Designer потребует подтвердить намерение перезаписать графический файл.
Рис. 18. Перекрашивание
рисунка
Коротко остановимся на назначении различных кнопок на панели инструментов Рисунки. Кнопки Переместить вперед и Переместить назад управляют месторасположением изображения относительно других элементов. Контрастность и яркость регулируется кнопками Увеличение контрастности, Уменьшение контрастности, Увеличение яркости и Уменьшение яркости соответственно. Кнопка Обрезка позволяет обрезать рисунок с разных сторон. При этом внутри рисунка появляется дополнительные маркеры обрамления, служащие для вырезания из рисунка нужного фрагмента.
Кнопка Установить прозрачный цвет применяется, когда нужно показать рисунок с необычным контуром, который не имеет прямых границ и залит по этому контуру однотонным цветом. Кнопка Цвет позволяет перекрасить рисунок в оттенки серого или размыть рисунок (как это показано на рис. 18). Операция Сокращение цветов применяется, чаще всего, для повышения четкости рисунка, который был увеличен или сжат. Кнопка Багетная рамка создает характерный эффект выпуклого обрамления рисунка.
Если в какой-либо из моментов работы отредактированный вид рисунка перестает Вас устраивать, то вернуться к прежнему его состоянию (из текущего содержимого файла) можно нажатием кнопки Восстановить (рис. 19).
Примечание: Остальные кнопки (с контурами графических примитивов) служат для разметки карт-изображений.
Рис. 19. Восстановление
первоначального вида рисунка
Гиперссылки
Гиперссылки в SharePoint Designer вставляются на веб-страницы стандартным способом, принятым и в других программах пакета Microsoft Office. Достаточно выделить фрагмент текста на веб-странице, нажать кнопку Вставить гиперссылку (рис. 20), а затем выбрать файл, на который будет ссылаться гиперссылка, в диалоговом окне Вставка гиперссылки.
Рис. 20. Нажмите кнопку
Вставить гиперссылку
Таблицы
Поскольку веб-узлы SharePoint построены на основе концепции табличного дизайна, программа SharePoint Designer имеет довольно развитые средства по работе с таблицами. В частности, для создания табличного макета веб-страницы служит область задач Макетные таблицы (рис. 21). Достаточно выбрать один из предлагаемых макетов и щелкнуть ссылку Вставить макетную таблицу, чтобы добавить готовую макетную таблицу на веб-страницу.
Примечание: Для отмены макета таблицы надо выбрать пиктограмму Без макета.
Рис. 21. Создание
макетной таблицы
Альтернативный способ создания макетной таблицы – это рисование ее вручную, при помощи кнопок Нарисовать макетную таблицу и Нарисовать макетную ячейку. Если Вы уже имеете введенный на страницу текст, то легко преобразовать его в таблицу посредством команды Преобразовать / Текст в таблицу. Одна макетная таблица может быть вставлена вставлена внутрь другой макетной таблицы. Если поместить указатель мыши в пределах одной из таблиц и выбрать команду Выделить таблицу, то выделена будет нужная таблица.
Для настройки размеров столбцов и строк следует перетаскивать границы макета таблицы в ту или иную сторону, ориентируясь на параметры макета таблицы, отображаемые на веб-странице, если в области задач Макетные таблицы включена опция Показать параметры макета (рис. 22). При включенных параметрах макета возле каждой границы таблицы приводится ширина столбца или высота строки. Для того, чтобы изменить эти параметры, достаточно щелкнуть по ссылке и выбрать команду Изменить ширину столбца или Изменить высоту строки.
Рис. 22. Редактирование
макета таблицы
В верхнем меню Таблица, а также в контекстном меню и на панели инструментов Таблицы, имеется полный набор команд, позволяющих вставить новые или удалить существующие строки, столбы и ячейки, разбить одну ячейку на несколько или осуществить слияние ячеек.
Для выбора параметров таблиц используются два диалоговых окна Свойства таблицы и Свойства ячейки. В диалоге Свойства таблицы можно определить стиль границ таблицы, выравнивание и обтекание для таблицы, в целом, а также ее фон. Например, флажок Использовать фоновый рисунок позволяет определить в качестве фона таблицы какое-либо из изображений из файла.
Диалог Свойства ячейки позволяет определить тип выравнивания по осям Х и Y, выбрать размер и цвет для границ отдельной ячейки, а также настроить желаемым образом ее фон (который будет, накладываясь на фон всей таблицы, целиком его заслонять). Флажок Ячейка заголовка применяет к выделенным ячейкам атрибут разметки этих ячеек как заголовка таблицы. Заголовок таблицы размечается другим тегом, в чем несложно убедиться, просматривая код страницы.