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

Это статья серии “Введение в SharePoint 2010

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

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

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

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

Страницы

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

image

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

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

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

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

image

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

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

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

image

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

Темы

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

image

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

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

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

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

image

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

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

image

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

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

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

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

image

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

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

CSS

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

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

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

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

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

.s4-title {

background:#ff9b21 repeat-y scroll 0 0;

}

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

http://<портал>/Style%20Library/<язык>/<Themable>/

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

image

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

image

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

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

Главные страницы

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

image

Рис. 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, страницы или выбранного элемента.

image

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

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

image

Стр. 4.12. Выбор главной страницы сайта

В этой статье описывалась настройка внешнего вида SharePoint 2010.

В следующей статье рассмотрим Business Intelligence в SharePoint 2010.

Advertisements

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

  1. Я б скорее назвал статью «Знакомство с настройка внешнего вида SharePoint 2010».
    Совсем не освещена тема xslt
    >В SharePoint 2010 есть следующие типы главных страниц
    нет ни каких типов:) Вы привели список всех мастер страниц, которые идут в поставке с SharePoint 2010. Стоит упомянуть, что создавать master pages удобнее всего через SPD, но нужно помнить о призрачности файлов и соответствующем влиянии на производительность. Кроме того, хорошо бы рассказать про starter master page.

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

    Поэтому, эта статья исключительно ознакомительного характера, явно написанная человеком без опыта кастомизации дизайна SharePoint 2010:)

    Почувствовал себя вредным троллем:)

    • Игорь, видимо вы не совсем поняли направленность статей.

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

  2. Уведомление: Технические материалы по продуктам и решениям Microsoft на русском языке – июнь 2011 | Alexander Knyazev: блог

  3. Здравствуйте, Дмитрий. Позновательная статья по внешнему виду. Могли бы Вы посоветовать, что еще можно посмотреть по данной тематике.

  4. Спасибо Дмитрий за отличную статью, небольшое уточнение:

    Для Sharepoint 2010 возможность «Инфраструктура публикации» называется «Публикация SharePoint Server»
    (Для создания и публикации страниц, основанных на готовых макетах, создайте библиотеку веб-страниц и вспомогательные библиотеки. )

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s