Таблицы стилей и шаблоны
А теперь представим такую ситуацию. Вы прочитали о замечательных возможностях таблиц стилей и решили переделать свой сайт Sample site 3 с использованием таблиц стилей. Вы задали таблицу стилей (внешнюю или внутреннюю) для шаблона, сохранили его и обновили все основанные на нем Web -страницы. Все у вас получилось, и, кажется, ничто не предвещает беды...Но вот вы открыли одну из основанных на шаблоне страниц и решили создать для нее внутреннюю таблицу стилей, дополняющую ту, что находится в шаблоне. Но как это сделать? Ведь внутренняя таблица стилей записывается в HTML -заголовок страницы, куда, как было сказано ранее, хода нет!
Не думайте об этом! Используйте те же, уже знакомые вам, инструменты дня создания новых стилей. Единственное вы не можете переопределить атрибуты стилей, заданные в таблице, что находится в шаблоне, иначе это вызовет неразрешимый конфликт. За исключением этого, вы полностью свободны!
Дело в том, что при создании шаблона Dreamweaver MX создает еще одну изменяемую область по имени head . Эта изначально пустая область находится в HTML -заголовке страницы, внутри тега < head >. Когда вы создаеп в Web -странице внутреннюю или привязываете к ней внешнюю таблиц стилей, необходимый код помещается как раз в эту область. Вы можете посмотреть HTML -код страницы, основанной на шаблоне, и убедиться в эти сами.
Временные таблицы стилей
Еще одна из новых возможностей Dreamweaver MX — это поддержка та называемых временных таблиц стилей. Временные таблицы стилей действу ют не все время, а только тогда, когда вы редактируете свою Web -страницу в среде Dreamweaver (таблицы времени редактирования), но не действуют и Web -обозревателе. Другие таблицы могут, наоборот, быть отключены, когда вы редактируете страницу в Dreamweaver (таблицы времени просмотра),а действовать только в Web -обозревателе. Иногда такие таблицы стилей бывают полезны.
Как же работать с временными таблицами стилей? Очень просто!
Выберите пункт Design Time Style Sheets в контекстном или дополнительном меню панели CSS Styles . Этот пункт также доступен в подменю CSS Styles контекстного меню окна документа и меню Text . На экране появится диалоговое окно Design Time Style Sheets .
В этом окне находятся два списка. В списке Show Only at Design Time перечислены таблицы стилей времени редактирования. В списке Hide at Design Time перечислены таблицы стилей времени просмотра. Точнее, не сами габлицы стилей, а имена файлов, в которых они сохранены.
Чтобы добавить файл в один из списков, нажмите кнопку со знаком "плюс", находящуюся над ним. После этого вам останется выбрать нужный файл в диалоговом окне Select File и нажать кнопку открытия.
Чтобы удалить файл из списка, выберите его и нажмите кнопку со знаком "минус", находящуюся над списком.
После нажатия кнопки OK Dreamweaver примет ваши указания к сведению. Причем, немедленно.
Для примера вы можете открыть страницу 10.2.htm и задать в качестве таблицы времени редактирования 10.1.htm , а в качестве таблицы времени просмотра — 10.2.htm .
Недостатки таблиц стилей и их преодоление
Настала пора поговорить о недостатках таблиц стилей. Всего их два:
сравнительная "молодость" стандарта CSS , из-за которой его поддерживают только сравнительно новые программы Web -обозревателей, выпущенные после 1997 года;
крайняя несовместимость между реализациями поддержки таблиц стилей в разных Web -обозревателях, в основном в старых версиях Internet Explorer и Navigator .
Теперь рассмотрим эти недостатки подробнее.
Как мы уже говорили, CSS — довольно молодой стандарт. Он был принят в 1997 году, уже после того, как многие разработчики выпустили на рынок свои программы Web -обозревателей. Конечно, наиболее популярные из них в то время — Internet Explorer и Navigator — вскорости обзавелись поддержкой недавно принятого стандарта. Но очень и очень многие программы не знали о его существовании. И такие "неграмотные" программы используются до сих пор, в частности, в США и Европе, на множестве старых компьютеров, которые там все еще в ходу.
Так какие же Web -обозреватели поддерживают таблицы стилей?
Во-первых, это, конечно, популярнейший Microsoft Internet Explorer . Полная поддержка стандарта CSS появилась в нем, начиная с версии 4.0, хотя некоторые элементы, как говорят, поддерживались еще в приснопамятной 3.0. (Помнится, эта версия принимала файлы таблиц стилей с расширением ess за видеофильмы. С чего бы это?) Версии 5.0 и 5.5 поддерживают расширенный набор атрибутов стилей, как стандартных, так и фирменных, не определенных в стандарте. Полное описание атрибутов стилей, поддерживаемых Internet Explorer , вы можете найти на сайте Microsoft для разработчиков: http://msdn.microsoft.com. Поверьте — их очень много, и среди них есть совсем уж экзотические. И Dreamweaver поддерживает далеко не все из них.
Во-вторых, следующий по популярности Netscape Navigator . Таблицы стилей он также стал поддерживать, начиная с версии 4.0. Набор поддерживаемых им атрибутов стилей невелик и практически не включает нестандартные, фирменные. Хотя последние версии этой программы — 6.0 и 7.0 -полностью поддерживают стандарт CSS 1. Полный список поддерживаемых 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 .
Чтобы преобразовать страницу, использующую стили, в совместимую со старыми программами, включите один из переключателей в группе Convert : либо CSS Styles to HTML Markup , либо Both . (О переключателе Layers to Table мы поговорим потом, а сейчас вы пока можете не обращать на него внимания — стилей он все равно не затрагивает.) После этого нажмите кнопку ОК для запуска преобразования, либо Cancel — для отказа от него.
По окончании преобразования Dreamweaver выведет на экран новое окно документа, в котором будет находиться новая Web -страница, являющаяся результатом преобразования старой, "несовместимой" страницы. Это очень удобно: вы можете оставить у себя старую (использующую стили) страницу для каких-то нужд. На взгляд автора, лучше всего делать так: вносить все изменения в старые (использующие стили) версии страниц, а потом преобразовывать их в "совместимые" и именно их публиковать в Сети. Таким образом, вам не нужно будет вносить одни и те же изменения по два раза в разные версии страниц.
Попробуйте преобразовать в "совместимый" вид страничку 10.2.htm .
Что дальше ?
Вот мы и познакомились с таблицами стилей CSS . В качестве домашнего задания автор советует вам сделать что-нибудь конкретное, чтобы узнать их еще ближе, так сказать, "подержать в руках". Вы можете, скажем, переделать сайт Sample site 3 с использованием таблиц стилей. Или поэкспериментировать с другими Web -страницами.
О стилях рассказывать больше нечего (ну, почти нечего). Существует фирменная документация, имеется описание стандарта CSS на сайте WWWC ( http://www.w3c.org ), так что дополнительную информацию по этому вопросу вы найдете. И, наконец, ничто не может дать вам так много, как личный опыт.
А теперь давайте еще раз взглянем на наши страницы. Да-а-а... Не оченьто и много возможностей дает нам HTML , чтобы расположить их элементы так, как нам хочется. Фреймы, таблицы, стили — что только мы не использовали, и все равно остаются какието ограничения. А нам хочется просто задать координаты и размеры, скажем, фрагмента текста, чтобы он точно "лег" на это место без всяких там фреймов и таблиц. Как это делают дизайнеры-полиграфисты.
Значит, хочется... Что ж, читайте дальше!
