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

Когда шаблон окончательно подготовлен (на самом деле, наш шаблон еще не готов, но об оставшихся моментах мы поговорим чуть позднее) и сохранен, можно приступать к созданию веб-страниц сайта на его основе. Для создания новой веб-страницы на основе шаблона выполняем команду меню File • New. Эта команда открывает уже хорошо знакомое нам диалоговое окно New Document. Только на этот раз мы откроем вкладку Templates. При этом изменится и название самого окна, теперь это — New from Templates (Новый из шаблонов). Диалоговое окно разделено, как обычно, на три области. В крайней левой области размещен список Templates for (Шаблоны для). В этом списке перечислены все имеющиеся у нас сайты. Выбираем из них наш последний сайт — piterpivo. Вместе с этим чуть левее от первого списка появится новый список Site «piterpivo», содержащий все имеющиеся шаблоны выбранного сайта. Мы выбираем первый шаблон shablonOl. В последней области диалогового окна тут же откроется окошко предварительного просмотра внешнего вида выбранного шаблона Preview.

Под окном предварительного просмотра внешнего вида шаблона расположен флажок Update page when template changes (Обновить страницу при изменении шаблона). Он установлен по умолчанию, и в этом случае вы сможете изменять на веб-странице только информацию, размещенную в изменяемых областях. Но если понадобится для данной веб-страницы внести изменения в сам шаблон, этот флажок необходимо снять. Остается только нажать кнопку Create в правом нижнем углу диалогового окна New from Template. Созданная Dreamweaver MX 2004 веб-страница на первый взгляд ничем не будет отличаться от самого шаблона или обычной веб-страницы. Та же таблица разметки, те же изображения, та же изменяемая область и т. д. Однако при перемещении указателя мыши по пространству веб-страницы мы замечаем, что указатель изменяет свой вид в разных областях этой веб-страницы. А потом выясняется, что внести изменения в данную страницу мы можем только в некоторые ее области. На остальных участках указатель мыши принимает вид перечеркнутого кружочка. При редактировании такой веб-страницы в режиме отображения HTML-кода HTML-код не изменяемых областей окажется недоступным и будет отображаться светло-серым цветом.

Если в ходе создания веб-страницы на основе шаблона возникла необходимость внести изменения в сам шаблон, то его можно открыть командой меню Modify • Templates • Open Attached Template (Изменить • Шаблоны • Открыть прикрепленный шаблон). В результате шаблон будет открыт в отдельном документе. После внесения необходимых изменений не забудьте его сохранить.

В случае когда в веб-страницу, созданную на основе шаблона, требуется внести серьезные изменения, в том числе затрагивающие не только изменяемые области, но и многие другие, можно «открепить» данную веб-страницу от шаблона. Для этого выполняем команду меню Modify • Templates • Detach from Template (Изменить • Шаблоны • Отделить от шаблона). В этом случае предоставляется возможность полностью редактировать всю веб-страницу. При этом сам шаблон не изменяется.

3. Вопросы для закрепления.

1) Что такое «шаблон»?

2) Назначение шаблона.

3) Назовите два способа создания шаблонов»

4. Домашние задание: Подготовить шаблон сайта.

Лекция 17

Тема: Свободно позиционируемые элементы

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

 

План урока.

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

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

1) Возможности свободно- позиционируемых элементов

2) Параметры управления свободно- позиционируемых элементов

3) Способы создания

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

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

Ход урока.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Внимание!

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

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

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