Чертёж седьмой Фреймы

Благополучно добравшись до этой главы, можешь облегчённо вздохнуть: «Я – web-строитель!» Начинающий, неопытный… Но при желании, запасясь терпением, ты можешь создать практически любую страничку.

Всё, о чём пойдёт речь дальше, доступно профессионалам сайтостроительства. Ты желаешь себя к ним причислить? Тогда за дело!

Фрейм. Одних web-дизайнеров это слово приводит в содрогание (Очень вредная штука, никогда не пользуйтесь ею!), другие же радостно потирают руки (Это очень удобно и интересно!). Ты имеешь полное право заиметь своё собственное мнение, для этого достаточно разобраться, что это такое и как это выглядит. Итак,

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

c переименуй файл index.html в glav.htm;

c создай файл index.html и запиши в него следующий код:

< HTML>

< HEAD>

< TITLE> В гостях у Васи Петрова< /TITLE>

< FRAMESET cols=20%, *>

< FRAME src=navig.htm>

< FRAME src=glav.htm>

< /FRAMESET>

< /HEAD>

< /HTML>

Тег < FRAMESET> разбивает окно браузера на фреймы (кадры или подокна). Атрибут cols указывает, что окно разбивается на вертикальные колонки, причём ширина первой составляет 20% ширины окна, а ширина второй колонки занимает всё оставшееся пространство.

В теге < FRAME> в атрибуте src записывается, страничка из какого файла будет грузиться в соответствующий фрейм.

c создай файл navig.htm, в котором размести картинки-ссылки на все четыре странички;

c загрузи файл index.htm в браузер и посмотри, что получилось:

2. Если ты увидел что-то подобное тому, что изображено на рисунке, значит, ты пока не запутался и всё сделал правильно. Щёлкни по ссылке на главную страничку. Что такое? Получилось странно и некрасиво – страничка загрузилась не в главный (тот, который справа), а в навигационный (левый) фрейм, причём загрузилась, скорее всего, целиком с фреймами. Почему? Причины, наверняка, тебе понятны, а вот как с ними справиться? Попробуем:

c в файле index.html в тег < FRAME> добавь атрибут name, задающий имя фрейма:

< FRAME src=glav.htm name=glavnoe >

c в файле navig.htm в тег < A> добавь атрибут target, указывающий целевой кадр:

< A href=index.html target=glavnoe >

< img src=images/home.gif> < /A>

c в этом же теге исправь имя файла index.html на glav.htm (если только ты это не сделал при создании файла navig.htm – ну, тогда можешь себя поздравить – мудр не по годам):

< A href= glav.htm target=glavnoe>

< img src=images/home.gif> < /A>

c добавь атрибут target в остальные теги < A> файла navig.htm;

c обнови страничку в браузере, проверь, как работают ссылки навигационного окна (фрейма, кадра – называй, как хочешь);

c убери ненужные теперь навигационные панели со всех страничек – главной, Погромыча, Клавы и Дуси.

3. А теперь ещё раз посмотри на свою страничку, попробуй изменить размер окна браузера. Какой недостаток можно заметить при этом? Навигационный кадр, как мы и указали, занимает ровно 20% ширины окна браузера. В некоторых случаях это слишком много, а может оказаться и мало – тогда в нижней части появится полоса прокрутки. Поэтому изменим ширину левого фрейма, задав её не в процентах, а в пикселах, подобрав эту величину так, чтобы картинки комфортно поместились в кадре:

< FRAMESET cols= 90, *>

< FRAME src=navig.htm>

< FRAME src=glav.htm name=glavnoe>

< /FRAMESET>

4. Устал? Отдохни, потому что дальше тебе понадобится свежая голова. Усложним фреймовую структуру нашей странички, добавив ещё один кадр сверху для общего заголовка:

c для этого в файле index.html вместо второго тега < FRAME> вставим ещё один тег < FRAMESET>:

< HTML>

< HEAD>

< TITLE> В гостях у Васи Петрова< /TITLE>

< FRAMESET cols=90, *>

< FRAME src=navig.htm>

< FRAMESET rows=70, *>

< FRAME src=zagol.htm>

< FRAME src=glav.htm name=glavnoe>

< /FRAMESET>

< /FRAMESET>

< /HEAD>

< /HTML>

c создай файл zagol.htm, с названием твоей странички.

5. Теперь страничка будет выглядеть примерно так:

6. Задание: измени структуру фреймов так, чтобы кадр с заголовком располагался сверху:

У тега < FRAMESET> есть ещё несколько атрибутов:

border=2 задаёт толщину рамки вокруг кадров, border=0 – без рамки;

bordercolor=#ff0000 – цвет рамки.

Для тега < FRAME> можно задать следующие атрибуты:

noresize – запрещает мышкой изменять размер кадра;

scrolling=no – полоса прокрутки появляться не будет, scrolling=auto – лифт появится, если в этом возникнет необходимость.

Чувствуешь, как появляется осознание своей власти? Есть возможность что-то запретить посетителю твоей странички? Хорошо подумай, прежде чем воспользоваться этими запрещающими атрибутами. В конце концов, посетитель зашёл к тебе в гости, и ты, как радушный хозяин, должен обеспечить ему максимальный комфорт. Так что, применяй атрибуты noresize и scrolling только тогда, когда без них ну совсем никак не обойтись. А такая ситуация может возникать настолько редко, что смело можешь тут же и забыть об этих коварных атрибутах!

7. На этом наш седьмой чертёж можно считать законченным. В нём мы понатворили много дел, так что, на всякий случай, проверь, что должно (или может) быть записано в следующих файлах (в тегах < IMG> опущены такие важные атрибуты, как alt, width и height – не забудь про них):

c index.html:

< HTML>

< HEAD>

< TITLE> В гостях у Васи Петрова< /TITLE>

< FRAMESET rows=70, *>

< FRAME src=zagol.htm noresize >

< FRAMESET cols=85, * >

< FRAME src=navig.htm>

< FRAME src=glav.htm name=glavnoe>

< /FRAMESET>

< /FRAMESET>

< /HEAD>

< /HTML>

c navig.htm:

< HTML>

< BODY bgcolor=#ffddff text=#880088 link=#ff00ff

vlink=#880000>

< BR> < A href=glav.htm target=glavnoe>

< img src=images/home.gif> < /A>

< BR> < A href=pogrom.htm target=glavnoe>

< img src=images/pogrom.gif> < /A>

< BR> < A href=dusja.htm target=glavnoe>

< img src=images/dusja.gif> < /A>

< BR> < A href=klava.htm target=glavnoe>

< img src=images/klava.gif> < /A>

< /BODY>

< /HTML>

c zagol.htm:

< HTML>

< BODY bgcolor=#ffddff>

< H1 align=center> < font color=#ff0088>

Я и мои друзья< /font> < /H1>

< /BODY>

< /HTML>