Общий вид веб-страницы в SharePoint Designer
Программа Microsoft Office SharePoint Designer, в первую очередь, предназначена для разработки веб-узлов, построенных на технологии SharePoint. В отличие от небогатого набора методов редактирования узлов SharePoint в браузере, SharePoint Designer дает возможность гибкого и удобного управления практически всем спектром свойств веб-страниц. Существенно, что в подавляющем большинстве случаев (по крайней мере, в рамках нашего курса) пользователю не придется обращаться к HTML-коду, ограничиваясь для разработки веб-страниц режимом Конструктор.
Учитывая, что приемы работы с веб-узлами и проектирования HTML- и ASP-страниц были представлены в предыдущих лекциях и полностью применимы и для SharePoint-узлов, мы сосредоточимся в этой и двух следующих лекциях на специфических методах управления узла SharePoint.
Будем изучать вопросы редактирования веб-страниц SharePoint на примере того же самого веб-узла "Рога и Копыта", который был нами создан ранее средствами браузера. После его открытия в SharePoint Designer (в ходе которого необходимо будет пройти процедуру авторизации, подписавшись учетной записью Бендер, т.е. владельца узла), в пределах основной панели мы будем наблюдать файловую структуру веб-сайта, идентичную содержимому панели Список папок (рис. 7.1).
(рис 7.1) Веб-узел открыт в программе SharePoint DesignerПерейдем к правке домашней страницы узла.
Щелкните дважды по имени домашней страницы default.aspx в списке папок (рис. 7.1).
После открытия домашней страницы в отдельной вкладке (рис. 7.2) поэкспериментируйте с ее содержимым, наводя указатель на различные ее элементы и щелчком выделяя их.
(рис 7.2) Домашняя страница открыта для редактированияСкорее всего (это зависит от того, включен или нет режим визуальных подсказок ), некоторые элементы будут сопровождаться полупрозрачным текстом-подсказкой, который, возможно, будет Вам на первых порах мешать их восприятию. Кроме того, при наведении указателя на отдельные элементы (например, логотип), он будет менять свой вид на запрещающий значок, говоря о невозможности редактирования элемента под указателем. Это связано с тем, что, вообще говоря, веб-страница стандарта SharePoint, формируется путем слияния, как минимум, двух веб-страниц:
мастер-страницы (или, по-другому, главной страницы узла) – страницы-шаблона, включающей общие элементы для всех страниц узла SharePoint
страницы содержимого (контента) – собственно говоря, содержащей уникальное наполнение страницы, отличающее ее от других страниц узла.
Большинство элементов, которые сопровождаются полупрозрачными метками, как раз и приходят не со страницы содержимого (в данном случае, домашней страницы веб-узла default.aspx), а приходят с шаблонной мастер-страницы. Для того, чтобы отключить отображение этих меток, выберите в верхнем меню Вид пункт Визуальные подсказки и отключите в нем опцию Показать (рис. 7.3). После этого ориентироваться в содержимом страницы станет проще.
(рис 7.3) Отключите режим визуальных подсказокВыделение содержимого на веб-странице
(рис 7.4) Для того, чтобы выделить конкретный элемент веб-страницы, достаточно щелкнуть по нему (рис. 7.4). Вообще говоря, для выделения веб-страниц в SharePoint Designer предусмотрено несколько способов:
мышью в области Конструктор (или Код );
щелчком по тегу на панели доступа к тегу, расположенной под закладкой страницы (для элементов, настраиваемых на самой aspx-странице);
при помощи панели инструментов Главная страница (для элементов, приходящих с мастер-страниц ).
При наведении указателя мыши на тот или иной элемент очереди тегов на самой странице в области Конструктор происходит виртуальное выделение рамкой соответствующего элемента. Например, наведение указателя мыши на тег, реализующий зону веб-частей, приводит в области Конструктор к обрамлению этой зоны (рис. 7.5), а наведение указателя на теги <td> и <tr> – к обрамлению, соответственно, ячейки (рис. 7.6) и строки таблицы.
Примечание. Наводя указатель на различные теги, Вы без труда обнаружите, что выделяете соответствующие элементы таблиц, причем, вложенных вдруг в друга. Таким образом, веб-сайты SharePoint организованы при помощи табличного дизайна и макетных таблиц.
(рис 7.6) Выделение зоны веб-частей(рис 7.5) Выделение ячейки таблицы макетаЭлементы, приходящие на страницы содержимого с главных страниц, не сопровождаются индикацией последовательности тегов на панели доступа к тегу. Поэтому для облегчения их поиска и выделения предусмотрена специальная панель инструментов Главная страница. Вызвать ее легко вводом команды Вид / Панели инструментов / Главная страница. Панель инструментов Главная страница содержит раскрывающийся список, позволяющий выбрать по названию любой из элементов, приходящих с мастер-страницы (рис. 7.7). Выбор элемента тут же выделяет его, как в области Конструктор, так и в области Код.
(рис 7.7) Выделение элементов главной страницы
Веб-части
Отложив разговор о настройке элементов управления, приходящих с главных страниц до следующего раздела (а редактирование самих главных страниц – до следующей главы), сосредоточимся на редактировании уникального содержимого aspx-страницы. Для этого разберем специфическое наполнение домашней страницы default.aspx, ограниченное правой нижней половиной площади страницы (т. е. за исключением верхней и левой панелей навигации, определяемых мастер-страницей ).
Встраивание веб-частей на aspx-страницы
Как мы уже знаем, типичная страница веб-узла SharePoint формируется при помощи веб-частей, способных изменять содержимое по желанию зрителя страницы в браузере. На основе настройки веб-частей организовано редактирование веб-страниц и в SharePoint Designer. Как несложно заметить (рис. 7.8), страница default.aspx содержит две зоны веб-частей: они визуализируются рамками с метками, расположенными по центру верхней границы, и носят название Left (Левая) и Right (Правая).
Веб-части SharePoint идентифицируются в коде веб-страницы тегом вида <WebPartPages: тип_ веб-части >. Например, выделенная на рис. 7.4 веб-часть списка задается тегом <WebPartPages: ListViewWebPart>, веб-часть поддержки изображений на рис. 7.8 – тегом <WebPartPages: ImageWebPart> и т.д. Существенно, что, несмотря на то, что технология веб-частей встроена в ASP.NET 2.0, службы SharePoint используют свой набор веб-частей, и на одной веб-странице не допускается смешивать веб-части ASP.NET и SharePoint.
Как можно убедиться, рассматривая рис. 7.8, веб-части объединены в зоны веб-частей, а зоны, в свою очередь, встроены в ячейки макетной таблицы. Сама таблица находится в пределах настраиваемого элемента PlaceHolderMain (главный местозаполнитель), разметка которого приходит с главной страницы, но само наполнение формируется на странице содержимого (в данном случае, default.aspx).
(рис 7.8) Переход к редактированию веб-части
Настройка веб-частей и зон
Выделяя ту или иную веб-часть, мы имеем возможность редактирования, как этой веб-части, так и содержащей ее зоны. Настройка веб-частей и зон организована в SharePoint Designer при помощи тех же самых панелей параметров, что и в браузере (см. лекцию 3). Для их вызова проделайте следующее.
Щелкните правой кнопкой мыши по веб-части
Выберите в контекстном меню (рис. 7.8) команду Свойства веб-части или Свойства зоны веб-частей (для настройки самой веб-частей или содержащей ее зоны соответственно).
(рис 7.9) Настройка общих параметров веб-частиВ результате будет открыта панель настройки веб-части, та же самая, что и при работе в браузере (рис. 7.9). В частности, она будет содержать общие категории параметров Вид (рис. 7.9), Макет и Дополнительно, а также специфические параметры, расположенные в верхней части панели. Например, веб-часть поддержки изображений (рис. 7.10) (определяемая тегом <WebPartPages: ImageWebPart>) содержит категорию Рисунок, предназначенную для определения исходного графического файла с рисунком, текста всплывающей подсказки и опций выравнивания.
(рис 7.10) Настройка специфических параметров веб-частиПанели для отдельных типов веб-частей могут и не содержать специфических параметров, как например веб-часть поддержки списка ListViewWebPart. Между тем, для списков предусмотрены дополнительные настройки, доступные из меню списка, которое вызывается щелчком по пиктограмме в левом верхнем углу веб-части (рис. 7.11).
(рис 7.11) Переход к редактированию вида веб-части списка
Для выбора отображаемых на веб-странице полей списка (т. е. его столбцов) достаточно ввести команду Поля (рис. 7.11), а затем выбрать из левого перечня доступных полей те, которые следует показывать на веб-странице в данном представлении веб-части. Эта операция осуществляется нажатием кнопки Добавить, находящейся в середине диалога Отображаемые поля (рис. 7.12).
Примечание. То, как будет выглядеть список Извещения с набором полей, определенным на рис. 7.12, показано на рис. 7.13.
(рис 7.13) Настройка отображаемых полей для веб-части списка(рис 7.12) Список с измененным набором полейДля того, чтобы задать представление списка на веб-странице, следует в его меню выбрать пункт Изменить макет (рис. 7.11). В результате открывается диалоговое окно Параметры представления списка, которое содержит несколько вкладок и служит для выбора следующих настроек (рис. 7.14):
Общие – для задания вида панели инструментов и колонтитулов списка;
Макет – для выбора обычного или табличного представления списка, а также определения макета отображения его элементов
Разбиение по страницам – для выбора количества элементов на каждой странице списка
Изменения – для определения опций внесения изменений в список участниками рабочей группы.
(рис 7.14) Настройка представления спискаЕсли в меню списка, либо контекстном меню, вызываемом на веб-части, выбрать команду Свойства зоны веб-частей, то в одноименном диалоговом окне открывается доступ к редактированию основных параметров выбранной зоны. В частности, разрешается поменять название зоны, тип рамки обрамления, способ ее компоновки (вдоль горизонтали или вертикали) и опции доступа ее веб-частей в обозревателе (рис. 7.15). Выбор флажков проверки в нижней части диалога Свойства зоны веб-частей разрешает или запрещает участникам рабочей группы настраивать параметры веб-частей зоны как для общего, так и для личного пользования.
(рис 7.15) Настройка зоны веб-частей
Удаление веб-частей и зон
Для удаления веб-части, или целой зоны веб-частей, достаточно выделить ее, а затем нажать на клавиатуре клавишу Delete. В результате веб-часть или зона пропадет со страницы (рис. 7.16). Напомним, что для точного выделения нужного объекта удобно использовать панель доступа к тегу, расположенную под закладкой веб-страницы.
(рис 7.16) Удаление веб-части
Добавление веб-частей на страницу
Операция добавления веб-частей в SharePoint Designer также аналогична работе в браузере и происходит при помощи области задач Веб-части, которая содержит список веб-частей, входящих в коллекцию узла (рис. 7.17). Для ее вызова на экран достаточно выполнить команду Области задач / Веб-части. Если все веб-части, имеющиеся на узле, не помещаются в список, то для перехода к остальным веб-частям достаточно щелкнуть кнопку Далее.
(рис 7.17) Вставка веб-части на страницуДля вставки веб-части достаточно выделить ее на панели Веб-части и перетащить в нужное место страницы. Если Вы хотите расположить веб-часть в пределах зоны веб-частей, то перетаскивать ее необходимо на соответствующую зону. Более надежный способ вставки веб-части в нужное место следующий.
Установите курсор ввода в нужное место страницы (при необходимости пользуйтесь панелью выбора тегов или представлением Код веб-страницы).
Выделите желаемую веб-часть на панели Веб-части.
На панели Веб-части нажмите кнопку Вставить веб-часть.
Внимание! Если вы хотите добавить веб-часть на страницу и запретить ее последующее редактирование в браузере, то ее следует располагать за пределами зон веб-частей. Такие веб-части будут храниться непосредственно на aspx-cтраницах, в то время, как веб-части, расположенные в зонах, хранятся в базе данных содержимого в службах SharePoint. Подробному изучению этих правил посвящена лаб. работа 7.1.
Добавление зон веб-частей
Для вставки на страницу новой зоны веб-частей проделайте следующее.
Установите курсор ввода в то место, где Вы хотите расположить новую зону.
На панели Веб-части нажмите кнопку Создать зону веб-частей (рис. 7.18).
(рис 7.18) Вставка зоны веб-частейВ результате на веб-странице возникнет новая зона веб-частей (рис. 7.19). В дальнейшем ее можно отредактировать, вызывая диалоговое окно Свойства зоны веб-частей и добавляя в нее новые веб-части (как при помощи панели Веб-части, так и путем перетаскивания существующих веб-частей между зонами).
(рис 7.19) Новая зона веб-частей на странице
Обычные элементы веб-дизайна
Помимо веб-частей, веб-страницы SharePoint могут включать обычные элементы веб-дизайна: текст, рисунки, таблицы и т.д. Приемы из редактирования в SharePoint Designer полностью аналогичны рассмотренным в предыдущих главах (см. лекции 5 и 6), поэтому мы ограничимся простым примером добавления текста (с информацией об авторских правах) на домашнюю страницу узла.
Щелкните на веб-странице в том месте, куда Вы хотите вставить новый элемент (например, за пределы зоны веб-частей в ее нижнюю часть).
Введите с клавиатуры желаемый текст (рис. 7.20).
При желании отформатируйте его, применяя панель инструментов Форматирование и область задач Изменение стиля.
Сохраните веб-страницу, возможно, подтвердив намерение сохранить ее в диалоговом окне-предупреждении.
Запустите предварительный просмотр веб-страницы в браузере.
Убедитесь в том, что введенный текст присутствует на веб-странице.
(рис 7.20) Вставьте текст на веб-страницу
Элементы главных страниц
Как было отмечено выше, веб-страница SharePoint, которую мы наблюдаем в браузере, формируется благодаря слиянию главных
(или мастер-страниц ), т.е. шаблонов, которые включают основные элементы для всех страниц узла SharePoint, а также страниц содержимого. Главные страницы задают общий макет и области перехода, а также общее содержимое для aspx-страниц. То наполнение aspx-страницы, которое мы наблюдаем в области конструктора SharePoint Designer, является комбинацией элементов с главных страниц и элементов, расположенных непосредственно на странице содержимого.
Редактирование элементов, приходящих с главной страницы, невозможно на странице содержимого (рис. 7.21). Тем не менее, имеется возможность выделения элементов, которые приходят с главной страницы и называются прототипами содержимого (подробнее см. следующую лекцию). Например, при выделении имени узла на aspx-странице мы будем наблюдать его название PlaceHolderSiteName (дословно – местозаполнитель имени сайта).
(рис 7.21) Элементы главных страниц нельзя редактировать на aspx-страницеОтсоединение элемента aspx-страницы от главной страницы
Несмотря на недоступность, собственно, элементов главных страниц на aspx-странице (например, на домашней странице узла, как это показано на рис. 7.21), их разрешается заменять пользовательским содержимым, используя, фактически, как шаблоны для содержимого aspx-страницы. Для получения доступа к наполнению элемента следует отсоединить его от главной страницы. Для этого достаточно щелкнуть по кнопке вызова меню Общие задачи содержимого (рис. 7.22) и выбрать единственную команду Создать специальное содержимое.
(рис 7.22) Отсоединение элемента от главной страницыВ результате элемент на aspx-странице станет доступным для редактирования, о чем будет свидетельствовать идентификатор (настройка) на вкладке элемента (рис. 7.23). Теперь данный элемент будет задаваться непосредственно в коде aspx-страницы, а не приходить с мастер-страницы. В качестве примера выделим элемент PlaceHolderSiteName, нажмем клавишу Delete и заменим его содержимое другим текстом (рис. 7.23).
(рис 7.23) Редактирование настроенного элемента от главной страницыДля того, чтобы отменить настройку и вернуться к заданию элемента на главной странице достаточно повторно воспользоваться меню Общие задачи содержимого, выбрать в нем пункт Значение по умолчанию для содержимого мастера (рис. 7.24).
(рис 7.24) Возврат настроенного элемента к определению главной страницыИтак, на aspx-страницах могут отображаться:
элементы aspx-страницы;
элементы управления прототипом содержимого, которые приходят с главной страницы и допускают отображение изменяемого содержимого главной страницы ;
неизменяемые элементы, которые также приходят с главной страницы, но не являются прототипами содержимого (например, логотип сайта).
Возврат веб-страницы к определению узла
Настройка веб-страниц, осуществляемая в браузере, сохраняется в виде резервной копии во внутренней базе данных SharePoint. Поэтому, если на каком-либо этапе редактирования этой страницы в SharePoint Designer Вы посчитаете, что вам лучше вернуться к ее прежнему виду, то достаточно вызвать контекстное меню из области имени страницы на панели Список папок и в меню выбрать пункт Возврат к определению узла (рис. 7.25). Подтвердив затем намерение возвратиться к прежнему состоянию страницы в диалоге-предупреждении, Вы вернете ее к виду, определенному на веб-узле.
Примечание. Вообще говоря, на панели Список папок приводится следующая информация:
Пиктограмма с символом i слева от домашней страницы в списке папок говорит о том, что страница претерпела изменения по сравнению с определением узла.
Изображение карандаша на пиктограмме страницы свидетельствует о редактировании данной страницы в текущий момент в SharePoint Designer
(рис 7.25) Возврат страницы к определению узлаЛабораторные работы
Лабораторная работа 7.1. Добавление веб-частей в зоны и за пределы зон
Рассмотрим, как в SharePoint Designer можно добавлять веб-части на страницы в пределы и за пределы существующих зон и изучим, как они ведут себя при редактировании в браузере.
Откройте область задач Веб-части.
Нажмите на ней кнопку (рис 7.26) Перейдите к области задач Веб-части
Выделите какую-либо веб-часть, например, Общие фотографии.
Перетащите веб-часть с панели (рис 7.27) Вставьте веб-часть в одну из зон
Выделите другую веб-часть, например, Извещения и перетащите ее с панели Веб-части на страницу, расположив за пределами зон веб-частей (рис. 7.28). Таким образом, одна из новых веб-частей находится в пределах правой зоны, а другая – вовсе за пределами зон.
Сохраните веб-страницу и начните ее просмотр в браузере.
(рис 7.28) Вставьте другую веб-часть вне зон веб-частей
Работая в браузере, добавьте элемент в список Извещения, чтобы убедиться, что обе веб-части Извещения работают одинаково.
Обратите внимание на отображение одних и тех же данных в двух списках (рис 7.29) Осуществите предварительный просмотр веб-страницы в браузере
Раскройте меню (рис 7.30) Перейдите в режим редактирования веб-страницы
Перейдите к редактированию веб-части Общие фотографии.
Убедитесь, что эту веб-часть, как и другие веб-части в пределах зон, можно настраивать в браузере.
Обратите внимание на другую веб-часть Извещения (1), вставленную за пределы зон и потому недоступную для настройки в браузере (рис. 7.31).
Итак, веб-части, расположенные вне зон, разрешается использовать обычным образом в режиме участника, но не разрешается настраивать в браузере.
(рис 7.31) Веб-части за пределами зон недоступны для настройки в браузере
Лабораторная работа 7.2. Настройка веб-части списка
Это упражнение призвано дать читателю навыки в редактировании списков в SharePoint Designer и убедиться в том, что их настройка полностью аналогична соответствующим действиям, осуществляемым в браузере.
Дважды щелкните на желаемом списке (например, Извещения ).
На панели настройки списка раскройте категорию Вид (рис. 7.32).
В меню (рис 7.32) Измените тип хрома списка
Перейдите к редактированию параметров другого списка, например, Календарь, и выберите для него в меню Тип хрома пункт Заголовок и граница.
Перейдите к редактированию параметров веб-части поддержки изображений и раскройте для нее категорию Макет (рис. 7.33).
Установите флажок проверки (рис 7.33) Скройте веб-части поддержки изображений
Обратите внимание на то, как скрытая веб-часть отображается на веб-странице в SharePoint Designer.
Сохраните веб-страницу и начните ее тестирование в браузере рис 7.34(рис 7.34) Начните предварительный просмотр веб-страницы
Пройдите процедуру авторизации, подписавшись учетной записью участника рабочей группы рис 7.35(рис 7.35) Войдите на веб-сайт SharePoint как участник
Просмотрите, как будут выглядеть списки (рис 7.36) Просмотрите список в браузере
Войдите на веб-сайт под учетной записью администратора (владельца узла).
Просмотрите, что списки в браузере выглядят точно так же рис 7.37(рис 7.37) Войдите на веб-сайт как его владелец
В меню Действия узла выберите пункт Изменить страницу.
Перейдите к редактированию веб-части поддержки изображений
Снимите флажок Скрыто в категории Макет (рис. 7.38).
Нажмите кнопку ОК.
Убедитесь в том, что веб-часть с рисунком появилась на веб-странице.
(рис 7.38) Снимите признак Скрыто для веб-части поддержки изображений
Краткие итоги
Веб-страницы SharePoint, формируются путем слияния шаблонной главной страницы узла и, собственно, страницы содержимого (контента), содержащей уникальное наполнение страницы.
При редактировании aspx-страниц мы наблюдаем все содержимое, которое приходит на них с мастер-страницы. Меню Общие задачи содержимого позволяет открепить данный элемент от мастер-страницы и настроить пользовательское содержимое, заменив контент главной страницы контентом aspx-страницы.
Редактирование веб-страниц (с расширением .aspx) отличается от работы с обычными HTML- и ASP.NET-страницами наличием дополнительных приемов, относящихся, главным образом, к веб-частям и элементам главных страниц.
Настройка веб-частей в SharePoint Designer осуществляется методами, похожими на работу с веб-интерфейсом SharePoint в браузере. При этом SharePoint Designer предоставляет гибкие средства по управлению зонами веб-частей.
Общий вид веб-страницы в SharePoint Designer
Программа Microsoft Office SharePoint Designer, в первую очередь, предназначена для разработки веб-узлов, построенных на технологии SharePoint. В отличие от небогатого набора методов редактирования узлов SharePoint в браузере, SharePoint Designer дает возможность гибкого и удобного управления практически всем спектром свойств веб-страниц. Существенно, что в подавляющем большинстве случаев (по крайней мере, в рамках нашего курса) пользователю не придется обращаться к HTML-коду, ограничиваясь для разработки веб-страниц режимом Конструктор.
Учитывая, что приемы работы с веб-узлами и проектирования HTML- и ASP-страниц были представлены в предыдущих лекциях и полностью применимы и для SharePoint-узлов, мы сосредоточимся в этой и двух следующих лекциях на специфических методах управления узла SharePoint.
Будем изучать вопросы редактирования веб-страниц SharePoint на примере того же самого веб-узла "Рога и Копыта", который был нами создан ранее средствами браузера. После его открытия в SharePoint Designer (в ходе которого необходимо будет пройти процедуру авторизации, подписавшись учетной записью Бендер, т.е. владельца узла), в пределах основной панели мы будем наблюдать файловую структуру веб-сайта, идентичную содержимому панели Список папок (рис. 7.1).
(рис 7.1) Веб-узел открыт в программе SharePoint DesignerПерейдем к правке домашней страницы узла.
Щелкните дважды по имени домашней страницы default.aspx в списке папок (рис. 7.1).
После открытия домашней страницы в отдельной вкладке (рис. 7.2) поэкспериментируйте с ее содержимым, наводя указатель на различные ее элементы и щелчком выделяя их.
(рис 7.2) Домашняя страница открыта для редактированияСкорее всего (это зависит от того, включен или нет режим визуальных подсказок ), некоторые элементы будут сопровождаться полупрозрачным текстом-подсказкой, который, возможно, будет Вам на первых порах мешать их восприятию. Кроме того, при наведении указателя на отдельные элементы (например, логотип), он будет менять свой вид на запрещающий значок, говоря о невозможности редактирования элемента под указателем. Это связано с тем, что, вообще говоря, веб-страница стандарта SharePoint, формируется путем слияния, как минимум, двух веб-страниц:
мастер-страницы (или, по-другому, главной страницы узла) – страницы-шаблона, включающей общие элементы для всех страниц узла SharePoint
страницы содержимого (контента) – собственно говоря, содержащей уникальное наполнение страницы, отличающее ее от других страниц узла.
Большинство элементов, которые сопровождаются полупрозрачными метками, как раз и приходят не со страницы содержимого (в данном случае, домашней страницы веб-узла default.aspx), а приходят с шаблонной мастер-страницы. Для того, чтобы отключить отображение этих меток, выберите в верхнем меню Вид пункт Визуальные подсказки и отключите в нем опцию Показать (рис. 7.3). После этого ориентироваться в содержимом страницы станет проще.
(рис 7.3) Отключите режим визуальных подсказокВыделение содержимого на веб-странице
(рис 7.4) Для того, чтобы выделить конкретный элемент веб-страницы, достаточно щелкнуть по нему (рис. 7.4). Вообще говоря, для выделения веб-страниц в SharePoint Designer предусмотрено несколько способов:
мышью в области Конструктор (или Код );
щелчком по тегу на панели доступа к тегу, расположенной под закладкой страницы (для элементов, настраиваемых на самой aspx-странице);
при помощи панели инструментов Главная страница (для элементов, приходящих с мастер-страниц ).
При наведении указателя мыши на тот или иной элемент очереди тегов на самой странице в области Конструктор происходит виртуальное выделение рамкой соответствующего элемента. Например, наведение указателя мыши на тег, реализующий зону веб-частей, приводит в области Конструктор к обрамлению этой зоны (рис. 7.5), а наведение указателя на теги <td> и <tr> – к обрамлению, соответственно, ячейки (рис. 7.6) и строки таблицы.
Примечание. Наводя указатель на различные теги, Вы без труда обнаружите, что выделяете соответствующие элементы таблиц, причем, вложенных вдруг в друга. Таким образом, веб-сайты SharePoint организованы при помощи табличного дизайна и макетных таблиц.
(рис 7.6) Выделение зоны веб-частей(рис 7.5) Выделение ячейки таблицы макетаЭлементы, приходящие на страницы содержимого с главных страниц, не сопровождаются индикацией последовательности тегов на панели доступа к тегу. Поэтому для облегчения их поиска и выделения предусмотрена специальная панель инструментов Главная страница. Вызвать ее легко вводом команды Вид / Панели инструментов / Главная страница. Панель инструментов Главная страница содержит раскрывающийся список, позволяющий выбрать по названию любой из элементов, приходящих с мастер-страницы (рис. 7.7). Выбор элемента тут же выделяет его, как в области Конструктор, так и в области Код.
(рис 7.7) Выделение элементов главной страницы
Веб-части
Отложив разговор о настройке элементов управления, приходящих с главных страниц до следующего раздела (а редактирование самих главных страниц – до следующей главы), сосредоточимся на редактировании уникального содержимого aspx-страницы. Для этого разберем специфическое наполнение домашней страницы default.aspx, ограниченное правой нижней половиной площади страницы (т. е. за исключением верхней и левой панелей навигации, определяемых мастер-страницей ).
Встраивание веб-частей на aspx-страницы
Как мы уже знаем, типичная страница веб-узла SharePoint формируется при помощи веб-частей, способных изменять содержимое по желанию зрителя страницы в браузере. На основе настройки веб-частей организовано редактирование веб-страниц и в SharePoint Designer. Как несложно заметить (рис. 7.8), страница default.aspx содержит две зоны веб-частей: они визуализируются рамками с метками, расположенными по центру верхней границы, и носят название Left (Левая) и Right (Правая).
Веб-части SharePoint идентифицируются в коде веб-страницы тегом вида <WebPartPages: тип_ веб-части >. Например, выделенная на рис. 7.4 веб-часть списка задается тегом <WebPartPages: ListViewWebPart>, веб-часть поддержки изображений на рис. 7.8 – тегом <WebPartPages: ImageWebPart> и т.д. Существенно, что, несмотря на то, что технология веб-частей встроена в ASP.NET 2.0, службы SharePoint используют свой набор веб-частей, и на одной веб-странице не допускается смешивать веб-части ASP.NET и SharePoint.
Как можно убедиться, рассматривая рис. 7.8, веб-части объединены в зоны веб-частей, а зоны, в свою очередь, встроены в ячейки макетной таблицы. Сама таблица находится в пределах настраиваемого элемента PlaceHolderMain (главный местозаполнитель), разметка которого приходит с главной страницы, но само наполнение формируется на странице содержимого (в данном случае, default.aspx).
(рис 7.8) Переход к редактированию веб-части
Настройка веб-частей и зон
Выделяя ту или иную веб-часть, мы имеем возможность редактирования, как этой веб-части, так и содержащей ее зоны. Настройка веб-частей и зон организована в SharePoint Designer при помощи тех же самых панелей параметров, что и в браузере (см. лекцию 3). Для их вызова проделайте следующее.
Щелкните правой кнопкой мыши по веб-части
Выберите в контекстном меню (рис. 7.8) команду Свойства веб-части или Свойства зоны веб-частей (для настройки самой веб-частей или содержащей ее зоны соответственно).
(рис 7.9) Настройка общих параметров веб-частиВ результате будет открыта панель настройки веб-части, та же самая, что и при работе в браузере (рис. 7.9). В частности, она будет содержать общие категории параметров Вид (рис. 7.9), Макет и Дополнительно, а также специфические параметры, расположенные в верхней части панели. Например, веб-часть поддержки изображений (рис. 7.10) (определяемая тегом <WebPartPages: ImageWebPart>) содержит категорию Рисунок, предназначенную для определения исходного графического файла с рисунком, текста всплывающей подсказки и опций выравнивания.
(рис 7.10) Настройка специфических параметров веб-частиПанели для отдельных типов веб-частей могут и не содержать специфических параметров, как например веб-часть поддержки списка ListViewWebPart. Между тем, для списков предусмотрены дополнительные настройки, доступные из меню списка, которое вызывается щелчком по пиктограмме в левом верхнем углу веб-части (рис. 7.11).
(рис 7.11) Переход к редактированию вида веб-части спискаДля выбора отображаемых на веб-странице полей списка (т. е. его столбцов) достаточно ввести команду Поля (рис. 7.11), а затем выбрать из левого перечня доступных полей те, которые следует показывать на веб-странице в данном представлении веб-части. Эта операция осуществляется нажатием кнопки Добавить, находящейся в середине диалога Отображаемые поля (рис. 7.12).
Примечание. То, как будет выглядеть список Извещения с набором полей, определенным на рис. 7.12, показано на рис. 7.13.
(рис 7.13) Настройка отображаемых полей для веб-части списка(рис 7.12) Список с измененным набором полейДля того, чтобы задать представление списка на веб-странице, следует в его меню выбрать пункт Изменить макет (рис. 7.11). В результате открывается диалоговое окно Параметры представления списка, которое содержит несколько вкладок и служит для выбора следующих настроек (рис. 7.14):
Общие – для задания вида панели инструментов и колонтитулов списка;
Макет – для выбора обычного или табличного представления списка, а также определения макета отображения его элементов
Разбиение по страницам – для выбора количества элементов на каждой странице списка
Изменения – для определения опций внесения изменений в список участниками рабочей группы.
(рис 7.14) Настройка представления спискаЕсли в меню списка, либо контекстном меню, вызываемом на веб-части, выбрать команду Свойства зоны веб-частей, то в одноименном диалоговом окне открывается доступ к редактированию основных параметров выбранной зоны. В частности, разрешается поменять название зоны, тип рамки обрамления, способ ее компоновки (вдоль горизонтали или вертикали) и опции доступа ее веб-частей в обозревателе (рис. 7.15). Выбор флажков проверки в нижней части диалога Свойства зоны веб-частей разрешает или запрещает участникам рабочей группы настраивать параметры веб-частей зоны как для общего, так и для личного пользования.
(рис 7.15) Настройка зоны веб-частей
Удаление веб-частей и зон
Для удаления веб-части, или целой зоны веб-частей, достаточно выделить ее, а затем нажать на клавиатуре клавишу Delete. В результате веб-часть или зона пропадет со страницы (рис. 7.16). Напомним, что для точного выделения нужного объекта удобно использовать панель доступа к тегу, расположенную под закладкой веб-страницы.
(рис 7.16) Удаление веб-части
Добавление веб-частей на страницу
Операция добавления веб-частей в SharePoint Designer также аналогична работе в браузере и происходит при помощи области задач Веб-части, которая содержит список веб-частей, входящих в коллекцию узла (рис. 7.17). Для ее вызова на экран достаточно выполнить команду Области задач / Веб-части. Если все веб-части, имеющиеся на узле, не помещаются в список, то для перехода к остальным веб-частям достаточно щелкнуть кнопку Далее.
(рис 7.17) Вставка веб-части на страницуДля вставки веб-части достаточно выделить ее на панели Веб-части и перетащить в нужное место страницы. Если Вы хотите расположить веб-часть в пределах зоны веб-частей, то перетаскивать ее необходимо на соответствующую зону. Более надежный способ вставки веб-части в нужное место следующий.
Установите курсор ввода в нужное место страницы (при необходимости пользуйтесь панелью выбора тегов или представлением Код веб-страницы).
Выделите желаемую веб-часть на панели Веб-части.
На панели Веб-части нажмите кнопку Вставить веб-часть.
Внимание! Если вы хотите добавить веб-часть на страницу и запретить ее последующее редактирование в браузере, то ее следует располагать за пределами зон веб-частей. Такие веб-части будут храниться непосредственно на aspx-cтраницах, в то время, как веб-части, расположенные в зонах, хранятся в базе данных содержимого в службах SharePoint. Подробному изучению этих правил посвящена лаб. работа 7.1.
Добавление зон веб-частей
Для вставки на страницу новой зоны веб-частей проделайте следующее.
Установите курсор ввода в то место, где Вы хотите расположить новую зону.
На панели Веб-части нажмите кнопку Создать зону веб-частей (рис. 7.18).
(рис 7.18) Вставка зоны веб-частейВ результате на веб-странице возникнет новая зона веб-частей (рис. 7.19). В дальнейшем ее можно отредактировать, вызывая диалоговое окно Свойства зоны веб-частей и добавляя в нее новые веб-части (как при помощи панели Веб-части, так и путем перетаскивания существующих веб-частей между зонами).
(рис 7.19) Новая зона веб-частей на странице
Обычные элементы веб-дизайна
Помимо веб-частей, веб-страницы SharePoint могут включать обычные элементы веб-дизайна: текст, рисунки, таблицы и т.д. Приемы из редактирования в SharePoint Designer полностью аналогичны рассмотренным в предыдущих главах (см. лекции 5 и 6), поэтому мы ограничимся простым примером добавления текста (с информацией об авторских правах) на домашнюю страницу узла.
Щелкните на веб-странице в том месте, куда Вы хотите вставить новый элемент (например, за пределы зоны веб-частей в ее нижнюю часть).
Введите с клавиатуры желаемый текст (рис. 7.20).
При желании отформатируйте его, применяя панель инструментов Форматирование и область задач Изменение стиля.
Сохраните веб-страницу, возможно, подтвердив намерение сохранить ее в диалоговом окне-предупреждении.
Запустите предварительный просмотр веб-страницы в браузере.
Убедитесь в том, что введенный текст присутствует на веб-странице.
(рис 7.20) Вставьте текст на веб-страницу
Элементы главных страниц
Как было отмечено выше, веб-страница SharePoint, которую мы наблюдаем в браузере, формируется благодаря слиянию главных
(или мастер-страниц ), т.е. шаблонов, которые включают основные элементы для всех страниц узла SharePoint, а также страниц содержимого. Главные страницы задают общий макет и области перехода, а также общее содержимое для aspx-страниц. То наполнение aspx-страницы, которое мы наблюдаем в области конструктора SharePoint Designer, является комбинацией элементов с главных страниц и элементов, расположенных непосредственно на странице содержимого.
Редактирование элементов, приходящих с главной страницы, невозможно на странице содержимого (рис. 7.21). Тем не менее, имеется возможность выделения элементов, которые приходят с главной страницы и называются прототипами содержимого (подробнее см. следующую лекцию). Например, при выделении имени узла на aspx-странице мы будем наблюдать его название PlaceHolderSiteName (дословно – местозаполнитель имени сайта).
(рис 7.21) Элементы главных страниц нельзя редактировать на aspx-страницеОтсоединение элемента aspx-страницы от главной страницы
Несмотря на недоступность, собственно, элементов главных страниц на aspx-странице (например, на домашней странице узла, как это показано на рис. 7.21), их разрешается заменять пользовательским содержимым, используя, фактически, как шаблоны для содержимого aspx-страницы. Для получения доступа к наполнению элемента следует отсоединить его от главной страницы. Для этого достаточно щелкнуть по кнопке вызова меню Общие задачи содержимого (рис. 7.22) и выбрать единственную команду Создать специальное содержимое.
(рис 7.22) Отсоединение элемента от главной страницыВ результате элемент на aspx-странице станет доступным для редактирования, о чем будет свидетельствовать идентификатор (настройка) на вкладке элемента (рис. 7.23). Теперь данный элемент будет задаваться непосредственно в коде aspx-страницы, а не приходить с мастер-страницы. В качестве примера выделим элемент PlaceHolderSiteName, нажмем клавишу Delete и заменим его содержимое другим текстом (рис. 7.23).
(рис 7.23) Редактирование настроенного элемента от главной страницыДля того, чтобы отменить настройку и вернуться к заданию элемента на главной странице достаточно повторно воспользоваться меню Общие задачи содержимого, выбрать в нем пункт Значение по умолчанию для содержимого мастера (рис. 7.24).
(рис 7.24) Возврат настроенного элемента к определению главной страницыИтак, на aspx-страницах могут отображаться:
элементы aspx-страницы;
элементы управления прототипом содержимого, которые приходят с главной страницы и допускают отображение изменяемого содержимого главной страницы ;
неизменяемые элементы, которые также приходят с главной страницы, но не являются прототипами содержимого (например, логотип сайта).
Возврат веб-страницы к определению узла
Настройка веб-страниц, осуществляемая в браузере, сохраняется в виде резервной копии во внутренней базе данных SharePoint. Поэтому, если на каком-либо этапе редактирования этой страницы в SharePoint Designer Вы посчитаете, что вам лучше вернуться к ее прежнему виду, то достаточно вызвать контекстное меню из области имени страницы на панели Список папок и в меню выбрать пункт Возврат к определению узла (рис. 7.25). Подтвердив затем намерение возвратиться к прежнему состоянию страницы в диалоге-предупреждении, Вы вернете ее к виду, определенному на веб-узле.
Примечание. Вообще говоря, на панели Список папок приводится следующая информация:
Пиктограмма с символом i слева от домашней страницы в списке папок говорит о том, что страница претерпела изменения по сравнению с определением узла.
Изображение карандаша на пиктограмме страницы свидетельствует о редактировании данной страницы в текущий момент в SharePoint Designer
(рис 7.25) Возврат страницы к определению узлаЛабораторные работы
Лабораторная работа 7.1. Добавление веб-частей в зоны и за пределы зон
Рассмотрим, как в SharePoint Designer можно добавлять веб-части на страницы в пределы и за пределы существующих зон и изучим, как они ведут себя при редактировании в браузере.
Откройте область задач Веб-части.
Нажмите на ней кнопку (рис 7.26) Перейдите к области задач Веб-части
Выделите какую-либо веб-часть, например, Общие фотографии.
Перетащите веб-часть с панели (рис 7.27) Вставьте веб-часть в одну из зон
Выделите другую веб-часть, например, Извещения и перетащите ее с панели Веб-части на страницу, расположив за пределами зон веб-частей (рис. 7.28). Таким образом, одна из новых веб-частей находится в пределах правой зоны, а другая – вовсе за пределами зон.
Сохраните веб-страницу и начните ее просмотр в браузере.(рис 7.28) Вставьте другую веб-часть вне зон веб-частей
Работая в браузере, добавьте элемент в список Извещения, чтобы убедиться, что обе веб-части Извещения работают одинаково.
Обратите внимание на отображение одних и тех же данных в двух списках (рис 7.29) Осуществите предварительный просмотр веб-страницы в браузере
Раскройте меню (рис 7.30) Перейдите в режим редактирования веб-страницы
Перейдите к редактированию веб-части Общие фотографии.
Убедитесь, что эту веб-часть, как и другие веб-части в пределах зон, можно настраивать в браузере.
Обратите внимание на другую веб-часть Извещения (1), вставленную за пределы зон и потому недоступную для настройки в браузере (рис. 7.31).
Итак, веб-части, расположенные вне зон, разрешается использовать обычным образом в режиме участника, но не разрешается настраивать в браузере.
(рис 7.31) Веб-части за пределами зон недоступны для настройки в браузере
Лабораторная работа 7.2. Настройка веб-части списка
Это упражнение призвано дать читателю навыки в редактировании списков в SharePoint Designer и убедиться в том, что их настройка полностью аналогична соответствующим действиям, осуществляемым в браузере.
Дважды щелкните на желаемом списке (например, Извещения ).
На панели настройки списка раскройте категорию Вид (рис. 7.32).
В меню (рис 7.32) Измените тип хрома списка
Перейдите к редактированию параметров другого списка, например, Календарь, и выберите для него в меню Тип хрома пункт Заголовок и граница.
Перейдите к редактированию параметров веб-части поддержки изображений и раскройте для нее категорию Макет (рис. 7.33).
Установите флажок проверки (рис 7.33) Скройте веб-части поддержки изображений
Обратите внимание на то, как скрытая веб-часть отображается на веб-странице в SharePoint Designer.
Сохраните веб-страницу и начните ее тестирование в браузере рис 7.34(рис 7.34) Начните предварительный просмотр веб-страницы
Пройдите процедуру авторизации, подписавшись учетной записью участника рабочей группы рис 7.35(рис 7.35) Войдите на веб-сайт SharePoint как участник
Просмотрите, как будут выглядеть списки (рис 7.36) Просмотрите список в браузере
Войдите на веб-сайт под учетной записью администратора (владельца узла).
Просмотрите, что списки в браузере выглядят точно так же рис 7.37(рис 7.37) Войдите на веб-сайт как его владелец
В меню Действия узла выберите пункт Изменить страницу.
Перейдите к редактированию веб-части поддержки изображений
Снимите флажок Скрыто в категории Макет (рис. 7.38).
Нажмите кнопку ОК.
Убедитесь в том, что веб-часть с рисунком появилась на веб-странице.
(рис 7.38) Снимите признак Скрыто для веб-части поддержки изображений
Краткие итоги
Веб-страницы SharePoint, формируются путем слияния шаблонной главной страницы узла и, собственно, страницы содержимого (контента), содержащей уникальное наполнение страницы.
При редактировании aspx-страниц мы наблюдаем все содержимое, которое приходит на них с мастер-страницы. Меню Общие задачи содержимого позволяет открепить данный элемент от мастер-страницы и настроить пользовательское содержимое, заменив контент главной страницы контентом aspx-страницы.
Редактирование веб-страниц (с расширением .aspx) отличается от работы с обычными HTML- и ASP.NET-страницами наличием дополнительных приемов, относящихся, главным образом, к веб-частям и элементам главных страниц.
Настройка веб-частей в SharePoint Designer осуществляется методами, похожими на работу с веб-интерфейсом SharePoint в браузере. При этом SharePoint Designer предоставляет гибкие средства по управлению зонами веб-частей.
