Macromedia DreamWeaver MX: Практикум.

12.1. Macromedia DreamWeaver MX. Каскадные таблицы стилей.Часть1

Для работы с каскадными таблицами стилей (CSS Style) нужно перейти на вкладку Design - CSS Styles (Рис. 12.01).

 

Для создания нового стиля кликните правой кнопкой мыши по этой вкладке и из контекстного меню меню выберите пункт New CSS Style (Рис. 12.02).

 

Если у вас имеется уже готовая таблица стилей и вы хотите применить ее для своих страниц, то из контекстного меню вам нужно выбрать пункт Attach Style Sheet (Рис. 12.02) и в раскрывшемся списке указать путь до файла (Рис. 12.03)

Рис. 12.03

При выборе пункта  New CSS Style (Рис. 12.02) появится одноименное окно, где вам и предстоит указать программе, что вы хотите сделать (Рис. 12.04)

Рис. 12.04

Переключатель Make Custom Style (class) - создает новый стилевой класс, в поле Name необходимо ввести имя этого класса (имена начинаются с точки)

Переключатель Redefine HTML Tag - переопределяет форматирование указанное по умолчанию для html тэга, причем сам тег, вы должны выбрать из списка (в поле Name)

Переключатель Use CSS Selector - позволяет создать комбинированный стиль для нескольких тегов сразу (или для всех), а так же задать стиль для гиперссылок.

Далее идут два переключателя отвечающие за то, где будут размещены создаваемые вами стили. При выборе первого - Define In New Style - будет создана внешняя таблица стилей ( после нажатия на ОК вам будет предложено дать имя файлу внешней таблицы, например style.css). При выборе пункта This Document only - стиль будет создан во внутренней таблице стилей ( в теле документа) . По завершении нажмите кнопку ОК.

В открывшемся окне вам и предстоит выбрать настройки стилей (Рис. 12.05)

Рис. 12.05

Первая категория это вкладка Type - выбор и настройка текста. Из списка Font вам предстоит выбрать один из шрифтов для текста или же отредактировать имеющиеся (работе с текстом была посвящена одна из первых частей). В списке Size указывается размер шрифта, в списке Weight - задается толщина (жирность) шрифта, в списке Style - стиль текста (обычный или курсив). В списке Variant задается стиль строчных букв (вы можете выбрать обычный стиль (normal) или сделать строчные буквы "уменьшенными заглавными" (small-caps)).  В списке Line Height задается вертикальный размер строки текста (вы можете оставить его стандартным или сами ввести нужное значение), в списке Case задается вид текста: capitalize - каждое слово начинается с большой буквы, uppercase - весь текст состоит из заглавных букв, lowercase - весь текст состоит из маленьких букв, none - оригинальный текст.

Флажки Decoration: underline - подчеркивает текст, overline - надчеркивает текст,  line-through - зачеркивает текст, blink - делает мерцающий текст, none - значение по умолчанию (ничего с текстом не делает).

При помощи пункта Color задается цвет текста.

Вкладка Background - вкладка для задания фона  (Рис. 12.06)

Рис. 12.06

В пункте Background Color задается цвет фона страницы, в Background Image - графическое изображение используемое в качестве фона. Остальные пункты так или иначе связаны с графическим фоном. Итак, список Repeat: no-repeat - отключает повторение изображения (тут нужно понять, что когда вы в качестве фона вы выбираете изображение, то оно, в большинстве случаев, гораздо меньше пространства страницы и поэтому оно повторяется пока не займет всю площадь страницы.) и само изображение помещается в левый верхний угол страницы; repeat - по умолчанию (повторение по горизонтали и вертикали); repeat-x - повторение только по горизонтали, а repeat-y - по вертикали. Список Attachment: значение scroll - фон прокручивается вместе со страницей (по умолчанию), fixed - фон остается как бы на месте (фиксируется), а прокручиваются только элементы страницы (текст, графика и т.д.). При помощи списков Horizontal и Vertical Position - задаются координаты графического фона, а также его выравнивание.

Вкладка Block - вкладка задания параметров абзаца, а также взаимодействия текста с другими элементами страницы (например графикой)  (Рис. 12.07)

Рис. 12.07

Значение Word Spacing - расстояние между словами, Letter Spacing - расстояние между символами. Список Vertical Alignment - вертикальное выравнивание текста относительно других элементов (по верхнему краю, по нижнему, по центру и т.д.), Text Align - выравнивание текста по горизонтали (по левому/правому краю, по центру, по ширине). Text Indent - размер отступа красной строки (значение может быть как положительным, так и отрицательным). Whitespace: normal - перенос строки по пробелам (по умолчанию), pre - абзац отображается точно так же, как он написан в HTML коде, nowrap - текст не переносится по пробелам ( в том месте где вы все таки хотите чтоб текст переносился, ставьте <BR>). Список Display служит для задания паметров элементов страницы и их взаимодействия (элемент - это например, графическое изображение): принимаемых значений здесь много и описать словами их достаточно трудно,  поэтому здесь вам придется самим разобраться, чтобы понять "для чего это нужно". Создайте простенькую страницу, состоящую из текста и графики, и поочередно меняйте принимаемые значения этого пункта - так вы быстрее поймете .

Вкладка Blox - вкладка задания параметров размещения элементов страницы (Рис. 12.08)

Рис. 12.08

При помощи пунктов Width и Height задается ширина и высота элементов ( например можно задать явные размеры или же процентное отношение). В пункте Float задается выравнивание элементов -по правому или левому краю страницы, пункт auto - оставит вид как в исходном HTML-коде. Чтобы было понятней, - например у вас на странице находятся текст и графические файлы, вы выбрали выравнивание по левому  краю страницы, тогда все изображения будут прижаты к левому краю, а текст займет все оставшееся пространство. .При помощи пункта Clear задается взаимо-размещение элементов (друг за другом, друг под другом), при помощи пунктов Padding и Margin - задаются отступы (справа - слева, снизу - сверху)