Главная      Учебники - Разные     Лекции (разные) - часть 26

 

Поиск            

 

Учебник Macromedia Dreamweaver

 

             

Учебник Macromedia Dreamweaver

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

o Глава 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-страницы 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

o Среда Dreamweaver MX

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

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

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

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

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

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

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

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

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

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

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

o Настройка Dreamweaver

o Учим русский

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

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

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

o Что дальше?

ГЛАВА 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. Начинаем с текста

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

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

o Ввод текста

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

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

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

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

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

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

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

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

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

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

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

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

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

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

o Вставка даты

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

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

o Что дальше?

ГЛАВА 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).