Татьяна Сметанина Консультант Microsoft Microsoft TechDays

Татьяна Сметанина
Консультант
Microsoft
Microsoft TechDays
http://www.techdays.ru
1)
2)
3)
4)
5)
Создание тем
Мастер страницы и страницы
Элементы управления
Навигация
Представление информации на
портале (отображение данных из
списков)
Microsoft TechDays
http://www.techdays.ru
Интранет и Экстранет
сфокусированы на
функциональности и контенте.
Имеют не такие жесткие
требования к дизайну
Интернет сайты
сфокусированы не только на
информации, но и на её
визуальной подаче.
Microsoft TechDays
http://www.techdays.ru
Логотип
Шрифты
Цветовая схема
Графические элементы
Microsoft TechDays
http://www.techdays.ru
простота
Браузер
Логотип, выбор темы,
состав и порядок веб-частей,
контент
Цвета, Фоны, Шрифты
Редактирование CSS файлов
SPD +
Visual Studio
Возможность изменять
Page Layout и Master Pages
Объединять результаты кастомизации
в тему и\или шаблон узла
Microsoft TechDays
глубина изменений
SharePoint
Designer
http://www.techdays.ru
Брендинг сайтов Sharepoint
Microsoft TechDays
http://www.techdays.ru
CSS + изображения
Устанавливается на
WFE
Применяется
используя
административную
страницу или
программно
Microsoft TechDays
http://www.techdays.ru
Быстрое изменение внешнего вида, которое не
затрагивает функционал
Охватывают все стилевые и шрифтовые возможности
и часть изображений
Microsoft TechDays
http://www.techdays.ru
Theme.inf
Theme.css
Изображения
Объявление в
SPTHEMES.XML
Microsoft TechDays
http://www.techdays.ru
Скопировать и переименовать папку темы
Переименовать файл .inf
Открыть файл .inf и заменить название темы
Изменить CSS
Изменить изображения
Создать превю для темы и положить в
12\TEMPLATE\Images
7) Добавить объявление темы в SPTHEMES.xml в папку
12\TEMPLATE\Layouts\1033
1)
2)
3)
4)
5)
6)
Microsoft TechDays
http://www.techdays.ru
Основные места для изображений:
Папка с темой
В библиотека изображений SharePoint
На сервере в папке ..\12\Templates\Images
Возможен следующий способ хранения изображений:
…\12\TEMPLATE\IMAGES\YOURCUSTOMFOLDERHERE
Microsoft TechDays
http://www.techdays.ru
Базовые стили можно посмотреть:
…\12\TEMPLATE\LAYOUTS\<LCID>\STYLES
Работа со стилями
• Internet Explorer Developer Toolbar
•
http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e2d5e1db91038&displaylang=en
• Примерная таблица стилей
http://www.heathersolomon.com/content/sp07cssreference.htm
Microsoft TechDays
http://www.techdays.ru
Microsoft TechDays
http://www.techdays.ru
Часть изображений не доступны для изменения используя
темы
Узел не наследует тему родительского узла. Для каждого
вновь созданного узла тему необходимо применять заново
Если тема была изменена, для того чтобы увидеть эти
изменения её надо заново применить
Microsoft TechDays
http://www.techdays.ru
Microsoft TechDays
http://www.techdays.ru
Брендинг сайтов Sharepoint
Microsoft TechDays
http://www.techdays.ru
Блок(и) навигации
Шапка и логотип
Подвал
Ссылки на CSS
Менеджер веб-частей
Placeholders
Элементы управления
<link rel=“stylesheet” …> <SharePoint:SiteActions …>
<IMG …>
<SharePoint:HighlightMenu …>
<PublishingNavigation:
PortalSiteMapDataSource …>
Microsoft TechDays
<asp:LoginStatus …>
<SPSWC:
RightBodySectionSearchBox …>
http://www.techdays.ru
Default.master содержит
~30 placeholders, ~22 из
них находятся в теле
страницы
Microsoft TechDays
http://www.techdays.ru
Мастер страница по-умолчанию
(Default.master)
Системмная мастер страница
(System.master)
Мастер страница приложения
(Application.master)
…
Microsoft TechDays
http://www.techdays.ru
Создание
Скопировать стандартную
Переименовать
Изменить содержимое
Microsoft TechDays
http://www.techdays.ru
Использование CSS
1)
2)
3)
4)
Скопировать Core.css или другой стандартный css
Изменить его
Загрузить в библиотеку стилей портала
Подключить на мастер странице
Объявить непосредственно на мастер странице
Объявить через веб-интерфейс или свойство AlternateCSS
Microsoft TechDays
http://www.techdays.ru
Установка
Загрузить в библиотеку мастер страниц
(_catalogs/masterpage) или в папку _layouts
В ручном режиме
Используя Features
Установить в качестве мастер страницы по умолчанию.
Через веб интерфейс
Через SiteDefinition
Через ОМ
Microsoft TechDays
http://www.techdays.ru
Ограничения
Нельзя удалять c мастер страницы стандартные
ContentPlaceHolders
При необходимости их можно скрывать
Лучше не удалять стандартные css и js
Подключать свои css надо ниже стандартных
Нельзя использовать несколько форм на мастер странице
Лучше не удалять вызовы js функций из <body> и <form>
Microsoft TechDays
http://www.techdays.ru
Microsoft TechDays
http://www.techdays.ru
Брендинг сайтов Sharepoint
Microsoft TechDays
http://www.techdays.ru
Что это?
Еще один слой между мастер страницей и
страницей с контентом
Часть механизма WCM и Publishing
Располагаются в библиотеке мастер страниц
Используют Типы Содержимого (Сontent
Types)
Используют мастер страницу в качестве
базового шаблона
http://www.sharepointmn.com
Microsoft TechDays
http://www.techdays.ru
Создание страниц по шаблону
<%@ master %>
<asp:ContentPlaceHolder
runat=“server” ID=“Main” />
<%@ page masterpagefile=“A.master”%>
<asp:Content runat=“server”
ContentPlaceHolderID=“Main”>
Page Layout:
“MyLayout.aspx”
</asp:Content>
Мастер страница:
“MyCustom.master”
<asp:ContentPlaceHolder
runat=“server” ID=“Footer” />
<asp:Content runat=“server”
ContentPlaceHolderID=“Footer”>
</asp:Content>
Страница
Microsoft TechDays
http://www.techdays.ru
Microsoft TechDays
http://www.techdays.ru
Брендинг сайтов Sharepoint
Microsoft TechDays
http://www.techdays.ru
Виды страниц
Страницы сайта
•
•
Располагаются в библиотеке страниц
Могут быть кастомизированы
Страницы приложения
•
•
•
•
Страницы администрирования SharePoint
Располагаются в _layouts на веб серверах
Могут быть кастомизированы не полностью
Поддерживают:
• Темы
• AlternateCSS
• Application.master
Microsoft TechDays
http://www.techdays.ru
Страницы сайта
http://myserver
Страницы приложения
/_layouts/
SPWeb.masterurl
/shared documents/
default.aspx
allitems.aspx
.aspx
.aspx
application.master
/_catalogs/masterpage/
.master
default.master
.master
/_layouts/
create.aspx
.aspx
SiteTemplates\STS\
default.aspx
Pages\
Global\
viewpage.aspx
default.master
Файловая система
\..\Common Files\Microsoft Shared\web server
extensions\12\TEMPLATE\SiteTemplates
Microsoft TechDays
http://www.techdays.ru
Создание страниц
Веб-интерфейс
На основе Page layout.
Для изменения доступен только контент
Sharepoint Designer
На основе Page layout или страница с любой
собственной структурой
Возможность редактировать на уровне html кода
Visual Studio .Net
Возможность создать страницу с любой
необходимой функциональностью с
использованием code behind
Features, Site Definitions
Microsoft TechDays
http://www.techdays.ru
Брендинг сайтов Sharepoint
Microsoft TechDays
http://www.techdays.ru
Пользовательские элементы управления
Место расположения: ..\12\TEMPLATE\CONTROLTEMPLATES
Шаги по брендингу:
Скопировать элемент управления
Переименовать
Внести изменения
Прописать на странице или внедрить другими способами
(Feature, SiteDefinitions)
Основные ошибки:
Изменение существующих элементов управления
Microsoft TechDays
http://www.techdays.ru
Серверные элементы управления
Большинство серверных элементов управления
имеют свой RenderTemplate для изменения внешнего
вида
У каждого элемента управления есть CssClass или
аналогичное свойство для определения Сss стиля
В других случаях используется наследование и
разработка
Microsoft TechDays
http://www.techdays.ru
Microsoft TechDays
http://www.techdays.ru
Брендинг сайтов Sharepoint
Microsoft TechDays
http://www.techdays.ru
Навигация SharePoint основана на механихмах
навигации ASP.NET 2.0
SharePoint имеет собственные элементы
управления
Навигация может быть настроена через
браузер
SharePoint API предоставляет возможности
для работы с текущей навигацией на портале
Возможность влиять на навигацию (добавлять
или скрывать пункты меню) используя Features
Создание провайдеров навигации (Site Map
Providers)
Microsoft TechDays
http://www.techdays.ru
<StaticItemTemplate>
<a href="<%# Eval("NavigateUrl") %>">
<%# Eval("Text") %>
</a>
</StaticItemTemplate>
Microsoft TechDays
http://www.techdays.ru
Провайдеры
Microsoft TechDays
42
http://www.techdays.ru
Навигация
Microsoft TechDays
http://www.techdays.ru
Брендинг сайтов Sharepoint
Microsoft TechDays
http://www.techdays.ru
Брендинг через XSL
Стандартные XSL располагаются в
библиотеке стилей http:/<site name>/Style
Library/
Создание веб-частей, использующих UC
Microsoft TechDays
http://www.techdays.ru
Брендинг сайтов Sharepoint
Microsoft TechDays
http://www.techdays.ru
WYSIWYG и CSS
Позволяет редактировать контент страницы
через веб-интерфейс
Возможность добавления собственных
встроенных стилей для текста и для таблиц
HtmlEditorCustomStyles.css
HtmlEditorTableFormats.css
Наследование и программное расширение
функциональности
Microsoft TechDays
http://www.techdays.ru
WYSIWYG .
Расширение списка стилей
Скопировать css файл и сохранить в Style
Library
Добавить описание стилей
Зарегистрировать css на мастер странице
Новые стили должны быть доступны через вебинтерфейс в редакторе контента в выпадающем
списке со стилями
Microsoft TechDays
http://www.techdays.ru
WYSIWYG
Microsoft TechDays
http://www.techdays.ru
Sharepoint designer
DataForm web part
ListView web part
Content by query web part
Visual Studio
RenderTemplate
Schema.xml
Разработка собственных веб частей
Microsoft TechDays
http://www.techdays.ru
ListView web part
• Отображает конкретное представление списка
• Сортировка, группировка, фильтрация и CAML
запрос настраиваются в представлении
• Внешний вид можно изменить только изменив
внешний вид представления (schema.xml)
• Не работает с параметрами
Microsoft TechDays
http://www.techdays.ru
DataForm web part
• Доступен для размещения на странице через
SharePoint Designer
• Изменение внешнего вида через XSLT
• Поддерживает режимы не только просмотра, но и
создания\изменения элемента списка
• Умеет работать с входящими параметрами, в том
числе с QueryString
• Есть пейджинг, группировка, сортировка, фильтрация
Microsoft TechDays
http://www.techdays.ru
Content By Query web part
• Доступен для добавления на страницу через SPD
и браузер
• Изменение внешнего вида с помощью XSLT
• Возможность использовать CAML запрос,
группировку, сортировку
• Не работает с входными параметрами
Microsoft TechDays
http://www.techdays.ru
Брендинг списков
Microsoft TechDays
http://www.techdays.ru
Брендинг сайтов Sharepoint
Microsoft TechDays
http://www.techdays.ru
Что это?
Возможность вмешиваться в структуру и
внешний вид стандартных шаблонов узлов
с помощью активации новых возможностей
(features) в момент создания узла по
шаблону
Microsoft TechDays
http://www.techdays.ru
Применение в контексте брендинга
Создать 2 feature:
Первая - копирует страницы, мастер
страницы, стили, картинки и т.д.
Вторая – применяет в момент создания узла
по шаблону feature 1 для соответствующих
узлов
Microsoft TechDays
http://www.techdays.ru
Брендинг стандартных
узлов
Microsoft TechDays
http://www.techdays.ru
Брендинг сайтов Sharepoint
Microsoft TechDays
http://www.techdays.ru
Один из ключевых компонентов платформы SharePoint
Services
Поддерживается два способа создания шаблонов
узлов
Site Templates (*.stp) – шаблоны узлов. Могут создаваться
пользователем из веб интерфейса
Site Definitions – определения узлов. Создаются
разработчиками и хранятся на файловой системе сервера(ов)
предоставляет возможность
Определение узла
/ Шаблон узла
Узел
Устанавливается в папку “\12” на WFE
..\12\Template\SiteTemplates
Описание шаблонов устанавливается в папку
..\12\Template\1033\XML (в случае англ. языка)
Мы рассмотрели:
Темы
Мастер страницы
Шаблоны страниц
Элемены управления и веб-части
Варианты отображения форм и данных
из списков
Шаблоны узлов и брендинг
стандартных шаблонов
Microsoft TechDays
http://www.techdays.ru
Готовые screencast, hols и запись webcast по
брендингу
http://mssharepointdeveloper.com
SharePoint Team Blog
http://blogs.msdn.com/sharepoint
SharePoint Designer Team Blog
http://blogs.msdn.com/sharepointdesigner/
SharePoint Developer Portal on MSDN
http://msdn2.microsoft.com/enus/office/aa905503.aspx
Heathersolomon
http://www.heathersolomon.com
Microsoft TechDays
http://www.techdays.ru
© 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market
conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
Microsoft TechDays
http://www.techdays.ru