| |
|
 |
Статьи
|
Как сделать CSS в DreamWeaver
|
|
Нажимаем
на кнопку Show CSS Styles, которая находится
в правой нижней части окна DreamWeaver. |
|
В
появившейся панели нажимаем на кнопку New
Style (создать) (она выделена на рисунке). |
|
Сперва
вы видите стандартный диалог, возникающий
при создании нового стиля.
Вы можете выбрать один из трех вариантов -
создать новый стиль, переназначить свойства
стандартного HTML-тега и использовать
специальные расширения CSS. |
|
После
указания имени вашего стиля (или выбора
стандартного стиля для переназначения) вы
оказываетесь в "настройках" стиля. Делается
здесь все довольно просто, за изменениями вы
можете наблюдать в режиме realtime (правда с
некоторыми оговорками).
На первой закладке мы определяем, как будет
выглядеть отдельная буква нашего текста:
1. Указываем шрифт, которым будет писаться
текст. Обратите внимание, что вы можете либо
указать конкретный шрифт, хоть FreeSet, но
нет шансов, что он есть у пользователя на
машине (а раз его нет - отображаться
страничка будет не так). Так что рекомендую
пользоваться конструкциями, предлагаемыми
самим DreamWeaver - например, Verdana,
Arial, Helvetica, sans-serif. В этом случае
сначала будет искаться шрифт Verdana - не
нашли, тогда Arial, нет такого? Тогда
Helvetica, ну а если и ее нет - тогда любой
шрифт без засечек - гротеск.
2. Указываем размер шрифта - по сравнению с
возможностями HTML тут все просто здорово.
Размер можно указать практически в чем
угодно, начиная от % и заканчивая пикселями
и пунктами.
3. Здесь настраивается степень "веса" буквы
или, проще говоря, его толщина. Вариантов
как видите тоже немало.
4. Стиль написания - наклонный (италлик),
стандартный (normal)
5. Вариации написания - например, весь текст
набран только строчными или только
заглавными буквами.
6. Высота базовой линии шрифта в пунктах,
поинтах или любых других величинах
7. Какими буквами мы пользуемся - большими,
маленькими или стандартно и теми и другими.
8. Различный декор - подчеркивание, мигание
и прочее.
9. Цвет текста.
Обратите внимание на пункты помеченные *. На
этой и на других панелях эта звездочка
означает, что данный вариант не отображается
визуально в DreamWeaver (т.е. в браузере
надо проверять) |
|
На
данной закладке мы производим настройки
фона. Фона всей странички или только
заданного абзаца текста - это уж как вы
стиль решили создавать.
Цвет фона (выбираете вариант из стандартных
256 цветов или создаете свой цвет)
Файл с фоновым изображением
Настройка повторения (размножения) фонового
изображения по странице, например, можно
задать, чтобы изображение копировалось
только по оси X
Здесь указывается как ведет себя фоновое
изображение при прокрутке страницы -
прокручивается вместе с ней или стоит на
месте
Указание горизонтальной позиции начала фона
Указание вертикальной позиции начала фона
Сразу замечу, что пунктами 3 и 4 надо
пользоваться "с оглядкой" - т.е. проверять
во всех необходимых версиях браузеров на
совместимость - иначе, может получиться
расхождение в отображении... |
|
Пункт
block служит для настроек параметров блока
текста (т.е. здесь речь идет уже не об
отдельных буквах как в пункте Type).
Настройка расстояния между словами
Настройка межбуквенного расстояния или
трекинг
Вертикальное выравнивание строки текста
Горизонтальное выравнивание текста
Отступ первой строки текста
Настраивает систему расстановки
дополнительных пробелов между словами и
предложениями (несколько вариантов)
Здесь все достаточно просто, я обычно
использую только Text Align и Text Indent.
Остальные пункты только при необходимости
создания элементов дизайна именно на основе
стилей (при создании текстовой версии). |
|
Данный
пункт управляет ограничениями данного куска
текста на странице (ограничивает его
расположение в определенном прямоугольнике)
Ширина прямоугольника
Высота прямоугольника
Настройка выключки влево или вправо
Настройка того, как ведет себя текст при
использовании элемента с выключкой влево или
вправо (как текст обтекает подобный объект)
Настройка отступа от края прямоугольника до
расположенных рядом других элементов
Настройка отступа от краев прямоугольника до
текста. |
|
Пошли
различные декоративные настройки. Например,
это позволит вам создать бордюр вокруг
вашего элемента, со всеми необходимыми вам
настройками.
Указываем ширину бордюра слева, справа,
сверху и снизу
То же самое но для цвета бордюра
Стиль бордюра - различные варианты сочетания
точек и черточек :) |
|
Настройки
списков (нумерованного и списка с буллетами)
Тип оформления буллета (несколько вариантов)
Использование в качестве буллета картинки
Позиционирование буллета |
|
Позиционирование
- вещь важная и интересная. Оно помогает
"поставить" наш объект в любое место на
страничке. Итак:
Тип позиционирования (относительное,
абсолютное и т.д.)
Расположение по Z-координате - в каком слое
будет находится наш объект.
Видимый или невидимый наш объект (может
использоваться для создания пустых полей в
документе)
Чего будем делать с переполнением (т.е. если
текст весь не влез)
Расположение объекта - указание координат
вершины + ширины и высоты
Отступы со всех сторон в пикселях или других
единицах. |
|
Ну
и последнее...
Указание обрыва страницы (в основном для
печати)
Визуальный эффект - при наведении на объект
курсора он может менять свою форму или при
загрузке объекта срабатывает один из
стандартных фильтров (последнее верно только
для Internet Explorer).
Ну вот, теперь у вас есть базовые знания в
области CSS. Примеров никаких не будет,
только сухая и скучная теория |
|
|
|