Быстрый Web-дизайн с Dreamweaver

Эффективные технологии превращения макетов в страницы Web

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

В мире печати сроки определяются жесткими графиками работ типографий и структур распространения. Однако разработчикам Web не приходится ждать печатников. Какая-то новая, интересная статья, или, скажем, информация о смене руководства большой компании могут появиться в Сети немедленно. Именно в этом сила пакета Macromedia Dreamweaver. Он сбережет время разработчика, а в Web время — решающий аргумент.

Если вы вовлечены в «дикий» мир Web-дизайна, то, вероятно, знаете, что зачастую приходится работать всю ночь, чтобы успеть к назначенному клиентом сроку или опередить конкурентов. В этом могут помочь ценнейшие возможности Dreamweaver, такие как шаблоны, трассировка изображений, Cascading Style Sheets (каскадные таблицы стилей — CSS), улучшенные средства поиска и замены, библиотека элементов, поддержка динамического HTML (DHTML), упрощенное создание таблиц и фреймов, управление структурой узла.

В этой статье вы найдете советы и секреты, которыми делятся дизайнеры Web (в их числе и авторы публикаций). Надеюсь, предлагаемые материалы помогут вам извлечь максимум полезного из этого пакета.

По шаблонам

На мой взгляд одна из интереснейших особенностей в Dreamweaver 2.0 — примененный в ней новый подход к использованию шаблонов. Во многих программах для создания HTML есть шаблоны для домашних страничек, но лишь немногие из них имеют качество, достаточное даже для личного узла, не говоря уж о коммерческом дизайне по заказу клиента. В Dreamweaver шаблоны подняты на новый уровень: при изменении существующего шаблона возможно обновление всех созданных с его помощью страниц текущего узла.

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

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

К счастью, вместо того, чтобы потратить день или два на переделывание всех страниц, вы можете сделать это за несколько часов. Поскольку исходный вариант дизайна был создан в шаблоне Dreamweaver, вы просто изменяете панель навигации, фон и другие элементы шаблона, а затем выполняете команды Modify (Изменить), Templates (Шаблоны), Update Pages (Обновить страницы). После этого Dreamweaver применит изменения ко всем страницам узла.

Шаг за шагом: можно и назад

Тереза Ривьера из Новато (шт. Калифорния), разработавшая много коммерческих узлов, включая сервер компании Beth’s Fine Desserts (см. врезку «Использование трассировки изображений»), подобно многим другим дизайнерам предпочитает создавать свои страницы в графических программах, и только потом переходит к работе с HTML-редактором. Одной из самых интересных с ее точки зрения возможностей Dreamweaver является функция трассировки изображений. Используя эту опцию, можно создавать изображение в программе типа Adobe Photoshop или Macromedia FreeHand, размещать его на заднем плане страницы Web, а затем трассировать изображение, воссоздавая исходный дизайн.

Функция трассировки изображений — идеальный способ размещения слоев или создания ячеек таблицы в HTML, поскольку он гарантирует, что изображения и другие элементы окажутся именно там, где они были в исходном варианте дизайна. Dreamweaver воспринимает изображения для трассировки из любого графического приложения, поддерживающего форматы JPEG, GIF или PNG.

Следует помнить, что оттрасированное изображение не является фоновой картинкой и поэтому оно не отображается при просмотре страницы через браузеры Netscape Navigator или Internet Explorer. Когда вы вставляете оттрассированное изображение в документ Dreamweaver, фоновое изображение или цвет оказываются скрыты; однако, если вы хотите видеть задний план окна документа, то можете отключить отображение оттрассированного изображения.

Стили с помощью CSS

Иоланда Баррелл, корпоративный web-мастер компании Etec Systems (Хайворд, шт. Калифорния), особенно ценит в Dreamweaver гибкую поддержку технологии Cascading Style Sheets (CSS) и улучшенную функцию поиска и замены, которая позволяет выполнять поиск в тегах HTML, игнорируя незначащие символы. Можно также ограничить поиск рамками определенного узла или каталога и сохранить критерии поиска в папке. Это значит, что вам не придется заново писать стандартные выражения (чтобы задать некоторые сочетания букв, используются специальные символы) и вы сможете сохранить определенный шаблон поиска (например, поиск определенного тега или атрибута), а затем повторно использовать его.

Технология CSS поможет поддерживать однообразный вид и стиль в рамках всего узла Web. Работая с большим узлом intranet, Баррелл использует стилевые листы для упрощения форматирования содержания новых страниц и добавления информации к существующим. Если вы знакомы со стилевыми листами в таких программах, как Adobe PageMaker, Microsoft Word или QuarkXPress, то быстро оцените полезность этой функции для Web-дизайна.

Стилевые листы позволяют описывать широкий набор опций форматирования — таких как начертание шрифта, выравнивание и размер в пунктах — а затем применять этот набор к любому элементу Web-страницы. Скажем, вы описываете стиль заголовка, который набирается жирным красным шрифтом Helvetica и выравнивается по центру. Каждый раз, собираясь создать новый заголовок, вы можете применить все элементы стиля одновременно, а не по отдельности.

Можно описать стиль для раздела документа, всего документа или всего узла Web. Позже, если вам понадобится изменить стиль — например, заменить шрифт заголовка с Times на Helvetica — можно глобально обновить все элементы, описанные данным стилем. Достаточно просто изменить описание стиля, созданного для заголовков, и весь текст с этим стилем преобразуется автоматически.

Единственный недостаток стилевых листов в том, что технология CSS является относительно новой для Web и, следовательно, стилевые листы поддерживаются только новейшими версиями браузеров, в частности, Netscape Navigator 4, Microsoft Internet Explorer 4 и более поздними. (Некоторые элементы поддержки стилей предусмотрены в Internet Explorer 3, но там реализованы не все возможности, имеющиеся в Dreamweaver.) Если вы, как и Баррелл, занимаетесь разработкой узла intranet, то ваши «читатели» скорее всего используют новейшие версии браузеров, поддерживающие CSS. Однако, если вы взялись за дизайн для более широкой аудитории, в процессе проектирования вам придется учитывать возможность просмотра узла далеко не самыми современными браузерами.

К счастью, компания Macromedia при разработке Dreamweaver учитывала различия между браузерами, и программа обладает возможностями, которые помогают подстроиться под различные браузеры. Например, вы можете создать узел со стилевыми листами, а затем с помощью опции Convert To 3.0 Browsers (Конвертировать для браузеров версий 3.0) создать альтернативные страницы, которые будут работать с устаревшими браузерами. Хотя этот процесс относительно прост, вам придется поддерживать две различные версии узла Web.

Кроме возможности управления большинством традиционных атрибутов форматирования текста, стили в документах HTML могут также описывать уникальные атрибуты HTML, такие как позиционирование, специальные эффекты и ролловеры — элементы, изменяющие свое состояние при прохождении над ними указателя мыши. Однако Dreamweaver не отображает все доступные опции стилей в окне документа. Неотображаемый атрибут появляется в окне Style Definition (Описание стиля) со звездочкой (*) вслед за названием. Чтобы увидеть стиль таким, каким он показывается в браузере, вы должны просмотреть его через установленный браузер, поддерживающий CSS. Чтобы выполнить предварительный просмотр любой созданной в Dreamweaver страницы, выберите команды File, Preview In Browser (Предварительный просмотр через браузер), а затем выберите браузер.

В библиотеку

Функция Library (Библиотека) пакета Dreamweaver автоматизирует процесс вставки и изменения элементов, которые расположены на нескольких страницах узла. Программа хранит библиотечные элементы в папке Library и связывает их со всеми страницами, на которых элементы были размещены. Это значит, что если браузер один раз загрузил библиотечный элемент, ему уже не придется делать это снова, когда этот элемент повстречается на следующих страницах. (Чтобы функция Library работала правильно, оригинальный файл должен остаться в том же месте.)

Описать как библиотечный можно любой элемент, такой как панель навигации из изображений и ссылок, логотип, или даже анимация Macromedia Shockware. Затем достаточно просто перетащить элемент из библиотеки на любую страницу. Кроме того, если вы вносите изменения в элемент библиотеки (например, добавляя изображение или меняя ссылку), то можете глобально обновить элемент на всем узле.

Для каждого разрабатываемого узла нужно задавать отдельную библиотеку. Если вы хотите использовать элемент библиотеки с другого узла, достаточно скопировать элемент в буфер обмена и вставить его оттуда; можно также открыть страницу, из которой вы хотите использовать библиотечные элементы, выполнить команду Save As и сохранить страницу в новом узле. Затем можно переопределить каждый элемент библиотеки (см. врезку «Создание и использование библиотеки элементов»).

В библиотеки можно включать любые элементы — такие как таблицы, формы, изображения, апплеты Java, дополнительные модули и текст — из области BODY файла HTML. Но библиотеки не могут содержать такие элементы, как временные шкалы, стилевые листы или функции JavaScript, так как исходный текст этих объектов входит в область HEAD файла HTML. Хотя вы можете добавлять «поведения» (behavior) (сочетания событий, таких как ролловеры и действий JavaScript) к библиотекам элементов, в Dreamweaver имеются особые требования к редактированию «поведений» в библиотечных элементах, поскольку часть исходного текста «поведений» находится в области HEAD.

Динамический дизайн

Еще один аспект, где Dreamweaver проявляет себя во всей красе — это поддержка DHTML. В версии 1.2 стало возможным добавлять интерактивные функции, типа ролловеров — графических событий, совершающихся в момент прохождения указателя мыши над определенным текстом или изображением. (Подробнее о создании ролловеров см. в статье «Ролловеры без программирования», Publish, ? 4, 1999 г., с. 51).

Те, кто разрабатывает сложные узлы с DHTML, обязательно оценят возможности анимации с временной шкалой, а также большой набор предопределенных вариантов «поведения», которые можно использовать при дизайне страниц — все это реализовано в Dreamweaver. Дизайнеры, обладающие навыками программирования, могут также создавать «поведения» и делать их доступными своим менее опытным коллегам. На часто обновляемом узле Web компании Macromedia, http://www.dreamweaver.com, можно найти постоянно растущий список «поведений», а также выгружаемые расширения.  

Джанин Уорнер — редактор Web-узла издательства Miami Herald Publishing. Она также является профессиональным диктором и автором шести книг по Web-дизайну, включая Dreamweaver for Dummies (IDG Books) Flash 3.0 Web Animation F/X and Design (Coriolis).

---

Использование трассировки изображений

Первоначально Тереза Ривьера дизайн Web-узла компании Beth’s Fine Desserts выполнила в Photoshop, а затем повторила его в Dreamweaver, поместив на страницы поверх оттрассированных исходные изображения GIF и JPEG, что должно было гарантировать точное воссоздание первоначального замысла.

Чтобы добавить к странице Web трассированное изображение, откройте файл страницы в Dreamweaver и выполните команды Modify, Page Properties (Свойства страницы). В окне диалога Page Properties щелкните по кнопке Choose (Выбрать), расположенной рядом с текстовым боксом Tracing Image, и в окне открытия файлов выберите изображение для вставки. Чтобы сделать изображение частично сливающимся с фоном и облегчить процесс трассировки, переместите движок Transparency (Прозрачность) в положение между 50 и 70 процентами (в зависимости от характера изображения). Для просмотра результатов щелкните по кнопке Apply (применить)(на рисунках она не показана), а по завершении — по кнопке OK (рис. А).

А

Опираясь на трассированное изображение, можно создать слои или таблицу (рис. В).

В

Для точного воссоздания первоначального дизайна поверх трассированного изображения можно

С

расположить несколько других изображений (рис. С).

---

Описание и применение стилевых листов

Вы можете описать любое сочетание опций форматирования как новый стиль, а затем применить его к выделенному тексту или любому другому элементу документа. Чтобы создать стиль, выполните команды Window (Окно), Styles (Стили) — или щелкните по кнопке Styles в панели Launcher — откроется палитра Styles (рис. D).

D

Теперь, чтобы открыть окно диалога Edit Style Sheet (Редактирование стилевого листа), щелкните по кнопке Style Sheet (Стилевой лист)(рис. E).

Е

Для создания стилевого листа нужно выполнить команду New (Новый) — откроется окно диалога New Style (Новый стиль).

Чтобы создать совершенно новый стиль, выберите радиокнопку Make Custom Style (Сделать заказной стиль)(рис. F). А для изменения или добавления опций форматирования к любому существующему тегу HTML (например, чтобы выровнять тег заголовка по центру) щелкните по радиокнопке Redefine HTML Tag (Переопределить тег HTML).

F

Для создания стиля, который будет применяться к ссылке, щелкните по радиокнопке Use CSS Selector (Использовать селектор CSS). Сделав свой выбор, щелкните по кнопке OK и в окне диалога Style Definition For (Описание стиля для) задайте атрибуты, которые хотите связать со стилем. Для получения стиля подзаголовка, показанного на рис. G, задано три опции — Arial, Helvetica и шрифт без засечек.

G

Поскольку Dreamweaver задействует возможности HTML по заданию нескольких шрифтов, пользователи, у которых нет установленных у вас шрифтов, все же увидят текст, отображаемый шрифтом без засечек, который подберет их браузер. Чтобы создать новый стиль и добавить его к палитре Styles, щелкните по кнопке OK, а затем — Done.

Любой стиль можно применить, выбрав текст или другой элемент страницы (например, подзаголовок на рис. H),

H

а затем щелкнув по названию стиля в окне диалога Styles.

---

Создание и использование библиотеки элементов

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

Чтобы создать библиотечный элемент, выберите нужный элемент или их сочетание. Выполните команды Window, Library (Библиотека) — откроется палитра Library; затем перетащите элемент (например, палитру навигации на рис. I)

I

в нижнюю секцию палитры Library. Чтобы сделать его библиотечным, щелкните по кнопке Create (Создать) и присвойте элементу название (автор назвал его navbar).

Добавить элемент библиотеки можно к любой странице узла. Достаточно открыть новый или существующий документ, выполнить команду Window, Library, чтобы открыть палитру Library, выбрать нужный элемент библиотеки и щелкнуть по кнопке Add to Page (Добавить к странице) в верхней правой части палитры Library. Элемент библиотеки можно также вставить, выбрав его в палитре Library и перетащив в окно документа (рис. J).

J

Чтобы отредактировать элемент библиотеки, дважды щелкните по нему в палитре

K

Library и внесите необходимые изменения, например, коррекцию ссылки, замену изображения или добавление нового текста. Когда вы сохраните элемент, Dreamweaver отобразит окно диалога, где спросит, хотите ли вы выполнить глобальное обновление (рис. K). Если щелкнуть по кнопке Yes, Dreamweaver внесет изменения во все страницы текущего узла, содержащие данный элемент. Если щелкнуть по кнопке No, изменения коснутся только тех страниц, куда элемент будет вставляться в дальнейшем.

---

Те, кто разрабатывает сложные узлы с динамическим HTML, обязательно оценят возможности анимации с временной шкалой в Dreamweaver.