Техника Web-дизайна для студента
Создание новой таблицы стилей
Приступить к созданию новой таблицы стилей можно несколькими способами:
О воспользоваться командой меню Text | CSS Styles | New (Текст | CSS стили | Создать);
О открыть панель CSS Styles (CSS стили), используя команду меню Window | CSS Styles (Окно | CSS стили), входящую в состав инструментальных панелей (рис. 7.15).
Щелкнуть по кнопке New CSS Style (Создать CSS стиль) с изображением знака "+" в нижней части панели;
О на панели свойств Properties (Свойства) в режиме работы с текстом (рис. 2.8) раскрыть список Style (Стиль) и выбрать команду Manage Styles (Управление стилями). В открывшемся диалоговом окне Edit Style Sheet (Редактирование таблицы стилей) (рис. 7.16), а при наличии списка только внутренних стилей — <style> нужно нажать кнопку New (Создать).
|
Рис. 7.15. Инструментальная панель CSS Styles |
|
Рис. 7.16. Диалоговое окно Edit Style Sheet |
Все перечисленные способы приводят к открытию диалогового окна New CSS Style (Создать CSS стиль), в котором необходимо
|
Рис. 7.17. Диалоговое окно New CSS Style |
|
Воспользоваться переключателем Selector Туре (Выбор типа) и выбрать тип создаваемой каскадной таблицы стилей (рис. 7.17). |
При выборе Tag (redefines the look of a specific tag) (Метка (изменение свойств метки)), мы получим возможность изменять свойства любой метки HTML. Верхний раскрывающийся список станет называться Tag (Метка). В нем можно выбрать метку, свойства которой мы хотим изменить. Переключатель Define in (Определить в) позволяет выбрать будет ли каскадная таблица стилей храниться в отдельном файле (переключатель в верхнем положении) или она будет размещаться в разделе <head> документа внутри блока, отмеченного метками <style>...</style> — переключатель в положении This document only (Только этот документ).
При создании каскадной таблицы стилей в виде отдельного файла верхний список переключателя Define In (Определить в) содержит единственную запись New Style Sheet File (Новый файл таблицы стилей). При повторных открытиях окна New CSS Style (Создать CSS стиль) список переключателя будет содержать имена файлов, сохраненных ранее. Создаваемая таблица стилей может быть внедрена в существующий файл или сохранена в новом файле.
Установив переключатель Selector Туре (Выбор типа) в положение Class (can apply to any tag) (Класс (может применяться к любой метке)), получаем возможность создания класса стилей, применяемого к различным меткам. Имя класса нужно вписать
в строку Name (Имя), а при повторных обращениях его можно выбрать из списка. Так же как и в предыдущем случае, с помощью переключателя Define In (Определить в) можно сохранить класс стилей в отдельном файле либо поместить его внутри блока <style>...</style>, создаваемого документа.
Перевод переключателя Selector Туре (Выбор типа) в положение Advanced (IDs, contextual selectors, etc) (Дополнительные возможности) позволяет из верхнего списка Selector (Список выбора) выбрать для редактирования один из четырех так называемых псевдоклассов. К ним относятся: a:link — свойства обьиной гиперссылки, a:active — свойства активной (последней посещенной) гиперссылки, a:visited — свойства посещенной гиперссылки, a:hover — свойства гиперссылки, на которой установлен курсор.
Если переключатель Define In (Определить в) был установлен в верхнее положение, то после завершения работы в окне New CSS Style (Создать CSS стиль) нам будет предложено сохранить создаваемую таблицу стилей в виде отдельного файла. Откроется диалоговое окно Save Style Sheet File As (Сохранить файл таблицы стилей как), в котором необходимо дать файлу имя и указать папку, в которой его нужно сохранить. После этого откроется диалоговое окно CSS Style definition for (Определение CSS стиля для), в котором выбранным свойствам можно задать значения.
Если же было выбрано нижнее положение переключателя Define In (Определить в), то сразу после завершения работы в окне New CSS Style (Создать CSS стиль) откроется диалоговое окно CSS Style definition for (Определение CSS стиля для) (рис. 7.18).
Свойства стилей для удобства разбиты на 8 категорий, которые перечислены в разделе Category (Категория):
1. Туре (Текст) — форматирование текста. Позволяет изменить следующие параметры форматирования текста:
• Font (Шрифт) — гарнитуру шрифта;
• Size (Размер) — размер шрифта;
• Style (Стиль) — начертание шрифта. Из списка можно выбрать normal (обычное), italic (курсивное), oblique (наклонное);
|
Рис. 7.18. Диалоговое окно CSS Style definition for... |
• LinE Height (Высота строки) — расстояние между строками;
• Decoration (Оформление) — оформление шрифта. Устанавливая соответствующие флажки можно задать: underline (подчеркивание), overline (надчер кивание), line-through (зачеркивание), blink (мигание) — не поддерживается браузером MS Internet Explorer, none (отсутствие оформления);
• Weight (Толщина) — толщина шрифта (степень жирности);
• Variant (Вариант) — изображение строчных букв как заглавных (small-caps) или обычный шрифт (normal);
• Case (Регистр) — смена регистра символов. Возможны варианты: capitalize (первые буквы всех слов прописные), uppercase (весь текст прописными буквами), lowercase (весь текст строчными буквами), попе (отсутствие смены регистра);
• Color (Цвет) — цвет текста.
2. Background (Фон). Позволяет задать следующие параметры
Фона:
• Background Color — цвет фона;
• Background Image (Фоновое изображение) — имя файла фонового графического изображения;
• Repeat (Повторение) — повторяемость фонового изображения. Возможен выбор значений: no-repeat (не повторять), repeat (повторять по горизонтали и вертикали — по умолчанию), repeat-х (повторять по горизонтали), repeat-у (повторять по вертикали);
• AttacHmEnt (Привязка) — взаимодействие фона с содержимым страницы при перемещении содержимого с помощью полос прокрутки (скроллинга): fixed (содержимое страницы перемещается относительно неподвижного фона), scroll (содержимое страницы перемещается вместе с фоном по умолчанию);
• Horizontal Position (Горизонтальная позиция) — позиционирование фоновой картинки по горизонтали относительно границ объекта, в котором задан фон: left (выравнивание по левому краю), center (центрирование), right (выравнивание по правому краю), value (задание произвольного значения смещения);
• Vertical Position (Вертикальная позиция) — позиционирование фоновой картинки по вертикали: top (выравнивание по верхнему краю), center (центрирование), bottom (выравнивание по нижнему краю), value (задание произвольного значения смещения).
3. Block (Блок) — форматирование текста. Дополняет категорию
Туре новыми возможностями:
• Word spacing — расстояние между словами: normal (обычное), value (произвольное значение);
• Letter spacing — расстояние между буквами: normal (обычное), value (произвольное значение);
• Vertical alignment — положение элемента по вертикали, относительно родительского элемента. Наибольший практический интерес представляют значения: top (совмещаются верхние края элементов), middle (базовая линия элемента выравнивается на уровне средней точки родителя), bottom (совмещаются нижние края элементов);
• Text align — выравнивание текста по горизонтали относительно элемента, в котором он находится. Возможные значения: left (по левому краю), right (по правому краю), center (по центру), justify (по ширине);
• Text indent (Текстовый отступ) — отступ первой строки абзаца;
• Whitespace (Пробел) — выбор способа обработки пробелов и строк. Возможны значения: normal (при демонстрации документа пробелы идущие подряд сокращаются до одного по умолчанию), рге (сохраняется предварительное форматирование текста, включая пробелы), nowrap (запрещает переход на новую строку);
• Display — отображение или скрытие объекта. Наибольший практический интерес представляют значения: block (отображать объект), попе (скрыть объект).
4. Box (Контейнер). Позволяет оформить фрагмент текста в виде прямоугольного блока, задав: размеры блока, способы выравнивания внутри блока, отступы и т. д. Возможно задание
Следующих параметров:
• Width, Height — ширина и высота блока;
• Padding (Отступ) — группа параметров, задающих отступы между границами блока и его содержимым. Группа включает следующие поля для задания параметров: top (отступ от верхней границы), right (от правой границы), bottom (от нижней границы), left (от левой границы). При установленном флажке Same for All (Одинаковые для всех) все отступы будут одного размера;
• Float (Плавающий) — блок становится "плавающим". В зависимости от заданного значения он будет примыкать к левому краю страницы (left) или к правому краю (right). Значение попе отменяет действие свойства float (плавающий). "Плавающий" блок влияет на положение следующих за ним объектов. Если позволит ширина страницы, объекты будут обтекать "плавающий блок", располагаясь на одной горизонтальной линии с ним. Таким образом, можно расположить на одной горизонтальной линии несколько абзацев, которые в обычных условиях должны были бы расположиться друг под другом. Например:
<body>
<р style="float: left; width: ЮОрх; background-color:
# FFFFO0">Первый абзац </p>
<p style="float: left; width: lOOpx; background-color:
#00FFFF">BtopoM абзац</р>
<p style="float: left; width: lOOpx; background-color:
#FF00FF">TpeTnii абзац</р>
</body>
Результат применения свойства float со значением left к трем
Абзацам показан на рис. 7.19.
|
Рис. 7.19. Результат применения свойства float со значением left к трем абзацам |
• Clear (Очищать) — используется совместно со свойством float. Запрещает обтекание объекта слева (left), справа (right), с обеих сторон (both). Значение попе отменяет действие свойства clear;
• Margin (Поле) — группа параметров, задающих расстояния между границами блока и соседними элементами страницы. Значения параметров те же, что и в группе Padding (Отступ).
5. Border (Рамка). В этой категории можно задавать три параметра рамки:
• Style — стиль рамки. Из раскрывающегося списка можно выбрать: попе (нет рамки по умолчанию), dotted (пунктирная), dashed (прерывистая), solid (непрерывная), double (двойная), groove (углубленная), ridge (выпуклая), insert (эффект углубления блока), outset (эффект выпуклости блока);
. Width - толщина рамки. Список содержит значения: thin (тонкая рамка), medium (средняя), thick (широкая), value (произвольное значение);
• Color — цвет рамки.
Если снят флажок Same for All (Одинаковые для всех), то значение параметра можно задавать отдельно для каждой из сторон рамки: top (верхняя), left (левая), right (правая), bottom (нижняя).
6. List (Список). Возможна установка следующих параметров списка:
• Туре (Тип) — тип маркера или номера. Варианты выбора: disc (закрашенная окружность), circle (не закрашенная окружность), square (закрашенный квадрат), decimal (арабские цифры), lower-roman (маленькие римские цифры), upper-roman (большие римские цифры), lower-alpha (маленькие латинские буквы), upper-alpha (большие латинские буквы), попе (без маркеров или номеров);
• Bullet Image (Изображение маркера) — имя файла графического изображения, используемого в качестве маркера. Нажатие кнопки Browse (Поиск) открывает диалоговое окно Select Image Source (Выбор источника изображения) для поиска файла рисунка;
• Position (Положение) — положение маркера в списке: inside (внутри), outside (снаружи). Разница заметна только при наличии элементов списка, занимающих более одной строки. В первом случае вторая и последующие строки будут начинаться под маркером, во втором — выравниваются по первой строке.
7. Positioning (Позиционирование). Основное назначение данной категории — создание блоков и размещение их на странице, но в отличие от категории Box (Контейнер) она содержит больше возможностей. Знакомясь со свойствами данной категории, можно обращаться к разделам 7.7.5, 7.7.6 и 7.7.7, в которых даны более подробные разъяснения и приведены примеры.
• Туре (Тип) — тип позиционирования. Из списка можно выбрать один из типов позиционирования: absolute (абсолютное), relative (относительное), static (статическое);
• Width (Ширина), Height (Высота) — размеры блока;
• Placement (Размещение) группа параметров, определяющих положение блока. Горизонтальное положение блока определяется параметрами Left (величина смещения слева направо) и Right (справа налево), а вертикальное параметрами Тор (величина смещения сверху вниз) и Bottom (снизу вверх). Имеет смысл выбора только по одному значению из каждой пары для абсолютного и относительного типов позиционирования. При абсолютном позиционировании смещение отсчитывается от краев страницы или родительского блока, при относительном — от положения объекта в случае его статического позиционирования;
• Visibility (Видимость) — список содержит следующие значения: inherit (унаследованная видимость), visible (видимый), hidden (скрытый);
• Z-Index (Номер слоя) — поле, позволяющее задать номер слоя, в котором будет располагаться блок;
• Overflow (Переполнение) — список действий при переполнении блока, т. е. в тех случаях, когда содержимое блока превышает его размеры: visible (содержимое блока, не поместившееся внутри, остается видимым по умолчанию), hidden (содержимое блока, оказавшееся за его пределами, будет скрыто), scroll (независимо от объема содержимого блок снабжается полосами прокрутки), auto (полосы прокрутки устанавливаются только при переполнении блока);
• Clip (Область просмотра) — группа параметров, задающих прямоугольную область просмотра, за пределами которой содержимое блока будет скрыто. Параметры Тор и Bottom отсчитываются от верхней границы блока и задают расстояния до верхней и нижней границ области просмотра. Параметры Right и Left отсчитываются от левой границы блока и задают расстояния до правой и левой границ области просмотра.
8. Extensions (Дополнения) — дополнительные возможности. В этой категории практический интерес представляют следующие свойства:
• Cursor (Курсор) — позволяет изменить внешний вид курсора, при наведении его на данный объект. Из списка можно выбрать следующие значения: hand (рука), crosshair (перекрестье), text (в виде буквы I), wait (песочные часы), help (стрелка со знаком вопроса), e-resize, ne-resize, n-resize, nw-resize, w-resize, sw-resize, s-resize, se-resize (стрелки изменения размера объекта различного направления), default (по умолчанию), auto (форма зависит от типа элемента);
• Filter (Фильтр) — создание эффектов с использованием статических и динамических фильтров. Следует обратить внимание, что программа Dreamweaver MX 2004 для задания фильтров использует устаревший синтаксис, который применялся в браузерах MS Internet Explorer версий 4.0 и 5.0. Начиная с версии 5.5, Microsoft изменила синтаксис задания фильтров и расширила их количество (см. главу 9). В браузерах MS Internet Explorer 5.5 и 6.0 фильтры, заданные с использованием старого синтаксиса также работают. Читателю необходимо самому определиться, будет ли он с целью ускорения работы задавать фильтры в программе Dreamweaver, рискуя, что в новых версиях браузеров они работать не будут, или будет использовать ручное задание фильтров, описанное в главе 9.
