Создание Web-страниц с помощью Dreamweaver 3 и Fireworks 3*

Свежий программный пакет, ради которого стоит жить: Dreamweaver 3 и Fireworks 3 входят в число самых мощных в мире средств для Web-дизайна. И эта статья поможет вам научиться ими пользоваться.

Редактор Macromedia Dreamweaver в своем последнем воплощении включает больше профессиональных средств и функций, чем все его соперники вместе взятые, и при этом обладает широчайшими возможностями конфигурирования. Однако для того чтобы воспользоваться всеми его преимуществами, не нужно быть гением в области техники. Многие из этих новшеств рассчитаны на облегчение работы и повышение производительности труда и созданы на основе превосходных средств разработки, появившихся в предыдущих версиях. Стили HTML позволяют определять для страниц CSS-подобные форматы, работающие в любом браузере, а тесная интеграция с Fireworks 3 весьма упрощает создание графических элементов.

Эти девять страниц учебных материалов помогут вам вырваться в лидеры в этой игре, познакомив вас с методами работы с Dreamweaver 3 и Fireworks 3. Так что не медлите, переверните страницу...

Этап 1: Создание страницы

Этап 2: Палитра History

Этап 3: Карты ссылок

Этап 4: Настройка HTML-кода

Этап 5: Fireworks и объекты

Этап 6: Оптимизация и шаблоны

Этап 7: Анимация с помощью Timeline

Этап 1: Создание страницы

Начнем с самых азов: создание простой страницы с анимированными кнопками в качестве шаблона для всего узла

1. Создайте на жестком диске папку с именем newsite и разместите в ней вторую папку, назвав ее images. Можно добавить и другие папки для страниц узла, клипов Shockwave, аудиофрагментов и прочих файлов, которые могут вам потребоваться позже.

2. Запустите Fireworks и загрузите заготовленный файл header.png — простой заголовок Web-страницы с логотипом, надписью и небольшой навигационной панелью. Выберите команду View>Grid Options>Edit Grid и установите шаг сетки 10x10 пикселов. Затем включите параметр Snap to Grid.

3. Выберите инструмент Slice и аккуратно выделите в изображении область логотипа, для удобства воспользовавшись сеткой. Затем с помощью того же инструмента выделите заголовок, навигационную панель и находящуюся рядом с ней надпись current charts.

4. Выберите фрагмент логотипа и найдите палитру Objects. Отключите параметр Auto-Name и введите имя logo.gif. Присвойте оставшимся фрагментам имена masterhead.gif, chart.gif и chartnav.gif, воспользовавшись разбитым на фрагменты файлом в качестве образца. В диалоговом окне File>Export выберите Use Slice Objects и сохраните изображения в папке images создаваемого узла. Кроме того, обязательно сохраните исходный PNG-файл.

5. Теперь запустите Dreamweaver 3 и выберите команду New Sites из меню Sites. В появившемся диалоговом окне найдите ранее созданную папку newsites и нажмите кнопку OK. (Остальные параметры на данный момент можно оставить без изменений.) Сохраните текущий (пустой) документ в той же папке под именем index.htm.

6. Дважды щелкните значок New Table в разделе Common Objects окна Object Inspector. Вставьте новую таблицу, состоящую из одной строки и двух столбцов, и установите для параметров Padding, Spacing и Border значение 0. После этого проверьте, активно ли окно Properties Inspector, открыв меню Windows и посмотрев, стоит ли галочка возле пункта Properties.

7. Выделите таблицу. В окне Properties Inspector установите для нее ширину 580 пикселов. Щелкните внутри первой ячейки таблицы. Установите ширину ячейки 100 пикселов, высоту 160 пикселов, а выравнивание содержимого — Left, Top. Дважды щелкните значок Insert Image в окне Object Inspector и найдите ранее экспортированное изображение logo.gif. Нажав кнопку OK, добавьте его к странице.

8. Теперь щелкните на второй ячейке и выберите команду Modify>Table, затем установите параметр Rows и введите значение 2 в соответствующем поле. Щелкните внутри новой верхней строки и с помощью окна Properties Inspector установите для нее ширину 480 пикселов, а высоту — 110 пикселов. Установите для расположенной ниже ячейки ширину 480 пикселов и высоту 50 пикселов. Наконец, установите выравнивание для ячеек — Left, Top.

9. Щелкните на верхней пустой ячейке таблицы. Выберите из меню команду Insert>Image и найдите изображение masterhead.gif в папке images. Выделите расположенную ниже ячейку и поместите в нее одно за другим изображения chart.gif и chartnav.gif. Сохраните страницу.

Этап 2: Палитра History

Возврат к любому месту в процессе разработки, повтор действий и первые шаги в настройке Dreamweaver

1. Если палитра History еще не открыта, выберите команду History из меню Windows. Новая палитра History в Dreamweaver похожа на аналогичную палитру в Photoshop 5 — в ней записывается каждая операция, выполняемая над файлом, что позволяет получить больший контроль над реализацией проекта.

2. Щелкните маркер положения в палитре History и удержите кнопку мыши, затем переместите его вверх. По мере продвижения операции, проведенные над документом в основном окне, последовательно отменяются, что позволяет вернуться к любому этапу создания страницы. Снова сдвиньте маркер в нижнее положение, чтобы возвратиться к окончательному состоянию страницы.

3. Операции из списка History можно повторять. Для примера попробуйте поместить курсор под созданной таблицей и выбрать команду Insert Table в списке History. Нажатие клавиш Control+Y (PC) или Option+Y (Mac) приводит к повторному выполнению последней операции.

4. Последовательность операций можно сохранить в качестве новой команды. Выберите палитру History и щелкните на верхней операции, затем, удерживая клавишу Shift, щелкните на последней операции в списке, чтобы выбрать их все. Щелкните на значке Save в палитре History, чтобы сохранить эти действия в качестве команды.

5. В появившемся диалоговом окне присвойте команде имя Insert MPFree Header. Перейдите к меню File и выберите команду New, чтобы создать новый файл. Щелкните на странице, чтобы активизировать ее, и выберите созданную команду из меню Commands, чтобы воспроизвести этот процесс. Результатом этого станет размещение заголовка в новом документе.

6. Тесная интеграция Dreamweaver 3 с Fireworks позволяет создавать весьма сложные команды, вызывающие сценарии Fireworks. Кроме того, в комплект программы входят готовые команды, позволяющие быстро оптимизировать изображения и создавать страницы на основе шаблонов, требуя ввода небольшого количества данных.

7. Возможности настройки Dreamweaver 3 гораздо шире, чем в предыдущих версиях программы. Выберите команду File>Open и найдите папку configuration\menus в программной папке Dreamweaver. Здесь можно увидеть, что вся система меню написана на XML и поддается модификации, хотя для их редактирования необходимо знакомство с XML и JavaScript.

8. Другие фрагменты Dreamweaver 3 тоже могут редактироваться. Выберите File>Open и перейдите в папку configuration\objects\common в программной папке Dreamweaver. Выберите Web-документ table.htm. Dreamweaver отобразит предназначенное для вставки таблиц диалоговое окно, которое можно отредактировать.

9. Измените устанавливаемые по умолчанию параметры для количества строк и столбцов и сохраните файл. Удерживая клавишу Control/Alt, щелкните в поле Title в окне Object и выберите команду Reload Actions. При следующей вставке таблицы будут использоваться новые параметры. Большинство объектов и операций в Dreamweaver можно редактировать подобным образом, непосредственно изменяя исходный код.

Этап 3: Карты ссылок

Быстрое добавление встроенных карт ссылок к изображениям

1. Вернемся к нашей работе. Новая функция Inline Image Maps значительно улучшена по сравнению с предыдущими версиями. Все нужные средства теперь находятся в окне Properties Inspector для изображений, а не в отдельном диалоге. Вернитесь к файлу index1ext1l и начните работу, щелкнув на изображении chartnav.gif.

2. Введите название карты chartmap в текстовом поле Map. Затем щелкните на инструменте Rectangular Hotspot и с помощью мыши нарисуйте прямоугольник вокруг кнопки 1. В поле Link введите none.html — это имя файла, который вы ранее перетащили в корневой каталог узла.

3. Повторите эту процедуру для каждой кнопки по очереди, связав их с файлом none.html. В «настоящем» узле ссылки указывали бы на другие страницы. Кроме того, можно воспользоваться кнопкой с изображением папки для поиска файлов или значком ссылки для выбора ссылки из окна Site.

Этап 4: Настройка HTML-кода

Использование стилей HTML и функции Quick Tags для управления внешним видом и форматированием документов

1. Пусть файл example1ext1l содержит почти законченную версию создаваемой нами страницы. Выберите Windows>HTML Styles, затем щелкните на стрелке в верхнем левом углу окна, чтобы открыть его выпадающее меню. Выберите команду New.

2. Присвойте новому стилю HTML имя Main Heading, выберите Arial, Helvetica, sans-serif из выпадающего списка Font и установите размер 6. Щелкните на значках полужирного шрифта и курсива, а затем нажмите кнопку OK.

3. Выделите фрагмент текста и выберите только что созданный стиль HTML из списка, чтобы применить его. Создайте дополнительные стили для основного текста и подзаголовков. Стили HTML будут работать в любом браузере, поскольку в них используется тэг <FONT>, а не каскадные таблицы стилей.

4. Иногда возникает необходимость работать с HTML-кодом страницы напрямую, не полагаясь на визуальные средства Dreamweaver. Функция Quick Tags в Dreamweaver 3 обеспечивает доступ и контекстное редактирование кода страницы.

5. Перетащите значок Insert Horizontal Rule в нижнюю часть страницы. С помощью окна Properties Inspector установите для нее ширину 580 пикселов, высоту 10 пикселов и выравнивание влево. Если флажок Shading установлен, снимите его. Выбрав линию, нажмите клавиши Control/Option+T, чтобы вызвать редактор Quick Tags.

6. Щелкните после последнего параметра, чтобы установить курсор, затем выберите COLOR из появившегося выпадающего списка. Допишите тэг линии так, чтобы он включал параметр COLOR=”#33666". Этот атрибут распознается только браузером Internet Explorer и не поддерживается Dreamweaver напрямую.

Этап 5: Fireworks и объекты

Интеграция Dreamweaver 3 с Fireworks 3 и использование новых объектов для автоматизации задач

1. Снова запустите Fireworks и создайте документ размером 60x60 пикселов. Нарисуйте заполненный круг и примените к нему эффект вдавленности из палитры Effects. Нанесите на полученную кнопку надпись.

2. Выберите команду Duplicate Frame из выпадающего списка в палитре Frames. Перейдите к новому кадру с помощью стрелок в нижней части окна документа и измените цвет надписи. Вернитесь к кадру 1 и нажмите клавиши Control/Option+A, чтобы выделить все.

3. Выберите команду Insert>New Button. Введите none.html в поле Links в палитре HTML или выберите этот файл с помощью функции обзора. Сохраните графический файл под именем button.png в новой папке rollovers в своем узле.

4. Выберите команду File>Export. В диалоговом окне Save присвойте кнопке имя button1.gif и выберите Use Slice Objects. В разделе HTML Settings выберите Dreamweaver 3 и оставьте в поле Location значение Same Directory. Сохраните файлы в папке rollovers.

5. Вернитесь в Dreamweaver, поместите курсор на боковую панель в файле example.html и дважды щелкните на значке Insert Fireworks HTML в окне Object. Перейдите в каталог rollovers и выберите там HTML-файл, который должен называться button1.html.

6. Воспользуйтесь файлом button.png в качестве шаблона для создания остальных кнопок и тем же способом добавьте их к странице. Кнопки можно создать и с «нуля», выбрав документ с единственным кадром, вызвав команду Insert>New Button и добавив дополнительные изображения в появившемся диалоговом окне.

7. Dreamweaver 3 включает и другие новые объекты. Чтобы испытать один из наиболее привлекательных, перетащите значок Email из окна Object Inspector на боковую панель. В появившемся диалоговом окне введите нужный текст для ссылки и соответствующий адрес электронной почты. Включение данного нового объекта означает, что все средства для работы с гиперссылками в Dreamweaver теперь автоматизированы.

8. Обратите внимание и на новые объекты для Flash 4 и Generator 2, которые поддерживают все необходимые параметры и позволяют непосредственно редактировать их. До этого лучшим средством для размещения таких файлов на страницах был AfterShock.

9. Объект Character — еще одно превосходное нововведение. Как и все остальные объекты палитр, его можно редактировать. Для того чтобы добавить новый символ, необходимо создать в Dreamweaver файл HTML и вставить в него нужный символ с помощью обычного сочетания клавиш, а затем создать значок в GIF-файле с тем же именем и поместить оба файла в папку configuration\objects\characters.

Этап 6: Оптимизация и шаблоны

Окончательные действия по оптимизации графики, сжатию, проверке кода и сохранению страницы в качестве шаблона

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

2. Одно из преимуществ создания основных изображений в качестве фрагментов Fireworks — это то, что страницу можно отредактировать в любой момент. Чтобы исправить отдельное изображение, его нужно выделить в Dreamweaver, выбрать в окне Properties Inspector команду Edit для запуска Fireworks и внести необходимые исправления. Документы в Dreamweaver будут обновлены автоматически.

3. Если исходный графический файл Fireworks был сохранен в формате PNG, изменения можно вносить и в него. Загрузите этот файл в Fireworks, отредактируйте его, а затем заново экспортируйте изображения в папку images. Никаких действий над самой страницей при этом производить не требуется.

4. Другие присутствующие на странице изображения, в частности те, которые были созданы без использования Fireworks, на этом этапе можно оптимизировать. По очереди выделяйте изображения и выбирайте в Fireworks команду Modify>Optimise Image. При этом в память будет загружен механизм экспорта Fireworks.

5. Завершив работу над страницей, выберите команду Commands>Clean-up HTML. Из-за того что в документ включались стили шрифтов и фрагменты кода из Fireworks, системе очистки кода Dreamweaver найдется, над чем поработать.

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

7. Теперь, когда у нас есть вполне симпатичная и работоспособная страница, пора сделать ее образцом для всего узла, превратив в шаблон. Выберите команду File>Save As Template и введите имя default в появившемся диалоговом окне.

8. Выделите первую ячейку с текстом в файле example.html и выберите команду Modify>Templates>New Editable Region из основного меню. Присвойте региону имя cell1. Повторите эти действия для второй ячейки, присвоив ей имя cell2. Сохраните файл.

9. Перейдите к меню File и выберите команду New From Template. Выберите из списка default. На экране появится страница, полностью включающая все элементы дизайна, но содержащая две области для новой информации. С помощью таких заранее подготовленных страниц можно быстро создать узел, а при редактировании шаблона изменения будут отражены на всех страницах узла.

Этап 7: Анимация с помощью Timeline

Хороший способ создания рекламных баннеров для узла

1. Некоторые компании выпускают специальные программы для создания анимационных рекламных баннеров, сменяющих друг друга. Мы же воспользуемся средствами Dreamweaver 3, чтобы создать DHTML-совместимый баннер, который будет работать в современном браузере без дополнительных модулей и серверных сценариев.

2. Создайте новый документ, затем выберите инструмент Layers из палитры Objects и нарисуйте на пустой странице новый слой. Выберите команду Window>Layers. В окне появится новый слой с именем Layer1. С помощью окна Properties Inspector установите размер слоя 480x60 пикселов.

3. Под первым слоем создайте второй, тоже установив для него размер 480x60 пикселов. Таким же образом создайте и третий слой, идентичный первым двум. Теперь в окне Layers Inspector должны отображаться три слоя с именами Layer1, Layer2 и Layer3, имеющие одинаковые размеры.

4. Нарисуйте в Fireworks три рекламных баннера и экспортируйте их в файлы формата GIF или просто загрузите какие-нибудь баннеры из Интернета. Вернитесь в Dreamweaver, выберите в окне Layers слой Layer1, затем щелкните внутри него, чтобы сделать курсор активным. Вызовите команду Insert>Image и укажите первый баннер. Тем же способом вставьте остальные два баннера в слои Layer2 и Layer3.

5. Выберите в окне Layers слой Layer1. В окне Properties Inspector установите для полей L (Left) и T (Top) значение 10 пикселов. Таким же образом установите положение для оставшихся двух слоев, чтобы все они находились непосредственно друг над другом. При просмотре в браузере изображения должны выводиться поочередно. Этого можно добиться, скрывая и отображая слои с помощью функции Timeline.

6. Выберите команду Window>Timeline и щелкните на первом кадре в первой строке. Выделите слой Layer1 в окне Layers и выберите команду Modify>Timelines>Add Object to Timeline. Щелкните на последнем кадре только что добавленного объекта в окне Timeline и перетащите его так, чтобы полоса занимала диапазон от 1-го до 30-го кадра.

7. Повторите описанные в предыдущем пункте действия для слоев Layer2 и Layer3, чтобы создать для каждого слоя в окне Timeline отдельную полосу. Щелкните на кадре 10 в строке Layer1 окна Timeline и создайте ключевой кадр, выбрав команду Modify>Timeline>Add Keyframe. Тем же способом добавьте дополнительные ключевые кадры на 10-м и 20-м кадрах в строке Layer2 и на 20-м кадре в строке Layer3.

8. Выберите первый кадр, щелкнув на соответствующей позиции линейки окна Timeline. Выберите в окне Layers слой Layer1 и включите отображение этого слоя с помощью пункта Vis. Щелкните на кадре 10 на линейке окна Timeline и с помощью окна свойств выключите отображение слоя Layer1 и включите отображение слоя Layer2. Щелкните на кадре 20. Выключите отображение слоя Layer2 и включите отображение слоя Layer3.

9. Оставаясь в позиции 30-го кадра, выберите команду Modify>Timeline>Add Behaviour to Timeline. Щелкните значок «+» и выберите команду Timeline>Go To Timeline Frame, а затем пункт Go To Frame 1 в появившемся диалоговом окне. Щелкните вкладку, чтобы вернуться к окну Timeline, установите для параметра fps значение 3 и включите флажок Autoplay. Сохраните страницу, выберите команду Preview in Browser и любуйтесь результатами тяжелого труда.

КомпьюАрт 3'2000