Учебник Macromedia Dreamweaver (стр. 103 из 135)
В раскрывающемся списке Font выбирается шрифт, которым набран текст пунктов меню. По умолчанию выбран пункт Default Font, обозначающий шрифт, заданный для выбранного вами в окне документа элемента страницы.
В поле ввода Size задается размер шрифта, которым набран текст пунктов меню.
С помощью кнопок-выключателей вверх и вниз вы можете сделать шрифт пунктов меню соответственно жирным или курсивным.
Правее кнопок вверх и вниз находится набор из трех кнопок-переключателей, задающих выравнивание текста пунктов меню. Они задают соответственно левое выравнивание, центрирование и правое выравнивание в порядке слева направо.
Группа селекторов цвета Up State задает цвета пунктов меню в "ненажатом" состоянии. Селектор цвета Text задает цвет текста, а селектор цвета Cell -цвет фона (фактически — цвет фона ячейки таблицы, которая и создает меню гиперссылок). Аналогично, группа селекторов цвета Down State задает цвета пункта меню, над которым посетитель поместил курсор мыши.
Результаты применения заданных вами параметров вы можете увидеть в расположенной в нижней части диалогового окна панели предварительного просмотра.
Вкладка Advanced диалогового окна Show Pop-Up Menu (рис. 13.28) позволит вам задать некоторые дополнительные параметры таблицы, создающей меню гиперссылок.
Поля ввода и раскрывающиеся списки Cell Width и Cell Height задают соответственно ширину и высоту ячеек этой таблицы. Если вы выберете в раскрывающихся списках пункт Automatic, то соответствующий размер будет устанавливаться самим Web-обозревателем. Чтобы самим задать нужный размер, выберите в соответствующем раскрывающемся списке пункт Pixels и введите этот размер в пикселах в поле ввода, расположенное левее.
Поля ввода Cell Padding и Cell Spacing задают соответствующие параметры таблицы.
В поле ввода Text Indent задается величина отступа красной строки в пикселах.
В поле ввода Menu Delay вводится задержка открытия меню и его подменю в миллисекундах.
Включите флажок Show Borders, если хотите, чтобы границы меню и подменю были видимы.
Рис. 13.28. Диалоговое окно Show Pop-Up Menu (вкладка Advanced)
В поле ввода Border Width вводится толщина границы меню и подменю в пикселах.
Селектор цвета Border Color задает цвет границы меню и подменю. Также вы можете задать цвет "затемненной" стороны границы в селекторе цвета Shadow, а цвет "освещенной" стороны — в селекторе цвета Highlight.
Результаты применения заданных вами параметров вы также можете увидеть в расположенной в нижней части диалогового окна панели предварительного просмотра.
Вкладка Position диалогового окна Show Pop-Up Menu (рис. 13.29) позволит вам задать местонахождение меню гиперссылок относительно элемента страницы, к которому оно привязано.
Набор из четырех больших кнопок-переключателей Menu Position позволит вам задать собственно местоположение меню гиперссылок. Эти кнопки заставляют меню появляться соответственно в правом нижнем углу, ниже, выше и в правом верхнем углу элемента, к которому оно привязано. (Порядок перечисления кнопок — слева направо.)
Если вас не устраивает ни одно из четырех предопределенных местоположений меню, вы можете задать свое собственное. Для этого введите в поля ввода X и Y соответственно горизонтальную и вертикальную координаты верхнего левого угла меню.
Рис. 13.29. Диалоговое окно Show Pop-Up Menu (вкладка Position)
По умолчанию меню гиперссылок убирается с экрана сразу же после того, как посетитель уберет курсор мыши с элемента страницы, к которому оно привязано. Если вы хотите, чтобы оно оставалось на экране, отключите флажок Hide Menu on onMouseOut Event.
После задания всех параметров меню гиперссылок не забудьте нажать кнопку ОК.
Внимание!
При создании на странице меню гиперссылок Dreamweaver помещает в корневую папку сайта файл mm_menu.js, содержащий необходимые сценарии, и графическое изображение arrows.gif. Не удаляйте их! И не забудьте поместить их на Web-сервер.
Показ и скрытие свободно позиционируемых элементов (Show-Hide Layers)
Показ и скрытие свободно позиционируемых элементов страницы можно использовать в разных целях. Например, показывать различные подсказки при наведении курсора мыши на гиперссылки или графические изображения. Также можно на их основе создавать начальные заставки, показываемые посетителю сайта на самой первой его странице. (Почти всегда, однако, для этого используются фильмы форматов Flash, RealMedia или GIF. Но эту традицию стоит нарушить.) И, разумеется, появляющиеся и пропадающие в ответ на действия пользователя элементы страницы незаменимы при создании игр, обучающих пособий и программ, созданных на основе Web-страниц.
Вы уже знаете, как создать на странице свободный элемент, как задать его размеры и сделать невидимым (до поры до времени). Поговорим теперь, как заставить его появляться и исчезать в ответ на события. А для этого Dreamweaver предоставляет поведение show-Hide Layers.
Выберите пункт Show-Hide Layers в меню поведений. На экране появится диалоговое окно Show-Hide Layers (рис. 13.30).
Рис. 13.30. Диалоговое окно Show-Hide Layers
Все имеющиеся на странице свободно позиционируемые элементы перечислены в списке Named Layers. Вы можете выбрать в этом списке любой из них и задать для него выполняемое действие: показ или скрытие.
Для задания действия же служат три кнопки, расположенные под списком:
· Show — показывает свободный элемент (при этом в соответствующей строке списка правее его имени появляется надпись "(show)");
· Hide — скрывает свободный элемент (надпись "(hide)");
· Default — восстанавливает видимость свободного элемента, заданную при его создании (надпись "(default)").
Выберите необходимый свободный элемент в списке и нажмите нужную кнопку. Чтобы отменить ошибочно выбранное действие, нажмите ту же кнопку еще раз. После этого нажмите кнопку ОК, чтобы сохранить сделанные установки.
Останов проигрывания анимации (Stop Timeline)
Поведение stop Timeline позволяет вам остановить проигрывание анимации, запущенной ранее поведением Play Timeline. Для его создания воcпользуйтесь пунктом Stop Timeline подменю Timeline меню поведений. На экране появится диалоговое окно Stop Timeline (рис. 13.31).
Рис. 13.31. Диалоговое окно Stop Timeline
Это диалоговое окно содержит только раскрывающийся список Stop Timeline. В этом списке выбирается анимация, которую нужно остановить. Пункт ** ALL TIMELINES ** позволяет остановить проигрывание всех анимаций, созданных на данной странице. После выбора анимации не забудьте нажать кнопку ОК.
Изменение графического изображения (Swap Image)
Dreamweaver предоставляет вам возможность изменить рисунок, отображающийся в любом имеющемся на странице элементе графического изображения. Для этого используется поведение swap image; специальный Web-сценарий меняет значение атрибута SRC тега <IMG>. Это будет полезно во многих случаях.
Выберите пункт Swap Image меню поведений. На экране появится диалоговое окно Swap Image, показанное на рис. 13.32.
Рис. 13.32. Диалоговое окно Swap Image
Все имеющиеся на странице графические изображения перечислены в списке Images. Выберите нужное. После этого введите имя файла нового изображения в поле ввода Set Source to; также вы можете нажать кнопку Browse и выбрать нужный файл в появившемся на экране диалоговом окне Select File.
Если вы хотите изменить сразу несколько изображений, выполните вышеприведенную последовательность действий для всех нужных элементов. Созданный Dreamweaver Web-сценарий выполнит все эти замены одновременно.
Если включен флажок Preload Images (а он включен по умолчанию), Dreamweaver создаст еще один сценарий, выполняющий предварительную загрузку нужных файлов изображений. (Фактически для этого он создаст поведение Preload images.) Если вы отключите этот флажок, то сами должны будете выполнить их предзагрузку, либо мириться с задержками при изменении изображений.
Если вы привязываете поведение swap image к событию onMouseOver, то Dreamweaver автоматически создаст поведение swap image Restore, восстанавливающее все изначальные изображения, и привязывает его к событию onMouseOut. Если вы не хотите, чтобы он так делал, отключите флажок Restore Images onMouseOut.
Закончив работу, нажмите кнопку ОК.
Восстановление всех изначальных изображений (Swap Image Restore)
Если вы хотите после вызова поведения swap image восстановить изображения, отображавшиеся на странице изначально, создайте поведение Swap image Restore. Для этого выберите пункт Swap Image Restore меню поведений. На экране появится небольшое окно-предупреждение; нажмите кнопку ОК, чтобы закрыть его. Нажатие кнопки Cancel позволит вам отказаться от создания этого поведения.
Внимание!
Создавать поведение Swap image Restore можно только после создания поведения Swap Image.
Как видите, Dreamweaver предлагает достаточно ограниченный набор поведений и, стало быть, Web-сценариев, которые могут быть созданы на страницах. Конечно, они покрывают 95% нужд начинающего и даже опытного Web-дизайнера, и у вас, возможно, очень и очень нескоро появится потребность писать JavaScript-код самим. И все же...
Но вспомните, что Dreamweaver — гибридный Web-редактор! Он предоставляет не только удобный интерфейс для визуального создания и редактирования Web-страниц, но и такой же удобный доступ к их исходному HTML-коду. Поэтому вы можете без труда "вписать" туда свои сценарии, реализующие все, что вашей душе угодно. Правда, Dreamweaver в этом случае никак облегчить вашу работу не сможет...