Обзор Дизайнера в SharePoint
Важно!
Такая расширяемость доступна только для классического интерфейса SharePoint. Эту возможность нельзя использовать вместе с современным интерфейсом в SharePoint Online, например на сайтах для общения. Мы больше не рекомендуем использовать классический интерфейс и эти методы применения фирменной символики.
Узнайте, как использовать Дизайнер для применения фирменной символики на сайте SharePoint. Дизайнер — это компонент, доступный на сайтах публикации как в SharePoint, так и в Office 365.
Общие сведения о Дизайнере
Если ваш сайт SharePoint должен представлять торговую марку организации и не быть похожим на SharePoint, можете создать собственное оформление с помощью компонента "Дизайнер". Дизайнер — это компонент SharePoint, который позволяет создать собственное, выверенное до пикселя оформление, используя знакомые средства веб-дизайна. Дизайнер — это компонент, доступный на сайтах публикации как в SharePoint, так и в Office 365.
Используя Дизайнер, вы можете спроектировать дизайн веб-сайта с помощью любого средства веб-разработки или HTML-редактора, который вы предпочитаете, применяя только HTML и CSS, после чего дизайн передается в SharePoint. Дизайнер это главный ресурс и интерфейс, в котором можно управлять всеми аспектами пользовательского дизайна.
Создание визуального дизайна сайта часто входит в более крупный процесс, в котором участвуют несколько людей или организаций. Дорожная карта задач с более широкой точки зрения см. в статье Проектирование и фирменная символика в SharePoint.
На высоком уровне дизайнер выполнит следующие задачи.
Изучит основные концепции проектирования SharePoint. Дополнительные сведения см. в статье Обзор модели страниц SharePoint.
Создаст макет дизайна с помощью HTML и CSS. Создание дизайна основной навык веб-дизайнера, который в этой статье не рассматривается.
Реализует дизайн с помощью Дизайнера. В этой статье представлен обзор Дизайнера и описывается его использование для реализации визуального дизайна.
Использование Дизайнера для оформления сайта
Если посмотреть на Дизайнер, вы увидите ряд ссылок с левой стороны, представляющие высокоуровневые задачи, которые необходимо выполнить. В зависимости от дизайна и требований для сайта не все эти задачи потребуется выполнить, при этом они необязательно выполняются в указанном порядке. Тем не менее эта последовательность служит отправной точкой.
Подготовка к работе
Прежде чем использовать Дизайнер, необходим дизайн. Вы можете создать собственный или использовать готовый шаблон веб-сайта. "Дизайн" — это просто группа файлов, которые реализуют дизайн сайта, например:
по крайней мере один HTML-файл, который будет преобразован в главную страницу SharePoint;
один или несколько CSS-файлов;
файлы JavaScript;
изображения;
другие вспомогательные файлы.
При создании макета сайта на HTML и CSS вы, скорее всего, получите несколько HTML-файлов, в которых реализуются различные страницы или типы страниц. Помните, что только один из этих файлов будет преобразован в главную страницу (если у не несколько каналов устройства, где у каждого канала есть собственная главная страница — см. следующий раздел). После создания других элементов сайта, например макетов страниц и шаблонов отображения, с помощью Дизайнера можно перенести разметку из HTML-макета в HTML- и CSS-файлы, связанные с макетом страницы или шаблоном отображения.
Прежде чем начать, вам также следует получить необходимые разрешения SharePoint. Чтобы использовать Дизайнер требуется по крайней мере уровень разрешений Дизайнера.
Управление каналами устройств
Даже перед проектированием сайта следует учесть, на какие устройства будет ориентирован сайт и каким будет пользовательский интерфейс на каждом устройстве. Например, можно оптимизировать дизайн вашего сайта для определенного класса смартфонов и планшетных ПК.
В зависимости от того, какие каналы вы определите, может потребоваться несколько дизайнов, а значит и несколько HTML-файлов, каждый из которых преобразуется в отдельную главную страницу. Кроме того, каждый HTML-файл (и каждая главная страница) может ссылаться на собственный CSS-файл. Перед проектированием сайта каналы устройств следует проанализировать в первую очередь.
С помощью каналов устройств можно отображать один сайт публикации разными способами, сопоставляя различные дизайны с разными устройствами. У каждого канала может быть собственная главная страница, связанная с таблицей стилей, которая оптимизирована для определенного устройства. Каждый канал указывает подстроки агента пользователя для одного или нескольких устройств, например "ОС Windows Phone". Эти правила определяют, какие устройства включены в каждый канал. Когда посетители просматривают сайт, каждый канал захватывает трафик для заданного устройства или класса устройств, таких как Windows Phone, и посетители видят сайт с дизайном, оптимизированным для их устройства.
Каналы устройств создаются и хранятся в списке SharePoint, в которых учитывается порядок, потому что у каналов устройств также есть рейтинг. Каналы устройств в списке упорядочены сверху вниз, а правила включения обрабатываются в заданном порядке. Это означает, что каналы устройств с наиболее конкретными правилами должны находиться вверху. Например, канал для "Windows Phone 7.0" должен идти перед каналом для "ОС Windows Phone".
Отправка файлов дизайна
При создании дизайна можно использовать любой HTML-редактор и работать с файлами локально на вашем компьютере. Но, в конце концов, вам потребуется загрузить эти файлы в коллекцию главных страниц сайта SharePoint, чтобы с помощью Дизайнера преобразовать, изучить и улучшить ваш дизайн.
Самый простой способ отправить файлы и продолжить работу с ними сопоставить диск на вашем компьютере с коллекцией главных страниц сайта SharePoint. При этом папка на компьютере будет сопоставлена с коллекцией главных страниц, а вы сможете работать с файлами, которые находятся на сервере в SharePoint так же, как с локальными файлами.
После сопоставления сетевого диска можно отправить проект в SharePoint, просто скопировав файлы конструктора в папку на сопоставленном диске компьютера, подключенного к SharePoint. После преобразования HTML-файла в главную страницу SharePoint и создания макетов страниц и отображения шаблонов, каждый из которых имеет свой собственный связанный HTML-файл, вы можете продолжить редактирование связанных HTML-файлов в редакторе HTML на компьютере. При каждом сохранении файла на сопоставленном диске SharePoint автоматически синхронизирует файлы на компьютере с коллекцией главных страниц. Вы можете создать собственную структуру папок на сопоставленном диске, и эта структура поддерживается SharePoint и отображается в коллекции главных страниц. Все файлы, связанные с одной конструкцией, следует сохранить в одной папке, а затем скопировать эту папку на сопоставленный диск, когда вы будете готовы к отправке макета.
Дополнительные сведения см. в разделе Практическое руководство. Сопоставление сетевого диска с коллекцией главных страниц SharePoint.
Изменение главных страниц
Создание главной страницы с фирменной символикой, которая содержит все требуемые функции SharePoint, например элементы навигации и поиска, по сути, состоит из трех этапов:
преобразование HTML-файла в главную страницу SharePoint;
предварительный просмотр главной страницы и устранение ошибок;
добавление фрагментов кода SharePoint на главную страницу.
Каждый из этих трех шагов выполняется на другой странице в Дизайнере.
Преобразование HTML-файла
Основная функция Дизайнера — преобразование HTML-дизайна в главную страницу SharePoint. Для успешного отображения главной страницы SharePoint она должна содержать множество элементов ASP.NET и элементов, относящихся к SharePoint. При преобразовании HTML-файла в главную страницу Дизайнер создает MASTER-файл, содержащий все эти обязательные элементы, поэтому вам не следует о них волноваться. Во время преобразования некоторые элементы HTML-разметки (например, комментарии) также добавляются в исходный HTML-файл.
После преобразования HTML-файл и главная страница SharePoint связываются, так что после изменения и сохранения HTML-файла на сопоставленном диске главная страница обновляется автоматически. В Дизайнер у главной HTML-страницы есть свойство с именем Связанный файл, который определяет ли, синхронизируются ли изменения в HTML-файле с MASTER-файлом.
Примечание.
Дизайнер также позволяет начать дизайн с минимальной главный страницы. В этом случае вам не нужно начинать с HTML, вы можете создать главную HTML-страницу, содержащую минимальные элементы, необходимые для отображения главной страницы в SharePoint, а затем спроектировать свой дизайн, изменив главную HTML-страницу.
Предварительный просмотр главной страницы
Помимо преобразования главной страницы, Дизайнер предоставляет предварительный просмотр на стороне сервера (и предварительный просмотр во время разработки в редакторе HTML), чтобы вы могли получить динамический предварительный просмотр главной страницы и устранить любые проблемы, которые могут препятствовать отрисовке страницы. Например, HTML-файл должен соответствовать XML, поэтому может потребоваться устранить незначительные проблемы с разметкой, такие как предоставление закрывающих тегов для всех элементов. Чтобы устранить проблемы, необходимо изменить HTML-файл, сохранить его, а затем обновить предварительный просмотр на стороне сервера.
При предварительном просмотре главной страницы можно использовать параметр Изменить страницу предварительного просмотра в левом верхнем углу, чтобы просмотреть главную страницу вместе с любой существующей страницей или создать новую страницу для предварительного просмотра. В отличие от предварительного просмотра во время разработки главной страницы HTML в редакторе HTML, этот серверный предварительный просмотр является полностью функциональным, поэтому вы можете изменить HTML-файл, сохранить его так, чтобы последние изменения синхронизировали со связанным MASTER-файлом, а затем обновить динамический предварительный просмотр и просмотреть последние изменения макета в браузере.
Добавление фрагментов
После преобразования главной страницы и ее изучения можно приступить к добавлению фрагментов кода на главную страницу. Фрагмент кода — это HTML-представление компонента SharePoint, например элемента управления навигацией, поля поиска или веб-части, которое можно добавить на главную страницу. Добавление фрагментов на главную страницу — это быстрый способ реализации полного спектра функций SharePoint на главной странице. Добавление фрагментов состоит из трех этапов:
поиск фрагментов в коллекции фрагментов и их настройка;
копирование фрагментов на главную HTML-страницу;
предварительный просмотр и изменение стиля фрагментов с помощью CSS.
Дополнительные сведения см. в статье Фрагменты кода в компоненте "Дизайнер" SharePoint.
Поиск фрагментов в коллекция фрагментов и их настройка
Коллекция фрагментов позволяет быстро узнать, какие компоненты доступны для типа файла, который вы редактируете: главную страницу или макет страницы. На ленте выберите фрагмент. В сетке свойств справа можно настроить свойства для этого экземпляра фрагмента, а затем выбрать Обновить , чтобы обновить HTML-фрагмент слева.
Копирование фрагментов на главную HTML-страницу
После настройки фрагмента скопируйте его в буфер обмена, а затем вставьте его в нужном месте в HTML-файле. HTML-дизайн может уже содержать макет или статические элементы управления, в таком случае вы можете удалить или закомментировать их, заменив их на динамические фрагменты из коллекции фрагментов.
Предварительный просмотр и изменение стиля фрагментов с помощью CSS
После копирования фрагментов в HTML-файл и сохранения изменений можно обновить главную страницу на сервере, чтобы увидеть, как отображается элемент управления. Фрагменты содержат разметку, которая позволяет просматривать страницу во время разработки в HTML-редакторе, но в серверном режиме предварительного просмотра страница отображается со всеми интерактивными данными, например элемент управления навигацией покажет текущую структуру навигации сайта с динамическими данными из источника данных.
По умолчанию большинство фрагментов наследуют стили из главной таблицы стилей SharePoint, corev15.css. Для задания стиля фрагмента необходимо указать, какие стили применяются к фрагменту, и переопределить с помощью настраиваемой каскадной таблицы стилей (CSS). Для определения этих стилей по умолчанию можно использовать средства браузера, например инструменты разработчика в Internet Explorer. В режиме предварительного просмотра главной страницы на сервере в Internet Explorer нажмите клавишу F12, нажмите кнопку Найти, а затем выберите параметр Выбрать элемент щелчком. После этого вы сможете щелкнуть фрагмент и посмотреть, какие именно стили следует переопределить, добавив CSS в ту или иную таблицу стилей, с которой связана ваша главная страница.
Изменение шаблонов отображения
Если вы используете локальную установку SharePoint Server, вы можете использовать веб-часть "Поиск контента" и другие веб-части, управляемые поиском, для отображения результатов поисковых запросов в виде содержимого на страницах. Веб-части, управляемые поиском, используют шаблоны отображения для двух основных целей:
для сопоставления управляемых свойств, которые возвращаются в списке результатов, со свойствами, которые будут доступны для JavaScript, включая любой пользовательский код JavaScript, который вы реализуете;
для показа и настройки стиля отображения этих свойств с помощью HTML и CSS.
При работе с главными страницами и макетами страниц вы редактируете связанный HTML-файл, но не MASTER- или ASPX-файл. Аналогичным образом шаблоны отображения состоят из HTML-файла и связанного JS-файла, при этом редактируется только HTML-файл. При каждом сохранении этого HTML-файла SharePoint автоматически обновляет связанный JS-файл.
Если вы хотите создать пользовательский шаблон отображения, сначала необходимо скопировать, а затем изменить один из существующих шаблонов отображения. Это полезно, так как шаблоны отображения по умолчанию содержат сведения в комментариях в HTML-файлах, и вы будете иметь правильную базовую структуру страницы и платформу для базовых задач, таких как сопоставление полей ввода.
Изменение макетов страниц
Процесс создания макета страницы немного отличается от создания главной страницы. В случае с главной страницей вы начинаете с HTML-дизайна, преобразуете его в главную страницу SharePoint и продолжаете редактировать соответствующий HTML-файл. Но при работе с макетом страницы вы сначала создаете макет в Дизайнере, который формирует ASPX- и HTML-файл, а затем изменяете соответствующий HTML-файл с сопоставленного диска в HTML-редакторе. Дизайнер используется для создания макета страницы, чтобы получить правильный набор полей для макета страницы.
При создании макета страницы вы выбираете главную страницу для предварительного просмотра и выбираете тип контента макета страницы. Тип контента — это схема полей и типов данных, а поля, доступные в типе контента макета страницы, определяют, какие элементы управления полями доступны на макете страницы. Сначала создайте макет страницы в браузере, чтобы затем добавить в него поля.
После создания макета страницы со связанным HTML-файлом, оставшиеся действия аналогичны созданию главной страницы.
Изучите макет страницы и исправьте ошибки, а затем сохраните HTML-версию.
Добавьте фрагменты в макет страницы (настройте, скопируйте, просмотрите и задайте стиль).
В коллекции фрагментов доступны различные фрагменты для макетов страниц и эталонных страниц, а лента отображает только те фрагменты, которые относятся к файлам этого типа. Например, фрагменты навигации и поля поиска доступны только для главной страницы, а поля страницы доступны только в макете страницы.
При проектировании макета страницы основной задачей является размещение и стиль элементов управления поля страницы, в котором будет отображаться содержимое, созданное авторами контента. Стили для макета страницы могут находиться в любой таблице стилей, на которой ссылается главная страница, или каждый макет страницы может ссылаться на собственную таблицу стилей. Если html-макет содержит содержимое, более подходящее для макета страницы, чем эталонная страница, необходимо перенести это содержимое из главной html-страницы, а затем применить эти стили к правильным элементам управления и элементам соответствующего макета страницы.
Дополнительные сведения см. в разделе Практическое руководство. Создание макета страницы в SharePoint.
Создание тем и вариантов оформления
В Office 365, но не в локальных средах SharePoint, с помощью Дизайнера можно создавать темы и варианты оформления. Тема — это набор шрифтов и цветов, которые можно применить к специальному оформлению (то есть к эталонной странице). Темы определяются в XML-файлах, отправляемых в коллекцию тем. Если вы хотите, чтобы ваша эталонная страница поддерживала темы, на нее нужно добавить специальную разметку, используемую SharePoint для вставки шрифтов и цветов.
Вариант оформления — это всего лишь связь между фоновым изображением, темой (шрифтами и цветами) и оформлением (эталонной страницей). Вариант оформления включает предопределенные элементы дизайна (темы, фоновые изображения и эталонные страницы), которые можно использовать в различных комбинациях.
Публикация и применение дизайна
Большинство ресурсов, используемых дизайнов, такие как изображения, HTML-файлы, CSS-файлы и файлы JavaScript, будут храниться в коллекции главных страниц. Коллекция главных страниц это библиотека документов SharePoint с включенным по умолчанию управлением версиями, которая создает основные и вспомогательные (черновые) версии при каждом изменении файла.
Перед применением дизайна к сайту сначала необходимо опубликовать основную версию каждого файла или актива, используемого дизайном. При создании сайта в тестовой среде следует отключить управление версиями для коллекции главных страниц, чтобы не публиковать каждый файл перед предварительным просмотром сайта. Но это не рекомендуется, если вы работаете с действующим сайтом.
После публикации всех файлов дизайна вы можете применить дизайн, назначив готовые главные страницы сайту. Сайту может быть назначено несколько главных страниц для каждого канала устройств, а на этой странице Дизайнера вы можете применить главную страницу к каналу.
Создание пакета конструктора
Пакет конструктора — это простой способ сбора файлов и ресурсов, используемых в дизайне, их экспорта из одного сайта, импорта на другой сайт и применения дизайна к новому сайту. При реализации и улучшении дизайна действующего семейства веб-сайтов с помощью пакета конструктора можно перенести ваш дизайн.
Пакет разработки это WSP-файл, файл решения SharePoint, который представляет собой специальный тип CAB-файла. При создании или импорте пакета конструктора WSP-файл сохраняется в каталоге решений. После импорта пакета он активируется автоматически. Если главные страницы и макеты страниц были опубликованы до их упаковки и если главные страницы были назначены каналам устройств до упаковки, дизайн автоматически применяется к сайту при развертывании пакета конструктора. В противном случае для применения макета к новому сайту необходимо просто опубликовать файлы дизайна и применить главные страницы к каналам устройства.