Macromedia Dreamweaver MX

Недостатки таблиц стилей и их преодоление

Настала пора поговорить о недостатках таблиц стилей. Всего их два:

□ сравнительная "молодость" стандарта CSS, из-за которой его поддержи­вают только сравнительно новые программы Web-обозревателей, выпу­щенные после 1997 года;

□ крайняя несовместимость между реализациями поддержки таблиц стилей в разных Web-обозревателях, в основном в старых версиях Internet Explorer и Navigator.

Теперь рассмотрим эти недостатки подробнее.

Как мы уже говорили, CSS — довольно молодой стандарт. Он был принят в 1997 году, уже после того, как многие разработчики выпустили на рынок свои программы Web-обозревателей. Конечно, наиболее популярные из них в то время — Internet Explorer и Navigator — вскорости обзавелись поддерж­кой недавно принятого стандарта. Но очень и очень многие программы не знали о его существовании. И такие "неграмотные" программы используют­ся до сих пор, в частности, в США и Европе, на множестве старых компью­теров, которые там все еще в ходу.

Так какие же Web-обозреватели поддерживают таблицы стилей?

Во-первых, это, конечно, популярнейший Microsoft Internet Explorer. Пол­ная поддержка стандарта CSS появилась в нем, начиная с версии 4.0, хотя некоторые элементы, как говорят, поддерживались еще в приснопамят­ной 3.0. (Помнится, эта версия принимала файлы таблиц стилей с расши­рением css за видеофильмы. С чего бы это?) Версии 5.0 и 5.5 поддерживают расширенный набор атрибутов стилей, как стандартных, так и фирменных, не определенных в стандарте. Полное описание атрибутов стилей, поддер­живаемых Internet Explorer, вы можете найти на сайте Microsoft для разра­ботчиков: Http://Msdn.Microsoft.Com. Поверьте — их очень много, и среди них есть совсем уж экзотические. И Dreamweaver поддерживает далеко не все из них.

Во-вторых, следующий по популярности 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.

Convert to 3.0 Browser Compatible

Рис. 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 все же "потерял". Ну и растяпа!..

Что дальше?

Вот мы и познакомились с таблицами стилей CSS. В качестве домашнего задания автор советует вам сделать что-нибудь конкретное, чтобы узнать их еще ближе, так сказать, "подержать в руках". Вы можете, скажем, переделать сайт Sample site 3 с использованием таблиц стилей. Или поэкспериментиро­вать с другими Web-страницами.

О стилях рассказывать больше нечего (ну, почти нечего). Существует фир­менная документация, имеется описание стандарта CSS на сайте WWWC (Http://Www.W3C.Org), так что дополнительную информацию по этому вопро­су вы найдете. И, наконец, ничто не может дать вам так много, как личный опыт.

А теперь давайте еще раз взглянем на наши страницы. Да-а-а... Не очень-то и много возможностей дает нам HTML, чтобы расположить их элементы так, как нам хочется. Фреймы, таблицы, стили — что только мы не исполь­зовали, и все равно остаются какие-то ограничения. А нам хочется просто задать координаты и размеры, скажем, фрагмента текста, чтобы он точно "лег" на это место без всяких там фреймов и таблиц. Как это делают дизай­неры-полиграфисты.

Значит, хочется... Что ж, читайте дальше!