[предыдущая]            [следующая]

ГЛАВА 10 Современные технологии. ЧАСТЬ 1.

Теперь вы знаете о Frontpage почти все. Вы знаете, как работать в Проводнике и Редакторе; вы можете сами создать Web-сайт, умеете его поддерживать и администрировать. Думаете, это все? Конечно, вы так не думаете. А как насчет всех этих новомодных штучек, о которых вам прожужжали все уши? С Frontpage вам станут подвластны самые передовые технологии WWW — элементы управления ActiveX, Java-апплеты, JavaScript, VBScript, модули расширения (plug-ins) Netscape и даже динамический HTML. И даже это еще не все; в этой главе вы увидите, как строятся таблицы стилей и как при помощи Мастера определения каналов (Channel Definition wizard) реализуется последний писк моды — push-технология.

Совет

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

щелчком на значке правой кнопкой мыши и выбором в контекстном меню пункта Properties; выделением значка и нажатием комбинации клавиш <Alt>+<Enter>.

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

Панель инструментов Advanced

При работе с этими средствами вы, как правило, будете использовать панель инструментов Редактора Advanced (Дополнительная), показанную на рис. 10.1. Чтобы сделать эту панель видимой, выберите в меню View Редактора опцию Advanced Toolbar.

Рис. 10.1. Панель инструментов Advanced

Вставка фрагмента кода

Поскольку HTML весьма быстро эволюционирует, то в нем могут появиться новые теги, которые Frontpage напрямую не поддерживает. Тем не менее Frontpage предоставляет возможность непосредственно вставить любой фрагмент HTML, в том числе и содержащий новые директивы. При этом имейте в виду, что Frontpage не проверяет, является ли введенный вами код допустимым. Чтобы вставить фрагмент HTML, воспользуйтесь кнопкой Insert HTML — самой левой кнопкой на панели Advanced. Нажав эту кнопку, вы увидите диалоговое окно HTML Markup, показанное на рис. 10.2.

Рис. 10.2. Диалоговое окно HTML Markup

Наберите в этом окне нужный код и нажмите кнопку ОК, чтобы вернуться в Редактор. В окне Редактора введенный вами текст будет отображен в виде значка Unknown HTML (Неизвестный код HTML), напоминающего, что этот фрагмент создали вы сами, а не Frontpage. Чтобы отредактировать такой фрагмент, двойным щелчком на его значке откройте диалоговое окно HTML Markup или щелчком правой кнопки вызовите контекстное меню и выберите в нем пункт HTML Markup Properties (Свойства HTML). Код HTML, сгенерированный Frontpage, можно отредактировать на вкладке Редактора HTML View; как это сделать, читайте в главе 7.

Элементы управления ActiveX

Элементы управления ActiveX представляют собой программные компоненты, придающие Web-страницам функциональность, которую невозможно реализовать на основе стандартного HTML. В качестве примеров можно привести следующие элементы управления: ActiveX Label, позволяющий масштабировать и поворачивать текст; Timer, генерирующий периодические события; Animation, предназначенный для отображения анимаций. Элементы управления ActiveX могут быть созданы с помощью различных языков программирования, в том числе Visual C++ и Visual Basic 5.0. Однако следует иметь в виду, что не все браузеры поддерживают ActiveX. Более подробно об ActiveX вообще и элементах управления ActiveX в частности, а также о том, откуда можно переписать бесплатные элементы управления ActiveX, вы можете узнать на Web-сайте ActiveX по адресу www.microsoft.com/activex/.

Вторая слева кнопка на панели инструментов Advanced называется Insert ActiveX Control (Вставить элемент управления ActiveX). Нажав ее, вы увидите диалоговое окно ActiveX Control Properties (Свойства элемента управления ActiveX), показанное на рис. 10.3.

Рис. 10.3. Диалоговое окно ActiveX Control Properties

Это диалоговое окно предназначено для выбора и конфигурирования элемента управления ActiveX. Сначала в этом окне активен только список Pick a Control (Выбор элемента управления), а все остальные области недоступны. Когда вы выберете в списке элемент управления, остальные области окна также станут активными.

Pick a Control

В раскрывающемся списке Pick a Control перечислены все установленные на вашем компьютере элементы управления ActiveX. Выберите в этом списке один из элементов, при этом станут доступными все неактивные до сих пор поля диалогового окна ActiveX Control Properties. Для редактирования свойств элемента управления нажмите кнопку Properties. Если указанный элемент управления установлен на вашем компьютере и допускает локальное редактирование, появится диалоговое окно Edit ActiveX Control (Редактирование элемента управления ActiveX) и диалоговое окно Properties этого элемента. (Чтобы задать элемент управления ActiveX, не установленный на вашем компьютере, следует непосредственно ввести в этом поле его идентификатор класса (class ID number). — Примеч. пер.}

На рис. 10.4 приведены эти диалоговые окна для элемента управления RealAudio.

Рис. 10.4. Диалоговые окна редактирования элемента управления RealAudio

В диалоговом окне Properties перечислены свойства текущего элемента управления; их можно изменять в соответствии с вашими задачами.

Если выбранный элемент управления не установлен на вашем компьютере или не поддерживает локальное редактирование, то по нажатию кнопки Properties откроется диалоговое окно более общего характера Object Parameters (Параметры объекта), показанное на рис. 10.5. Для работы с этим окном необходимо знать названия атрибутов элемента управления и их возможные значения.

Рис. 10.5. Диалоговое окно Object Parameters

- Name (Имя). Текстовое поле Ыате диалогового окна ActiveX Control Properties позволяет задать имя для идентификации указанного элемента управления при его использовании в сценариях на текущей странице

- Layout (Расположение). В этой группе устанавливается расположение элемента управления на странице

• Alignment (Выравнивание). Задает характер выравнивания элемента управления относительно окружающего текста

• Border thickness (Толщина рамки). Устанавливает ширину (в пикселах) черной рамки вокруг элемента управления

• Horizontal spacing (Интервал по горизонтали). Определяет интервал в обе стороны по горизонтали от элемента управления до ближайшего объекта или текста на текущей строке; интервал задается в пикселах

• Vertical spacing (Интервал по вертикали). Устанавливает интервал сверху и снизу от элемента управления до ближайшего объекта или текста; задается в пикселах

• Width (Ширина). Задает ширину элемента управления в пикселах

• Height (Высота). Задает высоту элемента управления в пикселах

Совет

Размеры элемента управления ActiveX можно регулировать прямо на странице, для этого нужно выделить его, подцепить мышью маркер на одной из сторон рамки и потянуть в нужном направлении.

- Alternative Representation (Альтернативное представление). Это поле используется для ввода текста или фрагмента кода HTML, который будет замещать элемент управления в браузерах, не поддерживающих ActiveX. Если ввести в этом поле просто фрагмент текста, то его вы и увидите в браузере вместо элемента управления; чтобы варьировать его начертание, размер, цвет и прочие атрибуты, впишите соответствующие теги. Наконец, в этом поле можно ввести код HTML, который на месте элемента управления покажет изображение, например, <img src="images/ pebbles. gif">. В приведенном примере файл Pebbles.gif должен находиться в папке Images текущего сайта

- Network Location (Местоположение в сети). Если элемент управления ActiveX расположен не на вашем компьютере, то в этой секции можно указать сетевой путь, по которому браузер будет искать элемент управления или данные

• Data Source (Файл данных). Для функционирования некоторых элементов управления ActiveX необходимо задавать параметры времени выполнения (run-time parameters). Поле Data Source используется для указания URL или местоположения в сети файла параметров; чтобы отыскать этот файл, можно воспользоваться кнопкой Browse

• Code Source (Исходный файл). Если элемент управления расположен не на локальном компьютере, введите в этом поле его LJRL или местоположение в сети, чтобы браузер, открывая страницу, мог его найти. Это даст браузеру возможность при необходимости загрузить и установить элемент управления

Рис. 10.6. демонстрирует вид элемента управления RealAudio в окне Редактора.

Рис. 10.6. Вид элемента управления RealAudio в окне Редактора

Java-апплеты

Третьей слева на панели инструментов Advanced расположена кнопка Insert Java Applet (Вставить Java-апплет). Java-апплеты представляют собой небольшие программы, написанные на языке Java; в известном смысле они похожи на элементы управления ActiveX тем, что их применение позволяет привнести в ваши Web-страницы несвойственный стандартному HTML динамизм. Нажав кнопку Insert Java Applet, вы увидите диалоговое окно Java Applet Properties (свойства Java-апплета), приведенное на рис. 10.7.

- Applet Source (Исходный файл). Введите в этом текстовом поле имя исходного файла Java-апплета (эти файлы обычно имеют расширение CLASS). Имейте в виду, что язык Java чувствителен к регистру символов, поэтому его важно соблюдать

- Applet Base URL (Базовый адрес апплета). В этом текстовом поле введите URL папки, содержащей исходный файл апплета

Рис. 10.7. Диалоговое окно Java Applet Properties

- Message for browsers without Java support (Сообщение для браузеров, не поддерживающих Java). В этом поле можно ввести текст или код HTML, который будет отображаться на месте апплета в браузерах, не поддерживающих Java. Введя в этом поле обычный текст, вы увидите в браузере этот текст на месте апплета; тегами HTML вы можете изменить начертание, размер, цвет и т. д. Если ввести в этом поле код типа <img src="images/BamBam.gif">, то на месте Java-апплета вы увидите изображение (здесь файл BamBam.gif находится в папке Images текущего сайта).

- Applet Parameters (Параметры апплета). В этой группе задаются имена и значения параметров апплета. Имена параметров и допустимые значения должны быть приведены в прилагаемой к апплету документации

Имена и значения всех вводимых вами параметров перечисляются в текстовом окне. Для редактирования этого списка используются кнопки Add (Добавить), Modify (Изменить) и Remove (Удалить)

- Size (Размер). В этой секции устанавливаются ширина и высота Java-аплета в пикселах

Совет

Размеры Java-апплета можно изменить прямо на странице, выделив его и потянув мышью за маркер рамки.

- Layout (Расположение). В этой секции задаются интервалы и выравнивание апплета на странице

• Horizontal spacing (Интервал по горизонтали). Устанавливает интервал по горизонтали в обе стороны от апплета до ближайшего объекта или текста на текущей строке; измеряется в пикселах

• Vertical spacing (Интервал по вертикали). Устанавливает интервал сверху и снизу от апплета до ближайшего объекта или текста; измеряется в пикселах

• Alignment (Выравнивание). Задает характер выравнивания Java-апплета относительно окружающего текста

На рис. 10.8. вы видите, как Java-аппдет выглядит в Редакторе.

Рис. 10.8. Вид Java-апплета в Редакторе

Модули расширения

Встраиваемые модули расширения (plug-in) первоначально были разработаны для пользователей браузеров компании Netscape, однако теперь они поддерживаются и браузером Microsoft Internet Explorer. При нажатии кнопки Insert Plug-In (Вставить модуль расширения), четвертой по счету на панели Advanced, открывается диалоговое окно Plug-In Properties (Свойства встраиваемого модуля), показанное на рис. 10.9.

- Data Source (Исходный файл). В этом текстовом поле следует непосредственно или при помощи кнопки Browse указать местоположение или URL модуля расширения

- Message for browsers without Plug-In support (Сообщение для браузеров, не поддерживающих встраиваемые модули). Это поле используется для ввода текста или фрагмента кода HTML, который займет место модуля в не поддерживающих модули расширения браузерах. Обычный текст, введенный в этом поле, будет отображаться в браузере один к одному;

соответствующими тегами можно задать его начертание, размер, цвет и прочие атрибуты. С другой стороны, в этом поле можно ввести код HTML, который заместит модуль расширения изображением, например, <img src="images/Dino.gif">. В этом примере файл Dino.gif располага-ется в папке Images текущего сайта.

Рис. 10.9. Диалоговое окно Plug-In Properties

- Size (Размер). В этой секции устанавливаются ширина и высота модуля расширения в пикселах

Совет

Чтобы изменить размеры модуля расширения прямо на странице, выделите его и потяните мышью за маркер рамки.

- Hide Plug-In (Скрыть модуль). Установите этот флажок в том случае, если модуль расширения не должен быть видимым

- Layout (Расположение). В этой секции задается расположение модуля расширения на странице

• Alignment (Выравнивание). Устанавливает характер выравнивания модуля расширения относительно окружающего текста

• Border thickness (Толщина рамки). Задает ширину (в пикселах) черной рамки вокруг модуля расширения

• Horizontal spacing (Интервал по горизонтали). Определяет интервал в обе стороны по горизонтали от модуля расширения до ближайшего объекта или текста на текущей строке; интервал задается в пикселах

• Vertical spacing (Интервал по вертикали). Устанавливает интервал сверху и снизу от модуля расширения до ближайшего объекта или текста; задается в пикселах

Сценарии VBScript и JavaScript

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

VBScript — это язык сценариев, разработанный в корпорации Microsoft и базирующийся на языке Visual Basic for Applications. Язык JavaScript, в свою очередь, был разработан компанией Netscape на основе языка программирования С. Сценарии включаются прямо в код HTML и исполняются в брау-зере, поддерживающем эти языки.

Для включения в страницу сценариев VBScript или JavaScript предназначена кнопка под названием Insert Script (Вставить сценарий); на панели инструментов Advanced она крайняя справа. При нажатии кнопки Insert Script на экране появится диалоговое окно Script, показанное на рис. 10.10.

Рис. 10.10. Диалоговое окно Script

Переключателем в группе Language (Язык) выбирается конкретный язык сценария. Для языка VBScript доступна еще одна дополнительная опция — Run Script On Server (Выполнять сценарий на сервере); при установке этого флажка сценарий VBScript исполняется сервером, а не клиентом. Для ввода собственно сценария предназначено текстовое поле Script. Кнопкой Script Wizard (Мастер сценариев) запускается Мастер сценариев — инструмент, позволяющий генерировать сценарии в интерактивном режиме. Режим Мастера сценариев Code View (просмотр кода) позволяет видеть генерируемый исходный текст непосредственно в процессе создания сценария. Картина, которую вы увидите, запустив Мастер сценариев, будет аналогична представленной на рис. 10.11.

Рис. 10.11. Пример работы Мастера сценариев

Основной принцип работы с мастером состоит в том, что выбирается объект и связанное с ним событие, а затем определяется действие, совершаемое при наступлении этого события. После завершения работы с Мастером сценариев в код HTML вставляется фрагмент на VBScript или JavaScript, а на странице в месте вставки появляется соответствующий значок.

Таблицы стилей (CSS)

Одной из самых больших проблем языка HTML была невозможность установки параметров текста. Если вы хотели задать определенный кегль шрифта (т. е. размер символов текста) или установить определенный межстрочный интервал (расстояние между строками абзаца), вас ожидало жестокое разочарование. С появлением иерархических таблиц стилей (cascading stylesheets, CSS) ситуация значительно изменилась к лучшему.

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

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

- Embedded Stylesheet (Внутренняя таблица стилей). В этом случае таблица стилей включается в код HTML-страницы и определенные в ней стили относятся только к этой странице

- Inline Style (Встроенный стиль). Эта разновидность стилей распространяется только на отдельные элементы страницы и определяется прямо в открывающем теге HTML-элемента

Если страница вашего сайта связана с внешней таблицей стилей, то добавляемые помимо нее встроенные или внутренне стили дополняют или переопределяют атрибуты, заданные во внешней таблице.

Ниже мы ознакомимся поочередно со всеми тремя методами определения стилей.

Внешние таблицы стилей

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

Примечание

Написание таблиц стилей выходит за рамки этой книги, но основные принципы можно изложить в нескольких словах. Определение стиля может быть любым те-гом HTML, например, h2; непосредственно за ним следует заключенный в фигурные скобки список свойств, разделенных точкой с запятой. Например, это может выглядеть так: h2 {font-size: 14 pt; line-height: 16 pt; font-style: italic; font-family: arial;

color: blue; text-align: center}. В этом случае на всех страницах, использующих эту таблицу стилей, текст стиля heading 2 будет отображаться синим цветом, шрифтом Arial курсивного начертания, кеглем 14, выровненным по центру, с межстрочным интервалом 16 пунктов.

1. Откройте в Проводнике сайт, для которого вы хотите создать таблицу стилей, и установите режим просмотра структуры папок.

2. На левой панели структуры папок выберите самую верхнюю папку; ее имя начинается префиксом http://.

3. Создайте новую страницу, нажав кнопку New Page или щелкнув правой кнопкой мыши на правой панели и выбрав в контекстном меню пункт New Page.

4. Переименуйте новую страницу таким образом, чтобы она имела расширение .css. Будет разумно дать ей характерное имя, например, styles.css.

5. Так как эта страница не является файлом HTML, то она не должна содержать кода HTML. Двойным щелчком на странице откройте ее в Блокноте (Notepad.exe) и уберите из нее все теги.

6. Наберите определение вашей таблицы стилей. У вас должно получиться что-то похожее на пример, приведенный на рис. 10.12.

В соответствии с приведенной на рисунке таблицей стилей любой текст стиля h2 будет отображаться шрифтом Arial Bold, 12, синего цвета. Если на компьютере пользователя шрифт Arial не установлен (как, например, на Macintosh), то текст будет выведен в следующей гарнитуре, Helvetica. Второй стиль использует тег ul. Любой текст, использующий этот тег, будет отображен шрифтом Arial 10 с отступом слева в 1 дюйм.

Рис. 10.12. Таблица стилей

7. Закончив определение стилей, закройте Блокнот.

Для редактирования этой таблицы стилей следует просто открыть страницу styles.css в Блокноте и внести в нее необходимые изменения.

Связь с внешними таблицами

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

1. Откройте в Редакторе страницу, в которую необходимо вставить ссылку на таблицу стилей.

2. Перейдите на вкладку Редактора HTML View.

3. Между тегами head поместите тег link с параметром href, указывающим на файл таблицы стилей. На рис. 10.13 вы видите, как это выглядит в Редакторе.

Рис. 10.13. Код HTML со ссылкой на таблицу стилей

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

Внутренние таблицы стилей

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

Чтобы вставить в страницу внутреннюю таблицу стилей, сделайте следующее:

1. Откройте страницу в Редакторе.

2. Выберите в меню Format команду Stylesheet; при этом откроется диало говое окно Format Stylesheet, показанное на рис. 10.14.

Обратите внимание на теги комментария <!— и —>; большинство браузе-ров игнорируют незнакомые им теги, такие, например, как <style>, но выводят текст, помещенный между ними. Чтобы внутренние таблицы стилей не отображалась в виде обычного текста в браузерах, не поддерживающих CSS, их заключают между тегами комментария.

Рис. 10.14. Диалоговое окно Format Stylesheet

3. Между тегами комментария наберите имя тега HTML, к которому будет относиться таблица стилей, пусть для примера это будет hi, и поставьте пробел. Затем определите таблицу стилей, т. е. перечислите атрибуты стиля для этого элемента.

4. После завершения нажмите кнопку ОК; внутренняя таблица будет сохранена на странице.

Чтобы отредактировать внутреннюю таблицу, повторите шаги 1 и 2, а затем внесите необходимые изменения.

Если вы вставляете внутреннюю таблицу стилей в страницу, связанную также и с внешней таблицей, то вам придется совершить еще один дополнительный ход. Прежде чем добавлять внутренние стили, наберите между тегами комментария строку ©import URL (/style.css), где style.css — это имя внешней таблицы (рис. 10.15). При этом в HTML все равно нужно включать ссылку на внешнюю таблицу, как описано выше, в разделе "Внешние таблицы стилей".

Рис. 10.15. Пример одновременного употребления внешних и внутренних таблиц стилей

Встроенные стили

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

Во-первых, в нормальном режиме Редактора выберите элемент или элементы, стиль которых вы хотите определить, а затем выполните следующую последовательность действий:

1. Щелкните на выделенном объекте (группе объектов) правой кнопкой мыши и выберите в контекстном меню соответствующее диалоговое окно свойств. Например, если вы выбрали только несколько слов из абзаца, то откройте диалоговое окно Font Properties, но если вы выбрали целый абзац, то укажите Paragraph Properties.

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

3. В диалоговом окне Style определите свойства выделенного элемента и нажмите кнопку ОК; результат вы увидите в Редакторе.

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

[предыдущая]            [следующая]