Преамбула
Несмотря на то, что программа SharePoint Designer, в первую очередь, предназначена для редактирования веб-узлов SharePoint, ее, тем не менее, довольно удобно использовать в качестве неплохого средства традиционного веб-дизайна. Поэтому посвятим данную главу основам применения SharePoint Designer для разработки HTML- и ASPX-страниц, не касаясь особенностей технологии SharePoint, однако, имея в виду, что приведенные в главе сведения пригодятся и при разработке страниц SharePoint. Ведь почти все элементы управления HTML- и ASP- допускается размещать на веб-страницах стандарта SharePoint.
При изложении материала в этой главе подразумевается, что читатель владеет самыми основными приемами HTML-дизайна.
Стили
Начнем с неотъемлемого приема современного веб-дизайна, связанного с использованием каскадных таблиц стилей. SharePoint Designer обладает развитыми средствами по применению стилей, главным из которых является панель Свойства CSS.
Подключение CSS-файла
Мы начнем с применения к создаваемым в SharePoint Designer веб-страницам уже существующей таблицы стилей, которая, возможно, использовалась Вами при проектировании других узлов и хранится в некотором файле с расширением . CSS на Вашем компьютере.
Разместите на экране одновременно окно Проводника Windows и SharePoint Designer (рис. 6.1).
Перетащите файл каскадной таблицы стилей из папки (рис 6.1) Перенесите CSS-файл на панель Список папок
Перетащите CSS -файл из панели (рис 6.2) Перетащите CSS-файл прямо на область Конструктор
Оцените результат применения стилей к веб-странице (рис. 6.3).
Откройте область задач Свойства CSS.
На панели Свойства CSS просмотрите свойства стиля, который определяет форматирование тега, размечающего выделенный объект. В нашем примере это тег <Body>, указанный в списке Примененные правила (рис. 6.3).
(рис 6.3) Результат применения таблицы стилейОтредактировать сам файл, описывающий таблицу стилей (т.е. файл с расширением . CSS ), можно непосредственно в SharePoint Designer. Для этого достаточно двойным щелчком открыть его в отдельной вкладке и править, как в обычном текстовом редакторе (рис. 6.4). Второй вариант изменения самих стилей – это выбор желаемого форматирования на панели Свойства CSS.
(рис 6.4) Редактирование файла с таблицей стилей
Назначение и редактирование стилей
Для, собственно, назначения существующих стилей CSS служат области задач Применение стилей и Управление стилями. Следует отметить, что каскадные таблицы стилей подразумевают последовательное применение стилевой разметки, которая может описываться, как в коде самой веб-страницы, так и в обособленных CSS -файлах, с ней связанных. Кроме того, стили могут использоваться для различных целей: форматирования текста и графики, позиционирования объектов на веб-странице и т.д. Принцип каскадного назначения стилей иллюстрируется рис. 6.5. Как видно из панели Применение стиля, стили, назначенные выделенному фрагменту на веб-странице, выделяются обрамлением.
(рис 6.5) Каскадное применение стилейДля того, чтобы применить к выделенному фрагменту какой-либо стиль, достаточно щелкнуть по имени этого стиля на панели Применение стиля (рис. 6.6).
(рис 6.6) Назначение стиля посредством панели Применение стиляОбратите внимание на атрибут class тега <div> (или другого тега ), который, собственно, и определяет, каким стилем размечен фрагмент веб-страницы (рис. 6.6). На рис.6.7 приведена сводка элементов интерфейса SharePoint Designer, на которых отображаются название и свойства стиля, назначенного выделению. Таким образом, пользователь имеет определенную свободу в выборе панелей, которые он будет применять для настройки стилей CSS.
(рис 6.7) Сводка мест отображения назначенного стиляПомимо панели Применение стиля, для назначения и редактирования стилей может применяться и панель Управление стилями (рис. 6.8).
Примечание. Вопросам применения стилей в SharePoint Designer посвящена лабораторная работа 6.1
(рис 6.8) Использование панели Управление стилямиВ частности, вызывая из области названия некоторого стиля контекстное меню и выбирая в нем пункт Изменить стиль, Вы получаете доступ к редактированию параметров данного стиля в диалоговом окне (рис. 6.9). Выбор команды Перейти к коду открывает фрагмент кода выбранного стиля в отдельной вкладке (см. рис. 6.4).
(рис 6.9) Настройка стиля
Графика
Для вставки рисунка на веб-страницу предусмотрено несколько различных способов. Например, команда Вставка / Рисунок / Из файла, либо нажатие одноименной кнопки на панели инструментов. Далее в диалоговом окне Рисунок следует отыскать нужный файл и, выделив его, нажать кнопку Вставить. Если по каким-то причинам желательно сначала вставить тег <img>, а уже затем определить местонахождение файла с рисунком, то достаточно перетащить элемент Рисунок из списка Теги на Панели элементов на документ (рис. 6.10).
(рис 6.10) Вставка пустого тега рисункаЗатем, для того, чтобы выбрать файл с рисунком, следует либо дважды щелкнуть на рисунке в области Конструктор, либо ввести команду Свойства рисунка посредством контекстного меню (рис. 6.11), а затем в диалоге Свойства рисунка определить основные параметры тега <img> (рис. 6.12).
(рис 6.12) Вызов диалога Свойства рисунка(рис 6.11) Диалоговое окно Свойства рисункаДиалоговое окно Свойства рисунка имеет две вкладки: Общие (рис. 6.12) и Вид (рис. 6.13). На вкладке Вид задаются опции обтекания рисунка текстом и положение рисунка на странице.
(рис 6.13) Дополнительные опции редактирования рисункаПрименение различного форматирования к рисунку, например, при выборе некоторых параметров на вкладке Вид в диалоге Свойства рисунка, реализуется путем создания соответствующего класса стилевой разметки. Как правило, большая часть форматирования графики (за исключением задания ширины и высоты изображения ) не записывается непосредственно в атрибуты тега <img>, а оформляется в виде ссылки на соответствующий класс стилевой разметки. Например, на рис. 6.14 на панели Свойства CSS показано определение CSS -класса style1, который был создан SharePoint Designer автоматически. Этот стиль применяется только для одного рисунка и является внедренным, т.е. хранится непосредственно в коде веб-страницы в пределах тега <head>.
(рис 6.14) Форматирование рисунка реализуется посредством новых стилей CSSПо мере импорта новых рисунков и их сопутствующего форматирования, создаваемые автоматически стили добавляются в код веб-страницы и становятся доступными для применения к другим рисункам.
В заключение опишем еще один, наиболее простой, способ вставки рисунка на веб-страницу.
Выделите файл с рисунком на панели Список папок.
Перетащите файл в нужное место веб-страницы (рис. 6.15).
При желании отформатируйте рисунок, который тут же появится на странице (рис. 6.16).
(рис 6.16) Вставка рисунка из файла(рис 6.15) Вставленный рисунок на веб-странице
Быстрое редактирование графики средствами SharePoint Designer
Применить несложное редактирование путем модификации самого содержимого графического файла можно не только посредством графических редакторов, но и непосредственно в пределах SharePoint Designer, при помощи панели инструментов Рисунки (рис. 6.17). Эта панель позволяет вставить рисунки из файла, дублируя возможности стандартной панели инструментов, а также позволяет применить характерное форматирование рисунков, перезаписав информацию в соответствующий файл. Для ее вызова на экран достаточно ввести команду Вид / Панели инструментов / Рисунки.
(рис 6.17) Отражение рисункаНапример, если Вы хотите отразить рисунок слева направо или сверху-вниз, то следует, выделив его, нажать соответствующую кнопку на панели Рисунки. Результат отражения можно оценить по рис. 6.18.
Примечание. До момента сохранения веб-страницы, содержимое файла с рисунком будет оставаться неизменным. В момент сохранения SharePoint Designer потребует подтвердить намерение перезаписать графический файл.
(рис 6.18) Перекрашивание рисункаКоротко остановимся на назначении различных кнопок на панели инструментов Рисунки. Кнопки Переместить вперед и Переместить назад управляют месторасположением изображения относительно других элементов. Контрастность и яркость регулируется кнопками Увеличение контрастности, Уменьшение контрастности, Увеличение яркости и Уменьшение яркости соответственно. Кнопка Обрезка позволяет обрезать рисунок с разных сторон. При этом внутри рисунка появляется дополнительные маркеры обрамления, служащие для вырезания из рисунка нужного фрагмента.
Кнопка Установить прозрачный цвет применяется, когда нужно показать рисунок с необычным контуром, который не имеет прямых границ и залит по этому контуру однотонным цветом. Кнопка Цвет позволяет перекрасить рисунок в оттенки серого или размыть рисунок (как это показано на рис. 6.18). Операция Сокращение цветов применяется, чаще всего, для повышения четкости рисунка, который был увеличен или сжат. Кнопка Багетная рамка создает характерный эффект выпуклого обрамления рисунка.
Если в какой-либо из моментов работы отредактированный вид рисунка перестает Вас устраивать, то вернуться к прежнему его состоянию (из текущего содержимого файла) можно нажатием кнопки Восстановить (рис. 6.19).
Примечание. Остальные кнопки (с контурами графических примитивов) служат для разметки карт-изображений.
(рис 6.19) Восстановление первоначального вида рисунка
Гиперссылки
Гиперссылки в SharePoint Designer вставляются на веб-страницы стандартным способом, принятым и в других программах пакета Microsoft Office. Достаточно выделить фрагмент текста на веб-странице, нажать кнопку Вставить гиперссылку (рис. 6.20), а затем выбрать файл, на который будет ссылаться гиперссылка, в диалоговом окне Вставка гиперссылки (рис. 6.21)
(рис 6.21) Нажмите кнопку Вставить гиперссылку(рис 6.20) Определите параметры гиперссылки
Таблицы
Поскольку веб-узлы SharePoint построены на основе концепции табличного дизайна, программа SharePoint Designer имеет довольно развитые средства по работе с таблицами. В частности, для создания табличного макета веб-страницы служит область задач Макетные таблицы (рис. 6.22). Достаточно выбрать один из предлагаемых макетов и щелкнуть ссылку Вставить макетную таблицу, чтобы добавить готовую макетную таблицу на веб-страницу.
Примечание. Для отмены макета таблицы надо выбрать пиктограмму Без макета.
(рис 6.22) Создание макетной таблицыАльтернативный способ создания макетной таблицы – это рисование ее вручную, при помощи кнопок Нарисовать макетную таблицу и Нарисовать макетную ячейку. Если Вы уже имеете введенный на страницу текст, то легко преобразовать его в таблицу посредством команды Преобразовать / Текст в таблицу. Одна макетная таблица может быть вставлена внутрь другой макетной таблицы. Если поместить указатель мыши в пределах одной из таблиц и выбрать команду Выделить таблицу, то выделена будет нужная таблица.
Для настройки размеров столбцов и строк следует перетаскивать границы макета таблицы в ту или иную сторону, ориентируясь на параметры макета таблицы, отображаемые на веб-странице, если в области задач Макетные таблицы включена опция Показать параметры макета (рис. 6.23). При включенных параметрах макета возле каждой границы таблицы приводится ширина столбца или высота строки. Для того, чтобы изменить эти параметры, достаточно щелкнуть по ссылке и выбрать команду Изменить ширину столбца или Изменить высоту строки.
(рис 6.23) Редактирование макета таблицыВ верхнем меню Таблица, а также в контекстном меню и на панели инструментов Таблицы (рис. 6.24), имеется полный набор команд, позволяющих вставить новые или удалить существующие строки, столбы и ячейки, разбить одну ячейку на несколько или осуществить слияние ячеек.
(рис 6.24) Перейдите к свойствам ячейки или таблицыДля выбора параметров таблиц используются два диалоговых окна Свойства таблицы и Свойства ячейки (рис. 6.25). В диалоге Свойства таблицы можно определить стиль границ таблицы, выравнивание и обтекание для таблицы, в целом, а также ее фон. Например, флажок Использовать фоновый рисунок позволяет определить в качестве фона таблицы какое-либо из изображений из файла.
Диалог Свойства ячейки (рис. 6.25) позволяет определить тип выравнивания по осям Х и Y, выбрать размер и цвет для границ отдельной ячейки, а также настроить желаемым образом ее фон (который будет, накладываясь на фон всей таблицы, целиком его заслонять). Флажок Ячейка заголовка применяет к выделенным ячейкам атрибут разметки этих ячеек как заголовка таблицы. Заголовок таблицы размечается другим тегом, в чем несложно убедиться, просматривая код страницы.
(рис 6.25) Диалог Свойства ячейки
CSS-макеты
Помимо применения табличного макета, SharePoint Designer предлагает средства, реализующие еще одну популярную в веб-дизайне технологию, основанную на применении каскадных таблиц стилей и называемую CSS-позиционированием. Наиболее просто задать CSS -позиционирование в момент создания новой страницы (рис. 6.26). В диалоге Создание необходимо определить опцию Макеты на основе CSS и затем выбрать один из нескольких встроенных макетов, организованных на основе каскадных таблиц стилей.
(рис 6.26) Выбор макета на основе каскадных таблиц стилейЕсли открыть код созданной веб-страницы, то мы увидим, что основную роль в разбиении страницы на разделы играет тег <div>, предназначенный для выделения и форматирования некоторого фрагмента текста (рис. 6.27).
Примечание. Обратите внимание на то, что, наряду с обычным документом Без названия 1.htm создается и независимый файл каскадной таблицы стилей: Без названия 1. CSS. Ссылка на этот документ размещается в пределах тега <head> на html-странице (рис. 6.27). Таким образом, CSS -позиционирование элементов определяет каскадная таблица стилей, сохраняемая в независимом файле.
(рис 6.27) Новая веб-страница создана на основе CSS-позиционированияПосле того, как веб-страница создана, ее можно наполнить элементами, задавая для каждого из них жесткое позиционирование, используя соответствующую каскадную таблицу стилей, сохраненную в отдельном файле с расширением CSS (рис. 6.28). В отличие от позиционирования по умолчанию, когда браузер сам определяет положение каждого элемента на веб-странице, в случае применения стилей позиционирования каждый из этих элементов жестко привязывается к некоторому положению на веб-странице. Наряду с, собственно, CSS позиционированием, можно обычным способом применять стилевую разметку элементов веб-страницы посредством области задач Применение стилей (рис. 6.28).
(рис 6.28) Для CSS-разметки элементов используйте панель Применение стилей
Лабораторные работы
Лабораторная работа 6.1. Применение стилей
Конспективно рассмотрим приемы применения CSS -разметки элементов веб-страницы при помощи области задач Управление стилями (рис. 6.29).
Выделите на веб-странице фрагмент, которому хотите назначить стилевую разметку.
В области задач (рис 6.29) Выберите стиль на панели Управление стилями
Вызовите из названия стиля в области задач Управление стилями контекстное меню.
Выберите в контекстном меню пункт Применить стиль (рис. 6.30).
Оцените результат применения стиля к элементу веб-страницы.
(рис 6.30) Назначение стиля фрагменту текстаПолезным будет обратить внимание на то, как SharePoint Designer осуществляет прямое форматирование текста.
Выделите на веб-странице некоторый фрагмент текста.
На панели инструментов (рис 6.31) Отформатируйте фрагмент текста
Обратите внимание на изменения, произошедшие в области задач Управление стилями и заключающиеся в появлении нового стиля (в нашем примере, Style 5), которым размечается текст (рис. 6.32).
Оцените результат форматирования веб-страницы в браузере.
(рис 6.32) Форматирование текста осуществляется автоматическим созданием стиля CSS
Лабораторная работа 6.2. Вставка рисунка из галереи клипов
Осуществим в рамках этого упражнения вставку на веб-страницу рисунка из галереи клипов Microsoft Office и его сохранения в файле.
Выделите желаемое место вставки клипа на веб-странице.
Введите команду (рис 6.33) Откройте область задач Клип
На панели (рис 6.34) Отыщите нужный клип
Нажмите кнопку Вставить или просто перетащите клип в нужное место страницы.
Определите замещающий текст рисунка (рис. 6.35) и нажмите кнопку (рис 6.35) Введите замещающий текст
Отредактируйте рисунок на странице (рис. 6.36).
Введите команду (рис 6.36) Отредактируйте вставленный рисунок
В открывшемся диалоге Сохранение внедренных файлов выберите имя сохраняемого рисунка (рис. 6.37).
Нажимая кнопку (рис 6.37) Выберите расположение создаваемого на веб-узле файла с рисунком
Определите желаемый формат создаваемого на веб-узле графического файла (рис. 6.38).Примечание. Для некоторых форматов доступны дополнительные параметры. В качестве параметра GIF-файла используется параметр чередования. Такой рисунок при просмотре его в браузере будет загружаться характерными полосами, что позволит зрителю Вашей страницы быстрее оценить его содержание.
Оцените результат вставки рисунка в браузере.
(рис 6.38) Выберите формат и параметры создаваемого файла с рисунком
Краткие итоги
SharePoint Designer позволяет редактировать обычные веб-страницы стандартными приемами веб-дизайна.
Тем не менее, SharePoint Designer предназначен, в первую очередь, для разработки веб-узлов SharePoint и поэтому имеет развитые инструменты визуального проектирования компонентов, напрямую задействованных в технологии SharePoint. К ним относятся средства работы с таблицами, каскадными стилями CSS, графикой и DHTML-сценариями.
Обычные приемы форматирования применяются похожим образом на другие программы пакета Office.
Преамбула
Несмотря на то, что программа SharePoint Designer, в первую очередь, предназначена для редактирования веб-узлов SharePoint, ее, тем не менее, довольно удобно использовать в качестве неплохого средства традиционного веб-дизайна. Поэтому посвятим данную главу основам применения SharePoint Designer для разработки HTML- и ASPX-страниц, не касаясь особенностей технологии SharePoint, однако, имея в виду, что приведенные в главе сведения пригодятся и при разработке страниц SharePoint. Ведь почти все элементы управления HTML- и ASP- допускается размещать на веб-страницах стандарта SharePoint.
При изложении материала в этой главе подразумевается, что читатель владеет самыми основными приемами HTML-дизайна.
Стили
Начнем с неотъемлемого приема современного веб-дизайна, связанного с использованием каскадных таблиц стилей. SharePoint Designer обладает развитыми средствами по применению стилей, главным из которых является панель Свойства CSS.
Подключение CSS-файла
Мы начнем с применения к создаваемым в SharePoint Designer веб-страницам уже существующей таблицы стилей, которая, возможно, использовалась Вами при проектировании других узлов и хранится в некотором файле с расширением . CSS на Вашем компьютере.
Разместите на экране одновременно окно Проводника Windows и SharePoint Designer (рис. 6.1).
Перетащите файл каскадной таблицы стилей из папки (рис 6.1) Перенесите CSS-файл на панель Список папок
Перетащите CSS -файл из панели (рис 6.2) Перетащите CSS-файл прямо на область Конструктор
Оцените результат применения стилей к веб-странице (рис. 6.3).
Откройте область задач Свойства CSS.
На панели Свойства CSS просмотрите свойства стиля, который определяет форматирование тега, размечающего выделенный объект. В нашем примере это тег <Body>, указанный в списке Примененные правила (рис. 6.3).
(рис 6.3) Результат применения таблицы стилейОтредактировать сам файл, описывающий таблицу стилей (т.е. файл с расширением . CSS ), можно непосредственно в SharePoint Designer. Для этого достаточно двойным щелчком открыть его в отдельной вкладке и править, как в обычном текстовом редакторе (рис. 6.4). Второй вариант изменения самих стилей – это выбор желаемого форматирования на панели Свойства CSS.
(рис 6.4) Редактирование файла с таблицей стилей
Назначение и редактирование стилей
Для, собственно, назначения существующих стилей CSS служат области задач Применение стилей и Управление стилями. Следует отметить, что каскадные таблицы стилей подразумевают последовательное применение стилевой разметки, которая может описываться, как в коде самой веб-страницы, так и в обособленных CSS -файлах, с ней связанных. Кроме того, стили могут использоваться для различных целей: форматирования текста и графики, позиционирования объектов на веб-странице и т.д. Принцип каскадного назначения стилей иллюстрируется рис. 6.5. Как видно из панели Применение стиля, стили, назначенные выделенному фрагменту на веб-странице, выделяются обрамлением.
(рис 6.5) Каскадное применение стилейДля того, чтобы применить к выделенному фрагменту какой-либо стиль, достаточно щелкнуть по имени этого стиля на панели Применение стиля (рис. 6.6).
(рис 6.6) Назначение стиля посредством панели Применение стиляОбратите внимание на атрибут class тега <div> (или другого тега ), который, собственно, и определяет, каким стилем размечен фрагмент веб-страницы (рис. 6.6). На рис.6.7 приведена сводка элементов интерфейса SharePoint Designer, на которых отображаются название и свойства стиля, назначенного выделению. Таким образом, пользователь имеет определенную свободу в выборе панелей, которые он будет применять для настройки стилей CSS.
(рис 6.7) Сводка мест отображения назначенного стиляПомимо панели Применение стиля, для назначения и редактирования стилей может применяться и панель Управление стилями (рис. 6.8).
Примечание. Вопросам применения стилей в SharePoint Designer посвящена лабораторная работа 6.1
(рис 6.8) Использование панели Управление стилямиВ частности, вызывая из области названия некоторого стиля контекстное меню и выбирая в нем пункт Изменить стиль, Вы получаете доступ к редактированию параметров данного стиля в диалоговом окне (рис. 6.9). Выбор команды Перейти к коду открывает фрагмент кода выбранного стиля в отдельной вкладке (см. рис. 6.4).
(рис 6.9) Настройка стиля
Графика
Для вставки рисунка на веб-страницу предусмотрено несколько различных способов. Например, команда Вставка / Рисунок / Из файла, либо нажатие одноименной кнопки на панели инструментов. Далее в диалоговом окне Рисунок следует отыскать нужный файл и, выделив его, нажать кнопку Вставить. Если по каким-то причинам желательно сначала вставить тег <img>, а уже затем определить местонахождение файла с рисунком, то достаточно перетащить элемент Рисунок из списка Теги на Панели элементов на документ (рис. 6.10).
(рис 6.10) Вставка пустого тега рисункаЗатем, для того, чтобы выбрать файл с рисунком, следует либо дважды щелкнуть на рисунке в области Конструктор, либо ввести команду Свойства рисунка посредством контекстного меню (рис. 6.11), а затем в диалоге Свойства рисунка определить основные параметры тега <img> (рис. 6.12).
(рис 6.12) Вызов диалога Свойства рисунка(рис 6.11) Диалоговое окно Свойства рисункаДиалоговое окно Свойства рисунка имеет две вкладки: Общие (рис. 6.12) и Вид (рис. 6.13). На вкладке Вид задаются опции обтекания рисунка текстом и положение рисунка на странице.
(рис 6.13) Дополнительные опции редактирования рисункаПрименение различного форматирования к рисунку, например, при выборе некоторых параметров на вкладке Вид в диалоге Свойства рисунка, реализуется путем создания соответствующего класса стилевой разметки. Как правило, большая часть форматирования графики (за исключением задания ширины и высоты изображения ) не записывается непосредственно в атрибуты тега <img>, а оформляется в виде ссылки на соответствующий класс стилевой разметки. Например, на рис. 6.14 на панели Свойства CSS показано определение CSS -класса style1, который был создан SharePoint Designer автоматически. Этот стиль применяется только для одного рисунка и является внедренным, т.е. хранится непосредственно в коде веб-страницы в пределах тега <head>.
(рис 6.14) Форматирование рисунка реализуется посредством новых стилей CSSПо мере импорта новых рисунков и их сопутствующего форматирования, создаваемые автоматически стили добавляются в код веб-страницы и становятся доступными для применения к другим рисункам.
В заключение опишем еще один, наиболее простой, способ вставки рисунка на веб-страницу.
Выделите файл с рисунком на панели Список папок.
Перетащите файл в нужное место веб-страницы (рис. 6.15).
При желании отформатируйте рисунок, который тут же появится на странице (рис. 6.16).
(рис 6.16) Вставка рисунка из файла(рис 6.15) Вставленный рисунок на веб-странице
Быстрое редактирование графики средствами SharePoint Designer
Применить несложное редактирование путем модификации самого содержимого графического файла можно не только посредством графических редакторов, но и непосредственно в пределах SharePoint Designer, при помощи панели инструментов Рисунки (рис. 6.17). Эта панель позволяет вставить рисунки из файла, дублируя возможности стандартной панели инструментов, а также позволяет применить характерное форматирование рисунков, перезаписав информацию в соответствующий файл. Для ее вызова на экран достаточно ввести команду Вид / Панели инструментов / Рисунки.
(рис 6.17) Отражение рисункаНапример, если Вы хотите отразить рисунок слева направо или сверху-вниз, то следует, выделив его, нажать соответствующую кнопку на панели Рисунки. Результат отражения можно оценить по рис. 6.18.
Примечание. До момента сохранения веб-страницы, содержимое файла с рисунком будет оставаться неизменным. В момент сохранения SharePoint Designer потребует подтвердить намерение перезаписать графический файл.
(рис 6.18) Перекрашивание рисункаКоротко остановимся на назначении различных кнопок на панели инструментов Рисунки. Кнопки Переместить вперед и Переместить назад управляют месторасположением изображения относительно других элементов. Контрастность и яркость регулируется кнопками Увеличение контрастности, Уменьшение контрастности, Увеличение яркости и Уменьшение яркости соответственно. Кнопка Обрезка позволяет обрезать рисунок с разных сторон. При этом внутри рисунка появляется дополнительные маркеры обрамления, служащие для вырезания из рисунка нужного фрагмента.
Кнопка Установить прозрачный цвет применяется, когда нужно показать рисунок с необычным контуром, который не имеет прямых границ и залит по этому контуру однотонным цветом. Кнопка Цвет позволяет перекрасить рисунок в оттенки серого или размыть рисунок (как это показано на рис. 6.18). Операция Сокращение цветов применяется, чаще всего, для повышения четкости рисунка, который был увеличен или сжат. Кнопка Багетная рамка создает характерный эффект выпуклого обрамления рисунка.
Если в какой-либо из моментов работы отредактированный вид рисунка перестает Вас устраивать, то вернуться к прежнему его состоянию (из текущего содержимого файла) можно нажатием кнопки Восстановить (рис. 6.19).
Примечание. Остальные кнопки (с контурами графических примитивов) служат для разметки карт-изображений.
(рис 6.19) Восстановление первоначального вида рисунка
Гиперссылки
Гиперссылки в SharePoint Designer вставляются на веб-страницы стандартным способом, принятым и в других программах пакета Microsoft Office. Достаточно выделить фрагмент текста на веб-странице, нажать кнопку Вставить гиперссылку (рис. 6.20), а затем выбрать файл, на который будет ссылаться гиперссылка, в диалоговом окне Вставка гиперссылки (рис. 6.21)
(рис 6.21) Нажмите кнопку Вставить гиперссылку(рис 6.20) Определите параметры гиперссылки
Таблицы
Поскольку веб-узлы SharePoint построены на основе концепции табличного дизайна, программа SharePoint Designer имеет довольно развитые средства по работе с таблицами. В частности, для создания табличного макета веб-страницы служит область задач Макетные таблицы (рис. 6.22). Достаточно выбрать один из предлагаемых макетов и щелкнуть ссылку Вставить макетную таблицу, чтобы добавить готовую макетную таблицу на веб-страницу.
Примечание. Для отмены макета таблицы надо выбрать пиктограмму Без макета.
(рис 6.22) Создание макетной таблицыАльтернативный способ создания макетной таблицы – это рисование ее вручную, при помощи кнопок Нарисовать макетную таблицу и Нарисовать макетную ячейку. Если Вы уже имеете введенный на страницу текст, то легко преобразовать его в таблицу посредством команды Преобразовать / Текст в таблицу. Одна макетная таблица может быть вставлена внутрь другой макетной таблицы. Если поместить указатель мыши в пределах одной из таблиц и выбрать команду Выделить таблицу, то выделена будет нужная таблица.
Для настройки размеров столбцов и строк следует перетаскивать границы макета таблицы в ту или иную сторону, ориентируясь на параметры макета таблицы, отображаемые на веб-странице, если в области задач Макетные таблицы включена опция Показать параметры макета (рис. 6.23). При включенных параметрах макета возле каждой границы таблицы приводится ширина столбца или высота строки. Для того, чтобы изменить эти параметры, достаточно щелкнуть по ссылке и выбрать команду Изменить ширину столбца или Изменить высоту строки.
(рис 6.23) Редактирование макета таблицыВ верхнем меню Таблица, а также в контекстном меню и на панели инструментов Таблицы (рис. 6.24), имеется полный набор команд, позволяющих вставить новые или удалить существующие строки, столбы и ячейки, разбить одну ячейку на несколько или осуществить слияние ячеек.
(рис 6.24) Перейдите к свойствам ячейки или таблицыДля выбора параметров таблиц используются два диалоговых окна Свойства таблицы и Свойства ячейки (рис. 6.25). В диалоге Свойства таблицы можно определить стиль границ таблицы, выравнивание и обтекание для таблицы, в целом, а также ее фон. Например, флажок Использовать фоновый рисунок позволяет определить в качестве фона таблицы какое-либо из изображений из файла.
Диалог Свойства ячейки (рис. 6.25) позволяет определить тип выравнивания по осям Х и Y, выбрать размер и цвет для границ отдельной ячейки, а также настроить желаемым образом ее фон (который будет, накладываясь на фон всей таблицы, целиком его заслонять). Флажок Ячейка заголовка применяет к выделенным ячейкам атрибут разметки этих ячеек как заголовка таблицы. Заголовок таблицы размечается другим тегом, в чем несложно убедиться, просматривая код страницы.
(рис 6.25) Диалог Свойства ячейки
CSS-макеты
Помимо применения табличного макета, SharePoint Designer предлагает средства, реализующие еще одну популярную в веб-дизайне технологию, основанную на применении каскадных таблиц стилей и называемую CSS-позиционированием. Наиболее просто задать CSS -позиционирование в момент создания новой страницы (рис. 6.26). В диалоге Создание необходимо определить опцию Макеты на основе CSS и затем выбрать один из нескольких встроенных макетов, организованных на основе каскадных таблиц стилей.
(рис 6.26) Выбор макета на основе каскадных таблиц стилейЕсли открыть код созданной веб-страницы, то мы увидим, что основную роль в разбиении страницы на разделы играет тег <div>, предназначенный для выделения и форматирования некоторого фрагмента текста (рис. 6.27).
Примечание. Обратите внимание на то, что, наряду с обычным документом Без названия 1.htm создается и независимый файл каскадной таблицы стилей: Без названия 1. CSS. Ссылка на этот документ размещается в пределах тега <head> на html-странице (рис. 6.27). Таким образом, CSS -позиционирование элементов определяет каскадная таблица стилей, сохраняемая в независимом файле.
(рис 6.27) Новая веб-страница создана на основе CSS-позиционированияПосле того, как веб-страница создана, ее можно наполнить элементами, задавая для каждого из них жесткое позиционирование, используя соответствующую каскадную таблицу стилей, сохраненную в отдельном файле с расширением CSS (рис. 6.28). В отличие от позиционирования по умолчанию, когда браузер сам определяет положение каждого элемента на веб-странице, в случае применения стилей позиционирования каждый из этих элементов жестко привязывается к некоторому положению на веб-странице. Наряду с, собственно, CSS позиционированием, можно обычным способом применять стилевую разметку элементов веб-страницы посредством области задач Применение стилей (рис. 6.28).
(рис 6.28) Для CSS-разметки элементов используйте панель Применение стилей
Лабораторные работы
Лабораторная работа 6.1. Применение стилей
Конспективно рассмотрим приемы применения CSS -разметки элементов веб-страницы при помощи области задач Управление стилями (рис. 6.29).
Выделите на веб-странице фрагмент, которому хотите назначить стилевую разметку.
В области задач (рис 6.29) Выберите стиль на панели Управление стилями
Вызовите из названия стиля в области задач Управление стилями контекстное меню.
Выберите в контекстном меню пункт Применить стиль (рис. 6.30).
Оцените результат применения стиля к элементу веб-страницы.
(рис 6.30) Назначение стиля фрагменту текстаПолезным будет обратить внимание на то, как SharePoint Designer осуществляет прямое форматирование текста.
Выделите на веб-странице некоторый фрагмент текста.
На панели инструментов (рис 6.31) Отформатируйте фрагмент текста
Обратите внимание на изменения, произошедшие в области задач Управление стилями и заключающиеся в появлении нового стиля (в нашем примере, Style 5), которым размечается текст (рис. 6.32).
Оцените результат форматирования веб-страницы в браузере.
(рис 6.32) Форматирование текста осуществляется автоматическим созданием стиля CSS
Лабораторная работа 6.2. Вставка рисунка из галереи клипов
Осуществим в рамках этого упражнения вставку на веб-страницу рисунка из галереи клипов Microsoft Office и его сохранения в файле.
Выделите желаемое место вставки клипа на веб-странице.
Введите команду (рис 6.33) Откройте область задач Клип
На панели (рис 6.34) Отыщите нужный клип
Нажмите кнопку Вставить или просто перетащите клип в нужное место страницы.
Определите замещающий текст рисунка (рис. 6.35) и нажмите кнопку (рис 6.35) Введите замещающий текст
Отредактируйте рисунок на странице (рис. 6.36).
Введите команду (рис 6.36) Отредактируйте вставленный рисунок
В открывшемся диалоге Сохранение внедренных файлов выберите имя сохраняемого рисунка (рис. 6.37).
Нажимая кнопку (рис 6.37) Выберите расположение создаваемого на веб-узле файла с рисунком
Определите желаемый формат создаваемого на веб-узле графического файла (рис. 6.38).Примечание. Для некоторых форматов доступны дополнительные параметры. В качестве параметра GIF-файла используется параметр чередования. Такой рисунок при просмотре его в браузере будет загружаться характерными полосами, что позволит зрителю Вашей страницы быстрее оценить его содержание.
Оцените результат вставки рисунка в браузере.
(рис 6.38) Выберите формат и параметры создаваемого файла с рисунком
Краткие итоги
SharePoint Designer позволяет редактировать обычные веб-страницы стандартными приемами веб-дизайна.
Тем не менее, SharePoint Designer предназначен, в первую очередь, для разработки веб-узлов SharePoint и поэтому имеет развитые инструменты визуального проектирования компонентов, напрямую задействованных в технологии SharePoint. К ним относятся средства работы с таблицами, каскадными стилями CSS, графикой и DHTML-сценариями.
Обычные приемы форматирования применяются похожим образом на другие программы пакета Office.
