Выгода. Шаг 1: Чистка разметки

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

Как вы видите на рис. 7.7 и 7.8, один и тот же сайт был оформлен разными способами, с небольшими изменениями основного дизайна. Сайт на рис. 7.7 был выполнен более дорогим, устаревшим способом — сайт использует HTML-таблицы для разметки страницы, а цвета и текстовое оформление управляют­ся тегами шрифтов и другой разметкой внешнего вида. Назовем этот сайт «Бо­тинки не любовь. Плохая разметка».

А на рис. 7.8 представим сайт «Ботинки не любовь. Хорошая разметка», де­монстрирующий тот же самый дизайн, но выполненный с помощью простого XHTML, где внешний вид создается с помощью таблицы стилей. Разметка для устаревшей версии «Ботинки не любовь» насчитывает 104 строки HTML-кода и занимает 6,5 Кб. Современная версия «Ботинки не любовь» — это 62 строки разметки и 3 Кб. Давайте переделаем сайт на рис. 7.7 в сайт на рис. 7.8.

У примера «Ботинки не любовь. Плохая разметка» много общих проблем для некачественно созданных сайтов последнего времени. Давайте подчистим их один за другим.

Примечание о типах документов XHTML

Существует три вида XHTML 1.0: Strict (Точный), Transitional (Переходный) и Frameset (Установка фреймов). Во многих примерах данной книги используется DTD Точный, потому что он обеспечивает более четкое разделение структуры и внешнего вида и потому что он лучше подходит для того, чтобы предугадать будущие версии XML и XHTML Воспользовавшись этим разделением и будущей совместимостью, вы може­те значительно сэкономить. Если вы не можете отказаться от создания дизайна для страниц Netscape 4.0 или вы не готовы к быстрым изменениям, предлагаемым в этой главе, возможно, вы не сможете отделить структуру от внешнего вида так решительно, как сделала это я. Netscape 4.0 фрагментарно поддерживает CSS, особенно работу, которую CSS выполняет по макетированию (размещению). Если вас это устраивает, вы можете использовать подобный HTML 4.0 вид XHTML — Transitional XHTML. Вы так­же можете использовать таблицы для позиционирования по крайней мере некоторых частей вашей Web-страницы.

[- Примечание о типах документов XHTML (окончание) —

Если вам приходится использовать таблицы, старайтесь чтобы их было немного. Не применяйте таблицы для компоновки страницы:

<table width=»75%»        border=»l»> <tr>

<td>KaKoe-To   содержание   оформлено   в   виде   таблицы.    Это   не   очень хорошая   идея.

<table  width=»7 5%»    border=»l»     align=»left»>

<tr>

<td>BapnaHT  расположения  одной  таблицы  внутри  другой  тоже  не   годится.</ td>

</tr>

</tablex/td> </tr>    . </table>

Браузеры Netscape 4.0 обладают достаточно хорошей поддержкой CSS-описаний полей и отступов, поэтому вам совершенно ни к чему задавать этот аспект внешнего вида с помощью HTML

Online-руководство Нью-Йоркской публичной библиотеки по стилю (www.nypl.org/ styleguide) — это учебник, в котором реализована идея поддержки CSS-описаний по­лей и отступов. Джефри Зельдман и я создали это руководство для Нью-Йоркской пуб­личной библиотеки потому, что администрацию библиотеки, как и многих некоммер­ческих и образовательных организаций, было трудно убедить в необходимости перехода от Netscape 4.0 к более современному браузеру^ Если сейчас вы нуждае­тесь в более легком способе перехода к современным стандартам, используйте это руководство, которое поможет вам упростить переход к отделению структуры от внеш­него вида. В «Дизайне по Web-стандартам» Зельдмана более детально описывается, как организации могут использовать Этот подход, чтобы добиться более высокой со­вместимости с различными браузерами и доступности пользователям за невысокую цену.

Некоторые CSS-оформления без таблиц работают в Netscape 4.0, и эти компоновоч­ные планы позволяют вам использовать тип документа «XHTML Strict» и продолжать радоваться посетителям, использующим Netscape 4.O. Возможно, вам больше придет­ся по душе сделать так, чем использовать XHTML Transitional. Но достаточно скоро вам придется побеспокоиться насчет Netscape 4.0; со временем вам захочется разделить структуру и внешний вид насколько это возможно, чтобы все грядущие переделки сай­та стоили дешевле. Крейг Сэйла (Craig Saila) составил перечень CSS-компоновок, которые работают в Netscape 4.0 (смотрите www.sailo.com/usage/layouts/nn4-layouts.shtml), а Марк Ньюхаус (Mark Newhouse) предоставляет некоторые из таких компоновок для вашего использования Hcrwww.realworldstyle.com.

Рис. 7.7. Сайт«Ботинки нелюбовь. Плохая разметка»

Почистите разметку заголовка

Первое, что необходимо сделать, — это почистить заголовок HTML-файла. Листинг 7.4 показывает устаревший, плохой заголовок, а листинг 7.5 — новый, улучшенный заголовок HTML-файла.

Рис. 7.8. Сайт «Ботинки нелюбовь. Хорошая разметка»

Листинг   7.4.   Разметка  заголовка  сайта  на  рис.    7.7

<html>

<head>

<title>BoTMHKM  не   nio6oBb</title>

</head>

Листинг  7.5.   Разметка  заголовка  сайта  на  рис.   7.8

<!DOCTYPE   html   PUBLIC    » -/ /W3C//DTD  XHTML   1.0   Strict//EN»    «http://

www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd»>

http://www.w3.org/1999/xhtml»   xml:lang=»en»

lang=»en»>

<head>

<meta  http-equiv=»Content-Type»   content=»text/html;   charset=iso-

8859-1″   />   .

<title>BoTMHKM   не   nio6oBb</tit :le>

<link  rel=»stylesheet»   media=»screen»   title=»Колонка  2

навигация  слева»‘  type=»text/css»  href=»/styles/basic.ess»   />

<style   type=»text/ess»   media=»all»>@import   */styles/fancy.ess»;</

style>

</head>

Обратите внимание, что добавлено было следующее:

  • XHTML-объявление типа документа в строке 1 и XML-пространство имен в строке 2 (листинг 7.5);
  • метатег, который сообщает пользовательскому агенту, с каким набором знаков он должен работать. Тот факт, что разметка в листинге 7.5 длин­нее, чем в листинге 7.4, сперва* может немного испугать. Ведь в конце концов Web-стандарты призваны уменьшать потребление трафика, а не увеличивать его дополнительными тегами и атрибутами. В самом файле отчищенная разметка намного короче разметки старого образца, но до­бавление объявления типа документа делает заголовок длиннее;
  • тег < title > для сайта. Он присутствует и на рис. 7.7, и теоретически Web-дизайнеры старой школы знают о том, что тег <title> всегда необходи­мо включать в листинг. Но если бы мне давали по центу за каждую Web-страницу без тега <title>, которую я видела, я бы не стала писать книгу о малом бюджете. Тег <title> помогает поисковым машинам и указателям отыскивать и сортировать нужным образом содержание вашего сайта. Не пренебрегайте этим, иначе потеряете потенциальных посетителей;

Определение;’

Набор знаков (Character Set) — это определенный список букв и символов, узнава-емыхустройствами и программным обеспечением. Каждой буквесоответствуетномер. Существует множество наборов знаков, поэтому для того, чтобы Web-страницы были правильно «поняты» браузерами и другими устройствами отображения, набор зна­ков должен быть объявлен.

  • ссылка на две таблицы стилей. Вы можете назвать их как угодно; здесь они называются basic.ess и fancy.css. Важно то, как вы вызываете эти таблицы стилей. Строка 6 вызывает таблицу стилей с помощью ссылки, а строка 7 — таблицу стилей методом импорта;
  • вот почему вам это должно понравиться: ранее я упомянула, что Netscape 4.0 обладает фрагментарной поддержкой таблиц стилей. Поддержка на­столько фрагментарная, что в действительности некоторые элементы CSS могут вызвать сбой Netscape 4.0. Однако Netscape 4.0 не понимает метод импорта, применяемый для вызова таблиц стилей. Поэтому, добав­ляя на ваш сайт что-то, без чего Netscape 4 было бы лучше обойтись, до­бавляйте такой стиль в CSS-документ, который вызывается методом им­порта;
  • закрытие элемента <head>.

Почистите тело документа

Теперь, когда есть приятный, чистый заголовок, можно обратиться к телу доку­мента. Некоторые инструменты помогут вам это сделать. HTML Tidy — прекрас­но для этого подходит (http://tidy.sourceforge.net). У Dreamweaver MX также есть инструменты для проверки и чистки разметки, которые работают, если вы используете объявление типа документа XHTML (www.macromedia.com/ software/dreamweaver).

Из листинга 7.6 видно, что сайт «Ботинки не любовь» оформлен при помо­щи тегов шрифтов. Обратите внимание, насколько громоздкой делают страни­цу теги шрифтов.

Листинг  7.6.   Разметка тела сайта на рис.   7.7

  1. <hlxF0NT COLOR=#FFFFFF SIZE=3  face = Georgia,   Times New Roman, Times,
  2.  serif>ЗАЧЕМ НАМ НУЖНЫ БОТИНКИ?</FONT></hi>
  3. <PxF0NT COLOR=#FFFFFF  SIZE=-1  face=Verdana,   Arial, Helvetica,   sans-
  4. serif>   Lorem  ipsum dolor  sit   amet,   consectetuer  adipiscing elit.   Sed
  5. commodo   elit  viverra  lectus.   Sed nisi   dolor,   porttotor  sit amet,   posuere
  6. nee,   iaculis   at,   orci.   <a href=»erat.html»>   Maecenas   libero erat</A>,
  7. mattis   at,   volutpat   in,   fermentum at,   dui.   Phasellus  ut   erat nee lorem
  8. vestibulum  lacinia.  Cras  turpis  nulla,   aliquot  vulputate, vestibulum  at,
  9. rhoncus  eu,   leo.  Nam  rutrum..  Integer  consectetuer  tortor  nee nunc.  Nullam
  10. vehicula  mauris.   Sed  accumsan,  mi  eget  ultrices  lobortis, lacus  nulla
  11. voluptat  dolor,.ut  faucibus  tellus  justo  in  lectus.  Morbi bibendum.
  12. Interger  quis  risus.  Morbi  accumsan  lectus  id  dui.
  13. <a  href=»sapien.html»>etiam  purus  sapien</a>,   tempus  ut, laoreet  id,
  14. 14.•tempor  vitae,  diam.   cras  odio  metus,   lobortis  non,  pulvinar in,   accumsan
  15. id,   ante,   aliquam  neque.   pellentesque  eros.   nam  ultricies sem  nee
  16. ante.</FONT>
  17.  <h2><FONT  COLOR=#FFFFFF  SIZE=3   face=Georgia,   Times  New Roman,
  18. Times,   serif>ЕСТЬ  ЛИ  У  ВАС  ПРОБЛЕМЫ  С  B0TMHKAMM?</F0NTx/h2>

Листинг 7.7 — это практически тот же самый сайт, но эта версия оформлена с помощью CSS. Ссылка на CSS — это всего лишь одна строчка в заголовке доку­мента (не показана здесь), а остальная часть разметки может спокойно выпол­нять только структурную работу. Обратите внимание, насколько меньше этот кусок разметки.

Листинг 7.7.  Разметка тела сайта на рисунке 7.8

  1. <h2>3AЧEM  НАМ  НУЖНЫ  БОТИНКИ?</п2>
  2. <p>Lorem  ipsum  dolor  sit  amet,   consectetuer  adipiscing  elit. Sed  commodo
  3. elit  viverra  lectus.   Sed  nisi  dolor,  porttotor  sit  amet, posuere  nee,
  4. iaculis  at,   orci.   <a  href=»erat.html»>  Maecenas  libero  erat</ a>,  mattis  at,
  5. volutpat  in,   fermentum  at,  dui.   Phasellus  ut  erat  nee  lorem vestibulum
  6. lacinia.   Cras  turpis  nulla,   aliquot  vulputate,   vestibulum  at, rhoncus  eu,
  7. leo.  Nam  rutrum.   Integer  consectetuer  tortor  nee  nunc.  Nullam vehicula
  8. mauris.   Sed  accumsan,  mi  eget  ultrices  lobortis;   lacus  nulla voluptat
  9. dolor,  ut  faucibus  tellus  justo  in  lectus.  Morbi  bibendum. Interger  quis
  10. risus.  Morbi  accumsan  lectus  id  dui.  <a href=»sapien.html»>Etiam  purus
  11. sapien</a>,   tempus  ut,   laoreet  id,   tempor  vitae,   diam.   eras odio  metus,
  12. lobortis  non,  pulvinar  in,   accumsan  id,   ante,   aliquam  neque. Pellentesque
  13. eros-.  Nam  ultricies  sem  necante.  </p>
  14. <h2>ECTb  ЛИ  У  ВАС  ПРОБЛЕМЫ  С  БОТИНКАМИ?</п2>

Подчистить разметку просто, а когда вы достаточно попрактикуетесь, ста­нет еще легче. Выполните следующие четыре простых шага:

  1. Удостоверьтесь, что все XHTML-теги написаны строчными буквами. Вы можете сделать установку, чтобы HTML-редактор по умолчанию создавал разметку строчными буквами. Даже если вы не сразу перейдете от HTML к XHTML, вам следует начать писать разметку строчными буквами, что­ бы выработать привычку и чтобы ваши страницы было проще переделы­вать, когда настанет время. В листинге 7.6 теги написаны строчными и прописными буквами вперемешку; это плохо. В листинге 7.7 все теги на­писаны строчными буквами; это хорошо.
  2. Возьмите все атрибуты в кавычки. Большинство атрибутов в листинге 7.6 исчезнут, когда вы удалите из кода разметку внешнего вида; вы избавитесь от атрибутов шрифтов и размера. Другие атрибуты, как, например, атри­бут href и элемент ссылки в листинге 7.6, нуждаются в кавычках, как это сделано в листинге 7.7.
  3. Закройте все элементы. Правильнее всего говорить об этом, используя термины «начало» и «конец», поэтому будем следовать этому правилу.
  4. Уберите всю разметку внешнего вида из вашего HTML-кода. Вы уже знае­те, что вам нужно сделать такую вещь, как удаление презентационных атрибутов, подобных показанным ниже, из тега <body>: <body bgcolor=»#333333″  text=»#FFFFFF»   link=»#6699FF» vlink=»#6699FF»>

В листинге 7.6 есть начальный тег абзаца в строке 3, который должен закрываться в строке 16, но не закрывается. Стыд и срам! Листинг 7.7 за­канчивается аналогичным тегом конца абзаца в строке 13.

Все, что вам надо, — это простой тег <body>, вот такой:

<body>

Вы также знаете о том, что вам необходимо удалить теги шрифтов, такие как в первых четырех строках и последних трех строках листинга 7.6.

Удаление этого балласта — лишь начало избавления вашего сайта от размет­ки внешнего вида. Также вы должны уничтожить HTML-таблицы.

Таблицы стоят слишком дорого

Одна из самых больших затрат трафика и времени — это HTML-таблицы. Старая версия сайта «Ботинки не любовь» (листинг 7.8) использует несколько таблиц дляуправления компоновкой страницы. Некоторые таблицы, как, например, па­нель для фотографий слева, вложены в другие HTML-таблицы. Хотя во времена примитивных браузеров вам и приходилось создавать сайты таким способом, сейчас существует хороший способ, как не использовать эту технику.

Эта глава постоянно напоминает об идее отделения структуры от внешнего вида; использование таблиц не позволяет этим частям разъединиться. Струк­турно HTML-таблицы созданы для данных. Подразумевается, что они должны содержать информацию, например сцисок имен и телефонных номеров служа­щих или перечни продуктов и цен.

Листинг   7.8.    Разметка   для   навигации   на   рис.    7.7

<tr>

<td wigth=16%xdiv align=center><strongxfont size=-l

face=verdana,    arial,   helvetica,    sans-serifxa

href=two.html>Ботинки — rnaBHaH</ax/fontx/strongx/divx/td>

<td wigth=16%xdiv align=centerxstrongxfont  size=-l

face=verdana,   arial,   helvetica,   sans-serif><a

href=index.html>Bama Историж/ax/fontx/strongx/divx/td >

<td width=17%xdiv align=centerxstrongxfont  size=-l

face=verdana,   arial,   helvetica,   sans-serif><a

href=two. 1^т1>Читайте Исторшк/ax/fontxstrongx/divx/td>

<td width=15%xdiv align=center><strongxfont size=-l

face=verdana,   arial,   helvetica,   sans-serif><a

href=опеа.пШ1 >Получите Помощь</ах/?оп1 ><з1гопдх/с11у></1(5>

<td width=18%xdiv align=centerxstrongxfont  size=-l

face=verdana,   arial,   helvetica,   sans-serif><a

href=two.html>HapiAMTe OTBeTbi</ax/fontxstrongx/divx/td>

<td width=18%xdiv align=centerxstrongxfont  size=-l

face=verdana,   arial,   helvetica,   sans-serif><a

href=three. html Поучаствуйте в OopyMe</ax/fontxstrongx/divx/

td>

</tr>

\

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

На рис. 7.8 верхняя навигация была извлечена из таблицы и приобрела дру­гую структуру: HTML-список (листинг 7.9). Если бы вы захотели сменить Вашу историю на Поделитесь своей историей, вам пришлось бы просто изменить этот пункт списка.

Листинг 7.9.  Разметка навигации на рис.  7.8 <div id =»menu»>

<lixa    href=» index.html «>Ботинки —  Главнаж/ах/Н>

<lixa    href=»/story/»>Ваша   историж/ах/П>

<lixa    href=»/read/»>Читайте  истории<ах/1л_>

<lixa    href=»/help/»>Получите  помощь<ах/П>

<lixa    href=» /answers/ «>Найдите  ответы<ах/И>

<lixa    href=» /forum/ «Поучаствуйте  в  форуме<ах/И>

Очищенный и готовый к оформлению сайт

Когда вы закончите очистку сайта, у вас должна получиться страница, которая выглядит, как на рис. 7.9. Это совсем простая страница. Когда вы уберете бал­ласт и создадите простой, хорошо сделанный (X)HTML-документ, вы сможете воспользоваться экономичной и удобной таблицей стилей.

Posted in Экономичный Web-дизайн.