Тема: Использование шаблонов

Лекция 16

Тема: Использование шаблонов

Цели: Ознакомить учащихся с основными понятиями шаблона. С основными способами создания, сохранения и редактирования шаблонов.

 

План урока.

1. Организационный момент.

2. Изложение нового материала.

1) Шаблон

2) Способы создания шаблонов

3) Создание веб-страницы на основе шаблона

3. Закрепление изученного.

4. Итог урока.

Ход урока.

Организационный момент.

Отметить присутствующих. Сообщить тему урока. Настроить учащихся на восприятие материала.

2. Изложение нового материала.

Шаблон — это заготовка веб-страницы, содержащая общие для всех веб-страниц данного сайта элементы: стиль дизайна, заголовок, навигационное меню, подписи и таблицу разметки. Сайт может содержать и одну веб-страницу, и больше. Если сайт содержит не сколько веб-страниц, считается хорошим тоном, чтобы все они были выполнены в едином дизайнерском стиле: имели бы одинаково оформленные заголовки, подобранную цветовую гамму, одинаковые навигационное меню и т. д. Изменяться будет только конкретное содержимое отдельной веб-страницы — в соответствии с ее назначением. Когда веб-страниц в сайте достаточно много, то каждый раз заново выполнять «с нуля» все дизайнерское оформление каждой веб-страницы, а потом еще и наполнять их индивидуальными данными — довольно трудоемкое занятие. Вот в этом случае и надо использовать шаблоны веб-страниц. Если вы однажды создадите такой шаблон, то вам останется только заполнять страницы соответствующей информацией или вносить в них несущественные изменения. К тому же и стиль всего сайта будет неизменным. Когда новая веб-страница создается на основе такого шаблона, то вносить данные можно только в специально отведенные для этого области. А общие элементы шаблона изменять нельзя. Поэтому во многих веб-студиях шаблоны выполняются художниками, а заполнение информацией производится уже другими специалистами Для создания веб-страницы на основе такого шаблона выполняем команду меню File • New. открывшемся диалоговом окне New Document на вкладке General выбираем список Category. В этом списке выбираем пункт Page Design (Дизайн страницы).

В расположенном чуть левее списке Page Design (Дизайн страницы) и будет представлен список возможных шаблонов оформления веб-страницы. Здесь же можно их предварительно просмотреть в окне Preview (Свойства).

Создание нового шаблона

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

Способ Создание нового шаблона

Создание первым способом начинается с команды меню File • New. Как всегда, в этом случае откроется диалоговое окно New Document. На вкладке General (Общее) выбираем список Category (Категории). В нем находим и выделяем категорию Template page (Шаблонная страница).Среди восьми возможных, выбираем шестой вариант — HTML template (Шаблон HTML).

 

И сохраняем документ (Save as)

Изменяемые области шаблона

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

 Для создания изменяемой области выполняем команду меню Insert • Template Objects • Editable Region (Вставить •Шаблоны объектов • Изменяемая область). По этой команде открывается диалоговое окно New Editable Region (Новая изменяемая область).

Лекция 17

Организационный момент.

Отметить присутствующих. Сообщить тему урока. Настроить учащихся на восприятие материала.

2. Изложение нового материала.

Свободно позиционируемые элементы — совсем недавнее нововведение в HTML. Фактически они появились в 1997 году, одновременно с таблицами стилей. И это не случайно: для создания свободно позиционируемых элементов используются особые атрибуты стилей, задающие координаты и размеры таких элементов.

Было сказано, что свободно позиционируемые элементы появились совсем недавно, но в мире компьютерных вообще и интернет-технологий в частности время летит очень быстро, и пять лет истории какого-либо нововведения — это целая эпоха. Однако до сих пор свободно позиционируемые элементы не снискали особой популярности у Web-дизайнеров. И автор не знает, в чем причина: консерватизм Web-дизайнеров или неприспособленность этих элементов к применению в Web-дизайне.

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

У свободно позиционируемых элементов есть еще одно неоспоримое преимущество: они предоставляют Web-дизайнеру полнейший контроль над Web-страницей. Используя специально написанные сценарии, разработчик может заставить отдельные элементы страниц двигаться, создавая впечатляющие анимационные эффекты. (Вы, наверно, часто встречали на некоторых страницах анимированные курсоры мыши. Это как раз свободно позиционируемые элементы, "наученные" двигаться за мышью.) Идя дальше, программист (именно так, не Web-дизайнер, а Web-программист!) может создать на странице строку меню с выпадающими подменю и, в конце концов, превратить Web-страничку в подобие окна Windows-приложения.

Какими же параметрами свободно позиционируемого элемента можно управлять? А вот какими:

· координатами его левого верхнего угла;

· геометрическими размерами;

· слоем (уровнем), или z-индексом;

· видимостью или невидимостью;

· поведением в случае, если содержимое этого элемента выйдет за его размеры;

· некоторыми другими, о которых будет рассказано ниже.

· z-индексе нужно рассказать подробнее. Предположим, что все созданные нами на странице свободно позиционируемые элементы "сложены" в своеобразную "стопку". И не просто "сложены", а еще и пронумерованы в -порядке "снизу" "вверх". При этом, как вы поняли, элементы с большими номерами перекрывают элементы с меньшими номерами. Так вот этот номер в воображаемой "стопке" и есть z-индекс.

Внимание!

Свободно позиционируемый элемент в любом случае перекрывает обычное содержимое страницы, лежащее в "потоке" текста.

Как видите, вы можете задать для свободного элемента довольно много параметров. Вы даже можете сделать его видимым или невидимым, что часто используется в анимации и при создании различного рода спецэффектов. Кроме того, это пригодится, если вы будете программировать для своей страницы интерфейс, аналогичный интерфейсу Windows-приложения.

Отдельно хотелось бы остановиться на одной особенности свободных элементов. Как вы поняли, они могут содержать внутри себя некое содержимое, т. е. могут являться родителями для других элементов. Так вот: можно задать поведение такого свободного элемента в случае, если его содержимое перестанет в нем помещаться. Вы можете задать, появится ли в элементе-родителе полоса прокрутки или не помещающееся в нем содержимое будет "отрезано". Таким образом, вы можете создавать своеобразные "документы в документе" без использования фреймов.

Примечание

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

А эти атрибуты задают, соответственно, ширину и высоту свободно позиционируемого элемента:

width: 200; height: 100;

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

А теперь взгляните еще раз на рис. 11.1. Вы видите, что высота нашего свободного элемента заметно больше ста пикселов (сравните ее с шириной). Дело в том, что по умолчанию свободный элемент растягивается по вертикали, если его содержимое в нем не помещается. А у нас как раз такой случай. (Как уже говорилось, вы можете задать другое поведение, но об этом позже.)

background-color: #00FF00;

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

А теперь держитесь крепче! Добавлением всего одной строки в таблицу стилей мы превратим свободно позиционируемый элемент в небольшую "страничку в странице" (добавленный текст выделен полужирным шрифтом).

#para {position: absolute; left: 50; top: 50; width: 200; height: 100;

background-color: #OOFFOO; overflow: scroll }

Сохраните новый файл и откройте его в Web-обозревателе.

Давайте еще раз взглянем на добавленную нами строку:

overflow: scroll

overflow — атрибут, как раз и задающий поведение свободно позиционируемого элемента, когда его содержимое в нем не помещается. Значение по умолчанию — auto — заставляет элемент растягиваться по вертикали, что мы и наблюдали в предыдущем случае. А значение scroll заставляет элемент отобразить полосы прокрутки.

 

Теперь посмотрим, как это выглядит в Dreamweaver MX.

<HTML> <HEAD>

<ТITLE>Пример WEB-страницы</ТITLE>

<SCRIPT>

<!— Сценарий, необходимый для нормальной работы этой Web-страницы в старых версиях Navigator —> </SCRIPT> </HEAD> <BODY>

<DIV ID="para" STYLE="position: absolute; left: 50; top: 50; width: 200; height: 100; background-color: #00FF00; overflow: scroll">

Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя.

</DIV>

</BODY> </HTML>

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

Превратить фиксированный элемент страницы в свободный не составляет особого труда. Нужно всего лишь задать соответствующие стили и заменить теги <р> на <DIV>. А в большинстве случаев вам даже не нужно будет более-менее серьезно переделывать дизайн ваших страниц, если, конечно, они не основаны на фреймах или таблицах.

Лекция 18

Организационный момент.

Отметить присутствующих. Сообщить тему урока. Настроить учащихся на восприятие материала.

2. Изложение нового материала.

Зачем нужна анимация

Как правило, анимация на Web-страницах преследует три цели:

· оживить страницы;

· привлечь к чему-либо внимание;

· показать что-либо в учебных целях.

поэтому можно выделить три цели применения анимации:

· развлечение;

· реклама;

· образование.

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

Развлечения в Интернете — достаточно молодая отрасль Web-строительства. Изначально Интернет был создан как сеть для ученых, которым нужно было обмениваться текстовыми документами (сначала даже без графики) и связывать их в некое подобие структуры. Потом в Сеть пришел обыватель, и Web-дизайнеры ринулись угождать его вкусам. (Не будем спорить, насколько они возвышенны или низменны. Личное мнение автора: обыватель слишком разнолик, чтобы свести его к одному-единственному ярлыку.) В Интернете появились аудио и видео, на Web-страницы пришли сложная графика и анимация. Сейчас все эти "навороты" используются так часто, что ими уже мало кого можно удивить.

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

Теперь реклама. Она появилась в Сети вместе с развлечениями, а значит, вместе с обывателем. Она уже здорово надоела, эта интернет-реклама, едва ли не больше, чем реклама телевизионная. Но отдадим должное рекламе (и интернетовской, и телевизионной) -- благодаря ей получили возможность существовать очень многие популярные некоммерческие проекты. Если реклама вдруг исчезнет, эти проекты пропадут сразу же вслед за ней.

Традиционно для рекламных целей в Сети используются так называемые баннеры — небольшие графические изображения жестко стандартизированных форматов. Почти все баннеры создаются в формате "анимированный GIF", т. е. уже используют возможности анимации по привлечению внимания потенциального клиента. Рекламную анимацию, основанную на Web-сценариях, похоже, никто еще не применял, а если и использовал, то очень мало. Так что перед вами обширное непаханое поле деятельности, которое вполне может принести неплохие плоды.

Анимация, основанная на свободно позиционируемых элементах и Web-сценариях, значительно компактнее любых видеофайлов, будь то анимированный GIF, видеофайлы форматов AVI или Apple QuickTime. Однако ани-мированные GIF-файлы поддерживаются абсолютно всеми Web-обозревателями, даже самыми старыми, поэтому и применяются так широко. Web-сценарии же будут работать только на достаточно новых Web-обозревателях (которыми, надо сказать, сейчас пользуется подавляющее большинство интернетчиков).

Так или иначе, но попробовать Web-сценарии в рекламе стоит. И, кажется, кое-кто уже пробует.

От рекламы плавно перейдем к образованию. Программы — учебные пособия, часто используемые в образовании, как правило, пишутся на компилируемых языках программирования и представляют собой обычные MS-DOS- или Windows-приложения. Учебные пособия, сделанные на основе "живых" Web-страниц, встречаются пока еще довольно редко, хотя это направление весьма перспективно. Такие учебные пособия можно очень быстро создавать и модифицировать; а по сравнению с обычными программами они исключительно компактны (ну сколько места могут занимать несложная Web-страница и пара изображений?). Вдобавок такие пособия прямо-таки просятся в Интернет, на Web-сайты, а значит, можно без особых проблем организовать модное ныне дистанционное обучение.

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

Создание анимации

Для работы понадобится панель Timelines, в которой отображаются все анимации, созданные на Web-странице. Чтобы вывести эту панель на экран, включите пункт-выключатель Timelines в подменю Others меню Window или нажмите комбинацию клавиш <Alt>+<F9>. Сама панель Timelines показана на рис. 18.1.

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

Большую часть этой панели занимает временная шкала, но проградуиро-ванная не в секундах, а в кадрах анимации — так удобнее. Значения времени (в кадрах) написаны на серой временной шкале, расположенной выше. Под этой шкалой отображаются все доступные каналы анимации, и занятые, и незанятые. В верхней же части панели находятся несколько элементов управления, предназначенных для задания некоторых параметров дорожек и самой анимации.

Рис. 18.1.

"Но ведь Dreamweaver позволяет работать одновременно с несколькими временными шкалами, — скажете вы. — Где же остальные шкалы?" Чтобы увидеть их, нужно выбрать соответствующий пункт комбинированного списка анимаций, показанного на рис. 18.2.

Рис. 18.2. Комбинированный список анимаций

Работой с несколькими разными анимациями мы займемся потом. А сейчас давайте создадим одну из них, самую простую.

Чтобы анимировать какой-либо из доступных свободно позиционируемых элементов, нужно поместить его на шкалу времени, создав дорожку анимации. Для этого выделим требуемый свободный элемент, щелкнем по нему правой кнопкой мыши и выберем в контекстном меню пункт Add to Timeline. Вы также можете выбрать пункт Add Object контекстного меню временной линии или пункт Add Object to Timeline подменю Timeline меню Modify. И, наконец, вы можете просто нажать комбинацию клавиш <Ctrl>+<Alt>+<Shift>+<T>.

После добавления в анимацию свободного элемента Dreamweaver выводит предупреждение, показанное на рис. 18.3. Этим он хочет сказать, что может управлять в процессе анимации следующими параметрами свободного элемента:

· горизонтальной и вертикальной координатами левого верхнего угла (атрибуты LEFT и ТОР);

· шириной и высотой (атрибуты WIDTH и HEIGHT), причем работать это будет только в Internet Explorer;

· порядком перекрытия, иначе говоря, z-индексом (атрибут Z-INDEX);

· видимостью (атрибут VISIBILITY).

Рис. 18.3. Предупреждение, выводимое Dreamweaver после добавления свободного элемента в анимацию

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

Теперь закройте данное предупреждение нажатием кнопки ОК. Если вы не желаете больше его видеть, перед закрытием включите флажок Don't show me this message again.

Наконец, после всех треволнений, мы увидим в списке панели Timelines новую дорожку (рис. 18.4). Она отображается в виде светло-синей полосы, на которой написано имя свободного элемента, которому она принадлежит. По обеим сторонам данной полосы можно заметить светлые кружки. Это ключевые точки; их пока всего две: начало и конец траектории. Первая ключевая точка — начало — находится на первом кадре; это значит, что анимация для данного элемента начнется с первого кадра. Вторая ключевая точка — конец траектории — находится на пятнадцатом кадре; там наш анимированный элемент перестанет двигаться.

Рис. 18.4. Новая дорожка анимации

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

Рис. 18.5. Маркер выделенного кадра

Если вас не устраивает местоположение дорожки анимации, вы можете легко его изменить. Для этого "ухватите" мышью дорожку (не ключевые точки!) и перетащите ее вдоль шкалы, пока она не займет нужную позицию. Например, вы можете заставить анимацию начинаться с десятого кадра, а заканчиваться — двадцать пятым. Также вы можете изменять длину дорожки, а значит, продолжительность анимации, перетаскивая на необходимую позицию теперь уже ключевые точки. И, разумеется, вы можете удалить ненужную дорожку, выделив ее и нажав клавишу <Del> или выбрав пункт Remove Object контекстного меню или подменю Timeline меню Modify.

Ну что ж, давайте проверим свежесозданную анимацию. Нажимаем клавишу <F12>, чтобы загрузить страницу default2.htm в Web-обозревателе, и... наблюдаем совершенно неподвижное изображение. В чем же дело?

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

Ну, ничего. Это не страшно. Сейчас мы все исправим.

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

Предположим, наш заголовок будет "выплывать" из нижнего правого угла страницы и перемещаться прямо на свое законное место. Поскольку траектория его движения очень проста (прямая линия), для ее задания мы нуждаемся всего в двух ключевых точках. В первой ключевой точке заголовок находится в нижнем правом углу страницы, а во второй — в ее верхней части, там, где он и должен быть. В этих точках мы и должны задать параметры нашего заголовка, точнее, всего два параметра — горизонтальную и вертикальную координаты. (Наш заголовок во время движения не меняет ни размеры, ни видимость.)

Выделим первую ключевую точку, находящуюся в начале дорожки, щелкнув по ней мышью. Далее "захватим" заголовок (свободный элемент Header) мышью и переместим его в правый нижний угол страницы, в начало его траектории. Теперь выделим вторую ключевую точку. Здесь нам менять ничего не нужно, т. к. заголовок уже стоит на своем месте. Вот, собственно, и все.

На рис. 18.6 показано то, что у нас получится после всех этих манипуляций. Хорошо видна тонкая серая линия траектории, отображаемая в окне документа, если в окне документа выделен анимированный элемент Header. Причем анимированный элемент будет находиться в том месте траектории, которое мы выделим на дорожке анимации. Так, если выделить вторую ключевую точку, он перескочит на свое законное место в верхней части страницы. А если выделить какую-либо промежуточную точку между первой и второй ключевыми точками, он займет соответствующее этой точке место.

Рис. 18.6. Готовая траектория анимированного элемента (выделена первая ключевая точка)

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

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

Сделать их очень просто. Вернемся в панель Timelines и включим флажок Autoplay, расположенный в верхней части этой панели. Dreamweaver, по своему обыкновению, выдаст очередное предупреждение, что сейчас в код страницы будет добавлен соответствующий сценарий. Избавьтесь от этого предупреждения, нажав кнопку ОК; если не хотите больше его видеть, можете включить перед этим флажок Don't show me this message again. Вот теперь все на самом деле готово. Загрузите страницу в Web-обозреватель и убедитесь в этом.

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

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

Выберите свободный элемент Headershadow и добавьте его в анимацию. Как это сделать, вы уже знаете. Получившийся результат можно увидеть на рис. 18.7.

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

Рис. 18.7. Две дорожки анимации

Для тени мы не будем создавать траекторию движения, т. к. она не движется, а стоит на месте. Она должна просто появляться, когда заголовок "дойдет до точки". Поэтому никуда ее не перемещайте. А просто измените параметр видимости.

Итак, в начале траектории движения заголовка (первая ключевая точка) тень должна быть невидимой. Поэтому выделите первую ключевую точку второй дорожки и задайте в редакторе свойств значение hidden для параметра Vis. Теперь тень останется невидимой до тех пор, пока мы не изменим значение параметра видимости во второй ключевой точке (конец траектории движения заголовка). Так как по умолчанию параметр Vis имеет значение inherit ("наследование" видимости у родителя), а родитель (сама Web-страница) у нас видимый, специально задавать это значение во второй ключевой точке нам не нужно. На всякий случай проверьте, что на конце временной линии тень видима (параметр Vis должен иметь значение inherit или visible).

Сохраните результат вашей работы и откройте его в Web-обозревателе. Теперь тень будет скромно "прятаться", пока не "подъедет" ее "хозяин".

 Следующим действием наш заголовок в своем пути "наверх" обходит всю Web-страницу. Это будет выглядеть эффектнее.

Сначала слегка удлиним траекторию, скажем, до 50 кадров. "Захватим" мышью вторую ключевую точку дорожки заголовка и переместим ее до соответствующего деления временной шкалы. И не забудем сделать то же самое с дорожкой элемента-тени!

Вот теперь можно и попетлять.

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

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

Но, предположим, что все это мы уже сделали. Теперь нам необходимо реализовать траекторию, что называется, в коде, поместив несколько ключевых точек на дорожку анимации. Как это сделать?

Прежде всего установите маркер выделенного кадра (см. рис. 18.5) на то деление временной шкалы, где будет находиться первая из вновь создаваемых ключевых точек. Для этого щелкните мышью по дорожке напротив нужного деления. Далее щелкните на этом месте правой кнопкой мыши и выберите в появившемся контекстном меню пункт Add Keyframe. Вы также можете выбрать одноименный пункт в подменю Timeline меню Modify или просто нажать клавишу <F6>. На дорожке в этом месте появится новая ключевая точка (рис. 18.8).

Рис. 18.8. Ключевая точка, помещенная на дорожке анимации (в данный момент выделена)

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

Остальные ключевые точки траектории помещаются на дорожку анимации точно таким же образом. Поместите их и задайте для них новое положение анимированного заголовка. Изобретите траекторию посложнее, чтобы заставить Dreamweaver работать по-настоящему. Если вы поставили ключевую точку не в том месте, в котором хотели, выделите ее и выберите пункт Remove Keyframe контекстного меню. (Также вы можете выбрать одноименный пункт в подменю Timeline меню Modify.) После этого протестируйте страницу с новой анимацией в Web-обозревателе. Вы увидите, что заголовок следует точь-в-точь по траектории, которую вы для него задали.

Рис. 18.9. Положение анимированного заголовка в новой ключевой точке

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

Создание траектории вручную, путем расстановки на дорожке анимации ключевых точек и задания новых параметров анимированного элемента в этих ключевых точках годится только для относительно простых случаев. В самом деле, создайте-ка таким образом что-либо более сложное, чем простая дуга! К тому же, даже опытный Web-дизайнер далеко не с первого раза сделает именно ту траекторию, какая ему нужна. Как раз для таких случаев Dreamweaver предоставляет замечательную возможность просто нарисовать нужную траекторию в окне документа. При этом он сам сформирует дорожку анимации и расставит на ней требуемое количество ключевых точек.

Давайте испытаем эту возможность. Только сначала выполним несколько подготовительных действий. Прежде всего, выделим последнюю ключевую точку (конец) траектории и запомним или запишем конечные координаты заголовка. Это нужно для того, чтобы впоследствии, когда мы создадим новую анимацию, точно его позиционировать. После этого удалим дорожку анимации заголовка, но оставим дорожку анимации его тени. Для этого выделим необходимую дорожку и выберем пункт Remove Object в контекстном меню. Теперь осталось только поставить заголовок в начало его предполагаемой траектории — и можно приниматься за дело.

Выделим заголовок и щелкнем по нему правой кнопкой мыши. В появившемся контекстном меню выберем пункт Record Path. Вы также можете выбрать пункт Record Path of Layer контекстного меню панели Timelines; этот пункт становится доступным, если в окне документа выделен какой-нибудь свободный элемент. Кроме того, в подменю Timeline меню Modify также доступен пункт Record Path of Layer. Как видите, Dreamweaver предоставляет вам несколько возможностей сделать свой выбор.

Что произойдет после этого? Ничего. Кроме того, что при перемещении заголовка за ним будет тянуться тонкая серая линия — Dreamweaver начнет отслеживать и записывать его траекторию. А как только вы отпустите кнопку мыши, устанавливая заголовок в конец его траектории, он создаст новую дорожку анимации. После этого вам останется только выставить координаты заголовка в его конечной точке, воспользовавшись значениями, записанными (запомненными) ранее, и "растянуть" либо "сузить" дорожку анимации тени, чтобы она была равна дорожке своего "хозяина", иначе тень будет появляться раньше или позже, чем заголовок закончит свой извилистый путь.

 

Рис. 18.10. Сложная траектория

Полученный результат можно увидеть на рис. 18.10. Сохраните страницу default2.htm, откройте ее в Web-обозревателе и посмотрите на результат ваших трудов.

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

Лекция 19

Организационный момент.

Отметить присутствующих. Сообщить тему урока. Настроить учащихся на восприятие материала.

2. Изложение нового материала.

Базовые понятия и термины

Web-сервер — компьютер и программное обеспечение на нем, распределяющее информацию по запросам в Интернете.

Домен — часть электронного адреса, состоящего обычно из нескольких полей. Является средством идентификации области ресурсов в Интернете. Домены бывают первого «ru», «corn», «net», «org», второго «firma.ru» и третьего «forum.fir-ma.ru» уровня.

DNS (Domain Name System) — система адресации доменов, обеспечивающая преобразование имени компьютера в числовой IP-адрес сети Интернет.

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

РНР, PERL — языки программирования, широко используемые для создания интерактивных динамических приложений web-сайтов. Выполняют большой спектр задач, таких как обработка текстов, работа с базами данных, работа с сетевыми протоколами и т. д.

Скрипт — файл сценария (коммуникационная программа), написанный на PERL, PHR C++, ASP и т. п.

Трафик — суммарный объем передаваемых входящих и исходящих данных между сервером (почтовым сервером, web-сайтом, FTP-сервером) и пользователем.

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

Некоторые компании, у которых есть свой IP-адрес в Интернете, размещают сер