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