Контрольная работа по предмету ИТУ
Для выполнения студентами 5 курса
Задание: Создать полноценную страницу с фреймами. (См. рисунок)
Структура:
страница с простым оформлением:
наверху будет фрейм с логотипом,
слева фрейм с меню, и
фрейм с основным содержанием будет, соответственно, располагаться справа.
Этап 1: Первым будем делать фрейм-документ <Html> <Head> <Title>Фрейм-документ</Title> </Head>
<Frameset> </Frameset>
</Html>
Создайте в папке «Студенты» новую папку и сохраните фрейм-документ как index.html. Также в той же папке сохраните рисунок, который мы будем использовать в качестве логотипа framz1.gif. Разделим страницу на две части по горизонтали. <Html> <Head> <Title>Фрейм-документ</Title> </Head>
<Frameset rows="83,*"> </Frameset>
</Html> Заметьте верхний фрейм по высоте мы сделали 83 пикселя, рассчитывая таким образом: высота картинки + 8 пикселей для того, чтобы картинка не обрезалась (75+8=83). Укажем, что в верхнем фрейме у нас будет содержаться документ banner.html (его мы создадим чуть попозже). Также добавим еще парочку тегов <FRAMESET>, т.к. мы будем делить нижний фрейм на две части. <Html> <Head> <Title>Фрейм-документ</Title> </Head> <Frameset rows="83,*"> <Frame src="banner.html"> <Frameset> </Frameset> </Frameset> </Html> Поделим нижний фрейм на две части: В правой будет располагаться документ directry.html, а в левой home.html. Эти документы мы еще не создали, поэтому пока мы не доделаем нашу работу до конца во фреймах будут сообщения об ошибках ("не найден документ"). <Html> <Head> <Title>Фрейм-документ</Title> </Head> <Frameset rows="83,*"> <Frame src="banner.html"> <Frameset cols="20%,80%"> <Frame src="directry.html"> <Frame src="home.html"> </Frameset> </Frameset> </Html>
В левом фрейме у нас будет располагаться документ с меню, то, соотвественно, документы, на которые мы будем ссылаться, будут открываться в правом фрейме с основным содержанием. Это значит, что нам надо присвоить правому фрейму какое-нибудь имя.
<Html> <Head> <Title>Фрейм-документ</Title> </Head>
<Frameset rows="83,*"> <Frame src="banner.html"> <Frameset cols="20%,80%"> <Frame src="directry.html"> <Frame src="home.html" name="main-window"> </Frameset> </Frameset>
</Html>
С работу с фрейм-документом на данный момент закончим Этап 2: Теперь очередь за banner.html. Создадим и сохраним.
<Html> <Head> <Title>Баннер</Title> </Head> <Body bgcolor="#0000FF"> </Body> </Html> Фон документа сделаем синим (#0000FF).
Посмотреть banner.html | Посмотреть index.html. Вставим картинку по центру документа. <Html> <Head> <Title>Баннер</Title> </Head> <Body bgcolor="#0000FF"> <Center><Img src="framz1.gif" width="500" height="75"></Center> </Body> </Html>
Посмотреть banner.html | Посмотреть index.html.
Откроем фрейм-документ (index.html), отключим полосу прокрутки и избавимся от полей. <Html> <Head> <Title>Фрейм-документ</Title> </Head>
<Frameset rows="83,*"> <Frame src="banner.html" scrolling="no" marginwidth="1" marginheight="1"> <Frameset cols="20%,80%"> <Frame src="directry.html"> <Frame src="home.html" name="main-window"> </Frameset> </Frameset>
</Html> Посмотрите.
Этап 3: Создадим документ с меню (directry.html). Скопируйте код и сохраните как directry.html.
<Html> <Head> <Title>Меню</Title> </Head> <Body bgcolor="#FFFFFF"> </Body> </Html>
Напишем заголовок и текст для ссылок. <Html> <Head> <Title>Меню</Title> </Head> <Body bgcolor="#FFFFFF"> <H3>Меню</H3> На главную<P> Пойди сюда<Br> Пойди туда<P> или посети<Br> Yahoo<Br> Netscape </Body> </Html>
Посмотреть directry.html | Посмотреть index.html. Пропишем ссылки <Html> <Head> <Title>Меню</Title> </Head> <Body bgcolor="#FFFFFF"> <H3>Меню</H3> <A href="home.html">На главную</A><P> <A href="here.html">Пойди сюда</A><Br> <A href="there.html">Пойди туда</A><P> или посети<Br> <A href="http://www.yahoo.com/">Yahoo</A><Br> <A href="http://home.netscape.com/">Netscape</A>
</Body> </Html>
Посмотреть directry.html | Посмотреть index.html.
Этап 4: Теперь необходимо создать документы home.html, here.html и there.html Первым будет home.html. Скопируйте и сохраните. <Html> <Head> <Title>Содержание. Главная страница.</Title> </Head> <Body bgcolor="#FFFFFF"> <H1 align="center">Вот вы и дома</H1> Добро пожаловать на мою домашнюю страничку! Она должна вам понравиться своей простотой и удобством навигации. Спасибо моему преподавателю за то, что он научил меня, как правильно создавать страницу с фреймами!<P> <Center>Оставайтесь! Наслаждайтесь!
<p>С уважением Иванов Иван</Center> </Body> </Html>
Посмотреть home.html. Следующий документ создайте таким образом: Сохраните как here.html
<Html> <Head> <Title>Сюда</Title> </Head> <Body bgcolor="#FFFFFF"> <H1 align="center">Сюда</H1> Добро пожаловать Сюда! Здесь может случится все, что угодно. Вы найдете кучу всяких интересных штучек, с которыми сможете позабавиться вдоволь. Вы когда-нибудь видели такое раньше? Я еще нет;)<P> </Body> </Html>
Посмотреть here.html.
Следующий there.html
<Html> <Head> <Title>Туда</Title> </Head> <Body bgcolor="#FFFFFF"> <H1 align="center">Туда</H1> Мне, кажется, что каждому указателю Сюда, должен противодействовать указатель Туда. Так намного интереснее и забавнее:) <P> </Body> </Html>
Посмотреть there.html.
А теперь взгляните на index.html.
Указжите в directry.html, чтобы ссылки открывались не во фрейме с меню, а во фрейме с основным содержанием. Для этого используем параметр TARGET?
<Html> <Head> <Title>Меню</Title> </Head> <Body bgcolor="#FFFFFF"> <H3>Меню</H3> <A href="home.html" target="main-window">На главную</A><P> <A href="here.html" target="main-window">Пойди сюда</A><Br> <A href="there.html" target="main-window">Пойди туда</A><P> или посети<Br> <A href="http://www.yahoo.com/" target="_top">Yahoo</A><Br> <A href="http://home.netscape.com/" target="_top">Netscape</A> </Body> </Html> Посмотрите, что получилось: index.html.
Добавим последнюю ссылку: <Html> <Head> <Title>Содержание. Главная страница.</Title> </Head> <Body bgcolor="#FFFFFF"> <H1 align="center">Вот вы и дома</H1> Добро пожаловать на мою домашнюю страничку! Она должна вам понравиться своей простотой и удобством навигации. Спасибо моему учителю Джо за то, что он научил меня, как правильно создавать страницу с фреймами!<P> <Center>Оставайтесь! Наслаждайтесь!<P> Посетите сайт о <A href="http://www.pagetutor.com/pagetutor/makapage/" target="_top"> Профессиональном Веб-дизайне</A></Center> </Body> </Html>
Вот и готовый продукт.
Поиск по сайту:
|