Предварительный просмотр страниц

Функция просмотра в реальном времени позволяет просматривать страницы в браузере, а также просматривать изменения в браузере в реальном времени по мере написания кода.

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

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

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

В следующих разделах можно больше узнать о других типах просмотра в Dreamweaver.

Можно просматривать веб-страницы в реальном времени по мере разработки для них кода или дизайна в Dreamweaver. Данная функция позволяет писать код и одновременно просматривать веб-страницы в различных браузерах. 

Задание установок просмотра в браузере

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

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

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

Предварительный просмотр страниц при интерактивном просмотре

Интерактивный просмотр отличается от традиционного для Dreamweaver представления «Дизайн» тем, что подготавливает страницу для отображения в более реалистичном виде, подобном тому, который она будет иметь в браузере, и также доступном для редактирования. 

Переключиться на интерактивный просмотр можно из представления «Дизайн». Однако переключение на интерактивный просмотр не похоже на переключение между любыми традиционными представлениями в Dreamweaver (такими, как «Код», «Разделение», «Дизайн»). При переключении на интерактивный просмотр из представления «Дизайн» последнее по сути переключается между двумя внутренними представлениями: редактируемым и «реалистичным».

При таком переключении представление «Дизайн» становится нередактируемым, однако в представлении «Код» по-прежнему можно редактировать код, после чего обновлять интерактивный просмотр и наблюдать результаты изменений. В интерактивном просмотре имеется дополнительная возможность просмотра интерактивного кода. Интерактивный просмотр кода похоже на интерактивное представление тем, что код в нем отображается в том виде, в котором реально выполняется браузером при подготовке страницы. Как и дизайн в интерактивный просмотр, код в интерактивном просмотре нередактируем.

Дополнительным преимуществом интерактивного просмотра является возможность «заморозить» выполнение кода JavaScript. Например, можно переключиться на интерактивный просмотр, а затем навести курсор мыши на строки таблицы jQuery, изменяющие цвет в результате действий пользователя. При «замораживании» кода JavaScript в интерактивном представлении страница сохраняется в текущем состоянии. Это позволяет отредактировать CSS или JavaScript, после чего обновить страницу, чтобы просмотреть влияние изменений. «Замораживание» JavaScript в интерактивном просмотре полезно, когда необходимо просмотреть и изменить свойства для различных состояний всплывающих меню и других интерактивных элементов, которые нельзя рассмотреть в традиционном представлении «Дизайн».

Просмотр страниц в интерактивном представлении.

Предварительный просмотр интерактивного кода

Код, отображаемый в представлении «Интерактивный код», аналогичен коду, который отображается при просмотре исходного кода страницы в браузере. Исходный код страницы в браузере статичен, но представление «Интерактивный код» динамично и обновляется по мере взаимодействия со страницей в представлении «Интерактивный просмотр».

Чтобы изменить настройки «Интерактивного кода», выберите «Правка» > «Настройки» (Windows) или «Dreamweaver» > «Настройки» (Macintosh OS) и выберите категорию «Цвета кода».

Заморозить JavaScript

Выполните одно из действий, описанных ниже.

• Нажмите клавишу F6.

• Выберите пункт «Заморозить JavaScript» во всплывающем меню кнопки «Интерактивный просмотр».

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

Параметры интерактивного просмотра

Помимо параметра «Заморозить JavaScript», имеются и другие параметры, доступные во всплывающем меню кнопки «Интерактивный просмотр» или в меню «Просмотр» > «Параметры интерактивного просмотра».

Заморозить JavaScript. Замораживает элементы, затронутые JavaScript, в их текущем состоянии.

Отключить JavaScript. Отключает JavaScript и повторно выводит страницу так, как она отображалась бы в браузере с отключенным кодом JavaScript.

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

Выделять изменения в интерактивном коде. Включает или выключает выделение изменений в представлении «Интерактивный код».

Редактировать страницу интерактивного просмотра в новой вкладке. Позволяет открывать новые вкладки для документов сайта, просматриваемых с помощью панели инструментов «Навигация с помощью браузера» или функции «Переход по ссылке». Сначала перейдите к документу, а потом выберите «Редактировать страницу интерактивного просмотра в новой вкладке» для создания новой вкладки для него.

Следовать по ссылке. При следующем щелчке ссылка в представлении «Интерактивный просмотр» становится активной. Также чтобы сделать ссылку активной, ее можно щелкнуть в представлении «Интерактивный просмотр», удерживая клавишу Ctrl.

Следовать ссылкам непрерывно. Делает ссылки в представлении «Интерактивный просмотр» активными постоянно, пока они не будут отключены снова или страница не будет закрыта.

Автоматически синхронизировать удаленные файлы. Автоматическая синхронизация локальных и удаленных файлов при щелчке значка «Обновить» на панели инструментов «Навигация с помощью браузера». Dreamweaver размещает файл на сервере до обновления, поэтому оба файла становятся синхронизированными.

Использовать тестовый сервер в качестве источника документа. Используется в основном динамическими страницами (например, страницами ColdFusion) и выбрано по умолчанию для динамических страниц. Если выбран этот параметр, Dreamweaver использует в качестве источника данных для отображения интерактивного представления документа его версию, расположенную на тестовом сервере сайта.

Использовать локальные файлы при разрешении ссылок на документы. Параметр по умолчанию для нединамических сайтов. Если этот параметр выбран для динамических сайтов (основной документ которых расположен на тестовом сервере), Dreamweaver использует локальные версии связанных файлов (например, файлов CSS или JavaScript). Это позволяет вносить локальные изменения в связанные файлы и просматривать, как они отображаются, до их переноса на тестовый сервер. Если этот параметр не выбран, Dreamweaver использует версии связанных файлов с тестового сервера.

Параметры запросов HTTP. Открывает диалоговое окно расширенных настроек, где можно ввести значения, используемые при отображении интерактивных данных. Для получения дополнительных сведений нажмите кнопку «Справка» в этом диалоговом окне.

Открыть в браузере

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

Перед открытием документа в браузере необходимо сохранить его. В противном случае последние изменения не отобразятся в браузере.