Проектирование Web-страницы

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

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

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

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

Особенности сайтов во фреймах и таблицах.

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

Выбор фреймовой структуры отображения информации на WWW оправдан в следующих случаях:

при необходимости организовать управление загрузкой документов в одну из подобластей окна просмотра браузера при работе в другой подобласти;

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

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

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

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

Карты изображений, их назначение.

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

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

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

Карты-изображения наиболее удобно использовать в следующих ситуациях:

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

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

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

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

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

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

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

Виды рамок, способы их выполнения.

Изображение, встраиваемое на страницу, можно поместить в рамку различной ширины. Для этого служит параметр BORDER тэга <IMG>. В качестве значения параметра используется число, означающее толщину рамки в пикселах. По умолчанию рамка вокруг изображений не рисуется. Исключением из этого правила является случай, когда изображение является ссылкой. Также рамки прописываются с помощью CSS (Каскадные таблицы стилей), где им можно придать объем, цвет и толщину линий.

Значения форм и их особенности.

Элемент Form используется для логического объединения связанных внутренних элементов управления. Данные элементы управления могут при необходимости отправлять свои значения обратно на сервер или обрабатывать значения непосредственно на машине клиента. При отправке содержания формы указывается имя и значение всех элементов ввода пользователем информации, которые отправляются обратно на сервер. Сервер затем обрабатывает эту информацию и обычно возвращает новую страницу.

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

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

Формы и внутренние элементы управления в пределах области действия имеют богатую модель программирования. С помощью объекта form вы можете отправить и очистить форму, а также получить доступ и манипулировать индивидуальными элементами управления.

Формы в документе представлены посредством семейств all и forms. Кроме того, именованные формы имеют специальные отношения с документом и к ним можно обратиться непосредственно как к свойствам самого документа. Примеры форм на сайте: ПОИСК, ОЧИСТИТЬ, ОТПРАВИТЬ, ОБЗОР, Введите пороль и т.д.

Метатэги их свойства и особенности.

Разработка новых спецификаций языка разметки гипертекста занимает немалый срок, и за это время компании, производящие браузеры, успевают выпустить несколько версий своих продуктов. Поэтому в раздел заголовка может быть добавлен еще один тэг <МЕТА>, позволяющий авторам документа определять информацию, не имеющую отношения к HTML.

Эта информация используется браузером для действий, которые не предусмотрены текущей спецификацией HTML. Тэг <МЕТА> не потребуется вам для создания первых HTML-документов, но он вам наверняка понадобится, когда ваши страницы станут более сложными.

Специальная группа инструкций <META>, предназначена в основном для описания и индексирования документа поисковыми машинами. Все тэги META не видны при просмотре документа. Команды <META> вносятся в "шапку" гипертекстового документа - внутри блока <HEAD>...</HEAD>. Закрывающий тег </META> запрещен!!!

Стало весьма популярным применение элемента <МЕТА> для решения некоторых типичных задач. В качестве примера можно привести указание ключевых слов, используемых поисковыми системами. Этот способ позволяет включать в индекс документа дополнительные слова, которые могут явно не входить в его содержание. Для этого в тэге <МЕТА> в качестве значения параметра NAME указывается имя некоторого свойства.

Также теги <МЕТА> используются для:

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

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

Используется для того, чтобы браузер автоматически переключался на новый адрес через x секунд;

Используется для указания имени автора. Поисковые системы могут найти нужный сайт по имени автора (или найти самого автора);

Полезно также указать и авторские права название фирмы почти наверняка будет проиндексировано поисковой машиной;

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

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

Краткое описание Вашего сайта, используемое поисковым сервером для индексирования, и, как правило, вставляемое в текст страницы найденных совпадений в качестве описания Вашего сайта. Длина содержимого тегов МЕТА "description" не должна превышать 200 символов.

Web-страница. Работа с графикой и звуком.

Работа с текстом и таблицами. Язык иерархических стилевых спецификаций или каскадные таблицы стилей CSS, их значимости при разработке дизайна сайта. Вставка музыкальных и видео файлов на страницы сайта.

Ответ:

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

Первая версия языка HTML не предусматривала специальных средств для отображения таблиц, так как была в основном предназначена для написания простого текста. С развитием сфер применения HTML-документов стала актуальной задача представления данных, для которых типично наличие ряда строк и столбцов. Создание документов, содержащих выровненные по колонкам данные, на первых порах осуществлялось использованием преформатированного текста, внутри которого необходимое выравнивание обеспечивалось введением нужного количества пробелов. Напомним, что текст внутри пары тэгов <PRE> и </PRE> выводится моноширинным шрифтом, и все пробелы и символы табуляции являются значащими. Работа по выравниванию такого текста выполнялась вручную, что существенно замедляло создание документов. Поддержка табличного представления данных стала стандартом де-факто, поскольку изначально была реализована во всех ведущих браузерах и лишь по прошествии значительного времени была закреплена в спецификации HTML 3.2.

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

Язык иерархических стилевых спецификаций или каскадные таблицы стилей CSS, их значимости при разработке дизайна сайта.

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

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

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

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

Описания стилей находятся в тегах <STYLE></STYLE> и размешаются между тегами <HEAD></HEAD>.

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

Связывание - позволяет использовать одну таблицу стилей для форматирования многих страниц HTML

Внедрение - позволяет задавать все правила таблицы стилей непосредственно в самом документе

Встраивание в теги документа - позволяет изменять форматирование конкретных элементов страницы

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

Вставка музыкальных и видео файлов на страницы сайта.

Для использования звуковых файлов на Web-странице можно применить любой из двух вариантов: встраивать файл с помощью тэга <EMBED>, либо создать ссылку на звуковой файл. В любом случае фонограмму можно будет прослушать при просмотре страницы в браузере Netscape при помощи подключаемого модуля LiveAudio. Первый вариант дает большую гибкость в компоновке страницы. Как будет описано ниже, тэг <EMBED> обладает значительным количеством параметров, задавая которые можно контролировать аспекты работы модуля LiveAudio. Однако у этих возможностей есть и оборотная сторона. Если страница, рассчитанная на использование модуля LiveAudio, будет просматриваться другим браузером, который, вероятнее всего, будет иметь свои средства для воспроизведения звука, то все уникальные для модуля настройки не будут работать. Использование же ссылки на файл является стандартным способом, применяемым для любых типов файлов.