Разработка и продвижение сайтов в городе Набережные Челны, С недавних пор все созданные нами новые сайты имеют адаптивную верстку (то есть корректно отображаются на экранах как компьютеров, так и смартфонов и планшетов). Это стало возможным благодаря новому принципу построения страниц - используется модульная система, при которой страницы сайта состоят из отдельных блоков. Все созданные нами сайты легко масштабируются.

Повторяющиеся области

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

описание новости в колонке на странице default.htm — их может быть много, но в шаблоне для него создана только одна область.

Давайте создадим такую область.

Откройте шаблон Main и поместите текстовый курсор в ячейку новостей внутренней таблицы разметки. После этого нажмем кнопку Repeating Region (рис. 9.26) на вкладке Templates панели объектов. Также можно выбрать пункт Repeating Region подменю Template Objects меню Modify или одноименный пункт подменю Templates контекстного меню. На экране появится диалоговое окно New Repeating Region, показанное на рис. 9.27.

Рис. 9.26. Кнопка Repeating Region панели объектов

Рис. 9.27. Диалоговое окно New Repeating Region

Введите имя создаваемой повторяющейся области в единственном поле ввода этого окна. Давайте назовем ее NewsList. После этого нажмите кнопку ОК. Результат показан на рис. 9.28.

Рис. 9.28. Повторяющаяся область

Теперь отформатируйте содержимое этой области как обычный текстовый абзац, выбрав в раскрывающемся списке Format редактора свойств пункт Paragraph. Если хотите, уменьшите шрифт текста на одну ступень. На этом создание повторяющейся области можно считать законченным.

Но проблема в том, что повторяющаяся область Dreamweaver также не является изменяемой. Поэтому нам нужно поместить внутрь нее еще и изменяемую область. Таким образом, получится троекратная вложенность "необязательная область — повторяющаяся область — изменяемая область".

Сложно, конечно, зато очень интересно.

Поставьте текстовый курсор внутри содержимого повторяющейся области. И создайте изменяемую область. Вы уже знаете, как это делается. Назовите ее News item. После этого удалите остатки содержимого повторяющейся области, не входящего в изменяемую область. И поправьте HTML-код — он должен выглядеть так:

<P><EM><FONT SIZE="-1">

<!— TemplateBeginEditable name="NewsItem" —>

Содержимое изменяемой области NewsItern

<!— TemplateEndEditable —>

</FONT></EM></P>

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

Рис. 9.29. Окончательный вид колонки новостей в шаблоне Main

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

Но как же колонка новостей? Сейчас мы ей займемся.

Откройте новую страницу default.htm, если вы ее уже закрыли. Выберите пункт Template Properties в меню Modify и в появившемся на экране диалоговом окне Template Properties задайте для параметра News значение true, для чего просто включите флажок Show News. После этого нажмите кнопку ОК.

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

Рис. 9.30. Текст описания первой новости, введенный в колонку

Так, одна новость у нас есть. Но как добавить остальные? Очень просто!

Для работы с пунктами повторяющихся областей Dreamweaver предоставляет набор особых кнопок, появляющихся в заголовке повторяющейся области, и набор пунктов меню. Эти пункты меню находятся в подменю Repeated Entries, вложенного в подменю Templates меню Modify, а также в подменю Templates контекстного меню. Все они перечислены в табл. 9.1.

Таблица 9.1. Кнопки и пункты меню, предназначенные для работы с пунктами повторяющихся областей

Пункт меню

Назначение

New Entry After Selection

Добавляет новый пункт ниже (правее)


выделенного

New Entry Before Selection

Добавляет новый пункт выше (левее)


выделенного

New Entry at End

Добавляет новый пункт в самый конец

New Entry at Beginning

Добавляет новый пункт в самое начало

Delete Repeating Entry

Удаляет выделенный пункт

Move Entry Up

Перемещает выделенный пункт выше

Move Entry Down

Перемещает выделенный пункт ниже

Move Entry to Beginning

Перемещает выделенный пункт в самый


верх

Move Entry to End

Перемещает выделенный пункт в самый низ

Cut Repeating Entry

Вырезает выделенный пункт в буфер обмена

Copy Repeating Entry

Копирует выделенный пункт в буфер обмена

Как вы уже заметили, в табл. 9.1 не указан пункт Paste Repeating Entry, который осуществлял бы вставку пункта из бушеоа обмена. Это выполняется как обычно, вызовом пункта Paste меню Edit или нажатием комбинации клавиш <Ctrl>+<V>.

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

Dreamweaver MX — настоящий король шаблонов!

Рис. 9.31. Готовая главная страница сайта Sample site 3 с готовой колонкой новостей

На правах рекламы: v= Оргтехника для офиса. Предлагаем мфу hp 2130 выгодно. Е96.ру | Вчера сайт известил касательно http://dentalprofi42.ru внезапно | Цена купить сайдинг Биробиджан panelizodiac.ru/blog/54-metallicheskiy-sayding-obzor/ недорого. || +// +<

::  Меню ::

Введение

ЧАСТЬ I. КАК СДЕЛАТЬ ПРОСТЕЙШИЙ WEB-САЙТ
Глава 1. Как создаются Web-страницы
Глава 2. Основные принципы работы с Dreamweaver
Глава 3. Начинаем с текста
Глава 4. Рисунки, звуки, фильмы
Глава 5. Таблицы
Глава 6. Работа с Web-сайтом

ЧАСТЬ II. ЗАНИМАЕМСЯ ПРОФЕССИОНАЛЬНЫМ WEB-ДИЗАЙНОМ
Глава 7. Фреймы
Глава 8. Табличный дизайн
Глава 9. Использование шаблонов
Глава 10. Каскадные таблицы стилей
ЧАСТЬ III. ИСПОЛЬЗУЕМ НОВЕЙШИЕ ТЕХНОЛОГИИ
Глава 11. Свободно позиционируемые элементы
Глава 12. Анимация элементов Web-страниц
Глава 13. Использование сценариев
Глава 14. Метатеги и серверные директивы
ЧАСТЬ IV. ПИШЕМ СЕРВЕРНЫЕ ПРОГРАММЫ
Глава 15. Введение в серверное программирование
Глава 16. Формы
Глава 17. Простейшие серверные приложения
Глава 18. Создание интерактивных сайтов
Заключение
‹аминат в ванной комнате: описание и характеристики материала Ѓлагоустройство садовой территории Љому можно продать аварийное авто? Џреимущества покупки авиабилетов на Tickets.by
Џреимущества автоломбардов
На что обратить внимание, сдавая часы в ломбард
Ѓлагоустройство садовой территории


:: Реклама ::

  Как создаются Web-страницы?
 

вхідні двері івано-франківськ, do

:: Статистика ::


Індекс цитування
Яндекс.Метрика

:: Навигация ::

Главная
Гостевая книга
Добавить в избраное  

 

 

 


Copyright © Asentli, 2008-2010