Создание фрейм-документа
advertisement
Создание фрейм-документа Для начала нам понадобится создать несколько HTML-документов. Откройте блокнот и скопируйте туда этот код: <Html> <Head> <Title>Моя страница с Фреймами</Title> </Head> <Body> </Body> </Html> В каждом документе мы будем писать женское имя. Почему женское? Просто в руководствах по созданию Таблиц и Форм я использовал в примерах мужские имена, теперь очередь за дамами :). <Html> <Head> <Title>Моя страница с Фреймами</Title> </Head> <Body> Lisa </Body> </Html> Создайте у себя на компьютере где-нибудь новую папку, в которой мы будем сохранять наши странички с примерами. И сохраните файл, с приведенным выше кодом, как lisa.html (Save as lisa.html). Теперь создадим второй HTML-документ: <Html> <Head> <Title>Моя страница с Фреймами</Title> </Head> <Body> Terri </Body> </Html> Сохраните его как terri.html Теперь создадим по тому же принципу еще несколько документов для Kim, Tina, Shannon, и Beth. Сохраним их. В нашей папке теперь содержится 6 отдельных HTML документов. Что ж, приступим к самому интересному :)... созданию фрейм-документа. <Html> <Head> <Title>Моя страница с Фреймами - Фреймдокумент</Title> </Head> <Body> </Body> </Html> Удалим тег <BODY>. Фрейм-документ не нуждается в нем... <Html> <Head> <Title>Моя страница с Фреймами - Фреймдокумент</Title> </Head> </Html> Тег <FRAMESET> Во фрейм-документе вместо <BODY> используется тег <FRAMESET> <Html> <Head> <Title> документ </Head> Моя страница с Фреймами - Фрейм</Title> <Frameset> </Frameset> </Html> Разделение страницы на две колонки Пропишем во фрейм-документе команду, чтобы броузер разделил страницу на две колонки, по 50 % каждая от размера окна. <Frameset cols="50%,50%"> </Frameset> Указать что должно отображаться в каждом фрейме (какие документы). <Frameset cols="50%,50%"> <Frame src="lisa.html"> <Frame src="terri.html"> </Frameset> Сохраните фрейм -документ в папку как index.html. Тег <FRAMESET> - контейнер (т.е. тег который может содержать в себе другие теги и информацию). А тег <FRAME> - нет. Это значит, что для тега <FRAMESET> не следует забывать прописывать всегда закрывающий тег </FRAMESET>, а для тега <FRAME> этого делать не нужно. Можем ли мы разделить страницу более, чем на 2 части? Да, конечно, только убедитесь, что для каждой части вы прописали документ, который она будет содержать, иначе броузер неправильно все воспримет. <Frameset cols="20%,20%,20%,20%,20%"> <Frame src="lisa.html"> <Frame src="terri.html"> <Frame src="kim.html"> <Frame src="tina.html"> <Frame src="shannon.html"> </Frameset> Разумеется, фреймы, содержащие наши документы могут быть разными по размеру. Только не забывайте, если вы делите попроцентно страницу на фреймы, в сумме все должно равняться 100%, а иначе никто не гарантирует, что броузер правильно отобразит вашу страницу. <Frameset cols="10%,20%,30%,15%,25%"> <Frame src="lisa.html"> <Frame src="terri.html"> <Frame src="kim.html"> <Frame src="tina.html"> <Frame src="shannon.html"> </Frameset> Все же вернемся к примеру, когда у нас два фрейма (документ, поделен на две равные колонки) <Frameset cols="50%,50%"> <Frame src="lisa.html"> <Frame src="terri.html"> </Frameset> Мы можем прописать 50 пикселов вместо 50%, а также мы можем использовать значок * вместо числа. Значок * обозначает, что документ во фрейме займет все оставшееся пространство. <Frameset cols="50,*"> <Frame src="lisa.html"> <Frame src="terri.html"> </Frameset> Важный момент! Представьте, что у вас разрешение экрана 800х600. Вы создаете страницу, которую делите на три фрейма. Фрейм справа будет занимать 100 пикселов, и фрейм слева - 100, а для среднего фрейма вы тоже пропишите точное значение в пикселях - 600 пикселов, рассчитывая таким образом: 800-100100=600. Этого делать ни в коем случае нельзя, потому что существуют и другие разрешения экрана. Допустим, у одного из посетителей вашего сайта оно будет 640х480. Это значит, что 100 пиксельные фреймы он увидит как 80-ти пиксельные. Поэтому, когда вы прописываете точные значения для фреймов (т.е. не в процентах), то для одного из фреймов в теге <FRAMESET> следует прописывать не какое-то точное число, а значок *. Это способствует правильному отображению фреймов на вашей странице для всех посетителей не смотря на разрешение экрана. Старайтесь всегда проверять, как выглядит ваш сайт под разными разрешениями экрана. Также есть и другие проблемы, возникающие с фреймами и связанные с тем, что у разных пользователей разное разрешение экрана. Допустим, вы разделяете вашу страницу на фреймы следующим очень популярным способом на два фрейма, ширину которых указываете в процентах: фрейм слева занимает малое пространство, т.к. в нем содержится только меню, а правый фрейм с содержанием занимает все оставшееся пространство. При просмотре на вашем компьютере, при вашем разрешении экрана все для вас будет выглядеть прекрасно, а пользователь с меньшим разрешением экрана увидит меню в обрезаном виде, пользователь с большим разрешением - увидит больше пустого пространства, чем вы предполагали в левом фрейме. Поэтому, когда вы точно знаете сколько пикселов должен занимать ваш фрейм с меню, то прописывайте для него точное значение (в пикселах, а не в процентах), чтобы не возникало этой проблемы. Итак, вернемся к нашему примеру. Есть также другие способы деления оставшегося пространства (*) <Frameset cols="50,*,2*"> <Frame src="lisa.html"> <Frame src="terri.html"> <Frame src="kim.html"> </Frameset> Сия запись обозначает, что мы делим страницу на три фрейма. Первый (Лиза) - 50 пикселов по ширине. Два других занимают все оставшееся от Лизы пространство, причем пространство занимаемое третим (Ким) фреймом в два раза больше, чем вторым (Терри). Очень важно соблюдать порядок. Помните: первый <FRAME> соответствует первому значению размера, прописанному в теге <FRAMESET> (50/Лиза), второй второму (*/Терри) и третий третьему (2*/Ким). Я знаю, что скорее всего вы это уже поняли, но на всякий случай заостряю на этом ваше внимание. Теперь допустим, что мы захотели разделить Ким пополам, по горизонтали. Как это сделать? Помните, что для любого деления мы используем тег <FRAMESET>. Значит нашим следующим шагом будет замена Ким тегом <FRAMESET>. <Frameset cols="50,*,2*"> <Frame src="lisa.html"> <Frame src="terri.html"> <Frameset> </Frameset> </Frameset> Это обозначает, что мы по-прежнему делим страницу на три фрейма. Первый (Лиза) - 50 пикселов по ширине. Два других занимают все оставшееся от Лизы пространство, причем пространство занимаемое третим фреймом в два раза больше, чем вторым (Терри). Только третью часть теперь будет занимать не Ким. Третью часть мы сейчас разделим по горизонтали, пополам. <Frameset cols="50,*,2*"> <Frame src="lisa.html"> <Frame src="terri.html"> <Frameset rows="50%,50%"> </Frameset> </Frameset> Теперь укажем кто будет жить в поделенном пополам фрейме: верхнюю часть займет у нас Ким, а нижнюю Терри. <Frameset cols="50,*,2*"> <Frame src="lisa.html"> <Frame src="terri.html"> <Frameset rows="50%,50%"> <Frame src="kim.html"> <Frame src="terri.html"> </Frameset> </Frameset> Забавно было заставить Ким ютиться с Терри. Я думаю, следует повторить. Только на этот раз мы разделим фрейм с Лизой по горизонтали на три куска. Первыйверхний будет 50 пикселов по высоте, остальные два поделят все оставшееся пространство поровну. Во всех этих трех новых комнатах мы поселим по Лизе. <Frameset cols="50,*,2*"> <Frameset rows="50,*,*"> <Frame src="lisa.html"> <Frame src="lisa.html"> <Frame src="lisa.html"> </Frameset> <Frame src="terri.html"> <Frameset rows="50%,50%"> <Frame src="kim.html"> <Frame src="terri.html"> </Frameset> </Frameset>
