Компоненты и формы Frontpage
         

Активные страницы сервера



Активные страницы сервера

Активные страницы отличаются от любых других HTML-страниц в основном тем, что в их коде HTML, помимо всего прочего, содержатся серверные сценарии. Эти сценарии могут выполняться любыми совместимыми с ASP Web-серверами.



Анимации



Анимации

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

Отметьте текст, который надо сделать анимированным, укажите в меню Format пункт Animation и затем выберите в списке приглянувшийся вам эффект. Когда пользователь откроет страницу, содержащую анимационный эффект, он увидит текст, выписывающий какие-то невероятные па и в конце концов останавливающийся на том месте, куда он был помещен в Редакторе. Во Frontpage вы найдете 14 различных готовых эффектов, а именно:

- Fly From Bottom — Текст выезжает на страницу снизу - Fly From Left — Текст выезжает слева - Fly From Right — Текст выезжает справа

- Fly From Top — Выезжает сверху

- Fly From Bottom-Left — Выезжает слева снизу

- Fly From Bottom-Right — Выезжает справа снизу

- Fly From Toe-Left — Выезжает слева сверху

- Fly From Top-Right — Выезжает справа сверху

- Fly From Top-Right By Word — Слова прилетают поодиночке справа сверху

- Fly From Bottom-Right By Word — Слова прилетают поодиночке справа снизу

- Drop In By Word — Текст сыплется сверху по одному слову

- Spiral — Текст летит по спирали

- Zoom In — Текст увеличивается

- Zoom Out — Текст уменьшается

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





Демонстрирует первый экран мастера.



Рисунок 10.22 демонстрирует первый экран мастера.



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



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



Диалоговое окно ActiveX Control Properties



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

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



Диалоговое окно Format Stylesheet



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

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

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

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

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



Диалоговое окно Format Stylesheet после нажатия кнопки Style



Рисунок 10.17. Диалоговое окно Format Stylesheet после нажатия кнопки Style

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

Совет


Совет

В диалоговом окне Style можно редактировать любые внутренние таблицы стилей, в том числе и написанные вручную. На любой странице, содержащей внутреннюю таблицу, выберите Stylesheet в меню Format; в диалоговом окне Format Stylesheet щелкните в любом месте между фигурными скобками стиля, подлежащего редактированию, при этом откроется диалоговое окно Style, в котором можно увидеть все на текущий момент установленные атрибуты стиля. Дальнейшие действия в отдельных пояснениях не нуждаются.



Диалоговое окно Format Stylesheet с введенным тегом h1 до использования кнопки Style



Рисунок 10.16. Диалоговое окно Format Stylesheet с введенным тегом h1 до использования кнопки Style

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

4. Нажмите кнопку Style. При этом откроется диалоговое окно Style, в котором можно установить все доступные атрибуты текста (Рисунок 10.17).

Определения стиля, которые вы видите на рисунке, были сгенерированы автоматически. На самом деле стиль записывается в одну длинную строку; здесь она разорвана, для того чтобы показать все его элементы.



Диалоговое окно HTML Markup



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

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



Диалоговое окно Java Applet Properties



Рисунок 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-аплета в пикселах



Диалоговое окно Object Parameters



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

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

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

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

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

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

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

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

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



Диалоговое окно Page Transitions



Рисунок 10.21. Диалоговое окно Page Transitions

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



Диалоговое окно Plug-In Properties



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

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

Совет


Совет

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

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

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

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

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

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

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



Диалоговое окно Script



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

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



Диалоговое окно Style



Рисунок 10.20. Диалоговое окно Style

Введите в поле Class имя, которое вы хотите дать классу, или выберите его из списка. Затем на остальных вкладках диалогового окна задайте атрибуты класса. Классы стиля можно применять к самым разнообразным элементам:

изображениям (через диалоговое окно Image Properties), абзацам (через Paragraph Properties), таблицам (через Table Properties) и т. д.



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



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

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

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



Динамический HTML



Динамический HTML

Ну, как насчет того, чтобы внести в вашу страницу немного действия? Если ваш браузер поддерживает динамический HTML, то вы имеете реальный шанс вырваться в первые ряды, оставив далеко за флагом разных мелких сошек. Динамический HTML реализует потенциал самых новых и мощных браузеров; заставьте текст летать, придумайте для ваших страниц интересные переходные эффекты — в ваших руках огромная сила, так распорядитесь же ей как следует; добро пожаловать в мир динамического HTML.



Думай о ближнем



Думай о ближнем

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

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

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

- Если для ссылки на изображения большого объема вы используете миниатюры (например, вы представляете на своем сайте фотогалерею), то снабдите полноформатные изображения подробным описанием. Таким образом люди, использующие читающие устройства, смогут получить полное описание изображения

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

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

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



И многое другое...



И многое другое...

Нами не затронуты еще многие аспекты и возможности Frontpage, которые слишком специальны для обсуждения в данной книге, но о которых вам следует знать; любые подробности вы можете найти на Web-сайте Frontpage по адресу www.microsoft.com/frontpage/. Вот только два примера из многих:

- Frontpage Software Developer's Kit (Инструментарий Frontpage для разработчика, SDK), который можно загрузить с Web-сайта Microsoft, предоставляет вам возможность создавать собственные мастера и компоненты, вводить в меню новые команды и еще многое другое

- Frontpage в целях обеспечения многопользовательского контроля изменений в Web-сайте поддерживает интеграцию с Microsoft Visual SourceSafe (VSS)



Интеграция с базами данных



Интеграция с базами данных

Если вы хотите реализовать доступ к данным, хранящимся в базе, с тем, чтобы выводить результаты на Web-странице, то в этом разделе вы почерпнете необходимые начальные сведения. При помощи Мастера подключения к базам данных (Database Region Wizard) вы можете посылать SQL-запросы (Structured Query Language, язык структурированных запросов) к доступным на Web-сервере ODBC-совместимым (Open Data Base Connectivity, интерфейс взаимодействия с открытыми базами данных) базам данных. Когда с вашей страницы поступит запрос, на его основе будет сформулирован соответствующий SQL-запрос. Результаты запроса будут использованы специальным обработчиком формы — в данном случае активной страницей сервера (Active Server Page, ASP) — для генерации информации и отображения ее в браузере.



Использование Мастера определения каналов



Использование Мастера определения каналов

Выберите в меню Проводника Frontpage Tools опцию Define Channel

(определить канал); при этом будет запущен Мастер определения каналов. На каждом этапе своей работы мастер будет снабжать вас описанием необходимых действий. Каждый шаг завершается нажатием кнопки Next.

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

Если ваш сайт оборудован общими полями и панелью навигации, то при установке флажка с длинным названием Place a button on the navigation bar.... мастер поместит на заглавную, или домашнюю, страницу сайта кнопку Subscribe (Подписка). Второй флажок, Prepare for publishing to (Подготовить к публикации), позволяет указать, будете ли вы публиковать свой сайт в Internet немедленно или нет. Если вы хотите окончательно подготовить сайт к публикации, установите этот флажок и введите URL в текстовом поле Prepare for publishing to; чтобы предварительно протестировать ваш канал локально, снимите этот флажок.

Закончив с установкой опций, нажмите кнопку Save. Frontpage создаст в Проводнике CDF-файл. Мастер в любой момент можно запустить заново, дважды щелкнув на файле определения каналов в карте навигации, списке файлов или структуре папок.



Изменение базы данных



Изменение базы данных

Чтобы изменить уже сделанные установки, запустите Мастер подключения к базам данных, щелкнув правой кнопкой на компоненте Database Region и выбрав в контекстном меню Database Region Properties. Чтобы быстро ввести новое имя поля запроса или выбрать его из уже существующих, щелкните на компоненте Database Region правой кнопкой и выберите в контекстном меню Database Column Value Properties.

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



Java-апплеты



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 папки, содержащей исходный файл апплета



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



Элементы управления 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.



Классы



Классы

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

например, если вам нужны разноцветные версии заголовка первого уровня, то определите классы hl.green, hl.red, hl.blue и т. д., совершенно идентичные во всем, за исключением цвета шрифта.

Если вы хотите ввести классы в таблицу стилей, поступите следующим образом:

1. Выберите в меню Format опцию Stylesheet и войдите в диалоговое окно Format Stylesheet.

2. Наберите имя первого класса, hi.green. He забудьте поместить его между тегами комментария.

3. Нажмите кнопку Style и задайте все атрибуты, которые будут общими для всех заголовков первого уровня, например, размер, поля или отступы. Запомните, что зеленый цвет шрифта будет только в этом классе (Рисунок 10.18).



Кнопка Style



Кнопка Style

Эта кнопка "мозолит глаза" чуть ли не в каждом диалоговом окне. Наверное, вы задавались вопросом, а что будет, если ее нажать? Ну вот вы и дождались ответа.

Даже в том случае, если вы испытываете трудности с синтаксисом CSS или просто не имеете ни малейшего желания с ним знакомиться, таблицы стилей не останутся для вас пустым звуком. Ниже вкратце описано создание внутренней таблицы:

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

2. Выберите в меню Format опцию Stylesheet, чтобы открыть диалоговое окно Format Stylesheet, показанное на Рисунок 10.16.



Кнопка Subscribe



Кнопка Subscribe

Иногда у вас может возникнуть необходимость в самостоятельном создании кнопки Subscribe, например, если в вашем сайте не используются панели навигации, либо если вы отказались от ее создания Мастером определения каналов. Чтобы поместить эту кнопку на страницу вручную, создайте в Редакторе ссылку со страницы на CDF-файл. Эта процедура заключается в следующем:

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

2. Выберите способ отображения кнопки — текст или графику.

3. Если вы решили, что кнопка будет текстовой, нажмите на панели инструментов кнопку Create Or Edit Hyperiink или выберите в меню Edit команду Hyperlink. Если же ваша кнопка будет графической, нарисуйте при помощи инструмента Rectangle панели Image активную область на изображении; при этом откроется диалоговое окно Create Hyperlink.

4. В диалоговом окне Create Hyperlink выберите в качестве адресата гипер-ссылки CDF-файл текущего сайта и нажмите кнопку ОК.

Вот и все.



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



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

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



Мастер определения каналов



Мастер определения каналов

Мастер определения каналов проведет вас по всем шагам создания канала и в итоге создаст файл определения канала в формате CDF (Channel Definition Format, Формат определения канала). Этот файл обеспечивает пользователям возможность обращаться к вашему сайту как к каналу, предоставляя индекс доступных ресурсов и средства обновления информации. В процессе определения канала в CDF-файле записываются сведения о характере предоставляемого пользователям сервиса: канал, либо хранитель экрана, либо элемент рабочего стола либо, наконец, уведомление по e-mail.



Мастер подключения к базам данных



Мастер подключения к базам данных

Для запуска мастера войдите в меню Insert и в пункте Database выберите Database Region Wizard.



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



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

Встраиваемые модули расширения (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 текущего сайта.



На первом экране мастера устанавливаются параметры соединения с ODBC-совместимой базой данных



Рисунок 10.22. На первом экране мастера устанавливаются параметры соединения с ODBC-совместимой базой данных



На втором экране мастера определяются SQL-запросы к базе данных на вашем сервере



Рисунок 10.23. На втором экране мастера определяются SQL-запросы к базе данных на вашем сервере

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

создайте запрос в Access, установите в Access режим SQL view, скопируйте запрос SQL в буфер и вставьте его в мастер нажатием кнопки Paste SQL From Clipboard (Вставить SQL-запрос из буфера).



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



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

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



Параметр поля формы



Параметр поля формы

При нажатии на кнопку Insert Form Field Parameter (Вставить параметр поля формы) открывается диалоговое окно Insert Form Field Parameter, в котором вы можете ввести значение параметра IDC для SQL-запроса.

Нажмите кнопку Next, чтобы перейти к следующему экрану мастера, показанному на Рисунок 10.24.



Переходы между страницами



Переходы между страницами

Чтобы сотворить маленькое чудо на Web-странице вовсе не надо быть Хот-табычем. Если вы захотите как-то выделить страницу из общей массы, попробуйте один из переходных эффектов, включенных во Frontpage. Например, можно сделать так, чтобы при открытии страницы она постепенно проявлялась, а при выходе — так же постепенно исчезала. Переходные эффекты приурочиваются к первому заходу пользователя на страницу или на сайт, а также к моменту первого ухода.

Чтобы задать тот или иной переходный эффект, откройте диалоговое окно Page Transitions (Переходы между страницами), показанное на Рисунок 10.21, для чего выберите в меню Format опцию Page Transition.



Первый класс — h1green—и его атрибуты



Рисунок 10.18. Первый класс — h1. green—и его атрибуты

4. Скопируйте полностью определение стиля и вставьте его следующей строкой после h 1. green.

5. Измените имя класса на hi.red.

6. Установите курсор где-нибудь между фигурными скобками стиля hl.redv. нажмите кнопку Style.

7. В диалоговом окне Style измените цвет текста на Red (красный) и нажмите кнопку ОК; определение класса будет соответствующим образом отредактировано (Рисунок 10.19 и 10.20).

8. Повторите этот процесс для всех классов стиля, которые вы хотите определить. Закончив работу, нажмите кнопку ОК и закройте диалоговое окно Format Stylesheet.

Все вновь созданные для этой страницы классы будут перечислены в выпадающем списке Style панели инструментов Format Редактора.



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.



в виду, что все эти



Предупреждение

Однако имейте в виду, что все эти возможности доступны только в браузерах, поддерживающих динамический HTML, например, в Internet Explorer 4.0.

Прежде чем вы начнете пользоваться мастером



Прежде чем вы начнете пользоваться мастером

Прежде чем запустить Мастер определения каналов, вам следует продумать следующие моменты:

- Чтобы придать своему каналу индивидуальные отличительные черты, оснастите его логотипом и значками страниц; их следует подготовить заблаговременно, чтобы они были доступны к моменту запуска мастера. Логотип должен быть графическим файлом в формате GIF и размером 80х32 пикселов; он будет использоваться для идентификации вашего канала в браузере. Значки для идентификации страниц в вашем канале должны быть выполнены также в формате GIF и иметь размер 16х16 пикселов

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



Написание таблиц стилей выходит за



Примечание

Написание таблиц стилей выходит за рамки этой книги, но основные принципы можно изложить в нескольких словах. Определение стиля может быть любым те-гом 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 дюйм.

Применение стиля к тексту



Применение стиля к тексту

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

- Вьвделив текст в Редакторе и выбрав стиль из списка Style; этот вариант действителен только для внутренних стилей

- Вручную введя соответствующий тег в Редакторе, в режиме HTML view

Используя внешние таблицы, имеет смысл напечатать файл .css — и у вас будет удобный справочник по всем именам и определениям.



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



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



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



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

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



Публикация канала



Публикация канала

Чтобы разместить канал на удаленном сервере Всемирной Паутины, вновь запустите Мастер определения каналов и нажимайте кнопку Next до тех пор, пока не достигнете седьмого этапа. В группе Additional Options установите флажок Prepare for publishing to и введите URL, по которому вы собираетесь разместить канал; по завершении операции нажмите кнопку ОК.

Нажмите на панели инструментов Проводника кнопку Publish. Если вы публикуете сайт повторно, на прежнее место, Frontpage проделает всю остальную часть процедуры сам, без лишних вопросов. Если же это первая публикация канала, то Frontpage предложит вам ввести URL, по которому он будет находиться.

Файл определения канала жестко привязан к местоположению сайта: если вы имеете привычку периодически переводить свой сайт с одного сервера на другой, то имейте в виду, что каждый раз при смене местонахождения канала пользователям придется подписываться на него заново.



Расширения полей форм



Расширения полей форм

Когда вы создаете форму, Frontpage на основе положения полей на странице автоматически устанавливает определенный порядок их обхода. Если вы хотите определить свой собственный порядок обхода, введите в поле Tab Order (Порядок обхода) диалогового окна свойств поля формы значение от 1 до 999 включительно.

Пользователь, заполняя форму, нажатием клавиши <ТаЬ> может перемещаться от поля к полю в заданной вами последовательности: сначала поле с номером 1, затем с номером 2 и т. д. Это весьма существенно помогает людям с офаниченной подвижностью или даже просто при отсутствии мыши. При просмотре сайта в браузере, не поддерживающем заказной порядок обхода, переход от поля к полю будет осуществляться в порядке, установленном по умолчанию.



Сценарии VBScript и JavaScript



Сценарии 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.



Складные списки



Складные списки

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

Чтобы придать списку на текущей странице подобные свойства, выберите его и установите в диалоговом окне List Properties флажок Enable Collapsible Outlines (Разрешить складные списки).



Соединение с базами данных



Соединение с базами данных

В этой секции устанавливаются имя источника данных ODBC, имя пользователя и пароль.

- ODBC Data Source Name (DSN) (Имя источника данных ODBC). Введите в этом поле имя источника данных ODBC, с которым вы хотите соединиться. Этот источник данных указывается при помощи Администратора источников данных ODBC (ODBC Administrator); он должен быть сконфигурирован как системный источник данных. Это поле следует заполнить обязательно Если Web-сервер запущен под управлением Windows 95 или Windows NT Server 4.0 и база данных физически находится на том же сервере, вы можете создать именованный источник данных ODBC при помощи Администратора источников данных ODBC (значок 32bit ODBC или ODBC в Панели управления Windows). В случае другой конфигурации ODBC обратитесь к документации по вашей базе данных.

- IJsername (Имя пользователя). Если СУБД, соединение с которой вы устанавливаете, требует ввода имени пользователя, установите флажок Username и введите имя пользователя в соответствующем текстовом поле

- Password (Пароль). Если СУБД, соединение с которой вы устанавливаете, требует ввода пароля, установите флажок Password и введите пароль в соответствующем текстовом поле

Нажмите кнопку Next, чтобы перейти к следующему экрану Мастера подключения к базам данных, показанному на Рисунок 10.23. Не забывайте о том, что с помощью кнопки Back вы всегда сможете вернуться назад на любой из пройденных этапов.



в страницу элемент управления, сценарий



Совет

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

Размеры элемента управления ActiveX можно



Совет

Размеры элемента управления 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 или местоположение в сети, чтобы браузер, открывая страницу, мог его найти. Это даст браузеру возможность при необходимости загрузить и установить элемент управления

апплета можно изменить прямо на



Совет

Размеры Java- апплета можно изменить прямо на странице, выделив его и потянув мышью за маркер рамки.
- Layout (Расположение). В этой секции задаются интервалы и выравнивание апплета на странице
• Horizontal spacing (Интервал по горизонтали). Устанавливает интервал по горизонтали в обе стороны от апплета до ближайшего объекта или текста на текущей строке; измеряется в пикселах
• Vertical spacing (Интервал по вертикали). Устанавливает интервал сверху и снизу от апплета до ближайшего объекта или текста; измеряется в пикселах
• Alignment (Выравнивание). Задает характер выравнивания Java-апплета относительно окружающего текста
На Рисунок 10.8. вы видите, как Java-аппдет выглядит в Редакторе.

Современные технологии



Современные технологии

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



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



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

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

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

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

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



Таблица стилей



Рисунок 10.12. Таблица стилей

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

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



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



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

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

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

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

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

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

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

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



Третий экран Мастера подключения к базам данных



Рисунок 10.24. Третий экран Мастера подключения к базам данных

Введите имена полей запроса в вашей базе данных: нажмите кнопку Add Field и наберите имя поля в диалоговом окне Add Field; повторите эту процедуру необходимое количество раз. Если вы хотите, чтобы база данных отображалась в таблице на странице, установите флажок Show the query in a table (Показать запрос в таблице).

Завершив ввод информации в Мастере подключения к базам данных, нажмите кнопку Finish. Frontpage поместит на страницу соответствующий код клиентской стороны и разместит на вашей странице компонент Database Region (База данных). Если вы добавили базу данных к существующей странице, то перед сохранением страницы Frontpage предупредит вас, что для того, чтобы база данных была работоспособна, страницу следует записать с расширением .asp. Если же вы сохраняете эту страницу в первый раз, то Frontpage даст ей расширение .asp автоматически.



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



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



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



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

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



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



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

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

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

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

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

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



Волшебное слово "PUSH"



Волшебное слово "PUSH"

Если вы стараетесь быть в курсе последних веяний, вы, несомненно, не раз слышали термин push-технология. Это одна из новейших технологий, призванная изменить сам принцип нашего взаимодействия с Internet. Основная идея push-технологии заключается в том, что необходимая вам информация сама находит к вам дорогу и доставляется на ваш компьютер, а вы просматриваете ее в удобное для вас время, даже не подключаясь к Internet.

Frontpage поддерживает одну из реализации push-технологии, известную как канал (channel), канал обеспечивает доставку пользователям уведомлений об изменениях страниц в вашем сайте, а также предоставляет возможность подписки, позволяющую автоматически обновлять содержимое кэша пользовательского браузера с тем, чтобы впоследствии сайт можно было просматривать в автономном режиме. Каналу можно придать вид хранителя экрана (screen saver) или элемента рабочего стола. Единственное, что необходимо учитывать — браузер пользователя должен поддерживать определения каналов (channel definitions), как, например, Microsoft Internet Explorer 4.0. Frontpage предоставляет вам как разработчику возможность определить канал для текущего сайта или для избранных его страниц, поместить на видном месте кнопку подписки и, наконец, разместить свой канал на сервере. Все это вы сможете сделать с помощью Мастера определения каналов (Channel Definition Wizard).



Вперед!



Вперед!

Следующая глава завершает наше знакомство с Frontpage; в ней мы обсудим вопросы взаимодействия Frontpage с Web-серверами, в частности, рассмотрим Персональный Web-сервер Microsoft, Персональный Web-сервер Frontpage и Серверные расширения Frontpage.



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



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

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



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



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

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

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

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

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

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

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



Здесь, строкой ниже первого класса, вы видите новый класс, hl.red



Рисунок 10.19. Здесь, строкой ниже первого класса, вы видите новый класс, hl.red

Создавать классы можно и другим путем: выберите элемент, откройте его окно свойств и нажмите кнопку Style. На Рисунок 10.20 приведено диалоговое окно Style, открытое на вкладке Class.