Web дизайн с Macromedia HOMESITE

чемпионат мира по футболу в 2018 году


 

Поддержка CSS в HomeSite

В HomeSite реализована поддержка CSS на двух уровнях:

  • на уровне работы с CSS-файлами; по умолчанию файлы с расширением .ess относятся к Web-документам (Web Documents) и отображаются в списке файлов на вкладках Files и Projects окна ресурсов; для работы с ними в контекстном меню предусмотрены специальные команды (подробнее о них будет рассказано ниже);
  • на уровне редактирования содержимого CSS-файла с учетом синтаксиса языка CSS; для этого предусмотрен целый ряд как собственных (встроенных) инструментов HomeSite, так и специальное внешнее приложение — TopStyle Lite, интегрированное с HomeSite.

В данном подразделе рассмотрены встроенные средства HomeSite для рабоп с CSS, а следующий подраздел полностью посвящен описанию TopStyle Lite.

Как было отмечено выше, CSS-файлы по умолчанию относятся к Web-док ментам и отображаются в списке файлов окна ресурсов. Контекстное меню CSS файла содержит три команды, специфические именно для файлов такого типа:

  • Edit (Редактировать) — открытие файла в окне документа; при это производится настройка редактора кода на синтаксис языка CSS; визуально это отражается в использовании соответствующей схемы цветовой подсветки синтаксических конструкций CSS;
  • Edit StyleSheet (Редактировать таблицу стилей) — вызов приложения TopStyle Lite в расширенном формате;
  • Insert as Link (Вставить как ссылку) — вставка в код документа тег. <LINK> с атрибутами, необходимыми для использования внешней таблицы стилей (REL, TYPE и HREF); аналогичный результат можно получить, просто перетащив значок CSS-файла в код документа.

Замечания
1. Несколько забегая вперед, отметим, что приложение TopStyle Lite может использоваться в составе HomeSite в двух форматах: расширенном, который обеспечивает редактирование CSS-файлов, и в сокращенном, предназначенном для редактирования атрибута STYLE отдельного элемента HTML-страницы.
2. Если вы попытаетесь поместить значок CSS-файла не в заголовок, а в тело документа, на экране появится окно с предупреждением о том, что вы совершаете ошибку (не смертельную, но все же...).

HomeSite предоставляет возможность настройки цветовой схемы, используемой для CSS-файлов. Чтобы открыть окно для настройки схемы, необходимо в диалоговом окне Settings перейти на вкладку Color Coding, в списке схем выбрать пункт ess и щелкнуть на кнопке Edit Scheme. Это окно полезно тем, что позволяет познакомиться с основными конструкциями языка CSS (рис. 4.37). О назначении элементов управления окна редактирования цветовой схемы см. подраздел «Управление визуальным представлением документа» третьей главы. К встроенным средствам HomeSite для работы с CSS также относятся:

  • диалоговые окна редактора тегов для установки атрибутов тегов <STYLE>, <LINK>, <DIV> и <SPAN>;
  • специальные элементы управления в диалоговых окнах других тегов, а также наличие во всех окнах специальной вкладки StyleSheet/ Accessibility.

Рис. 4.37. Окно установки параметров цветовой схемы CSS-файлов

Чтобы вставить в текст страницы тег <STYLE> с требуемыми атрибутам необходимо:

  1. 1. В позиции вставки (в заголовке документа) щелкнуть правой кнопки мыши и в контекстном меню выбрать команду Insert Tag... .
  2. 2. В открывшемся окне утилиты Tag Chooser выбрать категорию Formatting and Layout (Форматирование и компоновка), а в ней -раздел General.
  3. 3. В правом подокне в списке тегов дважды щелкнуть на теге <STYLE>.
  4. 4. В открывшемся диалоговом окне редактора тегов установить необх димые параметры и щелкнуть на кнопке ОК.

С помощью окна редактора тегов для тега <STYLE> могут быть задан следующие параметры (рис. 4.38):

  • на вкладке STYLE Tag — признак включения в код страницы символе HTML-комментария (определяется состоянием флажка Add HTM comment tags — добавить теги HTML-комментария); смысл этого признака состоит вот в чем: если тег <STYLE> оформить как комментарий, то броузеры, не поддерживающие CSS, этот фрагмент кода проигнорируют, а поддерживающие — «заглянут» внутрь комментария и обработают тег <STYLE>;
  • на вкладке Content — собственно содержание тега, то есть описание стилей элементов страницы; вы можете внести правку непосредственно в многострочном текстовом поле, в котором отображается описание стилей; кроме того, на этой вкладке имеется кнопка вызова приложения TopStyle Lite в расширенном формате;

Рис. 4.38. Окно установки атрибутов тега <STYLE>

Замечание
Указанная кнопка имеет по сравнению с другими аналогичными кнопками редактора тегов две особенности: во-первых, в окнах других тегов такие кнопки размещены на вкладке Stylesheets/Accessibility, во-вторых, они обеспечивают вызов TopStyle Lite в сокращенном формате.

  • на вкладке HTML 4.0 — два параметра, соответствующие атрибутам тега <STYLE>, предусмотренным спецификацией HTML 4.0:
    • TYPE — указывает броузеру, что в тексте HTML-документа содержится описание стилей, либо сценарий на JavaScript; в первом случае атрибут принимает значение text/сss, во втором — text/ javascript; требуемое значение выбирается из раскрывающегося списка Туре;
    • MEDIA — указывает броузеру, каким образом (какими средствами) должен отображаться элемент страницы, для которого задан стиль (например, вывод на экран в обычном режиме или в режиме предварительного просмотра печатного документа); значение атрибута устанавливается с помощью трех раскрывающихся списков Media (три списка позволяют задать до трех альтернативных вариантов вывода).

Выше было сказано, что ссылка на внешнюю таблицу стилей, хранящуюся в CSS-файлах, создастся с помощью тега <LINK> с атрибутом REL. Для вставки тега в код страницы следует воспользоваться, как и для тега <STYLE>, утилитой Tag Chooser. Единственное отличие — тег <LINK> входит в категорию Page Composition (Композиция страницы), которая содержит один раздел — General. При выборе в списке тега <LINK> на экране появится соответствующее диалоговое окно редактора тегов.

Поскольку тег <LINK> применяется на HTML-страницах не только для создания ссылок на таблицы стилей, то окно редактора тегов предоставляет возможность задавать самые разные сочетания атрибутов этого тега (рис. 4.39). Тем ж менее, в данном подразделе мы рассмотрим установку лишь трех атрибутов которые непосредственно связаны с применением CSS: REL, HREF и TYPE.

Рис. 4.39. Окно установки атрибутов тега <LINK>

Установка значений атрибутов REL и HREF выполняется на вкладке LINK Tag, а установка значения атрибута TYPE — на вкладке HTML 4.0.

Чтобы задать значение атрибута HREF, следует ввести в поле Href (unu выбрать с помощью расположенной рядом кнопки) адрес CSS-файла с таблицей стилей.

Установка значения атрибута REL выполняется с помощью раскрывающегося списка Forward link types (Тип ссылки в прямом направлении), который содержит перечень всех допустимых значений этого тега.

Для установки требуемого значения атрибута TYPE следует перейти на вкладку HTML 4.0 и воспользоваться раскрывающимся списком Туре.

После вставки в код документа тега <LINK> с указанными атрибутами в контекстное меню окна документа для этого -тега добавляется команда Edit Linked Style Sheet (Редактировать связанную таблицу стилей), как показано на рис. 4.40. Ее выбор приводит к вызову приложения TopStyle Lite в расширенном формате и загрузке в него соответствующего CSS-файла.

Рис. 4.40. Контекстное меню тега <LINK>, ссылающегося на CSS-файл

Для вставки в код страницы тегов <DIV> и <SPAN>, с помощью которых выполняется обращение к встроенной (то есть заданной в том же документе) таблице стилей, необходимо:

  1. 1. В позиции вставки (в теле документа) щелкнуть правой кнопкой мыши и в контекстном меню выбрать команду Insert Tag...
  2. 2. В открывшемся окне утилиты Tag Chooser выбрать категорию Formatting and Layout (Форматирование и компоновка), а в ней — раздел General.
  3. 3. В правом подокне в списке тегов дважды щелкнуть на имени вставляемого тега (<DIV> или <SPAN>).
  4. 4. В открывшемся диалоговом окне редактора тегов (рис. 4.41) перейти на вкладку StyleSbeet/Accessibility (для тега <SPAN> она открыта по умолчанию).
  5. 5. В зависимости от уровня стиля (стиль класса или отдельного элемента) ввести его имя в поле Class или ID и щелкнуть на кнопке ОК.

Чтобы установить значение атрибута STYLE для любого элемента страницы, необходимо:

  1. 1. Щелкнуть правой кнопкой мыши на имени тега и в контекстном меню выбрать команду Edit Current Tag.
  2. 2. В открывшемся диалоговом окне редактора тегов перейти на вкладку StyleSheet/Accessibility.
  3. 3. Щелкнуть на кнопке Style Editor (Редактор стилей) и с помощью приложения TopStyle Lite описать параметры стиля; на панели инструментов TopStyle Lite щелкнуть на кнопке Done (Готово); приложение будет закрыто, а параметры стиля появятся в поле Style (рис. 4.42).
  4. 4. В окне редактора тегов щелкнуть на кнопке ОК.

В результате выполнения описанной процедуры в код тега будет добавлен атрибут STYLE с заданными параметрами.

 

Рис. 4.41. Окна редактора тегов для тегов <D/V> и <SPAN>

Рис. 4.42. Вкладка StyleSheet/Accessibility диалогового окна редактора тегов

 

Книжный магазин