Урок по разделению структуры и внешнего вида

В этом разделе рисунки и листинги иллюстрируют значимость разделения структуры документа и его внешнего вида. Рис. 7.1 и листинг 7.1 показывают внешний вид и HTML-код сайта, созданного устаревшим способом, а рис. 7.2 и листинг 7.2 — внешний вид и HTML-код сайта, созданного новым способом. Обратите внимание, насколько кратка разметка в листинге 7.2 по сравнению с листингом 7.1. Листинг 7.2 краткий и скромный, потому что в нем нет размет­ки внешнего вида.

Рис. 7.1. Обратите внимание на то, что сайт был создан с использованием разметки внешнего вида. Это плохо. HTML-код выполняет работу по представлению страницы в строке 7 (выделенной полужирным), где тег bod y содержит атрибут цвета. Кроме того, HTML-код выполняет презентационную работу в строке 8 (также выделенной полужирным); внутри тега hi вы заметите длинный тег шрифта, который задает цвет, размер и вид шрифта. Подобные атрибуты включены в тег абзаца. HTML-код данного сайта слишком трудный и неэкономный

serif»>Пример CSS и (X)HTML 1 — плохо

</font>    

<р> <font  color -ii#FFFFFF»   size-«-2»   face= «Verdana,   Arial, <р> <font  color

Helvetica,

sans-serif»>  Это  небольшой  Web-сайт, который я сделала специально для вас. Обратите внимание на то, что заголовок  и абзацы оформлены  при помощи тегов шрифта. Если бы я захотела добавить еще заголовки и абзацы, мне бы пришлось каждый заключать в тег шрифта. Если бы  мне было надо добавить новые страницы, пришлось бы дать каждой из них цвет body  #333333 .</fontx/p^ <pxfont  color=»#FFFFFF»   size=»-2″   face=»Verdana,   Arial, Helvetica,

sans-serif»>Если бы потом мне захотелось изменить дизайн этого сайта, мне бы надо было менять оформление текста и фоновый цвет, и эти  изменения пришлось бы делать на каждой странице.  Это невероятные потери времени! </font></р>

</body>

</html>

Рис. 7.2. Это практически тот же самый сайт, что и на рис. 7.1, только выглядит он немного лучше, а все потому, что HTML-код выполнял только структурную работу, а не презентационную. Это хороший пример. Выполнение презентационной работы было переложено с HTML-кода на CSS-документ. Ссылка, которая делает это возможным, выделена полужирным в листинге7.2. Переделанный сайт выглядит лучше, потому что таблица стилей задает абзацам поля и произвольный интерлиньяж

Листинг  7.2.   Разметка сайта на рис.   7.2

<!DOCTYPE ШМЬ 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тТуре»   content=»text/html;   charset=iso-

8859-1″   />

<title>  Пример  CSS  и    (X)HTML   II</title>

<link  rel=»stylesheet»  media=»screen»   type=»text/ess»

href=»styles/intro.ess»   />

</head>

<body>

<п1>Пример  CSS  и   (X)HTML  2   —  Xopomo</hl>

<р>Это небольшой Web-сайт, который я сделала специально для вас. Обратите внимание на то, что здесь нет ни тегов шрифтов, ни ненужных  нагромождений презентационного HTML. Однако внешне сайт выглядит так же, как и в примере 1. Разница состоит в том, что цвет и  оформление текста заданы в CSS-файле, ссылка на который расположена в строке 5 данного  документа.</р>

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

</body>

</html>

В листинге 7.3 вы видите таблицу стилей, которая выполняет работу по со­зданию внешнего вида для рис. 7.2. Одна таблица стилей может быть использо­вана для оформления целого сайта. Если вам необходимо внести изменения во внешний вид сайта, вы редактируете всего одну таблицу стилей, и внешний вид всего сайта, соответственно, изменяется.

Листинг   7.3.    Таблица   стилей  для   сайта  на   рис.    7.2 body    {

  1. color    :    #fffff;
  2. background-color   :    #660066
  3. margin-left:   70px;
  4. margin-right:   70px;}
  5. p   {
  6. font:    llpx/18px  verdana,   geneva,   arial,   sans-serif;}
  7. hi   {
  8.  .font:    18px/2 4px  Georgia,   Times  New  Roman,   Times,    serif;}

Давайте посмотрим, почему такой подход делает оформление сайта гораз­до более эффективным и менее дорогим для производства:

  • вместо того чтобы заключать каждый элемент абзацев страницы в длин­ный, громоздкий тег шрифта, можно воспользоваться правилом в строке 7 таблицы стилей (см. листинг 7.3), которое сообщает браузеру о том, что ваши абзацы должны быть оформлены шрифтом Verdana размера 11 пт. (Если у пользователя нет шрифта Verdana, использоваться будет Geneva или Arial; если и этих шрифтов тоже нет, будет использован альтернатив­ный шрифт без засечек, имеющийся на компьютере пользователя);
  • все страницы сайта можно связать с одной таблицей стилей. Предполо­жим, что сайт состоит из 40 HTML-страниц. Пользователь загружает эту таблицу стилей только один раз; затем браузер помещает эту таблицу сти­лей в кэш. Когда пользователь будет загружать оставшиеся 39 HTML-стра­ниц сайта, таблица стилей к тому времени будет уже загружена. Вы (и ваши пользователи) сэкономите на потреблении трафика;
  • если вам надо внести изменения во внешний вид сайта, вы просто меняе­те таблицу стилей. Предположим, что вам звонит клиент и сообщает, что абзацы, оформленные шрифтом Verdana, его раздражают; он хочет, что­бы абзацы были сделаны шрифтом Times New Roman или Georgia. При работе с дизайном, основанным на стандартах, вы редактируете строку 9 в таблице стилей — и требуемый внешний вид готов. С устаревшими тега­ми шрифтов подобные изменения заняли бы часы работы, в зависимости от количества страниц на сайте и разнообразия использованных начер­таний шрифтов.

Такое использование таблицы стилей — это только начало; здесь мы создали всего три правила — для фона, заголовка и абзаца. В один CSS-документ вы мо­жете добавлять различные вариации шрифтов и других элементов. Как сделать разнообразнее и полнее вашу таблицу стилей, вы узнаете в конце этой главы. Вы увидите, что здесь нет никаких пределов, что CSS дает вам возможность не только создать более легкий сайт, но и лучше управлять макетом страницы -так, как вы никогда и не надеялись бы сделать при помощи презентационного HTML. Самое важное — вы увидите, как значительно снизятся расходы на про­изводство, когда вы будете использовать CSS для контроля над внешним видом сайта.

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