WWW.DISSERS.RU
Б ЕСПЛАТНАЯ ЭЛЕКТРОННАЯ БИБЛИОТЕКА
«Лучший выбор! ...»
-- [ Страница 2 ] --
Списки Списки (list) были введены в HTML, несомненно, под влиянием успеха тексто вых редакторов. Список отличается от обычного текста прежде всего тем, что пользователю не надо думать о нумерации его эту задачу программа берет на себя. Если список дополняется новыми пунктами или укорачивается, нумерация корректируется автоматически. В случае ненумерованных списков программа ставит перед каждым пунктом маркеры: кружки, прямоугольники, ромбы или другие изображения. В результате список принимает удобочитаемый, «фирменный» вид. Теги для создания списков можно условно разделить на две группы: одни определяют общий вид списка (и позволяют указывать атрибуты), а другие задают его внутреннюю структуру. В списках можно использовать стан дартные атрибуты. Существует несколько разновидностей списков.
).
Внешний элемент таблицы. Он позволяет задавать общие свойства таблицы и отделяет структуру таблицы от остальной части Web-страницы. Рассмотрим ат рибуты этого элемента. Большинство атрибутов могут использоваться и в других элементах таблицы. Таблицы Таблицу можно выровнять по горизонтали при помощи атрибута align:
• — влево;
• - по центру;
• right" — вправо.
Ширину таблицы можно задать точно в пикселах или в процентном отношении к ширине страницы в окне броузера. Например:
width=50% Для управления видом рамки используются два атрибута. Дело в том, что броузер создает изображение рамки, имитируя ее трехмерность (выпуклость) при помо щи различия в освещенности граней. На рамке можно различить фронтальную и боковую наклонную грани (рис. 3.9).
Ячейка Ячейка 3 Ячейка Рис. 3.9. Пример таблицы Шириной боковой грани управляет атрибут:
При задании нулевого значения для этого атрибута рамка исчезает совсем.
Шириной фронтальной грани управляет атрибут:
Если значение этого атрибута равно нулю, рамка получается тонкой, заостренной.
Для всех ячеек таблицы можно задать размер пустого пространства, окружающе го данные в ячейках:
или Задание этого атрибута делает ячейки больше. Между рамкой таблицы и данными всегда сохраняется определенное расстояние. В некоторых случаях это позволяет улучшить восприятие таблицы, сделать текст в ячейках легко читаемым.
Для всей таблицы может быть задан цвет фона:
78 Глава 3. Основные элементы версии Вместо цвета допускается использовать рисунок:
Атрибуты bgcolor и background можно указывать и с другими элементами табли цы, кроме элемента CAPTION.
Атрибут (используемый только для элемента TABLE) позволяет задать вид рамки таблицы:
Существуют следующие стандартные параметры:
• void — рамка отсутствует;
• above верхняя сторона рамки;
• below — нижняя сторона рамки;
• hsides — части рамки сверху и снизу;
• vsides — части рамки слева и справа;
• — левая часть рамки;
• — правая часть рамки;
• или box — рамка показана полностью.
Разумеется, если атрибут frame отсутствует, рамка вокруг таблицы выводится целиком.
Атрибут rules определяет вид сетки таблицы внутри, то есть между ячейками.
Он тоже имеет несколько параметров:
• попе — сетка отсутствует;
• — сетка вокруг групп ячеек;
• rows — горизонтальные линии между строками;
• cols — вертикальные линии между колонками;
• — обычная сетка.
Существует атрибут комментария к таблице. Его текст не выводится на экран и может воспроизводиться только специальными программными средствами (на пример, программой-синтезатором речи):
комментария" Допустимые стандартные атрибуты: id, class, title, style, атрибуты со бытий.
Элемент для задания заголовка таблицы. Несмотря на то что этот элемент рас полагается внутри элемента TABLE, заголовок выводится на экране вне рамки таб лицы (см. рис. 3.9). Положением заголовка можно управлять:
• — заголовок над таблицей;
• — заголовок под таблицей;
Таблицы • — заголовок вверху и выровнен влево;
• ri ght" — заголовок вверху и выровнен вправо.
Другие атрибуты: id, class, dir, title, style, атрибуты событий.
Выравнивание данных в ячейках Существует набор атрибутов, предназначенных для выравнивания данных в ячейках таблиц. Атрибут align позволяет выравнивать данные в ячейках по гори зонтали. Он принимает следующие значения:
• — выравнивание влево;
• right — выравнивание вправо;
• center — Атрибут valign позволяет выравнивать текст по вертикали. Значения могут быть такие:
• top — выравнивание по верхнему краю ячейки;
• bottom — выравнивание по нижнему краю ячейки (не всегда работает);
• center — выравнивание по центру;
• baseline — выравнивание по первой строке.
Для примера можно продемонстрировать использование значения baseline:
Элемент, создающий строку таблицы. Он не имеет конечного тега. Строка закан чивается там, где начинается следующая, то есть следующий элемент TR. Внутри элемента располагаются элементы и TD, определяющие одиночные ячейки. Для выравнивания содержимого всех ячеек в строке можно использовать хорошо из вестный нам атрибут align и присваивать ему значения left, center и right. Кроме этого, содержимое ячеек можно выравнивать по вертикали:
• - по верхнему краю;
• - по центру;
• — по нижнему краю.
Другие допустимые атрибуты: id, class, lang, style, dir, title, char, атри буты событий.
<тн> Элемент ячейки, которая является заголовком столбца или строки таблицы. Этот элемент должен располагаться внутри элемента TR. Ячейка-заголовок отличается 80 _ Глава Основные HTML версии от обычной тем, что броузер выводит текст внутри нее выделенным (как полужирным) шрифтом. Для элемента ячейки предусмотрено несколько атрибутов.
Если в ячейку введено большое количество текста, броузер разбивает его на стро чтобы сохранить требуемую конфигурацию таблицы. Конфигурацию мо жет определять заданная фиксированная ширина необходимость со гласовать размер таблицы и области просмотра, заданная ширина ячейки. При помощи атрибута (он не имеет параметров) можно запретить форматиро вание текста. В этом случае в ячейке будет создана одна строка, а таблица может уйти за край окна.
Атрибуты и colspan позволяют создавать ячейки, которые в несколько раз больше других ячеек таблицы. Иными словами, ячейки в таблице можно При задании атрибута и условии, что п>1, соответствующая ячейка займет не одну, а п строк, и, соответ ственно, будет размер в п раз больший, чем обычная ячейка столбца.
Аналогично, при помощи атрибута colspan можно создавать ячейки, расположен сразу в нескольких столбцах. Подробнее об объединении ячеек рассказывает ся в главе 6.
Хорошо известный нам атрибут align используется и для одной ячейки. Он мо жет принимать значения left по левому краю), center (выравни вание по центру) и right (выравнивание по правому краю). Обычно по умолча нию используется выравнивание влево. Элемент ТН в этом смысле — исключение.
Он обеспечивает центрирование текста, если атрибут align отсутствует.
Для элемента ТН можно указать атрибут таким же образом, как и для эле мента Размеры ячеек задавать
Этот элемент определяет обычную ячейку таблицы. Для допустимы те же атрибуты, что и для ТН. Оба элемента — ТН и — могут не иметь конечных тегов. Функцию конечного тега элемент, который определяет структуру таблицы.
Теперь, какие используются для создания таблицы, мы можем со здать простейшую таблицу:
border=4 cellspacing=3> Заголовок таблицы
Из примера видно, что первая строка таблицы содержит только ячейки-заголов ки. Внешний вид таблицы показан на рис. 3.9. Текст, расположенный после элемен тов TD, представляет собой содержимое ячейки. Таблица может форматироваться автоматически (если не заданы атрибуты) с учетом объема данных в ячейках. Последний пример можно несколько усложнить. При необходимости можно создать заголовки как для столбцов, так и для строк:
Заголовок таблицы Эта таблица на рис. Обратите внимание: несмотря на то, что левая ячейка не используется, для задан цвет так же, как и для других ячеек-заголовков. Это необходимо сделать для того, чтобы рамка таблицы в этом месте была прорисована. [Ячейка Ячейка 3 Ячейка Рис. 3.10. Таблица с заголовками столбцов и строк Еще один пример таблицы. В некоторых случаях возникает необходимость объе динения Тогда можно использовать атрибуты rowspan и colspan, как пока зано в этом примере:
Эта таблица показана на рис. Обратите внимание, что в ячейке, не содержа щей текста, помещен символ неразрывного пробела Это необходимо для того, чтобы сетка таблицы была правильно прорисована. Таблица с ячейками Рис. 3.11. Таблица с объединенными ячейками Группы строк: ,
и Существует возможность группировки строк таблицы. Для этого предусмотрен элемент блока заголовка THEAD, элемент обычных блоков строк и элемент нижнего блока строк TFOOT. В каждом блоке может присутствовать любое количе ство строк (элементов TR). Эти три элемента могут использоваться как с конечны ми тегами, так и без них. В качестве примера можно привести шаблон таблицы:
В данной таблице отсутствует форматирование (рис. 3.1,2), поэтому внешний вид ее очень простой. С другой стороны, элементы групп строк дают возможность для определения дополнительных стилей. Таблицы л 1 Заголовок 3 Ячейка 3. } Строка 5 Ячейка 5. блок таблицы Рис. 3.12. Таблица с группами строк При использовании этих элементов надо придерживаться следующих правил.
• В таблице можно указывать по одному элементу THEAD и TFOOT, но несколько элементов TBODY.
• Последовательность задания элементов следующая: THEAD, TFOOT, TBODY. Но в таблице на экране блок TFOOT окажется самым нижним.
• Все блоки должны содержать одинаковое количество колонок.
Группы колонок:
и Элемент COLGROUP позволяет создавать группы колонок с одинаковыми свойства ми. Рассмотрим пример таблицы:
1-1 1-2 1-3 1-4 1- 2-1 2-2 2-3 2-4 2-
Ее внешний вид показан на рис. Каждый элемент COLGROUP позволяет назна чить свойства определенному числу колонок, задаваемому атрибутом span. Все эти колонки будут одинаковые. Можно также использовать элемент для ука зания свойств одной колонки. Тогда часть свойств будет совпадать для всех коло нок, относящихся к одному элементу COLGROUP, а часть может отличаться. В табли це могут быть определены свойства для любого количества колонок, и если реальных колонок будет меньше, то некоторые определения окажут ся невостребованными. Это не является ошибкой. Для задания свойств могут ис пользоваться те же самые атрибуты, что и для других элементов таблицы. 84 Глава 3. Основные элементы HTML версии Рис. 3.13. Таблица с элементами COLGROUP и COL Есть несколько правил задания элементов. В смысле описания свойств COLGROUP обладает более высоким приоритетом, а элементы COL внутри элементов COLGROUP. В таблице могут присутствовать несколько COLGROUP. Если число колонок в одном таком элементе задается атрибутом span использовать в нем элементы не имеет смысла. Если элементы ют, то атрибут span соответствующего элемента COLGROUP игнорируется, то число колонок определяется числом элементов COL. Для отдельных элементов можно вводить собственные атрибуты span.
ПРИМЕЧАНИЕ Примеры таблиц можно найти в файле Table.htm на прилагаемой дискете.
Фреймы Фреймы — это области, которые создаются в окне броузера для одновременной демонстрации нескольких Не все броузеры позволяли разделять об ласть просмотра части, но эта идея завоевала всеобщее признание. Новые вер сии броузеров поддерживают фреймы в обязательном порядке. При страниц с фреймами разрабатывается Web-страниц. При этом HTML файлы отличаются по типам. Документы раскладки (layout) используются для структуры окна, то есть для того, как оно должно быть разде лено. Документы содержания (content) для заполнения цией каждой из областей, Итак, как же создать Web-страницу с фреймами?
продумать, какие области потребуются. Горизонтальное де экрана задается при атрибута rows, а — при помощи атрибута cols. Значения атрибутов могут быть выражены в пикселах или процен тах. Кроме того, используется символ * для обозначения оставшейся части экра на. Приведем несколько примеров:
• 50% — деление области просмотра по вертикали пополам (принцип программы Norton Commander);
• 75% — левая вертикальная область в три раза уже правой. Такой стиль избрали многие фирмы, имеющие свои сайты в Интернете;
• 30%, верхней горизонтальной области отведено 150 пикселов, для средней — тридцать процентов доступного пространства, а для нижней все, что останется;
• 4* — стиль для любителей головоломок. Правая вертикальная область в четыре раза шире левой. Эту формулу можно записать и так: cols=20%, 80%.
Фреймы В элементе FRAMESET можно использовать и стандартные атрибуты id, class, title, style, onload, onunl oad.
Вторым этапом является подготовка отдельных HTML-файлов для каждой облас ти. Они создаются по таким же правилам, что и другие гипертекстовые документы.
Нужно только учитывать размер области, в которой они будут демонстрировать ся. До тех пор, пока эти файлы не будут созданы, открывать документ раскладки в броузере не имеет смысла: вы ничего не увидите. Кстати, из этого следует одна особенность общения с Интернетом. Если вы набрели на сайт с фреймами и хоти те заполучить в свою личную папку понравившийся документ, не пытайтесь со хранять основной HTML-файл. Вместо этого просмотрите его в режиме источника и найдите ссылку на конкретный документ содержания. Затем загляните в папку кэша, где последний и должен находиться.
В документе раскладки секция FRAMESET используется вместо секции BODY.
Атрибуты элемента Кроме стандартных атрибутов — id, class, title и style — этот элемент имеет ряд атрибутов, позволяющих усовершенствовать оконную структуру.
Внутри элемента FRAMESET должна быть создана ссылка на каждый документ со держания, входящий в сложную страницу. Кроме того, каждый элемент FRAME по лезно снабдить именем с помощью атрибута name. Имя можно указывать в гипер ссылках (см. листинг 3.5). В результате элемент FRAME может выглядеть так:
Атрибут scrolling управляет прокруткой внутри одной области. Он может при нимать значения YES (полосы прокрутки создаются в обязательном порядке), N (прокрутка запрещена) и AUTO (полосы прокрутки появляются, когда необходи мо). Если этот атрибут отсутствует, броузер создает полосы прокрутки для тех документов, которые не умещаются целиком в отведенных им областях. Запретив прокрутку, можно создать так называемый Значением атрибута longdesc является ссылка на другой файл (URL). Таким спо собом для фрейма создается любого объема. Это своего рода альтерна тива использованию стандартного атрибута title, при помощи которого обычно задается короткий текстовый комментарий.
При помощи атрибута указывается, нужна или нет рамка вокруг фрейма. 1 создает рамку, значение 0 — отменяет. Если необходимо убрать границу между фреймами, учитывать, что она создается рамками двух смежных областей.
Атрибут margi nhei ght задает величину отступа страницы от верхнего и нижнего краев фрейма. Значение указывается в пикселах, например:
Другой похожий атрибут, создает поля слева и справа, например:
Глава 3. Основные элементы HTML версии В качестве примера, поясняющего конструкцию фреймов, (файл Frame.htm) для создания сложной Web-страницы.
Листинг 3.1. Шаблон страницы с фреймами
2 Лучший выбор! Алексей Гончаров В этой книге вы найдете: ормы, таблицы, фреймы приемы разметки гипертекста создание графики для HTML документов таблицы обзор редакторов сок На прилагаемой дискете вы noresize> В данном примере экран делится на четыре части, как показано на рис. верхней части страницы запрещено удаление с экрана, а для правой в обязатель ном порядке создаются полосы прокрутки. Обратите внимание, что для одновре менного деления области просмотра по вертикали и по горизонтали следует со здать вложенный элемент FRAMESET.
tun (! щи |l i...
[ часть страницы • Левую часть } страницы Правая часть страницы делают, как правило, узкой и размещают на ней ссылки или индекс.
Нижняя часть страницы • Рис. 3.14. Шаблон Web-страницы с фреймами Фреймы ПРИМЕЧАНИЕ Пример из этого раздела включает файлы Fr2.htm, Fr3.htm, записанные на прилагаемой дискете.
Этот элемент используется для того, чтобы предусмотреть ситуацию, когда броу зер не поддерживает фреймы. В этом случае надо вывести на экран предупрежда ющее сообщение или адресовать клиента к другой странице. Фрагмент кода мо жет быть написан следующим образом.
Листинг 3.2. Шаблон страницы с элементом NOFRAMES
1. <Р>Для просмотра этой страницы необходим броузер, поддерживающий можете посмотреть <А упрощенную версию а> Разумеется, броузеры, поддерживающие фреймы, не станут воспроизводить ин формацию из секции NOFRAMES.
Организация переходов по фреймам В качестве примера рассмотрим несколько взаимосвязанных страниц (рис. 3.15).
Пусть основная страница фреймов, а две другие построены по стандартному принципу: слева меню, справа информация. Конфигурацию фрей мов в нашем случае задает файл Такую структуру имеют многие сай ты. Кроме того, «цепочки» страниц удобно использовать для альных книг, галерей изображений, то есть там, где пользователю требуется последовательно просматривать ряд страниц. В данном случае важно правильно организовать ссылки.
Ниже приведены листинги используемых файлов.
88 Глава 3. Основные элементы HTML версии htm frame 1 htm right t Рис. 3.15. Схема переходов по страницам Листинг 3.3. Файл
Основная <А Следующая страница а> Листинг 3.4. Файл Framel.htm для NORESIZE <Р>Ваш броузер не поддерживает фреймы Листинг З.5. Файл <А target=_parent > Основная а> Правый 1 Правый 2 Листинг 3.6. Файл Правый фрейм № Предыдущая страница а>
Листинг З.7. Файл Right2.htm Теперь разберем, как организованы ссылки. Гиперссылка на основной странице указывает на документ раскладки: файл Он не содержит полезной информации, но позволяет задать размеры областей и указать необхо димые документы содержания. 90 Глава 3. Основные элементы HTML версии Здесь важно, что каждому фрейму дается имя при помощи атрибута name, Страницы, показываемые внутри фрейма, могут быть разными, а имя постоянным и будет использовано в гиперссылках.
В левом фрейме демонстрируется страница Ml.htm, которая выполняет меню: с его помощью можно вернуться на основную страницу или выбрать стра для правого фрейма: в нашем примере их две, но можно использовать любо количество. Левый фрейм сделан более узким (рис. 3.16).
:. Домой Меню Правый фрейм № Пред стран а Основная Рис. 3.16. Просмотр файлов Ml.htm и Обратите внимание, что в строке заголовка броузера присутствует заголовок и:
файла Framel.htm. Это единственная информация из этого файла, которую мы уви на экране, но зато все данные из элементов TITLE других страниц будут скрыты В реальной задаче файлы Rightl.htm и должны быть заполнены информацией. Кроме нее для удобства пользователя можно разместить типа «переход к следующей странице», «Переход к предыдущей странице», «пере ход к основной странице». Часто такие ссылки выполняются в виде пиктограмм В нашем примере используется два независимых способа передвижения по стра при помощи ссылок в меню (левом фрейме) и при помощи ссылок в ин формативных документах (правом фрейме).
Файл Ml.htm содержит три гиперссылки. Первая ведет на страницу без фреймов поэтому в ней обязательно должен быть указан атрибут target со значением В противном случае при переходе возникла бы ошибка: было бы открыто одно окно броузера или страница оказалась бы внутри фрейма. В случае шаблон гиперссылки такой:
<А Текст подсказки а> Фреймы Другие значения атрибута target:
• _self — как будто атрибута target нет, то есть страница открывается внутри текущего фрейма;
• _top — то же, что и • _blank — открытие еще одного окна броузера и показ страницы в нем.
Две другие ссылки позволяют менять содержимое правого фрейма, оставляя ле вый неизменным. Здесь важно указать атрибут target с именем правого фрейма (используем ссылку в одном фрейме, а страницу загружаем в другой):
На страницах и Right2.htm гиперссылки построены по такому же прин ципу, но их синтаксис зависит от того, на страницу какого типа следует выполнить переход. Для перехода на страницу без фреймов используется атрибут:
target=_parent Для перехода на «следующую» («предыдущую») страницу внутри текущего фрейма атрибут target не нужен: действует правило умолчания.
ПРИМЕЧАНИЕ Файлы Rightl.htm и имеются на прилагаемой дискете.
Этот элемент позволяет создать на странице область с полосами прокрутки (inline frame) для демонстрации содержимого другой страницы. Шаблон для использо вания элемента (просмотра файла Имя такой:
htm" Ваш броузер не поддерживает фреймы. Эту страницу можно просмотреть <А файла. а> Атрибуты width и height определяют ширину и высоту фрейма соответственно.
Если атрибуты не указаны, используется окно размером 300x150 пикселов.
Атрибут sc rolling управляет полосами прокрутки и может иметь следующие зна чения:
• auto — броузер определяет необходимость показа полос;
• yes — показ полос прокрутки (вертикальной — обязательно);
• по — без полос прокрутки.
Можно использовать атрибуты target и а также другие атрибуты стандартных фреймов:
фрейма" 92 _ Глава 3. Основные элементы HTML версии число пикселов" пикселов" Допускается также использование стандартных атрибутов align, class, id, style, title Устаревшие и нестандартные элементы Существует ряд элементов, работоспособность которых невозможно гарантировать Их появление обусловлено несколькими причинами. Во-первых, элементы появляются в результате вносимых в язык при новых версий. Новые броузеры не выводят никаких сообщений об элементах и игнорируют их при форматировании Web-страниц. Во-вторых, смысленность некоторых элементов заключается в том, что результаты рования (например изменения атрибутов шрифта) никак не проявляются экране. Все эффекты, ожидаемые от подобных элементов, можно с успехом полу чить при помощи других, более популярных. Я думаю, что любой разработчик должен учитывать тот факт, что его Web-страницы будут просматривать при разных программ. Поэтому он должен быть уверен, что документ выглядеть так же, как в оригинале.
Строго говоря, понятие версии языка HTML является в достаточной степени услов ным. Формально на текущий момент существует спецификация языка, но фактически каждый броузер поддерживает свою интерпретацию версии.
Элементы, объявленные устаревшими, продолжают использоваться, а фирмы-раз работчики стараются вводить в обиход новые, оригинальные элементы.
Сложилась парадоксальная ситуация: спецификация языка как стандарт де-фак то разрабатывается в одной организации (в Consortium), а броузеры — в дру гих (фирмах-разработчиках программного обеспечения). Таким образом, версия языка — это, скорее, временное понятие. Можно говорить о состоянии этой облас ти знания только применительно к определенному отрезку времени, то есть периоду декларирования и определенной версии HTML. Посмот рим, какие изменения претерпевает язык в процессе своего развития.
Элемент для создания звуковых эффектов помещается в секцию Атрибут позволяет выбрать звуковой файл. С помощью атрибута loop задает ся число повторений звукового фрагмента. Обычно используют непрерывное воспроизведение для звукового сопровождения (1оор=-1 или или однократное воспроизведение, если фрагмент является звуковым приветстви ем или комментарием Атрибут определяет громкость.
Стандартные атрибуты: id, class, title.
Устаревшие и нестандартные элементы Элемент, задающий мигание текста. Он был введен в язык, из-за су ществования подобного режима у текстовых мониторов. Компьютерная обще ственность и фирмы-разработчики давно признали его анахронизмом. Правда, в настоящее время эффект мигания достигается другими способами — при помощи программных надстроек.
и Элементы, определяющие границы ненумерованного списка. В настоящее время они считаются устаревшими. Броузеры обрабатывают их так же, как элемент Для примера приведу способ использования DIR:
ПРИМЕЧАНИЕ Примеры использования элементов DIR и MENU можно найти в файле List.htm на прилагае мой дискете. <ХМР> и
Эти элементы еще в версии HTML 3.2 считались устаревшими. Теперь о них ни кто не вспоминает. Вместо них рекомендуется использовать элемент PRE. Это контейнер для комментариев. Некоторые броузеры поддерживают его (текст, расположенный внутри этого элемента, не должен быть виден на экране), но в спецификации языка его нет.
Существует одно ограничение: внутри комментария не должны располагаться другие элементы. Так должно быть, разумеется, только в том случае, когда надо, чтобы все содержимое элемента COMMENT не было видно на экране. Если в ком ментарии присутствовать другой элемент, то его содержимое, отформати рованное соответствующим образом, может быть выведено на экран. С этой про блемой связана другая, похожая: обычный текст не может содержать фрагменты, имеющие вид тегов (с угловыми скобками).
Этот элемент был предназначен для создания текста с HTML, которые должны были восприниматься именно как текст. Все теги, заключенные в этом элементе, воспринимаются броузером только как произвольные символы.
94 _ Глава 3. Основные элементы HTML версии Элемент удобен при обсуждении вопросов, связанных с HTML. В настоящее мя вместо него надо использовать элемент PRE.
Элемент, являющийся контейнером для некоторого объекта. Для объекта броузер должен быть снабжен соответствующей надстройкой (plug-in) Элемент используется по следующей схеме:
данных атрибута" второго атрибута" > Этот элемент может располагаться внутри элемента EMBED и содержать подсказку на тот случай, если броузер не может активизировать объект.
Элемент, создающий бегущую строку. Сам по себе прием интересен, но шего эффекта можно добиться, если удачно подобрать атрибуты.
Фоновый цвет задается обычным способом:
Если фон задан, то этот элемент выглядит как цветная полоса, вдоль которой жит текст. Высоту полосы можно регулировать двумя способами:
в пикселах Если высота полосы задается в пикселах, то можно порекомендовать ее в диапазоне Высоту можно задавать и в процентах. Процент ляет долю от высоты видимой части гипертекста внутри окна броузера.
разумеется, не является постоянной и зависит от размера окна. Если высота полосы достаточно большая, имеет смысл использование атрибута для выравнивания текста по верхнему краю, по середине или по нижнему крак полосы:
Устаревшие и нестандартные элементы Правда, не все броузеры поддерживают этот атрибут. Вот пример полосы зелено го цвета, высотой 50 пикселов, с выравниванием бегущего текста по середине:
Направление движения строки тоже можно менять:
Удачным атрибутом, на мой взгляд, оказался тот, который управляет поведением (behavior) строки. По умолчанию создается обычная бегущая строка, какие быва ют на табло. Дойдя до края экрана (окна), она уходит из поля зрения, а затем по является с противоположной стороны. атрибут задается так:
Второй вариант движения заключается в следующем: строка появляется из-за края окна, достигает противоположного края и останавливается. Атрибут таков:
По третьему сценарию строка не исчезает с экрана, но и не останавливается. Она движется вправо или влево, «отражаясь» от края окна и меняя направление дви жения. Атрибут в этом случае должен быть задан так:
Всю полосу можно сдвинуть по горизонтали вправо:
в пикселах Выше и ниже полосы можно создать пустое пространство:
в пикселах Количество проходов строки по экрану можно ограничить:
Выполнив необходимое число строка остановится. В данном случае отсчет только после того, как пользователь увидит на экране бегущую строку.
Скорость движения задает следующий атрибут:
Если число равно то строка будет еле ползти по с режимом по умол чанию. Если число больше 10, то строка будет двигаться очень быстро. Данный атрибут задает скорость движения как число пикселов, которые проходит строка за каждый шаг.
Существует второй атрибут скорости, определяющий временной интервал (в мил лисекундах) между шагами:
Глава 3. Основные элементы HTML версии С помощью этого атрибута можно заставить строку двигаться рывками.
ПРИМЕЧАНИЕ Примеры бегущих строк можно найти в файле Text.htm на прилагаемой дискете.
Предполагается, что 3... Этот элемент обеспечивает подсветку строке. Но он не поддерживается большинством броузеров, поэтому вать его не рекомендуется.
Элемент, который позволяет оставить часть информации на экране вне сти от того, как прокручивается документ. Такие детали страницы, баннерами, удобны для размещения логотипов, подсказок, заголовков и т. д.
элемент поддерживается не всеми броузерами, и его имеет только в том случае, когда заранее известно, что он будет Существует более надежный способ создания при помощи фреймов.
Глава Объекты и формы Достаточно трудно определить, что на самом деле является объектом, а что нет.
Можно утверждать, что обычный текст объектом не является. С другими деталя ми документов дело обстоит сложнее. Строго говоря, объектами являются гори зонтальные линии, таблицы и окна. Но в HTML существует понятие объекта как некой нестандартной части Web-страницы, которую определил пользователь.
К объектам, например, относятся рисунки. Другая большая группа объектов — программы. При помощи программных кодов создаются нестандартные детали страниц. Для их включения в состав страницы используется универсальный эле мент OBJECT.
Общие атрибуты объектов Элементы объектов (IMG, OBJECT, APPLET) позволяют использовать общие атрибу ты border, width, height, hspace, vspace и ряд стандартных атрибутов.
Как правило, объект занимает прямоугольную область на экране, поэтому одним из самых полезных является атрибут, который определяет ширину рамки (border):
пикселов Рамка нужна не только для красоты. Если объект используется внутри элемента А, то изменение цвета рамки позволяет отличить пройденную гиперссылку от нетронутой.
Размеры объекта можно задавать так:
в пикселах и в пикселах Можно использовать атрибуты выравнивания:
• — по нижнему краю;
• — влево;
• — по центру;
• right" • — по верхнему краю.
98 Глава 4. Объекты и Размеры объекта могут не совпадать с размерами рамки. Тогда справа и слева о" объекта можно создать пустое пространство:
пикселов По аналогии можно создать пустое пространство выше и ниже:
пикселов Рисунки и карты Элемент для создания ссылки на графический файл (image). Он не содержит нечного тега — вся необходимая информация задается при помощи атрибутов Этот элемент является универсальным: с его помощью можно использовать ражения в гиперссылках, вставлять картинки в таблицы, просто размещать рисун ки на Web-странице, создавать маркеры, решать задачи дизайна и т. д.
Необходимым атрибутом является — указатель на файл графики:
на файл" Ссылка на файл представляет собой URL. В некоторых случаях у пользователя может возникнуть желание скопировать в отдельную папку какую-нибудь Web страницу или набор страниц из Интернета. Это позволяет в дальнейшем исполь зовать страницы, не подключаясь к Сети. Скопировать HTML-файлы легко: это сделает броузер. Сложнее с рисунками. Сначала их надо найти в папке кэша, ско пировать в требуемую папку, а затем откорректировать значения всех атрибутов указав для них новый путь.
Очень полезным атрибутом является alt. Он позволяет выводить текст в тех мес тах, где должны располагаться рисунки. Страница может загружаться достаточно долго, и пока графические файлы на подходе, пользователь должен видеть, какие изображения он сможет получить. В некоторых случаях это позволит ему, не до жидаясь окончания загрузки, прокрутить в окне текущий документ или перейти на другую страницу. Вот несколько примеров:
• photo" — для фотографии;
• — если кнопка имеет надпись в виде рисунка;
• com" — если это гиперссылка;
• — для разработчика страницы.
Высоту и ширину области, в которой демонстрируется рисунок, задают при помощи атрибутов height и width. В том случае, когда задается один из этих атри бутов, рисунок масштабируется таким образом, чтобы его высота или ширина соответствовали заданной. Второй размер устанавливается автоматически, в соответствующей пропорции. Таким образом, применение только одного из атри бутов изменяет оба размера рисунка. Если задать явным образом оба атрибута, то рисунок будет масштабироваться по двум осям в соответствии с заданным разме ром. Масштабирование, как правило, ухудшает качество изображения.
Рисунки и карты _ Рисунок можно снабдить и стандартными атрибутами: class, id, longdesc, style, title, атрибутами событий.
Элемент IMG позволяет использовать изображения, отдельные части которых свя заны со ссылками и позволяют выполнять переходы. Такие изображения называ ются картами (тар). В том случае, когда реакцию на щелчок на карте обрабатывает программа, расположенная на сервере, в включается атрибут Иног да его записывают так:
Однако задание значения атрибута совершенно не обязательно.
В том случае, когда карта обрабатывается броузером, используется атрибут usemap.
Он определяет имя карты:
Это имя ставится в соответствие со значением соответствующих атрибутов эле ментов AREA и MAP (см. ниже), которые определяют конфигурацию карты.
Интересно, что задание атрибутов usemap придает элементу IMG свойства, харак терные для элемента А, то есть возможность перехода. Кроме того, мы сталкиваемся со случаем, когда необходимо обязательное совместное исполь сразу трех элементов: AREA, IMG и MAP.
<МАР> Этот элемент необходим для общего определения карты. Внутри него определя ются области карты при помощи элементов AREA и задается имя карты при помо щи атрибута:
Для каждой области карты должен быть создан свой элемент Он не имеет конечного тега. Этот элемент должен включать атрибут, определяющий ссылку:
Адрес" Атрибут для задания текста, заменяющего изображение карты, не является обяза тельным:
подсказки" Он необходим для работы текстовых броузеров, но может быть использован как комментарий.
Атрибуты, определяющие форму области на карте, являются обязательными.
Существует три стандартных вида областей: круг (circle), прямоугольник и многоугольник произвольной формы (polygon).
Для круга необходимо задать координаты центра и радиус (г), выраженные в селах. Координаты отсчитываются от левого края (х) и верхнего края (у) рисунка (рис. Шаблон для задания круговой области таков:
4. Объекты и формь Для определения области произвольной конфигурации задают координаты (х, у] каждого из углов многоугольника, который точно или приблизительно ствует по форме этой области:
y1, x2,y2, Пример многоугольника показан на рис.
При определении прямоугольной области задают координаты верхнего левого правого нижнего углов прямоугольника:
y1, x2,y Рис. 4.1. Задание координат на карте При помощи атрибута (который используется без значений) можно тить переход по ссылке для определенной области карты.
На листинге 4.1 приведен пример страницы на которой размещены карты. Карта, имеющая имя содержит область в виде круга и область извольной формы. Карта содержит область прямоугольной формы.
Листинг 4.1. Web-страница с картами
Изображения карт иллюстрируют способы задания координат областей для переходов Рисунки и карты _ Ha этой странице представлены две карты, которые позволяют выполнять переходы. Для правильного функционирования страницы необходимо проверить все ссылки на файлы, заданные с помощью атрибутов src и href , по зеленому кругу переход к Web-странице издательства "Питер", Желтый многоугольник вернет вас на страницу Красный прямоугольник обеспечивает переход в начало этой страницы, Из листинга видно, что описание областей карты и соответствующий элемент могут размещаться в разных частях страницы. Переходы, выполняемые с помо щью карты, могут происходить как внутри страницы, так и к удаленному ресурсу, ПРИМЕЧАНИЕ Файл и необходимые для него изображения можно найти на прилагаемой дискете.
Для обращения к карте можно использовать и элемент OBJECT, например:
С изображениями карт удобно работать в стандартном для Windows 95 редакторе Paint. Для него изображение должно быть представлено в формате BMP. Этот редактор позволяет использовать сетку в режимах увеличения. Ее можно вклю чить или отключить при помощи комбинации клавиш После выбора ин струмента Выделение указатель мыши приобретает вид тонкого крестика. Таким образом, положение указателя можно легко установить с точностью до одного Глава 4. Объекты и пиксела. В строке состояния редактора будут указаны координаты курсора отно сительно верхнего левого угла рисунка. Значения координат соответствуют тре буемым для атрибута coords величинам и идут в том же порядке (х, у).
Если первоначально изображение создано не в формате GIF, то его можно разовать в этот формат, используя любой графический редактор, поддерживаю щий этот тип файлов. Например, MS Photo Editor, входящий в состав Microsoft Office, или популярный Adobe Photoshop. Достаточно открыть графический файл в редакторе и сохранить его (выполнить команду Сохранить как) в формате GIF, Можно также использовать форматы JPG и PNG.
Реальные карты, созданные с использованием самых разных графических па кетов, смотрятся очень привлекательно. Часто области не имеют четких границ, и неискушенному пользователю карта может показаться последним достижением в области разработки программ или, по крайней мере, хитро придуманным трюком. На самом же деле возможность построения карт была заложена в HTML с самых ранних версий.
Одним из способов применения карты является создание меню страницы. Это обычно горизонтальная полоса, состоящая из цветных прямоугольников с тек стом команд. Щелчок на каждом из прямоугольников переводит пользователя на другую страницу или в другую точку текущей страницы. Преимущество гра фического меню заключается в независимости от используемой кодировки сим волов: буквы всегда будут видны. Такое меню можно сделать как набор несколь ких рисунков, но тогда надо принимать меры к тому, чтобы эти рисунки всегда, при любой конфигурации окна броузера, располагались в ряд. Гораздо проще представить меню в рисунка-карты и разбить его на несколько пря моугольных областей.
Другой популярной областью использования карт является домашняя страница организации. В этом случае необходимые команды и названия рубрик могут рас полагаться в произвольном порядке: так, как надо дизайнеру. В качестве примера на рис. 4.2 приведен эскиз подобной карты.
Почта 7 | windows ] Г Рис. 4.2. Пример карты Элементы объектов Элементы объектов Этот элемент поддерживается броузерами, в которые встроен интерпретатор Java. Простейший шаблон, который позволит включить в HTML-страницу ап плет на языке Java, показан ниже:
Произвольный текст комментария Атрибут code для задания имени файла, содержащего откомпилиро ванную Java-программу. В отличие от других указателей на ресурсы, значение этого атрибута может быть только относительным, то есть апплет должен распо лагаться в той же что и страница. Для задания другого базового пути необ ходимо использовать атрибут codebase. При выполнении апплета создается окно шириной и высотой пикселов. Внутри элемента APPLET может разме щаться произвольный гипертекст. Броузеры, поддерживающие Java, игнорируют все элементы этого гипертекста, включая текст, за исключением элементов (см. ниже). Броузеры, не поддерживающие Java, игнорируют элементы и воспроизводят «понятный» для них гипертекст.
Начальный тег элемента APPLET может быть снабжен дополнительными атрибутами.
Атрибут codebase предназначен для указания места расположения апплетов:
для апплетов" Если этот атрибут не задан, то по умолчанию используется URL-страница.
Атрибут alt выполняет ту же функцию, что и при выводе изображений. Если бро узер не может воспроизвести апплет, то выводится текст, заданный при помощи этого атрибута:
текст" Атрибут name задает имя апплета. Это необходимо только в том случае, когда несколь ко апплетов, расположенных на одной странице, взаимодействуют между собой:
апплета" Атрибуты width и height задают параметры окна апплета: ширину и высоту соот ветственно.
Поскольку для выполнения апплета создается окно, предусмотрено использова ние уже хорошо известного нам атрибута align для управления размещением это го окна. Атрибут может иметь следующие назначения: bottom, middle, right, top.
Вокруг окна можно создать пустое пространство:
пикселов выше и ниже пикселов слева и справа Допустимые стандартные атрибуты: id, class, title, style.
104 Глава 4. Объекты и формы В простейшем случае этот элемент позволяет разместить рисунок:
Атрибуты:
• объекта" — уникальный идентификатор объекта или адрес объекта;
• URL" — ссылка на объект или базовый URL, который позволяет указы вать местоположение объекта при помощи атрибутов archive, classid или data;
• объекта" — URL или относительный адрес, позволяющий загру зить объект;
• адресов" — аналог атрибута data, позволяющий указывать не сколько адресов объекта;
• — тип объекта (используется совместно с атрибутом classid);
• — тип (MIME) объекта;
• declare — объект с таким атрибутом только загружается, но не активизируется;
• "текст — текст, который выводится на пока загру жается объект.
В элементе OBJECT можно также использовать атрибуты: id, class, title, style, tabindex, name, align, width, height, border, hspace, vspace, атрибуты событий.
При размещении объектов необходимо учитывать ситуацию, когда по каким либо причинам броузер не сможет активизировать объект. На этот случай можно предусмотреть специальное текстовое сообщение, которое размещается внутри элемента, как показано ниже:
Элементы объектов Например, при невозможности активизировать объект можно вставить в доку мент изображение, которое в какой-то степени будет его заменять. Это делается по следующему шаблону:
Этот элемент используется для передачи параметров объекту и размещается внутри элемента APPLET или OBJECT. Шаблон его может быть таким:
Или таким:
параметра" параметра Элемент должен содержать одну или несколько пар атрибутов, определяю щих имя параметра (name) и его значение (value). При выполнении апплета прием параметров в нем осуществляется по следующему шаблону:
Атрибут может иметь следующие значения:
• data — параметр передается в качестве строки;
• object — параметр является идентификатором объекта;
• ref — значение параметра является ссылкой (URL).
В том случае, когда значение атрибута valuetype равно ref, с помощью атрибута type можно задать тип параметра:
106 Глава 4. Объекты и фориь Общие атрибуты форм Предполагается, что форма должна содержать определенное число элементов ления: поля ввода, переключатели, кнопки, флажки и т. д. Каждый элемент ления создается при помощи одного из элементов HTML. Для таких предусмотрены атрибуты, влияющие на работу формы.
Большинство элементов формы может принимать определенные значения.
мер, для поля ввода это может быть текст, а для переключателя — элемента который выбран пользователем. Для доступа к этим значениям со стороны граммы необходимо использование атрибута name.
В момент активизации формы часть элементов может иметь значения. В вое поле может быть введена строка, переключатели могут иметь подписи и т. д Для задания этих значений используется атрибут value.
Атрибут позволяет определить, в какой последовательности курсор переходит с поля н;
поле при нажатии клавиши Tab. На элемент с атрибутом tabindex= ется курсор в момент открытия окна броузера.
В элементах управления, содержащих подписи (например, в меню), часто зуются сочетания клавиш, позволяющие перевести фокус определенный мент. Обычно командой служит комбинация клавиши Alt и символа, подчеркну того в названии команды. В формах HTML тоже можно использовать этот при помощи атрибута accesskey. Например:
Атрибут disabled позволяет сделать элемент формы недоступным. Вид при этом не изменяется, но цвет текста становится более бледным.
элемент нельзя выбрать или изменить его значение.
Существуют атрибуты событий, которые непосредственно связаны с формами:
• onfocus — элемент получает фокус (выбирается);
• onchange — информация элемента изменена;
• г — элемент теряет фокус.
Элементы форм Это самый простой элемент, позволяющий создать подобие формы, то есть конст рукции для ведения диалога с пользователем. Он предназначен для ввода строки содержащей текстовые фрагменты, и генерации запроса. Поле ввода можно допол нить строкой подсказки при помощи аргумента prompt:
Эта строка будет отправлена на сервер для активизации поисковой машины. Тео ретически этот метод очень удобен, но на практике его применение ограничивает ся тем, что не все поисковые программы поддерживают стандартный синтаксис запроса. Я имею в виду использование знаков и Поэтому данный прием годится только для некоторых поисковых серверов.
Стандартные атрибуты: class, title, style.
Рис. 4.З. Пример использования элемента ISINDEX Этот элемент необходим для построения достаточно сложных форм. После заполне ния формы и подтверждения ввода со стороны пользователя, введенная информа ция пересылается на сервер и обрабатывается при помощи связан ной с формой. Атрибут action должен указывать на например:
программы" Элементы формы Одним из вариантов обработки формы может быть пересылка данных по элек тронной почте:
домен" С помощью атрибута method можно задать протокол для пересылки данных на сервер. Протокол GET используется по умолчанию, но в большинстве случаев он не удовлетворяет разработчиков, поэтому чаще используется протокол POST.
Атрибут позволяет указать способ кодирования содержимого формы.
Форму заполняют разные пользователи, поэтому для нее предусмотрен атрибут, который позволяет определить список допустимых кодировок:
кодировок" 108 Глава 4. Объекты и формь Можно также определить список допустимых типов данных:
типов данных" Большинство форм снабжаются кнопками, которые позволяют очистить форму или подтвердить (submit) правильность ее заполнения и отослать ные. Чтобы определить программы-сценарии, которые должны после указанных действий пользователя, существуют два атрибута событий onsubmit и on reset.
Стандартные атрибуты: id, class, style, dir, title, target, атрибуты событий Этот элемент позволяет создавать различные части формы, такие как флажки переключатели, поля ввода. Элемент не имеет конечного тега, так как все ры задаются при помощи атрибутов.
Вид элемента определяет атрибут type:
• — создание поля ввода, в котором можно автоматически произвольный текст, используя атрибут value;
• — создание поля для ввода пароля, причем введенная ин формация отображается звездочками;
• — создание флажка;
• — определение одного переключателя. Для создания группы пе реключателей необходимо использовать несколько элементов INPUT. Вот при мер группы из трех переключателей:
<НЗ> Переключатели Атрибут checked определяет, какой из переключателей должен быть выбран по умолчанию. На рис. 4.4 показан внешний вид этой группы переключателей.
Рис. 4.4. Группа переключателей • — создание кнопки произвольного назначения;
• — создание кнопки, щелчок на которой подтверждает ввод информации в форму. Атрибут используется для определения надписи на кнопке;
• — тоже кнопка, но для отмены ввода данных в форму;
Элементы • — создание кнопки с рисунком. Для указания графического файла используется атрибут Атрибут align предназначен для позиционирова ния кнопки с рисунком. Значения атрибута уже неоднократно упоминались:
bottom, middle, right, top. Пользоваться этим атрибутом в данном случае я не рекомендую, так как не все броузеры его поддерживают;
• — средство выбора файла для присоединения к форме. Пользова телю предлагается записать имя файла в поле ввода. Кроме того, броузер авто матически создает рядом с полем ввода кнопку Обзор, которая позволяет запу стить стандартный (для операционной системы) диалог выбора файлов;
• — скрытый от пользователя элемент. Такие элементы использу ются для того, чтобы включить в набор данных формы некую фиксированную информацию. По сути, это определение имени переменной и ее значения.
Остальные атрибуты необходимы для определения свойств элемента. Многие из них являются обязательными, так как обеспечивают обработку данных формы на стороне сервера.
Атрибут name должен присутствовать во всех элементах INPUT, кроме кнопок под тверждения и сброса. Значение этого атрибута определяет имя поля формы, то есть блока данных, введенных в это поле. Программа сервера по этому имени мо жет выделить необходимые данные.
Область применения атрибута нам уже известна. Значение атрибута задает значение по умолчанию для поля ввода или определяет надпись на кнопке.
Выше было показано, как с помощью атрибута checked создать группу переклю чателей. Точно таким же способом этот атрибут может быть использован и для флажков. Его наличие показывает, что флажок должен быть установлен по умол чанию. В отличие от переключателей, одновременно может быть установлено любое количество флажков.
Атрибут size позволяет задать длину поля ввода. Длина выражается в символах, но эта величина может быть задана только приближенно. Чтобы разместить в поле ввода определенное количество символов, потребуется подбор значения ат рибута. При этом никто не может дать гарантию, что все броузеры обеспечат тре буемую длину строки, а не меньшую. Таким образом, длину поля ввода необходи мо выбирать с запасом.
Атрибут может быть использован двумя способами. Во-первых, он определяет максимальную длину строки, которая может быть записана в поле ввода. Во-вторых, с его помощью можно ограничить размер файла, присоединяе мого к форме.
Атрибут readonly позволяет создать элемент, недоступный для редактирования.
Атрибут usemap (см. выше раздел «Рисунки и карты») может использоваться, если в форме создается карта.
Так же, как и в FORM, в элементе INPUT можно указывать атрибут accept.
Допустимые общие атрибуты: accesskey, tabindex, readonly, disabled.
Стандартные атрибуты: id, class, title, style, атрибуты событий.
110 Глава 4. Объекты и Используя элементы FORM и INPUT, можно создать объект, который заменит гичный объект, созданный на основе элемента ISINDEX. Приведенный ниже выполняет те же функции, что и код, посвященный элементу ISINDEX (см. рис. 4.3):
для ввода критерия поиска Этот элемент является контейнером для других элементов формы. Например можно объединить надпись и поле ввода:
адрес:
Стандартные атрибуты: accesskey, id, class, title, style, атрибуты событий.
Пример формы Мы уже знаем достаточно элементов, чтобы создать форму. Часто формы исполь зуются для ввода анкетных поэтому наш пример будет имитировать по добный документ:
Элементы форм
этом примере использована таблица для выравнивания элементов формы. В фор ме есть несколько полей ввода и группа из двух переключателей (рис. 4.5). Для тренировки вы можете заполнить форму информацией, и отослать ее по электрон ной почте (например, себе). Для этого надо ввести в код страницы реальный элек тронный адрес. Заполнив форму, следует щелкнуть на кнопке Отослать. Обратите внимание, что подпись этой кнопки задается в элементе на Web-странице. Под пись кнопки Сброс не задана, поэтому она выбирается из настроек операционной системы. Иными словами, в нерусифицированной версии операционной системы эта кнопка может называться, к примеру, Reset. Рис. 4.5. Пример формы После того как форма будет заполнена и отправлена щелчком на кнопке Отослать, она будет помещена в папку Исходящие почтовой программы. Чтобы действитель но отослать форму, надо отправить это новое электронное послание. Если вы от правляете форму самому то через несколько минут можете проверить свой электронный почтовый ящик: форма в виде письма появится в нем.
Элемент SELECT предназначен для создания списка или меню странице, а элемент OPTION — для создания пункта списка. Пояснить действие этих элементов поможет простой фрагмент, приведенный ниже:
112 Глава 4. Объекты и В результате мы получим список, показанный на рис. 4.6. Оба элемента, щие список, имеют собственные атрибуты.
Рис. 4.6. Меню на Web-странице Атрибуты элемента SELECT могут быть следующими. Атрибут name имя меню (см. выше раздел «Общие атрибуты При помощи атрибута mul ti pl e (который не имеет значений) пользователю разрешается выбрать сразу несколько пунктов списка. Атрибут size определяет количество видимых на эк ране пунктов списка. Когда атрибут size отсутствует, список выглядит обычным образом: вначале видна только первая строка, а щелчок на кнопке со стрелкой рас крывает список. Если значение атрибута задано, то список не раскрывается, а про кручивается, причем пользователь видит только указанное количество строк.
Стандартные атрибуты: disabled, tabindex, id, class, dir, title, style, атрибу ты событий.
Элемент OPTION имеет другие атрибуты. Selected (без значений) определяет, ка кой из пунктов списка должен быть выбран по умолчанию, то есть при загрузке страницы. В списке только один из элементов OPTION может быть помечен таким способом. Атрибут value необходим для обработки данных на стороне сервера.
Выбранный в списке пункт характеризуется значениями возвращенных атрибу тов name и value.
Стандартные атрибуты элемента OPTION: disabled, id, class, lang, dir, title, style, атрибуты событий.
При помощи этого элемента создается область для ввода или просмотра текста.
На рис. 4.7 показан пример такой области, созданный при помощи следующей конструкции:
TEXTAREA
Подобно элементу INPUT, элемент TEXTAREA может иметь атрибут readonly. Это позволяет создать элемент, недоступный для редактирования.
Стандартные атрибуты: disabled, tabindex, id, class, lang, title, style, атрибу ты событий.
Элементы форм для текста Рис. 4.7. Область для ввода или просмотра текста Элементы SELECT и TEXTAREA могут быть использованы не в составе формы, а как самостоятельные детали Web-страницы. Их применение оправдано в тех случа ях, когда надо увеличить плотность размещения данных. При помощи элемента SELECT можно создавать списки, которые получаются более компактными, нежели стандартные списки, рассмотренные в разделе «Списки» главы 3. Область ввода текста также поможет сэкономить место на странице за счет что сколь угод но большой текст будет прокручиваться в окне фиксированного размера.
> > Этот элемент позволяет создавать кнопки так же, как и элемент INPUT. Но, в отли чие от последнего, он является контейнером (имеет конечный тег). Это означает, что содержимое элемента может быть достаточно сложным, например, комбина цией текста и графики (рис. 4.8):
• button — кнопка, щелчок на которой вызывает запрограммированную разработ чиком реакцию;
• submit — кнопка, подтверждающая, что форма заполнена;
• reset — кнопка для очистки формы.
Стандартные атрибуты: accesskey, disabled, tabindex, name, value, id, class, title, style, атрибуты событий.
Эти два элемента предназначены для создания группы полей в форме. Чтобы по нять, как используются эти элементы, рассмотрим небольшой пример.
114 4. Объекты и С помощью элемента FIELOSET несколько элементов объединяются:
видит их заключенными в рамку (рис. 4.9). Внутри группы элементы формы ис пользуются обычным способом.
•Заголовок группы Имя: I j Телефон: j Текст подсказки Рис. 4.9. Группа элементов формы Элемент LEGEND позволяет создать заголовок группы. Поскольку этот элемент яв ляется контейнером, в нем можно размещать другие элементы HTML. Например заголовок группы можно составить из двух строк, если использовать тег .
В этом случае размер шрифта заголовка целесообразно уменьшить.
С помощью атрибута align можно регулировать положение заголовка:
• top — заголовок сверху (как показано на рис. 4.9);
• bottom — заголовок внизу (что не всегда удается реализовать);
• left — заголовок вверху и слева (значение по умолчанию);
• right — заголовок вверху и справа.
Стандартные атрибуты элемента LEGEND: accesskey, id, class, dir, style, title, атрибуты событий.
ПРИМЕЧАНИЕ Примеры элементов форм можно найти в файле на прилагаемой дискете.
Глава Сценарии Многие авторы заинтересованы в том, чтобы их страницы имели современный вид, были многофункциональными и динамичными. Для преодоления ограниче ний HTML применяются разные средства: объекты, каскадные таблицы стилей. Но самым популярным приемом является использование сценариев. Сце нарий — это программный код, который включается в текст страницы в виде ис ходного текста и выполняется броузером при просмотре страницы. Сценарий может быть написан на языке JavaScript, разработанном фирмой Netscape, или на Visual Basic Script (VBScript), разработанном фирмой Microsoft. Поскольку JavaScript является признанным стандартом, и, что немаловажно, стандартом де-факто (этот язык используется на подавляющем большинстве страниц), то мы остановимся на нем при рассмотрении примеров.
Что такое сценарий Этот элемент позволяет отделить текст программы-сценария от остальной инфор мации страницы. Элемент SCRIPT должен включать атрибут language, который определяет язык и может принимать следующие значения:
• — код на языке JavaScript;
• — код на языке • — код на языке VBScript.
Может оказаться удобным хранить тексты программ в отдельном файле. Тогда элемент SCRIPT надо снабдить ссылкой на этот файл:
По традиции файлы, содержащие программы на JavaScript, имеют расширение JS.
Атрибут type тоже может указывать на тип языка, хотя его применение не являет ся обязательным. Чтобы соблюсти все правила, внутри элемента можно помес тить такое определение:
Одной из особенностей сценариев является возможность изменения содержимо го страницы в результате работы программы. Но это только возможность, а не 116 5.
правило. С помощью атрибута defer (который не принимает никаких можно «сообщить» броузеру, что таких изменений внесено не будет. В случаях это позволяет ускорить загрузку страницы.
Из стандартных атрибутов можно использовать атрибут charset.
Элемент SCRIPT (или ряд таких элементов) может располагаться как внутри ции HEAD, так и внутри секции BODY. Если сценарий находится внутри BODY, возможна ситуация, когда какой-либо броузер, не поддерживающий SCRIPT, воспримет программный код как обычный текст и выведет его на экран Чтобы этого не случилось, код сценария вводят как комментарий:
Современные броузеры «знают» этот прием и игнорируют символы рия. Если в тексте сценария нужно ввести комментарий, то для этого другое обозначение: в начале строки вводят две косые черты //.
Сценарий выполняется в момент загрузки страницы, то есть когда на экране видно ее содержание. В листинге представлен пример простейшего Листинг 5.1. Вывод сообщения в окне (1 вариант)
Это обычная страница, но в нее включен сценарий из одной строки. С помощью метода перед загрузкой выводится сообщение (в данном случае привет ствие), показанное на рис. До тех пор пока пользователь не щелкнет на кнопке К, загрузка не будет продолжена. Что такое сценарий ' V • Рис. 5.1. Выполнение сценария Тот же самый сценарий можно выполнить и другим способом: создать функцию и связать ее с событием. Загрузка страницы соответствует событию onload элемен та BODY (листинг 5.2).
Листинг 5.2. Вывод сообщения в окне (2 вариант)
5. Но, разумеется, сценарий не обязательно должен выполняться во время страницы. В разделе «Стандартные атрибуты» главы 3 приведены события, определены для различных элементов HTML.
ПРИМЕЧАНИЕ Тексты страниц можно найти и в файлах и Simple2.htm на прилагаемой дискете.
На тот случай, если страница будет просматриваться в броузере, не сценариев, предусмотрен элемент NOSCRIPT. Современные программы смотра игнорируют его содержимое. Этот элемент можно использовать способами. Во-первых, внутри него можно разместить наподобие следующего: «Ваш броузер не может воспроизвести сценарии, для просмотра этой Во-вторых, внутри элемента можно упрощенную версию страницы, без скриптов. В-третьих, можно создать на другой документ. Элемент NOSCRIPT должен обязательно снабжаться тегом. Из атрибутов допускаются только id и style.
Язык JavaScript В данной книге не приводится полное описание языка JavaScript.
справочную информацию легко найти в Интернете и специализированных издани ях. Есть, например, хороший справочник по JavaScript Дарнелла 1999 г.). Но познакомиться с основными конструкциями языка, наиболее популяр ными его возможностями требуется обязательно, тогда дальнейшее его не составит труда. Надо также что постоянно совершенствуется (пополняется новыми конструкциями). В последующих разделах будет рено несколько полезных примеров.
Синтаксис Как и всякий современный язык программирования, JavaScript имеет традицион ную часть, включающую операторы присваивания, математические и строковые функции, операторы и объектно-ориентированную часть, к которой относятся объекты, события, свойства и методы.
Основной конструкцией языка является функция. Она создается по шаблону:
function { Текст программы выражение Язык JavaScript Обязательными элементами являются: ключевое слово круглые скобки и фигурные скобки, определяющие тело функции. Для выполнения функции до статочно указать ее имя в сценарии, например:
Внутри функции могут находиться вызовы других функций, и, кроме того, функ ция может вызывать саму себя. Если функция указана в качестве значения атри бута события, она выполняется, когда происходит соответствующее событие.
С помощью оператора функция может возвратить определенное значение.
Тогда функцию можно использовать в операциях присваивания или проверки условий.
В программе могут использоваться переменные различных типов. Если перемен ная определена вне функции, она является глобальной, то есть доступной для всех функций страницы. Переменные, определенные внутри функции, являются локаль ными, действующими только в пределах функции. Разные функции могут незави симо использовать локальные переменные с одинаковыми именами. Для опреде ления переменной можно указать ключевое слово хотя это и не обязательно:
var = "red" = "red" Тип переменной определяется в момент присвоения ей значения. Для обозначе ния строковых констант используются двойные или одинарные кавычки. Два типа кавычек необходимы на тот случай, когда строковая константа содержит симво лы кавычек, например:
= пожаловать на сайт компании "Tip Числовые значения могут задаваться разными способами:
count = Х1 3. F5 = Логические переменные могут принимать значения (ложь) и (истина).
С помощью квадратных скобок определяются элементы массивов:
Математические операции выполняются следующим • = var02+3 сложение;
• = 10*(var04-var05) — вычисления со скобками.
Для вызова математических функций используется объект Math:
var06 = Mat h. sqrt(var07) — вычисление значения функции (квадратного корня).
Кроме традиционных операций, можно выполнять операцию поиска остатка от деления, например:
var08=var09 % 120 _ Глава 5.
Существуют унарные операции:
• — увеличение значения переменной на 1;
• --- уменьшение значения переменной на 1.
В условных или управляющих операторах используются операторы сравнения Для составления логического выражения, кроме круглых скобок, допустимы дующие знаки:
• == — равно;
• ! = — не равно;
• > — больше;
• >= — больше или равно;
• < — меньше;
• <= — меньше или равно.
Кроме них, используются логические операторы:
• ! — логическое отрицание;
• | — логическое ИЛИ;
• — логическое И.
Управляющие операторы Цикл do. while позволяет выполнять программный код до тех пока няется условие.
do { строка 1 ;
строка 2 ;
while (условие) Обратите внимание, что тело оператора, так же как и тело функции, ся при помощи фигурных скобок. Строки кода (команды, операции ния, вызовы функций и др.) завершаются (отделяются друг от друга) точкой запятой.
Данный цикл можно записать и так:
while строка 1 ;
строка 2 ;
Цикл используют для того, чтобы выполнить программный код заданное ло раз. В качестве примера показана программа, позволяющая создать массив и заполнить его нулями.
Язык var Massiv = new var n = 25;
for (i = 0;
i < n;
i++) { = 0;
} В данном примере показан цикл с тремя параметрами: начальным значением счетчика, условием выполнения цикла и командой изменения значения счетчика.
Это традиционный способ использования такого цикла, но ни один из парамет ров не является обязательным. Если отсутствует условие, то цикл станет выпол няться до тех пор, пока не будет прерван другим способом. Если отсутствует ко манда изменения значения счетчика, ее может заменить аналогичная команда в теле цикла. Если количество параметров меньше трех, символы «точка с определяют, какой параметр используется.
Есть ряд вспомогательных операторов, используемых совместно с циклами. С по мощью оператора break можно прервать работу любого цикла. Оператор continue позволяет прервать выполнение цикла и начать проверку условия. В зависимости от условия цикл может быть прерван окончательно или его выполнение может быть начато еще раз.
Условный оператор else используется там, где выполнение программы надо поставить в зависимость от значения выражения (условия). Шаблон оператора таков:
if (условие) { строки кода } else { строки кода } Блок else (выполняемый, если условие имеет значение не обязателен.
Оператор,. case тоже является условным, но выражение, представляю щее собой его параметр, не обязательно должно быть логическим. Оно может при нимать любые значения. Важно только, чтобы эти значения были указаны как метки в блоках case. Тогда будет выполнен один из многих вариантов кода. Если значение выражения не равно ни одной метке, выполняется блок default. Ниже приведен шаблон оператора. Обратите внимание, что фигурные скобки исполь зованы только один раз, так как варианты кода разделены операторами case.
switch (выражение) { case :
строки кода case строки кода default :
строки кода 122 Глава 5.
Примеры сценариев Замена изображения Один из самых модных сценариев — замена одного рисунка другим в тот момент когда над рисунком появляется указатель мыши. Таким способом можно изме нять вид надписи (текст или фон), вводить изображения нажатой и кнопки, создавать всевозможные визуальные эффекты, «оживляющие» страницу Листинг 5.3 содержит код подобной страницы. На его примере мы разберем, совершается замена изображений.
Листинг 5.3. Сценарий для замены изображения
Первая кнопка --> Весь сценарий находится внутри элемента SCRIPT. Первые строки кода не имеют прямого отношения к замене графики. Дело в том, что броузеры ранних версий не поддерживают некоторые конструкции JavaScript, поэтому, чтобы предотвратить возникновение ошибки, необходимо проверить тип и версию броузера. Чаще все го код сценария надо защищать от броузера Netscape Navigator 2.x. В нашей про грамме создаются две переменные и которые позволяют определить название и версию броузера соответственно. Для этого указан объект navigator (представляющий используемый броузер). Кроме этого необходимы: • appName — свойство, возвращающее название броузера;
• appVersion — свойство, возвращающее номер версии броузера;
• округления до целого (т. к. номер версии может быть Теперь, проведя проверку этих переменных, мы можем создать переменную которая будет хранить значение п2, если используется вторая или более ранняя версия Netscape Navigator. Значение хЗ обозначает все другие программы про смотра.
124 Глава 5.
Теперь можно приступать к рисункам. Чтобы заменить один рисунок другим надо изменить свойство графического объекта: ссылку на графический файл Поэтому вначале создаются две объектные переменные и Image. Для них определяются необходимые графические файлы:
• — рисунок, который должен появиться под указателем мыши;
• — рисунок, который сразу помещается на страницу, и который ется, когда указатель убран.
Теперь мы имеем два изображения кнопки. Саму кнопку (с надписью «Страница можно увидеть в главе 8 на рис. 8.23, но в данном случае иллюстрация мало чтс объясняет, так как работу сценария нужно наблюдать в действии.
Удобство предварительного определения файлов очевидно: если на много кнопок, целесообразно сосредоточить все ссылки в одном месте. В примере используются две кнопки, поэтому для второй тоже задаются два файл;
формата JPG.
В примере объектом, вид которого мы хотим динамически изменять, ется гиперссылка с содержимым в виде рисунка. Для элемента А задано «указатель мыши сверху»: Естественно, в должна находиться соответствующая функция. Разберем, как функция Ее аргументом является имя элемента IMG, задано с помощью атрибута Таким образом, задается соответствие между объектами, которыми оперирует сценарий, и элементами расположенными на странице. Работа функции тоже начинается с сии броузера, так как в теле функции присутствует метод не ранними версиями Netscape Navigator.
Этот метод работает достаточно интересно. Его аргумент — текстовая строка которая должна представлять собой команду JavaScript. С помощью метода eva] эта команда выполняется. Если в нашем примере такой командой "IMAGEIon. то переменная получит в качестве значения ссылку на фический файл. Это будет не как можно подумать, a URL, например pg Осталось изменить свойство элемента рисунка. Это делается с помощью document и имени соответствующего элемента IMG. Объект document можно считат!
массивом, в качестве индекса которого выступают имена расположенных странице элементов. Ну, а свойство говорит само за себя. Вторая отвечает за возврат рисунка к прежнему виду и работает аналогично Возможно, у вас возникнет подозрение: а не слишком ли сложно ван сценарий? Действительно, кое-что в тексте программы можно упростить Например, в сценарии могла бы выполняться такая команда:
src '= В ней все параметры заданы явно, и работать такая команда может только с ретным элементом IMG.
Примеры сценариев _ Вид функции можно изменить. Пусть, к примеру, у нее будут два аргу мента: имя элемента и имя графического файла:
function { if (version == = risunok;
> Тогда элемент А должен выглядеть так:
<А 1" border=0 height= В этой конструкции имеются три ссылки на графические файлы. Теоретически, для кнопки можно предусмотреть три изображения: «вид после загрузки страни цы», «нажатая кнопка», «отпущенная кнопка». Это позволяет визуально различать кнопки, на которых был выполнен щелчок, и те, которые пользователь оставил без внимания.
Изменение свойств текста Web-страница, текст которой приведен в листинге 5.4, содержит элементы абзаца и заголовка. Для заголовка запрограммированы события мыши так, чтобы цвет и содержание текста изменялись в зависимости от положения указателя.
Листинг 5.4. Сценарий для замены свойств текста
цвета Легко заметить, что в элементе информация о сценарии минимальная: только имена функций. Вся обработка событий сосредоточена в элементе Когда указатель мыши попадает в область заголовка, выполняется Поскольку эта функция не получает никаких параметров необходимо в первую очередь определить, с каким элементом связано событие Для этого создается объектная переменная В тексте программы исполь зуются:
• window — объект, определяющий окно броузера;
• event — объект, содержащий информацию о событиях;
• — свойство, определяющее элемент, в котором произошло событие Переменная связана с конкретным абзацем (элементом Р) при помощи ат рибута id, задающего имя элемента.
Теперь все готово для активных действий. С помощью свойства проверя ется, действительно ли событие связано с элементом Н2. Таким образом, сценарий будет выполняться для всех заголовков второго уровня, расположенных на стра нице. С помощью конструкции color для заголовка задается красный цвет С помощью свойства заменяется текст абзаца. Вторая функция, кото рая выполняется, когда указатель мыши покидает область заголовка, работает же, но константы в ней использованы, естественно, другие.
Обратите внимание, что элемент Н2 расположен внутри элемента TABLE. Дело Е что элемент заголовка занимает всю строку, и слева от надписи остается пус тое пространство (рис. 5.2). Если пользователь поместит указатель мыши на пус тое место, сценарий тоже будет выполнен. Это может показаться неестественным, сценариев так как все привыкли, что реакция возникает, когда выбран конкретный объект (в данном случае надпись). Таблица, которую не видно при просмотре, позволяет ограничить область действия элемента только его текстом.
Установите указатель мыши на надпись Заголовок т Рис. 5.2. Иллюстрация к листингу 5. ПРИМЕЧАНИЕ Этот пример можно найти в файле на прилагаемой дискете.
Метод setTimeout В этом примере мы разберем два полезных приема: использование реально дей ствующих часов и метода setTimeout, без которого реализация многих динамиче ских эффектов оказывается невозможной.
Текст страницы приведен в листинге 5.5, а внешний вид — на рис. 5.3.
...
••. s.
Обноси.,. формат даты:
Текущее время:
Рис. 5.3. Страница с постоянно обновляемыми элементами 128 _ Глава 5.
Листинг 5.5. Страница с часами
с Полный формат Текущее Задача данного сценария — вывести на экран значения даты и времени. Такие тали если и не окажутся очень полезными, украсят страницу, сделают ее «живой» Для вывода данных предусмотрены элементы формы, но могут использоваться другие элементы, важно лишь, чтобы они имели имена (атрибут name). Сценарий начинает выполняться сразу же после загрузки страницы. Это ствлено по следующему шаблону с применением атрибута события:
В функции переменная D1 хранит объект — текущую дату. Для меннои использованы методы и того, чтобы вывести текущее время в заданном формате. Функция позволяет преобразовать формат даты в строковый.
Если бы мы просто определили дату и текущее время, а затем вывели эти на экран, изображение оказалось бы статичным. Оно могло бы измениться толькс в том случае, если бы пользователь перезагрузил страницу. Поэтому надо сделать постоянно работающим. Для этого используется метод setTimeout Примеры сценариев Он позволяет создать паузу в выполнении сценария. Величина этой паузы задает ся в миллисекундах в качестве второго аргумента функции. В качестве первого аргумента выступает функция, которая должна быть выполнена после истечения заданного времени. В нашем случае используется имя той же функции, в которой находится оператор. Это позволяет функции бесконечно вызывать саму себя (рекурсивный вызов), и выполнение сценария не будет останавливаться.
Поскольку изменение данных (времени) происходит один раз в секунду, величи на задержки должна быть меньше секунды. В нашем случае она равна 0,2 с. Метод setTimeout можно использовать для создания таких визуальных эффектов, как бегущая строка, вывод надписи, меняющееся изображение и других.
ПРИМЕЧАНИЕ Эта страница находится в файле на прилагаемой дискете.
Управление формами Когда на странице размещают элементы форм, бывает удобно запрограммировать работу этих элементов. В листинге 5.6 приведен пример страницы с двумя кноп ками, которые управляют содержимым элемента TEXTAREA. На рис. 5.4 показан пример страницы после щелчка на кнопке Заменить текст.
т Домой Избран.
текст Рис. 5.4. Страница с кнопками Листинг 5.6. Страница с кнопками
с продолжение 130 Глава 5. Листинг 5.6 (продолжение)
На этой странице создана форма с именем и с элементами, ми при помощи таблицы. Элемент конечный тег для текста, находящегося в области прокрутки. Однако, поскольку это элемент мы, для изменения его содержимого используется свойство value, а не свойстве innerText, необходимое для элементов, служащих контейнерами текста. При грузке страницы выполняется функция что позволяет ввести в вую область исходную строку. Для кнопок (элемент INPUT типа button) определены события «щелчок мышью» Первая кнопка записывает в текстовую область содержимое определенной в секции SCRIPT. Вторая кнопка удаляет весь текст из мента. Поскольку кнопки стандартные, нам не надо думать о том, как будет деть нажатая и отжатая кнопка: все сделает программа. Но при желании можнс воспользоваться одним из предыдущих примеров и сделать кнопки на основе ри сунков. Но тогда пришлось бы запрограммировать для каждой кнопки несколькс событий.
ПРИМЕЧАНИЕ Эта страница находится в файле на прилагаемой дискете.
Сценарий для одного элемента Сценарий для одного элемента Чтобы использовать сценарии, вовсе не обязательно писать длинные программы.
Текст простого сценария можно поместить внутрь начального тега элемента.
Здесь необходимо указать атрибуты событий, чтобы запрограммировать реакцию элемента на внешнее воздействие.
Основным средством программирования служит конструкция this — объект, обозначающий текущий элемент.
Например, чтобы запрограммировать изменение цвета элемента в зависимости от положения указателя мыши, достаточно одной команды для каждого события:
<Н При необходимости для одного атрибута события можно использовать ко команд JavaScript, но тогда их надо отделять друг от друга точкой с запятой.
Можно также использовать условные операторы и, соответственно, фигурные скобки для разграничения необходимых блоков команд.
Если изменение цвета заголовка имеет чисто декоративную функцию, то управ ление свойствами гиперссылки требуется для подсказки пользователю. Допустим, нас не устраивает традиционный вид ссылки с подчеркнутым текстом. Тогда можно легко изменить вид надписи. В примере, приведенном ниже, для текста ссылки выбран синий цвет (color: blue), полужирное начертание bold), но отменено подчеркивание none). При размещении ука зателя мыши над ссылкой цвет текста меняется на красный:
<А blue;
font-weight: bold;
text-decoration: none" style.
>Текст ПРИМЕЧАНИЕ Эти примеры записаны в файле Simplest.htm на прилагаемой дискете.
Глава Приемы разметки гипертекста Элементы HTML изучены, гипертекстовые редакторы освоены. Достаточно л] этого для того, чтобы начать создавать страницы? Увы, нет. Очень важно проник нуться духом HTML, понять, почему Web-страницы делают именно так, а не че. Кроме того, многие элементы не всегда используются по прямому Самый очевидный пример — таблицы. Они являются непревзойденным организации структуры страницы, когда все детали занимают строго определен ное место, независимо от размеров окна броузера, разрешения монитора и други:
режимов. Рамку таблицы делают, разумеется, невидимой. Эта глава посвящен;
подходам к конструированию страниц.
Стиль и традиции При создании достаточно крупных сайтов автор всегда должен стараться нить ряд требований: загрузка страниц должна происходить по возможности тро, любая страница должна выглядеть одинаково при просмотре в программах, пользователь должен легко разобраться, какая информация есть сайте и как ее найти.
Особенность первых Web-страниц заключалась в том, что изобиловали черкнутыми фрагментами — гиперссылками. У авторов не было нынешних можностей по созданию сложных визуальных эффектов, но было желание литься информацией об интересных местах в Интернете. Такие страницы удобны именно как текстовые документы.
Здесь явно просматриваются тенденции и мода. Точно так же, как в MS-DOS преобладающим фоном был синий, в WWW вначале преобладали серые цы. Разумеется, это мало кого устраивало. Одним из экзотических решений использование черного фона. Это поначалу впечатляло, но, как всякая экзотика, не прижилось. Самым значительным направлением в экспериментах с фоном было использование рисунков «серым по серому». Мне приходилось видеть не мало подлинных шедевров, построенных только на оттенках серого цвета.
В такой манере воспроизводили все: от логотипов фирм до лирических пейзажей.
Отзвуком этой моды является раскраска панели броузера Internet Explorer 3.0:
разработчики этой программы явно хотели, чтобы цветовая гамма панели соот ветствовала виду большинства Web-страниц.
Стиль и традиции Потом HTML и броузеры были усовершенствованы, и начался бум графики. Раз работчики считали своим долгом расположить на своих страницах как можно больше двигающегося, прыгающего и мигающего. Поначалу все это было очень но со временем «зритель» начал уставать. Кроме того, романтические настроения стали уступать меркантильным соображениям: все больше организа ций стали обзаводиться собственными рекламными страницами.
В моду вошли фреймы: левую часть окна отводили для набора ссылок, которые служили путеводителем по сайту — своеобразным меню (рис. Одновре менно вверху и внизу каждой страницы размещали «горизонтальное меню» — набор команд в виде ссылок или рисунков. Такая компоновка страницы оказалась вполне рациональной, но в последнее время от нее отказываются. Возможно, это связано с тем, что из-за разделения окна броузера по вертикали в пропорции 1: сайты стали похожи друг на друга, а получить что-нибудь оригинальное.
Другая причина, на мой взгляд, — экономия места на экране. Дело в том, что про странство окна просмотра в броузере является весьма «дефицитным». Разработ чики всегда стремятся создать как можно больше объектов, которые видны одно временно. Поэтому вертикальная полоса прокрутки в середине экрана многим мешала.
& Entertainment Recreation & Travel TV. Music... Humor...
Reference Classic. Maps.
Manufacturers... Libraries...
Business & Finance Industries. Jobs. US. Canada. UK.
Computers Science Software. Hardware, Graphics...
Рис. Разные подходы к оформлению страниц: фрагмент вертикального меню сайта энциклопедии Британника;
5— часть страницы поисковой машины Vista С точки зрения дизайна многое определяет фон документа. Увлечение рисунками в виде фона тоже оказалось не вечным. С одной стороны, этот прием стал баналь ностью. С другой стороны, существуют чисто технические причины для отказа от рисунков. Дело в том, что разрешающая способность экрана монитора не может быть произвольно увеличена: разработчик должен учитывать, что страница будет просматриваться в режиме 640x480 пикселов. Это очень маленькая величина по сравнению, например, с журнальной полиграфией. Даже один пиксел легко раз личим глазом. Чтобы в таких условиях обеспечить сглаживание шрифтов, надо 134 Глава 6. Приемы гипертекст;
согласовать цвет тени и фона. То же самое можно сказать об ниях красивых кнопок и других графических элементов. Если фон собой рисунок, такое согласование выполнить трудно, поэтому сейчас опять моде однотонные страницы.
Разработчики по-разному подходят к выбору фона. Все, что связано с моло дежной тематикой, располагается на черном фоне: сайты, посвященные музыке компьютерным играм, авангардной моде и т. д. Респектабельность темно-синим фоном (navy): многие солидные компании выбирают этот Пользователи, создающие личные странички, предпочитают фон пастельны:
тонов (зеленый, бежевый, голубой). В общем, творческий поиск не прекращает ся ни на минуту. Результат всех этих исканий оказался вполне закономерным дизайнеры пришли к выводу, что самым естественным решением будет ис пользование белого фона. Очень многие титулованные фирмы в время оформили свои страницы именно таким образом. Если вы на рис. то поймете, почему. На белом фоне четко виден шрифт размера, что позволяет разместить большое число гиперссылок на площади.
В самом низу страницы принято размещать служебную информацию: сведе ния об авторских правах, адрес электронной почты Web-мастера, ссылки и т. д.
Не а табличка Простейшая таблица — это таблица из одной ячейки. Если определить для не< атрибуты border, cellspacing и то получится табличка с рамкой. Код в этом случае может быть таким:
border=4 cellspacing=3 cellpadding=10>
Табличка, которая создается при помощи этого кода, показана на рис. 6.2. Рис. 6.2. Пример таблицы из одной ячейки Заголовок и рисунок рядом Таблица из двух ячеек тоже может пригодиться. Она позволяет, например, стить рядом текст и рисунок. Так можно поступить с заголовком и иллюстрацией названием фирмы и логотипом, подсказкой и рисунком-гиперссылкой.
Мозаичные но, что рамку таблицы в этом случае уместно скрыть, обнулив атрибут Код можно использовать такой:
В результате текст, отформатированный в виде заголовка, и рисунок расположат ся так, как показано на рис. 6.3. Таким способом можно выполнить и более слож ное форматирование поверхности Web-страницы. АОЗТ Две пирамиды Рис. 6.3. Размещение текста и рисунка рядом Мозаичные рисунки Иногда возникает необходимость разбить рисунок на несколько частей. В этом слу чае при помощи таблицы можно обеспечить точную подгонку фрагментов друг к другу. В этом примере рисунок размером 250x250 пикселов разбит на четыре части:
Чтобы между частями рисунка не было зазоров и смещения, необходимо выпол нить ряд условий. Во-первых, значения атрибутов border, cellspacing должны быть равны нулю. В результате рамка таблицы будет невидимой, а пусто го пространства между фрагментами не будет. Во-вторых, надо использовать ко нечные теги ячеек таблицы и проследить, чтобы в ячейках не осталось про белов: должны присутствовать только элементы Рис. 6.4 дает представление об этом приеме. В данном случае для наглядности оставлена рамка таблицы Это несколько противоречит изложенному выше, но может служить еще одним способом представления мозаичного рисунка. Выгоды от использования мозаики следующие. Элементы таблицы загружаются быстрее, и пользователь может их разглядывать во время загрузки. Если рисунок имеет формат GIF, то одну часть мозаики можно сделать с анимацией, а осталь ные — нет, что позволит уменьшить объем файлов. Наконец, отдельные фрагмен ты рисунка могут служить гиперссылками.
Глава 6. Приемы разметки Рис. 6.4. Мозаичный рисунок Объединение ячеек таблицы Многие пользовательские задачи требуют создания таблиц со сложной структу рой. Элемент TABLE оказывается в таких случаях как нельзя более кстати, так позволяет создавать всевозможные формы таблиц. Самое сложное в рамки таблицы — объединение нескольких ячеек в одну. Разберемся, как это На рис. 6.5 показан пример таблицы, в которой объединены несколько ячеек столбца и несколько ячеек строки. Ниже приведен код этого фрагмента страницы
2 Ячейка Ячейка Ячейка лейка Рис. 6.5. Таблица с объединенными ячейками Чтобы объединить ячейки столбца, необходимо использовать атрибут для элемента соответствующего верхней из объединяемых ячеек. Значени< Вложенные таблицы атрибута определяет количество объединяемых ячеек. Теперь начинается самое сложное. При создании элементов, отвечающих за нижние строки таблицы, необ ходимо пропускать элементы ячеек, расположенных на месте объединения. В на шем примере эти строки содержат по одной ячейке, несмотря на то, что в таблице две колонки. Аналогичным образом объединяются ячейки в строке. Для этого используется атрибут colspan. В данной строке также оказалось достаточно одного элемента TD.
Атрибуты и colspan могут использоваться совместно в элементе TD. В этом случае в одну ячейку объединяются ячейки из нескольких столбцов и нескольких строк. Пример такой таблицы показан на рис. 6.6. Она создана при помощи следу ющего кода:
2 3Ь> Обратите внимание: несмотря на то, что объединяются ячейки трех строк (как в предыдущем примере), значение атрибута rowspan увеличено на 1. Ячейка Ячейка Ячейка Рис. 6.6. Одновременное объединение ячеек нескольких строк и столбцов Вложенные таблицы В тех случаях, когда структура таблицы достаточно сложна, можно использовать вложение таблиц. В этом случае одна из таблиц размещается вместо данных одной из ячеек. Для облегчения процесса конструирования можно создавать таблицы по отдельности, а затем переносить вкладываемые таблицы через буфер обмена. Пример вложенной таблицы показан на рис. 6.7. Она создана при помощи следующего кода:
border=
2- 3- 4-
Таблица 2 2- Рис. 6.7. Пример вложенной таблицы Форматирование линии При помощи атрибутов элемента HR можно превратить горизонтальную в ту или иную деталь Web-страницы. По сути, этот элемент создает прямоуголь ник, и только параметры по умолчанию делают его похожим на линию. На рис. 6.8 показаны различные форматы линии. Вертикальную получить несложно, надо лишь задать большую высоту и маленькую например: Задав равные значения для высоты и ширины, полу чим квадрат, который можно использовать для разделения частей страницы маркер при создании списков и даже как элемент гиперссылки, на котором над( щелкать мышью. Задав атрибут ширины в процентном отношении получим черту, которую иногда ставят в конце текста. Преимущество такого под хода — быстрота создания элемента. Эксперименты с лютей высота, длина и цвет внутри линия в качестве цветного прямоугольника Рис. 6.8. Различные варианты форматирования линии Стихотворный Стихотворный текст В стихотворном тексте строфы должны располагаться по центру страницы, а строки выравниваться влево. Чтобы добиться этого эффекта при любом размере окна броузера, удобно использовать элементы CENTER и TABLE, как показано ниже:
border=0> теперь со
Каждая строфа помещается в отдельную ячейку таблицы. Строки должны завер шаться элементом BR. Чтобы отформатировать текст, надо использовать соответ ствующие элементы (например FONT) или создать стиль для таблицы (элемента 140 6. Приемы разметки TABLE) и элемента CENTER. Например, можно определить цвет текста с атрибута: maroon" В каждой ячейке должен присутствовать элемент абзаца Р, чтобы строфы был] отделены друг от друга.
Если стихотворение не имеет названия, в заголовке обычно помещают три звез дочки. После текста можно разместить три горизонтальные линии разной (элементы Все эти детали должны находиться внутри элемента CENTER.
ПРИМЕЧАНИЕ Варианты форматирования таблиц можно найти в файле на прилагаемой дискете Ссылки на файлы мультимедиа Если задаться вопросом, сложно или легко включать в HTML-документы источники данных, то ответ на этот вопрос будет двояким. С стороны, сделать это совсем нетрудно, а с другой стороны, внедрение дийных файлов влечет за собой ряд проблем. Броузеры не имеют средств для воспроизведения таких файлов, но они могут использовать ленное на компьютере клиента программное обеспечение.
Допустим, нам необходимо прослушать на Web-странице звук в формате WAV (звуковой файл Windows). Мы можем создать гиперссылку:
<А Щелкни и слушай а> В том случае, если компьютер оборудован звуковой платой и колонками, если установлен драйвер звуковой платы и если установлена программа для воспро изведения звуковых файлов, мы сможем прослушать содержимое файла. Во всех этих «если» и заключается вторая, негативная сторона вопроса. Нельзя дать гарантию, что у всех пользователей, просматривающих ваши HTML-документы, будет необходимое оборудование и программное обеспечение.
Существует большое количество форматов звуковых и видеофайлов. Это сдер живает распространение мультимедийной продукции, так как трудно дать одно значные и простые рекомендации пользователям, как им сконфигурировать их компьютеры. Зато в случае ограниченного применения, когда можно обговорить условия просмотра (и прослушивания) информации, мультимедиа — вне конку ренции. Например, для пользователей Windows 95 не составляет проблемы про смотреть файл видеоролика в формате AVI. Разумеется, при условии, что в опера ционной системе установлены соответствующие компоненты. Поэтому, если вы знаете, что читатели ваших страниц в этом смысле экипированы, можете вклю чать в состав документов подобные гиперссылки:
<А Щелкни и смотри а> Компоновка Web-страниц Компоновка Web-страниц Как только разработчик Web-страниц создает сайт, количество документов на котором больше двух, перед ним возникает задача определения топологии связей.
Гиперссылки, обеспечивающие переход с документа на документ, образуют в ре альных задачах сложную схему, которую разработчик обязан хорошо продумать.
От того, как соединяются отдельные документы, во многом зависит впечатление гостя, посетившего сайт. Обилие переходов или нерациональное их расположе ние приводит к тому, что человек быстро устает, а сам сайт ассоциируется у него с лабиринтом.
На рис. 6.9 показаны примеры компоновки сайтов. Пользователь, получивший доступ к странице А, вряд ли запутается, двигаясь по подчиненным ей страницам.
Этого нельзя сказать, например, о странице В и связанных с нею страницах. Дви гаться по такому лабиринту — сущее мучение. Никакими дизайнерскими идеями нельзя оправдать запутанность гиперссылок сайта.
В 2 2 ' 3 Рис. 6.9. Примеры сайта: А страница рационально спроектированного сайта;
В — основная страница сайта с нерациональной структурой;
С — «скрытая» страница;
2,3,4 — уровни вложения страниц В таких случаях не помогает даже маркировка пройденных ссылок. Правда, идеаль ных вариантов компоновки существует немного, и они трудно достижимы на прак тике, поэтому автор сайта должен исповедовать принцип разумной достаточности.
Не вызывает сомнений случай, когда вся информация собирается на стра нице. Такой документ может получиться очень большим. Это вполне допустимо.
Но на странице должно быть минимум рисунков, иначе время ее загрузки будет приближаться к бесконечности. По правилам хорошего тона в начале такого до кумента должен располагаться набор местных ссылок для быстрого перехода к разделам документа, а в конце документа и, возможно, рядом с заголовками раз делов предусмотрены ссылки на метку в начале страницы. Такой подход хорош для публикации справочных материалов, содержащих большое количество тек ста. Хотя это не единственный способ представления документов такого рода.
142 6. Приемы разметки гипертекст Другой способ создания удобного для просмотра сайта — использование ми нимального числа уровней вложения страниц и размещение большинства гипер ссылок на одной странице. Пользователь во время «хождения» по сайту постоян но возвращается к основной странице, привыкает к ее виду и имеет возможност удержать в памяти примерную конфигурацию сайта.
Но жизнь вносит свои коррективы в идеальные схемы. Так, многие авторы Web страниц размещают в своих документах многочисленные ссылки на ресурсы Ин тернета. Во многих случаях это полезно и дает пользователю массу ценной ин формации. Но также наилучший способ увести гостя с вашего сайта. Ведь :
тех местах, куда он попадет с вашей помощью, будут другие интересные Не имеет большого смысла создавать на страницах возвращающие ссылки, ситуаций, когда это действительно необходимо. Любой пользователь, поработав ший с броузером, знает, что вернуться к ранее просмотренной странице щелкая на кнопке навигации (Back или Назад). Возвращающие ссылки мы в больших документах или в том случае, когда не обойтись без вложения страниц.
Каким образом пользователь попадает на ту или иную страницу? Что личных Web-страниц, доступ к ним обеспечивает провайдер или организация, которой работает автор HTML-документа. Иными словами, владелец сервер;
размещает на одной из своих Web-страниц необходимую гиперссылку и тарий. Адреса известных фирм публикуются в книгах и журналах по компьютер ной тематике. Кроме того, набрав в броузере адрес название можно с большой долей вероятности попасть на сайт фирмы, чье название известно. Наконец, адрес Web-страницы можно получить, использовав сервер. Но вполне возможна ситуация, когда на каком-либо сервере размещен;
Web-страница, на которую вообще нет гиперссылок. Если адрес страницы доста точно сложный, то вероятность что на нее кто-нибудь случайно наткнется крайне низка. Такая «скрытая» страница (см. рис. 6.9) может быть оплошности разработчика. Но, теоретически, в Интернете могут существовать только скрытые страницы и сайты, но и целые «подпольные» сети (массивы свя сайтов). Дело в том, что проконтролировать наличие «скрытых» на том или ином сервере достаточно сложно. Во всяком случае, ни один тель предприятия, имеющего сервер, не должен питать на этот счет иллюзий. Попав на сайт организации, имеющей на своем сервере «скрытые» невозможно отыскать последние, но, зная адрес такой страницы, легкс установить ее принадлежность, так как начальная часть адреса содержит мацию о домашней странице организации. Эффект «скрытности» можно нять как полезный прием, если необходимо ограничить (до определенного дела) количество гостей сайта. Сложный адрес страницы играет здесь своеобразного пароля, хотя эта система защиты и несовершенна.
Проблема компоновки связей нашла свое отражение и в гипертекстовых редакто рах. В них создаются средства для просмотра существующих связей На рис. 6.10 показано окно редактора AOLpress (фирмы America Online) со схе мой справочной системы, выполненной в виде мини-Web (системы HTML-доку ментов, предназначенной для использования в локальном режиме).
Собственная Web-страница Edit Help Рис. 6.10. Окно редактора гипертекста AOLpress со схемой сайта Обилие связей не должно вас смущать. Во-первых, здесь показаны все ссылки, в том числе и на графические файлы. Во-вторых, в справочных системах создают ссылки для терминов, встречающихся в тексте документа. Понятно, что таких ссылок должно быть много. Зато пользователь имеет возможность сразу получать разъяснения по поводу непонятных слов. И наконец, это реальная система, создать которую под силу только команде профессиональных разработчиков.
Этот пример лишний раз убеждает нас в том, что область применения гипертек ста шире, нежели Интернет (парадокс: куда уж шире). Способ представления ин формации в виде набора связанных HTML-файлов, используемых в локальном режиме, бесспорно имеет право на существование и успешно конкурирует с дру гими, более трудоемкими технологиями.
Собственная Web-страница Большинство пользователей, имеющих постоянное подключение к Интернету, имеют возможность создать личную страничку объемом несколько Мбайт. Это очень хорошая возможность, и грех ею не воспользоваться. С чего начать? Что делать? Думаю, в первую очередь создатель страницы должен ответить для себя на два других вопроса. Во-первых, какова цель создания страницы, какие функции 144 Глава 6. Приемы разметки она будет выполнять? А во-вторых, каким образом люди будут находить эту ницу среди миллионов подобных?
Когда вышла книга «HTML в примерах» («Питер», 1997), я создал которая предназначалась, в первую очередь, для пользователей, желающих стоятельно создавать свои Web-страницы и другие гипертекстовые документы Причем акцент делался на непосредственное использование языка вой разметки HTML, а не на применение сложных гипертекстовых редакторов хотя этот подход тоже обсуждался. В книге был опубликован адрес этой ницы, которая работала одновременно как электронное приложение и как но действующий пример. Поскольку страница была оборудована почтой, я получил много отзывов от читателей. Надо сказать, что идея го» HTML — с Блокнотом и графическим редактором Paint — многим по душе. И почти во всех письмах содержались вопросы по оформлению страниц. Большая часть вопросов относилась к области, которую принято вать «быстрым стартом». Читатели в первую очередь интересовались, как работу по созданию Web-страниц, а с изучением самого языка (как я понял и;
писем) проблем обычно не возникало.
Когда я создавал свою страницу, в моде были фоновые рисунки в серых тонах.
Надо было придумать что-нибудь другое. Но отказываться от серого фона тоже не хотелось: окно броузера, которое служит естественной рамкой страницы, име ет серый цвет. Я выбрал в качестве фона рельефную плитку серебристого цвета (код цвета "silver" был тогда новинкой) с красным узором. В качестве узора подо шли спецсимволы из общедоступного шрифта Я сознательно избегал рисования в графических редакторах и старался использовать только то, что есть под рукой у пользователя Windows. Правда, узор раскрасил в два оттенка красно го: вид фона сразу улучшился.
На странице предполагалось использовать таблицы: в первую очередь, для созда ния рамок вокруг заголовков и ссылок (яркий фон не позволял размещать текст в качестве обычных абзацев). Значит, и другие детали страницы должны были быть выдержаны в этом стиле. В рисунки были добавлены рамки: в основном, это были перекрашенные рамки, которые создаются Internet Explorer и программами для Windows. Получить изображение рамки (как и других элементов пользователь ского интерфейса) очень просто: достаточно нажать клавишу Print Screen и вставить содержимое буфера обмена в качестве нового рисунка в графическом редакторе.
Структура заглавной страницы была создана при помощи невидимых таблиц каждый рисунок или надпись находились в отдельной ячейке. С таким документом очень легко работать, так как в гипертекстовом редакторе невидимые таблицы показаны пунктирными линиями (рис. Взаимное положение дета лей страницы тоже не изменяется в зависимости от режима просмотра (полноэк ранный, оконный) и разрешения монитора.
На титульной странице была оставлена только основная информация (заголовки, фотография, счетчик, электронная почта), а все остальное было распределено по отдельным HTML-страницам и сделано доступным при помощи ссылок.
Собственная Web-страница страница/Вер Рис. 6.11. Все детали размещены в ячейках невидимой таблицы Определенные проблемы возникли при создании полупрозрачных изображений.
Параметры альфа-канала, которые задают степень прозрачности в графических файлах, не используются броузерами. Доступной остается только возможность создания полностью прозрачных фрагментов (одного цвета) в файле формата GIF.
Это натолкнуло меня на мысль об использовании рисунка в виде сетки: часть пикселов (расположенных в шахматном порядке) делается прозрачными. Полу чается, что на странице можно расположить рисунки как минимум в три слоя:
фон страницы, полупрозрачный фон элемента, рисунок внутри элемента. Такой прием позволил создавать надписи-таблички (ссылки):
Для фона ячейки таблицы был выбран рисунок размером 2x2 пиксела (рис. В приведенном выше примере это файл Setka.gif. Две точки этого рисунка-сетки сделаны прозрачными, поэтому сквозь фон элемента просвечивает фон страницы (рис. Содержимое элемента TD - рисунок Mybooks.gif, который представ ляет собой надпись с прозрачным фоном. Эта надпись является и гиперссылкой.
При выборе цвета непрозрачных пикселов необходимо учитывать цвет фона страницы. Использование же самого цвета не дает нужного эффек та. Хорошо, если сетка имеет более темный оттенок, нежели фон. Можно сделать 146 Глава 6. Приемы разметки гипертексте сетку белой. Элемент с таким фоном будет выделяться ярким пятном на темном фоне страницы. Несомненным достоинством фонового рисунка-сетки является и то, что он очень мал — всего несколько пикселов. Наличие таких рисунков прак тически не влияет на скорость загрузки страницы.
в Рис. 6.12. Использование полупрозрачного фона: а— примеры рисунков-сеток (масштаб 800%);
6— элемент с полупрозрачным фоном Ну, а теперь — руководство к действию. Начинайте разработку собственной стра ницы с общего плана и схемы: как страница будет разделена на фреймы, где находиться крупные рисунки и заголовки, какими будут ссылки и цветовая палит ра. В смысле поиска идей можно посоветовать следующее. Некоторые провайде ры создают наборы ссылок для доступа к страницам своих клиентов. Посмотрите, как и что сделано у других, и если вам понравится какой-нибудь эффект, откройте страницу в режиме источника (когда видны элементы HTML), посмотрите код и, при необходимости, оставьте у себя копию. Но не забывайте, что вам доступен целый Интернет примеров. Очень красивые сайты делают известные компании.
Там тоже есть чему поучиться. Бывает, правда, что страница создана программ ным путем, и ее элементы расположены в нескольких очень длинных строках.
Тогда, прежде чем разбираться структуре страницы, надо отделить элементы друг от друга, создав дополнительные строки. Это удобно делать в Блокноте.
Посмотрите сайт своего провайдера. Там наверняка должны быть рекомендации по созданию персональных страниц (как назвать файл титульной страницы, как сделать счетчик посещений и т. д.).
Если требуется разместить на страницах большое количество графики, не следует сосредоточивать много рисунков в одном документе. Загрузка крупных рисунков и фотографий вносит самые большие задержки в просмотр страниц. Поэтому надо принимать меры к тому, чтобы пользователи не ждали подолгу.
Первый шаг в этом направлении — уменьшение объема файлов в формате JPG.
Мне больше всего нравится использовать для этой цели графический редактор MS Photo Editor (он устанавливается вместе с программами MS Office). При сохранении JPG-изображения в новом файле можно выбирать показатель каче ства рисунка в процентах. Чуть-чуть снизив качество, можно получить значитель но меньший размер файла. Правда, качество изображения — понятие условное.
Разместив на экране рядом две фотографии с качеством 100% и 80%, вы вряд ли заметите различия. Но в 60-процентных изображениях ухудшения уже заметны на глаз. Вид фотографий необходимо проверять в двух режимах монитора: High Color и True Color.
Собственная Web-страница Вторая задача — рациональное распределение графики по страницам. Мы уже знаем, что с помощью фреймов можно сделать легко доступным набор страниц (см. рис. 3.15). По этой схеме можно создать галерею графических объектов так, чтобы пользователь загружал только один рисунок (фотографию) по своему выбору.
Сделайте заготовки страниц, а потом заполняйте их деталями и смотрите, что получается. Страницы легко модернизировать и тогда, когда они уже опублико ваны (размещены на сервере провайдера). Как только будет готова новая версия страницы, за несколько минут замените свои файлы на сервере. Для этого можно использовать программу CuteFTP или аналогичную.
Что касается популяризации своего творения, то возможности для этого есть.
Сейчас активно используется обмен баннерами, гиперссылками, а также проводят ся конкурсы на лучшую страницу. Можно также включить адрес своей страницы в базы данных поисковых серверов и всевозможных «желтых страниц». Я бы не стал исключать из рассмотрения и такой вариант, как реклама в средствах массовой информации (газетах, журналах). Тут многое зависит от личной инициативы.
Глава Создание графики Рисунки стали неотъемлемой частью HTML-документов, поэтому просто невоз можно не рассмотреть вопросы применения графики в гипертексте. Тема, с точки зрения дизайна, поистине необъятная, но, к счастью, с практической стороны дело обстоит намного проще. Так же, как и в случае с гипертекстовыми редактора ми, в этой области мы сталкиваемся с большим количеством программных средств, призванных облегчить жизнь (а точнее процесс рисования) авторам Web-страниц.
Графика для Интернета несколько отличается от обычной, и эти отличия будут рассмотрены в данной главе.
Форматы графических файлов Создавать рисунки можно самыми разными способами, используя любые (обще принятые и экзотические) графические пакеты и форматы файлов. Но в конеч ном итоге потребуется преобразовать результаты своей работы в один из стандарт ных для Интернета форматов. Сделать это очень легко: надо открыть ваш рисунок в графическом редакторе и выполнить команду Сохранить как (Save As), выбрав для нового файла формат GIF, JPG или PNG. Из числа наиболее популярных программ для обработки графики хотелось бы упомянуть PhotoShop 5.x фирмы Adobe или Microsoft Photo Editor. Кроме того, для иллюстрации практической работы я выбрал интересный, на мой взгляд, пакет Gif Construction Set for Windows 95, созданный фирмой Alchemy Mindworks (см. приложение Г). Наверное, не у каж дого читателя этой книги будет возможность установить на своем компьютере мощный пакет для рисования и анимации, а также потратить время на его изуче ние, поэтому в приведенных примерах я старался использовать простые графи ческие редакторы, например, MS Paint.
Самым распространенным форматом графических файлов для HTML-докумен тов является GIF (Graphic Interchange Format). Для кодирования цвета в нем ис пользуется 8 бит, то есть допускается 256 различных цветов или столько же града ций серого. Наборы цветов (палитры) могут быть различными. Один GIF-файл может содержать несколько изображений, позволяющих создавать движущиеся или изменяющиеся образы. В этом случае требуется согласование палитр различ ных изображений, составляющих файл. Похожая проблема возникает, если монитор работает в режиме 256 цветов, а на экране одновременно воспроизводят ся несколько изображений с разными палитрами. Очевидно, что для части карти нок качество цветопередачи будет ухудшено.
Форматы графических файлов Само по себе 8-битовое кодирование цвета предполагает, что размер графическо го файла должен быть относительно небольшим. Но, кроме для уменьшения размера файла используется еще и сжатие изображения. Существует две разно видности GIF-файлов: сжатые и обычные, в которых сжатие отсутствует. Компакт ность файла и дополнительные преимущества стали причиной того, что данный формат прочно утвердился в качестве стандарта де-факто для Интернета.
Дополнительное преимущество заключаются в том, что хранение информации в файле может быть организовано таким образом, чтобы при выводе рисунка про исходило чередование строк. То есть вначале будут выводиться строки с номера ми 1, 5, 9 и т. д., затем с номерами 2, и т. д., и так до тех пор, пока весь рисунок не будет отображен. Для наблюдателя такой рисунок вначале кажется нечетким, а затем четкость изображения увеличивается. При передаче данных по сети это особенно выгодно, так как не требует полной передачи файла и позволяет увидеть изображение сразу же, хотя и в несколько размытом виде.
© 2011 www.dissers.ru - «Бесплатная электронная библиотека»
Материалы этого сайта размещены для ознакомления, все права принадлежат их авторам.
Если Вы не согласны с тем, что Ваш материал размещён на этом сайте, пожалуйста, напишите нам , мы в течении 1-2 рабочих дней удалим его.