Как сделать красиво с помощью Macromedia Dreamweaver 3.0

Людмила Бандурина

Любому, кто хоть раз пытался создать собственную web-страничку, должно быть, известны словосочетания «JavaScript» и «динамический HTML» или хотя бы меню, кнопки и навигация. А как быть тем, кто не претендует на особый профессионализм, но хочет создать красивую конкурентоспособную домашнюю страничку, оживить ее динамическими элементами? Вам на помощь придет визуальный редактор Dreamweaver, выпускаемый фирмой Macromedia.

Прежде всего хотелось бы ответить на вопрос, который наверняка возник у многих читателей, – а почему именно Dreamweaver, а не какой-нибудь другой визуальный редактор, например Microsoft Front Page?

При всем моем уважении к фирме Microsoft (и в особенности к ее броузерам), я считаю, что при создании программы FrontPage разработчики подошли к поставленным задачам с недопустимой стороны. Все остальные программы, входящие в состав офисных пакетов Microsoft, сохраняют создаваемые ими документы в форматах, уникальных для этих программ. При этом нас не особенно интересует (если, конечно, мы не разработчики «надстроек» к «Офису»), как устроены внутри файлы документов Word или файлы презентаций Power Point. В случае же с FrontPage изначально предполагалось, что «на выходе» должны быть файлы, сохраненные в формате HTML – на языке гипертекстовой разметки документа, которому по статусу полагается быть независимым от какой-либо конкретной платформы.

В итоге получилось, что, хотя расширение файла, созданного в FrontPage, вроде бы правильное – .htm либо .html и внутри у него вроде бы те самые теги, которые должны быть в html-файле, однако сам файл почему-то отображается верно только в броузере Internet Explorer (и то не всегда). Содержимое его при этом выглядит жутковато и имеет размер явно больший, чем полагается такой странице. Дело в том, что FrontPage не всегда решает задачи web-форматирования простейшим путем, совершенно не заботится о совместимости с NN, да еще и вставляет в документ теги, которые, по мнению Microsoft, должны способствовать коммерческому продвижению продукта. Тем более странно, что все большее количество серверов (пока, к счастью, в основном на Западе) объявляют о «поддержке расширений FrontPage», как об особом достижении. Ведь эти расширения, по мнению Microsoft, всего лишь «позволяют автоматизировать процесс разработки и публикации страниц» – говоря русским языком, позволяют меньше думать головой. Причем «автоматизация» эта реализована тоже не лучшим образом, а для публикации страниц (при условии, что вы не администратор web-сервера) пока ничего лучшего, чем FTP-клиенты, не придумано.

Чем же лучше Dreamweaver? На этот вопрос так и хочется ответить: «Всем!» Dreamweaver снискал себе заслуженную популярность, в том числе и среди профессионалов, максимально бережным отношением к коду. Автоматически этот редактор вставляет в страницу только тег <meta>, определяющий кодировку. Если вы уберете этот тег вручную, Dreamweaver не будет вставлять его вновь при сохранении и последующих открытиях страницы.

Попробуйте поступить аналогичным образом с тегом <meta name="Generator" content="Microsoft FrontPage 3.0">, вставляемым автоматически во все страницы, создаваемые в MS FrontPage. Попробовали? Не получилось? Вот то-то и оно... Более того, если даже вы измените код, созданный во FrontPage, в блокноте или любом другом текстовом редакторе, он просуществует в неизменном виде лишь до следующего открытия его во FrontPage – затем программа вновь переделает все по-своему. Особенно любит FrontPage портить формы – после ее вмешательства сложная форма, содержащая большое количество элементов со сложными связями, вряд ли будет работать должным образом.

Dreamweaver же, как уже упоминалось, не портит код. Ваши формы и скрипты останутся в неприкосновенности. Ну, а для публикации вашего сайта в Dreamweaver’e имеется встроенный FTP-клиент, не позволяющий себе ничего лишнего, – достойная альтернатива «серверным расширениям FrontPage».

Теперь, когда мы определились с правильным выбором редактора, давайте посмотрим, чем может облегчить жизнь начинающему web-мастеру Dreamweaver?

Создание кнопок, реагирующих на действия пользователя

После публикации нескольких статей о Dreamweaver’e в любительских рассылках я часто получаю письма примерно такого содержания: «Я видел у Васи Пупкина на страничке кнопки, реагирующие на нажатие и наведение мышки. Как мне сделать такие же, не изучая DHTML и JavaScript? Можно ли сделать это с помощью Dreamweaver’a?»

Конечно, можно. И очень просто. И, заметьте, код, созданный при этом Dreamweaver’ом, будет корректно работать и в IE, и в NN.

Для начала нам потребуется нарисовать три варианта кнопки: обычную, нажатую и подсвеченную. Это будут три отдельных графических файла. Чтобы не запутаться, вы можете назвать их, соответственно, button, button_pressed и button_active (рис. 1).

Теперь начинаем создавать собственно страницу в Dreamweaver’е. Вставляем изображение обычной кнопки (файл button). Чтобы скрипт, создаваемый Dreamweaver’ом, смог обращаться именно к этой картинке, нужно задать ей уникальное имя (параметр name тега <img>) в панели свойств изображения. Назовем картинку «button» (рис. 2).

Для того чтобы сделать нашу кнопку реагирующей на действия пользователя, нам понадобится панель инструментов Behaviors («Поведения»). Если эта панель отсутствует у вас на экране, вы можете вызвать ее через меню: Window п Behaviors. Вверху этой панели выберите, в каких версиях броузеров должно корректно работать ваше произведение искусства. Оптимальным выбором является «4.0 and Later Browsers».

Для того чтобы создать новое «поведение» кнопки, нужно нажать на «+» в левом верхнем углу панели Behaviors. Перед вами предстанет внушительных размеров список доступных действий. Из этого списка нам нужно выбрать Swap Image – смена картинки. После этого откроется следующее диалоговое окошко, в котором нам будет предложено выбрать, на что менять нашу картинку. Нажимаем кнопку Browse и находим файл button_pressed или просто вписываем путь к файлу в соответствующую строку (рис. 3).

Здесь же мы можем задать дополнительные параметры: Preload Images – загружать ли модификации изображения до загрузки основного содержимого страницы (лучше поставить галочку, так как при медленном модемном соединении пользователь может и не дождаться реакции кнопки на его действия, если изображение не загружено предварительно); Restore Images onMouseOut – восстанавливать ли первоначальный вид изображения после завершения действия пользователя (эту галочку тоже лучше поставить, при этом Dreamweaver автоматически создаст еще одно действие – Swap Image Restore).

После нажатия кнопки ОК мы увидим, что в окошке Behaviors добавилось сразу два «поведения» кнопки: реакция на наведение мышки и реакция на «уход» курсора с кнопки. Но нам ведь нужна реакция на нажатие! Ничего страшного, теперь нам осталось только поменять событие onMouseOver на onMouseDown. Дело в том, что Dreamweaver всегда по умолчанию создает реакцию на событие onMouseOver. Чтобы изменить событие, нужно выбрать поведение Swap Image и нажать на стрелочку между названиями поведения и события, а затем выбрать из появившегося списка событие onMouseDown. Аналогичным образом нужно поменять событие onMouseOut на onMouseUp для поведения Swap Image Restore.

Сохраняем файл – и теперь наша кнопочка в обоих броузерах корректно реагирует на нажатие.

Реакцию на наведение мышки добавляем аналогичным образом, только вместо файла button_pressed используем файл button_active. В результате всех действий в окошке Behaviors при выделенном изображении должны отображаться четыре поведения и четыре события (рис. 4). Если снять выделение с изображения, вы увидите, что ко всей странице тоже добавилось событие onLoad, связанное с предварительной загрузкой изображений.

Можно также воспользоваться кнопкой Insert Rollover Image на панели Objects – в этом случае вам будет предложено выбрать файлы изначальной и измененной кнопок, – в итоге также создаются два поведения в ответ на два события. Впоследствии вы можете добавлять новые события и изменять существующие посредством панели Behaviors.

Создание навигационных панелей

До сих пор мы говорили о том, как заставить реагировать на действия пользователя отдельную кнопку-картинку. Этот способ хорош лишь в тех случаях, если таких кнопок на страничке немного – не больше 3-5 штук. А если нам требуется сделать большую панель навигации для объемного сайта? Задавать поведения для десяти-двадцати кнопок «устанет рука», да и HTML-код страницы при таком подходе будет «разбухать» прямо на глазах.

Не отчаивайтесь – для таких случаев в Dreamweaver’e предусмотрен инструмент создания навигационных панелей целиком. При создании такой панели скрипт, управляющий поведением кнопок, пишется всего один, а для каждой конкретной кнопки в него только добавляются ссылки на нужные файлы. Таким образом, размер страницы существенно уменьшается.

Для того чтобы создать панель навигации, нужно сначала подготовить всю необходимую графику – изображения обычных, нажатых и активных кнопок. Также при создании навигационной панели имеется возможность задать отдельную картинку для нажатой кнопки, над которой находится курсор, – Over While Down Image. Я обычно использую для этого состояния ту же картинку, что и для кнопки, на которую наведен курсор.

После того как картинки подготовлены, нажимаем кнопку Insert Navigation Bar на панели Objects. Появляется следующее диалоговое окно (рис. 5).

Здесь мы должны задать уникальное имя для текущего элемента панели навигации (Element Name) и пути к файлам изображений (Up Image – обычный вид кнопки, Over Image – кнопка, над которой находится курсор, Down Image – нажатая кнопка, Over While Down Image – нажатая кнопка, над которой находится курсор). Далее следуют поля для определения ссылки: When Clicked, Go To URL – адрес страницы, на которую ведет ссылка, и in – в каком окне открывать ссылку: в текущем, в новом и т. д. Также нам предоставляется возможность предварительной загрузки изображений (напоминаю: лучше включить эту опцию, иначе при российских скоростях коннекта посетители могут никогда не увидеть задуманных вами эффектов). Последнее поле позволяет отображать текущий элемент навигации изначально в «нажатом» виде – я думаю, всем понятно, что нажатой должна быть кнопка, соответствующая текущей странице. В самом низу окна вы можете выбрать положение вашей навигационной панели – вертикальное или горизонтальное. После того как мы полностью описали первый элемент, добавляем следующий с помощью нажатия на кнопочку «+» в верхней части диалогового окна и описываем его аналогичным образом. В результате у вас должно получиться примерно следующее (рис. 6). А когда вы нажмете ОК, это будет выглядеть приблизительно так (рис. 7).

Чтобы отредактировать уже созданную панель, нужно в меню Modify выбрать пункт Navigation Bar. Откроется уже знакомое вам диалоговое окно, внутри которого вы сможете добавить новые элементы, изменить последовательность элементов в панели, графику и ссылки.

Внимание! Задать ориентацию (вертикальную или горизонтальную) вы можете только в процессе создания навигационной панели. В дальнейшем вы не сможете изменить этот параметр.

Использование слоев

Dreamweaver позволяет рисовать слои мышкой прямо на экране, гарантируя при этом, что нарисованные вами участки будут расположены именно там, где вы хотите, и иметь ширину и высоту, точно соответствующие вашим желаниям. Вы можете также заставить слои двигаться по экрану. Единственное, чего вы не можете сделать, используя слои, – это заставить ваше произведение отображаться одинаково в обоих броузерах. Дело в том, что в IE для описания слоя используется тег-контейнер <div> (иногда <span>), а фирма Netscape для тех же целей изобрела свои собственные теги, не входящие в официальную спецификацию HTML, – <layer> и <ilayer>. Справедливости ради стоит упомянуть, что слои как таковые являются изобретением Netscape, а Microsoft лишь усовершенствовала возможности этой технологии, используя многие свойства CSS level 2, и предложила использовать для обозначения слоев один из общепринятых тегов. При этом NN ограниченно поддерживает тег <div> как описывающий слои, IE же полностью игнорирует изобретения Netscape.

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

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

Внутри созданного слоя мы можем размещать любые привычные объекты – текст, графику и т. д. – и изменять их свойства, как обычно. Чтобы изменить свойства самого слоя, нужно выделить его, нажав на маркер-прямоугольник в левом верхнем углу слоя. Давайте посмотрим, что мы можем изменить (рис. 8).

Layer ID – уникальный идентификатор слоя, позволяющий обращаться к нему с помощью JavaScript. Dreamweaver автоматически создает различные идентификаторы для разных слоев с помощью нумерации: Layer1, Layer2 и т. д.

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

W и H – задают ширину и высоту слоя соответственно.

Z-Index – индекс положения слоя на странице в «третьем измерении». Если два слоя частично перекрываются, то верхним будет тот, у которого больше z-index. Этот параметр может принимать отрицательные значения – в таком случае основное содержимое страницы (текст, графика и т. п.) будет видно как лежащее поверх слоя. (Подробнее об использовании «третьего измерения» вы также можете прочесть в статье «Каскадные таблицы стилей, или CSS для начинающих» в этом номере журнала).

Vis – свойство visibility (видимость) слоя. Это свойство позволяет управлять видимостью слоя и его содержимого на странице с помощью JavaScript – показывать и прятать его в ответ на какие-либо действия пользователя. По умолчанию (default) слой видим, и Dreamweaver не прописывает в код страницы никаких упоминаний об этом свойстве. Если вы планируете в дальнейшем изменять видимость слоя посредством JavaScript, нужно явно указать одно из значений – visible или hidden.

BgImage – фоновое изображение.

BgColor – цвет фона.

Tag – тег, которым будет описан слой в коде HTML. Поскольку мы решили создавать слои для IE, используя максимальное количество возможностей, остановимся на теге <div>.

Overflow – одно из самых интересных свойств слоев, которое, к сожалению, понимают только броузеры IE, начиная с четвертой версии. Это свойство управляет поведением слоя при «переполнении» его содержимым. Как должен вести себя слой, если его содержимое не умещается в заданные нами размеры? По умолчанию слой будет «растягиваться» в высоту или в ширину и занимать, таким образом, больше места на странице, чем мы для него определили. То же самое произойдет, если в качестве значения этого свойства мы установим visible. Если мы выберем hidden, то все «лишнее» содержимое просто обрежется и не будет показано на странице. И, наконец, если наш выбор – scroll, то по краям слоя появятся полосы прокрутки, и мы сможем уместить в видимой части страницы гораздо больше содержимого, чем это предполагается размерами экрана (рис. 9). Из таблицы видно, как будет отображаться слой с заданными размерами 123і65 пикселов при различных значениях свойства overflow.

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

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

Анимация слоев

Как только на странице появляется мало-мальски продолжительное и направленное движение, сразу же приходится задуматься над редактированием «четвертого измерения» – времени. Для этих целей в Dreamweaver’e предназначена Timeline – шкала времени. С ее помощью мы можем заставить слои двигаться по странице. Вызовем окно шкалы времени на экран с помощью команды Timelines меню Window.

Теперь для того чтобы анимировать слой, просто перетащим его мышкой на шкалу. Обратите внимание: Dreamweaver по завершении этого действия выдаст предупреждение. Это – еще одно напоминание о неравенстве броузеров при работе со слоями!

Даже Dreamweaver, создающий в других случаях мощные скрипты с учетом особенностей броузеров-конкурентов, не может преодолеть некоторых затруднений с Netscape Navigator!

После того как мы перетащили слой на шкалу времени, нам остается только задать начальное положение слоя, установив маркер на первом кадре шкалы времени, и его конечное положение, установив маркер на последнем кадре. Dreamweaver создаст скрипт, описывающий движение слоя по странице. Путь движения слоя при этом будет явно виден в рабочей области, и вы всегда сможете его отредактировать. Помимо собственно пути вы можете задать частоту смены кадров (Fps) и «зациклить» анимацию (Loop). Галочку напротив Autoplay нужно поставить обязательно, если анимация должна возникать сама собой, а не в ответ на действия пользователя (рис. 10).

Анимация, созданная таким образом, будет показана сразу после загрузки страницы. Если вы хотите, чтобы слой реагировал передвижениями на какие-либо ваши действия, воспользуйтесь уже известными вам «поведениями» (behaviors). На рисунке приведен пример, в котором слой начнет двигаться по заданному пути сразу же, как только над ним окажется курсор.

Для того чтобы создать более сложный путь движения слоя, нужно сначала точно так же перетащить слой на шкалу времени, после чего установить маркер шкалы на первый кадр, задав тем самым начало движения. Затем нужно выбрать в меню Modify пункт Timeline, а из открывшегося списка выбрать Record Path of Layer. После этого ухватитесь за слой мышкой и «потаскайте» его немножечко по экрану в соответствии с вашими представлениями о предполагаемом пути.

Слою, двигающемуся по кривой, можно задать поведение, как и в случае прямолинейного движения. Для этого точно так же нужно использовать action Play Timeline в ответ на любое выбранное вами событие: onMouseOver, onClick и т. п.

Кроме того, вы можете показывать и прятать слой на определенных отрезках шкалы времени, изменять его высоту и ширину, а также переопределять значение z-index – как по шкале времени, так и в ответ на действия пользователя.

Если же вы захотите создать страничку только для NN, вы должны проделать все эти действия (за некоторыми исключениями, о которых уже упоминалось) со слоями, описанными с помощью тегов <layer> и <ilayer>.

В заключение хотелось бы посоветовать читателям не слишком увлекаться анимацией, создаваемой посредством JavaScript. Конечно же, посетителям приятно видеть страничку, которая им буквально «смотрит в рот», реагируя на каждое их движение. Но поверьте, тем же самым посетителям ужасно неприятно дожидаться перед пустым экраном загрузки такого многокилобайтного «шедевра». И они могут уйти, так и не дождавшись! Так что соблюдайте во всем умеренность, и люди на ваш сайт потянутся. И будут возвращаться снова и снова, и друзей приводить.