Использование функций Dreamweaver и "Дизайнер" в версии SharePoint 2013

Article
09/20/2012

SharePoint 2013 включает ряд новых функций, благодаря которым процедуры создания дизайна веб-сайтов и их публикации становятся как никогда простыми. Одной из этих функций является "Дизайнер". Эта функция позволяет выполнять такие действия, как создание различных каналов для вашего контента, например создание одного набора страниц для полноразмерных браузеров, одного — для мобильных устройств, другого — для планшетов, и т.д. Вы можете связать с каждым каналом разные главные страницы. И одной из самых примечательных функций является возможность создания страницы в любом стандартном средстве редактирования HTML, таком как Dreamweaver, ее загрузки в SharePoint и использования в качестве главной страницы. SharePoint обеспечивает автоматическое создание страницы .aspx и обеспечивает ее синхронизацию с файлом .html. После этого преобразования вам не приходится переходить в какое-либо иное средство для его редактирования; вы можете продолжить редактирование файла .html в средстве редактирования по своему выбору, и при каждом сохранении файла SharePoint выполняет синхронизацию файла .aspx, используемого для отображения главной страниц.

Кроме того, мы предоставляем особые компоненты, называемыми фрагментами (Snippets), которые позволяют вам "выхватывать" те элементы SharePoint, которые заинтересовали вас больше всего, и встраивать их в свою главную страницу. Вы просто выбираете необходимый тип фрагмента (например, окно поиска, функцию быстрой навигации и т. д.), копируете автоматически сгенерированный код этой функций и вставляете его в свою главную страницу. Однако, это еще не все — существует еще ряд особенностей SharePoint, которые вы должны знать, чтобы полностью преобразовать стандартную HTML-страницу в главную страницу SharePoint.

В этой статье я собираюсь продемонстрировать, как можно преобразовать веб-страницу, созданную с помощью учебного веб-сайта Dreamweaver (https://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html), в главную страницу SharePoint и домашнюю страницу моего сайта. Для начала давайте посмотрим, как выглядит сайт Dreamweaver после его создания:

На этой странице вы можете видеть некоторые специфические компоненты SharePoint, которые необходимо упомянуть.

Изображения, используемые для заголовка, фона основного представления страницы и отдельных историй
Контент для основной части страницы и трех областей историй
Дополнительные функции SharePoint, которые мы, вероятно, захотим добавить. К ним относится окно поиска и некоторые функции навигации.

Прежде всего, давайте обговорим это с точки зрения содержимого. Готовые типы содержимого могут подходить для основного контента, но нам нужно нечто специфическое для трех фрагментов историй, представленных в нижней части страницы. Мы начнем именно с этого, и разработаем новый тип контента для его поддержки. Так как изображения неразрывно связаны с контентом, мы добавим столбцы сайта для них, а также столбцы сайта для самого текста. Тип контента на странице приветствия, вероятно, является хорошим базовым классом для этого типа страницы, поэтому я создал новый тип контента на основе страницы приветствия и назвал его "DW Layout". Для поддержки этого макета я добавил следующие столбцы:

LeftStoryImage
LeftStoryText
CenterStoryImage
CenterStoryText
RightStoryImage
RightStoryText

Столбцы изображений определены как Image with formatting and constraints for publishing (Изображение с форматированием и ограничениями на публикацию), а столбцы текста определены как Full HTML content with formatting and constraints for publishing (Отформатированное содержимое HTML с форматированием и ограничениями на публикацию).

Теперь мы готовы приступить к первому этапу работы с приложением "Дизайнер" — мы загрузим нашу страницу HTML Dreamweaver и таблицу стилей, а затем преобразуем ее в главную страницу.

Теперь откройте браузер на компьютере, на котором установлено приложение Dreamweaver (или ваше избранное средство редактирования HTML), и перейдите на ваш сайт SharePoint. Щелкните меню "Действия сайта" и выберите "Дизайнер". В списке задач слева щелкните пункт 3 "Загрузить файлы проекта". Щелкните ссылку, чтобы привязать локальный диск с папкой SharePoint, в которой необходимо сохранить главную страницу и таблицу стилей. Это приведет к открытию экрана Проводника сайта SharePoint, что позволит перетащить файлы из SharePoint непосредственно в Dreamweaver. Если это по какой-то причине невозможно, вы всегда можете перейти в библиотеку главной страницы и просто открыть библиотеку на экране Проводника.

Затем скопируйте главную страницу index.html с вашего локального диска в библиотеку SharePoint, которая открыта на экране Проводника. В соответствии с учебником Dreamweaver предполагается, что таблица стилей представляет собой подпапку с именем "styles" (стили), поэтому создайте эту папку и скопируйте в нее таблицу стилей.

Теперь в браузере щелкните пункт 4 "Редактирование главных страниц" в списке задач приложения "Дизайнер". Щелкните ссылку с именем "Преобразовать файл HTML в главную страницу SharePoint". Открывается диалоговое окно стилей браузера файлов SharePoint, где отображается файл index.html, скопированный в галерею главных страниц. Щелкните его для выбора, а затем щелкните кнопку "Вставить". Выполняется преобразование, а затем на странице "Дизайнер" отображается файл в списке главных страниц, а также сообщение, в котором указано, что преобразование выполнено успешно. Если вы сейчас обновите экран Проводника в библиотеке главных страниц, отобразится новый файл с именем index.master. Это "пара" для файла index.html, загруженного на сайт. С этого момента SharePoint будет обеспечивать обновление этого главного файла — вам нужно всего лишь осуществлять работу с файлом HTML.

Вероятно, сейчас следует просмотреть новую главную страницу, чтобы узнать, с чем вам предстоит работать. Для этого можно щелкнуть ссылку index.html в приложении "Дизайнер". Это приведет к открытию страницы в режиме предварительного просмотра, чтобы вы могли узнать, как выглядит ваша главная страница. Ведь всегда с самого начала интересно, какой вид примет эта страница после первоначального преобразования.

Некоторые моменты, которые стоит отметить:

Кажется, что таблица стилей работает — отображаются именно те шрифты и элементы форматирования, которые мы и предполагали увидеть.
Изображения не отображаются, поэтому мы должны устранить эту проблему. Однако некоторые из этих изображений являются контентом, а другие — частью действительной главной страницы, поэтому мы должны учитывать этот факт по мере дальнейшего изменения главной страницы.
Отображаемый текст не должен быть частью главной страницы, поэтому мы должны извлечь его, а затем добавить в качестве содержимого на домашнюю страницу.

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

По мере прокрутки HTML мы можем заметить отсутствующие изображения, которые должны быть частью главной страницы. Это изображения banner.gif (из файла HTML) и main.jpg (из таблицы стилей, которая определяет фон для main_image DIV); мы исправим это в первую очередь.

Вернитесь в браузер, щелкните меню "Действия сайта", а затем щелкните меню "Просмотреть содержимое сайта". Щелкните ссылку "Изображения коллекции сайта", чтобы открыть библиотеку документов. Теперь мы будем загружать наши два изображения в эту библиотеку. URL-адрес библиотеки — /sitecollectionimages, поэтому с помощью Dreamweaver мы изменим путь для обоих изображений с указанием на эту библиотеку. Если вы обновите страницу предварительного просмотра, вы сможете отметить, что мы делаем успехи.

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

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

Основной текст:

Левый столбец:

Центральный столбец:

Правый столбец:

На данный момент страница кажется немного пустой, но это нормально — именно так сейчас и должна выглядеть главная страница:

Теперь наша главная страница практически готова. По-прежнему необходимо добавить некоторые меню и окно поиска, но мы вернемся к этому немного позже. Теперь мы должны создать страницу макета. Страница макета — это страница, позволяющая связать поля данных с макетом на странице. Для этого следует выбрать "Параметры сайта", "Главные страницы" и макеты страниц. Я щелкаю кнопку "Создать" в ленте и выбираю элемент "Макет страницы". При появлении экрана "Новый макет страницы" я выбираю тип содержимого, который необходимо связать с этим макетом страницы. Надеюсь, вы помните, что ранее в этой статье я описал создание пользовательского типа содержимого и вызова его в макете "DW Layout". Поэтому в поле "Связанный тип содержимого" я просто выбираю мой тип содержимого "DW Layout". Я присваиваю ему URL-адрес, название и описание — и все готово! Теперь я могу создать свою страницу макета. В данном случае я указал "DWLayoutPage.aspx" в качестве URL-адреса данной страницы, Dreamweaver Layout Page в качестве названия, а также добавил следующее описание: Layout page based on Dreamweaver tutorial site (Страница макета на основе учебного сайта Dreamweaver).

Итак, моя страница макета создана, но элементы управления для нее отсутствуют. Мы должны добавить элементы управления на страницу и привязать их к настраиваемым полям в типе контента, который был описан ранее: LeftStoryImage, LeftStoryText и т. д. Кроме того, необходимо также добавить элементы управления заполнителем ASP.NET, которые соответствуют контейнерам заполнителя, добавленным на главную страницу. Таким образом, данные в каждом поле связываются с контейнером, а данный контейнер предоставляет данные для соответствующего заполнителя контейнера на главной странице — именно так наши данные отображаются в нужном месте на главной странице.

Если вы внимательно изучите данные главной страницы, представленные выше, вы увидите, что я добавил четыре заполнителя содержимого: PlaceHolderMain, PlaceHolderLeft, PlaceHolderCenter и PlaceHolderRight. Необходимо добавить эти заполнители на страницу макета, а затем поместить в каждый из них соответствующее поле типа содержимого. Для этого я снова перетащу новую страницу макета (DWLayoutPage.aspx) из экрана Проводника галереи главных страниц в приложение Dreamweaver. По умолчанию страница макета включает один элемент управления заполнителем, которому уже присвоено имя PlaceHolderMain, поэтому его добавление не требуется. Однако для добавления остальных элементов управления я использую такую стандартную разметку элементов управления ASP.NET, как, например, следующая:

<asp:Content ContentPlaceholderID="PlaceHolderLeft" runat="server">

</asp:Content>

Как вы можете видеть, я просто присвоил этому элементу управления идентификатор PlaceHolderLeft, а затем добавил еще два элемента управления с идентификаторами PlaceHolderCenter и PlaceHolderRight.

Если речь идет о фактических полях, которые требуются на странице макета, их в действительности не так много. Страница содержит поле основного содержимого, включенное в базовый класс, из которого наследуется наш пользовательский тип содержимого. Это поле называется просто PublishingPageContent. Так как это включается в основное тело страницы, я добавил элемент управления публикацией в раздел PlaceHolderMain, поэтому данный раздел выглядит следующим образом:

<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">

<PublishingWebControls:RichHtmlField id="PageContent" FieldName="PublishingPageContent" DisableInputFieldLabel="true" runat="server"/>

</asp:Content>

Для каждого из трех других заполнителей требуются два поля — поле изображения и поле форматированного текста. Поэтому я добавляю их и снова использую имя поля типа содержимого в атрибуте разметки FieldName. Далее приведен пример элемента управления PlaceHolderLeft; элементы управления центральным и правым заполнителями выглядят аналогичным образом:

<asp:Content ContentPlaceholderID="PlaceHolderLeft" runat="server">

<PublishingWebControls:RichImageField FieldName="LeftStoryImage" runat="server"/>

<PublishingWebControls:RichHtmlField id="LeftTextContent" FieldName="LeftStoryText" DisableInputFieldLabel="true" runat="server"/>

</asp:Content>

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

Для этого мы переходим в библиотеку страниц. Я щелкаю "Создать" в ленте и выбираю макет "DW Layout". Теперь он отображается в новом меню, так как данный макет основан на типе содержимого, наследуемого из типа содержимого страницы приветствия:

Я заполняю необходимые свойства, и это выглядит примерно следующим образом:

Хорошо — теперь мы готовы опробовать это! Для начала я возвращаюсь в галерею главных страниц и публикую главную страницу (index.html). Пока я этого не сделаю, я не смогу выбрать ее в качестве главной страницы сайта. Затем следует вернуться в настройки сайта (в параметрах главной страницы) и выбрать свою главную страницу в качестве главной страницы сайта. Я никогда не задаю эту страницу в качестве главной страницы системы, так как сначала необходимо убедиться, что все работает должным образом. Если вы допустили ошибки при создании главной страницы и назначили ее в качестве главной страницы системы, у вас могут возникнуть серьезные проблемы при попытке исправить эту ситуацию.

Теперь я могу вернуться в библиотеку страниц и щелкнуть только что созданную страницу dwhome.aspx. Это приводит к выводу этой страницы в браузере, чтобы отредактировать ее. Как вы можете видеть, все вместе функционирует совсем неплохо:

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

Изображения представляют значительно меньший интерес. Сначала необходимо загрузить их с локального диска в папку "Изображения" SharePoint. Когда они окажутся в этой папке, я смогу воспользоваться всеми преимуществами еще одной функции публикации в SharePoint 2013, которая называется визуализацией изображений (Image Renditions). Эта функция позволяет создавать пользовательские размеры визуализации изображения. В этом случае изображения на учебной сайте Dreamweaver имели один и тот же размер: 316 пикселей в ширину и 130 пикселей в высоту. Для имитации этого я перехожу в меню "Site Settings" (Параметры сайта), а затем выбираю функцию "Image Renditions" (Визуализация изображений) (в разделе "Look and Feel" (Внешний вид и функции)). Отображаются три готовых визуальных представления; я просто щелкнул ссылку, чтобы добавить новый элемент, и создал визуальное представление с описанными размерами. Я присвоил этому представление имя Column Image. После добавления изображения на страницу я смог выбрать, какое визуальное представление изображения следует использовать для отображения изображения на странице; я выбрал визуальное представление Column Image, и этого достаточно для того, чтобы выровнять элементы так же, как они отображаются на сайте Dreamweaver.

По завершении у меня получилось представление, очень похожее на представление исходно сайта Dreamweaver; оригинальное изображение отображается сверху, а версия SharePoint — непосредственно под ним:

Сайт Dreamweaver:

Сайт SharePoint:

Все выглядит действительно замечательно; в качестве основного отличия следует отметить только цвет и шрифт некоторых встроенных тегов, таких как Н2 и Н3. Теперь я могу исправить это, просто откорректировав данные области в таблице стилей; можно внести изменения для отдельных компонентов или для всех тегов H2, H3 и т. д.

После внесения этих незначительных изменений CSS я получил страницу, которая по сути является точной копией исходного сайта Dreamweaver. На данный момент я собираюсь продолжить работу и сделать страницу dwhome.aspx домашней страницей моего сайта. И, наконец, я хочу добавить некоторые функции SharePoint на свою главную страницу (речь идет об упомянутых ранее функциях — навигации и окне поиска).

Для начала я перетащу главную страницу обратно из экрана Проводника на сайт Dreamweaver. В браузере я перейду в меню "Действия сайта" и выберу элемент "Дизайнер". Я щелкну пункт 4 "Edit Master Pages" (Редактирование главных страниц), а затем щелкну страницу index.html, которая является главной страницей в рамках этого упражнения. Я снова открываю режим предварительного просмотра и выбираю меню "Snippets" в верхнем правом углу. Это позволит мне воспользоваться всеми преимуществами этой просто поразительной новой функции, благодаря которой можно выбирать различные стандартные элементы страницы SharePoint, такие как верхняя и вертикальная навигация, название и логотип сайта, окно поиска, веб-части и т. д. Чтобы сделать этот сценарий немного более интересным с визуальной точки зрения, я добавил на сайт несколько новых страниц с именами "Products" (Продукты) и "Careers" (Вакансии) и создал для них навигационные ссылки.

На главной странице я просто добавил новые элементы DIV для обозначения места, где должны размещаться элементы навигации и окно поиска. Затем я перешел на страницу "Snippets" (Фрагменты) и скопировал код для верхней панели навигации и окна поиска, а затем вставил его в соответствующий элемент DIV. Теперь моя главная страница выглядит следующим образом (код фрагмента удален для наглядности; для отображения своих главных страниц достаточно просто выполнить операции копирования и вставки из страницы фрагментов):

<div>

</div>

<div>

</div>

Это итоговый продукт, дополненный меню и окном поиска SharePoint.

Теперь, когда мы закончили работу, следует отметить пару моментов. Во-первых, это в действительности не самый удачный пример главной страницы. Почему? Потому что этот макет отлично подходит для домашней страницы, но для большинства страниц содержимого он является недостаточно гибким. Цель данной статьи на самом деле заключалась в том, чтобы привести хорошо известный пример из мира Dreamweaver и заставить его работать в мире SharePoint с помощью средства Dreamweaver и новых функций средства "Дизайнер" в версии SharePoint 2013. Поэтому я думаю, что мы неплохо справились с поставленной задачей. В идеальном варианте мы бы поместили в макет страницы значительно большее число компонентов, представленных на главной странице. Например, если вы хотите сделать эту главную страницу главной странице системы, вы, вероятно, не будете удовлетворены результатом; вот пример того, как ваши страницы форм и настроек будут выглядеть в этом случае (это страница параметров сайта):

Ой! Возврат главной страницы к исходному состоянию в интерфейсе пользователя на данном этапе кажется практически невозможным. К счастью, вы можете запустить этот маленький фрагмент PowerShell, чтобы восстановить готовую главную страницу:

$w = Get-SPWeb https://yourWebApp

$w.MasterUrl = "/_catalogs/masterpage/v15.master"

$w.Update()

Теперь я бы хотел немного сменить тему и рассмотреть другую главную страницу. Давайте рассмотрим пример главной страницы Contoso.

Выглядит неплохо, не так ли? Ничего особенного, но она включает базовые элементы сайта. Но давайте сделаем эту страницу главной страницей системы и перейдем в настройки для отображения списка или библиотеки.

Заметили, что чего-то не хватает? Строка навигации, которая обычно отображается в верхней части раздела "List Information" (Список сведений) и позволяет вернуться к содержимому списка, отсутствует. Именно поэтому я подчеркиваю это: если вы перейдете на страницу фрагментов, вы не увидите код навигации, который можно использовать в этих целях. Страница фрагментов содержит большой объем полезного кода, но в нее невозможно включить все элементы управления, подходящие для каждой конкретной ситуации. Итак, как можно устранить эту проблему? Если вы не можете найти нужное вам на странице фрагментов, необходимо открыть файл v15.master и извлечь из него необходимые фрагменты кода. Код, ответственный за навигацию, выглядит в файле v15.master следующим образом:

<SharePoint:AjaxDelta id="DeltaPlaceHolderPageTitleInTitleArea" runat="server">

<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server">

<SharePoint:SPTitleBreadcrumb

runat="server"

RenderCurrentNodeAsLink="true"

SiteMapProvider="SPContentMapProvider"

CentralAdminSiteMapProvider="SPXmlAdminContentMapProvider">

<SharePoint:ThemedForegroundImage ThemeKey="spcommon" ImageUrl="/_layouts/15/images/spcommon.png" CssClass="ms-pageTitle-separatorImg" runat="server" />

</span>

</PATHSEPARATORTEMPLATE>

</SharePoint:SPTitleBreadcrumb>

</asp:ContentPlaceHolder>

</SharePoint:AjaxDelta>

Теперь, если вы просто попробуете скопировать его в главную страницу HTML, у вас ничего не получится; это связано с тем, что включена разметка ASP.NET, а мы работаем с HTML-страницей. SharePoint 2013 использует специальные теги, которые позволяют "охватить" теги ASP.NET, благодаря чему возможно обновление созданной главной страницы .master, которая является "дубликатом" страницы HTML. Для этого следует поместить разметку ASP.NET в теги комментариев; открывающим тегам должен предшествовать элемент "MS:", а закрывающим тегам — элемент "ME:". Вот так выглядит тот же самый код после добавления этих оболочек, и именно такой код я собираюсь вставить в главную страницу HTML.

</span>

</PATHSEPARATORTEMPLATE>

Теперь, когда я вставил этот код в главную страницу, мы можем отметить, что на странице настроек списка снова отображается панель навигации.

На этом я и хочу завершить этот длинный пост. У вас была возможность узнать, каким образом новые функции средства "Дизайнер" версии SharePoint 2013 позволяют использовать предпочтительный HTML-редактор для выполнения повседневных задач по управлению содержимым. Мы смогли воссоздать учебный сайт Dreamweaver в среде SharePoint 2013 с помощью средства Dreamweaver, что является значительным шагом вперед по сравнению с предыдущими версиями SharePoint. Я также показал вам, каким образом можно использовать такие функции, как галерея фрагментов, для добавления функций SharePoint на главные страницы, а также что делать, если вам нужны функции, которые вы не можете найти в галерее фрагментов. Кроме того, эту же методику использования предпочтительного HTML-редактора можно применять при работе с другой важной функцией SharePoint 2013 — функцией отображения шаблонов. Это обычно касается результатов поиска, но функция поиска настолько эффективно интегрирована в эту версию SharePoint, что вы найдете данную методику крайне полезной. Изучите этот блог для получения полного представления о создании решения с использованием правил запроса и типов результатов.

Во вложении к этому посту представлена отформатированная версия статьи в формате Word, включая элементы исходного кода, использованные мною для создания итоговой версии учебного сайта Dreamweaver в SharePoint.

Это локализованная запись блога. Исходная статья находится по адресу Using Dreamweaver and Design Manager with SharePoint 2013

Использование функций Dreamweaver и "Дизайнер" в версии SharePoint 2013

Additional resources