Текст книги "Интернет. Быстрый старт"

<р style="text-indent: 5; margin-left: 3; margin-right: 4">

То есть тэг <р> получает параметр style, значением которого будет одна длинная строка, в которой сначала указывается отступ красной строки, а затем – отступы всего абзаца слева и справа. По умолчанию в качестве единиц измерения используются миллиметры.

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

<blockquote>

<р>Это моя первая Web-страница</р>

</blockquote>

При двойном нажатии этой кнопки добавится еще одна пара тэгов <biockquote>. И так далее.

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

<p>&nbsp;&nbsp;&nbsp; Это моя первая Web-страница</р>

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

И последний блок органов управления диалогового окна для установки атрибутов абзаца носит название Spacing (Интервал), он предназначен для установки самых различных интервалов. Поле ввода Before (Перед) позволяет указать интервал перед началом абзаца, а поле After (После), естественно, интервал после него. Таким образом, эти поля устанавливают интервалы между абзацами. Необходимо отметить, что если эти параметры применяются к нескольким абзацам, то расстояние между ними будет складываться из отступа After (После) одного абзаца и отступа Before (Перед) последующего абзаца. Поле ввода Word (Слово) предназначается для указания величины пробела между отдельными словами, а список Line spacing (Междустрочный отступ) позволяет указывать междустрочный отступ. Для него используются три значения: Single (Одинарный) – обозначает обычный отступ, 1.5 lines (Полуторный) – предназанчен для установки полуторного отступа и Double (Двойной) – для двойного.

Если вы установите значения в данном блоке и примените их к текущему абзацу нажатием кнопки ОК, то реализация этих условий будет выполнена при ПОМОЩИ тэга <р style="word-spacing: 4; line-height: 150 %; margin-top: 5; margin-bottom: 5">, где word-spacing указывает расстояние между словами, line-height – междустрочный интервал, a margin-top И margin-bottom – отступы перед абзацем и после него, соответственно.

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

<p><span style="background-color: #FFFF00">Это моя первая Web-страница!</span></p>

Как вы видите, цвет задается в тэге <span> и определяется при помощи сочетания шести шестнадцатеричных цифр. Это сочетание указывает RGB-код цвета: первые две цифры – насыщенность красного цвета, вторые две – насыщенность зеленого и, наконец, последние две – насыщенность синего.

Для определения цвета самого шрифта используется кнопка Font Color (Цвет шрифта). Если вы назначите для своей строки светло-зеленый цвет, обозначаемый как Lime, то ваша строка будет реализована с помощью следующей конструкции:

<p><font color="#00FF00">Это моя первая Web-страница!</font></p>

В этом случае, как нетрудно заметить, применяется уже знакомый вам тэг <font> с параметром color. А сам цвет все так же задается при помощи комбинации из шести цифр.

Очень часто отдельные разделы документа отделяются друг от друга посредством горизонтальных линий. Для вставки горизонтальной линии в то место, где расположен текстовый курсор, применяется команда меню Insert/Horizontal Line (Вставка/Горизонтальная линия). HTML-тэг, применяемый для вставки горизонтальной линии, выглядит как <hr>. Но вставленная линия является объектом, следовательно, у нее есть свои свойства, которые поддаются установке и редактированию. Для этого необходимо выделить вставленную горизонтальную линию и выполнить команду меню Format/Properties (Формат/Свойства) или команду контекстного меню, вызываемого щелчком правой кнопки мыши, Horizontal Line Properties (Свойства горизонтальной линии). При этом активизируется одноименное диалоговое окно для задания свойств горизонтальной линии. В поле Width (Ширина) вы можете указать ширину линии, а затем одним из зависимых переключателей – единицу измерения. Длина линии может быть задана как в пикселах, так и процентах ширины окна просмотра браузера удаленного пользователя. В последнем случае, при изменении пользователем размеров окна просмотра ширина горизонтальной линии также будет пересчитана. В поле Height (Высота) указывается толщина линии в пикселах. По умолчанию она составляет два пиксела. С помощью группы переключателей Alignment (Выравнивание) вы можете указать, как будет выравниваться линия в окне просмотра. Переключатель Left (По левому краю) прижимает ее к левому краю, Center (По центру) позволяет отцентрировать ее, а переключатель Right (По правому краю) прижимает вашу линию к правому краю окна просмотра. Если включен переключатель Solid line (no shading) (Непрерывная линия (без оттенения)), то линия отображается плоской, без трехмерного выделения тенями. Для указания цвета линии используется список цветов Color (Цвет). После установки значений свойств линии, отличных от заданных по умолчанию вариантов, вы увидите, что тэг, объявляющий линию, изменился. Он приобрел следующий вид:

<hr size="3" width="80 %" color="#00FFFF" align="left" noshade>

В параметре size указывается толщина линии в пикселах, параметр width ответственен за указание длины линии, color, как нетрудно догадаться, указывает ее цвет, align – выравнивание, а наличие параметра noshade убирает трехмерные тени. Для параметра align существует три значения: left, right и center, которые устанавливают линию по левому краю, прижимают к правому краю или располагают по центру окна просмотра, соответственно.

Ссылки и графика

Что главное в гипертексте? Главное в нем то, что он – «гипер» и позволяет реализовывать ссылки на другие документы, которые могут помочь при работе с основным текстом, т. е. то, что всегда называли гиперссылками. Это сердцевина и основа, альфа и омега World Wide Web. Гиперссылки разделяются на два типа – внешние и внутренние. Внешние ссылки позволяют удаленному пользователю переходить к другим HTML-документам, а внутренние служат для быстрого передвижения внутри одного документа. Простейший пример организации внутренних ссылок – это создание оглавления содержимого Web-страницы, в котором каждая строка является ссылкой на начало части документа.

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

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

Итак, приступаем к созданию гиперссылок. Для вставки в текст содержимого Web-страницы гиперссылки необходимо выполнить команду меню Insert/Hyperlink (Вставка/Гиперссылка) или нажать кнопку Hyperlink (Гиперссылка) с изображением земного шара и звена цепи, которая находится на основной инструментальной панели. При этом активизируется диалоговое окно Create Hyperlink (Создать гиперссылку), показанное на рис. 8.6.

Рис. 8.6. Диалоговое окно Create Hyperlink

В том случае, если при создании гиперссылки в макете Web-страницы не было выделенного текста, гиперссылка будет вставлена в виде обычного URL. Если же был выделен текст, то ссылка накладывается прямо на него.

Для того чтобы указать URL гиперссылки, т. е. адрес точки перехода, его надо написать в строке URL. Если же ссылка должна указывать на документ, входящий в состав сайта, его можно выбрать из основного списка диалогового окна. Если на память проектировщик Web-страницы не может его написать, то можно воспользоваться дополнительными кнопками, расположенными правее строки ввода URL. Кнопка с изображением земного шара и лупы запускает браузер, установленный в системе по умолчанию. При этом проектировщик страницы может найти необходимый документ обычными средствами Интернета. При закрытии браузера, как правило, URL последней просмотренной страницы автоматически подставляется в поле ввода URL. В том случае, если нужный ресурс находится на локальном компьютере, следует нажать кнопку с изображением папки и лупы, которая активизирует обычный диалог открытия файла. А третья кнопка с изображением конверта предназначена для создания гиперссылки, которая позволяет отсылать электронное письмо. При нажатии на эту кнопку появляется дополнительное диалоговое окно. В единственном поле ввода необходимо ввести адрес, по которому будет отправлено письмо. Как вы уже знаете, World Wide Web по большей части основан на протоколе HTTP, а электронная почта реализуется при помощи протоколов POP3 и SMTP. Следовательно, Web-страницы и электронная почта являются разными вещами. Но в том-то и вся прелесть нынешнего Интернета, что все различные протоколы интегрированы в единое целое. Вам же при этом не надо вдаваться в тонкости, вы можете просто творить. На самом деле, браузеры в чистом виде не приспособлены к передаче электронной почты. Поэтому, как только удаленный пользователь щелкает мышью на ссылке с адресом электронной почты, запускается почтовая программа, установленная в его системе по умолчанию. Текст письма он набирает самостоятельно, а адрес подставляется тот, который указан в ссылке.

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

Выпадающий список Bookmark (Закладка) из группы элементов управления Optional (Необязательные) предназначен как раз для создания внутренних ссылок, которые в FrontPage 2000 реализуются при помощи закладок. Каждая закладка вставляется в необходимое место текста при помощи команды Insert/Bookmark (Вставка/Закладка). Так же, как и в Microsoft Word, любая закладка может иметь свое имя. Но нам это не важно. В HTML-документах каждая закладка является маркером, к которому можно привязать гиперссылку. Таким образом, вы видите, что перед тем, как создавать внутренние ссылки, необходимо создать набор закладок в тексте, на которые вы потом будете ссылаться.

Последний рассматриваемый орган управления – поле Target frame (Целевой фрейм). Это поле не позволяет прямой ввод. Для установки значения используется привязанная к нему кнопка. Поле Target frame (Целевой фрейм) задает имя окна, в которое будет загружен документ. По умолчанию используется параметр Page Default (Страница по умолчанию), который отрабатывает стандартный вариант отображения последовательности страниц браузером.

Параметр Same Frame (Данный фрейм) указывает на то, что документ должен быть загружен в то же самое окно, где расположена ссылка. Параметр Whole Page (Целая страница) отмечает то, что загружаемый документ займет все окно браузера. Параметр New Window (Новое окно), как нетрудно догадаться, принудительно открывает для документа новое окно. И наконец, параметр Parent Frame (Родительский фрейм) сообщает, что документ будет загружен в окно, которое является родительским по отношению к текущему.

Теперь давайте узнаем, как механизм ссылок реализуется в HTML. Для этого на пустой странице разместите две строки. Одна будет являться закладкой, а другая – заключать в себе ссылку. Для начала попробуем создать локальную гиперссылку. Для этого, как уже говорилось ранее, используем список закладок Bookmark (Закладка) диалогового окна Create Hyperlink (Создать гиперссылку). В том случае, если установка закладки на первую строку прошла гладко, вы увидите ее имя в списке закладок. Достаточно будет щелкнуть мышью на названии закладки, и в строке URL появится ее адрес. Нажмите на кнопку ОК и перейдите на страницу HTML, чтобы посмотреть HTML-код вашего творения. Он будет выглядеть следующим образом:

<p><a name="Место для закладки">Место для закладки</а></р>

<p><a href="#Место для закладки">Ссылка на закладку</а></р>

Итак, как вы видите, помимо тэгов объявления абзаца, в каждой строке появился тэг <а> с различными параметрами. Именно он применяется для реализации гиперссылок. В первой строке вы объявили закладку с именем «Место для закладки». Именно поэтому в тэге <а> появился параметр name, который создает маркер для внутренних ссылок. После текста закладки выставлен закрывающий тэг </а>. Во второй строке установлена сама ссылка. В этом случае используется параметр href, в качестве значения которого указывается URL необходимого документа. Так как ссылка в данном случае – внутренняя, то перед самим URL ставится знак решетки, а сам URL будет просто именем маркера. Причем цветовое оформление гиперссылки, и, соответственно, ее чувствительная область будут применены ко всему тексту, который находится между тэгом <а> и его закрывающей парой </а>.

А теперь попробуем создать внешнюю гиперссылку. Для этого выделим вторую строку и нажмем кнопку Hyperlink (Гиперссылка) или выберем в контекстном меню, вызываемом традиционным щелчком правой кнопки мыши, команду Hyperlink Properties (Свойства гиперссылки). Результатом этих действий будет активизация диалогового окна Edit Hyperlink (Редактирование гиперссылки), которое на самом деле является близнецом уже знакомого вам диалогового окна Create Hyperlink (Редактирование гиперссылки). Теперь в поле URL введем, скажем, адрес наиболее известного книжного магазина Сети – http://www.amazon.com. А также укажем окно загрузки для основной страницы этого сайта. Выберем в списке Target Frame (Целевой фрейм) значение Whole Page (Целая страница). То есть эта страница займет все окно просмотра браузера. После нажатия на кнопку ОК цель нашей гиперссылки будет изменена. Теперь при просмотре HTML-кода ссылки вы увидите такую конструкцию:

<а href="http://www.amazon.com" target="_top">Ссылка на закладку</а>

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

Вот так и создаются обычные гиперссылки. А сейчас перейдем к использованию графики в оформлении Web-страниц.

FrontPage 2000 позволяет использовать три вида графики: стандартные графические файлы, картинки из коллекции ClipArt и видеофрагменты. Да-да, видеофрагмент тоже считается картинкой, и команда его вставки находится в одной группе с другими командами использования графики. Заниматься видеофрагментами мы будем позже, а сейчас сосредоточимся на обычных изображениях.

Вставка графического файла осуществляется при помощи команды меню Insert/Picture/From File (Вставка/Рисунок/Из файла) или соответствующей кнопки на основной инструментальной панели. При этом активизируется диалоговое окно Picture (Рисунок), показанное на рис. 8.7.

Рис. 8.7. Диалоговое окно Picture

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

Итак, по умолчанию считается, что файл с графическим изображением находится в структуре каталогов создаваемого сайта, которая показана в основном списке диалогового окна Picture (Рисунок). Однако, как всегда, местонахождение файла будет записано в поле ввода URL. Справа от этого поля находятся уже известные вам две кнопки, которые позволяют отыскивать требуемое изображение в просторах Интернета и необъятных глубинах дискового пространства локальной машины. Однако, помимо этого, есть и другие кнопки, расположенные в самом низу диалогового окна. Кнопки ОК и Cancel не должны вызвать особых затруднений – действия, выполняемые с их помощью, понимаются интуитивно. Кнопка Clip Art (Картинки) запускает диалог, показывающий коллекцию рисунков-клипов, поставляемых в составе Microsoft Office. А кнопка Scan (Сканировать) предназначена для получения графического изображения с цифровой камеры, сканера и тому подобных устройств. Для всех них действует единое правило – они должны поддерживать TWAIN-интерфейс. Итак, при нажатии на эту кнопку появляется дополнительное модальное окно. Для начала надо выбрать периферийное устройство, с которого будет получаться изображение, т. е. его источник. Естественно, для этого используется кнопка Source (Источник). Пользователь получает список всех подходящих устройств. После того как периферийное устройство выбрано, необходимо нажать кнопку Acquire (Получить), и изображение попадет на проектируемую страничку.

Теперь рассмотрим на примере вопросы вставки графики и HTML-представления результата этого действия. Для этого выберем какой-нибудь графический файл на своем компьютере и разместим его на создаваемой странице. Если все пройдет нормально, то изображение сразу проявится на предоставленном ему месте на странице Normal (Режим разметки). Если вы щелкнете мышью на рисунке и тем самым выделите его, то FrontPage 2000 визуализирует еще одну инструментальную панель, которая предназначена как раз для работы с изображениями.

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

<img border="0" src="file:///С:/WIN98/Hlplogo.gif" width="97" height="40">,

где любое графическое изображение вставляется при помощи тэга <img> с несколькими параметрами. Основной и самый главный параметр – src, значение которого показывает местонахождение искомого файла. В нашем случае это file:///C:/WIN98/Hlplogo.gif. Первая часть значения указывает на то, что будет использоваться стандартный протокол доступа к файлам на локальном компьютере, а после нее уже – полное имя файла. В том случае, если бы необходимый файл находился на постороннем Web-cepeepe, в адресе вместо префикса file был бы указан префикс http.

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

На самом деле, параметров у тэга <img> гораздо больше. Но все они появляются лишь в ответ на наши изменения установок рисунка. Тот набор параметров, который мы рассмотрели, при работе с FrontPage 2000 задан по умолчанию.

Давайте изучим те возможности работы с графическими изображениями, которые нам предоставляет FrontPage 2000. Большая часть из них отрабатывается при помощи кнопок на инструментальной панели Pictures (Графика), которая визуализируется каждый раз при выделении какого-либо рисунка на странице. Впрочем, такого же эффекта можно достигнуть, выполнив команду меню View/Toolbars (Вид/Панели инструментов), а затем поставив галочку напротив наименования этой панели. Однако, помимо этих кнопок, каждая из которых совершает определенное действие, есть еще и простые свойства рисунка, которые можно редактировать в диалоговом окне Picture Properties (Свойства рисунка), активизируемом при помощи одноименной команды контекстного меню, вызываемого правым щелчком мыши на самом изображении. Вид этого окна показан на рис. 8.8.

Рис. 8.8. Вкладка General диалогового окна Picture Properties

Основная часть органов управления окна интуитивно понятна. Так, в строке Picture source (Имя файла) указывается местонахождение графического файла, и тут же рядом – кнопки для просмотра файловой системы Browse (Обзор) и Edit (Редактировать) для запуска графического редактора, встроенного в FrontPage. Под этой группой находится группа из трех зависимых переключателей (радиокнопок), который показывают тип графического файла. В WWW поддерживается три графических формата: GIF, JPEG и PNG. Помимо этого, у файлов GIF и JPEG есть свои свойства, которые включаются и выключаются посредством флажков. Так, например, если выбран GIF-файл, можно указать свойство Interlaced (Чересстрочный), которое указывает на то, что этот рисунок поддерживает чересстрочное изображение. Подобный рисунок проявляется на экране браузера постепенно, по мере загрузки увеличивая свою четкость. Если быть абсолютно точным, то сначала загружаются строки изображения с номером, кратным восьми, затем – четырем, потом – двум, а далее уже нечетные строки. Свойство Transparent (Прозрачный) предназначено для «прозрачных» GIF-файлов, т. е. таких рисунков, в которых один цвет установлен как прозрачный. Через детали рисунка с данным цветом действительно просвечивает то, что находится под рисунком, на слой ниже. Подобные рисунки довольно часто применяются в дизайне Web-страниц, и их умелое применение весьма оправдано. Файлы JPEG сохраняют изображение с некоторыми потерями, поэтому для них можно задать опции сжатия информации. Ну а файлы PNG вставляются в Web-страницы как есть, без каких-либо дополнений и опций.

А вот за этим блоком расположена достаточно интересная группа полей ввода под общим названием Alternative representations (Дополнительное представление). То есть здесь задаются способы альтернативного представления рисунка, когда по каким-либо причинам он не может быть правильно отображен в браузере удаленного пользователя. В поле Low-Res (Дополнительный ресурс) помещается адрес иконки, подменяющей основное изображение. Второе поле с названием Text (Текст) позволяет ввести текстовую строку, которая будет отображаться вместо рисунка в тех случаях, когда отображение искомого графического файла невозможно. Раньше это диктовалось тем, что некоторые браузеры просто не могли отображать рисунки. Да-да, было и такое! Теперь же этот текст используется, когда в браузере удаленного пользователя выставлен запрет на отображение графики. Давайте заполним эти два поля и посмотрим, как это отразится на HTML-представлении рисунка. После ввода этих значений и подтверждения изменений вы можете перейти на страницу HTML и обнаружить, что к вашему тэгу добавились параметры lowsrc и alt. Посредством простейшего анализа HTML-текста можно догадаться, что значение параметра lowsrc содержит путь к графическому файлу подмены основного изображения, а значение параметра ait представляет собой текстовую строку, печатаемую на месте вашего рисунка, когда браузер удаленного пользователя не может его отобразить.

И в самом низу диалогового окна расположена группа органов управления, которая ставит в соответствие вашему рисунку гиперссылку. Эта группа носит название Default hyperlink (Гиперссылка по умолчанию). В поле Location (Назначение) вводится URL места назначения, а в поле Target Frame (Целевой фрейм) – значение, указывающее, в каком окне отображать полученный документ. Рядом с полем для ввода URL находится кнопка Browse (Обзор), которая активизирует уже знакомое вам диалоговое окно создания гиперссылки. Впрочем, того же самого эффекта можно добиться, просто выполнив команду контекстного меню рисунка Hyperlink (Гиперссылка). Давайте попробуем привязать к рисунку какую-либо гиперссылку, а затем посмотрим, как это реализуется в HTML. Если после выполнения всех действий вы перейдете на страницу HTML, то увидите конструкцию, подобную нижеследующей:

<а href="2.htm"><img border="0" src="images/Hlplogo.gif" width="97" height="40"></a>,

где тэг, размещающий изображение из графического файла Hlplogo.gif, находится в обрамлении тэгов, объявляющих гиперссылку на файл с именем 2.html. Помимо этого способа создания графических ссылок, есть еще технология, которая позволяет к одному изображению привязать несколько гиперссылок. В данном случае рисунок разбивается на несколько частей, для каждой из которых задается своя ссылка. Эта технология носит название сегментированной графики. Ее мы рассмотрим, когда дойдем до инструментов, позволяющих ее реализовать.

Также у рассматриваемого нами диалогового окна Picture Properties (Свойства рисунка) есть еще одна вкладка, которая задает некоторые свойства изображений. Она носит название Appearance (Расположение) и ее внешний вид показан на рис. 8.9.

Рис. 8.9. Вкладка Appearance диалогового окна Picture Properties

На этой вкладке вы можете указать относительное расположение графического изображения и текста, находящихся рядом. То есть, попросту, выравнивание их относительно друг друга. Способ выравнивания указывается в выпадающем списке с именем Alignment (Выравнивание). Если вы выберете значение Тор (Верх), то текст, расположенный сразу после тэга, объявляющего вставку рисунка, без промежуточного объявления нового абзаца, будет выравнен по верхней границе изображения. Значение Bottom (Низ) выравнивает текст по нижней границе изображения. Если вы выберете значение Middle (Середина), то первая строка текста будет размещена по центру изображения. Текст может размещаться как слева от изображения, так и справа от него. Задается это значениями Left (Слева) и Right (Справа), соответственно. Есть и более точные методы выравнивания текста. Так, параметр Texttop (Верх текста) осуществляет выравнивание текста относительно самых высоких символов в строке. Если указано выравнивание Absmiddle (Абсолютный центр), то выравнивается середина первой строки текста относительно середины рисунка. А значение Baseline (Базовая линия) позволяет выравнивать текст по нижнему краю рисунка относительно базовой линии первой строки. Базовой линией называется воображаемая линия, на которой расположены символы текста. Значение Absbottom (Абсолютный низ) предназначено для выравнивания текста по нижнему краю рисунка относительно нижней границы первой строки текста. Необходимо осознавать, что базовая линия не всегда совпадает с нижней границей строки. Нижняя граница располагается на уровне, где кончаются так называемые «хвостики» отдельных символов, которые спускаются ниже базовой линии.

В поле ввода Border thickness (Толщина границы) указывается желаемая толщина рамки, ограничивающей рисунок, а в полях Horizontal spacing (Горизонтальный интервал) и Vertical spacing (Вертикальный интервал) – расстояния в пикселах по горизонтали и вертикали, отделяющие графическое изображение от текста.

Для принудительного указания размеров изображения используется группа элементов управления Size (Размер). По умолчанию в полях Width (Ширина) и Height (Высота) указываются истинные размеры рисунка. Но, поставив галочку в независимом переключателе Specify size (Указать размер), вы получаете возможность прямого редактирования содержимого этих полей. Причем, размеры окна могут указываться как в пикселах, так и в процентах от размера окна просмотра браузера.

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

<img border="1" src="images/Hlplogo.gif" width="97" height="40" align="left" hspace="2" vspace="2">

В нем задание толщины границы делается при помощи параметра border, для выравнивания зарезервирован параметр align, а установка отступа по горизонтали и вертикали производится при помощи параметров hspace и vspace, соответственно.

Теперь перейдем к заключительной части главы, в которой рассмотрим средства для работы с графическими изображениями, предлагаемые FrontPage 2000. Как уже говорилось, каждое действие привязано к отдельной кнопке из общего комплекта, находящегося на инструментальной панели Pictures (Рисунки). Начнем с левого края и пройдем до следующего края панели, не пропуская ни одну кнопку.

Самая первая кнопка доступна всегда, вне зависимости от наличия выделенного рисунка. Это и понятно, ведь кнопка Insert Picture From File (Вставить рисунок из файла) предназначается для вставки рисунка. То есть она дублирует кнопку-близнец с основной инструментальной панели. Следующая кнопка Text (Текст) при нажатии вставляет в центр рисунка прямоугольный блок для вставки текста. Блок поддается перемещению и изменению размеров. Шрифт вставляемого текста выбирается при помощи органов управления инструментальной панели форматирования. По умолчанию используется шрифт Times New Roman третьего размера с выключкой по центру. Текстовый блок является обычным объектом, поэтому он может правильно отображать любые изменения текста. Реализуется эта возможность при помощи активного элемента, для понимания работы которого необходим небольшой экскурс в программирование, а мы договорились этого не делать. Таким образом, если нам потребуется создать подобный текстовый блок в рисунке, мы воспользуемся стандартным инструментом FrontPage, а не будем пробовать написать его на HTML лично. Кнопка Auto Thumbnail (Автоматическое создание «ноготков») позволяет создавать так называемые «ноготки» рисунков. «Ноготками» называют уменьшенные копии графических изображений, этакие ярлычки. Обычно применяются в том случае, если основное изображение достаточно велико и скорость его загрузки в браузере удаленного пользователя оставляет желать лучшего. Обычно на каждый «ноготок» вешается ссылка, которая при щелчке по ней отображает основное изображение.