Урок 1: Введение в Newland Tours

Оценка сайта: код

В этом упражнении файлы останутся без изменений, однако настроим среду Dreamweaver таким образом, чтобы она стала более дружественной и удобной в работе. После этого изучим код главной страницы для выявления возможных дефектов.

При просмотре страницы в браузере эти дефекты совсем незаметны, то есть страницу легко будет просматривать в большинстве популярных веб-браузеров. В этом случае возникает вопрос о том, как может код такой страницы иметь какие-то недостатки?

Ответ в том, что исходный код, используемый на сайте, устарел и не соответствует действующим стандартам. Оценка значимости кода и стандартов будет проведена в конце этого упражнения.

Проект по модификации сайтов часто начинается с устаревшего и не соответствующего стандартам кода, поэтому следует зафиксировать эти моменты. Позже будет показано, как его исправить.

1. Дважды щелкните на файле index.htm , чтобы открыть его.

   В зависимости от того, выполнялось ли упражнение по созданию страницы контактов, документ будет отображаться либо в режиме Design (Дизайн) (если упражнение не выполнялось), либо в режиме Split (Режим разделения) (если упражнение выполнялось).

   Прежде, в конце 1990-х, когда рынок HTML-редакторов был переполнен редакторами, которые превосходно работали в режиме Code (Код), но плохо в режиме Design (Дизайн), появление Dreamweaver, отлично работающего в обоих режимах, привело к кардинальным переменам. Сейчас, годы спустя, Dreamweaver остается единственным подходящим редактором в тех случаях, когда требуется использовать оба указанных режима. Многие дизайнеры, знающие, что Dreamweaver генерирует корректный HTML-код самостоятельно, ограничивались созданием сайтов в режиме Design (Дизайн) и никогда не беспокоились о коде.

   Но роскошь работы только в режиме Design (Дизайн) осталась в прошлом.

   При серьезном подходе к разработке веб-приложений и при необходимости создания веб-содержимого, управляемого базами данных, требуется умело работать непосредственно с кодом. Более того, если нужно обновить HTML-код до соответствующего стандартам XHTML-кода, следует "закатать рукава" и вручную выполнить ряд операций с кодом.
2. Если необходимо, щелкните на кнопке Split (Режим разделения).

   Комбинированный режим Split (Режим разделения) является наилучшим вариантом, который позволяет применить средства обоих режимов Design (Дизайн) и Code (Код). При желании с его помощью можно вручную редактировать код, даже если действует режим дизайна, в котором удобнее производить некоторые виды правки, например, модификацию текста, расположенного в теле документа.

   

   
   увеличить изображение
   

   Комбинированный режим Split необходим для работы с динамичными сайтами. Несмотря на то, что многие задачи Dreamweaver позволяет выполнять при помощи моделей поведения серверов, управляемых через визуальный интерфейс и встроенный визуальный SQL-построитель, все равно остается необходимость редактировать код вручную. Помимо этого, некоторые изменения намного быстрее вносить в режиме кода, чем в режиме дизайна. Другое преимущество заключается в том, что подобный способ позволяет довольно глубоко изучить код. Хотя в этой книге, безусловно, предусмотрено знакомство с HTML, некоторые детали, например, параметры того или иного тега, нередко забываются. Применение режима разделения Split помогает овладеть HTML. С этого момента (и для всех будущих проектов) следует сделать режим разделения режимом по умолчанию. Рекомендуется избегать использования режима кода или режима дизайна по отдельности, если только не будет особой причины сделать так. После того, как нужные действия будут выполнены, следует переключиться обратно в режим разделения.

   Все проблемы, о которых идет речь в последующих шагах этого упражнения, проявляются только в режиме Code (Код), а в режиме Design (Дизайн) их обнаружить невозможно. Таким образом, режим разделения доказывает свою состоятельность.

   Совет.Другое преимущество работы в режиме разделения заключается в том, что при щелчке на объекте в режиме дизайна, он позволяет с легкостью найти соответствующий фрагмент в режиме кода. Чтобы, скажем, увидеть код для изображения, следует щелкнуть на нем. Соответствующий HTML-код будет выделен в центре области режима кода. Особенно это полезно на страницах, состоящих из сотен строк кода.
3. При необходимости следует включить нумерацию строк в режиме Code (Код). Для этого следует выполнить команды View\Code View Options\Line Numbers (Вид\Параметры режима кода\Номера строк).
   

   
   увеличить изображение
   

   Эта настройка отображает номера строк в режиме кода. Нумерация строк облегчает передачу сообщений об определенных участках кода между несколькими разработчиками. (В этой книге нумерация строк применяется довольно часто.) Вдобавок, она заметно облегчает поиск ошибок, поскольку при обнаружении ошибок ASP и ColdFusion генерируют сообщения, в которых указана строка кода, являющаяся причиной возникновения проблемы.
4. Определите, какая версия HTML используется в документе (перейдите к строке 1).

   В режиме дизайна это задание выполнить сложно, но разделенный режим позволяет сразу же увидеть, что код документа относится к версии HTML 4.01 transitional. Эта информация указана в объявлении, представленном в теге <DOCTYPE> в строке 1. Этот тег сообщает веб-браузеру, какая версия HTML используется в документе, чтобы браузер мог отобразить страницу должным образом. Все корректно сформированные HTML-документы должны включать тег <DOCTYPE> .

   Модификация Transitional стандарта HTML 4.01 теперь является устаревшей версией HTML. Она до сих пор поддерживается во всех распространенных браузерах. Но, поскольку эта версия HTML была заменена стандартом XHTML, последующие версии браузеров могут перестать поддерживать документы, подготовленные с помощью этой версии. В "Модернизация до XHTML" сайт будет обновлен до XHTML.

   Модернизация до XHTML, безусловно, приводит к более существенным изменениям, чем объявление типа документа с помощью тега <DOCTYPE>. XHTML кардинально преобразует HTML, изменяя некоторые правила кодирования. Одно такое изменение, например, заключается в том, что все элементы должны быть закрытыми. В HTML 4 и более ранних версиях допускалось использование пустых элементов. К пустым элементам относятся те, которые не имеют закрывающих тегов или не содержат ничего между открывающим и закрывающим тегами. К пустым тегам относятся теги <br>, <hr>, <input> и <img>. В XHTML все теги должны быть закрыты. Для того, чтобы изменить пустые теги надлежащим образом, следует просто добавить перед закрывающей угловой скобкой пробел и косую черту (прямой слэш) ( / ), так что <br> преобразуется в <br />, а <img src="picture.jpg"> – в <img src="picture.jpg" />. В конце строки 32 расположен тег <br>. Это один из сотен элементов на сайте, которые будут изменены позже.
5. Проверьте код на соответствие настройкам доступности (строки 11 и 12).

   В течение нескольких лет многие разработчики пренебрегали потребностями людей с ограниченными возможностями, вследствие чего они не могли пользоваться сайтами. В частности, пользователи с нарушениями зрения не могли просматривать содержимое сайтов. Поскольку основная информация на сайтах представлена в текстах, был разработан специальный тип браузеров, зачитывающий текст содержимого вслух и называемый синтезатором речи. Единственная проблема состоит в том, что они не могут интерпретировать визуальное содержимое, главным образом, изображения. Если изображение несет важную смысловую нагрузку,– как и происходит на большинстве сайтов, пользователи не могут получить доступ к этому содержимому.

   Простой способ передать синтезатору речи смысл изображения, заключается в добавлении пояснительного текста к нему. Если добавить комментарии к каждому изображению, включая и картинки, несущие смысловую нагрузку (например, диаграммы), либо картинки, использованные в оформлении сайта или даже пустые области, тогда пользователям не нужно будет гадать, что же они пропустили.

   Для того чтобы выполнить эту задачу, следует добавить параметр к каждому элементу изображения, которое возможно описать строкой текста. Необходимый атрибут – alt. Его следует добавить в каждый тег <img> на странице в следующем виде: alt="Описание изображения". Так называемый экранный диктор зачитывает вслух содержимое атрибута alt, так что пользователь получит информацию об изображении.

   

   
   увеличить изображение
   

   В строках 11 и 12 содержится код для двух изображений, расположенных в первой строке таблицы. На одном отображается название Newland Tours, а на втором присутствует три фотографии (берег, лес и мечеть). В этих картинках отсутствует атрибут alt и, следовательно, информация о них будет недоступна посетителям, пользующихся экранным диктором.

   Примечание. Применение атрибута alt для изображений – не единственный способ упрощения доступа к подобным объектам. Так, на некоторых сайтах для облегчения доступа вверху страницы добавляются комбинации клавиш, позволяющие пользователю проигнорировать кнопки на панели навигации и сразу перейти к содержимому страницы. Доступ к отдельным элементам страницы может быть существенно ограничен при злоупотреблении таблицами. Хотя, на самом деле, сами таблицы не влияют на возможности доступа, но их избыточное использование разбивает содержимое страницы. В результате, и у экранного диктора могут возникнуть затруднения при воспроизведении содержимого в логической последовательности.

   Важнейшая цель при разработке средств доступа заключается в том, чтобы все пользователи имели равный доступ ко всему содержимому сайта. Детальное обсуждение проблем, связанных с расширением возможностей доступа, лежит за пределами рассмотрения этой книги, но подробнее об этом можно узнать на сайте компании Macromedia по адресу: http://www.macromedia.com/macromedia/accessibility/.
6. Проверьте устаревший или отмененный HTML-код (строка 21).

   В строке 21 содержится следующий код:

   <p><b><font color="#505748" size="4">Explore the Site</font></b></p>

Несмотря на то, что эта строка отображается должным образом, и в Dreamweaver, и в браузере, код, тем не менее, является устаревшим и достаточно проблемным.

Как будет подробнее рассказано позже, одна из целей последних версий HTML заключалась в том, чтобы отделить HTML-разметку от дизайна сайта. Другими словами, HTML-разметка должна описывать структуру и содержимое документа, но не должна описывать, каким образом содержимое должно отображаться. По этой причине два тега, содержащиеся в строке кода, приведенной выше, считаются отмененными. Термин "отмененный" (deprecated) (не рекомендуемый) относится к способу или структуре кода, которые были изъяты из стандартов, но все еще (хотя и временно) поддерживаются.

Тег <b>, форматирующий текст с помощью полужирного начертания, является тегом, определяющим внешний вид. Для пользователей, пользующихся услугами экранного диктора, подобное форматирование бессмысленно. Иногда, выделяя что-то посредством полужирного начертания, мы пытаемся сообщить, что выделенные таким образом фрагменты являются наиболее важными по сравнению с остальным текстом. Однако в этом случае текст "Explore the Site" ("Изучите сайт") не представляет особого значения. Это просто заголовок раздела. Таким образом, применение тега <b> позволяет выделить как ключевые фрагменты текста, так и отдельные элементы структуры (в частности, заголовки разных уровней).

Другой не вполне корректный тег во фрагменте – это тег <font>. Этот тег применялся в HTML 3 и более ранних версиях, чтобы разработчики могли определять, как должны выглядеть их документы. С тех пор он был заменен более мощными и эффективными каскадными таблицами стилей. Тег <font> создает значительные проблемы для разработчиков, поскольку прикрепляется только к отдельным блокам текста. Например, чтобы при помощи тега <font> определить внешний вид всех заголовков 2 уровня по всему сайту, следует добавить этот тег к каждому заголовку 2 уровня. Если допустить ошибку, сайт перестанет выглядеть однородным. Еще хуже дела будут обстоять при модификации сайта, когда нужно вручную изменить каждый экземпляр этого тега. Итак, поскольку применение тега <font> приводит к возникновению проблем, все его экземпляры на сайте должны быть удалены.

Подводя итоги, можно сказать, что код устарел и не соответствует современным стандартам. Он не относится к XHTML (как выяснилось в объявлении с использованием тега <DOCTYPE> ). Пустые теги в нем не закрыты. Изображения не имеют атрибута alt. Код загружается вместе с тегами, определяющими оформление сайта, такими как <b> и <font>, которые следует заменить. Это не все затруднения, связанные с кодом, но их вполне достаточно для того, чтобы наглядно продемонстрировать пример того, с чем следует бороться.

Может возникнуть и такой вопрос: "В браузере все выглядит замечательно, ну так зачем беспокоиться? Все это так трудно исправлять. Нельзя ли просто проигнорировать это и начать делать динамичный сайт?" На этот вопрос существует несколько ответов.

То, что код хорошо отображается в браузерах Netscape и Internet Explorer сегодня, не означает, что он будет корректно выглядеть в будущем. Если код перестанет правильно отображаться в последующих версиях Internet Explorer, заказчик не будет удовлетворен сделанной работой.

На самом деле, код отображается должным образом не во всех современных браузерах. Следует учитывать возможности пользователей, пользующихся экранным диктором, для которых восприятие изображений неосуществимо. Вдобавок, новые технологии, такие как XSLT (eXtensible Stylesheet Language Transformations), требуют для функционирования соответствия XHTML. Изучение XSLT не является задачей этой книги. Помимо этого, его также вряд ли необходимо применять при создании небольшого сайта, но он может широко использоваться в будущем. С того времени, как была опубликована первая редакция этой книги, на нескольких ведущих сайтах стали использоваться XHTML и XSLT.

Выбрав на начальном этапе легкий путь, можно в дальнейшем запросто заработать головную боль. В данный момент Newland Tours представляет собой небольшой сайт, состоящий из пяти HTML-страниц. К концу книги сайт будет содержать около 30 страниц, а если бы этот проект был реальным, он бы очень быстро перерос и это количество. Перед внесением новых изменений стоит придать ему нужную форму, пока это еще довольно просто сделать.