Рассылка закрыта
При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
Азы и секреты программирования на JavaScript.
Азы и секреты программирования на JavaScript.Выпуск 12 JavaScript и таблицы стилей в HTML документахДо введения в HTML таблиц стилей, авторы имели ограниченные возможности по контролю над отображеним HTML страниц. Например, Вы могли определить, что некоторый текст должен быть отображен на странице, но Вы не могли устанавливать поля для страниц или определять высоту строк или размер границ для текста. Таблицы стилей дают широкие возможности по контролю над отображением HTML документов. Используя таблицы стилей, можно явно определить различные стилистические атрибуты для отображения страницы - цвет текста, размеры полей, выравнивание элементов, начертания шрифта, размер и толщина шрифта и так далее. Вы можете использовать границы полей, чтобы выделить отдельные элементы на фоне общего содержания. Вы можете определить различные шрифты, чтобы использовать их для различных элементов, типы параграфов, выравнивания, и отступы. Вы можете выбрать свои шрифты, которые будут отображаться во всех системах так, как задумано Вами, упаковывая их как зaгружаемые шрифты и прикрепляя их к HTML странице (Это мы рассмотрим в следующих выпусках рассылки). Кроме того, Вы можете использовать таблицу стилей так, чтобы различные страницы могли использовать одну и ту же таблицу стилей, общую для Вашего сайта. Обычно таблицы стилей определяются с использованием синтаксиса CSS. Например: Здесь для всех параграфов документа будет использоваться шрифт размером 12pt и отступ слева 20pt. Заголовки <H3> будут выделяться голубым цветом. Для Netscpe коммуникатора можно определить стиль документа с использованием JavaScript. Для того-же примера стиля, который приведен выше, код будет выглядеть так: Или, в более компактном виде: Но мы остановимся на CSS, как более универсальном методе, которые одинаково работает в разных типах броузерах. Посмотреть первоначальные технические требования для таблиц стилей, разработанные Консорциумом WWW, Вы можете на странице: http://www.w3.org/pub/WWW/TR/REC-CSS1 Таблица стилей включает в себя одну или более секций с определениями стиля. В синтаксисе CSS, названия свойства и значения стиля перечисляются внутри фигурных скобок для каждой секции. Секции определяют, к каким элементам стиль применяется, или может применяться. Если секция - элемент HTML, стиль применяется к всем экземплярам этого элемента на HTML странице. Секция может быть также идентификатором класса. Каждое свойство в определении стиля сопровождается двоеточием, за которым следует значение свойства. Каждая пара название/значение должна быть отделена от следующей пары точкой с запятой. Обратите внимание на использование тегов комментариев <!-- ... --> для того, чтобы броузеры не поддерживающие таблицы стилей, не засоряли страницы служебной информацией, не предназначенной для отображения. Важно: При определении значений свойств в таблицах стилей, не используйте двойные кавычки. Каскадированые таблицы стилей требуют строгого соблюдения синтаксиса. Убедитесь, что Вы не пропустили точку с запятой между парами название/значение. Если Вы пропустите единственную точку с запятой, определение стиля будет проигнорировано. Аналогично, если Вы случайно включите единственный посторонний символ где-нибудь внутри определения стиля, то все определение тоже будет игнорироваться броузером. Но нам немного пришлось отвлечься. Вернемся к JavaScript. Наша задача состоит в том, чтобы внести динамику в HTML страницу. Другими словами, мы хотим, чобы элементы содержимого странички визуально реагировали на определенные события. Под событиями понимается движение указателя мыши в определенных зонах страницы, щелчки мышкой, окончание загрузки страницы или элемента и т.п. В связи с этим рассмотрим, как с помощью сценариев JavaScript перехватывать события и заставлять изменяться нужные элементы, изменяя параметры их стиля. Если-бы нам надо было сделать HTML страницы только для MS-IE, алгоритм работы кода был-бы следующим. Прямо в теге элемента выбираем обработчик нужного нам события, который вызывает требуемую функцию из блока сценария. Например: Но для того, чтобы сделать динамические страницы, совместимые и с MS-IE и NN, придется потрудиться побольше. Как я уже упоминал в прошлом выпуске рассылки, Netscape Navigator для динамического управления содержимым страницы использует элемнт управления LAYER. И для него код изменения например фона будет выглядеть по-другому Если этот код выполнить в среде MS-IE, то появится сообщение об ошибке. Поэтому в коде надо предусмотреть переключатель на тип броузера. В выпуске 11 такой переключатель был рассмотрен - им и воспользуемся. Каждый HTML элемент свой набор атрибутов. Полный список HTML тегов от HTML 2.0 до HTML 4.0 и список всех их возможных атрибутов Вы можете получить на http://www.b-soft.ru/scripting/index.php?page=07 причем здесь указана совместимость каждого из атрибутов с разными версиями NN и IE. Чтобы изменить фон гиперссылки при наезде на нее курсора мыши, для IE можно написать такой код: Здесь вместо адреса перехода, чтобы при тестировании не вызывать переход, поставим "заглушку": (href='javascript:alert("O-o-ps!");'). Наезд кусора сгенерирует событие "onMouseOver", которое вызовет функцию "Col_1()", изменяющюю цвет. Для возврата цвета к исходному используется событие "onMouseOut", возникающее, когда курсор выходит за пределы элемента. Но, как уже упоминалось, NN не умеет менять стиль отображения любого из тегов. Поэтому возникает необходимость дополнить HTML код еще одним элементом: Здесь очень важно наличие строки, описывающей стиль: "style="..."". Без нее это работать не будет. Вот практически и все готово для создания динамической странички. Для примера создадим страничку из трех элементов импровизированного меню на гиперссылках, у которых при наезде курсора изменяется фон: Код сценария для этой странички будет выглядеть так: как видите, если разобраться, не так уж и сложно :-). Ответы на вопросы.Мне часто задают вопрос: "Как загрузить на выполнение программу из HTML странички с помощью сценария?" Если-бы это было просто сделать, то нас всех давно-бы задавили вирусы. Разработчики приняли все меры, чтобы уберечь нас от этого. Но для особо любопытных присведу код запуска "блокнота" из среды Internet Explorer: |
| http://subscribe.ru/
E-mail: ask@subscribe.ru |
Отписаться
Убрать рекламу | Рейтингуется SpyLog |
| В избранное | ||
