Иллюстрированный самоучитель по Web-разработке на Macromedia Studio MX
         

Оптимизация узла и программ


Оптимизация узла и программ

Решения CSS в Dreamweaver MX

Преимущества взаимосвязи Fireworks MX и Dreamweaver MX

Работа с JavaScript и HTML

Исправление кнопок Flash

Работа с автоматически сгенерированными программами в Dreamweaver MX и Fireworks MX

Использование внешних редакторов программ с Dreamweaver MX

Резюме



Использование внешних редакторов программ с Dreamweaver MX


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

Существуют два типа редакторов, которые можно использовать. Можно использовать встроенный редактор, такой как HomeSite Plus (PC) или BBEdit (Mac), или обычные текстовые редакторы, например Notepad (PC) или SimpleText и TextEdit (Mac).

Использование HomeSite Plus

При установке приложения HomeSite Plus оно автоматически интегрируется в Dreamweaver MX. Чтобы воспользоваться этим приложением, выполните следующие действия.

1. Откроите приложение HomeSite с помощью команды меню Edit=> Edit with HomeSite.

2. Введите текст программы или внесите в него изменения. Сохраните изменения.

3. Для того чтобы вернуться в Dreamweaver MX, на панели редактора щелкните на кнопке Dreanweaver/UltraDev.

Использование BBEdit

Существует множество версий этого известного редактора HTML для компьютеров Macintosh. Чтобы использовать любую из них, выполните следующие действия.

1. Откройте приложение BBEdit с помощью команды меню Edit=>Edit with BBEdit.



2. Внесите в текст программы изменения или дополнения.

3. Щелкните на кнопке Dreamweaver панели инструментов редактора, чтобы вернуться в Dreamweaver MX.

Использование внешних редакторов

Когда вы используете внешние редакторы, изменения в тексте, внесенные в них, не синхронизируются автоматически с Dreamweaver MX. Если изменения будут обнаружены последними, вам будет предложено заново открыть данный документ.

Чтобы выбрать внешний редактор, выполните следующие действия.

1. Откройте диалоговое окно Preferences с помощью команды Edit=>Preferences. В колонке категорий выберите пункт Types/Editors.



2. Если вы работаете на компьютере Мае, снимите флажок Enable BBEdit Integration.

3. Щелкните на кнопке Browse. Откроется диалоговое окно Select External Editor (Выбор внешнего редактора). Перейдите к месту размещения вашего текстового редактора. Выделите его и щелкните на кнопке Open. Вы вернетесь в диалоговое окно Preferences.

4. Выберите способ, которым Dreamweaver MX будет вас информировать об изменениях. Для этого выберите нужный вариант в списке Reload Modified Files.

5. Для регулирования поведения Dreamweaver MX при вызове внешнего редактора выберите одно из трех значений в списке Save On launch.

6. Чтобы закрыть диалоговое окно Preferences, щелкните на кнопке ОК.

7. Чтобы вызвать выбранный редактор, выберите в меню Edit=>Edit With. Выбранный вами внешний редактор будет добавлен в конец названия пункта меню. Например, если в качестве внешнего редактора вы выбрали Code Warrior, элемент меню будет называться Edit With CodeWarrior.


Исправление кнопок Flash


Flash является прекрасным инструментом, однако с ним часто обращаются неправильно. Использование неправильных материалов Flash в неверном месте и в ненужное время добавляет излишнюю нагрузку на память, уменьшает производительность и перегружает канал соединения с Internet.

Если вы решили добавить больше одной кнопки Flash и создать их с помощью инструмента Flash Button приложения Dreamweaver MX в файле productdetails.сfin, это решение нужно тщательно взвесить.

Каждая кнопка Flash, созданная с помощью этого инструмента, существует сама по себе, поэтому она добавляет дополнительную нагрузку на канал. Все кнопки генерируются по отдельности миниатюрной версией генератора, встроенного в Dreamweaver MX.

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

Для оптимизации кнопок Flash можно использовать два метода.

 Неплохой метод. Создайте динамическую кнопку Flash (аналогично динамическому текстовому полю; см. главу 20) и введите адреса URL и отображаемый текст. Создание только одной кнопки позволит уменьшить нагрузку на канал в Internet. Однако при этом уменьшится и производительность за счет загрузки нескольких экземпляров программы воспроизведения Flash.

 Самый лучший метод. Можно использовать несколько кнопок Flash в одном фильме. Преобразуйте кнопки в символы и используйте их в фильме несколько раз. Дополнительная нагрузка будет измеряться размерами всего одной кнопки, сколько бы раз она ни использовалась. Программа воспроизведения Flash окажет меньшую нагрузку на производительность и канал в Internet, так как кнопка используется только один раз.



Оптимизация узла и программ


Чаще всего Web-дизайнеры, пользующиеся автоматической генерацией HTML-кода в  пакете MX Studio, жалуются на то, что Fireworks MX и Dreamweaver MX создают программы-заготовки (ugly code). Этим термином они хотят подчеркнуть, что создаваемые программы являются сложными и слишком длинными.

Хорошей иллюстрацией данного высказывания является код, создаваемый другим приложением от Macromedia— Macromedia Director. Это приложение имеет собственный язык управления интерактивностью, называемый Lingo. Если мы хотим переместить головку воспроизведения к определенному кадру фильма, достаточно следующего фрагмента программы на этом языке:

On ExitFrame me Go to Frame 2 End

Эта программа достаточно проста и понятна. Те же, кто мало знаком с приложением Director, могут пользоваться языком Lingo с помощью связывания встроенных в приложение фрагментов кода. Ниже приведен пример вышеописанного действия, реализуемого с помощью фрагмента сгенерированной приложением программы.

on GetBehaviorDescription me return \ "Go To Frame X" & RETURN & RETURN & \ "Moves the playback head to the chosen frame when the user clicks on the sprite" & RETURN & RETURN & \ "Permitted Member Types:" & RETURN & \ "Graphic Members" & RETURN & RETURN & \ "Parameters:" & RETURN & \ "Go to which frame on MouseUp?" end BehaviorDescription on GetBehaviorTooltip me

return \

"Use with graphic members." & \

"Moves the playback head to the specified frame on MouseUp"" end Get BehaviorTooltip

И так далее для остальных 22 строк. А вот фрагмент, выполняющий реальные действия:

on MouseUp me

go MyTargetFrame end MouseUp

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



Вместо того чтобы отвергать код за его избыточность, задайте себе вопрос: "Выполняет ли команда то, что от нее требуется?"

Практически всегда ответ будет положительным. Для клиента самое главное, чтобы программа работала, а избыточен код или нет, его обычно мало волнует. Клиент практически всегда задает разработчику вопрос: "Программа работает?" Редко когда от него вы услышите вопрос о том, как она работает.

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

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

 Статическая. Узел представляет собой набор страниц HTML, использующих языки HTML, JavaScript и др. для реализации своих функций.

Динамическая. Узел представляет собой набор шаблонов, в которые информация попадает с помощью программ среднего уровня, таких как ColdFusion. Такие узлы обычно отличаются сложностью, а их оптимизация требует высокого профессионализма программиста.

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

 Существует множество способов оптимизации функций узла, а также программ, их реализующих.


Преимущества взаимосвязи Fireworks MX и Dreamweaver MX


Пакет MX Studio позволяет с помощью одного щелчка мышью из Dreamweaver MX открыть Fireworks MX, отредактировать в нем рисунок и вернуться в исходное приложение, чтобы посмотреть, как изменилась страница. Этот процесс часто называют круговым редактированием (round trip editing). Мы добавим под панелью навигации лозунг. Так как панель навигации была создана в Fireworks MX, имеет смысл в нем же вносить и изменения.


Рис. 22.3. При изменении таблицы стилей CSS создается протокол изменений

Щелчок на кнопке Edit в окне Property Dreamweaver MX позволяет перейти в Fireworks MX. Все изменения рисунка, выполненные в последнем, сразу же отображаются на странице Dreamweaver MX.

Чтобы добавить лозунг в панель навигации, выполните следующие действия.

1. Откройте шаблон Dreamweaver MX с названием main и щелкните на одном из слайсов меню навигации.

2. Щелкните на кнопке Edit в окне Property. Запустится Fireworks MX, в котором откроется графика панели навигации. Если вы используете файлы из папки примера, приложение в первый раз может попросить вас указать файл PNG. Впоследствии Fireworks при обращении к этому рисунку будет использовать именно этот файл.

3. На панели Tools выберите инструмент Text. Щелкните в пустой области документа.

4. Введите лозунг We got yer back.

5. С помощью окна Property скорректируйте шрифт, его размер и цвет. Рекомендуем использовать шрифт MarkerFelt (или другой, который вам нравится больше) размером 38 пунктов. Заполните текст линейным градиентом, добавьте оттенки распылителем и установите в окне Property выравнивание по центру. Установите флажок Fill Over Stroke, чтобы текст отображался поверх границы.

6. Создайте новый слайс, выбрав инструмент Slice на панели Tools и выделив область, показанную на рис. 22.4.

7. Добавив слайс, щелкните на кнопке Done в верхней части окна документа. Таблица слайсов будет обновлена и оптимизирована Fireworks MX. После этого Fireworks закроется, так как сеанс работы с ним считается законченным. Все внесенные изменения отобразятся в шаблоне Dreamweaver MX.

8. Сохраните шаблон. Откроется окно, запрашивающее, хотите ли вы применить изменения ко всем остальным страницам узла. Ответьте положительно, щелкнув на кнопке Update.


Рис. 22.4. Текст был добавлен к рисунку, отформатирован и выделен в отдельный слеше



Работа с автоматически сгенерированными программами в Dreamweaver MX и Fireworks MX


Причиной того, что программисты называют код, автоматически сгенерированный Dreamweaver MX и Fireworks MX, программами-заготовками (ugly code), является то, что эти программы обобщают все возможные сценарии работы пользователя. Естественно, размер программ при этом увеличивается.

Примером может служить такой вот код, обслуживающий обычную операцию замещения (rollover):

function MM_findObj (n, d) //v4.01 var p, i, x; if (!d) d=document;

if ((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p); if(!(x=d[n]&&d.all) x=d.all[n];

for (i=0; !x&&i<d.forms.length; i++) x=d.forms[i][n]; for (i=0; !x&&d.layers&&i<d.layers.lendth; i++)

x=MM_findObj(n,d.layers[i].document); if (!x&&d.GetElementById) x=d.getElementBy!d(n); return x; } function MM_swapImageО { //v.3.0

var i, j=0, x, a=MM_swapImage.arguments; document.MM_sr= new Array; for(i=0;i< (a.length-2);i+=3) if ((MM_findObj(a[i]))!=null) {document.MM_sr[j++]=x; if (Ix.oSrc) x.oSrc=x.src; x.src=a[i+2];} }

Попросту говоря, функция MM_SwapImage () получает список аргументов, содержащих данные в форме адресов URL, имен файлов рисунков или пустых строк. Например, искомые данные при помещении курсора мыши над объектом будут выглядеть следующим образом:

onMouseOver = "MM_swapImage('shoes', '',

'images/shoes_f2.gif',

'hats','','images/hats_f2.gif',!)")

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

После этого адрес URL старой графики сохраняется, если используется функция swaplmageRestore (), а сам адрес URL изменяется и указывает уже на новый рисунок.

Все это немного напоминает использование атомной бомбы для жарки барбекю. Естественно, барбекю поджарится, но при этом будет израсходована масса излишней энергии.

В данном примере не только содержится избыточный код, но и несколько излишних циклов процессора, так как для поиска объекта используется рекурсивная функция (древоподобная функция, сохраняющая вызовы на каждой ветви обработки, пока поиск проводится на всех дочерних ветвях).



Само замещение можно представить всего одной строкой: onMouseOver="this.src= ' images/shoes_f2.gif ' "

где this — текущий объект, вызвавший событие onMyuseOver. В данном случае это — наш рисунок. Когда курсор мыши помещается над объектом, эта строка программы указывает свойству src (это свойство аналогично атрибуту SRC дескриптора Щ€>) Щ1 новый рисунок.

Еще одной характеристикой программы-заготовки является вставка приложением Dreamweaver MX на страницу ненужных дескрипторов. Например:

 <tdxfont face="Arial, Helvetica, sans-serif" <img src="navbar_images/jct_corner_logo.gif" width="lll" heigth="52"</fontx/td>

Обратите внимание, что в данном случае отсутствует текст, а в наличии имеется только рисунок. И хотя ошибок нет, избыточный код засоряет страницу и увеличивает время ее загрузки.

Еще один пример программы-заготовки создан для сервера (ColdFusion) и обслуживает команду вставки записи (insert Record):

<cfif IsDefined ("FORM.MM_InsertRecord") AND FORM_MM_InsertRecord EQ "forml"> <cfquery datasource="jct"> INSERT INTO ProductType (ProductType, GraphicURL, ProductDescription) VALUES (

<cfif IsDefined("FORM.productType") AND #FORM.productType* NEQ "">

1 #FORM. product-Type» <cfelse> NULL

</cfif> ' <cfif IsDefined("FORM.graphicURL")

AND #FORM.graphicURL# NEQ "">

1#FORM.graphicURL*' <cfelse>

NULL </cfif> '

<cfif IsDefined("FORM.productDescription") AND #FORM.productDescription# NEQ "">

1#FORM.productDescription#' <cfelse>

NULL </cfif> }

</cfquery>

<cflocation url="test2.cfm"> </cfif>

Этот фрагмент программы ищет параметр с именем MM_InsertRecord, передаваемый из формы f orml. Если имя формы — f orml, этот фрагмент создает запрос на вставку и проверяет все элементы формы не только на предмет их существования, но и не содержат ли они пустую строку. Если удовлетворены оба условия, значение из формы используется для запроса, в противном случае функция возвращает значение NULL.



После этого страница перенаправляет вас на новую страницу.

В чем же избыточность этого фрагмента? Форма является своей же страницей ответа. Такой механизм не является наилучшим.

Немногим более эффективный механизм может быть заложен в программе страницы ответа и выглядит следующим образом:

ccfparam name="productType" default=""> <cfparam name=" productDescription " default=""> <cfparam name="graphicURL " default=""> <cfquery datasource="jct"> INSERT INTO ProductType (ProductType, GraphicURL, ProductDescription) VALUES (#productType#,

tproductDescription#, #graphicURL#) </cfquery>

Дескрипторы cfparam являются удобным способом определения значений по умолчанию для того случая, когда элементы формы не существуют. В данном случае проверяется факт существования элементов; в случае отсутствия таковых они создаются и им присваиваются значения по умолчанию. Если не предоставить значения атрибутов по умолчанию, страница вызовет ошибку. Это аналогично проверке выполнения некоторого условия в каком-либо фрагменте программы.

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

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


Работа с JavaScript и HTML


Как Dreamweaver MX, так и Fireworks MX для создания роловеров и других эффектов используют язык JavaScript. Знание того, какие из конструкций JavaScript лучше всего работают в каждой конкретной ситуации, основывается чаще всего на интуиции, вследствие чего решение иногда принимается неправильное.

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

То же касается и использования функции Swap Image Restore. Она запоминает только последний рисунок, замещенный с помощью функции Swap Image, Если вы замещаете два рисунка, можно восстановить только последний из них. В этом случае лучше использовать функцию замещения нескольких рисунков. При создании панелей навигации лучше взять на вооружение функцию Set Nav Bar Image приложения Fireworks MX. Она более действенна для вышеописанного случая, чем другие упомянутые механизмы, так как позволяет иметь больше двух состояний.

Не занимайтесь комбинированием различных функций. Их программы оптимизированы и проверены. Часто разработчики сосредоточивают внимание на опрятности кода и не задают себе вопрос: "Будет ли это работать?"

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

Если говорить конкретно об оптимизации HTML, использование таблиц CSS существенно сокращает количество возникающих вопросов оптимизации. Как вы уже знаете, таблицы CSS используются очень широко, и причина этому довольно проста: страницы читают не только броузеры, но и люди. Вы уже видели, какие конкретные преимущества предлагают разработчику таблицы стилей. Очень простые изменения, такие как увеличение размера шрифта, применяются сразу ко всему узлу.

Еще одним вопросом оптимизации программ является поиск излишних дескрипторов. Откройте главный шаблон. Отобразите дескрипторы заголовка, выбрав в меню команду View=>Head Content.



В шаблоне обратите внимание на дескриптор Style Sheet, который сместился влево, после того как был удален дескриптор стиля TD. В дескрипторе Style Sheet уже нет необходимости, так как мы используем внешнюю таблицу стилей. Его можно выделить и удалить.

Dreamweaver MX можно заставить подчистить и оптимизировать страницы автоматически. Это выполняется с помощью команды Clean Up HTML. Для инициирования процесса очистки необходимо выполнить следующие действия.

1. Выберите в меню команду Commands=>Clean Up HTML. Откроется диалоговое окно Clean Up HTML/XHTML (рис. 22.5).

2. Для того чтобы удалить дескрипторы, не содержащие программ, установите флажок Empty Container Tags в разделе Remove этого диалогового окна.

3. Для того чтобы избавиться от дескрипторов, повторяющих один и тот же фрагмент программы, установите флажок Redundant Nested Tags в разделе Remove.

4. Для удаления комментариев, созданных не Dreamweaver MX, для таких элементов, как библиотека или шаблон, установите флажок Non-Dreamweaver HTML в разделе Remove. Для того чтобы определить, какие конкретные дескрипторы необходимо удалить, установите флажок Specific Tag(s) и перечислите их в текстовом поле.



Рис. 22.5. Диалоговое окно Clean Up HTML/XHTML можно использовать для уменьшения размеров файла страницы и повышения эффективности программы HTML

Замечание

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

5. Для объединения двух и более дескрипторов шрифта, управляющих форматированием одного и того же фрагмента текста, установите флажок Combine Nested <font> Tags when Possible в разделе Options.

6. Чтобы просмотреть внесенные при оптимизации изменения, установите флажок Show Log on Completion в разделе Options.

7. Щелкните на кнопке ОК и сохраните шаблон.

Замечание

Лучше всего проверять страницы вручную. Хотя команда Clean Up HTML и выполняет большую работу, она не способна учесть все нюансы.


Решения CSS в Dreamweaver MX


Таблицы CSS (Cascading Style Sheet) являются прекрасным инструментом оптимизации. Образно говоря, таблицы CSS — это набор форматов стилей, которые определяют внешний вид отдельных страниц и всего узла в целом. Таблицы CSS все чаще используются вместо дескрипторов форматирования HTML, так как эти стили для применения в масштабах всего узла достаточно определить всего один раз. Для описания областей применения таблиц CSS может потребоваться отдельная книга. Если вас заинтересовала эта тема, рекомендуем ознакомиться с книгой Эрика Мейера (Eric Meyer) CSS: Mastering the language of Web Design, вышедшей в издательстве New Riders. Те таблицы, которые влияют на узел в целом, лучше хранить во внешних файлах; в противном случае обслуживание этих таблиц превратит вашу жизнь в сплошной кошмар.

Чтобы создать внешнюю таблицу CSS, выполните следующие действия.

1. Запустите Dreamweaver MX и откройте динамический узел JTC, с которым мы работаем в настоящей книге.

2. Выберите в меню команду File=>New, и откроется диалоговое окно New Document. В списке категорий выберите пункт Basic Page, а в его разделе — пункт CSS. После этого щелкните на кнопке Create. Откроется новый документ CSS.

3. Сразу сохраните файл, чтобы его можно было связать с шаблоном. Присвойте ему имя jct.css и закройте файл, как только он будет создан. Теперь таблицу стилей можно установить непосредственно из шаблона.

4. Откройте панель Files, выбрав в меню пункт Window=>Assets и щелкнув на значке Templates. На панели Files отобразятся шаблоны. В нашем узле должен присутствовать один шаблон — main.dwt.cfm. Откройте этот шаблон, дважды щелкнув на его имени.) Или же откройте папку шаблонов в представлении Site и дважды щелкните на этом файле.

5. Для того чтобы просмотреть стили CSS, откройте панель CSS Styles, выбрав вкладку CSS Styles на панели Design.

6. Щелкните на кнопке Attach Style Sheet в нижней части панели CSS Styles. Откроется диалоговое окно Link External Style Sheet.

7. Щелкните на кнопке Browse, и откроется диалоговое окно выбора файла Select Style Sheet File. Также имя файла можно ввести непосредственно в текстовом поле. В данном случае лучше воспользоваться первым способом, так как с использованием шаблона связана адресация. В поле File Selector выберите файл jet.ess и щелкните на кнопке ОК. Убедитесь, что в диалоговом окне Link External Style Sheet переключатель установлен в положение Link. Щелкните на кнопке ОК.



8. Щелкните на кнопке Edit Styles в верхней части панели CSS Styles, чтобы вывести список таблиц стилей, присоединенных к текущему документу. В данном случае в списке будет только один элемент — td. Выберите этот стиль.

9. Откройте параметры панели и в списке выберите пункт Duplicate. Откроется диалоговое окно Duplicate CSS, показанное на рис. 22.1.

10. Установите переключатель в положение Redefine HTML tag и в списке Define In выберите файл jet. ess. Щелкните на кнопке ОК. На панели CSS Styles под стилем jct.ess появится дескриптор.

11. На панели CSS Styles выберите элемент, расположенный под main.dwt.cfm. Щелкните на значке корзины. Этот стиль будет удален из шаблона, но сохранится во внешней таблице стилей. По необходимости к внешнему стилю можно добавить и другие стили. Теперь любая страница, присоединенная к этой таблице стилей, будет иметь предопределенный их набор.



Рис. 22.1. С помощью команды Duplicate панели CSS Styles можно дублировать таблицы стилей


Рис. 22.2. Если вы обновите таблицу стилей, эти изменения коснутся всех страниц узла, ее использующих
12. Сохраните шаблон. Если в шаблон были внесены какие-либо изменения, откроется диалоговое окно Update Template (рис. 22.2). Это диалоговое окно можно использовать для обновления страниц узла, использующих данный шаблон.

13. Щелкните на кнопке Update. Откроется диалоговое окно Update Pages (рис. 22.3). В нем отобразится протокол изменений, внесенных на отдельных страницах.

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

В этой главе было рассмотрено


В этой главе было рассмотрено множество вопросов. Мы начали с разговора об оптимизации, применяемой к программам и узлу.

Хотя многие разработчики рассматривают программы, генерируемые Dreamweaver MX и Fireworks MX, как избыточные, мы увидели, что причина обобщения программы лежит в необходимости приспособления под любое поведение пользователя. Мы рассмотрели три типа оптимизации, которая обычно применяется: статическую, динамическую и "косметически" -функциональную.

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

Мы показали, как с помощью кнопки Edit скомбинировать Dreamweaver MX и Fireworks MX для их совместной работы при оптимизации. Эта кнопка загружает Fireworks MX, позволяя вносить в нем изменения. После возвращения в Dreamweaver MX все внесенные изменения отобразятся на странице.

Мы также поговорили о функциях JavaScript, используемых в Fireworks MX и Dreamweaver MX. Здесь прозвучала мысль, которая лейтмотивом проходит через всю книгу: для любой работы нужно использовать именно те инструменты, которые созданы специально для нее.

Кроме того, вы узнали, как использовать команду Clean Up HTML и команду заголовка Content меню View в Dreamweaver MX. Последняя команда позволяет находить неиспользуемые дескрипторы. Команда Clean Up HTML позволяет оптимизировать программы, автоматически сгенерированные в Dreamweaver MX. Были описаны все параметры довольно простого диалогового окна, вызываемого этой командой.

Были описаны также способы использования кнопок Flash в Dreamweaver MX и методы их оптимизации.

Нельзя говорить об оптимизации программ, не проводя сравнение с программами-заготовками, генерируемыми приложениями пакета MX Studio. Были приведены три примера программ-заготовок и предложены потенциальные методы их оптимизации. Эта работа в команде должна делегироваться профессиональному программисту.

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

В следующей главе мы обсудим вопросы тестирования, с которыми придется столкнуться до того, как узел будет представлен в Web.