Рис. 14.22. Настройка параметров нового документа

3. Проследите, чтобы фон документа имел заливку белого цвета.
4. Щелкните на кнопке инструмента Текст (Type), показанного на рис. 14.23, а затем выберите инструмент Текст-маска (Type Mask). Это позволит вам перемещать надпись и свободно манипулировать ею, в то время как обычный инструмент Текст (Type) просто создает текстовую строку с заливкой основным цветом.

Рис. 14.23. Инструмент Текст (Type)

5. Щелкните в пределах холста нового документа.
6. На экране появится окно диалога Инструмент <Текст> (Type Tool), показанное на рис. 14.24. Именно здесь задаются требуемые тип шрифта, размер, величины интерлиньяжа и интервалов, начертание и способ выравнивания текста.

Рис. 14.24. Окно диалога Инструмент <Текст> (Type Tool)

Советую использовать достаточно простой по начертанию прямой шрифт. Причудливые шрифты обычно смотрятся плохо. Попробуйте сами и сделайте вывод, что подходит, а что нет. Для нашего примера я выбрал шрифт Arial.
Параметр Интерлиньяж (Leading) задает интервалы между строками текста, а Интервалы (Spacing) определяет расстояния между отдельными символами, что иллюстрируется на рис. 14.25. Эти параметры обеспечивают вам возможность гибкого управления текстом, особенно в тех случаях, когда вы работаете с программами для создания мультимедиа или собираетесь подготовить для Web-страницы анимацию в формате GIF (о чем будет рассказываться ниже).

Рис. 14.25. Демонстрация различных вариантов выбора месжстрочных и межсимвольных интервалов

Вероятно, из всех параметров, необходимых для получения хороших результатов при работе с текстом, наиболее важен флажок Сглаженный (Anti-aliased). Он обеспечивает сглаживание краев символов за счет использования метода интерполяции и предотвращает появление зазубрин или ступенчатого эффекта. Даже не могу представить ситуацию, в которой не следовало бы использовать данный режим. Возможно, такие случаи существуют, но в данный момент мне ничего не приходит в голову.
7. Выберите шрифт и наберите в окне диалога строку текста. Для нашего примера я взял название оригинала данной книги. Вы, однако, можете ввести любой другой текст на свое усмотрение.
8. Щелкните на кнопке Да (OK).
9. Контуры текста появятся на холсте документа, как показано на рис. 14.26.

Рис. 14.26. Контуры символов готовы для заливки цветом

10. Выберите команду меню Редактирование - Выполнить заливку (Edit - Fill) и залейте текст основным цветом.
11. Щелкните на кнопке инструмента Область (Marquee), затем щелкните на холсте документа, чтобы отменить выделение текста.

Готово! Хотя полученная строка представляет собой изображение, состоящее из точек-пикселей, и у вас нет возможности редактировать ее, вы все же можете определенным образом видоизменить ее и произвести некоторые манипуляции. Используйте команды из подменю Слой - Трансформирование (Layer - Transform), чтобы изменить вид строки, как показано на рис. 14.27, или попробуйте использовать фильтры. Так, в примере, показанном на рис. 14.28, я применил фильтр, вызываемый командой меню Фильтр - Размытие - Размытие в движении (Filter - Blur - Motion Blur).

Рис. 14.27. Строка текста, деформированная с помощью команды Слой - Трансформирование - Перспектива (Layer - Transform - Perspective)

Рис. 14.28. Строка текста, измененная с помощью команды меню Фильтр - Размытие - Размытие в движении (Filter - Blur - Motion Blur)

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

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

1. Откройте любой растровый графический файл с сопроводительного компакт-диска или из вашей коллекции.
2. Создайте новый документ, выполнив команду меню Файл - Новый (File - New).
3. Задайте для холста ширину 7 дюймов (17,5 см) и высоту 3 (7,5 см) дюйма. Помните, что вы всегда можете в дальнейшем обрезать излишки точно по размерам надписи.
4. Выберите инструмент Текст-маска (Type Mask), на значке которого изображен пунктирный контур буквы T.
5. Щелкните в пределах вами холста. На экране появится окно диалога Инструмент <Текст> (Type Tool).
6. Выберите размер шрифта и введите какое-нибудь слово. Для нашего упражнения я выбрал шрифт Arial размером 60 пунктов и набрал слово "Photoshop", как показано на рис. 14.29.

Рис. 14.29. Окно диалога "Текст" с набранным словом "Photoshop"

7. После того как параметры надписи будут заданы, а слово - введено, щелкните на кнопке Да (OK).
8. Щелкните на окне изображения, приготовленного для использования в качестве заливки, чтобы сделать его активным. Экран программы Photoshop должен при этом выглядеть подобно тому, как показано на рис. 14.30.

Рис. 14.30. Текущее состояние рабочих документов

9. Выберите команду меню Выделение - Все выделено (Select - All).
10. Теперь выберите в меню Редактирование (Edit) команду Определить образец (Define Pattern). Программа запомнит выделенную область в качестве образца для узорной заливки.
11. Щелкните на холсте документа с текстовой строкой. Выберите команду меню Редактирование - Выполнить заливку (Edit - Fill).
12. Выберите в раскрывающемся списке Стиль (Use) окна диалога Заливка (Fill) вариант Образец (Pattern), как показано на рис. 14.31.

Рис. 14.31. Окно диалога Заливка (Fill)

13. Щелкните на кнопке Да (OK).

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

Об этом мы уже рассказывали в разделе, посвященном подготовке файлов формата GIF с прозрачным фоном.
Вы можете преобразовать файл в формат JPEG или GIF. Одной из приятных особенностей текстовых строк является то, что они обычно, хотя и не всегда, располагаются на белом фоне. Если у вашей Web-страницы также белый фон, то нет необходимости проделывать все этапы экспортирования файла в формате GIF89a. Просто проследите, чтобы фон строки был белым, и сохраните ее в виде обычного GIF-файла.
Создавая Web-страницы и готовя код на языке HTML, сохраняйте работу как можно чаще, поскольку новые проблемы и новые затруднения будут появляться все снова и снова, причем чаще всего тогда, когда вы их менее всего ожидаете и испытываете абсолютную уверенность, что все нормально, но почему-то не работает.
Соберитесь с духом. Без сомнения, вы единственный и неповторимый компьютерный художник-график. Но я не знаю ни одного разработчика Web-графики, который бы прошел весь процесс подготовки изображений для Web-узлов, ни разу не заплутав и не столкнувшись с непостижимыми на первый взгляд проблемами или кажущимися непреодолимыми трудностями. Истинного профессионала Photoshop отличает то, что он обычно видит как минимум 10 способов выполнения одной и той же задачи. Продолжайте эксперименты и никогда не сдавайтесь.

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

1. Создайте новый документ. Придайте его холсту квадратную форму со стороной размером в 1 дюйм (2,5 см) и выберите в качестве заполнителя прозрачный фон, как показано на рис. 14.32.

Рис. 14.32. Настройка параметров в окне диалога Новый (New)

2. Выберите инструмент Овальная область (Ellipse Marquee), показанный на рис. 14.33.

Рис. 14.33. Инструмент Овальная область (Ellipse Marquee)

3. Растяните рамку в пределах холста. Она не должна заполнять весь холст, но постарайтесь сделать ее круглой. Возможно, вы посчитаете нужным удерживать клавишу Alt (Windows) или Cmd (Mac OS), чтобы рамка растягивалась от центра к краям квадрата. Кроме того, можно удерживать клавишу Shift. Это поможет построить правильную окружность.
4. Увеличьте масштаб примерно до 200% и залейте выделенную область текущим основным цветом - черным.
5. Выберите команду меню Выделение - Сохранить область (Select - Save Selection). В появляющемся при этом окне диалога, показанном на рис. 14.34, щелкните на кнопке Да (OK).

Рис. 14.34. Окно диалога Сохранить выделенную область (Save Selection)

6. Пока выделенная область активна, выберите команду меню Выделение - Модификация - Сжать (Select - Modify - Contract).
7. Введите число 5, как показано на рис. 14.35, и щелкните на кнопке Да (OK). Это заставит границу области сжаться, отодвинувшись внутрь на 5 пикселей, как видно из рис. 14.36.

Рис. 14.35. Окно диалога Сжать область (Contract Selection)

Рис. 14.36. Сжатая выделенная область

8. Выберите новый основной цвет. Для нашего упражнения я использовал красный. Залейте им сжатую выделенную область основным цветом.
9. Выберите команду меню Выделение - Загрузить область (Select - Load Selection). Так как была сохранена только одна выделенная область, просто щелкните на кнопке Да (OK) в появившемся окне диалога, показанном на рис. 14.37. Исходный круг будет выделен точно по периметру.

Рис. 14.37. Окно диалога Загрузить выделенную область (Load Selection)

10. В меню Фильтр (Filter) выберите команду Сферизация (Spherize) и щелкните на кнопке Да (OK) в появившемся окне диалога. В итоге у вас должно получиться что-то похожее на рис. 14.38.

Рис. 14.38. Кнопка после применения сферизации

11. Убедившись, что кнопка все еще выделена, выберите команду Фильтр - Освещение - Эффекты освещения (Filter - Render - Lighting Effects).
12. В окне диалога Эффекты освещения (Lighting Effects), показанном на рис. 14.39, настройте параметры источника света, перетаскивая маркеры, расположенные по периметру управляющего эллипса в поле просмотра. Идея состоит в том, чтобы с помощью света придать кнопке объемный вид. Используйте рис. 14.39 в качестве эталона при настройке параметров освещения и перетаскивайте маркеры управляющего эллипса, пока вид кнопки вас не устроит. В завершение щелкните на кнопке Да (OK).

Рис. 14.39. Окно диалога Эффекты освещения (Lighting Effects)

13. Теперь последний штрих, призванный завершить придание кнопке трехмерного вида. Выберите команду меню Фильтр - Освещение - Блик (Filter - Render - Lens Flare). Появится окно диалога, показанное на рис. 14.40.

Рис. 14.40. Окно диалога Блик (Lens Flare)

14. Настройте положение блика, перетаскивая перекрестье в поле просмотра окна диалога и расположив блик в левом верхнем углу кнопки, как показано на рис. 14.40. Кроме того, советую вам установить переключатель 105 мм (105 mm Prime). Это обеспечит более широкий блик. Можно настроить яркость блика, перетаскивая ползунок в верхней части окна. Я остановился на отметке 105%. Попробуйте установить большую или меньшую яркость. Сделайте, как вам понравится.
15. Завершив настройку, щелкните на кнопке Да (OK).

Вам остается уменьшить масштаб до величины 100% и посмотреть, что получилось. Если кнопка вас устаивает, сохраните ее в файле формата GIF с прозрачным фоном (или в виде обычного GIF-файла, если кнопка будет размещаться на странице с белой заливкой) и включите в состав HTML- документа.
Если вы хотите уменьшить размер кнопки, выберите команду меню Изображение - Размер изображения (Image - Image Size) и введите новые значения высоты и ширины изображения, как показано на рис. 14.41. Если требуется изменить размер только по одной из координат, скажем ширину, сбросьте флажок Сохранить пропорции (Constrain Proportions) в нижней части окна диалога. Имейте, однако, в виду, что после сброса указанного флажка изображение может растянуться или сжаться.

Рис. 14.41. Окно диалога Размер изображения (Image Size)

Кнопки с двумя фиксированными состояниями меняют вид, когда на них устанавливается указатель мыши. Это кажется чудом, но на самом деле все делает небольшой сценарий JavaScript.
Я не собираюсь в этой книге углубляться в дебри JavaScript, но поместил фрагмент описания Web-ресурсов в кодах данного языка (позаимствованный с Web-узла издательства Hayden - http://www.hayden.com) на сопроводительный компакт-диск. Этот фрагмент, если его включить в HTML-документ, обеспечит в нужный момент замену одного изображения кнопки на другое.
Основная идея состоит в том, что, если после загрузки документа в броузер "несчастная жертва", обратившаяся к вашему Web-узлу, укажет курсором на какую-то из кнопок или на иной элемент оформления, связанный со сценарием JavaScript, броузер будет знать, что следует вывести на экран другой вариант изображения этой кнопки или элемента оформления.
Иными словами, в момент размещения указателя мыши над одним из объектов, специально описанных в документе, броузер выводит на экран другой вариант изображения этих участков. Обычно, поскольку изображения малы по размерам, это происходит очень быстро, так что кнопка меняет вид, имитируя эффект нажатия.
Первое, что следует сделать, - это изменить вид кнопки так, чтобы у вас получилось два варианта ее графического образа: в обычном и в активном ("нажатом") состоянии.
Существует множество способов изменения внешнего вида кнопки, но в данном случае воспользуемся следующим:

1. Если вы не закончили предыдущее упражнение, откройте файл Button.jpg, помещенный на сопроводительный компакт-диск.
2. Увеличьте масштаб изображения примерно до 300%, чтобы лучше видеть то, что будете делать.
3. Выберите инструмент Волшебная палочка (Magic Wand), показанный на рис. 14.42.

Рис. 14.42. Инструмент Волшебная палочка (Magic Wand)

4. Щелкните на белом поле изображения. Все оно будет выделено, как показано на рис. 14.43.

Рис. 14.43. Выделение фона инструментом Волшебная палочка (Magic Wand)

5. Выберите команду меню Выделение - Инверсия (Select - Inverse). Результат показан на рис. 14.44.
6. Выберите команду меню Выделение - Модификация - Расширить (Select - Modify - Expand). Введите число 2 в окне диалога, показанном на рис. 14.45.

Рис. 14.44. Инвертированная выделенная область

Рис. 14.45. Окно диалога Расширить область (Expand Selection)

7. Выберите цвет, с помощью которого вы хотели бы изобразить активное состояние кнопки. Для нашего упражнения я выбрал темно-синий.
8. Выберите инструмент Заливка (Paint Bucket) и щелкните на белом поле внутри выделенной области, как показано на рис. 14.46.

Рис. 14.46. Инструмент Заливка (Paint Bucket) за работой

Инструмент Заливка (Paint Bucket) зальет белую часть выделенной области, оставив саму кнопку нетронутой, как показано на рис. 14.47.

Рис. 14.47. Заливка выделенной области произведена

Теперь обратимся к самой сложной части работы - к JavaScript. Если вы взглянете на содержимое папки Web, вложенной в папку PROJECTS\ CHAP14 компакт-диска, то найдете там два типа кнопок, сохраненных в файлах с именами Button01.jpg и Button1.jpg. На эти кнопки уже сделаны ссылки в коде JavaScript, содержащемся в файле под именем Test.htm.
Все, что требуется от вас, - это запустить броузер (считаем, что вы используете достаточно новую версию броузера) и открыть файл Test.htm.
Если вы захотите испытать приведенный фрагмент кода на языке JavaScript, то я специально выделил те строки, которые должны быть заменены. Просто поместите фрагмент кода в заголовок HTML-документа, и можете его использовать.

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

• GIF Builder (Macintosh);
• GIF Construction Set (Windows).

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

1. Создайте новый файл. Придайте ему ширину в 3 дюйма и высоту в 2 дюйма. Выберите цветовой режим Градации серого (Grayscale) в окне диалога Новый (New).
2. Залейте холст текущим основным цветом (черным), как показано на рис. 14.48.

Рис. 14.48. Состояние работы на данный момент: пока что сделано не слишком много

3. Щелкните на кнопке инструмента Текст (Type) и выберите на раскрывшейся панели инструмент Текст-маска (Type Mask).
4. Щелкните на холсте нового документа. Появится окно диалога Инструмент <Текст> (Type Tool), показанное на рис. 14.49.

Рис. 14.49. Окно диалога Инструмент <Текст> (Type Tool)

5. Вы можете ввести любое слово или фразу, какие вам придутся по вкусу. Я выбрал фразу "in 14 days".
6. Примените к тексту заливку белым (фоновым) цветом.
7. Используйте команду меню Выделение - Сохранить область (Select - Save Selection), чтобы сохранить текущую выделенную область, или, иными словами, огибающую символов текста. В появившемся окне диалога просто щелкните на кнопке Да (OK).
8. Щелкните кнопкой мыши в пределах окна документа, чтобы отменить выделение текстовой строки.
9. Поверните холст документа с помощью команды меню Изображение - Повернуть холст - 90° против часовой (Image - Rotate Canvas - 90° CCW), как показано на рис. 14.50.

Рис. 14.50. Повернутый холст документа

10. Выберите команду меню Фильтр - Стилизация - Ветер (Filter - Stylize - Wind). Появится окно диалога, показанное на рис. 14.51. По умолчанию должны быть выбраны как раз нужные нам параметры. Если это не так, установите переключатель Метод (Method) в положение Ветер (Wind), а переключатель Направление (Direction) - в положение Слева (From the left). Внимательно рассмотрите изображение в поле предварительного просмотра. Если вас устраивает то, что вы увидите, то щелкните на кнопке Да (OK). Если после щелчка на кнопке Да (OK) что-то в полученном изображении перестанет вас устраивать, не забудьте сразу же применить команду Редактирование - Отменить (Edit - Undo).

Рис. 14.51. Окно диалога Ветер (Wind)

11. Поверните холст изображения в нормальное положение, выбрав команду меню Изображение - Повернуть холст - 90° по часовой (Image - Rotate Canvas - 90° CW).
12. Загрузите сохраненную выделенную область, выбрав команду меню Выделение - Загрузить область (Select - Load Selection). Результат показан на рис. 14.52.

Рис. 14.52. Строка с выделенными символами

13. В меню Выделение (Select) выберите команду Модификация - Сжать (Modify - Contract). В появившемся окне диалога введите 1.
14. Заполните выделенную область текущим основным цветом (черным).
15. Переключите изображение в режим Индексированные цвета (Indexed Color), выбрав команду меню Изображение - Режим - Индексированные цвета (Image - Mode - Indexed Color).
16. Чтобы воспроизвести эффект пламени, выберите команду меню Изображение - Режим - Таблица цветов (Image - Mode - Color Table). Это последняя команда в подменю Режим (Mode).
17. В окне диалога Таблица цветов (Color Table), показанном на рис. 14.53, выберите Черное тело (Black Body) и щелкните на кнопке Да (OK) .

Рис. 14.53. Окно диалога Таблица цветов (Color Table) с выбранной таблицей Черное тело (Black Body)

18. Теперь следует применить к "пламени" фильтр, чтобы оно не выглядело столь прямолинейным. С помощью инструмента Многоугольное лассо (Polygon Lasso) выделите "языки пламени", как показано на рис. 14.54.

Рис. 14.54. Применен инструмент Многоугольное лассо (Polygon Lasso)

19. Выберите команду меню Изображение - Режим - Цвет RGB (Image - Mode - RGB Color). Не забывайте, что фильтры не работают в режиме Индексированные цвета (Indexed Color).
20. Примените фильтр Рябь (Ripple), выбрав команду меню Фильтр - Деформация - Рябь (Filter - Distort - Ripple). В окне диалога Рябь (Ripple), показанном на рис. 14.55, установите величину Эффект (Amount) в 259. Увеличивайте это значение, чтобы кривизна языков пламени стала более выраженной, и уменьшайте, чтобы кривизна была менее заметна (см. рис. 14.56). В заключение щелкните на кнопке Да (OK) .

Рис. 14.55. Окно диалога Рябь (Ripple)

Рис. 14.56. Пылающая текстовая строка

21. Выберите команду меню Файл - Экспорт - GIF89a (File - Export - GIF89a) и сохраните файл в формате GIF. Задайте файлу имя типа fire1.gif. Это поможет вам запомнить, какая версия изображения записана в данном файле, когда вы продолжите изменения формы пламени.

Самая сложная часть работы позади. Текст должен выглядеть так, будто он горит. Все, что остается сделать, это повторять шаги 19 и 20, пока не будут сформированы 3 или 4 кадра.
Задача углубления в нюансы применения программ GIF Builder или GIF Construction Set выходит за рамки данной книги. И хотя приложение GIF Construction Set выглядит сложнее, чем GIF Builder, освоить ни ту, ни другую программу не составляет труда. Идея анимации состоит в том, чтобы загрузить кадры изображений в прикладную программу, упорядочить их, указать, сколько раз подряд вы хотели бы запустить анимацию, и сохранить последовательность кадров в виде файла. Это действительно просто, а если у вас появятся затруднения, то обе программы снабжены подробной документацией.
Если вы захотите взглянуть на анимацию в формате GIF в действии, откройте в броузере файл Test.htm. Кроме того, в папку \CHAP14\WEB помещены и файлы кадров, составляющих анимацию, имена которых начинаются со слова Fire.

Эта книга не посвящена описанию языка HTML. На эту тему и без того имеется вполне достаточно публикаций (среди которых есть и откровенно плохие). Если вы на самом деле интересуетесь языком HTML, то советую приобрести специальную литературу.
Как уже говорилось, я собираюсь дать лишь самый минимум сведений о HTML, основу, достаточную для начала самостоятельной работы и углубления знаний. Я также поместил на сопровождающий книгу компакт-диск фрагмент документа на языке HTML, написанный по материалам данной главы. Вы найдете его в файле под названием Test.htm в папке \CHAP14\WEB компакт-диска. Не стесняйтесь разобрать текст кода по косточкам, испытать его, хорошенько изучить, внести в него изменения, а если вы уже имеете опыт написания документов на языке HTML, то и полностью отбросить этот пример, заменив его своим.
Перво-наперво уясните для себя: в HTML нет ничего сложного. Он не относится к числу загадочных языков программирования. Его предназначение - разметка гипертекстовых документов. Используя простые по смыслу метки, или теги, вы указываете, как должен выглядеть текст на экране, где должно появиться изображение, а также перечисляете адреса других узлов и домашних Web-страниц, с которыми должна обеспечиваться связь.
Для написания документа на языке HTML не требуется специального программного обеспечения. Подойдет любой текстовый процессор, от SimpleText, Notepad (Блокнот), до Word 7.0. Вся хитрость состоит только в том, чтобы сохранить документ в формате "только текст" с расширением .htm. Это будет означать, что любой броузер, такой как Internet Explorer, Netscape Navigator или броузер сети America Online, сможет прочитать его.

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

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

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