Добавление динамического содержимого на страницы

Последнее обновление 25 апр. 2024 г.
Примечание

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

О добавлении динамического содержимого

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

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

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

Часто существует более одного способа сделать определенный элемент страницы динамическим. Например, чтобы сделать изображение динамическим, вы можете использовать панель Bindings, инспектор свойств или команду Image в меню Insert.

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

О динамическом тексте

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

К динамическому тексту также можно применять формат данных. Например, если ваши данные состоят из дат, вы можете указать определенный формат даты, такой как 04/17/00 для посетителей из США или 17/04/00 для канадских посетителей.

Создание динамического текста

Вы можете заменить существующий текст динамическим текстом или разместить динамический текст в определенной точке вставки на странице.

Добавление динамического текста

В режиме Design выберите текст на странице или нажмите там, где хотите добавить динамический текст.
В панели Bindings (Window > Bindings) выберите источник контента из списка. Если вы выбрали набор записей, укажите столбец, который хотите использовать в наборе записей.

Источник содержимого должен содержать простой текст (текст в кодировке ASCII). HTML-код является простым текстом. Если в списке не отображаются источники контента или доступные источники контента не соответствуют вашим потребностям, нажмите кнопку плюс (+), чтобы определить новый источник контента.

Выберите формат данных для текста (необязательно).
Нажмите «Вставить» или перетащите источник содержимого на страницу.

Появится местозаполнитель динамического содержимого. (Если вы выбрали текст на странице, заполнитель заменит выбранный текст.) Заполнитель для контента набора записей использует синтаксис {RecordsetName.ColumnName}, где Recordset — это имя набора записей, а ColumnName — это имя столбца, который вы выбрали из набора записей.

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

Отображение заполнителей для динамического текста

Выберите «Правка» > «Настройки» > «Невидимые элементы» (Windows) или Dreamweaver > «Настройки» > «Невидимые элементы» (Macintosh).
Во всплывающем меню «Показать динамический текст как» выберите { } и нажмите «ОК».

Создание динамических изображений

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

Открыв страницу в режиме «Дизайн» («Вид» > «Дизайн»), поместите курсор в то место, где должно появиться изображение на странице.
Выберите «Вставка» > «Рисунок».

Появится диалоговое окно «Выбрать источник изображения».

Нажмите параметр «Источники данных» (Windows) или кнопку «Источник данных» (Macintosh).

Появится список источников содержимого.

Выберите источник содержимого из списка и нажмите кнопку «ОК».

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

Примечание

Dreamweaver в настоящее время не поддерживает двоичные изображения, хранящиеся в базе данных.

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

Создание динамических HTML-атрибутов

Вы можете динамически изменить внешний вид страницы, привязав HTML-атрибуты к данным. Например, вы можете изменить фоновое изображение таблицы, привязав атрибут background таблицы к полю в наборе записей.

Вы можете привязать HTML-атрибуты с помощью панели «Привязки» или инспектора свойств.

Сделайте HTML-атрибуты динамическими с помощью панели «Привязки»

Откройте панель «Привязки», выбрав «Окно» > «Привязки».
Убедитесь, что панель «Привязки» содержит источник данных, который вы хотите использовать.

Источник содержимого должен содержать данные, подходящие для HTML-атрибута, который вы хотите привязать. Если в списке не отображаются источники содержимого или доступные источники содержимого не соответствуют вашим потребностям, нажмите кнопку «Плюс» (+), чтобы определить новый источник данных.

В представлении «Дизайн» выберите объект HTML.

Например, чтобы выбрать HTML-таблицу, щелкните внутри таблицы и нажмите тег <table> в селекторе тегов в левом нижнем углу окна документа.

На панели «Привязки» выберите источник содержимого из вашего списка.
В поле «Привязать к» выберите HTML-атрибут из всплывающего меню.
Нажмите «Привязать».

При следующем запуске страницы на сервере приложений значение источника данных будет назначено HTML-атрибуту.

Сделайте HTML-атрибуты динамическими с помощью инспектора свойств

В режиме «Дизайн» выберите HTML-объект и откройте инспектор свойств («Окно» > «Свойства»).

Например, чтобы выбрать таблицу HTML, щелкните внутри таблицы и нажмите тег <table> в селекторе тегов в левом нижнем углу окна документа.

Способ привязки источника динамического контента к атрибуту HTML зависит от его местоположения.
  • Если атрибут, который вы хотите привязать, имеет значок папки рядом с ним в инспекторе свойств, нажмите значок папки, чтобы открыть диалоговое окно выбора файла; затем нажмите параметр «Источники данных», чтобы отобразить список источников данных.

  • Если атрибут, который вы хотите привязать, не имеет значка папки рядом с ним, нажмите вкладку «Список» (нижнюю из двух вкладок) в левой части инспектора.

    Отобразится представление списка инспектора свойств.

  • Если атрибут, который вы хотите привязать, не указан в представлении списка, нажмите кнопку «Плюс» (+); затем введите имя атрибута или нажмите кнопку с маленькой стрелкой и выберите атрибут из всплывающего меню.

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

Если вы нажали значок молнии, появится список источников данных.

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

Выберите источник контента из списка и нажмите «ОК».

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

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

Сделайте параметры ActiveX, Flash и других объектов динамическими

Вы можете сделать динамическими параметры Java- апплетов и подключаемых модулей, а также параметры объектов ActiveX, Flash, Shockwave, Director и Generator.

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

В режиме дизайна выберите объект на странице и откройте инспектор свойств (Окно > Свойства).
Нажмите кнопку «Параметры».
Если ваш параметр не появляется в списке, нажмите кнопку «Плюс» (+) и введите имя параметра в столбце «Параметр».
Нажмите столбец «Значение» параметра, а затем нажмите значок молнии, чтобы указать динамическое значение.

Появится список источников данных.

Выберите источник данных из списка и нажмите кнопку «ОК».

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