Лекция 6. SharePoint Designer 2007 как html-редактор
Краткая аннотация (до 255 знаков): В лекции излагаются базовые приемы редактирования статическихHTML-страниц в программе Microsoft Office SharePoint Designer 2007. Рассматриваются вопросы работы с изображениями, стилямиCSS, таблицами, гиперссылками и некоторые другие приемы классического веб-дизайна.
Список ключевых терминов.SharePointDesigner, тег, стили, каскадные таблицы стилей,CSS, клипы, рисунки, изображения.
Цель лекции. Представить программуSharePointDesignerв качестве средства разработкиHTML-страниц, сделав акцент на предусмотренные в ней средства визуального проектирования.
Преамбула
Несмотря на то, что программа SharePointDesigner, в первую очередь, предназначена для редактирования веб-узловSharePoint, ее, тем не менее, довольно удобно использовать в качестве неплохого средства традиционного веб-дизайна. Поэтому посвятим данную главу основам примененияSharePointDesignerдля разработкиHTML- иASPX-страниц, не касаясь особенностей технологииSharePoint, однако, имея в виду, что приведенные в главе сведения пригодятся и при разработке страницSharePoint. Ведь почти все элементы управленияHTML- иASP- допускается размещать на веб-страницах стандартаSharePoint.
При изложении материала в этой главе подразумевается, что читатель владеет самыми основными приемами HTML-дизайна.
Стили
Начнем с неотъемлемого приема современного веб-дизайна, связанного с использованием каскадных таблицстилей.SharePointDesignerобладает развитыми средствами по применению стилей, главным из которых является панельСвойства CSS.
Подключение css-файла
Мы начнем с применения к создаваемым в SharePointDesignerвеб-страницам уже существующей таблицы стилей, которая, возможно, использовалась Вами при проектировании других узлов и хранится в некотором файле с расширением .CSSна Вашем компьютере.
Разместите на экране одновременно окно ПроводникаWindowsиSharePointDesigner(рис. 6.1).
Перетащите файл каскадной таблицы стилей из папки Проводникана панельСписок папок(рис. 6.1)
Рис. 6.1. Перенесите CSS-файл на панельСписок папок
Перетащите CSS-файл из панелиСписок папокна областьКонструктор(рис. 6.2).
Рис. 6.2. Перетащите CSS-файл прямо на областьКонструктор
Оцените результат применения стилей к веб-странице (рис. 6.3).
Откройте область задач Свойства CSS.
На панели Свойства CSSпросмотрите свойства стиля, который определяет форматирование тега, размечающего выделенный объект. В нашем примере это тег <Body>, указанный в спискеПримененные правила(рис. 6.3).
Рис. 6.3. Результат применения таблицы стилей
Отредактировать сам файл, описывающий таблицу стилей(т.е. файл с расширением .CSS), можно непосредственно в SharePoint Designer. Для этого достаточно двойным щелчком открыть его в отдельной вкладке и править, как в обычном текстовом редакторе (рис. 6.4). Второй вариант изменения самих стилей – это выбор желаемого форматирования на панелиСвойства CSS.
Рис. 6.4. Редактирование файла с таблицей стилей
Назначение и редактирование стилей
Для, собственно, назначения существующих стилей CSSслужат области задачПрименение стилейиУправление стилями. Следует отметить, чтокаскадные таблицы стилейподразумевают последовательное применение стилевой разметки, которая может описываться, как в коде самой веб-страницы, так и в обособленныхCSS-файлах, с ней связанных. Кроме того, стили могут использоваться для различных целей: форматирования текста и графики, позиционирования объектов на веб-странице и т.д. Принцип каскадного назначения стилей иллюстрируется рис. 6.5. Как видно из панелиПрименение стиля, стили, назначенные выделенному фрагменту на веб-странице, имеют выделяются обрамлением.
Рис. 6.5. Каскадное применение стилей
Для того, чтобы применить к выделенному фрагменту какой-либо стиль, достаточно щелкнуть по имени этого стиля на панели Применение стиля(рис. 6.6).
Рис. 6.6. Назначение стиля посредством панели Применение стиля
Обратите внимание на атрибутclassтега<div> (или другого тега), который, собственно, и определяет, каким стилем размечен фрагмент веб-страницы (рис. 6.6). На рис.6.7 приведена сводка элементов интерфейсаSharePointDesigner, на которых отображаются название и свойства стиля, назначенного выделению. Таким образом, пользователь имеет определенную свободу в выборе панелей, которые он будет применять для настройки стилейCSS.
Рис. 6.7. Сводка мест отображения назначенного стиля
Помимо панели Применение стиля, для назначения и редактирования стилей может применяться и панельУправление стилями(рис. 6.8).
Примечание:Вопросам применения стилей вSharePointDesignerпосвящена лабораторная работа 6.1.
Рис. 6.8.
Использование панели Управление
стилями
В частности, вызывая из области названия некоторого стиля контекстное меню и выбирая в нем пункт Изменить стиль, Вы получаете доступ к редактированию параметров данного стиля в диалоговом окне (рис. 6.9). Выбор командыПерейти к кодуоткрывает фрагмент кода выбранного стиля в отдельной вкладке (см. рис. 6.4).
Рис. 6.9. Настройка стиля