Реферат: Сложный комплекс инженерно-ди­зайнерских решений. Процесс создания такого произведения и называется web-дизайном. Web-дизайн это творчество, причем творчество ярко выраженное

Сайтостроение, наука или искусство?


1. Что такое web-дизайн? 2

1.1. Зачем это нужно? 2

2. Необходимый инструментарий 3

3. Основные «постулаты» web-дизайна 4

4. Технологии web-дизайна 8

4.1. Логическая и физическая структура сайта 8

4.2. Заглавная страница 9

4.3. Динамическая и статическая компоновка сайта 10

5. Элементы web-страницы 11

6. С чего начать? 14

7. Десять советов web-дизайнеру 17


Сайтостроение, наука или искусство?

Очевидно, что в процессе создания домашней странички, коммерческого или некоммерческого сайта используется один и тот же набор технологий, одинако­вые приемы и технические решения. Более того, во всех этих случаях наиболь­ший объем работ по подготовке проекта ложится на плечи web-мастера, или, как еще называют представителей данной профессии, web-дизайнера - специа­листа, разрабатывающего все содержимое будущего ресурса Интернета, что на­зывается, «от и до».
^ 1. Что такое web-дизайн?
Любой ресурс, опубликованный во Всемирной сети, от глобального информа­ционного портала с десятками тысяч посетителей в день до скромной домашней странички, куда заходят всего два человека в месяц, включая ее автора, это пре­жде всего художественное произведение, сложный комплекс инженерно-ди­зайнерских решений. Процесс создания такого произведения и называется web-дизайном.

^ Web-дизайн — это творчество, причем творчество ярко выраженное. Именно в сфере web-дизайна вы можете полностью проявить все свои способности, ведь здесь цензором результатов вашего труда являетесь вы сами и посетители вашей странички. Никто не ограничивает вас ни в объеме, ни в содержании, ни в ком­поновке разрабатываемого вами ресурса, никто не загоняет вас в какие-либо же­сткие рамки. Творите, и рано или поздно созданный вами проект найдет заслу­женное признание многомиллионной аудитории пользователей Интернета.
^ 1.1. Зачем это нужно?
Причины, по которым люди решают подготовить и опубликовать во Всемирной сети собственный web-pecypc, могут быть совершенно различными.

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

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

Коммерческие Интернет-проекты организуются с расчетом на получение финансовой прибыли, причем эта прибыль может быть как прямой, так и косвенной. Под косвенной прибылью подразумеваются те неоспоримые преимущества, ко­торые дает грамотно подготовленный web-сайт его владельцам: по сравнению со стоимостью традиционной рекламы, реклама в Интернете практически бесплат­на, что с учетом огромной аудитории Всемирной сети является огромным плю­сом. Более того, компания-владелец web-pecypca получает в свое распоряжение именно целевую аудиторию, поскольку ее сайт будут посещать лишь те поль­зователи, которые нашли его по набору ключевых слов, введенных в форму запроса поисковых машин или в соответствующем тематическом разделе инте­рактивных каталогов. Web-страница является лучшим и наиболее выгодным решением при поиске как отечественных, так и зарубежных партнеров и потен­циальных клиентов. Никакой иной способ рекламы не даст вам такой приток за­интересованных лиц и заказчиков, как хорошо продуманный и правильно раз­работанный web-сайт.

Получение прямой прибыли подразумевает создание проекта, изначально рас­считанного на привлечение финансовых средств непосредственно из Интернета. Существуют компании, живущие только за счет созданных силами их сотрудни­ков web-ресурсов. Это могут быть поисковые машины или информационные порталы, продающие на своих страницах рекламное пространство, Интернет-магазины, система интерактивных аукцио­нов или виртуальное рекламное агентство. Возможностей зарабатывать деньги в Интернете множество. Но разработка коммерческого проекта, безус­ловно, требует большого времени и продолжительного, кропотливого труда.
^ 2. Необходимый инструментарий
Для того чтобы web-мастер чувствовал себя максимально комфортно при разра­ботке нового проекта, помимо рабочего места и персонального компьютера ему необходим определенный набор программного обеспечения, базовый инстру­ментарий, без которого создателю web-сайта просто не обойтись.

Начинающему web-мастеру порой бывает трудно сориентироваться не только во всем многооб­разии наименований существующих программ, но даже в списке минимально необходимых для работы приложений. Ниже предложен примерный список средств, которыми вы должны располагать перед тем, как возьметесь за разработку своего первого Ин­тернет-проекта:

среда разработчика документов HTML - так называемый WYSIWYG-peдактор.

редактор векторной графики, рекомендуется CorelDraw Версии 9 или выше.

редактор растровой графики, рекомендуется Adobe Photoshop версии 5.0 или выше.

броузер Microsoft Internet Explorer версии 5.0.

броузер Netscape Navigator версии 4.01 или выше.

перекодировщик кириллицы, рекомендуются программы ConvHTML и SNK DECode.

оптимизатор HTML, рекомендуется UtilMind HTML Compressor версии 1.5 или выше.

оптимизатор растровых изображений GIF, рекомендуется программа Gif-Clean 32.

оптимизатор растровых изображений JPEG, рекомендуется программа JPEG Cleaner версии 2.1 или выше.

pедактор GIF-анимации, рекомендуется программа Ulead GifAnimator.

FTP-клиент, рекомендуется программа CuteFTP.
^ 3. Основные «постулаты» web-дизайна
Известно, что любая технология, любой творческий процесс в какой бы то ни было области подчиняются определенным правилам и законам, несоблюдение которых неизбежно влечет за собой множество неприятных последствий. Web-сайт как комплекс инженерно-художественных решений также подразумевает наличие целого набора определенных «правил хорошего тона», которых следу­ет придерживаться, чтобы ваш ресурс не выглядел непрофессионально и не вы­зывал нареканий у посетителей.

^ 7 базовых постулатов согласно их объективному приоритету, то есть в порядке убывания их важности.

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

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

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

1) В современном Интернете принято молчаливое соглашение о том, что профессиональный сайт должен корректно отображаться при экранном разрешении 640x480 точек с цветовой палитрой в 256 цветов.

Примечание При отображении html-документа, рассчитанного на просмотр с экран­ным разрешением 800x600 точек, на компьютере, настроенном на раз­решение 640x480 точек, в нижней части главного окна броузера появ­ляется горизонтальная полоса прокрутки, что значительно затрудняет изучение документа и вызывает множество нареканий у пользователей.

Совет Для того чтобы web-страница правильно отображалась при использовании экранной палитры в 256 цветов, в случае включения в состав документа графических элементов старайтесь представлять максимально возможное количество графики в формате GIF и лишь самые необходи­мые изображения - в формате JPEG.

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

Для этого, загрузив страницу в броузер, измените экранное разрешение и используемую цветовую палитру в настройках Windows. Затем щелкните пра­вой кнопкой мыши в любом свободном от ярлыков участке Рабочего стола и, выбрав в появившемся меню пункт Свойства, перейдите на вкладку Настройка диалогового окна Свойства: Экран. Установив соответствующие значения в разде­лах Цветовая палитра и Область экрана, щелкните мышью на кнопке Применить, по­сле чего согласитесь с изменением параметров экранных настроек без переза­грузки Windows.

Совет. Рекомендуется проверить корректность отображения содержащейся в html-документе информации при изменении экранных настроек в бро­узерах как Microsoft Internet Explorer, так и Netscape Navigator.

2) Web-страница должна идентично отображаться в Microsoft internet Explorer и Netscape Navigator, причем весьма желательно - в послед­ней и предпоследней версиях данных программ.

Правило обусловлено тем, что вам неизвестно программное обеспе­чение, которое используется вашими потенциальными посетителями для просмотра web-страниц. Речь идет о броузерах. Как уже говорилось, согласно статистике самыми популярными броузерами среди пользователей Интернета являются Microsoft Internet Explorer и Netscape Navigator различных версий, все остальные распространены в значительно меньшей степени. Как известно, Microsoft Internet Explorer и Netscape Navigator используют различные алго­ритмы обработки HTML-кода, из-за чего один и тот же элемент в этих двух бро­узерах может отображаться совершенно по-разному. Среди начинающих web-дизайнеров бытует мнение, будто заставить страницу выглядеть одинаковым образом в упомянутых программах решительно невозможно. Однако это совер­шенно не так: все различия между Netscape и Explorer прекрасно поддаются ко­личественной оценке и анализу, более того, существует множество алгоритмов, применение которых позволяет свести неадекватность отображения страниц к минимуму.

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

^ 3) Все страницы web-сайта, а также ee интегрированные в них графиче­ские и интерактивные элементы должны быть минимальными по объему.

Большинство пользователей используют для выхо­да в Интернет dial-up соединение, иными словами, работают на «медленных» линиях, подключаясь к провайдерскому пулу при помощи модема. В этом случае скорость передачи данных (как правило, удручающе низкая) иг­рает для них решающую роль: вряд ли кому-то доставит удовольствие дожи­даться загрузки одного html-документа десятки минут.

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

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

У пользователя не должно возникать затруднений при переходе от одного раздела вашего ресурса к другому, независимо от модели его компьютера и типа установленного программного обеспечения. Он должен от­четливо представлять себе логическую структуру вашего проекта и, по возмож­ности, иметь доступ ко всем его компонентам в любой момент времени. Расположение навигационных элементов следует выби­рать, исходя из максимального удобства для пользователя. Если они раз­мещены в верхней части страницы и пропадают из поля зрения после скроллинга (прокрутки экрана вниз), не забудьте продублировать их в нижней части документа. Графические ссылки и активные элементы следует повторить в тестовой форме в расчете на пользователей, в броузерах ко­торых отключено отображение графики или отсутствует поддержка Java.

5) Старайтесь выдержать весь проект в одном дизайнерском стиле, оформ­ляйте различные его разделы таким образом, чтобы общее художест­венное решение было схожим для всего сайта.

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

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

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

7) Используйте только корректные цветовые схемы и не применяйте при оформлении документов более трех различных цветов.

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

С точки зрения человеческой психологии сочетание цветов может в значитель­ной степени влиять на восприятие зрителем представленной на картинке инфор­мации. Именно поэтому при подборе цветового сочетания, например текста с фоном, рекомендуется исходить из соображений собственного здравого смысла: текст должен без труда читаться, при этом читатель не должен напрягать зре­ние, его глаза не должны уставать. Далее приведен перечень цветовых сочета­ний рисованного объекта или текста с фоном в порядке ухудшения зрительного восприятия:

синее на белом;

черное на желтом;

зеленое на белом;

черное на белом

зеленое на красном

красное на желтом

красное на белом

оранжевое на черном

черное на пурпурном

оранжевое на белом

красное на зеленом

Корректность сочетания друг с другом всех остальных цветов и оттенков прове­ряется с помощью одного простого правила: переведите ваше изображение в формат «grayscale» (256 оттенков серого) и посмотрите, читается ли в таком виде ваш текст, контрастно ли выглядят нарисованные элементы. Если нет - принятое вами цветовое решение лучше пересмотреть. В любом случае для тек­ста рекомендуется выбирать традиционный, привычный глазу черный цвет, в качестве фона лучше всего использовать тусклую, едва различимую заливку произвольного оттенка. Однако наиболее «правильным», на мой взгляд, реше­нием всегда был и остается «классический» вариант: черным по белому.
^ 4. Технологии web-дизайна
В этом разделе нам предстоит беседа о применяемых в современном web-дизай­не технологических и художественных решениях. Итак, начнем мы, пожалуй, с ключевых понятий, которые на сухом дизайнерском языке носят название
^ 4.1. Логическая и физическая структура сайта
Каждый ресурс Интернета, от любительской домашней странички до большого информационного портала, содержит несколько тематических рубрик, соеди­ненных между собой гиперсвязями. Как правило, ссылки на все разделы сайта с краткими анонсами их содержимого приводится на первой, так называемой стартовой странице, которой присваивается имя index.htm (.html). Если тема­тические рубрики содержат собственные подразделы, каждая из них также име­ет свою стартовую страницу, называющуюся index.html.

Примечание Такое имя файла рекомендуется присваивать всем стартовым доку­ментам сайта, поскольку в противном случае при обращении к како­му-либо разделу посредством сокращенного URL без указания назва­ния стартовой страницы (например, http://www.mysite.ru/photos/ вместо http://www.mysite.ru/photos/startpage.html) броузер отобразит не саму web-страницу, а перечень хранящихся в данной папке файлов.

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

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

Совет. Рекомендуется размещать все графические изображений, являющиеся элементами проекта, в отдельной попке с названием «Images», расположенной в корневой директории сайта. Такой подход позволит обновлять хранящиеся в других тематических разделах документы HTML без пере­носа графики, использовать одни и те же графические файлы во всех разделах сайта и при необходимости удалять целые директории.

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

1) Назначайте имена директорий, имена и расширения документов HTML и графических файлов с использованием символов только латинского алфавита и только в строчном регистре. Старайтесь, чтобы имена соз­данных вами файлов и директорий не превышали по длине восьми сим­волов.

2) При присвоении имен файлов документам HTML старайтесь следить за тем, чтобы эти имена были «смысловыми»: впоследствии вы легко можете забыть содержимое и назначение какой-либо web-страницы, если име­на файлов будут выглядеть, например, как 1 .htm, 2.htm, 3.htm и т. д.

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

^ Имя файла

Директория

Описание

Дата посл. измен.

index.html

/vounb

Стартовая страница сайта http://www.vounb.iatp.ru

1.10.2004

user.htm

/vounb/user

Раздел «Читателю»

5.10.2004

instructions.htm

user/instructions.htm

Правила пользования

5.11.2004

library.jpg

/vounb/img

Фотография библиотеки

6.11.2004

Из всего сказанного становится очевидным, что физическая структура сайта скрыта от посетителей вашего ресурса: они могут наблюдать только логическую структуру, причем именно так, как она представлена при помощи элементов на­вигации. Отсюда следует вполне логический вывод: строение системы навига­ции должно если не полностью повторять, то хотя бы максимально соответство­вать разработанной вами логической структуре сайта.
^ 4.2. Заглавная страница
Один из критериев, руководствуясь которым можно разделить различные web-сайты на две основные категории, — это наличие заглавной страницы (splash) или отсутствие таковой.

Заглавная страница представляет собой html-документ, который не включает в себя какую-либо содержательную информацию и элементы навигации. Файлу заглавной страницы присваивается имя index.html, при этом стартовая страни­ца называется иначе и вызывается посредством организации гиперссылки с за­главной страницы, загружающейся при обращении к сайту первой. Заглавная страница содержит, как правило, логотип компании-владельца данного ресур­са, счетчик посещений и предложение выбора кодировки кириллицы, либо вы­бора между английской и русской версиями сайта.

При обращении к сайтам, не оснащенным заглавной страницей, первой отобра­жается стартовый документ, включающий какое-либо информационное напол­нение, элементы навигации и иногда анонсы составляющих данный ресурс тематических рубрик. Использовать или не использовать заглавную страницу при создании собствен­ного проекта в сети Интернет - дело вкуса каждого web-мастера. Дать какие-либо исчерпывающие рекомендации на этот счет трудно, поскольку окончатель­ное решение зависит прежде всего от ваших художественных предпочтений и иногда — от желания заказчика, оплачивающего вашу работу.
^ 4.3. Динамическая и статическая компоновка сайта
Современные видеокарты поддерживают несколько произвольно устанавливае­мых видеорежимов, характеризующихся экранным разрешением и количест­вом цветов, используемых при отображении информации на экране компьютера. С помощью встроенных функций операционной системы пользователь может установить несколько стандартных значений экранного разрешения, на­пример 640x480, 800x600, 1024x768, 1152x864, 1280x1024 или 1600x1200 точек. Разумеется, при открытии в одном и том же броузере какой-либо web-страницы она может отображаться не одинаковым образом в зависимости от используемо­го посетителем сайта экранного разрешения.

^ Статическая компоновка страницы

Для того чтобы избежать «съезжания» элементов html-документа друг относи­тельно друга и, как следствие, деформации web-страницы в целом при измене­нии параметров экрана, применяется достаточно простой и действенный прием: все компоненты web-страницы заключаются в соответствующие ячейки невиди­мой таблицы, при этом каждому объекту назначается одно, строго определенное положение. Данной таблице можно назначить строго определенную ширину в пикселах, например, 640 точек, после чего жестко позиционировать ее по центру экрана или «при­жать» к левому его краю. Такой вариант компоновки сайта можно назвать ста­тическим, поскольку ширина таблицы не меняется в зависимости от экранного разрешения. Разумеется, при изменении параметров экрана не происходит ни малейшего смещения элементов дизайна страницы.

Достоинства. Простота алгоритма верстки документа. Оптимизировав страни­цу для отображения с экранным разрешением 640x480 точек, вы можете быть уверены, что при изменении пользовательских экранных настроек элементы дизайна не «поплывут». Кроме того, данный вариант компоновки сайта в боль­шинстве случаев (при соблюдении ряда дополнительных условий) позволяет добиться идентичности отображения html-документа в броузерах Microsoft Internet Explorer и Netscape Navigator.

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

^ Динамическая компоновка страницы

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

Достоинства. Документ растягивается по всей ширине экрана, не остается не­использованных пустых полей.

Недостатки. Сложность верстки и отладки страницы, весьма часто проявляет­ся неадекватность отображения таких документов в броузерах Microsoft Inter­net Explorer и Netscape Navigator.

Используемые в командах HTML значения пикселов (условных точек) подразумевают физические размеры точки экрана пользователя и зави­сят от типа его монитора.
^ 5. Элементы web-страницы
Любая web-страница содержит определенный набор стандартных элементов, являющихся обязательными компонентами каждого ресурса Интернета. Безус­ловно, ассортимент и количество подобных объектов могут варьироваться в за­висимости от тематической направленности сайта, объема опубликованных на нем материалов, а также от целей и задач, которые ставит перед собой создатель данного ресурса. Компоновка таких элементов, проектирование их взаимного расположения и составляет одну из главных задач web-мастера.

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

Иногда с заголовком совмещают меню выбора кодировки ки­риллицы и кнопки для перехода с русскоязычной на англоязычную версию сай­та, если данный web-pecypc представлен на двух языках.

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

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

Основную часть документа занимает так называемое текстовое поле — участок, где и размещается смысловое наполнение страницы: содержательный информа­ционный текст и иллюстрации. Перечисленные элементы еще называют «кон­тент» (от англ. content - содержание). Расположение текстового поля зависит в первую очередь от того, каким образом web-дизайнер разместит остальные элементы документа.

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

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

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

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



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

Как видно из рисунка, логотип в этом случае помещен на один уровень с заго­ловком документа, а рекламный баннер позиционирован относительно центра страницы. При таком подходе рекомендуется выдерживать графическое оформ­ление заголовка, логотипа и поля для размещения рекламы в едином цветовом и художественном стиле — тогда несимметричность положения данных объектов будет не столь очевидна и не станет «резать глаз» сторонникам строгой, «таб­личной* эстетики дизайна.

Элементы навигации можно разместить не только вблизи правой и левой границ страницы, но и в верхней части документа. Такой вариант компоновки наиболее подходит, на мой взгляд, при создании домашних страничек: в этом случае все объекты страницы гармонично «вписываются» в заданную ширину невидимой таблицы, при этом подготовка самой таблицы значительно упрощается. Единст­венным недостатком подобного подхода является необходимость продублиро­вать элементы навигации в нижней части документа, поскольку при вертикаль­ной прокрутке страницы они исчезают за верхней границей экрана, и, чтобы добраться до них, пользователю придется «отматывать» экран назад, что, со­гласитесь, весьма неудобно. Пример оформления страницы с верхним расположением элементов навигации/

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

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