| ||
Расширения в 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-их версий. Сначала вы должны спланировать свое меню и сделать его эскиз. Блокнот и карандаш вполне сгодятся для этого. Здесь представлен наскоро сделанный перечень того, на что нужно обратить внимание: Конечно, вам также придется нарисовать эскизы выпадающих кнопок и установить местоположение всех элементов меню и их связь с содержимым соответствующих страниц. Болты и гайки данного меню Оно разрабатывалось на основе шаблона. Хотите верьте, хотите нет, но это меню находится внутри шаблона, заложенного в DreamWeaver: вместе с изящными интерактивными взаимодействиями (мне больше нравится перевод behaviors, как "поведения", - прим. переводчика), которые управляют им (я большой поклонник поиска легких путей). Так это обучалка по разработке выпадающего меню, используйте его для навигации! (подразумевается, что вы находитесь на странице автора, где приведена обучалка вместе с самим меню, - прим. переводчика). Если вы используете Internet Explorer, нажмите на клавишу F-11, чтобы переключиться на режим полноэкранного просмотра. Внизу каждой страницы будут появляться текстовые ссылки. Присоединяйтесь! The processЭто все игра в казаки-разбойники. Динамические выпадающие меню придают дизайну и его реальному воплощению незагруженный интерфейс. Их нельзя использовать, пока вы не доросли до них. Последнее, что нужно для web-дизайнера, так это избыточная усложненность страниц! Ну а теперь - вперед за уроком: План. Второй шаг - это создание изображений. Смотри страницу Images для подробностей. Третий шаг - это установить, что это меню будет делать, его местоположение, как оно будет выглядеть, как будет работать, и куда его ссылки будут направлять. Что оно делает: Местоположение: Теперь нам надо так установить слой, чтобы его верхняя линия совпала с переключающим изображением над ним. Нужно использовать управляющие кнопки клавиатуры, чтобы точно поместить слой в нужное место, а затем проверять в браузере до тех пор, пока все не будет тип-топ. Затем нам нужно создать третий слой, куда мы поместим выскакивающие кнопки, связанные с кнопкой "Ingredients". Метод точно такой же, как и ранее, за исключением того, что выравнивать нужно по Основному меню, а не по переключающему изображению. Как оно выглядит: Как оно работает: Первая мысль, которая придет в голову после того, как вы чуть-чуть поиграете в DreamWeaver, будет: "Вау: Мне всего-то надо только либо показать, либо спрятать слои". Не работает! С тех пор как мы начали работать со сменой конкретных изображений (не с картами изображений) всегда возникает маленький интервал между ними. Если вы просто укажете условием для события Mouse Over для каждой кнопки - показать слой меню, а для события Mouse Out - спрятать его, то что же произойдет? Как только вы проведете мышкой над переключающим изображением, меню откроется. Но вы не сможете достаточно быстро переместить вашу мышь до следующей кнопки перед тем, как произойдет событие Mouse Out, которое спрячет слой (Hide Layer). Выход состоит в использовании Timelines (линейки времени). линейка времени предоставляет нам, уф!:, время, чтобы открыть и закрыть наше меню независимо от того маленького интервала. Дальше показано, как она это делает. Сейчас мы создадим линейку времени (показано выше) и назовем ее "menuoff". Эта линейка времени содержит два поведения, отмеченных чертой тире на полосе Behavior. Для того чтобы вставить поведение, нужно щелкнуть мышкой на полосе в задуманном кадре. Затем открыть панель Behavior и щелкнуть на значке +, чтобы вставить событие. Для верхнего экземпляра я вставил 2 поведения: первое - спрятать подменю, и произойти это должно на 12 кадре. Второе - спрятать главное меню, и произойти оно должно на 15 кадре. Когда эта линейка времени воспроизводится, то подменю закрывается через 2 секунды, а основное меню - на 2 секунды позже. Теперь, когда мы создали и обозвали нашу линейку времени, заключительный этап в разработке механики меню - это применение необходимых поведений к каждой кнопке. Мы более подробно обсудим это на странице Extensions, а здесь поместим только логику событий... Tutorial Menu Button1. (onMouseOut): Go To Timeline Frame 1:(menuoff) Main Menu Button1. (onMouseOut): Go To Timeline Frame 1:(menuoff) Sub- Menu Button1. (onMouseOut): Go To Timeline Frame 1:(menuoff) Сейчас нужно будет воспринять содержимое страниц Images и Extensions для получения некой неочевидной информации. The imagesВсе изображения в этой обучалке создавались и оптимизировались в Fireworks 3. Здесь представлено только введение о том, как они создавались и как они вставлялись в общий дизайн: Изображение задника имеет размеры 1600 пк шириной и 24 пк высотой. Файл формата .jpg и имеет размер около 7 кВ. Я начал с разрисованного углем холста, покрытого цветом (333333), и добавил 3 прямоугольника разной длины и градиентной заливки, чтобы симулировать совмещение цветов. Самый левый прямоугольник имеет дополнительную линейную текстуру. Другие текстурированы пергаментовидно с насыщенностью в 24%. Графические элементы ближе к центру - это шрифты. Они изготовлены с использованием двух символьных шрифтов, входящих в состав Corel PhotoPaint под названием Transportation и Landmarks. Моя маленькая фотография была отретуширована в Photopaint'e и разрисована в Fireworks. Изображение задника выполнено как составная часть CSS. Атрибут установлен как No-Repeat, а цвет фона - белый. Выполненное таким образом изображение займет всю середину окна. Это было бы невозможно, если бы оно вставлялось на страницу как объект. Используемые шрифты: Замечание: Будем ценить время! 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. Это поведение может создать проблемы, когда вы используете несколько действий к одному свопингу изображения. Я использую второй раз свопинг, чтобы вернуть изображению первоначальный вид. Замечание: Надеюсь, вы используете обучалку! Источник: "Компьютер Price", http://www.comprice.ru
| ||
Copyright © "Internet Zone", http://www.izcity.com/, info@izcity.com |