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

Встраиваемые модули расширения (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, к которому будет относиться таблица стилей, пусть для примера это будет h1, и поставьте пробел. Затем определите таблицу стилей, т. е. перечислите атрибуты стиля для этого элемента.

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

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

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

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

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

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

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

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

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

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