Глава 4. Настройка внешнего вида SharePoint 2010

В предыдущей главе рассматривалось создание сайта Школьная библиотека (шаблон сайта можно найти в приложении к предыдущей главе).

В этой главе рассматривается настройка внешнего вида SharePoint 2010

В этой части руководства рассматриваются следующие темы:

• Страницы
• Темы
• CSS
• Главные страницы

Самый простой способ изменить внешний вид страниц – редактирование страницы прямо в браузере. По умолчанию, страницы в SharePoint Foundation и сайта группы являются wiki-страницами. При редактировании страниц на ленте есть специальная Формат текста(рис. 4.1).

Рис. 4.1. Лента при редактировании wiki страницы

На самом деле данную возможность включить для любого типа сайтов, для чего в Параметрах сайта нужно для коллекции сайтов нужно активировать возможность Инфраструктура публикации SharePoint Server. Затем на уровне сайта активировать возможность Публикация SharePoint Server.

Рассмотрим подробнее группы элементов на ленте

• Правка – сохранение документа, извлечение для редактирования. Для того чтобы измененную страницу увидели все пользователи, нужно ее вернуть;
• Буфер обмена – вставка, копирование, отмена;
• Шрифт – детальная настройка шрифта – размер, шрифт, начертание, цвет;
• Абзац – маркеры, отступы, выравнивание;
• Стили – предлагается список стилей для настройки фрагмента выделенного текста;
• Макет – предлагается список готовых разметок (рис. 4.2)

Рис. 4.2. Макеты текста

• Разметка – можно применять стили разметки, добавить языковой атрибут к html, выбрать контент страницы на основе html, поработать с исходным кодом html.

На вкладке Вставка (рис. 4.3) также можно обнаружить много полезных команд.

Рис. 4.3. Доступные элементы для вставки на страницу

Чтобы попасть в меню управления темами на сайте SharePoint 2010, нужно зайти в Параметры сайта, и в группе Внешний вид и функции перейти к Теме сайта (рис. 4.4).

Рис. 4.4. Меню выбора темы сайта

Данный способ настройки предоставляет возможность выбора из предопределенного списка тем.

К счастью, есть возможность создавать темы с помощью Microsoft PowerPoint 2010. Рассмотрим этот процесс подробнее.

После запуска PowerPoint переходим на вкладку Дизайн, кликаем по элементу Цвета и выбираем в выпадающем списке Создать новые цвета темы (рис. 4.5).

Рис. 4.5. Выпадающий список цветов тем.

В появившемся диалоге (рис. 4.6)выбираем понравившиеся цвета, вводим имя и нажимаем на Сохранить.

Рис. 4.6. Окно создания новых цветов темы.

Кроме цветов можно также настроить шрифты, кликнув по соответствующему элементу в группе Темы на вкладке Дизайн.

Сохраним результат как тему, для чего нужно в меню Файл выбрать Сохранить как, и в поле Тип файла указать Тема Office (*.thmx). Остается загрузить полученный файл на сайт.

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

Рис. 4.7. Список тем сайта

В SharePoint Server 2010 отредактировать тему сайта можно прямо в браузере.

Есть 2 подхода для работы с CSS

1. Альтернативные CSS – подключение CSS к сайту и всем его дочерним сайтам;

2. Подключение CSS к главной странице – с помощью специального тэга CssRegistration можно подключить к мастер-странице один или несколько CSS файлов.

Альтернативные CSS можно использовать только в SharePoint Server с включенной возможность Инфраструктура публикации.

Создадим файл Alternate.css (название может быть любым) со следующим содержанием:

.s4-title

Сохраним созданный файл по адресу

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

Рис. 4.8. Путь до альтернативной таблицы CSS

Рис. 4.9. Результат применения альтернативной таблицы CSS

Вариант подключения CSS к главной странице рассмотрим чуть ниже.

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

Рис. 4.10. Структура страницы

В SharePoint 2010 есть следующие типы главных страниц

1. default.master – страница от SharePoint 2007. Действия сайта в правой части, отсутствует лента;

2. v4.master – основная страница для SharePoint 2010;

3. minimal.master – страница почти ничего не содержит, используется для приложения поиска и Office Web Apps. Навигация отсутствует;

4. simple.master – используется для страниц ошибок и авторизации;

5. nightandday.master – появляется при активации Инфрастуктуры публикации SharePoint Server.

Для работы с мастер-страницами используется SharePoint Designer 2010. Рекомендуется работать с копиями мастер страниц.

Для работы со стилями в SharePoint Designer на ленте есть вкладка Стиль (рис. 4.11), функционал которой размещен в четырех группах

• Главная страница – управление подключениями главных страниц;
• Создание – создание и управление стилями;
• Применение стилей – выбор режима применения стиля;
• Свойства – свойства тега, CSS, страницы или выбранного элемента.

Рис. 4.11. Вкладка Стиль на ленте SharePoint Designer 2010

После внесения изменений нужно сохранить файл, и опубликовать на портал в качестве основного документа. Для того, чтобы использовалась созданная нами главная страница, нужно указать ее в качестве главной (стр. 4.12), для чего в параметрах сайта нужно выбрать Главная страница.