Большинство наших дизайнеров до сих пор используют традиционную компоновку таблиц, представление и структуру, смешанную вместе, для создания веб-сайтов. Обучение использованию XHTML+CSS требует определенного процесса, и привести существующий веб-сайт в соответствие со стандартами веб-сайтов невозможно за один шаг. Лучший подход — действовать шаг за шагом и поэтапно, чтобы достичь цели полного соответствия стандартам веб-сайта. Если вы новичок или не очень хорошо знакомы с кодом, вы также можете использовать совместимые со стандартами инструменты редактирования, такие как Dreamweaver MX 2004, который на данный момент является наиболее полным инструментом, поддерживающим стандарты CSS.
1． первичное улучшение
Добавьте правильный DOCTYPE на страницу.
Многие дизайнеры и разработчики не знают, что такое DOCTYPE и для чего он используется. DOCTYPE — это аббревиатура типа документа. В основном используется для указания того, какую версию XHTML или HTML вы используете. Браузер интерпретирует код страницы в соответствии с DTD (определением типа документа), определенным вашим DOCTYPE. Итак, если вы случайно установили неправильный DOCTYPE, результаты вас удивят. XHTML1.0 предоставляет три варианта DOCTYPE:
(1) Переходный
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
(2) Строгий
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
(3)Тип рамы (Набор рамок)
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>
Для нашего основного улучшения нам нужно использовать только переходный оператор. Он по-прежнему может быть совместим с макетом вашей таблицы, логотипами выступлений и т. д., так что вы не почувствуете, что изменения слишком велики и их сложно освоить.
Совет: Если вам лень вводить приведенный выше переходный код, вы можете посетить домашнюю страницу веб-сайта http://www.macromedia.com/, затем просмотреть исходный код, скопировать и вставить тот же код в область заголовка. .
Установить пространство имен (Пространство имен)
Добавьте следующий код непосредственно после объявления DOCTYPE:
<html XMLns=http://www.w3.org/1999/xhtml >
Пространство имен — это подробное DTD, в котором собраны типы элементов и имена атрибутов. Объявление пространства имен позволяет идентифицировать ваше пространство имен с помощью указателя онлайн-адреса. Просто введите код как обычно.
Объявите свой язык кодирования
Чтобы правильно интерпретироваться браузерами и пройти проверку разметки, все документы XHTML должны указывать используемый ими язык кодировки. Код выглядит следующим образом:
<meta http-equiv=Content-Type content=text/html; charset=GB2312 />
Заявленный здесь язык кодирования — упрощенный китайский GB2312. Если вам нужно создавать контент на традиционном китайском языке, вы можете определить его как BIG5.
Пишите все метки строчными буквами.
XML чувствителен к регистру, поэтому XHTML также чувствителен к регистру. Все имена элементов и атрибутов XHTML должны быть в нижнем регистре. В противном случае ваш документ будет признан недействительным по результатам проверки W3C. Например, следующий код неверен:
<TITLE>Профиль компании</TITLE>
Правильный способ написания:
<title>Профиль компании</title> Аналогичным образом измените <P> на <p>, <B> на <b> и т. д. Этот шаг преобразования очень прост.
Добавить атрибут alt к изображению
Добавьте атрибут alt ко всем изображениям. Атрибут alt указывает, что заменяющий текст отображается, когда изображение не может быть отображено. Это необязательно для обычных пользователей, но имеет решающее значение для текстовых браузеров и пользователей, использующих программы чтения с экрана. Только после добавления атрибута alt код пройдет проверку правильности W3C. Обратите внимание, что нам нужно добавить значимые атрибуты alt, писать так бессмысленно:
<img src=http://www.chinahtml.com/0608/logo_unc_120x30.gif alt=http://www.chinahtml.com/0608/logo_unc_120x30.gif>
Правильный способ написания:
<img src=http://www.chinahtml.com/0608/logo_unc_120x30.gif alt=Логотип компании UNC, щелкните, чтобы вернуться на домашнюю страницу>
Цитировать все значения атрибутов
В HTML вам не нужно заключать значения атрибутов в кавычки, но в XHTML их необходимо заключать в кавычки.
Пример: высота=100, а не высота=100.
Закрыть все вкладки
В XHTML каждый открытый тег должен быть закрыт. Так:
<p>Каждая открытая вкладка должна быть закрыта. </p> <b>HTML может принимать незакрытые теги, а XHTML — нет. </б>
Это правило поможет избежать путаницы и проблем с HTML. Например: если вы не закроете тег изображения, у вас могут возникнуть проблемы с отображением CSS в некоторых браузерах. Используйте этот метод, чтобы страница выглядела так, как вы ее создали. Следует отметить, что пустые теги также должны быть закрыты. Для закрытия используйте косую черту / в конце тега. Например:
<br /> <img src=http://www.chinahtml.com/0608/webstandards.gif />
После обработки по семи вышеупомянутым правилам страница в основном соответствует требованиям XHTML1.0. Но нам еще предстоит проверить, действительно ли он соответствует стандартам. Мы можем использовать W3C для предоставления бесплатных услуг проверки (http://validator.w3.org/). Исправляйте ошибки одну за другой после их обнаружения. В следующем списке ресурсов мы также предоставляем другие службы проверки и URL-адреса, содержащие рекомендации по проверке, которые можно использовать в качестве дополнения к проверке W3C. Когда вы, наконец, пройдете проверку XHTML, поздравляем: вы сделали большой шаг к стандартам веб-сайтов. Это не так сложно, как вы думаете!
2. Промежуточное улучшение
Наше следующее улучшение заключается главным образом в разделении структуры и производительности. Этот шаг не так прост, как первый. Нам нужно изменить концепцию, а также изучить и применить технологию CSS2. Но изучение чего-то нового требует времени, верно? Хитрость заключается в том, чтобы учиться на практике. Если вы всегда использовали табличную разметку и вообще никогда не использовали CSS, не нужно спешить прощаться с табличной разметкой. Для начала можно заменить тег шрифта таблицей стилей. Узнав больше, вы сможете сделать больше. Хорошо, давайте посмотрим, что нам нужно сделать:
Определите внешний вид элементов с помощью CSS
У нас выработалась привычка при написании логотипов. Когда мы хотим, чтобы шрифт был крупнее, мы используем <h1>, а когда хотим добавить точку впереди, мы используем <li>. Мы всегда думаем о <h1> как о большом, <li> как о точках и <b> как о «жирном тексте». Фактически, <h1> может стать чем угодно. С помощью CSS <h1> может стать маленьким шрифтом, текст <p> может стать огромным и жирным, а <li> может стать изображением и так далее. Мы не можем заставить структурные элементы добиться представления, мы должны использовать CSS, чтобы определить внешний вид этих элементов. Например, мы можем сделать так, чтобы исходные заголовки уровня 6 по умолчанию выглядели одинакового размера:
h1, h2, h3, h4, h5, h6 {семейство шрифтов: 宋体, размер шрифта: 12 пикселей };
Замените бессмысленный мусор структурированными элементами.
Многие люди, возможно, никогда не знали, что элементы HTML и XHTML предназначены для выражения структуры. Многие из нас привыкли использовать элементы для управления представлением, а не структурой. Например, список может быть помечен следующим образом:
Предложение 1<br /> Предложение 2<br /> Предложение 3<br />
Было бы лучше, если бы вместо этого мы использовали неупорядоченный список:
<ul> <li>Предложение 1</li> <li>Предложение 2</li> <li>Предложение 3</li> </ul>
Вы можете сказать: «Но <li> отображает точку, а я не хочу ее использовать». Фактически, CSS не определяет, как выглядит элемент. Вы можете отключить точки с помощью CSS.
Добавьте идентификатор в каждую таблицу и форму
Создайте таблицу или создайте уникальную структурную разметку, например.
<идентификатор таблицы=меню>
Далее, при написании таблицы стилей, вы можете создать селектор «меню» и связать его с правилом CSS, которое сообщает ячейкам таблицы, текстовым меткам и всем другим элементам, как отображать их. Таким образом, нет необходимости присоединять к каждому тегу <td> некоторые избыточные, потребляющие полосу пропускания атрибуты уровня представления, такие как высота, ширина, выравнивание и цвет фона. Всего лишь прикрепив тег (тег id, который помечает «меню»), вы можете выполнить специальную обработку представления для чистой и компактной разметки кода в отдельной таблице стилей.
Для промежуточных улучшений мы сначала перечислим здесь основные три пункта, но они содержат много содержания и знаний, которые нам нужно изучать и осваивать шаг за шагом, пока мы, наконец, не достигнем макета с использованием CSS полностью без использования каких-либо таблиц.