Создание Web-страницы с помощью шаблонов в визуальных редакторах

Практическая работа№26

Тема: Создание Web-страницы с помощью шаблонов в визуальных редакторах

Цель: закрепление навыков создания web-страниц в визуальных редакторах на основе шаблонов на примере редактора Macromedia Dreamweaver.

Время выполнения: 1 час

Теоретический материал:

Создать Web-страницу на основе шаблона можно тремя способами.

Первый способ заключается в том, чтобы использовать пункт New меню File окна документа Dreamweaver. При этом на экране появится диалоговое окно New Document. Переключитесь на вкладку Templates — и вы увидите то, что показано на рисунке 47.

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

В списке Site <имя сайта>выбирается нужный шаблон. Выберите шаблон Main. После этого в расположенной справа панели предварительного просмотра появится изображение выбранного шаблона.

Если флажок Update Pages when Template Changes включен (а он включен по умолчанию), при изменении шаблона, на основе которого создается Web-страница, она будет соответственно изменена. Если же этот флажок отключить, то в новую страницу будет просто скопировано содержимое выбранного шаблона. В этом случае она не будет содержать ни изменяемых, ни неизменяемых областей и при изменении шаблона изменяться не будет. Фактически это будет независимая страница, просто содержащая все содержимое шаблона.

Рисунок 47 - Диалоговое окно New Document (вкладка Templates)

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

Второй способ создания новой страницы на основе шаблона намного проще. Откройте панель Assets, переключитесь на список шаблонов, выберите в списке нужный шаблон и в контекстном или дополнительном меню -пункт New from Template.

Как бы то ни было, на экране появится окно документа, содержащее в себе новую Web-страницу (рисунок 48). Созданная изменяемая область выделена, синей рамкой. Кроме ее содержимого, ни один другой элемент страницы не может быть изменен; при наведении на него курсора мыши последний меняет форму на перечеркнутый круг. Мы даже не можем их выделить. Также невозможно изменить параметры таблицы или ее элементов. Шаблон надежно защищен от редактирования.

Рисунок 48 - Только что созданная Web-страница, основанная на шаблоне Main

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

Для поиска изменяемых областей на странице вы также можете пользоваться уже знакомым вам подменю Editable Regions, находящемся в подменю Templates контекстного меню. Там перечислен список всех имеющихся в шаблоне изменяемых областей; вам нужно будет только выбрать соответствующий пункт. Помните также, что список изменяемых областей приведен внизу подменю Templates меню Modify.

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

Если вам вдруг понадобилось изменить шаблон (например, вы обнаружили в нем ошибку), то вы сможете легко вызвать его на редактирование. Для этого выберите пункт Open Attached Template подменю Templates меню Modify или аналогичный пункт контекстного меню. На экране тотчас появится окно документа, где будет открыт этот шаблон.

Иногда возникает необходимость создать страницу, чей дизайн сильно отличается от предоставляемого шаблоном. В этом случае вы можете создать на основе данного шаблона страницу, а потом "отвязать" ее от этого шаблона. Для этого выберите пункт Detach from Template подменюTemplates менюModify.

Задание: Создайте web-страницу на одну из предложенных тем на основе шаблона в программеDreamweaver. На странице должны быть заголовок, вставленные изображения, соответствующие теме.

Примеры тем сайтов:

1.    Чемпионат Евро-2012

2.        Сотовые операторы

3.        Все о ремонте

4.        Компьютерные игры

5.        Олимпиада 2012 в Лондоне

6.        Отдых за рубежом

7.        Домашние питомцы

Ход работы:

1.   Прежде всего, разработайте систему каталогов для размещения страниц сайта. Возможет такой вариант: все php-файлы сохранять в папке «init», все остальные страницы, кроме главной index.html, записывать в папку «site».

2.   Соответственно в общей папке будет содержаться: файл index.html и каталоги «init» и «site».

3.   Первый php-файл содержит две перменные:

<?

$site_title = “отдых за рубежом”;

$path = “http://localhost/ ваш каталог/init/”;

?>

4.   Второй php-файл может быть следующего характера:

<?

<center><h2> Реклама </h2>

ВАШЕГО товара! </center>

?>

5.   Файл с контактной информацией:

<? $email = "noname@yandex.ru";

$name = "student";?>

Кроме адреса электронной почты и имени файл может содержать, например, ссылки на другие сайты.

6.   Остальные страницы формируются обычным образом с помощью html-тэгов, за исключением того, что по мере необходимости происходит включение php-файлов с помощью функций require() или include().

7.   Обязательно предусмотрите проверку формы на корректность заполнения (используйте php-скрипт из предыдущего практического занятия).

Контрольные вопросы:

1.   Что такое шаблон, для чего он используется?

2.   Какие web-редакторы вы знаете?

3.   Как создать web-страницу на основе шаблонов?

Скачано с www.znanio.ru