Создание веб-страниц на SharePoint-сайте

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

Создание новой веб-страницы

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

Предположим, что у нас уже имеется корпоративный портал SharePoint (рис. 1), включающий библиотеки и списки.  

Рис. 1. Создайте на веб-узле новую страницу

Для того, чтобы создать на портале новую веб-страницу, выполните следующее.

  1. Откройте веб-узел в SharePoint Designer и выберите команду Создать / Страница (рис. 1).
  2. В диалоге Создание на вкладке Страница выберите ее тип – ASPX или HTML и нажмите кнопку ОК.

Рис. 2. Новая страница в SharePoint Designer
    (показано перетаскивание на нее рисунка)

В результате новая веб-страница будет открыта в SharePoint Designer для редактирования  (рис. 2). Остается только ввести команду Файл / Сохранить как, ввести название (например, page.aspx) и расположение созданной страницы. В частности, ее можно разместить в корневой папке (на одном уровне с домашней страницей default.aspx.

Добавление рисунка на веб-страницу

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

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

Рис. 3. Рисунок на веб-странице

  1. Щелкните правой кнопкой мыши на рисунке.
  2. В контекстном меню выберите команду Свойства рисунка.
  3. В диалоге Свойства рисунка определите параметры рисунка (рис. 4).
  4. При желании, из режима Конструктор перейдите в режим Код или С разделением и просмотрите, как выглядит HTML-код, относящийся к рисунку.

Рис. 4. Определите свойства рисунка

Присоединение мастер-страницы

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

Проделаем следующее:

  1. Выберите команду Формат / Главная страница / Присоединить главную страницу.
  2. В диалоге  Выбор главной страницы (рис. 5) выберите желаемую мастер-страницу (их на портале может быть несколько) и нажмите кнопку ОК.

Рис. 5. Выберите мастер-страницу для созданной веб-страницы

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

Рис. 6. Определите связь областей веб-страницы и мастер-страницы

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

Рис. 7. Вид веб-страницы после присоединения к ней мастер-страницы

Редактирование мастер-страницы

Обратите внимание на то, что не все элементы на aspx-странице, приходящие с главной страницы, разрешается заменять настраиваемым содержимым. Например, логотип является  недоступным, и его нельзя заменить на aspx-странице настраиваемым содержимым.

Если Вы хотите поменять логотип, то следует обратиться к параметрам узла в браузере или мастер-странице в SharePoint Designer.

  1. Откройте мастер-страницу для редактирования.
  2. Замените логотип, перетащив файл с изображением в соответствующее место мастер-страницы (рис. 8).
  3. Удалите старый логотип.

Рис. 8. Редактирование логотипа на мастер-странице

  1. Отредактируйте размер нового изображения-логотипа.
  2. Сохраните мастер-страницу.
  3. Просмотрите изменения, произошедшие с aspx-страницей page.aspx и с домашней страницей, сначала в  SharePoint Designer, а потом – в браузере (рис. 9).

Рис. 9. Просмотр веб-страницы в браузере (логотип на мастер-странице изменен)

Дальнейшее редактирование aspx-страницы

После того, как Вы отредактировали мастер-страницу, остается настроить должным образом нашу aspx-страницу, применяя традиционные методы веб-дизайна. Например, можно добавить графику текст (рис. 10) или таблицы, отформатировать элементы посредством CSS-стилей и т.д. Последовательно основные возможности SharePoint Designer рассмотрены в стартовом курсе, а (см. лекции 6-7 курса "Введение в SharePoint").

Рис. 10. Отредактируйте веб-страницу в SharePoint Designer (показано добавление текста)

Обычные страницы и страницы веб-частей

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

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

Рис. 11. Для создания страницы веб-частей воспользуйтесь меню Действия узла

 

Создание страницы веб-частей

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

Например, мой давний друг, ресторатор Адам Кишлот попросил, как можно быстрее, организовать для него всего одну веб-страницу, на которой он мог бы оперативно размещать текущий ассортимент блюд для завсегдатаев.

Рассмотрим, как создать такую страницу при помощи браузера.

  1. В браузере выберите Действия узла / Создание (рис. 11). 
  2. На странице Создание щелкните гиперссылку Страница веб-частей. 

Примечание: Для создания обычной страницы (на которой нельзя будет размещать веб-части) следовало бы выбрать пункт Простая страница.

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

Рис. 12. Выберите имя файла и шаблон макета страницы

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

Рис. 13. Веб-страница создана

  1. Обратите внимание на имя файла и название веб-страницы (рис. 13).
  2. Перейдите в библиотеку Общие документы.
  3. Убедитесь в том, что созданная веб-страница находится в этой библиотеке и имеет формат aspx (рис. 14)

Рис. 14. Новая веб-страница находится на портале в библиотеке Общие документы

  1. Перейдите в SharePoint Designer.
  2. Откройте в папке Shared Documents (Общие документы) на веб-узле созданную веб-страницу (рис. 15).
  3. Щелкните дважды на заголовке.

Рис. 15. Отредактируйте заголовок веб-страницы

  1. В открывшемся диалоге выберите заголовок и описание веб-страницы (рис. 15).
  2. Удалите лишние элементы на веб-странице, например, вернув их прототипы к определению мастер-страницы (рис. 16).

Рис. 16. Отредактируйте веб-страницу в SharePoint Designer

  1. Сохраните страницу и осуществите ее просмотр в браузере.
  2. В браузере выберите Действия узла / Изменить страницу (см. рис. 17).

Рис. 17. Откройте веб-страницу в браузере

  1. Убедитесь в наличии веб-частей на странице (расположенных в соответствии с выбранным шаблоном) (рис. 18). При желании, добавьте на страницу какую-либо веб-часть портала, например новый список. 
  2. Выйдите из режима редактирования.

Рис. 18. Веб-страница в режиме редактирования в браузере

  1.  Перейдите на домашнюю страницу веб-узла.
  2.  Добавьте в список Ссылки новые гиперссылки на простую веб-страницу и страницу веб-частей.

Рис. 19. Создайте на домашней странице портала ссылку на новую веб-страницу

Далее можно организовать новый список (например, список блюд ресторана) и вставить его на нашу веб-страницу.

  1. Нажмите кнопку Действия узла и выберите команду Создание.
  2. Начните создание настраиваемого списка (рис. 20).

Рис. 20. Создайте новый список в представлении таблицы данных

  1. На странице Создание выберите имя, например, Меню ресторана, и описание создаваемого списка (рис. 21).
  2. Нажмите кнопку Создать.

Рис. 21. Выберите имя списка

  1.  Заполните список (рис. 22)
  2. Разместите веб-часть со списком на созданной странице веб-частей.

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

Рис. 22. Заполнение списка элементами