GetInfo.Ru – Компьютерная библиотека
Последние поступления
Как выбрать систему управления базы данных
Базы данных03/09/14
Этапы загрузки UNIX (в схеме)
Unix27/03/12
Gatewall Antispam: тотальный контроль электронной почты
Спам21/04/11
Мастер-класс: создаем Интернет-магазин (Часть 1)
Обзоры ПО20/04/11
CorelDRAW Graphics Suite X5: Что нового?
Обзоры ПО20/07/10
Добавить статью
Самые читаемые материалы
Краткий обзор бесплатных "движков" (CMS) для сайта(26695)
Бизнес-планирование для Интернет-проекта(20550)
Обзор решений для тестирования сайтов(18533)
Составление сметы на сайт(17662)
Конструкторы сайтов: дешево и сердито(10907)
Всего статей: 793Всего авторов: 364Подразделов: 47Добавлено за сутки: 0
Статьи  СТАТЬИ Форум  ФОРУМ Рейтинг  РЕЙТИНГ Поиск  ПОИСК Контакты  КОНТАКТЫ
» Главная » Управление проектами » Хамелеоны в паутине

Хамелеоны в паутине


Артемий Ломов
artemy@lomov.ru
http://www.lomov.ru/

Почти любой из бесчисленного множества web-сайтов обладает в известной мере постоянным визуальным обликом. То есть, конечно, различные версии браузеров так или иначе вносят свои коррективы во внешний вид отображаемых web-страниц, но подобные видоизменения носят спонтанный, слабо управляемый характер, являясь для любого здравомыслящего web-разработчика крайне нежелательным, отрицательным фактором и лишней головной болью.

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

Как правило, каждая последующая версия сайта при описанном подходе не имеет с предшествующим вариантом ровным счетом ничего общего. Совершенно новый дизайн, более продвинутая технологическая база, свежие текстовки, коренным образом переработанная структура разделов и, чего греха таить, уйма вбуханных средств… Обновленный проект, безусловно, будет привлекать к себе повышенное внимание посетителей, но только в первое время. Через месячишко-другой буря эмоций утихнет, шквал восторгов бесследно растворится в глубокой небесной синеве, и до следующего глобального редизайна на море будет полный штиль. Серые будни. Завтра — то же, что вчера.

Коренные перестройки всего сайта, конечно же, время от времени необходимы, но разнообразить впечатления посетителей можно и менее радикальными способами, которые, впрочем, порой бывают даже более оригинальными и действенными.

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

Администраторы других ресурсов поступают иначе. Только слепой, должно быть, не замечает, как преображаются перед новогодними торжествами многие крупные web-сайты. Привычные страницы, не изменяя своего облика радикальным образом, приобретают, вместе с тем, более нарядный, праздничный вид. А ведь эту идею можно развить — например, привнося в оформление страниц весенние, летние или осенние нотки в зависимости от сезона. Тогда посетителям уж точно не будет скучно.

Лето разряжается в осень
Предположим, что нам требуется создать некий в достаточной степени полнофункциональный сайт, каждая страница которого содержала бы «шапку» с графическим визуалом, панель навигации и область основного текста с разнородным форматированием оного, включающим в себя заголовки первого и второго уровней, абзацы и гиперссылки.

Сайт должен быть обладать «изюминкой», а именно, уметь менять «одежки по сезону». Скажем, было бы неплохо, если летом цветовая гамма всех страниц была бы решена в жизнерадостных зеленоватых тонах, а осенью — в пламенных оранжево-желтых.

Самое важное техническое требование: при любом количестве web-страниц в составе проекта на «перекраску» сайта администратору ресурса дается ровно одна минута. О том, чтобы править код HTML-документов, даже речи быть не может.

Как можно реализовать такое? Попробую вас убедить — довольно просто.

Прежде всего, скажем «нет» табличной верстке макета. Давайте создадим правильный во всех отношениях сайт, а именно:

  • соответствующий всем необходимым стандартам Консорциума W3C;
  • в полной мере реализующий принцип разделения содержания и представления

Взгляните, каким неожиданно простым может быть HTML-код страницы такого сайта при использовании модели контейнеров CSS2 в качестве базовой технологии:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Портал</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
<div id="logo"><img id="logotype" src="images/logo.gif" alt="Портал"></div>
<div id="banner"><!-- Место для баннера --></div>
<div id="navbar"> </div>
<div id="navlinks"><!-- Сюда помещаются ссылки блока навигации --></div>
<div id="main"><!-- Здесь размещается полноценное текстовое содержание страницы с заголовками, абзацами и ссылками --></div>
</body>

</html>

Как можно видеть, информации о каком бы то ни было визуальном форматировании документа сам код web-страницы нашего гипотетического портала не содержит. Голая логическая схема, идеальное совершенство. А самое сложное, конечно же, — общий для всех страниц файл стилей, тот самый style.css, провозглашенный в элементе <link>. Вот его возможный код для «летнего» варианта дизайна:

body {margin: 0px; font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; font-size: 75%; color: #000; background-color: #fff; background-image: url(images/bg.gif); background-position: top left; background-repeat: repeat-x; background-attachment: scroll}
a {text-decoration: none}
a:link {color: #093}
a:visited {color: #063}
a:active {color: #000}
a:hover {text-decoration: underline}
a.nav, a.nav:visited, a.nav:hover {color: #fff}
a.nav:hover {text-decoration: none}
div {position: absolute; margin: 0px; padding: 0px; border-style: none}
#logo {top: 0px; left: 0px; width: 100px; height: 100px; background-color: #093}
#navbar {top: 103px; left: 0px; width: 100px; height: 200px; background-color: #0c6}
#navlinks {top: 113px; left: 10px; width: 80px; height: 180px; font-family: Arial Narrow; font-size: 12px; text-align: center; overflow: hidden}
#main {top: 103px; left: 100px; padding: 20px}
#banner {top: 20px; right: 20px; width: 468px; height: 60px; background-color: #fff}
#logotype {width: 100px; height: 100px; border-style: none}
h1 {font-size: 150%; color: #0c6}
h2 {font-size: 120%; color: #093}
p {text-align: justify; text-indent: 1.5em; margin: 0pt}

Позволю себе несколько комментариев. Все функциональные области сайта — это позиционированные в абсолютных координатах блоки.

Обратите внимание, что навигационная панель являет собой конгломерат двух контейнеров, один из которых (navlinks), чуть меньших размеров, наложен на другой (navbar). Подобная хитрость позволяет не пользоваться свойством padding, которое неоднозначно трактуется различными версиями браузеров. Установив значение данного свойства равным нулю для обоих контейнеров, мы, тем не менее, сохраняем поля между навигационными ссылками и границами видимой области навигации. При этом как в IE5 (я напомню, этот браузер отнимает значение padding от width), так и в IE6 (а он, в свою очередь, напротив, прибавляет padding к width, что правильно с точки зрения стандарта) ширина навигационного блока нашего сайта будет оставаться неизменной.

К помощи свойства padding мы прибегаем только в блоке main, отвечающем за область основного текста. Дело в том, что размеры соответствующего контейнера жестко не заданы — они определяются количеством текста, размещенного в блоке, а также габаритами окна браузера. В результате необходимость хитрить отпадает.

Легким движением руки
Что же нужно для «осенней» версии сайта? Во-первых, конечно, требуется подготовить отдельный комплект файлов графических изображений. В нашем примере таких файла два — logo.gif, хранящий в себе логотип сайта, и bg.gif, применяемый в качестве фонового изображения области «шапки».

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

a:link {color: #f60}
a:visited {color: #960}
#logo {top: 0px; left: 0px; width: 100px; height: 100px; background-color: #f60}
#navbar {top: 103px; left: 0px; width: 100px; height: 200px; background-color: #fc0}
h1 {font-size: 150%; color: #fc0}
h2 {font-size: 120%; color: #f60}

Теперь — о том, как такой чудо-сайт поддерживать. На сервере должны, помимо HTML-страниц, присутствовать два файла стилей и две директории с графическими изображениями. В соответствии с листингами, приведенными выше, для любого текущего варианта дизайна сайта файл стилей должен называться style.css, а каталог с изображениями — images.

Не используемые до поры до времени альтернативные файл описания стилей и каталог с картинками можно назвать соответственно style1.css и images1.

Как осуществляется смена дизайна? Вот, что называется, пошаговая инструкция:

  • Переименовываем директорию images в images2
  • Изменяем название файла style.css на style2.css
  • Переименовываем файл style1.css в style.css
  • Изменяем имя каталога images1 на images

Вернуться к былому — проще простого. Инструкция та же, но цифры 1 и 2 в ней надо поменять местами.

Сколько времени способна отнять у вечно занятого администратора непосильная работа по смене «одежки» сайта по случаю внезапно подкравшейся осени? Даже если все делать «ручками» (а администраторы это любят), ни один посетитель сайта и глазом моргнуть не успеет. Мой «рекорд» при использовании FTP-клиента, встроенного в файловый менеджер Far, составил 18 секунд. В отведенный по условию задачи минутный срок я смог бы уложиться трижды. Ну а особо ленивые (это относится, в первую очередь, к счастливым обладателям выделенных web-серверов) могут написать сценарии переименования файлов и директорий «туда» и «обратно» на shell. По сравнению с прытью подобных скриптов даже вспышка молнии покажется вечностью!

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

Жизнь в движении
Наш почти примитивный примерчик даже в нынешнем своем состоянии оставляет вполне приличный простор для дальнейшего полета творческой мысли. Ведь все отличия между двумя рассмотренными выше файлами описания стилей («летним» и «осенним») заключаются лишь в значениях свойств color и background-color для ряда элементов. Но наши листы стилей содержат массу другой информации, которую вполне можно попробовать так или иначе видоизменять — это, например, размеры блоков и взаимное расположение функциональных областей страницы, гарнитура и кегль шрифта, оформление гиперссылок в составе основного содержания документа и в области навигации, вид форматирования текста… Не трогая HTML-кода web-страниц как таковых, а лишь модифицируя файлы листов стилей (ну и, возможно, дополняя базу используемой графики новыми изображениями), можно варьировать внешний вид сайта в весьма и весьма широких пределах, порой доводя его облик фактически до неузнаваемости.

При этом совершенно разнообразные версии дизайна можно активизировать в произвольном порядке, буквально по настроению, да хоть каждый день.


Статья опубликована в журнале CHIP, № 4, 2004

 
08.09.2004
Версия для печати Версия для печати Запомнить ссылку Запомнить ссылку
Ваша оценка:  1   2   3   4   5     

 О проектеПерепечаткаАвторамПартнерыО нас пишут
Наверх
©2003—2007. GETINFO.RU. ВСЕ ПРАВА ЗАЩИЩЕНЫ.