Учебник Macromedia Dreamweaver (стр. 79 из 135)
Во-вторых, следующий по популярности Netscape Navigator. Таблицы стилей он также стал поддерживать, начиная с версии 4.0. Набор поддерживаемых им атрибутов стилей невелик и практически не включает нестандартные, фирменные. Хотя последние версии этой программы — 6.0 и 7.0 — полностью поддерживают стандарт CSS1. Полный список поддерживаемых Navigator атрибутов стилей вы можете найти на сайте Netscape: http://developer.netscape.com.
В третьих, новейшие Web-обозреватели: Opera и Mozilla. У них, как говорят разработчики, все с поддержкой стилей в порядке. На самом же деле, у каждой программы свои причуды...
Эти программы составляют подавляющее большинство современного парка Web-обозревателей. Так что вы можете использовать стили в своих страницах без боязни, что кто-то, обладающий "древней" программой, не сможет их прочитать. Абсолютное большинство современных Web-дизайнеров так и поступает. И никаких акций протеста наподобие "Пользователи старого программного обеспечения против таблиц стилей" автор что-то не припомнит.
Но если ваша аудитория будет включать достаточно большой процент пользователей таких "несовместимых" программ, вам придется принимать особые меры, чтобы сделать ваши страницы доступными для них. Какие это меры, объяснять особо не нужно: вы должны полностью отказаться от стилей, где можно, заменить их тегами и атрибутами HTML, а где нельзя -отказаться от всех "наворотов", предлагаемых CSS. Конечно, ваши страницы от этого во многом проиграют, но их, по крайней-мере, смогут просмотреть посетители.
Dreamweaver идет вам навстречу в этом нелегком труде. Чтобы сделать вашу страницу совместимой со старыми программами Web-обозревателей, просто откройте ее в окне документа и выберите пункт 3.0 Browser Compatible подменю Convert меню File. На экране появится диалоговое окно Convert to 3.0 Browser Compatible, показанное на рис. 10.39.
Рис. 10.39. ДиалоговоеокноConvert to 3.0 Browser Compatible
Чтобы преобразовать страницу, использующую стили, в совместимую со старыми программами, включите один из переключателей в группе Convert: либо CSS Styles to HTML Markup, либо Both. (О переключателе Layers to Table мы поговорим потом, а сейчас вы пока можете не обращать на него внимания — стилей он все равно не затрагивает.) После этого нажмите кнопку ОК для запуска преобразования, либо Cancel — для отказа от него.
По окончании преобразования Dreamweaver выведет на экран новое окно документа, в котором будет находиться новая Web-страница, являющаяся результатом преобразования старой, "несовместимой" страницы. Это очень удобно: вы можете оставить у себя старую (использующую стили) страницу для каких-то нужд. На взгляд автора, лучше всего делать так: вносить все изменения в старые (использующие стили) версии страниц, а потом преобразовывать их в "совместимые" и именно их публиковать в Сети. Таким образом, вам не нужно будет вносить одни и те же изменения по два раза в разные версии страниц.
Попробуйте преобразовать в "совместимый" вид страничку 10.2.htm. Посмотрите на рис. 10.40 — даже встроенный стиль преобразовался! Хотя фон страницы, заданный в стиле, переопределяющем тег <BODY>, Dreamweaver все же "потерял". Ну и растяпа!..
Рис. 10.40. Результат преобразования страницы 10.2.htm (на переднем плане)
Что дальше?
Вот мы и познакомились с таблицами стилей CSS. В качестве домашнего задания автор советует вам сделать что-нибудь конкретное, чтобы узнать их еще ближе, так сказать, "подержать в руках". Вы можете, скажем, переделать сайт Sample site 3 с использованием таблиц стилей. Или поэкспериментировать с другими Web-страницами.
О стилях рассказывать больше нечего (ну, почти нечего). Существует фирменная документация, имеется описание стандарта CSS на сайте WWWC http://www.w3c.org, так что дополнительную информацию по этому вопросу вы найдете. И, наконец, ничто не может дать вам так много, как личный опыт.
А теперь давайте еще раз взглянем на наши страницы. Да-а-а... Не очень-то и много возможностей дает нам HTML, чтобы расположить их элементы так, как нам хочется. Фреймы, таблицы, стили — что только мы не использовали, и все равно остаются какие-то ограничения. А нам хочется просто задать координаты и размеры, скажем, фрагмента текста, чтобы он точно "лег" на это место без всяких там фреймов и таблиц. Как это делают дизайнеры-полиграфисты.
Значит, хочется... Что ж, читайте дальше!
· ЧАСТЬ III. ИСПОЛЬЗУЕМ НОВЕЙШИЕ ТЕХНОЛОГИИ
o Глава 11. Свободно позиционируемые элементы
- Введение в свободно позиционируемые элементы
- Что такое свободно позиционируемый элемент
- Как создается свободно позиционируемый элемент
- Зачем нужны свободно позиционируемые элементы
- Работа со свободно позиционируемыми элементами
- Создание свободно позиционируемых элементов
- Параметры свободно позиционируемых элементов
- Работа с группой свободно позиционируемых элементов
- Работа со свободно позиционируемыми элементами
- Пример использования свободно позиционируемых элементов
- Недостатки свободно позиционируемых элементов и их преодоление
- Что дальше?
ЧАСТЬ III.
Используем новейшие технологии
· Глава 11. Свободно позиционируемые элементы
· Глава 12. Анимация элементов Web-страниц
· Глава 13. Использование сценариев
· Глава 14. Метатеги и серверные директивы
ГЛАВА 11.
Свободно позиционируемые элементы
Свободно позиционируемые элементы — совсем недавнее нововведение в HTML. Фактически они появились в 1997 году, одновременно с таблицами стилей. И это не случайно: для создания свободно позиционируемых элементов используются особые атрибуты стилей, задающие координаты и размеры таких элементов.
Было сказано, что свободно позиционируемые элементы появились совсем недавно, но в мире компьютерных вообще и интернет-технологий в частности время летит очень быстро, и пять лет истории какого-либо нововведения — это целая эпоха. Однако до сих пор свободно позиционируемые элементы не снискали особой популярности у Web-дизайнеров. И автор не знает, в чем причина: консерватизм Web-дизайнеров или неприспособленность этих элементов к применению в Web-дизайне.
Однако потенциал свободно позиционируемых элементов очень велик. В самом деле, они позволяют полностью освободиться от "потока" текста, расположить фрагменты содержимого страницы так, как нужно Web-дизайнеру, без оглядки на ограничения таблиц и фреймов. При этом фрагменты могут располагаться друг относительно друга как угодно и даже перекрывать друг друга, чего никак не удастся сделать, используя таблицы. И все это великолепие достигается столь компактным HTML-кодом, что свободно позиционируемые элементы оказываются вне конкуренции.
У свободно позиционируемых элементов есть еще одно неоспоримое преимущество: они предоставляют Web-дизайнеру полнейший контроль над Web-страницей. Используя специально написанные сценарии, разработчик может заставить отдельные элементы страниц двигаться, создавая впечатляющие анимационные эффекты. (Вы, наверно, часто встречали на некоторых страницах анимированные курсоры мыши. Это как раз свободно позиционируемые элементы, "наученные" двигаться за мышью.) Идя дальше, программист (именно так, не Web-дизайнер, а Web-программист!) может создать на странице строку меню с выпадающими подменю и, в конце концов, превратить Web-страничку в подобие окна Windows-приложения. Один знакомый автора написал, таким образом, целую информационную систему — поверьте, это впечатляет!
Но хватит пустых восторгов! Давайте трезво посмотрим на свободно позиционируемые элементы и выясним, что они собой представляют.
Введениев свободно позиционируемые элементы
Прежде всего нам необходимо выяснить, как создаются свободно позиционируемые элементы страниц. И рассмотрим мы это на небольшом примере, который сделаем вручную, не прибегая к помощи Dreamweaver. Это позволит нам лучше понять, что такое свободно позиционированные элементы, "подержать" их в руках.
Но сначала — немного теории. Куда же без нее...
Что такое свободно позиционируемый элемент
Давайте возьмем какой-нибудь элемент страницы и рассмотрим его. Неважно, будет ли он фрагментом текста, изображением, фильмом или элементом управления ActiveX. С точки зрения Web-обозревателя, все они одинаковы (до известного предела, разумеется). Неважно, будет ли рассматриваемый нами элемент страницы помещен в основной "поток" текста, вынесен во фрейм или "втиснут" в ячейку таблицы. И первый, и второй, и третий способы никак не позволяют реально "освободить" элемент страницы, а только создают видимость этой свободы.
Откройте какую-нибудь страницу, сделанную ранее, и выберите любой ее элемент. Что он такое? Часть содержимого этой страницы. Его размерами управляет Web-обозреватель, основываясь на размерах его родителя, иначе говоря, на размерах свободного пространства, которое можно под него выделить. Точно так же дело обстоит и с позиционированием элемента страницы — оно зависит от размеров и месторасположения его "соседей" и его родителя. А они, в свою очередь, зависят от размера окна Web-обозревателя. Как видите,'способа точно контролировать размеры и координаты элемента страницы не существует — все эти параметры зависят от множества факторов, исключить которые обычным способом невозможно.