Учебник Macromedia Dreamweaver (стр. 52 из 135)
Если вам неудобно работать со страницей в маленьком фрейме, вы всегда можете открыть эту страницу в отдельном окне документа 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).
Рис. 7.18, Готовый заголовок сайта
Теперь приступим к сведениям об авторских правах. Поставьте в нижний фрейм текстовый курсор и вызовите диалоговое окно Page Properties. Задайте опять черный цвет фона, желтый цвет текста, ярко-синий цвет гиперссылок (селектор цветов Links; цвет #00FFFF), тускло-синий цвет посещенных гиперссылок (селектор цветов Visited Links; #00CCFF) и светло-зеленый цвет активной гиперссылки (селектор цветов Active Links; #99FF00). Опять задайте нулевое значение для параметров Left Margin, Top Margin, Margin Width и Margin Height. После этого нажмите кнопку ОК.
И наберите соответствующий текст. Но лучше сделайте так. Найдите страницу default.htm старого сайта и откройте ее в Web-обозревателе. Выделите текст сведений об авторских правах, расположенный внизу этой страницы, скопируйте его в буфер обмена Windows и вставьте в нижний фрейм.
Значения по умолчанию параметров Margin Width и Margin Height фрейма слишком велики (14 пикселов). Выберите нижний фрейм в панели Frames и установите значения равными 2 пикселам. Так будет лучше.
После этого вам останется только выделить его курсивом или отформатировать как-то особо, чтобы отделить от обычного текста. (Впрочем, он и так у нас отделен от всего остального.) И, возможно, изменить размер фрейма, чтобы содержащийся в нем текст отобразился полностью. У вас получится нечто, похожее на рис. 7.19.
Рис. 7.19. Готовые сведения об авторских правах
Сохраните набор фреймов и все содержимое фреймов, выбрав пункт Save All Frames меню File. Вообще-то "сохраняться" нужно как можно чаще — запомните это.
И напоследок займемся основным содержимым. По умолчанию в этом фрейме будет отображаться страничка с приветствием и текстом, описывающим сайт. Мы возьмем этот текст опять же со страницы default.htm
Рис. 7.20. Готовое основное содержимое сайта, отображаемое по умолчанию
старого сайта. Откройте ее в 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-обозревателя и щелкните по любой гиперссылке. Что произойдет? Нечто ужасное и совершенно не то, что нам нужно. Страница, на которую ссылается гиперссылка, загрузится и займет все окно вместо того, чтобы "втиснуться" в отведенный ей фрейм. Что делать?
Цель гиперссылки
Для того чтобы гиперссылки открывали соответствующую 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, то она будет помещена в тот фрейм внешнего набора, в котором находится внутренний набор. Фактически она заменит собой весь внутренний набор фреймов.