Кнопка Style

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

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

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

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

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

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

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

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

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

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

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

Классы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Анимации

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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