Место для закладкиа>р>
Ссылка на закладкуа>р>
Итак, как вы видите, помимо тэгов объявления абзаца, в каждой строке появился тэг <а> с различными параметрами. Именно он применяется для реализации гиперссылок. В первой строке вы объявили закладку с именем «Место для закладки». Именно поэтому в тэге <а> появился параметр 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, то можно увидеть такую конструкцию:
,
где любое графическое изображение вставляется при помощи тэга
с несколькими параметрами. Основной и самый главный параметр – src, значение которого показывает местонахождение искомого файла. В нашем случае это file:///C:/WIN98/Hlplogo.gif. Первая часть значения указывает на то, что будет использоваться стандартный протокол доступа к файлам на локальном компьютере, а после нее уже – полное имя файла. В том случае, если бы необходимый файл находился на постороннем Web-cepeepe, в адресе вместо префикса file был бы указан префикс http.
Параметр border предназначен для указания толщины рамки вокруг рисунка. В нашем случае ему присвоено нулевое значение, а значит, рамки как таковой просто не будет. Параметры width и height указывают ширину и высоту рисунка, соответственно.
На самом деле, параметров у тэга
гораздо больше. Но все они появляются лишь в ответ на наши изменения установок рисунка. Тот набор параметров, который мы рассмотрели, при работе с 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">
,
где тэг, размещающий изображение из графического файла 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. Там вы увидите код, похожий на

В нем задание толщины границы делается при помощи параметра border, для выравнивания зарезервирован параметр align, а установка отступа по горизонтали и вертикали производится при помощи параметров hspace и vspace, соответственно.
Теперь перейдем к заключительной части главы, в которой рассмотрим средства для работы с графическими изображениями, предлагаемые FrontPage 2000. Как уже говорилось, каждое действие привязано к отдельной кнопке из общего комплекта, находящегося на инструментальной панели Pictures (Рисунки). Начнем с левого края и пройдем до следующего края панели, не пропуская ни одну кнопку.
Самая первая кнопка доступна всегда, вне зависимости от наличия выделенного рисунка. Это и понятно, ведь кнопка Insert Picture From File (Вставить рисунок из файла) предназначается для вставки рисунка. То есть она дублирует кнопку-близнец с основной инструментальной панели. Следующая кнопка Text (Текст) при нажатии вставляет в центр рисунка прямоугольный блок для вставки текста. Блок поддается перемещению и изменению размеров. Шрифт вставляемого текста выбирается при помощи органов управления инструментальной панели форматирования. По умолчанию используется шрифт Times New Roman третьего размера с выключкой по центру. Текстовый блок является обычным объектом, поэтому он может правильно отображать любые изменения текста. Реализуется эта возможность при помощи активного элемента, для понимания работы которого необходим небольшой экскурс в программирование, а мы договорились этого не делать. Таким образом, если нам потребуется создать подобный текстовый блок в рисунке, мы воспользуемся стандартным инструментом FrontPage, а не будем пробовать написать его на HTML лично. Кнопка Auto Thumbnail (Автоматическое создание «ноготков») позволяет создавать так называемые «ноготки» рисунков. «Ноготками» называют уменьшенные копии графических изображений, этакие ярлычки. Обычно применяются в том случае, если основное изображение достаточно велико и скорость его загрузки в браузере удаленного пользователя оставляет желать лучшего. Обычно на каждый «ноготок» вешается ссылка, которая при щелчке по ней отображает основное изображение.
Следующая триада кнопок посвящена точному позиционированию рисунка на странице и изменению его расположения относительно текста. Что касается точного позиционирования рисунка, необходимо отметить, что сам по себе HTML не имеет подобных механизмов. Однако FrontPage позволяет нам сделать это. Для проведения позиционирования рисунка достаточно нажать кнопку Position Absolutely (Абсолютное позиционирование). После того как только курсор мыши попадает на наше графическое изображение, он принимает стандартную форму курсора для перемещения объекта, т. е. стрелки с четырьмя наконечниками. Теперь можно нажать левую кнопку мыши и, не отпуская ее, оттранспортировать рисунок точно в то место, которое вы для него предназначили. Необходимо отметить, что эта кнопка является переключателем. Пока она находится в нажатом состоянии, данный объект будет точно позиционирован на странице. При отключении этого режима он вернется на свое исходное место. Если при нажатой кнопке вы заглянете на страницу HTML, то увидите, что тэг, отображающий рисунок, заключен в тэги и , причем у первого тэга есть еще и параметр. Весь этот тэг обычно выглядит так:
В параметре style задается тип позиционирования (в данном случае по абсолютным координатам страницы) и координаты верхнего левого угла рисунка. Хотелось бы обратить внимание, что этот тэг может не поддерживаться всеми браузерами, поэтому рекомендуется применять его с определенной осторожностью. Если говорить честно, то FrontPage максимальным образом приспособлен именно к Internet Explorer, что, впрочем, вполне объяснимо. Но это накладывает определенные ограничения. Некоторые особо продвинутые возможности могут не распознаваться другими браузерами, и создаваемая страница не будет выглядеть адекватно замыслу дизайнера. Следующие две кнопки Bring Forward (Переместить наверх) и Send Backward (Переместить вниз) позволяют установить положение рисунка поверх или позади текста соответственно. При этом их использование включает режим абсолютного позиционирования, и в тэге у параметра style появляется новая константа с именем z-index, указывающая положение картинки в слоях страницы.
Далее расположены четыре кнопки, которые позволяют вращать рисунок вправо и влево и отражают его относительно вертикальной и горизонтальной осей. При этом нажатие данных кнопок вносит изменения именно в рисунок, а не в HTML-код, отображающий его. Кнопки Rotate Left (Повернуть влево) и Rotate Right (Повернуть вправо) вращают рисунок влево и вправо на 90°. Кнопки Flip Horizontal (Отразить по горизонтали) и Flip Vertical (Отразить по вертикали) отражают рисунок относительно его центральных осей, вертикальной и горизонтальной, соответственно.
Еще одна группа кнопок предназначена для регулировки яркостных и контрастных параметров рисунка. Кнопки More Contrast (Увеличить контрастность) и Less Contrast (Уменьшить контрастность) повышают и понижают степень контрастности рисунка. Следующие две кнопки More Brightness (Увеличить яркость) и Less Brightness (Уменьшить яркость) делают то же самое с яркостью. Все эти изменения происходят именно с рисунком и сохраняются во временном файле. При сохранении страницы все подобные изменения записываются в основной графический файл.
Очередной блок кнопок тоже применяется для обработки всего рисунка. Так, кнопка Crop (Обрезка) предназначена для изменения размеров рисунка. Точнее, для уменьшения его путем обрезания границ. При нажатой кнопке Crop (Обрезка) курсор мыши меняет свою форму, и вы можете обрезать картинку так, как вы этого хотите. Повторное нажатие данной кнопки возвращает вас в обычный режим. Кнопка Set Transparent Color (Установить прозрачный цвет) применяется для того, чтобы один из цветов рисунка сделать прозрачным. Данную кнопку лучше всего использовать на рисунках, хранимых в GIF-формате. После нажатия на кнопку курсор принимает форму специализированного указателя. Если вы в это время щелкнете мышью на рисунке, то FrontPage определит цвет того пиксела, на который указывал курсор, и все пикселы рисунка этого цвета будут перекрашены в так называемый «прозрачный» цвет. Для чего это нужно, вы узнали выше. Кнопка с именем Black and White (Черно-белый), как нетрудно догадаться, переводит рисунок в черно-белый формат. Или, если быть точным, отображает его при помощи градаций серого цвета. Кнопка Wash Out (Подложка) как бы «выстирывает» рисунок, заставляя все его цвета поблекнуть и стать приглушенными. Подобные рисунки очень хорошо работают в качестве подложек на страницах. Кстати, в рабочих панелях русскоязычного Microsoft Office подобная кнопка так и называется – «подложка». Кнопка Bevel (Рамка) добавляет к вашему рисунку маленькую угловую рамку, как бы приподнимая его над общим уровнем страницы. Хотя, на наш взгляд, эффект несколько сомнительный. А вот последняя кнопка Resample (Пересчитать) чрезвычайно полезна. Дело в том, что при изменении общих размеров рисунка при помощи перетаскивания мышью ограничивающих маркеров пропорции рисунка могут быть несколько искажены. Так вот, эта кнопка позволяет очень хорошо восстановить нарушенные пропорции рисунка в измененных границах. Откровенно говоря, мы настоятельно рекомендуем пользоваться этим инструментом каждый раз, когда размер рисунка был изменен.
Следующий блок кнопок предназначен для реализации технологии сегментированной графики. Первая кнопка Select (Выбор) чаще всего находится в нажатом состоянии. Она переводит FrontPage в обычный режим выбора элементов. Как правило, эту кнопку приходится нажимать для того, чтобы отменить ошибочное нажатие других кнопок этой группы. Следующие три кнопки предназначены для создания на рисунке так называемых «горячих областей» (hotspots). То есть участков рисунка, к которым будут привязаны гиперссылки. Кнопка Rectangular Hotspot (Прямоугольный сегмент) создает горячую область прямоугольной формы. При нажатии на нее курсор мыши, находясь на территории рисунка, приобретает форму карандаша. Нажатие левой кнопки мыши фиксирует один угол прямоугольника. Затем, не отпуская нажатой кнопки, необходимо перемещать мышь, одновременно растягивая «горячую область» до необходимых размеров. Для фиксации размера достаточно отпустить кнопку. После определения размера «горячей области» активизируется уже знакомое вам диалоговое окно для создания гиперссылки. После этого «горячая область» становится стандартным объектом со своими свойствами. Так же, как и все остальные объекты, «горячие области» могут перемещаться проектировщиком, их границы могут быть изменены, сами они могут быть удалены. Точно таким же образом действуют и две следующие кнопки – Circular Hotspot (Круглый сегмент) и Polygonal Hotspot (Полигональный сегмент). Они создают «горячие области» в форме круга и многоугольника. А последняя кнопка в этой группе с названием Highlight Hotspots (Подсветка сегментов) предназначена для того, чтобы проектировщик Web-страницы мог увидеть все «горячие области», размещенные им на рисунке. При нажатии на кнопку само изображение рисунка исчезает, остаются лишь его контуры и границы всех «горячих областей». Таким образом, вы получаете очень удобный режим работы, в котором можно посмотреть, как размещены «горячие области», не перекрываются ли они и т. д.
Установите на свой рисунок три "горячие области" различных форм. Одна область будет прямоугольной, вторая – круглой, а границы третьей будут очерчены многоугольником. Рассмотрим реализацию технологии "сегментированной графики" с точки зрения HTML. При просмотре HTML-кода вы обнаружите следующий набор тэгов:

И вот здесь уже придется внимательно разбираться с кодом. Прежде всего надо отметить, что этот блок состоит из двух частей. Первая часть, заключенная между тэгами <тар> и тар>, задает карту сегментов гиперссылок, тех самых «горячих областей». Вторая содержит тэг, реализующий вставку изображения и привязку карты к нему. У объявляющего тэга первой части есть параметр name, который задает имя карты. Потом это имя будет использовано во второй части конструкции. Между тэгами <тар> и тар> располагаются тэги <агеа>, каждый из которых объявляет одну область. Параметр href, как нетрудно догадаться, задает адрес гиперссылки. Параметр shape предназначен для определения формы «горячей области», а параметр coords задает ее координаты в рисунке относительно верхнего левого угла. Из кода видно, что у этого параметра есть три значения. Значение rect говорит о том, что сегмент гиперссылки имеет форму прямоугольника, а в качестве значения параметра coords записывается строка, состоящая из четырех чисел, разделенных запятыми. Это координаты верхнего левого и нижнего правого угла прямоугольника. В том случае, если горячая область имеет вид окружности, значение параметра shape будет «circle». Впрочем, браузер сможет правильно понять и значение «circ». При этом в параметре coords передается три числа: параметры центра окружности и ее радиус. И наконец, значения «polygon» или просто «poly» задают сегмент гиперссылки в виде многоугольника. В этом случае в параметре coords записывается строка, состоящая из пар значений координат вершин многоугольника.
С первой частью, определяющей саму карту гиперссылок, мы разобрались. Вторая намного проще. На самом деле это обычный тэг вставки изображения, только теперь там есть еще один параметр – usemap. В качестве значения этому параметру передается строка с именем подключаемой карты гиперссылок. Как вы помните, это имя задается в начальном тэге <тар>.
В заключение рассмотрим лишь одну-единственную кнопку, расположенную в самом конце инструментальной панели Pictures (Рисунки). Она носит название Restore (Восстановить) и позволяет сразу отменить все изменения рисунка, которые произошли с момента последнего сохранения. Конечно, для этой же цели можно воспользоваться стандартными средствами отмены действий, но это не всегда удобно. Например, когда объем изменений был слишком велик или после работы с изображением вы успели сделать что-то еще, не относящееся к самой картинке. Именно в таких случаях и стоит обращаться к этой кнопке.
Мультимедийные возможности
Под мультимедийными возможностями мы будем понимать размещение аудио– и видеоклипов на Web-страницах. К сожалению, простых способов вставки звука в страницу таким образом, чтобы удаленный пользователь мог самостоятельно решать, когда ему запустить воспроизведение аудиофрагмента, не существует. Чаще всего используется фоновая музыка, которая начинает воспроизводиться в момент загрузки страницы удаленным пользователем. Это удовольствие считается свойством страницы, поэтому установку фонового аудиоклипа необходимо осуществлять при помощи команды меню File/Properties (Файл/Свойства). При этом активизируется диалоговое окно Page Properties (Свойства страницы). Интересующие нас органы управления размещаются на вкладке General (Общие), которая показана на рис. 8.10, в группе Background sound (Фоновый звук).
Рис. 8.10. Вкладка General диалогового окна Page Properties
В поле Location (Местонахождение) вводится местонахождение искомого музыкального файла (поддерживается немало форматов). Если трудно ввести местонахождение файла по памяти, можно воспользоваться кнопкой Browse (Обзор), которая предоставляет стандартный диалог для поиска файла. Помимо этого, есть и еще некоторые свойства у подключаемого видеофрагмента. Вы можете определить, сколько раз он будет проигрываться при загрузке страницы или вообще зациклить воспроизведение, и этот фрагмент будет начинаться снова и снова. Для указания количества повторов есть поле ввода Loop (Цикл), а для того чтобы поставить клип на постоянное воспроизведение, достаточно установить флажок в переключателе Forever (Постоянно). Если вы укажете все необходимые данные и нажмете кнопку ОК для подтверждения изменений, то, перейдя на страницу HTML, вы увидите, что перед тэгом , закрывающим область заголовка, вставлен тэг cbgsound sгс="Canyon.mid" ioop="-l">. Объявление фонового аудиофрагмента делается при помощи тэга . При этом у него присутствует уже знакомый вам параметр src, в качестве значения которого передается местонахождение подключаемого звукового файла. А при помощи параметра loop указывается количество повторов аудиоклипа. Если его значение установлено в -1, то фрагмент будет воспроизводиться постоянно, в ином случае браузер распознает число, подставленное в качестве значения этого параметра, и проиграет клип положенное число раз.
Вставка видеофрагмента осуществляется при помощи команды меню Insert/Picture/Video (Вставка/Рисунок/Видео). При этом активизируется стандартный диалог поиска и вставки файла с объектом. FrontPage поддерживает файлы формата Video for Windows (расширение avi), Windows Media (asf). Real Video (ram и га). Отрабатывается вставка видеофрагмента при помощи тэга
. То есть, по сути, вставка видеоклипа является вариантом вставки обычного изображения, но имеются и свои отличия. Так, если вы попробуете установить свойства для вставленного видеоклипа при помощи команды контекстного меню Picture Properties (Параметры рисунка) или при помощи команды Format/Properties (Формат/Свойства) в тот момент, когда вставленный видеоклип выделен, активизируется диалоговое окно Picture Properties (Параметры рисунка), но при этом на первый план выйдет вкладка Video (Видео), чей внешний вид показан на рис. 8.11.
Рис. 8.11. Вкладка Video диалогового окна Picture Properties
В поле ввода Video source (Источник видео) указывается расположение файла с видеофрагментом. Естественно, эта информация поддается редактированию как путем прямого ввода информации в поле, так и при помощи кнопки Browse (Обзор). А вот сразу под полем ввода находится переключатель Show controls in Browser (Показывать органы управления в браузере). В том случае, если он будет включен, при просмотре страницы удаленным пользователем под видеоклипом будут находиться органы управления воспроизведением, т. е. кнопка запуска/паузы и индикатор положения. Количество повторов видеоклипа устанавливается в поле с названием Loop (Цикл). Пауза между циклами воспроизведения устанавливается в поле Loop delay (Задержка цикла). Время паузы измеряется в миллисекундах. Ну а в том случае, если вы хотите, чтобы клип воспроизводился постоянно, необходимо установить флажок в переключателе Forever (Постоянно). И что самое интересное, вы можете указать, когда должен начать воспроизводиться видеоклип. В группе Start (Начало) находятся два независимых переключателя, с помощью которых можно установить правила воспроизведения. Так, если флажок по умолчанию стоит в переключателе On file open (При открытии файла), то воспроизведение начнется сразу после загрузки страницы в браузер удаленного пользователя. Если же выбран вариант On mouse over (При прохождении мыши), то запуск видеоклипа происходит в тот момент, когда на нем появляется курсор мыши. Причем, необходимо отметить, что это независимые переключатели, т. е. вы можете выбрать любую комбинацию. Правда, в том случае, если ни один переключатель не выбран, стоит добавить органы управления видеоклипом, потому что иначе запустить его не будет возможности.
Теперь давайте узнаем, как эти свойства указываются при помощи HTML. Если вы установите данные свойства и посмотрите на страницу HTML, то увидите следующий HTML-код:
![]()
Разберемся со всеми этими параметрами. Параметр border, как и прежде, показывает толщину рамки, ограничивающей вставленный клип. Параметр start предназначен для указания события, после которого начнется воспроизведение видеофрагмента. В данном случае, мы указали сразу два варианта: по загрузке файла и в момент наведения курсора мыши на территорию клипа. Параметр controls указывает на то, что под видеофрагментом будут расположены органы управления им. Параметры width и height, как обычно, указывают ширину и высоту области воспроизведения клипа. Параметр loop содержит в качестве значения количество повторений фрагмента, а его сосед loopdelay – паузу между отдельными циклами воспроизведения. Необходимо отметить, что в том случае, если вы хотите добиться постоянного воспроизведения видеоклипа, в параметре loop следует указать значение infinite.
Исходя из того, что видеоклип считается подобием графического изображения, к нему можно присоединить гиперссылку, реализация которой не будет отличаться от варианта создания гиперссылки на обычном рисунке. Помимо этого, можно указать выравнивание видеоклипа и текста, расположенного рядом с ним, при помощи органов управления вкладки Appearance (Расположение) окна Picture Properties (Параметры рисунка). Параметры, указывающие тип выравнивания, ничем не будут отличаться от параметров обычных графических изображений.
Таблицы
Таблицы являются одним из самых важных инструментов при построении Web-страниц. Помимо размещения информации в табличной форме, они активно применяются для правильного позиционирования текста и графики. То есть, необходимые блоки текста и графики размещаются в ячейках таблицы, а сама таблица делается невидимой. Основная часть инструментов для работы с таблицами сосредоточена на инструментальной панели Tables (Таблицы), которая визуализируется при помощи команды меню View/Toolbars (Вид/Панели инструментов). Большая часть средств для работы с таблицами, размещенная на этой инструментальной панели, дублируется командами меню Table (Таблица). Для размещения таблицы на создаваемой Web-странице необходимо выполнить команду меню Table/Insert Table (Таблица/Добавить таблицу). При этом активизируется диалоговое окно Insert Table (Добавление таблицы), показанное на рис. 8.12.
Рис. 8.12. Диалоговое окно Insert Table
Перед созданием таблицы необходимо установить количество ее строк и столбцов при помощи полей редактирования Rows (Строки) и Columns (Столбцы), соответственно. Остальные органы управления опциональны. Выпадающий список Alignment (Выравнивание) предназначен для установки выравнивания таблицы на странице. Поле Border size (Размер границы) позволяет установить толщину линий, ограничивающих каждую ячейку. По умолчанию она составляет один пиксел. Кстати, если вы установите нулевое значение толщины, то границы будут не видны, а табличная структура останется. Поле Cell padding (Отбивка ячейки) позволяет задавать расстояние между краями ячейки таблицы и содержимым этой ячейки. Данная величина не может быть индивидуальной для каждой ячейки отдельно. Это, скорее, свойство всей таблицы. Значение в поле Cell spacing (Отступ ячейки) указывает расстояние между рамкой таблицы и ячейками самой таблицы. Переключатель Specify width (Установить ширину) позволяет использовать возможность принудительного указания ширины таблицы относительно ширины страницы. Причем, ширина таблицы может указываться как в пикселах, так и в процентах от ширины окна просмотра браузера удаленного пользователя. Если вы зададите при помощи органов управления диалогового окна Insert Table (Добавление таблицы) некоторые значения, отличные от установленных по умолчанию, и нажмете кнопку ОК, то соответствующая таблица появится на странице. Вид страницы с встроенной в нее таблицей показан на рис. 8.13.
Рис. 8.13. Внешний вид Web-страницы со встроенной таблицей
Подобная таблица реализуется при помощи следующего HTML-кода:
Тэги и
с их закрывающими близнецами предназначены для указания выравнивания таблицы относительно Web-страницы. В том случае, если в списке Alignment (Выравнивание) при создании таблицы было бы выбрано значение Default (По умолчанию), они бы вообще не появились. Сама таблица объявляется тэгом , а закрывается его парой
. Внутри этого блока поочередно объявляется каждая строка при помощи тэгов и
. И уже внутри каждой строки при помощи тэгов и | объявляются ячейки, составляющие столбцы. У каждого объекта, будь то таблица целиком, строка или ячейка, есть свои свойства, а значит, и параметры для их указания, входящие в состав тэгов. Воспользуемся стандартной схемой работы и узнаем, как объявить эти свойства, пользуясь возможностями FrontPage 2000, а затем посмотрим, как эти свойства реализуются при помощи HTML.
В тэге есть параметр border, который указывает толщину рамки в пикселах. Следующий параметр width говорит о том, что таблица будет занимать 80 % от ширины окна просмотра браузера. Параметр ceiipadding повторяет имя одного из полей ввода диалогового окна Insert Table (Добавление таблицы). Следовательно, именно в нем указывается расстояние в пикселах между краями ячейки и ее содержимым. Значение параметра cellspacing задает расстояние между внешней рамкой таблицы и ячейками таблицы. Так как все столбцы и строки объявляются внутри табличного HTML-блока, нет необходимости указывать их количество в тэге , однако знать параметры, позволяющие это делать, – необходимо. Для количества столбцов используется параметр cols.
Теперь начнем устанавливать свойства таблицы. Для этого можно воспользоваться командой меню Table/Properties/Table (Таблица/Параметры/Таблица) или Format/ Properties (Формат/Параметры). Впрочем, того же самого результата можно добиться, используя команду Table Properties (Параметры таблицы) из контекстного меню. Для изменения и установки свойств таблицы предназначено одноименное диалоговое окно Table Properties (Параметры таблицы), показанное на рис. 8.14.
Рис. 8.14. Диалоговое окно Table Properties
Список Alignment (Выравнивание) и переключатель Specify width (Указать ширину) вам уже знакомы, поэтому второй раз они здесь не рассматриваются. Список Float (Позиционирование) предназначен для указания позиции таблицы относительно другого текста, расположенного на странице, но не входящего в таблицу. Если вы выберете значение Left (Слева), то таблица будет прижата к левому краю, а текст будет расположен справа. Для этого в тэг вставляется параметр align. В принципе, этот параметр предназначен для указания выравнивания самой таблицы. В данном случае для нее было указано выравнивание по центру, которое осуществлялось тэгами и . Но параметр align берет управление на себя и напрямую влияет на расположение таблицы, т. к. он находится в тэге .
Группа Specify height (Указать высоту) позволяет указать высоту каждой строки таблицы. Как обычно, этот выбор влияет на все строки сразу. В HTML для указания высоты строк применяется параметр height, входящий в тэг .
Блок Borders (Границы) содержит органы управления, осуществляющие правильное указание свойств внешней границы таблицы. Поле Size (Размер), как вы уже знаете, позволяет указывать толщину внешней рамки. Остальные три списка этой группы ответственны за цветовое оформление рамки. Если для всей границы планируется использовать один и тот же цвет, то приметается список Color (Цвет). В HTML используется параметр bordercolor. В том случае, если вы, к примеру, хотите сделать границу розового цвета, вам необходимо воспользоваться параметром bordercolor="#FF00FF". Однако у нас есть возможность несколько более изощренного цветового оформления границы. В случае трехмерных органов управления рамка для них делается двух цветов: левая и верхняя граница – более светлые, а правый нижний угол – более темный. Для подобного оформления используют два списка: Light border (Светлая граница) и Dark border (Темная граница), для указания светлого и темного цвета рамки, соответственно (параметры bordercolorlight и bordercolordark). При этом необходимо учитывать, что если какой-либо из этих цветов или оба сразу не указаны, то для их замены используется основной цвет границы, выбранный в списке Color (Цвет) и указанный в параметре bordercolor. Но если они оба явно указаны, основной цвет вообще не будет применяться.
Теперь перейдем к оформлению фона таблицы. Для этого используется группа органов управления Background (Фон). В списке Color (Цвет) можно установить цвет фона таблицы. В HTML этот цвет устанавливается при помощи параметра bgcolor. Так, если вы захотите установить для таблицы фон светло-зеленого цвета, который FrontPage называет лаймовым (lime), то этот параметр тэга примет вид bgcolor="#00FF00". В том случае, если вместо однотонного фона вы хотите установить какой-либо рисунок в виде подложки таблицы, необходимо установить флажок галочку в переключателе Use background picture (Использовать рисунок фона) и в поле ввода указать местонахождение графического файла. Для этого можно воспользоваться кнопкой Browse (Обзор). Вставка графического файла в качестве фона производится при помощи параметра background, в качестве значения которого указывается местонахождение файла.
На этом перечень свойств таблицы в целом, которые предлагаются нам FrontPage 2000, заканчивается, но на самом деле их немного больше, а значит, есть и другие параметры тэга , которые здесь не рассматривались. Но в нашу задачу входит не рассмотрение языка HTML как такового, а изучение средств проектирования Web-страниц. Поэтому если в ходе повествования мы встретимся с новыми возможностями, то тогда их и рассмотрим. А пока перейдем к свойствам отдельных ячеек.
Свойства ячеек, как отдельной ячейки, так и группы, редактируются при помощи команды меню Table/Properties/Cell (Таблица/Параметры/Ячейка) или команды контекстного меню Cell Properties (Параметры ячейки). При этом активизируется диалоговое окно Cell Properties (Параметры ячейки), показанное на рис. 8.15.
Рис. 8.15. Диалоговое окно Cell Properties
Как вы уже знаете, ячейки таблицы объявляются при помощи тэгов . Следовательно, для указания свойств ячеек будут использоваться параметры именно этого тэга. Блок Layout (Раскладка) содержит органы управления, отвечающие за внешний вид расположения ячейки и отображение ее содержимого. Выпадающие списки Horizontal alignment (Горизонтальное выравнивание) и Vertical alignment (Вертикальное выравнивание) позволяют указывать выравнивание содержимого ячейки (это не обязательно должен быть текст) по горизонтали и вертикали, соответственно. Так, если вместо значений по умолчанию (Default) вы укажете горизонтальное выравнивание содержимого по ширине ячейки – Justify, а по вертикали содержимое ячейки прижмете к ее нижнему краю – Bottom, то при просмотре HTML-кода, реализующего эту ячейку, вы увидите тэг | . Здесь ячейка объявляется при помощи тэга | , а уже в этот тэг вписываются параметры valign и align, которые и указывают вертикальное и горизонтальное выравнивание содержимого ячейки. Варианты горизонтального выравнивания вы знаете и так. Это прижатие к левому и правому краю, центрирование и растяжка по ширине. Для вертикального выравнивания применяются варианты смещения содержимого вверх (значение параметра valign – top), выравнивание по центру ячейки (middle), по нижней границе ячейки (знакомый вам bottom) и выравнивание по базовой линии текста (baseline). Помимо выравнивания содержимого ячейки, вы можете принудительно установить ее размеры. Для этого необходимо установить флажки Specify width (Установить ширину) и Specify height (Установить высоту), которые ответственны за указание размеров ячейки по горизонтали и по вертикали, соответственно. Останется только указать размеры в полях ввода и единицы измерения. В качестве единиц измерения традиционно предлагаются пикселы и проценты. В данном случае, естественно, используются проценты от размеров таблицы. В том случае, если размеры ячейки принудительно установлены, тэг, объявляющий ячейку, принимает вид | . В этом примере видно, что ширина ячейки устанавливается при помощи параметра width и составляет 31 % от общей ширины таблицы. Высота ячейки задается значением параметра height, которое в данном случае равно 30 пикселам.
Теперь перейдем к полям ввода Rows spanned (Объединить строки) и Columns spanned (Объединить столбцы). С помощью этих значений можно указать, что одна ячейка будет объединять несколько соседних ячеек. Подобные ячейки часто применяются как заголовки для нескольких колонок или строк сразу. Значение в поле Rows spanned (Объединить строки) показывает, сколько соседних ячеек по вертикали будет занимать данная ячейка. Если вы растянете левую верхнюю ячейку по вертикали на две, поставив двойку в поле Rows spanned (Объединить строки), то полученная таблица будет выглядеть, как на рис. 8.16.
Рис. 8.16. Внешний вид таблицы с объединенными ячейками
Такую таблицу вы можете создать при помощи следующего HTML-кода:
Как видите, первая ячейка заняла весь крайний левый столбец, что было обеспечено за счет параметра rowspan="2". При этом ячейки нижней строки были смещены вправо. Так как размер таблицы был ограничен параметром width="43 %" тэга , то последняя ячейка нижней строки заняла очень мало места, несмотря на то, что ей отводилось 35 % от ширины всей таблицы, что видно из тэга, объявляющего ее 6 | . Из этого следует, что те конструкции языка HTML, которые браузер не может правильно выполнить или интерпретировать, просто игнорируются.
В том случае, если вы хотите растянуть ячейку по горизонтали, следует выставить необходимое значение в поле ввода Columns spanned (Объединить колонки). При этом у тэга возникнет параметр coispan.
В блоке Layout (Раскладка), показанном на рис. 8.15, осталось рассмотреть всего два флажка. Флажок Header cell (Ячейка заголовка) позволяет из обычной ячейки делать ячейку заголовка. При этом она будет реализовываться при помощи тэгов | и | , которые несколько видоизменят отображение содержимого ячейки. Но для ячеек заголовка можно устанавливать все те же свойства, что и для обычных ячеек. И реализовываться они будут при помощи идентичных параметров.
Устанавливать флажок No wrap (Без переноса) нужно в тех случаях, когда вы не хотите переноса содержимого ячейки на другую строку, если оно не помещается в окне просмотра. То есть, если текст ячейки не виден полностью в окне просмотра браузера удаленного пользователя, он обычно переносится на другую строку, тем самым немного увеличивая высоту таблицы. Это нам представляется достаточно разумным решением. Но в тех случаях, когда по каким-либо причинам перенос содержимого является недопустимым, используется флажок No wrap (Без переноса). При этом в тэг, объявляющий ячейку, добавляется параметр nowrap.
Блок Borders (Границы) содержит три выпадающих списка, устанавливающих цвет границы конкретной ячейки или нескольких ячеек сразу, входящих в текущее выделение. Список Color (Цвет) позволяет указывать цвет границы. В том случае, когда необходимо создать псевдотрехмерную рамку за счет выделения ее двумя цветами, используются списки Light border (Светлая граница) и Dark border (Темная граница). Принципы взаимодействия этих трех выпадающих списков полностью аналогичны случаю установки цветов границы для всей таблицы в целом. То есть, если какой-либо из цветов темного и светлого обрамления не установлен, вместо него используется общий цвет рамки, указываемый при помощи выпадающего списка Color (Цвет). Причем реализация этих свойств происходит посредством уже знакомых вам параметров. Так ячейка, для которой установлены все три цвета, реализуется при помощи конструкции . Здесь установлен общий зеленый (green) цвет рамки при помощи параметра bordercolor, светлый и темный цвета границы – голубой (aqua) и красный (red), соответственно, – заданы посредством параметров bordercolorlight и bordercolordark.
В рассматриваемом диалоговом окне остался только раздел для установки фона ячейки – Background (Фон). Цвет фона ячейки устанавливается в выпадающем списке Color (Цвет). Реализуется подобная возможность при помощи параметра bgcolor тэгов | или | . Если же необходимо в качестве фона использовать графическое изображение, следует установить флажок Use background picture (Использовать фоновый рисунок) и в поле ввода указать местонахождение графического файла. В этом случае к тэгу | добавляется параметр background, в качестве значения которого устанавливается URL искомого файла.
Еще одним объектом таблицы является ее заголовок. Впрочем, он может быть и подписью, но это не меняет его сущности, т. к. реализация в языке HTML от этого не изменяется. Для добавления к таблице заголовка необходимо выполнить команду меню Table/Insert/Caption (Таблица/Добавить/Заголовок), после чего над таблицей возникает дополнительное пространство с текстовым курсором, где можно ввести наименование таблицы. Реализуется этот заголовок при помощи тэгов ccaption > и , между которыми находится тэг заголовка. Он может быть как сверху, так и снизу таблицы, что реализуется при помощи параметра valign. В том случае, если вы желаете поместить подпись таблицы снизу, этот параметр принимает значение bottom. Для расположения заголовка сверху, по умолчанию, используется значение top. Впрочем, вручную набирать данный параметр в коде страницы не придется. Вы всегда можете использовать контекстное меню заголовка, где есть команда Caption Properties (Параметры заголовка). Эта команда вызывает одноименное диалоговое окно, показанное на рис. 8.17.
Рис. 8.17. Диалоговое окно Caption Properties
Как вы видите, единственное свойство заголовка, которое вы можете принудительно устанавливать, это его позиция относительно таблицы. Регулируется оно двумя переключателями: Top of table (Сверху таблицы) и Bottom of table (Снизу таблицы). Первый переключатель выводит заголовок наверх, второй – вниз. В том случае, если вы хотите указать выравнивание названия таблицы по горизонтали, необходимо выделить его и поступить как с обычным текстом, т. е. использовать кнопки выключки. Но при этом весь заголовок заключается в тэги объявления обычного абзаца <р> и р>, к которым уже применяются параметры выравнивания текста. Впрочем, у тэга тоже есть тэг выравнивания align, но различные браузеры интерпретируют его по-разному, поэтому его прямое применение нежелательно.
Теперь перейдем к тем инструментам работы с таблицами, которые не затрагивают непосредственно саму реализацию таблицы на языке HTML. Начнем со способов создания таблиц. Один способ мы уже рассмотрели ранее. Это использование команды Insert/Table (Вставка/Таблица). Однако, помимо прямой вставки, таблицу можно нарисовать. Для этого используется команда меню Table/Draw Table (Таблица/Нарисовать таблицу) или одноименная кнопка с панели инструментов Tables (Таблицы). После выполнения этой команды курсор принимает форму каравдаша, и им можно просто нарисовать таблицу. В том случае, если необходимо удалить ошибочно проведенную линию, стоит нажать на кнопку Eraser (Ластик), расположенную на панели инструментов для работы с таблицами. Курсор принимает форму ластика, и им можно стереть все, кроме внешних границ таблицы.
Если у вас уже набран текст, который необходимо преобразовать в таблицу, используется команда меню Table/Convert/Text to Table (Таблица/Преобразовать/Текст в таблицу). При этом активизируется диалоговое окно Convert Text То Table (Преобразовать текст в таблицу), в котором нужно указать способ разделения текстовых блоков, для того чтобы FrontPage мог правильно разбить текстовые блоки по ячейкам. На выбор предлагается разделение по абзацам (Paragraphs (Абзацы)), символами табуляции (Tabs (Табуляция)) и запятыми (Commas (Запятые)). В том случае, если весь текстовый блок необходимо поместить в одну ячейку, следует выбрать вариант None (Нет). И конечно, у вас есть возможность указать свой собственный символ-разделитель. Для этого надо выбрать альтернативу Other (Другой) и поместить в поле ввода необходимый символ. Впрочем, FrontPage может произвести и обратную операцию, т. е. преобразовать таблицу в текст. Для этого используется команда меню Table/Convert/Table То Text (Таблица/Преобразовать/Таблицу в текст). При этом содержимое каждой ячейки записывается в отдельном абзаце.
Разберемся с изменением количества столбцов или строк таблицы. Удаление этих элементов производится достаточно просто. Следует выделить предназначенную к удалению часть таблицы и нажать кнопку Delete Cells (Удалить ячейки) на инструментальной панели или выполнить команду меню Table/Delete Cells (Таблица/Удалить ячейки). Выделенный блок исчезнет. Необходимо отметить, что если просто нажать клавишу на клавиатуре, то удалится только содержимое этих ячеек. Для вставки дополнительных столбцов или строк используются кнопки Insert Columns (Вставить столбцы) и Insert Rows (Вставить строки) или соответствующие команды меню.
Несколько ранее мы рассматривали случай создания ячеек, занимающих пространство, отведенное под несколько ячеек сразу. Для этих целей применяется также команда меню Table/Merge Cells (Таблица/Объединить ячейки) или одноименная кнопка на панели инструментов. Команда меню и кнопка панели инструментов становятся доступными в том случае, если в таблице выделено несколько смежных ячеек. Обратная операция по разбиению одной ячейки на несколько других производится при помощи команды меню Table/Split Cells (Таблица/Разбить ячейки) или соответствующей кнопки. Для уточнения информации о том, как необходимо разбить ячейку, на экран выводится диалоговое окно Split Cells (Разбить ячейки). Пользователь имеет возможность при помощи двух переключателей выбрать порядок разбиения. Разбиение по горизонтальной границе указывается альтернативой Split into rows (Разбить внутри строки). Для разбиения ячейки на столбцы используется альтернатива Split into columns (Разбить внутри столбца). При этом в поле ввода необходимо занести количество новых ячеек, которые должны появиться на месте исходной.
На панели инструментов Tables (Таблицы) сразу после уже рассмотренных нами кнопок Merge Cells (Объединить ячейки) и Split Cells (Разбить ячейки) находится блок кнопок, которые позволяют принудительно устанавливать вертикальное выравнивание содержимого ячеек. Как вы помните, данное выравнивание задается при помощи параметра valign. Эти кнопки носят названия Align Тор (Выравнивание по верху), Center Vertically (Вертикальное центрирование), Align Bottom (Выравнивание по низу) и позволяют выравнивать содержимое по верхнему краю ячейки, уравновешивать в ее центре и прижимать к нижнему краю, соответственно. К сожалению, аналогов этих кнопок среди команд меню Table (Таблица) нет. Однако операцию вертикального выравнивания можно производить при помощи диалогового окна задания свойств ячеек Cell Properties (Параметры ячейки).
На очереди инструменты, автоматически задающие размеры ячеек. В том случае, если вам необходимо сделать несколько ячеек одинаковой высоты, стоит воспользоваться кнопкой Distribute Rows Evenly (Распределить строки поровну). Естественно, все выделенные ячейки должны составлять совокупность смежных строк. Для подобной операции, которая может выровнять ширину столбцов, используется кнопка Distribute Columns Evenly (Распределить столбцы поровну). Для этих кнопок есть и дублирующие команды меню. Необходимо учесть, что операции могут производиться только для ячеек, которые не имеют в своих HTML-тэгах параметров rowspan и coispan. Есть и еще один вариант. FrontPage может ужать ячейки таким образом, что они будут максимально плотно облегать свое содержимое. Для этого используется кнопка AutoFit (Автоподготовка) или одноименная кнопка меню.
На панели инструментов находится еще одна кнопка, которая носит название Fill Color (Заполнить цветом) и позволяет указывать цвет фона ячейки или всего выделения. Правда, подобную возможность мы уже рассматривали при обзоре свойств ячеек.
На этом мы можем закончить обзор приемов работы с таблицами.
Фреймы
Все вы видели такие приложения, которые позволяют работать сразу с несколькими дочерними окнами. В мире World Wide Web подобная возможность реализуется как совокупность нескольких документов в пространстве одного просмотрового окна. Есть основное технологическое ограничение – одно окно браузера на один документ. Не больше и не меньше. Однако всегда есть возможность практически любое правило обойти. Для этого и были придуманы страницы с фреймовой структурой. Фрейм – это место на странице, где показывается другой HTML-документ. Сам фрейм является как бы обособленным окном просмотра, содержащим свои полосы прокрутки. Границы фреймов по умолчанию могут быть изменены удаленным пользователем в процессе просмотра Web-страницы. То есть фреймы разделены подвижной границей, называемой также сплиттером. При этом страница, на которой располагаются фреймы, сама не несет никакого содержимого. По сути, она является просто площадкой для расположения других Web-страниц. Естественно, нет смысла вставлять в исходный документ всего один фрейм. Обычно их не менее двух, но редко на странице размещается более четырех фреймов сразу, т. к. окна просмотра каждого документа, вставленного во фрейм, становятся достаточно маленькими и работать удаленному пользователю с ними неудобно. Если у проектировщика страницы появилась необходимость поместить более четырех фреймов на странице, значит, структура сайта, чаще всего, спроектирована неграмотно.
Обычно в качестве фреймов вставляются панели навигации сайта, содержащие его оглавление, колонтитулы Web-страниц. Очень часто в одном фрейме располагается форма поиска информации на сайте, а в другом фрейме выводится заказанная информация. Иногда два фрейма представлены в виде иерархии уточняющего поиска. Впрочем, все примеры правильного использования фреймов можно с легкостью найти в Интернете. Как отличить правильное построение фреймовой структуры страницы от неправильного? Очень просто. Если со страницей работать удобно, внимание не рассеивается и принципы получения информации интуитивно понятны, следовательно, структура выстроена правильно. В ином случае – разработчики ошиблись. К сожалению, не всегда свое творение можно оценить объективно. Разработчик чаще всего отлично представляет себе, где лежит тот или иной документ, входящий в состав сайта, и навигация по сайту и представление информации от этого несколько страдают, т. к. ему не приходится задумываться об оптимальном поиске. Он помнит все связи и структуру. А удаленный пользователь может иметь совершенно другое мнение, которое очень часто оказывается намного объективнее.
К счастью, FrontPage 2000 содержит несколько готовых фреймовых структур, которые давно опробованы и признаны эффективными. Идеология FrontPage 2000 не позволяет вставить фрейм в уже существующую страницу, даже если она пуста. Страницу с фреймовой страницы необходимо создать. Для этого применяется команда меню File/New/Page (Файл/Создать/Страницу). Эта команда активизирует диалоговое окно New (Новый), которое предназначено для создания сайтов и страниц с использованием заранее приготовленных шаблонов и мастеров. Нас будет интересовать вкладка с названием Frames Pages (Фреймовые страницы), которая показана на рис. 8.18. На ней расположены десять шаблонов для создания Web-страниц с фреймовой структурой. Рассмотрим эти шаблоны в порядке их следования.
Рис. 8.18. Вкладка Frames Pages диалогового окна New
Само диалоговое окно выбора шаблона достаточно удобно, ведь каждый шаблон снабжен краткой аннотацией, а в окне предварительного просмотра видна структура страницы, создаваемой при помощи этого шаблона. Итак, самый первый шаблон Banner and Contents (Баннер и содержание) создает страницу с тремя фреймами. В верхней части страницы расположен так называемый баннер, который обычно содержит общее наименование сайта и панель навигации. Правая часть отдана под содержание данной части сайта. Причем содержание может меняться в зависимости от того, какую часть сайта выбрал для просмотра удаленный пользователь. А основную часть окна занимает главный фрейм, в котором и отображается основной HTML-документ.
Шаблон Contents (Содержание) очень похож на предыдущий, но не содержит баннера. То есть на создаваемой странице будут размещены два фрейма. В левой части страницы – узкий фрейм, предназначенный для оглавления сайта, правая часть отдана под основной фрейм, который показывает выбранную пользователем страницу. Шаблон Footer (Подвал) фрейм с содержанием сайта размещает внизу основной страницы. Шаблон Footnotes (Нижний колонтитул) практически полностью повторяет предыдущий, но нижний фрейм с содержанием занимает несколько больше места. Шаблон Header (Заголовок) тоже относится к группе страниц с двумя фреймами, из которых один отводится под навигационную панель. В этом шаблоне верх страницы занимает узкий фрейм, в котором обычно находится панель навигации. Применяется этот шаблон, как и шаблон Footer (Подвал), в том случае, когда нет нужды делать большое оглавление сайта, а можно обойтись обычной навигационной панелью. Объединяет все рассмотренные случаи еще один шаблон с названием Header, Footer and Contents (Заголовок, подвал и содержание), который создает страницу с четырьмя фреймами. То есть, помимо основного фрейма просмотра документа, создается заголовок, подвал страницы и в левой ее части – фрейм для оглавления.
Следующие два шаблона предназначены для создания страниц с двумя фреймами, содержащими независимые друг от друга документы. Шаблон Horizontal Split (Горизонтальное разбиение) делит страницу на две части по горизонтали, a Vertical Split (Вертикальное разбиение) – по вертикали.
И последние два шаблона помогают создавать страницы с иерархической системой фреймов. В одном фрейме находится оглавление или панель навигации, второй фрейм показывает документ, с помощью которого можно более точно выбрать необходимую информацию, а уже в основном фрейме просматривать искомый документ. Единственное различие между этими шаблонами – порядок расположения фреймов. Так, в шаблоне Nested Hierarchy (Иерархическая страница) в левой части страницы располагается фрейм, отводимый под оглавление сайта, в правом верхнем углу расположен фрейм, в котором уточняется информация, оставшаяся же часть отведена под основное окно просмотра полученного документа. А шаблон Top-Down Hierarchy (Вертикальная иерархия) создает вертикальную иерархическую страницу. В верхнем колонтитуле страницы размещается обычно панель навигации, немного ниже находится уточняющий фрейм, а под ним – основной.
После выбора необходимого шаблона достаточно нажать кнопку ОК, и новая страница с фреймовой структурой почти готова. Ведь изначально на странице Normal (Режим разметки) сама страница еще не готова. Вместо нее показывается структура создаваемой страницы, и в каждом фрейме находится две кнопки. Мы прекрасно помним, что фрейм является лишь окном просмотра для отдельного HTML-документа. Кнопка Set Initial Page (Установить начальную страницу) позволяет при помощи стандартного диалога создания гиперссылки привязать к фрейму уже существующую страницу в качестве стартовой. А кнопка New Page (Новая страница) создает новую пустую страницу.
При создании Web-страниц с фреймовой структурой к трем обычным режимам работы добавляются еще две вкладки основного рабочего окна. Вкладка Normal (Режим разметки) показывает проектируемую страницу. Про вкладку No Frames (Без фреймов) необходимо рассказать подробнее. Дело в том, что далеко не все браузеры изначально поддерживали фреймовую технологию. Поэтому у каждой страницы с фреймами был блок, в котором содержалась строка, говорящая, что эти страницы содержат фреймы, которые данный браузер не может обработать. Так вот, на вкладке No Frames (Без фреймов) записывается текст, который отображается в этом случае. По умолчанию там находится строка This page uses frames, but your browser doesn't support them. Однако вам ничто не мешает заменить ее русским текстом. Вкладка HTML разбивается так же, как и страница, и в каждом отдельном блоке находится HTML-код документа, который ассоциирован с этим фреймом. А на странице Frames Page HTML (HTML-код страницы с фреймами) находится HTML-код самой страницы, содержащей фреймы. Вкладка Preview (Предварительный просмотр) не меняет своего предназначения и используется для предварительного просмотра.
Перейдем на вкладку Frames Page HTML (HTML-код страницы с фреймами) и посмотрим, при помощи какого кода реализуется фреймовая технология.
Итак, вся структура страницы заключается между тэгами | |