IZONE- http://www.izcity.com/- бесплатный софт, вэб-сервисы, ресурсы для раскрутки, свежие номера журнала "Internet Zone".

Расширения в Dreamweaver

Александр Жуков

Визуальный редактор HTML-кода, называемый DreamWeaver, разработанный фирмой Macromedia, является самым популярным среди начинающих web-дизайнеров. Он обладает многими преимуществами перед аналогичными продуктами других изготовителей, таких как Microsoft с их Front Page, а также программа фирмы Adobe, под названием InDesign. И основным положительным отличием продукта Macromedia является возможность подключать к программе дополнительные модули, значительно расширяющие границы творчества и облегчающие работу дизайнера.

Эти модули называются extentions, что переводится как расширения. Некоторые расширения входят в состав пакета программы DreamWeaver. Основной смысл включения расширений в программу состоит в том, чтобы позволить дизайнеру, мало понимающему в программировании, значительно расширить разнообразие используемых интерактивных приемов при создании страниц сайта. Фирма Macromedia разработала и разместила на своем сервере специальную программу для подключения вновь разрабатываемых расширений к программе DreamWeaver. Называется эта программа Extension Manager, и скачать ее можно по адресу: http://www.macromedia.com/exchange/dreamweaver/. Размер zip-файла составляет 2,1 МВ.

Распространяется Extension Manager, как и сами расширения, абсолютно бесплатно. На этой же странице фирма Macromedia разместила список всех модулей, которые можно скачать и использовать в программе. Они распределены по областям применения. Это и новые объекты, и команды, а также дополнительные эффекты интерактивных взаимодействий. Некоторые расширения рекомендуются фирмой к использованию. Такие помечены логотипом фирмы. Другие же просто предлагаются к применению на усмотрение пользователя. Подключение модулей происходит при помощи Extension Manager, которому нужно указать только путь к скачанному zip-файлу. Все остальное он сделает сам. В окне программы появится новый модуль с указанием его типа и кратким описанием. Все это, естественно, на английском языке.

В этой статье я расскажу о модуле, разработанном фирмой Project VII. Ее адрес в Интернете: http://www.projectseven.com/.

Этот модуль потребуется для создания выпадающего меню. Посмотреть, как он работает на практике, можно либо на сайте разработчика, либо на сайте автора статьи: http://www.alex-zhukov.com/. Главное меню сайта сделано с использованием этой технологии. Что меня прельстило, так это то, что не надо знать никаких скриптов, а только точно следовать инструкциям. Получилось, в общем, совсем неплохо. Дальше я приведу перевод на русский язык руководства по созданию меню с некоторыми ремарками переводчика. Свои предложения и замечания вы можете прислать мне по почте. Мой адрес: alex_zhukov@inbox.ru.

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

Выпадающее меню с подразделами

Выпадающие меню очень популярны. Наиболее часто в существующих сайтах оно используется в верхней части страницы, как на домашней странице фирмы Microsoft. Меня часто спрашивают: "Можно ли в DreamWeaver создать такое же меню?" Да, можно: Хотя потребуется немного помощи и предварительного планирования работы от вас.

Нужно отдавать себе отчет в том, что это меню не совместимо со старыми версиями Netscape и Explorer 3, которые до сих пор еще в ходу. Если ваш сайт должен обеспечивать совместимость с устаревшими версиями, доставайте книги по DreamWeaver и создавайте redirect на альтернативные страницы для 3-их версий.

Сначала вы должны спланировать свое меню и сделать его эскиз. Блокнот и карандаш вполне сгодятся для этого. Здесь представлен наскоро сделанный перечень того, на что нужно обратить внимание:
1. Количество основных ссылок.
2. Количество ссылок следующих уровней.
3. Стили изображений и
5. Цвет задника.

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

Болты и гайки данного меню
Это меню полностью разрабатывалось с использованием DreamWeaver 3 Studio. Все изображения создавались при помощи Fireworks, а все кодирование проводилось в DreamWeaver.

Оно разрабатывалось на основе шаблона.

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

Так это обучалка по разработке выпадающего меню, используйте его для навигации! (подразумевается, что вы находитесь на странице автора, где приведена обучалка вместе с самим меню, - прим. переводчика). Если вы используете Internet Explorer, нажмите на клавишу F-11, чтобы переключиться на режим полноэкранного просмотра. Внизу каждой страницы будут появляться текстовые ссылки. Присоединяйтесь!

The process

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

План.
Первый шаг - это создать эскиз наброска и дизайн. Я хотел чистый, но богатый вид кнопок для этой обучалки. Я накидал картинку, которая занимала всю ширину страницы и содержала с себе мой логотип, несколько графических миниатюр и переключатель, открывающий меню. Я был вынужден использовать в Fireworks 3 цвета, совместимые с Web, градиентные заливки и набор пергаментных текстур. Все графические элементы сделаны из символьных шрифтов (за исключением моей фотографии, которая была покорежена в Corel PhotoPaint 8). Картинка имеет 1600 пикселей в ширину и 24 пикселя в высоту. Она используется как элемент CSS в виде неповторяющегося задника, вложенного в тэги body (смотри страницу Images (изображения) для подробностей).

Второй шаг - это создание изображений. Смотри страницу Images для подробностей.

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

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

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

Теперь нам надо так установить слой, чтобы его верхняя линия совпала с переключающим изображением над ним. Нужно использовать управляющие кнопки клавиатуры, чтобы точно поместить слой в нужное место, а затем проверять в браузере до тех пор, пока все не будет тип-топ. Затем нам нужно создать третий слой, куда мы поместим выскакивающие кнопки, связанные с кнопкой "Ingredients". Метод точно такой же, как и ранее, за исключением того, что выравнивать нужно по Основному меню, а не по переключающему изображению.

Как оно выглядит:
Возьмите выпадающее меню с сервера microsoft.com. Много народу спрашивало меня, как им удалось создать такое. У меня возникла проблема с этим меню. Я считаю его очень противным. Я считаю, что от его графики ну просто несет вонью. Я думаю, что любой пользователь DreamWeaver может создать лучше, ну прямо сейчас. Я вас прошу сейчас: "Если вы используете эту обучалку, чтобы создать свое собственное меню, пожалуйста, найдите время, чтобы спланировать и разработать привлекательные изображения!".

Как оно работает:
Хорошие бизнесмены всегда планируют работу. Динамичные web-дизайнеры должны делать то же самое. Нам нужно спланировать события, которые произойдут на наших страницах. Ниже представлен план событий для этого меню:
1. Проводя мышкой над кнопкой "Tutorial Menu", под ним откроется главное меню.
2. Проводя мышкой над кнопкой "Ingredients", справа от него откроется подменю.
3. Уводя мышку с кнопок подменю и кнопки "Ingredients", подменю должно закрыться.
4. Проведение мышкой над всеми кнопками должно привести к изменению изображения кнопок, а уход мышки - к возврату исходного изображения.
5. Уход мышки со всего главного меню должно закрыть все меню.

Первая мысль, которая придет в голову после того, как вы чуть-чуть поиграете в DreamWeaver, будет: "Вау: Мне всего-то надо только либо показать, либо спрятать слои". Не работает!

С тех пор как мы начали работать со сменой конкретных изображений (не с картами изображений) всегда возникает маленький интервал между ними. Если вы просто укажете условием для события Mouse Over для каждой кнопки - показать слой меню, а для события Mouse Out - спрятать его, то что же произойдет?

Как только вы проведете мышкой над переключающим изображением, меню откроется. Но вы не сможете достаточно быстро переместить вашу мышь до следующей кнопки перед тем, как произойдет событие Mouse Out, которое спрячет слой (Hide Layer).

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

Сейчас мы создадим линейку времени (показано выше) и назовем ее "menuoff". Эта линейка времени содержит два поведения, отмеченных чертой тире на полосе Behavior. Для того чтобы вставить поведение, нужно щелкнуть мышкой на полосе в задуманном кадре. Затем открыть панель Behavior и щелкнуть на значке +, чтобы вставить событие. Для верхнего экземпляра я вставил 2 поведения: первое - спрятать подменю, и произойти это должно на 12 кадре. Второе - спрятать главное меню, и произойти оно должно на 15 кадре. Когда эта линейка времени воспроизводится, то подменю закрывается через 2 секунды, а основное меню - на 2 секунды позже.

Теперь, когда мы создали и обозвали нашу линейку времени, заключительный этап в разработке механики меню - это применение необходимых поведений к каждой кнопке. Мы более подробно обсудим это на странице Extensions, а здесь поместим только логику событий...

Tutorial Menu Button

1. (onMouseOut): Go To Timeline Frame 1:(menuoff)
2. (onMouseOut): Play Timeline: (menuoff)
3. (onMouseOver):Show Layer:(main menu)
4. (onMouseOver): Hide Layer:(sub- menu)
5. (onMouseOver): Stop Timeline:(menuoff)

Main Menu Button

1. (onMouseOut): Go To Timeline Frame 1:(menuoff)
2. (onMouseOut): Play Timeline: (menuoff)
3. (onMouseOut):Swap Image:
4. (onMouseOver): Stop Timeline:(menuoff)
5. (onMouseOver): Hide Layer:(sub- menu)
6. (onMouseOver): Swap Image Back
Замечание: Конечно, так как кнопка Ingredients управляет вылетающим меню, то действие в пункте 5 должно быть Show Layer.

Sub- Menu Button

1. (onMouseOut): Go To Timeline Frame 1:(menuoff)
2. (onMouseOut): Play Timeline: (menuoff)
3. (onMouseOut):Swap Image:
4. (onMouseOver): Stop Timeline:(menuoff)
5. (onMouseOver): Swap Image Back
И это все!

Сейчас нужно будет воспринять содержимое страниц Images и Extensions для получения некой неочевидной информации.

The images

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

Изображение задника имеет размеры 1600 пк шириной и 24 пк высотой. Файл формата .jpg и имеет размер около 7 кВ. Я начал с разрисованного углем холста, покрытого цветом (333333), и добавил 3 прямоугольника разной длины и градиентной заливки, чтобы симулировать совмещение цветов. Самый левый прямоугольник имеет дополнительную линейную текстуру. Другие текстурированы пергаментовидно с насыщенностью в 24%.

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

Моя маленькая фотография была отретуширована в Photopaint'e и разрисована в Fireworks. Изображение задника выполнено как составная часть CSS. Атрибут установлен как No-Repeat, а цвет фона - белый. Выполненное таким образом изображение займет всю середину окна. Это было бы невозможно, если бы оно вставлялось на страницу как объект.

Используемые шрифты:
1. Меню: Zurich EX BT.
2. Лого: AmerType Md BT.
3. Заголовок изображения: Georgia.
4. Заголовок HTML: Verdana.
5. HTML Body: Georgia.
Кнопки создавались в Fireworks c использованием цветов, градиентов, текстур, совместимых с задником.

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

Будем ценить время!

Extentions

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

1. Autoscroll : разработка Al Sparber (доступное на этом web-сайте). Автоматический скроллинг - это команда, которая добавляет параметр scroll="auto" к тэгу body. Он убирает все следы ручек прокрутки, когда в них нет необходимости (верс. 2 и 3)

2. Link-Washer: разработка Al Sparber (доступное на этом web-сайте). Link-Washer - это команда, которая убирает точечную линию вокруг ссылки, когда по ней кликают (только для IE) (верс. 2 и 3).

3. Show-Hide Layers.. разработка Macromedia - это действие, входит в состав пакета DreamWeaver верс. 2 и 3.

4. Swap Image: разработка Macromedia - это действие, входит в состав пакета DreamWeaver. Это действие также применяется к поведению Preload Image Restore по умолчанию.

5. Timelines (включает в себя Play, Stop, Go To Frame Number): разработка Macromedia - это действие, входит в состав пакета DreamWeaver верс. 2 и 3.

Обратите внимание, что я не включил Swap Image Restore. Это поведение может создать проблемы, когда вы используете несколько действий к одному свопингу изображения. Я использую второй раз свопинг, чтобы вернуть изображению первоначальный вид.

Замечание:
Линейки времени (относительно данной обучалки):
Не размещайте слои на линейке времени. Щелкните по полосе Behavior в кадре, где, по вашему, должно начаться действие выбранного поведения. Не кликая мышкой где-либо, откройте палитру Интерактивности и щелкните на значке +, чтобы добавить выбранное вами поведение.

Надеюсь, вы используете обучалку!

Источник: "Компьютер Price", http://www.comprice.ru

 


Copyright © "Internet Zone", http://www.izcity.com/, info@izcity.com