Цель лекции. Представить, как при помощи SharePoint Designer и браузера можно быстро отредактировать дизайн сайта. Описываются наиболее простые пути реализации брендинга, позволяющие быстро поменять общий вид узла целиком или отдельных веб-страниц: темы, рисунки, CSS -стили, шаблоны узлов и мастер-страницы.
2.1. Темы
Редактирование дизайна веб-узла SharePoint, или брендинг, особенно актуален при разработке сайтов для Web. Обычно брендинг сайта объединяет шрифтовое и цветовое оформление сайта, а также графику (включая логотипы, навигацию и прочие элементы управления).
На первый взгляд, может показаться, что технология SharePoint предлагает довольно скудные средства дизайна, однако это не совсем так. Существует несколько уровней и программных средств разработки дизайна и функционала сайтов SharePoint:
Браузер (веб-интерфейс) - используется для администрирования веб-узла и настройки самых основных параметров, включая базовые параметры брендинга.
Sharepoint Designer - типичный веб-редактор, предназначен для редактирования, как макета страниц веб-сайта, так и разработки HTML-кода (часто применяется для редактирования сайтов без обращения к коду, наиболее подходящее средство для разработки дизайна ).
Visual Studio .Net - позволяет создать веб-сайт практически с любой необходимой функциональностью (мы оставляем его обсуждение далеко за пределами нашего курса).
Поскольку большинство из перечисленных возможностей было довольно подробно рассмотрено в рамках курса "Введение в SharePoint", мы конспективно остановимся на наиболее характерных средствах браузера и Sharepoint Designer (оставляя применение Visual Studio профессиональным программистам).
(рис 2.1) Настройка внешнего вида портала в браузереДля того, чтобы быстро поменять дизайн сайта средствами браузера, проделайте следующее.
Выберите Действия узла / Параметры.
На странице установки параметров выберите название, логотип и описание портала при помощи верхней ссылки из группы Внешний вид и функции (рис. 2.1).
Щелкните пункт Темы.
Выберите тему портала (рис. 2.2).
(рис 2.2) Выбор темы в браузереВ результате все страницы веб-сайта будут оформлены в соответствии с выбранной темой (рис. 2.3).
(рис 2.3) Тема применена к веб-сайтуВообще говоря, темы - это набор CSS -файлов (каскадных таблиц стилей), служащих для оформления сайта, и некоторых файлов изображений. Темы охватывают все стилевые и шрифтовые настройки, не затрагивая функционал сайта SharePoint. При работе в браузере можно применять только предустановленные темы, а для, собственно, редактирования самих тем, следует "вручную" внести правку в соответствующие файлы.
CSS -файлы, наряду с графическими файлами, хранятся на сервере в папке THEMES, которая, в свою очередь, расположена в папке Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\. Доступ к ней (например, для редактирования) Вы имеете только в том случае, когда сами обслуживаете сервер (например, при работе на выделенном сервере провайдера). Если же Вы просто приобрели услугу SharePoint-хостинга, то несложно перенастроить только текущую тему, которая располагается в папке _themes непосредственно на веб-узле (рис. 2.4).
(рис 2.4) Размещение текущей темы в папке _themesДля создания новой темы вручную (либо правильной установки готовой темы, загруженной, к примеру, из Интернета) выполните на сервере следующие действия.
Перейдите на сервере к папке C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES (рис. 2.5).
Создайте новую папку темы, например (для надежности), скопировав и переименовав тему, наиболее похожую на создаваемую.
(рис 2.5) Создание новой темы на сервере (в папке THEMES)
Переименуйте в этой папке файл с расширением .inf, выбрав название для Вашей новой темы (рис. 2.6).
Переименуйте саму папку с темой.
Отредактируйте тему (измените файлы стилей CSS и изображения).
(рис 2.6) Структура папки с темой на сервере (на примере темы Citrus)
Перейдите к папке …\12\TEMPLATE\IMAGES.
Создайте в ней графический файл с миниатюрой темы, изображение которого потом будет появляться при выборе темы в браузере (рис 2.7(рис 2.7) Миниатюры предварительного просмотра тем (на примере темы Citrus)
Перейдите к папке …\12\TEMPLATE\LAYOUTS\1049.
Откройте файл SPTHEMES.xml и отредактируйте его, в соответствии с именами файлов, названием и описанием темы и т.д. (рис. 2.8).
(рис 2.8) Добавьте объявление темы в файл SPTHEMES.xmlСтруктура файла SPTHEMES.xml (на примере темы Citrus) приведена на рис. 2.9.
(рис 2.9) Объявление тем в файле SPTHEMES.xml (в папке …\12\LAYOUTS\1049)Важно отметить, что в случае правки текущей темы, для того чтобы применить изменения на сайте, ее необходимо назначить заново через параметры узла.
В заключение остановимся на возможности "подмены" файлов изображений. Перечислим основные места хранения графики:
папка с темой ;
библиотека изображений SharePoint (см. лабораторную работу 1.3);
на сервере в папке ..\12\TEMPLATES\IMAGES (рис. 2.10).
Примечание:если у Вас нет доступа к файловой системе сервера (веб-узел расположен у хостинг-провайдера), то заменить изображение можно на пользовательский файл, явно отредактировав мастер-страницу (см. лабораторную работу 2.1)
(рис 2.10) Некоторые изображения можно "подменить" в папке …\12\TEMPLATE\IMAGES2.2. Мастер-страницы
Поскольку приемы работы с мастер-страницами ( главными страницами ) были подробно освещены в курсе "Введение в SharePoint" ([лекция 8), мы остановимся только на самых основных моментах.]
Перейдите в SharePoint Designer (который необходим при работе с мастер-страницами ) на веб-узле к папке _catalogs / masterpage, (рис. 2.11).
Откройте для редактирования мастер-страницу, применяемую на узле по умолчанию - default.master (рис. 2.11).
Изменения, которые Вы внесете на мастер-страницу, будут применены ко всему сайту SharePoint.
(рис 2.11) Мастер-страница открыта для редактированияИспользование дизайна сторонних производителей
Самый быстрый способ кардинально изменить дизайн сайта - это поменять мастер-страницу по умолчанию. Следует учитывать, что в Интернете (в том числе, на сайтах Майкрософт) можно найти множество различных заготовок для мастер-страниц. Покажем, как правильно перенести одну из таких заготовок на сайт SharePoint.
Загрузите файл с мастер-страницами из Интернета на Ваш локальный компьютер (как правило, они предоставляются в виде архива, поскольку мастер-странице необходим не только сам файл формата .master, но и дополнительные изображения, и CSS -файлы).
Скопируйте все файлы из архива в соответствующие места веб-узла на сервере. Для этой процедуры удобно использовать панель (рис 2.12) Скопируйте саму мастер-страницу и вспомогательные элементы на сервер
После копирования просмотрите новые мастер-страницы в SharePoint Designer.
Щелкните правой кнопкой по файлу желаемой мастер-страницы на панели Список папок (рис. 2.13).
Выберите в контекстном меню команду Назначить главной страницей по умолчанию.Примечание:Как правило, мастер-страницы содержат блоки навигации, логотип и заголовок сайта, подвал, элементы управления и местозаполнители для размещения прототипов содержимого. Если Вы меняете мастер-страницу для сайта, то очень желательно, чтобы соблюдалось соответствие набора элементов старой и новой мастер-страницы. Иначе, функциональность сайта может пострадать.
(рис 2.13) Назначение главной страницы мастером по умолчанию меняет дизайн всего портала
Откройте домашнюю страницу сайта. Она, как и все страницы узла, контролируемые главной страницей по умолчанию, должна поменять свой дизайн.
Запустите предварительный просмотр домашней страницы в браузере (рис 2.14(рис 2.14) Просмотр в браузере домашней страницы сайта с новым мастером
Выберите Действия узла / Параметры.
На странице установки параметров выберите Коллекции / Главные страницы.
Просмотрите список мастер-страниц, имеющихся на узле, замечая, что в браузере назначить другую мастер-страницу нельзя (рис 2.15(рис 2.15) Коллекция мастер-страниц, находящихся на сервере в папке Catalogs / masterpage
Вернитесь на страницу установки параметров узла и щелкните пункт Темы.
Поменяйте тему узла, чтобы посмотреть, как это скажется на дизайне новой мастер-страницы (рис. 2.16).
(рис 2.16) Веб-узел с измененной темой (Рефлектор)
О пустых мастер-страницах
Путем редактирования мастер-страницы несложно сделать так, чтобы сайт кардинально изменил свой дизайн, и даже внешне совершенно не напоминал о том, что построен на основе технологии SharePoint. Такая задача имеет вполне практическое приложение - например, для нашего общедоступного сайта компании можно оставить прежний дизайн, тем не менее, оставляя возможности организации страниц посредством веб-частей и подключения к данным, т.е. всем преимуществам SharePoint.
Пример мастер-страницы с небольшим количеством элементов приведен на рис. 2.17 и описан в лабораторной работе 2.3.
(рис 2.17) Мастер-страница, с которой удалено большинство элементовВ заключение разговора о мастер-страницах напомним, что для каждой aspx-страницы веб-узла может быть выбрана индивидуальная мастер-страница. Достаточно ввести команду Формат / Главная страница / Присоединить главную страницу и в диалоговом окне Выбор главной страницы установить переключатель Настраиваемая главная страница, либо Особая главная страница, определяя путь к файлу с мастер-страницей (рис. 2.18).
(рис 2.18) Каждой веб-странице можно назначить особую мастер-страницу
2.3. Стили CSS
Один из самых мощных приемов редактирования дизайна веб-сайтов - это применение каскадных таблиц стилей ( CSS ). Стили хранятся в CSS -файлах и используются, как для форматирования текста и графики, так и для позиционирования объектов на веб-странице.
Для работы со стилями CSS в SharePoint Designer предусмотрено несколько панелей:
Применение стилей - позволяет быстро (в один щелчок) применить определенный стиль к выбранному элементу (рис. 2.19);
Управление стилями - применяется для редактирования стилей;
Свойства CSS - предназначена для просмотра параметров, определяющих стиль.
Для того, чтобы применить к выделенному фрагменту какой-либо стиль, достаточно щелкнуть по имени этого стиля на панели Применение стиля (рис. 2.19).
(рис 2.19) Редактирование элементов мастер-страниц при помощи стилей CSSПо умолчанию, стили для всех узлов SharePoint в одном семействе узлов определяются в одном файле Core . css, который находится на сервере. Поскольку применение стилей носит каскадный характер, то для назначения стилевой разметки лучше не редактировать файл Core . css, а присоединить к веб-странице другой CSS -файл (рис. 2.20). Присоединение уже имеющейся таблицы стилей к веб-странице позволяет быстро перенести разработанный ранее дизайн на веб-сайт SharePoint.
(рис 2.20) Присоединение нового CSS-файла к веб-страницеУправление набором CSS -файлов и порядком их применения осуществляется следующим образом.
Щелкните на названии любого из стилей на панели Применение стилей (рис. 2.21).
Выберите в контекстном меню команду (рис 2.21) Перейдите к управлению связями веб-страницы с CSS-файлами
В диалоговом окне Связать с таблицей стилей определите порядок применения стилей, нажимая кнопки Вверх и Вниз (рис. 2.22).
Если Вы хотите присоединить к веб-странице дополнительные таблицы стилей, нажмите кнопку Добавить и опеределите желаемые CSS -файлы.
Для того, чтобы открыть текст CSS -файла для редактирования, выберите его название в диалоге Связать с таблицей стилей и нажмите кнопку Изменить. (Также можно просто дважды щелкнуть на имени файла на панели Список папок, однако, расположение этого файла не всегда является очевидным).
(рис 2.22) Связывание веб-страниц с каскадными таблицами стилейКак уже было сказано, отредактировать (а также, и применить) стиль можно при помощи панели Управление стилями (рис. 2.23).
(рис 2.23) Для настройки стилей служит панель Управление стилями2.4. Шаблоны узлов
Вообще говоря, дизайн веб-сайта SharePoint, в целом, определяется двумя факторами:
определениями узла (Site Definitions) - создаются разработчиками и хранятся на файловой системе сервера;
шаблонами узла (Site Template) - могут создаваться пользователем в SharePoint Designer или в браузере.
Шаблоны узлов хранятся в файлах с расширением .stp и именно на их основе и создаются новые узлы SharePoint (рис. 2.24).
(рис 2.24) Создание нового сайта упрощается, благодаря применению соответствующего шаблона (показаны несколько бесплатных шаблонов, предлагаемых провайдером Инфобокс)Отметим, что этот рис. 2.24 иллюстрирует тот факт, что провайдер SharePoint-хостинга может предоставлять Вам дополнительные шаблоны. Существуют и "коробочные решения", причем, как бесплатные, так и разработанные на коммерческой основе.
Как несложно догадаться, шаблоны представляют собой мощный инструмент брендинга, позволяя быстро создать новый сайт на основе единожды разработанного дизайна. Рассмотрим, как это делается при помощи веб-интерфейса.
Выберите Действия узла / Параметры.
На странице установки параметров в группе Внешний вид и функции щелкните ссылку Сохранение узла в качестве шаблона.
Заполните форму Сохранение узла в качестве шаблона (рис. 2.25). Если Вы хотите не просто сохранить дизайн сайта, а также перенести весь его контент на новое место, установите флажок Включение содержимого.
Нажмите кнопку ОК.
(рис 2.25) Веб-узел SharePoint можно сохранить в качестве шаблона для последующего использованияПосле того, как Вы сохранили веб-узел в качестве шаблона на сервере хостинг-провайдера, этот шаблон будет доступен при создании нового сайта, наравне с остальными (в том числе, предустановленными) шаблонами (рис. 2.26).
(рис 2.26) Создание веб-узла на основе сохраненного шаблона пользователяСоздание нового веб-узла на основе сохраненного ранее шаблона иллюстрирует рис. 2.27. Поучительно будет сравнить его с рис. 2.28, представляющим исходный веб-узел (тот, который был сохранен в качестве пользовательского шаблона).
(рис 2.27) Веб-узел, созданный на основе пользовательского шаблона 
(рис 2.28) Исходный веб-узел (который был сохранен в качестве шаблона) Лабораторные работы
Лабораторная работа 2.1. Подмена графики на мастер-странице
Приведем пример замены графического файла, присутствующего на веб-узле по умолчанию на пользовательский файл.
Загрузите из Интернета архив с мастер-страницей и разверните его на сервере.
Откройте нужную мастер-страницу в SharePoint Designer (рис 2.29(рис 2.29) Мастер-страница, загруженная из внешнего источника
Выделите рисунок на мастер-странице и отыщите его расположение на панели (рис 2.30) Откройте рисунок (с сервера) для редактирования
Отредактируйте рисунок в месте его расположения на сервере, или просто замените его на новый (рис 2.31(рис 2.31) Рисунок на сервере изменен
Обновите мастер-страницу командой (рис 2.32) Мастер-страница с измененным рисунком
Перейдите к просмотру домашней страницы узла.
Просмотрите домашнюю страницу узла в браузере, убедившись в том, что она содержит новый рисунок (рис. 2.33).
(рис 2.33) Домашняя страница узла в браузере
Лабораторная работа 2.2. Перенос веб-узла SharePoint с одного сервера на другой
Важный аспект работы с узлами связан с импортом и экспортом веб-узлов. Мы рассмотрим еще один (наряду с рассмотренным в тексте лекции использованием шаблонов) способ, связанный с импортом-экспортом веб-пакетов. Этот способ позволяет перенести на новое место (например, на другой сайт в сети Интернет), как сайт целиком, так и его часть.
Откройте веб-узел в SharePoint Designer.
Выберите в верхнем меню (рис 2.34) Начните экспорт веб-узла с сервера
В открывшемся диалоге Экспорт веб-пакета (рис. 2.35) в списке Файлы на веб-узле выберите элементы веб-узла, которые Вы хотите перенести на новое место.
Нажмите кнопку (рис 2.35) Добавьте компоненты веб-узла SharePoint в веб-пакет
В промежуточном диалоговом окне выберите опцию включения контента в веб-пакет (рис 2.36(рис 2.36) При желании включите в веб-пакет контент сайта
Выберите имя создаваемого файла с веб-пакетом и его расположение на локальном компьютере (рис. 2.37).
Нажмите кнопку (рис 2.37) Сохраните файл с веб-пакетом на локальном компьютере
По завершении экспорта нажмите кнопку ОК в промежуточном информационном окне (рис. 2.38).
(рис 2.38) Дождитесь окончания процедуры экспортаВ результате на Вашем локальном компьютере будет создан файл с архивом SharePoint-сайта, который впоследствии можно развернуть на другом веб-узле. Для этого:
Откройте в SharePoint Designer другой веб-узел (на который Вы переносите файлы с первого узла).
Выберите в верхнем меню (рис 2.39) Начните импорт веб-узла
Отыщите сохраненный ранее файл с веб-пакетом на локальном компьютере (рис. 2.40).
Нажмите кнопку (рис 2.40) Выберите файл с импортируемым веб-пакетом
Выберите компоненты веб-пакета (рис 2.41(рис 2.41) Выберите компоненты веб-пакета для импорта
В случае возникновения конфликтов, либо задайте опцию сохранения версии конфликтующего элемента в резервном файле, либо откажитесь от развертывания этого элемента (рис 2.42(рис 2.42) В случае возникновения конфликтов выберите опцию развертывания компонента
Дождитесь окончания развертывания веб-пакета (рис 2.43(рис 2.43) Дождитесь окончания развертывания веб-пакета
Просмотрите, как будут выглядеть импортированные компоненты на веб-узле SharePoint (рис. 2.44).
(рис 2.44) Веб-сайт с импортируемыми компонентами открыт в Sharepoint Designer
Лабораторная работа 2.3. Кардинальное изменение дизайна открытой части портала
В рамках этой практической работы покажем, как можно быстро поменять дизайн сайта Sharepoint.
В SharePoint Designer откройте мастер страницу default .master.
Удалите большинство элементов с этой страницы и сохраните ее под новым именем (рис 2.45(рис 2.45) Создайте новую главную страницу
Откройте домашнюю страницу узла.
В верхнем меню выберите Формат / Главная страница / Присоединить главную страницу.
В диалоговом окне Выбор главной страницы установите переключатель Особая главная страница.
В поле под этим переключателем определите путь к файлу с мастер-страницей (рис. 2.46).
Нажмите кнопку (рис 2.46) Назначьте новую мастер-страницу домашней странице портала
На домашней странице задайте для ранее настроенных элементов значение по умолчанию для содержимого мастер-страницы (рис 2.47(рис 2.47) Верните настроенные элементы веб-страницы к определению мастера
Просмотрите результат применения нового дизайна в SharePoint Designer (рис. 2.48) и в браузере.
(рис 2.48) Результат редактирования
Краткие итоги
Для быстрого изменения дизайна всего веб-сайта или его отдельных страниц применяются:
Темы
Изображения
Мастер-страницы
Элементы управления и веб-части
Каскадные таблицы стилей
Шаблоны узлов
Большинство настроек можно осуществить при помощи SharePoint Designer.
Цель лекции. Представить, как при помощи SharePoint Designer и браузера можно быстро отредактировать дизайн сайта. Описываются наиболее простые пути реализации брендинга, позволяющие быстро поменять общий вид узла целиком или отдельных веб-страниц: темы, рисунки, CSS -стили, шаблоны узлов и мастер-страницы.
2.1. Темы
Редактирование дизайна веб-узла SharePoint, или брендинг, особенно актуален при разработке сайтов для Web. Обычно брендинг сайта объединяет шрифтовое и цветовое оформление сайта, а также графику (включая логотипы, навигацию и прочие элементы управления).
На первый взгляд, может показаться, что технология SharePoint предлагает довольно скудные средства дизайна, однако это не совсем так. Существует несколько уровней и программных средств разработки дизайна и функционала сайтов SharePoint:
Браузер (веб-интерфейс) - используется для администрирования веб-узла и настройки самых основных параметров, включая базовые параметры брендинга.
Sharepoint Designer - типичный веб-редактор, предназначен для редактирования, как макета страниц веб-сайта, так и разработки HTML-кода (часто применяется для редактирования сайтов без обращения к коду, наиболее подходящее средство для разработки дизайна ).
Visual Studio .Net - позволяет создать веб-сайт практически с любой необходимой функциональностью (мы оставляем его обсуждение далеко за пределами нашего курса).
Поскольку большинство из перечисленных возможностей было довольно подробно рассмотрено в рамках курса "Введение в SharePoint", мы конспективно остановимся на наиболее характерных средствах браузера и Sharepoint Designer (оставляя применение Visual Studio профессиональным программистам).
(рис 2.1) Настройка внешнего вида портала в браузереДля того, чтобы быстро поменять дизайн сайта средствами браузера, проделайте следующее.
Выберите Действия узла / Параметры.
На странице установки параметров выберите название, логотип и описание портала при помощи верхней ссылки из группы Внешний вид и функции (рис. 2.1).
Щелкните пункт Темы.
Выберите тему портала (рис. 2.2).
(рис 2.2) Выбор темы в браузереВ результате все страницы веб-сайта будут оформлены в соответствии с выбранной темой (рис. 2.3).
(рис 2.3) Тема применена к веб-сайтуВообще говоря, темы - это набор CSS -файлов (каскадных таблиц стилей), служащих для оформления сайта, и некоторых файлов изображений. Темы охватывают все стилевые и шрифтовые настройки, не затрагивая функционал сайта SharePoint. При работе в браузере можно применять только предустановленные темы, а для, собственно, редактирования самих тем, следует "вручную" внести правку в соответствующие файлы.
CSS -файлы, наряду с графическими файлами, хранятся на сервере в папке THEMES, которая, в свою очередь, расположена в папке Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\. Доступ к ней (например, для редактирования) Вы имеете только в том случае, когда сами обслуживаете сервер (например, при работе на выделенном сервере провайдера). Если же Вы просто приобрели услугу SharePoint-хостинга, то несложно перенастроить только текущую тему, которая располагается в папке _themes непосредственно на веб-узле (рис. 2.4).
(рис 2.4) Размещение текущей темы в папке _themesДля создания новой темы вручную (либо правильной установки готовой темы, загруженной, к примеру, из Интернета) выполните на сервере следующие действия.
Перейдите на сервере к папке C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES (рис. 2.5).
Создайте новую папку темы, например (для надежности), скопировав и переименовав тему, наиболее похожую на создаваемую.(рис 2.5) Создание новой темы на сервере (в папке THEMES)
Переименуйте в этой папке файл с расширением .inf, выбрав название для Вашей новой темы (рис. 2.6).
Переименуйте саму папку с темой.
Отредактируйте тему (измените файлы стилей CSS и изображения).(рис 2.6) Структура папки с темой на сервере (на примере темы Citrus)
Перейдите к папке …\12\TEMPLATE\IMAGES.
Создайте в ней графический файл с миниатюрой темы, изображение которого потом будет появляться при выборе темы в браузере (рис 2.7(рис 2.7) Миниатюры предварительного просмотра тем (на примере темы Citrus)
Перейдите к папке …\12\TEMPLATE\LAYOUTS\1049.
Откройте файл SPTHEMES.xml и отредактируйте его, в соответствии с именами файлов, названием и описанием темы и т.д. (рис. 2.8).
(рис 2.8) Добавьте объявление темы в файл SPTHEMES.xmlСтруктура файла SPTHEMES.xml (на примере темы Citrus) приведена на рис. 2.9.
(рис 2.9) Объявление тем в файле SPTHEMES.xml (в папке …\12\LAYOUTS\1049)Важно отметить, что в случае правки текущей темы, для того чтобы применить изменения на сайте, ее необходимо назначить заново через параметры узла.
В заключение остановимся на возможности "подмены" файлов изображений. Перечислим основные места хранения графики:
папка с темой ;
библиотека изображений SharePoint (см. лабораторную работу 1.3);
на сервере в папке ..\12\TEMPLATES\IMAGES (рис. 2.10).
Примечание:если у Вас нет доступа к файловой системе сервера (веб-узел расположен у хостинг-провайдера), то заменить изображение можно на пользовательский файл, явно отредактировав мастер-страницу (см. лабораторную работу 2.1)
(рис 2.10) Некоторые изображения можно "подменить" в папке …\12\TEMPLATE\IMAGES2.2. Мастер-страницы
Поскольку приемы работы с мастер-страницами ( главными страницами ) были подробно освещены в курсе "Введение в SharePoint" ([лекция 8), мы остановимся только на самых основных моментах.]
Перейдите в SharePoint Designer (который необходим при работе с мастер-страницами ) на веб-узле к папке _catalogs / masterpage, (рис. 2.11).
Откройте для редактирования мастер-страницу, применяемую на узле по умолчанию - default.master (рис. 2.11).
Изменения, которые Вы внесете на мастер-страницу, будут применены ко всему сайту SharePoint.
(рис 2.11) Мастер-страница открыта для редактированияИспользование дизайна сторонних производителей
Самый быстрый способ кардинально изменить дизайн сайта - это поменять мастер-страницу по умолчанию. Следует учитывать, что в Интернете (в том числе, на сайтах Майкрософт) можно найти множество различных заготовок для мастер-страниц. Покажем, как правильно перенести одну из таких заготовок на сайт SharePoint.
Загрузите файл с мастер-страницами из Интернета на Ваш локальный компьютер (как правило, они предоставляются в виде архива, поскольку мастер-странице необходим не только сам файл формата .master, но и дополнительные изображения, и CSS -файлы).
Скопируйте все файлы из архива в соответствующие места веб-узла на сервере. Для этой процедуры удобно использовать панель (рис 2.12) Скопируйте саму мастер-страницу и вспомогательные элементы на сервер
После копирования просмотрите новые мастер-страницы в SharePoint Designer.
Щелкните правой кнопкой по файлу желаемой мастер-страницы на панели Список папок (рис. 2.13).
Выберите в контекстном меню команду Назначить главной страницей по умолчанию.Примечание:Как правило, мастер-страницы содержат блоки навигации, логотип и заголовок сайта, подвал, элементы управления и местозаполнители для размещения прототипов содержимого. Если Вы меняете мастер-страницу для сайта, то очень желательно, чтобы соблюдалось соответствие набора элементов старой и новой мастер-страницы. Иначе, функциональность сайта может пострадать.
(рис 2.13) Назначение главной страницы мастером по умолчанию меняет дизайн всего портала
Откройте домашнюю страницу сайта. Она, как и все страницы узла, контролируемые главной страницей по умолчанию, должна поменять свой дизайн.
Запустите предварительный просмотр домашней страницы в браузере (рис 2.14(рис 2.14) Просмотр в браузере домашней страницы сайта с новым мастером
Выберите Действия узла / Параметры.
На странице установки параметров выберите Коллекции / Главные страницы.
Просмотрите список мастер-страниц, имеющихся на узле, замечая, что в браузере назначить другую мастер-страницу нельзя (рис 2.15(рис 2.15) Коллекция мастер-страниц, находящихся на сервере в папке Catalogs / masterpage
Вернитесь на страницу установки параметров узла и щелкните пункт Темы.
Поменяйте тему узла, чтобы посмотреть, как это скажется на дизайне новой мастер-страницы (рис. 2.16).
(рис 2.16) Веб-узел с измененной темой (Рефлектор)
О пустых мастер-страницах
Путем редактирования мастер-страницы несложно сделать так, чтобы сайт кардинально изменил свой дизайн, и даже внешне совершенно не напоминал о том, что построен на основе технологии SharePoint. Такая задача имеет вполне практическое приложение - например, для нашего общедоступного сайта компании можно оставить прежний дизайн, тем не менее, оставляя возможности организации страниц посредством веб-частей и подключения к данным, т.е. всем преимуществам SharePoint.
Пример мастер-страницы с небольшим количеством элементов приведен на рис. 2.17 и описан в лабораторной работе 2.3.
(рис 2.17) Мастер-страница, с которой удалено большинство элементовВ заключение разговора о мастер-страницах напомним, что для каждой aspx-страницы веб-узла может быть выбрана индивидуальная мастер-страница. Достаточно ввести команду Формат / Главная страница / Присоединить главную страницу и в диалоговом окне Выбор главной страницы установить переключатель Настраиваемая главная страница, либо Особая главная страница, определяя путь к файлу с мастер-страницей (рис. 2.18).
(рис 2.18) Каждой веб-странице можно назначить особую мастер-страницу
2.3. Стили CSS
Один из самых мощных приемов редактирования дизайна веб-сайтов - это применение каскадных таблиц стилей ( CSS ). Стили хранятся в CSS -файлах и используются, как для форматирования текста и графики, так и для позиционирования объектов на веб-странице.
Для работы со стилями CSS в SharePoint Designer предусмотрено несколько панелей:
Применение стилей - позволяет быстро (в один щелчок) применить определенный стиль к выбранному элементу (рис. 2.19);
Управление стилями - применяется для редактирования стилей;
Свойства CSS - предназначена для просмотра параметров, определяющих стиль.
Для того, чтобы применить к выделенному фрагменту какой-либо стиль, достаточно щелкнуть по имени этого стиля на панели Применение стиля (рис. 2.19).
(рис 2.19) Редактирование элементов мастер-страниц при помощи стилей CSSПо умолчанию, стили для всех узлов SharePoint в одном семействе узлов определяются в одном файле Core . css, который находится на сервере. Поскольку применение стилей носит каскадный характер, то для назначения стилевой разметки лучше не редактировать файл Core . css, а присоединить к веб-странице другой CSS -файл (рис. 2.20). Присоединение уже имеющейся таблицы стилей к веб-странице позволяет быстро перенести разработанный ранее дизайн на веб-сайт SharePoint.
(рис 2.20) Присоединение нового CSS-файла к веб-страницеУправление набором CSS -файлов и порядком их применения осуществляется следующим образом.
Щелкните на названии любого из стилей на панели Применение стилей (рис. 2.21).
Выберите в контекстном меню команду (рис 2.21) Перейдите к управлению связями веб-страницы с CSS-файлами
В диалоговом окне Связать с таблицей стилей определите порядок применения стилей, нажимая кнопки Вверх и Вниз (рис. 2.22).
Если Вы хотите присоединить к веб-странице дополнительные таблицы стилей, нажмите кнопку Добавить и опеределите желаемые CSS -файлы.
Для того, чтобы открыть текст CSS -файла для редактирования, выберите его название в диалоге Связать с таблицей стилей и нажмите кнопку Изменить. (Также можно просто дважды щелкнуть на имени файла на панели Список папок, однако, расположение этого файла не всегда является очевидным).
(рис 2.22) Связывание веб-страниц с каскадными таблицами стилейКак уже было сказано, отредактировать (а также, и применить) стиль можно при помощи панели Управление стилями (рис. 2.23).
(рис 2.23) Для настройки стилей служит панель Управление стилями2.4. Шаблоны узлов
Вообще говоря, дизайн веб-сайта SharePoint, в целом, определяется двумя факторами:
определениями узла (Site Definitions) - создаются разработчиками и хранятся на файловой системе сервера;
шаблонами узла (Site Template) - могут создаваться пользователем в SharePoint Designer или в браузере.
Шаблоны узлов хранятся в файлах с расширением .stp и именно на их основе и создаются новые узлы SharePoint (рис. 2.24).
(рис 2.24) Создание нового сайта упрощается, благодаря применению соответствующего шаблона (показаны несколько бесплатных шаблонов, предлагаемых провайдером Инфобокс)Отметим, что этот рис. 2.24 иллюстрирует тот факт, что провайдер SharePoint-хостинга может предоставлять Вам дополнительные шаблоны. Существуют и "коробочные решения", причем, как бесплатные, так и разработанные на коммерческой основе.
Как несложно догадаться, шаблоны представляют собой мощный инструмент брендинга, позволяя быстро создать новый сайт на основе единожды разработанного дизайна. Рассмотрим, как это делается при помощи веб-интерфейса.
Выберите Действия узла / Параметры.
На странице установки параметров в группе Внешний вид и функции щелкните ссылку Сохранение узла в качестве шаблона.
Заполните форму Сохранение узла в качестве шаблона (рис. 2.25). Если Вы хотите не просто сохранить дизайн сайта, а также перенести весь его контент на новое место, установите флажок Включение содержимого.
Нажмите кнопку ОК.
(рис 2.25) Веб-узел SharePoint можно сохранить в качестве шаблона для последующего использованияПосле того, как Вы сохранили веб-узел в качестве шаблона на сервере хостинг-провайдера, этот шаблон будет доступен при создании нового сайта, наравне с остальными (в том числе, предустановленными) шаблонами (рис. 2.26).
(рис 2.26) Создание веб-узла на основе сохраненного шаблона пользователяСоздание нового веб-узла на основе сохраненного ранее шаблона иллюстрирует рис. 2.27. Поучительно будет сравнить его с рис. 2.28, представляющим исходный веб-узел (тот, который был сохранен в качестве пользовательского шаблона).
(рис 2.27) Веб-узел, созданный на основе пользовательского шаблона (рис 2.28) Исходный веб-узел (который был сохранен в качестве шаблона) Лабораторные работы
Лабораторная работа 2.1. Подмена графики на мастер-странице
Приведем пример замены графического файла, присутствующего на веб-узле по умолчанию на пользовательский файл.
Загрузите из Интернета архив с мастер-страницей и разверните его на сервере.
Откройте нужную мастер-страницу в SharePoint Designer (рис 2.29(рис 2.29) Мастер-страница, загруженная из внешнего источника
Выделите рисунок на мастер-странице и отыщите его расположение на панели (рис 2.30) Откройте рисунок (с сервера) для редактирования
Отредактируйте рисунок в месте его расположения на сервере, или просто замените его на новый (рис 2.31(рис 2.31) Рисунок на сервере изменен
Обновите мастер-страницу командой (рис 2.32) Мастер-страница с измененным рисунком
Перейдите к просмотру домашней страницы узла.
Просмотрите домашнюю страницу узла в браузере, убедившись в том, что она содержит новый рисунок (рис. 2.33).
(рис 2.33) Домашняя страница узла в браузере
Лабораторная работа 2.2. Перенос веб-узла SharePoint с одного сервера на другой
Важный аспект работы с узлами связан с импортом и экспортом веб-узлов. Мы рассмотрим еще один (наряду с рассмотренным в тексте лекции использованием шаблонов) способ, связанный с импортом-экспортом веб-пакетов. Этот способ позволяет перенести на новое место (например, на другой сайт в сети Интернет), как сайт целиком, так и его часть.
Откройте веб-узел в SharePoint Designer.
Выберите в верхнем меню (рис 2.34) Начните экспорт веб-узла с сервера
В открывшемся диалоге Экспорт веб-пакета (рис. 2.35) в списке Файлы на веб-узле выберите элементы веб-узла, которые Вы хотите перенести на новое место.
Нажмите кнопку (рис 2.35) Добавьте компоненты веб-узла SharePoint в веб-пакет
В промежуточном диалоговом окне выберите опцию включения контента в веб-пакет (рис 2.36(рис 2.36) При желании включите в веб-пакет контент сайта
Выберите имя создаваемого файла с веб-пакетом и его расположение на локальном компьютере (рис. 2.37).
Нажмите кнопку (рис 2.37) Сохраните файл с веб-пакетом на локальном компьютере
По завершении экспорта нажмите кнопку ОК в промежуточном информационном окне (рис. 2.38).
(рис 2.38) Дождитесь окончания процедуры экспортаВ результате на Вашем локальном компьютере будет создан файл с архивом SharePoint-сайта, который впоследствии можно развернуть на другом веб-узле. Для этого:
Откройте в SharePoint Designer другой веб-узел (на который Вы переносите файлы с первого узла).
Выберите в верхнем меню (рис 2.39) Начните импорт веб-узла
Отыщите сохраненный ранее файл с веб-пакетом на локальном компьютере (рис. 2.40).
Нажмите кнопку (рис 2.40) Выберите файл с импортируемым веб-пакетом
Выберите компоненты веб-пакета (рис 2.41(рис 2.41) Выберите компоненты веб-пакета для импорта
В случае возникновения конфликтов, либо задайте опцию сохранения версии конфликтующего элемента в резервном файле, либо откажитесь от развертывания этого элемента (рис 2.42(рис 2.42) В случае возникновения конфликтов выберите опцию развертывания компонента
Дождитесь окончания развертывания веб-пакета (рис 2.43(рис 2.43) Дождитесь окончания развертывания веб-пакета
Просмотрите, как будут выглядеть импортированные компоненты на веб-узле SharePoint (рис. 2.44).
(рис 2.44) Веб-сайт с импортируемыми компонентами открыт в Sharepoint Designer
Лабораторная работа 2.3. Кардинальное изменение дизайна открытой части портала
В рамках этой практической работы покажем, как можно быстро поменять дизайн сайта Sharepoint.
В SharePoint Designer откройте мастер страницу default .master.
Удалите большинство элементов с этой страницы и сохраните ее под новым именем (рис 2.45(рис 2.45) Создайте новую главную страницу
Откройте домашнюю страницу узла.
В верхнем меню выберите Формат / Главная страница / Присоединить главную страницу.
В диалоговом окне Выбор главной страницы установите переключатель Особая главная страница.
В поле под этим переключателем определите путь к файлу с мастер-страницей (рис. 2.46).
Нажмите кнопку (рис 2.46) Назначьте новую мастер-страницу домашней странице портала
На домашней странице задайте для ранее настроенных элементов значение по умолчанию для содержимого мастер-страницы (рис 2.47(рис 2.47) Верните настроенные элементы веб-страницы к определению мастера
Просмотрите результат применения нового дизайна в SharePoint Designer (рис. 2.48) и в браузере.
(рис 2.48) Результат редактирования
Краткие итоги
Для быстрого изменения дизайна всего веб-сайта или его отдельных страниц применяются:
Темы
Изображения
Мастер-страницы
Элементы управления и веб-части
Каскадные таблицы стилей
Шаблоны узлов
Большинство настроек можно осуществить при помощи SharePoint Designer.
