Прежде всего, не спешите начинать! Прежде чем что-либо делать, сделайте две мысленные подготовки. Это самая важная вещь в процессе обучения:
Обучение требует времени и должно осуществляться шаг за шагом;
На этом пути будут неудачи.
Но вы не одиноки: многие из нас инвестируют в изучение и использование веб-стандартов. Существует постоянно расширяющееся сообщество, которое поможет вам легче учиться: это ветераны, у которых было много трудностей с изучением техник и техник, а также счастливчики, опоздавшие (включая меня), которым будет полезен их пот и слезы.
Когда вы, наконец, овладеете методами проектирования, основанными на веб-стандартах (заставляя традиционные методы, основанные на таблицах, выглядеть затменными), оглядываясь назад, вы удивитесь, что компоновка страниц с помощью CSS не так уж и сложна. О, конечно, если бы основные браузеры имели лучшую поддержку некоторых операций спецификации CSS2, их было бы проще использовать.
Ну, я, кажется, немного не в теме.
Итак, приступим сразу к действительно полезной информации. Прежде всего, купите книгу «Проектирование с использованием веб-стандартов» (примечание 1), не раздумывайте слишком много, просто сделайте это немедленно. У вас уже есть такой? Что ж, прочтите это сейчас и не позволяйте ему пылиться. Каждый момент, который я хочу подчеркнуть, подробно объяснен в книге. Книга разделена на две равные части: манифест (почему вам следует делать то, что вы делаете) и руководство (как вы это делаете). Это может быть вам полезно.
Теперь первое, что нужно сделать, это установить идеологическую концепцию системы XHTML, независимо от того, выбираете ли вы HTML4.01 или Утомительная работа), все документы начинаются с выбора DOCTYPE. Сообщив браузеру, какой язык разметки использует ваш документ, вы предотвратите ненужные ошибки производительности, которые в противном случае свели бы вас с ума из-за плохих результатов отображения страниц. Например: если я хочу полететь в Чикаго, я должен сообщить туристическому агентству, куда я хочу поехать, иначе я могу бесцельно полететь в Вену. Чтобы отобразить HTML или XHTML, вы должны сначала сообщить браузеру, что установка DOCTYPE гарантирует, что я достигну «пункта назначения».
Следующая цель: строго отформатированные логотипы. Это очень легко освоить. Заключите все атрибуты в кавычки (например: <a href="link">); правильно вложите теги; закройте все открытые теги (например: <input type="text" />). Каждый логотип или элемент должен быть закрытым.
Краткое примечание: я не знаю, когда теги стали элементами. Они имеют одно и то же значение, но разные способы его выражения. Как бы вы их ни называли, сейчас правильное название кажется «элементами», может быть, так было вначале, я не знаю, и мне никто не сказал.
В любом случае, каждый элемент должен быть правильно закрыт. Если вы используете HTML4.01, вы можете игнорировать отдельные элементы, такие как <br>, <hr> и <input>. Если вы используете XHTML, отдельные элементы также необходимо закрывать, добавляя косую черту в конце, например: <br. > превращается в<br />.
Далее, существует несколько запутанное правило об атрибутах XHTML: все атрибуты должны иметь значение, а если значения нет, используется само значение. Например, <input type="radio"checked="checked" />. В HTML4.01 проверяемое значение не требуется, но в XHTML оно обязательно.
Наконец, XHTML требует, чтобы вы писали весь код в нижнем регистре. В отличие от XHTML, HTML не чувствителен к регистру и следует правилам синтаксиса XML.
Вот и все об изменениях логотипа! Вы уже все это знаете! Сделайте глубокий вдох, выпейте пива и расслабьтесь. Потому что это только первый шаг.
Раздел 2
Теперь начинаем учиться писать правильные HTML/XHTMLL и проверять их в валидаторе (валидаторе) организации W3. Если вы написали правильно, вы увидите сообщение об успехе с желтым текстом на синем фоне. Попробуйте понравиться это сочетание цвета и шрифта, оно станет вашим лучшим другом.
Почему проверка так важна? Имеет ли это значение? Потому что плохо написанные (случайные, неточные) логотипы принесут полную непредсказуемость. «Жизнь и смерть» страницы полностью зависит от метода обработки ошибок браузера. Хотя большинство браузеров также могут хорошо поддерживать плохо написанный логотип, это неправильная привычка. Привет, что заставляет нас привыкать к нестандартам? Первая причина — война браузеров. В 1995 году Microsoft смогла конкурировать и отвоевать долю рынка у Netscape, поскольку IE обрабатывал ошибки веб-страниц точно так же, как Netscape.
Другая точка зрения: проверка помогает найти ошибочный код и гарантирует, что ваши страницы будут работать более согласованно. Проверка кода — это первое, что я делаю при отладке макета, и я думаю, что вы тоже.
Хорошо, когда вы впервые подтвердите свой первый сайт, вам, вероятно, придется пережить семьдесят или восемьдесят невероятных сообщений об ошибках. К сожалению, хотя контрольная сумма и полезна, она не идеальна и поддерживается лишь несколькими добровольцами. Хорошей новостью является то, что эти ошибки связаны между собой. Если вы обнаружите, что тег </p> отсутствует, и исправите его, скорее всего, следующие 24 ошибки исчезнут. Короче говоря, может показаться, что результат проверки плохой, но зачастую это не так.
Теперь вы прошли проверку и ваш код соответствует требованиям. На этом этапе вы придерживаетесь строгих правил, но у вас нет полного понимания, почему вы вообще это делаете.
Раздел 3 Следующим шагом является рефакторинг созданной вами документации с использованием правильно сформированной разметки, удаление тех атрибутов уровня представления, которые в последних DOCTYPE все чаще указываются как «устаревшие», и помещение их в отдельный файл. Это спорное «разделение производительности и структуры», поэтому CSS так важен.
Вот аналогия: ваш текст — это контент. Контент полный, но нет никакого намека на структуру контента (например, пробелы, разделы, заголовки, списки и т. д.). Вы получаете просто беспорядочный текст, который совсем непросто использовать. Структурный слой является дополнительным. В документ добавляются отдельные элементы, которые передают дополнительную структурную информацию, чтобы разбить беспорядочный текст и сделать его более логичным и организованным. Но эти элементы не контролируют внешний вид текста по умолчанию. Например, вы часто обнаруживаете, что заголовок на первой странице больше шрифта текста. Это не зависит от структуры.
Пришло время появиться «представительскому слою». Представление представляет собой подсказку по форматированию, которая указывает, что заголовок первой страницы должен быть выделен красным курсивом, а размер шрифта должен составлять 150 % от основного шрифта. Уровень представления — это дополнительный уровень над уровнем структуры документа. CSS относится к уровню представления и может преобразовывать документы в удивительные формы с помощью простых тегов в документе — посетите CSS Zen Garden, чтобы увидеть примеры.
Итак, как лучше всего отделить производительность от структуры? Давайте для иллюстрации возьмем фрагмент традиционного кода, который содержит элементы или атрибуты HTML, используемые для представления. Пришло время отрезать теги bgcolors и <center>. Давайте проведем простой тест:
Какие атрибуты и теги представления следует удалить в следующем демонстрационном коде?
<center><h1><font face="Verdana">Это мой первый веб-сайт.</font></h1></center> <table border="0" cellpadding="0" cellpacing="0" > <body bgcolor="#ffffff" topmargin="0" leftmargin="0"marginwidth="0"marginheight="0"> <td bgcolor="#ffffff" valign="top" align="center">< p>Они собираются меня забрать...</p></td>
Вы готовы ответить? Хорошо, правильный результат указан ниже: чистый структурированный код без следов производительности:
<h1>Это мой первый веб-сайт.</h1> <table> <body> <td><p>Они собираются забрать меня...</p></td>
вот и все? Вот и все.
Хотя этот код явно не соответствует ни одной спецификации, большее значение такого разделения состоит в том, что используются правильные элементы. Использование макета таблицы является второстепенной проблемой. В приведенном выше примере метод использования таблиц неверен. С долгосрочной и разумной точки зрения элементы <table> и <td> следует удалить. Хотя их использование устарело, таблицы по-прежнему очень полезны, и их можно использовать там, где это необходимо — для данных, представленных в виде таблиц.
Что ж, мы убрали форматирование со страниц, ура! Чем еще ты занимаешься сейчас? Остаются только некоторые уродливые элементы, текст и линии шрифтом Times-New-Roman. Совсем не смешно, где же обещанные нам яркие и красивые страницы?
Оглядываясь назад на пример Zen Garden, видите ли вы симпатичный дизайн? Насколько они разные? Дело в том, что под этим красивым дизайном находится тот же XHTML, который так же скучен, как и только что созданный неформатированный документ. Не так ли?
На самом деле у скучного и некрасивого есть хорошая основа. Возможно, вы заметили, что этот неформатированный HTML выглядит так же плохо, как и Интернет в 1994 году. За некоторыми исключениями, эти элементы так же стары, как и сам Интернет: <h2> существует еще со времен браузера Mosaic.
На этом преимущества, конечно, не заканчиваются: простотой использования (для особых нужд), встроенным SEO, снижением затрат на полосу пропускания и так далее. Джеффри Вин уже написал «Бизнес-ценность веб-стандартов» в прошлом году, а Роджер Йоханссон также объяснил методы и преимущества проектирования на основе стандартов в своей недавней книге «Разработка с использованием веб-стандартов».
CSS сегодня хорошо поддерживается всеми основными браузерами, и существует бесчисленное множество ресурсов, которые помогут изучить синтаксис CSS, макеты на основе CSS и передовые методы. Я рекомендую несколько хороших: WestCiv предлагает постоянный бесплатный курс CSS, который поможет вам начать работу и быстро освоить. Эндрю Фернандес составил огромный список ресурсов CSS, которые будут полезны независимо от того, новичок вы в CSS или нет. Эрик Мейер написал подборку книг, которые вы можете держать на своем столе и читать в любое время. В число этих книг входят основанные на кейсах книги «Эрик Мейер о CSS» и «Подробнее Эрик Мейер о CSS». Справочник по CSS «Полное руководство по CSS», изданный издательством O'Reilly, вышел вторым изданием, и вам лучше держать его на своем столе. Также доступны книги «The Designer's Edge» Молли Хольцшлаг и «Проектирование веб-страниц CSS» Криса Шмитта.
Подробное изучение применения CSS и построения макетов заняло бы слишком много времени. Больше я ничего не скажу. Вышеупомянутый совет я могу дать дизайнерам, которые начинают обращать внимание на веб-стандарты. Прочтите и поделитесь своими мыслями, и давайте расти как сообщество. Многие из нас активно продвигают веб-стандарты. Воспользуйтесь этим.
Примечания 1. «Проектирование с использованием веб-стандартов» — это книга, написанная Зельдманом с целью продвижения веб-стандартов. Китайская версия была представлена и выпущена в мае 2004 года. Книга называется «Реконструкция веб-сайтов — Проектирование с использованием веб-стандартов».