Метатег, задающий базовый интернет-адрес, может быть полезен, если страницы вашего сайта разбросаны по разным Web-серверам. Вместо того, чтобы в гиперссылках указывать полные интернет-адреса, вы можете указать относительные, а в секции заголовка страницы поместить метатег базового адреса. В этом случае полные интернет-адреса будут вычисляться относительно его.
Кроме того, такой метатег может устранить ошибки загрузки страниц, которые должны отображаться во фреймах, но почему-то выводятся в полном окне Web-обозревателя. Для этого достаточно указать в этом метатеге имя базового фрейма, в котором должна отображаться страница.
Чтобы поместить на страницу метатег базового интернет-адреса, выберите пункт Base подменю Head Tags меню Insert. Также вы можете нажать кнопку Base (рис. 14.8), находящуюся на вкладке Head панели объектов. На экране появится диалоговое окно Base, показанное на рис. 14.9.
Директива echo помещает в HTML-код содержимое одной из встроенных переменных Web-сервера. Она имеет такой синтаксис:
<! -- #echo var="<Имя переменной>" -- >
В качестве значения атрибута var задается имя нужной переменной. Встроенные переменные, поддерживаемые большинством Web-серверов, перечислены в табл. 14.3.
Таблица 14.3. Встроенные переменные Web-сервера
Переменная |
Описание | ||||
DOCUMENT_NAME DOCUMENT_URL DATE LOCAL DATE GMT LAST_MODIFIED LAST_MODDATE |
Возвращает имя файла, содержащего текущую Web-страницу Возвращает путь к файлу, содержащему текущую Web-страницу, относительно корневой папки сайта Возвращает текущую дату для местной временной зоны Возвращает текущую дату по Гринвичу Возвращает дату последнего изменения файла текущей Web-страницы для местной временной зоны Возвращает дату последнего изменения файла текущей Web-страницы по Гринвичу | ||||
В частности, именно с помощью данной серверной директивы на страницу помещается текущая дата. Для этого, как вы поняли, нужно использовать директиву:
<!— #echo var="DATE_LOCAL" —>
ИЛИ
<!— #echo var="DATE_GMT" —>
если нужно вывести дату по Гринвичу.
Также многие Web-серверы поддерживают другие серверные переменные. Чтобы выяснить их, обратитесь к документации по серверу или к его администратору.
А сейчас будет рассказано о том, чему неопытные Web-дизайнеры мало уделяют внимания. Это возможности не Dreamweaver, а самого языка HTML и различных программ Web-серверов, используемых во Всемирной паутине. Это так называемые метатеги и серверные директивы.
Метатеги позволят вам поместить в ваши Web-страницы дополнительные указания Web-обозревателю, Web-серверу и другим программам, о которых будет рассказано в дальнейшем. В частности, с помощью метатегов Dreamweaver задает текстовую кодировку, в которой созданы ваши страницы. Также с помощью метатегов вы можете сделать своим страницам неплохую рекламу на просторах Сети... Да-да, и здесь реклама! А куда же без нее...
Серверные директивы — это особые команды по изменению кода HTML, исполняемые Web-сервером. В частности, они позволяют поместить в текст страницы текущую дату, причем это выполнит сам Web-сервер — вам нужно будет только вписать в HTML-код несколько символов. Также имеется возможность вставить в HTML-код содержимое другого файла. Вы еще не догадались, что это позволяет сделать? Тогда слушайте...
Стоп! Не будем торопить события. Скоро вы обо всем узнаете. Прежде чем рассказывать о метатегах и серверных директивах, нам нужно выяснить, зачем они нужны и какую пользу могут принести нам, простым Web-дизайнерам. А для этого слегка отойдем от Web-дизайна и поговорим о некоторых вещах, напрямую не относящихся к теме этой книги. И первой этой темой будет реклама сайта в Сети.
Директива include вставляет в содержимое текущего файла содержимое другого. (Эта директива также называется серверным включением, а файл, содержащий включаемый фрагмент кода, — файлом включения). Вставка осуществляется в то место файла, где встретилась эта директива. Записывается она так:
<!— linclude filе="<Имя файла>" —>
или так:
<!— ttinclude virtual="<Имя файла>" —>
В первом случае <Имя файла> представляет собой обычное имя файла, заданное с учетом особенностей файловой системы серверного компьютера. Например, так:
<!— linclude file="c:\Inetpub\wwwroot\includes\header.inc" —>
В данном случае в текущий файл вставляется содержимое файла header.inc, находящегося в папке Inetpub\wwwroot\includes на диске С.
Во втором случае файл <имя файла> ищется относительно корневой папки сайта. Также он может находиться на другом Web-сайте; в этом случае в качестве значения атрибута virtual указывается полный интернет-адрес этого файла.
<!— #include virtual="/htmls/includes/header.inc" —>
В данном случае файл header.inc располагается в папке htmls/includes, вложенной в корневую папку сайта.
<!—#include virtual="http://www.othersite.ru/includes/header.inc" .—>
А в этом случае файл header.inc находится вообще на другом сайте.
Существует негласное правило: все файлы включений должны иметь расширение inc (от англ, include — включение). Хотя не возбраняются другие расширения. Также, если у вас имеется достаточно много файлов включений, лучше всего поместить их в особую папку, например includes. В противном случае можно оставить их в той же папке, где находятся все Web-страницы.
Внимание!
Не все Web-серверы поддерживают обе разновидности директивы include. Например, Microsoft Internet Information Server поддерживает только форму с атрибутом file.
А сейчас давайте поговорим, как можно использовать серверные директивы.
Ну, насчет директивы echo все ясно. Используйте ее, если на страницу нужно поместить текущую дату или имя файла страницы. Для этого достаточно подставить в качестве значения атрибута var имя соответствующей переменной.
А вот как можно использовать директиву include? Для разделения кода Web-страниц на отдельные части. Зачем это нужно?
Необходимо это во многих случаях. Но нужнее всего, если сайт построен по принципам табличного дизайна, либо странички содержат какие-либо повторяющиеся стандартные элементы. В этом случае умелое разделение кода на фрагменты принесет истинное облегчение Web-дизайнеру. Даже если он использует Dreamweaver.
Давайте вернемся назад и вспомним, чем отличаются Web-страницы, построенные на основе табличного дизайна, от прочих. Как вы помните, все, что находится на такой странице, представляет собой содержимое одной огромной таблицы, занимающей всю эту страницу. А какие недостатки таблиц мы знаем?
Недостаток первый: очень медленная загрузка. Web-обозреватель не может вывести на экран таблицу, пока не загрузит ее целиком. А если таблица довольно велика, а канал связи с Интернетом достаточно нетороплив, загрузка может продолжаться очень долго.
Недостаток второй: большой объем получающегося HTML-кода. В самом деле, вспомните, какие размеры были у страниц, созданных на основе табличного дизайна! Сравните их со страничками сайта, основанного на фреймах! Отчасти это происходит из-за того, что сам код, создающий таблицу, очень велик — это плата за гибкость. Но основная причина этого другая: при использовании табличного дизайна каждая страница включает в себя все повторяющиеся элементы (заголовок, полоса навигации, сведения об авторских правах), которые во втором случае "вынесены" в отдельные фреймы, т. е. размер HTML-кода еще больше увеличивается.
Недостаток третий, свойственный не самим таблицам, а табличному дизайну: каждая страница содержит все стандартные, повторяющиеся элементы оформления. А теперь представьте, что вам нужно слегка изменить стандартное примечание, а страниц в вашем сайте добрая сотня. Что делать? Открывать каждую из них и вручную править текст? А если вы пропустите какую-нибудь из них? А если забудете сохранить при закрытии? Уже не стоит говорить о том, что перелопатить вручную такое количество страниц трудно чисто физически.
Поисковый агент — это программа, периодически сканирующая всю Сеть и проверяющая, есть ли по тому или иному адресу Web-страница. Если страница есть, агент проверяет ее HTML-код, извлекает из него интернет-адреса, ведущие на другие Web-страницы. Также он извлекает ее название и пытается извлечь описание и набор ключевых слов, если они есть, после чего заносит все это в базу данных поисковика (или, как говорят опытные интернетчики, выполняет индексирование). Далее он обращается к Web-страницам, находящимся по найденным на текущей странице адресам, и проделывает с ними то же самое.
Поисковые агенты, как правило, пишутся на заказ очень опытными и знающими программистами. Хороший поисковый агент — настоящее произведение программистского искусства. Он должен отсекать несуществующие адреса, правильно опознавать HTML-теги, "интеллектуально" создавать описания и при этом быстро работать. Сами понимаете: Сеть велика, а времени всегда не хватает...
Вообще, проанализировать HTML-код — задача не очень сложная. В самом деле, название страницы помещается внутри тега <TITLE> в секции заголовка <HEAD>, а интернет-адреса других страниц с большой долей вероятности следует искать в тегах <А> и <AREA>. Написать программу, извлекающую такую информацию, для опытного программиста — пара пустяков.
Сложность здесь совсем в другом.
Давайте вспомним, какие данные помещаются в базу данных поисковой машины, и классического поисковика, и каталога. Кроме адреса и названия страницы, это еще и краткое описание и набор ключевых слов. А откуда их взять?
Проанализировать текст, помещенный на Web-странице? А как? Как обычная программа, даже очень сложная и подающая признаки легкого "интеллекта", узнает, какое из многих сотен, а то и тысяч слов текста страницы можно использовать как ключевое? Как она "ужмет" многокилобайтовый текст в краткое описание из 200 символов (такое ограничение на размер текста описания накладывают многие каталоги)? Как при этом выбрать нужную информацию и выжать всю "воду"?
Чтобы поместить на страницу метатег, содержащий набор ключевых слов, выберите пункт Keywords подменю Head Tags меню Insert. Также вы можете нажать кнопку Keywords (рис. 14.5), находящуюся на вкладке Head панели объектов. На экране появится диалоговое окно Keywords, показанное на рис. 14.6.
Метатег — это особый тег HTML, предназначенный для помещения в код Web-страницы информации о ней самой. Эта информация используется, в основном, программами — поисковыми агентами, Web-обозревателями и. возможно, Web-редакторами — и никак не отображается в окне Web-обозревателя.
С помощью метатегов в код Web-страницы можно поместить следующую информацию:
краткое описание страницы;
набор ключевых слов;
интернет-адрес страницы, на которую будет выполнен переход по истечении некоего промежутка времени (задержка перед перенаправлением на другую Web-страницу);
базовый адрес, от которого будут отсчитываться все относительные адреса (об абсолютных и относительных интернет-адресах см. главу 6);
"родственную связь" между двумя страницами и тип этой "связи";
текстовую кодировку страницы;
некоторые другие данные, создаваемые и используемые, в основном, специальными программами, например популярнейшим Web-редактором Microsoft FrontPage.
Как видите, метатеги позволяют сделать весьма много.
Все метатеги помещаются в секции HTML-заголовка (тег <HEAD>) Web-страницы. Большинство из них создается с помощью одинарного тега <МЕТА> и трех его атрибутов. Тип метатега задается атрибутом NAME или НТТР-EQUIV, а сами данные — атрибутом CONTENT. Ниже приведен пример метатега, задающего текстовую кодировку.
<МЕТА HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
Этот фрагмент взят из HTML-кода страницы default.htm нашего первого сайта Sample site 1.
А следующий метатег задает набор ключевых слов, которые могут быть использованы поисковым агентом:
<МЕТА NAME="keywords" CONTENT="музыка,аудио,МР3">
И не только могут быть, но и используются! Поисковые агенты всегда проверяют содержимое метатегов страниц, чтобы найти нужную для занесения в базу данных информацию. И, "подсовывая" им определенное содержимое, можно делать свой сайт более популярным.
Вот это и есть пассивная интернет-реклама.
Начинающие Web-дизайнеры часто пренебрегают метатегами, недооценивают их важность. И зря. Метатеги — мощный инструмент в руках знающего специалиста; пользуясь ими, он может сделать на какое-то время популярным даже совершенно провальный интернет-проект. И наоборот, неудачные метатеги могут "убить" даже очень перспективный сайт. Конечно, это крайние случаи, но...
Давайте же поговорим о пассивной интернет-рекламе и о более активном ее использовании.
Чтобы поместить на страницу метатег, содержащий ее описание, выберите пункт Description подменю Head Tags меню Insert. Также вы можете нажать кнопку Description (рис. 14.2), находящуюся на вкладке Head панели объектов. На экране появится диалоговое окно Description, показанное на рис. 14.3.
Специалисты по интернет-рекламе уже давно знают, что одни ключевые слова пользуются на поисковых машинах большей, а другие — меньшей популярностью. В самом деле, если вы зайдете на сайт поисковой машины, зачастую на первой же странице будет присутствовать список самых популярных слов, набираемых в поле ввода запроса. На русскоязычных поисковых машинах это, прежде всего, "работа", "музыка", "аудио", "МРЗ", вездесущие "секс" и "порно" и т. д. и т. п.
Почему так происходит? Вроде бы слов в языке много, а список популярнейших ключевых слов практически не меняется со временем и почти одинаков для любого языка. А все это из-за того, что люди ищут в Сети примерно одно и то же, называя искомое одними и теми же словами. И это правильно: больше шансов найти "музыку", а не "гармоничное сочетание звуков, производимое с использованием особых инструментов". А уж поисками лучшей работы занимаются фактически все, за исключением тех, кто на ней уже работает.
Но шутки в сторону. Выходит, что набор популярнейших ключевых слов совсем невелик. И, поместив все популярнейшие ключевые слова в метатег
<МЕТА NAME="keywords" CONTENT="музыка,аудио,МРЗ,работа,секс,анекдот">
можно поднять популярность своей Web-странички, даже если на ней нет и намека на музыку в формате МРЗ (или, как правильно, MPEG 1, уровень 3) или анекдоты про секс вместо работы. Так это или не так?
Так-то оно так. Да не совсем.
Безусловно, создав удачный набор ключевых слов в метатеге, можно повысить популярность своей страницы или сайта. Но только при том условии, что содержимое этой страницы будет соответствовать ключевым словам.
Когда-то, во времена "глупых" поисковых агентов такие фокусы проходили. Но не сейчас. Поисковые агенты стали не в пример "умнее". Помните, что они, вдобавок к метатегам, проверяют еще и само содержимое страниц, причем учитывают еще и тег, с помощью которого отформатирован тот или иной текст. "Обмануть" такого поискового агента почти так же сложно, как победить агента 007.
Метатег перезагрузки задает период времени, по истечении которого Web-обозреватель перезагрузит текущую страницу. Этот метатег может быть использован на сайтах новостей, причем новостей быстроизменяющихся. Посетитель может открыть страницу с такими "скоропортящимися" новостями и читать их, а Web-обозреватель сам по истечении заданного времени загрузит более "свежие" новости.
Метатег перезагрузки также может применяться для автоматического перенаправления посетителя на другую страницу. Это бывает нужно, когда какой-либо популярный Web-сайт меняет свой адрес. Тогда Web-дизайнер изготавливает простейшую страничку, содержащую текст типа "Сейчас вы окажетесь на нашем сайте..." и гиперссылку для перехода на новый адрес, если автоматическое перенаправление почему-то не сработает. После этого ему остается добавить в секцию HTML-заголовка этой страницы метатег перезагрузки.
Другое применение метатега перезагрузки — создание начальных страничек для сайтов, сделанных на основе фреймового дизайна. Как вы помните, наборы фреймов очень плохо обрабатываются поисковыми агентами. Первый выход из этой ситуации — поместить полный набор ключевых слов в тег комментария или <NOFRAMES>. Второй выход — создать начальную страничку с тем же набором ключевых слов, необходимых метатегов, заставкой и просьбой подождать пару секунд. Web-дизайнеры делают и так и этак, в зависимости от своих личных пристрастий.
Чтобы поместить на страницу метатег перезагрузки, выберите пункт Refresh подменю Head Tags меню Insert. Также вы можете нажать кнопку Refresh (рис. 14.11), находящуюся на вкладке Head панели объектов. На экране появится диалоговое окно Refresh, показанное на рис. 14.12.
К сожалению, поддержка серверных включений Dreamweaver MX оставляет желать лучшего.
Разработчики Dreamweaver утверждают, что их программа читает файлы включений, расшифровывает их и выводит в окно документа вместе содержимым страницы, использующей эти включения. Так-то оно так, но не совсем. Dreamweaver действительно выводит содержимое серверных включений в окне документа, но некорректно обрабатывает HTML-разметку: он "проглатывает" весь HTML-код, находящийся в серверных включениях, и выводит только текст. Посмотрите, что он сделал с нашей страницей 14.2.shtm (рис. 14.22).
Чтобы выяснить, что же такое пассивная реклама сайта, нам придется поговорить о поисковых машинах — особых Web-сайтах, предназначенных для поиска информации в Интернете. Если вы давно во Всемирной паутине, то знаете, что такое поисковая машина и как ей пользоваться. Для тех из вас, кто пока не так искушен в сетевых реалиях, предлагается небольшой ликбез.
А для этого придется углубиться в древнюю историю Интернета...
Итак, мысленно перенесемся в 1989 год. После создания языка HTML Сеть, а именно, та, что стали называть Всемирной паутиной WWW, стала расти как на дрожжах. Сначала Сетью пользовались, в основном, ученые, а значит, информация туда выкладывалась большей частью серьезная, небольшими частями, и найти ее было несложно. Некоторые из старых интернетчиков называют это время "золотым веком" Сети. Что ж, может, они и правы... Но только отчасти.
Впоследствии произошло то, чего одни ждали с нетерпением, а другие -с ужасом. Сеть перестала быть пристанищем ТОЛЬКО ученого люда. В нее пришли сначала всяческого рода маргиналы, жаждущие общения, потом -компьютерщики, а в самое последнее время — обыватели, занятые в "некомпьютерных" областях человеческой деятельности. Сеть стала огромной, качество (в смысле, достоверность) выкладываемой в нее информации катастрофически снизилось, а поиск нужной информации среди тонн электронного хлама стал представлять серьезную проблему.
Эту проблему надо было как-то решать. И ее решили, когда Сеть набрала достаточный объем.
В 1995 году несколько американских студентов решили объединить свои коллекции полезных интернет-ссылок в своего рода базу данных, которой мог бы пользоваться каждый. При этом база данных содержала и сами адреса Web-страниц, и их описания, и набор ключевых слов — особых слов, однозначно описывающих содержимое каждой страницы (например, для музыкальных сайтов такими словами будут "музыка", "МРЗ", "аудио" и т. п.). Потом они написали специальную программу, осуществляющую поиск адреса по набранному в поле ввода слову и выдающую результат в виде Web-страницы с набором найденных ссылок. Кроме того, они написали еще одну программу, сканирующую Сеть в поисках новых Web-страниц и заносящую новые адреса в базу данных; сейчас такую программу называют поисковым агентом, поисковым роботом, или, в шутку, "пауком". Так возникла первая поисковая машина "Yahoo!"http://www.yahoo.com, получившая огромнейшую популярность и существующая до сих пор.
Зарубежные/ отечественные |
Название |
Интернет-адрес |
||
Зарубежные |
Yahoo! AltaVista ListBot InfoSeek Lycos |
http://www.yahoo.com http://www.altavista.com http ://www.listbot.com http://www.infoseek.com http://www.lycos.com http://www.google.com |
||
Отечественные |
Апорт Яндекс Рамблер |
http://www.aport.ru http://www.yandex.ru http://www.rambler.ru |
||
А теперь давайте поговорим о том, как работать с метатегами в среде Dreamweaver. Мы уже знаем, что такое метатеги и как они могут нам помочь (и навредить), осталось выяснить, поддерживает ли их наша любимая программа.
Поддерживает. И замечательно поддерживает!
Однако, чтобы вы смогли с ними нормально работать, вам придется выполнить кое-какие настройки. Вспомните: метатеги представляют информацию, которая никак не отображается на странице. Поэтому нам нужно сделать их видимыми.
Включите пункт-выключатель Head Content в меню View или нажмите комбинацию клавиш <Ctrl>+<Shift>+<W>. В верхней части окна документа Dreamweaver, ниже инструментариев появится панель заголовка Web-страницы (рис. 14.1). На этой панели в виде символических значков представлены все имеющиеся на странице метатеги.
Вообще, рекламировать сайты в Сети можно по-разному. Очень грубо сетевую рекламу можно разделить на две разновидности: активную и пассивную или "раскрутку". Активная реклама — самая очевидная. Она включает в себя рисование рекламных баннеров, "расклеивание" их по чужим страницам в обмен на чужие баннеры, упоминание в сетевых новостях, написание хвалебных статей в сетевые СМИ, открытие почтовой рассылки и т. п., т. е. вы активно призываете сетевой люд посетить ваш сайт.
А вот о пассивной рекламе так коротко не скажешь. Начать придется издалека...
Вы можете выбрать любой значок и изменить значения атрибутов метатега, пользуясь редактором свойств. Для помещения на Web-страницу новых ме-татегов применяется подменю Head Tags меню Insert или вкладка Head панели объектов. Вы можете использовать тот способ, который вам больше нравится. Чтобы удалить ненужный метатег, выберите его и нажмите клавишу <Del>.
А сейчас давайте рассмотрим различные метатеги, которые вы можете поместить на страницу, их параметры и случаи, когда они могут быть полезны.
Текст описания страницы вводится в область редактирования Description. После этого остается нажать кнопку ОК, чтобы создать метатег описания, или кнопку Cancel — для отказа от этого. Готовый метатег описания отображается в панели заголовка значком, показанным на рис. 14.2, т. е. так же, как и кнопка Description в панели объектов.
Не стоит создавать слишком большого описания. Будьте кратки. Большие описания очень плохо читаются, если читаются вообще. К тому же, многие поисковые машины ограничивают длину описания двумястами символов.
Dreamweaver и здесь проявляет свою нелюбовь к русским буквам. Поэтому вам придется либо вводить описание страницы латинскими буквами, либо править сам HTML-код вручную.
Если выбрать в панели заголовка метатег описания, редактор свойств примет вид, показанный на рис. 14.4. Как видите, вы можете изменить описание страницы в области редактирования Description.
Ключевые слова, разделенные запятыми, вводятся в область редактирования Keywords. (Dreamweaver и в этом случае искажает русские буквы, так что будьте внимательны.) После этого остается нажать кнопку ОК, чтобы создать метатег ключевых слов, или кнопку Cancel — для отказа от этого. Готовый метатег ключевых слов отображается в панели заголовка значком, показанным на рис. 14.5, т. е. так же, как и кнопка Keywords панели объектов.
Здесь так же, как и в случае с описанием страницы, не стоит создавать слишком большого набора ключевых слов. Ограничьтесь только теми ключевыми словами, которые максимально полно описывают вашу страницу. Помните, что и на длину набора ключевых слов также существует ограничение в 200 символов. И не гонитесь за дешевой сиюминутной популярностью, помещая в набор все привлекательные ключевые слова, которые можете вспомнить.
Если выбрать в панели заголовка метатег набора ключевых слов, редактор свойств примет вид, показанный на рис. 14.7. Как видите, вы можете изменить набор ключевых слов в области редактирования Keywords.
Базовый интернет-адрес вводится в поле ввода Href. Вы также можете нажать кнопку Browse и выбрать в диалоговом окне Select File какой-либо файл, находящийся в нужной папке. После этого вам останется только удалить имя файла, оставив лишь путь.
Базовый фрейм выбирается с помощью раскрывающегося списка Target. Если ваша страница представляет собой набор фреймов, в этом списке будут перечислены все их имена.
Задав базовые адрес и фрейм, нажмите кнопку ОК, чтобы создать метатег, или кнопку Cancel — для отказа от этого. Готовый метатег базового адреса отображается в панели заголовка значком, изображенным на рис. 14.8, т. е. так же, как и кнопка Base панели объектов.
Если выбрать в панели заголовка метатег базового интернет-адреса, редактор свойств примет вид, показанный на рис. 14.10. В нем вы можете изменить сам базовый адрес в поле ввода Href и выбрать новый базовый фрейм в раскрывающемся списке Target.
В поле ввода Delay вводится значение задержки перед загрузкой Web-обозревателем другой страницы. Это значение вводится в секундах. Если введен ноль, Web-обозреватель выполняет загрузку немедленно, без всякой задержки.
С помощью набора переключателей Action задается собственно действие, которое произойдет по истечении заданной задержки. Dreamweaver позволяет выбрать два возможных действия:
перезагрузка текущей страницы (переключатель Refresh This Document);
перенаправление на другую страницу (переключатель Go To URL). Адрес этой страницы вводится в поле ввода Go To URL. Вы также можете нажать кнопку Browse и выбрать нужную страницу в диалоговом окне Select File.
Задав параметры перезагрузки, нажмите кнопку ОК для создания метатега или кнопку Cancel — для отказа от этого. Готовый метатег перезагрузки отображается в панели заголовка значком, показанным на рис. 14.11, т.е. так же, как и кнопка Refresh в панели объектов.
Если выбрать в панели заголовка метатег перезагрузки, редактор свойств примет вид, показанный на рис. 14.13. В нем вы можете изменить значение задержки в поле ввода Delay и выбрать другое действие с помощью набора переключателей Action и поля ввода URL.
Адрес Web-страницы (или другого файла, например, таблицы стилей), с которой связывается текущая страница, вводится в поле ввода Href. Вы также можете нажать кнопку Browse и выбрать нужный файл в диалоговом окне Select File.
Поля ввода ID и Title нужно заполнять только в том случае, если вы собираетесь управлять этим метатегом из Web-сценария. Internet Explorer позволяет такое сделать. Первое из этих полей ввода задает уникальный идентификатор, с помощью которого можно обратиться к метатегу из сценария. Второе задает необязательное название данного метатега.
Внимание!
Каждый тег HTML обязан поддерживать атрибут TITLE, с помощью которого задается название этого тега. Это название высвечивается, если пользователь подведет курсор мыши к соответствующему элементу страницы. Однако мало кто заполняет этот атрибут для каждого тега. Да и поддерживается этот атрибут в полном объеме только Internet Explorer.
Вид устанавливаемой связи задается с помощью полей ввода Rel и Rev. Первое из них задает, чем файл, интернет-адрес которого указан в поле ввода Href, является для текущей страницы (например, таблицей стилей). Второе — чем текущая страница является для того файла (например, страницей-оглавлением). Все возможные значения, которые можно вводить в эти поля ввода, перечислены в табл. 14.2.
Таблица 14.2. Возможные значения полей ввода Pel и Rev
Значение |
Описание | ||||
Alternate |
Заменяющая страница | ||||
Appendix |
Страница, содержащая приложение к большому многостраничному документу | ||||
Bookmark |
Закладка | ||||
Chapter |
Страница, содержащая отдельную часть большого многостраничного документа | ||||
Contents |
Страница-оглавление | ||||
Copyright |
Страница, содержащая сведения об авторских правах | ||||
Glossary |
Страница со словарем специальных терминов | ||||
Help |
Страница со справочными сведениями | ||||
Index |
Страница-оглавление или список всех страниц сайта (так называемая карта сайта) | ||||
Next |
Следующая страница в последовательности | ||||
Prev |
Предыдущая страница в последовательности | ||||
Section |
Страница, содержащая отдельную часть большого многостраничного документа | ||||
Start |
Первая страница в последовательности | ||||
Stylesheet |
Таблица стилей | ||||
Subsection |
Страница, содержащая отдельную часть большого многостраничного документа, более мелкую, чем Chapter или Section | ||||
Вы также можете ввести в поле ввода Rel или Rev несколько значений, разделив их пробелами. Введя все данные, нажмите кнопку ОК для создания метатега или кнопку Cancel — для отказа от этого. Готовый метатег связи отображается в панели заголовка значком, изображенным на рис. 14.14, т. е. так же, как и кнопка Link панели объектов.
Если выбрать в панели заголовка метатег связи, редактор свойств примет вид, показанный на рис. 14.16. В нем вы можете изменить значение адреса связанного файла в поле ввода Href, задать новый тип связи в полях ввода Rel и Rev и изменить параметры ID и Title.
Как может использоваться описанный выше метатег связи? Например, вы можете задавать связь между отдельными страницами, содержащими части большого документа, и его оглавлением. В этом случае отдельная страница будет помечена как chapter или section (а то и Subsection), а оглавление -contents или index. Также первую страницу документа можно пометить как Start, Последующую — как Next И Т. Д.
Примечание
Метатег задания связи создается с помощью тега<LINK>, а не <МЕТА>.
С помощью раскрывающегося списка Attribute выбирается тип создаваемого метатега. Если он должен содержать описательную информацию о странице, например имя автора или название программы, в которой она была создана, выберите пункт Name. Если же эта информация носит системный характер, например задает текстовую кодировку, выберите пункт HTTP-equivalent.
Задав тип метатега, можно ввести собственно данные. В поле ввода Value вводится наименование информации, например "Creator", если вы хотите ввести название программы, в которой была создана страница. Сами же данные вводятся в область редактирования Content (в нашем случае — "Macromedia Dreamweaver").
Введя все данные, нажмите кнопку ОК для создания метатега или кнопку Cancel — для отказа от этого.
Если при создании специального метатега в раскрывающемся списке Attribute был выбран пункт Name, то этот метатег будет отображаться в панели заголовка значком, показанным на рис. 14.17, т. е. так же, как и кнопка Meta в панели объектов. Если же был выбран пункт HTTP-equivalent, значок будет таким, как на рис. 14.19.
Если выбрать в панели заголовка специальный метатег, редактор свойств примет вид, показанный на рис. 14.20. В нем вы можете изменить тип метатега с помощью раскрывающегося списка Attribute, задать новое наименование информации в поле ввода Value и изменить саму информацию в поле
ввода Content. Вот и все о метатегах.
Сначала нужно выяснить, где находится основное содержимое страницы. В нашем случае это строка: "Это основное содержимое страницы.". Все остальное — повторяющиеся элементы.
Наш случай — самый простой. Мы вынесем все, что находится от тега <BODY> до приведенной выше строки, в файл 14.1.inc, а все, что расположено после нее и до тега </BODY>, — в файл 14.2.inc. А саму страницу переименуем в 14.2.shtm. После всех этих пертурбаций ее код будет выглядеть так:
<HTML> <HEAD>
<ТITLE>Страница</ТITLE> </HEAD>
<BODY>
<!-- linclude file="14 .1.inc" -->
Это основное содержимое страницы.
<!-- #include file="14.2.inc" -->
</BODY>
</HTML>
Как видите, от изначального HTML-кода страницы осталось не так уж и много. А теперь вообразите, что мы проделали такую операцию со всеми страницами большого и сложного сайта. Представляете, насколько уменьшатся все его файлы!
Тогда файл 14. Line будет выглядеть так:
<TABLE BORDER="1"> <TR>
<TD><A HREF="pagel.htm">Страница 1</A></TD>
<TD ROWSPAN="4">
А файл 14.2.inc — так:
</TD> </TR> <TR>
<TD><A НRЕF="раgе2.htm">Страница 2</A></TD>
</TR> <TR>
<TD><A HREF="page3.htm">Страница 3</A></TD>
</TR> <TR>
<TD><A HREF="page4.htm">Страница 4</A></TD> </TR>
</TABLE>
К сожалению, просмотреть страницы этого "дивного нового" сайта в Web-обозревателе мы не сможем. Ни один Web-обозреватель не понимает серверных директив, как ни один Web-сервер не понимает HTML-тегов. Это не его обязанности. Чтобы увидеть, как Web-сервер обработает серверные директивы, нам понадобится сам Web-сервер. А его у нас нет.
Иначе, как грубейшей ошибкой, назвать это нельзя. Ведь автор прекрасно помнит, что третья версия Dreamweaver (3.0) нормально отображала содержимое файлов включений. Досадно, что новая версия, вместе с новыми возможностями, таит в себе новые ошибки,
Однако не все так плохо. Вы можете отключить вывод содержимого серверных включений; в этом случае они будут просто помечаться особым значком (рис. 14.23). Для этого откройте окно Preferences, выбрав пункт Preferences в меню Edit, и переключитесь на вкладку Invisible Elements. Отключите флажок Server-Side Includes и нажмите кнопку ОК.
На этом поддержка серверных директив include Dreamweaver не заканчивается. Вы можете вставить серверное включение в код страницы, выбрав пункт Server-Side Include подменю Script Objects меню Insert или нажав кнопку Server-Side Include (рис. 14.24), находящуюся на вкладке Script панели объектов. После этого вам останется только выбрать нужный файл в появившемся на экране диалоговом окне Select File.
Если вы выберете значок серверной директивы include, редактор свойств примет вид, представленный на рис. 14.25. С его помощью вы сможете изменить значения атрибутов этой директивы.
Разновидность директивы include — с атрибутом file или virtual — задается с помощью набора переключателей Туре. Вам необходимо будет выбрать нужный переключатель: File или Virtual.
Само имя файла задается в поле ввода Filename. Вы также можете нажать значок папки, расположенный справа этого поля ввода, и выбрать нужный файл в появившемся на экране диалоговом окне Select File.
Нажав кнопку Edit, вы сможете отредактировать файл серверного включения. Dreamweaver отобразит его в окне документа в виде HTML-кода.
Да, Dreamweaver очень странно поддерживает серверные директивы. Будем надеяться, что в следующей его версии этот недостаток будет устранен. А пока что можем только посоветовать изучать язык HTML и править код таких вот разделенных на части страниц вручную.
На этом рассказ о серверных директивах окончен.
Теперь пришла пора поговорить о серверных директивах.
Метатеги могут содержать любые другие данные. В частности, каждая Web-страница, созданная в Dreamweaver, содержит сведения о текстовой кодировке, помещенные в нее с помощью такого вот специального метатега. Популярный Web-редактор Microsoft FrontPage с помощью специального метатега метит страницы, созданные в нем. Также и сам Microsoft Internet Explorer вставляет в секцию заголовка всех страниц, которые вы сохраняете на диске, особую метку вида "здесь был Internet Explorer". Так что специальные метатеги без работы не остаются.
Чтобы поместить на страницу специальный метатег, выберите пункт Meta подменю Head Tags меню Insert. Также вы можете нажать кнопку Meta (рис. 14.17), находящуюся на вкладке Head панели объектов. На экране появится диалоговое окно Meta, показанное на рис. 14.18.
Прежде всего, давайте рассмотрим, как серверные директивы вставляются в HTML-код. Проблема заключается в том, что их нужно как-то выделить, чтобы Web-сервер сразу их "увидел", а Web-обозреватель, наоборот, "не заметил". Поэтому серверные директивы помещаются в тег комментария и помечаются значком # ("решетка"):
<!— #<Директива>
<Атрибут1>=<Значение1>
<Атрибут2>=<Значение2> ... —>
Однако, кроме этого, надо выполнить еще кое-какие действия. Чтобы Web-сервер "знал", что в какой-либо странице используются серверные директивы, нужно изменить расширение файла, в котором сохранена эта страница. Как вы помните, обычно HTML-файлы имеют расширение htm или html. Так вот: эти расширения нужно изменить соответственно на shtm и shtml.
Подавляющее большинство Web-серверов требуют, чтобы Web-страницы с серверными директивами находились в файлах с расширениями shtm и shtml. Правда, встречаются серверы с другими требованиями (например, малоизвестный Web-сервер со странным названием "л3" требует, чтобы такие файлы имели расширение ssi), но подобные случаи весьма редки. И все же, невредно было бы прежде, чем применять в своих страницах серверные директивы, прочитать документацию к серверу или проконсультироваться у его администратора.
Как видите, серверная директива может иметь (и практически всегда имеет) несколько атрибутов, которым присвоены значения. В этом смысле серверные директивы чем-то похожи на теги HTML.
Метатег, задающий связь между двумя разными Web-страницами или между Web-страницей и другим файлом, используется очень редко и практически всегда -- только специальными программами. Обычными Web-обозревателями применяется только одна его форма, которая служит для привязки к странице внешней таблицы стилей. (О таблицах стилей см. главу 10.) Другие формы этого метатега не нашли широкого применения.
Однако давайте все же рассмотрим этот метатег. А вы уж сами для себя решите, использовать его или не использовать.
Итак, чтобы поместить на страницу метатег связи, выберите пункт Link подменю Head Tags меню Insert. Также вы можете нажать кнопку Link (рис. 14.14), находящуюся на вкладке Head панели объектов. На экране появится диалоговое окно Link, показанное на рис. 14.15.
Весь HTML-код, из которого состоит Web-страница, пересылаемая по Сети, обрабатывается клиентом. Клиентом практически всегда является Web-обозреватель (существуют и другие программы, обрабатывающие Web-страницы на стороне клиента, но мы не будем их рассматривать). Именно для Web-обозревателя предназначены все эти теги, что мы создаем вручную или в Web-редакторе. Web-сервер же их совсем не понимает.
Задача Web-сервера совсем другая: принять запрос от клиента, найти нужный файл на своих дисках и переслать его клиенту для обработки. Ну и, разумеется, он должен устойчиво работать и потреблять как можно меньше системных ресурсов. Обработка HTML-кода в его обязанности не входит.
Однако разработчики Web-серверов все же заставили их понимать некоторые команды, с помощью которых можно обработать HTML-код. Как вы уже поняли, эта обработка выполняется на стороне сервера, более того, самим Web-сервером. Конечно, эти команды позволяют выполнить самые простые действия: вставить в содержимое одного файла содержимое другого, поместить в код текущую дату и т. п. Но даже в этом случае они — хорошее подспорье Web-дизайнеру.
Эти команды и называются серверными директивами. Несмотря на всю их простоту, они позволяют решить много проблем, неустранимых иными средствами.
Помните, как мы пытались поместить на Web-страницу текущую дату? Для этого нам пришлось в свое время писать Web-сценарий. А если Web-обозреватель не поддерживает Web-сценарии? А если компьютер, на котором он работает, настолько маломощен, что пользователь отключил поддержку сценариев? В таком случае сценарий, помещающий на страницу дату, не выполнится.
Web-сервер же работает всегда, и серверная директива, осуществляющая вставку в HTML-код текущей даты, выполнится в любом случае. Web-обозреватель же, загрузивший страницу, даже не будет знать, что эта страница была предварительно обработана сервером. (Вообще-то, об этом догадаться может если не Web-обозреватель, то опытный пользователь, имеющий представление о Web-серверах и их настройке.)