SharePoint для интернет-сайтов. Брендинг

Эта статья из цикла «SharePoint для интернет-сайтов»

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

В этой статье мы рассмотрим:

  • Структура сайта
  • Главные страницы (Master Pages)
      • SharePoint Designer
  • Макет страницы

Структура сайта

Итак, начнем работу с создания сайта на основе шаблона публикации (рис. 1).

image

Рис. 1. Внешний вид сайта, созданного из шаблона публикации

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

image

Рис. 2. Структура сайта

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

1. Возможности «из коробки» — изменять конент в браузере, используя при этом встроенный WYSIWYG-редактор (открывается при редактировании страницы);

2. Встроенные темы – возможность изменения цветовой схемы сайта. Также можно создать цветовую схему (рис. 3);

image

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

3. Встроенные темы и главная страница – на основе главной страницы можно создать собственную главную страницу и поработать с элементами на ней, а также со стилями;

4. Возможность создать дизайн любой сложности – в этом случае также ведется работа над созданием главной страницы и стилей, но уже профессиональными веб-студиями (пример хорошего дизайна — http://ferrari.com/)

Рассмотрим структуры страницы и поймем, что нужно сделать дальше.

Главные страницы (Master Pages)

Если говорить про структуру страницы в целом, то она состоит из главной страницы и контента (рис. 4) Таким образом, основная работа при создании веб-сайта с использованием SharePoint – создание главной страницы.

image

Рис. 4. Общая структура страницы

На рис. 5 изображена структура страницы SharePoint. Как вы можете видеть, главная страница включает ленту (которую можно скрыть), заголовок, область для контента и зону для панели разработчика. Безусловно, вы можете создать главную страницу, которая по структуре может не соответствовать изображенной на рисунке ниже.

image

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

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

SharePoint Designer

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

  • default.master – страница, оставшаяся от SharePoint 2007. Действия сайта в правой части, отсутствует лента;
  • v4.master – основная страница для SharePoint 2010;
  • minimal.master – страница почти ничего не содержит, используется для приложения поиска и Office Web Apps. Навигация отсутствует;
  • simple.master – используется для страниц ошибок и авторизации;
  • nightandday.master – появляется при активации Инфрастуктуры публикации SharePoint Server.

Лучше всего использовать minimal.master. Создайте копию, а дальше работайте с ней в SharePoint Designer 2010, вставляя туда HTML-разметку, CSS или элементы управления.

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

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

image

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

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

image

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

После этого дизайн вашего веб-сайта в зависимости от вложенных усилий станет отличаться от стандартного.

Если вы хотите, чтобы контент на страницах располагался не в одном блоке, то придется создать Макет страницы.

Макет страницы

Макет страницы (page layout) – это шаблон для отображения контента. При создании страницы нужно указать ее макет (рис. 8). Как вы видите, в SharePoint уже есть некоторое количество готовых макетов, но при необходимости можно создать свой макет.

image

Рис. 8. Выбор макета при создании новой страницы

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

После этого перейдите в каталог главных страниц и создайте там новый макет страницы (рис. 9) на основе нашего типа контента.

image

Рис. 9. Создание нового макета страницы

Далее откройте макет (представляет собой ASPX страницу) для редактирования в SharePoint Designer. При этом можете добавить созданные вами поля из типа контента на макет страницы. После работы сохраните файл. Теперь можно создавать новые страницы на основе созданного макета страниц.

Итак, в этой статье мы рассмотрели возможности SharePoint для создания брендинга.

Реклама

SharePoint для интернет-сайтов. Брендинг: Один комментарий

  1. Добрый день! Подскажите пожалуйста по Sharepoint 2013. Создана пользовательская тема в Параметры сайта-«Варианты оформления», но она не появляется в Параметры сайта-«Изменение оформления». На другом сайте все работает нормально. В чем может быть причина?

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

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

Логотип WordPress.com

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

Фотография Twitter

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

Фотография Facebook

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

Google+ photo

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

Connecting to %s