Интернет-Университет Информационных Технологий
   http://www.INTUIT.ru
Основы работы с Sharepoint
5. Лекция: Знакомство с SharePoint Designer 2007: версия для печати и PDA
Лекция знакомит слушателя с веб-редактором Microsoft Office SharePoint Designer 2007, предназначенным, в частности, для разработки узлов SharePoint. Рассматриваются основные составляющие интерфейса и базовые приемы работы в SharePoint Designer, в особенности, по управлению веб-узлами.

Что такое SharePoint Designer?

Как Вы уже знаете, технология Microsoft SharePoint – это бесплатное серверное решение, базирующееся на популярном стандарте ASP.NET. На основе служб SharePoint, с помощью браузера, легко организовывать мощные узлы для коллективной работы пользователей. Тем не менее, средства, предоставляемые браузером, довольно ограниченные и, по сути дела, не дают пользователю большой свободы выбора в оформлении узлов. В особенности, это касается и наполнения их различными HTML- и ASPX-элементами и дизайна веб-страниц, который, в большинстве случаев, диктуется шаблонами главных страниц узлов SharePoint.

Для разработки полноценных веб-узлов как раз и предназначен веб-редактор Microsoft SharePoint Designer 2007. Он предоставляет пользователю исключительно простые средства быстрой настройки таких узлов (включая использование уже готовых шаблонов, их наполнение модульными элементами управления и быстрое применение желаемого дизайна сайта). Учитывая, что службы SharePoint 3.0 (приложение, устанавливаемое на сервере) уже содержат все необходимые заготовки для полноценного веб-узла, их сборка при помощи SharePoint Designer 2007 является относительно несложным делом, не требуя, в большинстве случаев, умения работать с программным кодом, ограничиваясь средствами визуального проектирования.

Программа SharePoint Designer формально принадлежит семейству офисных программ, т. е. пакету Microsoft Office 2007, и является прямым наследником Microsoft FrontPage. Однако она не входит в стандартные комплекты поставки Office 2007 и должна приобретаться отдельно. Загрузить полнофункциональную пробную версию (с ограниченным сроком пользования и ознакомительной лицензией) можно бесплатно с веб-узла Microsoft.

Будучи типичным веб-редактором, Microsoft Office SharePoint Designer 2007 применяется в следующих целях:

  1. создание простейших HTML-страниц;
  2. создание активных серверных ASPX-страниц (стандарта ASP.NET );
  3. разработка веб-приложений, построенных на основе служб SharePoint;
  4. управление веб-сайтом.

Следует сразу заметить, что для разработки узлов, использующих технологию SharePoint, необходимо, в процессе действий в SharePoint Designer, иметь подключение к серверу, на котором развернуты службы SharePoint, и где, собственно говоря, и будет редактироваться веб-узел. Для создания HTML- и ASPX-страниц подключения к серверу не требуется – весь процесс разработки может осуществляться на обычном компьютере, с тем, чтобы, по завершении проекта, опубликовать все файлы на сервере.

Начало работы в SharePoint Designer 

Программа Microsoft SharePoint Designer 2007 – это типичный веб-редактор, который позволяет создавать как обычные веб-страницы, так и более сложные конструкции, например, активные серверные страницы стандарта ASP.NET, а также решения на основе служб SharePoint (базирующихся, как мы знаем, целиком на той же самой технологии ASP.NET ).

Окно SharePoint Designer после первого запуска

увеличить изображение
Рис. 5.1.  Окно SharePoint Designer после первого запуска

Интерфейс SharePoint Designer прост и интуитивен. Центральную часть экрана (рис. 5.1) занимает область документа, представляющая содержимое веб-страницы, редактирующейся в данный момент. Как и в большинстве веб-редакторов, область документа может быть представлена в одном из вариантов:

  1. Конструктор (для визуальной разработки веб-страницы);
  2. Код (для просмотра исходного HTML-кода веб-страницы);
  3. С разделением (комбинированный режим, представляющий одновременно как конструктор, так и код веб-страницы).

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

Помимо строки меню и панелей инструментов, вызываемых при помощи меню Вид, имеется ряд панелей, объединяющихся в Области задач. Они занимают две большие области слева и справа по бокам от основной области редактируемого документа. В областях задач находится ряд панелей, посредством которых легко выполнить те или иные команды. Например, при помощи панели Список папок можно управлять содержимом веб-узла и просматривать различные папки с файлами. Панель Свойства CSS предназначена для управления каскадными таблицами стилей.

Любые панели могут быть совмещены в пределах одной области задач, скрыты (нажатием кнопки закрытия окна), а затем вызваны на экран (либо щелчком на соответствующей закладке, либо при помощи меню Области Задач ). Например, панель Применение стилей, будучи вызванной через меню Области Задач, позволит управлять стилевой разметкой веб-страницы. Если вызвать (также изначально скрытую) панель Библиотека источников данных, то мы получим доступ к базам данным, хранящимся во внешних файлах. И так далее.

Панель элементов

Рис. 5.2.  Панель элементов

Особую роль играет Панель Элементов (рис. 5.2), которая нужна для добавления на веб-страницы различных конструкций из HTML-кода, элементов управления ASP.NET, а также элементов управления SharePoint. Перетаскивая элементы с этой панели на область документа, мы, тем самым, добавляем их на веб-страницу, что, фактически, означает вставку соответствующего фрагмента HTML-кода, который генерируется при этом автоматически. Если используется режим редактирования веб-страницы С разделением, то область документа разделена на две части: в одной части приводится HTML-код страницы, а в другой – ее представление, приближенное к тому, как будет выглядеть страница в браузере.

Таким образом, принцип работы SharePoint Designer, как и других веб-редакторов, заключается в синхронном редактировании, как внешнего вида страницы, так и ее кода. Вставляя соответствующий элемент управления или текст в область конструктора, мы сразу вносим и соответствующие изменения в другую область, т.е. в код веб-страницы (и наоборот).

Ввод и редактирование текста

Продолжим знакомство с SharePoint Designer, осуществив несложные действия по вводу текста в HTML-страницу. По умолчанию, в первый раз SharePoint Designer открывается с одной пустой страницей, носящей имя Без_названия_1 и содержащей, тем не менее, некоторый код (см. рис. 5.1 выше по тексту).

Для добавления текста в документ:

  1. Находясь в режиме редактирования С разделением, щелкните в области конструктора.
  2. Введите с клавиатуры какой-либо текст (рис. 5.3).
  3. На панели инструментов раскройте список Стиль и выберите в нем один из элементов, например, Заголовок 2.
  4. Обратите внимание на изменения, которые происходят с кодом веб-страницы. В данном случае, введенный текст будет размечен тегом
    <h2>

Ввод и форматирование текста

Рис. 5.3.  Ввод и форматирование текста

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

Для того, чтобы применить какое-либо форматирование к фрагменту текста, выделите этот фрагмент и примените нужный инструмент на панели Стандартная и Форматирование, находящиеся под строкой меню, подобно тому, как Вы делаете это, в текстовых редакторах, в частности, в Microsoft Word. Например, можно применить к фрагменту курсивное начертание шрифта.

Обратите внимание на то, что, фрагменты выделяются синхронно, одновременно в области кода и в области конструктора. Удобнее пользоваться конструктором, поскольку, применяя к выделенному тексту желаемое форматирование, автоматически, в фоновом режиме, вносятся нужные изменения в HTML-код веб-страницы.

Добавление элементов

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

SharePoint Designer предусматривает добавление элементов трех типов:

  1. Обычные HTML- теги (включая HTML-формы для взаимодействия со зрителем веб-страницы);
  2. Серверные элементы управления ASP.NET ;
  3. Серверные элементы управления служб SharePoint.

Несмотря на существенные идеологические различия между перечисленными типами элементов (они прояснятся в следующих трех главах соответственно), вставка любого из элементов в веб-страницу осуществляется примерно одинаковым способом. Мы рассмотрим технику добавления элемента в документ на примере вставки в него горизонтальной линии.

  1. Откройте в области задач Панель Элементов.
  2. Нажмите на Панели Элементов кнопку Горизонтальная линия (рис. 5.4).
  3. Не отпуская левую кнопку мыши, перетащите элемент в нужное место веб-страницы в области конструктора или (если Вы хорошо ориентируетесь в HTML) в области кода.
  4. Отпустите кнопку мыши

Вставка элемента (горизонтальной линии) на веб-страницу

Рис. 5.4.  Вставка элемента (горизонтальной линии) на веб-страницу

В результате горизонтальная линия появится в документе (рис. 5.5).

Результат вставки элемента

увеличить изображение
Рис. 5.5.  Результат вставки элемента

Для последующего прямого форматирования вставленного элемента удобнее всего применять контекстное меню, поскольку по самому набору команд в нем несложно догадаться, какая именно из них служит для редактирования элемента.

Для редактирования линии

  1. Щелчком правой кнопкой мыши по горизонтальной линии в области конструктора вызовите контекстное меню
  2. Выберите команду Свойства горизонтальной линии. (Если вы вызвали контекстное меню из области кода, следует выбрать универсальную команду Свойства тега ).
  3. В открывшемся одноименном диалоговом окне Свойства горизонтальной линии (рис. 5.6) установите желаемые свойства форматирования линии и нажмите кнопку ОК.

В результате элемент (линия) приобретет выбранное форматирование, что будет отражено соответствующим образом в коде веб-страницы.

Редактирование свойств элемента (атрибутов тега)

Рис. 5.6.  Редактирование свойств элемента (атрибутов тега)

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

Сохранение и предварительный просмотр веб-страницы

Управление файлами в SharePoint Designer также осуществляется привычным способом. Нажатие кнопки Сохранить на панели инструментов (рис. 5.7) приводит к появлению стандартного диалога сохранения документа, при помощи которого легко сохранить веб-cтраницу в файле желаемого формата.

Сохранение документа

Рис. 5.7.  Сохранение документа

Разумеется, SharePoint поддерживает многооконный режим редактирования. Можно создать новый документ, например веб-страницу, определив первоначально его тип, а затем редактировать любую из открытых в данный момент веб-страниц, переключаясь между ними посредством закладок в верхней части области документа.

Для того, чтобы оценить вид отредактированного документа в браузере (рис. 5.8), достаточно нажать на панели инструментов Стандартная кнопку Просмотр в Windows Internet Explorer, либо просто нажать функциональную клавишу <F12> на клавиатуре.

Предварительный просмотр веб-страницы

Рис. 5.8.  Предварительный просмотр веб-страницы

Лабораторная работа 5.1. Создание нового веб-узла

Как и другие веб-редакторы, SharePoint Designer позволяет редактировать не только сами веб-страницы, но и осуществлять управление веб-узлом (по-другому, веб-сайтом ), в целом. В рамках этого упражнения создадим новый простой веб-узел с одной пустой html-страницей.

  1. Нажмите на панели инструментов кнопку Создать и введите команду Веб-узел (рис. 5.9).

    Начните создание веб-узла

    Рис. 5.9.  Начните создание веб-узла

  2. Выберите в диалоге Создание на вкладке Общие тип создаваемого узла Одностраничный узел.
  3. Определите место расположения веб-узла на диске компьютера. Например, рекомендуется использовать системную папку Веб-узлы, расположенную в папке Мои документы.

    Создайте одностраничный узел

    увеличить изображение
    Рис. 5.10.  Создайте одностраничный узел

  4. Определите имя веб-узла
  5. Нажмите в диалоговом окне Создание кнопку ОК.

Веб-узел открыт в SharePoint Designer

увеличить изображение
Рис. 5.11.  Веб-узел открыт в SharePoint Designer

В результате в SharePoint Designer откроется содержимое созданного веб-узла, который по умолчанию, будет содержать одну веб-страницу – default.html (рис. 5.11). В центральной области окна SharePoint Designer, вместо веб-страницы, будет открыта вкладка Веб-узел. Эта вкладка, предусматривающая различные приемы управления веб-узлом, предназначена для просмотра и осуществления различных действий с самим веб-узлом (по-другому, веб-сайтом ). Например, посредством переключателей режимов в нижней части окна, можно просмотреть сводку отчетов по функциональностям узла (рис. 5.12).

Сводка отчетов по функциональностям узла

увеличить изображение
Рис. 5.12.  Сводка отчетов по функциональностям узла

Проделайте следующие шаги по дальнейшему редактированию узла.

  1. Щелкнув дважды по имени домашней страницы, которая по умолчанию добавлена к одностраничному узлу, откройте ее для редактирования
  2. Отредактируйте домашнюю страницу узла (рис. 5.13). К примеру, скопируйте с ранее созданной веб-страницы HTML-код в буфер обмена, а затем вставьте его на только что созданную домашнюю страницу узла

    Отредактируйте домашнюю веб-страницу узла

    Рис. 5.13.  Отредактируйте домашнюю веб-страницу узла

  3. Перейдите к Проводнику Windows и просмотрите в нем файловое содержимое созданного веб-узла (рис. 5.14). Обратите внимание на то, что созданный локальный веб-узел содержит, помимо единственной домашней страницы default.html, еще ряд служебных папок и файлов.
  4. Вернитесь назад в SharePoint Designer и убедитесь в том, что просмотр содержимого локального веб-узла возможен не только в Проводнике Windows, но и непосредственно в программе SharePoint на панели Список папок. Эта панель как раз и используется для управления файлами. Кроме того, открывая вкладку самого веб-узла, мы имеем возможность просматривать его содержимое и в центральной области окна SharePoint Designer

    Просмотрите файловое содержимое веб-узла в Проводнике Windows

    Рис. 5.14.  Просмотрите файловое содержимое веб-узла в Проводнике Windows

  5. Для того чтобы просмотреть, как будет выглядеть домашняя страница в браузере, сохраните ее, а затем осуществите ее предварительный просмотр (рис. 5.15).

    Осуществите  предварительный просмотр узла в браузере

    Рис. 5.15.  Осуществите предварительный просмотр узла в браузере

  6. Оцените вид созданной веб-страницы в браузере (рис. 5.16). Стоит обратить внимание на путь к этой веб-странице, который приводится в строке адреса браузера Internet Explorer. Адрес включает путь к папке Мои Веб-узлы, созданный нами в SharePoint Designer.

Домашняя страница веб-узла в браузере

увеличить изображение
Рис. 5.16.  Домашняя страница веб-узла в браузере

Лабораторная работа 5.2. Родительские и дочерние веб-узлы

Посвятим это упражнение созданию в SharePoint Designer дочернего узла. Например, на веб-сайте конторы "Рога и Копыта" создадим дочерний веб-сайт "Отдела копыт".

  1. При открытом веб-узле "Рога и Копыта" введите команду Файл / Создать / Веб-узел.
  2. В диалоговом окне Создание выберите шаблон Одностраничный веб-узел (рис. 5.17).

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

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

  3. Перейдите в поле Укажите расположение нового веб-узла (рис. 5.17).
  4. Введите имя дочернего узла, отделив его от имени родительского узла косой чертой ("слешем") (рис. 5.18).

    Определите имя дочернего узла

    увеличить изображение
    Рис. 5.18.  Определите имя дочернего узла

  5. Нажмите кнопку ОК.
  6. Обратите внимание на то, что созданный дочерний узел будет открыт в новом (втором по счету) окне программы SharePoint Designer (рис. 5.19).

    Дочерний веб-узел открывается в отдельном окне SharePoint Designer

    увеличить изображение
    Рис. 5.19.  Дочерний веб-узел открывается в отдельном окне SharePoint Designer

  7. Вернитесь в окно SharePoint Designer, где открыт родительский узел (рис. 5.20).
  8. Двойным щелчком по имени дочернего узла на панели Список папок откройте дочерний веб-узел ("Отдела копыт"), замечая, что он откроется в отдельном окне SharePoint Designer.

В списке папок родительского узла появляется дочерний узел

Рис. 5.20.  В списке папок родительского узла появляется дочерний узел

Итак, мы выяснили очень важное свойство SharePoint Designer: Каждый веб-узел, в том числе дочерний, открывается для редактирования в своем окне программы. Соответственно, редактирование веб-страниц, находящихся на некотором веб-узле в обычных вложенных в него папках, возможно в пределах одного окна программы SharePoint Designer. Если же веб-страница, требующая правки, находится во вложенном веб-узле, то открыть ее разрешается только в отдельном окне SharePoint Designer.

Примечание. Полезно будет перейти в Проводник Windows и просмотреть, как будут выглядеть в нем папки и узлы, созданные в рамках работы в SharePoint Designer.

Лабораторная работа 5.3: Открытие веб-узла SharePoint

Рассмотрим, как в SharePoint Designer можно открыть для редактирования существующий веб-узел SharePoint. В качестве примера будем использовать тот же самый узел конторы "Рога и Копыта", который разрабатывался нами пока только в браузере.

  1. Откройте веб-узел SharePoint в браузере.
  2. Выделите URL-адрес узла в адресной строке браузера, либо на странице Параметры узла (рис. 5.21).

    Скопируйте адрес узла в буфер обмена

    увеличить изображение
    Рис. 5.21.  Скопируйте адрес узла в буфер обмена

  3. Перейдите в окно SharePoint Designer и введите команду Файл / Открыть узел.
  4. В диалоговом окне Открытие веб-узла вставьте адрес из буфера обмена в поле Имя узла (рис. 5.22).

    Откройте веб-узел SharePoint, ранее созданный в браузере

    Рис. 5.22.  Откройте веб-узел SharePoint, ранее созданный в браузере

  5. Нажмите кнопку Открыть.
  6. Введите имя учетной записи владельца сайта и пароль (рис. 5.23).

Пройдите процедуру авторизации в SharePoint Designer

увеличить изображение
Рис. 5.23.  Пройдите процедуру авторизации в SharePoint Designer

В результате веб-узел будет открыт в SharePoint Designer для редактирования (рис. 5.24). Обратите внимание на его URL-адрес, отображающийся, как в заголовке окна программы, так и в названии папки самого верхнего уровня на панели Список папок. Заметьте также, что содержимое вкладки Веб-узел, открывающееся на основной панели SharePoint Designer, идентично структуре сайта, отображаемой на панели Список папок, и представляет его содержимое на сервере (а не на локальном компьютере, как в предыдущих упражнениях этой лекции).

Веб-узел открыт для редактирования

увеличить изображение
Рис. 5.24.  Веб-узел открыт для редактирования

Потренируемся далее в осуществлении манипуляций с файлами, убедившись в том, что посредством SharePoint Designer исключительно просто и удобно переправлять нужные файлы (например, рисунки или веб-страницы) с локального компьютера на сервер.

  1. Откройте одновременно Проводник Windows и SharePoint Designer.
  2. Выделите нужные файлы в Проводнике и перетащите их на желаемую папку сайта на панели Список папок в SharePoint Designer (рис. 5.25).

    Перетащите файлы из Проводника в SharePoint Designer

    увеличить изображение
    Рис. 5.25.  Перетащите файлы из Проводника в SharePoint Designer

  3. Дождитесь завершения импорта файлов на веб-узел (рис. 5.26).

    Файлы передаются с компьютера на сервер

    Рис. 5.26.  Файлы передаются с компьютера на сервер

  4. Двойным щелчком на имени папки на панели Список папок откройте ту папку, в которую Вы скопировали файлы.
  5. Просмотрите список файлов, скопированных в папку с локального компьютера (рис. 5.27).

    Список файлов открытой папки на панели Список папок и вкладке Веб-узел

    Рис. 5.27.  Список файлов открытой папки на панели Список папок и вкладке Веб-узел

  6. Дважды щелкните на имени какого-либо из графических файлов на панели Список папок.
  7. Просмотрите содержимое файла в открывшемся окне браузера (рис. 5.28). Обратите внимание на адрес файла, замечая, что он загружается в браузер с сервера.

    Файл с сервера открывается для просмотра в обозревателе

    Рис. 5.28.  Файл с сервера открывается для просмотра в обозревателе

  8. Двойным щелчком на имени файла default.aspx откройте для редактирования в SharePoint Designer домашнюю страницу веб-узла (рис. 5.29).

    Домашняя страница открыта для редактирования

    увеличить изображение
    Рис. 5.29.  Домашняя страница открыта для редактирования

  9. Выделите щелчком какую-либо из веб-частей на домашней странице (рис. 5.30).
  10. Обратите внимание на то, какой последовательностью вложенных тегов кодируется веб-часть на панели доступа к тегу (рис. 5.30).

    На домашней странице выделена веб-часть Изображение узла

    увеличить изображение
    Рис. 5.30.  На домашней странице выделена веб-часть Изображение узла

  11. Попробуйте просмотреть содержимое других папок на узле SharePoint. В частности, откройте домашнюю веб-страницу для мобильных устройств (рис. 5.31), замечая, что ее содержимое формируется в браузере автоматически и не требует какого-либо редактирования в SharePoint Designer.
  12. Закройте веб-узел командой Файл / Закрыть узел.

    На домашней странице выделена веб-часть Изображение узла

    увеличить изображение
    Рис. 5.31.  На домашней странице выделена веб-часть Изображение узла

  13. В завершение работы командой Файл / Последние узлы откройте заново один из недавно редактировавшихся веб-узлов.

Откройте один из недавно редактировавшихся узлов

Рис. 5.32.  Откройте один из недавно редактировавшихся узлов

Краткие итоги

SharePoint Designer 2007 – это типичный веб-редактор, сочетающий характерные элементы управления веб-узлом, а также инструменты редактирования веб-страниц. Он может с успехом применяться и для создания несложных статических или динамических HTML-страниц, а также активных серверных страниц стандарта ASP.NET. При этом в большинстве случаев, глубокого знания языка HTML не требуется, и веб-страницы могут редактироваться в визуальном режиме конструктора, без непосредственного обращения к правке HTML-кода. Это касается как простых документов, так и довольно сложных веб-узлов, построенных на основе служб SharePoint.

Для простого редактирования веб-страницы можно использовать как клавиатуру, помещая курсор в нужное место кода или конструктора, так и привычные средства форматирования стандартных текстовых редакторов, а также элементы, представляемые Вам Панелью элементов в области задач. Например, для их вставки можно использовать соответствующий тег (элемент HTML-кода ). После перетаскивания нужного элемента в область конструктора, в код веб-страницы вносятся необходимые добавления.

© INTUIT.ru, 2003-2010. Все права защищены.