Экспорт изображений

К экспорту изображений в ImageReady можно отнести несколько групп команд. В первую очередь, это, конечно, команда File > Export Original... (Файл > Экспорт Оригинала...), затем File > Save (Файл > Сохранить), File t Save As... (Файл > Сохранить как...), File > Save Optimized (Файл > Сохранить оптимизированное) и File > Save Optimized As... (Файл > Сохранить оптимизированное как), несомненно, Edit > Copy HTML Code (Правка > Копировать код HTML) и, наконец, команды Edit > Cut (Правка > Вырезать) и Edit > Сору (Правка > Копировать). В этом уроке мы рас смотрим каждую из этих команд, чтобы разобраться, какую из них когда имеет смысл применять.

Команда File > Export Original... (Файл > Экспорт оригинала...) делает копию оригинального изображения, предварительно произведя сведение слоев и позволя ет сохранить эту копию в разных форматах файлов (рис. 13.1).

Рис. 13.1. Диалоговое окно команды File > Export Original...

Как видно из рисунка, задать можно название файла и его формат. Форматы могут быть следующими: Photoshop (*.psd), BMP (*.bmp), PCX (*.pcx), Pixar (*.pxr), Targa (*.tga) и TIFF (*.tif). Такая информация, как нарезка и параметры оптимизации, не сохраняется, если формат отличен от PSD.

Предназначение команды File > Save (Файл > Сохранить) — сохранять изменения, сделанные за некоторый промежуток времени в рабочем файле. В отличие от PhotoShop, в ImageReady эта команда сохраняет изображения только в формате РSD(рис. 13.2).

Команда File > Save As... (Файл > Сохранить как...) отличается от команды File > Save (Файл > Сохранить) тем, что позволяет задать другое название и месторасположение файла. В отличие от PhotoShop, в ImageReady эта команда не предусматривает изменение формата, и изображение может быть сохраненным при помощи этой команды только в формате PSD.

Рис. 13.2. Диалоговое окно команды File > Save совпадает с аналогичным окном команды File > Save As...

Рис. 13.3. Диалоговое окно команды File > Save Optimized совпадает с аналогичным окном команды File > Save Optimized As...

Команда File > Save Optimized (Файл > Сохранить оптимизированное) сохраняет гекущее состояние изображения с настройками, указанными при оптимизации (рис. 13.3; подробнее см. Оптимизация анимированных изображений).

Команда File > Save Optimized As... (Файл > Сохранить оптимизированное как...) позволяет сохранить другую версию того же изображения с другими настройками.

Изменить можно следующие параметры:

тип файла;

настройки;

нарезку.

Под выбором типа файла в данном случае подразумевается следующее: можно сохранить HTML-код и изображения (*.html), только изображения (*.gif) и только HTML-код (*.html).

Сохранение HTML-кода и изображения задается типом «HTML and Images (*.html)» соответствующего ниспадающего меню. В этом случае результатом является файл HTML и отдельные файлы для каждого фрагмента нарезки, имеющегося в исходном изображении. Файл HTML включает в себя код всех присутствующих «спецэффектов»: гиперссылок, карт-изображений, анимированных кнопок и изображений. Формат файлов изображений и его настройки определяются параметрами, заданными при оптимизации.

Сохранение только изображения обеспечивает тип «Images only (*.gif)». В результате получаем отдельный файл для каждого фрагмента нарезки (если таковая имеется), формат и настройки которого определяются, как и в предыдущем Случае, параметрами, заданными при оптимизации.

Для сохранения только HTML-кода используется тип «HTML only (*.html)». Результат — файл HTML, не включающий данные, относящиеся к изображению.

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

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

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

Под настройками по умолчанию подразумеваются настройки, заданные в диалоговом окне команды File > Output Settings > HTML... (Файл > Выходные настройки > HTML...). При выборе пункта «Другие» также появляется это диалоговое окно (рис. 13.4).

Эта команда полностью совпадает с аналогичной командой PhotoShop, за исключением флажка Include GoLive 5 (or Earlier) Code (Включить код GoLive 5 (или более ранней версии)). Установка этого флажка позволяет форматировать код HTML и JavaScript таким образом, что анимированные кнопки можно редактировать в программе Adobe GoLive. Естественно, эта процедура увеличивает конечный размер файла.

Далее нужно указать, какие фрагменты нарезки использовать: все вместе или только выделенные.

Рис. 13.4. Диалоговое окно команды File > Output Settings > HTML...

Следующий способ экспорта — команды подменю Edit > Copy HTML Code (Правка > Копировать код HTML). Эти команды копируют код HTML для оптимизированного изображения в буфер обмена:

Copy All Slices (Копировать все фрагменты) — копируется код HTML всех нарезанных фрагментов изображения;

Copy Selected Slices (Копировать выделенные фрагменты) — копируется код HTML только выделенных фрагментов;

Copy Preloads (Копировать программы) — для выбранных фрагментов копируется сгенерированный ImageReady код JavaScript.

ПРИМЕЧАНИЕ. ImageReady генерирует и форматирует код HTML таким образом, как указано в диа логовом окне команды File > Output Settings > HTML... (Файл > Выходные настройки» HTML...).

Для вставки скопированного таким способом кода HTML необходимо открыть нужный HTML-файл (или создать новый) в соответствующем приложении и выполнить в нем команду Edit > Paste (Правка > Вставить).

ВНИМАНИЕ. При изменении месторасположения источника изображения необходимо ислользовать команду File > Update HTML... (Файл > Обновить HTMI...) для обновления связей.

В изображенном на рис. 13.5 окне задается имя файла HTML, который необходимо обновить. Флажок Save Images (Сохранить изображения) управляет доступностью кнопки Output Settings... (Выходные настройки...). При нажатии этой кнопки появляется диалоговое окно команды File > Output Settings > Saving Files... (Файл > Выходные настройки > Сохранение файлов...), показанное на рис. 13.6.

Рис. 13.5. Диалоговое окно команды File > Update HTML...

Рис. 13.6. Диалоговое окно команды File > Output Settings > Saving Files...

Как видно из рисунка, в этом диалоговом окне три вкладки:

File Naming (Имена файлов). На этой вкладке вы можете задать правила образования имен файлов;

Filename Compatibility (Совместимость имен файлов). Тут вы можете определить параметры, влияющие на совместимость имен файлов с различными операционными системами;

Optimized Files (Оптимизация). Упрощает рутинную работу: записывает рисунки в одну папку, копирует фоновый рисунок и добавляет знак авторского права.

Для обмена выделенными фрагментами с PhotoShop или другими приложениями используются команды Edit > Cut (Правка > Вырезать) и Edit > Copy (Правка > Копировать).

Что нового мы узнали?

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

Дополнительные возможности ImageReady

Просмотр изображений в браузере

Переход в другие приложения

Создание текстур

Что нового мы узнали?

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

Краткий обзор возможностей HTML

Вы уже ознакомились с возможностями и функциями Adobe PhotoShop, которые позволят вам разработать и подготовить к дальнейшему использованию графическое оформление web-сайта. Но сама по себе графика еще не является web-страницей. Для того чтобы страница могла быть представлена пользователям Интернета, она должна быть описана на специальном языке, позволяющем задать нужную структуру документа. Этот язык называется HTML — Hypertext Markup Language — язык разметки гипертекста. При помощи этого языка задается текст, помещаемый на сайте, ссылки на другие документы, расположение Изображений и многое другое. Для подготовки полноценной страницы вам необходимо знать основы HTML. Это тем более важно, что язык описания страниц накладывает довольно жесткие ограничения на использование графических элементов, но вместе с тем позволяет достаточно гибко настраивать работу с ними. Этот урок посвящен рассмотрению основных возможностей языка разметки web-страниц — HTML

ПРИМЕЧАНИЕ. Гипертекстом называют набор статей, связанных между собой. Читатель (пользова тель) может легко перемещаться между статьями (страницами), получая необходимую информацию. Например, в случае обычного словаря вы можете быстро уточнить значение незнакомого вам слова. В случае web-страницы вам предоставляется возможность быстро переместиться на нужный сайт для получения сведений (например, толкования слова) или совершения каких-либо действий (загрузки файлов, заполнения платежной ведомости и так далее).

На рис. 15.1 показан фрагмент файла, описывающего страницу при помощи языка HTML — именно так выглядит код web-страницы. Это обычный текстовый файл, который можно подготовить в практически любом текстовом редакторе. Как вы сами можете убедиться, документ этот состоит из текста, который можно видеть на готовой web-странице, а также команд, заключенных в угловые скобки. Команды HTML принято называть тегами. Именно эти команды и «сообщают» браузеру, как отображать текст, откуда загрузить и куда вставить графику, как отображать ссылки и многое другое. На рис. 15.2 показана та же самая страница, открытая в Internet Explorer. Браузер распознает команды и формирует изображение, отображаемое на экране.

Ниже приведен список основных особенностей языка HTML.

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

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

Рис. 15.1. Фрагмент HTML-кода web-страницы

Язык имеет широкий выбор средств задания внешнего вида web-страницы.

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

На web-страницу могут быть помещены программы, работающие с пользователем.

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

Рис. 15.2. Та же страница, открытая в Internet Explorer

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

Различия между браузерами проявляются прежде всего в наборах обрабатываемых тегов — команд HTML. Существует набор тегов, стандартизированный консорциумом WWW (W3) — организацией, контролирующей развитие Всемирной Паутины. Разработчики программного обеспечения в принципе должны следовать рекомендациям и стандартам консорциума — это необходимо для поддержания преемственности и совместимости программ и систем разных поколений. Но не всем удается точно выполнить все, что требует стандарт. Некоторые наоборот, стремятся внести в HTML что-либо свое — новые теги, параметры, функции. Иногда такие нововведения принимаются другими производителями и становятся стандартом, иногда они остаются свойствами конкретной программы. Такие различия приводят к тому, что возможности браузеров даже в воспроизведении стандартных тегов могут значительно различаться. Это создает большие проблемы для дизайнеров и web-программистов — им приходится при разработке страницы учитывать возможности и характеристики всех браузеров, которые могут оказаться у потенциального пользователя. Так как учесть все существующие программы невозможно, обычно ориентируются на два наиболее распространенных браузера — Microsoft Internet Explorer и Netscape Navigator.

СОВЕТ. Для того чтобы удовлетворить желания и возможности большинства пользователей, ориентируйтесь на программы Internet Explorer 4.0 или 5.5, а также на Netscape Navigator 4.74.

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

Рис. 15.3. Отображение домашней страницы Internet Explorer в самом Internet Explorer

Рис. 15.4. Отображение той же страницы в Netscape Navigator

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

Для того чтобы продемонстрировать различия возможностей браузеров, проведем простой эксперимент — загрузим домашнюю страницу Internet Explorer с сервера Microsoft в две самые распространенные на момент написания этой книги программы — Internet Explorer 5.5 и Netscape Navigator 4.74. На рис. 15.3 показано, как Internet Explorer справляется с отображением своего «представительства» во Всемирной Паутине. На рис. 15.4 вы можете увидеть, как с этой задачей справился Netscape Navigator.

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

Что нового мы узнали?

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

Структура HTML-документа и форматирование текста

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

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

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

ПРИМЕЧАНИЕ. При сохранении на диске для HTML-файлов обычно используется расширение .НТМ или .HTML.

Прежде всего, надо определить, как выглядит команда HTML. Это какой-либо набор символов, заключенный в угловые скобки. Например: <HTML>, <BODY>. Регистр символов не имеет значения (большие и маленькие буквы не различаются). Теги делятся на парные (блоковые) и непарные. Блоковый тег может содержать в себе некоторый фрагмент документа, влияя на его отображение. Для такого тега в большинстве случаев требуется парный тег, указывающий конец зоны влияния. Такие теги записываются так же, как и теги, открывающие описание, но с добавлением символа "/" Например:

<Р> Фрагмент текста страницы. В данном случае - текст абзаца.

</Р>

ПРИМЕЧАНИЕ. Теги, содержащие другие теги, в некоторых книгах называют тегами-контейнерами. В некоторых случаях закрывающий тег можно не указывать.

Тег может содержать не только название, но и параметры, влияющие на отображение элемента. Параметры записываются внутри описания тега (между угловыми скобками) и разделяются пробелами. Значения параметров отделяются от их имен символом «-». В некоторых случаях значение не требуется, важен сам факт указания параметра. Значения параметров можно заключать в кавычки («"».Использование кавычек обязательно только при наличии в значении параметра пробелов. Пример записи параметров:

<IMG SRC="images/pl.jpg" WIDTH=120 HEIGHT=110>

В данном случае тег имеет название IMG (тег вставки изображения) и параметры SRC (путь к файлу изображения), WIDTH (ширина изображения), HEIGHT (высота изображения).

ВНИМАНИЕ. Так как некоторые символы используются для записи команд HTML (например, сим волы "<" и ">" 8ы не сможете использовать их в обычном тексте. Если вам все-таки нужно это сделать, используйте вместо символов их код: &lt; — «<», &gt; — «>», &nbsp; — неразрывный пробел (пробел, по которому не производится переход на следующую строку), &атр; — «&», &сору; — «*», &quot; — кавычка, &ХХХ; — любой символ (XXX — код символа).

После того, как мы ознакомились с основными правилами записи тегов, можно приступать к рассмотрению структуры HTML-документа.

Прежде всего надо указать на то, что данный документ описывает web-страницу на языке HTML. Для этого текст начинается с тега <HTML>. Для него требуется закрывающий тег </HTML>, обозначающий конец документа. Следующими по уровню вложенности являются теги заголовка документа и его содержания. Внутри тега заголовка записывается информация о документе (его название, описание, таблица кодировки и т. д.). Сам тег заголовка записывается как <HEAD>. Для него требуется закрывающий тег </HEAD>. Тег содержания документа определяет информационную часть описания страницы. В ней располагается текст, рисунки и другие элементы. Тег описания (тела страницы) выглядит следующим образом: <BOOY>...</BODY>.

Запишем пример простейшего документа:

<HTML>

<HEAD> <ТIТLЕ>Пример HTML-страницы </TITLE>

</НЕАD>

<ВОDY>Это простая страница, иллюстрирующая структуру описания на языке HTML.

</BODY>

</HTML>

Тег <TITLE>, расположенный в заголовке страницы, указывает название страницы, которое большинство браузеров отображают в заголовке окна. Определив название страницы, вы упростите работу с сайтом (пользователь поймет, куда он попал, еще до окончания загрузки документа). Кроме того, поисковые системы могут ориентироваться на заголовки документов при анализе соответствия содержимого сайта введенному пользователем запросу. На рис. 16.1 изображена описанная выше страница, открытая в браузере Internet Explorer. Обратите внимание: в нижней части окна отображается индикатор окончания загрузки страницы, а в заголовке окна — название, заданное нами в тексте примера.

Рис. 16.1. Пример отображения web-страницы браузером

Для тега <BODY> вы можете определить некоторые параметры, например цвет текста и фона, текстуру, ширину полей. Ниже приведен список параметров и их допустимых значений.

BGCOLOR задает цвет фона страницы. Записывается в следующем виде: BGCOLOR-#RRGGBB, где RR, GG и ВВ — запись RGB-компонентов цвета в шестнадцатеричной форме. Символ «#» (номер) указывает на то, что дальше записано обозначение цвета. Пример записи:

<BODY BGCOLOR=#F8FF10>

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

<BODY TEXT="#FF8000">

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

<BODY LINK="#12E6F7">

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

<BODY LINK="#12E6F7">

ALINK указывает цвет, которым будут отображаться активные ссылки (ссылки, по которым в данный момент осуществляется переход). Пример:

<BODY LINK="#12E6F7">

BACKGROUND задает URL-адрес (путь к файлу) фонового рисунка для страницы (текстуры). Этот параметр, а также другие параметры управления цветом и фоном, можно использовать и для задания вида ячеек таблиц. Для этого примените его к тегу <TD>. Подробнее задание таблиц рассматривается в следующем уроке. Пример использования параметра BACKGROUND:

<BODY BACKGROUND="back/texture.gif">

ПРИМЕЧАНИЕ. Используя каскадные таблицы стилей (CSS), можно задать фоновое изображение, повторяющееся только по вертикали или только по горизонтали. Также можно поместить фоновое изображение, например, в нужную точку экрана.

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

Среди служебной информации, задаваемой в заголовке документа, вы можете определить такие полезные сведения, как таблица кодировки. Это особенно важно при просмотре документа на компьютере, работающем под управлением другой операционной системы. Если не указать, на каком языке написан документ (точнее, национальные символы какого языка при этом использованы), то браузер будет пытаться отобразить документ с использованием таблицы кодов, применяемой по умолчанию. При этом документ может оказаться нечитаемым. Поэтому надо задать таблицу кодировки вручную, что и делается при помощи тега <МЕТА>. Этот тег размещается в заголовке документа (между тегами <HEAD> и </HEAD>), используется для записи различных данных, указываемых в его параметрах. Закрывающего тега не требуется.

Кодировка, которую необходимо указать, зависит от того, в какой операционной системе и каком редакторе создается файл. Если вы используете систему Windows и Блокнот в качестве HTML-редактора, то для корректного воспроизведения русского текста вам понадобится указать кодовую таблицу Windows-1251, используемую для передачи символов русского языка. При этом тег <МЕТА> следует записать следующим образом:

<МЕТА HTTP-EQUIV="Content-type"

CONTENT="text/html; charset=Windows-1251">

После того, как вы определите структуру документа, можно приступать к наполнению его информацией, предназначенной пользователям. Эта информация располагается между тегами <BODY> и </BODY>. Вы можете поместить в документ текст, «сдобренный» при помощи тегов рисунками и элементами форматирования (заголовками, таблицами, списками). Ниже процесс размещения этих элементов на web-странице рассматривается подробно.

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

Объявить блок текста комментарием можно при помощи специального тега «<!- -». Конец комментария обозначается тегом «- ->». Ниже приведен пример записи текста с комментариями.

Этот текст будет выведен на экран...

<!-- А этот текст не будет отображен браузером -->

ПРИМЕЧАНИЕ. Хотя текст комментария не отображается в окне браузера, он все равно загружается на компьютер пользователя вместе с остальным содержимым страницы. Поэтому не стоит хранить в виде комментариев информацию, представляющую некоторую тайну (например, имена пользователей и пароли доступа).

Часто возникает необходимость поместить на страницу заголовок раздела или название страницы в целом. Для этого можно использовать стандартные теги заголовка. Язык HTML позволяет задавать заголовки шести размеров (уровней), для которых используются теги от <Н1> до <Н6>. Текст заголовка пишется между открывающим и закрывающим тегами.

<Н1>Это заголовок первого уровня</Н1>

<Н6>Заголовок шестого уровня< /Н6>

Чем больше число, идущее за символом «Н», чем меньше размер текста заголовка. Поэтому, если вы хотите, чтобы заголовок был написан более мелкими буквами, используйте, скажем, тег <Н2> или <Н5>. Наличие заголовка подразумевает автоматическое прерывание строки (подробнее об этом рассказывается далее); кроме того, заголовок может занимать сразу несколько строк. Имейте в виду, что мелкие заголовки — они маркируются тегами <НЗ> и ниже — в большинстве web-браузеров отображаются очень мелким шрифтом, и в результате заголовок может оказаться мельче основного текста. На рис. 16.2 показаны примеры заголовков всех шести уровней (для сравнения приведена фраза без дополнительного форматирования).

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

<Н1 ALIGN = "CENTER">Это заголовок первого уровня,

выровненный по центру</Н1>

Используя для параметра ALIGN значения left и right, вы можете выравнивать заголовки по правому и левому краям страницы.

СОВЕТ. Для выравнивания текста и других объектов, включенных в документ, по центру экрана можно использовать специальный тег <CENTER> следующим образом: <CENTER><H1>ЭTO заголовок первого уровня</Н1></СЕNTER>

Рис. 16.2. Заголовки различных уровней

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

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

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

В табл. 16.1 приведены некоторые теги логического и физического форматирования. Как правило, все эти теги используются попарно, и закрывающий тег ставится после текста, который должен быть выделен тем или иным образом (тег <STRONG> используется вместе с </STRONG> и т. д.).

Таблица 16.1. Теги физического и логического форматирования текста

Использование списков и таблиц

Использование маркированных и нумерованных списков

Использование таблиц

Что нового мы узнали?

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

Использование изображений

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

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

Для задания фоновых изображений используется параметр BACKGROUND тегов <BODY> и <ТD>. В качестве значения надо указать имя файла, содержащего рисунок. Формат файла может быть любым, но вам следует учитывать то, что многие браузеры «воспринимают» только форматы GIF и JPEG. Некоторые подобные программы способны работать с форматом PNG. Файлы других форматов в большинстве случаев (например, TIFF) могут читаться и использоваться только после установки специальных программных модулей (для просмотра файлов формата TIFF потребуется модуль QuickTime). Ниже приведен пример задания фона для тела документа.

<BODY BACKGROUND="images/texture.jpg">

На рис. 18.1 приведен пример страницы с заданным графическим фоном.

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

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

Рис. 18.1. Вы можете задать фоновое изображение для тела документа и некоторых его элементов

ПРИМЕЧАНИЕ. Часто во время загрузки документа фоновые изображения передаются на компью-тер пользователя в последнюю очередь.

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

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

Кроме фона, вы можете помещать на страницу и обычные рисунки, украшая сайт или иллюстрируя его текст. Во многих случаях графика, имея строго функциональное назначение (кнопки, ссылки и т. д.). служит украшением web-страницы, привлекая пользователя и создавая комфортные условия для работы. Для включения в текст HTML-документа изображений (точнее, ссылок на файлы изображений) используется тег <IMG> (от английского слова image — изображение). Ниже приведен список его параметров. С их помощью вы можете указать правила отображения картинки в окне браузера.

SRC указывает путь к файлу, содержащему изображение. Значение этого параметра лучше заключать в кавычки. Также обратите внимание на правильность записи имен файлов и каталогов. Программное обеспечение сервера может различать регистры символов. Пример записи тега с этим параметром:

<IMG SRC="www.server.com/images/my_picture.jpg">

BORDER определяет ширину границы, выводимой вокруг изображения (в пикселах). Граница отображается для изображений, используемых в качестве ссылок (по умолчанию браузер выводит такие изображения окруженными цветной (обычно синей) рамкой). С помощью параметра BORDER вы можете контролировать ее размер. При задании значения BORDER-0 рамка не отображается. Пример записи параметра:

<IMG SRC="images/picrute.jpg" BORDER=1>

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

<IMG SRC="images/image5.gif" WIDTH=120 HEIGHT=150>

ALIGN используется для выбора режима выравнивания изображения. При помощи различных режимов выравнивания вы можете управлять положением рисунка, окруженного текстом, относительно строки, в которой он находится. Существует несколько режимов выравнивания, как по горизонтали, так и по вертикали. Ниже (табл. 18.1) приведен список допустимых значений параметра ALIGN.

Таблица 18.1. Допустимые значения параметра ALIGN тега <IMG>

Ресурсы Интернета и ссылки на них

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

Рис. 19.1. Ссылки связывают между собой страницы Всемирной паутины

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

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

195.32.45.67

В зависимости от числа компьютеров в сети, эти четыре байта могут иметь разное значение. Например, первые три байта определяют номер сети, а последний байт — номер компьютера. Такой случай характерен для небольших сетей. Если сеть более крупная (например, корпоративная сеть крупной фирмы), то ее номер может определяться первыми двумя или даже одним байтом, а остальные задают конкретную машину. Три байта позволят задать адреса для 65 536 компьютеров, а один байт, остающийся для номера сет», можно использовать для обозначения максимум 256 сетей. Поэтому таких больших сетей совсем немного. Один, два или три первых байта могут представлять более мелкие сети, «вложенные» друг в друга.

ПРИМЕЧАНИЕ. IP-адрес называется так потону, что используется в составе сетей, работающих с протоколом (алгоритмом) передачи данных IP — Internet Protocol (Протокол интернета).

Такая система именования компьютеров и компьютерных сетей позволяет легко и просто использовать адреса компьютеров в различных программных средствах, взаимодействующих с сетями. Однако для пользователя цифровые коды неудобны — их трудно запоминать. Поэтому для удобства работающих в Интернете людей была введена более близкая к человеческому языку система обозначения компьютеров. В ней каждому из компьютеров, подключенных к сети, может быть присвоено ими. Зная его, можно получить доступ к хранящимся на компьютере программам и данным. Компьютер, подключенный к сети, часто называют доменом, поэтому вся система обозначений, основанная на использовании символьных имен, получила название DNS (Domain Name System) — система имен доменов (или система доменных имен). Имя домена принято называть адресом. Каждый раз, когда пользователь дает программе (например, браузеру) распоряжение обратиться по тому или иному адресу, специальное программное обеспечение, установленное на сервере (главном компьютере сети), преобразует имя в цифровой IP-адрес, по которому и производится поиск нужной машины.

ПРИМЕЧАНИЕ. Систему, преобразующую символьные имена доменов в IP-адре са и наоборот, называют сервером доменных имен. Часто для обозначения этого сервера используют аббревиатуру DNS, но уже в значении Domain Name Server — Сервер доменных имен (Сервер имен доменов).

Так как в большинстве случаев вам придется иметь дело именно с символьными именами, а не с последовательностями цифр IP-адресов, рассмотрим подробно правила построения адресов ресурсов Интернета.

Несмотря на то, что в Интернете существует множество практически независимых друг от друга систем, например, служба web-страниц (чаще ее называют WWW (World Wide Web) или Всемирная паутина), служба электронной почты (e-mail) и т. д., адреса всех принадлежащих им ресурсов строятся по одному принципу. Поэтому рассмотрим вначале наиболее общий случай — имя файла, хранящегося на сервере, а затем разберемся в том, как строятся адреса других елужб и систем.

ПРИМЕЧАНИЕ. Адрес ресурса Интернета часто называют URL — Universal Resource Locator — Уни версальнтый указатель ресурса.

Адрес файла, помещенного на сервере, может выглядеть примерно следующим образом:

http://jerry:cvl45@www.alpha.server.com:80/cgi-bin/catalogue.pl?group

=120&product =800

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

http://][[jerry][:cvl45]@][www.alpha.server.com][:80][/cgi-bin/catalogue.pl]

[?group =120&product=800]

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

protocol://][[username][:password]@][domai'n][:port][/path][/file][?parameters]

Рассмотрим назначение полей адреса.

protocol определяет тип протокола (алгоритма), по которому ведется передача запрашиваемых данных. Название протокола (например, http) отделяется от остальной части адреса символами «://». Многие браузеры могут автоматически распознать необходимый для выполнения запроса протокол, поэтому его можно не указывать. Например, адреса www.server.com и http:// www.server.com для современных браузеров означают одно и то же.

username — имя пользователя, под которым осуществляется вход в систему. Указывать имя пользователя требуется в некоторых специфических случаях. Мы рассмотрим их, когда будем говорить о доступе к различным службам Интернета.

password — требуемый для входа в систему пароль. Символы пароля отделяются от имени пользователя символом «:». После пароля должен следовать символ «@». Если пароль не указан, но указано имя пользователя, то этот символ ставится после имени. При отсутствии в адресе и имени пользователя, и пароля «собаку» (@) ставить не надо.

domain — имя компьютера (домена), на котором расположен запрашиваемый файл или ресурс. Имя домена может состоять из нескольких частей, разделяемых точками. Эти части определяют иерархию ресурсов. Так, самая правая часть (расширение) определяет страну, в которой зарегистрирован домен (например, .ru — зарегистрирован в России), или его назначение (например, .com — коммерческое предприятие или фирма). Остальные части имени домена определяют вызываемый компьютер и расположенный на нем «виртуальный» (организуемый программно) домен. Домены принято делить на уровни, начиная с расширения: расширение — первый уровень, расположенное прямо за ним имя — второй и т. д. В нашем примере используется домен третьего уровня. Известные всем символы WWW тоже определяют домен, расположенный на сервере, но в отличие от других составляющих адреса, эти символы в большинстве случаев могут быть пропущены (они определяют принадлежность сайта к службе WWW и в отдельный уровень доменов их не выделяют).

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

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

path и file — определяют путь к нужному файлу и его имя. Пути и имена файлов записываются так же, как в обычных операционных системах (в отличие от систем, подобных Windows, для записи пути используется не обратная (\), а прямая косая черта (/)). При записи путей следует учитывать регистр символов, так как некоторые операционные системы различают большие и маленькие буквы.

parameters — параметры вызова файла. Поле параметров отделяется от остального адреса символом «?» и представляет собой набор имен переменных и их значений. Несколько параметров записываются через знак «&». В адресе не должно быть пробелов и символов, не входящих в стандартную таблицу кодировки. Поэтому «запрещенные» символы преобразуются к виду «%код», код — номер символа в используемой таблице (например, пробел обозначается комбинацией «%20»).

ВНИМАНИЕ. При записи адреса ресурса (URL) допускается использовать только латинские буквы (цифры и некоторые символы (например «-»(дефис) или «_» (подчеркивание)). Использование пробелов или символов национальных алфавитов (в том числе и русского) приведет к ошибкам. Впрочем, в настоящее время рассматривается вопрос о введении адресов, записанных кириллицей.

B большинстве случаев для обращения к тому или иному ресурсу Сети исполь-зовать все доступные поля адреса не требуется. Например, для обращения к web-странице обычно хватает имени домена и (в некоторых случаях) пути. Если имя файла не указано, то по умолчанию открывается файл с именем index.htm (index.html). В настройках серверных программ, обслуживающих работу сайта, можно указать иное имя вызываемого по умолчанию документа. Параметры вызова используются при обращении к размещенным на сервере программам. Так им передается необходимая информация.

Если вам необходимо обратиться, например, к файлу, расположенному на фай-ловом сервере, то адрес строится аналогичным образом. Вместо протокола передачи web-страниц (HTTP) следует указать протокол передачи файлов (FTP). Если обращение производится в автоматическом режиме (при работе какой-либо про-граммы, не требующей вмешательства оператора), то в адресе следует указать имя пользователя и пароль (если вы обращаетесь к серверу вручную, то имя пользователя и пароль можно ввести по специальному запросу с клавиатуры). Также понадобится путь к файлу и его имя. Адрес файла на FTP-сервере может иметь примерно такой вид:

ftp://ftp.server.net/dir/file.doc

или

ftp://myname:mypass@ftp.server.net/dir/tree.jpg

Если вам необходимо указать путь к файлу, находящемуся не на сервере, а на вашем компьютере (например, если вы хотите сделать презентацию с использованием HTML), в качестве протокола вместо ftp:// надо указать file:///. Обратите внимание, используются три косых черты, а не две. В остальной части адреса (в пути к файлу) используются не прямые косые линии, а обратные, как это принято в Windows.

Еще один часто используемый тип адресов — адреса электронной почты. Они записываются совсем просто — каждый адрес содержит только имя пользователя и имя домена. Выглядят такие адреса примерно следующим образом:

alpha@server.ru

Обратите внимание: имя пользователя должно отделяться от имени домена символом «@». Это особенно хорошо видно на примере почтовых адресов. Если адрес указывается в параметрах ссылки на него, то для корректной работы следует дополнить его указанием на то, что адрес является почтовым (указать на то, что сообщение будет передано по протоколу электронной почты). Ниже показано, как это делается.

mailto:alpha@server.ru

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

Перед тем, как перейти к рассмотрению собственно создания ссылок, размещаемых на web-страницах, следует упомянуть о двух типах адресов. В зависимости от того, насколько полно записывается путь к файлам, адреса делятся на глобальные и локальные. Предположим, что есть файл, расположенный на диске компьютера и имеющий имя c:\files\pictures\bird.tif. Обратиться к нему можно, написав все имя целиком. При этом файл будет найден, независимо от того, в каком каталоге находится программа или документ, ссылающийся на указанный файл. Такие имена (адреса) файлов называют глобальными. Если же программа или документ находятся, например, в каталоге \files, то запись имени файла можно упростить. Для его вызова хватит записи вида pictures\bird.jpg..Taкой тип записи имен называют локальным.

Каждый из этих типов записи имен (адресации) имеет свои преимущества и недостатки. Глобальная адресация позволяет получить доступ к файлу независимо от того, где находится вызывающая его программа или документ. При перемещении программы (документа) ссылка останется работоспособной. Это удобно, например, при вызове файлов, находящихся вне вашей системы. Однако при изменении имени или расположения файла вам придется изменить все ссылки на него. Локальная адресация позволяет сократить запись адреса. С ее использованием можно легко вызвать файл, находящийся «поблизости» от вызывающей программы или документа. При перемещении программы и нужных ей файлов с сохранением структуры подкаталогов (например, при перемещении нашего условного каталога \files на диск D:\) работоспособность системы сохраняется. Однако при нарушении структуры (например, при перемещении вызывающей программы) ссылки работать не будут. Таким образом, локальная адресация удобна для работы с файлами, расположенными на подвижных носителях (если обращение к файлу производится с этого же носителя) или в пределах вашего сайта.

Теперь рассмотрим способы организации ссылок на различные объекты Сети при помощи средств HTML. Существует два метода. Один из них мы уже рассматривали — это карты-изображения. Они позволяют сделать систему навигации (перемещения) по сайту простой и очень наглядной, но для их работы требуется загрузка на компьютер пользователя изображений, что не всегда удобно. Поэтому в большинстве случаев для задания ссылок используется специальный тег ссылки — <А> (требуется закрывающий тег </А>). Используя этот тег, вы можете сделать практически любой объект, расположенный на web-странице, ссылкой на другую страницу, файл или иной ресурс.

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

<А Параметры> Объект-ссылка </А>

Параметры тега определяют все свойства ссылки (на что она ссылается и т. д.). Ниже приведены основные параметры тега <А>.

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

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

_blank — документ открывается в новом окне браузера;

_top — документ открывается в текущем окне и занимает его полностью (если окно содержало фреймы, то документ открывается без фреймов);

_parent — документ открывается в окне, содержащем текущий фрейм (в «родительском» для него окне);

_self — документ открывается в текущем окне или фрейме (используется по умолчанию).

Если имя окна не задано, то документ открывается в текущем окне или фрейме.

NAME определяет имя ссылки. Это имя может использоваться в интерактив ных страницах для динамического изменения свойств объектов или для организации ссылок на разные части одного документа.

TITLE — этот параметр аналогичен параметру ALT тега <IMG>. Он позволяет задать текст, выводимый браузером в виде всплывающей подсказки при наведении на ссылку курсора мыши.

Кроме этих параметров, у тега <А> существует еще множество характеристик, но при работе со стандартным HTML они используются редко.

Между тегами <А> и </А> должен находиться объект, который будет представлять ссылку в окне браузера. Это может быть практически любой допустимый на web-странице объект — фрагмент текста, рисунок и т. д. На рис. 19.2 изображено окно браузера с различными реализациями ссылок.

На этом рисунке вы видите практически все часто встречающиеся типы ссылок. Обычные текстовые ссылки выводятся таким же шрифтом, что и окружающий их текст. В большинстве случаев браузеры выделяют текст ссылки подчеркиванием. Кроме того, ссылки окрашиваются (обычно в синий цвет). После того, как пользователь просмотрит документ, на который указывает ссылка, ее цвет меняется (чаще всего на фиолетовый). Текстовые ссылки могут дополняться графическими элементами, делающими систему навигации более понятной. Если не принять специальных мер, рисунки, входящие в состав ссылок, обводятся рамкой того же цвета, что и текст ссылок. Для улучшения внешнего вида страниц режимы отображения ссылок могут быть изменены. Например, с помощью технологии CSS можно отключить подчеркивание текста и изменить его цвет (изменить стиль ссылки). Это также продемонстрировано на рис. 19.2. В качестве ссылок могут использоваться и отдельные изображения (без текста). Для этого необходимо разместить между тегами <А> и </А> только тег изображения. Впрочем, изображение может содержать надпись, «сдобренную» при помощи графического редактора (например, Adobe PhotoShop) различными эффектами. На рисунке 19.1 представлена такая надпись, снабженная тенью при помощи слоевых эффектов, рассмотренных во второй главе этой книги. Такие обработанные надписи позволяют совместить информативность текстового описания назначения ссылки и красоту графических эффектов. Также вы можете использовать в качестве ссылок обычные изображения. Для упрощения перемещения по сайту они могут снабжаться поясняющими надписями, но во многих случаях картинки «говорят сами за себя».

Рис. 19.2. Окно браузера с web-страницей, содержащей ссылки различных типов

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

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

Еще один признак ссылки — отображение в строке состояния браузера (обычно в нижней части окна) адреса, на который ссылка указывает. Адрес выводится также при наведении курсора на указатель ссылки (текст или рисунок). Это хорошо видно на рис. 19.2.

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

Для того чтобы браузер «нал», куда надо прокручивать документ, в HTML-коде надо установить так называемые «якоря» (иногда их называют «закладками»). Каждому якорю присваивается имя, на которое вы можете сослаться из любой части текущего документа или другого файла. Якорь образуется при помощи тега ссылки <А>, но в данном случае требуется определить только его имя при помощи параметра NAME. Задавать документ в параметре HREF и содержимое ссылки не надо, а вот поставить закрывающий тег придется. Если тег не закрыть, то весь текст до конца документа или до ближайшего тега, отменяющего действие тега <А>, будет выглядеть как ссылка (работать эта ссылка не будет). Выглядит якорь примерно следующим образом:

<А NAME="linkl"></A>

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

После того, как вы разместите в документе якоря, можно устанавливать ссылки, указывающие на них. Такие ссылки задаются точно так же, как и ссылки на обычный документ. Отличие заключается лишь в том, что после имени документа необходимо записать имя якоря, к которому следует прокрутить окно браузера после открытия страницы. Например, ссылка на приведенный выше якорь (предположим, что он находится в документе с адресом http://www.server.ru/testl20.htm) будет выглядеть так:

<А HREF="http://www.server.com/testl20.htm#linkl">Cсылка на

якорь linkl </A>

Обратите внимание — имя якоря записывается после адреса документа и отделяется от него символом «#».

СОВЕТ. Вы можете использовать символ «#» для создания ссылок, не указывающих на конкретный документ (точнее, такая ссылка указывает на начало текущего документа). Просто укажите этот символ вместо значения параметра HREF. Этот прием может оказаться полезным в тех случаях, когда вам надо разместить на странице ссылку, но документ, на который она должна указывать, еще не готов, или же вы хотите «отключить» ссылку, не убирая ее со страницы. Таким же образом временно выключают активную зону карты-изображения. Если вы попробуете просто не указывать значение параметра HREF или вообще не писать его, то последствия могут быть самыми различными. Поэтому лучше всегда указывать параметр HREF с допустимым значением, даже если это значение, как символ «#», ни о чем не говорит.

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

Для ссылок внутри текущего документа можно записывать в параметре HREF только имя закладки с символом «#». Например, HREF-"#link1".

СОВЕТ. Если документ действительно велик, то в конце каждого раздела стоит поместить ссылку, указывающую на его начало. Разумеется, в начале документа надо поставить соответствующий якорь (закладку).

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

Что нового мы узнали?

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

Кроме того, мы узнали, как можно распознать ссылку среди других элементов страницы:

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

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

Использование фреймов

Применение фреймов

Что нового мы узнали?

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

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

ПРИМЕЧАНИЕ. Обратите внимание на рекламный модуль (баннер), расположенный на рис. 20.1 а верхней части окна. Несмотря на то, что весь сайт содержит текст на английском языке, реклама выводится по-русски — на языке страны, из которой просматривается сайт. Это пример грамотного подхода к рекламной кампании.

Для того чтобы облегчить работу с подобными системами, полезно обеспечить пользователю возможность одновременно наблюдать, например, список компаний, с акциями которых совершаются сделки, и результаты торгов по выбранной позиции. Сделать это можно при помощи механизма, называемого фреймы (frames), впервые введенного компанией Netscape в браузере Navigator 2.0. Использование фреймов позволило создавать принципиально новые по своей структуре сайты, что принесло им заслуженную популярность.

ПРИМЕЧАНИЕ. Английское слово frames, используемое для обозначения этих элементов web-страниц переводится на русский язык по-разному. Поэтому вы можете встретить самые различные названия, например, «кадры» или «рамки». Чаще всего используют не перевод, а транслитерацию — «фреймы».

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

Рис. 20.1. Сайт информационного портала ИНТЕРТЭК

Рис. 20.2. Страница с тремя фреймами в исходном состоянии (сразу после загрузки). В верхней части окна — фрейм с навигационными ссылками и названием сайта, под ним слева — фрейм со списком товаров, а справа — фрейм с информационной страницей

ПРИМЕЧАНИЕ. На рис. 20.2 и 20.3 видно, что полосы прокрутки в разных фреймах имеют разный цвет. Управлять им можно при помощи технологии CSS (эта возможность поддерживается браузером Internet Explorer 5.0 и более поздними версиями). Если браузер не поддерживает подобных функций, то он, в соответствии с принятым в HTML правилом, проигнорирует ошибку и отобразит полосы прокрутки так, как будто никаких попыток их видоизменить не предпринималось. Это верно и для всех остальных элементов страницы — встретив неизвестный элемент или команду, браузер отображает страницу так, как позволяют его возможности.

Рис. 20.3. Та же страница. Левый нижний фрейм прокручен к концу списка товаров, а в нижний правый загружена новая страница с информацией о конкретном товаре

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

Хотя фреймы являются независимыми окнами браузера, они все же связаны между собой единой внешней границей. Поэтому изменение габаритов окна браузера или любого из фреймов сказывается на размерах всех открытых в данный момент документов. Для того чтобы эти изменения не нарушали общий вид страницы, необходимо принять специальные меры (об этом рассказывается ниже). Также обратите внимание на то, как отображаются эти границы. На рис. 20.1, 20.2 и 20.3 фреймы выводятся без видимых границ, но вы можете указать на то, что границы должны выводиться на экран, а также определить их ширину. Если фрейм имеет видимые границы, то при помощи мыши их можно перетаскивать, изменяя конфигурацию окна. Это дает пользователю возможность оптимальным образом использовать пространство экрана. Задавая набор фреймов, перетаскивание их границ можно запретить.

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

ПРИМЕЧАНИЕ. Широкое распространение получили программы, исполняемые на сервере (сервер-ные сценарии), которые в соответствии с запросом пользователя автоматически готовят и отправляют в браузер страницу с нужным содержанием.

Теперь посмотрим, каким образом можно разбить окно браузера на фреймы. Для этого следует создать отдельный HTML-документ, содержащий описание структуры окна — набора фреймов. В этом документе указывается заголовок (<HEAD>... </HEAD>), после чего вместо тела документа (<BODY>...</BODY>) указывается собственно набор фреймов — описание структуры разбиения окна и ссылок на документы, которые должны быть загружены в образовавшиеся «отсеки» окна браузера.

Структура окна с фреймами определяется при помощи тега <FRAMESET>. Его должен дополнять закрывающий тег.

Тег <FRAMESET> может иметь несколько параметров. Рассмотрим их.

COLS и ROWS — эти параметры позволяют определить, в каком направлении будет разделено окно браузера — по вертикали (COLS — columns — колонки) или по горизонтали (ROWS — ряды). Этот же параметр определяет количество фреймов и их ширину. Пример записи:

<FRAMESET COLS="144.*,70%,*">

<FRAMESET ROWS="*,80%,*">

В качестве значения параметра COLS или ROWS задается ширина фреймов (число значений определяет число фреймов). Ширина фрейма может быть задана в пикселах (в этом случае просто указывается значение) или в процентах (в этом случае значение сопровождается символом «%»). Символ «*» обозначает все пространство, оставшееся свободным после выделения места для фреймов, размеры которых заданы явно. Таким образом, в первом из этих примеров будет создано четыре фрейма: один шириной 144 пиксела, третий шириной 70% от оставшегося пространства, а второй и четвертый фреймы разделят между собой место, оставшееся после образования первого и третьего. Во втором случае будет создано три фрейма, расположенные друг над другом по вертикали. Причем средний фрейм займет 80% высоты окна, а на долю оставшихся двух придется по 10% (оставшиеся после выделения места под средний фрейм 20% будет поделены поровну).

ВНИМАНИЕ. Для того чтобы структура окна могла приспосабливаться к изменениям размеров окна браузера, задайте размер одного или нескольких фреймов как «*» или запишите их значения в процентах. Это позволит вашим фреймам автоматически масштабироваться при изменении размеров окна.

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

ПРИМЕЧАНИЕ. Перетаскивая рамку при помощи мыши, можно изменять размеры соседних фреймов.

FRAMESPACING определяет расстояния между соседними фреймами (в пикселах). Этот параметр аналогичен параметру CELLSPACING тега <TABLE>, определяющего таблицу.

ВНИМАНИЕ. Не следует задавать набор фреймов, содержащий только один элемент. Это считает-ся ошибкой. Если вам надо отобразить в окне браузера только один файл, воспользуйтесь стандартной структурой документа.

После того, как вы запишите описание набора фреймов, необходимо определить их самих. Для этого между тегами <FRAMESET> и </FRAMESET> надо разместить ссылки на файлы, которые займут места в заданной вами оконной структуре. Эти ссылки задаются при помощи тега <FRAME>, не требующего закрывающего тега. Тегов должно быть ровно столько, сколько мест было выделено при помощи параметров COLS или ROWS. Используя параметры, можно задать имя файла, который будет помещен в ту или иную ячейку окна, а также параметры отображения этого файла.

SRC — при помощи этого параметра задается имя файла, который будет загружен во фрейм. Этот параметр является обязательным.

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

MARGINWIDTH задает ширину полей (правого и левого) в текущем фрейме (в пикселах).

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

SCROLLING — этот параметр позволяет управлять отображением полосы прокрутки во фрейме. Допустимые значения параметра:

yes — полосы прокрутки отображаются всегда;

nо — полосы прокрутки не отображаются, даже если все содержимое фрейма не помещается в окне;

auto — полосы прокрутки Отображаются, если содержимое фрейма не помещается в нем.

NORESIZE — если вы укажите этот параметр (достаточно указать сам параметр, присваивать значение не требуется), то размеры фрейма нельзя будет изменить при помощи мыши.

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

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

Для определения альтернативного содержания страницы используйте пару тегов <NOFRAMES>...</NOFRAMES>. Они должны располагаться после описания структуры фреймов. Между этими тегами можно использовать все теги, допустимые в разделе <BODY> обычной страницы сайта.

ВНИМАНИЕ. Если документ содержит тег <FRAMESET> или <NOFRAMES> (или оба этих тега вместе), тег <BODY> использовать нельзя.

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

<HTML>

<НЕАD><TITLE>Пример 16</TITLE>

</HEAD>

<FRAMESET COL5="*,50%">

<FRAME SRC="pagel.htm" NAME="Framel">

<FRAMESET ROWS="60%,*">

<FRAME SRC="page2.htm" SCROLLING=Yes NAME="Frame2">

<FRAME SRC="page3.htm" SCROLLING=No NAME="Frame3">

</FRAMESET> </FRAMESET>

<NOFRAMES>

Щелкните для <А HREF="noframes.htm"> здесь </А> перехода к

странице без фреймов

</NOFRAMES>

</HTML>

ПРИМЕЧАНИЕ. В разделе <NOFRAMES> размещено традиционное для таких случаев сообщение и предложение перейти по ссылке на страницу без фреймов.

На рис. 20.4 показано, как документ, приведенный выше, отображается браузером.

Рис. 20.4. Документ с фреймами, загруженный в браузер

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

СОВЕТ. Для создания сложной структуры окна браузера можно использовать не только вло женные объявления фреймов, но и документы с более простой структурой, загружаемые в документ с фреймами.

ПРИМЕЧАНИЕ. Загрузка чужих страниц в фреймы документа может быть воспринята хозяином этих страниц как нарушение авторских прав.

Размещение web-страниц в Интернете и их реклама

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

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

ПРИМЕЧАНИЕ. Для распространения таких электронных презентаций (не обязательно в формате HTML) и каталогов часто используются компакт-диски, причем диски могут быть довольно оригинальных форматов. Большинство устройств для чтения компакт-дисков могут работать не только с обычными дисками диаметром 12 см, но и с их миниатюрными собратьями, имеющими диаметр 8 см (обратите внимание на круглую выемку в центре выдвижной полки дисковода). Емкость таких дисков составляет около 80 Мбайт. Существуют еще меньшие диски, помещающиеся в карман для визитных карточек. Они имеют емкость 30 Мбайт и в некоторых случаях изготовляются не круглыми, а в форме визитной карточки.

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

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

ПРИМЕЧАНИЕ. Слово «сервер» может использоваться для обозначения как компьютера, выделен ного для обслуживания служб сети (локальной или глобальной), так и программы, занимающейся этим обслуживанием.

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

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

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

ПРИМЕЧАНИЕ. Если гостевая книга используется не для общих выражений вроде «Здесь был Миша», а для обсуждения конкретной тематики, она может называться форумом.

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

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

СОВЕТ. Помните поговорку — бесплатный сыр бывает только в мышеловке.

ПРИМЕЧАНИЕ. Бесплатные страницы могут предоставляться не только специализированными ком-паниями, но и другими организациями, например Интернет-провайдерами или ассоциациями фирм (для членов ассоциации). Размещать рекламу организации, предоставивщей место на сервере, на такой странице скорее всего не потребуется.

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

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

Выбирая себе провайдера, вы выбираете еще и имя будущего сайта. От того, насколько оно лаконично и удобно для запоминания, во многом зависит коммерческий успех будущего сайта. Чем проще потенциальному клиенту запомнить и правильно набрать на клавиатуре имя, тем больше вероятность того, что он посетит ваш сайт. Наилучший вариант для имени сайта — название самой фирмы. На сайт с таким именем легко попасть, даже не зная о нем заранее. При этом следует избегать имен, которые могут записываться неоднозначно. Русские буквы Ё, И, Ц, Щ, Ь, Ы, Ъ, Э, Ю, Я могут быть записаны допустимыми в адресах доменов латинскими буквами (транслитерированы) неоднозначно. Также следует избегать использования в адресах символов «-» и «_».

Платные хостинг-провайдеры обычно дают вам возможность зарегистрировать домен второго уровня (например, www.alpha.com). За регистрацию и сохранение за вами этого имени придется заплатить организации, уполномоченной выдавать имена сайтов в соответствующей зоне (с данным расширением). Например, за домен в зоне .RU придется платить около $26 в год организации РОСНИИРОС. Иногда домен регистрируется как домен третьего уровня, но домен второго уровня считают отдельной зоной (например, www.alpna.spb.ru). Регистрация такого имени часто производится бесплатно.

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

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

http://www.narod.ru;

http://www.chat.ru;

http://www.holm.ru;

и другие...

Вы можете без труда найти такой сайт, набрав в поисковой системе (например, www.yandex.ru) запрос «бесплатный хостинг» или другой подобный этому.

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

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

ПРИМЕЧАНИЕ. Сайт Narod.ru является подразделением компании flndex, поддерживающей популяр ную поисковую систему www.yandex.ru. Благодаря этому, с именем пользователя и паролем, полученным при регистрации на Narod.ru, вы можете получить доступ к почтовому ящику и некоторым другим службам (например, к чату) прямо со страницы этой системы.

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