Macromedia Dreamweaver MX

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

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

Давайте используем для нашего сайта стильный дизайн, который сейчас в большой моде. Это белый или светло-желтый текст на черном или темно­сером фоне. Гиперссылки при этом выделяются интенсивно-желтым или слабо-красным цветом. Это выглядит довольно эффектно на фоне класси­ческих цветовых решений: темный текст на светлом фоне. Да, человечество за всю свою историю не придумало ничего лучше черных чернил и белой бумаги, но до чего же это красиво — белое на черном!

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

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

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

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

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

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

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

Untitled Document (HTMLs; Header. htm)

Иван Иванович Иванов

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

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

И наберите соответствующий текст. Но лучше сделайте так. Найдите стра­ницу default. htm старого сайта и откройте ее в Web-обозревателе. Выделите текст сведений об авторских правах, расположенный внизу этой страницы, скопируйте его в буфер обмена Windows и вставьте в нижний фрейм.

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

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

© Иванов И, И,. 2002 год.

Цитирование опубликованных на сайте материалов без разрешения автора не

Допускается.

<body> <div> <i> <font> <em>

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

Сохраните набор фреймов и все содержимое фреймов, выбрав пункт Save All Frames меню File. Вообще-то "сохраняться" нужно как можно чаще — запомните это.

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

Старого сайта. Откройте ее в Web-обозревателе, если еще не открыли или уже закрыли.

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

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

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

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

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

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

Когда мы делали наш предыдущий сайт, мы натворили столько пестрых, разнообразных по оформлению страниц, что у посетителей сайта, который мы уже опубликовали в Интернете, сейчас рябит в глазах. Хотя эту пестроту можно объяснить: мы тогда учились делать различные вещи и эксперимен­тировали на страницах нашего сайта. Но сейчас-то нам не нужно учиться элементарным вещам. Так что давайте больше не будем гнаться за пест­ротой.

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

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

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

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

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

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

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

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

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

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

Для того чтобы гиперссылки открывали соответствующую 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-страницу в нужный фрейм, можно заняться полосой навигации.

Полоса навигации

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

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

Вы, наверное, уже задали себе вопрос: зачем нужна пятая ссылка? Для страницы Main. htm. В старом сайте мы ни на одной странице не преду­смотрели ссылки для возврата на первую страницу. И зря.

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

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

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

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

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

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

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

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

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

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

□ белую надпись на черном фоне, отображаемую в обычном состоянии;

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

□ черную надпись на белом фоне, отображаемую в "нажатом" состоянии;

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

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

□ <имя страницш>_щ).%іі — для изображений, отображаемых в обычном состоянии;

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

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

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

Всего у вас должно получиться 20 файлов изображений. Что ж, вам придет­ся здорово потрудиться... (Вообще-то для таких дел лучше использовать специализированные пакеты Web-графики, например Macromedia Fireworks. Они автоматически формируют все необходимые изображения для полос навигации и создают соответствующий HTML-код и JavaScript-код, "ожив­ляющий" их. Но описание этих пакетов выходит за рамки данной книги.)

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

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

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

Insert 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 То URL вводится имя файла Web-страницы, на которую осуществляется переход при щелчке на гиперссылке. В раскры­вающемся списке in, расположенном справа от поля ввода, выбирается фрейм, в котором будет отображена страница. Пункт Main Window этого списка позволяет открыть страницу во всем окне.

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

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

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

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

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

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

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

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

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

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

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

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