Macromedia Dreamweaver MX

Работа с метатегами в среде Dreamweaver

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

Поддерживает. И замечательно поддерживает!

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

Включите пункт-выключатель Head Content в меню View или нажмите ком­бинацию клавиш <Ctrl>+<Shift>+<W>. В верхней части окна документа Dreamweaver, ниже инструментариев появится панель заголовка Web - страницы (рис. 14.1). На этой панели в виде символических значков пред­ставлены все имеющиеся на странице метатеги.

|____________________________

PU 4J * /

|

Рис. 14.1. Панель заголовка

Вы можете выбрать любой значок и изменить значения атрибутов метатега, пользуясь редактором свойств. Для помещения на Web-страницу новых ме­татегов применяется подменю Head Tags меню Insert или вкладка Head па­нели объектов. Вы можете использовать тот способ, который вам больше нравится. Чтобы удалить ненужный метатег, выберите его и нажмите кла­вишу <Del>.

А сейчас давайте рассмотрим различные метатеги, которые вы можете по­местить на страницу, их параметры и случаи, когда они могут быть полезны.

Описание Web-страницы

Чтобы поместить на страницу метатег, содержащий ее описание, выберите пункт Description подменю Head Tags меню Insert. Также вы можете нажать кнопку Description (рис. 14.2), находящуюся на вкладке Head панели объ­ектов. На экране появится диалоговое окно Description, показанное на рис. 14.3.

Иван И. Иванов (Samplel/default. htm)

Рис. 14.2. Кнопка Description панели объектов

Текст описания страницы вводится в область редактирования Description. После этого остается нажать кнопку ОК, чтобы создать метатег описания, или кнопку Cancel — для отказа от этого. Готовый метатег описания ото­бражается в панели заголовка значком, показанным на рис. 14.2, т. е. так же, как и кнопка Description в панели объектов.

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

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

Если выбрать в панели заголовка метатег описания, редактор свойств при­мет вид, показанный на рис. 14.4. Как видите, вы можете изменить описа­ние страницы в области редактирования Description.

Properties

Рис. 14.4. Редактор свойств при выбранном метатеге описания Web-страницы

Ключевые слова

Чтобы поместить на страницу метатег, содержащий набор ключевых слов, выберите пункт Keywords подменю Head Tags меню Insert. Также вы можете нажать кнопку Keywords (рис. 14.5), находящуюся на вкладке Head панели объектов. На экране появится диалоговое окно Keywords, показанное на рис. 14.6.

Рис. 14.5. Кнопка Keywords панели объектов

Ключевые слова, разделенные запятыми, вводятся в область редактирования Keywords. (Dreamweaver и в этом случае искажает русские буквы, так что
будьте внимательны.) После этого остается нажать кнопку ОК, чтобы соз­дать метатег ключевых слов, или кнопку Cancel — для отказа от этого. Гото­вый метатег ключевых слов отображается в панели заголовка значком, пока­занным на рис. 14.5, т. е. так же, как и кнопка Keywords панели объектов.

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

Если выбрать в панели заголовка метатег набора ключевых слов, редактор свойств примет вид, показанный на рис. 14.7. Как видите, вы можете изме­нить набор ключевых слов в области редактирования Keywords.

Базовый интернет-адрес

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

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

Чтобы поместить на страницу метатег базового интернет-адреса, выберите пункт Base подменю Head Tags меню Insert. Также вы можете нажать кноп­ку Base (рис. 14.8), находящуюся на вкладке Head панели объектов. На эк­ране появится диалоговое окно Base, показанное на рис. 14.9.

■*^1

Рис. 14.8. Кнопка Base панели объектов

Базовый интернет-адрес вводится в поле ввода Href. Вы также можете на­жать кнопку Browse и выбрать в диалоговом окне Select File какой-либо файл, находящийся в нужной папке. После этого вам останется только уда­лить имя файла, оставив лишь путь.

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

Задав базовые адрес и фрейм, нажмите кнопку ОК, чтобы создать метатег, или кнопку Cancel — для отказа от этого. Готовый метатег базового адреса отображается в панели заголовка значком, изображенным на рис. 14.8, т. е. так же, как и кнопка Base панели объектов.

Если выбрать в панели заголовка метатег базового интернет-адреса, редак­тор свойств примет вид, показанный на рис. 14.10. В нем вы можете изме­нить сам базовый адрес в поле ввода Href и выбрать новый базовый фрейм в раскрывающемся списке Target.

Перезагрузка

Метатег перезагрузки задает период времени, по истечении которого Web - обозреватель перезагрузит текущую страницу. Этот метатег может быть ис­пользован на сайтах новостей, причем новостей быстроизменяющихся. По­сетитель может открыть страницу с такими "скоропортящимися" новостями и читать их, а Web-обозреватель сам по истечении заданного времени загру­зит более "свежие" новости.

Метатег перезагрузки также может применяться для автоматического пере­направления посетителя на другую страницу. Это бывает нужно, когда ка­кой-либо популярный Web-сайт меняет свой адрес. Тогда Web-дизайнер изготавливает простейшую страничку, содержащую текст типа "Сейчас вы окажетесь на нашем сайте..." и гиперссылку для перехода на новый адрес, если автоматическое перенаправление почему-то не сработает. После этого ему остается добавить в секцию HTML-заголовка этой страницы метатег перезагрузки.

Другое применение метатега перезагрузки — создание начальных страничек для сайтов, сделанных на основе фреймового дизайна. Как вы помните, на­боры фреймов очень плохо обрабатываются поисковыми агентами. Первый выход из этой ситуации — поместить полный набор ключевых слов в тег комментария или <noframes>. Второй выход — создать начальную страничку с тем же набором ключевых слов, необходимых метатегов, заставкой и просьбой подождать пару секунд. Web-дизайнеры делают и так и этак, в за­висимости от своих личных пристрастий.

Чтобы поместить на страницу метатег перезагрузки, выберите пункт Refresh подменю Head Tags меню Insert. Также вы можете нажать кнопку Refresh (рис. 14.11), находящуюся на вкладке Head панели объектов. На экране появится диалоговое окно Refresh, показанное на рис. 14.12.

Рис. 14.11. Кнопка Refresh панели объектов

В поле ввода Delay вводится значение задержки перед загрузкой Web - обозревателем другой страницы. Это значение вводится в секундах. Если введен ноль, Web-обозреватель выполняет загрузку немедленно, без всякой задержки.

С помощью набора переключателей Action задается собственно действие, которое произойдет по истечении заданной задержки. Dreamweaver позво­ляет выбрать два возможных действия:

□ перезагрузка текущей страницы (переключатель Refresh This Document);

□ перенаправление на другую страницу (переключатель Go То URL). Адрес этой страницы вводится в поле ввода Go То URL. Вы также можете на­жать кнопку Browse и выбрать нужную страницу в диалоговом окне Select File.

Задав параметры перезагрузки, нажмите кнопку ОК для создания метатега или кнопку Cancel — для отказа от этого. Готовый метатег перезагрузки отображается в панели заголовка значком, показанным на рис. 14.11, т. е. так же, как и кнопка Refresh в панели объектов.

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

Связи между :еЬ-страницами

Метатег, задающий связь между двумя разными ¥еЬ-страницами или между ¥еЬ-страницей и другим файлом, используется очень редко и практически всегда — только специальными программами. Обычными ¥еЬ-обозрева- телями применяется только одна его форма, которая служит для привязки к странице внешней таблицы стилей. (О таблицах стилей см. главу 10.) Дру­гие формы этого метатега не нашли широкого применения.

Однако давайте все же рассмотрим этот метатег. А вы уж сами для себя ре­шите, использовать его или не использовать.

Итак, чтобы поместить на страницу метатег связи, выберите пункт Link подменю Head Tags меню Insert. Также вы можете нажать кнопку Link (рис. 14.14), находящуюся на вкладке Head панели объектов. На экране появится диалоговое окно Link, показанное на рис. 14.15.

Адрес Web-страницы (или другого файла, например, таблицы стилей), с ко­торой связывается текущая страница, вводится в поле ввода Href. Вы также можете нажать кнопку Browse и выбрать нужный файл в диалоговом окне Select File.

Поля ввода ID и Title нужно заполнять только в том случае, если вы соби­раетесь управлять этим метатегом из Web-сценария. Internet Explorer позво­ляет такое сделать. Первое из этих полей ввода задает уникальный иденти­фикатор, с помощью которого можно обратиться к метатегу из сценария. Второе задает необязательное название данного метатега.

Каждый тег HTML обязан поддерживать атрибут title, с помощью которого за­дается название этого тега. Это название высвечивается, если пользователь подведет курсор мыши к соответствующему элементу страницы. Однако мало кто заполняет этот атрибут для каждого тега. Да и поддерживается этот атрибут в полном объеме только Internet Explorer.

Вид устанавливаемой связи задается с помощью полей ввода Rel и Rev. Первое из них задает, чем файл, интернет-адрес которого указан в поле ввода Href, является для текущей страницы (например, таблицей стилей). Второе — чем текущая страница является для того файла (например, стра­
ницей-оглавлением). Все возможные значения, которые можно вводить в эти поля ввода, перечислены в табл. 14.2.

Вы также можете ввести в поле ввода Rel или Rev несколько значений, разделив их пробелами. Введя все данные, нажмите кнопку ОК для создания метатега или кнопку Cancel — для отказа от этого. Готовый метатег связи отображается в панели заголовка значком, изображенным на рис. 14.14, т. е. так же, как и кнопка Link панели объектов.

Если выбрать в панели заголовка метатег связи, редактор свойств примет вид, показанный на рис. 14.16. В нем вы можете изменить значение адреса связанного файла в поле ввода Href, задать новый тип связи в полях ввода Rel и Rev и изменить параметры ID и Title.

Hret НТМЫЗДоиШт

Title т

Fiel пея Rev prev

Рис. 14.16. Редактор свойств при выбранном метатеге связи

Как может использоваться описанный выше метатег связи? Например, вы можете задавать связь между отдельными страницами, содержащими части большого документа, и его оглавлением. В этом случае отдельная страница будет помечена как chapter или section (а то и Subsection), а оглавление — Contents или index. Также первую страницу документа можно пометить как start, последующую — как Next и т. д.

Примечание )

Метатег задания связи создается с помощью тега <link>, а не <мета>.

Специальные метатеги

Метатеги могут содержать любые другие данные. В частности, каждая Web - страница, созданная в Dreamweaver, содержит сведения о текстовой коди­ровке, помещенные в нее с помощью такого вот специального метатега. Популярный Web-редактор Microsoft FrontPage с помощью специального метатега метит страницы, созданные в нем. Также и сам Microsoft Internet Explorer вставляет в секцию заголовка всех страниц, которые вы сохраняете на диске, особую метку вида "здесь был Internet Explorer". Так что специ­альные метатеги без работы не остаются.

Чтобы поместить на страницу специальный метатег, выберите пункт Meta подменю Head Tags меню Insert. Также вы можете нажать кнопку Meta (рис. 14.17), находящуюся на вкладке Head панели объектов. На экране появится диалоговое окно Meta, показанное на рис. 14.18.

Рис. 14.17. Кнопка Meta панели объектов

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

Задав тип метатега, можно ввести собственно данные. В поле ввода Value вводится наименование информации, например "Creator", если вы хотите ввести название программы, в которой была создана страница. Сами же данные вводятся в область редактирования Content (в нашем случае — " М ас го med ia Dream weave г").

Введя все данные, нажмите кнопку ОК для создания метатега или кнопку Cancel — для отказа от этого.

Если при создании специального метатега в раскрывающемся списке Attribute был выбран пункт Name, то этот метатег будет отображаться в па­нели заголовка значком, показанным на рис. 14.17, т. е. так же, как и кноп­ка Meta в панели объектов. Если же был выбран пункт HTTP-equivalent, значок будет таким, как на рис. 14.19.

Рис. 14.19. Значок, которым в панели заголовка отображается метатег типа HTTP-equivalent

Если выбрать в панели заголовка специальный метатег, редактор свойств примет вид, показанный на рис. 14.20. В нем вы можете изменить тип мета­тега с помощью раскрывающегося списка Attribute, задать новое наимено­вание информации в поле ввода Value и изменить саму информацию в поле ввода Content.

Вот и все о метатегах.