К активным элементам веб страниц относятся. Основные элементы Web-страницы

ОСНОВЫ WEB-ДИЗАЙНА

Основы Web-дизайна

История развития Интернета. Появление интернета в Беларуси. WEB – дизайна. История возникновения. Требования к дизайну сайта в соответствии со стандартами W3C. Основные браузеры. Структура сайта, дискрипты и тэги.

Internet (англ. Internet, Interconnected Networks - соединённые сети ) – гигантская компьютерная сеть, состоящая из множества соединенных друг с другом меньших по размеру сетей и покрывающая весь земной шар.

История Интернета началась в середине прошлого века: в 1957 году в США было создано Агентство Перспективных Разработок (ARPA), которое занималось военными разработками.

В 1989 году Тим Бернерс-Ли создал язык HTML.

В 1961 году Управление перспективных исследований и разработок Министерства обороны США (DARPA - Defence Advanced Research Agensy) по заданию министерства обороны США приступило к проекту по созданию экспериментальной сети передачи пакетов. Эта сеть, названная ARPANET , предназначалась первоначально для изучения методов обеспечения надежной связи между компьютерами различных типов.

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

В 1973 году через Arpanet впервые «пообщались» компьютеры разных стран. Сеть стала международной.

Развитие сети шло быстрыми темпами. В 1987 году число хостов превысило 10000. В 1988 году к NSFNET подключились Канада, Исландия, Дания, Норвегия, Франция Финляндия и Швеция. В 1989 году число хостов превысило 100000. К сети подключились Великобритания, Япония, Германия, Австрия, Израиль, Италия, Мексика, Новая Зеландия, Нидерланды. Россия подключилась к СЕТИ в 1990 году. Беларусь также в начале 90-х.

Число подключенных пользователей ежегодно стало увеличиваться быстрыми темпами. В 1995 году Сеть превратилась в самое крупное, динамическое и доступное средство массовой коммуникации.

WEB – дизайна. История возникновения.

Веб-дизайн (от англ. web design) - это визуальное оформление веб-страниц. Он играет такую же роль для сайта, как полиграфический дизайн и вёрстка для бумажного издания. Часто «веб-дизайном» называют веб-разработку: проектирование интерфейса (графическое и текстовое содержание сайта), проектирование структуры, навигации и движка сайта (выделенная часть программного кода для реализации конкретной прикладной задачи).

В настоящее время под термином «веб-дизайн» понимают именно проектирование структуры, идейной целостности Интернет-ресурса, обеспечение удобства пользования Интернет-ресурсом для пользователей. Важной частью проектирование веб-сайтов, является их соответствие стандартам W3C (англ. World Wide Web Consortium, Консорциум Всемирной паутины - организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины), что обеспечивает доступность содержания сайтов для людей с ограниченными физическими возможностями, а также для пользователей портативных устройств.

Также с непосредственно дизайном сайтов смежны маркетинг в Интернете (Интернет-маркетинг), то есть, продвижение и реклама созданного ресурса, поисковая оптимизация

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

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

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

Юзабилити (англ. usability - дословно «удобство пользования», «применимость») - применительно к компьютерной технике термином юзабилити называют концепцию разработки пользовательских интерфейсов программного обеспечения, ориентированную на максимальное психологическое и эстетическое удобство для пользователя.

Требования к дизайну сайта в соответствии со стандартами W3C

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

На сайте должны быть обеспечены удобство и полнота навигационных элементов.

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

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

Приветствуется наличие красивых графических объектов, использование небольших, но стильных графических элементов (пиктограмм, «визуалов») в оформлении страниц сайта.

Приветствуется небольшое включение элементов анимации.

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

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

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

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

Ве́б-обозрева́тель, или бра́узер.

В настоящее время каждый пользователь выбирает для себя «свой» браузер. Наиболее популярными являются Opera и Firefox. За ними идет Internet Explorer (IE).

Ве́б-обозрева́тель, или бра́узер (от англ. Web browser) - это программное обеспечение для поиска, просмотра веб-сайтов, то есть для запроса веб-страниц (преимущественно из Сети), для их обработки, вывода и перехода от одной страницы к другой.

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

Internet Explorer (версия 5.5 и выше):

Opera (версия 7.0 и выше);

Mozilla Firefox (версия 1.0 и выше).

Основной цветовой режим мониторов, на которых должен корректно просматриваться сайт, - 15 разрядов цветов и выше (число цветов 65536 и выше).

Разработка структуры web-проекта

Согласно общей концепции проекта, поставленным целям и задачам определяется структура web-проекта, а именно:

§ структура данных, определение связей между таблицами базы данных, структуры передачи данных из внешних источников;

§ определение уровня автоматизации обработки данных, разработка структуры управления данными;

§ проводится спецификация форм и порядок их появления;

§ структура пользовательского интерфейса: пункты меню и элементы навигации, необходимые уровни вложенности;

§ разработка эскизов дизайна проекта (количество вариантов утверждается заранее).

Разработка.

§ дизайн: художественное и техническое решение. Создание оригинального стиля сайта: цветовое решение, изготовление элементов оформления, баннеров, графических элементов;

§ программирование: создание программных элементов;

§ pеализация навигации в рамках утвержденной модели проекта;

§ базовое информационное наполнение;

Язык разметки гипертекста HTML

• (от англ. Hypertext Markup Language - «язык разметки гипертекста») - это стандартный язык разметки документов во Всемирной паутине. Все веб-страницы создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, удобном для человека.
• Вместе с XML, HTML обычно причисляют к «языкам разметки текста». На самом деле роль этих двух языков, как и самого формата под названием «просто текст» («plain text»), выходит далеко за рамки обработки текстовой информации.
• Изучение любого компьютерного языка начинается со знакомства с его основными строительными блоками - операторами, выражениями, переменными. С этой точки Зрения язык HTML крайне прост, чтобы не сказать - примитивен: кроме обычного текста, HTML-файл содержит лишь один тип управляющих конструкций, так называемые теги (tags) .

Слова заключенные в угловые скобки “<” и “>” называются HTML - дескрипторами или HTML – тегами.

Основные компоненты Web-страницы

Основная навигационная панель сайта (меню). Альтернативное меню и дублирующее основного меню. Ссылки, виды ссылок и их выполнение. Основные элементы дизайна сайта. Компоновка страницы сайта. Цветовое решение сайта. Оптимизация графики Web, подготовка изображений для Web-страницы. Принципы работы с картинками.

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

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

Несколько основных пунктов меню можно продублировать в альтернативном меню. Если основное горизонтальное – то в вертикальном, или наоборот.

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

Активный раздел меню (страница, на которой находиться пользователь) должен выделяться, явно отличаясь от других пунктов, например цветом.

Посещенные разделы стоит выделять другим цветом, чтобы посетителю было видно, где он был, а где нет.

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

Приветствуется наличиедублирующего основного меню внизу страницы.

Основные элементы дизайна сайта.

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

Графика - искусство изображения предметов контурными линиями и штрихами, без красок (иногда - с применением цветовых пятен) (словарь Ожегова).

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

Главная задача Web-дизайна является создание комфортной атмосферы для усвоения информации на страницах Интернет-сайта.

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

Компоновка Web-страниц сайта;

Графика.

Компоновка страницы сайта.

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

Компоновка страниц сайта должна обеспечивать автоматическое масштабирование страниц в зависимости от ширины рабочего поля браузера пользователя. Минимальный размер (ширина) рабочего поля браузера, при котором необходимо обеспечить полноценное отображение страниц (без полосы горизонтальной прокрутки), составляет 1024 пиксела.

Цветовое решение сайта.

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

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

Яркость, тон и насыщенность цвета должны соответствовать фирменному стилю сайта;

Подбор цвета делается с учетом ориентировки на аудиторию этого ресурса;

Количество используемых основных цветов по возможности не должно превышать трех;

Цвета, используемые на сайте должны взаимодействовать и гармонировать между собой;

Употребление цвета должно отвечать элементарным правилам логики;

Отдельным пунктом стоит выделить подбор цвета для текста. Фон и текст страницы должны быть оформлены контрастными цветами. Наилучшая разборчивость обеспечивается при использовании черных символов на белом фоне. Текст не должен сливаться с фоном, а заголовки теряться.

Необходимо что бы цветовое решение соответствовало форме подачи материала, его содержанию, аудитории сайта.

Оптимизация графики Web, подготовка изображений для Web-страницы. Принципы работы с картинками.

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

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

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

Среднее время загрузки страниц не должно превышать 30 секунд при скорости соединения 28.8 Кбит/сек. Допускается увеличение времени загрузки отдельных страниц до 35 секунд, но не более чем 30% общего числа страниц сайта. Главная страница должна иметь время загрузки не более 40 секунд

На WEB странице можно использовать графические файлы форматов JPG, GIF и PNG. GIF -специальный сетевой формат: имеет малый размер файла, возможность плавного проявления и анимации, а также эффект прозрачности, позволяющие использовать картинку как "обои" на странице или в таблицах. Но т.к. gif содержит 256 цветную палитру, он неэффективен для хранения фотографий. JPG напротив не имеет ограничений по глубине цвета, но также и возможности анимации. Новый формат файлов поддерживающий и глубину и прозрачность -PNG, имеет недостаток в том, что старые браузеры его не видят. Поэтому, если не брать во внимание пользователей устаревшими программами, пинги вполне можно включать в свои страницы. Чтобы включить в страницу рисунок, надо описать ссылку на него:

где SRC (от s ourc e -источник)= Image -файл в формате gif, jpg или png , содержащий рисунок.
Вы можете задавать взаимное расположение рисунка и текста включением атрибута align = " ":

Возможны следующие типы выравнивания:
align = "middle" - относительно центра строки
align = "left" -текст обтекает картинку справа
align = "right"- то же слева

При использовании выравнивания left или right можно включить в тег img дополнительный параметр отступа вокруг изображения, чтоб картинка не прижималась вплотную к Вашему тексту. Параметр VSPACE="n" - создает отступ по вертикали, а HSPACE="n" - по горизонтали на n пиксел. Таким образом, правильно написанный тег картинки с обтекающим справа текстом будет выглядеть так:

Text.

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

Похожая информация.

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

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

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

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

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

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

Наиболее устоявшимся подходом является размещение элементов навига­ции у левой границы страницы.

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

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

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

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

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

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

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

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

Рис. 3.6. Пример компоновки web-страницы с левым позиционированием элементов навигации

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

Рис. 3.7. Пример компоновки web-страницы с правым позиционированием элементов навигации

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

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

Рис. 3.8. Пример компоновки web-страницы с верхним позиционированием элементов навигации

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

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

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

Рис. 3.9. Пример «смешанной» компоновки web-страницы

На любой Web-странице должны присутствовать минимум четыре элемента: , , Информация на Web-странице

Язык HTML

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

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

Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML скорее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать Web-страницы, которые могут быть просмотрены многими браузерами Web, как сейчас, так и в будущем. Это не исключает возможности использования других методов, например, метод расширенных возможностей, который предоставляется Netscape Navigator, Internet Explorer или некоторыми другими программами.

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

HTML был ратифицирован World Wide Web Consortium. Он поддерживается несколькими широко распространенными браузерами, и, возможно, станет основанием почти всего программного обеспечения, которое имеет отношение к Web.

Принципы создания web-страницы, основные элементы web-страницы

Для создания Web-страниц используется особый язык HTML (HyperText Markup Language - язык гипертекстовой разметки). Этот язык определяет набор специальных команд, называемых тегами и используемых для задания форматирования или назначения тех или иных элементов Web-страницы. Особые теги используются для размещения на Web-страницах графических изображений, аудио- и видеоклипов и прочих так называемых внедренных объектов.

Web-страницы представляют собой обычные текстовые файлы, созданные в стандартном Блокноте или аналогичном простейшем текстовом редакторе. И содержат они текст, тот самый текст, который вы хотите поместить на страницы, только размеченный особым образом. Для того чтобы различные программы Web-обозревателей правильно отображали одну и ту же Web-страницу, язык HTML должен быть стандартизирован.

На практике на стандарт HTML большое влияние оказывает наличие тегов, предложенных и поддерживаемых наиболее известными браузерами, такими как Microsoft Internet Explorer и Google Chrom. Эти теги в данный момент могут, как входить, так и не входить в состав действующей спецификации HTML.

Существуют средства редактирования, разработанные специально для написания HTML. Они позволяют экономить время, так как содержат клавиши быстрого доступа для выполнения повторяющихся операций, например, задания начальных установок документов, таблиц или просто применения стилей к тексту. Редакторы HTML отличаются от авторского WYSIWYG-инструментария тем, что требуют знания правил составления HTML вручную, редакторы лишь упрощают и ускоряют этот процесс. Наряду с тегами HTML, стандартизированными WWWC (стандартные теги), Web-обозреватели поддерживают множество нестандартных тегов. Эти теги были введены разработчиками той или иной программы Web-обозревателя, чтобы получить преимущество перед конкурентами. Они надеялись, что эти фирменные расширения впоследствии войдут в стандарт HTML, но этим надеждам так и не суждено было сбыться. Однако теги остались, и они все так же поддерживаются.

Для создания Web-страниц понадобится любой браузер - Internet Explorer или Google Chrome Mozilla Firefox, а лучше оба, так как многие элементы HTML по-разному отображаются в разных программах просмотра и весьма желательно контролировать эту разницу.

Кроме того, нужен любой текстовой редактор, например для подготовки HTML - файлов, а браузер - для просмотра и контроля сделанного.

Для того чтобы создать Web-страницу, первым делом создают структуру сайта. Сайт - это сервер, имеющий уникальное имя и постоянный адрес, физически подключенный к WWW, или виртуально размещенный на другом, более крупном сервере.

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

Есть несколько простых правил, позволяющих интерфейсу сайта быть понятым посетителю [№10].

1. На сайте не должно быть бесполезной информации, шрифт должен легко читаться. Графические элементы должны быть были чёткими, выразительными и быстро загружаться.

2. Человеческий глаз просматривает страницы сайта сверху вниз. Наибольшее внимание сосредотачивается на верхней левой части страницы. Поэтому в верхней части страницы сайта, как правило, размещается наиболее важная информация: название фирмы, логотип, название сайта и т.д.

3. Посетитель сайта должен без труда находить интересующую его информацию и иметь возможность получить исчерпывающую информацию (описание в виде текста плюс несколько фотографий).

4. Информация должна быть распределена по группам. Возможно, обеспечить возможность поиска товаров по части названия и описания.

5. На Web-сайте обязательно должны быть информационные разделы:

с данными о компании (сфера деятельности, адрес, контактные телефоны и т.д.);

Основные элементы Web-страниц:

1. Заголовок / Логотип (Шапка)

3. Контент /Содержание (Текстовое поле)

4. Элементы навигации

5. Информация о разработчиках сайта

Любая Web-страница содержит определенный набор стандартных элементов, являющихся обязательными компонентами каждого ресурса Интернета.

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

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

Перечисленные элементы еще называют «Контент» (от англ, content - Содержание). Расположение текстового поля зависит в первую очередь от того, каким образом Web-дизайнер разместит остальные элементы документа.

Рисунок 1. Пример контента сайта

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

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

Рисунок 2. Контактная информация

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

В итоге последовательность действий по разработке Web-сайта сводится к следующему несложному алгоритму:

1. Постановка целей и определение основных задач.

2. Создание списка будущих тематических разделов.

3. Разработка логической и физической структуры ресурса.

4. Подготовка эскиза дизайна, компоновки сайта, невидимой верстальной таблицы.

5. Подготовка текстовых материалов.

6. Подготовка графических материалов в векторной форме.

7. Экспорт векторных рисунков в растровый формат.

8. Оптимизация всех изображений.

9. Создание шаблонов Web-страниц.

10. Сборка Web-страниц и отладка кода.

11. Проверка идентичности отображения Web-страниц с различным экранным разрешением и цветовой палитрой и различных браузерах.