Реферат по предмету "Астрономия"

Узнать цену реферата по вашей теме


Учебник Macromedia Dreamweaver

ЧАСТЬ I. КАК СДЕЛАТЬ ПРОСТЕЙШИЙ WEB-САЙТ

Глава 1. Как создаются Web-страницы

Что такое Интернет

Как создаются Web-страницы

Гиперссылки

Клиенты и серверы Интернета

Зачем нужны HTML-редакторы

Что дальше?

ЧАСТЬ I.

Как сделать простейший Web-сайт

Глава 1. Как создаются Web-страницы

Глава 2. Основные принципы работы с Dreamweaver

Глава 3. Начинаем с текста

Глава 4. Рисунки, звуки, фильмы

Глава 5. Таблицы

Глава 6. Работа с Web-сайтом

ГЛАВА 1.

Как создаются Web-страницы

Так как же делаются те красивые Web-странички, которые выводит нам Web-обозреватель? И откуда они берутся? А вот я слышал в автобусе слово "WWW" и не знаю, что это такое... И вообще, что такое Интернет и почему мы его не видим, как, например, монитор или сообщения об ошибках Windows?

Все-все! Сейчас попытаемся ответить на эти вопросы. И начнем с самого последнего.

Что такое Интернет

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

Но довольно! Вы слишком много читаете фантастики (или газет типа "Церковного вестника"). На самом деле, все намного проще. Возможно, вы даже немного разочаруетесь, узнав, что такое Интернет. Но правда должна быть сказана, чего бы это ни стоило. Ради этого и написана данная книга.

Итак, что такое Интернет и как он работает?

Вот объяснение для зануд и педантов. Интернет — это совокупность компьютерных сетей, связанных друг с другом и работающих по единым стандартам. Говоря простыми словами, это множество локальных сетей, плюс пользователи, подключающиеся к ним по модемам, плюс соединяющие эти сети высокоскоростные каналы связи, плюс еще пара миллионов тонн всяких железяк, пара триллионов строк программного кода и пара-тройка тысяч стандартов, призванных навести в этом барахле подобие порядка.

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

Как создаются Web-страницы

А теперь поговорим о том, как создаются Web-страницы.

Для этого используется особый язык HTML (HyperText Markup Language -язык гипертекстовой разметки). Этот язык определяет набор специальных команд, называемых тегами и используемых для задания форматирования или назначения тех или иных элементов Web-страницы. Особые теги используются для размещения на Web-страницах графических изображений, аудио- и видеоклипов и прочих так называемых внедренных объектов.

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

Да что тут говорить! Лучше все показать на примере. Взгляните на рис. 1.1. Это простейшая Web-страничка, сделанная для примера в Блокноте.

Чтобы увидеть эту страничку воочию, откройте Блокнот, наберите приведенный ниже код, проверьте его на ошибки и сохраните в файле с именем 1.1.htm. Только когда будете вводить имя файла в стандартном окне сохранения, заключите его в кавычки, иначе Блокнот добавит расширение txt, и ваш файл получит имя 1.1.htm.txt. После этого откройте полученный файл в Web-обозревателе, для чего достаточно дважды щелкнуть по нему мышью.

Теперь давайте рассмотрим сам HTML-код нашей первой странички.

<HTML> <HEAD>

<ТIТLЕ>WEB-страница</ТITLЕ> </HEAD> <BODY>

<Н1>Пример WEB-страницы</Н1>

<Р>Это простейшая Web-страничка, созданная в стандартном

<I>Блокноте</I>

и отображенная в <I>Microsoft Internet Explorer</I>.</P> </BODY> </HTML>

Выглядит устрашающе... Однако хорошо заметен текст, который виден в окне Web-обозревателя на рис. 1.1. Давайте рассмотрим его подробнее.

<Н1>Пример WEB-страницы</Н1>

<Р>Это простейшая Web-страничка, созданная в стандартном <I>Блокноте</I>

и отображенная в

<I>Microsoft Internet Explorer</I>.</P>

Вы видите какие-то слова, заключенные в угловые скобки < и >. Это и есть теги HTML. Они задают форматирование текста. Скажем, строка <I>Блокноте</I> будет выведена курсивом, т. к. теги <i> и </i> задают курсивное начертание текста. Причем, тег <i> помечает начало курсивного фрагмента (открывающий тег), а тег </i> — конец (закрывающий тег). А собственно фрагмент, заключенный между открывающим и закрывающим тегами, называется содержимым тега.

Рис. 1.1. Простейшая Web-страничка

Это были теги физического форматирования текста, т. е. просто задающие, как текст должен выглядеть в окне Web-обозревателя. Теперь рассмотрим теги логического форматирования, которые позволяют разбить текст на отдельные логические блоки. В нашем небольшом фрагменте это теги <р> и <Н1> (и соответствующие им закрывающие теги </р> и </HI>). Они задают соответственно обычный текстовый параграф и заголовок первого уровня;

при этом Web-обозреватель будет знать, что <H1>пример WEB-страницы</H1> — это заголовок, и отобразит его соответствующим образом. Как и в предыдущем случае, открывающий тег помечает начало логического блока текста, а закрывающий — конец.

Здесь мы говорили о так называемых парных тегах, когда открывающему тегу соответствует закрывающий. HTML определяет также набор одинарных тегов. Один из них — это тег вставки графического изображения <IMG>.

<IMG SRC="picture.gif">

Здесь мы видим, что само графическое изображение хранится в отдельном файле picture.gif. То есть, изображение — это один из внедренных элементов Web-страницы. Тег <IMG> содержит в себе параметр SRC, задающий имя файла изображения. (Такие параметры называются атрибутами тега.) Web-обозреватель, встретив в HTML-коде страницы тег <IMG>, загружает файл, чье имя задано атрибутом SRC, и отображает его.

Осталось рассмотреть совсем немного тегов, используемых для служебных целей и не отображаемых Web-обозревателем. Они так и называются — невидимые теги.

Парный тег <BODY>. . .</BODY> используется для выделения тела Web-страницы, т. е. той ее части, которая будет отображаться в окне Web-обозревателя. Кроме тела, Web-страница также должна содержать задаваемый парным тегом <HEAD>. . .</HEAD> заголовок, где помещается служебная информация. (Этот заголовок не выводится Web-обозревателем, а используется для внутренних нужд. Не путайте заголовок Web-страницы и обычный текстовый заголовок, задаваемый тегом <H1>!) Среди этой служебной информации может быть название страницы, показываемое в заголовке окна Web-обозревателя; оно задается парным тегом <TITLE>. . .</TITLE>.

Давайте рассмотрим заголовок нашей страницы.

<HEAD>

<TITLE>Web</TITLE> </HEAD>

Собственно, заголовок содержит только название нашей страницы, помеченное тегом <TITLE>. . .</TITLE>. Но в подавляющем большинстве случаев заголовок содержит множество других данных, необходимых как Web-обозревателю, так и другим программам, обеспечивающим функционирование Интернета и WWW. Мы пока не будем их рассматривать.

Взгляните еще раз на HTML-код нашей страницы. Заметьте, что одни теги вложены в другие. Так, тег <i> вложен в тег <р>, тег <Р> — в тег <BODY>, а тег <BODY> - в тег <HTML>. Такая вложенность или иерархия тегов в HTML встречается на каждом шагу. Давайте представим ее в виде схемы.

<HTML>

<HEAD>

<TITLE>

<BODY>

Здесь мы убрали мешающие нам закрывающие теги и их содержимое. Величина отступа показывает уровень вложенности того или иного тега. Так, тег <BODY> имеет первый уровень вложенности, а тег <H1> — второй. Теги предыдущих уровней вложенности называются родительскими тегами или родителями, а теги последующих уровней — дочерними тегами или потомками. Например, для тега <HEAD> родительским тегом будет <HTML>, а дочерним -<TITLE>. Для тега <BODY> родителем будет тег <HTML>, а потомками — теги

<Н1>, <Р> и <I>.

Весь HTML-код Web-страницы вложен внутрь парного тега <HTML>. . .</HTML>. Этот тег находится на самом высшем, нулевом, уровне вложенности и не имеет родителя.

Я здорово перегрузил вас информацией, и вам может показаться, что HTML — это что-то запредельно сложное. На самом деле, все это очень просто, и вы можете легко создавать простейшие Web-странички вручную. И в подтверждение этого давайте немного изменим код нашей страницы. Например, выделим название фирмы Microsoft жирным шрифтом. Тег, задающий "жирность", — <B>. . .</B>.

Далее приведем измененный фрагмент HTML-кода.

<Р>Это простейшая Web-страничка, созданная в стандартном

<I>Блокноте</I>

и отображенная в

<I><B>Microsoft</B> Internet Explorer</I>.</P>

Заметьте, как мы вложили один тег в другой (эти теги выделены). Теперь слово "Microsoft" будет набрано и жирным шрифтом, и курсивно. Только обратите внимание на порядок вложенности тегов и не нарушайте его. Если же вы случайно допустите ошибку и поместите теги так:

<Р>Это простейшая Web-страничка, созданная в стандартном <I>Блокноте</I> и отображенная в <B><I>Microsoft</B> Internet Explorer</I>.</P>

то Web-обозреватель может и не отобразить ваше творение (хотя Internet Explorer славится своим умением исправлять мелкие ошибки Web-дизайнера). Запомните простое правило: закрывающие теги должны повторяться в порядке, обратном порядку соответствующих им открывающих тегов.

Сохраните полученный файл под именем 1. 2.htm и откройте его в Web-обозревателе. То, что вы увидите, показано на рис. 1.2.

Рис. 1.2. Измененная Web-страничка

Как видите, ничего особо сложного в языке HTML нет. Единственная сложность — это запомнить все его теги, но это вопрос времени и опыта.

Для того чтобы различные программы Web-обозревателей правильно отображали одну и ту же Web-страницу, язык HTML должен быть стандартизирован. Его стандартизацией (а также множеством других стандартов Интернета) занимается особая организация, называемая World Wide Web Consortium или, сокращенно, WWWC. Это название можно перевести как "Комитет Всемирной паутины"... нет, лучше не переводить!... ужасное название...

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

Наряду с тегами HTML, стандартизированными WWWC (стандартные теги), Web-обозреватели поддерживают множество нестандартных тегов. Эти теги были введены разработчиками той или иной программы Web-обозревателя, чтобы получить преимущество перед конкурентами. Они надеялись, что эти фирменные расширения впоследствии войдут в стандарт HTML, но этим надеждам так и не суждено было сбыться. Однако теги остались, и они все так же поддерживаются. Мы опишем эти теги наряду со стандартными, но предупреждаем вас, что они поддерживаются не всеми программами.

Версия 4.01 станет последней версией языка HTML. В дальнейшем он будет постепенно заменен своим потомком — языком XHTML (extensible Hyper-Text Markup Language — расширяемый язык гипертекстовой разметки). Этот язык основан на популярном языке описания данных XML (extensible Markup Language — расширяемый язык разметки), он позволяет расширять доступный набор тегов и считается более строгим и более подходящим для машинной обработки. К тому же, из XHTML выброшено множество устаревших тегов, все еще поддерживаемых HTML в целях совместимости.

Скоро ли наступит эра XHTML? Вряд ли. Старый добрый HTML поцарствует на земле еще не один год. Поэтому не стоит торопиться заучивать новые теги и переписывать уже написанные Web-страницы. Займитесь более полезными делами. Например, наведите порядок в ящиках своего стола или нанесите визиты своим одноклассникам.

Гиперссылки

Не только и не столько Web-страницы прославили Интернет. Свою роль внесло еще одно замечательное изобретение, буквально связавшее разрозненные документы в настоящую паутину. Она так и называется — Всемирная паутина, а по-английски — World Wide Web или WWW. (Вы уже встречали это название в наименовании World Wide Web Consortium — организации, ответственной за стандартизацию Интернета.) Благодаря этому изобретению вы можете с легкостью перемещаться по страницам, ведь любой уголок Всемирной сети находится от вас на расстоянии щелчка мыши.

Это гиперссылки — особые связи, ведущие от одной Web-страницы к другой. Именно по ним вы щелкаете мышью, если хотите перейти на другую страницу.

Гиперссылки создаются с помощью особого парного тега <А> и имеют следующий вид:

<А HREF="http://www.somesite.ru/pages/page125.html">Cтpaница N125</A>

Как видите, тег <А> содержит атрибут HREF, который задает интернет-адрес страницы, на которую будет выполнен переход при щелчке по гиперссылке. Этот атрибут обязательно должен присутствовать в любом теге <А>, задающем гиперссылку - это обязательный атрибут. (Как выяснится далее, тег <А> может задавать не только гиперссылки.)

Интернет-адрес нужной Web-страницы вам нужно выяснять самим. Сделать это не так уж и сложно. Обычно он состоит из интернет-адреса Web-сайта, на котором находится нужная страница, и полного пути доступа к файлу этой страницы. В нашем случае, http://www.somesite.com— это адрес сайта, a /pages/pagel25.htm — путь доступа к файлу страницы.

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

<А НКЕР="/раges/раgе125.html">Страница N125</А>

Если же нужная страница находится еще и в той же папке, что текущая, можно вообще оставить только имя файла:

<А НREF="раgе125.html">Страница М125</А>

А теперь давайте создадим две простейшие Web-странички и свяжем их гиперссылкой. В качестве первой страницы мы возьмем уже написанную нами ранее и сохраненную в файле 1.2.htm (см. рис. 1.2). Только добавим внизу следующий код:

<Р><А HREF="1.4.htm">Сведения об авторе</А></Р>

Сохраните новую страницу в файле 1.3.htm.

Код второй страницы приведен ниже. Я уверен, что вы в нем разберетесь.

<HTML> <HEAD>

<ТITLE>Сведения об авторе<ТITLE> </HEAD> <BODY>

<Р>Эту страничку написал я. И я очень горд этим!</Р> </BODY> </HTML>

Сохраните ее в файле 1.4.htm.

Теперь откройте в Web-обозревателе файл 1.3.htm и щелкните по гиперссылке "Сведения об авторе". В окне Web-обозревателя появится страница со сведениями об авторе, сохраненная в файле 1.4.htm.

А теперь сделаем небольшой фокус. Измените код гиперссылки, помещенный в HTML-код первой страницы, таким образом (изменения выделены полужирным шрифтом):

<Р><А HREF="1.4.htm" ТАRGЕТ="_blank">Сведения об авторе</А></Р>

Мы поместили в тег <А> атрибут TARGET, задающий цель гиперссылки. Цель гиперссылки задает, куда будет выведена Web-страница, на которую она указывает. Если этому атрибуту присвоено значение _biank, страница будет выведена в отдельное окно Web-обозревателя. Чтобы задать обычное поведение гиперссылки (новая страница выводится в то же окно), присвойте атрибуту TARGET значение _seif или вообще уберите его из кода гиперссылки.

В отличие от атрибута HREF тега <А>, атрибут TARGET не является обязательным. Он так и называется — необязательный атрибут.

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

Рис. 1.3. Два окна Web-обозревателя, в которых загружены разные Web-страницы

Чтобы лучше узнать человека, нужно познакомиться с ним поближе. Так и с гиперссылками. В дальнейшем мы поговорим о них подробнее. А пока -закончим!

Клиенты и серверы Интернета

Итак, продолжим изучение основ Интернета и WWW.

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

Но как же Web-страницы, созданные кем-то, доставляются на ваш рабочий стол? По Интернету, скажете вы. И будете правы. Но как именно?

Сейчас мы это опишем.

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

Такая компьютерная архитектура, иначе говоря, принцип построения вычислительной системы или сети, называется архитектурой "клиент-сервер" или двухзвенной. Этим она отличается от однозвенной или одноранговой архитектуры, когда все объединенные в сеть компьютеры равны между собой и могут как разделять, так и использовать сетевые ресурсы. Именно на основе двухзвенной архитектуры функционируют почти все сервисы Интернета. В том числе, и WWW.

В случае WWW клиентами выступают хорошо вам знакомые программы Web-обозревателей (или аналогичные программы, обрабатывающие Web-страницы, например, программы закачки Web-сайтов). Серверами же являются так называемые Web-серверы, обрабатывающие запросы Web-обозревателей и высылающие им нужные файлы.

С термином "Web-сервер" (как и термином '"сервер") существует определенная путаница. Во-первых, так называют компьютер, подключенный к Сети по быстрому каналу и хранящий на своих жестких дисках файлы Web-страниц. Во-вторых, так называется программа, работающая на этом самом компьютере, принимающая от Web-обозревателей запросы и выдающая им соответствующие файлы. Но чаще и компьютер, и программу объединяют в единое целое и называют одним словом — Web-сервер. Так поступим и мы. (Хотя правильно называть Web-сервером именно программу.)

Когда вы набираете в поле адреса Web-обозревателя какой-либо интернет-адрес, обозреватель обращается к соответствующему Web-серверу. Сервер же извлекает со своих дисков нужные файлы (сама Web-страница, изображения, внедренные объекты, архивы, исполняемые файлы) и отправляет их Web-обозревателю. А уж он-то знает, как с ними поступить.

Люди, для того чтобы понимать друг друга, должны разговаривать на одном языке. Это же относится и к компьютерам. В их случае в качестве такого "языка общения" выступает протокол — набор правил обмена данными. Web-сервер и Web-обозреватель используют для обмена данными протокол HTTP (HyperText Transfer Protocol — протокол обмена гипертекстом). Этот высокоуровневый протокол работает "поверх" обычного низкоуровневого протокола TCP/IP (Transfer Control Protocol/Internet Protocol — протокол управления обменом/протокол Интернета).

Примечание

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

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

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

Установкой и настройкой Web-сервера, а также устранением проблем и наблюдением за его работой занимается особый человек — администратор Web-сервера. От действий (или бездействия) администратора зависит, какие возможности поддерживает Web-сервер и насколько надежно он работает. Как правило, вы не можете повлиять на действия администратора (тем более, если он администрирует бесплатный общедоступный сервер), если, конечно, сами не являетесь администратором своего собственного Web-сервера.

Одна из Web-страниц, хранящихся на диске серверного компьютера, при настройке Web-сервера задается в качестве страницы по умолчанию или главной страницы. Она будет загружена, если пользователь наберет в строке адреса Web-обозревателя только интернет-адрес сайта (например, "http:// www.site.ru"), без указания имени файла страницы. Как правило, такая страница имеет имя default или index.htm и расширение htm или html, хотя, опять же, все это в руках администратора.

После получения файлов Web-страницы Web-обозреватель сохраняет их на жестком диске клиентского компьютера в особой папке, называемой кэшем. Зачем это нужно? Да хотя бы затем, чтобы вы смогли впоследствии просмотреть эту страницу, не подключаясь к Интернету. Все современные Web-обозреватели поддерживают так называемый автономный режим (по-английски — offline mode), когда они отображают только те страницы, что находятся в кэше. Если же вы попытаетесь просмотреть страницу, которой нет в кэше, Web-обозреватель предложит вам подключиться к Интернету и загрузить ее.

Теперь познакомимся с популярнейшими в настоящее время Web-обозревателями.

Самым популярным среди них, настоящим королем виртуальных просторов, является Microsoft Internet Explorer. Он установлен на любом компьютере, работающем под управлением Windows, что, как говорят злые языки, и обусловило его популярность. Однако это очень мощная, быстрая, весьма нетребовательная к ресурсам и исключительно удобная программа, что бы там ни говорили его критики. Автор этой книги для просмотра Web-страниц пользуется именно Internet Explorer. В настоящее время доступна версия 6.0 и, по всей вероятности, разрабатывается новая версия, хотя фирма Microsoft, по своему обыкновению, хранит по этому поводу молчание.

Второе место по популярности занимает норвежская разработка Opera, выпускаемая одноименной фирмой. Эта достаточно мощная и очень быстрая программа, тем не менее, весьма охоча до системных ресурсов, особенно при отображении сложных Web-страниц. Кроме того, она является платной; в бесплатной версии она показывает рекламу. Последняя имеющаяся у автора версия носит номер 6.05 и, скорее всего, после выхода книги она устареет, т. к. новые версии Opera появляются очень часто.

Некогда властелин WWW Netscape Navigator сейчас в глубоком загоне -в настоящее время им пользуются от силы 2% интернетчиков. Хотя последняя версия Navigator — 7 -- выглядит весьма неплохо, поддерживает все стандарты WWWC, корректно отображает большинство Web-страниц и не очень требовательна к системным ресурсам. Но все равно Navigator по многим параметрам проигрывает и Internet Explorer, и Opera.

Не очень давно был наконец-то выпущен в свет новый Web-обозреватель -Mozilla. Эта программа распространяется бесплатно, более того, ее исходные тексты открыты для изучения и модификации. Она построена на том же программном ядре, что и Navigator 7, точнее, наоборот, Navigator 7 построен на основе Mozilla. (Собственно, Mo/ilia и создавался для обкатки нового программного ядра Navigator, но в дальнейшем вырос в самостоятельный продукт.) Этот новичок весьма неплох, поддерживает все Web-стандарты, нетребователен к системным ресурсам, довольно быстр и имеет множество интересных и весьма полезных возможностей, которыми пока не может похвастаться ни один из его конкурентов. Пока что он не очень популярен, но в дальнейшем, возможно, еще себя покажет. Последняя версия, доступная в момент написания книги, — 1.1.

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

А сколько в мире существует популярных Web-серверов? О-о-о, вероятно, не меньше, если не больше, чем популярных Web-обозревателей. Самыми популярными сейчас являются распространяемый с открытыми исходниками Apache и разработанный фирмой Microsoft Internet Information Server. Также неплох используемый автором для своего сайта Web-сервер Sambar.

Кстати, насчет Web-серверов. Если вы работаете в среде Microsoft Windows 98/МЕ или Windows 2000/XP, то можете установить Web-сервер, поставляемый с этой системой, и попробовать себя в качестве администратора. Это Personal Web Server (поставляется с Windows 98/МЕ) или Internet Information Server (Windows 2000/XP). Он нетребователен к ресурсам системы, довольно быстр в работе и удобен в настройке. Документация к нему поставляется также в составе операционной системы, к тому же, существует довольно много книг, посвященных этому Web-серверу. Советую вам поработать с ним, т. к. в дальнейшем он нам понадобится.

Вот и все о клиентах и серверах Интернета.

Зачем нужны HTML-редакторы

На этом завершим краткое введение в интернет-технологии. Вы узнали, что создавать Web-страницы очень просто, и для этого достаточно простейшего текстового редактора. Также вы познакомились с программами Web-серверов и узнали, как работает клиент-серверная архитектура. В связи с этим возникает вопрос: если язык HTML так прост, а в состав Windows входит Блокнот, прекрасно с ним справляющийся, то зачем нужны еще и Web-редакторы вроде Macromedia Dreamweaver?

А вот зачем...

"Уберите от меня подальше этот проклятый HTML!!! — кричит один читатель. — Я ничего в нем не смыслю! Он слишком сложен для меня, а у меня нет времени ему учиться. Дайте мне нормальный текстовый редактор, тот же Microsoft Word, и я буду работать в нем." И он будет прав.

HTML, конечно, прост. Но для кого-то он может оказаться невероятно сложным, ведь люди все разные. Кроме того, сложные Web-страницы писать "врукопашную" крайне неудобно. Уж поверьте! Поэтому вам понадобятся программы, автоматизирующие ваш труд — эти самые Web-редакторы, к славной плеяде которых относится и Macromedia Dreamweaver.

"Но мне нравится HTML! — возразит другой читатель, собаку съевший в Web-дизайне. — Мне проще вводить вручную HTML-теги, чем елозить по тексту мышкой и тыкать кнопки." И он тоже будет прав.

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

Выходит, правы и первый, и второй читатели. Так как же помирить два враждующих лагеря: HTML-поклонников и HTML-ненавистников? Похоже, что никак...

Вот поэтому на свете и существуют две разновидности Web-редакторов: визуальные и невизуальные. Или, как еще говорят, WYSIWYG- и не-WYSIWYG-редакторы. (WYSIWYG или What You See Is What You Get -"что ты видишь, то ты и получишь".)

Невизуальные редакторы работают с "чистым" (или "сырым") HTML-кодом. Они предоставляют возможность быстрого ввода тегов, синтаксического подсвечивания, проверки правильности получившегося кода и ссылок. К ним относится, в частности, известная Arachnophilia.

Примечание

Невизуальные Web-редакторы часто называют HTML-редакторами.

Визуальные редакторы позволяют работать с самой Web-страницей "как она есть". Пользователь редактирует и форматирует текст, вставляет рисунки, таблицы, как в обычном текстовом редакторе, а уж сама программа формирует соответствующий HTML-код. К такого рода редакторам относится популярный Microsoft FrontPage и целый ряд программ попроще.

Как вы уже поняли, невизуальные редакторы прекрасно подходят для опытных Web-дизайнеров, съевших собаку на HTML и прекрасно представляющих, как должна выглядеть Web-страница в результате тех или иных изменений в ее коде. Визуальные редакторы — отличная стартовая площадка для начинающих Web-дизайнеров, плохо знакомых с HTML. Но и опытные дизайнеры часто пользуются визуальными редакторами, чтобы быстро "набросать" Web-страничку, а потом довести ее до ума "врукопашную".

Специально для таких пользователей, совмещающих прекрасное знание HTML с пристрастием к визуальным средствам редактирования, существуют так называемые гибридные,редакторы. Они имеют мощные средства визуального редактирования, одновременно предоставляя доступ к получившемуся HTML-коду. Именно к таким редакторам и относится Macromedia Dreamweaver.

Примечание

Вообще-то сейчас, судя по всему, уже нет чисто визуальных редакторов — все они являются гибридными. Просто у одних доступ к HTML-коду осуществляется проще (Dreamweaver), а у других — чуть сложнее (FrontPage). Поэтому практически всегда, когда говорят "визуальный Web-редактор", подразумевают как раз гибридные программы.

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

Что дальше?

Вот и закончился наш краткий курс интернет-технологий. Конечно, многое здесь не описано. Все, что вам будет необходимо для создания и публикации Web-страниц, будет рассмотрено по ходу дела. А сейчас давайте, не углубляясь в дебри Интернета, перейдем к нашей главной цели — к работе с замечательным пакетом Web-редактора Macromedia Dreamweaver MX.

Глава 2. Основные принципы работы с Dreamweaver

Среда Dreamweaver MX

Выбор рабочей среды

Главное окно программы

Управление окнами и панелями Dreamweaver

Работа с Web-страницами

Работа в окне документа

Три режима отображения Web-страницы

Работа с кодом HTML

Поиск и замена текста

Использование регулярных выражений

Просмотр Web-страницы

Вызов справки

Настройка Dreamweaver

Учим русский

Настраиваем скорость интернет-соединения

Добавляем программы просмотра Web-страниц

Добавляем внешний HTML-редактор

Что дальше?

ГЛАВА 2.

Основные принципы работы с Dreamweaver.

В этой главе мы рассмотрим начальные сведения о работе с Macromedia Dreamweaver MX. Вы узнаете, зачем нужны его многочисленные окна и инструменты, какие из них действительно вам понадобятся, а какие — нет. Также мы узнаем о начальных настройках этой программы, в частности, что нужно сделать, чтобы Dreamweaver поддерживал русский язык (изначально он не знаком с русским, т. к. по происхождению — американец). Все это вам нужно знать для того, чтобы потом, во время создания нашей первой Web-странички, не задавать лишних вопросов.

Единственное пожелание: было бы очень неплохо, если бы вы знали хоть немного английский язык. В конце концов, персональный компьютер -детище американского образа жизни, и, несмотря на все "локализации" и "интернационализации", он всегда остается американцем, разговаривающим на своем языке. Хотя автор и попытается рассказать обо всех щекотливых моментах, с которыми вы можете столкнуться, и путях их решения или обхода, Dreamweaver вполне может огорошить вас каким-нибудь предупреждением, прочитать которое вы без знания английского не сможете. А раз вы не сможете его прочитать — то не сможете и отреагировать на него, что может быть весьма чревато...

Среда Dreamweaver MX

Итак, начнем рассматривать рабочую среду Dreamweaver MX, т. е. наборы окон и различных инструментов, предлагаемых им Web-дизайнеру. Но для начала запустим Dreamweaver.

Запустить программу в Windows проще простого! Нажмите хорошо знакомую вам кнопку Start (Пуск), выберите в меню пункт Programs (Программы), далее — пункт Macromedia и в появившемся подменю — пункт Macromedia Dreamweaver MX.

Выбор рабочей среды

Через некоторое время после запуска программы на экране появится небольшое диалоговое окно Workspace Setup, предлагающее вам выбрать вид рабочей среды Dreamweaver MX (рис. 2.1).

Рис. 2.1. Диалоговое окно Workspace Setup

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

Переключатель Dreamweaver MX Workspace выбирает "новый" вид рабочей среды Dreamweaver MX ("стиль MX"). В этом случае все нужные вам инструменты будут находиться в одном большом окне, что, на взгляд автора, исключительно удобно. Рекомендуем вам включить именно этот переключатель (впрочем, он включен по умолчанию).

Переключатель Dreamweaver 4 Workspace выбирает "старый" вид рабочей среды, использовавшийся в старых версиях Dreamweaver — с 1-й по 4-ю ("старый стиль"). В этом случае на экране перед вами будут находиться два окна: окно документа и окно сайта, между которыми вам придется часто переключаться. Это не очень удобно — в самом деле, когда все находится в одном окне, работать намного удобнее. Поэтому вам стоит включить этот переключатель только в том случае, если вы "пересаживаетесь" на Dreamweaver MX со старых его версий и еще не привыкли к его новой среде.

Флажок HomeSite/Coder-Style доступен только при выборе переключателя Dreamweaver MX Workspace. Он заставляет Dreamweaver сразу же после открытия очередной Web-страницы переключиться в режим редактирования HTML-кода. Это может пригодиться только тем, кто привык набирать код HTML вручную. Если же вы не знакомы с HTML, лучше не включайте этот флажок.

Задав нужный вид рабочей среды Dreamweaver, нажмите кнопку ОК. Через некоторое время вы увидите либо главное окно, либо окно документа, в зависимости от того, какой переключатель — Dreamweaver MX Workspace или Dreamweaver 4 Workspace — вы выбрали в окне Workspace Setup. Теперь можно начинать знакомство с этой замечательной программой.

Внимание!

Дальнейшее повествование будет вестись исходя из того, что вы выбрали "стиль MX" рабочей среды Dreamweaver.

Главное окно программы

Главное (или основное) окно программы Macromedia Dreamweaver MX показано на рис. 2.2. Рассмотрим его подробнее.

Рис. 2.2. Главное окно Dreamweaver

Скажем сразу, что Dreamweaver — программа с многодокументным интерфейсом или просто многодокументная программа. Это значит, что вы можете открыть в одном и том же окне программы сразу несколько документов. В этом случае окна, содержащие открытые документы, открываются внутри большого окна самой программы. К многодокументным приложениям также относятся Microsoft Word и Adobe Photoshop.

В отличие от них, программы с однодокументным интерфейсом (однодокументные программы) могут открыть только один документ; чтобы открыть второй, нужно запустить вторую копию программы. Примерами однодокументных приложений являются, в частности, текстовый редактор Microsoft WordPad и графический редактор Microsoft Paint, поставляемые в составе Windows.

Но вернемся к нашему Dreamweaver.

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

Окно документа Dreamweaver служит для отображения открытой Web-страницы (на рис. 2.2 вы можете видеть, что в Dreamweaver открыта одна из наших первых Web-страничек). Как и любая другая многодокументная программа, Dreamweaver может открыть в главном окне сколько угодно окон документов. Вы можете перемещать, свертывать и развертывать эти окна и изменять их размеры, в общем, проделывать с ним те же манипуляции, что и с любым другим окном Windows. Единственное исключение: вы не можете "вытащить" ни одно из этих окон за пределы главного окна программы (его еще называют родительским окном).

Надо сказать, что при первом запуске Dreamweaver MX выводит на экран еще одно небольшое окно — так называемое окно-приглашение. Это окно содержит текст рекламного характера, предлагающий пользователю прочитать некоторые справочные данные или запустить интерактивные презентации, объясняющие, как работать в Dreamweaver. Вы можете просмотреть их или сразу же закрыть это окно, щелкнув кнопку закрытия. При последующих запусках окно-приглашение появляться больше не будет.

Выше, ниже и правее окна документа находятся панели. Это небольшие окна, которые могут быть либо "приклеены" к одному краю главного окна, либо свободно "плавать" рядом с ним. Они предназначены для самых разных целей; подробнее мы рассмотрим их в следующих разделах книги. В верхней части каждой панели имеется ее заголовок — темно-серая полоса, на которой написано название панели.

Изначально все панели, имеющиеся на экране, "приклеены" к какому-либо краю главного (родительского) окна программы Разработчики из фирмы

Macromedia считают, что так будет удобно большинству пользователей Dreamweaver, и, похоже, они правы. Однако вы можете придерживаться иного мнения. Поэтому и здесь существует возможность отделить какую-либо панель от края родительского окна и превратить ее в отдельное окно (рис. 2.3) (так называемая "плавающая" панель). Для этого каждая панель имеет "ручку" для ее "переноски", находящуюся в левой части заголовка панели и выглядящую как пять темных точек. Ну и, конечно же, вы всегда можете присоединить панель обратно к краю главного окна, чтобы она не загораживала документ.

Рис. 2.3. Панель, отделенная от края родительского окна

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

Если вы перетащите одну панель на другую, эти панели будут объединены в общую группу панелей, занимающую одно окно (рис. 2.4). Такие группы можно также "приклеивать" к краю главного окна программы. (Если вы посмотрите на рис. 2.2, то увидите несколько групп панелей, "приклеенных" к краю главного окна.) Рекомендуется объединять в одну группу панели, выполняющие сходные функции.

Рис. 2.4. Панели, объединенные в группу

Все панели, находящиеся в группе, представлены в виде вкладок. Чтобы переключиться на нужную панель в группе, щелкните мышью вкладку, на которой написано название этой панели. Если вы хотите вынести какую-либо панель из такой группы, щелкните правой кнопкой мыши по соответствующей вкладке, выберите пункт Group <название панели> with и в появившемся на экране подменю — пункт New Panel Group.

Внимание!

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

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

Рис. 2.5. "Сжатое" окно панели

Большинство групп панелей имеют так называемое дополнительное меню. Оно открывается при щелчке мышью по небольшой кнопке, расположенной в правом верхнем углу панели и имеющей изображение списка из трех позиций и небольшой стрелки, направленной вниз (рис. 2.6). В дополнительном меню находятся пункты, выполняющие редко используемые команды. В частности, вы можете найти там уже знакомое вам подменю Group <название панели> with.

Рис. 2.6. Дополнительное меню группы панелей (открыто)

Теперь обратите внимание на правый край главного окна. Там находится настоящее сборище всяческих панелей. Это так называемый док — область, специально предназначенная для помещения на нее панелей. Док отделен от остального пространства главного окна толстой серой полосой, которую вы можете перетаскивать мышью, изменяя размеры дока. Вы также можете щелкать мышью довольно приметную кнопку (рис. 2.7), чтобы быстро скрыть док со всеми его панелями или открыть его снова. Поверьте — это настоящая находка программистов фирмы Macromedia; благодаря ей, пользоваться Dreamweaver стало намного удобнее.

Рис. 2.7. Кнопка скрытия-раскрытия дока

Панели всегда располагаются над окном документа, даже если в данный момент неактивны. Это сделано для того, чтобы вы могли всегда получить к ним доступ, вне зависимости от того, какое окно сейчас активно. Если же вы хотите убрать какую-либо из этих панелей, "вынесите" ее за пределы окна документа или вообще закройте, раскрыв ее дополнительное меню и выбрав пункт Close Panel Group. В дальнейшем вы сможете открыть нужную панель, выбрав соответствующий пункт меню Window.

Когда окно программы Dreamweaver перестает быть активным (например, когда пользователь переключается в другую программу), все "плавающие" панели временно скрываются. При активизации Dreamweaver они опять появляются на экране.

Как правило, все панели Dreamweaver имеют примерно одинаковые возможности (но, конечно, разное назначение). Но две из них стоят особняком. И мы сейчас их рассмотрим.

Первая из них — это панель объектов, показанная в "плавающем" виде на рис. 2.3 (она носит название Insert). Эта панель служит для быстрой вставки в документ различных элементов: рисунков, таблиц, специальных символов, расширений Web-обозревателя и пр. (Также она служит для переключения режимов работы окна документа, но об этом поговорим позже.) Панель объектов содержит множество вкладок, между которыми вы можете переключаться, — это способ сделать ее чуть более вместительной.

Если в данный момент времени панель объектов вам не нужна, можете закрыть ее, раскрыв ее дополнительное меню и выбрав пункт Close Panel Group. Чтобы открыть ее впоследствии, выберите в меню Windows пункт Insert или нажмите комбинацию клавиш <Ctrl>+<F2>.

Вторая панель, имеющая заголовок Properties, — это редактор свойств (рис. 2.8), один из важнейших и незаменимейших инструментов Dreamweaver. Редактор свойств служит для задания параметров того или иного элемента Web-страницы (фактически — значений атрибутов соответствующего HTML-тега). Если панель объектов вы можете со спокойной душой закрыть, чтобы освободить место на экране, и использовать для вставки элементов страницы пункты меню главного окна, то редактор свойств вам будет нужен всегда. Поэтому держите его под рукой. Если же вы его все же случайно закрыли, выберите в меню Windows пункт Properties или нажмите комбинацию клавиш <Ctrl>+<F3>.

Рис. 2.8. Редактор свойств

Редактор свойств можно переключить в компактный или полный вид. Изначально он находится в компактном виде, не показывая некоторых, малоиспользуемых, с точки зрения разработчиков Dreamweaver, свойств. Автор рекомендует его сразу же развернуть, для чего щелкните мышью по кнопке, имеющей вид стрелки, направленной вниз, — она расположена в правом нижнем углу панели. После этого редактор свойств покажет вам все доступные свойства. (На рис. 2.2 редактор свойств находится как раз в развернутом виде.) Заметьте, что при этом кнопка развертывания изменит вид на стрелку вверх, и при щелчке на ней вы, наоборот, свернете редактор свойств.

Осталось рассказать совсем немного.

Взгляните на верхний край главного окна, туда, где находится панель объектов. Выше или ниже ее вы увидите узкую серую панельку, заполненную кнопками (рис. 2.9). Это один из инструментариев Dreamweaver. Инструментарий — особая панель, лишенная многих возможностей обычных панелей и предназначенная только для того, чтобы предоставить быстрый доступ к некоторым часто используемым операциям. Таких инструментариев в Dreamweaver два:

стандартный, предоставляющий доступ к файловым операциям (создание, открытие и сохранение Web-страницы, операции с буфером обмена и откат), изначально скрыт;

документа, позволяющий выполнять некоторые манипуляции с открытой Web-страницей и самой программой, виден на рис. 2.9.

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

Рис. 2.9. Инструментарий документа

Управление окнами и панелями Dreamweaver

Как видите, Dreamweaver может вывести на экран сразу множество разнообразнейших окон. Как разобраться во всем этом многообразии?

Прежде всего, нужно знать пункты меню, с помощью которых осуществляется управление этими окнами. Все эти пункты находятся в подменю Window. Рассмотрим их подробнее.

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

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

Рис. 2.10. Вкладки, обозначающие все открытые окна документа в раскрытом состоянии

Если вам нужно держать на виду сразу два или больше окон, воспользуйтесь пунктами Cascade, Tile Horizontally или Tile Vertically меню Window. Первый из них "выкладывает" все открытые окна документов в виде "стопки" в окне программы так, что вы можете видеть их заголовки и часть содержимого. Второй и третий пункты "выкладывают" в окне программы "мозаику" из окон документов так, чтобы они не перекрывались. Причем второй пункт выкладывает "мозаику" по горизонтали, а третий — по вертикали.

Пункты Insert и Properties служат для вывода на экран или скрытия соответственно панели объектов и редактора свойств. Если слева от имени одного из этих пунктов стоит галочка, это значит, что соответствующая панель выведена на экран (или, как еще говорят, что соответствующий пункт меню "включен"). Чтобы убрать панель, снова выберите нужный пункт — и панель исчезнет вместе с галочкой. Такие пункты меню, меняющие свое состояние на противоположное при выборе, называют выключателями. Вместо выбора пунктов Insert и Properties вы можете нажать "горячие" комбинации клавиш <Ctrl>+<F2> и <Ctrl>+<F3> соответственно.

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

Если вам нужно скрыть на время все панели, чтобы без помех просмотреть открытую Web-страницу, выберите пункт Hide Panels в меню Window или одноименный пункт в меню View. Этот пункт работает как выключатель, т. е. при первом выборе он скрывает все панели, а при втором — снова выводит их на экран. Вы также можете нажать клавишу <F4> — это проще и быстрее, чем лезть в меню.

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

закрыть панель, выбрав пункт Close Panel Group;

увеличить размеры панели так, чтобы она заняла весь экран компьютера по вертикали, выбрав пункт Maximize Panel Group;

поместить выбранную группу или отдельную панель в другую группу, выбрав пункт Group <название группы или панели> with и далее в появившемся на экране подменю — пункт, соответствующий имени нужной группы панелей;

переименовать группу, выбрав пункт Rename Panel Group. После этого вам остается ввести новое имя в поле ввода Panel Group Name диалогового окна Rename Panel Group (рис. 2.11) и нажать кнопку ОК для его сохранения или Cancel — для отмены;

поместить выбранную панель в новую группу, выбрав пункт Group <название группы или панели> with и далее в появившемся на экране подменю — пункт New Panel Group;

получить справку по этой панели, выбрав пункт Help.

Чтобы вывести на экран нужный инструментарий, выберите соответствующий пункт-выключатель подменю Toolbars меню View. Всего таких пунктов два — по числу инструментариев:

пункт Standard выводит главный инструментарий;

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

Рис. 2.11. Диалоговое окно Rename Panel Group

Вы также можете воспользоваться контекстным меню инструментария. Щелкните правой кнопкой мыши по любому инструментарию — и увидите небольшое меню, содержащее те же самые пункты.

Работа с Web-страницами

А теперь рассмотрим основные принципы работы с Web-страницами в Dreamweaver. И заодно поговорим об окне документа.

Работа в окне документа

Итак, как же в Dreamweaver создаются Web-страницы?

Очень просто. Точно так же, как создаются обычные текстовые документы в вашем любимом текстовом редакторе, например, Microsoft Word. Вы просто набираете нужный текст, форматируете его и, наконец, сохраняете готовый документ в виде файла. Только в случае Dreamweaver этот документ будет иметь расширение htm или html и может быть сразу же помещен на Web-сервер.

Но прежде чем писать текст, нужно создать сам документ. Для этого вам необходимо выбрать пункт New в меню File или нажать комбинацию клавиш <Ctrl>+<N>. Более детально процесс создания новой Web-страницы описан в главе 3.

Также вы можете открыть для правки уже существующую Web-страницу. Для этого выберите пункт Open в меню File или нажмите комбинацию клавиш <Ctrl>+<O>. После этого вам останется выбрать нужный файл в стандартном диалоговом окне открытия файла и нажать кнопку открытия.

Внимание!

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

Текст в Dreamweaver набирается точно так же, как и в любом текстовом редакторе (Блокнот и WordPad, поставляющиеся в составе Windows, Microsoft Word и др.). В этом все Windows-приложения, работающие с текстом, похожи друг на друга. И это правильно — зачем обескураживать пользователя!

Мы не будем учить вас азам работы с текстом. Если вы пользовались текстовым редактором (а вы наверняка им пользовались), то без труда разберетесь с Dreamweaver. Благо разработчики сделали все, чтобы Dreamweaver ничем не отличался от других Windows-приложений. Мы просто кратко напомним вам некоторые приемы работы с текстом, которые вам скорее всего пригодятся.

Разумеется, текст набирается с помощью клавиатуры (а вы как думали?). При этом Dreamweaver самостоятельно разобьет текст на строки. Если вам нужно создать новый абзац, нажмите клавишу <Enter>, Текстовый курсор, т. е. мигающая вертикальная черточка, показывающая место, где будет появляться набираемый вами текст, может перемещаться во всех направлениях с помощью клавиш-стрелок. Также вы можете "листать" текст, нажимая клавиши <PgUp> и <PgUp>, мгновенно перемещаться к началу и концу строки клавишами <Ноmе> и <End>. Чтобы быстро переместиться в начало или конец документа, нажмите, соответственно, комбинацию клавиш <Ctrl>+<Home> или <Ctrl>+<End>. Вы также можете устанавливать текстовый курсор в произвольное место, просто щелкнув там мышью.

Если вы ошиблись, то всегда можете удалить неправильно введенный текст, воспользовавшись клавишами <Backspace> и <Del>. Первая при нажатии удаляет символ, находящийся слева от текстового курсора, и идеально подходит для удаления только что введенного неправильного символа. Вторая удаляет символ, находящийся справа от текстового курсора.

Кроме того, в окне документа Dreamweaver доступны такие операции, как перемещение ("вырезание"), копирование текста в буфер обмена Windows и последующая его вставка в место, где находится текстовый курсор. Это может быть очень полезно, если вам нужно переместить фрагмент текста с места на место или поместить похожие фрагменты текста в разные места документа.

Чтобы выделить текст, просто щелкните в начале нужного фрагмента мышью и, не отпуская левой кнопки, протащите ее до конца, после чего отпустите кнопку. Вы также можете поставить текстовый курсор в начало необходимого фрагмента и воспользоваться комбинацией клавиш <Shift>+ +<Клавиша-стрелка в нужную сторону> для его выделения. Чтобы выделить остаток строки до конца, нажмите клавиши<Shift>+<End>, до начала — <Shift>+<Home>, остаток документа до конца -- <Ctrl>+<Shift>+<End>, остаток документа до начала — <Ctrl>+<Shift>+<Home>. Вы также можете выделить строку, щелкнув мышью слева от нее, а если вы протащите мышь, не отпуская ее левую кнопку, то будут выделены сразу несколько строк. Чтобы выделить сразу весь текст, нажмите клавиши <Ctrl>+<A>.

Для выделения родительского тега вы можете выбрать пункт Select Parent Tag меню Edit или нажать комбинацию клавиш <Ctrl>+<Shift>+<<>. Для выделения первого дочернего тега выберите пункт Select Child меню Edit или нажмите комбинацию клавиш <Ctrl>+<Shift>+<>>.

Чтобы вырезать выделенный фрагмент, нажмите комбинацию клавиш <Ctrl>+<X> или выберите пункт Cut меню Edit; чтобы скопировать его -комбинацию клавиш <Ctrl>+<C> или пункт Сору того же меню. Для вставки текста в нужное место расположите там текстовый курсор и нажмите комбинацию клавиш <Ctrl>+<V> или выберите пункт Paste меню Edit. Вы также можете стереть выделенный текст, нажав клавишу <Del> или выбрав пункт Clear все того же незаменимого меню Edit.

Если вам необходимо переместить выделенный фрагмент текста с места на место, вовсе не нужно беспокоить меню Edit — вы можете просто "взять" и перетащить его мышью. Чтобы скопировать этот фрагмент в другое место, перетащите его мышью при нажатой клавише <Ctrl>.

Щелкнув правой кнопкой мыши по тексту, вы получите доступ к контекстному меню, где тоже содержатся пункты Cut, Copy и Paste.

Если же вы сделали что-то не так, воспользуйтесь пунктом Undo <команда> меню Edit или нажмите комбинацию клавиш <Ctrl>+<Z>.

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

Однако Dreamweaver, как и любая специализированная программа, имеет свои особенности. И сейчас мы их рассмотрим.

В нижней части окна документа расположена строка статуса. Многие Windows-приложения используют строку статуса для отображения нужной .пользователю информации. Но строка статуса окна документа Dreamweaver не только отображает информацию, но и выполняет несколько очень важных функций. Она разделена на три секции, каждую из которых мы рассмотрим отдельно.

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

Рис. 2.12. Секция тегов

Предположим, что нам нужно выделить весь текст, помеченный тегом <i> (курсивное начертание). (В нашей первой странице — это название Web-обозревателя Microsoft Internet Explorer.) Для этого сделаем следующее. Поместим текстовый курсор куда-либо на текст "Microsoft Internet Explorer", после чего секция тегов примет вид, показанный на рис. 2.12. Далее нажмем кнопку <i> этой секции. Весь текст "Microsoft Internet Explorer" будет выделен, т. к. он помечен тегом <I>.

Если теперь щелкнуть кнопку <р>, будет выделен весь текст, помеченный тегом <Р>, т. е. весь абзац. Осталось проверить, как работает кнопка <body>. Если ее щелкнуть, будет выделена вся страница (все содержимое тега <BODY>).

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

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

Рис. 2.13. Секция размера окна с открытым списком

Самая правая секция показывает примерный размер созданной вами Web-страницы и время, в течение которого она будет загружаться с Web-сервера. Это секция размера страницы (рис. 2.14). Она отображает два значения в виде дроби: в числителе ее находится размер страницы, округленный до килобайт, а в знаменателе — скорость загрузки, округленная до секунд. При этом скорость загрузки, по которой вычисляется это время, задается в настройках программы и по умолчанию равна 28,8 Кбит/с (не самый быстрый на сегодняшний день модем).

Рис. 2.14. Секция размера страницы

Закончив работу со страницей, вы должны ее сохранить. Для этого выберите пункт Save в меню File или нажмите комбинацию клавиш <Ctrl>+<S>. Если вы сохраняете страницу в первый раз, на экране появится стандартное диалоговое окно сохранения файла; введите имя файла страницы и нажмите кнопку сохранения. В противном случае Dreamweaver просто сохранит страницу.

Dreamweaver, как и большинство других программ-редакторов, позволяет вам также сохранить страницу в другом файле под другим именем. Это может быть полезно, если вы хотите создать множество примерно одинаковых страниц. Выберите пункт Save As в меню File или нажмите комбинацию клавиш <Ctrl>+<Shift>+<S>. На экране появится стандартное диалоговое окно сохранения файла; введите имя файла страницы и нажмите кнопку сохранения.

Выбрав пункт Print Code все того же меню File или нажав комбинацию клавиш <Ctrl>+<P>, вы сможете распечатать HTML-код страницы. На экране появится стандартное диалоговое окно печати; задайте необходимые параметры и нажмите кнопку запуска печати.

Все хорошее рано или поздно кончается. Готовую страницу нужно, в конце концов, закрыть, чтобы освободить системные ресурсы компьютера. Проще всего сделать это, щелкнув кнопку закрытия соответствующего окна документа (не главного окна программы!). Также можно выбрать пункт Close меню File или нажать комбинацию клавиш <Ctrl>+<W>. После этого страница будет закрыта, но сам Dreamweaver останется открытым.

Сам же Dreamweaver можно закрыть, щелкнув кнопку закрытия его главного окна. При этом он спросит вас, сохранять ли отредактированные, но еще не сохраненные страницы, которые вы к этому времени открыли. Если же вы предпочитаете пользоваться меню, то выберите пункт Exit меню File или нажмите комбинацию клавиш <Ctrl>+<Q> или <Alt>+<F4>.

Три режима отображения Web-страницы

Окно документа Dreamweaver может показывать редактируемую Web-страницу в трех режимах отображения. Сейчас мы их рассмотрим.

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

Но как получить доступ к HTML-коду? Ведь по умолчанию Dreamweaver предлагает вам редактировать Web-страницу в режиме WYSIWYG.

Очень просто!

Взгляните на инструментарий документа (лучше всего держать его открытым). Слева видны три кнопки (рис. 2.15). Они переключают три доступных режима отображения (перечислены в порядке справа налево): страница, страница и HTML-код и только HTML-код.

Рис. 2.15. Кнопки переключения режимов отображения Web-страницы

На рис. 2.15 крайняя правая кнопка нажата. Она включает режим отображения, предлагаемый Dreamweaver по умолчанию, — режим отображения страницы. В этом режиме вы можете работать с Web-страницей в режиме WYSIWYG.

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

Рис. 2.16. Режим отображения страницы и кода

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

Рис. 2.17. Режим отображения кода

Ну, а левая кнопка включает режим отображения кода (рис. 2.17).

Для переключения режимов отображения вы также можете воспользоваться пунктами Design, Code and Design и Code меню View, соответственно. При выборе одного из этих пунктов слева от его названия появляется галочка, показывающая, что данный пункт и, следовательно, данный режим включены. Такие пункты называются переключателями,

Кроме того, вы можете быстро переключаться между режимом отображения страницы и режимом кода, выбрав пункт Switch Views меню View или нажав комбинацию клавиш <Ctrl>+<'>.

Работа с кодом HTML

А теперь давайте выясним, какие средства Dreamweaver предлагает тем, кто знаком с языком HTML.

Прежде всего, вы можете переключиться в режим отображения исходного кода HTML, нажав крайнюю левую кнопку из показанных на рис. 2.13. Также вы можете воспользоваться пунктом Code или Switch View меню View.

Кроме того, создатели Dreamweaver предусмотрели возможность просмотра исходного HTML-кода в панели, называемой Code Inspector (рис. 2.18). Чтобы вызвать ее на экран, выберите в меню Window пункт Others и в появившемся на экране подменю — пункт Code Inspector. Но проще всего нажать клавишу <F10>.

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

Рис. 2.18. Панель Code Inspector

Пусть, например, нужно немного поправить значения атрибутов какого-либо тега. Для этого поставьте текстовый курсор в его содержимое и выберите в контекстном меню пункт Edit Tag Code <тег>. На экране появится окно мини-редактора, показанное на рис. 2.19. Введите в него нужный код и нажмите клавишу <Enter>, чтобы Dreamweaver принял все изменения, или <Esc>, чтобы отказаться от них.

Рис. 2.19. Окно мини-редактора HTML

Как видите, окно мини-редактора позволяет вам править только теги, а не их содержимое. Исправить содержимое тегов можно и в окне документа.

Если вам нужно вставить в текст Web-страницы какой-либо тег с содержимым, поставьте в это место текстовый курсор и выберите в контекстном меню пункт Insert Tag. На экране также появится окно мини-редактора, на этот раз пустое (рис. 2.20).

Вы спросите: а что это за странный список, в котором перечислены непонятные слова? Это одна из замечательных возможностей, появившаяся в Dreamweaver MX — подсказка по коду. Как только вы поставите где-либо в коде HTML значок <, как Dreamweaver отобразит список, в котором перечислены все теги HTML. Если вы нажмете на клавиатуре какую-либо буквенную клавишу, в списке появятся только теги, начинающиеся на эту букву. Чтобы выбрать нужный тег в списке, выделите его и нажмите клавишу <Enter> или просто щелкните по нему мышью.

Рис. 2.20. Окно мини-редактора при вставке нового тега

Введите в окно мини-редактора весь код, который вы хотите вставить (рис. 2.21), и нажмите клавишу <Enter>. Он будет помещен на то самое место, где стоит текстовый курсор.

Рис. 2.21. Окно мини-редактора с новым кодом HTML, который будет вставлен в страницу

И, наконец, вы можете "завернуть" любой выделенный фрагмент текста в тег HTML. Для этого выделите нужный текст и выберите в контекстном меню пункт Wrap Tag. Введите в появившемся окне нужный тег со всеми нужными атрибутами и нажмите клавишу <Enter>. Дело сделано!

Внимание!

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

Чтобы удалить тег, в который "завернут" какой-либо фрагмент текста, поставьте в него текстовый курсор и выберите в контекстном меню пункт Remove Tag <тег>. Dreamweaver удалит этот тег, но оставит его содержимое, которое "вольется" в содержимое родительского тега.

Если вы пока еще плохо знаете теги HTML, не беда. Dreamweaver MX идет вам на помощь, предоставляя несколько новых инструментов для правки уже существующих и вставки новых тегов, которые наверняка понравятся неопытным пользователям.

Прежде всего, это диалоговое окно правки тега. Выделите целиком содержимое какого-либо тега, воспользовавшись секцией тегов строки статуса (рис. 2.12). После этого выберите пункт Edit Tag <тег>. На экране появится диалоговое окно, показанное на рис 2.22.

Рис. 2.22. Диалоговое окно правки тега

Пользуясь этим окном и своим знанием английского, вы можете в удобной форме задавать значения различных атрибутов выбранного тега. В левом списке выберите одну из категорий атрибутов, и в правой части окна появятся соответствующие элементы управления. Вы также можете щелкнуть "потайную" кнопку Tag Info, выглядящую как обычная надпись, после чего в окне правки тега появится краткая подсказка по выбранному тегу. Закончив правку, нажмите кнопку ОК, чтобы сохранить все изменения, или кнопку Cancel, чтобы отказаться от них.

Если вы хотите исправить тег, держа страницу перед глазами, или просто не любите лишние диалоговые окна, воспользуйтесь панелью Tag Inspector. Чтобы вызвать ее на экран (если ее еще нет на экране), выберите пункт Tag Inspector в меню Window или просто нажмите клавишу <F9>. Сама эта панель показана на рис. 2.23.

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

Кстати, нажав расположенную в правом нижнем углу панели Tag Inspector кнопку Edit <тег> Tag, вы вызовете уже знакомое вам диалоговое окно правки тега. Эта кнопка показана на рис. 2.24.

Рис. 2.23. Панель Tag Inspector

Рис. 2.24. Кнопка Edit <тег> Tag

Рис. 2.25. Кнопка Tag Chooser

С помощью другого диалогового окна вы можете поместить на страницу какой-либо тег или "завернуть" в него выделенный фрагмент текста. Для этого служит диалоговое окно Tag Chooser. Чтобы его вызвать, вам нужно выполнить одно из следующих действий:

выбрать пункт Tag меню Insert или нажать комбинацию клавиш <Ctrl>+<E>;

выбрать пункт Insert Tag контекстного меню окна документа (действует только тогда, когда окно документа находится в режиме отображения HTML-кода);

нажать кнопку Tag Chooser, находящуюся на вкладке Common панели объектов (рис. 2.25).

Само окно Tag Chooser показано на рис. 2.26.

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

Рис. 2.26. Диалоговое окно Tag Chooser

Сразу после нажатия кнопки Insert на экране появится уже знакомое вам диалоговое окно правки тега, в котором вы сможете задать значения атрибутов выбранного тега. Сам тег будет вставлен только после нажатия кнопки ОК окна правки тега. Заодно Dreamweaver сам переключит окно документа в режим отображения страницы и кода, чтобы вы могли видеть, где вставленный вами тег начинается и где он заканчивается.

Если вы щелкнете по кнопке Tag Info диалогового окна Tag Chooser, в этом окне появится краткое описание выбранного вами тега. Учтите, что при этом оба списка "съежатся", чтобы освободить место.

Если вы перед вызовом окна Tag Chooser выделите какой-либо фрагмент текста вместо того, чтобы просто поставить в какое-то его место текстовый курсор, то выделенный текст будет "завернут" во вновь вставленный тег. Как видите, Dreamweaver ведет себя достаточно "разумно", если так можно сказать об обычной программе.

Заметьте, что после вставки любого тега окно Tag Chooser останется на экране, так что вы сможете сразу же вставить новый тег. Еще обратите внимание, что это диалоговое окно является немодальным, т. е. оно не препятствует доступу к любым другим окнам программы. (Абсолютное большинство других диалоговых окон Dreamweaver являются модальными, запрещающими пользователю доступ к остальным окнам программы, пока данное диалоговое окно не будет закрыто.) Чтобы закрыть окно Tag Chooser, нажмите кнопку Close.

Поиск и замена текста

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

Выберите пункт Find and Replace меню Edit или нажмите комбинацию клавиш <Ctrl>+<F>. На экране появится окно Find and Replace, показанное на рис. 2.27. Обратите внимание, что это также немодальное диалоговое окно, т. е. вы не потеряете доступ к окну документа.

Рис. 2.27. Диалоговое окно Find and Replace

Всплывающее меню Search For позволяет задать, в каком тексте нужно произвести поиск: в тексте страницы (пункт Text), в "сыром" HTML-коде (Source Code), в тексте страницы, но более хитрым образом (Text (Advanced)), или в тексте заданного тега (Specific Tag). Если выбраны первые два пункта, то искомый текст (подстрока) вводится в текстовое поле Search For, а текст, на который нужно заменить искомый, — в текстовое поле Replace With.

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

Рис. 2.28. Диалоговое окно Find and Replace (выбран режим "хитрого" поиска)

Если же вы выберете пункт Text (Advanced), в окне поиска и замены кое-что добавится (рис. 2.28). Это будет новая группа элементов управления, состоящая из двух кнопок и двух раскрывающихся списков, позволяющих задать, внутри какого тега будет искаться тот или иной текст.

Раскрывающийся список, находящийся справа, задает тег, в котором будет искаться текст. А раскрывающийся список, находящийся слева, задает, где будет производиться поиск: внутри этого тега (пункт Inside Tag) или вне его (Not Inside Tag). Если вам нужно искать текст внутри (или вне) нескольких тегов, то, щелкая кнопку со значком плюса, вы можете добавить сколько угодно таких групп элементов управления. Соответственно, кнопка со значком минуса удаляет группу элементов, в которой она расположена.

Но самые мощные возможности Dreamweaver предоставляет для поиска и замены тегов, для чего достаточно выбрать пункт Specific Tag всплывающего меню Search For. В окне поиска и замены появится группа элементов управления для задания параметров поиска и еще одна группа — для задания параметров замены (рис. 2.29).

Искомый тег выбирается в раскрывающемся списке, расположенном правее всплывающего меню Search For. Если вы хотите искать любой тег, выберите пункт [any tag].

В группе поиска самый левый раскрывающийся список задает, какие теги будут искаться:

With Attribute — содержащие атрибут, заданный в следующем раскрывающемся списке (в порядке слева направо). В третьем раскрывающемся списке задается знак сравнения ("равно", "больше", "меньше" или "не равно"), а в четвертом — значение искомого атрибута или [any value], если нужно найти атрибут, имеющий любое значение;

Рис. 2.29. Диалоговое окно Find and Replace (выбран режим поиска тега)

Without Attribute — не содержащие атрибут, заданный в следующем раскрывающемся списке;

Containing — содержащие внутри себя заданный текст или тег. Если необходимо найти текст, выберите пункт Text во втором всплывающем меню, а в поле ввода справа от него введите сам текст. Если нужно найти тег, выберите пункт Specified Tag во втором раскрывающемся списке, а в третьем — выберите сам тег;

No Containing — не содержащие внутри себя заданный текст или тег;

Inside Tag — находящиеся внутри тега, заданного во втором раскрывающемся списке;

No Inside Tag — не находящиеся внутри тега, заданного во втором раскрывающемся списке.

Кнопки со знаками "плюс" и "минус" вам уже знакомы. Так что сразу перейдем к следующей группе элементов управления.

Внимание!

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

Раскрывающийся список Action задает действие, производимое над найденным тегом. А сделать с ними можно следующее:

Replace Tag & Contents — заменить найденный тег на другой, введенный в области редактирования, расположенной правее;

Replace Contents Only — заменить содержимое найденного тега на другое, введенное в области редактирования, расположенной правее;

Remove Tag & Contents — удалить найденный тег вместе с содержимым;

Strip Tag — удалить тег, но оставить содержимое;

Change Tag — изменить тег на другой, выбранный в расположенном правее раскрывающемся списке, но оставить прежнее содержимое;

Set Attribute — установить атрибут, выбранный во втором раскрывающемся списке (в порядке слева направо), со значением, заданным в комбинированном списке То;

Remove Attribute — удалить атрибут, выбранный во втором раскрывающемся списке;

Add Before Start Tag — добавить перед начальным тегом текст, введенный в текстовом поле;

Add After End Tag — добавить после конечного тега текст, введенный в текстовом поле;

Add After Start Tag — добавить после начального тега текст, введенный в текстовом поле;

Add Before End Tag — добавить перед конечным тегом текст, введенный в текстовом поле.

Флажок Match Case предписывает Dreamweaver учитывать регистр символов при поиске. По умолчанию он отключен, т. е. регистр символов при поиске не учитывается.

Флажок Ignore Whitespace Differences предписывает Dreamweaver считать несколько расположенных подряд пробелов за один. По умолчанию он включен.

Флажок Use Regular Expressions включает обработку регулярных выражений. Регулярные выражения — это своего рода шаблоны, по которым Dreamweaver будет искать и заменять сложные последовательности символов. Мы особо опишем их использование — настолько это мощное средство.

Но как теперь запустить сам поиск (замену)?

Вы можете щелкнуть на кнопке Find Next — и первое вхождение найденной последовательности символов (подстроки) будет выделено в окне документа. Чтобы найти следующую подстроку, опять щелкните на кнопке Find Next или, если окно Find and Replace уже закрыто, нажмите клавишу <F3> (при активном окне документа) или выберите пункт Find Next в меню Edit. Аналогично работает кнопка Replace: при ее нажатии выделяется первая найденная подстрока, а при последующих нажатиях ранее выделенная подстрока заменяется заданной и выделяется следующая найденная подстрока. После того как все подстроки будут заменены, Dreamweaver выдаст окно-предупрежение с указанием, сколько замен было произведено.

Чтобы заменить сразу все подстроки, нажмите кнопку Replace All.

Вы также можете сразу найти все вхождения подстроки в тексте страницы, нажав кнопку Find All. Конечно, Dreamweaver сразу не сможет все их выделить — это не сможет сделать ни одно Windows-приложение. Поэтому он использует другой подход. На экране появляется панель Search (рис. 2.30), содержащая список, в котором представлены все найденные подстроки. При двойном щелчке мышью на любой его позиции в окне документа будет выделена соответствующая подстрока.

Рис. 2.30. Панель Search

А теперь давайте представим себе такую ситуацию. Вы задали какое-то сложное условие поиска (и, возможно, замены) и теперь хотите сохранить его для дальнейшего использования или на память потомкам. Как это сделать? Очень просто: Dreamweaver предоставляет вам и такую возможность. Просто щелкните на кнопке с изображением дискеты в окне Find and Replace, после чего на экране появится стандартное диалоговое окно сохранения файла Windows, где вы сможете задать имя вновь создаваемого файла или выбрать для перезаписи уже существующий. А чтобы загрузить сохраненное ранее в файле условие, щелкните на кнопке с изображением папки; на экране появится стандартное диалоговое окно открытия файла Windows, где вы сможете выбрать нужный файл условия.

Использование регулярных выражений

Как и было обещано, сейчас мы познакомимся с регулярными выражениями. Чем же они могут нам помочь?

Представим себе такую ситуацию. Вам нужно найти в исходном HTML-коде страницы интернет-адрес, причем любой. Как вы это сделаете? Правильно, введете в поле Search For окна поиска и замены (см. рис. 2.27) символы www. И найдете... кое-что. Но не все. Ведь интернет-адреса совсем не обязательно начинаются на "www". Что в этом случае искать? Точку? Но точек в тексте и так хватает, и далеко не всякая из них является частью интернет-адреса.

В этом случае нам на помощь придет регулярное выражение. Оно будет иметь следующий вид:

"http://.+\..{2,3}"

Ну и как оно вам? Больше похоже на бессмысленный набор символов, в котором с трудом угадывается что-то знакомое. Признаться, автор и сам сначала с трудом в них разбирался. Ему помогала вот такая табличка — см. табл. 2.1.

Таблица 2.1. Регулярное выражение поиска интернет-адресов






Символы

Описание



"http:// Первая кавычка и начало интернет-адреса

. Точка обозначает любой символ

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

\. Обычная точка. Ее предваряет обратная косая черта, т. к. точка — служебный символ

. Опять любой символ

{2,3} Предыдущий символ должен повторяться от двух до трех раз

" Закрывающая кавычка




Вы можете попробовать это регулярное выражение в действии. Только не забудьте выбрать в раскрывающемся списке Search For пункт Source Code.

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

С помощью регулярных выражений вы можете выполнять поиск самых разных слов и словосочетаний. Например, регулярное выражение совпадает со словами "multimedia" и "hypermedia", но не совпадает со словом "media". Литерал | задает поиск либо первой, либо второй подстроки (в нашем случае либо "multi", либо "hyper"), а скобки здесь использованы для того, чтобы отделить друг от друга две части выражения. Если бы мы их не поставили, получилось бы выражение

"(multi | hyper) media" "multi | hypermedia"

совпадающее со словами "multi" и "hypermedia". А регулярное выражение

"/b.+@.+\.com"

ищет адреса электронной почты на серверах, чей интернет-адрес оканчивается на "com". Здесь вам все знакомо, за исключением литерала /b, обозначающего границу слова. То есть точка задает поиск любого символа, а /b. — только символа, с которого начинается слово (пробел или возврат каретки). А как насчет вот такого выражения:

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

Таблица 2.2. Регулярное выражение поиска последнего знака препинания абзаца






Символы

Описание



[\.!\?]



$

Один из возможных символов: точка, восклицательный и вопросительный знаки. Заметьте, что вопросительный знак предварен обратной косой чертой, т. к. иначе Dreamweaver воспринял бы его как литерал


Этот литерал обозначает конец строки






Хорошо, при поиске подстрок регулярные выражения очень нам помогают. Но помогут ли они при замене?

Еще как!

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

"/b(.+@.+\.)com"

Постойте, но зачем мы взяли часть его в скобки? Ведь скобки используются для группировки, отделения части регулярного выражения от других частей. Здесь же ничего отделять не нужно — все и так работает.

А вот зачем.

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

"$1"

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

"$1ru"

Здесь все совсем просто. Мы берем первую подстроку и добавляем к ней окончание "ru". Наберите в окне документа несколько произвольных адресов электронной почты и проверьте наши выражения. Они работают.

Напоследок самое время привести полный список всех литералов регулярных выражений. Они перечислены в табл. 2.3.

Таблица 2.3. Литералы регулярных выражений






Литерал

Описание



^ Начало строки

$ Конец строки

* Предыдущий символ должен встретиться ноль, один или больше раз

+ Предыдущий символ должен встретиться один или больше раз

9 Предыдущий символ должен встретиться ноль или один раз

. Любой символ за исключением символа новой строки

х|у Должен встретиться символ х или символ у

{n} Предыдущий символ должен встретиться точно n раз

{m, n} Предыдущий символ должен встретиться от п до m раз

[abc] Должен встретиться один из символов, перечисленных в квадратных скобках. Можно задавать диапазоны символов, например [a-d] заменяет [abed]

[^аbс] Должен встретиться любой символ, кроме перечисленных в квадратных скобках. Можно задавать диапазоны символов

\b Граница слова (пробел или возврат каретки)

\B Не граница слова

\d Любая цифра. Эквивалентен [0-9]










Любой символ, кроме цифры. Эквивалентен [^0-9]

\f Прогон листа

\n Перевод строки

\r Возврат каретки

\s Любой пробельный символ (пробел, табуляция, прогон страницы или перевод строки)

\S Любой символ, кроме пробела

\t Табуляция

\w

Любой алфавитно-цифровой символ или подчеркивание. Эквивалентен

[a-zA-Z0-9_]



\W Любой символ, кроме алфавитно-цифрового и подчеркивания. Эквивалентен [^а-zА-z0-9 ]





Просмотр Web-страницы

Хоть Dreamweaver в режиме просмотра страницы и представляет ее почти в таком виде, как она будет показана в Web-обозревателе, все же часто возникает необходимость увидеть ее в самом Web-обозревателе. Дело в слове "почти": все-таки Dreamweaver не может учесть многие тонкости конкретной программы просмотра. И такая возможность предусмотрена: не закрывая окна документа, вы можете вызвать любой из установленных на компьютере Web-обозревателей и оценить окончательный вид своего творения, так сказать, "в родной обстановке".

Microsoft Internet Explorer и Netscape Navigator, установленные на компьютере, Dreamweaver обнаруживает и заносит в свои настройки сам, сразу при инсталляции. Если же вы установили какую-то из этих программ уже после установки Dreamweaver или пользуетесь другой программой для просмотра Web-страниц (например, Opera или Mozilla), вам придется соответственно изменить настройки Dreamweaver, чтобы добавить ее в список установленных программ просмотра. Как это сделать, будет рассказано в конце главы.

Примечание

Профессиональные Web-дизайнеры обычно устанавливают на своих компьютерах несколько программ Web-обозревателей: Internet Explorer, Navigator, Opera и Mozilla разных версий. Каждую разрабатываемую Web-страницу они тестируют на всех этих программах на предмет совместимости друг с другом. Но, поскольку последние версии всех этих программ отображают Web-страницы более-менее одинаково (за исключением, может быть, Opera), вы можете ограничиться Internet Explorer 6.0, который установлен по умолчанию на любой компьютер с операционной системой Windows. (Если, конечно, в ваши задачи не входит разработка страниц под экзотические программы Web-обозревателей.)

Давайте просмотрим в Internet Explorer нашу страничку, загруженную сейчас в окно документа. Для этого нажмем клавишу <F12>. На экране появится окно Web-обозревателя, знакомое нам по рис. 1.1.

Есть еще два способа вызова Web-обозревателя для просмотра редактируемой страницы. Первый из них — использование кнопки Preview/Debug in Browser инструментария документа. Эта кнопка показана на рис. 2.31.

Рис. 2.31. Кнопка Preview/Debug in Browser

Как видите, при нажатии этой кнопки появляется меню, предлагающее несколько пунктов. В данный момент нас интересует пункт Previews in iexplore. При выборе его, как вы уже поняли, открывается окно Internet Explorer, где будет загружена разрабатываемая вами страница.

Второй способ вызвать Web-обозреватель — это использовать подменю Preview in Browser меню File. В нем вы увидите пункт iexplore, аналогичный вышеописанному. Выбрав его, вы получите тот же самый результат.

Вызов справки

В процессе работы с Dreamweaver вам может понадобиться — и наверняка понадобится! — помощь. Как и все серьезные Windows-приложения, Dreamweaver снабжен мощной справочной системой. Для ее вызова вам нужно просто нажать клавишу <F1> или выбрать пункт Using Dreamweaver в меню Help. Окно справочной системы показано на рис. 2.32.

В левой части окна справки расположен древовидный список тем. Сами же статьи отображаются справа. Вы можете щелкнуть мышью по названию темы, чтобы вывести нужную статью, развернуть или свернуть "ветвь" "дерева" тем.

Также предусмотрен поиск статей по ключевым словам. Для этого выберите вкладку Поиск, введите в поле ввода нужное ключевое слово и нажмите кнопку Разделы. После этого в списке, занимающем нижнюю половину вкладки, появятся заголовки найденных статей. Вам остается только выбрать нужную и нажать кнопку Показать. Выбранная статья отобразится справа.

Рис. 2.32. Окно справочной системы Dreamweaver

В составе Dreamweaver также поставляется полное руководство по HTML от издательства "O'Relly". Его содержимое отображается в особой панели Reference (рис. 2.33). Поищите эту панель в доке — она обычно открыта по умолчанию. Если же вы успели ее закрыть, нажмите кнопку Reference в инструментарии документа (рис. 2.34). Вы также можете выбрать пункт Reference меню Window или нажать комбинацию клавиш <Shift>+<F1>. При этом в окне руководства будет отображена справка по тегу, на котором находится курсор в окне редактирования HTML-кода.

Пользуясь панелью Reference, вы можете получить справку о каждом атрибуте любого тега HTML. Например, давайте узнаем побольше о теге <в> (как помните, он делает заключенный в него текст жирным). Выберите в раскрывающемся списке Tag название этого тега — и в панели появится его описание.

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

Рис. 2.33. Панель Reference

Рис. 2.34. Кнопка Reference

Настройка Dreamweaver

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

Вся работа будет происходить в многофункциональном окне настройки программы, состоящем из множества вкладок с разными элементами управления. Чтобы вызвать его, выберите пункт Preferences меню Edit или нажмите комбинацию клавиш <Ctrl>+<U>. В левой части окна настройки отображен список вкладок, а в правой появляется само содержимое выбранной вкладки.

Учим русский

Выберем в списке вкладок пункт New Document. Окно настройки примет вид, показанный на рис. 2.35. Итак, что же здесь изображено?

Рис. 2.35. Вкладка New Document диалогового окна Preferences

Но прежде чем начать разговор о русификации Dreamweaver, немного поговорим об особенностях национального Web-творчества. А именно о кодировках русского языка и борьбе с ними.

Вероятно, вы знаете, что каждый символ, который может быть введен с клавиатуры и отображен на экране, имеет уникальный номер, называемый кодом символа. Совокупность таких кодов вместе с описанием, какой код какому символу соответствует, образует кодировку. Каждая кодировка имеет свое наименование, например 1251 или КОИ-8.

Поскольку любой язык использует свой набор символов, для каждого языка кодировки, как правило, различны. (Исключение — некоторые западноевропейские языки.) Но на этом путаница с кодировками не кончается. Дело в том, что разные операционные системы используют различные кодировки. Например, западноевропейская версия Windows использует кодировку 1250, русская - 1251, американская версия MS-DOS— 437, а русская -866 (она же ISO-8859-5). Ну, американская с западноевропейской — бог с ними, обойдемся без иноземцев! Однако русских кодировок, как видите, уже две. А если добавить сюда еще кодировку, используемую русской версией операционной системы UNIX — КОИ-8, и русской версией компьютеров Macintosh — MacCyrillic, кодировок станет уже четыре. И это только главные, на памяти автора существовали еще штуки четыре менее распространенных кириллических кодировок ("основная" кодировка ГОСТ, "болгарская", "американская", "югославская" и еще какие-то). Кроме того, в последнее время появилась кодировка Unicode, поддерживающая ВСЕ имеющиеся на Земле языки. Настоящая тирания кодировок!..

Чем все это грозит? А вот чем. Вы, наверно, пытались открыть текстовый документ, созданный в Блокноте, в Norton Commander. Видели, что при этом получается — текст абсолютно нечитаем. А все потому, что русские кодировки 866 (MS-DOS) и 1251 (Windows) не совпадают! В них одному и тому же символу присвоены разные коды!!!

Каков же выход?

Выхода нет. Можно надеяться только на то, что какая-то из кодировок станет стандартом и постепенно вытеснит конкурентов. Пока что на роль такого (негласного) стандарта претендует 1251, хотя интернетчики старого поколения, пользующиеся UNIX-совместимыми системами, "пропихивают" КОИ-8. Во всяком случае, сейчас большинство Web-страниц, имеющихся в русском сегменте Сети, написано в кодировке 1251.

Здесь стоит упомянуть еще два момента. Современные программы Web-обозревателей поддерживают все доступные сейчас кодировки и корректно их распознают. Это первое. Второе: Web-сервер (точнее, его администратор) может потребовать, чтобы публикуемые вами странички были закодированы в какой-либо конкретной кодировке, например в КОИ-8. Это стоит иметь в виду, когда вы будете выбирать кодировку для своего Web-творения.

Когда вы создаете в Dreamweaver Web-страницу, используемая в ней кодировка прописывается в ее заголовке с помощью особого тега <МЕТА>. Например, так:

<МЕТА HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"></HEAD>

Как вы поняли, эта страница создана с использованием кодировки Windows, т. е. 1251. Подробнее о теге <МЕТА> мы поговорим далее в этой книге.

Итак, какие же кодировки поддерживает Dreamweaver? (Имеются в виду, конечно же, русские кодировки.) Все они перечислены в табл. 2.4 и задаются с помощью раскрывающегося списка Default Encoding.

Таблица 2.4. Кодировки русского текста, поддерживаемые Dreamweaver






Обозначение

Описание



ISO-8859-5 КОИ8 (KOI-8R) MacCyrillic Windows-1251

Русская версия MS-DOS
Русские версии UNIX-совместимых систем
Русская версия ОС Macintosh
Русские версии Windows, начиная от версии 3.0



Western (Latin1) Это не русская кодировка, она включена в этот список только для справки. Поддерживает западноевропейские языки




Какую же кодировку выбрать? Ответ прост. Если вы не связаны какими-либо специфическими требованиями администратора Web-сервера, на котором будет опубликован ваш сайт, смело выбирайте пункт Windows-1251. В противном случае выберите ту кодировку, которую требует сервер. Если вы создаете странички на английском языке, ваш выбор — Western (Latinl).

Теперь переключитесь на вкладку Fonts (рис. 2.36). На этой вкладке вы сможете настроить шрифты, которыми будет отображаться текст вашей страницы. В списке Font Settings выберите шрифтовой набор, который будет использован для отображения ваших Web-страниц. Здесь альтернатива еще проще: если текст русский — выбирайте Cyrillic, если английский — Western (Latinl).

Что касается начертаний и размеров шрифтов, используемых для отображения текста, автор может только посоветовать, но никак не порекомендовать. Автор предпочитает в качестве пропорционального шрифта (раскрывающийся список Proportional Font) Arial, в качестве моноширинного (Fixed Font) — Lucida Console, а для отображения исходного HTML-кода в редакторе кода (Code Inspector) — тоже Lucida Console. Размеры шрифтов (раскрывающийся список Size) автор обычно ставит равным 10 пунктам (малый размер, Small). Но, еще раз повторим, что это дело вкуса.

А теперь еще одна важная деталь. К сожалению, все программы имеют ошибки, даже самые лучшие из них. Dreamweaver в этом случае не исключение. Из-за ошибки он некорректно открывает Web-страницы, в которых не прописана с помощью тега <МЕТА> используемая в них кодировка. Для того чтобы вразумить его, нам придется сделать следующее.

Прежде всего, закройте Dreamweaver. Далее откройте в Проводнике или в другом диспетчере файлов папку, в которой у вас установлен Dreamweaver. Обычно это папка Program Files/Macromedia/Dreamweaver MX. В ней вы увидите папку Configuration. Откройте в ней подпапку Encodings. В этой подпапке находится файл EncodingMenu.xml. В этом файле перечислены все поддерживаемые Dreamweaver кодировки.

Рис. 2.36. Вкладка Fonts диалогового окна Preferences

Ниже приведен фрагмент этого файла, в котором перечисляются русские кодировки, интересующие нас:

<mm:encoding name="Cyrillic (ISO-8859-5)" charset="iso-8859-5"

fontgroup="Cyrillic" winfontcharset=204 macfontscript=7

filename="iso88595.xml"/>

<mm:encoding name="Cyrillic (KOI8-R)" charset="KOI8-R"

fontgroup="Cyrillic" winfontcharset=204 macfontscript=7

filename="KOI8R.xml"/>

<mm:encoding name="Cyrillic (MacCyrillic)" charset="x-mac-cyrillic"

fontgroup="Cyrillic" winfontcharset=204 macfontscript=7

filename="MacCyrillic.xml"/>

<mm:encoding name="Cyrillic (Windows-1251)" charset="windows-1251"

fontgroup="Cyrillic" winfontcharset=204 macfontscript=7

filename="Win1251.xml"/>

Кстати, данные в этом файле записаны в формате XML. Dreamweaver понимает этот формат и очень часто использует его для сохранения конфигурационных данных.

Дело в том, что из-за ошибки Dreamweaver использует для представления текста страниц с непрописанной кодировкой ту, которая встретится ему первой. В данном случае это кодировка MS-DOS — ISO-8859-5. Нам нужно поместить на первое место кодировку 1251. Для этого исправьте файл EncodingMenu.xml так:

<mm:encoding name="Cyrillic (Windows-1251)" charset="windows-1251"

fontgroup="Cyrillic" winfontcharset=204 macfontscript=7

filename="Winl251.xml"/>

<mm:encoding name="Cyrillic (ISO-8859-5)" charset="iso-8859-5"

fontgroup="Cyrillic" winfontcharset=204 macfontscript=7

filename="iso88595.xml"/>

<mm:encoding name="Cyrillic (KOI8-R)" charset="KOI8-R"

fontgroup="Cyrillic" winfontcharset=204 macfontscript=7

filename="KOI8R.xml"/>

<mm:encoding name="Cyrillic (MacCyrillic)" charset="x-mac-cyrillic"

fontgroup="Cyrillic" winfontcharset=204 macfontscript=7

filename="MacCyrillic.xml"/>

После этого сохраните этот файл и закройте его. Теперь можете запускать Dreamweaver — он станет корректно открывать все Web-страницы.

Настраиваем скорость интернет-соединения

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

Выберите в окне настроек вкладку Status Bar. На экране появится вкладка настройки строки статуса (рис. 2.37). Среди всех элементов управления, размещенных на ней, нас интересует только раскрывающийся список Connection Speed, в котором выбирается скорость соединения в килобитах в секунду. Выберите нужную вам скорость или введите ее вручную.

Добавляем программы просмотра Web-страниц

Если на вашем компьютере установлена одна программа Web-обозревателя, настройка закончена, и вы можете нажать кнопку ОК. Если же таких программ у вас несколько (например, Microsoft Internet Explorer и Netscape Navigator), то вы, скорее всего, захотите добавить вторую из них в список Dreamweaver, чтобы впоследствии просматривать в ней разрабатываемые Web-страницы. Как это сделать, сейчас объясним.

Рис. 2.37. Вкладка Status Bar диалогового окна Preferences

Выберем вкладку Preview in Browser. To, что вы увидите, показано на рис. 2.38.

В списке Browsers перечислены все программы просмотра, которые смог найти Dreamweaver при установке. Сейчас там всего одна строка: iexplore. Но мы исправим это положение.

Нажмите кнопку со знаком "плюс", расположенную выше списка. На экране появится окно ввода сведений о программе просмотра, показанное на рис. 2.39.

Здесь все просто. В поле ввода Name вводится имя программы, которое будет появляться в списке и меню Dreamweaver. Это имя желательно сделать более вразумительным, чем малопонятное "iexplore". В поле ввода Application вводится путь доступа к исполняемому файлу программы. Но т. к. вы вряд ли помните его наизусть, нажмите кнопку Browse, выберите нужный файл в стандартном диалоговом окне открытия файла и нажмите кнопку открытия.

А что делают флажки Primary Browser и Secondary Browser? Вот на них стоит остановиться подробно.

Рис. 2.38. Вкладка Preview in Browser диалоговогоокна Preferences

Рис. 2.39. Окно сведений о программе просмотра

Dreamweaver позволяет вам из всех занесенных в его список программ просмотра выбрать двоих "любимчиков". Этих "любимчиков" вы сможете впоследствии вызывать нажатием одной клавиши или комбинацией клавиш. Один из них станет первичным (primary) и будет вызываться клавишей <F12> (по умолчанию это Internet Explorer), а второй — вторичным (secondary), и "отвечать" за него будет комбинация клавиш <Ctrl>+<F12>. Как вы уже поняли, флажок Primary Browser задает первичного "любимчика", а Secondary Browser — вторичного. Остается только добавить, что из этих флажков может быть включен только один, т. е. программа просмотра может быть только первичным или только вторичным "любимчиком" либо не является таковым вообще.

Закончив ввод данных о новой программе просмотра, нажмите кнопку ОК. Внесенная вами программа добавится в список Browsers.

Как вы уже заметили, флажки Primary Browser и Secondary Browser имеются также в окне настройки. Это позволит вам изменить статус программы просмотра, не открывая окна параметров: просто выделите в списке необходимую строку и включите или отключите нужный флажок. Кнопка Edit позволит вам изменить сведения о программе просмотра; при ее нажатии на экране появится окно параметров. Кнопка со знаком "минус", расположенная выше списка Browsers, позволит вам удалить ненужную программу просмотра. Но будьте осторожны: программа удаляется из списка сразу же, без всякого предупреждения!

Добавляем внешний HTML-редактор

Всем хорош Dreamweaver. И Web-страницы позволяет редактировать, и до HTML-кода добраться несложно. Однако иногда возникает необходимость во внешнем HTML-редакторе. Например, если нужно сделать что-то такое, чего Dreamweaver не поддерживает (да-да, может быть и так), или просто немного поработать в привычном HTML-редакторе. Как это можно сделать?

Во-первых, просто запустить необходимую программу из меню Пуск и открыть в ней нужный файл. Это удобно, если вы прибегаете к внешнему HTML-редактору изредка.

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

Переключитесь на вкладку File Types/Editors диалогового окна настроек (рис. 2.40). В поле ввода External Code Editor введите путь и имя файла программы внешнего редактора. Но проще всего будет щелкнуть кнопку Browse и выбрать нужный файл в появившемся на экране диалоговом окне открытия файла Windows.

Какую программу лучше всего использовать в качестве внешнего HTML-редактора? Здесь все зависит от ваших вкусов. Можно использовать какой-либо простейший текстовый редактор для редактирования "сырого" HTML-кода: Блокнот или его более мощный аналог — Notepad+, доступный по адресу http://dimonius.da.ru, а можно пользоваться старым добрым Arachno-philia. Также можно работать со сложным визуальным Web-редактором, например FrontPage Express, поставляемым стандартно с Microsoft Internet

Explorer. (Кстати, некоторые вещи, специфичные для Internet Explorer, лучше делать во FrontPage Express.) В общем, никто не ограничивает вас в выборе внешнего HTML-редактора по своему вкусу.

Рис. 2.40. Вкладка File Types / Editors диалогового окна Preferences

По окончании настройки Dreamweaver нажмите кнопку ОК, чтобы сохранить сделанные установки. Конечно, возможности настройки, предлагаемые этой программой, очень велики, но мы не будем о них рассказывать. Все необходимые сведения вы можете получить из интерактивной справки. Мы рассказали только о тех настройках, без которых вам будет трудно работать с Dreamweaver.

Что дальше?

Выяснив, что есть что в Dreamweaver, можно приступать к созданию наших первых Web-страничек.

В следующей главе мы создадим первую, главную и самую простенькую Web-страницу. На ней не будет ничего, кроме форматированного текста и нескольких гиперссылок. Итак, начнем!

Глава 3. Начинаем с текста

Создание новой Web-страницы

Работа с текстом

Ввод текста

Форматирование абзацев

Форматирование отдельных символов

Вставка специальных символов

Использование HTML-стилей

Работа с гиперссылками

Создание обычных гиперссылок

Создание почтовых гиперссылок

Другие гиперссылки

Создание гиперссылок на FTP-серверы. Новости (USENET)

Использование "якорей"

Общие свойства Web-страницы

Дополнительные возможности Dreamweaver

Использование цветовых схем

Вставка и чтение комментариев

Вставка даты

"Чистка" HTML-кода

Проверка совместимости HTML-кода

Что дальше?

ГЛАВА 3.

Начинаем с текста

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

Здесь мы будем работать с текстом — самым важным составляющим современных Web-страниц. Представьте, что вы работаете в вашем любимом текстовом редакторе, и — вперед!

Создание новой Web-страницы

Но сначала нужно создать новую Web-страницу.

Как вы помните, для этого нужно выбрать пункт New в меню File или нажать комбинацию клавиш <Ctrl>+<N>. После этого появится диалоговое окно New Document (рис. 3.1).

Dreamweaver MX поддерживает создание Web-страниц на основе шаблонов. Шаблон — это особым образом подготовленная и сохраненная Web-страница, на которой уже имеются некоторые элементы, которые вам могут понадобиться (сведения об авторских правах, название и т. п.). Вам останется только добавить основной текст и немного исправить оформление — и готовая профессионально оформленная страница у вас в руках. Если вам нужно быстренько "сляпать" страничку с каким-то текстом, шаблоны — настоящая находка.

Однако настоящее творчество не терпит суеты. Поэтому давайте начнем с чистого листа и, не торопясь, создадим свой Web-шедевр.

Взгляните на рис. 3.1. Вы видите, что слева расположен список Category, где вы выбираете категорию шаблонов. Сами шаблоны, относящиеся к выбранной категории, перечислены в списке Basic Page. А внешний вид выбранного шаблона во многих случаях можно просмотреть в расположенной справа панели предварительного просмотра.

Рис. 3.1. Диалоговое окно New Document

Итак, нам нужен "пустой" шаблон. Выберем в списке Category пункт Basic Page, а в списке Basic Page — пункт HTML, после чего нажмем кнопку ОК. На экране появится пустое окно документа. Новая Web-страница создана.

Работа с текстом

Здесь мы опишем работу с текстом в окне документа Dreamweaver на примере нашей первой Web-страницы.

Ввод текста

Вот и наступила торжественная минута! Сейчас мы наберем наш первый текст в окне документа Dreamweaver (рис. 3.2).

Набрав текст, сразу же сохраним его в файле под именем 3.1.htm. И поместите ее в отдельную папку — так будет проще управляться со всем нашим Web-хозяйством.

Рис. 3.2. Наш первый текст

Вы уже знаете, что одна из Web-страниц на Web-сервере задается в качестве страницы по умолчанию. Также вы знаете, что такая страница обычно носит имя default или index (и расширение htm или html). Но в данном случае мы пренебрегли этим соглашением, хотя наша первая страница так и просится быть страницей по умолчанию. Давайте назовем ее 3.1.htm — таким образом, мы не запутаемся в дальнейшем во множестве разнокалиберных страниц, названных как бог на душу положит. Не беспокойтесь по поводу нарушения соглашений — это ненадолго.

Итак, мы создали первую нашу Web-страницу... Ах да, мы же совсем забыли о названии! Помните название, задаваемое тегом <TITLE>, которое не отображается в окне Web-обозревателя, но выводится в его заголовке. Кроме того, это название помещается в списке "истории" Web-обозревателя, где содержатся названия и адреса всех посещенных в течение некоторого времени страниц. Давайте зададим его для удобства будущих посетителей сайта. Тем более что это делается очень просто: наберите его в поле ввода, находящемся в инструментарии документа (рис. 3.3).

Рис. 3.3. Поле ввода названия Web-страницы в инструментарии документа

Сохраним нашу страницу еще раз. И посмотрим на нее критически. Чего ей не хватает?

Конечно, вы уже посетили много Web-сайтов. И вы видели, как красочно они оформлены. По сравнению с ними наша первая страничка выглядит не просто бледно — она совсем никак не выглядит. Давайте приведем ее в пристойный вид.

Форматирование абзацев

Прежде всего, давайте сделаем нашей странице нормальный "кричащий" заголовок. (Имеется в виду не HTML-заголовок, а обычный заголовок, как у газеты.) Первой строкой как раз набрано "Здравствуйте" — она прекрасный кандидат в заголовки.

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

Пункт Paragraph этого списка форматирует текст как обычный абзац (отмечаемый тегом <Р>). Пункты Heading 1, ..., Heading 6 позволяют превратить его в заголовок, соответственно, первого, второго уровня и т. д. Пункт Preformatted превращает абзац в текст фиксированного формата, где форматирование задано не тегами HTML, а как в обычном тексте: отступы создаются пробелами, а разбиение на абзацы — символами возврата каретки и перевода строки. Это может быть очень полезно при выкладывании в Сеть больших текстовых документов, созданных в старых текстовых редакторах, без сложного HTML-форматирования.

Рис. 3.4. Раскрывающийся список форматов абзаца, находящийся в редакторе свойств

Рис. 3.5. Созданный нами заголовок

Примечание

Заголовки создаются парными тегами <нп>, где л — число от 1 до 6. Текст фиксированного формата задается парным тегом <PRE>.

Поставим текстовый курсор на строку "Здравствуйте" и выберем в меню форматов пункт Heading 1 — это наилучшим образом подходит для приветствия. Получившийся результат показан на рис. 3.5.

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

Если же вы предпочитаете не отрывать пальцы от клавиатуры, можете задать формат заголовка комбинацией клавиш <Ctrl>+<n>, где <n> — одна из клавиш <1>, ..., <6>. Формат обычного абзаца можно задать, нажав комбинацию клавиш <Ctrl>+<Shift>+<P>.

Теперь давайте выровняем заголовок по центру. В этом нам помогут кнопки выравнивания редактора свойств (рис. 3.6).

Рис. 3.6. Кнопки выравнивания, расположенные в редакторе свойств

Эти кнопки задают выравнивание соответственно (порядок перечисления слева направо):

по левому краю;

по центру;

по правому краю;

выравнивание по обоим краям (полное выравнивание).

Внимание!

Полное выравнивание поддерживается только новыми версиями Web-обозревателей.

Одновременно может быть нажата (включена) только одна из этих кнопок либо ни одной. (В последнем случае задается так называемое выравнивание по умолчанию, как правило, по левому краю.) Такие кнопки называются кнопками-переключателями, по аналогии с пунктами-переключателями меню.

Итак, снова установим текстовый курсор на заголовок и нажмем кнопку выравнивания по центру. На рис. 3.7 показано, что у нас получится в этом случае.

Рис. 3.7. Центрированный заголовок

Аналогичного результата вы можете достигнуть, воспользовавшись подменю Align меню Text или аналогичным подменю контекстного меню. Пункт-переключатель Left задает выравнивание по левому краю, Center — по центру, Right — по правому краю, a Justify — полное выравнивание. Также вы можете нажать комбинацию клавиш <Сtrl>+<Аll>+<Shift>+<клавиша>, где <клавиша> — <L>, <C>, <R> или <J>, соответственно.

Примечание

Выравнивание задается значением атрибута ALIGN тегов <р> и <Hn>. Доступны значения left, center, right или justify. Что они означают, вы уже знаете.

Теперь давайте как-нибудь выделим последнюю строку со сведениями об авторских правах. Можно поставить текстовый курсор в ее начало и нажать клавишу <Enter>, чтобы вставить между этой строкой и остальным текстом дополнительную пустую строку. А можно поступить по-другому.

Взгляните на кнопки, показанные на рис. 3.8. Эти кнопки позволяют установить или убрать отступ слева у абзаца. Левая кнопка уменьшает (убирает) отступ, а правая — увеличивает.

Рис. 3.8. Кнопки задания отступа абзаца, находящиеся в редакторе свойств

Давайте поставим курсор мыши на последнюю строку текста и нажмем кнопку увеличения отступа. Результат показан на рис. 3.9. Вы можете еще раз нажать эту кнопку для увеличения отступа или левую кнопку, чтобы уменьшить отступ.

Рис. 3.9. Строка с отступом

Аналогичный результат дают пункты Outdent и Indent меню Text или подменю List контекстного меню. Вы также можете нажать комбинацию клавиш <Ctrl>+<Shift>+<]> для увеличения отступа и <Ctrl>+<Shift>+<[> — для его уменьшения.

Примечание

Отступ задается парным тегом <BLOCKQUOTE>.

Теперь обратим внимание на список тем, доступных на сайте. (Из строк этого списка потом будут сделаны гиперссылки, указывающие на соответствующие страницы.) И вспомним, что "обычные" текстовые редакторы поддерживают создание нумерованных и маркированных списков. Пункты нумерованных (упорядоченных) списков, как вы знаете, обозначаются порядковыми номерами, а пункты маркированных (неупорядоченных) списков -какими-либо значками. Давайте и мы создадим такой список.

Для этого, прежде всего, выделите все строки, которые войдут в список. Всего их три.

Для того чтобы преобразовать выделенные строки в список, опять воспользуемся кнопками редактора свойств. Они показаны на рис. 3.10. Левая кнопка создает маркированный список, а правая — нумерованный. В данный момент времени может быть нажата только одна кнопка либо ни одной; в последнем случае абзац возвращается к своему обычному виду.

Рис. 3.10. Кнопки создания списков, расположенные в редакторе свойств

Нажмите левую кнопку. Созданный нами маркированный список показан на рис. 3.11.

Рис. 3.11. Маркированный список

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

Таблица 3.1. Пункты подменю List






Пункт

Описание



None
Unordered List Ordered List
Definition List

Обычный абзац текста
Маркированный список
Нумерованный список
Список определений. Каждая нечетная строка становится как бы термином, требующим разъяснения, а каждая четная — этим самым разъяснением






Кроме того, вы получаете возможность изменить некоторые дополнительные параметры списка. Для этого нажмите кнопку List Item на панели редактора свойств (рис. 3.12). На экране появится диалоговое окно List Properties (рис. З.1З). Давайте рассмотрим это окно подробнее.

Рис. 3.12. Кнопка доступа к дополнительным свойствам списков

Рис. 3.13. Диалоговое окно List Properties

Раскрывающийся список List Type позволяет задать тип списка. Здесь доступны следующие позиции:

Bulleted List — маркированный список;

Numbered List — нумерованный список;

Directory List — список папок, визуально похож на маркированный список;

Menu List — список-меню, визуально опять же похоже на маркированный список.

Если выбран первый или второй пункт, становятся доступными другие элементы управления.

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

Bullet — кружок с заливкой;

Square — квадратик;

[Default] — маркер по умолчанию, обычно кружок с заливкой.

Если же выбран нумерованный список, доступны:

Number — арабские цифры;

Roman Small — малые римские цифры;

Roman Large — большие римские цифры;

Alphabet Small — малые латинские буквы;

Alphabet Large — большие латинские буквы;

[Default] — нумерация по умолчанию, обычно арабские цифры.

Кроме того, если выбран нумерованный список, доступно поле ввода Start Count, где вы сможете ввести номер, с которого начнется нумерация строк списка.

Все эти настройки относились к списку в целом. В нижней половине окна расположена группа элементов управления List Item, затрагивающая только ту строку списка, на которой находится текстовый курсор. В эту группу входят раскрывающийся список New Style и поле ввода Reset Count To, аналогичные раскрывающемуся списку Style и полю ввода Start Count верхней части окна.

Закончив настройку свойств, нажмите кнопку ОК для сохранения установок или Cancel — для отказа от них.

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

Примечание

Списки задаются парными тегами <ul> (маркированный), <оl> (нумерованный), <DIR> (список папок) и <MENU> (меню). Между этими тегами помещаются отдельные строки, задаваемые тегом <li>. Удивительно, но у тега <li> нет пары!

Форматирование отдельных символов

Итак, мы научились форматировать целиком абзацы текста. Теперь поговорим, что можно сотворить с отдельными символами текста.

Все текстовые редакторы, например Microsoft Word или поставляемый в составе Windows WordPad, позволяют менять начертание и размер шрифта текста, делать его жирным, курсивным или подчеркнутым, а также менять его цвет. Все это доступно и в Dreamweaver. Нужно только иметь в виду, что возможности HTML по форматированию текста сильно ограничены существующими стандартами.

Ладно, к делу.

Начнем с самого простого. Попытаемся сделать некоторые фрагменты текста нашей страницы жирными и курсивными. И помогут нам в этом две кнопки изменения начертания, показанные на рис. 3.14.

Рис. 3.14. Кнопки изменения начертания шрифта

Соответственно, левая (В) кнопка позволяет сделать шрифт жирным, а правая (I) — курсивным. Обе эти кнопки могут быть нажаты или отжаты независимо, т. е. текст может быть простым, жирным, курсивом или жирным курсивом.

Выделим слова "Иван Иванович Иванов" и нажмем кнопку В. Текст станет жирным. Теперь выделим полностью последнюю строку (со сведениями об авторских правах) и нажмем кнопку I. Последняя строка станет курсивной. Полученный результат можно увидеть на рис. 3.15.

Рис. 3.15. Жирный текст и курсивная строка

Вместо нажатия кнопки В вы можете выбрать пункт-выключатель Bold в подменю Style меню Text или контекстного меню. В том же подменю существует пункт Italic — аналог кнопки /. Вы также можете нажимать комбинации клавиш <Ctrl>+<B> и <Ctrl>+<!> соответственно.

А вот чтобы включить или вьючить подчеркивание текста линией, вам все равно придется воспользоваться пунктом-выключателем Underline подменю Style меню Text или контекстного меню. Ни кнопки, ни комбинации клавиш для этого не предусмотрено.

Вы могли заметить, что в подменю Style много пунктов. Давайте их рассмотрим.

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

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

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

Давайте же продолжим изучение подменю Style. В нем мы видим пункт-выключатель Strikethrough, включив который мы сделаем выделенный фрагмент текста зачеркнутым. Зачеркивание текста выполняется опять же с помощью тега физического форматирования, который мы рассмотрим чуть ниже.

А остальные пункты подменю Style задают именно логическое форматирование. В табл. 3.2 приведены все эти пункты и их краткие описания, а на рис. 3.16 — примеры текста, отформатированные с использованием соответствующих пунктов этого подменю. Вы можете сами сделать такой пример и поэкспериментировать с разными стилями текста; сохраните его в файле 3.2.htm.

Таблица 3.2. Пункты логического форматирования подменю Style






Пункт

Описание



Teletype Текст, выведенный устройством вывода компьютера ("телетайп")

Emphasis Важный текст

Strong Очень важный текст. Имеет большее значение, чем текст, отформатированный через Emphasis










Code Используется для обозначения в тексте фрагментов исходного кода программы на каком-либо языке программирования (команд, имен переменных, ключевых слов и т. п.)

Variable Используется для обозначения в тексте имен переменных программы на каком-либо языке программирования

Sample Вывод какой-либо программы

Keyboard Текст, который пользователь должен ввести с клавиатуры

Citation Цитата

Definition Термин, встречающийся в тексте первый раз




Рис. 3.16. Примеры различного форматирования текста с помощью пунктов подменю Style

В табл. 3.3 перечислены теги, вставляемые в HTML-код пунктами подменю Style.

Таблица 3.3. Теги, вставляемые в HTML-код пунктами подменю Style






Пункт

Пара тегов



Bold <в>. . .</в>

Italic <I>. . .</I>










Underline <u>. . .</u>

Strikethrough <s>. . .</s>

Teletype <TT>. . .</TT>

Emphasis <EM>. . .</EM>

Strong <STRONG>. . .</STRONG>

Code <CODE>. . .</CODE>

Variable <VAR>. . .</VAR>

Sample <SAMP>. . .</SAMP>

Keyboard <KBD>. . .</KBD>

Citation <CITE>. . .</CITE>

Definition <DFN>. . .</DFN>




Теперь давайте зададим шрифт, которым набран наш текст. Делается это с помощью двух раскрывающих списков, расположенных в редакторе свойств. Разумеется, Dreamweaver предоставляет в ваше распоряжение также соответствующие пункты меню и комбинации клавиш. Для смены шрифта используется раскрывающийся список, показанный на рис. 3.17, а для смены размера шрифта— список, показанный на рис. 3.18. Но для того, чтобы понять, что же там отображается, нужно дать некоторые разъяснения.

Рис. 3.17. Раскрывающийся список смены шрифта

Рис. 3.18. Раскрывающийся список задания размера шрифта

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

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

Посмотрите еще на рис. 3.17. В этом раскрывающемся списке присутствуют все стандартные шрифты, определенные HTML. Вы можете выбрать любой из них. Если же вас не устраивает ни один, то вы можете просто ввести туда название любого другого шрифта, установленного на вашем компьютере, например Impact, и нажать клавишу <Enter>. Естественно, вся ответственность за правильное отображение текста на клиентском компьютере в данном случае ляжет на вас.

Пункт Default Font этого списка сбрасывает шрифтовые установки, точнее, возвращает их к установкам родительского элемента.

Соответственно, в раскрывающемся списке размеров шрифта (рис. 3.18) отображены все доступные размеры шрифтов. Их семь, как уже и говорилось. Кроме того, в этом меню присутствуют пункты вида +n и —n, где n -число от 1 до 7. Выбор этих пунктов позволяет соответственно увеличить или уменьшить размер шрифта на п ступеней относительно шрифта родительского элемента. Пункт None позволит вернуть размер шрифта к установкам родительского элемента.

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

Давайте выделим имя нашего героя и увеличим его на два размера. Для этого выберем в раскрывающемся списке размера шрифта пункт +2. Полученный результат показан на рис. 3.19. Не правда ли, гипотетический Иван Иванович страдает манией величия?

Теперь сменим шрифт. Но не какого-то выделенного фрагмента, а ВСЕГО текста. Для этого выделим весь текст в окне. Конечно, для этого можно выбрать пункт Select All меню Edit или нажать комбинацию клавиш <Ctrl>+<A>. Но поступим по-другому. Вы, конечно, помните, что окно документа содержит так называемую секцию тегов (см. рис. 2.12). Давайте щелкнем мышью по кнопке <body>, чтобы выделить все содержимое страницы (содержимое тега <BODY>, как вы уже догадались).

Рис. 3.19. Увеличенный шрифт

Теперь, когда все содержимое документа выделено, выберите нужный шрифт. Для примера выберем пункт Verdana, Arial, Helvetica, sans-serif -любимый шрифт автора. (Конечно, автор не собирается навязывать вам свои эстетические вкусы — это просто для примера.) Результат показан на рис. 3.20.

Рис. 3.20. Web-страница после изменения шрифта

Задать шрифт вы также можете с помощью подменю Font, расположенного в меню Text и контекстном меню. Для смены размера шрифта Dreamweaver предоставляет целых два подменю: Size и Size Change. Оба они располагаются в меню Text. В контекстном меню они объединены в одно подменю Size. Никаких клавишных сочетаний для выполнения этих операций с клавиатуры не предусмотрено.

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

Рис. 3.21. Селектор цвета Dreamweaver

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

Рис. 3.22. Окно выбора цвета селектора цветов

Большую часть этого окна занимает палитра, где, собственно, вы и ищете нужный цвет. При этом в небольшом текстовом поле, расположенном в центре верхней серой полосы окна, высвечивается шестнадцатеричный код цвета, над которым вы в данный момент держите курсор мыши. Это очень удобно: впоследствии вам уже не надо будет долго выбирать цвет из палитры — вы просто введете в поле ввода селектора его код. Если же ни один цвет из палитры вам не подходит, вы можете с помощью того же курсора мыши (имеющего вид пипетки) "взять" необходимый цвет откуда угодно: с рабочего стола, из любого окна, из любого элемента управления. Чтобы закрыть окно выбора цвета, нажмите клавишу <Esc>.

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

родительского элемента). Средняя кнопка вызывает на экран стандартное диалоговое окно выбора цвета. А правая позволит вам переключить режимы палитры выбора цвета. При нажатии на нее на экране появляется дополнительное меню, предлагающее пять режимов:

Color Cubes и Continuous Tone — просто меняют внешний вид палитры;

Windows OS и Mac OS — позволяют выбрать палитру, специфичную для какой-либо из операционных систем, в данном случае Microsoft Windows и Apple Macintosh;

Grayscale — выбирает черно-белую палитру.

Кроме того, это меню содержит еще один, шестой, изначально включенный пункт-выключатель Snap to Web Safe. Зачем он нужен?

Чтобы ответить на этот вопрос, снова поговорим о проблеме межплатформенной совместимости, которую пришлось решать создателям языка HTML и WWW.

Как вы уже знаете, разные компьютерные платформы... да что там! — даже разные компьютеры имеют различные параметры видеоподсистемы. Одни могут отображать всего шестнадцать цветов, а другие — все 16,7 миллиона, что с лихвой перекрывает цветовую разрешающую способность человеческого глаза. Разумеется, при таком богатом множестве компьютерных платформ Web-дизайнеру не стоит и рассчитывать, что все его цвета и оттенки будут отображены правильно везде. Поэтому стандарт HTML определяет так называемую безопасную палитру цветов, которая гарантированно должна отображаться правильно всеми программами на всех компьютерах. Web-дизайнерам рекомендуется придерживаться этой безопасной палитры (хотя никто им не запрещает ее игнорировать). Так вот, пункт Snap to Web Safe, включенный в дополнительное меню окна выбора цвета, и заставляет селектор цветов Dreamweaver "уважать" безопасную палитру и подгонять под нее все выбираемые пользователем цвета.

Примечание

Все цвета из палитр Color Cubes и Continuous Tone являются безопасными, цвета из других палитр — нет. Естественно, если вы выбрали какой-то цвет извне окна выбора цветов, он совсем не обязательно уложится в безопасную палитру.

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

Если вы предпочитаете работать с меню, то для смены цвета шрифта воспользуйтесь пунктом Color меню Text. К сожалению, в этом случае вы не сможете обратиться к селектору цветов — Dreamweaver выдаст вам стандартное диалоговое окно выбора цвета Windows.

Примечание

Задание шрифта и цвета текста достигается с помощью тега <FONT>. . .</FONT>. Этот тег должен содержать один из атрибутов: COLOR, FACE или SIZE, задающих, соответственно, цвет, наименование шрифта и его размер. Как вы уже поняли, это тег физического форматирования.

Совет

Если вы посмотрите на секцию тегов, то увидите, что теги <FONT> вложены в теги <Р> и <LI>, т. е. являются дочерними тегами самого последнего уровня. Это из особенностей HTML: некоторые теги могут быть вложены друг в друга только в определенном порядке.

Что теперь делать? Давайте посмотрим на наш текст и подумаем. Скажем, не слишком ли выделяются слова "Иван Иванович Иванов", набранные огромным жирным шрифтом? Не нужно ли вернуть их к обычному шрифту? Щелкните правой кнопкой мыши где-нибудь на этих словах и выберите в контекстном меню пункт Remove Tag <font>. Dreamweaver тотчас удалит тег, задающий размер шрифта, но оставит его содержимое. Мы уже описывали этот пункт меню в главе 2, так что он должен быть вам знаком.

Вставка специальных символов

Чего нам еще не хватает для полного счастья?

Давайте отделим первый и второй абзацы от остального текста. Конечно, можно вставить пустую строку, но мы поступим лучше. И HTML (вкупе с Dreamweaver) нам в этом поможет.

Поставим текстовый курсор в начало третьего абзаца и нажмем кнопку Horizontal Rule (рис. 3.23), расположенную на вкладке Common панели объектов. Как показано на рис. 3.24, между вторым и третьим абзацами появится разделяющая их горизонтальная линия.

Вы также можете использовать пункт Horizontal Rule меню Insert.

Рис. 3.23. Кнопка Horizontal Rule панели объектов

Рис. 3.24. Горизонтальная линия

Щелкните мышью по горизонтальной линии — она будет выделена целиком. После этого обратите внимание на редактор свойств. Вместо свойств текста и шрифта там будут отображены свойства горизонтальной линии, которые вы, конечно же, можете изменить (рис. 3.25).

Рис. 3.25. Вид редактора свойств при выделенной горизонтальной линии

Давайте подробно опишем все элементы управления редактора свойств, доступные в этом случае:

поле ввода W позволяет задать ширину горизонтальной линии в пикселах или процентах от всей ширины родительского элемента, в данном случае страницы. По умолчанию горизонтальная линия занимает всю ширину страницы. Единица измерения задается в раскрывающемся списке, расположенном справа от поля ввода; доступны пункты pixels (пикселы; этот вариант указан по умолчанию) и %

поле ввода Н позволяет задать толщину горизонтальной линии в пикселах. Значение по умолчанию — 2;

раскрывающийся список Align задает выравнивание линии. Эти установки имеют смысл только в том случае, если ширина линии меньше ширины родительского элемента. Доступны значения: Default (выравнивание по умолчанию; такое же, как у родительского элемента), Left (по левому краю), Center (по центру) и Right (по правому краю);

флажок Shading позволяет включить или отключить "трехмерность" линии. По умолчанию он включен.

Давайте зададим ширину линии, равную 50%. Для этого выберите в раскрывающемся списке единиц измерения проценты (пункт %), введите в поле ввода W число 50 и нажмите клавишу <Enter>. Результат показан на рис. 3.26.

Рис. 3.26. Новый вид горизонтальной линии

Примечание

Горизонтальная линия вставляется в текст с помощью одинарного тега <нк>. Этот тег может содержать атрибуты ALIGN, COLOR, NOSHADE, SIZE и WIDTH, задающие, соответственно, выравнивание, цвет, "трехмерность", толщину и ширину. Заметьте, что, хотя тег <HR> и поддерживает атрибут COLOR, Dreamweaver не позволит вам задать цвет горизонтальной линии в редакторе свойств или как-либо еще. Хотя вы всегда можете отредактировать HTML-код вручную.

Внимание!

Среди атрибутов тега <HR> особняком стоит NOSHADE. Этот атрибут не имеет значения (так называемый атрибут без значения), а просто либо присутствует, либо не присутствует в теге. В первом случае он отменяет "трехмерность" линии, а во втором — разрешает.

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

Сначала выделим слова "Авторские права принадлежат мне," (не забыв и запятую), которые мы заменим значком "©", и удалим. После этого переключимся на страницу Characters панели объектов. Нас интересует кнопка Copyright (рис. 3.27).

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

Поставьте на нужное место текстовый курсор и щелкните эту кнопку. Dreamweaver выведет небольшое предупреждение (рис. 3.28), говорящее о том, что данный символ может не отобразиться корректно в случае использования некоторых кодировок. Закройте его, нажав кнопку ОК. Если вы больше не хотите, чтобы оно выводилось на экран в дальнейшем, перед закрытием включите флажок Don't show me again.

Рис. 3.28. Предупреждение о возможном некорректном отображении специального символа

На рис. 3.29 показан вставленный символ "©". Не забудьте также исправить фамилию нашего персонажа.

Рис. 3.29. Символ "©"

Здесь мы столкнулись с так называемыми специальными символами HTML. Эти символы из соображений все той же совместимости не могут быть просто так вставлены в код HTML, а заменяются либо числовыми кодами, либо мнемоническими обозначениями. В частности, символ "©" обозначается в HTML-коде как &сору;.

Для вставки знака "©" вы также можете воспользоваться пунктом Copyright подменю Special Characters меню Insert.

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

Стоп! Необходимо не просто дописать такую фразу, а как-то отделить ее от собственно сведений об авторских правах. Но как? Можно вставить горизонтальную линию, но тогда последняя строка растянется по вертикали, что будет выглядеть громоздко и некрасиво. Можно нажать клавишу <Enter> и сделать второй абзац, но получается все равно слишком громоздко (видели расстояние между абзацами?). Хотелось бы дописать эту фразу второй строкой, но в том же самом абзаце.

И на этот случай HTML (и Dreamweaver) предлагает решение. Речь идет о так называемом разрыве строк — особом теге, заставляющем все следующие за ним символы переноситься на новую строку. При этом он не создает нового абзаца, что нам и надо.

Поставьте курсор в конец строки со сведениями об авторском праве. После этого нажмите кнопку Line Break (рис. 3.30) на вкладке Characters панели объектов. Курсор тотчас перескочит на новую строку. Допишите нужную фразу. У вас должно получиться то, что изображено на рис. 3.31.

Рис. 3.31. Использование разрыва строк

Вы также можете для вставки разрыва строк использовать пункт Line Break подменю Special Characters меню Insert или — что проще всего — комбинацию клавиш <Shift>+<Enter>.

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

Чтобы этого не было, между словом "это" и тире нужно вставить неразрывный пробел. Что бы ни случилось, Web-обозреватель никогда не будет переносить строку по этому пробелу.

Прежде всего, уберите пробел между словом "это" и тире и поставьте там текстовый курсор. После этого нажмите на вкладке Characters панели объектов кнопку Non-Breaking Space (рис. 3.32). Вот и все.

Рис. 3.32. Кнопка Non-Breaking Space панели объектов

Для вставки неразрывного пробела вы также можете использовать пункт Non-Breaking Space подменю Special Characters меню Insert или сочетание клавиш <Сtrl>+<Shift.>+<Пробел>.

Примечание

Неразрывный пробел — это специальный символ, обозначаемый кодом snbsp;.

Взгляните снова на вкладку Characters панели объектов. Мы описали не все специальные символы, которые можно вставить в документ с ее помощью. В табл. 3.4 описаны все остальные символы.

Таблица 3.4. Специальные символы, доступные на вкладке Characters панели объектов







Символ

Описание

Пункт подменю Special Characters меню Insert



II Левая кавычка Left Quote

II Правая кавычка Right Quote

Длинное тире Em-Dash

Ј Фунт стерлингов Pound

Евро Euro

® Зарегистрированная торговая марка Registered

tm Торговая марка Trademark

Ґ Иена Yen





С помощью кнопки Other Characters (рис. 3.33) можно вставить в документ любой доступный в HTML специальный символ. При нажатии на нее на экране появится диалоговое окно Insert Other Character, показанное на рис. 3.34. Вам необходимо будет щелкнуть по кнопке, соответствующей нужному символу, и нажать кнопку ОК для его вставки или Cancel — для отказа от этого.

Рис. 3.33. Кнопка Other Characters панели объектов

Рис. 3.34. Диалоговое окно Insert Other Character

Для вызова диалогового окна вставки символа вы также можете использовать пункт Other подменю Special Characters меню Insert.

Использование HTML-стилей

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

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

Поищите в доке панель под названием HTML Styles (рис. 3.35). Если ее нет, выберите пункт HTML Styles меню Window или нажмите комбинацию клавиш <Ctrl>+<Fll>.

Рис. 3.35. Панель HTML Styles

Большую часть этой панели занимает собственно список HTML-стилей. Кроме пунктов, задающих определенные вами HTML-стили, там есть еще два: Clear Selection Style и Clear Paragraph Style. Они выполняют одинаковую задачу — удаляют всякое HTML-форматирование фрагмента текста. Но почему их два? И чем они различаются?

Прежде чем дать ответ на этот вопрос, еще немного поговорим о HTML-стилях.

Как и в обычных текстовых редакторах, HTML-стиль Dreamweaver может применяться либо к выделенному фрагменту текста, либо к абзацу целиком; в первом случае он называется стилем символов, а во втором — стилем абзаца. При создании HTML-стиля вы задаете, к чему он будет применен. Так вот, пункт Clear Selection Style удаляет HTML-форматирование выделенного текста, a Clear Paragraph Style — всего абзаца.

Вы можете испытать эти пункты списка в действии. Для этого выделите, скажем, имя нашего героя и выберите пункт Clear Selection Style. Вы увидите, что жирное выделение имени сразу же пропадет. Теперь поставьте текстовый курсор на какой-либо абзац, например на последнюю строку со сведениями об авторских правах, и выберите пункт Clear Paragraph Style. Произойдет то же самое, за тем исключением, что останется отступ. Сделайте дважды операцию отмены (либо выберите пункт Undo меню Edit, либо нажмите комбинацию клавиш <Ctrl>+<Z>), чтобы вернуть все, как было.

Теперь взглянем снова на панель HTML Styles. В ее левом нижнем углу находится флажок автоматического применения стилей Auto Apply. Когда он включен (а он включен по умолчанию), выбираемые в списке HTML-стили применяются сразу же после выбора. Если вы его отключите, то для того, чтобы применить стиль, вам нужно после его выбора в списке щелкнуть кнопку Apply, находящуюся правее этого флажка, выбрать пункт Apply контекстного меню списка стилей или дополнительного меню панели или просто нажать клавишу <Enter>. Это может быть полезно, например, когда вы часто редактируете HTML-стили и не хотите, чтобы выбранный стиль применялся сразу же.

Так как же создавать HTML-стили? Очень просто.

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

Давайте создадим HTML-стиль под названием Имя, представляющий имя автора сайта. Для этого выделим в окне документа текст имени и нажмем в окне HTML-стилей кнопку New Style (рис. 3.36), находящуюся в правом нижнем углу панели. Вы также можете либо выбрать пункт New в дополнительном меню панели, либо выбрать этот же пункт в контекстном меню списка стилей панели. Так или иначе на экране появится диалоговое окно Define HTML Style, показанное на рис. 3.37.

Рис. 3.36. Кнопка New Style панели HTML Styles

Рис. 3.37. Диалоговое окно Define HTML Style

В поле ввода Name вводится имя стиля. Введем сюда слово имя.

С помощью группы переключателей Apply To задается тип HTML-стиля: Selection задает стиль символов, a Paragraph — стиль абзаца. Сейчас включен переключатель Selection, оставим его включенным.

Группа переключателей When Applying позволяет определить, что произойдет, если этот стиль будет применен к фрагменту, уже отформатированному средствами HTML: Add to Existing Style добавляет новое форматирование к существующему, Clear Existing Style удаляет старое форматирование перед добавлением нового. Оставим переключатель Clear Existing Style включенным.

Группа элементов управления Font Attributes задает параметры шрифта. Раскрывающийся список Font задает наименование шрифта, Size — размер, селектор цвета Color позволяет выбрать цвет текста, а кнопки-выключатели В и /делают шрифт жирным и курсивным соответственно. Также доступна кнопка Other, при нажатии которой появляется меню, из которого вы можете выбрать дополнительные виды HTML-форматирования текста (в основном, это теги логического форматирования). Здесь мы также ничего не трогаем.

Закончив, нажимаем кнопку ОК, чтобы сохранить вновь созданный стиль. Кнопка Cancel позволит отказаться от этого, а кнопка Clear сбрасывает все настройки стиля в состояние по умолчанию. Так или иначе, мы создали наш первый HTML-стиль. После этого в списке стилей появится новая строка "Имя". Левее имени стиля мы увидим букву а, обозначающую стиль символов.

Создадим теперь еще один стиль, но на этот раз — стиль абзаца, а именно абзаца со сведениями об авторских правах. И на этот раз, "с нуля". Для этого уберем всякое выделение с текста в окне документа и снова нажмем кнопку New Style панели стилей. В появившемся диалоговом окне Define HTML Style в поле Name введем "Права", включим переключатель Paragraph, включим кнопку-переключатель / и отключим В, а в раскрывающемся списке Size выберем пункт —1.

Как видим, в окне Define HTML Style стала доступна группа элементов управления Paragraph Attributes, задающая форматирование всего абзаца. Раскрывающийся список Format задает формат абзаца (Paragraph, Heading I и т. д.), а три кнопки-переключателя Alignment — выравнивание. Оба эти элементы управления полностью подобны своим "коллегам" из редактора свойств. Ничего здесь трогать пока не будем.

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

Если вам нужно изменить уже созданный стиль, щелкните по нему правой кнопкой мыши и в появившемся контекстном меню выберите пункт Edit. Если флажок Auto Apply отключен, вы также можете выбрать необходимый стиль и выбрать пункт Edit в дополнительном меню панели или просто дважды щелкнуть по нужному стилю. После этого на экране появится уже знакомое вам диалоговое окно Define HTML Style, в котором вы сможете изменить все, что хотите.

Идя удаления ненужного стиля также щелкните по нему правой кнопкой мыши и выберите в контекстном меню пункт Delete. Dreamweaver предупредит вас в особом окне, что стили удаляются безвозвратно; нажмите кнопку ОК, если вы преисполнены решимости избавиться от этого стиля, и кнопку Cancel, если передумали его удалять. Если флажок Auto Apply отключен, вы также можете выбрать нужный (точнее, ненужный) стиль и выбрать пункт Delete в дополнительном меню панели или щелкнуть кнопку Delete Style (рис. 3.38).

Рис. 3.38. Кнопка Delete Style панели HTML Styles

Пункт Duplicate контекстного меню списка стилей и дополнительного меню панели позволит вам создать новый стиль третьим возможным способом: скопировав и слегка изменив существующий стиль. Если вы укажете какой-либо стиль в списке и выберите пункт Duplicate, на экране появится диалоговое окно Define HTML Style, в котором будут подставлены параметры выбранного стиля. Задайте имя для нового стиля, измените нужные параметры и не забудьте нажать кнопку ОК.

Работа с гиперссылками

В главе 1 мы уже говорили о гиперссылках. Пора научиться создавать их в среде Dreamweaver.

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

Создание обычных гиперссылок

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

Но хватит петь дифирамбы Dreamweaver. Давайте попробуем его в настоящем деле! Вставим в текст нашей пока что единственной Web-страницы две гиперссылки, указывающие "вовне" нашего сайта: на "домашний" сайт фирмы Macromedia — создателя Dreamweaver и на почтовый адрес гипотетического Ивана Ивановича. Щелкнув по первой из них, пользователь сможет попасть на сайт http://www.macromedia.com, а щелкнув на второй — написать письмо Ивану Ивановичу. Второй ссылкой мы займемся чуть позже, а пока...

Выделим название фирмы Macromedia и обратим внимание на редактор свойств. Мы сразу заметим большое поле ввода интернет-адреса для гиперссылки (рис. 3.39).

Рис. 3.39. Поле ввода интернет-адреса в редакторе свойств

Все, что нам нужно сделать, — это ввести в него интернет-адрес сайта Macromedia и нажать клавишу <Entcr>. Результат появится сразу (рис. 3.40). Теперь при просмотре в Web-обозревателе пользователь может просто щелкнуть мышью по слову "Macromedia", чтобы перейти на "домашний" сайт этой фирмы.

Вы уже заметили, что после вставки гиперссылки слово "Macromedia" изменило свой цвет на синий и стало подчеркнутым, хотя мы явно не задавали для него никакого HTML-форматирования. Дело в том, что, согласно стандарту HTML, текст-содержимое гиперссылок форматируется особым образом, чтобы его всегда можно было отличить от остального текста. И по умолчанию все ссылки, еще не посещенные пользователем, выделяются синим цветом.

Рис. 3.40. Гиперссылка, указывающая на сайт Macromedia

Для создания гиперссылки из выделенного текста вы также можете воспользоваться пунктом Make Link меню Modify или контекстного меню или нажать комбинацию клавиш <Ctrl>+<L>. После этого на экране появится диалоговое окно Select File, показанное на рис. 3.41. Нужный адрес вводится в поле ввода URL этого окна. Остальные элементы управления лучше пока не трогать — мы рассмотрим их позже, когда будем связывать воедино все Web-страницы нашего сайта. Не забудьте нажать кнопку ОК, чтобы Dreamweaver создал эту гиперссылку.

Рис. 3.41. Диалоговое окно Select File

Просматривая рис. 3.39, вы, вероятно, обратили внимание, что справа от поля ввода интернет-адреса находятся две небольшие кнопки. Кнопка в виде мишени, находящаяся левее, нам пока бесполезна — мы рассмотрим ее, когда будем говорить об управлении сайтом, в главе 6. Кнопка в виде папки, находящаяся правее, позволит вам открыть то же самое диалоговое окно Select File.

Впоследствии вы можете изменить интернет-адрес вашей гиперссылки. Для этого поставьте текстовый курсор на текст гиперссылки, измените адрес и нажмите кнопку <Enter>. Вы также можете воспользоваться пунктом Change Link меню Modify или контекстного меню или нажмите комбинацию клавиш <Ctrl>+<L>. После этого на экране появится все то же незаменимое диалоговое окно Select File, в котором вы сможете изменить интернет-адрес.

Для удаления гиперссылки и превращения ее содержимого в обычный текст воспользуйтесь пунктом Remove Link меню Modify или контекстного меню или нажмите комбинацию клавиш <Ctrl>+<Shift>+<L>.

Отлично! Мы имеем гиперссылку для перехода на сайт Macromedia. Чего еще желать?

Много чего. Например, мы можем сделать так, что при переходе на сайт Macromedia пользователь будет иметь возможность просматривать также и сайт Иванова. Как это сделать? Очень просто: мы откроем сайт Macromedia в новом окне Web-обозревателя.

Поставьте текстовый курсор где-нибудь в тексте гиперссылки и снова посмотрите на редактор свойств. На рис. 3.42 показан раскрывающийся список задания цели гиперссылки.

Рис. 3.42. Раскрывающийся список задания цели гиперссылки, расположенный в редакторе свойств

Этот список содержит четыре пункта, но сейчас полезными для нас будут только два: _blank и _self. Первый из них позволит вывести страницу, на которую указывает гиперссылка, в новом окне Web-обозревателя, а второй — в том же окне. (Вместо того чтобы выбирать второй пункт списка, вы можете просто оставить его содержимое пустым.) В данном случае вам нужно выбрать пункт _blank.

Для задания цели гиперссылки вы также можете воспользоваться подменю Link Target меню Modify или подменю Target Frame контекстного меню. Для этого выберите нужный пункт-переключатель. Пункт Default Frame задает цель по умолчанию.

Примечание

Гиперссылка создается с помощью парного тега <А>, внутри которого помещается текст. Этот тег содержит обязательный атрибут HREF, задающий интернет-адрес назначения. Кроме того, данный тег может включать атрибут TARGET, задающий цель гиперссылки.

Вот мы и сделали первую нашу гиперссылку. Теперь примемся за вторую.

Создание почтовых гиперссылок

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

Давайте вспомним интернет-адрес сайта Macromedia: http://www.macromedia.com и придумаем почтовый адрес, который может быть у нашего гипотетического Web-дизайнера Ивана Иванова:
ivanov@somemail.ru

Немного теории. Почтовый адрес состоит из имени почтового ящика и имени сервера почты, разделенных символом "@" ("коммерческое эт", также известен как "собака", "ухо" или "улитка"). Вы можете провести аналогии между номером абонементного ящика и адресом почтового отделения, где этот ящик находится. Значок "коммерческое эт" - первый признак, что перед нами почтовый адрес.

Согласно стандарту HTML, этот почтовый адрес должен быть записан так: mailto:ivanov@somemail.ru причем между двоеточием после "mailto" и собственно адресом не должно быть пробела.

В последнем абзаце, где говорится об авторских правах, есть имя автора. Из него-то мы и сделаем гиперссылку, указывающую на почтовый адрес. Для этого выделим имя автора и введем почтовый адрес в приведенном выше формате в поле адреса редактора свойств. После нажатия клавиши <Enter> мы получим результат, показанный на рис. 3.43.

Рис. 3.43. Гиперссылка, указывающая на почтовый адрес

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

К несчастью, из-за ошибки в Dreamweaver невозможно отредактировать почтовый адрес, помещенный в гиперссылку. Если вы выберете пункт Change Link в меню Modify (или нажмете комбинацию клавиш <Ctrl>+<L>), то вместо полного адреса в диалоговом окне Select File появится только адрес почтового сервера. Так что вам для этих целей лучше воспользоваться редактором свойств.

Есть еще один способ создать гиперссылку, указывающую на почтовый адрес, более элегантный. Для этого необходимо либо переключиться на страницу Common панели объектов и щелкнуть кнопку Email Link (рис. 3.44), либо выбрать пункт Email Link в меню Insert. В результате этих действий на экране появится небольшое диалоговое окно Email Link, показанное на рис. 3.45.

Рис. 3.44. Кнопка Email Link панели объектов

Рис. 3.45. Диалоговое окно Email Link

В поле Text самим Dreamweaver подставляется текст, который будет являться содержимым гиперссылки — имя, выделенное нами в окне документа. К сожалению, при этом Dreamweaver портит русский текст, превращая его в набор невразумительных черточек и квадратиков, так что вам, скорее всего, придется ввести его заново. В поле E-Mail вам нужно будет ввести почтовый адрес, причем ввести его нужно без "mailto:". После этого остается нажать кнопку ОК для создания гиперссылки или Cancel — для отказа от этого.

Другие гиперссылки

А теперь рассмотрим создание в среде Dreamweaver гиперссылок, указывающих на другие интернет-ресурсы. Вам, должно быть, известно, что, кроме WWW и электронной почты, Интернет предлагает и другие сервисы:

FTP, группы новостей и др. И на каждый из этих ресурсов вы также можете сделать гиперссылку, воспользовавшись Dreamweaver, или по-старинке, в Блокноте.

Мы не будем рассматривать все сервисы, предлагаемые Интернетом. Ограничимся только теми, с которыми вы наверняка столкнетесь.

Создание гиперссылок на РТР-серверы

FTP (File Transfer Protocol — протокол передачи файлов) — один из старейших сервисов Интернета. Он служит для распространения файлов в Сети. Файлы помещаются на диски FТР-сервера, а пользователи с помощью специальных программ FTP-клиентов подключаются к этому серверу и забирают файлы. Примеры FTP-клиентов: популярнейший CuteFTP, WS_FTP и др. Файлы от сервера клиенту передаются по протоколу FTP, давшему название самому этому сервису.

Для подключения к FTP-серверу пользователю нужно указать имя и пароль пользователя. В подавляющем большинстве случаев пользователь использует имя "anonymous" (анонимный доступ) и пароль либо тоже "anonymous", либо свой почтовый адрес, либо пустой пароль (пустая строка ""). Вследствие этого интернет-адрес файла, находящегося на сервере FTP, будет иметь вид:

ftp://username:userpassword@ftp.someserver.ru/pub/utility/util23.zip

Вместо слов "username" и "userpassword" подставляются реальные имя и пароль пользователя. Имя и пароль разделяются двоеточием, а пароль и собственно адрес сервера — уже знакомым вам символом "коммерческое эт". Все это вам нужно набрать опять же в поле ввода интернет-адреса, расположенном в редакторе свойств.

Новости (USENET)

Новости (часто их называют USENET) — довольно молодой сервис Интернета, чем-то похожий на электронную почту. Отличие заключается в том, что все посланные вами в определенную группу новостей сообщения будут доступны всем ее подписчикам, которые смогут присылать на них свои ответы, опять же, доступные всем. Сами группы новостей со всеми их сообщениями организуются на сервере новостей, а передаются они по протоколу NNTP (Network News Transfer Protocol — протокол передачи сетевых новостей). Для чтения новостей служат клиенты новостей, например, Agent; кроме того, новости поддерживаются некоторыми почтовыми клиентами, например, Microsoft Outlook Express.

Каждое сообщение группы новостей имеет свой уникальный номер, по которому к нему можно обратиться. Например:

http://news.someserver.ru/alt.somegroup/16718

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

Использование "якорей"

Теперь самое время узнать еще об одном виде гиперссылок, весьма специфичном. Это так называемые "якоря" (по-английски — anchors). В отличие от других гиперссылок, они не указывают на другую страницу (файл, адрес электронной почты), а помечают некоторый участок текста текущей страницы, чтобы другая гиперссылка могла на него сослаться.

Зачем это нужно? Ну, например, если ваша Web-страница содержит большой текст, разбитый на главы (кто знает, может, вы написали роман и выложили его в Сети), вы можете поместить в начале нее оглавление. При щелчке на пункте оглавления пользователь тотчас перескакивает на соответствующую главу вашего труда. Очень удобно!

"Якорь" не отображается Web-обозревателем. Однако Dreamweaver, чтобы помочь Web-дизайнеру, показывает на странице специальный значок.

Для того чтобы научиться работать с "якорями", создадим небольшую учебную страничку. Ничего особенного на ней нет: просто небольшой фрагмент текста из этой книги, разумеется, отформатированный. После этого напишем в начале страницы небольшое оглавление. И, наконец, сохраним ее в файле 3.3.htm. Получившаяся страничка показана на рис. 3.46.

Теперь вставим на эту страницу первый "якорь", для чего поместим текстовый курсор в начало первого абзаца, после заголовка, и переключимся на страницу Common панели объектов. Кнопка вставки "якоря" Named Anchor показана на рис. 3.47. Нажмите ее. Вы также можете воспользоваться пунктом Named Anchor меню Insert или просто нажать комбинацию клавиш <Ctrl>+<Alt>+<A>.

В результате этих действий на экране появится диалоговое окно Named Anchor, показанное на рис. 3.48. В поле ввода Anchor Name введите имя вставляемого "якоря"; в нашем случае это будет pari. Имена "якорей" должны состоять из латинских букв и цифр, причем первым символом должна быть буква. После этого нажмите кнопку ОК, чтобы вставить "якорь", или Cancel — для отказа от этого.

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

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

Рис. 3.46. Учебная Web-страница, где будут использованы "якоря"

Рис. 3.47. Кнопка Named Anchor панели объектов

Рис. 3.48. Диалоговое окно Named Anchor

Рис. 3.49. Значок "якоря" в окне документа Dreamweaver

Теперь создадим гиперссылку, ссылающуюся на "якорь". Выделим строку "Абзац 1" в оглавлении. Адрес, на который она ссылается, будет выглядеть так: #par1.

Значок "решетки" (#) означает, что перед нами имя "якоря". Введите его в поле адреса редактора свойств и нажмите клавишу <Enter>. Полученная нами гиперссылка ничем не будет отличаться от обычной, указывающей на другую страницу.

Из другой Web-страницы на этот "якорь" можно сослаться, написав перед "решеткой" имя файла этой страницы: 3.3.htm#par1.

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

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

Общие свойства Web-страницы

Ну вот. Теперь у нас есть практически готовая главная Web-страница нашего сайта. Осталось только сделать несколько завершающих штрихов -и работа над ней будет завершена.

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

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

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

Общие свойства страницы задаются в диалоговом окне Page Properties. Вызвать его можно, выбрав пункт Page Properties в меню Modify или контекстном меню или нажав комбинацию клавиш <Ctrl>+<J>. Это окно показано на рис. 3.50.

Рис. 3.50. Диалоговое окно Page Properties

В поле ввода Title вводится название Web-страницы. Вы можете пользоваться полем ввода, расположенным на инструментарии документа (см. рис. 3.3), либо вводить его в названном окне.

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

Аналогично селектор цвета Text позволяет выбрать цвет текста (по умолчанию он черный). Опять же здесь действует правило: текст должен читаться нормально, без излишнего напряжения глаз. Для нашей страницы выберем темно-синий цвет #000066.

Теперь обратим внимание на три селектора Links, Visited Links и Active Links. Они позволяют выбрать цвет гиперссылок, соответственно, непосещенных (по умолчанию синий), посещенных (темно-красный) и активной гиперссылки (ярко-красный), по которой в данный момент щелкает пользователь. И еще раз повторим то же самое правило: пользователю должно быть удобно читать ваш текст. Но в случае гиперссылок добавляется еще одно правило: обычные гиперссылки должны быть хорошо заметны на фоне текста, посещенные ссылки должны выглядеть чуть менее заметно (но все равно выделяться на фоне текста), а активная гиперссылка — максимально ярко. Исходя из этого правила, выберем, соответственно, ярко-синий (#0066FF), тускло-синий (#006699) и ярко-красный (#FFOOOO) цвета.

Мы можем нажать кнопку ОК, чтобы сохранить сделанные установки. Но в данном случае лучше всего воспользоваться кнопкой Apply, которая применяет заданные вами свойства, не закрывая окна Page Properties. Отодвинем окно в сторону и посмотрим на нашу страничку. А что, получилось неплохо!

Поля ввода Left Margin и Top Margin задают расстояния между рамкой окна Web-обозревателя и содержимым Web-страницы, соответственно, слева и сверху. По умолчанию эти значения равны 10 и 15 пикселов. Вы можете задать эти значения равными 0, если хотите вообще убрать свободное пространство между рамкой окна и содержимым страницы, но мы не советуем вам это делать — страница будет выглядеть очень плохо.

Внимание!

Значения, введенные в поля ввода Left Margin и Top Margin, не воспринимаются Navigator.

Поля ввода Margin Width и Margin Height задают расстояние между рамкой окна Web-обозревателя и содержимым Web-страницы, соответственно, по горизонтали и по вертикали. Они поддерживаются и Internet Explorer, и Navigator. Поэтому лучше всего задавать именно их из соображений совместимости.

Раскрывающийся список Document Encoding задает кодировку текста вашей Web-страницы. (О кодировках и их выборе см. главу 2.) По умолчанию там выбрана кодировка, которую вы задали в настройках Dreamweaver, и менять ее без уважительных причин не стоит.

Закройте диалоговое окно задания свойств Web-страницы, нажав кнопку ОК или Cancel. С окном Page Properties мы закончили.

Примечание

Все вышеописанные настройки задаются атрибутами тега <BODY>, перечисленными в табл. 3.5.

Таблица 3.5. Атрибуты тега <BODY>







Атрибут

Описание

Где задается



ALINK BGCOLOR Цвет активной гиперссылки Цвет фона страницы Active Links Background

BOTTOMMARGIN Расстояние между нижней рамкой окна и содержимым страницы. По умолчанию 0

LEFTMARGIN Расстояние между левой рамкой окна и содержимым страницы Left Margin

LINK Цвет непосещенных гиперссылок Links

MARGINHEIGHT Расстояние между рамкой окна и содержимым страницы по вертикали Margin Height

MARGINWIDTH Расстояние между рамкой окна и содержимым страницы по горизонтали Margin Width

RIGHTMARGIN Расстояние между правой рамкой окна и содержимым страницы. По умолчанию 10

TEXT Цвет обычного текста Text

TOPMARGIN Расстояние между верхней рамкой окна и содержимым страницы Top Margin

VLINK Цвет посещенных гиперссылок Visited Links





Примечание

Обратите внимание, что значения атрибутов BOTTOMMARGIN и RIGHTMARGIN в среде Dreamweaver вы установить не можете. Для этого вам придется редактировать сам HTML-код.

Внимание!

Кодировка документа задается с помощью одинарного тега <МЕТА>, размещающегося в HTML-заголовке страницы. Подробнее о теге <МЕТА> мы поговорим в главе 14.

Дополнительные возможности Dreamweaver

Здесь мы рассмотрим некоторые дополнительные, но отнюдь не второстепенные возможности Dreamweaver, которые обязательно вам пригодятся.

Использование цветовых схем

Только что мы рассмотрели, как с помощью диалогового окна Page Properties можно быстро поменять всю расцветку Web-страницы. Но Dreamweaver предлагает большее. Вместо того чтобы скрупулезно, методом проб и ошибок, подбирать цвета для страницы, вы можете воспользоваться одной из определенных в программе цветовых схем — комбинацией цветовых настроек для текста, фона и гиперссылок, подобранной профессиональными дизайнерами.

Цветовые схемы выбираются в диалоговом окне Set Color Scheme Command. Чтобы вызвать его, выберите пункт Set Color Scheme в меню Command. Это окно показано на рис. 3.51.

Рис. 3.51. Диалоговое окно Set Color Scheme Command

Процесс выбора цветовой схемы состоит из двух шагов. Сначала вы должны выбрать одну из категорий цветовых схем, называемых по цвету фона страницы: Black, Blue, Brown, ..., Yellow. Категория выбирается в списке Background, после чего в списке Text and Links появляются имена собственно категорий, из которых вы можете выбрать любую.

Оценить выбранную цветовую схему вы можете на панели предварительного просмотра, расположенной в центре окна Set Color Scheme Command. Но т. к. разработчики Dreamweaver уверяют, что все цветовые схемы разработаны профессиональными дизайнерами, они будут, по крайней мере, достойно выглядеть. Однако окончательный выбор схемы, наиболее подходящей вашему сайту, зависит только от вас.

Нажав кнопку Apply, вы можете применить выбранную вами цветовую схему без закрытия диалогового окна. Чтобы закрыть это окно, нажмите кнопку ОК для сохранения выбранных установок или Cancel — для отказа от них.

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

Вставка и чтение комментариев

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

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

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

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

Вставить комментарий проще всего из панели объектов. Для этого переключитесь на страницу Common и нажмите кнопку Comment (рис. 3.52). На экране появится диалоговое окно Comment, показанное на рис. 3.53.

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

Рис. 3.53. Диалоговое окно Comment

Это окно устроено очень просто. Вы вводите текст комментария в область редактирования Comment и нажимаете кнопку ОК для вставки комментария или Cancel — для отмены. После этого в конце третьего абзаца появится значок комментария, отображаемый в таких случаях Dreamweaver (рис. 3.54).

Повторим, что в программе Web-обозревателя комментарий не будет виден совсем.

Рис. 3.54. Значок комментария в окне документа Dreamweaver

Для вставки комментария вы также можете выбрать пункт Comment подменю Text Objects меню Insert.

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

Рис. 3.55. Вид редактора свойств при выделенном комментарии

Чтобы впоследствии удалить ненужный комментарий, просто выделите мышью его значок и нажмите клавишу <Del>.

Примечание

Комментарии вставляются в HTML-код с помощью пары тегов <! —...—> или

<COMMENT>...</COMMENT>.

Вставка даты

Хорошим тоном в Web-дизайне считается указание даты последнего обновления Web-страницы. В самом деле, дату вставить очень легко — достаточно просто написать число, месяц и год в соответствующем формате. Но что делать, если вы не в состоянии вспомнить, какое сегодня число (как, например, автор этой книги)?

Dreamweaver может вставить дату за вас. Вы просто задаете формат даты и времени и указываете, нужно ли обновлять вставленную дату всякий раз при сохранении страницы. Видите, Dreamweaver может даже вместо вас следить за календарем!

Поскольку создаваемая нами Web-страница очень проста, мы не будем ставить на ней дату обновления. Вместо этого создадим пустую Web-страницу и вставим дату в нее, для чего переключимся на страницу Common панели объектов и нажмем кнопку Date (рис. 3.56). Вы также можете выбрать пункт Date меню Insert. После этого на экране появится диалоговое окно Insert Date, показанное на рис. 3.57.

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

Рис. 3.57. Диалоговое окно Insert Date

Раскрывающийся список Day Format для нас бесполезен, т. к. представляет все имена дней недели по-английски. Поэтому оставьте выбранным пункт [No Day].

В списке Date Format выбирается формат даты. Выберите один из двух форматов "число.месяц.год", которые там есть.

Раскрывающийся список Time Format задает формат времени. Выберите пункт 22:18, если вы хотите отображать время в 24-часовом формате, пункт 10:18 РМ, если хотите видеть время в 12-часовом формате, или пункт [No Time], если время вам вообще не нужно.

Флажок Update Automatically on Save включает или отключает режим обновления даты при сохранении страницы.

Как обычно, кнопка ОК выполняет вставку даты, а кнопка Cancel — отменяет.

Для нашего примера выберите один из вышеуказанных форматов даты в списке Date Format, пункт 22:18 — в раскрывающемся списке Time Format и включите флажок Update Automatically on Save. He забудьте нажать кнопку OK! После этого на страницу будет помещена сегодняшняя дата.

Если вы при вставке даты включили флажок Update Automatically on Save,

Dreamweaver позволит вам изменить формат даты и (или) времени. Выдели-

те вставленную дату — и редактор свойств изменит свой вид, предоставив вам кнопку Edit Date Format. При нажатии на нее на экране появится диалоговое окно Insert Date (см. рис. 3.57), в котором вы сможете изменить формат даты и времени.

Теперь испытаем Dreamweaver. Для этого сохраним страницу, скажем, под именем 3.4.htm. После этого вы, наверно, заметите, что время, которое вы поместили на страницу вместе с датой, изменится. (Если этого не случится, подождите минуты две и потом снова сохраните страницу.) То есть, таким образом, Dreamweaver действительно обновляет дату и время при сохранении страницы.

"Чистка" HTML-кода

В процессе работы над Web-страницей Dreamweaver вставляет в текст и убирает из него множество различных HTML-тегов. Хоть он и очень "интеллектуален" и никогда не вставит и не удалит лишнего, все-таки стоит время от времени "чистить" получившийся код, чтобы сделать его яснее и компактнее. Эта "чистка" включает в себя:

удаление парных тегов, "потерявших" свою пару;

удаление лишних (избыточных) тегов. Такие теги могут включаться в код для того, чтобы сделать его совместимым со старыми программами Web-обозревателей;

объединение тегов, где это возможно;

удаление комментариев.

За "чистку" HTML-кода "отвечает" пункт Clean Up HTML меню Command, выбрав который, вы откроете диалоговое окно Clean Up HTML / XHTML, показанное на рис. 3.58.

Рис. 3.58. Диалоговое окно Clean Up HTML / XHTML

Группа флажков Remove поможет вам задать, что именно следует удалять при "чистке":

Empty Container Tags -"пустые" теги, т. е. парные теги без содержимого;

Redundant Nested Tags — ненужные (избыточные) теги;

Non-Dreamweaver HTML Comments — HTML-комментарии, вставленные пользователем;

Dreamweaver Special Markup — HTML-комментарии, вставленные самим Dreamweaver для своих служебных целей, например, чтобы пометить вставленную дату с возможностью обновления;

Specific Tag(s) — теги, перечисленные в поле ввода, находящемся правее.

Группа флажков Options поможет вам задать дополнительные параметры "чистки":

Combine Nested <font> Tags when Possible — по возможности комбинирует вложенные теги <FONT> с разными параметрами;

Show Log on Completion — показывает статистику по окончании "чистки".

Задав нужные параметры (в подавляющем большинстве случаев можно оставить заданные по умолчанию), нажмите кнопку ОК для запуска процесса "чистки" или Cancel — для отказа от нее. "Чистка" может занять довольно много времени, особенно если Web-страница сложна, а компьютер, на котором установлен Dreamweaver, маломощен. По окончании, если был включен флажок Show Log on Completion, на экране появится окно статистики, где будет описано, что сделал Dreamweaver в процессе "чистки". В нашем случае (рис. 3.59) ничего сделано не было — HTML-код нашей страницы и так был "чист". Закройте это окно нажатием кнопки ОК.

Рис. 3.59. Окно статистики "чистки" HTML-кода

Проверка совместимости HTML-кода

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

Как избежать проблем с совместимостью? Что нужно для этого делать?

Прежде всего, конечно, соблюдать все стандарты HTML. He кидаться сломя голову за новомодными, свежевведенными расширениями этих самых стандартов и, тем более, нестандартными, "фирменными" возможностями той или иной программы. Иначе вы можете сильно сузить свою аудиторию. Кроме того, фирмы Microsoft и Netscape разработали ряд рекомендаций для Web-дизайнеров, которые позволят им создавать специальные, "совместимые" страницы, одинаково хорошо (или, по крайней мере, сносно) отображаемые в большинстве программ. Рекомендуем вам ознакомиться с этими рекомендациями, хотя в конкретных случаях помощи от них не так уж и много, и вам придется изрядно поломать голову.

Но как узнать, будет ли данная Web-страница нормально отображаться в разных программах Web-обозревателей? Вам поможет в этом Dreamweaver.

Выберите пункт Check Target Browsers в подменю Check Page меню File. На экране появится диалоговое окно Check Target Browsers (рис. 3.60).

Рис. 3.60. Диалоговое окно Check Target Browsers

В списке Browsers представлены все программы, о которых "знает" Dreamweaver. Версия MX поддерживает разные версии Internet Explorer, Navigator и Opera; новейший Web-обозреватель Mozilla там отсутствует. Выберите нужные программы, щелкая мышью на соответствующих строках списка, после чего нажмите кнопку Check.

После довольно долгого ожидания Dreamweaver откроет особую панель Target Browser Check и выведет в ней результаты проверки страницы на совместимость (рис. 3.61) в виде списка. В колонке Description этого списка будет дано краткое описание найденной несовместимости, увы, на английском. Дважды щелкните мышью на нужной строке списка — и Dreamweaver, переключив окно документа в режим показа страницы и кода, подсветит проблемный HTML-тег.

Рис. 3.61. Панель Target Browser Check

Здесь сразу видно, что атрибут ALINK (цвет активной гиперссылки) тега <BODY> не поддерживается Opera. Конечно, это не смертельно — в целом наша первая Web-страничка совместима со всеми наиболее распространенными программами Web-обозревателей. Но эта функция, встроенная в Dreamweaver, позволит вам в будущем избежать серьезных проблем с совместимостью.

Что дальше?

Итак, мы создали первую, главную страницу нашего сайта. В процессе ее создания мы научились работать с текстом и гиперссылками, используя для этого стандартные инструменты Dreamweaver. Следующим шагом будет работа с графикой и мультимедийными файлами, иными словами, внедренными объектами.

В главе 4 мы научимся вставлять на страницы графические изображения, звуковые и видеоклипы. А заодно создадим страничку с более подробными сведениями о гипотетическом Иване Ивановиче и его портретом.

Глава 4. Рисунки, звуки, фильмы

Работа с графическими изображениями

Два вида графических изображений

Вставка графического изображения

Изображения-гиперссылки

Активные изображения

Карты-изображения

Графика Macromedia Flash

Графика Macromedia Shockwave

Фоновые изображения

Мультимедиа

Поддержка мультимедийных данных

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

Элементы ActiveX

Что дальше?

ГЛАВА 4

Рисунки, звуки, фильмы.

В главе 3 мы научились работать с текстом. В этой главе мы разберемся со всем, что относится к внедренным объектам: графическими изображениями и мультимедийными данными (прежде всего, аудио- и видеоклипами). Мы научимся помещать их на Web-страницы и использовать для специальных целей, например, для создания изображений-гиперссылок и изображений-карт. И Dreamweaver нам в этом поможет.

Следующая по очереди Web-страница нашего сайта — сведения об авторе. А какая страница об авторе обойдется без его портрета. Но прежде чем помещать на Web-страницу портрет (да и любое изображение), неплохо было бы создать эту самую страницу. Этим мы сейчас и займемся.

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

На рис. 4.1 показана наша новая Web-страница. Опустим рассказ о ее создании, т. к. в этой главе речь пойдет совсем о другом.

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

Теперь откроем первую нашу страницу (файл 3.1.htm). Сейчас мы создадим первую "внутрисайтовую" гиперссылку, т. е. гиперссылку, ведущую на другую страницу нашего сайта. Для этого сначала выделим строку "подробнее обо мне, любимом" (последняя строка списка). И обратим внимание на редактор свойств.

Рис. 4.1. Web-страница сведений об авторе

Вы уже заметили — справа от поля ввода адреса находятся две кнопки. Одна из них имеет вид мишени и расположена левее; она нам сейчас бесполезна. Вторая гораздо интереснее: она имеет вид папки и при нажатии открывает диалоговое окно Select File, показанное на рис. 3.41. В верхней части этого окна находится список файлов текущей папки и раскрывающийся список выбора папок, совсем как в стандартном диалоговом окне открытия файлов Windows. Вы должны будете выбрать нужный файл Web-страницы, чтобы создать на нее гиперссылку. Так мы и сделаем. И не забудьте нажать кнопку ОК. Вот и все — гиперссылка создана.

И обязательно сохраните нашу главную страницу. Частое сохранение документов (любых) — важнейшая и надежнейшая гарантия от потери данных. После этого главную страницу можно закрыть и сосредоточиться на сведениях об авторе.

Работа с графическими изображениями

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

Примечание

Здесь нужно сделать оговорку. Существует язык VRML (Virtual Reality Markup Language — язык разметки виртуальной реальности), с помощью которого создаются целые виртуальные миры, которые можно исследовать. Эти миры записываются в виде текстовых тегов, аналогичных тегам HTML, встраиваемым прямо в HTML-код. Также фирмой Microsoft разработан язык VML (Vector Markup Language — язык разметки векторов), служащий для создания графических изображений, тоже в виде текстовых тегов. Но этот язык распространен очень слабо и поддерживается пока только Internet Explorer, начиная с версии 5.0.

Два вида графических изображений

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

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

К растровым относятся хорошо вам известные изображения форматов GIF (Graphic Interchange Format — формат обмена графикой) и JPEG (Joint Pictures Encoding Group — группа кодирования неподвижных изображений), которые вы загружаете из Интернета, чтобы полюбоваться творениями Бориса Вальехо. К растровым относится также стандартный формат хранения изображений в Windows — BMP (BitMaP — битовая матрица). Еще стоит упомянуть весьма напористого новичка — формат PNG (Portable Network Graphics — перемещаемая сетевая графика). Этот пока еще малораспространенный формат может стать преемником формата GIF, если недавние попытки сделать последний платным все-таки увенчаются успехом.

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

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

Хотя большой размер — не такой уж и непреодолимый недостаток. Форматы GIF, JPEG и PNG стандартно поддерживают сжатие массива данных с помощью специальных алгоритмов. Однако тут кроется другая опасность. Дело в том, что эти алгоритмы реализуют так называемое сжатие с потерями, при которых часть информации, не очень существенная для отображения, отбрасывается, в результате чего объем массива сильно уменьшается. ("Обычные" программы архиваторов, которыми вы пользуетесь, например Zip или Rar, реализуют сжатие без потерь.) При этом, если задать слишком сильное сжатие такого изображения, может пострадать его качество из-за того, что слишком большая часть информации будет отброшена. Впрочем, это уже проблема Web-художника, который будет готовить подобное изображение к публикации в Интернете.

Какие форматы растровых изображений используются в Web-дизайне? В основном, GIF и JPEG. Угадайте, почему? Конечно, потому, что они поддерживают сжатие. Причем, изображения GIF применяют для элементов оформления страниц (линии, маркеры списков и т. п.) и штриховых рисунков, a JPEG — для полутоновых рисунков с большим количеством цветов. Это вызвано тем, что для сжатия изображений этих форматов применяются разные алгоритмы, имеющие свои сильные стороны и свои недостатки.

Формат GIF имеет особое свойство, за что его любят Web-художники. Дело в том, что из-за особенностей этого формата в один GIF-файл можно записать последовательность графических изображений, фактически настоящий фильм. Многочисленные "живые" (даже слишком) рекламные картинки — баннеры - которые в последнее время просто залепили Web-страницы, сделаны в формате "анимированный GIF". Иногда такими картинками злоупотребляют, и ничего хорошего из этого не получается.

Другое достоинство формата GIF — возможность задать "прозрачный" цвет. Впоследствии Web-обозреватель вместо точек, имеющих этот цвет, будет подставлять точки "фона" родительского элемента. Говоря просто, можно сделать рисунок с "дырками", сквозь которые "просвечивает" то, что находится под рисунком.

Формат PNG, как говорят его создатели, объединяет возможности GIF и JPEG, не "прихватывая" заодно с собой их недостатки. Но пока он что-то не очень популярен в Сети. Однако если GIF все-таки сделают платным...

Internet Explorer также поддерживает формат BMP. Непонятно, зачем это нужно, ведь другие Web-обозреватели его не поддерживают.

Осталось только привести расширения, под которыми сохраняются файлы того или иного формата. Файлы GIF, PNG и BMP имеют "говорящие" расширения gif, png и bmp, а файлы JPEG — jpeg, jpg или jpe.

Вторая разновидность графических изображений — векторные. В отличие от растровых, состоящих из точек, они состоят из линий, называемых примитивами. Каждый такой примитив описывается определенной формулой, имеющей конкретный набор параметров. Вот эти параметры и сохраняются в массиве данных. К векторным относится формат изображений, созданных в популярнейшей программе Macromedia Flash, а также второй стандартный формат хранения изображений в Windows — WMF (Windows MetaFile — метафайл Windows). Вообще, существует много форматов векторных изображений, здесь перечисляться они не будут.

Что предлагают нам векторные изображения? Во-первых, небольшой объем, т. к. параметры какой-нибудь загогулины занимают значительно меньше места, чем весь набор составляющих ее точек. Во-вторых, исключительно простое масштабирование: Web-обозревателю достаточно перевычислить формулы с новыми параметрами размеров и нарисовать новую картинку на основе результатов этих вычислений. Недостаток: очень сложные алгоритмы вывода, включающие вычисление сложных формул. К тому же, чем векторное изображение сложнее, тем оно больше и тем дольше выводится на экран.

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

Примечание

Формат VML, о котором говорилось выше, также растровый.

Вставка графического изображения

Ну вот, теория закончена. Пора переходить к практике.

Прежде всего, запасемся портретом, который впоследствии поместим на нашу страницу. Только вот откуда его взять? Ведь нашего Ивана Ивановича Иванова не существует в природе. Автор нашел выход... хоть художник из него не бог весть какой. Готовый "портрет", если можно так выразиться, сохранен в файле Ivanov.gif.

Посмотрим на страницу сведений об авторе. Портрет мы вставим сразу же после слова "Фотография". Поместим текстовый курсор в конце этого слова и посмотрим на вкладку Common панели объектов — там находится кнопка Image (рис. 4.2). Вы также можете воспользоваться пунктом Image меню Insert или нажать комбинацию клавиш <Ctrl>+<Shift>+<!>.

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

Нажмем эту кнопку. На экране появится диалоговое окно Select Image Source, показанное на рис. 4.3.

Рис. 4.3. Диалоговое окно Select Image Source

Да-а-а... Взглянуть страшно. Но вас предупреждали, что автор не дружит с живописью!

В общем, здесь описывать особо нечего. Раскрывающийся список папок и список файлов позволят вам выбрать нужную папку и файл. В поле ввода Имя файла появится имя выбранного файла (или вы можете вручную ввести его туда). А раскрывающийся список Тип файлов позволит вам выбрать, какой тип файлов вы хотите найти. Все это знакомо вам по стандартным диалоговым окнам открытия и сохранения файлов Windows. Единственное отличие — справа находится панель предварительного просмотра, где вы в данный момент видите физиономию Ивана Ивановича. А если она вам настолько противна, что вы хотите убрать ее с глаз долой, просто отключите флажок Preview Images.

Итак, вы выбрали файл, где находится портрет нашего героя. Осталось нажать кнопку ОК. После этого наша страница примет такой вид, как на рис. 4.4.

Ну вот! Мало того, что этот портрет страшен, как семь смертных грехов, так он еще и занял почти все окно! Давайте его уменьшим, а то пользователь испугается.

Рис. 4.4. Страница сведений об авторе с его портретом

Обратите внимание, что на правой и нижней границе портрета имеются небольшие черные квадратики. Это так называемые маркеры изменения размера. Вы можете "захватить" мышью любой маркер и перетащить его на новое место, изменив тем самым горизонтальный или вертикальный размер изображения. А если вы хотите, чтобы оба размера изменялись пропорционально, перетащите мышью маркер, находящийся в правом нижнем углу изображения при нажатой клавише <Shift>. Вот так стало лучше (рис. 4.5).

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

Поля ввода W и Н позволяют вам ввести вручную соответственно ширину и высоту изображения. Это может быть полезно, если выделенное изображение — часть оформления сайта и должно плотно "прилегать" к другим таким же элементам оформления. В остальных случаях удобнее задавать размеры изображения, перетаскивая мышью маркеры размера.

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

Поля ввода V Space и Н Space задают соответственно вертикальное и горизонтальное расстояние от края изображения до обтекающего его текста. По умолчанию оба они равны нулю.

Поле ввода Src задает имя файла, где хранится графическое изображение. Справа от него вы видите уже знакомые вам две кнопки. Нажав на правую из них (с изображением папки), вы откроете диалоговое окно Select Image Source, показанное на рис. 4.3.

Рис. 4.5. Страница сведений об авторе после изменения размера портрета

Рис. 4.6. Вид редактора свойств при выделенном изображении

Вы также можете изменить имя файла изображения, выбрав пункт Source File в контекстном меню или просто дважды щелкнув по изображению мышью. После этого на экране появится диалоговое окно Select Image Source.

Поле ввода Low Src аналогично полю Src, за тем исключением, что задает имя файла, где сохранено так называемое "черновое" изображение. "Черновое" изображение имеет меньший размер, как правило, за счет большего сжатия и низкого качества. Когда пользователь соединяется с Интернетом по низкоскоростному каналу, Web-обозреватель первым делом загружает "черновик", т. к. он имеет значительно меньший размер, и выводит его на странице. А уже потом, пока пользователь просматривает готовую страницу, постепенно загружается полноценное изображение и подменяет собой "черновик".

Рекомендуется изготавливать "черновик" только тогда, когда оригинальное изображение с'лишком велико, чтобы быстро загрузиться. В частности, это подойдет, если вы делаете сайт с художественной графикой.

Dreamweaver предоставляет вам другую возможность задать имя файла "черновика". Для этого выберите пункт Low Source в контекстном меню и укажите нужный файл в появившемся на экране диалоговом окне Select Image Source.

Поле ввода Border позволяет задать толщину рамки, отображаемой вокруг изображения. По умолчанию она равна нулю, т. е. рамки нет.

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

А теперь обратимся к раскрывающемуся списку Align. Оно позволяет вам задать выравнивание, а фактически — относительное местоположение изображения и обтекающего его текста. Но сначала поговорим о том, как графические изображения размещаются на Web-странице.

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

Раскрывающийся список Align предоставляет Web-дизайнеру следующие пункты:

Browser Default — расположение по умолчанию, обычно аналогично пункту Baseline;

Baseline — низ изображения совпадает с базовой линией текста (воображаемой линией, по которой пишется строка текста);

Тор — верх изображения совпадает с верхом текста;

Middle — середина изображения совпадает с базовой линией текста;

Bottom — низ изображения совпадает с низом текста (обычно не то же самое, что Baseline);

TextTop — верх изображения совпадает с верхом самого высокого символа текста (обычно не то же самое, что Тор);

Absolute Middle — середина изображения совпадает точно с центральной линией текста (линией, проходящей через центр строки);

Absolute Bottom — низ изображения совпадает с низом самого низко сидящего символа текста;

Left — изображение "прижимается" к левому краю страницы;

Right — изображение "прижимается" к правому краю страницы;

Default - расположение по умолчанию, обычно аналогично пункту Baseline.

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

Рис. 4.7. Маркер "плавающего" изображения

Задать выравнивание изображения вы также можете в подменю Align контекстного меню.

Итак, с редактором свойств мы разобрались. Теперь давайте зададим свойства портрета нашего героя. Таким образом, расстояния от текста — 5 пикселов с обеих сторон, выравнивание — по левому краю, альтернативный текст — "Это я, Иван Иванович Иванов". Сохраним страницу.

Примечание

Изображение вставляется в текст с помощью одинарного тега <IMG>. Имя файла задается посредством атрибута SRC. Кроме него, этот тег имеет множество других атрибутов, соответствующих описанным нами параметрам. Получить подробное описание каждого из них вы можете, воспользовавшись поставляемым с Dreamweaver руководством по HTML.

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

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

Кнопка Edit редактора свойств и пункт Edit With <имя программы> контекстного меню позволят вам открыть выделенное изображение в программе, установленной в системе как программа для открытия этих файлов по умолчанию. Это та программа, в которой графические файлы будут открыты при двойном щелчке на них в окне Проводника. Вполне возможно, вам от этой функции не будет особой пользы (у автора, например, некоторые изображения открываются в Internet Explorer, в котором много не наредактиру-ешь). В этом случае воспользуйтесь подменю Edit With контекстного меню; выберите в нем пункт Browse, затем выберите в появившемся на экране диалоговом окне открытия файла Windows исполняемый файл нужной программы и нажмите кнопку открытия. Изображение откроется в этой программе, и вы сможете сделать с ним все, что хотите.

Изображения-гиперссылки

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

Сделать изображение-гиперссылку очень просто, так же просто, как и гиперссылку текстовую. Вам необходимо только выделить нужное изображение и ввести в поле ввода Link редактора свойств нужный адрес.

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

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

Создайте его в графическом редакторе или найдите готовый. Назовите файл с этим изображением Email.gif.

После этого поставьте курсор в начале строки "E-mail: ivanov@somemail.ru", сотрите символы "E-mail" и нажмите кнопку Image вкладки Common панели объектов. Выберите файл, где сохранено ваше "коммерческое эт", и нажмите кнопку ОК. Измените размеры свежевставленного изображения, чтобы оно не сильно отличалось от размера шрифта текста, и установите для него выравнивание Absolute Middle. Результат вы можете видеть на рис. 4.8.

Рис. 4.8. Значок "коммерческое эт" — символ электронной почты

Теперь преобразуем этот значок в почтовую гиперссылку. Для этого выделим его, наберем в поле ввода Link редактора свойств почтовый адрес нашего героя mailto:ivanov@somemail.ru и нажмем клавишу <Enter>.

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

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

Ну и, конечно же, изображение-гиперссылка может указывать на обычную Web-страницу.

Примечание

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

<А НRЕР="<Интернет-адрес>"><IMG SRС="<Адрес файла изображения>"></А>.

Активные изображения

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

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

Давайте рассмотрим, как поместить на страницу активное изображение. Для этого используем страницу сведений об авторе 4.1.htm, куда мы уже вставили изображение-гиперссылку. Согласитесь, она выглядит не очень эстетично. Давайте заменим ее активным изображением. Создадим в графическом редакторе два изображения со значком "коммерческое эт": одно — обычное, а второе — инвертированное, которое будет перекрывать первое. Первое изображение сохраним в файле Email.gif, а второе — в файле Email2.gif. И, конечно, сотрем всю строку с адресом электронной почты так, чтобы на ее месте остался пустой параграф. Текстовый курсор оставим на получившемся пустом параграфе.

Активное изображение вставляется с помощью кнопки Rollover Image (рис. 4.9) вкладки Common панели объектов или пункта Rollover Image подменю Interactive Images меню Insert. При этом на экране появляется диалоговое окно Insert Rollover Image, показанное на рис. 4.10.

Рис. 4.9. Кнопка Rollover Image панели объектов

Рис. 4.10. Диалоговое окно Insert Rollover Image

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

В поле ввода Original Image вводится имя файла оригинального изображение. Если вы не хотите вводить его вручную, нажмите кнопку Browse справа от этого поля ввода. После этого на экране появится диалоговое окно Select Image Source (см. рис. 4.3), где вы сможете выбрать нужный файл.

В поле ввода Rollover Image вводится имя файла перекрывающего изображения. Также, если вам неохота водить его вручную, на помощь всегда придет кнопка Browse.

Флажок Preload Rollover Image заставляет Dreamweaver сгенерировать и вставить в HTML-код вашей страницы небольшую программу-сценарий, которая заранее загрузит перекрывающее изображение. Этот флажок включен по умолчанию, и отключать его не стоит. Если же его отключить, то перекрывающее изображение будет загружено тогда, когда в нем возникнет нужда, т. е. когда пользователь поместит над изображением курсор мыши.

В поле ввода Alternate Text вводится "альтернативный текст". Лучше его ввести.

Последнее поле ввода When Clicked, Go To URL задает интернет-адрес, по которому произойдет переход, если пользователь щелкнет на изображении. Спасительная кнопка Browse придет на помощь тем, кто не любит стучать по клавиатуре.

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

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

Карты-изображения

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

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

Dreamweaver позволяет очень просто создать карты-изображения. Нужные "горячие области" рисуются поверх изображения, после чего остается только ввести интернет-адреса, на которые они будут указывать.

В данный момент давайте не будем использовать на своих Web-страницах карты-изображения. Однако пример создания привести необходимо, поэтому мы создадим специальную Web-страничку и специальное изображение для учебных нужд. Файл изображения называется Map.gif, а файл странички — 4.2.htm. Эта страничка не будет содержать ничего, кроме изображения (рис 4.11).

Рис. 4.11. Учебная Web-страница с картой-изображением

Разместить на изображении "горячие области" нам помогут несколько элементов управления, находящиеся в левом нижнем углу редактора свойств и пока еще нами не рассмотренные. Теперь пришла пора разобраться с ними (рис. 4.12).

Рис. 4.12. Элементы управления редактора свойств, использующиеся для создания "горячих областей"

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

Так как же разместить "горячую область"? Очень просто. Давайте начнем с прямоугольной. Щелкните на кнопке с изображением прямоугольника, затем щелкните по графическому изображению и, не отпуская левой кнопки мыши, протащите ее, пока не захватите всю область изображения, которую хотите сделать "горячей". Вы заметите, что за курсором мыши "тянется" светло-синяя линия. "Охватив" нужную область (в нашем случае, надпись "Сведения об авторе"), отпустите кнопку мыши, и выбранная вами область тотчас закрасится светло-синим.

После этого, как вы заметили, Dreamweaver подставит в поле ввода Map строку "Map". Что она значит? Это уникальное имя изображения-гипер-ссылки, которое будет использоваться Web-обозревателем. Если вы планируете на своей странице только одну карту-изображение, можете оставить это имя по умолчанию, в противном случае дайте ей уникальное имя, хотя бы "Мар1. Заметьте, что в таких именах допускаются только латинские буквы, цифры и знаки подчеркивания, причем начинаться имя должно с буквы.

Но Dreamweaver не только сгенерировал уникальное имя для карты-изображения. Он еще и в очередной раз изменил вид редактора свойств (рис. 4.13). Теперь вы можете задать параметры только что созданной "горячей области".

Рис. 4.13. Вид редактора свойств для выделенной "горячей области"

Все элементы управления нового редактора свойств вам уже знакомы. Это поле ввода Src, используемое для ввода интернет-адреса, раскрывающийся список Target, задающий цель гиперссылки, и поле ввода Alt, где вводится "альтернативный" текст. Здесь все понятно.

Разобравшись с тем, как вводятся параметры "горячей области", снова обратим внимание на изображение и саму "горячую область". Вы уже, наверно, заметили, что по углам прямоугольника, представляющего собой эту самую "горячую область", расположены небольшие синие квадратики — маркеры изменения размера. "Захватив" любой такой маркер мышью, вы можете изменить размеры "горячей области". А чтобы переместить ее на другое место, просто перетащите ее мышью. Однако перед всеми этими операциями проверьте, что из кнопок, показанных на рис. 4.12, нажата та, на которой изображена стрелка, и, если нет, нажмите ее.

Но пора двигаться дальше. Введите в поле Src имя файла Web-страницы сведений об авторе (4.1.htm) и нажмите клавишу <Enter>.

Теперь добавим на наше изображение круглую "горячую область". Для этого нажмем кнопку с изображением круга и точно так же "протащим" мышь по изображению, охватив надпись "E-mail". Dreamweaver поместит круглую область там, где мы ему указали, и активизирует ее, разместив по четырем сторонам круга маркеры изменения размеров.

Вы можете изменять размеры и местоположение круглой "горячей области" так же, как и прямоугольной. Редактор свойств имеет в этом случае такой же вид (см. рис. 4.13). Поэтому мы не будем здесь останавливаться. Введите в поле ввода Src почтовый адрес Ивана Ивановича и нажмите клавишу <Enter>.

Многоугольная "горячая область" создается несколько сложнее. Нажав кнопку с изображением многоугольника, прежде всего, щелкните мышью в месте, где должна располагаться первая из угловых точек многоугольной области. После этого там появится синяя точка — начало нашего многоугольника. Затем щелкните мышью там, где должна быть вторая угловая точка, и Dreamweaver проведет между этими двумя точками линию. Далее вам останется щелкнуть в местах расположения остальных угловых точек многоугольника, a Dreamweaver сам проведет между ними линии, которые и образуют нужную нам многоугольную "горячую" область. Впоследствии вы можете перетащить мышью любую точку этой области. Вот только вставить новую или удалить старую угловую точку вы уже не сможете — вам придется удалить созданную "горячую" область и создать новую.

Выделите многоугольную "горячую область", если она еще не выделена, введите в поле ввода Src имя файла 3.1.htm — нашей главной страницы и нажмите клавишу <Enter>. Наша карта-изображение закончена. То, что получилось, показано на рис. 4.14.

После этого можно вызвать Web-обозреватель для просмотра нашей страницы и испытать нашу карту-изображение в действии. Сделайте так — она действительно работает!

Осталось описать совсем немного дополнительных функций, предлагаемых Dreamweaver для работы с картами-изображениями.

С помощью пункта Image Map Name контекстного меню вы можете изменить имя "горячей области", если редактор свойств недоступен. При выборе этого пункта на экране появится диалоговое окно Change Attribute, показанное на рис. 4.15. Введите новое значение атрибута (в нашем случае — имени "горячей области") и нажмите кнопку ОК.

Рис. 4.14. Готовая карта-изображение

Пункт Link контекстного меню выводит на экран диалоговое окно Select File, где вы можете выбрать файл, на который будет ссылаться "горячая область".

Пункт Alt контекстного меню позволит вам с помощью диалогового окна Change Attribute задать "альтернативный" текст.

Рис. 4.15. Диалоговое окно Change Attribute

А о пунктах Bring To Front и Send To Back все того же неисчерпаемого контекстного меню поговорим подробнее.

Иногда случается так, что две "горячие области" перекрывают друг друга, т. е. имеют общий фрагмент. При этом при щелчке на такой "спорной территории" активизируется "горячая область", расположенная сверху, а сверху всегда появляется та область, что была создана последней. Но не всегда получается разместить "горячие области", как было предусмотрено по плану. Так вот, чтобы управлять их перекрытием, используются пункты Bring To Front и Send To Back контекстного меню. Первый переносит выделенную "горячую область" наверх, а второй -- "загоняет" ее вниз.

В последнем случае вы также можете воспользоваться пунктами Bring To Front и Send To Back подменю Arrange меню Modify.

И еще. Иногда бывает нужно избавиться от показываемых Dreamweaver "горячих областей", например, чтобы оценить, как будет выглядеть карта-изображение в окне Web-обозревателя. Конечно, можно загрузить его в самом Web-обозревателе для предварительного просмотра. Но можно сделать иначе. Отключите пункт-выключатель Image Maps в подменю Visual Aids меню View. При этом "горячие области" пропадут. Чтобы вернуть их назад, просто включите этот пункт.

Графика Macromedia Flash

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

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

Если у вас установлена достаточно новая программа Web-обозревателя, то необходимый модуль расширения уже находится в ее составе. В противном случае вам придется посетить Web-сайт Macromedia, чтобы найти соответствующую версию проигрывателя. Так или иначе, вам время от времени все равно придется туда заходить, чтобы найти "свежий" проигрыватель, т. к. Flash постоянно обновляется, "обрастает" новыми возможностями, которые не поддерживаются старыми версиями проигрывателя.

Сейчас мы рассмотрим, какие возможности работы с Flash-изображениями предлагает нам Dreamweaver.

Для такого случая мы снова создадим небольшую учебную страничку. Страница со сведениями об авторе уже готова (или почти готова), так что не стоит пока над ней издеваться. Для наших экспериментов будет достаточно обычной пустой странички. Но, прежде чем помещать на нее Flash-изображения, сохраните ее в файле 4.3.htm, в противном случае Dreamweaver сам напомнит вам об этом. И закройте эту страницу.

Увы, увы, опять приходится говорить об ошибках, как бы нам этого не хотелось... Конечно, иногда ошибки бывают маленькими и незаметными, но Dreamweaver MX — не тот случай. Из-за досаднейшей промашки разработчиков он не всегда корректно воспринимает имена файлов и папок, набранные русскими буквами. Поэтому проверьте имя папки, в которой вы сохранили Web-страницу 4.3.htm, и если ее имя или имя одной из папок верхнего уровня имеет русские имена, перенесите файл страницы в другую папку, имеющую в имени только английские имена и цифры. Теперь можете открывать вашу страницу 4.3.htm.

Сначала рассмотрим вставку надписи Flash — изображения в формате Flash, содержащего строку текста и работающего как изображение-гиперссылка.

Надпись Flash создается с помощью кнопки Flash Text (рис. 4.16) страницы Media панели объектов. Вы также можете воспользоваться пунктом Flash Text подменю Interactive Images меню Insert. Параметры создаваемой надписи Flash задаются в диалоговом окне Insert Flash Text, показанном на рис. 4.17.

Рис. 4.16. Кнопка Flash Text панели объектов

Рис. 4.17. Диалоговое окно Insert Flash Text

В раскрывающемся списке Font выбирается шрифт, которым будет написан текст надписи. В поле ввода Size задается его размер в пунктах. Кнопки-выключатели В и I позволяют сделать шрифт текста жирным или курсивным. Три кнопки с изображением выровненных влево, по центру и вправо абзацев задают соответствующее выравнивание текста. Селектор цвета Color задает цвет текста, a Rollover Color — цвет, который примет текст, когда пользователь поместит над ним курсор мыши. В области редактирования Text вводится собственно текст надписи. Если флажок Show Font включен (а он включен по умолчанию), содержимое этой области редактирования показывается так, как оно будет выглядеть на Web-странице.

Поле ввода Link служит для задания интернет-адреса, по которому произойдет переход, если пользователь щелкнет на надписи. Также предусмотрена кнопка Browse. Цель гиперссылки задается с помощью раскрывающегося списка Target.

Селектор цвета Bg Color задает цвет фона надписи.

Последнее поле ввода Save As позволяет задать имя файла, где будет сохранена созданная надпись. По умолчанию Dreamweaver подставляет туда автоматически созданное имя файла, которое вы можете изменить, если хотите. Кнопка Browse вызывает на экран стандартное диалоговое окно сохранения файла Windows.

Наберите в области редактирования какой-либо текст, например, "Macromedia". Введите в поле ввода Link какой-нибудь интернет-адрес, например http://www.macromedia.com. Выберите шрифт и цвета по вкусу. И нажмите кнопку ОК. То, что у вас получится, показано на рис. 4.18.

Рис. 4.18. Только что созданная надпись Flash

Редактор свойств позволяет отредактировать множество параметров надписи Flash (рис. 4.19). Как и у обычного изображения, доступно изменение геометрических размеров (поля ввода W и Н), выравнивания (раскрывающийся список Align и одноименное подменю в контекстном меню), горизонтальное и вертикальное расстояние до текста (поля ввода Н Space и V Space) и сброс размеров в изначальное состояние (кнопка Reset Size).

Рис. 4.19. Вид редактора свойств при выбранном изображении Flash

Остальные элементы управления задают специфичные для изображений Flash параметры. Кнопка Edit (а также одноименный пункт контекстного меню) выводит на экран диалоговое окно создания надписи Flash, где вы сможете ее отредактировать. В поле ввода File задается имя файла, где хранится Flash-изображение; если у вас есть другие файлы надписей Flash, оно вам может пригодиться. Селектор цвета Bg позволяет быстро сменить цвет фона надписи Flash.

Теперь обратим внимание на кнопку Play. Как вы помните, чтобы протестировать активное изображение, созданное нами выше, мы были вынуждены загрузить страницу в Web-обозревателе, т. к. Dreamweaver не поддерживает выполнение сценариев. Изображения формата Flash не используют сценариев и поэтому могут быть просмотрены в самом Dreamweaver. Для того чтобы запустить просмотр, щелкните на кнопке Play. После этого рамка выделения с маркерами изменения размеров пропадет и вы, если поместите курсор мыши над надписью, увидите, что ее цвет изменился. Вот только на щелчки она не реагирует.

Заметьте, что при этом кнопка Play изменит название на Stop. Чтобы вернуть надпись Flash в режим редактирования из режима просмотра, щелкните по ней.

Вместо нажатия кнопки Play вы можете выбрать пункт Play подменю Plugins меню View или нажать комбинацию клавиш <Ctrl>+<Alt>+<P>. Пункт Play All того же подменю (или комбинация клавиш <Ctrl>+<Alt>+ +<Shift>+<P>) запускают просмотр всех изображений Flash, имеющихся на странице. Соответственно, пункт Stop (или комбинация клавиш <Ctrl>+ +<Alt>+<X>) останавливает просмотр текущего изображения Flash, a Stop All (или комбинация клавиш <Ctrl>+<Alt>+<Shift>+<X> - тренируйте свои пальцы) — всех изображений Flash на данной странице.

Раскрывающийся список Quality позволяет задать качество отображения изображения Flash. По умолчанию выбран пункт High — высокое качество. Однако в этом случае модуль просмотра изображений Flash будет требовать слишком много системных ресурсов, и если вы планируете распространять свои Flash-творения среди владельцев маломощных компьютеров, то стоит выбрать пункт Low. Еще два пункта позволят достичь компромисса: Auto High сначала устанавливает высокое качество, а потом при необходимости понижает, a Auto Low — наоборот.

Раскрывающийся список Scale задает, как изображение Flash отображается в границах, установленных параметрами W и Н. Выбранный по умолчанию пункт Default (Show all) заставляют проигрыватель Flash изменять масштаб изображения, "впихивая" его в нужные размеры, и предотвращать его искажение, соблюдая пропорции. Пункт No border выводит изображение в оригинальном масштабе; если при этом размеры W и Н слишком мачы, часть изображения может не быть видна. И, наконец, пункт Exact fit подобен Default (Show all), но не предотвращает искажение масштаба.

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

Теперь поговорим о кнопках Flash. Создайте новую Web-страницу и сохраните ее под именем 4.4.htm. (Впрочем, вы можете стереть надпись Flash, вставленную нами ранее на страницу 4.3.htm, очистив ее.)

Кнопка Flash создается с помощью кнопки Flash Button страницы Media панели объектов (см. рис. 4.20). Вы также можете воспользоваться пунктом Flash Button подменю Interactive Images меню Insert. Параметры создаваемой кнопки Flash задаются в диалоговом окне Insert Flash Button, показанном на рис. 4.21.

Рис. 4.20. Кнопка Flash Button панели объектов

Рис. 4.21. Диалоговое окно Insert Flash Button

Здесь вы видите, прежде всего, большой список Style, где представлены все доступные в Dreamweaver стили кнопок Flash. Мы не будем их все рассматривать, т. к. описание получится большое и маловразумительное. Лучше всего вам будет просто посмотреть на них воочию, ведь правду говорят, что лучше один раз увидеть, чем сто раз услышать. Поможет вам в этом панель предварительного просмотра, расположенная выше этого списка.

Текст кнопки вводится в поле ввода Button Text. Остальные элементы управления знакомы вам по диалоговому окну Insert Flash Text (см. рис. 4.17), и выполняют они те же самые функции.

Давайте введем в поле ввода Button Text строку Macromedia, в поле ввода Link — http://www.macromedia.com, выберем какой-нибудь приглянувшийся стиль кнопки и нажмем кнопку ОК. Получившаяся кнопка может выглядеть, например, так — см. рис. 4.22.

Рис. 4.22. Только что созданная кнопка Flash

Дизайнеры фирмы Macromedia приготовили для вас прекрасные шаблоны для создания Flash-кнопок. Не верите? Нажмите кнопку Play на редакторе свойств, поднесите курсор мыши к кнопке и посмотрите, что получится. К сожалению, печатная иллюстрация не может передать движение...

Редактор свойств позволит вам изменить различные параметры кнопки Flash. Все они аналогичны параметрам надписи Flash, да и всем изображениям Flash.

Примечание

Изображения Flash помещаются на страницу с помощью парного, тега <OBJECT>. Этот тег служит для размещения не только изображений Flash, но и любых внедренных объектов, для которых в системе установлены модули просмотра. Таким образом можно, например, разместить на Web-странице документ MS Word или видеофильм. Тег <OBJECT> имеет множество атрибутов, которые служат для задания типа внедренного объекта, интернет-адреса дистрибутивного файла модуля просмотра, служащего для его обработки, геометрических размеров внедренного объекта и т. п. Мы не будем рассматривать эти атрибуты — вы можете найти их описания в электронном руководстве по HTML, поставляемом в составе Dreamweaver.

Выше говорилось, что тег <OBJECT> парный. Внутри этого тега помещаются описания различных параметров внедренного объекта (не самого тега <OBJECT>). Каждый параметр описывается с помощью одинарного тега <PARAM>, имеющего атрибуты NAME (имя параметра) и VALUE (значение параметра).

В дальнейшем мы вернемся к тегу <OBJECT>, когда будем рассматривать внедренные объекты.

Рис. 4.23. Кнопка Flash панели инструментов

Ну и, разумеется, вы можете поместить на Web-страницу любое изображение Flash, созданное вами или кем-то другим. Это выполняется очень просто. Нажмите кнопку Flash (рис. 4.23) вкладки Common панели объектов (эта же кнопка находится на вкладке Media). Вы также можете выбрать пункт Flash подменю Media меню Insert или нажать комбинацию клавиш <Ctrl>+<Alt>+<F>. На экране появится уже знакомое вам диалоговое окно Select File, где вы сможете выбрать нужный файл SWF.

Графика Macromedia Shockwave

Осталось сказать чуть-чуть о других форматах поддерживаемых данных.

Macromedia Shockwave — непосредственный предшественник Flash. Чтобы поместить файл в этом формате на Web-страницу, нажмите кнопку Shockwave (рис. 4.24) вкладки Media панели объектов, выберите пункт Shockwave подменю Media меню Insert или нажмите комбинацию клавиш <Ctrl>+<Alt>+<D>. После этого на экране появится диалоговое окно Select File, где вы сможете найти и выбрать нужный файл.

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

Внешний вид редактора свойств при выделенном изображении Shockwave показан на рис. 4.25. Как видите, свойства изображения Shockwave аналогичны соответствующим свойствам изображения Flash за исключением отсутствия некоторых параметров.

Рис. 4.25. Вид редактора свойств при выделенном изображении Shockwave

Фоновые изображения

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

Задать фоновое изображение для Web-страницы очень просто. Для этого вызовите на экран диалоговое окно Page Properties (см. рис. 3.50), для чего выберите пункт Page Properties меню Modify или контекстного меню или нажмите клавиши <Ctrl>+<J>. В поле ввода Background Image введите имя файла фонового изображения или нажмите кнопку Browse и выберите нужный файл в диалоговом окне. После этого нажмите кнопку ОК. Получившийся результат может выглядеть, например, так — см. рис. 4.26. (Автор создал пустую Web-страницу, поместил на нее фрагмент текста этой книги, задал для него в качестве фонового изображения файл J0143756.gif, поставляемый в составе Microsoft Office 2000, и сохранил результат в файле 4.5.htm.)

Рис. 4.26. Web-страница с фоновым изображением

Удачно подобранное фоновое изображение может заметно оживить Web-страницу. Но не следует выбирать в качестве фона слишком яркое или пестрое изображение. Лучше всего сразу после задания фона попробуйте сами почитать текст, выведенный на странице, и оцените, легко ли он читается. Если нет, замените фоновое изображение другим или совсем откажитесь от него. Можно также попытаться подобрать соответствующий цвет текста, чтобы он нормально читался, но не резал глаза. Снова посмотрите на рис. 4.26 — там текст выглядит на фоне достаточно контрастно, чтобы нормально читаться.

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

Мультимедиа

Мультимедиа (от англ, multimedia — многосредность) — это сокращенное обозначение информации, отличающейся от простых текста и графики. Мультимедиа — это звуки, музыка, видео, анимация, в последнее время оккупировавшие диски наших компьютеров, загромоздившие их гигабайтами полезной и бесполезной информации. Мультимедиа -- это мощнейшие трехмерные ускорители на видеокартах, это звуковые контроллеры, ставшие (наконец-то) стандартом, CD- и DVD-диски и соответствующие им приводы. Мультимедиа — это Web-страницы, пестрящие анимацией, оглушающие каждого встречного приветственной музыкой. Мультимедиа — это символ современного компьютерного мира.

Разумеется, мы не можем пройти мимо такой насущной темы. Да и сами создатели Dreamweaver не могли ее проигнорировать. Dreamweaver оснащен впечатляющими средствами помещения на Web-страницы мультимедийного содержания, да и вообще любых внедренных объектов. И мы их сейчас рассмотрим.

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

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

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

Поддержка мультимедийных данных

Поговорим о том, каким же образом Web-обозреватель обрабатывает мультимедийное содержание.

Некоторые типы мультимедийных данных поддерживаются Web-обозревателем непосредственно. (Хотя мультимедийными данными это назвать сложно.) Как вы поняли, речь идет об обычных растровых изображениях в формате GIF, JPEG или PNG (они помещаются на страницы с помощью тега <IMG>). Internet Explorer также поддерживает свой собственный тег <BGSOUND> для привязки к странице фонового музыкального сопровождения и атрибут DYNSRC тега <IMG>, с помощью которого на страницу можно поместить фильм. Но эти возможности не являются стандартными, поэтому мы не будем их рассматривать. Если вы хотите узнать о них побольше, обратитесь к электронному руководству по HTML.

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

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

Но как Web-обозреватель определяет, какая программа нужна для обработки данных того или иного формата? Дело в том, что каждый формат данных имеет свой уникальный идентификатор, называемый типом MIME (Multipurpose Internet Mail Extensions — многоцелевые расширения почты Интернета). А дополнительная программа при установке сообщает системе, какой тип MIME ей "по зубам". Соответствия типов MIME форматам данных и обрабатывающим их программам записываются в Реестре Windows.

В табл. 4.1 приведены некоторые типы MIME и соответствующие им форматы данных.

Таблица 4.1. Типы MIME






Тип файлов

Тип MIME



Архив RAR Архив ZIP application/x-tar application/x-zip-compressed

Аудио- или видеозапись ASF video/x-ms-asf

Аудио- или видеозапись WMV video/x-ms-wmv

Аудиозапись AIFF audio/aiff

Аудиозапись AU audio/basic

Аудиозапись MIDI audio/mid

Аудиозапись МРЗ audio/mpeg

Аудиозапись WAV audio/wav

Аудиозапись WMA audio/x-ms-wma

Видеозапись AVI video/avi

Видеозапись Indeo (IVF) video/x-ivf

Видеозапись MPEG video/mpeg

Визитная карточка, используемая почтовыми программами для хранения данных об адресате text/x-vcard

Графический файл ART image /x-jg

Графический файл BMP image /bmp

Графический файл GIF image/gif

Графический файл JPEG image /jpeg

Графический файл Macromedia Flash application/futuresplash

Графический файл TIFF image/tiff

Документ Adobe Acrobat application/pdf

Документ HTML text/html

Документ Microsoft Excel application/x-msexcel

Документ Microsoft Word application/msword

Документ RTF application/msword

Документ XML text/xml

Приложение application/x-msdownload

Приложение HTML (HTA) application/hta

Таблица стилей HTML text/ess

Текстовый документ text/plain




Дополнительные программы, расширяющие возможности Web-обозревателя, делятся на две разновидности, различающиеся принципом работы:

Модули расширения Web-обозревателя (по-английски — plugins). Впервые их начал поддерживать Netscape 2.0; в Internet Explorer поддержка их появилась в версии 3.0. Это небольшие специализированные программы, выполненные в виде динамических библиотек Windows DLL. Они загружаются самим Web-обозревателем, чтобы обработать тот или иной файл. Если нужный модуль расширения не установлен, то Web-обозреватель может сам загрузить и установить его.

Элементы ActiveX. Общий стандарт расширения для операционной системы Windows, продвигаемый фирмой Microsoft, может быть использован и для "оживления" Web-страниц. Обладая всеми возможностями модулей расширения, элементы ActiveX могут поддерживаться не только Web-обозревателями, но и всеми программами, установленными в системе. Элемент ActiveX однозначно идентифицируется с помощью GUID (Global Unique IDentifier - глобальный уникальный идентификатор), который вместе с поддерживаемыми типами данных MIME записывается в Реестре. Элементы ActiveX поддерживаются Internet Explorer 3.0, Navigator 6.0, Mozilla 1.0 и более новыми версиями; о поддержке их Opera данных нет.

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

Если вы хотите поместить на Web-страницу какое-либо мультимедийное (и не только) содержание, обрабатываемое с помощью модуля расширения, вы, прежде всего, должны удостовериться, что этот модуль расширения установлен у вас на компьютере. В противном случае он не будет появляться в списке установленных модулей расширения, и вы не сможете его выбрать. Кроме того, у вас должен быть установлен Netscape Navigator версии 4.7*. Дело в том, что модули расширения считаются устаревшей технологией, и для их поддержки необходимо устаревшее программное обеспечение.

Давайте поместим на нашу Web-страницу небольшой аудиоклип в формате WAV (WAVe — "волна", стандартный формат хранения звуков в Windows). Откроем новое окно Dreamweaver и сохраним пустую страницу в файле 4.6.htm. В качестве файла данных мы используем небольшой аудиоклип из папки Windows\Media, например, ding.wav. Скопируйте его в папку, где хранится Web-страница 4.6.htm.

Для вставки на Web-страницу модуля расширения служит кнопка Plugin (рис. 4.27), расположенная на вкладке Media панели объектов. Вы также можете использовать пункт Plugin подменю Media меню Insert. После этого на экране появится диалоговое окно Select File. Найдите аудиофайл, который вы хотите поместить на страницу, выберите его в списке файлов и нажмите кнопку ОК.

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

После этого в окне документа появится значок модуля расширения. Измените его размеры, как вы проделывали это с изображением. Результат показан на рис. 4.28.

Рис. 4.28. Модуль расширения

Теперь обратим внимание на редактор свойств (рис. 4.29).

Поля ввода W и Н, Н Space, V Space и Border и раскрывающийся список Align должны быть вам уже знакомы. Также должна быть вам знакома кнопка Play/Stop.

Рис. 4.29. Редактор свойств при выделенном модуле расширения

В поле ввода Src вводится имя файла данных. Справа от него расположена уже знакомая нам кнопка с изображением папки. Щелкнув по ней, вы получите на экране диалоговое окно открытия файла данных. С тем же успехом вы можете выбрать пункт Source File контекстного меню.

Поле ввода Pig URL используется для задания интернет-адреса файла, содержащего дистрибутивный комплект этого модуля расширения.

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

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

Рис. 4.30. Диалоговое окно Parameters

Теперь посмотрим, как работает наш модуль расширения. Для этого закроем окно задания параметров, если оно открыто, выделим модуль расширения в окне документов, если он не выделен, и нажмем кнопку Play редактора свойств. Модуль расширения примет такой вид — см. рис. 4.31.

Рис. 4.31. Запущенный модуль расширения

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

Если вы щелкнете по модулю расширения, когда он работает, появится контекстное меню, предлагающее вам запустить (пункт Play), приостановить (Pause) или остановить совсем (Stop) проигрывание файла. Пункт Save As позволит вам сохранить файл данных под другим именем, а пункт About выведет небольшое диалоговое окно со сведениями о модуле расширения и его разработчике. Заметьте, что это меню выводит не Dreamweaver, а сам модуль расширения.

Внимание!

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

Закончив экспериментировать с модулем расширения, нажмите кнопку Stop. Вот и все! Теперь вы можете загрузить эту страничку в Web-обозревателе и проверить ее по полной программе.

Вы также можете задать в качестве файла данных видеоклип. В каталоге Windows (WinNT) имеется файл clock.avi в формате AVI (Audio and Video Interleaved — чередующиеся аудио и видео) — стандартном формате хранения видеоданных в Windows, который можно задать в качестве файла данных. Правда, для этого придется подогнать размеры модуля, чтобы клип влез в него целиком. Результат показан на рис. 4.32.

Рис. 4.32. Видеоклип на Web-странице

В этом случае в контекстном меню доступны следующие пункты:

Play — запуск проигрывания клипа;

Rewind (Start of movie) — перемотка в начало;

Forward (End of movie) — перемотка в конец;

Frame Back — перемотка на кадр к началу;

Frame Forward — перемотка на кадр к концу.

Ну что ж, выберем пункт Play и посмотрим, что получится...

Примечание

Модуль расширения помещается на Web-страницу с помощью парного тега <EMBED>. Этот тег содержит множество атрибутов; в частности, атрибут SRC задает интернет-адрес файла данных, атрибут PLUGINSPAGE — интернет-адрес дистрибутива модуля расширения, атрибут TYPE — тип MIME данных и т. д. Дополнительные параметры задаются внутри тега <EMBED> набором уже знакомых вам тегов <PARAM>.

Элементы ActiveX

Теперь рассмотрим элементы ActiveX и их размещение на Web-страницах.

Для начала откроем новое окно Dreamweaver и сохраним новую пустую страницу в файле под именем 4.7.htm. После этого найдем файл данных. В одной из папок Microsoft Office 2000 хранится аудиофайл формата MIDI (Musical Instruments Digital Interface — цифровой интерфейс музыкальных инструментов) по имени Htech_01.mid, который мы и используем в качестве файла данных. Если вы не найдете этого файла, можете использовать любой другой аудио- или видеофайл, например, ding.wav или clock.avi.

Для помещения на Web-страницу элемента ActiveX можно использовать либо кнопку ActiveX (рис. 4.33), расположенную на вкладке Media панели объектов, либо пункт ActiveX подменю Media меню Insert. После этого в окне документа вы увидите значок элемента ActiveX (рис. 4.34). Увеличьте его размеры, как вы проделывали это с изображениями и модулем расширения,

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

Заметьте, что запроса на открытие файла данных Dreamweaver при этом не выдает. Как привязать данные к элементу ActiveX, мы сейчас рассмотрим.

Взгляните на редактор свойств (рис. 4.35). В раскрывающемся списке ClassID выберите нужный элемент ActiveX. В нашем случае это будет известная программа мультимедийного проигрывателя RealPlayer — именно с ее помощью мы будем проигрывать MIDI-файл.

Рис. 4.34. Значок элемента ActiveX

Рис. 4.35. Редактор свойств при выделенном элементе ActiveX

Найдите в редакторе свойств кнопку Parameters. Вы помните, зачем она нужна?

Все дело в том, что у элемента ActiveX нет собственного параметра для задания файла данных, как это было у модуля расширения. Файл данных задается в списке дополнительных параметров, вызываемых с помощью кнопки Parameters или одноименного пункта контекстного меню. Для этого служит параметр под названием src.

Откройте уже знакомое вам диалоговое окно Parameters (см. рис. 4.30). В единственной строке таблицы параметров в графе Parameter введите имя параметра — src, а в графе Value — имя MIDI-файла. И нажмите кнопку ОК.

Теперь можно проверить в работе получившийся элемент ActiveX. Нажмите кнопку Play, щелкните по кнопке воспроизведения — и вы услышите музыку.

Внешний вид запущенного элемента ActiveX изображен на рис. 4.31. Не правда ли, он поразительно напоминает модуль расширения, с которым мы познакомились выше. Почему? Дело в том, что многие программы имеют несколько пользовательских интерфейсов. Один из этих интерфейсов -

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

Давайте посмотрим, что еще нам предлагает редактор свойств. Конечно, поля ввода W, H, H Space и V Space и раскрывающийся список Align вам уже знакомы. Рассмотрели также мы и раскрывающийся список ClassID. А вот остальные элементы управления пока еще не знакомы нам.

Поле ввода Base служит для задания интернет-адреса дистрибутивного файла элемента ActiveX. И, если нужного элемента ActiveX на компьютере пользователя не установлено, Web-обозреватель самостоятельно загрузит дистрибутив с указанного адреса и установит его. Единственное: вам нужно точно знать этот интернет-адрес.

Поле ввода Data служит для задания имени файла дополнительных данных для элемента ActiveX. (He путайте его с файлом данных.) В настоящее время мало кто использует этот параметр.

В поле ввода Alt Img задается имя файла изображения, которое будет отображаться вместо элемента ActiveX, если Web-обозреватель не сможет загрузить файл или не в полной мере поддерживает технологию ActiveX. Правила хорошего тона и законы рынка требуют написания Web-страниц, совместимых с максимальным числом программ, поэтому лучше предусмотреть такое "альтернативное" изображение. Впрочем, если вы уверены, что нужды в нем не возникнет, можете не задавать — подавляющее большинство Web-дизайнеров так и делают.

Теперь обратимся к флажку Embed и полю ввода Src.

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

Все дело в стандартах HTML, определяющих поведение Web-обозревателя, встретившего тег, которого он не "знает" (неизвестный тег). Web-обозреватель должен такой тег игнорировать. Тогда можно сделать так: в код Web-страницы помещается тег элемента ActiveX, а внутри него — тег модуля расширения. Поэтому "знакомая" с элементами ActiveX программа прочитает и обработает первый тег и проигнорирует второй, а "не знакомая", наоборот, проигнорирует первый, т. к. его не "знает", зато обработает второй. Как говорится, и овцы сыты, и волки целы...

Dreamweaver автоматически создает такой "двойной" тег, если в редакторе свойств был включен флажок Embed. В этом случае доступно поле ввода Src, где задается имя файла данных для модуля расширения. Это уже нам знакомо. И еще: если флажок Embed включен, то поле ввода Alt Img, где задается "альтернативное" изображение, выводимое, если элемент ActiveX почему-то не удается запустить, становится недоступным. (Фактически, "альтернативное" изображение задается точно так же, как модуль расширения — расположение внутри тега элемента ActiveX тега <IMG>.)

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

Примечание

Элемент ActiveX задается уже знакомым вам тегом <OBJECT>. Этот тег мы рассмотрели, когда говорили о помещении на Web-страницы изображений Flash. Как видите, изображения формата Flash на самом деле обрабатываются элементом ActiveX.

Что дальше?

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

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

Глава 5. Таблицы

Текст фиксированного формата

Простые таблицы

Создание таблиц

Работа с таблицами

Формирование таблиц

Форматирование таблиц

Выделение элементов таблиц

Параметры ячейки

Параметры строки

Параметры таблицы

Предопределенные форматы таблиц

Сортировка таблицы

Вставка табличных данных

Слияние ячеек таблиц

Использование таблиц

Текст в рамке

Текст в графической рамке

Текст с отступами

Сложные таблицы

Составные изображения

Проблемы с таблицами и их решение

Общие недостатки таблиц и их преодоление

Проблемы с таблицами в старых версиях Navigator

Что дальше?

ГЛАВА 5.

Таблицы

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

Без таблиц в Web-дизайне никуда. Таблицы с разноцветными ячейками, с границами и без границ, таблицы, вложенные друг в друга, таблицы с невидимыми границами приходят на помощь, когда Web-дизайнеру нужно сделать что-либо отличное от простого "потока" текста, "разбавленного" рисунками. Но — странная ирония судьбы и высоколобых разработчиков языка HTML — стандартизированы они были совсем недавно. А это значит, что раньше, если Web-дизайнеру требовалось поместить на страницу табличные данные, он прибегал к тексту фиксированного формата. Помните старинные текстовые редакторы для MS-DOS: Лексикон, "Слово и дело", MiltiEdit? Помните, как там делались таблицы? Вот это и есть текст с фиксированным форматированием.

Но эти времена давно в прошлом. Сейчас же стандарт HTML предлагает Web-дизайнерам мощнейшие средства создания таблиц любой сложности. Главное — не запутаться в нагромождении строк и ячеек, но это уже проблема не HTML.

Создавать таблицы, вводя HTML-код вручную, очень трудоемко. Dreamweaver значительно облегчает труд Web-дизайнера, позволяя вставить в текст таблицу несколькими щелчками мыши. Точно так же просто изменить свойства как самой таблицы, так и любой ее строки или ячейки. И уж совсем просто размещать в ячейках таблицы нужное содержимое: текст, графику, другие таблицы и все, чем богат HTML и что придет в голову Web-дизайнеру.

В этой главе мы рассмотрим основные моменты работы с таблицами. Мы научимся их создавать, форматировать, размещать в них полезное содержимое, работать с ячейками и рассмотрим все их достоинства и недостатки. Но сначала давайте познакомимся с доисторическим, т. е. "дотабличным" периодом в истории HTML. А именно, выясним (или вспомним), что такое текст фиксированного формата и чем он может быть нам полезен.

Текст фиксированного формата

Как Web-обозреватель выводит на Web-страницу текст? На самом деле, здесь нет ничего сложного. Он придерживается нескольких простых правил, которые вам стоит узнать:

символы возврата каретки преобразуются в пробелы. Строка обрывается только тогда, когда встречается тег конца абзаца </р> или разрыва <br>;

любое количество последовательно стоящих пробелов преобразуется в один пробел;

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

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

Или прибегните к тексту фиксированного формата. Рассмотрим такой HTML-код:

<HTML>

<HEAD>

<ТITLE>Фигурный текст</ТITLЕ>

</HEAD>

<BODY>

<Р>

\хххххх\ \хххххх\ \хххххх\ \хххххх\ \хххххх\ \xxxxxx\

</BODY>

</HTML>

Наберите этот текст в любом текстовом редакторе (можно и в Dreamweaver в режиме отображения кода), сохраните его в файле под именем 5.1.htm и откройте в Web-обозревателе. То, что вы увидите, показано на рис. 5.1.

Рис. 5.1. Фигурный текст неправильно отображается Web-обозревателем

Да уж, мягко говоря, не то... Но не надо ругать Web-обозреватель: он всего лишь программа, следующая заложенному в ней алгоритму. Давайте сделаем лучше. Заменим теги <р> и </р> на <PRE> и </PRE>, соответственно. Полученный файл сохраним под именем 5.2.htm и откроем в Web-обозревателе. Посмотрите на рис. 5.2 — совсем другое дело!

Рис. 5.2. Текст фиксированного формата отображается правильно

Web-обозреватель прекрасно знает свое дело. Ему нужно только правильно поставить задачу — и он ее решит.

Так вы поняли, что такое текст фиксированного формата? Все, что находится внутри парного тега <PRE>, Web-обозревателем переносится на страницу

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

А можно ли сделать такое в Dreamweaver? Конечно! Для этого просто наберите первую строку текста, который вы хотите превратить в текст фиксированного формата, и:

либо выберите пункт Preformatted в раскрывающемся списке Format редактора свойств;

либо выберите пункт Preformatted Text в подменю Paragraph Format меню Text;

либо выберите пункт Preformatted Text в подменю Paragraph Format контекстного меню.

Вот и все.

В тексте с фиксированным форматированием действуют все теги HTML. Например, вы можете раскрасить такой текст в разные цвета, поместить в нем изображение или гиперссылку, как и в обычном тексте.

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

<PRE>

+----+---------------------------------!------!------+

! №№ ! Проект ! Закончен? ! +

+----+--------------------------------+------------+

! 1 ! Свой домашний сайт ! Да !

+----+-------------------------------+-----------+

! 2 ! Сайт своей любимой кошки !

Нет, кошка ! ! ! ! убежала !

+----+-------------------------------+--- --------+

</PRE>

Вы можете сохранить его в HTML-файле и загрузить в Web-обозревателе. Даже несмотря на отсутствие тегов <HTML>, <HEAD> и <BODY>, он будет нормально отображаться. Да, это таблица, хотя и корявая. Именно такие таблицы были в ходу, когда HTML еще не имел инструментов для построения настоящих таблиц, и Web-дизайнерам приходилось ломать голову, как сделать "таблицу без таблицы".

Зачем мы все это рассматриваем? Ведь это, фактически, устаревший подход. Может быть и устаревший, но в некоторых случаях весьма актуальный. В частности, если вы имеете много текстовых файлов и хотите опубликовать их в Интернете, но не желаете заниматься трудоемким HTML-форматированием, то самый лучший вариант — заключить их содержимое в теги <PRE>. Так поступает Максим Мошков, когда выкладывает в свою интернет-библиотеку новые книги.

Простые таблицы

Ну все, пора переходить к настоящим таблицам. Хватит с нас корявого текста фиксированного формата!

Создание таблиц

Сначала, как обычно, создадим новую Web-страницу.

Пустую таблицу создать проще всего, нажав кнопку Insert Table (рис. 5.3) вкладки Common панели объектов (см. рис. 4.3). Также вы можете выбрать пункт Table меню Insert или нажать комбинацию клавиш <Ctrl>+<Alt>+<T>. В любом случае на экране появится диалоговое окно Insert Table, показанное на рис. 5.4.

Рис. 5.3. Кнопка Insert Table панели объектов

Рис. 5.4. Диалоговое окно Insert Table

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

В поле ввода Width задается ширина таблицы. Возможно задание ширины как в пикселах, так и в процентах от ширины родителя. В раскрывающемся списке, расположенном справа от этого поля ввода, вы должны будете выбрать пункт Percent (проценты) или Pixels (пикселы).

В поле ввода Border задается толщина границ таблицы в пикселах. По умолчанию она равна 1; вы можете ввести 0, чтобы убрать границы совсем.

В поле ввода Cell Padding задается расстояние между границей ячейки таблицы и ее содержимым в пикселах. По умолчанию оно равно 1.

Аналогично, поле ввода Cell Spacing служит для задания расстояния между границами отдельных ячеек. По умолчанию оно равно 2.

Изменяя значения полей ввода Cell Padding и Cell Spacing, можно получить интересные эффекты, например огромные промежутки между границами ячеек или полупустые ячейки, в самом центре которых съежился небольшой текст. Обычно такие эффекты используют в декоративных таблицах.

Задав значения в полях ввода, нажмите кнопку ОК. Мы не будем говорить, что именно вам нужно вводить — поэкспериментируйте сами. Так или иначе, наша первая таблица будет чисто учебной. Во всяком случае, у вас должно получиться что-то похожее на рис. 5.5. Сохраните эту таблицу в файле 5.3.htm.

Рис. 5.5. Наша первая таблица

Рис. 5.6. Таблица с заполненными ячейками

Теперь поставьте текстовый курсор в любую ячейку таблицы и наберите какой-нибудь текст. Повторите то же самое с любыми другими ячейками.

В одну из ячеек можете вставить графическое изображение из тех, что мы использовали в предыдущих занятиях. У вас получится нечто, похожее на рис. 5.6.

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

Кстати, даже если вы задали толщину границ таблицы равной нулю, Dreamweaver все равно будет отображать тонкую штриховую линию, чтобы помочь вам не потерять таблицу. Если эта граница вам мешает, и вы уверены, что справитесь без нее, отключите пункт-выключатель Table Borders подменю Visual Aids меню Views. Чтобы вернуть границы назад, просто включите этот пункт.

Работа с таблицами

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

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

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

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

Имейте, однако, в виду, что во всех этих случаях Dreamweaver присвоит размерам таблицы, строк и ячеек (смотря, чьи размеры вы изменяли) фиксированные значения. Но, опять же, если Web-обозревателю не будет хватать места в этих ячейках, он их увеличит.

Вообще, заданные вами размеры строк и столбцов, да и размеры самой таблицы, — не более чем рекомендация Web-обозревателю. Вы говорите ему: "Если получится, сделай размер такой-то ячейки таким-то, а если не получится — задавай его на свое усмотрение". Это стандартное поведение Web-обозревателя.

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

Предположим, вам необходимо добавить новую строку или новый столбец. Для этого поместите текстовый курсор в ячейку строки, над которой будет добавлена новая, и выберите пункт Insert Row в подменю Table меню Modify или контекстного меню. Также вы можете нажать комбинацию клавиш <Ctrl>+<M>. Для добавления столбца поставьте текстовый курсор в ячейку, справа от которой будет добавлен новый столбец, и выберите пункт Insert Column в подменю Table меню Modify или контекстного меню. Если вы привыкли работать с клавиатурой, нажмите комбинацию клавиш <Ctrl>+ +<Shift>+<M>. Это простейшие и наиболее быстрые команды вставки строки или столбца.

Также вы можете воспользоваться пунктом Insert Rows or Columns подменю Table меню Modify или контекстного меню. После его выбора на экране появится диалоговое окно Insert Rows or Columns, показанное на рис. 5.7.

Рис. 5.7. Диалоговое окно Insert Rows or Columns (включен переключатель Rows)

С помощью переключателей группы Insert вы задаете тип объекта, который хотите вставить в таблицу. Переключатель Rows задает вставку строк, а переключатель Columns — столбцов.

В случае если выбран переключатель Rows, в поле счетчика Number of Rows задается количество вставляемых строк, а с помощью группы переключателей Where выбирается, где они будут вставляться. Переключатель Abovethe Selection вставит новые строки над текущей строкой (той, где стоит текстовый курсор), а переключатель Below the Selection — под текущей строкой.

В случае если выбран переключатель Columns, диалоговое окно принимает вид, показанный на рис. 5.8. При этом в поле счетчика Number of Columns задается количество вставляемых столбцов, а с помощью двух переключателей Where выбирается, где они будут вставляться. Переключатель Before
current Column вставит новые столбцы перед текущим столбцом (тем, где стоит текстовый курсор), а переключатель After current Column — за текущим столбцом.

Рис. 5.8. Диалоговое окно Insert Rows or Columns (включен переключатель Columns)

Строки или столбцы будут вставлены сразу после нажатия кнопки ОК.

У вас есть еще одна возможность вставить в таблицу новую строку или столбец — разделить текущую ячейку по горизонтали или по вертикали. В первом случае текущая строка делится на две или несколько строк, а во втором текущий столбец делится на два или несколько столбцов. Для того чтобы разделить ячейку таблицы, нажмите кнопку разделения ячейки, находящуюся в нижнем левом углу редактора свойств (рис. 5.9). Вы также можете выбрать пункт Split Cell в подменю Table меню Modify или контекстного меню либо нажать комбинацию клавиш <Ctrl>+<Alt>+<S>. В любом из этих случаев на экране появится диалоговое окно Split Cell, показанное на рис. 5.10.

Рис. 5.9. Кнопка разделения ячейки редактора свойств

Рис. 5.10. Диалоговое окно Split Cell

Группа переключателей Split Cell Into задает, как будет делиться ячейка. Переключатель Rows задает разделение текущей строки на несколько строк, количество которых устанавливается в поле счетчика Number of Rows. Если же выбран переключатель Columns, текущий столбец будет делиться на несколько столбцов, количество которых задается в поле счетчика Number of Columns. После нажатия кнопки ОК текущая ячейка будет разделена.

Ненужные строки и столбцы удаляются еще проще. Для удаления текущей строки либо выберите пункт Delete Row в подменю Table меню Modify или контекстного меню, либо нажмите комбинацию клавиш <Ctrl>+<Shift>+<M>. Для удаления текущего столбца либо выберите пункт Delete Column в подменю Table меню Modify или контекстного меню, либо нажмите комбинацию клавиш <Ctrl>+<Shift>+<->.

Формирование таблиц

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

На первом этапе создается сама таблица и задаются ее параметры (ширина, толщина границы и т. п.). Это уже нам знакомо — посмотрите на рис. 5.4, где изображено диалоговое окно Insert Table. Все задаваемые в нем параметры и есть параметры таблицы.

Примечание

Таблица создается с помощью парного тега <TABLE>, имеющего множество атрибутов, из которых мы выделим WIDTH, задающий ширину таблицы, и HEIGHT, задающий ее высоту.

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

Примечание

Строка таблицы создается с помощью парного тега <тr>. Высота строки задается атрибутом HEIGHT. Тег <тr> может появляться только внутри тега <TABLE>.

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

Примечание

Ячейка таблицы создается с помощью парного тега <тd>. Ширина ячейки задается атрибутом WIDTH. Тег <тd> может появляться только внутри тега <тr>.

Последний, четвертый, этап — это помещение в ячейки полезного содержимого. Запомните, что это содержимое может находиться только в ячейках таблицы (тег <TD>), но никак не в строках (<tr>) или самой таблице (<TABLE>). Если вы нарушите это правило, HTML-код может отобразиться Web-обозревателем неверно.

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

Давайте приведем HTML-код таблицы. Он послужит нам хорошей иллюстрацией к вышесказанному.

<TABLE> <TR> <TD>

Содержимое ячейки </TD> <TD>

Содержимое ячейки </TD> </TR> <TR> <TD>

Содержимое ячейки </TD> <TD>

Содержимое ячейки </TD> </TR>

</TABLE>

Форматирование таблиц

Ну вот, как работать с таблицами, мы разобрались. Теперь пора изучить средства, предлагаемые HTML для форматирования таблиц. Но сначала нужно выяснить, как выделить в окне документа Dreamweaver нужный элемент нашей таблицы.

Выделение элементов таблиц

Обратимся к Dreamweaver, а именно к нашей учебной страничке 5.3.htm. Откроем ее, поместим текстовый курсор в одну из ячеек и посмотрим на секцию тегов. Мы увидим там что-то, похожее на

<BODY><TABLE><TR><TD><P>

Тега <р> может и не быть (это содержимое ячейки), а на тег <BODY> мы отвлекаться не будем. Обратим внимание на уже знакомые нам теги, задающие отдельные части таблицы.

Щелкнем мышью по тегу <td>. Ячейка, где стоит текстовый курсор, будет выделена толстой черной рамкой. Теперь вы можете производить какие-либо манипуляции с этой ячейкой, в частности задать значения ее параметров. Теперь щелкните по тегу <td> в секции тегов. В этом случае будет выделена вся строка, в которой находится текущая ячейка. Ну и нажатие на тег <TABLE> выделяет всю таблицу.

Есть и другие способы выделить таблицу, строку или целый столбец сразу.

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

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

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

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

Также разработчики Dreamweaver предусмотрели еще один, самый быстрый способ выделить всю таблицу. Поставьте текстовый курсор в любую ячейку таблицы и выберите пункт Select Table подменю Table меню Modify или контекстного меню или просто нажмите комбинацию клавиш <Ctrl>+<A>.

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

Таким образом вы можете добраться до любой из составных частей вашей таблицы.

А теперь поговорим, что нам предлагает редактор свойств Dreamweaver.

Параметры ячейки

Чтобы добраться до параметров ячейки, совсем не обязательно ее выделять. Просто поставьте в нее текстовый курсор, и редактор свойств тотчас предложит вам задать ее параметры (рис. 5.11).

Рис. 5.11. Вид редактора свойств при выделенной ячейке таблицы

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

Раскрывающийся список Horz позволяет задать горизонтальное выравнивание содержимого ячейки. Здесь доступны четыре пункта:

Default — выравнивание по умолчанию, обычно по левому краю, в некоторых случаях — по центру;

Left — выравнивание по левому краю;

Center — по центру;

Right — по правому краю.

Аналогично раскрывающийся список Vert задает вертикальное выравнивание содержимого ячейки. Здесь доступно пять пунктов:

Default — выравнивание по умолчанию, обычно посередине;

Тор — выравнивание по верху;

Middle — посередине;

Bottom — по низу;

Baseline — по базовой линии.

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

Флажок NoWrap запрещает перенос строк внутри ячейки. В этом случае ячейка растягивается по ширине, чтобы вместить весь имеющийся в ней текст, который в этом случае будет "вытянут" в одну строку. Обычно Web-обозреватель растягивает ячейку по ширине только в самом крайнем случае, если в тексте встретится очень длинное слово, а вместо этого растягивает ее по вертикали и переносит текст по строкам. Используйте этот параметр только для декоративных целей и с большой осторожностью, иначе ваша таблица может оказаться столь широкой, что пользователю придется прокручивать ее по горизонтали. А слишком широкие таблицы, не помещающиеся в окне Web-обозревателя, — очень плохой стиль в Web-дизайне (рис. 5.12).

Рис. 5.12. Вид таблицы при включенном флажке No Wrap

Флажок Header позволит отформатировать ячейку, в которой находится текстовый курсор, как ячейку заголовка таблицы. Ячейка заголовка отличается от обычной ячейки тем, что ее содержимое выравнивается по центру и отображается жирным шрифтом. Используйте этот параметр только для ячеек первой строки таблицы, содержащей ее "шапку"; в этом случае лучше всего отформатировать таким образом все ячейки строки (например, как показано на рис. 5.13).

Примечание

Ячейка заголовка таблицы создается с помощью тега <th>, аналогичного <td>.

Поле ввода Bg служит для задания имени файла фонового изображения ячейки. Селектор цвета Bg (не путать с одноименным полем ввода!) позволяет задать цвет фона ячейки таблицы. Если ни то, ни другое не заданы, будет использован фон страницы.

Как видите, ячейка таблицы может иметь свое фоновое изображение и свой цвет фона, отличные от фонового изображения страницы. Это позволяет Web-дизайнерам создавать очень красивые графические эффекты: текстовые плашки, линейки и т. п. Однако, если вы собираетесь задать фоновое изображение и цвет фона для ячейки таблицы, следуйте рекомендациям, изложенным в главе 3. Селектор цвета Brdr позволяет задать цвет границы ячейки.

Рис. 5.13. Таблица со строкой заголовка

Параметры строки

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

Если ввести в поле ввода W какое-либо значение и нажать клавишу <Enter>, данное значение будет применено ко всем ячейкам таблицы. Используйте эту особенность, если хотите создать таблицу с ячейками одинаковой ширины. Но если вы зададите некорректное значение (например, 50% для таблицы из десяти столбцов), Web-обозреватель сам решит, какой ширины будет та или иная ячейка.

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

Если вы задали фоновое изображение (поле ввода Bg), цвет фона (селектор цвета Bg) или цвет границы (селектор цвета Brdr), значения этих параметров будут применены ко всем ячейкам выделенной строки. Естественно, вы можете изменить любой из названных параметров у любой ячейки. Посмотрите на рис. 5.14 — там для всей нижней строки был задан темно-серый фон, а для ячейки № 2.3 — белый.

Рис. 5.14. Результат установки разных цветов фона для всей нижней строки и ячейки № 2.3. Видно, как параметры ячейки перекрывают параметры строки

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

Параметры таблицы

Вид редактора свойств при выделенной таблице показан на рис. 5.15. Как видите, набор параметров здесь сильно отличается от набора параметров ячеек и строк. И это не удивительно.

Рис. 5.15. Вид редактора свойств при выделенной таблице

Сначала поговорим о знакомом.

Поля ввода Rows и Cols служат для быстрого изменения количества, соответственно, строк и столбцов таблицы.

Внимание!

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

Поля ввода W и Н служат для задания, соответственно, ширины и высоты таблицы. Эти значения могут быть заданы как в пикселах, так и в процентах относительно ширины или высоты родительского элемента страницы (элемента, в котором находится наша таблица; это может быть сама Web-страница или ячейка другой таблицы). Вам нужно просто выбрать в раскрывающихся списках, находящихся справа от соответствующего поля ввода, значение pixels (пикселы) или %.

Поле ввода Bg Image служит для задания имени файла фонового изображения для всей таблицы. Селектор цветов Bg Color задает цвет фона таблицы, а селектор цветов Brdr Color — цвет границ таблицы. Все эти установки перекрываются аналогичными установками для ячейки (см. пример на рис. 5.16).

Рис. 5.16. Перекрытие параметров таблицы параметрами ячеек.

Для ячейки № 3.2 задан светло-серый фон, для ячейки № 4.1 — белая граница,

для всей таблицы — белый фон и черная граница

Поле ввода CellPad служит для задания расстояния между границей ячейки и ее содержимым в пикселах. Поле ввода CellSpace задает расстояние между границами находящихся рядом ячеек в пикселах. Поле ввода Border служит для задания толщины границы ячейки в пикселах. Все эти параметры мы задавали в диалоговом окне Insert Table (см. рис. 5.4).

Теперь рассмотрим параметры, с которыми мы еще не встречались, а если и встречались, то в приложении к другим элементам страницы.

Раскрывающийся список Align, как вы поняли, служит для задания горизонтального выравнивания таблицы.

Доступны четыре значения:

Default — выравнивание по умолчанию, обычно влево;

Left — выравнивание влево;

Center — по центру;

Right — вправо.

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

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

Рис. 5.17. Кнопки управления значениями ширины и высоты ячеек и строк таблицы

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

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

Внимание!

При этом будут сброшены также значения ширины и высоты самой таблицы.

Если вы закрыли редактор свойств или предпочитаете пользоваться меню, вы можете достичь того же эффекта, выбрав пункты Clear Cell Heights (стереть высоты строк) или Clear Cell Widths (стереть значения ширины ячеек) подменю Table меню Modify.

Теперь представим такой случай. Вы после долгих мучений выставили значения ширины ячеек и теперь довольны результатом. Но — все эти величины заданы в процентах! И теперь, если размеры таблицы изменятся, все значения ширины ячеек "поплывут", ведь они относительны, а не абсолютны. Как быть в этом случае?

Для этого служит средняя верхняя и средняя нижняя кнопки (рис. 5.17). Верхняя из них позволяет преобразовать относительные значения ширины ячеек в абсолютные, фиксированные. А нижняя то же самое выполняет с высотами строк. Аналогичного эффекта вы можете достичь, выбрав пункты Convert Widths to Pixels (преобразовать ширину ячеек в пикселы) или Convert Heights to Percents (преобразовать высоты в пикселы) подменю Table меню Modify.

Правая верхняя и правая нижняя кнопки (рис. 5.17) выполняют обратное преобразование — абсолютных значений (пикселы) в относительные (проценты). Опять же, верхняя кнопка проделывает это с шириной ячеек, а нижняя — с высотами строк. Также вы можете воспользоваться пунктами Convert Widths to Percent (преобразовать ширину ячеек в проценты) или Convert Heights to Percent (преобразовать высоты в проценты) подменю Table меню Modify.

Предопределенные форматы таблиц

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

Формат таблиц выбирается с помощью диалогового окна Format Table, показанного на рис. 5.18. Вызвать его можно, выбрав пункт Format Table в меню Command. Этот пункт меню доступен только тогда, когда вы выделите таблицу или хотя бы поставите текстовый курсор в ее ячейку.

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

Группа Row Colors позволяет задать цвета строк. Dreamweaver в этом случае предлагает вам задать цвета групп строк с чередованием (нечетная группа строк — одного цвета, четная — другого и т. п.) для лучшей читаемости больших таблиц с множеством строк. Селектор цвета First задает цвет нечетных групп строк, a Second — четных. Раскрывающийся список Alternate задает, сколько строк будет содержаться в каждой группе. Здесь доступно пять пунктов:

<do not alternate> — все строки имеют один цвет, заданный селектором цвета First;

Every Other Row — группы по одной строке;

Every Two Rows — по две строки;

Every Three Rows — по три строки;

Every Four Rows — по четыре строки.

Рис. 5.18. Диалоговое окно Format Table

Группа Top Row позволяет установить параметры первой строки таблицы, ее "шапки". Раскрывающийся список Align задает выравнивание текста: по левому краю (пункт Left), по центру (Center), по правому краю (Right) или по умолчанию (None). Раскрывающийся список Text Style задает стиль текста заголовка: обычный (пункт Regular), жирный (Bold), курсив (Italic) или жирный курсив (Bold Italic). Селекторы цвета Bg Color и Text Color служат для задания цветов, соответственно, фона и текста первой строки.

С помощью группы Left Col устанавливаются параметры левого столбца таблицы. Раскрывающиеся списки Align и Text Style вам уже знакомы.

Поле ввода Border задает толщину границы таблицы в пикселах.

Обычно Dreamweaver применяет все заданные здесь настройки к строкам и ячейкам таблицы. Но если вы включите флажок Apply All Attributes to TD Tags Instead of TR Tags, он будет применять их только к ячейкам.

Закончив подбор формата таблицы, нажмите кнопку ОК, чтобы закрыть окно и применить заданные параметры. Если вы нажмете кнопку Apply, то заданные вами параметры будут применены к таблице без закрытия окна.

Сортировка таблицы

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

Разработчики Dreamweaver значительно облегчили операцию сортировки таблиц. Все, что вам нужно сделать, - это выделить таблицу (или просто поставить в любую ячейку текстовый курсор) и выбрать пункт Sort Table в меню Commands. На экране появится диалоговое окно Sort Table, показанное на рис. 5.19.

Рис. 5.19. Диалоговое окно Sort Table

Номер первого столбца, по значениям которого будет производиться сортировка, задается в раскрывающемся списке Sort By. Все имеющиеся в нем пункты имеют вид Column <номер столбца>, так что просто выберите столбец с нужным номером.

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

которому должна производиться сортировка, находятся одни цифры, например номера строк:

4 26

1 12

34 27

Как видите, они расположены в беспорядке, т. е. таблица не отсортирована. Попробуем отсортировать ее. У нас получится следующее:

1

10

11

2

20 21

3

Порядок сортировки более чем странный и, уж конечно, неправильный. Но почему?

Дело в том, что сортировка велась по буквенному значению символов. В таком случае каждое число Dreamweaver рассматривает как набор символов. Внимательнее присмотритесь к отсортированной последовательности — ведь с этой точки зрения она правильная.

Но мы-то ожидали, что Dreamweaver отсортирует числа по их числовому значению. Однако прежде ему нужно дать соответствующие указания, для чего и предназначена группа элементов Order. Пункт Alphabetically левого раскрывающегося списка задает сортировку по буквенному значению символов, а пункт Numerically — по числовому значению. И если мы выберем второй пункт, наша гипотетическая таблица будет отсортирована, как и требовалось:

1

2 3

10

11

...

20 21

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

Второй раскрывающийся список группы элементов Order задает порядок сортировки. Пункт Ascending позволяет отсортировать столбец по возрастанию его значений, пункт Descending — по убыванию.

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

По умолчанию Dreamweaver при сортировке таблицы не затрагивает первую строку, где обычно находится ее заголовок, иначе говоря, "шапка". Но если вы включите флажок Sort Includes First Row, сортировка затронет и первую строку. Включите этот флажок, если ваша таблица не имеет "шапки", а полезные данные начинаются сразу с первой строки.

Флажки Sort THEAD Rows (If Any) и Sort TFOOT Rows (If Any) позволяют отсортировать заодно и строки, находящиеся в секции заголовка и "поддона" таблицы. Эти секции создаются с помощью парных тегов <THEAD> и <TFOOT> соответственно и могут, в принципе, обрабатываться Web-обозревателем особым образом. К сожалению, Dreamweaver не поддерживает создание этих секций — вам придется вставить нужные теги вручную.

Примечание

Теги <THEAD> и <TFOOT> объединяют строки (теги <tr>), которые должны находиться в нужной секции. Для создания секции "тела"таблицы, объединяющей строки, содержащие полезную информацию, служит аналогичный тег <TBODY>.

Выше мы рассмотрели предопределенные форматы, позволяющие быстро форматировать таблицы. Практически во всех этих форматах нечетные группы строк окрашиваются в один цвет, четные — в другой. Это достигается заданием соответствующих параметров для строк таблицы (соответствующих атрибутов тега <tr>). При сортировке таких таблиц параметры форматирования строк (в частности, цвет фона и текста) не будут переноситься вместе с данными строк, т. е. вся их расцветка останется на месте. Это очень удобно, т. к. пользователю не нужно будет переформатировать таблицу после каждой сортировки.

Однако может случиться так, что пользователь захочет переместить вместе с данными строк их параметры форматирования. Это может быть полезно,

например, если пользователь выделяет какие-то данные в таблице отдельным цветом. Для такого случая предусмотрен флажок Keep TR Attributes With Sorted Row. Достаточно его включить, чтобы Dreamweaver начал переносить данные строк вместе с их форматированием.

Чтобы выполнить сортировку, нажмите кнопку ОК. Также вы можете нажать кнопку Apply, чтобы выполнить сортировку, не закрывая окно Sort Table.

Вставка табличных данных

Да, конечно, создавать "с нуля" таблицы в Dreamweaver проще простого. Но что делать, если нужно поместить на Web-страницу таблицу, созданную в другой программе? Как Dreamweaver поможет нам в данном случае?

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

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

№№,Проект,Закончен?

1,Свой домашний сайт, Да

2,Сайт своей любимой кошки,"Нет, кошка убежала"

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

Файлы такого формата используются довольно часто и даже имеют свое название — CSV (Comma Separated Values — значения, разделенные запятыми). Они сохраняются с расширением csv и могут порождаться многими программами процессоров электронных таблиц и СУБД (систем управления базами данных), в частности Microsoft Excel и Microsoft Access.

Сохраним и мы нашу маленькую табличку в таком формате. Файл назовем 5.1.csv. Теперь создадим новую Web-страницу и попытаемся поместить сюда данные, только что сохраненные в CSV-файле.

Нажмите кнопку Tabular Data (рис. 5.20), находящуюся на закладке Common панели объектов. Вы также можете выбрать пункт Import Tabular Data подменю Table Objects меню Insert. При этом на экране появится диалоговое окно Import Tabular Data, показанное на рис. 5.21.

Рис. 5.20. Кнопка Tabular Data панели объектов

Рис. 5.21. Диалоговое окно Import Tabular Data

В поле ввода Data File вводится имя файла данных. Вы также можете нажать кнопку Browse, расположенную справа от этого поля ввода, и выбрать нужный файл в стандартном диалоговом окне открытия файла Windows.

Раскрывающийся список Delimiter позволит вам выбрать разделитель значений. В нем доступны следующие пункты: Tab — знак табуляции, Comma -запятая, Semicolon — точка с запятой, Colon — двоеточие и Other — другой знак. Если вы выберете последний пункт, справа от списка появится небольшое поле ввода, где вы сможете ввести символ — разделитель значений.

Группа переключателей Table Width позволит вам задать ширину результирующей таблицы. Установив переключатель Fit to Data, вы предоставляете Web-обозревателю право самому задать ширину таблицы. Переключатель Set позволяет вам жестко задать ширину таблицы. При этом в поле ввода, расположенном справа от этого переключателя, вы сможете ввести значение ширины. А в раскрывающемся списке, находящемся правее, задается единица измерения ширины: пикселы (пункт Pixels) или проценты (Percent).

Назначение полей ввода Cell Padding, Cell Spacing и Border уже вам известно. Мы рассматривали их ранее.

Раскрывающийся список Format Top Row позволяет вам задать, как будет форматироваться первая строка результирующей таблицы (обычно там находится заголовок таблицы). Здесь доступны четыре пункта: [No Formatting] — никак не форматируется, Bold — выводится жирным шрифтом, Italic — курсивом, Bold Italic — жирным курсивом.

Закончив установку параметров, нажмите кнопку ОК. И посмотрите, что получится. Как видите, Dreamweaver вполне сносно справился со своей задачей. Правда, как говорилось ранее, он изуродовал русский текст и вдобавок некорректно обработал значение в кавычках - воспринял запятую внутри него как разделитель и создал еще один столбец в таблице. Но все-таки, это лучше, чем ничего. И если вам нужно быстренько "перегнать" множество таблиц с числами в формат HTML, воспользуйтесь данной функцией.

Слияние ячеек таблиц

Мы научились работать с таблицами и их составными частями. Вы можете подумать, что это все. Отнюдь! Мы еще не рассмотрели такое мощное средство, как слияние ячеек.

Что это такое, проще всего объяснить на примере.

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









1 2 3 4 5

6 7 8 9 10

11 12 13 14 15

16 17 18 19 20







Рис. 5.22. Простая таблица

Все это очень просто и прекрасно вам знакомо. Теперь давайте рассмотрим более сложную таблицу (рис. 5.23).

Здесь вы видите, что некоторые ячейки объединены, слиты в одну (об этом говорит знак "плюс" между их номерами). Такой прием называется слиянием ячеек. Как видите, ячейки могут быть слиты по горизонтали и по вертикали. И количество ячеек, соединяемых в одну, не ограничено.

1+6 2+3 4+5
7 8 9 10
11 12+13+14+15
16 17 18 19 20

Рис. 5.23. Более сложная таблица

Но как это сделать на Web-странице? Поддерживает ли HTML слияние ячеек? Конечно, поддерживает, иначе мы не стали бы вам об этом рассказывать.

Давайте откроем новое окно Dreamweaver и поместим в него простую таблицу в пять столбцов и четыре строки, аналогичную рис. 5.22. Не будем мудрить с форматированием и просто пронумеруем ячейки таблицы, чтобы было легче в ней ориентироваться (как в вышеприведенном примере). Сохраним полученную таблицу под именем 5.4.htm (рис. 5.24).

Рис. 5.24. Изначальная таблица, готовая к слиянию ячеек

Теперь давайте скажем Dreamweaver, какие ячейки мы хотим соединить. Пусть, например, это будут ячейки 2 и 3, как на рис. 5.23. Выделите их. И обратите внимание на редактор свойств. В его левом нижнем углу находится кнопка, изображенная на рис. 5.25.

Рис.5.25. Кнопка слияния ячеек редактора свойств

С помощью данной кнопки и производится слияние ячеек. Нажмите ее. На рис. 5.26 показано, что получится в этом случае.

Рис. 5.26. Таблица, получившаяся после слияния ячеек 2 и 3

Вместо того чтобы нажимать эту кнопку, вы можете выбрать пункт Merge Cells подменю Table меню Modify или контекстного меню либо нажать комбинацию клавиш <Ctrl>+<Alt>+<M>.

Теперь поместите текстовый курсор в ячейку 4. Мы сольем ее с ячейкой 5. Для этого выберите пункт Increase Column Span подменю Table меню Modify или контекстного меню либо нажмите комбинацию клавиш <Ctrl>+ +<Shift>+<]>. Ячейки 4 и 5 сольются в одну. Это еще один способ слияния ячеек по горизонтали, самый быстрый, но позволяющий слить за один раз только две ячейки.

Остается соединить четыре ячейки — 12, 13, 14 и 15 — в одну. Выполните это одним из только что рассмотренных способов.

Как видите, все очень просто. И это заслуга Dreamweaver.

Итак, мы узнали, как выполняется слияние ячеек по горизонтали. Осталось рассмотреть, как ячейки таблицы сливаются по вертикали. В частности, нам нужно слить ячейки 1 и 6. Опять же вы можете выделить их и нажать кнопку слияния, показанную на рис. 5.25. Либо вы можете поставить текстовый курсор в ячейку 1 и выбрать пункт Increase Row Span подменю Table меню Modify или контекстного меню. Здесь тоже все просто.

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

если выполнялось слияние по горизонтали, выбрать пункт Decrease Column Span подменю Table меню Modify или контекстного меню либо нажать комбинацию клавиш <Ctrl>+<Shift>+<[>;

если выполнялось слияние по вертикали, выбрать пункт Decrease Row Span подменю Table меню Modify или контекстного меню.

Примечание

Слияние ячеек задается с помощью атрибутов COLSPAN и ROWSPAN тега <то>. Атрибут COLSPAN задает слияние по горизонтали, а атрибут ROWSPftN — по вертикали. В качестве значения атрибута задается количество соединяемых ячеек.

Давайте приведем HTML-код нашей таблицы, чтобы понять, как работают атрибуты COLS PAN и ROWS PAN. После определений ячеек, использующих их, приведем подробные комментарии. Это пригодится, если вы захотите отредактировать полученный код вручную, да и просто для понимания принципов работы Dreamweaver:

<table width="75%" border="l">

<tr>

<!— Определяем ячейки первой строки —>

<!— Соединяем ячейки 1 и 6 по вертикали —>

<td rowspan="2">l+6</td> <!— Соединяем ячейки 2 и 3 по горизонтали —>

<td colspan="2">2+3</td> <!— Соединяем ячейки 4 и 5 по горизонтали —>

<td colspan="2">4+5</td> </tr>

<tr>

<!— Определяем ячейки второй строки. Заметьте, что здесь нет определения ячейки 6, т. к. она уже соединена с первой (см. определение ячеек первой строки). —>

<td>7</td>

<td>8</td>

<td>9</td>

<td>10</td> </tr>

<tr>

<!— Это третья строка. Здесь всего две ячейки: одиннадцатая и большая ячейка, образованная слиянием ячеек 12-15. —>

<td>ll</td>

<td colspan="4">12+13+14+15</td> </tr>

<tr>

<!— Последняя строка самая простая. Здесь вообще нет никаких слияний —>

<td>16</td>

<td>17</td>

<td>18</td>

<td>19</td>

<td>20</td> </tr>

</table>

Как вы уже заметили, слияния ячеек делают HTML-код таблицы крайне запутанным, а ошибки в нем — исключительно трудновыявляемыми. И куда делась былая стройность HTML-таблиц, воскликните в ужасе вы! Можно ли как-нибудь избежать этого хаоса тегов и атрибутов, определяющих слитые ячейки, этих ужасных ошибок, которые в нем таятся?

Можно. Достаточно просто обойтись без таблиц или, по крайней мере, не создавать в них слитых ячеек. Ну а уж если вам понадобится таблица, то используйте для ее построения Dreamweaver, ведь он, в отличие от Web-дизайнеров, никогда не делает ошибок в HTML-коде. Именно так поступают опытные Web-разработчики, когда им нужна сложная и громоздкая таблица. Автор настоятельно рекомендует поступать так и вам.

Использование таблиц

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

Стандарт HTML также позволяет вам поместить в ячейку таблицы все, что пожелаете, в том числе и другую таблицу. Поверьте, но Web-дизайнеры такое вытворяют с таблицами, что диву даешься. Многократная вложенность, всевозможные хитрости с параметрами, сложнейшие цветовые настройки, невидимые границы — просто высший пилотаж таблицестроения. В результате Web-страница становится больше похожей на газету: несколько колонок, оглавление, текст и изображения в рамках, линейки, красивый заголовок, сделанный без применения графики. И ведь все это делается довольно просто — достаточно только понять принцип.

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

Текст в рамке

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

Итак, для страницы со списком увлечений мы хотим создать красивый заголовок с рамкой вокруг него, не используя при этом графику. Прежде всего, создадим новую Web-страницу — она и станет списком увлечений нашего гипотетического Ивана Ивановича. Сохраним ее в файле 5.5.htm. И перечислим параметры заголовка:

собственно, текст, который мы поместим в рамку (пусть это будет просто заголовок "Список увлечений");

расстояние между рамкой и помещенным в ней текстом (4 пиксела);

толщина рамки (8 пикселов);

цвет рамки (темно-синий);

размеры рамки (ширина — 100%, высота — 50 пикселов).

Итак, казалось бы, все предельно просто. Ведь что такое, в самом деле, текст, обведенный рамкой? Фактически это таблица, состоящая из одной ячейки, где и содержится нужный нам текст. Толщина ее границы равна толщине нашей рамки, то же самое с цветом. А расстояние между рамкой и содержимым единственной ячейки и даст нам промежуток между рамкой и текстом.

Просто, не спорим. Но это как раз та простота, которая хуже воровства. Если бы все Web-обозреватели обрабатывали атрибуты тегов <TABLE>, <TR> и <TD> одинаково, мы бы на этом и остановились. Но давайте все-таки доделаем наш текст в рамке и посмотрим, что получится.

Начнем с самой рамки, т. е. с таблицы. Поместите в нашу пустую Web-страницу таблицу шириной 100% и высотой 50 пикселов с темно-синей рамкой толщиной 8 пикселов. Параметр Cell Padding должен быть равен 8 пикселам, a Cell Spacing — нулю. Эта таблица должна содержать одну строку и один столбец. То, что у вас должно получиться, показано на рис. 5.27.

Рис. 5.27. Рамка без текста

Теперь нам осталось вписать в получившуюся рамку нужный текст. Поставьте текстовый курсор в единственную ячейку таблицы и наберите требуемый текст. Отформатируйте его как заголовок первого уровня и выровняйте по центру. Возможно, таблица немного растянется по вертикали, чтобы вместить весь текст. Можете включить флажок No Wrap, чтобы запретить перенос текста ячейки на другую строку. Получится нечто, напоминающее рис. 5.28.

Рис. 5.28. Готовый заголовок — текст в рамке

Вот и все, вроде бы. Сохраните получившуюся страницу и откройте ее в Internet Explorer. Кажется, все нормально: Internet Explorer показывает ее так же, как и Dreamweaver. Наша работа закончена?

Нет. Уже говорилось, что разные программы Web-обозревателей обрабатывают один и тот же код HTML по-разному. И если вы откроете нашу новую страницу в старой версии Navigator... Да что говорить — смотрите сами (рис. 5.29). Рамка состоит из двух половин: одна светлая, "освещенная", другая темная, "укрывшаяся в тени". Разве мы это хотели получить?! Нет, конечно, мы ничего не имеем против таких рамок — они даже по-своему оригинальны, но мы-то хотели получить однотонную рамку!

Рис. 5.29. Текст в рамке в окне Navigator 4.74.

Видно, что рамка разделена на две половины: светлую и темную

Что делать? Как заставить Navigator 4.74 отображать рамку нормально? Какой параметр таблицы или ячейки выставить?

К сожалению, ничто нам не поможет — таков уж этот Web-обозреватель... Нужно искать другой путь.

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

Так ведь это две вложенные таблицы!

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

Давайте выполним вышесказанное. Но прежде сотрем все содержимое страницы 5.5.htm. Для этого быстрее всего щелкнуть тег <BODY> в секции тегов и нажать клавишу <Del>.

Создадим новую таблицу шириной 100% и высотой 50 пикселов, с темно-синим фоном и толщиной рамки, равной нулю. Параметр Cell Padding должен быть равен 8 пикселам, a Cell Spacing — нулю. Эта таблица должна содержать одну строку и один столбец. Результат показан на рис. 5.30.

Рис. 5.30. Внешняя таблица

Теперь помещаем текстовый курсор в единственную ячейку этой таблицы и вставляем в нее вторую, внутреннюю, таблицу. Ее ширина и высота должны быть равны 100% (чтобы заполнить всю ячейку), параметр Cell Padding — 4 пикселам, толщина границы и Cell Spacing — нулю. Обязательно зададим белый цвет фона. Эта таблица содержит опять-таки одну ячейку. Готовая комбинация из двух таблиц — внешней и внутренней — показана на рис. 5.31.

Рис. 5.31. Готовая рамка для заголовка, состоящая из двух вложенных одна в другую таблиц

Теперь введем и отформатируем текст заголовка — и опять получим то, что показано на рис. 5.28. Но на этот раз наше творение будет нормально показываться даже в самых капризных Web-обозревателях. Можете проверить!

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

Текст в графической рамке

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

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

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

текст, который мы поместим в рамку, не изменился - "Список увлечений";

расстояние между рамкой и помещенным в нее текстом — 4 пиксела;

толщина рамки — 40 пикселов;

цвет рамки совпадает с общим тоном фонового изображения (в нашем случае светло-серый);

фоновое изображение — файл Wb02049_.gif, поставляемый в комплекте Microsoft Office 2000;

размеры рамки: ширина — 100%, высота не определена и устанавливается автоматически.

Графическая рамка для текста создается точно так же, как и цветная. За тем исключением, что для внешней таблицы мы зададим графический фон.

Сначала удалим содержимое страницы 5.5.htm. Если мы решили создать графическую рамку на странице со списком увлечений, пусть она станет окончательным вариантом ее заголовка.

Создадим внешнюю таблицу с шириной 100%, светло-серым фоном и толщиной рамки, равной нулю. Значение параметра Cell Padding устанавливаем 40 пикселов, а параметр Cell Spacing — ноль. Эта таблица должна содержать одну строку и один столбец. В качестве фонового изображения задаем подобранный файл. Полученный результат показан на рис. 5.32.

Теперь помещаем текстовый курсор в единственную ячейку этой таблицы и вставляем в нее вторую таблицу, также состоящую из одной строки и одного столбца. Ее ширина и высота должны быть равны 100% (чтобы заполнить всю ячейку), толщина границы и параметр Cell Spacing — 0, параметр Cell

Padding — 4 пиксела. Не забудьте задать для нее белый фон. Полученный результат показан на рис. 5.33.

Рис. 5.32. Внешняя таблица с графическим фоном

Рис. 5.33. Графическая рамка, состоящая из двух вложенных таблиц

Остается только вписать в ячейку внутренней таблицы нужный текст, отформатировать его и насладиться результатом (рис. 5.34).

Рис. 5.34. Готовый заголовок в графической рамке

Вот так мы создали красивый заголовок для нашей Web-страницы. Сохраните страницу и задайте ее параметры (цвет фона, текста и т. п.), как и у ранее созданных нами двух страниц. Ведь мы должны соблюдать единство стиля, помните?

К сожалению, здесь мы столкнемся с еще одной причудой старых версий Navigator. Давайте откроем в нем нашу Web-страницу и посмотрим, как он ее отобразит. Результат показан на рис. 5.35.

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

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

Решение данной проблемы таково: найдите для внутренней таблицы соответствующее фоновое изображение. После этого Navigator отобразит внутреннюю таблицу правильно. Вы также можете найти или создать универсальный инструмент решения почти всех проблем Web-дизайнера — прозрачное графическое изображение размером 1x1 пиксел, сохраненное в формате GIF, так называемый "однопикселъный GIF". Если вы зададите его в качестве фона внутренней таблицы, все будет отображаться в Navigator без искажений.

Но если у вас нет прозрачного GIF-изображения такого размера, не унывайте. Для того чтобы Navigator нормально отобразил внутреннюю таблицу, в режиме HTML-кода допишите в тег <TABLE> атрибут BACKGROUND с пустой строкой в качестве значения:

<TABLE BACKGROUND=""> </TABLE>

Странный, даже глупый прием, но он на самом деле действует.

Текст с отступами

Следующий интересный прием, помогающий немного оживить Web-страницу, — это размещение текста с отступами слева и (или) справа. Иногда слева, справа, сверху и (или) снизу помещают линейки, черные или цветные. Дизайнеры, работающие с пакетами настольных издательских систем, используют отступы и линейки так часто, что разработчики таких программ даже включили в них средства быстрого создания подобных эффектов. Однако HTML такого не поддерживает...

Хотя, почему не поддерживает? Ведь в главе 3 мы поместили текст с авторскими правами с отступом слева. И там же мы поместили горизонтальную линию, разбив текст на логические части. Как вы помните, это достигается, соответственно, помещением текста внутрь парного тега <BLOCKQUOTE> и вставкой одинарного тега <HR>. И все это прекрасно работает!

Да, работает. Но не всегда так, как нам хотелось бы. Например, тегом <HR> вам никогда не удастся вставить в текст вертикальную линию. А величину отступа, задаваемого тегом <BLOCKQUOTE>, вы никак не сможете отрегулировать — Web-обозреватель сам выберет ее как бог на душу положит. И уж никак вы не сможете задать этим тегом отступ справа, а не слева.

Что делать? Продолжать завидовать пользователям издательских пакетов?

Нет. Есть способ лучше. Давайте подумаем, не смогут ли нам и в этом помочь таблицы.

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

<BLOCKQUOTE>.

Давайте откроем страницу 5.5.htm и добавим ниже сделанного нами ранее заголовка вступление, описывающее, что находится на этой странице. Поставьте текстовый курсор правее заголовка и дважды нажмите клавишу <Enter>. После этого под заголовком будут созданы два новых абзаца, в нижнем из которых мы и поместим наш текст с отступом. Два абзаца нужны для того, чтобы между заголовком и текстом вступления было пустое пространство.

Теперь поместите на место, где сейчас находится текстовый курсор, таблицу. Параметры ее будут таковы: ширина — 100%, высота не определена, одна строка и три столбца, цвет фона не задан (будет использован фон страницы), толщина границы — 0. В среднюю ячейку впишем нужный текст и отформатируем его. Ширина боковых ячеек- 100 пикселов, а средняя ячейка пусть займет все остальное пространство (в поле ввода W ничего не вводите). То, что у вас должно получиться, показано на рис. 5.36, Сохраните страницу и выведите ее в окне Web-обозревателя для предварительного просмотра.

Рис. 5.36. Готовый текст с отступами

Это простейший случай текста с отступами. Теперь давайте рассмотрим случаи посложнее.

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

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

Если вам нужна горизонтальная линейка, вы можете вставить в ячейку таблицы обычную горизонтальную линию HTML, создаваемую с помощью тега <hr>. Например, на рис. 5.37 мы поместили две такие линии в ячейку таблицы, где находится вступление. Мы убрали у них тень, выключив флажок Shading редактора свойств, — так красивее.

Рис. 5.37. Горизонтальные линейки в ячейке таблицы

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

Давайте подумаем, что такое линейки. Это тонкие полосы черного (или другого) цвета, отделенные от текста некоторым пустым пространством.

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

Итак, пусть наши линейки имеют толщину 4 пиксела и закрашены черным. А пространство между линейкой и текстом пусть будет равно 6 пикселам.

Поместим текстовый курсор в левую ячейку нашей таблицы и нажмем кнопку разделения ячеек. В появившемся на экране диалоговом окне разделения ячеек выберем переключатель Columns и в поле счетчика Number of Columns введем 3 (т. к. хотим разделить ячейку по вертикали натрое). Поместим текстовый курсор в самую правую ячейку (она станет пустым пространством) и зададим ее ширину — 6 пикселов. Далее поместим текстовый курсор в ячейку, что находится левее (она станет линейкой), зададим ширину — 4 пиксела и черный цвет фона. Остается поставить текстовый курсор в самую левую ячейку (отступ) и вновь задать ее ширину — 100 пикселов, т. к. Dreamweaver изменил ее, когда делил одну ячейку на три. Но лучше всего задать ширину этой ячейки не 100, а 90 пикселов, с учетом толщины линейки и пространства между ней и текстом. Не стоит ужимать текст за счет декоративных элементов, пусть даже и очень красивых.

Сделали? Теперь повторите то же самое справа от текста, после чего сверьтесь с рис. 5.38, все ли правильно вы сделали.

Рис. 5.38. Текстовый абзац с вертикальными линейками

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

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

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

Сложные таблицы

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

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

Выход из этого положения? Вряд ли он существует... Конечно, программы Web-обозревателей постепенно приближаются к стандартам HTML, количество ошибок и несовместимостей в них уменьшается, а программы Web-редакторов становятся все "умнее" и проще в использовании. Но это не заменит обычной человеческой изобретательности. И Web-дизайн еще долго будет искусством (а зачастую -- просто шаманизмом) и вряд ли когда-нибудь, даже в отдаленном будущем, полностью превратится в технологию.

Конечно, со временем к вам придет опыт, появятся свои наработки, свой стиль. Это вам сильно поможет в работе. Также очень помогает общение с другими, даже не обязательно более опытными Web-дизайнерами. Ведь давно ясно, что все сложности лучше решать сообща.

Посмотрите, например, на рис. 5.39. Это список увлечений нашего гипотетического героя. Давайте воплотим его в HTML.

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

Примечание

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

Посмотрите хорошенько на рис. 5.39. Что вы видите? В первую очередь, большую таблицу из четырех ячеек. В этих ячейках располагаются четыре вложенные таблицы, отформатированных различным образом. Две из них представляют собой секции таблицы: "Компьютеры" и "Прочие", а две другие — заголовки названных секций. Это логическая структура таблицы, и ее тоже нужно хорошо себе представлять. Но нас в данный момент больше интересует физическая структура, описывающая, как отформатированы все эти вложенные таблицы.

Рис. 5.39. Список увлечений Ивана Ивановича Иванова

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

одна строка, один столбец, черный фон;

три строки, три столбца, белый фон, невидимая граница;

одна строка, один столбец, черный фон;

две строки, три столбца, белый фон, невидимая граница.

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

Итак, параметры форматирования вложенных таблиц мы выяснили. Осталось определить параметры внешней таблицы. А они таковы (напишите их на том же листе бумаги):

четыре строки и один столбец;

толщина границы должна быть равна нулю;

параметр Cell Padding равен двум пикселам. Если мы хотим сделать видимую границу, то должны прибегнуть к приему, описанному ранее;

цвет фона — черный.

Опять же, мы не стали выяснять малозначительные параметры. Выясним их позднее.

Казалось бы, все ясно. Пора приступать к работе над таблицей. Но не стоит торопиться. Давайте еще раз хорошенько посмотрим на нашу таблицу и перечитаем ее (и вложенных таблиц) параметры. Подумаем, что можно улучшить.

Во-первых, можно вообще не задавать для вложенных таблиц границу, т. е. приравнять ее нулю. Этим мы немного уменьшим размер HTML-кода таблиц и устраним возможные проблемы с отображением.

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

Такой процесс тонкой отладки и подгонки HTML-кода называется оптимизацией. Оптимизация ставит своей целью уменьшение размера кода (оптимизация по размеру), уменьшение времени вывода страницы Web-обозревателем (оптимизация по скорости) либо то и другое одновременно. (Оптимизация применяется не только в Web-дизайне, но и в обычном программировании, однако разговор сейчас не об этом.) Если вы всерьез собираетесь заниматься Web-дизайном, старайтесь всегда найти минутку, чтобы "поколдовать" над HTML-кодом. Как правило, после оптимизации код действительно становится компактнее и быстрее.

И еще. Оптимизация — процесс творческий. Его невозможно автоматизировать, как нельзя переложить на плечи машин, скажем, стихосложение или зодчество. Конечно, "умный" Dreamweaver создает достаточно компактный код, но вмешательства человека не заменит никакая, даже самая совершенная программа. Если только, конечно, всех Web-дизайнеров не переведут в виртуальную реальность...

А вот теперь можно браться за мышь. Откроем страничку 5.5.htm, если она закрыта, и поставим текстовый курсор после текста вступления. Если вы хотите сделать промежуток между таблицей и текстом вступления больше, создайте еще один пустой абзац, нажав клавишу <Enter>. Разверните окно документа Dreamweaver на весь экран — у нас получится довольно большая таблица.

Прежде всего, разумеется, создадим внешнюю таблицу. Она будет состоять из четырех строк и одного столбца. Задайте ей черный цвет фона, невидимую границу (если вы не помните, граница становится невидимой в том случае, когда ее толщина равна нулю), параметр Cell Padding, равный двум пикселам, и Cell Spacing, равный нулю. Ширина таблицы пусть останется 100%. После всего этого у вас должно получиться что-то, похожее на рис. 5.40.

Рис. 5.40. Внешняя таблица, которая потом станет списком увлечений

Теперь давайте создадим заголовок первой секции (первую вложенную таблицу). Поместите текстовый курсор в первую ячейку. Вставьте в нее таблицу, имеющую следующие параметры: одна строка и один столбец, невидимая граница. Ширина и высота таблицы пусть будут равны 100% — вложенная таблица должна заполнить ячейку целиком. Параметр Cell Padding оставьте равным двум пикселам, чтобы текст ячейки не прижимался вплотную к границе, а параметр Cell Spacing пусть будет равен нулю. Цвет фона не задавайте. Поместите в единственную ячейку этой таблицы текст и отформатируйте его, как вам нравится, но при этом обязательно задайте для него белый цвет, иначе пользователь ничего не увидит. Результат показан на рис. 5.41.

Рис. 5.41. Заголовок первой секции списка увлечений

Теперь очередь за первой секцией (вторая вложенная таблица). Поставьте текстовый курсор во вторую ячейку и поместите туда таблицу. Ее параметры: три строки и три столбца, опять же невидимая граница, белый фон. Ширину и высоту установите в 100%, параметр Cell Padding — 2 пиксела, а Cell Spacing — ноль. После этого заполните таблицу текстом, измените размеры ячеек так, чтобы таблица имела минимальный размер. Задайте для всех ячеек вертикальное выравнивание по верху — так ваша таблица будет больше похожа на печатный документ. Полученный результат можно видеть на рис. 5.42.

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

Рис. 5.42. Готовая первая секция списка увлечений

Поместите текстовый курсор в единственную ячейку первой вложенной таблицы и щелкните тег <TABLE> в секции тегов. Первая вложенная таблица будет выделена. Нажмите комбинацию клавиш <Ctrl>+<C>, чтобы скопировать ее в буфер обмена Windows (или сделайте это другим образом, благо Dreamweaver предоставляет целых три способа). Теперь поместите текстовый курсор в третью ячейку внешней таблицы и нажмите комбинацию клавиш <Ctrl>+<V>, чтобы вставить сюда содержимое буфера обмена. В третью ячейку будет вставлена точная копия первой вложенной таблицы; вам нужно будет только изменить находящийся в ней текст. Точно так же поместите в четвертую ячейку копию второй вложенной таблицы, удалите лишнюю строку и впишите в ее ячейки нужный текст. Окончательный вид страницы со списком увлечений представлен на рис. 5.43.

Отлично! Мы получили то, что хотели. Можете просмотреть готовую страницу в Web-обозревателе. И не забудьте сохранить плоды ваших трудов на диске.

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

Собственно, это даже не ошибка. Так, просто неоптимальная структура таблиц. Точнее, две лишние таблицы. Догадались, какие? Правильно, это первая и третья вложенные таблицы — заголовки секций. Посмотрите на них внимательнее — обе содержат только одну ячейку. И содержимое этой ячейки можно просто перенести в ячейку внешней таблицы без малейшего изменения внешнего вида таблицы.

Это тоже оптимизация. И на этот раз более серьезная.

Рис. 5.43. Готовый список увлечений

Вместо того чтобы "тыкать" мышью в окно документа, мы отредактируем HTML-код. Откройте окно кода или переключитесь в режим отображения кода. Найдите следующий фрагмент:

<table width="100%" border="0" cellspacing="0" cellpadding="2" bgcolor="#000000">

< ! — Это определение внешней таблицы — >

<tr> <td>

< ! — Это первая строка внешней таблицы и ее единственная ячейка — >

<table width="100%" border="0" cellspacing="0"

cellpadding="2" height="100%"> <! — Это внутренняя таблица — > <tr><td>

< ! — Это единственная строка и ячейка внутренней таблицы — >

<div align="center"> <font color="#FFFFFF">

<strong>Компьютеры</strong> </font>

<! — Это текст, содержащийся в единственной ячейке внутренней таблицы — >

</td> </tr> </table> < ! — Здесь кончается определение внутренней таблицы — >

</td> </tr> <!— А здесь кончается определение первой строки внешней таблицы —>

Сейчас мы вырежем несколько строк этого кода. Вот что получилось:

<table width="100%" border="0" cellspacing="0" cellpadding="2" bgcolor="#000000"> <tr><td>

<div align="center"><font

color="IFFFFFF"><strong>Компьютеры</strong></font></div> </td> </tr>

Как видите, мы удалили все определение внутренней таблицы, оставив только ее содержимое. Теперь переключитесь в режим отображения страницы и посмотрите, что получилось. Замечательно, нам даже ничего не нужно подправлять! Аналогично измените HTML-код, связанный с третьей ячейкой и третьей вложенной таблицей. Сделайте это самостоятельно — это будет лучшей практикой.

Все, наша оптимизация закончена! А страница списка увлечений Ивана Ивановича полностью готова.

Составные изображения

Теперь поговорим еще об одном применении таблиц. А именно о составных изображениях.

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

Можно сделать так, как вы бы поступили с обычным графическим изображением, т. е. просто поместить его на страницу. А можно поступить иначе, как это часто делают опытные Web-дизайнеры: сделать составное изображение.

Что такое составное изображение! Ничего особенного, просто обычное изображение, но "разрезанное" на части, каждая из которых сохраняется в отдельном файле. Такие функции предлагаются всеми современными графическими пакетами, такими как Adobe Photoshop или Macromedia Fireworks.

В результате получается набор файлов — набор графических изображений-фрагментов.

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

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









1 2 3 4 4

5 6 7 8 9

10 11 12 12 12

13 14 15 Пусто Пусто

13 14 Пусто Пусто Пусто

13 15 Пусто Пусто Пусто







Рис. 5.44. Схема формирования составного изображения

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

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

Проблемы с таблицами и их решение

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

Общие недостатки таблиц и их преодоление

Итак, поговорим о недостатках таблиц... Да, у HTML-таблиц есть серьезные недостатки. Что ж, в мире нет ничего совершенного!..

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

Второй, и самый существенный, недостаток — очень медленные загрузка и отображение. Дело в том, что многие Web-обозреватели, в частности популярнейший Internet Explorer, просто физически не в состоянии вывести таблицу на экран, пока не загрузит ее целиком. А если таблица велика, то... да что вам рассказывать?! Неужели вы не видели в Сети страничек, содержащих таблицы совершенно диких размеров? И неужели вам никогда не надоедало ждать, пока этот монстр соизволит доползти до вас полностью и явится пред ваши очи?

Примечание

Разработчики Web-обозревателей Opera и Mozilla утверждают, что эти программы могут выводить таблицы на экран по мере загрузки.

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

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

Отображение таблицы может сильно замедлиться, если для нее или ее ячеек заданы относительные величины ширины и высоты. При этом Web-обозревателю сначала придется вычислить ширину и высоту родителя (самой Web-страницы или ячейки внешней таблицы). А точные значения ширины и высоты родителя он может получить только после того, как закончится обработка всей страницы, т. е. очень и очень нескоро. Здесь рекомендация может быть только одна: по возможности используйте абсолютные значения размеров таблиц и ячеек (но именно по возможности, а не всегда).

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

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

Иногда Web-обозреватель не может корректно показать ячейку таблицы, если в ней ничего нет, т. е. ее код — <TD></TD>. Особенно этим страдает Navigator. Для решения данной проблемы достаточно поместить внутрь такой ячейки символ неразрывного пробела   (как это делает по умолчанию Dreamweaver): <td> </td>. Правда, некоторые рекомендуют для этой же цели уже знакомый вам "однопиксельный GIF":

<TD><IMG SRC="lxl.gif"></TD>, НО ОБ ЭТОМ МЫ ПОГОВОРИМ НИЖЕ.

Если HTML-код таблицы содержит ошибки, будьте готовы, что Navigator выведет вам страницу без малейших следов этой самой таблицы. Вообще, Navigator исключительно чувствителен к ошибкам кода, в отличие от его "коллеги" Internet Explorer. Поэтому, если вы предпочитаете редактировать HTML-код таблиц вручную, тщательно проверяйте его на ошибки. А еще лучше: воспользуйтесь специальными программами проверки HTML-кода, которых сейчас довольно много на любом CD с программами. Ну и, конечно, радикальный выход из положения: воспользуйтесь для составления таблиц визуальным Web-редактором — он таких ошибок не сделает.

Проблемы с таблицами в старых версиях Navigator

А сейчас пора вплотную заняться Navigator.

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

Примечание

Новые версии Navigator (6.0 и 7.0) выводят все Web-страницы корректно. Так что к ним это не относится. Все, что сказано ниже, относится только к старым версиям Navigator, а именно популярным до сих пор многочисленным версиям 4.7*.

Итак, какие сюрпризы продолжают преподносить нам старые версии Navigator?

Сюрприз первый. Когда мы говорили, что некоторые Web-обозреватели некорректно отображают ячейки таблиц, не содержащие данных, мы имели в виду и Navigator, и Internet Explorer. Но если Internet Explorer просто отображает такую ячейку без рамки, то Navigator может изуродовать таблицу так, что сам удивится. В качестве решения этой проблемы мы рекомендовали поместить в ячейку, которая должна оставаться пустой, символ неразрывного пробела snbsp;. Сам Dreamweaver делает так, когда помещает на Web-страницу пустую таблицу. Однако в случае с Navigator это не поможет — ячейка все равно будет отображена некорректно. Радикальный способ вразумить строптивую программу - "однопиксельный GIF", с которым вы уже знакомы.

Сюрприз второй. И более серьезный.

Когда вы задаете абсолютное значение ширины для ячейки, Internet Explorer и Navigator ведут себя по-разному. Internet Explorer принимает заданную Web-дизайнером ширину как руководство к действию и пытается ее соблюдать. Само собой, если содержимое такой ячейки никак не будет в нее помещаться (например, если вы включили параметр No Wrap, в результате чего Web-обозреватель не сможет разбить длинную строку текста на более короткие), Internet Explorer все-таки изменит ее ширину. Но это крайний случай — в остальных случаях Internet Explorer весьма послушен.

Navigator в таком случае ведет себя гораздо строптивее. Установленную Web-дизайнером ширину ячеек он принимает как рекомендации, следовать которым абсолютно не обязательно. Реальная ширина ячейки вычисляется им самим, исходя из размеров таблицы и ее остальных ячеек, и практически всегда не равна тому, что вы задали. Заложенный разработчиками беспокойный дух творчества не дает ему покоя.

Но что делать, если вы хотите, чтобы ячейки таблицы во что бы то ни стало имели нужную ширину? Есть решение, правда, довольно экстравагантное. Используется все тот же "однопиксельный GIF", из которого создается своеобразная "распорка", мешающая ячейке "сплющиться". При этом атрибут WIDTH тега <td> (как вы помните, он задает ширину ячейки) не используется вообще, а ширина ячейки задается аналогичным атрибутом тега <IMG>.

Это лучше изучить на примере. Давайте рассмотрим небольшой фрагмент кода таблицы:

<TABLE> <TR>

<TD WIDТН="50">Ячейка 1</TD>

<TD WIDТН="100">Ячейка 2</TD>

<TD WIDТН="200">Ячейка 3</TD>

</TR> </TABLE>

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

Посмотрите на этот код:

<TABLE> <TR> <TD>

<IMG SRC="lxl.gif" HEIGHT="1" WIDTH="50"> <BR>

Ячейка 1 </TD> <TD>

<IMG SRC="lxl.gif" HEIGHT="1" WIDTH="100"> <BR>

Ячейка 2 </TD> <TD>

<IMG SRC="lxl.gif" HEIGHT="1" WIDTH="200"> <BR> Ячейка 3 </TD> </TR> </TABLE>

Все очень просто! Мы поместили в каждую ячейку "однопиксельный GIF" и задали его ширину с помощью атрибута WIDTH тега <IMG>. Разумеется, ячейка таблицы растянется так, чтобы его вместить. Высоту "однопиксельного GIF" (атрибут HEIGHT тега <IMG>) мы задали в один пиксел, чтобы он не влиял на содержимое ячеек. В свою очередь, чтобы содержимое ячейки не повлияло на ширину "однопиксельного GIF", мы отделили их друг от друга тегом разрыва строки <BR>.

Можете проверить — все это работает!

Вообще, Navigator 4.7* славится своими странностями. Большинство из них, конечно же, давно выявлено и документировано. Если вы хотите узнать о них и научиться их обходить, посетите соответствующие Web-сайты или пообщайтесь с опытными Web-дизайнерами.

Конечно, Internet Explorer также имеет свои странности и ошибки. Но их значительно меньше, чем у Navigator, и затрагивают они, в основном, систему безопасности. Не зря же компания Microsoft при разработке Internet Explorer 6.0 во главу угла поставила именно защиту данных. И недаром Internet Explorer, согласно данным статистики, используют 95% пользователей Интернета.

Что дальше?

Осталось сделать последнюю страницу — список завершенных проектов. Ну, это уже совсем просто! Рис. 5.45 является тому примером. Не надо мудрить с оформлением, просто сделайте элементарнейшую страничку с простейшей табличкой. Но не забудьте соблюсти единство оформления и сохранить готовую страницу в файле 5.6.htm.

Рис. 5.45. Страница списка законченных проектов

Итак, почти все страницы нашего сайта готовы (осталось только сделать страницу ссылок, но это потом). Теперь самое время узнать, как соединить все эти страницы в Web-сайт и как поместить его во Всемирную сеть. И чем нам в этом может помочь Dreamweaver.

A Dreamweaver — просто мастер на все руки. Мало того, что он предоставляет нам мощные инструменты объединения Web-страниц в Web-сайт, так еще и помогает опубликовать его. А какие дополнительные инструменты дает он при этом!.. Но автор не будет сейчас раскрывать вам все его секреты — читайте следующую глаГлава 6. Работа с Web-сайтом

Начала сайтостроения

Планирование сайта

Основные этапы планирования сайта

Логическая структура Web-сайта

Физическая структура Web-сайта

Публикация Web-сайта

Управление Web-сайтом в Dreamweaver

Регистрация сайта в Dreamweaver

Настройка прокси-сервера или брандмауэра

Панель Site

Работа с файлами сайта

Взаимодействие панели Site и окна документа

Абсолютные и относительные интернет-адреса

Проверка правильности ссылок и HTML-кода

Работа с сервером

Публикация сайта

Работа с копиями сайта

Дополнительные возможности работы с Web-страницами и Web-сайтами

Примечания

Активы

Список избранных элементов

Библиотека

Дополнительные возможности поиска и замены

Другие возможности

Что дальше?

ГЛАВА 6.

Работа с Web-сайтом

Итак, почти все страницы нашего Web-сайта созданы. Что дальше? А дальше — последний этап работы. Что он в себя включает?

Связывание всех Web-страниц гиперссылками.

Проверку корректности ссылок.

Публикацию сайта в Сети.

Вот о чем мы и будем говорить в этой главе. А еще о том, чем нам в данном случае может помочь Dreamweaver.

Но сначала нужно создать еще одну Web-страницу — список ссылок на "дружественные" Web-сайты. Не будем особо мудрить и поместим на нее ссылку на "домашний" сайт Macromedia (рис. 6.1). Отойдем от нашей обычной системы именования файлов Web-страниц и сохраним полученный файл под именем Links.htm.

Теперь все страницы готовы. Пора приступать к работе над сайтом.

Рис. 6.1. Страница со списком ссылок

Начала сайтостроения

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

Планирование сайта

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

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

Основные этапы планирования сайта

Вообще, этап планирования — важнейший в разработке любого сайта. Это справедливо и для простейшей домашней странички, и для гигантского сайта транснациональной суперкорпорации, такой как Intel или Coca-Cola. Поэтому, начиная планирование будущего сайта, лучше закройте Dreamweaver и даже выключите компьютер, чтобы не возникло соблазна сразу же засесть за "ваяние". На этом этапе вам понадобятся только карандаш и бумага или, если вы все-таки предпочтете компьютер, программа текстового редактора или специальный пакет проектирования сайта, наподобие Microsoft Visio.

Итак, что же нужно решить для себя перед началом работы над сайтом?

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

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

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

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

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

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

Проверить, ничего ли вы не забыли. Это последний этап планирования сайта, но не менее важный, чем остальные.

Вот и все основные этапы проектирования сайта. Теперь осталось рассмотреть подробнее, что такое логическая и физическая структуры сайта.

Логическая структура Web-сайта

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

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

Заставка Главная страница

Новости сайта

Раздел 1 Страница 1 Страница 2

Раздел 2 Страница 1 Страница 2

Сведения о разработчиках Контактные данные Карта сайта

Теперь поговорим о каждой составляющей сайта более подробно.

Заставка — это небольшая Web-страничка, появляющаяся на экране, как только пользователь набирает "домашний" адрес сайта, перед его главной страницей. Обычно на такой страничке помещается графический логотип сайта или его владельца. Часто такой логотип выполнен в виде фильма в формате Macromedia Flash. Поскольку такая заставка может загружаться очень долго, нужно предусмотреть небольшую, но заметную гиперссылку, щелкнув на которой посетитель сразу перейдет на главную страницу сайта.

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

Главная страница отображается, когда пользователь набирает "домашний" адрес сайта без указания имени файла какой-либо страницы (например, http://www.macromedia.com). Она содержит краткую вводную информацию о сайте, новости (необязательно) и набор гиперссылок, ведущих на другие страницы сайта. Также иногда на главной странице помещаются сведения о разработчиках и их правах и сведения о контакте с разработчиками и другими лицами и организациями, упомянутыми на сайте.

Главная страница — обязательный элемент любого сайта. Как правило, главную страницу стремятся делать не слишком большой, чтобы посетитель не ушел с сайта, не дождавшись ее загрузки. Но не следует впадать в другую крайность — делать главную страницу настолько "спартанской" по содержанию, что посетитель не сможет даже понять, куда он попал. Запомните, что главная страница должна давать посетителю достаточно информации о сайте, но при этом не перегружать его излишними сведениями и не выводить из себя ожиданием окончания загрузки. А это довольно сложная задача, и
даже известные ресурсы часто страдают катастрофическим "раздутием" главной страницы.

Главная страница нашего сайта— 3.1.htm. Давайте переименуем ее в default.htm — такое название чаще всего дают главным страницам.

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

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

Иногда, если сайт обновляется совсем редко или имеет небольшой объем, новости вообще не предусматриваются. Как, например, на нашем сайте.

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

Полезное содержимое нашего сайта — это страницы 5.4.htm, 5.5.htm и Links.htm. Переименуем первые две страницы в Passions.htm и Projects.htm соответственно.

Сведения о разработчиках могут помещаться как на отдельной странице, так и в особом отделе главной. Если разработчиков немного (или вообще один), более предпочтителен второй вариант. В таком случае сведения о них помещаются в самом низу главной страницы, рядом со сведениями об авторских правах. Если же разработчиков много или сведения о них достаточно объемные, лучше поместить их на отдельную страницу. Обязательно при этом укажите адрес электронной почты, по которому посетитель сайта сможет написать о проблемах, с которыми он столкнулся (незагружающиеся файлы, "пустые" изображения, "оборванные" ссылки, ошибки в тексте и т. п.). Иногда на странице вместе с остальными данными также помещаются фотографии разработчиков, но это уже, как говорится, на вкус и цвет.

Сведения о разработчике нашего сайта помещены на странице 4.1.htm. Переименуем ее в About.htm.

Сведения о контакте с владельцем сайта нужны, если данный сайт преследует рекламные цели. Например, если это торговый сайт, необходимо обязательно указать контактные данные, иначе никто из потенциальных клиентов ничего не сможет купить. В этом случае необходимы адреса как обычной ("бумажной" или, как говорят американцы, snail mail - "улиточной почты"), так и электронной почты, а также телефон, факс и пейджер. В общем, все данные, по которым могли бы обратиться потенциальные клиенты.

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

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

Так как наш сайт невелик по размерам, карты у него нет.

Физическая структура Web-сайта

Физическая структура сайта описывает размещение файлов и папок на диске компьютера.

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

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

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

сваленных как попало в одну папку. К тому же, вам будет проще обновлять файлы сайта, если вы "разбросаете" их по отдельным папкам.

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

<Корневая папка вашего сайта> default.htm download[s]

programl.exe

program2.zip

somefile.rar html[s]

pagel.htm

page2.html media

filml.avi

film2.swf

backgroundsound.mid pic[s]

picturel.gif

picture2.jpg

Вот такая структура. Как видите, файлы, в основном, организованы по типу: Web-страницы — в одной папке, графические файлы — в другой, мультимедийные — в третьей и т. д.

Корневой называется папка, в которой помещается ваш сайт. Запомните этот термин — мы часто будем использовать его в этой главе.

Файл default.htm, как вы поняли, — главная страница сайта. Этот файл почти всегда помещают в корневой каталог сайта.

В папке download[s] находятся файлы, не являющиеся ни Web-страницами, ни изображениями, ни мультимедийными данными. Это могут быть программы, файлы данных, архивные файлы и пр. Когда пользователь щелкает на гиперссылке, указывающей на такой файл, Web-обозреватель предлагает открыть его или сохранить на диске для последующего открытия. В любом случае, сам Web-обозреватель такие файлы не обрабатывает.

В папке html[s] помещаются сами Web-страницы.

В папке media находятся все мультимедийные файлы, используемые на страницах. Это фильмы в форматах AVI, Macromedia Flash и др., фоновая музыка в формате WAV, MIDI и т. п.

В папке pic[s] располагаются все графические изображения.

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

html[s] chepterl

pagel.htm

page2.htm chapter2

pagel.htm

page2.htm

pic[a]

chapter1

picturel.gif

picture2.jpg chapter2

picture1.gif

picture2.fla

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

Иногда встречается и принципиально иной способ физического структурирования сайта. Во главу угла при этом ставится не тип файла, а логическая структура.

Корневая папка вашего сайта> default.htm chapter1

pagel.htm

page2.htm

picturel.gif

picture2.jpg

chapter2

pagel.htm

page2.htm i

picturel.gif

picture2.fla

program1.exe

Может быть, вы найдете удобным структурировать ваш файл именно так. Но повторим, что такой способ весьма малоупотребителен.

Публикация Web-сайта

После того как сайт создан, его нужно опубликовать на Web-сервере. И сделать это можно тремя различными способами.

Первый способ самый простой, но далеко не всегда самый легкоосуществимый. Заключается он в том, что все файлы сайта переписываются на дискету или более емкий носитель информации (дискета Iomega Zip, магнитооптический диск, перезаписываемый диск CD-RW, лента стримера, обычный жесткий диск, в конце концов) и относится администратору Web-сервера. Администратор просто переписывает содержимое вашего носителя в соответствующую папку сервера и настраивает программное обеспечение. Вот и все.

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

Второй способ распространен очень мало. Некоторые бесплатные Web-серверы позволяют пользователю загрузить файлы его сайта через Web-обозреватель. Этот способ имеет всего одно довольно призрачное преимущество: простота загрузки. Пользователь вводит в поля ввода имена нужных файлов и нажимает кнопку Submit (Отправить). Недостатки: невозможность отправки количества файлов больше определенного лимита (обычно пяти), невозможность контролировать отправку файлов и крайняя ненадежность соединения при плохой связи.

Третий способ самый распространенный. На нем давайте остановимся подробнее.

Уже говорилось, что существует интернет-протокол FTP, используемый для передачи в сети файлов. Причем по FTP можно организовать передачу файлов как от FTP-клиента FТР-серверу, так и наоборот, от сервера клиенту. Особенностью протокола FTP является то, что клиент работает с FTP-сервером как с локальным диском своего компьютера; он может создавать, изменять и удалять файлы и папки, копировать и переносить файлы откуда угодно и куда угодно. (Правда, для этого нужно иметь разрешения на выполнение на дисках сервера каждой из этих операций.)

Эта особенность протокола FTP и легла в основу третьего и самого распространенного способа публикации Web-сайтов.

Заключается он в следующем. Администратор Web-сервера запускает и настраивает на компьютере программу FTP-сервера. После этого по запросу автора, которому нужно опубликовать на сервере свой сайт, он создает корневую папку для этого сайта и дает автору права на доступ ТОЛЬКО к этой папке. Автор сайта с помощью программы FTP-клиента (например, CuteFTP) подключается к FTP-серверу и копирует во вновь созданную корневую папку файлы своего сайта. После этого администратор конфигурирует Web-сервер так, чтобы он "узнал" о существовании нового сайта. В дальнейшем, если автору сайта понадобится обновить какие-то файлы, он снова подключается к FTP-серверу и просто копирует на его диск обновленные файлы, затирая старые. (Реально этот процесс несколько сложнее, но мы опустим эти малозначительные сложности.)

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

Этот способ публикации сайтов используется на большинстве бесплатных и корпоративных Web-серверов. Сейчас давайте опишем последовательность действий для осуществления публикации сайта на сервере по РТР-протоколу.

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

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

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

Автор отключается от РТР-сервера. Это обязательно следует сделать, ведь РТР-сервер для поддержания соединения с клиентом забирает ресурсы компьютера, которые отнюдь не безграничны.

Автор запускает Web-обозреватель и тестирует свой сайт. Если обнаружатся ошибки, он вносит исправления и повторяет все шаги со 2 по 5.

Хорошая программа Web-редактора, обладающая функциями управления сайтом, сама предоставляет возможность публикации по протоколу РТР.

Dreamweaver — хорошая программа, поэтому все вышесказанное применимо и к нему. Более того, Dreamweaver сам ведет учет, какие файлы были изменены пользователем, и копирует на сервер только измененные файлы. Также он автоматически удалит ненужные файлы на сервере. Вам необходимо будет только правильно ввести данные о FTP-сервере.

Управление Web-сайтом в Dreamweaver

Ну все, хватит теории! Пора переходить к практике. Здесь мы пошагово рассмотрим публикацию сайта и возможности, предлагаемые Dreamweaver для управления сайтом.

Но сначала сделайте следующее. Найдите все файлы, составляющие наш небольшой сайт, и поместите их в отдельную папку. (Это файлы About.htm, default.htm, Links.htm, Passions.htm, Projects.htm, Email.gif, Email2.gif, Ivanov.gif и Wb02049_.gif.) Назовите эту папку, например, Sample 1. Каждый сайт должен находиться в своей папке — таково требование Dreamweaver.

Регистрация сайта в Dreamweaver

Но прежде, чем начать управлять сайтом, его необходимо зарегистрировать в Dreamweaver. Пока что Dreamweaver не знает, что набор страниц, которые мы создали во время предыдущих занятий, — на самом деле сайт. И, соответственно, он ведет себя, будто никакого сайта нет.

Для того чтобы создать новый сайт, воспользуйтесь пунктом New site меню Site. После его выбора на экране появится диалоговое окно Site Definition, состоящее из двух вкладок. Если оно открыто на вкладке Basic, переключитесь на вкладку Advanced — она предоставляет больше возможностей по настройке вашего сайта. Вы увидите то, что показано на рис. 6.2.

Как видите, в левой части этого окна находится список вкладок второго уровня. Переключитесь на вкладку Local Info, где задается информация о файлах вашего сайта, находящихся на жестком диске вашего компьютера (локальной копии сайта).

В поле ввода Site Name вводится имя сайта. Оно служит только для того, чтобы вам самим было удобно с этим сайтом работать. Назовите сайт "Sample site1".

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

Флажок Refresh Local File List Automatically включает или отключает автоматическое обновление списка файлов локальной копии сайта. Если вы оставите его включенным, список файлов сайта всегда будет обновляться автомагически, как только Dreamweaver становится активным. Это может быть полезным, если вы работаете с файлами сайта, используя Проводник Windows или другие программы управления файлами (например, FAR Commander), однако снижает быстродействие программы. Если же вы выключите вышеназванный флажок, вам самим придется обновлять список файлов сайта, но Dreamweaver будет активизироваться быстрее.

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

В поле ввода HTTP Address вводится интернет-адрес вашего сайта. Это нужно, чтобы Dreamweaver смог проверить на правильность ссылки.

Рис. 6.2. Диалоговоеокно Site Definition (вкладка Local Info)

Флажок Enable Cache включает или отключает кэширование файлов сайта. Кэширование позволяет ускорить операции с файлами сайта, но отнимает память компьютера. И все же лучше пожертвовать памятью и оставить кэширование включенным, иначе многие замечательные возможности Dreamweaver останутся для вас недоступными.

Покончив с вкладкой Local Info, перейдите к вкладке Remote Info, где задаются параметры удаленной копии сайта (файлов сайта, находящихся на дисках сервера). Эта вкладка показана на рис. 6.3.

Рис. 6.3. Диалоговое окно Site Definition (вкладка Remote Info, выбран режим отправки файлов по протоколу FTP)

Прежде всего необходимо выбрать режим отправки сайта на сервер. Выбирается он в раскрывающемся списке Access. Давайте рассмотрим, какие возможности предлагает нам Dreamweaver:

None — удаленная копия сайта вообще не создается. Выберите этот пункт, если у вас пока нет доступа к Web-серверу, или вы создаете набор Web-страниц, которые будут распространяться, например, на дискетах или компакт-дисках;

FTP — отправка сайта по протоколу FTP;

Local/Network — отправка сайта по локальной сети. Также пригодится, если Web-сервер работает на вашем компьютере;

RDS, SourceSafe Database и WebDAV — использование системы управления версиями. Пригодятся только в том случае, если вы — член большой группы разработчиков сайтов, использующих одну из этих систем.

Если вы выбрали пункт None, диалоговое окно Site Definition останется пустым. Никаких параметров удаленной копии вы ввести не сможете, т. к. никакой удаленной копии в этом случае создано не будет.

В случае выбора пункта FTP вам нужно будет ввести следующие параметры (см. рис. 6.3):

FTP Host — адрес FTP-сервера вида ftp://ftp.somesite.ru;

Host Directory — имя корневой папки вашего сайта (или "/", если корневая папка вашего сайта совпадает с корневой папкой FTP-сервера);

Login — имя пользователя, под которым вы подключаетесь;

Password — пароль (при его вводе в поле отображаются звездочки).

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

Нажав кнопку Test, вы можете проверить, сможете ли подключиться к заданному FTP-серверу, используя заданные имя и пароль. После нажатия этой кнопки Dreamweaver выведет окно-предупреждение с текстом, сообщающим об удачной попытке подключения или описывающим возникшую проблему.

Если FTP-сервер, с помощью которого вы копируете файлы сайта на диски сервера, поддерживает только пассивный протокол FTP, включите флажок Use Passive FTP.

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

Включите флажок Use SSH encrypted secure login, если для входа на FTP-сервер используется защищенный протокол SSH (Secure Socket Layer -слой защищенных сокетов).

В случае если сайт будет отправляться по локальной сети, или если Web-сервер работает на вашем же компьютере, выберите пункт Local/Network раскрывающегося списка Access. Окно Site Definition снова изменит свой вид (рис. 6.4).

Рис. 6.4. Диалоговое окно Site Definition(вкладка Remote Info, выбран режим отправки файлов по локальной сети)

В поле ввода Remote Folder вводится путь к корневой папке удаленной копии сайта (вы также можете щелкнуть значок папки, расположенный справа от поля ввода, и выбрать нужную папку в появившемся на экране диалоговом окне).

Флажок Refresh Remote File List Automatically включает или отключает автоматическое обновление списка файлов удаленной копии сайта. Отключите его, если хотите увеличить быстродействие системы, но в этом случае вам придется обновлять его вручную.

Если вы включите флажок Automatically upload files to server on save,

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

Вы уже заметили, что мы не стали рассматривать элементы управления, расположенные в нижней части окна. Они служат для работы в рабочей группе; описание их вы можете найти в интерактивной справке Dreamweaver. А пока что отключите флажок Enable File Check In and Check Out.

Остается переключиться на вкладку Site Map Layout, кое-что проверить и задать кое-какие дополнительные настройки. Эта вкладка показана на рис. 6.5.

Рис. 6.5. Диалоговое окно Site Definition (вкладка Site Map Layout)

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

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

Прежде всего, скажем, что список файлов удаленной копии сайта может отображаться в двух режимах: как обычный список файлов и как "дерево" файлов. Во втором случае выводится иерархическая структура, показывающая как различные файлы, составляющие сайт, связаны друг с другом. Сами файлы изображаются в виде пиктограмм с подписями. Так вот, в качестве подписей могут выступать как имена файлов, так и названия Web-страниц (содержимое парного тега <TITLE>). Для выбора подписей служит группа переключателей Icon Labels; переключатель File Names задает вывод в качестве подписей имен файлов (включен по умолчанию), a Page Titles — названий Web-страниц. Вы можете включить любой из переключателей, в зависимости от ваших предпочтений.

Группа флажков Options позволяет задать следующие параметры:

Display Files Marked as Hidden — включает или отключает вывод файлов, помеченных как скрытые. Если в вашем сайте содержатся такие файлы, лучше включите этот флажок;

Display Dependent Files — включает или отключает вывод всех файлов, не являющихся Web-страницами (изображения, мультимедийные, программы, архивы и т. п.). Конечно, без этих файлов ваш список будет неполным, поэтому включите данный флажок. Но если ваш сайт очень велик, лучше его отключить, чтобы не загромождать список файлов.

Закончив ввод параметров вашего сайта, нажмите кнопку ОК диалогового окна Site Definition. На этом регистрацию сайта можно считать законченной.

Настройка прокси-сервера или брандмауэра

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

Сначала, конечно же, дадим определение прокси-сервера. Прокси-сервер (или сервер полномочий) — это программа (и одновременно компьютер, на котором она выполняется), в чьи задачи входит:

предоставление доступа в Интернет нескольким пользователям по одному каналу (например, модему или высокоскоростному каналу);

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

ограничение доступа из Интернета к локальной сети организации. В частности, прокси-сервер блокирует хакерские атаки и нежелательное содержимое Web-страниц (насилие, порнография и т. п.);

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

Как видите, прокси-сервер выполняет много функций. Однако часто используются программы, аналогичные прокси-серверу, но выполняющие не все его задачи, а только некоторые. В большинстве случаев, это обеспечение защиты локальной сети от доступа извне. Такие программы называются брандмауэрами (или сетевыми экранами, по-английски — firewall). В дальнейшем мы все такие программы будем называть прокси-серверами.

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

А для того, чтобы их можно было настроить, они должны поддерживать работу через прокси-сервер. Большинство серьезных программ это поддерживают. А поскольку Dreamweaver — серьезная программа, то он тоже поддерживает прокси-сервер.

Но как его настроить?

Прежде всего, убедитесь, что в диалоговом окне Site Definition, на вкладке Remote Info (если выбран режим отправки сайта по протоколу FTP), включен флажок Use Firewall. Возможно, вам также придется включить флажок Use Passive FTP, если прокси-сервер этого требует (выяснить это можно у администратора прокси-сервера). Но это еще не все настройки — таким образом мы только дадим знать Dreamweaver, что для отправки такого-то сайта на сервер ему придется "общаться" с прокси-сервером.

А теперь — главное. Нажмите кнопку Firewall Settings. На экране появится знакомое вам диалоговое окно Preferences, уже переключенное на вкладку Site. Эта вкладка изображена на рис. 6.6.

Здесь нас интересуют в настоящий момент только поля ввода Firewall Host и Firewall Port. В первом вводится интернет-адрес прокси-сервера в вашей локальной сети, во втором — номер порта TCP/IP, своеобразного канала, по которому происходит пересылка данных того или иного протокола. Оба этих параметра вы можете выяснить у вашего сетевого администратора. Задав их, нажмите кнопку ОК.

Рис. 6.6. Диалоговое окно Preferences (вкладка Site)

Панель Site

Все манипуляции с сайтом выполняются в панели Site. Поищите эту панель в доке. Если ее там нет, выберите пункт Site меню Window или нажмите клавишу <F8>. Также вы можете выбрать пункт Site Map меню Site.

Панель Site показана на рис. 6.7. Как видите, эта панель отличается от уже рассмотренных нами панелей Dreamweaver. Она имеет свой инструментарий с элементами управления, предоставляющими быстрый доступ к наиболее часто употребляемым командам, строку меню и строку статуса. Правда, строка статуса здесь не столь сложна, как у окна документа, и только показывает сведения о выбранном в списке файле.

Большую часть панели Site занимает список файлов. Изначально в ней отображается только список файлов локальной копии сайта. Файлы и папки, отображаемые в списке, организованы в виде "дерева", совсем как в Проводнике Windows. При этом узлами "дерева" служат папки: корневая папка сайта и вложенные в нее подпапки. Вы можете сворачивать и разворачивать ветви "дерева", как в Проводнике, чтобы посмотреть содержимое той или иной папки.

Рис. 6.7. Панель Site

Рис. 6.8. "Дерево" файлов, отображаемое в панели Site

Вы можете выбрать любой из файлов в списке, щелкнув по нему мышью. Если вы хотите выбрать несколько файлов, щелкайте по ним, удерживая нажатой клавишу <Ctrl>. Если вы хотите выбрать все файлы списка, то воспользуйтесь пунктом Select All меню Edit панели Site или нажмите комбинацию клавиш <Ctrl>+<A>. Вы также можете воспользоваться пунктом Invert Selection того же меню; тогда все выделенные файлы станут невыделенными, а все невыделенные — выделенными.

Список файлов панели Site может работать в двух режимах. Первый режим — это показ обычного списка файлов (режим списка), а второй — отображение иерархического "дерева" со всеми взаимозависимостями между страницами и связанными с ними файлами (режим "дерева", показан на рис. 6.8). Для переключения этих режимов вы можете воспользоваться пунктами Site Files (показывает список файлов) и Site Map (показывает "дерево") меню Window главного окна Dreamweaver или одноименными пунктами меню View панели Site. Но проще всего нажать, соответственно, клавишу <F8> или комбинацию клавиш <Alt>+<F8>.

Если вы хотите просмотреть файлы удаленной копии сайта, вам нужно нажать кнопку-выключатель Expand/Collapse (рис. 6.9), расположенную в инструментарии панели. После этого панель Site раздвинется и займет все главное окно Dreamweaver (рис. 6.10). В левой половине рабочей области появится список файлов удаленной копии сайта. Чтобы вернуть панель Site к своему обычному виду, снова нажмите кнопку Expand/Collapse.

Рис. 6.9. Кнопка Expand/Collapse инструментария панели Site

Рис. 6.10. Панель Site в расширенном виде

В данный момент может быть активен только один из списков. Активизировать необходимый список вы можете, щелкнув по нему мышью; вы также можете переключаться между списками, нажимая клавишу <Таb>.

Примечание

Dreamweaver можно настроить так, что список файлов удаленной копии будет выводиться справа, а список файлов локальной копии — слева. Для этого на вкладке Site диалогового окна Preferences в раскрывающемся списке Always Show выберите пункт Remote Files, а в раскрывающемся списке on the — пункт Left.

Вообще-то, если вы используете отправку файлов по протоколу FTP, список файлов удаленной копии изначально будет пустым. Чтобы просмотреть все файлы удаленной копии сайта, вам нужно будет подключиться к серверу FTP. Для этого нажмите кнопку-выключатель Connect to remote host (рис. 6.11), находящуюся в инструментарии панели Site. (Эта кнопка доступна, только если вы используете отправку файлов по протоколу FTP.) После этого Dreamweaver подключится к серверу FTP и загрузит список файлов. Чтобы отключиться от сервера FTP, еще раз щелкните эту кнопку.

Рис. 6.11. Кнопка Connect to remote host инструментария панели Site

Рис. 6.12. Кнопка Refresh инструментария панели Site

Если вы в диалоговом окне Site Definition отключили флажки Refresh Local File List Automatically и Refresh Remote File List Automatically, то, как мы уже говорили, вам придется обновлять эти списки вручную. Чтобы обновить активный список, выберите пункт Refresh меню View панели Site или нажмите клавишу <F5>. Если вы предпочитаете пользоваться мышью, щелкните кнопку Refresh инструментария панели Site (рис 6.12).

В инструментарии панели Site вы также можете увидеть два раскрывающихся списка. Они тоже могут быть полезны нам.

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

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

Local View — отображение списка файлов локальной копии;

Remote View — отображение списка файлов удаленной копии;

Testing Server мы пока рассматривать не будем;

Map View — отображение "дерева" файлов локальной копии.

Пункт New Site меню Site панели позволяет ввести в Dreamweaver сведения о новом сайте. А на пункте Edit Sites этого же меню мы остановимся подробнее. При его выборе на экране появляется диалоговое окно Edit Sites, показанное на рис. 6.13. С помощью этого окна вы можете зарегистрировать в программе новые сайты, изменить сведения об уже существующих или совсем удалить ненужные сайты. Кстати, вызвать это окно вы можете, выбрав пункт Edit Sites раскрывающегося списка сайтов, находящегося в инструментарии панели.

Рис. 6.13. Диалоговое окно Edit Sites

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

Нажав кнопку Edit, вы сможете отредактировать сведения о выделенном в списке сайте в диалоговом окне Site Definition.

Нажав кнопку Remove, вы получите возможность удалить сведения о ненужном сайте (но не сами файлы, входящие в этот сайт!). При этом Dreamweaver спросит вас, действительно ли вы хотите удалить эти сведения; нажмите кнопку Yes или No.

Нажав кнопку New, вы сможете ввести новый сайт в диалоговом окне Site Definition.

А при нажатии кнопки Duplicate в программе будет автоматически зарегистрирована полная копия выбранного сайта. После этого вы, если хотите, сможете изменить ее параметры. Это удобно, если вы собираетесь работать с двумя копиями одного и того же сайта.

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

Работа с файлами сайта

Итак, с панелью Site в общих чертах мы познакомились. Теперь пора приниматься за файлы, которые отображаются в списках. Давайте посмотрим, что мы можем с ними делать.

A Dreamweaver позволяет сделать с файлами многое. Фактически вы можете управлять ими так же, как в окне Проводника Windows или другой программы управления файлами. Давайте рассмотрим все файловые операции, поддерживаемые Dreamweaver.

Чтобы удалить выбранный в списке файл, нажмите клавишу <Del>. Вы также можете выбрать пункт Delete меню File или контекстного меню. После этого Dreamweaver спросит вас, действительно ли вы хотите удалить названный файл; нажмите кнопку Yes или No. Точно так же вы можете удалить любую папку.

Внимание!

Dreamweaver выполняет удаление файлов и папок с файлами в корзину Windows. Однако пустые папки удаляются бесследно.

Чтобы переименовать выбранный файл, щелкните по нему еще раз мышью или нажмите клавишу <F2>. Вы также можете выбрать пункт Rename меню File или контекстного меню. После этого на месте имени данного файла появится небольшое поле ввода, где будет подставлено его старое имя. Введите новое имя в это поле ввода или отредактируйте старое в нем же, после чего нажмите клавишу <Enter> для сохранения нового имени или клавишу <Esc> — для отказа от сохранения.

Если на Web-страницах присутствуют гиперссылки на переименованный файл, Dreamweaver предложит вам исправить их. На экране появится диалоговое окно Update Files, показанное на рис. 6.14. В списке Update links in the following files? находится список Web-страниц, где найдены гиперссылки, указывающие на переименованный файл. Нажмите кнопку Update, чтобы обновить их, или Don't Update, чтобы отказаться от обновления. В последнем случае вам придется сделать это вручную.

Рис. 6.14. Диалоговое окно Update Files

Чтобы открыть выбранный файл Web-страницы в окне документа Dreamweaver, дважды щелкните по нему или нажмите клавишу <Enter>. Вы также можете выбрать пункт Open меню File или контекстного меню. Если у вас установлена программа Web-графики Macromedia Fireworks, вы можете открыть не только файл Web-страницы, но и любой графический файл.

Чтобы создать новую Web-страницу, выберите пункт New File меню File или контекстного меню или нажмите комбинацию клавиш <Ctrl>+<Shift>+<N>. После этого в самом низу списка появится новый файл по имени untitled.htm, которое вы сразу же можете (и должны) изменить; изменив его, нажмите клавишу <Enter>, после чего вы можете открыть его в окне документа для того, чтобы ввести содержимое страницы.

Новая папка создается аналогично, только нужно выбрать пункт New Folder или нажать комбинацию клавиш <Ctrl>+<Shift>+<Alt>+<N>. После этого в самом низу списка появится новая папка по имени untitled, имя которое вы должны будете изменить; нажмите клавишу <Enter>. Запомните при этом, что названная папка будет вложена в ту, в которой вы сейчас находитесь. Например, если вы находитесь в корневой папке сайта, новая папка будет вложена в нее. А если вы выбрали какой-либо файл в папке второго уровня (или ее саму), новая папка будет вложена в папку второго уровня.

Создайте в корневой папке нашего сайта папки второго уровня HTMLs и Pics. Впоследствии мы поместим в них все Web-страницы, кроме главной, и все графические изображения.

Вы можете переносить файлы (и папки) из одной папки в другую, просто перетаскивая их мышью. Если же вы во время перетаскивания будете удерживать нажатой клавишу <Ctrl>, будет выполнено копирование файла или папки.

Другой способ переноса файлов — это использование буфера обмена. (Таким же способом можно копировать файлы.) Выделите нужные файлы и нажмите комбинацию клавиш <Ctrl>+<X> (можно также выбрать пункт Cut в меню Edit или контекстном меню). После этого выбранные файлы будут помещены в буфер обмена Windows. Чтобы вставить их в нужную папку, поместите курсор на один из файлов, содержащийся в ней, или на саму папку и нажмите комбинацию клавиш <Ctrl>+<V> (или выберите пункт Paste в меню Edit или контекстном меню). Файлы будут вставлены из буфера обмена в данную папку. Если вы хотите скопировать файлы в выбранную папку, вам нужно будет не переместить, а скопировать файлы в буфер обмена, нажав комбинацию клавиш <Ctrl>+<C> (или выбрав пункт Сору меню Edit или контекстного меню).

Когда вы перемещаете файлы из папки в папку, Dreamweaver стоит на страже корректности гиперссылок. Как только файл, на который ссылаются какие-либо Web-страницы, переносится в другую папку, на экране появляется уже знакомое вам диалоговое окно Update Files, показанное на рис. 6.14. Это относится как к страницам, так и к графическим и прочим файлам сайта.

Теперь сделайте следующее. Переместите все файлы Web-страниц, кроме главной (файл default.htm), в папку HTMLs, а все без исключения файлы графических изображений — в папку Pics. Если Dreamweaver спросит вас, обновлять ли гиперссылки, указывающие на перемещенные файлы, нажмите кнопку Update. Теперь физическая структура нашего сайта примет более приличный вид.

Кроме того, любую Web-страницу вы сможете просмотреть в Web-обозревателе. Для этого выделите ее в списке файлов и нажмите клавишу <F12>, чтобы вызвать первичный Web-обозреватель, или комбинацию клавиш <Ctrl>+<F12>, чтобы вызвать вторичный Web-обозреватель. Вы также можете выбрать соответствующий пункт подменю Previews in Browser меню File или контекстного меню.

Если вы при регистрации нового сайта ошиблись в задании файла главной страницы (или если ошибся Dreamweaver — ведь он пытается автоматически определить ее), вы можете исправить эту ошибку. Для этого выделите нужный HTML-файл в списке файлов и выберите пункт Set as Home Page меню Site или контекстного меню.

Взаимодействие панели Site и окна документа

Однако публиковать сайт в Сети еще рано. Ведь полноценного Web-сайта у нас еще нет — просто набор Web-страниц, никак не связанных между собой. Ведь мы еще не связали страницы друг с другом, не расставили на главной странице гиперссылки, с помощью которых посетитель сможет перейти на другие страницы сайта. Давайте же сделаем это!

Вы уже знаете несколько способов создания гиперссылок. Сейчас мы рассмотрим с вами еще один способ. И в этом нам поможет панель Site.

Откройте главную страницу сайта default.htm в окне документа. Для этого достаточно дважды щелкнуть по названию файла в списке файлов локальной копии. Давайте сначала поместим на главной странице гиперссылку, указывающую на страницу списка увлечений — страницу Passions.htm.

Выделите в окне документа текст "о моих увлечениях" (первая строка списка) и посмотрите на редактор свойств, а именно на поле ввода Link, где указан интернет-адрес гиперссылки. Справа от него находятся два значка. Один, уже знакомый нам, находится справа и имеет вид папки, и при щелчке по нему открывает диалоговое окно Select File. А второй, находящийся слева и имеющий вид мишени, нам пока еще не знаком. Сейчас самое время с ним познакомиться.

Странный значок, не правда ли? На щелчок мышью он не откликается. Зачем он нужен?

Дело в том, что его не надо щелкать. Его необходимо перетаскивать на требуемый файл в панели Site. Давайте так и сделаем. Перетащим этот значок на файл Passions.htm в списке файлов этой панели и "бросим" его. В поле ввода Link редактора свойств тотчас появится адрес страницы Passions.htm.

Вы можете поступить и по-другому — перетащить файл Passions.htm из окна сайта прямо в поле ввода Link редактора свойств. Попробуйте сделать это с файлом Projects.htm, только прежде выделите вторую строку списка ("о выполненных мной проектах").

Осталось лишь создать последнюю гиперссылку, указывающую на страницу ссылок (Links.htm), и исправить ссылку, указывающую на страницу сведений об авторе (About.htm). Выделите слово "здесь" в предпоследнем абзаце и создайте гиперссылку одним из рассмотренных нами способов. Далее поставьте курсор на текст "подробнее обо мне любимом" и также выполните операцию создания гиперссылки — Dreamweaver поймет, что вы хотите сделать, и исправит адрес уже существующей гиперссылки.

Вот и все. Сайт готов. Закройте окно документа, не забыв сохранить его содержимое. Теперь сайт можно публиковать в Сети.

Но не спешите делать этого. Давайте поговорим еще кое о чем, что вам обязательно следует знать.

Абсолютные и относительные интернет-адреса

А поговорим мы об интернет-адресах. Точнее, о разных способах задания интернет-адресов.

Снова откройте главную страницу сайта default.htm. Поместите текстовый курсор на слово "Macromedia" в первом абзаце (если помните, это гиперссылка, указывающая на сайт фирмы). В поле ввода Link редактора свойств вы увидите следующее:

http://www.macromedia.com

Это Web-адрес сайта Macromedia. Теперь давайте рассмотрим еще один интернет-адрес, на этот раз воображаемый:

http://www.somesite.ru/folderl/folder2/page.html

Этот адрес указывает на файл page.html, находящийся на сервере http://www.somesite.ru в папке /folderl/folder2. Как видите, все основные части интернет-адреса здесь присутствуют. В результате адрес указывает прямо на нужный файл. Такой интернет-адрес называется абсолютным.

Теперь переместим текстовый курсор на первую строку списка ("о моих увлечениях"). В поле ввода Link мы увидим следующее:

HTMLs/Passions.htm.

Этот адрес также указывает на нужный файл, но не непосредственно, а относительно какого-то другого файла, а именно относительно адреса главной страницы нашего сайта. Такой адрес называется относительным.

Относительные интернет-адреса могут быть заданы относителБно файла и корневой папки сайта. Проиллюстрируем это на примере. Откройте страни-

цу About.htm и щелкните мышью по фотографии Ивана Ивановича, чтобы ее выделить. В поле ввода Src вы увидите:

../Pics/Ivanov.gif

Этот интернет-адрес указан относительно файла Web-страницы. Две точки в начале обозначают ссылку на папку верхнего уровня.

А вот так будет выглядеть адрес, указанный относительно корневой папки сайта:

/Pics/Ivanov.gif

Способ задания относительных интернет-адресов выбирается с помощью раскрывающегося списка Relative To (рис. 6.15) диалогового окна Select File: пункт Document задает адрес относительно файла, а пункт Site Root — относительно корневой папки сайта. В таком случае в поле ввода URL появляется результирующий интернет-адрес.

Рис. 6.15. Раскрывающийся список Relative To и поле ввода URL диалогового окна Select File

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

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

Проиллюстрируем вышесказанное на примере. Предположим, есть сайт с такой физической структурой:

<Корневая папка> default.htm folder1page1.htm folder2

page2.htm

folder3 раgе3.htm

И предположим, что нужно разместить на странице pagel.htm ссылки на страницы page2.htm и page3.htm. В таком случае правильно заданные интернет-адреса будут выглядеть следующим образом:

folder2/page2.htm /folder3/page3.htm

т. е. адреса задаются относительно файла — для pag62.htm и относительно корневой папки — для page3.htm. Если же мы поступим наоборот:

/folder1/folder2/page2.htm ../folder3/page3.htm

то смотрите сами, насколько громоздкими и запутанными стали адреса.

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

Для примера давайте сравним два наших интернет-адреса:

/folder3/page3.htm ../folder3/page3.htm

Предположим также, что локальная копия сайта находится в папке

с:\Projects\Sites\Sample1

Первый интернет-адрес задан относительно корневой папки сайта. Операционная система, однако, будет отсчитывать его от корневой папки диска, и результирующий путь будет таков:

с:\Folder3\page3.htm

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

c:\Projects\Sites\Samplel\Folder3\page3.htm

и операционная система без труда найдет нужный файл.

Проверка правильности ссылок и HTML-кода

Теперь-то, спросите вы, можно публиковать сайт? Нет, еще рано. Потерпите — осталось совсем чуть-чуть! Вот проверим корректность HTML-кода и гиперссылок — и опубликуем сайт в Сети.

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

Но чтобы исправить код, нужно знать, что исправлять. И в этом Dreamweaver снова вам поможет.

Внимание!

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

Итак, проверим правильность HTML-кода. Закройте все открытые окна документов, чтобы они вам не мешали. Выберите пункт Reports в меню Site панели Site. На экране появится диалоговое окно Reports, показанное на рис. 6.16.

Большую часть этого окна занимает иерархический список Select Reports, позволяющий выбрать данные, включаемые в отчет. Он состоит из двух "ветвей": Workflow и HTML Reports. Параметры, предлагаемые первой "ветвью", нужны для рабочей группы, так что мы сосредоточимся на второй "ветви", предлагающей нам задать параметры отчета по HTML. Это "дерево" содержит следующие пункты:

Combinable Nested Font Tags — включает поиск вложенных тегов <FONT>, которые могут быть безболезненно объединены;

Accessibility - - включает проверку на корректность задания различных элементов страницы (все ли таблицы имеют заголовок, задана ли правильная кодировка и т. п.);

Missing Alt Text -- включает поиск незаполненных атрибутов ALT тегов

Redundant Nested Tags — включает поиск ненужных вложенных тегов;

Removable Empty Tags -- включает поиск пустых тегов, которые могут быть безболезненно удалены;

Untitled Documents — включает поиск Web-страниц без названия (без тега <TITLE>).

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

Рис. 6.16. Диалоговое окно Reports

Раскрывающийся список Report On позволяет задать, по каким страницам сайта будет выводиться отчет. Здесь доступны четыре пункта:

Current Document — по странице, открытой в активном окне документа;

Entire Local Site — по всему сайту;

Selected Files in Site — по всем страницам, выделенным в списке файлов;

Folder — по всем страницам, содержащимся в какой-либо папке.

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

Задав необходимые параметры, нажмите кнопку Run. Через некоторое время Dreamweaver выведет панель Site Reports, показанную на рис. 6.17.

В списке, находящемся в этой панели, перечислены все найденные ошибки в HTML-коде. Вы можете выбрать любую из них. Дважды щелкнув по нужному пункту списка, вы откроете файл, в котором найдена ошибка; при этом окно документа откроется в режиме показа HTML-кода, причем ошибочный фрагмент будет выделен. Чтобы получить сведения о найденной ошибке, нажмите кнопку More Info (с изображением восклицательного знака) — откроется окно справки Dreamweaver с нужными сведениями. А, нажав кнопку Save Report (с изображением дискеты), вы можете сохранить этот отчет в файле формата XML.

Рис. 6.17. Панель Site Reports

Исправьте найденные Dreamweaver ошибки, после чего закройте все окна документов, не забыв сохранить их содержимое. Не годится, чтобы наш сайт, даже и первый, содержал на своих страницах ошибки. Закройте панель Site Reports. Можете сделать это без сохранения.

Проверим теперь корректность гиперссылок.

Но что может случиться с гиперссылками? А случиться может, например, следующее. Предположим, вы поместили на свою Web-страницу гиперссылку, указывающую на другую страницу (неважно, принадлежит она тому же сайту или совсем другому). Теперь переименуйте или удалите файл той страницы, на которую указывает гиперссылка, Что получится, если посетитель вашего сайта щелкнет по такой гиперссылке? Web-сервер не сможет ее найти и отправит Web-обозревателю, запросившему несуществующую страницу, сообщение об ошибке. (Это так называемая "ошибка 404", печально известная ошибка, чей код равен 404. Да вы и сами, наверное, не раз с ней сталкивались.) А гиперссылка, указывающая на несуществующий файл, называется "оборванной" или "мертвой".

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

Проверить корректность гиперссылок можно как на отдельной странице, так и во всем сайте. Чтобы проверить гиперссылки на отдельной странице сайта, сначала откройте ее. После этого выберите пункт Check Links подменю Check Page меню File главного окна или нажмите комбинацию клавиш <Shift>+<F8>. Если вы хотите проверить ссылки на всех страницах сайта, просто выберите пункт Entire Site подменю Check Links контекстного меню панели Site. Также вы можете использовать пункт Check Links Sitewide меню Site панели или комбинацию клавиш <Ctrl>+<F8>. В любом случае после этого на экране появится панель Link Checker, показанная на рис. 6.18.

Рис. 6.18. Панель Link Checker

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

Broken Links - "оборванные" гиперссылки;

External Links — "внешние" ссылки, т. е. ссылки, указывающие на другие сайты;

Orphaned Files — файлы-"сироты", т. е. файлы, на которые не указывает ни одна гиперссылка. В списке таких файлов должен быть только один пункт — default.htm (наша главная страница).

Как видите, каждый пункт списка содержит адрес страницы, на которой была найдена ссылка, и саму гиперссылку. Щелкнув по любой позиции этого списка, вы откроете соответствующую Web-страницу в окне документа, причем подсвечена будет как раз выбранная гиперссылка. Нажав кнопку Save Report (с изображением дискеты), вы сможете сохранить этот список в виде обычного текстового файла.

Также Dreamweaver предлагает мощное средство быстрой замены одной гиперссылки на другую по всему сайту. Это может быть полезно, если вы собираетесь изменить один адрес на другой, но не помните, на каких страницах он был указан. Для этого выберите пункт Change Links Sitewide в меню Site панели. На экране появится диалоговое окно Change Link Sitewide, показанное на рис. 6.19.

Рис. 6.19. Диалоговое окно Change Link Sitewide

В поле ввода Change All Links To введите адрес, который вы хотите заменить, в поле ввода Into Links To — адрес, на который вы меняете, и нажмите кнопку ОК. Dreamweaver выведет на экран уже знакомое вам окно Update Files, показанное на рис. 6.14; вам будет нужно только щелкнуть кнопку Update.

Работа с сервером

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

Теперь наш сайт действительно можно публиковать в Сети.

Публикация сайта

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

Чтобы соединиться с FTP-сервером, нажмите кнопку Connect to remote host, расположенную на инструментарии панели Site (см. рис. 6.11). Вы также можете выбрать пункт Connect в меню Site панели Site или нажать комбинацию клавиш <Ctrl>+<Alt>+<Shift>+<F5>. Если в настройках сайта вы отказались от сохранения пароля (отключили флажок Save на вкладке Remote Info диалогового окна Site Definition), Dreamweaver выведет небольшое диалоговое окно с полем ввода, где вы должны будете ввести пароль, и кнопками ОК (соединение) и Cancel (отказ от соединения).

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

Простейший способ опубликовать наш сайт — это выбрать корневую папку в списке файлов локальной копии и нажать кнопку Put File(s) инструментария панели (рис. 6.20). Данная кнопка запускает процесс копирования файлов на FTP-сервер. Также вы можете выбрать пункт Put меню Site панели или контекстного меню или нажать комбинацию клавиш <Ctrl>+<Shift>+

Рис. 6.20. Кнопка Put File(s) инструментария панели Site

Так как вы выбрали корневую папку, т. е. фактически весь сайт, Dreamweaver переспросит вас, действительно ли вы хотите скопировать весь сайт на сервер. Нажмите кнопку Yes.

Во время отправки сайта на сервер Dreamweaver будет отображать ход отправки файлов в небольшом диалоговом окне. Вы можете прервать отправку, щелкнув по кнопке Cancel этого окна.

Вот мы и дождались окончания отправки! Наш сайт опубликован на сервере. Просто? Даже слишком.

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

Протестируйте свежеопубликованный сайт в Web-обозревателе. Посмотрите, все ли работает. Хотя, мы вроде бы исправили все ошибки...

Но давайте предположим, что вам что-то не понравилось, и вы все-таки внесли некоторые изменения и усовершенствования в некоторые Web-страницы. После этого вам будет необходимо опубликовать измененные файлы на сервере, перезаписав их удаленные копии. Как это сделать? Так же просто, как мы только что опубликовали сайт целиком. А именно, выделите нужные файлы и нажмите кнопку Put file(s). Если вы открыли какие-либо страницы, изменили их и не сохранили, Dreamweaver предложит вам сохранить данные файлы; в этом случае нажмите кнопку Yes для сохранения соответствующего файла, кнопку No — для отказа от сохранения или кнопку Cancel — для отказа от его публикации.

Также возможно, что при этом Dreamweaver спросит вас, обновлять ли на сервере зависимые файлы, т. е. те, на которые ссылается публикуемая Web-страница. Нажмите кнопку Yes для публикации зависимых файлов или кнопку No — для отказа от их обновления (например, если на сервере уже есть все необходимые файлы, а вы просто хотите обновить саму страницу) или кнопку Cancel — для отказа от публикации страницы со всеми ее файлами.

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

Да, все это просто. Если вы точно знаете, какие файлы хотите опубликовать. Но что делать, если вы не помните, какие файлы изменяли? Публиковать заново весь сайт? А если сайт очень велик?

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

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

Чтобы запустить синхронизацию файлов, выберите пункт Synchronize меню Site или контекстного меню. На экране появится диалоговое окно Synchronize Files, показанное на рис. 6.21.

Рис. 6.21. Диалоговое окно Synchronize Files

Раскрывающийся список Synchronize позволяет задать, какие файлы вы хотите синхронизировать. Пункт Selected Local File Only позволяет синхронизировать только выбранные файлы из локальной копии. (Если в данный момент активна удаленная копия сайта, в списке показан пункт, который носит название Selected Remote Files Only и позволяет синхронизировать выбранные файлы удаленной копии.) А пункт Entire <название сайта> Site позволяет синхронизировать весь сайт целиком.

А вот раскрывающийся список Direction мы рассмотрим подробнее. Здесь находятся три пункта, с помощью которых задается направление переноса файлов.

Пункт Put newer files to remote позволяет скопировать новые файлы на сервер, заменив ими устаревшие файлы удаленной копии. Если при этом включен флажок Delete remote files not on local drive, файлы удаленной копии, для которых не будут найдены соответствующие файлы локальной копии, будут удалены.

Пункт Get newer files from remote позволяет получить новые файлы с сервера, заменив ими устаревшие файлы локальной копии, это может быть полезно, если вы потеряли локальную копию сайта. Если при этом включен флажок Delete local files not on remote server, файлы локальной копии, для которых не будут найдены соответствующие файлы удаленной копии, будут удалены.

Пункт Get and Put newer files позволяет осуществить "взаимовыгодный обмен" новыми файлами. При этом будут синхронизированы и локальная и удаленная копии сайта. А если какому-либо файлу одной копии не будет найден соответствующий файл другой копии, он будет не удален, а скопирован в другую копию сайта.

Установив нужные параметры синхронизации (в основном, это будет, как мы полагаем, копирование новых файлов на сервер), нажмите кнопку Preview. Если вы хотите отказаться от синхронизации копий сайта, нажмите кнопку Cancel.

После запуска процесса синхронизации на экране появится окно списка синхронизируемых файлов, показанное на рис. 6.22. Здесь вы сможете указать, какие файлы необходимо синхронизировать, а какие — нет.

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

Action — действие, которое будет применено к файлу. Всего таких действий три:

Put — копирование на сервер;

Get — копирование с сервера на локальный диск;

Delete — удаление.

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

File — имя файла.

Status — состояние синхронизации. Показывается после ее завершения.

Рис. 6.22. Окно списка синхронизируемых файлов

Синхронизация запускается нажатием кнопки ОК. Нажав кнопку Cancel, вы сможете от нее отказаться. Если какие-либо файлы в результате синхронизации должны быть удалены, Dreamweaver предупредит об этом; нажмите кнопку ОК для удаления этих файлов и кнопку Cancel — для отказа от удаления.

По завершении синхронизации Dreamweaver выведет в то же самое окно результаты синхронизации, заполнив колонку Status (рис. 6.23). Закройте окно, нажав кнопку Close. Нажав кнопку Save Log, вы можете сохранить отчет о результатах синхронизации в виде обычного текстового файла.

Рис. 6.23. Dreamweaver только что закончил синхронизацию

Закончив работу, не забудьте отключиться от FTP-сервера. Для этого просто щелкните еще раз кнопку Connect to remote host. Вместо этого вы можете выбрать пункт Disconnect в меню Site панели или нажать комбинацию клавиш <Ctrl>+<Alt>+<Shift>+<F5>.

Внимание!

Обязательно отключайтесь от FTP-сервера после того, как закончите работу с удаленной копией сайта! Помните, что на поддержание каждого соединения с клиентом FTP-сервер расходует ресурсы компьютера, на котором работает. А значит, другому клиенту этих ресурсов может не хватить. Уважайте других клиентов!

Работа с копиями сайта

Теперь давайте рассмотрим дополнительные возможности, предлагаемые Dreamweaver для работы с разными копиями сайта.

Выше говорилось, что можно не только публиковать отдельные файлы (и весь сайт) на сервере, но и, при необходимости, скопировать их с сервера на локальный диск. Для этого можно воспользоваться кнопкой Get File(s) (рис. 6.24); просто выберите нужные файлы в одном из списков и нажмите на данную кнопку. Кроме того, вы можете выбрать пункт Get меню Site, нажать комбинацию клавиш <Ctrl>+<Shift>+<D> или просто перетащить файлы из списка удаленной копии в список локальной.

Рис. 6.24. Кнопка Get File(s) инструментария панели Site

Dreamweaver также поможет вам узнать, какие файлы локальной или удаленной копии изменились после последней синхронизации. Если вы выберете пункт Select Newer Local меню Edit панели, будут выделены новые файлы локальной копии, если пункт Select Newer Remote — новые файлы удаленной копии. Вам остается только перенести эти файлы в другой (удаленный или локальный) список файлов.

Еще одна полезная возможность, предлагаемая Dreamweaver, — поиск выбранного в одном из списков файла в другом списке. Например, выбрав файл в списке файлов удаленной копии, вы можете найти соответствующий ему файл в списке файлов локальной копии. Достаточно выбрать пункт Locate in Remote Site для поиска выбранного файла в списке удаленной копии и пункт Locate in Local Site — для поиска в списке локальной копии. Оба эти пункта находятся в меню Edit и контекстном меню панели Site.

Дополнительные возможности работы с Web-страницами и Web-сайтами

Напоследок рассмотрим еще некоторые интересные возможности, предлагаемые Dreamweaver для работы со страницами и сайтами. Они помогут вам лучше организовать работу. Учтите, однако, что эти возможности доступны только для сайта и не доступны для простого набора страниц.

Примечания

В главе 3 мы рассмотрели так называемые комментарии HTML, позволяющие разместить внутри HTML-кода страницы произвольный текст. Обычно Web-дизайнеры создают таким образом небольшие заметки, примечания, напоминания, что нужно сделать, и т. п. В частности, мы с вами поместили в тексте главной страницы default.htm небольшое напоминание ("незабудку") с тем, чтобы не забыть сделать гиперссылки на другие страницы нашего сайта. Такие комментарии не отображаются Web-обозревателем, а в окне Dreamweaver выводятся в виде небольшого значка, практически не влияющего на внешний вид страницы.

Всем хороши HTML-комментарии, но и у них есть недостатки. Первый недостаток: код такого комментария увеличивает размер Web-страницы, не принося при этом никакой пользы конечному пользователю (такой вот каламбур). Второй недостаток: после выполнения всех работ, о которых напоминает нам комментарий-"незабудка", последний нужно удалить. А поскольку Web-дизайнер — человек, а не программа, то он имеет досадное свойство забывать сделать элементарнейшие вещи. Как, например, забыли это сделать и мы.

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

Давайте посмотрим, что же это за чудо техники и как его можно использовать.

Но, прежде всего, давайте проверим настройки. Откройте диалоговое окно Site Definition для нашего сайта Sample site 1. (Выберите пункт Edit Sites меню Site панели Site, потом в списке сайтов появившегося диалогового окна Edit Sites выберите пункт Sample site 1 и нажмите кнопку Edit.) Переключитесь на вкладку Design Notes. Ее содержимое показано на рис. 6.25. Удостоверьтесь, что флажок Maintain Design Notes включен (он должен быть включен по умолчанию). Если он выключен, Dreamweaver не будет поддерживать примечания.

Рис. 6.25. Диалоговое окно Site Definition (вкладка Design Notes)

Теперь обратите внимание на флажок Upload Design Notes for Sharing. Если он включен (а он также включен по умолчанию), Dreamweaver будет отправлять файлы, где хранятся примечания, на сервер вместе с другими файлами сайта. В принципе, это может быть удобно: вам не нужно хранить в своем жестком диске файлы локальной копии сайта, при необходимости что-то исправить вы можете просто загрузить их с сервера. Однако если вы не хотите, чтобы кто-то рылся в ваших примечаниях, можете отключить этот флажок. (Хотя посетители вашего сайта и так не смогут добраться до примечаний. А если все-таки доберутся, виноват будет администратор Web-сервера.)

Если вы сделали какие-либо изменения в настройках сайта, нажмите кнопку ОК; в противном случае нажмите кнопку Cancel. Закройте также окно Edit Sites, нажав кнопку Done.

Прежде всего, откройте страницу default.htm. Именно к ней мы-и привяжем наши первые примечания.

Выберите пункт Design Notes меню File или аналогичный пункт Design Notes for Page контекстного меню страницы. На экране появится диалоговое окно Design Notes, показанное на рис. 6.26. Переключитесь на вкладку Basic Info.

Рис. 6.26. Диалоговое окно Design Notes (вкладка Basic Info)

С помощью раскрывающегося списка Status выбирается состояние, на котором находится текущая страница. Здесь доступны следующие пункты:

draft — черновик;

revision1-revision3 — ревизия 1—3;

alpha — альфа-версия (предварительная версия, предназначенная для тестирования самими разработчиками сайта;

beta — бета-версия (предварительная версия, предназначенная для широкого тестирования конечными пользователями);

final — окончательная версия;

need attention — странице следует уделить внимания.

Само примечание вводится в текстовое поле Notes. К сожалению, из-за ошибки Dreamweaver не поддерживает русские предложения с пробелами, так что придется писать по-английски или по-русски с транслитерацией.

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

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

На вкладке All Info (рис. 6.27) вы можете ввести более подробную информацию о данной странице. Эта информация вводится в виде набора строк, имеющих формат:

<Имя>=<Значение>

В частности, несколько таких строк вы можете видеть в списке Info на рис. 6.27.

Рис. 6.27. Диалоговое окно Design Notes (вкладка All Info)

Чтобы ввести новую строку, нажмите кнопку со знаком "плюс", введите в поле ввода Name левую часть строки ("имя"), а в поле Value — правую ("значение").

Чтобы изменить существующую строку, выберите ее в списке Info, после чего в поле ввода Name измените ее левую часть (имя), а в поле Value — правую (значение).

Чтобы удалить ненужную строку, выберите ее в списке Info и нажмите кнопку со знаком "минус".

Закончив ввод примечаний, нажмите кнопку ОК.

Теперь вы можете проверить примечания. Для этого снова откройте страницу default.htm. Если вы включили флажок Show When File Is Opened, окно Design Notes (см. рис. 6.26) появится сразу же после открытия этой страницы.

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

Откроем страницу About.htm, где есть изображение, к которому можно добавить примечание, — портрет нашего мифического героя. Выделим портрет и... А вот теперь будьте внимательны: чтобы привязать к внедренному элементу примечание, нужно воспользоваться пунктом Design Notes контекстного меню графического изображения. Пункт Design Notes меню File позволяет привязать примечание только к самой странице.

Диалоговое окно Design Notes для внедренного элемента страницы ничем не отличается от окна, показанного на рис. 6.26. И это правильно: незачем лишний раз запутывать пользователя множеством разнокалиберных окон, выполняющих схожие задачи. К сожалению, флажок Show When File Is Opened в этом случае работать не будет — даже если вы его включите, окно Design Notes при открытии страницы не появится.

Введите что-нибудь в качестве примечания и нажмите кнопку ОК. Закройте все окна документа Dreamweaver, разверните панель Site на весь экран и обратите внимание на список файлов локальной копии (рис. 6.28).

Рис. 6.28. Значки примечаний в списке файлов панели Site

Вы видите, что в столбце Notes в строках, описывающих файлы default.htm и Ivanov.gif, появились некие значки. Это значки примечаний; они сигнализируют, что к таким-то файлам привязаны примечания. Вы можете дважды щелкнуть по такому значку мышью, и на экране появится окно Design Notes.

Выше мы описали, как задаются примечания в окне документа. То же самое вы можете сделать и в панели Site. To есть вы можете либо выбрать пункт Design Notes меню File, либо воспользоваться аналогичным пунктом контекстного меню панели. Но проще всего дважды щелкнуть по столбцу Notes списка файлов, даже если там и нет значка примечания.

Активы

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

Активы отображаются в панели Assets (рис. 6.29), которую вы можете найти в доке. Если же ее там нет, выберите пункт Assets меню Window или нажмите клавишу <F11>.

Рис. 6.29. Окно активов

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

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

П графические изображения (имеются в виду "классические" форматы Интернета — GIF и JPEG и "новичок" PNG);

цвета;

гиперссылки;

изображения и фильмы Flash;

изображения и фильмы Shockwave;

фильмы "классических" форматов, в частности AVI и MOV;

сценарии, написанные на языках JavaScript и VBScript (будут рассмотрены в главе 13);

шаблоны (будут рассмотрены в главе 9);

элементы библиотеки Dreamweaver (будет рассмотрена в конце этой главы).

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

Но как же использовать это неописуемое богатство? Очень просто.

Графические изображения, фильмы и гиперссылки вы можете просто перетащить мышью на свою страницу, в то место, где они должны находиться. При этом Dreamweaver сам вставит в нужное место соответствующий HTML-код. Этого же можно достичь, выбрав пункт Insert (для цветов -пункт Apply) контекстного меню списка или дополнительного меню панели Assets или нажав кнопку Insert в левом нижнем углу этой панели.

Dreamweaver также предусматривает возможность изменить графическое изображение формата GIF, JPEG, PNG, Flash или Shockwave, если у вас установлено соответствующее приложение (а именно, Flash и Shockwave для "своих" форматов и Fireworks — для форматов GIF, JPEG и PNG). Для этого достаточно дважды щелкнуть по нужной позиции списка или выбрать пункт Edit контекстного или дополнительного меню. Также можно нажать кнопку Edit в правом нижнем углу панели Assets (рис. 6.30).

Рис. 6.30. Кнопка Edit панели Assets

Также для внедренных объектов поддерживается поиск соответствующего файла и копирование его в другой сайт. Чтобы найти файл, где сохранено изображение или фильм, выберите пункт Locate in Site контекстного меню, и Dreamweaver активизирует окно сайта с выделенным в списке файлом. Чтобы скопировать файл, соответствующий внедренному элементу, в другой сайт, выберите нужный пункт в подменю Copy to Site контекстного меню. Запомните, что при этом Dreamweaver просто копирует файл в другой сайт, но никак не связывает его с другими файлами — об этом вы должны позаботиться сами.

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

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

Список избранных элементов

И такую возможность поддерживает Dreamweaver. А именно — вы можете создать список избранных элементов, своего рода "любимчиков".

Поместить нужный элемент активов в список избранных очень просто: достаточно выделить необходимую позицию в списке панели Assets и выбрать пункт Add to Favorites контекстного или дополнительного меню или щелкнуть кнопку Add to Favorites внизу окна активов (рис. 6.31). Dreamweaver выдаст вам небольшое предупреждение, сообщающее, что выбранный элемент будет добавлен в список ваших "любимчиков". И, предупреждая ваш вопрос, подскажет, где его искать. Закройте окно-предупреждение, нажав кнопку ОК. Последуйте доброму совету: включите переключатель Favorites в верхней части панели Assets. Как видите, панель Assets после этого практически не изменится (рис. 6.32) — изменится только содержимое списка элементов. Также в ней останутся панель предварительного просмотра, значки категорий и набор кнопок, выполняющих разные задачи.

Рис. 6.31. Кнопка Add to Favorites панели Assets

Вы можете помещать на страницы выбранные элементы простым перетаскиванием, выбрав пункт Insert (или пункт Apply — для цветов) в контекстном или дополнительном меню или нажав одноименную кнопку в левом нижнем углу панели. Вы можете открывать элементы для редактирования, дважды щелкнув нужную позицию в списке, выбрав пункт Edit в контекстном или дополнительном меню или нажав кнопку Edit в правом нижнем углу панели (см. рис. 6.30). Также вы можете искать соответствующие файлы в текущем сайте и копировать их в другие сайты — вы знаете, как это делается.

На этом сходство заканчивается. Далее начинаются различия.

Рис. 6.32. Панель Assets, отображающая список избранных элементов

Элементам, помещаемым вами в "любимчики", присваиваются "прозвища" (по-английски — nicknames). Изначально они совпадают с именем файла без расширения, что не всегда удобно. Вы можете дать элементу вразумительное "прозвище", щелкнув по нему, введя новое "прозвище" в появившемся поле ввода и нажав клавишу <Enter>. Аналогичную функцию выполняет пункт Edit Nickname контекстного или дополнительного меню.

Список избранных элементов может быть организован наподобие файловой системы, т. е. в виде папок и вложенных в них файлов. Создать папку можно, выбрав в контекстном или дополнительном меню пункт New Favorites Folder или нажав кнопку New Favorites Folder в правом нижнем углу панели (рис. 6.33). В списке появится новая папка, причем вместо ее имени будет показано поле ввода, в которое вы сможете ввести имя новой папки, после чего не забудьте нажать клавишу <Enter>.

Рис. 6.33. Кнопка New Favorites Folder панели Assets (режим отображения списка избранных элементов)

Создав папку, вы можете переместить в нее любые элементы простым перетаскиванием, как вы работаете с файлами в окне Проводника или в панели Site. Вы также можете вкладывать папки в другие папки и таким образом создавать многоуровневую структуру. Посмотрите, что получилось у нас — рис. 6.34.

Рис. 6.34. Многоуровневая структура папок в списке избранных элементов

Ну и, разумеется, Dreamweaver предоставляет вам возможность удалить любой элемент, "впавший в опалу", из списка избранных. Для этого выделите элемент и нажмите клавишу <Del>, выберите пункт Remove from Favorites контекстного или дополнительного меню или нажмите на одноименную кнопку в правом нижнем углу панели (рис. 6.35). Элемент списка избранных удаляется без предупреждения, поэтому будьте внимательны. Таким же образом вы можете удалить любую папку, только учтите, что папка удаляется сразу со всем содержимым. Поэтому, если какие-либо файлы, входящие в эту папку, вам еще нужны, сначала переместите их в какое-нибудь другое место.

Рис. 6.35. Кнопка Remove from Favorites панели Assets (режим отображения списка избранных элементов)

Чтобы вернуться в список активов, включите переключатель Site в верхней части панели Assets.

Библиотека

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

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

Библиотека доступна из панели Assets. Вызовите эту панель (проще всего нажать клавишу <F11>) и щелкните по самому нижнему из значков категорий. Все — теперь вы просматриваете содержимое своей пока еще пустой библиотеки (рис. 6.36).

Рис. 6.36. Список содержимого библиотеки

Поместить новый элемент в библиотеку очень просто. Достаточно выделить нужный фрагмент Web-страницы и перетащить его в окно библиотеки. Откройте страницу default.htm, выделите заголовок, первый абзац и горизонтальную линию, отделяющую его от остального текста, и добавьте выделенный фрагмент в библиотеку. Вы также можете выбрать пункт Add Object to Library в подменю Library меню Modify или нажать комбинацию клавиш <Ctrl>+<Shift>+<B>. В списке появится новая позиция, вместо имени ко-торой будет показано поле ввода. Введите туда имя вновь созданного элемента библиотеки, например "Header", и нажмите клавишу <Enter>. Вот и все.

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

Вот мы и положили начало нашей библиотеке. Теперь вы можете вставить этот элемент куда угодно, перетащив его мышью на страницу, выбрав пункт Insert контекстного или дополнительного меню или нажав кнопку Insert в левом нижнем углу панели.

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

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

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

Давайте, например, изменим цвет шрифта слова "Здравствуйте!". Выделите наш единственный элемент библиотеки и либо выберите пункт Edit контекстного или дополнительного меню, либо нажмите на кнопку Edit в правом нижнем углу панели (см. рис. 6.30). На экране появится новое окно документа, содержащее элемент библиотеки.

Измените цвет слова "Здравствуйте!" на темно-красный и закройте окно. Dreamweaver спросит вас, сохранять ли этот элемент; нажмите кнопку Yes. После этого на экране появится диалоговое окно Update Library Items, в точности совпадающее с уже знакомым вам окном Update Files (см. рис. 6.14). Нажмите кнопку Update и закройте появившееся на экране другое диалоговое окно, нажав кнопку Close. Если вы теперь откроете страницу default.htm, то увидите, что цвет слова "Здравствуйте!" изменился.

Что еще вы можете сделать с элементами библиотеки? Да практически то же, что и с избранными элементами, т. е.:

переименовать, щелкнув по имени элемента или выбрав пункт Rename контекстного или дополнительного меню;

удалить, нажав клавишу <Del>, выбрав пункт Delete контекстного или дополнительного меню или нажав на кнопку Delete в правом нижнем углу панели (рис. 6.37). Dreamweaver выдаст предупреждение; нажмите кнопку Yes для удаления элемента и кнопку No для отказа от удаления При этом элементы, помещенные на страницы, будут сохранены;

найти на сайте соответствующий файл, выбрав пункт Locate in Site контекстного меню. Элементы библиотеки сохраняются в файлах под введенными вами именами и расширением Ibi в подпапке Library корневой папки сайта;

скопировать этот файл в библиотеку другого сайта, выбрав соответствующий пункт подменю Copy to Site контекстного меню.

Рис. 6.37. Кнопка Delete панели Assets (режим отображения содержимого библиотеки)

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

Для того чтобы обновить открытую в активном окне документа страницу, выберите пункт Update Current Page контекстного меню элемента библиотеки, дополнительного меню панели или подменю Library меню Modify главного окна. Dreamweaver сразу же обновит ее.

Другое дело, если вам нужно обновить страницы во всем сайте. Для этого выберите пункт Update Site. На экране появится диалоговое окно Update Pages, показанное на рис. 6.38. Это окно уже вам знакомо — Dreamweaver выводит его при каждом удобном случае.

Рис. 6.38. Диалоговое окно Update Pages

Если же вам необходимо обновить все страницы сайта, выберите в раскрывающемся списке Look in пункт Entire Site, а в раскрывающемся списке, расположенном справа от него, — название сайта. Если требуется обновить только те страницы, на которых вы поместили тот или иной библиотечный элемент, выберите в том же раскрывающемся списке Look in пункт Files That Use, а в раскрывающемся списке, расположенном справа от него, -имя необходимого библиотечного элемента. Проверьте, включен ли флажок Library Items в группе Update. И нажмите кнопку Start.

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

Иногда бывает необходимо преобразовать элемент библиотеки, помещенный на Web-страницу, в обычный фрагмент кода HTML. Для этого выделите его в окне документа и выберите в контекстном меню пункт Detach from Original. После этого Dreamweaver выдаст вам небольшое окно-предупреждение; нажмите кнопку Yes, чтобы открепить элемент от библиотеки, и кнопку No, если вы почему-то передумали делать это.

Дополнительные возможности поиска и замены

В главе 2 мы узнали о мощных возможностях текстового поиска и замены, предоставляемых Dreamweaver. Однако мы рассмотрели их не все.

Взгляните на рис. 2.27. Видите раскрывающийся список Find In? А ведь мы о нем так ничего и не сказали.

Этот раскрывающийся список задает файлы, где будет выполняться поиск и замена. Здесь доступны четыре пункта:

Current Document — поиск и замена выполняются в тексте страницы, открытой в активном окне. Этот пункт выбран по умолчанию;

Entire Local Site — поиск и замена осуществляются в файлах всего сайта;

Selected Files In Site — поиск и замена производятся в выбранных в окне сайта файлах;

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

При выполнении поиска Dreamweaver будет последовательно открывать страницы, где встретилась введенная подстрока. Вы также можете выполнить глобальный поиск, нажав кнопку Find All. Результаты поиска будут отображены в уже знакомой вам панели Search (см. рис. 2.30).

Другие возможности

Кроме примечаний, активов и библиотеки, Dreamweaver таит еще много приятных для Web-дизайнеров сюрпризов. И со временем мы их изучим. Однако будьте готовы к тому, что все они потребуют, чтобы вы прежде создали сайт, а уж потом приступали к разработке страниц.

В частности, в главе 3 мы изучили так называемые HTML-стили — предопределенные наборы установок параметров текста, которые вы можете использовать для его форматирования. Так вот, HTML-стили требуют, чтобы вы сначала создали сайт. А все потому, что записи о заданных HTML-стилях сохраняются в виде файлов в корневой папке сайта.

В дальнейшем, когда мы будем рассматривать табличный дизайн Web-страниц, вы познакомитесь с шаблонами. Чтобы использовать шаблоны, нам опять-таки понадобится создать сайт. Так что, в Dreamweaver без сайта никуда.

Что дальше?

Вот мы и создали свой первый Web-сайт. И не только создали, но и опубликовали в Сети. Прославились на весь мир, так сказать...

Казалось бы, чего еще желать. Однако правду говорят в народе, что первый блин — всегда комом. Ну, не сказать, чтобы наш первый сайт получился таким уж неудачным, но как-то он... не очень... И при взгляде на шикарные Web-творения, присутствующие в Интернете по соседству с нашим более чем скромным сайтиком, просто зависть берет. Ну, неужели мы так не можем?!

Можем, конечно. И сделаем! Но сначала изучим профессиональные способы Web-дизайна. И начнем с классических — фреймовых, использующих одну из самых интересных возможностей, предоставляемых HTML, -фреймы.

ву.ЧАСТЬ II. ЗАНИМАЕМСЯ ПРОФЕССИОНАЛЬНЫМ WEB-ДИЗАЙНОМ

Глава 7. Фреймы

Введение во фреймы

Фрейм и набор фреймов

Схемы наборов фреймов

Сложные наборы фреймов

Работа с фреймами

Создание фреймов

Работа с фреймами и наборами фреймов

Свойства наборов фреймов

Свойства фреймов

Замещение и работа с ним

Создание содержимого фреймов

Заполнение фреймов

Создание остальных страниц сайта

Цель гиперссылки

Полоса навигации

Оптимизация фреймов

Уменьшение объема и сложности HTML-кода

Ускорение обработки фреймов

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

Недостатки фреймов и их преодоление

Проблема с фреймами в старых версиях Navigator

Что дальше?

ЧАСТЬ II.

Занимаемся профессиональным Web-дизайном

Глава 7. Фреймы

Глава 8. Табличный дизайн

Глава 9. Использование шаблонов

Глава 10. Каскадные таблицы стилей

ГЛАВА 7.

Фреймы

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

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

Введение во фреймы

Так что же такое фреймы? Давайте выясним это.

Фрейм и набор фреймов

Откройте какую-нибудь из наших Web-страниц, созданных в предыдущих главах. Посмотрите на нее. Что она собой представляет? Правильно, текстовый документ. Обычный текстовый документ, возможно, "разбавленный" графикой и таблицами. Но, так или иначе, все это помещается в основном "потоке" текста и лишь изредка выбивается из него (например, изображения, выровненные влево или вправо; подробнее см. главу 4). Все, абсолютно все "течет" в этом могучем "потоке": и основное (полезное) содержимое страницы, и сведения об авторских правах, и заголовок, и набор гиперссылок.

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

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

Схематично все это можно представить так, как показано на рис. 7.1.

Заголовок сайта

Набор гиперссылок для перехода между страницами сайта


Полезное содержание сайта
Сведения о правах разработчика сайта

Рис. 7.1. Классический набор из четырех фреймов

Это очень удобно. Когда посетитель сайта щелкает по гиперссылке, обновляется только содержимое одной "форточки" (в которой отображается основное содержимое). Такой подход дает Web-дизайнеру два главных преимущества. Во-первых, страницы загружаются значительно быстрее, т. к. содержат только полезную информацию, без набора гиперссылок, заголовка, сведений об авторских правах и прочей вспомогательной информации. Во-вторых, не нужно всю эту дополнительную информацию дублировать на каждой странице сайта — достаточно создать специальные странички, содержащие ее части, а потом загрузить их в соответствующие "форточки". А если нам нужно изменить, скажем, адрес какой-нибудь гиперссылки, мы просто меняем его на одной-единственной страничке вместо того, чтобы просматривать все страницы сайта, на которых мы поместили данную гиперссылку.

Отлично! Теперь давайте назовем вещи своими именами. "Форточки", иначе говоря, части, на которые делится окно Web-обозревателя, — это и есть фреймы (от англ, frame — кадр). А набор таких частей назовем набором фреймов (по-английски — frameset). Способ же разработки Web-сайтов с использованием фреймов называется фреймовым дизайном.

Как же формируется набор фреймов? Что для этого необходимо?

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

Запомните, что такая страница не должна содержать никаких полезных данных, никакого текста — только определение набора фреймов. Но даже если бы она и содержала какой-то текст, Web-обозреватель все равно не отобразил бы его, т. к. он не знает, где его отобразить — все свободное пространство его окна будет задано набором фреймов.

Фреймы — достаточно давнее дополнение, введенное в язык HTML. Однако высокоученые головы из комитета W3C только недавно включили их в HTML-стандарт. В результате такой политики неприятия весьма полезного нововведения фреймы на сегодняшний день стали, наверное, самым "нестандартным" из элементов HTML. Старые программы Web-обозревателей поддерживают их по-разному, хотя более новые их версии и пытаются соблюдать стандарты.

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

Схемы наборов фреймов

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

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

Давайте рассмотрим эти фреймы подробнее.

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

Набор гиперссылок — второй по важности фрейм в схеме. Так как Web-сайт отличается от простого набора Web-страниц своей взаимосвязанностью, без гиперссылок, связывающих разнородные страницы в единое целое, не обойтись. Почти всегда набор гиперссылок помещается в вертикальном фрейме, расположенном слева от основного содержимого, вдоль левой границы окна Web-обозревателя. Иногда, правда, набор гиперссылок переносят вправо, как показано на рис. 7.2. А порой он "вытягивается" по горизонтали сверху или снизу (рис. 7.3) основного содержимого.






Заголовок сайта


Полезное содержимое сайта


Набор гиперссылок для перехода между страницами сайта

Сведения о правах разработчика сайта




Рис. 7.2. Набор фреймов с набором гиперссылок, расположенным справа





Заголовок сайта

Набор гиперссылок для перехода между страницами сайта

Полезное содержимое сайта




Сведения о правах разработчика сайта



Рис. 7.3. Набор фреймов с набором гиперссылок, расположенным сверху

Автору также встречались наборы фреймов с двумя разными наборами гиперссылок, расположенными сверху и снизу (рис. 7.4) от основного содержимого. Верхний набор гиперссылок указывал на страницы с основным содержимым сайта, а нижний — на страницы с дополнительным, неглавным содержимым (сведения о контакте, карта сайта и пр.).





Заголовок сайта

Набор гиперссылок 1

Полезное содержимое сайта

Набор гиперссылок 2

Сведения о правах разработчика сайта



Рис. 7.4. Набор фреймов с двумя наборами гиперссылок, расположенными сверху и снизу

Заголовок сайта — тоже достаточно важная вещь. Можно сказать, это лицо сайта. Поэтому его часто помещают в горизонтальный фрейм, расположенный сверху, вдоль верхней стороны окна Web-обозревателя. Таким образом он хорошо виден, но и не бросается в глаза, если специально на него не смотреть. Иногда его разделяют на два фрейма, в одном из которых находится логотип сайта, а в другом — текст названия (рис. 7.5).






Логотип Название сайта

Набор гиперссылок для перехода между страницами сайта

Полезное содержимое сайта




Сведения о правах разработчика сайта




Рис. 7.5. Набор фреймов с заголовком, состоящим из двух частей

Впрочем, часто заголовок помещают в текст начальной страницы, отображаемой в качестве основного содержимого. В этом случае он не занимает место на экране, оставляя его для основного содержимого сайта. Данный подход также правилен. Однако следует помнить, что тогда посетитель сайта может забыть, где он, собственно, находится в данный момент, иначе говоря, "заблудится". Поэтому сведения о сайте необходимо все-таки дублировать на страницах основного содержимого. Компромиссным вариантом будет объединение заголовка сайта и набора гиперссылок в одной странице и, как следствие, в одном фрейме, как показано на рис. 7.6.







Полезное содержимое сайта

Заголовок сайта и набор гиперссылок для перехода между страницами сайта


Сведения о правах разработчика сайта




Рис. 7.6. Набор фреймов с заголовком, объединенным с набором гиперссылок

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

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

Кроме того, часто в отдельных фреймах помещают рекламу в виде банне-ров. Таким образом реклама отделяется от действительно полезной информации. Обычно фреймы с рекламой располагаются горизонтально сверху и (или) снизу окна Web-обозревателя и не очень велики по размерам — как раз на один или два баннера (рис. 7.7).

Особенно часто рекламу во фреймах помещают Web-серверы, бесплатно "раздающие" место под Web-сайты пользователей. В качестве платы за бесплатность они либо заставляют вас поместить на ваши страницы рекламные баннеры (что не наш случай), либо "втискивают" ваши странички во фрейм, а в соседних фреймах набора "развешивают" свои баннеры. Иногда это бесит, но, в конце концов, надо же владельцам этих Web-серверов на что-то жить. А реклама — иной раз единственный источник дохода в Интернете...





Рекламные баннеры

Остальное содержимое сайта




Рекламные баннеры



Рис. 7.7. Набор фреймов с двумя рекламными блоками

Здесь следует сказать еще о так называемых нулевых или невидимых фреймах. Так называются фреймы, чья ширина (для вертикальных фреймов) или высота (для горизонтальных) равна нулю. Фактически такие фреймы не видимы в окне Web-обозревателя. Используются они, как правило, для всяческих неблаговидных целей: размещения рекламных баннеров, которые оплачиваются за факт показа (такой баннер как бы показывается, но на самом деле не видим), скрытия какой-либо важной информации и пр. Часто такие "фокусы" можно увидеть на хакерских и жульнических сайтах.

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

Сложные наборы фреймов

А теперь нужно рассказать об одной особенности фреймов, которую вам обязательно надо знать.

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

Но проблема в том, что фреймы, входящие в один набор, могут располагаться либо только по горизонтали, либо только по вертикали. Но, скажете вы, как же сделать наборы фреймов, приведенные на рис. 7.1—7.7? Ведь их же кто-то делает, а если не делает, так зачем их было здесь приводить?

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

Взгляните на рис. 7.1. Давайте подумаем, как приведенный на нем набор фреймов можно реализовать на практике. Здесь мы имеем три фрейма, расположенных горизонтально и занимающих всю ширину набора, и один фрейм, занимающий часть среднего фрейма. Очевидно, что нам понадобятся два набора фреймов: один, внешний, делящий окно Web-обозревателя на три части по горизонтали, и второй, внутренний, делящий средний фрейм надвое по вертикали. Рис. 7.8 иллюстрирует вышесказанное.







Заголовок сайта



Набор гиперссылок для перехода между страницами сайта Полезное содержимое сайта


Сведения о правах разработчика сайта






Рис. 7.8. Сложный набор фреймов, состоящий из двух простых. Внешний набор фреймов обозначен сплошными линиями, внутренний — штриховыми

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

Работа с фреймами

Но хватит пустых разговоров! Давайте займемся делом и на конкретном примере рассмотрим принципы фреймового дизайна. Мы создадим новую версию нашего сайта, посвященного гипотетическому Web-дизайнеру Ивану Ивановичу Иванову, версию, основанную на фреймах. И, не мудрствуя лукаво, выберем для него схему, показанную на рис. 7.1.

Проверьте, создали ли вы новую папку Sample2. Также проверьте, не удалили ли вы старую версию сайта, находящуюся в папке Sample 1. Ведь одна из важнейших заповедей Web-дизайнера: не разбрасываться старыми материалами — они могут пригодиться для нового сайта. Проверили? Все на месте? Тогда вперед!

Прежде всего, введем в Dreamweaver информацию о новом сайте. Вы можете просто взять сайт Sample site 1 и заменить его имя, корневую папку и имя главной страницы, а можете и создать новый сайт "с нуля". Как это делается, было рассказано в главе 6. На вкладке Remote Info диалогового окна Site Definition в раскрывающемся списке Access выберите пункт None (см. рис. 6.3) — мы с вами нигде не будем публиковать этот сайт. И имя нашего сайта будет Sample site 2.

После этого создайте новую Web-страницу. Сейчас мы рассмотрим процесс создания фреймов...

Создание фреймов

Да, мы рассмотрим, как создаются фреймы в Dreamweaver.

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

Внимание!

При открытии страницы, определяющей набор фреймов, вам придется каждый раз включать пункт-выключатель Frame Borders подменю Visual Aids меню View. К сожалению, Dreamweaver не запоминает этой установки.

Проще всего набор фреймов можно создать, воспользовавшись вкладкой Frames панели объектов. На рис. 7.9 показаны те ее кнопки, которые нам сейчас нужны. Голубым (на рисунке — светло-серым) цветом закрашен текущий фрейм, т. е. тот, в котором в настоящий момент стоит текстовый курсор. Также можно воспользоваться пунктами подменю Frames меню Insert. В табл. 7.1 приведены описания всех кнопок вкладки Frames панели объектов и соответствующих им пунктов подменю Frames.

Рис. 7.9. Вкладка Frames панели объектов (показана частично)

Таблица 7.1. Кнопки вкладки Frames панели объектов (в порядке слева направо)







Название кнопки

Пункт подменю Frames меню Insert

Описание



Left Frame Left Вставляет фрейм слева от текущего (того, в котором находится текстовый курсор) в тот же набор

Right Frame Right Вставляет фрейм справа от текущего в тот же набор

Top Frame Top Вставляет фрейм выше текущего в тот же набор

Bottom Frame Bottom Вставляет фрейм ниже текущего в тот же набор

Bottom and Nested Left Frame Bottom Nested Left Вставляет фрейм ниже текущего в тот же набор, создает в текущем фрейме вложенный набор с двумя горизонтальными фреймами и делает текущим правый фрейм вложенного набора

Bottom and Nested Right Frame Bottom Nested Right Вставляет фрейм ниже текущего в тот же набор, создает в текущем фрейме вложенный набор с двумя горизонтальными фреймами и делает текущим левый фрейм вложенного набора

Left and Nested Bottom Frame Left Nested Bottom Вставляет фрейм левее текущего в тот же набор, создает в текущем фрейме вложенный набор с двумя вертикальными фреймами и делает текущим верхний фрейм вложенного набора

Right and Nested Bottom Frame Right Nested Bottom Вставляет фрейм правее текущего в тот же набор, создает в текущем фрейме вложенный набор с двумя вертикальными фреймами и делает текущим верхний фрейм вложенного набора

Top and Bottom Frames Top and Bottom Вставляет два фрейма сверху и снизу от текущего

Left and Nested Top Frame Left Nested Top Вставляет фрейм левее текущего в тот же набор, создает в текущем фрейме вложенный набор с двумя вертикальными фреймами и делает текущим нижний фрейм вложенного набора












Right and Nested Top Frame

Top and Nested Left Frame

Top and Nested Right Frame

Right Nested Top

Top Nested Left

Top Nested Right

Вставляет фрейм правее текущего в тот же набор, создает в текущем фрейме вложенный набор с двумя вертикальными фреймами и делает текущим нижний фрейм вложенного набора

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

Вставляет фрейм выше текущего в тот же набор, создает в текущем фрейме вложенный набор с двумя горизонтальными фреймами и делает текущим левый фрейм вложенного набора







Итак, давайте приступим к созданию нашего набора фреймов.

Прежде всего, создадим верхний фрейм, в котором у нас будет помещаться заголовок сайта. Нажмем кнопку Top Frame. В результате получатся два фрейма, расположенные горизонтально, друг над другом (рис. 7.10).

Теперь убедимся, что текстовый курсор стоит в нижнем фрейме, и нажмем кнопку Bottom Frame. В результате получим еще один фрейм, но расположенный на этот раз ниже текущего (рис. 7.11).

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

Измените размеры фреймов так, чтобы средний фрейм занимал максимум места на экране. (Помните, что мы говорили об основном содержимом сайта?) Верхний и нижний фреймы сделайте совсем узкими. А если впоследствии содержимое не будет в них помещаться, мы их увеличим.

Осталось создать еще один фрейм — левый, где будет помещаться набор гиперссылок. Его мы создадим немного по-другому, для чего воспользуемся подменю Frameset меню Modify.

Рис. 7.10. Два горизонтальных фрейма

Рис. 7.11. Три горизонтальных фрейма

Там находятся следующие пункты:

Split Frame Left — создание фрейма слева от текущего;

Split Frame Right — создание фрейма справа от текущего;

Split Frame Up — создание фрейма сверху от текущего;

Split Frame Down — создание фрейма снизу от текущего.

Итак, сделайте текущим средний фрейм и выберите в подменю Frameset меню Modify пункт... правильно, Split Frame Left. Вы получите последний фрейм, который как раз и был нам нужен. Уменьшите его ширину — это делается так же, как и в случае с горизонтальными фреймами. У вас должно получиться нечто, похожее на то, что изображено на рис. 7.12

Рис. 7.12. Готовый набор фреймов

Теперь дайте готовой странице с набором фреймов название "Иван И. Иванов" и сохраните ее, выбрав пункт Save All меню File — это позволит сохранить также содержимое всех фреймов. На экране появится стандартное диалоговое окно сохранения файла Windows, предлагающее вам сохранить сам набор фреймов под именем UntitledFrameset-l.htm. Сохраните его в корневой папке нового сайта под именем default.htm.

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

Рис. 7.13. Толстая штриховая линия выделяет фрейм, чье содержимое сохраняется в данный момент

Все остальные страницы сайта сохраните в папке HTMLs. Странице со сведениями об авторских правах дайте имя Copyright.htm. Страницу, по умолчанию отображаемую во фрейме с основным содержимым, назовите Main.htm, страницу со списком гиперссылок — Nav.htm, а страницу с заголовком сайта — Header.htm.

Внимание!

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

Существует еще один способ создания фреймов. Сейчас мы с вами его рассмотрим.

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

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

Примечание

Наборы фреймов описываются с помощью парного тега <FRAMESET>, который должен содержать один из атрибутов: ROWS или COLS. Названные атрибуты задают список значений высоты (для тега <ROWS>) или ширины (для <COLS>) всех фреймов данного набора. Сами фреймы задаются одинарным тегом <FRAME>. И <FRAMESET>, и <FRAME> поддерживают множество атрибутов, задающих различные свойства набора фреймов и самих фреймов; эти атрибуты мы рассмотрим позднее.

В частности, код, определяющий набор из двух горизонтально расположенных фреймов, верхний из которых занимает 20% пространства окна, а другой — 80%, выглядит так:

<FRAMESET ROWS="20%,80%" ...>

<FRAME ...> <FRAME ...>

</FRAMESET>

Соответственно, два вложенных набора фреймов будут выглядеть так:

<FRAMESET ROWS="20%,80%" ...>

<FRAME ...>

<FRAMESET COLS="100,*" ...>

<FRAME ...> <FRAME ...>

</FRAMESET>

</FRAMESET>

Внимание!

Web-страница, описывающая набор фреймов, не должна включать в себя тег <BODY> и его содержимое. Она должна содержать только описание набора фреймов.

Работа с фреймами и наборами фреймов

А теперь выясним, что Dreamweaver позволит нам сделать с наборами фреймов и отдельными фреймами.

Свойства наборов фреймов

Для того чтобы задать свойства наборов фреймов и отдельных фреймов, нужно сначала выбрать один из них. Лучше всего это проделывать в панели Frames. Изначально она отсутствует в доке, поэтому выберите пункт Frames в подменю Others меню Window или нажмите комбинацию клавиш <Shift>+<F2>. Сама панель Frames показана на рис. 7.14.

Рис. 7.14. Панель Frames

Посмотрите внимательно на эту панель. В ней показаны все фреймы и вся структура наборов фреймов. Фреймы изображены в виде серых прямоугольников, внутри которых написаны их имена (об именах фреймов мы поговорим ниже). Надпись "(no name)" говорит о том, что фрейм не имеет имени. Наборы фреймов представлены в виде толстых темно-серых границ, окружающих пары фреймов. На самом деле, это весьма удобно — все сразу видно. Единственная сложность: поначалу трудно попасть мышью в кажущуюся такой толстой границу фреймового набора.

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

А теперь самое время рассказать, что Dreamweaver позволяет нам сделать с наборами фреймов. Выберите в панели Frames какой-либо набор фреймов, например, самый внешний. Вид редактора свойств в этом случае показан на рис. 7.15.

Рис. 7.15. Вид редактора свойств при выделенном наборе фреймов

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

Раскрывающийся список Borders позволяет задать наличие или отсутствие границ между фреймами набора. Здесь доступны три пункта: Yes — границы есть, No — границ нет и Default — значение по умолчанию, зависящее от Web-обозревателя (как правило, границы есть).

Если вы выставили параметр Borders в Yes или Default, проверьте установки параметра Border Width. Поле ввода Border Width позволяет задать толщину границы в пикселах; если она равна нулю, то граница невидима. И наоборот, если вы выставили Borders в No, лучше установите Border Width в ноль, иначе могут быть проблемы с отображением в некоторых программах Web-обозревателей. Значение по умолчанию зависит от Web-обозревателя и операционной системы.

Внимание!

Границы малой толщины (меньше двух пикселов) могут отображаться неправильно или не отображаться вообще. Подробнее об особенностях границ фреймов см. в электронном руководстве по HTML (атрибут BORDER тега <FRAMESET>).

Селектор цвета Border Color позволяет задать цвет границы. Разумеется, чтобы этот параметр имел действие, граница между фреймами набора должна быть видимой. Значение по умолчанию зависит от Web-обозревателя (как правило, серая граница с трехмерным эффектом).

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

Вообще, в настоящее время фреймы с видимыми границами считаются дурным тоном. Сейчас в моде фреймы с невидимыми или очень тонкими границами. Мы тоже сделаем такие.

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

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

В поле ввода Value вводится значение высоты или ширины фрейма. Это значение может быть задано в пикселах или процентах. Также вы можете ввести туда знак звездочки ("*"), обозначающий все остальное доступное пространство, оставшееся от других фреймов. Dreamweaver корректно обработает его.

Раскрывающийся список Units задает единицу измерения высоты или ширины фрейма. Доступны три пункта: Pixels — пикселы, Percent — проценты и Relative — все остальное пространство (аналогично вводу звездочки в поле Value).

Надо сказать, что уже при создании набора фреймов Dreamweaver достаточно "интеллектуально" подставляет значения их параметров. Поэтому вполне возможно, что вам вовсе не придется их изменять. Ну, так, может быть, чуть-чуть подправить...

Загрузите созданную ранее страницу default.htm (см. рис. 7.12), если она еще не загружена. Выберите поочередно все наборы фреймов, проверьте значения их параметров и, если нужно, измените их. Значение Borders должно быть установлено в No, толщина границ Border Width — в ноль, а поле цвета границ Border Color должно оставаться пустым. Установите высоты верхнего (заголовок) и нижнего (сведения об авторских правах) фреймов в 30 пикселов, а ширину левого фрейма — в 100 пикселов. Если потом эти фреймы окажутся малы, мы их увеличим.

Свойства фреймов

С наборами фреймов мы разобрались. А что же с самими фреймами?

Выберите в панели Frames любой фрейм, скажем, самый верхний. Редактор свойств примет вид, показанный на рис. 7.16.

Рис. 7.16. Вид редактора свойств при выделенном фрейме

В поле ввода Frame Name вводится имя фрейма. Dreamweaver по умолчанию подставляет туда автоматически сформированное имя, и часто оно оказывается весьма удачным. Но иногда его следует изменить. Например, в нашем случае лучше всего будет дать ему имя Header, обозначив таким образом отображаемое в нем содержимое.

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

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

Раскрывающийся список Scroll задает, будет ли фрейм содержать полосы прокрутки. Доступны четыре пункта:

Yes — полосы прокрутки есть всегда;

No — полос прокрутки нет даже тогда, когда содержимое фрейма не помещается в нем;

Auto — полосы прокрутки появляются только тогда, когда в них появляется необходимость (содержимое фрейма не помещается в нем);

Default — значение по умолчанию, зависящее от Web-обозревателя (как правило, аналогично Auto).

Флажок No Resize позволяет запретить пользователю изменять размеры фреймов перетаскиванием их границ. Обычно пользователь может перетаскивать границы фреймов, изменяя их размеры. Для фреймов, отображающих специальную информацию, таких как набор гиперссылок или заголовок сайта, лучше запретить это, иначе подобные фреймы будут выглядеть неаккуратно. Впрочем, Dreamweaver об этом за нас уже позаботился -включил данный флажок.

Раскрывающийся список Borders уже вам знаком. Однако его действие распространяется только на данный фрейм. Таким образом, вы можете задать наличие или отсутствие границ и у отдельного фрейма. Пункт Default этого меню позволит вам вернуться к параметрам набора фреймов.

В селекторе цвета Border Color вы можете установить цвет границы фрейма.

Поля ввода Margin Width и Margin Height позволяют задать, соответственно, горизонтальное и вертикальное расстояния между границами фрейма и его содержимым. Значения по умолчанию — 14 пикселов.

Выберите поочередно все четыре фрейма и установите их параметры, как указано в табл. 7.2. Остальные параметры оставьте в положении по умолчанию.

Таблица 7.2. Параметры фреймов нашего набора








Фрейм

Frame Name

Scroll

No Resize



Верхний (заголовок сайта) Header No *

Левый (набор гиперссылок) Nav No *

Основной (основное содержимое сайта) Main Auto *

Нижний (сведения об авторских правах) Copyright No *






Установив параметры наборов фреймов и самих фреймов, сохраните страницу, выбрав пункт Save Frameset в меню File или нажав комбинацию клавиш <Ctrl>+<S>.

Примечание

Имя фрейма задается атрибутом NAME тега <FRAME>. Адрес Web-страницы, которая будет в нем отображаться, задается атрибутом SRC этого же тега. Остальные атрибуты перечислены в электронном руководстве по HTML, поставляемом в составе Dreamweaver.

Замещение и работа с ним

Мы уже говорили, что фреймы, хоть и стандартизированы совсем недавно, используются в Web-дизайне и поддерживаются Web-обозревателями уже довольно давно. Но все когда-нибудь делается в первый раз... И старейшие программы Web-обозревателей — Microsoft Internet Explorer и Netscape Navigator — поддерживают фреймы далеко не с первой версии. Кроме того, существует много программ, вообще ничего не знающих о фреймах. Они их просто не поддерживают, а вес потому, что эти программы слишком старые.

Что случится, если в таком Web-обозревателе открыть Web-страницу, представляющую собой набор фреймов? Скорее всего, он отобразит пустую страницу без всяких следов содержимого. Как вы помните, согласно стандартам HTML, Web-обозреватель обязан игнорировать неизвестные ему теги. Он их и проигнорирует. А поскольку опять по тем же стандартам страница с набором фреймов не должна иметь содержимого (тега <BODY>), то в результате мы получим пустое окно.

Каков же выход из этого положения?

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

Как же можно сформировать замещение в Dreamweaver? Как всегда, очень просто. Включите в подменю Frameset меню Modify пункт-выключатель Edit NoFrames Content. Окно документа очистится; в верхней его части появится серая полоса с надписью NoFrames Content. Введите в окно документа текст замещения.

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

Вы можете делать с текстом замещения все, что угодно. Вы можете помещать сюда внедренные элементы и таблицы, можете форматировать текст любыми доступными в HTML способами, можете задавать параметры текста замещения, как будто это обычная Web-страница, выбрав пункт Page Properties меню Modify. В частности, обязательно измените параметры текста замещения так, чтобы они совпадали с параметрами остальных страниц нового сайта (черный фон, белый текст и т. д.). (Помните: единообразие оформления прежде всего!) Вы только не можете создавать здесь фреймы. Понятно, почему.

Посмотрите, например, что сделал автор (рис. 7.17). Он скопировал сюда текст страницы default.htm нашего старого сайта.

Рис. 7.17. Текст замещения

Чтобы вернуться от текста замещения к набору фреймов, отключите в подменю Frameset меню Modify пункт-выключатель Edit NoFrames Content.

В каких случаях стоит задавать замещение? Только тогда, когда вы точно уверены, что среди посетителей вашего сайта будут обладатели старых программ Web-обозревателей. Причем, таких посетителей должно быть достаточно много, чтобы ради них выполнять дополнительную работу. Но учтите, что во всем мире таких ретроградов очень и очень мало; абсолютное большинство интернетчиков пользуются программами, поддерживающими фреймы.

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

Примечание

Замещение формируется с помощью парного тега <NOFRAMES>. Внутри этого тега располагается тело Web-страницы (с тегом <BODY>), содержащей текст замещения.

Создание содержимого фреймов

Создав набор фреймов и установив все параметры, можно приступать к наполнению фреймов содержимым.

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

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

Если вам неудобно работать со страницей в маленьком фрейме, вы всегда можете открыть эту страницу в отдельном окне документа Dreamweaver.

Заполнение фреймов

Сначала займемся верхним фреймом, содержащим заголовок сайта. Мы поместим в него имя нашего героя, выровненное по центру фрейма. Для этого используем таблицу из одной ячейки, занимающую все свободное пространство фрейма. Но сначала уберем промежутки между границей фрейма и его содержимым, устанавливаемые по умолчанию. Для чего выделите верхний фрейм в панели Frames и установите параметры Margin Width и Margin Height равными нулю. Это позволит нам отвести нашей таблице действительно все свободное пространство.

Теперь задайте цвета текста и фона страницы (гиперссылок здесь не будет). Поместите во фрейм текстовый курсор и вызовите диалоговое окно Page Properties (выберите пункт Page Properties в меню Modify или контекстном меню или нажмите комбинацию клавиш <Ctrl>+<J>). Задайте черный цвет фона (селектор цвета Background) и желтый цвет текста (селектор цвета Text). Также задайте нулевое значение для параметров Left Margin, Top Margin, Margin Width и Margin Height (расстояния от границы окна до границы содержимого страницы) и нажмите кнопку ОК. Название страницы можно не задавать — все равно в любом случае Web-обозреватель выведет в заголовке своего окна название страницы набора фреймов.

Поместите во фрейм таблицу из одной-единственной ячейки, занимающей всю его ширину и высоту. Задайте для содержимого ее ячейки выравнивание по центру, по горизонтали и вертикали. Установите флажок No Wrap -это запретит Web-обозревателю перенос текста в ячейке таблицы по строкам.

Введите в ячейку текст "Иван Иванович Иванов". Установите подходящий размер шрифта. Поэкспериментируйте с разными шрифтами. У вас получилось следующее (рис. 7.18).

Рис. 7.18, Готовый заголовок сайта

Теперь приступим к сведениям об авторских правах. Поставьте в нижний фрейм текстовый курсор и вызовите диалоговое окно Page Properties. Задайте опять черный цвет фона, желтый цвет текста, ярко-синий цвет гиперссылок (селектор цветов Links; цвет #00FFFF), тускло-синий цвет посещенных гиперссылок (селектор цветов Visited Links; #00CCFF) и светло-зеленый цвет активной гиперссылки (селектор цветов Active Links; #99FF00). Опять задайте нулевое значение для параметров Left Margin, Top Margin, Margin Width и Margin Height. После этого нажмите кнопку ОК.

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

Значения по умолчанию параметров Margin Width и Margin Height фрейма слишком велики (14 пикселов). Выберите нижний фрейм в панели Frames и установите значения равными 2 пикселам. Так будет лучше.

После этого вам останется только выделить его курсивом или отформатировать как-то особо, чтобы отделить от обычного текста. (Впрочем, он и так у нас отделен от всего остального.) И, возможно, изменить размер фрейма, чтобы содержащийся в нем текст отобразился полностью. У вас получится нечто, похожее на рис. 7.19.

Рис. 7.19. Готовые сведения об авторских правах

Сохраните набор фреймов и все содержимое фреймов, выбрав пункт Save All Frames меню File. Вообще-то "сохраняться" нужно как можно чаще — запомните это.

И напоследок займемся основным содержимым. По умолчанию в этом фрейме будет отображаться страничка с приветствием и текстом, описывающим сайт. Мы возьмем этот текст опять же со страницы default.htm

Рис. 7.20. Готовое основное содержимое сайта, отображаемое по умолчанию

старого сайта. Откройте ее в Web-обозревателе, если еще не открыли или уже закрыли.

В свойствах страницы основного содержимого укажите те же параметры, что и для страницы со сведениями об авторских правах. Значения параметров Margin Width и Margin Height для фрейма не меняйте. Далее переключитесь в окно Web-обозревателя, где открыта страница default.htm старого сайта, выделите весь текст вплоть до сведений об авторских правах, скопируйте его в буфер обмена Windows и вставьте во фрейм основного содержимого сайта. Немного подредактируйте текст, в частности уберите цветовое выделение слов "Macromedia Dreamweaver MX", преобразуйте библиотечный элемент в обычный текст и удалите наконец давно не нужный комментарий.

В результате у вас должно получиться то, что показано на рис. 7.20.

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

Но сначала создадим остальные страницы нашего сайта.

Создание остальных страниц сайта

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

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

Возьмите за образец страничку основного содержимого сайта Main.htm и делайте остальные страницы, держа ее перед глазами. Вы даже можете просто открыть страницу Main.htm в отдельном окне Dreamweaver, удалить весь текст и ввести новый. Только не сохраняйте страницу! А сделайте так: выберите пункт Save As в меню File или нажмите комбинацию клавиш <Ctrl>+<Shift>+<S>. На экране появится диалоговое окно сохранения файла Windows; введите новое имя файла и нажмите кнопку ОК. Все — теперь вы сохранили новую страницу под новым именем.

После этого вам останется только "позаимствовать" текст уже созданных вами страниц старого сайта. Откройте необходимую страницу в окне Web-обозревателя (или Dreamweaver), выделите нужный текст, скопируйте его

в буфер обмена и вставьте в новую страницу. Подредактируйте его, если нужно. И сохраните готовую страницу.

Имена файлов новых страниц сделайте такими же, как у файлов страниц старого сайта. А именно:

странице сведений об авторе дайте имя About.htm;

странице ссылок — Links.htm;

странице со списком увлечений — Passions.htm;

странице со списком проектов — Projects.htm.

Останется только открыть страницу Main.htm и исправить гиперссылки.

Ну что, закончили? Теперь откройте страницу default.htm нового сайта в окне Web-обозревателя и щелкните по любой гиперссылке. Что произойдет? Нечто ужасное и совершенно не то, что нам нужно. Страница, на которую ссылается гиперссылка, загрузится и займет все окно вместо того, чтобы "втиснуться" в отведенный ей фрейм. Что делать?

Цель гиперссылки

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

Откройте страницу default.htm. Установите текстовый курсор на любой гиперссылке, находящейся во фрейме с основным содержимым. Пусть это будет гиперссылка, ведущая на страницу сведений об авторе About.htm. И обратите внимание на редактор свойств. А именно на раскрывающийся список Target, позволяющий задать цель гиперссылки. В развернутом виде он показан на рис. 7.21.

Рис. 7.21. Раскрывающийся список Target, содержащий имена фреймов

Вы уже знаете, что этот список позволяет задать, где будет отображаться страница, на которую указывает гиперссылка. В частности, пункт _blank этого списка позволит загрузить ее в новое окно Web-обозревателя, а пункт _self — в то же самое окно (по умолчанию). Но что мы видим на рис. 7.21? Там перечислены все созданные нами фреймы! А что если выбрать пункт Main (фрейм основного содержимого сайта)? Давайте попробуем: выберем и снова загрузим страницу в окне Web-обозревателя. Ура, гиперссылка работает как надо!

Теперь поочередно выберите каждую гиперссылку в странице и установите параметр Target в Main, за исключением гиперссылки, ведущей на сайт фирмы Macromedia, и почтовой гиперссылки: для первой установите значение _blank (пусть их сайт открывается в новом окне), а для второй оставьте все, как было — все равно для нее параметр Target роли не играет.

Теперь давайте подытожим все, что мы узнали о значениях параметра

Target:

_blank загружает страницу в новое окно Web-обозревателя;

_parent загружает страницу во фрейм набора верхнего уровня, в котором находится текущий фрейм;

_top загружает страницу в текущее окно обозревателя, т. е. эта страница после загрузки заменит собой весь набор фреймов;

_self загружает страницу в текущий фрейм (в котором находится гиперссылка);

<имя фрейма> загружает страницу в заданный фрейм.

Здесь нужны некоторые пояснения, В самом деле, чем отличаются значения _parent и _top параметра Target? А вотчем.

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

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

Если же мы используем значение _top параметра Target, то страница заменит собой весь наш сложный набор фреймов, т. е. займет окно Web-обозревателя целиком.

Остальные значения параметра Target в комментариях не нуждаются.

Теперь, зная, как загрузить Web-страницу в нужный фрейм, можно заняться полосой навигации.

Полоса навигации

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

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

Вы, наверное, уже задали себе вопрос: зачем нужна пятая ссылка? Для страницы Main.htm. В старом сайте мы ни на одной странице не предусмотрели ссылки для возврата на первую страницу. И зря.

А что же графическая полоса навигации? Она делается с помощью той же таблицы. В ячейках таблицы размещаются графические изображения, выполняющие роль гиперссылок (просматривается аналогия с составным изображением). Вы можете использовать различные визуальные эффекты, например установить большие промежутки между изображениями, манипулируя параметрами Cell Padding и Cell Spacing каждой ячейки таблицы, или разместить их вплотную друг к другу. Опять же, вы можете задать для таблицы отдельный цвет фона или графический фон. В общем, все в ваших руках.

Вы можете использовать набор обычных статичных изображений для гиперссылок. Но такие статичные ссылки давно вышли из моды; вспомните, что важнейшим признаком современной Всемирной паутины являются динамичность и интерактивность. Чтобы "оживить" ваши гиперссылки, вы можете использовать надписи или кнопки Flash (прекрасная идея!) или активные изображения. Второй подход более популярен, вероятно, потому, что не требует модуля проигрывателя Flash. Так или иначе Dreamweaver позволит вам сделать и то, и другое исключительно просто.

Более того, Dreamweaver HMeet встроенные средства создания полосы навигации из набора активных изображений. Вам нужно будет только заготовить соответствующее количество графических изображений, представляющих каждую гиперссылку. Это самая трудоемкая часть работы — все остальное возьмет на себя Dreamweaver.

Давайте же сделаем для нашего сайта такую полосу навигации.

Сначала заготовим набор графических изображений. На каждую гиперссылку нам понадобятся четыре изображения:

отображаемое в обычном состоянии;

отображаемое, когда пользователь помещает над ним курсор мыши;

отображаемое в "нажатом" состоянии (когда страница, на которую указывает эта гиперссылка, загружена);

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

Создадим набор небольших графических изображений в любом графическом редакторе, поддерживающем формат GIF. Он будет включать:

белую надпись на черном фоне, отображаемую в обычном состоянии;

красную надпись на черном фоне, отображаемую, когда пользователь помещает над ним курсор мыши;

черную надпись на белом фоне, отображаемую в "нажатом" состоянии;

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

Создадим в папке Pics подпапку Navbar. Сохраним все полученные файлы в ней, дав им имена в соответствии со следующим соглашением:

<имя страницы >_up.gif — для изображений, отображаемых в обычном состоянии;

<имя страницы>_over.gif — для изображений, отображаемых, когда пользователь помещает над ними курсор мыши;

<имя cmpaницы>_down.gif — для изображений, отображаемых в "нажатом" состоянии;

<имя страницы>_overdown.gif — для изображений, отображаемых в "нажатом" состоянии, когда пользователь помещает над ним курсор мыши.

Всего у вас должно получиться 20 файлов изображений. Что ж, вам придется здорово потрудиться... (Вообще-то для таких дел лучше использовать специализированные пакеты Web-графики, например Macromedia Fireworks. Они автоматически формируют все необходимые изображения для полос навигации и создают соответствующий HTML-код и JavaScript-код, "оживляющий" их. Но описание этих пакетов выходит за рамки данной книги.)

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

Чтобы создать полосу навигации, поставьте текстовый курсор в левый фрейм и нажмите кнопку Navigation Bar (рис. 7.22) страницы Common панели объектов. Вы также можете выбрать пункт Navigation Bar подменю Interactive Images меню Insert. На экране появится диалоговое окно Insert Navigation Ваг, показанное на рис. 7.23.

Рис. 7.22. Кнопка Navigation Bar панели объектов

Рис. 7.23. Диалоговое окно Insert Navigation Bar

В списке Nav Bar Elements перечислены все элементы полосы навигации, которые уже имеются. (Изначально там находится один элемент, созданный для нас Dreamweaver.) Вы можете выбрать любой из элементов и посмотреть либо изменить его параметры.

В поле ввода Element Name вводится имя элемента. Советуем давать элементам "говорящие" имена, например Projects или Links.

В поле ввода Up Image вводится имя файла изображения, отображаемого в обычном случае. Вы также можете щелкнуть кнопку Browse, расположенную справа от поля ввода, и выбрать нужный файл в диалоговом окне открытая файла Dreamweaver. Точно так же в поле ввода Over Image вводится имя файла изображения, отображаемого, когда пользователь помещает над гиперссылкой курсор мыши, в поле Down Image — имя файла изображения "нажатой" гиперссылки, а в поле Over While Down Image — имя файла изображения "нажатой" гиперссылки, над которой пользователь поместил курсор мыши. Справа от каждого поля ввода находится спасительная кнопка Browse.

В поле ввода Alternate Text вводится альтернативный текст. К сожалению, Dreamweaver неправильно обрабатывает русские буквы, поэтому вам или придется править сам код HTML, или вводить альтернативный текст на английском, как это сделали мы.

В поле ввода When Clicked, Go To URL вводится имя файла Web-страницы, на которую осуществляется переход при щелчке на гиперссылке. В раскрывающемся списке in, расположенном справа от поля ввода, выбирается фрейм, в котором будет отображена страница. Пункт Main Window этого списка позволяет открыть страницу во всем окне.

Если вы хотите, чтобы данный элемент полосы навигации изначально отображался "нажатым", включите флажок Show "Down Image" Initially, находящийся в группе Options. В частности, его нужно включить для элемента, обозначающего начальную страницу (в нашем случае это страница Main.htm).

А вот флажок Preload Images, находящийся в этой же группе, лучше всегда держать включенным. Он указывает Dreamweaver создать код, заставляющий Web-обозреватель загружать заранее все изображения, задействованные в полосе навигации, и сохранять их на жестком диске в своем кэше. Благодаря чему подстановка нужных изображений будет происходить мгновенно, не ожидая, пока они загрузятся с сайта. В противном случае Web-обозреватель будет вынужден загружать каждое изображение непосредственно перед его отображением. С одной стороны, это позволит ускорить загрузку страницы (не нужно будет загружать все изображения полосы навигации), а с другой — замедлит реакцию полосы навигации на действия пользователя, т. к. Web-обозревателю придется каждый раз загружать с сайта нужное изображение, а не брать его с кэша.

Раскрывающийся список Insert позволит задать расположение полосы навигации: горизонтальное (пункт Horizontally) или вертикальное (пункт Vertically). Флажок Use Tables заставит Dreamweaver создать полосу навигации на основе таблиц. Этот флажок по умолчанию включен, и отключать его не стоит.

Осталось рассказать о кнопках, расположенных над списком Nav Bar Elements. Кнопка со знаком "плюс" добавляет новый элемент в полосу навигации, а кнопка со знаком "минус" удаляет выбранный в списке элемент. Кнопка вверх перемещает выбранный в списке элемент на строку выше, а кнопка вниз— на строку ниже.

Закончив формирование полосы навигации, нажмите кнопку ОК. Если вы передумали вставлять полосу навигации, нажмите кнопку Cancel.

Введите в окно вставки полосы навигации данные о пяти элементах полосы навигации согласно табл. 7.3. В поля ввода Up Image, Over Image, Down Image и Over While Down Image введите соответствующие имена файлов: если вы дали им такие имена, какие автор советовал, у вас не будет проблем с поиском необходимого файла. Проследите при этом, чтобы в раскрывающемся списке Relative To диалогового окна Select File был выбран пункт Document (отсчет интернет-адресов относительно текущей страницы) — задание адресов от корневой папки сайта работает только под программой Web-сервера. Элементы должны быть введены в таком порядке, в каком они перечислены в таблице. (Это общепринятый порядок перечисления элементов полосы навигации в подобных сайтах.)

Таблица 7.3. Данные полосы навигации







Страница

Element Name

When Clicked, Go To URL



Главная Main Main . htm

Проекты Projects Projects.htm

Увлечения Passions Passions.htm

Ссылки Links Links . htm

Об авторе About About . htm





В раскрывающемся списке in должен быть выбран пункт Main (имя фрейма основного содержимого сайта). Для элемента Main (страница основного содержимого сайта, отображаемая по умолчанию) включите флажок Show "Down Image" Initially, т. к. он должен быть по умолчанию "нажатым". В раскрывающемся списке Insert выберите пункт Vertical, т. к. полоса навигации в нашем случае должна быть вертикальной. Остальные элементы управления не трогайте. После этого нажмите кнопку ОК.

Осталось немного подредактировать фрейм и его содержимое вручную. Установите значения параметров Margin Width и Margin Height для фрейма в ноль, чтобы не было этих отвратительных отступов слева и сверху. Потом выделите таблицу и установите параметр Width в 100%, чтобы она заняла всю ширину фрейма. Осталось выделить все ячейки таблицы и выставить параметр Horz в Center, a Vert — в Middle. Вы помните, что обозначают эти параметры?

Посмотрите на рис. 7.24. Как видите, Dreamweaver здорово постарался, сделав за нас всю сложную работу по созданию "живой" полосы навигации. Если вы просмотрите сгенерированный им HTML-код, то увидите, как много работы пришлось ему проделать: сформировать таблицу, разместить в ней все указанные вами графические изображения, превратить их в гиперссылки и — главное — создать сценарии, которые будут ими управлять. Согласитесь, вручную такое не сразу сделаешь.

Рис. 7.24. Готовая полоса навигации

Теперь сохраните все фреймы, выбрав пункт Save All Frames в меню File. И откройте страницу в окне Web-обозревателя. Попробуйте поместить курсор мыши над каким-нибудь элементом полосы навигации и посмотрите, что получится. Пощелкайте по нему.

Как видите, даже очень сложные вещи делаются в Dreamweaver исключительно просто. Например, полоса навигации с активными изображениями для начинающего Web-дизайнера — весьма сложная задача: нужно хорошо знать не только язык описания Web-страниц HTML, но и язык написания сценариев JavaScript. И если с HTML, как правило, проблем нет, то с JavaScript — есть...

Хорошо! Мы сделали полосу навигации и поместили ее во фрейме. Но сайт наш, как и все на свете, изменяется. Что если нам вдруг понадобится добавить новый элемент или изменить графические изображения? Для этого просто выделите полосу навигации (любой ее элемент) и выберите в меню Modify пункт Navigation Bar. На экране появится диалоговое окно Modify Navigation Ваг, аналогичное уже знакомому вам окну Insert Navigation Bar (см. рис. 7.23), в котором вы сможете изменить все, что нужно.

Оптимизация фреймов

Создав наш первый работающий набор фреймов, можно подумать о его оптимизации.

Уменьшение объема и сложности HTML-кода

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

Взгляните на код, сформированный Dreamweaver для нашего набора фреймов (автор слегка сократил его, убрав не относящиеся к делу атрибуты тегов):

<FRAMESET ROWS="*,54"> <FRAMESET ROWS="30,*">

<FRAME NAME="Header" SRC="/HTMLs/Header.htm">

<FRAMESET COLS="100,399">

<FRAME NAME="Nav" SRC="/HTMLs/Nav.htm">

<FRAME NAME="Main" SRC="/HTMLs/Main.htm">

</FRAMESET>

</FRAMESET>

<FRAME NAME="Copyright" SRC="/HTMLs/Copyright.htm"> </FRAMESET>

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

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

<FRAMESET ROWS="30,*,54">

<FRAME NAME="Header" SRC="/HTMLs/Header.htm">

<FRAMESET COLS="100,399">

<FRAME NAME="Nav" SRC="/HTMLs/Nav.htm">

<FRAME NAME="Main" SRC="/HTMLs/Main.htm">

</FRAMESET>

<FRAME NAME="Copyright" SRC="/HTMLs/Copyright.htm">

</FRAMESET>

Если раньше у нас была трехкратная вложенность фреймов, то теперь мы обошлись двукратной, совместив два двухфреймовых простых набора в один трехфреймовый. (Этот фрагмент кода выделен полужирным шрифтом.) Как видите, HTML-код набора фреймов стал проще и компактнее.

Откройте страницу default.htm в окне документа, переключитесь в режим кода и внесите эти изменения, после чего снова переключитесь в режим страницы. Что мы видим? В окне документа ничего не изменилось. Как видите, Dreamweaver правильно обрабатывает простые наборы из любого количества фреймов. Вы можете щелкать по ним мышью в окне фреймов, устанавливать значения параметров в редакторе свойств, заполнять их текстом в окне документа. Более того, если вы выберете набор из трех фреймов, Dreamweaver правильно отобразит его структуру в редакторе свойств (рис. 7.25). Получается, что Dreamweaver все-таки поддерживает простые наборы с количеством фреймов более двух.

Рис. 7.25. Структура набора из трех фреймов

Ускорение обработки фреймов

Приведем несколько советов, которые помогут Web-обозревателю быстрее обработать и отобразить наборы фреймов.

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

Внимательно проверяйте корректность интернет-адресов в атрибутах SRC тегов <FRAME>. Мало того, что обращение по несуществующему интернет-адресу занимает много времени, так один фрейм вашего набора останется "пустым". А нет ничего отвратительнее "пустого" фрейма.

Задавайте замещение <NOFRAMES> только в тех случаях, если оно действительно нужно. Помните, что любой лишний HTML-код замедляет загрузку Web-страницы, увеличивая ее в размерах. Уже говорилось по поводу замещений и повторять это нет смысла.

Оптимизируйте HTML-код, порождаемый Dreamweaver.

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

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

Недостатки фреймов и их преодоление

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

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

На этом достоинства фреймов кончаются, и начинаются недостатки.

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






Заголовок сайта


Список категорий программ (Интернет, офис, системные, утилиты, мультимедиа и т. д.)

Список программ выбранной категории






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

Сведения о правах разработчика сайта




Рис. 7.26. Структура фреймов сайта — каталога программ

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

К несчастью, средствами HTML это сделать невозможно. Обычная гиперссылка HTML, описываемая парным тегом <А>, может указывать только на один файл. Если вы хотите по щелчку загружать сразу две страницы (или более — в данном случае это несущественно) в разные фреймы, вам придется писать сценарий на языке JavaScript. А это уже довольно сложная задача для начинающего Web-дизайнера. На первый раз можем посоветовать только постараться избежать использования таких наборов фреймов или же отказаться от фреймов вообще.

Недостаток второй: невозможность задания текста, который Web-обозреватель помещает в заголовок своего окна. Как вы знаете, он помещает туда название отображаемой в окне Web-страницы. Но поскольку страница набора фреймов никогда не меняется (меняется только содержимое одного из фреймов), текст в заголовке окна Web-обозревателя остается неизменным. В принципе, это не очень страшно — мало кто из посетителей сайтов обращает внимание на заголовок окна Web-обозревателя. Но если вы собираетесь выводить в заголовке окна какую-либо важную информацию, имейте это в виду.

Недостаток третий: "несовместимость". Путь фреймов к признанию комитетом WWWC был так долог и тернист, что за это время успели появиться несколько программ Web-обозревателей, их поддерживающих. Но поскольку единого стандарта на фреймы не было, поддерживали они их по-своему. В результате фреймы стали одним из самых "несовместимых" элементов HTML.

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

Недостаток четвертый. О нем мы поговорим в главе 14, когда будем рассматривать поисковые системы и "раскрутку" вашего сайта с их помощью.

Проблема с фреймами в старых версиях Navigator

А вот это уже не "функциональная особенность" некогда известной программы, а элементарная ошибка разработчиков. Старые версии Navigator неправильно отображают страницы наборов фреймов после того, как пользователь изменит размеры окна. И разработчики Dreamweaver, чтобы компенсировать невнимательность разработчиков фирмы Netscape, ввели в свой Web-редактор специальную функцию исправления данной ошибки.

Откройте в окне документа Dreamweaver страницу набора фреймов и выберите в меню Commands пункт Add/Remove Netscape Resize Fix. На экране появится небольшое окно-предупреждение, кратко описывающее проблему с фреймами в Navigator и то, что Dreamweaver может сделать для ее решения (рис. 7.27).

Рис. 7.27. Окно, предупреждающее о проблеме с фреймами в Navigator и предлагающее путь ее решения

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

Может случиться так, что вы захотите удалить эту программу-сценарий, для чего вам необходимо просто еще раз выбрать пункт Add/Remove Netscape Resize Fix в меню Commands. На экране появится другое окно-предупреждение, показанное на рис. 7.28. Нажмите кнопку Remove для удаления данного кода или кнопку Cancel — для отказа от этого.

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

Следует ли