и другой «мусор», но использовать сжатие кода с помощью mod_zip, размер страницы можно будет также уменьшить до 20 Кб. Таким образом, можно добиться сокращения размера кода, не прибегая к технике, описанной в этой книге. Однако, как выяснилось, Amazon не использует mod_zip. На самом деле эта возможность вообще используется довольно редко в коммерческих сайтах, быть может, из-за того, что это создает дополнительную нагрузку на сервер. Но если подумать - чем меньше файл, тем меньше он становится при сжатии. Если можно сэкономить, снизив размер страницы с 80 Кб до 40 Кб, используя компактный современный код, то, сжав страницу с 40 Кб до 20 Кб, мы сэкономим еще больше. Экономия на одном сеансе может показаться ничтожной, но суммарный трафик уменьшится невероятно. С течением времени экономия окажется довольно внушительной и предотвратит возникновение незапланированных расходов. (Например, вы сможете отказаться от аренды еще одной линии Т1.) Экономия на трафике является только одной из многих причин использовать четкий, совместимый со стандартами код для создания Web-сайтов, и это оценят как менеджеры, так и посетители сайта. происходит от столь нелюбимого нами , этот тег повторяется в коде сайта тысячи раз благодаря мощной системе публикаций сайта. Если бы не эта ошибка, данный код, возможно, показался бы вам очень знакомым. Он даже может вам напоминать код вашего собственного сайта. На самом деле в контексте Web-страницы предыдущий фрагмент кода можно было заменить следующим: Join now! Имея соответствующее правило, указанное в таблице стилей, эта строка выполнит те же функции, что и предыдущий отрывок кода, но заметно сэкономив трафик и облегчив переход на более гибкий код XML. Код того же сайта включает в себя и следующую нерабочую ссылку на языке JavaScript: <script language=JavaScriptl.lsrc= "http://foo.com/params.richmedia^yes&etc"0ne of the strange-but-truisms of
minor peddling is that using the
computer and other Fetish fodder
somehow empowers children - plug
in, log on, attend a good
college on full scholarship, and
get the hell out of the house.
. Подзаголовок «Структура» будет помечен тегом заголовка определений . Данный абзац будет заключен в теги данных определения : [Сюда поместить данные.]
[Меню навигации по сайту.]
Код может содержать вложенные объекты, например изображения, ролики Flash или фильмы QuickTime, а также теги и атрибуты, представляющие текст сайта в специальном виде для тех, кто не может просмотреть эти объекты в своем браузере. и начать экспериментировать с разметкой CSS. Вдохновленные демонстрационной страницей от Microsoft (рис. 3.10), показавшей возможности CSS, многие дизайнеры совершили первый заплыв в мир CSS и вскоре были вынуждены вернуться из-за нехватки воздуха. Поддержка CSS в IE 3 была первым шагом, и, как это обычно бывает, он оказался неполным и не лишенным недостатков. Энтузиазм, вызванный новыми возможностями CSS, довольно быстро сошел на нет, так как ошибки в IE 3 могли привести к тому, что страница попросту не будет отображаться. Например, при некоторых обстоятельствах изображения на страницах с CSS отображались не рядом с текстом, а накладывались на него, что делало просмотр страницы невозможным. Чтобы представить себе такую ситуацию, положите*руку на страницу и попробуйте прочитать текст сквозь нее. Решением этой проблемы было размещение текста и каждого изображения в отдельной ячейке таблицы, что увеличивало размер страницы, тогда как предназначением CSS был совершенно противоположный результат. Вскоре дизайнеры пришли к выводу, что CSS не является готовым к употреблению продуктом, что стало логичным объяснением полного отсутствия поддержки CSS в безусловном лидере - Netscape 3. будет отображен крупным и жирным с вертикальными отступами сверху и снизу, если иное не описано в таблице стилей. С помощью CSS все это можно изменить. Описанный в CSS-таблице заголовок может быть мелким, выделен курсивом и без отступов, если так захочет дизайнер. Но только не в Netscape 4, который добавляет свое правило отображения для каждого CSS-параметра, использованного дизайнером. Если CSS говорит, что вокруг заголовка не должно быть отступов, Netscape 4 все равно вставит их туда. В процессе работы дизайнеры быстро обнаружили, что при добавлении CSS к коду HTML IE 3 показывает то, что от него требуется, тогда как Netscape 4 делает из их разметки полную неразбериху. В связи с этим некоторые дизайнеры отказались от использования CSS. Другие (включая меня) вначале пытались решить подобные проблемы, используя конструкции вроде вместо
. Это помогало решить проблему в ущерб структуры документа и его семантики, таким образом создавая первые проблемы на пути к будущей совместимости сайта и вызывая множественные сопутствующие неприятности. Автор книги уже давно отказался от практики создания нелогичной структуры всего документа, но многие дизайнеры и разработчики и по-прежнему создают кривой код в угоду совместимости с Netscape 4. Эта распространенная практика ведет к фатальным ошибкам, создает проблемы с удобством использования и мешает попыткам нормализовать и стабилизировать обмен данными в Сети. Системы управления контентом, средства публикации и визуальные Web-редакторы (WYSIWYG), разработанные в эпоху браузеров четвертой версии, заставляют использовать устаревший бессмысленный код, повышая сложность и стоимость процесса приведения сайтов к совместимости с современными является простым текстом, а не заголовком* Таким образом, мы создаем или покупаем систему управления контентом, которая заменяет одни теги на другие, тогда как мы могли бы обойтись использованием одного набора стандартных тегов. Или же мы обрекаем пользователей Palm Pilot, сотовых телефонов и программ для чтения информации с экрана на просмотр нашего запутанного кода и гадание, что бы он мог значить. Во всех этих неурядицах мы могли бы обвинить Netscape 4 и наше собственное желание приспособиться к его ошибкам. Неудивительно, что специалисты Netscape и Mozilla работали четыре года над созданием нового продукта с нуля достойного браузера, на который можно было бы опереться, у них просто не было.
Наследование Создателям Netscape 4 также не удалось осознать всю важность и воплотить в жизнь поддержку наследования - замечательной концепции, лежащей в основе могущества CSS. Ведь CSS облегчает производство сайтов и снижает трафик, позволяя использовать общие правила во всех документах по нисходящей, если дизайнером не будет указано иначе. Например, с помощью CSS можно назначить шрифт, размер и цвет тега документа, и эти же параметры будут применены ко всем дочерним элементам этого тега начиная с
и заканчивая <р>, но только не в Netscape 4. В Netscape 42 + 2 = 2 + 2,а не 4. Некоторые дизайнеры обошли этот недостаток, используя устаревшие правила такого типа: body, td, serif; }. Элемент DOCTYPE следует помещать над всеми XHTML-документами, перед остальным кодом. Он предшествует элементам , < t i t l e > , <meta> и ссылкам на таблицы стилей и файлы скриптов JavaScript. Он также предшествует контенту. Другими словами, элемент DOCTYPE предшествует всему.nepexoflHaH модель Web-документа. <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" /> By\n;yii];ee Web-дизайна в красивом KOfle. She & he say t h a t x < у when z = 3.
следует писать как: She & he say t h a t x < у when z = 3.
Служба проверки кода W3C пропустит код с этими символами в незакодированном виде и выдаст предупреждение, тогда как анализатор XML сообщит о неустранимой ошибке. Примечание. Рекомендуем вам всегда кодировать и знак > как >. Несмотря на то что в этом нет жесткой необходимости, в этом случае ваш код будет более симметричным и понятным для других программистов. Итак, давайте рассмотрим изученные правила XHTML. или бессмысленных элементов TeMa Введение<Ьг / x b r /> Подзаголовок ., когда мы хотим сделать его покрупнее, или использовать тег < l i > , когда мы хотим добавить перед текстом маркер. Мы привыкли, что означает крупный шрифт, < l i > - маркер, a - отступ. С помощью структурных элементов HTML мы создаем внешний вид страницы. Или, например, если дизайнер хочет сделать одинаковым размер всех заголовков, он может использовать для этого тег , хотя это и создает структурную неразбериху, а специалист по юзабилити Джейкоб Нильсен назвал бы это грехом, если бы не был так занят проблемой цвета ссылок: 3To главный заголовок, вернее, он был бы таким, если бы я организовал свой текст. 3To не главный заголовок, но я хотел, чтобы он был такого же размера, как и главный заголовок. Кроме того, я не умею работать с CSS. A это вообще не заголовок. Но я очень хотел, чтобы весь текст на странице был одного размера. Если бы я знал о CSS, я бы смог добиться этого без пожертвования структурой документа. Игры кончились, пора начать использовать элементы по их назначению, а не по внешнему виду. На самом деле может выглядеть, как вы того захотите. Например, в CSS тег может быть мелким и в шрифте Roman, текст с тегом <р> может быть крупным и полужирным, < l i > может не иметь маркера (или же может вместо него использовать изображение в формате PNG, GIF или JPEG) и так далее. Начиная с сегодняшнего дня мы будем использовать CSS для задания внешнего вида элемента. Мы даже можем установить их внешний вид в зависимости от их расположения на странице или сайте. Больше нет необходимости (если, <em> - и так далее. По умолчанию большинство браузеров отобразит <strong> как , a <em> как , что создаст желаемый визуальный эффект без ущерба для структуры документа. Пока еще нам не попадался браузер, отображающей <strong> иначе, чем полужирным (конечно, если сам дизайнер не захочет этого). Если же вы волнуетесь, что вдруг попадется какой-нибудь странный браузер, отображающий < s t r o n g > по-своему, можно использовать следующее правило CSS: strong 3десь разместить компоненты формы поиска.
Здесь разместить запись Be6nora.
В этих примерах d i v i d = " searchform" необходим для определения области страницы, содержащей форму поиска, тогда как d i v c l a s s = " b l o g e n t r y " можно использовать для определения области страницы под каждую запись веблога (более привычен термин блог). Так как на странице имеется только одна форма поиска, для нее выбран атрибут id. Но блог может содержать несколько записей, поэтому для него используется атрибут c l a s s . Если блог может обойтись без использования элементов div, если возможно использовать обычную структуру заголовков и абзацев - так даже лучше. Ежедневные новости на zeldman.com многие называют блогом, хотя записи на этой странице оформлены общими элементами h3, h4 и р.[Здесь разместить изображения со ссылками.] Этот способ отличается от более знакомого приема тем, что в описании элемента отсутствуют инструкции для его отображения - не указаны ни высота, ни ширина, ни фоновый цвет, ни горизонтальное или вертикальное выравнивание. Так как же браузер понимает, где расположено изображение? Давайте вспомним о рассмотренных ранее селекторах CSS. " primenav" как раз и является таким селектором. В одной из таблиц стилей сайта в правилах CSSуказано, что элемент "primenav" не имеет отступов и полей, - иными словами, он не окружен пустым пространством. Так как первый видимый элемент кода XHTML - это
, совместимые с CSS браузеры поместят его в верхний левый угол страницы. Четыре изображения элементов меню располагаются с помощью элемента "primenav" в строке один за другим. Нет необходимости использовать таблицу для выравнивания этих элементов относительно друг друга. Также не нужно выравнивать каждый элемент с помощью отдельного правила CSS. Элементы отображаются на странице в том же порядке, в котором они перечислены в XHTML-коде.
196 Г пава 1. Структура и гкетасгруктура в строгой и смешанной разметке
С помощью такого приема мы можем избежать табличной разметки и использования ненужных таблиц стилей, создав четкую разметку, которая загружается быстрее за счет отсутствия лишних правил CSS. Ниже приведен фрагмент кода сайта zeldman.com с удаленными элементами ссылки на JavaScript и условными путями к изображениям:
<а href="/"ximg src="/i/home.gif" width="150" height= H 100" border="0" alt="Home" />
Обратите внимание, что использование атрибутов высоты и ширины изображений желательно, но не обязательно. Также благодаря CSS атрибут границ является абсолютно ненужным, хотя мы и используем его в этом фрагменте для старых браузеров. Приведенный выше фрагмент кода мог бы выглядеть следующим образом:
<а href =" / "ximg src="/i/home.gif" alt = "Home" />
Разница очевидна. Однако компактный код и метаструктурное мышление не ограничиваются только разметкой CSS. Они могут применяться и при табличной разметке.
Смешанная разметка и компактный код за и против
Страх изучения разметки CSS или невозможность ее использования в определенных проектах не должна становиться препятствием для применения Web-стандартов. Сочетая табличную разметку с CSS и структурным, доступным XHTML, можно получить хорошую Web-страницу, работающую во всех браузерах. Стандарт предупреждение. CSS все еще находится на стадиинекоторые развития, некоторые браузеры Небольшое Как мы отмечали, компоненты интерфейса по-прежнему только учатся обрабатывать CSS 1 и CSS 2, поэтому для некоторых сайтов со смешанной разметкой могут быть не структурированными. Но это не означапроектов имеет смысл использовать XHTML-таблицы расположеет, что оставшийся код таких сайтов не простые должен быть структурным. Вседля равно абзацы ния основных элементов не стоит путатьЭто табличную разметку с следует помечать как абзацы,сайта. спискиОднако - как списки и так далее. также не подразумебестолковой разметкой, сайты со смешанной и несколькими невает, что следует создаватьа навигационные меню илиразметкой другие компоненты с помощью структурными компонентами довольно сильно отличаются от запутанного бесописанных ранее в этой книге неверных методов и приемов. Структурный элемент или толкового кода, используемого большинстве сайтов и по сей день. нет - в любом случае необходимо в использовать четкий, компактный код и CSS.
198
Глава ?* Структуpa m e i
Плохая практика В следующем разделе мы рассмотрим неверные способы создания сайтов и объясним, почему такие методы являются непродуктивными. Мы также поименно назовем наиболее часто используемые ошибочные приемы. После прочтения этого раздела вы не только сможете научиться избегать использования таких приемов в своей работе, но и сможете распознавать их в проектах своих коллег. Когда вы прочтете этот раздел и запомните приведенные в нем уроки, вы с легкостью сможете пресечь все попытки ваших коллег подсунуть вам плохой код. Вы всегда сможете позвонить им, сообщить об обнаруженных ошибках и дать свои рекомендации. Благодаря этому ваши коллеги обретут уважение к хорошему коду, уважение к вам и, помимо этого, начнут испытывать сильное чувство дискомфорта, когда вы находитесь рядом с ними. На самом деле мы придумали названия этим распространенным ошибкам в первую очередь для того, чтобы как-то идентифицировать их и изжить из своей практики. Надеемся, что это поможет и вам.
Распространенные ошибки смешанной разметки Давайте рассмотрим типичный для табличной разметки дизайн сайта (рис. 7.2) с навигационным меню (рис.7.3), изменяющим свой внешний вид (рис. 7.4) в зависимости от местонахождения пользователя на сайте. В качестве логотипа сайта, скорее всего, будет использоваться простое изображение, вероятнее всего, в формате GIF. Пункты меню (События, О компании, Контакты и т.д.) могут также быть как изображениями, так и простыми гипертекстовыми ссылками. Если используются гипертекстовые ссылки, сторонники старых методов воспользуются тегами шрифта для управления внешним видом (размер, шрифт, цвет) и устаревшими атрибутами для выравнивания, установки границ и фонового цвета ячейки таблицы, содержащей пункт меню. Современные дизайнеры обратятся для этого к CSS, однако при неверном использовании полученные результаты могут быть еще хуже. Даже если для пунктов меню используются изображения GIF, дизайнер, скорее всего, постарается как-то выделить меню на фоне других элементов сайта. Например, использовать для меню тонкие черные границы (рис. 7.3-7.4), тогда как остальные элементы сайта обходятся без границ. В еще более запущенном случае дизайнер может поместить таблицу с меню внутри другой таблицы, единственной целью которой является создание рамки. Вот так мы создавали
тат ртштш ш компактный над - за и против
199
200
Глава 1. Структура и метаструнпгура в строгой и смешанной разметке
сайты в 1997 году. Сегодня дизайнеры могут комбинировать плохой код с чрезмерно раздутым CSS, чтобы добиться такого же эффекта. Однако такой способ ничем не лучше предыдущего.
Класситсы: болезнь кода Каким образом мы отличаем ячейки таблицы, служащие пунктами меню, от остальных ячеек на странице? Или заставляем ссылки внутри этих ячеек отличаться от всех иных ссылок страницы? Точно не с помощью устаревших тегов оформления и атрибутов вроде bgcolor, как вы уже могли догадаться. Мы не используем подобный код:
Co6HTMH и так далее. Co6HTMH и так далее. Co6HTMH и так далее. Мы называем такой стиль разметки класситсом (classitis). На подобных сайтах каждый тег имеет свой класс. Чрезмерное использование элемента c l a s s необоснованно увеличивает размер кода каждой страницы. Появление этого приема уходит корнями во времена, когда браузеры едва-едва поддерживали CSS, а также оно отражает весьма неглубокие и поверхностные познания дизайнера в CSS. Возможно также, что многие дизайнеры так и не переросли этот этап поверхностных знаний о CSS, так как перешли на изучение других технологий Web-дизайна, или учили CSS с помощью просмотра кода, создаваемого их визуальными редакторами, прилепляющими c l a s s к каждому генерируемому ими тегу. . Чувствуете разницу? Конечно, да., однако с разметкой, использующей неструктурные элементы div, все было хорошо. Пытаясь сохранить мельчайшие нюансы разметки для стремительно снижающегося числа пользователей браузеров четвертых версий, многие дизайнеры так увлеклись, что стали настаивать на использовании неструктурных элементов d i v вместо обычных элементов абзаца, заголовка и так далее. Цена такого метода высока. Такие сайты практически недоступны растущему числу пользователей карманных компьютеров, мобильных телефонов и программ
