Logo Море(!) аналитической информации!
IT-консалтинг Software Engineering Программирование СУБД Безопасность Internet Сети Операционные системы Hardware
Скидка до 20% на услуги дата-центра. Аренда серверной стойки. Colocation от 1U!

Миграция в облако #SotelCloud. Виртуальный сервер в облаке. Выбрать конфигурацию на сайте!

Виртуальная АТС для вашего бизнеса. Приветственные бонусы для новых клиентов!

Виртуальные VPS серверы в РФ и ЕС

Dedicated серверы в РФ и ЕС

По промокоду CITFORUM скидка 30% на заказ VPS\VDS

VPS/VDS серверы. 30 локаций на выбор

Серверы VPS/VDS с большим диском

Хорошие условия для реселлеров

4VPS.SU - VPS в 17-ти странах

2Gbit/s безлимит

Современное железо!

Шаг 7

CSS или Cascading Style Sheets... Тут меня в аське спросили - чего мол не переводишь, все CSS, да CSS... Ну если перевод "каскадные стилевые таблицы" устроит, то я безумно рад. Других вариантов у меня нет. Хотя даже такой приближенный перевод указывает на главную особенность CSS - каскадное наследование свойств объекта... Но об этом позже. А пока большое лирическое отступление о том, как делаются CSS в DreamWeaver.

С чего начинается создание стиля мы уже говорили на прошлом уроке, но "повторение - мать учения". Слева вы видите стандартный диалог, возникающий при создании нового стиля.

Вы можете выбрать один из трех вариантов - создать новый стиль, переназначить свойства стандартного 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 (т.е. в браузере надо проверять)

На данной закладке мы производим настройки фона. Фона всей странички или только заданного абзаца текста - это уж как вы стиль решили создавать.

  1. Цвет фона (выбираете вариант из стандартных 256 цветов или создаете свой цвет)
  2. Файл с фоновым изображением
  3. Настройка повторения (размножения) фонового изображения по странице, например, можно задать, чтобы изображение копировалось только по оси X
  4. Здесь указывается как ведет себя фоновое изображение при прокрутке страницы - прокручивается вместе с ней или стоит на месте
  5. Указание горизонтальной позиции начала фона
  6. Указание вертикальной позиции начала фона

Сразу замечу, что пунктами 3 и 4 надо пользоваться "с оглядкой" - т.е. проверять во всех необходимых версиях браузеров на совместимость - иначе, может получиться расхождение в отображении...

Пункт block служит для настроек параметров блока текста (т.е. здесь речь идет уже не об отдельных буквах как в пункте Type).

  1. Настройка расстояния между словами
  2. Настройка межбуквенного расстояния или трекинг
  3. Вертикальное выравнивание строки текста
  4. Горизонтальное выравнивание текста
  5. Отступ первой строки текста
  6. Настраивает систему расстановки дополнительных пробелов между словами и предложениями (несколько вариантов)

Здесь все достаточно просто, я обычно использую только Text Align и Text Indent. Остальные пункты только при необходимости создания элементов дизайна именно на основе стилей (при создании текстовой версии).

Данный пункт управляет ограничениями данного куска текста на странице (ограничивает его расположение в определенном прямоугольнике)

  1. Ширина прямоугольника
  2. Высота прямоугольника
  3. Настройка выключки влево или вправо
  4. Настройка того, как ведет себя текст при использовании элемента с выключкой влево или вправо (как текст обтекает подобный объект)
  5. Настройка отступа от края прямоугольника до расположенных рядом других элементов
  6. Настройка отступа от краев прямоугольника до текста.

Пошли различные декоративные настройки. Например, это позволит вам создать бордюр вокруг вашего элемента, со всеми необходиымыми вам настройками.

  1. Указываем ширину бордюра слева, справа, сверху и снизу
  2. То же самое но для цвета бордюра
  3. Стиль бордюра - различные варианты сочетания точек и черточек :)

Настройки списков (нумерованного и списка с буллетами)

  1. Тип оформления буллета (несколько вариантов)
  2. Использование в качестве буллета картинки
  3. Позиционирование буллета

Позиционирование - вещь важная и интересная. Оно помогает "поставить" наш объект в любое место на страничке. Итак:

  1. Тип позиционирования (относительное, абсолютное и т.д.)
  2. Расположение по Z-координате - в каком слое будет находится наш объект.
  3. Видимый или невидимый наш объект (может использоваться для создания пустых полей в документе)
  4. Чего будем делать с переполнением (т.е. если текст весь не влез)
  5. Расположение объекта - указание координат вершины + ширины и высоты
  6. Отступы со всех сторон в пикселях или других единицах.

Ну и последнее...

  1. Указание обрыва страницы (в основном для печати)
  2. Визуальный эффект - при наведении на объект курсора он может менять свою форму или при загрузке объекта срабатывает один из стандартных фильтров (последнее верно только для Internet Explorer).

Ну вот, теперь у вас есть базовые знания в области CSS. Примеров никаких не будет, только сухая и скучная теория. На следующем шаге мы будем полученные знания применять.

Назад | Содержание | Вперед

 

Бесплатный конструктор сайтов и Landing Page

Хостинг с DDoS защитой от 2.5$ + Бесплатный SSL и Домен

SSD VPS в Нидерландах под различные задачи от 2.6$

✅ Дешевый VPS-хостинг на AMD EPYC: 1vCore, 3GB DDR4, 15GB NVMe всего за €3,50!

🔥 Anti-DDoS защита 12 Тбит/с!

VPS в России, Европе и США

Бесплатная поддержка и администрирование

Оплата российскими и международными картами

🔥 VPS до 5.7 ГГц под любые задачи с AntiDDoS в 7 локациях

💸 Гифткод CITFORUM (250р на баланс) и попробуйте уже сейчас!

🛒 Скидка 15% на первый платеж (в течение 24ч)

Новости мира IT:

Архив новостей

IT-консалтинг Software Engineering Программирование СУБД Безопасность Internet Сети Операционные системы Hardware

Информация для рекламодателей PR-акции, размещение рекламы — adv@citforum.ru,
тел. +7 495 7861149
Пресс-релизы — pr@citforum.ru
Обратная связь
Информация для авторов
Rambler's Top100 TopList This Web server launched on February 24, 1997
Copyright © 1997-2000 CIT, © 2001-2019 CIT Forum
Внимание! Любой из материалов, опубликованных на этом сервере, не может быть воспроизведен в какой бы то ни было форме и какими бы то ни было средствами без письменного разрешения владельцев авторских прав. Подробнее...