Опубликован: 18.03.2010 | Уровень: специалист | Доступ: платный
Лекция 2:

Дизайн веб-сайта

Аннотация: Лекция посвящена обзору наиболее прикладных инструментов редактирования общего дизайна сайта, среди которых темы, мастер-страницы, изображения и шаблоны узла.

Цель лекции. Представить, как при помощи SharePoint Designer и браузера можно быстро отредактировать дизайн сайта. Описываются наиболее простые пути реализации брендинга, позволяющие быстро поменять общий вид узла целиком или отдельных веб-страниц: темы, рисунки, CSS -стили, шаблоны узлов и мастер-страницы.

2.1. Темы

Редактирование дизайна веб-узла SharePoint, или брендинг, особенно актуален при разработке сайтов для Web. Обычно брендинг сайта объединяет шрифтовое и цветовое оформление сайта, а также графику (включая логотипы, навигацию и прочие элементы управления).

На первый взгляд, может показаться, что технология SharePoint предлагает довольно скудные средства дизайна, однако это не совсем так. Существует несколько уровней и программных средств разработки дизайна и функционала сайтов SharePoint:

  • Браузер (веб-интерфейс) - используется для администрирования веб-узла и настройки самых основных параметров, включая базовые параметры брендинга.
  • Sharepoint Designer - типичный веб-редактор, предназначен для редактирования, как макета страниц веб-сайта, так и разработки HTML-кода (часто применяется для редактирования сайтов без обращения к коду, наиболее подходящее средство для разработки дизайна ).
  • Visual Studio .Net - позволяет создать веб-сайт практически с любой необходимой функциональностью (мы оставляем его обсуждение далеко за пределами нашего курса).

Поскольку большинство из перечисленных возможностей было довольно подробно рассмотрено в рамках курса "Введение в SharePoint", мы конспективно остановимся на наиболее характерных средствах браузера и Sharepoint Designer (оставляя применение Visual Studio профессиональным программистам).

Настройка внешнего вида портала в браузере

Рис. 2.1. Настройка внешнего вида портала в браузере

Для того, чтобы быстро поменять дизайн сайта средствами браузера, проделайте следующее.

  1. Выберите Действия узла / Параметры.
  2. На странице установки параметров выберите название, логотип и описание портала при помощи верхней ссылки из группы Внешний вид и функции (рис. 2.1).
  3. Щелкните пункт Темы.
  4. Выберите тему портала (рис. 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).

Размещение текущей темы в папке _themes

увеличить изображение
Рис. 2.4. Размещение текущей темы в папке _themes

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

  1. Перейдите на сервере к папке C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES (рис. 2.5).
  2. Создайте новую папку темы, например (для надежности), скопировав и переименовав тему, наиболее похожую на создаваемую.
    Создание новой темы на сервере (в папке THEMES)

    увеличить изображение
    Рис. 2.5. Создание новой темы на сервере (в папке THEMES)
  3. Переименуйте в этой папке файл с расширением .inf, выбрав название для Вашей новой темы (рис. 2.6).
  4. Переименуйте саму папку с темой.
  5. Отредактируйте тему (измените файлы стилей CSS и изображения).
    Структура папки с темой на сервере (на примере темы Citrus)

    увеличить изображение
    Рис. 2.6. Структура папки с темой на сервере (на примере темы Citrus)
  6. Перейдите к папке …\12\TEMPLATE\IMAGES.
  7. Создайте в ней графический файл с миниатюрой темы, изображение которого потом будет появляться при выборе темы в браузере (рис. 2.7).
    Миниатюры предварительного просмотра тем (на примере темы Citrus)

    увеличить изображение
    Рис. 2.7. Миниатюры предварительного просмотра тем (на примере темы Citrus)
  8. Перейдите к папке …\12\TEMPLATE\LAYOUTS\1049.
  9. Откройте файл SPTHEMES.xml и отредактируйте его, в соответствии с именами файлов, названием и описанием темы и т.д. (рис. 2.8).
Добавьте объявление темы в файл SPTHEMES.xml

увеличить изображение
Рис. 2.8. Добавьте объявление темы в файл SPTHEMES.xml

Структура файла SPTHEMES.xml (на примере темы Citrus) приведена на рис. 2.9.

Объявление тем в файле SPTHEMES.xml (в папке …\12\LAYOUTS\1049)

увеличить изображение
Рис. 2.9. Объявление тем в файле SPTHEMES.xml (в папке …\12\LAYOUTS\1049)

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

В заключение остановимся на возможности "подмены" файлов изображений. Перечислим основные места хранения графики:

  • папка с темой ;
  • библиотека изображений SharePoint (см. лабораторную работу 1.3);
  • на сервере в папке ..\12\TEMPLATES\IMAGES (рис. 2.10).
Примечание:если у Вас нет доступа к файловой системе сервера (веб-узел расположен у хостинг-провайдера), то заменить изображение можно на пользовательский файл, явно отредактировав мастер-страницу (см. лабораторную работу 2.1)
Некоторые изображения можно "подменить" в папке …\12\TEMPLATE\IMAGES

увеличить изображение
Рис. 2.10. Некоторые изображения можно "подменить" в папке …\12\TEMPLATE\IMAGES
Николай Попов
Николай Попов
Россия
Корсаков Сергей
Корсаков Сергей
Россия