www.wmaster.ru
Wmaster.ru

На главную

Введение в дизайн

СТАТЬИ

Хостинг

DOCS

Коллекция шрифтов

Скрипты

Секреты мастеров

Продвижение сайта

Soft

Журнал Wmaster

Электронные журналы

ФоруМ

web-mastering
HTML
Programming
HTML-редакторы
Учебник по SEO
Apache
MySQL
XML/WML
Flash
Photoshop
.htaccess
Всё для форумов
Clipart
3DSMax
SSI
CSS
Технология раскрутки
Авторское право
Кодовые таблицы
Важное

Windows

Macromedia Dreamweaver MX

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

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

Рис. 12.01

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

Рис. 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 - задаются отступы (справа - слева, снизу - сверху)

 

<< назад    оглавление    вперед >>

Партнеры Wmaster
Protoplex.RU
Эскизы татуировок
Поиск по сайту
Объявления
Twitter автора
Карта сайта
Наши баннеры
О проекте

Реклама
(понижение цен)

Об Авторе
Команда
Архив рассылки
 Запомнить эту страницу
Сделать стартовой
Рассылка
Wmaster.ru - всё для вебмастера.
Наша кнопка

Все желающие могут поставить нашу кнопочку к себе на сайт
Всё для веб-мастеров

Партнеры
Бочкарёв Антон
Mail: webmaster[at]wmaster.ru
ICQ: 148780826
Хостинг от Valuehost
© RUscripts.design 2003

© Wmaster Design Group 2001-2008. © Все права защищены. При перепечатке любого материала с сайта  ссылка на http://www.wmaster.ru/  обязательна.