Сэкономьте время и деньги при помощи CSS

ля контроля над оформлением текста используйте CSS — Cascading Style Sheets (каскадные таблицы стилей). Это не только уменьшит расходы на хранение и трафик при эксплуатации сайта, но и упростит поддержку сайта, а также воз­можную и неизбежную его переделку.

CSS обеспечивают общий способ управления компоновкой и дизайном Web-документов. Более подробно мы рассмотрим CSS в главе 7, но основная идея состоит в следующем: уберите всю работу по представлению элементов из XHTML и позвольте таблицам стилей сделать эту работу за вас. Кроме того, уберите теги шрифтов, разделительные GIF-изображения и другие теги и атри­буты представления данных и также дайте таблицам стилей выполнить эту ра­боту за вас.

Определение

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

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

Структура (Structure). Говоря о «структуре» XHTML-страницы, в идеале я имею в виду логическую структуру разметки. Идея состоит в том, чтобы убрать из XHTML-кода все теги и атрибуты, касающиеся представления, и свести разметку к простейшим, наибо­лее логичным элементам. CSS затем добавляет слой представления в разметку, когда страница открывается в браузере. Если сейчас вам пока не все понятно, запомните эти идеи.

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

Если вы разумно создаете ваш сайт — используете внешние таблицы стилей вместо встроенных и хорошую разметку, — ваши страницы будут меньше. Это сэкономит расходы на передачу данных (и необходимую пропускную способ­ность). Вы заметите реальную экономию при создании HTML-разметки; этот процесс протекает заметно быстрее, если использовать CSS для выполнения работы по представлению страницы.

Использование CSS

Из этого раздела вы узнаете, как можно использовать CSS, чтобы выполнить работу в недельный срок и уменьшить нужную пропускную способность. Во-первых, удалите все теги шрифтов. На рис. 5.4 показана HTML-разметка сайта оптовой торговли (см. рис. 5.1) свадебными товарами до его переделки.

Как видно из строк 54 и 63, теги шрифтов присутствуют повсюду на сайте, «съедая» пропускную способность, хотя их присутствие здесь необязательно. Если они имеются на вашем сайте, удалите их и позвольте CSS выполнить офор­мление шрифтов за вас.

Этот сайт содержит достаточно много ненужных HTML-тегов, которые «по­жирают» ресурсы. Переделанный XHTML уменьшит разметку с 28 до 4 Кб, плюс 2 Кб на таблицу стилей. В главе 7 мы вернемся к этому примеру и исполь­зуем тот же самый сайт в качестве упражнения по созданию более компактной и менее дорогой разметки.

В строке 52 на рис. 5.4 вы видите вездесущий разделительный GIF-файл. Начиная с браузера Netscape 1.1 дизайнеры использовали разделительные кар­тинки для того, чтобы добавить края и пробелы на сайты. Разделительные теги появились в NS Navigator 3.0, но и в 1995 году дизайнеры использовали про­зрачные GIF-изображения для скрепления элементов дизайна. Большая про­блема, связанная с этими изображениями, состояла в том, что, в зависимос­ти от конфигурации, Netscape пытался загрузить их каждый раз, когда они присутствовали на странице. Сайт, использовавший прозрачные GIF-файлы, требовал большой пропускной способности.

Рис. 5.4. Исходный код на рис. 5.1 выявляет сайт, переполненный громоздкими, «съедающими» время итрафиктегами шрифтов и разделительных GIF-изображений .Более экономичный подход — переложить работу по дизайну на Cascading Style Sheets

На практике пропускная способность до сих пор зря расходуется из-за при­сутствия в Сети миллиардов этих пустых маленьких картинок и из-за написа­ния ссылающейся на них разметки. Вот совет по экономии: удалите их.

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

Экономия с CSS: пример из жизни

Когда я начала участвовать в проекте по созданию цифровой библиотеки для Нью-Йоркской публичной библиотеки, мне необходимо было переделать один из наших маленьких сайтов (рис. 5.5). У нас не было денег на выполнение этой работы. Кроме того, не было времени ни на создание нового логотипа, ни на создание новых изображений. Мы решили сохранить существующие изображе­ния и логотип и подчистить текст сайта при помощи таблицы стилей.

Рис. 5.5. Так выглядел сайт цифровой библиотеки до двухдневной очистки

Распорядок двух дней производства выглядел следующим образом:

День первый:

  • изменение существующей таблицы стилей (2 часа);
  • подчистка старой, громоздкой HTML-разметки и замена ее на элегант­ную, структурную XHTML-разметку (4 часа).

День второй:

  • тестирование на различных браузерах и операционных системах. Про­смотр того, как сайт выглядит в различных браузерах и операционных системах. Как вы увидите, при использовании CSS тестирование проходит быстрее и эффективнее (4 часа);
  • запуск.

В результате получился более четкий, оформленный в одном стиле сайт (рис. 5.6). Для ссылок и заголовка мы использовали цвет, который был в пре­дыдущей версии сайта. Мы увеличили интерлиньяж и отступы основного тек­ста, чтобы сделать текст более читабельным. Работы заняла около 10 часов и была распределена между двумя людьми, которые выполнили ее в свободное от основной работы время. Таблица стилей основывалась на таблице предыду­щего проекта, поэтому создание прошло быстро.

Рис. 5.6. А это тот же самый сайт цифровой библиотеки после простой двухдневной очистки, основанной на CSS

Как уже отмечалось, мы изменяли дизайн сайта временно; через несколько месяцев мы будем работать с дизайнером, чтобы создать новый логотип и со­вершенно новый внешний вид. Если бы при выполнении этой временной ра­боты мы не использовали бы CSS, я бы сочла это задание достаточно длитель­ным по времени. Но теперь, когда мы подчистили XHTML-разметку и сделали более дружелюбный, читабельный и удобный дизайн на основе CSS, мы лучше подготовлены к созданию окончательной, улучшенной версии дизайна. Ис­пользование CSS и очистка разметки не только сэкономили наши время и день­ги при создании этого временного, переходного дизайна; это также сэкономи­ло время и деньги для создания окончательной версии, благодаря тому что самые большие его проблемы были решены в домашних условиях при неболь­шой затрате времени и денег.

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