Создание повторяющихся областей и повторяющихся таблиц, а также настройка свойств таблицы в Dreamweaver для управления макетом страницы.
Повторяющаяся область — это раздел шаблона, который можно дублировать множество раз на странице на основе шаблона. Обычно повторяющиеся области используются с таблицами, но можно определить повторяющуюся область для других элементов страницы.
Повторяющиеся области позволяют контролировать макет страницы путем повторения определенных элементов, таких как макет товара каталога и его описания, или строки для данных, например списка товаров.
Существует два объекта шаблона повторяющихся областей, которые можно использовать: повторяющаяся область и повторяющаяся таблица.
Создать повторяющуюся область в шаблоне
Повторяющиеся области позволяют пользователям шаблона дублировать указанную область в шаблоне так часто, как нужно. Повторяющаяся область необязательно должна быть редактируемой.
Чтобы сделать контент в повторяющейся области редактируемым (например, разрешить пользователю вводить текст в ячейку таблицы в документе на основе шаблона), необходимо вставить редактируемую область в повторяющуюся область.
Выберите текст или контент, который нужно установить как повторяющуюся область.
Поместите курсор в документ там, где нужно вставить повторяющуюся область.
Выберите меню «Вставка > Шаблон > Повторяющаяся область».
Выберите пункт «Повторяющаяся область» в категории «Шаблоны» на панели «Вставка».
Не используйте в имени области специальные символы.
Добавление повторяющейся таблицы
Можно использовать повторяющуюся таблицу для создания редактируемой области (в формате таблицы) с повторяющимися строками. Вы можете определить атрибуты таблицы и настроить, какие ячейки таблицы можно редактировать.
Выберите меню «Вставка > Шаблон > Повторяющаяся таблица».
Выберите пункт «Повторяющаяся таблица» в категории «Шаблоны» на панели «Вставка».
Строки
Определяет количество строк в таблице.
Столбцы
Определяет количество столбцов в таблице.
Поля ячеек
Определяет количество пикселов между содержимым ячейки и границами ячейки.
Интервал ячеек
Определяет число пикселов между смежными ячейками таблицы.
Если значения полей ячейки и интервала между ячейками не заданы явно, то в большинстве браузеров таблица будет отображаться со значением поля ячейки 1 и интервала между ячейками 2. Чтобы таблица отображалась в браузере без полей и интервалов, установите значения параметров «Поля ячеек» и «Интервал ячеек» равным 0.
Ширина
Указывает ширину таблицы в пикселах или в виде процентного соотношения от ширины окна браузера.
Рамка
Задает толщину границ таблицы в пикселах.
Если значение границы не задано явно, то в большинстве браузеров таблица будет отображаться с толщиной границы 1. Чтобы таблица отображалась в браузере без границы, установите значение параметра «Граница» равным 0.
Чтобы границы таблицы и ячеек отображались при толщине границы 0, выберите «Просмотр > Параметры представления "Дизайн" > Средства визуализации». Этот параметр доступен только в представлении «Дизайн».
Повторяющиеся строки таблицы
Укажите, какие строки таблицы включены в повторяющуюся область.
Начальная строка
Устанавливает введенный номер строки как первую строку для включения в повторяющуюся область.
Конечная строка
Устанавливает введенный номер строки как последнюю строку для включения в повторяющуюся область.
Имя области
Позволяет назначить уникальное имя повторяющейся области.
Настройка чередующихся цветов фона в повторяющейся таблице
После того как вы вставите повторяющуюся таблицу в шаблон, вы можете настроить ее, чередуя цвет фона строк таблицы.
<tr bgcolor="@@( _index & 1 ? '#FFFFFF' : '#CCCCCC' )@@">
Вы можете заменить шестнадцатеричные значения #FFFFFF и #CCCCCC другими цветами.
Ниже приведен пример кода таблицы, которая включает чередующиеся цвета фона строк таблицы:
<table width="75%" border="1" cellspacing="0" cellpadding="0">
<tr><th>Name</th><th>Phone Number</th><th>Email Address</th></tr>
<!-- TemplateBeginRepeat name="contacts" -->
<tr bgcolor="@@(_index & 1 ? '#FFFFFF' : '#CCCCCC')@@">
<td> <!-- TemplateBeginEditable name="name" --> name <!-- TemplateEndEditable -->
</td>
<td> <!-- TemplateBeginEditable name="phone" --> phone <!-- TemplateEndEditable -->
</td>
<td> <!-- TemplateBeginEditable name="email" --> email <!-- TemplateEndEditable -->
</td>
</tr>
<!-- TemplateEndRepeat -->
</table>
Связанные материалы
Создание красивых веб-сайтов в Dreamweaver
Создавайте дизайн, пишите код и управляйте динамическими веб-сайтами с помощью многофункционального инструмента.