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.29. Выберите стиль на панели Управление стилями
Вызовите из названия стиля в области задач Управление стилямиконтекстное меню.
Выберите в контекстном меню пункт Применить стиль(рис. 6.30).
Оцените результат применения стиля к элементу веб-страницы.
Рис. 6.30. Назначение стиля фрагменту текста
Полезным будет обратить внимание на то, как SharePoint Designer осуществляет прямое форматирование текста.
Выделите на веб-странице некоторый фрагмент текста.
На панели инструментов Форматирование(рис. 6.31) примените полужирное начертание.
Рис. 6.31. Отформатируйте фрагмент текста
Обратите внимание на изменения, произошедшие в области задач Управление стилямии заключающиеся в появлении нового стиля (в нашем примере,Style 5), которым размечается текст (рис. 6.32).
Оцените результат форматирования веб-страницы в браузере.
Рис. 6.32. Форматирование текста осуществляется автоматическим созданием стиля CSS