Учебно-методический комплекс дисциплины дс. Ф. 1 Web-графика и web-дизайн основная образовательная программа подготовки специалиста по специальности

Скачать 3.38 Mb.

Название	Учебно-методический комплекс дисциплины дс. Ф. 1 Web-графика и web-дизайн основная образовательная программа подготовки специалиста по специальности
страница	7/7
Тип	Учебно-методический комплекс

1 2 3 4 5 6 7

Тема: Фреймовая структура сайта

Цель: научиться выполнять верстку сайта, используя фреймы
План

Создание фреймов
Свойства наборов фреймов
Создание содержимого фреймов
Гиперссылки и фреймовая структура

Создание фреймов

Рассмотрим, как создаются фреймы в Dreamweaver.

Но сначала сделайте следующее. Включите в подменю Visual Aids меню View пункт-выключатель Frame Borders. Это нужно, чтобы Dreamweaver показал нам границы наших будущих фреймов. Дело в том, что границы между фреймами могут быть невидимыми, что может создать нам немало проблем при написании текста страниц, отображаемых в этих фреймах. Если же вы выберете названный пункт, Dreamweaver будет показывать схематичные линии в тех местах, где проходят границы фреймов.

Проще всего набор фреймов можно создать, воспользовавшись вкладкой Frames панели объектов. На рис. 7.9 показаны те ее кнопки, которые нам сейчас нужны. Голубым (на рисунке — светло-серым) цветом закрашен текущий фрейм, т. е. тот, в котором в настоящий момент стоит текстовый курсор. Также можно воспользоваться пунктами подменю Frames меню Insert. В табл. 7.1 приведены описания всех кнопок вкладки Frames панели объектов и соответствующих им пунктов подменю Frames.

Рис. 7.9. Вкладка Frames панели объектов (показана частично)

Таблица 7.1. Кнопки вкладки Frames панели объектов (в порядке слева направо)


Название кнопки	Пункт подменю Frames меню Insert	Описание
Left Frame	Left	Вставляет фрейм слева от текущего (того, в котором находится текстовый курсор) в тот же набор
Right Frame	Right	Вставляет фрейм справа от текущего в тот же набор
Top Frame	Top	Вставляет фрейм выше текущего в тот же набор
Bottom Frame	Bottom	Вставляет фрейм ниже текущего в тот же набор
Bottom and Nested Left Frame	Bottom Nested Left	Вставляет фрейм ниже текущего в тот же набор, создает в текущем фрейме вложенный набор с двумя горизонтальными фреймами и делает текущим правый фрейм вложенного набора
Bottom and Nested Right Frame	Bottom Nested Right	Вставляет фрейм ниже текущего в тот же набор, создает в текущем фрейме вложенный набор с двумя горизонтальными фреймами и делает текущим левый фрейм вложенного набора
Left and Nested Bottom Frame	Left Nested Bottom	Вставляет фрейм левее текущего в тот же набор, создает в текущем фрейме вложенный набор с двумя вертикальными фреймами и делает текущим верхний фрейм вложенного набора
Right and Nested Bottom Frame	Right Nested Bottom	Вставляет фрейм правее текущего в тот же набор, создает в текущем фрейме вложенный набор с двумя вертикальными фреймами и делает текущим верхний фрейм вложенного набора
Top and Bottom Frames	Top and Bottom	Вставляет два фрейма сверху и снизу от текущего
Left and Nested Top Frame	Left Nested Top	Вставляет фрейм левее текущего в тот же набор, создает в текущем фрейме вложенный набор с двумя вертикальными фреймами и делает текущим нижний фрейм вложенного набора


Right and Nested Top Frame Top and Nested Left Frame Top and Nested Right Frame	Right Nested Top Top Nested Left Top Nested Right	Вставляет фрейм правее текущего в тот же набор, создает в текущем фрейме вложенный набор с двумя вертикальными фреймами и делает текущим нижний фрейм вложенного набора Вставляет фрейм выше текущего в тот же набор, создает в текущем фрейме вложенный набор с двумя горизонтальными фреймами и делает текущим правый фрейм вложенного набора Вставляет фрейм выше текущего в тот же набор, создает в текущем фрейме вложенный набор с двумя горизонтальными фреймами и делает текущим левый фрейм вложенного набора

Итак, давайте приступим к созданию нашего набора фреймов.

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

Теперь убедимся, что текстовый курсор стоит в нижнем фрейме, и нажмем кнопку Bottom Frame. В результате получим еще один фрейм, но расположенный на этот раз ниже текущего (рис. 7.11).

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

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

Осталось создать еще один фрейм — левый, где будет помещаться набор гиперссылок. Его мы создадим немного по-другому, для чего воспользуемся подменю Frameset меню Modify.

Рис. 7.10. Два горизонтальных фрейма

Рис. 7.11. Три горизонтальных фрейма

Там находятся следующие пункты:

Split Frame Left — создание фрейма слева от текущего;
Split Frame Right — создание фрейма справа от текущего;
Split Frame Up — создание фрейма сверху от текущего;
Split Frame Down — создание фрейма снизу от текущего.

Итак, сделайте текущим средний фрейм и выберите в подменю Frameset меню Modify пункт... правильно, Split Frame Left. Вы получите последний фрейм, который как раз и был нам нужен. Уменьшите его ширину — это делается так же, как и в случае с горизонтальными фреймами. У вас должно получиться нечто, похожее на то, что изображено на рис. 7.12

Рис. 7.12. Готовый набор фреймов

Теперь дайте готовой странице с набором фреймов название "Иван И. Иванов" и сохраните ее, выбрав пункт Save All меню File — это позволит сохранить также содержимое всех фреймов. На экране появится стандартное диалоговое окно сохранения файла Windows, предлагающее вам сохранить сам набор фреймов под именем UntitledFrameset-l.htm. Сохраните его в корневой папке нового сайта под именем default.htm.

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

Рис. 7.13. Толстая штриховая линия выделяет фрейм, чье содержимое сохраняется в данный момент

Все остальные страницы сайта сохраните в папке HTMLs. Странице со сведениями об авторских правах дайте имя Copyright.htm. Страницу, по умолчанию отображаемую во фрейме с основным содержимым, назовите Main.htm, страницу со списком гиперссылок — Nav.htm, а страницу с заголовком сайта — Header.htm.

Внимание!

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

Существует еще один способ создания фреймов. Сейчас мы с вами его рассмотрим.

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

Примечание

Наборы фреймов описываются с помощью парного тега , который должен содержать один из атрибутов: ROWS или COLS. Названные атрибуты задают список значений высоты (для тега ) или ширины (для ) всех фреймов данного набора. Сами фреймы задаются одинарным тегом . И , и поддерживают множество атрибутов, задающих различные свойства набора фреймов и самих фреймов; эти атрибуты мы рассмотрим позднее.

В частности, код, определяющий набор из двух горизонтально расположенных фреймов, верхний из которых занимает 20% пространства окна, а другой — 80%, выглядит так:

Соответственно, два вложенных набора фреймов будут выглядеть так:

Внимание!

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

Свойства наборов фреймов

Для того чтобы задать свойства наборов фреймов и отдельных фреймов, нужно сначала выбрать один из них. Лучше всего это проделывать в панели Frames. Изначально она отсутствует в доке, поэтому выберите пункт Frames в подменю Others меню Window или нажмите комбинацию клавиш +. Сама панель Frames показана на рис. 7.14.

Рис. 7.14. Панель Frames

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

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

А теперь самое время рассказать, что Dreamweaver позволяет нам сделать с наборами фреймов. Выберите в панели Frames какой-либо набор фреймов, например, самый внешний. Вид редактора свойств в этом случае показан на рис. 7.15.

Рис. 7.15. Вид редактора свойств при выделенном наборе фреймов

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

Раскрывающийся список Borders позволяет задать наличие или отсутствие границ между фреймами набора. Здесь доступны три пункта: Yes — границы есть, No — границ нет и Default — значение по умолчанию, зависящее от Web-обозревателя (как правило, границы есть).

Если вы выставили параметр Borders в Yes или Default, проверьте установки параметра Border Width. Поле ввода Border Width позволяет задать толщину границы в пикселах; если она равна нулю, то граница невидима. И наоборот, если вы выставили Borders в No, лучше установите Border Width в ноль, иначе могут быть проблемы с отображением в некоторых программах Web-обозревателей. Значение по умолчанию зависит от Web-обозревателя и операционной системы.

Селектор цвета Border Color позволяет задать цвет границы. Разумеется, чтобы этот параметр имел действие, граница между фреймами набора должна быть видимой. Значение по умолчанию зависит от Web-обозревателя (как правило, серая граница с трехмерным эффектом).

Попробуйте поэкспериментировать с этими параметрами и посмотрите, что получится.

Вообще, в настоящее время фреймы с видимыми границами считаются дурным тоном. Сейчас в моде фреймы с невидимыми или очень тонкими границами. Мы тоже сделаем такие.

Теперь обратимся к нижней части редактора свойств. Находящиеся там элементы управления позволят вам задать размеры отдельных фреймов выбранного набора.

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

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

Раскрывающийся список Units задает единицу измерения высоты или ширины фрейма. Доступны три пункта: Pixels — пикселы, Percent — проценты и Relative — все остальное пространство (аналогично вводу звездочки в поле Value).

Надо сказать, что уже при создании набора фреймов Dreamweaver достаточно "интеллектуально" подставляет значения их параметров. Поэтому вполне возможно, что вам вовсе не придется их изменять. Ну, так, может быть, чуть-чуть подправить...

Загрузите созданную ранее страницу default.htm (см. рис. 7.12), если она еще не загружена. Выберите поочередно все наборы фреймов, проверьте значения их параметров и, если нужно, измените их. Значение Borders должно быть установлено в No, толщина границ Border Width — в ноль, а поле цвета границ Border Color должно оставаться пустым. Установите высоты верхнего (заголовок) и нижнего (сведения об авторских правах) фреймов в 30 пикселов, а ширину левого фрейма — в 100 пикселов. Если потом эти фреймы окажутся малы, мы их увеличим.

Свойства фреймов

С наборами фреймов мы разобрались. А что же с самими фреймами?

Выберите в панели Frames любой фрейм, скажем, самый верхний. Редактор свойств примет вид, показанный на рис. 7.16.

Рис. 7.16. Вид редактора свойств при выделенном фрейме

В поле ввода Frame Name вводится имя фрейма. Dreamweaver по умолчанию подставляет туда автоматически сформированное имя, и часто оно оказывается весьма удачным. Но иногда его следует изменить. Например, в нашем случае лучше всего будет дать ему имя Header, обозначив таким образом отображаемое в нем содержимое.

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

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

Раскрывающийся список Scroll задает, будет ли фрейм содержать полосы прокрутки. Доступны четыре пункта:

Yes — полосы прокрутки есть всегда;
No — полос прокрутки нет даже тогда, когда содержимое фрейма не помещается в нем;
Auto — полосы прокрутки появляются только тогда, когда в них появляется необходимость (содержимое фрейма не помещается в нем);
Default — значение по умолчанию, зависящее от Web-обозревателя (как правило, аналогично Auto).

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

Раскрывающийся список Borders уже вам знаком. Однако его действие распространяется только на данный фрейм. Таким образом, вы можете задать наличие или отсутствие границ и у отдельного фрейма. Пункт Default этого меню позволит вам вернуться к параметрам набора фреймов.

В селекторе цвета Border Color вы можете установить цвет границы фрейма.

Поля ввода Margin Width и Margin Height позволяют задать, соответственно, горизонтальное и вертикальное расстояния между границами фрейма и его содержимым. Значения по умолчанию — 14 пикселов.

Выберите поочередно все четыре фрейма и установите их параметры, как указано в табл. 7.2. Остальные параметры оставьте в положении по умолчанию.

Таблица 7.2. Параметры фреймов нашего набора


Фрейм	Frame Name	Scroll	No Resize
Верхний (заголовок сайта)	Header	No	*
Левый (набор гиперссылок)	Nav	No	*
Основной (основное содержимое сайта)	Main	Auto	*
Нижний (сведения об авторских правах)	Copyright	No	*

Установив параметры наборов фреймов и самих фреймов, сохраните страницу, выбрав пункт Save Frameset в меню File или нажав комбинацию клавиш +.

Примечание

Имя фрейма задается атрибутом NAME тега . Адрес Web-страницы, которая будет в нем отображаться, задается атрибутом SRC этого же тега. Остальные атрибуты перечислены в электронном руководстве по HTML, поставляемом в составе Dreamweaver.

Создание содержимого фреймов

Создав набор фреймов и установив все параметры, можно приступать к наполнению фреймов содержимым.

Давайте используем белый или светло-желтый текст на черном или темно-сером фоне. Гиперссылки при этом выделяются интенсивно-желтым или слабо-красным цветом.

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

Если вам неудобно работать со страницей в маленьком фрейме, вы всегда можете открыть эту страницу в отдельном окне документа Dreamweaver.

Заполнение фреймов

Сначала займемся верхним фреймом, содержащим заголовок сайта. Мы поместим в него имя нашего героя, выровненное по центру фрейма. Для этого используем таблицу из одной ячейки, занимающую все свободное пространство фрейма. Но сначала уберем промежутки между границей фрейма и его содержимым, устанавливаемые по умолчанию. Для чего выделите верхний фрейм в панели Frames и установите параметры Margin Width и Margin Height равными нулю. Это позволит нам отвести нашей таблице действительно все свободное пространство.

Теперь задайте цвета текста и фона страницы (гиперссылок здесь не будет). Поместите во фрейм текстовый курсор и вызовите диалоговое окно Page Properties (выберите пункт Page Properties в меню Modify или контекстном меню или нажмите комбинацию клавиш +). Задайте черный цвет фона (селектор цвета Background) и желтый цвет текста (селектор цвета Text). Также задайте нулевое значение для параметров Left Margin, Top Margin, Margin Width и Margin Height (расстояния от границы окна до границы содержимого страницы) и нажмите кнопку ОК. Название страницы можно не задавать — все равно в любом случае Web-обозреватель выведет в заголовке своего окна название страницы набора фреймов.

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

Введите в ячейку текст "Петров Петр Петрович". Установите подходящий размер шрифта. Поэкспериментируйте с разными шрифтами. У вас получилось следующее (рис. 7.18).

Рис. 7.18, Готовый заголовок сайта

Теперь приступим к сведениям об авторских правах. Поставьте в нижний фрейм текстовый курсор и вызовите диалоговое окно Page Properties. Задайте опять черный цвет фона, желтый цвет текста, ярко-синий цвет гиперссылок (селектор цветов Links; цвет #00FFFF), тускло-синий цвет посещенных гиперссылок (селектор цветов Visited Links; #00CCFF) и светло-зеленый цвет активной гиперссылки (селектор цветов Active Links; #99FF00). Опять задайте нулевое значение для параметров Left Margin, Top Margin, Margin Width и Margin Height. После этого нажмите кнопку ОК.

И наберите соответствующий текст.

Значения по умолчанию параметров Margin Width и Margin Height фрейма слишком велики (14 пикселов). Выберите нижний фрейм в панели Frames и установите значения равными 2 пикселам. Так будет лучше.

После этого вам останется только выделить его курсивом или отформатировать как-то особо, чтобы отделить от обычного текста. (Впрочем, он и так у нас отделен от всего остального.) И, возможно, изменить размер фрейма, чтобы содержащийся в нем текст отобразился полностью. У вас получится нечто, похожее на рис. 7.19.

Рис. 7.19. Готовые сведения об авторских правах

Сохраните набор фреймов и все содержимое фреймов, выбрав пункт Save All Frames меню File.

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

Рис. 7.20. Готовое основное содержимое сайта, отображаемое по умолчанию

В свойствах страницы основного содержимого укажите те же параметры, что и для страницы со сведениями об авторских правах. Значения параметров Margin Width и Margin Height для фрейма не меняйте. Далее переключитесь в окно Web-обозревателя, где открыта страница default.htm старого сайта, выделите весь текст вплоть до сведений об авторских правах, скопируйте его в буфер обмена Windows и вставьте во фрейм основного содержимого сайта. Немного подредактируйте текст, в частности уберите цветовое выделение слов "Macromedia Dreamweaver MX", преобразуйте библиотечный элемент в обычный текст и удалите наконец давно не нужный комментарий.

В результате у вас должно получиться то, что показано на рис. 7.20.

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

Но сначала создадим остальные страницы нашего сайта.

Создание остальных страниц сайта

Возьмите за образец страничку основного содержимого сайта Main.htm и делайте остальные страницы, держа ее перед глазами. Вы даже можете просто открыть страницу Main.htm в отдельном окне Dreamweaver, удалить весь текст и ввести новый. Только не сохраняйте страницу! А сделайте так: выберите пункт Save As в меню File или нажмите комбинацию клавиш ++. На экране появится диалоговое окно сохранения файла Windows; введите новое имя файла и нажмите кнопку ОК. Все — теперь вы сохранили новую страницу под новым именем.

Имена файлов новых страниц сделайте такими же, как у файлов страниц старого сайта. А именно:

странице сведений об авторе дайте имя About.htm;

странице ссылок — Links.htm;

странице со списком увлечений — Passions.htm;

странице со списком проектов — Projects.htm.

Останется только открыть страницу Main.htm и исправить гиперссылки.

Ну что, закончили? Теперь откройте страницу default.htm нового сайта в окне Web-обозревателя и щелкните по любой гиперссылке. Что произойдет? Нечто ужасное и совершенно не то, что нам нужно. Страница, на которую ссылается гиперссылка, загрузится и займет все окно вместо того, чтобы "втиснуться" в отведенный ей фрейм. Что делать?

Цель гиперссылки

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

Откройте страницу default.htm. Установите текстовый курсор на любой гиперссылке, находящейся во фрейме с основным содержимым. Пусть это будет гиперссылка, ведущая на страницу сведений об авторе About.htm. И обратите внимание на редактор свойств. А именно на раскрывающийся список Target, позволяющий задать цель гиперссылки. В развернутом виде он показан на рис. 7.21.

Рис. 7.21. Раскрывающийся список Target, содержащий имена фреймов

Вы уже знаете, что этот список позволяет задать, где будет отображаться страница, на которую указывает гиперссылка. В частности, пункт _blank этого списка позволит загрузить ее в новое окно Web-обозревателя, а пункт _self — в то же самое окно (по умолчанию). Но что мы видим на рис. 7.21? Там перечислены все созданные нами фреймы! А что если выбрать пункт Main (фрейм основного содержимого сайта)? Давайте попробуем: выберем и снова загрузим страницу в окне Web-обозревателя. Ура, гиперссылка работает как надо!

Теперь поочередно выберите каждую гиперссылку в странице и установите параметр Target в Main, за исключением гиперссылки, ведущей на сайт фирмы Macromedia, и почтовой гиперссылки: для первой установите значение _blank (пусть их сайт открывается в новом окне), а для второй оставьте все, как было — все равно для нее параметр Target роли не играет.

Теперь давайте подытожим все, что мы узнали о значениях параметра

Target:

_blank загружает страницу в новое окно Web-обозревателя;

_parent загружает страницу во фрейм набора верхнего уровня, в котором находится текущий фрейм;

_top загружает страницу в текущее окно обозревателя, т. е. эта страница после загрузки заменит собой весь набор фреймов;

_self загружает страницу в текущий фрейм (в котором находится гиперссылка);

<имя фрейма> загружает страницу в заданный фрейм.

Здесь нужны некоторые пояснения, В самом деле, чем отличаются значения _parent и _top параметра Target? А вот чем.

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

Если мы загрузим страницу со значением _parent параметра Target, то она будет помещена в тот фрейм внешнего набора, в котором находится внутренний набор. Фактически она заменит собой весь внутренний набор фреймов.

Если же мы используем значение _top параметра Target, то страница заменит собой весь наш сложный набор фреймов, т. е. займет окно Web-обозревателя целиком.

Остальные значения параметра Target в комментариях не нуждаются.

Теперь, зная, как загрузить Web-страницу в нужный фрейм, можно заняться полосой навигации.
Лабораторная работа №8

Тема: Создание полосы навигации

Цель: научиться создавать навигационную панель кнопок
Порядок выполнения работы:

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

Сделать полосу навигации с текстовыми гиперссылками проще простого. Достаточно вставить в левый фрейм таблицу из пяти строк и одного столбца, занимающую всю его ширину и высоту, вписать в ячейки нужные слова и превратить их в гиперссылки. Конечно, вы можете помудрить над таблицей: "приделать" ей границу, как было описано в главе 5, сделать графический фон и т. п. Но, согласитесь, это делается намного проще, чем графическая полоса навигации. По крайней мере не нужно заготавливать уйму графических изображений для каждой гиперссылки.

А что же графическая полоса навигации? Она делается с помощью той же таблицы. В ячейках таблицы размещаются графические изображения, выполняющие роль гиперссылок (просматривается аналогия с составным изображением). Вы можете использовать различные визуальные эффекты, например установить большие промежутки между изображениями, манипулируя параметрами Cell Padding и Cell Spacing каждой ячейки таблицы, или разместить их вплотную друг к другу. Опять же, вы можете задать для таблицы отдельный цвет фона или графический фон. В общем, все в ваших руках.

Вы можете использовать набор обычных статичных изображений для гиперссылок. Но такие статичные ссылки давно вышли из моды; вспомните, что важнейшим признаком современной Всемирной паутины являются динамичность и интерактивность. Чтобы "оживить" ваши гиперссылки, вы можете использовать надписи или кнопки Flash. Второй подход более популярен, вероятно, потому, что не требует модуля проигрывателя Flash.

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

Давайте же сделаем для нашего сайта такую полосу навигации.

Сначала заготовим набор графических изображений. На каждую гиперссылку нам понадобятся четыре изображения:

отображаемое в обычном состоянии;

отображаемое, когда пользователь помещает над ним курсор мыши;

отображаемое в "нажатом" состоянии (когда страница, на которую указывает эта гиперссылка, загружена);

отображаемое в "нажатом" состоянии, когда пользователь помещает над ним курсор мыши.

Создадим набор небольших графических изображений в любом графическом редакторе, поддерживающем формат GIF.

Создадим в папке Pics подпапку Navbar. Сохраним все полученные файлы в ней, дав им имена в соответствии со следующим соглашением:

<имя страницы >_up.gif — для изображений, отображаемых в обычном состоянии;

<имя страницы>_over.gif — для изображений, отображаемых, когда пользователь помещает над ними курсор мыши;

<имя cmpaницы>_down.gif — для изображений, отображаемых в "нажатом" состоянии;

<имя страницы>_overdown.gif — для изображений, отображаемых в "нажатом" состоянии, когда пользователь помещает над ним курсор мыши.

Всего у вас должно получиться 20 файлов изображений.

Подготовив изображения, задайте параметры Web-страницы.

Чтобы создать полосу навигации, поставьте текстовый курсор в левый фрейм и нажмите кнопку Navigation Bar (рис. 7.22) страницы Common панели объектов. Вы также можете выбрать пункт Navigation Bar подменю Interactive Images меню Insert. На экране появится диалоговое окно Insert Navigation Ваг, показанное на рис. 7.23.

Рис. 7.22. Кнопка Navigation Bar панели объектов

Рис. 7.23. Диалоговое окно Insert Navigation Bar

В списке Nav Bar Elements перечислены все элементы полосы навигации, которые уже имеются. (Изначально там находится один элемент, созданный для нас Dreamweaver.) Вы можете выбрать любой из элементов и посмотреть либо изменить его параметры.

В поле ввода Element Name вводится имя элемента. Советуем давать элементам "говорящие" имена, например Projects или Links.

В поле ввода Up Image вводится имя файла изображения, отображаемого в обычном случае. Вы также можете щелкнуть кнопку Browse, расположенную справа от поля ввода, и выбрать нужный файл в диалоговом окне открытая файла Dreamweaver. Точно так же в поле ввода Over Image вводится имя файла изображения, отображаемого, когда пользователь помещает над гиперссылкой курсор мыши, в поле Down Image — имя файла изображения "нажатой" гиперссылки, а в поле Over While Down Image — имя файла изображения "нажатой" гиперссылки, над которой пользователь поместил курсор мыши. Справа от каждого поля ввода находится спасительная кнопка Browse.

В поле ввода Alternate Text вводится альтернативный текст. К сожалению, Dreamweaver неправильно обрабатывает русские буквы, поэтому вам или придется править сам код HTML, или вводить альтернативный текст на английском, как это сделали мы.

В поле ввода When Clicked, Go To URL вводится имя файла Web-страницы, на которую осуществляется переход при щелчке на гиперссылке. В раскрывающемся списке in, расположенном справа от поля ввода, выбирается фрейм, в котором будет отображена страница. Пункт Main Window этого списка позволяет открыть страницу во всем окне.

Если вы хотите, чтобы данный элемент полосы навигации изначально отображался "нажатым", включите флажок Show "Down Image" Initially, находящийся в группе Options. В частности, его нужно включить для элемента, обозначающего начальную страницу (в нашем случае это страница Main.htm).

А вот флажок Preload Images, находящийся в этой же группе, лучше всегда держать включенным. Он указывает Dreamweaver создать код, заставляющий Web-обозреватель загружать заранее все изображения, задействованные в полосе навигации, и сохранять их на жестком диске в своем кэше. Благодаря чему подстановка нужных изображений будет происходить мгновенно, не ожидая, пока они загрузятся с сайта. В противном случае Web-обозреватель будет вынужден загружать каждое изображение непосредственно перед его отображением. С одной стороны, это позволит ускорить загрузку страницы (не нужно будет загружать все изображения полосы навигации), а с другой — замедлит реакцию полосы навигации на действия пользователя, т. к. Web-обозревателю придется каждый раз загружать с сайта нужное изображение, а не брать его с кэша.

Раскрывающийся список Insert позволит задать расположение полосы навигации: горизонтальное (пункт Horizontally) или вертикальное (пункт Vertically). Флажок Use Tables заставит Dreamweaver создать полосу навигации на основе таблиц. Этот флажок по умолчанию включен, и отключать его не стоит.

Осталось рассказать о кнопках, расположенных над списком Nav Bar Elements. Кнопка со знаком "плюс" добавляет новый элемент в полосу навигации, а кнопка со знаком "минус" удаляет выбранный в списке элемент. Кнопка вверх перемещает выбранный в списке элемент на строку выше, а кнопка вниз— на строку ниже.

Закончив формирование полосы навигации, нажмите кнопку ОК. Если вы передумали вставлять полосу навигации, нажмите кнопку Cancel.

Введите в окно вставки полосы навигации данные о пяти элементах полосы навигации согласно табл. 7.3. В поля ввода Up Image, Over Image, Down Image и Over While Down Image введите соответствующие имена файлов: если вы дали им такие имена, какие автор советовал, у вас не будет проблем с поиском необходимого файла. Проследите при этом, чтобы в раскрывающемся списке Relative To диалогового окна Select File был выбран пункт Document (отсчет интернет-адресов относительно текущей страницы) — задание адресов от корневой папки сайта работает только под программой Web-сервера. Элементы должны быть введены в таком порядке, в каком они перечислены в таблице. (Это общепринятый порядок перечисления элементов полосы навигации в подобных сайтах.)

Таблица 7.3. Данные полосы навигации

Страница

Element Name

When Clicked, Go To URL

Главная

Main

Main . htm

Проекты

Projects

Projects.htm

Увлечения

Passions

Passions.htm

Ссылки

Links

Links . htm

Об авторе

About

About . htm

В раскрывающемся списке in должен быть выбран пункт Main (имя фрейма основного содержимого сайта). Для элемента Main (страница основного содержимого сайта, отображаемая по умолчанию) включите флажок Show "Down Image" Initially, т. к. он должен быть по умолчанию "нажатым". В раскрывающемся списке Insert выберите пункт Vertical, т. к. полоса навигации в нашем случае должна быть вертикальной. Остальные элементы управления не трогайте. После этого нажмите кнопку ОК.

Осталось немного подредактировать фрейм и его содержимое вручную. Установите значения параметров Margin Width и Margin Height для фрейма в ноль, чтобы не было этих отвратительных отступов слева и сверху. Потом выделите таблицу и установите параметр Width в 100%, чтобы она заняла всю ширину фрейма. Осталось выделить все ячейки таблицы и выставить параметр Horz в Center, a Vert — в Middle. Вы помните, что обозначают эти параметры?

Посмотрите на рис. 7.24. Как видите, Dreamweaver здорово постарался, сделав за нас всю сложную работу по созданию "живой" полосы навигации. Если вы просмотрите сгенерированный им HTML-код, то увидите, как много работы пришлось ему проделать: сформировать таблицу, разместить в ней все указанные вами графические изображения, превратить их в гиперссылки и — главное — создать сценарии, которые будут ими управлять. Согласитесь, вручную такое не сразу сделаешь.

Рис. 7.24. Готовая полоса навигации

Теперь сохраните все фреймы, выбрав пункт Save All Frames в меню File. И откройте страницу в окне Web-обозревателя. Попробуйте поместить курсор мыши над каким-нибудь элементом полосы навигации и посмотрите, что получится. Пощелкайте по нему.

Как видите, даже очень сложные вещи делаются в Dreamweaver исключительно просто. Например, полоса навигации с активными изображениями для начинающего Web-дизайнера — весьма сложная задача: нужно хорошо знать не только язык описания Web-страниц HTML, но и язык написания сценариев JavaScript. И если с HTML, как правило, проблем нет, то с JavaScript — есть...

Хорошо! Мы сделали полосу навигации и поместили ее во фрейме. Но сайт наш, как и все на свете, изменяется. Что если нам вдруг понадобится добавить новый элемент или изменить графические изображения? Для этого просто выделите полосу навигации (любой ее элемент) и выберите в меню Modify пункт Navigation Bar. На экране появится диалоговое окно Modify Navigation Ваг, аналогичное уже знакомому вам окну Insert Navigation Bar (см. рис. 7.23), в котором вы сможете изменить все, что нужно.

Лабораторная работа №9

Тема: Каскадные таблицы стилей

Цель работы: получение опыта работы со стилями оформления текста, а также других элементов HTML документов

Пример 1

Example

Привет! Добро пожаловать на мою страничку!

Скоро ожидается

В стадии разработки

Пример 2:

Example Of Global Style Sheets

Этот заголовок написан крупным красным курсивом

Вот это слово - синие, a это - жирное!

Задание

Наберите приведенные примеры и сохраните их в соответствующих файлах.

Создайте на диске два файла и проверьте как они работают:

Фаил [default2.css]

body {background:black;color:red;font-size:9pt}

h1 {color:white}

a:link,a:visited {color:green}

a:hover,a:active {color:red}

.red {background-color:red;color:green}

.green {background-color:green; color:red}
Фаил [example2.html]

Создание HTML документов. Часть вторая

Лабораторная работа. Каскадные таблицы стилей

Содержание

Список определений

Очень сложная таблица

Список определений

HTTP

Протокол передачи гипертекста (HyperText Transfer Protocol)

HTML

Язык разметки гипертекста (HyperText Mark-up Language)

Вернуться к содержанию

Очень сложная таблица

Пример очень сложной таблицы
Столбец №1 Столбец №2 Столбец №3 Столбец №4
Ячейка №1 Ячейки №2 и №6 Ячейка №3 Ячейка №4
Ячейка №5 Ячейка №7 Ячейка №8
Ячейка №9 Ячейки №10 и №11 и №12

Вернуться к содержанию

1 2 3 4 5 6 7

	Фгбоу впо мггу учебно-методический комплекс дисциплины Основная образовательная программа подготовки специалиста по специальности (специальностям)		Учебно-методический комплекс дисциплины сд. Ф. 26 (сд 26) «Вербальные... Основная образовательная программа подготовки специалиста по специальности (специальностям)
	Учебно-методический комплекс дисциплины сд. Ф. 2 Логопедия дс. 2... «Специальная дошкольная педагогика и психология» с дополнительной специальностью «Логопедия»		Учебно-методический комплекс дисциплины опд. В 1 Особенности работы... Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования
	Учебно-методический комплекс дисциплины дс работа социального педагога... Автор – составитель программы: Т. Д. Тегалева, старший преподаватель кафедры социальной работы и организации работы с молодёжью		Учебно-методический комплекс дисциплины сд. Ф. 12 Общая экономическая... Россия, научить оценивать и прогнозировать происходящие в мире процессы, а также процессы, происходящие в его субрегионах, странах...
	Учебно-методический комплекс дисциплины дс. Ф. 2 Интернет технологии... Целью преподавания дисциплины является ознакомление студентов с понятием информационные ресурсы, общей характеристикой процессов...		Учебно-методический комплекс дисциплины cд. В. 02. 1 Автоматизированный... Цель курса: обучение студентов ведению бухгалтерского учета в системе 1С: Предприятие, обучение программированию в системе 1С: Предприятие,...
	Учебно-методический комплекс дисциплины гсэ. Ф1 Иностранный язык... Автор программы: старший преподаватель кафедры иностранных языков и методики преподавания Квасюк Е. Н		Учебно-методический комплекс дисциплины сд. Ф. 8 Практикум по инстранному... Рецензенты: Беличенко Е. А., к ф н., доцент зав каф англ языка и английской филологии мгпу

Учебно-методический комплекс дисциплины дс. Ф. 1 Web-графика и web-дизайн основная образовательная программа подготовки специалиста по специальности

Лабораторная работа №9

Тема: Каскадные таблицы стилей

Цель работы: получение опыта работы со стилями оформления текста, а также других элементов HTML документов

Этот заголовок написан крупным красным курсивом

Задание

Лабораторная работа. Каскадные таблицы стилей

Список определений

Очень сложная таблица

Похожие: